/* --------------- Variables y tipografía --------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

/* ---------- Fuente Gantic ---------- */
@font-face{
    font-family: "Gantic";
    src: url("assets/Gantic-Demo.otf") format("opentype");
    font-weight: normal;
    font-style:  normal;
    font-display: swap;        /* texto visible con fallback mientras carga */
}


:root{
    --purple:#543c7d;
    --white:#fff;
    --lilac:#f4effb;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Playfair Display',serif;}
body{background:var(--white);color:var(--purple);line-height:1.4;-webkit-font-smoothing:antialiased}

/* --------------- HERO --------------- */
.hero{position:relative;height:100vh;overflow:hidden}
#hero-video{width:100%;height:100%;object-fit:cover}
.hero-overlay{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(0,0,0,.45);text-align:center;padding:0 1rem;
}
.hero-logo{max-width:680px;width:90%;height:auto;margin-bottom:2rem}
.cta{
    background:var(--white);color:var(--purple);border:none;border-radius:30px;
    padding:.85rem 2.5rem;font-size:1rem;cursor:pointer;letter-spacing:.05em;
    transition:all .3s ease
}
.cta:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.cta.small{font-size:.9rem;padding:.6rem 2rem;border-radius:24px}

/* --------------- SECCIONES COMUNES --------------- */
section{padding:4rem 1rem;margin-inline:auto;max-width:980px;text-align:center}

h2, h3 {
    font-family: "Gantic", 'Playfair Display', serif;   /* fallback incluido */
    font-weight: 400;
    letter-spacing: .04em;
    margin-bottom: 1rem;
    color: var(--purple);
    font-size: 60px;
}

/* --------------- DETALLES DEL LUGAR --------------- */
.venue p{margin-bottom:2rem}
.map-wrapper{width:100%;border:none;border-radius:0;overflow:hidden}
.map-wrapper iframe{width:100%;height:500px}
.venue{max-width:none;padding:4rem 0}   /* padding lateral = 0 → ancho total */


/* --------------- RSVP --------------- */
.rsvp-header{display:flex;align-items:center;justify-content:center;margin-bottom:2rem;position:relative}
/*.rsvp-header .floral{width:80px;height:auto}*/
/*.rsvp-header .left{margin-right:1rem}*/
/*.rsvp-header .right{margin-left:1rem;transform:scaleX(-1)} !* espejo *!*/

.floral.left{
    position:absolute;
    left:0;
}

.floral.right{
    position: absolute;
    right:0;
    margin-top:-900px;
}
.card{
    background:var(--white);padding:2rem;border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);max-width:500px;margin-inline:auto
}
form{display:flex;flex-direction:column;gap:1rem;text-align:left}
input,select{
    width:100%;padding:.75rem;border:1px solid var(--purple);
    border-radius:6px;font-size:1rem;color:var(--purple);background:var(--white)
}
label{font-weight:700;font-size:.95rem}
#dynamic-form .cta.small{align-self:center;margin-top:1rem}

/* --------------- COUNTDOWN --------------- */
.countdown{padding:3rem 1rem;background:var(--white)}
#clock{display:flex;justify-content:center;gap:3rem;font-size:3rem;font-weight:700}
#clock div{display:flex;flex-direction:column;align-items:center}
#clock small{font-size:.65rem;letter-spacing:.08em;margin-top:.3rem}

/* --------------- FOOTER --------------- */
.footer{background:#000;color:var(--white);padding:1.5rem 1rem;text-align:center;font-size:1.3rem}

/* --------------- Responsive --------------- */
@media(max-width:800px){
    .hero{height:70vh;}                 /* antes 100vh */
    #hero-video{object-position:center top;}
    .hero-logo{max-width:260px;}        /* antes 90 % */

    .floral.left{
        position:absolute;
        left:0;
        width: 200px;
        margin-top:-160px;

    }

    .floral.right{
        width: 100px;
        position: absolute;
        right:0;
        margin-top:-850px;
    }

}

iframe{
    border:0px;
}

/* ---- Partícula ---- */
.sparkle{
    z-index: 3;
    position:absolute;
    width:5px;height:5px;                      /* un pelín más grandes   */
    background:radial-gradient(circle,
    rgba(255,223,120,1) 0%,          /* núcleo dorado brillante*/
    rgba(255,223,120,.25) 60%,
    transparent 70%);
    border-radius:50%;
    filter:blur(.4px) drop-shadow(0 0 6px rgba(255,215,0,.45));
    /* ① Caída + deriva | ② Twinkle */
    animation:
            sparkle-move   var(--dur)   linear      var(--delay)  infinite,
            sparkle-twinkle 2.2s        ease-in-out var(--twdel)  infinite alternate;
    opacity:.95;
}

@keyframes sparkle-move{
    0%   {transform:translate(calc(var(--x)*-1vw), -8vh)  scale(var(--scale));}
    100% {transform:translate(calc(var(--x)*1vw), 108vh) scale(var(--scale));}
}

@keyframes sparkle-twinkle{
    from {filter:blur(.4px) drop-shadow(0 0 4px rgba(255,215,0,.25));}
    to   {filter:blur(.2px) drop-shadow(0 0 8px rgba(255,240,180,.8));}
}


/* ---------- Dress Code ---------- */
.dresscode{padding:4rem 1rem;text-align:center;background:var(--white);}
.dresscode h2{margin-bottom:1.2rem}

.dresscode .swatches{
    display:flex;justify-content:center;gap:.6rem;margin-bottom:1.2rem;list-style:none;padding:0
}
.dresscode .swatches li{
    width:34px;height:34px;border-radius:50%;background:var(--col);
    box-shadow:0 0 4px rgba(0,0,0,.15);
}

.dresscode .intro{font-size:1rem;max-width:520px;margin:0 auto 1.5rem;line-height:1.5}

.dresscode .tips{display:flex;flex-direction:column;gap:.4rem;font-size:.92rem;color:var(--purple)}
.dresscode .tips span{margin-right:.4rem}

/* Responsive tweak */
@media(max-width:600px){
    .dresscode{padding:3rem 1rem}
    .dresscode .swatches li{width:28px;height:28px}
}

.menu-note{
    font-size:1.5rem;
    color:var(--purple);          /* lila suave */
    margin: .4rem 0 1rem;
    text-align:center;
    font-weight: bold;
}

#confirm-btn{
    border: 1px solid var(--lilac);
}

#toast-zone{
    position:fixed;
    bottom:1.6rem; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; gap:.6rem;
    z-index:9999;
    text-align: center;
}
.toast{
    background:var(--lilac);
    color:var(--purple);
    padding:.8rem 1.3rem;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    font-size:3rem;
    animation:slideUp .4s ease, fadeOut .4s ease 3.8s forwards;
}
@keyframes slideUp{from{opacity:0;transform:translateY(25px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeOut{to{opacity:0;}}
.toast.success{border-left:4px solid #4caf50;}
.toast.error  {border-left:4px solid #f44336;}


@media(max-width:600px){
    .toast{
        font-size:2rem;
        padding:1rem 4rem;
    }
}