/* ==========================================
   Sara XV Luxury Signature Edition V4
   Archivo 4: signature-edition.css
   ========================================== */

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

/* ==========================================
   FONDO EDITORIAL
   ========================================== */

body{
    background:
        radial-gradient(
            circle at top left,
            rgba(123,15,30,.04),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(200,162,74,.05),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            var(--ivory) 0%,
            var(--paper) 100%
        );
}

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

.section{
    position:relative;
}

.section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(200,162,74,.5),
        transparent
    );
}

/* ==========================================
   ENCABEZADOS
   ========================================== */

.section-header p{
    font-family:'Cinzel', serif;
    text-transform:uppercase;
    letter-spacing:.35rem;
    color:var(--gold);
}

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

/* ==========================================
   TARJETAS PREMIUM
   ========================================== */

.message-card,
.event-card,
.dresscode-card,
.envelope-card,
.rsvp-form{
    background:
        linear-gradient(
            rgba(255,255,255,.98),
            rgba(250,245,238,.96)
        );

    border:1px solid rgba(200,162,74,.22);

    border-radius:30px;

    box-shadow:
        0 22px 55px rgba(0,0,0,.06);

    position:relative;

    overflow:hidden;
}

.message-card::before,
.event-card::before,
.dresscode-card::before,
.envelope-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );
}

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

.message-card{
    padding:60px;
}

.message-card p{
    font-size:1.32rem;
    line-height:2;
}

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

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

.gallery-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
}

.gallery-item:first-child{
    grid-row:span 2;
}

.gallery-item{
    border-radius:26px;
    overflow:hidden;
    background:white;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:
        contrast(1.04)
        saturate(1.08);
    transition:
        transform .7s ease,
        filter .7s ease;
}

.gallery-item:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.gallery-item:hover img{
    transform:scale(1.08);
    filter:
        contrast(1.08)
        saturate(1.14)
        brightness(1.03);
}

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

.count-box{
    background:white;
    border:1px solid rgba(200,162,74,.18);
    box-shadow:0 18px 40px rgba(0,0,0,.05);
}

.count-box span{
    color:var(--wine);
}

.count-box small{
    font-family:'Cinzel', serif;
    letter-spacing:.08rem;
}

/* ==========================================
   EVENTO
   ========================================== */

.event-card{
    max-width:760px;
    margin:0 auto;
    padding:55px;
    text-align:center;
}

.event-card p{
    font-size:1.2rem;
    margin-bottom:12px;
}

/* ==========================================
   DRESS CODE
   ========================================== */

.dresscode-card{
    max-width:760px;
    margin:0 auto;
    padding:60px;
    text-align:center;
}

.dresscode-card p{
    font-size:1.28rem;
    line-height:2;
}

.dresscode-card strong{
    color:var(--wine);
}

.dresscode-card::after{
    content:"Color reservado para la protagonista de esta noche";
    display:inline-block;
    margin-top:28px;
    padding:12px 24px;
    border-radius:999px;
    border:1px solid rgba(200,162,74,.35);
    color:var(--wine);
    font-family:'Cinzel', serif;
    font-size:.82rem;
    letter-spacing:.08rem;
    background:rgba(255,255,255,.65);
}

/* ==========================================
   LLUVIA DE SOBRES
   ========================================== */

.envelope-card{
    max-width:700px;
    margin:0 auto;
    padding:55px;
    text-align:center;
}

.envelope-card p{
    font-size:1.25rem;
}

/* ==========================================
   RSVP
   ========================================== */

.rsvp-form{
    max-width:760px;
    margin:0 auto;
    padding:55px;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{
    width:100%;
    padding:18px 20px;
    margin-bottom:20px;
    border:1px solid rgba(200,162,74,.22);
    border-radius:16px;
    background:white;
    font-family:'Cormorant Garamond', serif;
    font-size:1.15rem;
    color:var(--text);
}

.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(200,162,74,.12);
}

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

.footer{
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );
}

.footer::after{
    content:"";
    position:absolute;
    bottom:-40px;
    right:-40px;
    width:220px;
    height:220px;
    background:url('../assets/images/roses-bottom-right.svg')
        center/contain no-repeat;
    opacity:.10;
}

.footer-monogram{
    border-color:var(--gold);
}

.footer h2{
    font-family:'Italianno', cursive;
    font-size:4rem;
    color:white;
}

.footer p{
    color:#F4E7DE;
}

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

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

@media(max-width:900px){

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

    .gallery-item:first-child{
        grid-row:auto;
    }

}

@media(max-width:768px){

    .message-card,
    .event-card,
    .dresscode-card,
    .envelope-card,
    .rsvp-form{
        padding:38px 24px;
        border-radius:24px;
    }

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

    .message-card p,
    .dresscode-card p,
    .event-card p,
    .envelope-card p{
        font-size:1.15rem;
    }

    .footer h2{
        font-size:3.2rem;
    }

}