/* ==========================================
   Sara XV Luxury Signature Edition V4
   Archivo 2: styles.css
   ========================================== */

:root{
    --wine:#7B0F1E;
    --wine-dark:#4D0812;
    --gold:#C8A24A;
    --gold-light:#E8D08A;
    --ivory:#FCF8F3;
    --paper:#F6EFE6;
    --text:#45342E;
    --text-light:#6B5B55;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Cormorant Garamond', serif;
    background:var(--ivory);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.8;
}

/* ==========================================
   HERO
   ========================================== */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(20,8,10,.35),
            rgba(20,8,10,.45)
        ),
        url('../assets/images/hero-placeholder.svg')
        center center / cover no-repeat;
    z-index:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top left,
            rgba(123,15,30,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(200,162,74,.12),
            transparent 40%
        );
    z-index:2;
}

.hero-content{
    position:relative;
    z-index:3;
    max-width:760px;
    width:90%;
    padding:70px 50px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:34px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
}

/* ==========================================
   TIPOGRAFÍA PRINCIPAL
   ========================================== */

.hero-title{
    font-family:'Cinzel', serif;
    text-transform:uppercase;
    letter-spacing:.35rem;
    font-size:1rem;
    color:#F8F3EC;
    margin-bottom:.6rem;
}

.hero-name{
    font-family:'Italianno', cursive;
    font-size:clamp(7rem,15vw,11rem);
    font-weight:400;
    line-height:.82;
    color:#B11226;
    text-shadow:
        0 8px 24px rgba(177,18,38,.18);
    margin:0;
}

.hero-lastname{
    font-family:'Cinzel', serif;
    text-transform:uppercase;
    letter-spacing:.22rem;
    font-size:1.45rem;
    color:#F4E7DE;
    margin-top:.4rem;
}

.hero-divider{
    width:180px;
    height:2px;
    margin:30px auto;
    background:linear-gradient(
        90deg,
        transparent,
        var(--gold-light),
        var(--gold),
        var(--gold-light),
        transparent
    );
}

.hero-quote{
    font-size:1.35rem;
    color:#F8F3EC;
    max-width:600px;
    margin:0 auto 2rem;
    font-style:italic;
}

.hero-date-wrapper{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    margin-bottom:2rem;
}

.hero-date{
    font-family:'Cinzel', serif;
    color:var(--gold-light);
    letter-spacing:.18rem;
    font-size:1rem;
}

.hero-location{
    color:#F4E7DE;
    font-size:1.15rem;
}

/* ==========================================
   BOTONES
   ========================================== */

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border-radius:999px;
    text-decoration:none;
    font-family:'Cinzel', serif;
    font-size:.95rem;
    letter-spacing:.08rem;
    transition:.35s ease;
    cursor:pointer;
}

.btn-primary{
    background:linear-gradient(
        135deg,
        var(--wine),
        #A11328
    );
    color:white;
    border:none;
    box-shadow:0 16px 36px rgba(123,15,30,.35);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 50px rgba(123,15,30,.45);
}

.btn-secondary{
    background:rgba(255,255,255,.12);
    color:white;
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px);
}

.btn-secondary:hover{
    background:rgba(255,255,255,.18);
}

/* ==========================================
   SECCIONES
   ========================================== */

.section{
    padding:100px 20px;
}

.section-header{
    text-align:center;
    margin-bottom:50px;
}

.section-header p{
    font-family:'Cinzel', serif;
    color:var(--gold);
    letter-spacing:.25rem;
    text-transform:uppercase;
    font-size:.9rem;
    margin-bottom:10px;
}

.section-header h2{
    font-family:'Cinzel', serif;
    font-size:2.4rem;
    color:var(--wine);
}

/* ==========================================
   MENSAJE
   ========================================== */

.message-card{
    max-width:760px;
    margin:0 auto;
    padding:50px;
    background:white;
    border:1px solid rgba(200,162,74,.22);
    border-radius:30px;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,.06);
}

.message-card p{
    font-size:1.28rem;
}

.signature{
    font-family:'Italianno', cursive;
    font-size:3rem;
    color:var(--wine);
    margin-top:25px;
}

/* ==========================================
   GALERÍA
   ========================================== */

.gallery-grid{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.gallery-item{
    display:block;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

/* ==========================================
   CONTADOR
   ========================================== */

.countdown{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    max-width:900px;
    margin:0 auto;
}

.count-box{
    background:white;
    border:1px solid rgba(200,162,74,.22);
    border-radius:24px;
    padding:35px 20px;
    text-align:center;
    box-shadow:0 16px 40px rgba(0,0,0,.06);
}

.count-box span{
    display:block;
    font-family:'Cinzel', serif;
    font-size:3rem;
    color:var(--wine);
}

.count-box small{
    color:var(--text-light);
    text-transform:uppercase;
    letter-spacing:.08rem;
}

/* ==========================================
   FOOTER
   ========================================== */

.footer{
    background:linear-gradient(
        180deg,
        #5A0814,
        #33040B
    );
    color:white;
    text-align:center;
    padding:80px 20px;
}

.footer-monogram{
    width:72px;
    height:72px;
    margin:0 auto 25px;
    border:1px solid var(--gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Italianno', cursive;
    font-size:2.2rem;
    color:var(--gold-light);
}

.footer h2{
    font-family:'Italianno', cursive;
    font-size:3rem;
    color:white;
    margin-bottom:10px;
}

.footer-divider{
    width:180px;
    height:1px;
    margin:25px auto;
    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );
}

.footer-family{
    color:#E8D8C8;
    font-family:'Cinzel', serif;
    letter-spacing:.08rem;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media(max-width:900px){

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .countdown{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .hero-content{
        padding:50px 28px;
    }

    .hero-title{
        font-size:.9rem;
        letter-spacing:.22rem;
    }

    .hero-name{
        font-size:6.5rem;
    }

    .hero-lastname{
        font-size:1.1rem;
        letter-spacing:.14rem;
    }

    .hero-quote{
        font-size:1.15rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .countdown{
        grid-template-columns:1fr;
    }

    .section-header h2{
        font-size:2rem;
    }

    .message-card{
        padding:35px 24px;
    }

}

/* Integración V5 */
.gallery-item{position:relative;}
#luxury-particles{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden;}
#luxury-particles .particle{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(232,208,138,.65);box-shadow:0 0 12px rgba(232,208,138,.5);animation:particleFloat linear infinite;}
@keyframes particleFloat{0%{transform:translate3d(0,30px,0);opacity:0;}15%{opacity:.8;}85%{opacity:.8;}100%{transform:translate3d(25px,-120px,0);opacity:0;}}
.floating-petal{position:fixed;top:-30px;z-index:3;pointer-events:none;font-size:1rem;opacity:.16;animation:petalFall linear forwards;}
@keyframes petalFall{to{transform:translate3d(80px,110vh,0) rotate(360deg);opacity:0;}}
body.lightbox-open{overflow:hidden;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}}