/* =========================================================
   PALETA DE COLORES
========================================================= */

:root {
    --beige: #F5F1E3;
    --beige-oscuro: #E9DFCE;
    --verde: #18564C;
    --verde-suave: #5F8F72;
    --dorado: #B77A16;
    --dorado-claro: #C99E57;
    --texto: #718386;
    --blanco: #FFFFFF;
}


/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--verde);
    background: var(--beige);
    font-family: Montserrat, sans-serif;
    font-weight: 400;
}

.site.locked {
    display: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
    cursor: pointer;
}


/* =========================================================
   PANTALLA DE ENTRADA
========================================================= */

.entry-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--beige);
}

.entry-bg {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(245, 241, 227, .80),
            rgba(245, 241, 227, .80)
        ),
        url("../assets/images/hero.svg") center/cover;

    filter: saturate(.85);
}

.entry-card {
    position: relative;
    width: min(520px, 90vw);
    padding: 60px 42px;

    text-align: center;
    color: var(--verde);

    background: rgba(255,255,255,.35);

    border: 1px solid rgba(24,86,76,.20);

    backdrop-filter: blur(8px);

    box-shadow:
        0 25px 70px rgba(24,86,76,.12);
}

.entry-card h1,
.hero h1,
.footer-names {
    font-family: "Cormorant Garamond", serif;
}

.entry-card h1 {
    font-size: 74px;
    line-height: .72;
    margin: 20px 0 28px;
    font-weight: 500;
    color: var(--verde);
}

.entry-card h1 span,
.hero h1 span {
    display: block;
}

.entry-card h1 i,
.hero h1 i {
    display: block;
    font-size: .52em;
    font-style: normal;
    margin: 12px 0;
}
.hero-date { 
    display: inline-block; 
 
    font-family: "Cormorant Garamond", serif; 
    font-size: 20px; 
    font-weight: 300; 
    letter-spacing: 7px; 
 
    color: var(--dorado); 
 
    padding: 8px 16px; 
 
    background: rgba(0, 0, 0, .18); 
 
    border: 1px solid rgba(255,255,255,.45); 
    border-radius: 3px; 
 
    text-shadow: 0 2px 8px rgba(0,0,0,.7); 
 
    backdrop-filter: blur(2px);

    margin-top: 15px;
    margin-bottom: 5px;
}
.eyebrow {
    font-size: 16px;
    letter-spacing: 10px;
    font-weight: 600;
    color: var(--dorado);
}

.entry-note {
    font-size: 12px;
    opacity: .8;
    margin: 25px 0 18px;
    color: var(--texto);
}

.entry-actions {
    display: grid;
    gap: 10px;
}
.hero-content {
    position: absolute;
    left: 40%;
    top:70%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 100%;
}


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

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 14px 22px;

    border: 1px solid transparent;
    border-radius: 30px;

    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;

    transition: .25s;
}

.btn.primary {
    background: var(--verde-suave);
    color: var(--blanco);
}

.btn.primary:hover {
    background: var(--verde);
    transform: translateY(-2px);
}

.btn.ghost {
    border-color: rgba(24,86,76,.45);
    color: var(--verde);
    background: transparent;
}

.btn.ghost:hover {
    background: var(--verde);
    color: var(--blanco);
}

.btn.dark {
    background: var(--verde);
    color: var(--blanco);
}

.btn.dark:hover {
    background: var(--verde-suave);
}

.btn.outline {
    border-color: var(--verde);
    color: var(--verde);
    background: transparent;
}

.btn.outline:hover {
    background: var(--verde);
    color: var(--blanco);
}

.btn.big {
    padding: 18px 34px;
}


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

.hero {
    min-height: 100vh;
    position: relative;

    color: var(--blanco);

    background:
        linear-gradient(
            180deg,
            rgba(24,86,76,.15),
            rgba(24,86,76,.65)
        ),
        url("../assets/images/hero.svg") center/cover;

    display: flex;
    flex-direction: column;
}

.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 24px 6%;

    z-index: 5;
}

.brand {
    font: 600 30px "Cormorant Garamond", serif;
    color: var(--blanco);
}

.brand span {
    font-size: 18px;
}

.nav-links {
    display: flex;
    gap: 28px;

    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-links a:hover {
    color: #E3BD78;
}

.menu-btn {
    display: none;
    border: 0;
    background: none;
    color: var(--blanco);
    font-size: 25px;
}

.hero-content {
    margin: auto;
    text-align: center;
    padding: 100px 20px 40px;
}

.hero h1 {
    font-size: 90px;
    line-height: .52;
    font-weight: 300;
    margin: 28px 0;

    color: var(--blanco);
}

.hero h1 i {
    font-size: .45em;
}

.hero-content p {
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.scroll {
    display: block;
    margin-top: 80px;
    font-size: 30px;
}


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

.section {
    padding: 100px 7%;
    text-align: center;
    background: var(--beige);
}

.intro {
    max-width: 1000px;
    margin: auto;
}

.ornament {
    font: 40px "Cormorant Garamond", serif;
    color: var(--dorado);
}

.intro h2,
.guests h2,
.gallery h2,
.social h2 {
    font: 500 42px "Cormorant Garamond", serif;

    max-width: 720px;
    margin: 18px auto;

    line-height: 1.1;

    color: var(--verde);
}

.lead {
    max-width: 580px;
    margin: 30px auto;

    color: var(--texto);

    line-height: 1.9;
}

.wave {
    font-size: 30px;
    color: var(--dorado);
}


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

.count-section {
    background: var(--verde);
    color: var(--blanco);

    position: relative;
    overflow: hidden;
}

.count-section:after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -220px;
    bottom: -300px;

    background: rgba(255,255,255,.05);
}

.light {
    color: #E5C98F;
}

.count-section h2 {
    font: 500 50px "Cormorant Garamond", serif;
    margin: 10px;
    color: var(--blanco);
}

.counter {
    display: flex;
    justify-content: center;

    gap: 8px;

    margin-top: 40px;
}

.counter div {
    min-width: 110px;

    padding: 20px 10px;

    border-left: 1px solid rgba(255,255,255,.35);
}

.counter div:last-child {
    border-right: 1px solid rgba(255,255,255,.35);
}

.counter strong {
    display: block;

    font: 500 55px "Cormorant Garamond", serif;

    color: var(--blanco);
}

.counter span {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =========================================================
   INVITADOS
========================================================= */

.guest-list {
    display: flex;
 
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.guest {
    padding: 14px 24px;
    border: 1px solid #D9CDB9;
    background: var(--blanco);
    font: 500 19px "Cormorant Garamond", serif;
    color: var(--verde);
    box-shadow: 0 10px 30px rgba(24,86,76,.05);
}

/* =========================================================
   EVENTOS
========================================================= */

.events { 
    background: #F1E8DA; 
} 

.section-head { 
    margin-bottom: 45px; 
    text-align: center;
} 

.section h2 { 
    font: 500 45px "Cormorant Garamond", serif; 
    margin: 10px auto; 
    color: var(--verde); 
    text-align: center;
} 

.event-grid {
    width: 100%;
    max-width: 1000px;

    margin: 45px auto 0;

    display: grid;

    grid-template-columns: 1fr;

    justify-items: center;
}

.event-card {
    width: 100%;
    max-width: 700px;

    padding: 55px 40px;

    background: var(--blanco);

    box-shadow: 0 20px 50px rgba(40,70,70,.08);

    text-align: center;
}

.event-icon {
    font-size: 36px;
    color: var(--dorado);
    margin-bottom: 20px;
}

.event-card .eyebrow {
    display: block;
    text-align: center;
}

.event-card h3 {
    font: 500 38px "Cormorant Garamond", serif;

    margin: 15px auto;

    color: var(--verde);

    text-align: center;
}

.event-card p {
    line-height: 1.6;

    margin: 8px auto;

    text-align: center;

    color: var(--texto);
}

.event-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 28px;

    flex-wrap: wrap;
}


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

.rsvp {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    max-width: 1100px;

    margin: auto;

    text-align: left;
}

.rsvp h2 {
    margin-left: 0;
}


/* =========================================================
   GALERÍA - CARRUSEL DE 15 FOTOS
========================================================= */

.gallery {
    background: var(--beige);
    overflow: hidden;
}

.gallery-carousel {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 45px auto 0;
    padding: 0 48px;
}

.gallery-grid {
    width: 100%;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 8px 24px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gallery-grid::-webkit-scrollbar {
    display: none;
}

.photo {
    flex: 0 0 245px;
    height: 300px;

    scroll-snap-align: center;

    display: block;
    overflow: hidden;

    padding: 7px;

    background: var(--blanco);

    box-shadow: 0 14px 34px rgba(24,86,76,.10);

    cursor: pointer;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.photo:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(24,86,76,.16);
}

.photo:hover img {
    transform: scale(1.04);
}

.photo-empty {
    background:
        linear-gradient(135deg, rgba(24,86,76,.04), rgba(183,122,22,.08));
}

/* Flechas */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(24,86,76,.25);
    border-radius: 50%;

    background: rgba(255,255,255,.92);
    color: var(--verde);

    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    line-height: 1;

    z-index: 3;

    box-shadow: 0 8px 22px rgba(24,86,76,.12);

    transition: .25s;
}

.gallery-arrow:hover {
    background: var(--verde);
    color: var(--blanco);
    transform: translateY(-50%) scale(1.05);
}

.gallery-prev {
    left: 2px;
}

.gallery-next {
    right: 2px;
}

/* Indicadores */
.gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;

    margin: 16px auto 0;
}

.gallery-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #AFC0B5;

    transition: .25s;
}

.gallery-dot.active {
    width: 10px;
    height: 10px;
    background: var(--verde);
}

/* =========================================================
   FIESTA
========================================================= */

.party {
    background: var(--verde);

    color: var(--blanco);
}

.party-title p {
    color: #CBDCDD;
}

.party-cards {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    max-width: 1050px;

    margin: 45px auto 0;
}

.mini-card {
    padding: 40px 28px;

    border: 1px solid rgba(255,255,255,.25);

    text-align: left;

    transition: .25s;
}

.mini-card:hover {
    background: rgba(255,255,255,.08);

    transform: translateY(-5px);
}

.mini-card > span {
    font-size: 30px;

    color: #E3BD78;
}

.mini-card h3 {
    font: 500 30px "Cormorant Garamond", serif;

    margin: 15px 0;

    color: var(--blanco);
}

.mini-card p {
    font-size: 12px;

    line-height: 1.7;

    color: #C8D8D9;

    min-height: 42px;
}

.mini-card b {
    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #E3BD78;
}


/* =========================================================
   REGALOS
========================================================= */

.gifts {
    background: var(--beige-oscuro);
}

.gifts h2 {
    max-width: 650px;

    margin: 15px auto 30px;

    color: var(--verde);
}


/* =========================================================
   REDES SOCIALES
========================================================= */

.social {
    background: var(--beige);
}

.social h2 {
    color: var(--verde);
}

.hashtag {
    display: block;

    font: 500 38px "Cormorant Garamond", serif;

    color: var(--dorado);

    margin: 28px;
}

.social .btn {
    margin: 5px;
}


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

.footer-names {
    font-size: 50px;

    color: var(--verde);
}

.footer-names i {
    font-style: normal;

    color: var(--dorado);
}

.social + footer,
footer {
    text-align: center;

    padding: 65px 20px;

    background: var(--beige);
}

.social + footer p,
footer p {
    font-size: 10px;

    letter-spacing: 1px;

    color: #819092;
}


/* =========================================================
   CONTROL DE MÚSICA
========================================================= */

.music-control {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--blanco);

    background: var(--verde);

    padding: 6px 12px 6px 6px;

    border-radius: 30px;

    box-shadow: 0 8px 25px #0002;
}

.music-control.hidden {
    display: none;
}

.music-control button {
    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 50%;

    background: var(--dorado-claro);

    color: var(--blanco);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {
    position: fixed;

    inset: 0;

    background: #000c;

    z-index: 500;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
}

.lightbox button {
    position: absolute;

    right: 30px;
    top: 20px;

    background: none;

    border: 0;

    color: var(--blanco);

    font-size: 45px;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
    position: fixed;

    left: 50%;
    bottom: 25px;

    transform: translate(-50%,20px);

    background: var(--verde);

    color: var(--blanco);

    padding: 14px 22px;

    opacity: 0;

    pointer-events: none;

    transition: .3s;

    z-index: 900;

    font-size: 12px;
}

.toast.show {
    opacity: 1;

    transform: translate(-50%,0);
}


/* =========================================================
   SUBPÁGINAS
========================================================= */

.subpage {
    min-height: 100vh;

    padding: 35px 6%;

    background:
        linear-gradient(
            180deg,
            var(--beige),
            #F8F4ED
        );

    display: flex;

    flex-direction: column;

    align-items: center;
}

.back {
    align-self: flex-start;

    color: var(--verde);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 35px;
}

.form-card,
.info-card {
    width: min(700px,100%);

    background: var(--blanco);

    padding: 55px 45px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(23,63,68,.12);
}

.form-card h1,
.info-card h1 {
    font: 500 55px "Cormorant Garamond", serif;

    color: var(--verde);

    margin: 15px 0;
}

.form-card p,
.info-card p {
    line-height: 1.8;

    color: var(--texto);
}

.form-card form {
    display: grid;

    gap: 13px;

    margin-top: 30px;
}

.form-card input,
.form-card textarea {
    padding: 16px;

    border: 1px solid #D9D0C2;

    background: #FAF8F4;

    font: inherit;

    color: var(--verde);
}

.form-card input:focus,
.form-card textarea:focus {
    outline: none;

    border-color: var(--verde);
}

.form-card textarea {
    min-height: 120px;

    resize: vertical;
}

.dress-icon {
    font-size: 60px;

    color: var(--dorado);
}

.tips {
    text-align: left;

    max-width: 520px;

    margin: 30px auto;

    line-height: 2;

    color: var(--texto);
}

.tips li {
    margin: 10px 0;
}


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

@media(max-width:750px) {

    .nav-links {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .nav.open .nav-links {
        display: flex;

        position: absolute;

        top: 70px;
        right: 5%;

        flex-direction: column;

        background: var(--beige);

        color: var(--verde);

        padding: 20px;

        box-shadow:
            0 15px 40px rgba(24,86,76,.12);
    }

    .hero h1 {
        font-size: 76px;
    }

    .entry-card h1 {
        font-size: 60px;
    }

    .section {
        padding: 75px 6%;
    }

    .intro h2,
    .guests h2,
    .gallery h2,
    .social h2,
    .section h2 {
        font-size: 35px;
    }

    .counter {
        gap: 0;
    }

    .counter div {
        min-width: 70px;
    }

    .counter strong {
        font-size: 39px;
    }

    .event-grid,
    .party-cards {
        grid-template-columns: 1fr;
    }

    .rsvp {
        display: block;

        text-align: center;
    }

    .rsvp h2 {
        margin-left: auto;
    }
    .gallery-carousel {
        padding: 0 30px;
    }

    .gallery-grid {
        gap: 12px;
        padding: 10px 4px 20px;
    }

    .photo {
        flex: 0 0 78vw;
        height: 300px;
    }

    .gallery-arrow {
        width: 38px;
        height: 38px;
        font-size: 28px;
    }

    .gallery-prev {
        left: 0;
    }

    .gallery-next {
        right: 0;
    }

    .gallery-dots {
        gap: 7px;
        flex-wrap: wrap;
        max-width: 280px;
    }


    .event-card {
        padding: 40px 22px;
    }

    .entry-card {
        padding: 45px 24px;
    }

    .form-card,
    .info-card {
        padding: 40px 25px;
    }

    .form-card h1,
    .info-card h1 {
        font-size: 43px;
    }

}
/* =========================================================
   FIRMA DEL CREADOR
========================================================= */

.developer-credit {
    margin-top: 50px;
    padding-top: 20px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    opacity: 0.65;
}

.developer-credit span {
    display: block;
    margin-bottom: 6px;
}

.developer-credit strong {
    font-weight: 100;
}


/* =========================================================
   LOGO JC - SOLUCIONES INFORMÁTICAS
========================================================= */

.developer-logo {
    margin-top: 8px;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.developer-logo img {
    width: 95px;
    max-width: 30%;
    height: auto;
    display: block;
    object-fit: contain;
}

.entry-logo {
    position: absolute;
    top: 20px;
    left: 35px;
    width: 70px;
    height: 70px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}



.developer-logoo img {
    width: 100px;
    max-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.developer-logoo img {
    width: 95px;
    max-width: 100%;
    height: auto;
    display: flex;
    object-fit: contain;
}

.entry-logoo {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 10px;
    height: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry-logoo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* =========================================================
   AJUSTE FINAL - FOOTER, FIRMA Y LOGO DEL CREADOR
========================================================= */

.social + footer,
footer {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 45px 20px 35px !important;
}

.footer-names {
    width: 100%;
    text-align: center !important;
    margin: 0 !important;
}

footer > p {
    width: 100%;
    text-align: center !important;
    margin: 8px 0 0 !important;
}

.developer-credit {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    line-height: 1.35;
}

.developer-credit span,
.developer-credit strong {
    display: block;
    width: 100%;
    text-align: center !important;
    margin: 0 0 3px !important;
}

.developer-logo {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
}

.developer-logo img {
    width: 60px !important;
    max-width: 60px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain;
}

.developer-logoo {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
}

.developer-logoo img {
    width: 60px !important;
    max-width: 60px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain;
}

@media (max-width: 750px) {
    .social + footer,
    footer {
        padding: 38px 15px 25px !important;
    }

    .developer-credit {
        margin-top: 14px !important;
    }

    .developer-logo {
        margin-top: 4px !important;
    }

    .developer-logo img {
        width: 60px !important;
        max-width: 60px !important;
    }
}