/* ==========================================================================
   Amandan Workshop - Themed Festive Styles
   Themes:
     .theme-gold  → Salsa / Afro-Cuban (gold + black)
     .theme-blue  → Reggaeton / Reparto (neon blue + navy)
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:has(body.amandan-fullscreen),
body.amandan-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

body.amandan-fullscreen { min-height: 100vh; }

body.amandan-fullscreen.amandan-theme-gold,
html:has(body.amandan-fullscreen.amandan-theme-gold) { background: #0d0d0d !important; }
body.amandan-fullscreen.amandan-theme-blue,
html:has(body.amandan-fullscreen.amandan-theme-blue) { background: #06101c !important; }

body.amandan-fullscreen .amandan-workshop-wrap { min-height: 100vh; }

/* ---------------- Theme tokens ---------------- */

.amandan-workshop-wrap.theme-gold {
    --accent:        #FFD700;
    --accent-2:      #FFA500;
    --accent-3:      #B8860B;
    --text:          #FFF8DC;
    --bg:            #0d0d0d;
    --bg-2:          #1a1a1a;
    --bg-3:          #141414;
    --sparkle-glow:  0 0 6px 2px rgba(255,215,0,0.6), 0 0 12px 4px rgba(255,165,0,0.3);
    --card-bg:       linear-gradient(135deg, rgba(255,215,0,0.08), rgba(184,134,11,0.08));
    --card-border:   rgba(255,215,0,0.2);
    --card-hover-b:  rgba(255,215,0,0.5);
    --card-hover-s:  0 8px 25px rgba(255,215,0,0.15);
    --input-border:  rgba(255,215,0,0.25);
    --input-focus-s: 0 0 0 3px rgba(255,215,0,0.15), 0 0 20px rgba(255,215,0,0.1);
    --btn-grad:      linear-gradient(135deg, #FFD700, #FFA500, #B8860B);
    --btn-text:      #1a1a1a;
    --btn-shadow:    0 8px 30px rgba(255,215,0,0.4);
    --btn-glow-1:    0 0 5px rgba(255,215,0,0.4), 0 0 15px rgba(255,215,0,0.1);
    --btn-glow-2:    0 0 15px rgba(255,215,0,0.6), 0 0 40px rgba(184,134,11,0.2);
    --modal-border:  #FFD700;
    --modal-bg:      linear-gradient(135deg, #1a1a1a, #2d2d2d);
    --modal-glow:    0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,215,0,0.1);
    --divider-line:  linear-gradient(90deg, transparent, #FFD700, transparent);
    --section-grad:  linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 50%, #0d0d0d 100%);
    --reg-grad:      linear-gradient(180deg, #0d0d0d 0%, #141414 50%, #0d0d0d 100%);
    --footer-border: rgba(255,215,0,0.1);
    --hero-fade:     linear-gradient(to bottom, transparent, #0d0d0d);
    --required:      #FF6B6B;
}

.amandan-workshop-wrap.theme-blue {
    --accent:        #4FC3F7;
    --accent-2:      #29B6F6;
    --accent-3:      #0288D1;
    --text:          #E3F2FD;
    --bg:            #06101c;
    --bg-2:          #0f1d2e;
    --bg-3:          #0a1624;
    --sparkle-glow:  0 0 6px 2px rgba(79,195,247,0.7), 0 0 12px 4px rgba(2,136,209,0.35);
    --card-bg:       linear-gradient(135deg, rgba(79,195,247,0.10), rgba(2,136,209,0.10));
    --card-border:   rgba(79,195,247,0.25);
    --card-hover-b:  rgba(79,195,247,0.55);
    --card-hover-s:  0 8px 25px rgba(79,195,247,0.20);
    --input-border:  rgba(79,195,247,0.3);
    --input-focus-s: 0 0 0 3px rgba(79,195,247,0.18), 0 0 20px rgba(79,195,247,0.12);
    --btn-grad:      linear-gradient(135deg, #4FC3F7, #29B6F6, #0288D1);
    --btn-text:      #06101c;
    --btn-shadow:    0 8px 30px rgba(79,195,247,0.45);
    --btn-glow-1:    0 0 5px rgba(79,195,247,0.45), 0 0 15px rgba(79,195,247,0.12);
    --btn-glow-2:    0 0 15px rgba(79,195,247,0.65), 0 0 40px rgba(2,136,209,0.25);
    --modal-border:  #4FC3F7;
    --modal-bg:      linear-gradient(135deg, #0f1d2e, #163049);
    --modal-glow:    0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(79,195,247,0.15);
    --divider-line:  linear-gradient(90deg, transparent, #4FC3F7, transparent);
    --section-grad:  linear-gradient(180deg, #06101c 0%, #0f1d2e 50%, #06101c 100%);
    --reg-grad:      linear-gradient(180deg, #06101c 0%, #0a1624 50%, #06101c 100%);
    --footer-border: rgba(79,195,247,0.12);
    --hero-fade:     linear-gradient(to bottom, transparent, #06101c);
    --required:      #FF8A80;
}

/* ---------------- Wrap ---------------- */

.amandan-workshop-wrap {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------------- Sparkles ---------------- */

.amandan-sparkles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: sparkle-float 4s ease-in-out infinite;
    box-shadow: var(--sparkle-glow);
}

.sparkle:nth-child(1)  { left: 5%;  top: 10%; animation-delay: 0s;    animation-duration: 3.5s; }
.sparkle:nth-child(2)  { left: 15%; top: 30%; animation-delay: 0.3s;  animation-duration: 4.2s; }
.sparkle:nth-child(3)  { left: 25%; top: 50%; animation-delay: 0.7s;  animation-duration: 3.8s; }
.sparkle:nth-child(4)  { left: 35%; top: 20%; animation-delay: 1.1s;  animation-duration: 4.5s; }
.sparkle:nth-child(5)  { left: 45%; top: 70%; animation-delay: 0.5s;  animation-duration: 3.3s; }
.sparkle:nth-child(6)  { left: 55%; top: 40%; animation-delay: 1.5s;  animation-duration: 4.0s; }
.sparkle:nth-child(7)  { left: 65%; top: 80%; animation-delay: 0.2s;  animation-duration: 3.7s; }
.sparkle:nth-child(8)  { left: 75%; top: 15%; animation-delay: 0.9s;  animation-duration: 4.3s; }
.sparkle:nth-child(9)  { left: 85%; top: 60%; animation-delay: 1.3s;  animation-duration: 3.6s; }
.sparkle:nth-child(10) { left: 95%; top: 35%; animation-delay: 0.6s;  animation-duration: 4.1s; }
.sparkle:nth-child(11) { left: 10%; top: 75%; animation-delay: 1.7s;  animation-duration: 3.4s; }
.sparkle:nth-child(12) { left: 20%; top: 45%; animation-delay: 2.0s;  animation-duration: 4.4s; }
.sparkle:nth-child(13) { left: 30%; top: 85%; animation-delay: 0.4s;  animation-duration: 3.9s; }
.sparkle:nth-child(14) { left: 40%; top: 55%; animation-delay: 1.8s;  animation-duration: 3.2s; }
.sparkle:nth-child(15) { left: 50%; top: 25%; animation-delay: 2.3s;  animation-duration: 4.6s; }
.sparkle:nth-child(16) { left: 60%; top: 90%; animation-delay: 0.8s;  animation-duration: 3.5s; }
.sparkle:nth-child(17) { left: 70%; top: 5%;  animation-delay: 1.6s;  animation-duration: 4.2s; }
.sparkle:nth-child(18) { left: 80%; top: 65%; animation-delay: 2.1s;  animation-duration: 3.8s; }
.sparkle:nth-child(19) { left: 90%; top: 45%; animation-delay: 0.1s;  animation-duration: 4.0s; }
.sparkle:nth-child(20) { left: 50%; top: 50%; animation-delay: 1.4s;  animation-duration: 3.6s; }

@keyframes sparkle-float {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0); }
    10%      { opacity: 1; transform: translateY(-10px) scale(1); }
    50%      { opacity: 0.8; transform: translateY(-40px) scale(0.8); }
    90%      { opacity: 0.2; transform: translateY(-80px) scale(0.3); }
}

/* ---------------- Hero ---------------- */

.amandan-hero {
    position: relative;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    background: #000;
}

.amandan-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: var(--hero-fade);
    z-index: 3;
}

.amandan-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ---------------- Sections ---------------- */

.amandan-section {
    position: relative;
    z-index: 2;
    padding: 60px 20px;
    background: var(--section-grad);
}

.amandan-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ---------------- Text ---------------- */

.amandan-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
    line-height: 1.3;
    text-transform: uppercase;
}

.theme-gold .amandan-shimmer {
    background: linear-gradient(90deg, #FFD700 0%, #FFF8DC 25%, #FFD700 50%, #FFA500 75%, #FFD700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

.theme-blue .amandan-shimmer {
    background: linear-gradient(90deg, #4FC3F7 0%, #E3F2FD 25%, #4FC3F7 50%, #0288D1 75%, #4FC3F7 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer { to { background-position: 200% center; } }

.amandan-subtitle {
    font-size: 1.3rem;
    color: var(--text);
    font-style: italic;
    margin-bottom: 5px;
    opacity: 0.9;
}

.amandan-cta-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 30px;
    animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.amandan-details-text {
    text-align: left;
    margin: 0 auto 40px;
    max-width: 650px;
}

.amandan-details-text p {
    font-size: 1.05rem;
    margin-bottom: 15px;
    line-height: 1.8;
    color: var(--text);
    padding-left: 10px;
    border-left: 3px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.amandan-details-text p:hover {
    border-left-color: var(--accent);
}

.amandan-ready {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 30px;
}

/* ---------------- Info cards ---------------- */

.amandan-info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.amandan-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.amandan-card:hover {
    border-color: var(--card-hover-b);
    transform: translateY(-3px);
    box-shadow: var(--card-hover-s);
}

.amandan-card-icon { font-size: 2rem; margin-bottom: 8px; }

.amandan-card-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-3);
    margin-bottom: 5px;
}

.amandan-card-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.amandan-card-time {
    margin-top: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--accent);
    text-align: center;
}

/* ---------------- Mid-page register CTA ---------------- */

.amandan-register-cta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 10px 20px 40px;
    background: var(--bg);
}

.amandan-btn-register-cta {
    text-decoration: none;
}

/* ---------------- Divider ---------------- */

.amandan-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    z-index: 2;
    background: var(--bg);
}

.amandan-divider-line {
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: var(--divider-line);
}

.amandan-divider-icon {
    font-size: 2rem;
    margin: 0 20px;
    animation: flag-wave 2s ease-in-out infinite;
}

@keyframes flag-wave {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

/* ---------------- Form ---------------- */

.amandan-registration { background: var(--reg-grad); }

.amandan-form {
    max-width: 500px;
    margin: 30px auto 0;
    text-align: left;
}

.amandan-form-group { margin-bottom: 24px; }

.amandan-form-group label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.amandan-form-group label .required { color: var(--required); }

.amandan-form-group input {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    color: var(--text);
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.amandan-form-group input::placeholder { opacity: 0.45; }

.amandan-form-group input:focus {
    border-color: var(--accent);
    box-shadow: var(--input-focus-s);
    background: rgba(255, 255, 255, 0.08);
}

.amandan-form-error {
    background: rgba(255, 107, 107, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: var(--required);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: center;
}

/* ---------------- Button ---------------- */

.amandan-btn {
    display: inline-block;
    padding: 16px 48px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--btn-text);
    background: var(--btn-grad);
    background-size: 200% auto;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    animation: btn-glow 2.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.amandan-btn::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.amandan-btn:hover::before { transform: translateX(100%); }
.amandan-btn:hover         { transform: scale(1.05); background-position: right center; box-shadow: var(--btn-shadow); }
.amandan-btn:active        { transform: scale(0.98); }
.amandan-btn:disabled      { opacity: 0.6; cursor: not-allowed; animation: none; }
.amandan-btn-submit        { width: 100%; margin-top: 10px; }

@keyframes btn-glow {
    0%, 100% { box-shadow: var(--btn-glow-1); }
    50%      { box-shadow: var(--btn-glow-2); }
}

/* ---------------- Modal ---------------- */

.amandan-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modal-in 0.4s ease;
}

.amandan-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.amandan-modal-content {
    position: relative;
    background: var(--modal-bg);
    border: 2px solid var(--modal-border);
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    box-shadow: var(--modal-glow);
}

.amandan-modal-sparkles {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.amandan-modal-content h2 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 8px;
}

.modal-subtitle {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 20px;
    opacity: 0.9;
}

.modal-event-info {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    font-size: 0.95rem;
    line-height: 1.8;
}

.modal-welcome {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    margin: 15px 0 25px;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------------- Footer ---------------- */

.amandan-footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 30px 20px;
    background: var(--bg);
    border-top: 1px solid var(--footer-border);
    color: var(--text);
    opacity: 0.75;
    font-size: 0.85rem;
}

/* ---------------- Responsive ---------------- */

@media (min-width: 768px) {
    .amandan-title       { font-size: 2.8rem; }
    .amandan-subtitle    { font-size: 1.5rem; }
    .amandan-cta-text    { font-size: 1.8rem; }
    .amandan-details-text p { font-size: 1.15rem; }
    .amandan-info-cards  { grid-template-columns: repeat(3, 1fr); }
    .amandan-section     { padding: 80px 40px; }
    .amandan-card        { padding: 28px 20px; }
    .amandan-modal-content { padding: 60px 50px; }
}

@media (min-width: 1024px) {
    .amandan-title        { font-size: 3.2rem; }
    .amandan-container    { max-width: 900px; }
    .amandan-details-text { max-width: 750px; }
}

/* ---------------- Back-to-home button ---------------- */

.amandan-back-home {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--btn-text);
    background: var(--btn-grad);
    background-size: 200% auto;
    border-radius: 999px;
    box-shadow: var(--btn-glow-1);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.4s ease;
}

.amandan-back-home:hover {
    transform: translateX(-3px) scale(1.03);
    background-position: right center;
    box-shadow: var(--btn-shadow);
    color: var(--btn-text);
    text-decoration: none;
}

.amandan-back-home-label {
    display: inline;
}

@media (max-width: 520px) {
    .amandan-back-home {
        padding: 9px 12px;
        font-size: 0.8rem;
    }
    .amandan-back-home-label {
        display: none;
    }
}

.amandan-footer-home {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.amandan-footer-home:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

html { scroll-behavior: smooth; }

.amandan-workshop-wrap.theme-gold ::selection { background: rgba(255, 215, 0, 0.3); color: #FFF8DC; }
.amandan-workshop-wrap.theme-blue ::selection { background: rgba(79, 195, 247, 0.3); color: #E3F2FD; }

@media (prefers-reduced-motion: reduce) {
    .sparkle,
    .amandan-shimmer,
    .amandan-cta-text,
    .amandan-btn,
    .amandan-divider-icon {
        animation: none !important;
    }
    .theme-gold .amandan-shimmer { -webkit-text-fill-color: #FFD700; }
    .theme-blue .amandan-shimmer { -webkit-text-fill-color: #4FC3F7; }
}