/* =========================================================
   VARIABLES
========================================================= */

:root {

    /* Paleta principal */
    --olive-dark: #4A5138;
    --olive: #68724A;
    --olive-light: #909A72;
    --sage: #B6BCA1;

    /* Neutros cálidos */
    --ivory: #F8F5EE;
    --cream: #EFE9DD;
    --white: #FFFFFF;

    /* Tierra */
    --beige: #D8CCB8;
    --brown: #766552;

    /* Texto */
    --text-dark: #35372F;
    --text-soft: #696A61;

    /* Tipografías */
    --font-title: "Cormorant Garamond", Georgia, serif;
    --font-body: "Montserrat", Arial, sans-serif;

    /* Layout */
    --container: 1100px;
    --container-small: 720px;
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--ivory);

    color: var(--text-dark);

    font-family: var(--font-body);
    font-weight: 300;

    line-height: 1.7;

    overflow-x: hidden;
}

img {
    display: block;

    max-width: 100%;
}


/* =========================================================
   ELEMENTOS GENERALES
========================================================= */

.container {
    width: min(90%, var(--container));

    margin: 0 auto;
}

.container--small {
    max-width: var(--container-small);
}

.section {
    padding: 100px 20px;

    text-align: center;
}

.section--ivory {
    background-color: var(--ivory);
}

.section--olive {
    background-color: var(--olive-dark);
}

.section__eyebrow {
    margin-bottom: 12px;

    color: var(--olive);

    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing: 0.35em;

    text-transform: uppercase;
}

.section__eyebrow--light {
    color: var(--sage);
}

.section__title {
    color: var(--olive-dark);

    font-family: var(--font-title);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 400;

    line-height: 1.05;
}

.section__title--light {
    color: var(--ivory);
}


/* =========================================================
   ORNAMENTOS
========================================================= */

.ornament,
.decorative-line {
    display: flex;

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

    gap: 15px;

    margin: 30px auto;
}

.ornament span:first-child,
.ornament span:last-child,
.decorative-line span:first-child,
.decorative-line span:last-child {
    width: 55px;
    height: 1px;

    background-color: var(--olive-light);
}

.ornament span:nth-child(2) {
    color: var(--olive);

    font-size: 1rem;
}


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

.hero {
    position: relative;

    display: flex;

    min-height: 100svh;

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

    padding: 40px 20px;

    background:
        linear-gradient(
            rgba(45, 49, 35, 0.30),
            rgba(45, 49, 35, 0.48)
        ),
        url("../assets/images/portada.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--white);

    text-align: center;

    animation:
        heroBackgroundEntrance
        1.4s
        ease-out
        both;
}


/* =========================================================
   OVERLAY
========================================================= */

.hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.05) 40%,
            rgba(0, 0, 0, 0.30) 100%
        );
}


/* =========================================================
   CONTENIDO
========================================================= */

.hero__content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 900px;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.hero__subtitle {
    margin-bottom: 25px;

    font-size: 0.72rem;
    font-weight: 400;

    letter-spacing: 0.45em;

    opacity: 0;

    transform: translateY(18px);

    animation:
        heroContentEntrance
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.30s
        forwards;
}


/* =========================================================
   NOMBRES
========================================================= */

.hero__names {
    display: flex;

    flex-direction: column;

    color: var(--white);

    font-family: var(--font-title);
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 400;

    line-height: 0.75;

    opacity: 0;

    transform: translateY(18px);

    animation:
        heroContentEntrance
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.55s
        forwards;
}


/* =========================================================
   AMPERSAND
========================================================= */

.hero__ampersand {
    margin: 15px 0;

    font-size: 0.45em;
    font-style: italic;

    opacity: 0;

    animation:
        ampersandEntrance
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.85s
        forwards;
}


/* =========================================================
   LÍNEA DECORATIVA
========================================================= */

.hero .decorative-line {
    margin: 35px auto 20px;

    opacity: 0;

    transform: translateY(15px);

    animation:
        heroContentEntrance
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.85s
        forwards;
}

.hero .decorative-line span:first-child,
.hero .decorative-line span:last-child {
    background-color:
        rgba(255, 255, 255, 0.65);
}

.hero .decorative-line__symbol {
    color: var(--white);
}


/* =========================================================
   FECHA
========================================================= */

.hero__date {
    font-family: var(--font-title);
    font-size: 1.5rem;

    letter-spacing: 0.25em;

    opacity: 0;

    transform: translateY(15px);

    animation:
        heroContentEntrance
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.05s
        forwards;
}


/* =========================================================
   INDICADOR DE SCROLL
========================================================= */

.hero__scroll {
    position: absolute;

    top: calc(100% + 70px);
    left: 50%;

    display: flex;

    align-items: center;
    flex-direction: column;

    color: var(--white);

    font-size: 0.6rem;

    gap: 8px;

    letter-spacing: 0.25em;

    text-decoration: none;

    opacity: 0;

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

    animation:
        heroScrollEntrance
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.30s
        forwards;
}


/* =========================================================
   FLECHA
========================================================= */

.hero__arrow {
    font-family: var(--font-title);
    font-size: 1.6rem;

    animation:
        arrowMovement
        2s
        ease-in-out
        infinite;
}


/* =========================================================
   ANIMACIONES
========================================================= */

/*
 * Entrada general del contenido
 */

@keyframes heroContentEntrance {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/*
 * Entrada especial del &
 */

@keyframes ampersandEntrance {

    from {
        opacity: 0;

        transform:
            scale(0.80);
    }

    to {
        opacity: 0.9;

        transform:
            scale(1);
    }

}


/*
 * Entrada del indicador de scroll
 */

@keyframes heroScrollEntrance {

    from {
        opacity: 0;

        transform:
            translate(-50%, 18px);
    }

    to {
        opacity: 1;

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

}


/*
 * Movimiento de la flecha
 */

@keyframes arrowMovement {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(8px);
    }

}


/*
 * Entrada de la fotografía de fondo
 */

@keyframes heroBackgroundEntrance {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* =========================================================
   ACCESIBILIDAD
   Reduce animaciones si el dispositivo así lo solicita
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero,
    .hero__subtitle,
    .hero__names,
    .hero__ampersand,
    .hero .decorative-line,
    .hero__date,
    .hero__scroll,
    .hero__arrow {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   ANIMACIONES AL HACER SCROLL
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 0.9s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change:
        opacity,
        transform;
}

.reveal--visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* Variantes de retraso */

.reveal--delay-1 {
    transition-delay: 0.10s;
}

.reveal--delay-2 {
    transition-delay: 0.22s;
}

.reveal--delay-3 {
    transition-delay: 0.34s;
}

.reveal--delay-4 {
    transition-delay: 0.46s;
}

.reveal--delay-5 {
    transition-delay: 0.58s;
}

.reveal--delay-6 {
    transition-delay: 0.70s;
}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

}




/* =========================================================
   BIENVENIDA
========================================================= */

.welcome__text {
    max-width: 620px;

    margin: 0 auto 18px;

    color: var(--text-soft);

    font-family: var(--font-title);
    font-size: 1.35rem;

    line-height: 1.8;
}

.welcome__text p {
    margin: 0;
}

.welcome__text p + p {
    margin-top: 22px;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown__grid {
    display: grid;

    max-width: 700px;

    margin: 40px auto 0;

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

.countdown__item {
    position: relative;

    display: flex;

    align-items: center;
    flex-direction: column;
}

.countdown__item:not(:last-child)::after {
    position: absolute;

    top: 10%;

    right: 0;

    width: 1px;
    height: 80%;

    background-color: rgba(255, 255, 255, 0.2);

    content: "";
}

.countdown__number {
    color: var(--ivory);

    font-family: var(--font-title);
    font-size: clamp(2.8rem, 8vw, 5rem);
    font-weight: 400;

    line-height: 1;
}

.countdown__label {
    margin-top: 12px;

    color: var(--sage);

    font-size: 0.65rem;
    font-weight: 400;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.countdown__eyebrow {
    margin-bottom: 14px;

    color:
        rgba(248, 245, 238, 0.68);

    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 0.42em;

    text-transform: uppercase;
}

.countdown__title {
    margin-bottom: 30px;

    color: var(--ivory);

    font-family: var(--font-title);
    font-size: clamp(
        2.8rem,
        6vw,
        4.4rem
    );

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.01em;
}

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

@media (max-width: 600px) {

    .section {
        padding: 80px 20px;
    }

    .hero {
        min-height: 100svh;
    }

    .hero__names {
        font-size: clamp(3.8rem, 20vw, 6rem);
    }

    .hero__scroll {
        top: calc(100% + 55px);

        width: 100%;
    }

    .countdown__grid {
        gap: 25px 0;

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

    .countdown__item:nth-child(2)::after {
        display: none;
    }

    .countdown__eyebrow {
        margin-bottom: 12px;

        font-size: 0.62rem;

        letter-spacing: 0.34em;
    }


    .countdown__title {
        margin-bottom: 26px;

        font-size: clamp(
            2.5rem,
            12vw,
            3.4rem
        );
    }

}

/* =========================================================
   EVENTO / UBICACIÓN
========================================================= */

.section--cream {
    background-color: var(--cream);
}

.event {
    overflow: hidden;
}


/* =========================================================
   BLOQUE DE FECHA
========================================================= */

.event__date-block {
    max-width: 560px;

    margin: 0 auto 38px;
}

.event__date-eyebrow {
    margin-bottom: 22px;

    color: var(--olive);

    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing: 0.38em;

    text-transform: uppercase;
}


.event__date-composition {
    color: var(--olive-dark);
}


/* =========================================================
   MES
========================================================= */

.event__month {
    margin-bottom: 6px;

    color: var(--olive-light);

    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 0.35em;

    text-transform: uppercase;
}


/* =========================================================
   FILA PRINCIPAL DE FECHA
========================================================= */

.event__date-row {
    display: grid;

    max-width: 420px;

    margin: 0 auto;

    align-items: center;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap: 24px;
}


/* =========================================================
   COLUMNAS LATERALES
========================================================= */

.event__date-side {
    display: flex;

    align-items: center;
    flex-direction: column;

    gap: 9px;
}


/* =========================================================
   LÍNEAS DECORATIVAS
========================================================= */

.event__date-line {
    display: block;

    width: 100%;
    max-width: 90px;
    height: 1px;

    background-color:
        rgba(104, 114, 74, 0.55);
}


/* =========================================================
   DOMINGO / AÑO
========================================================= */

.event__day-name,
.event__year {
    color: var(--olive);

    font-size: 0.62rem;
    font-weight: 500;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}


/* =========================================================
   NÚMERO DEL DÍA
========================================================= */

.event__day-number {
    color: var(--olive-dark);

    font-family: var(--font-title);
    font-size: clamp(5.3rem, 13vw, 7.6rem);
    font-weight: 400;

    line-height: 0.82;
}


/* =========================================================
   HORA
========================================================= */

.event__main-time {
    margin-top: 18px;

    color: var(--olive);

    font-family: var(--font-title);
    font-size: 1.55rem;
    font-weight: 500;

    letter-spacing: 0.12em;
}


/* =========================================================
   TARJETA DE UBICACIÓN
========================================================= */

.event__card {
    position: relative;

    max-width: 620px;

    margin: 0 auto;
    padding: 58px 45px 64px;

    background-color: var(--olive-dark);

    border: 1px solid
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 24px 60px
        rgba(53, 55, 47, 0.16);

    color: var(--ivory);
}


/* =========================================================
   ESQUINAS DECORATIVAS
========================================================= */

.event__card::before,
.event__card::after {
    position: absolute;

    width: 70px;
    height: 70px;

    border-color:
        rgba(216, 204, 184, 0.70);

    border-style: solid;

    content: "";
}

.event__card::before {
    top: 20px;
    left: 20px;

    border-width: 1px 0 0 1px;
}

.event__card::after {
    right: 20px;
    bottom: 20px;

    border-width: 0 1px 1px 0;
}


/* =========================================================
   ÍCONO
========================================================= */

.event__icon {
    margin-bottom: 14px;

    color: var(--beige);

    font-family: var(--font-title);
    font-size: 1.6rem;
}


/* =========================================================
   ETIQUETA
========================================================= */

.event__label {
    margin-bottom: 20px;

    color:
        rgba(248, 245, 238, 0.72);

    font-size: 0.65rem;
    font-weight: 500;

    letter-spacing: 0.32em;

    text-transform: uppercase;
}


/* =========================================================
   LUGAR
========================================================= */

.event__place {
    margin-bottom: 26px;

    color: var(--ivory);

    font-family: var(--font-title);
    font-size: clamp(2.5rem, 7vw, 3.6rem);
    font-weight: 400;

    line-height: 1.05;
}


/* =========================================================
   DIRECCIÓN
========================================================= */

.event__address {
    max-width: 360px;

    margin: 0 auto;

    color:
        rgba(248, 245, 238, 0.78);

    font-size: 0.82rem;

    line-height: 1.8;
}


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

.event__actions {
    display: flex;

    margin-top: 42px;

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

    flex-wrap: wrap;

    gap: 12px;
}


.button {
    display: inline-flex;

    min-height: 48px;

    padding: 12px 26px;

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

    border: 1px solid var(--olive);

    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 0.12em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.button:hover {
    transform: translateY(-2px);
}


.event .button--primary {
    border-color: var(--ivory);

    background-color: var(--ivory);

    color: var(--olive-dark);
}


.event .button--primary:hover {
    border-color: var(--white);

    background-color: var(--white);

    color: var(--olive-dark);
}


.event .button--secondary {
    border-color:
        rgba(248, 245, 238, 0.65);

    background-color: transparent;

    color: var(--ivory);
}


.event .button--secondary:hover {
    border-color: var(--ivory);

    background-color:
        rgba(248, 245, 238, 0.10);

    color: var(--white);
}


.button:active {
    transform:
        translateY(0)
        scale(0.98);
}


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

@media (max-width: 600px) {

    .event__date-block {
        margin-bottom: 40px;
    }

    .event__date-eyebrow {
        margin-bottom: 20px;
    }

    .event__date-row {
        max-width: 330px;

        gap: 16px;
    }


    .event__date-line {
        max-width: 70px;
    }


    .event__day-name,
    .event__year {
        font-size: 0.56rem;

        letter-spacing: 0.20em;
    }


    .event__day-number {
        font-size: clamp(
            4.8rem,
            23vw,
            6.4rem
        );
    }


    .event__main-time {
        margin-top: 16px;
    }


    .event__card {
        padding: 56px 24px 60px;
    }

    .event__address {
        max-width: 290px;
    }

    .event__card::before,
    .event__card::after {
        width: 55px;
        height: 55px;
    }


    .event__place {
        font-size: clamp(
            2.3rem,
            11vw,
            3rem
        );
    }


    .event__actions {
        flex-direction: column;
    }


    .button {
        width: 100%;
    }

}


/* =========================================================
   SECCIONES FOTOGRÁFICAS
========================================================= */

.photo-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    background-color: var(--olive-dark);
}


/* =========================================================
   IMAGEN
========================================================= */

.photo-section__image {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   FOTOGRAFÍA 1
========================================================= */

.photo-section--one
.photo-section__image {
    width: 100%;
}

/* =========================================================
   FOTOGRAFÍA 2
========================================================= */

.photo-section--two {
    background-color: var(--olive-dark);
}

.photo-section--two
.photo-section__image {
    width: 100%;
    height: 82svh;

    object-fit: cover;
    object-position: center 42%;
}

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

@media (max-width: 600px) {

    .photo-section--one
    .photo-section__image {
        width: 100%;
        height: 58svh;

        object-fit: cover;

        object-position: 55% center;
    }

    .photo-section--two
    .photo-section__image {
        height: 72svh;

        object-fit: cover;
        object-position: center 40%;
    }

}


/* =========================================================
   ITINERARIO
========================================================= */

.timeline {
    position: relative;

    overflow: hidden;

    background-color: var(--cream);
}


/* =========================================================
   ENCABEZADO
========================================================= */

.timeline .section__eyebrow {
    margin-bottom: 14px;

    color: var(--olive-light);

    font-size: 0.66rem;
    font-weight: 500;

    letter-spacing: 0.34em;

    text-transform: uppercase;
}


.timeline .section__title {
    color: var(--olive-dark);

    font-size: clamp(2.8rem, 7vw, 4.6rem);
}


/* =========================================================
   TEXTO INTRODUCTORIO
========================================================= */

.timeline__intro {
    max-width: 520px;

    margin: 0 auto 65px;

    color: var(--text-soft);

    font-family: var(--font-title);
    font-size: 1.2rem;

    line-height: 1.7;

    text-align: center;
}


/* =========================================================
   CONTENEDOR DE LA LÍNEA DE TIEMPO
========================================================= */

.timeline__list {
    position: relative;

    width: 100%;
    max-width: 620px;

    margin: 0 auto;
}


/* =========================================================
   LÍNEA CENTRAL
========================================================= */

.timeline__list::before {
    position: absolute;

    top: 8px;
    bottom: 8px;
    left: 50%;

    width: 1px;

    background-color:
        rgba(104, 114, 74, 0.22);

    content: "";

    transform: translateX(-50%);
}


/* =========================================================
   ELEMENTOS
========================================================= */

.timeline__item {
    position: relative;

    display: grid;

    min-height: 135px;

    grid-template-columns: 1fr 1fr;

    column-gap: 65px;
}


/* =========================================================
   HORA
========================================================= */

.timeline__time {
    padding-top: 0;

    color: var(--olive);

    font-family: var(--font-title);
    font-size: 1.45rem;
    font-weight: 500;

    letter-spacing: 0.04em;

    text-align: center;
}


/* =========================================================
   MARCADOR
========================================================= */

.timeline__marker {
    position: absolute;

    top: 7px;
    left: 50%;

    z-index: 2;

    width: 11px;
    height: 11px;

    border: 3px solid var(--cream);
    border-radius: 50%;

    background-color: var(--olive);

    box-shadow:
        0 0 0 1px
        rgba(104, 114, 74, 0.18);

    transform: translateX(-50%);
}


/* =========================================================
   CONTENIDO
========================================================= */

.timeline__content {
    padding-bottom: 44px;

    text-align: center;
}


.timeline__content h3 {
    margin-bottom: 8px;

    color: var(--olive-dark);

    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 500;

    line-height: 1.1;
}


.timeline__content p {
    max-width: 230px;

    margin: 0 auto;

    color: var(--text-soft);

    font-size: 0.82rem;

    line-height: 1.75;
}


/* =========================================================
   ÚLTIMO ELEMENTO
========================================================= */

.timeline__item:last-child {
    min-height: auto;
}


.timeline__item:last-child
.timeline__content {
    padding-bottom: 0;
}


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

@media (max-width: 600px) {

    .timeline .section__eyebrow {
        font-size: 0.60rem;

        letter-spacing: 0.28em;
    }


    .timeline .section__title {
        font-size: clamp(
            2.7rem,
            13vw,
            4rem
        );
    }


    .timeline__intro {
        max-width: 320px;

        margin-bottom: 52px;

        font-size: 1.12rem;
    }


    .timeline__list {
        max-width: 390px;
    }


    .timeline__item {
        min-height: 125px;

        grid-template-columns: 1fr 1fr;

        column-gap: 34px;
    }


    .timeline__time {
        font-size: 1.2rem;
    }


    .timeline__content h3 {
        font-size: 1.5rem;
    }


    .timeline__content p {
        max-width: 150px;

        font-size: 0.76rem;

        line-height: 1.65;
    }


    .timeline__marker {
        width: 10px;
        height: 10px;
    }

}


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

.rsvp__intro {
    max-width: 580px;
    margin: 0 auto 50px;

    color: var(--text-soft);

    font-family: var(--font-title);
    font-size: 1.3rem;

    line-height: 1.7;
}

.rsvp__card {
    max-width: 620px;

    margin: 0 auto;
    padding: 55px 45px;

    background-color: var(--white);

    border: 1px solid
        rgba(104, 114, 74, 0.16);

    box-shadow:
        0 20px 55px
        rgba(53, 55, 47, 0.08);
}

.rsvp__guest-label {
    margin-bottom: 8px;

    color: var(--olive-light);

    font-size: 0.65rem;
    font-weight: 500;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}

.rsvp__guest-name {
    color: var(--olive-dark);

    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 400;
}

.rsvp__question {
    margin-top: 40px;
}

.rsvp__question-title {
    margin-bottom: 18px;

    color: var(--olive-dark);

    font-family: var(--font-title);
    font-size: 1.35rem;
}

.rsvp__attendance-options {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}

.rsvp__option {
    min-height: 46px;

    padding: 10px 22px;

    border: 1px solid var(--olive-light);

    background-color: transparent;

    color: var(--olive-dark);

    cursor: pointer;

    font-family: var(--font-body);
    font-size: 0.72rem;

    letter-spacing: 0.08em;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.rsvp__option:hover,
.rsvp__option--active {
    border-color: var(--olive);

    background-color: var(--olive);

    color: var(--white);
}

.rsvp__guests {
    margin-top: 35px;
}

.rsvp__counter {
    display: flex;

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

    gap: 25px;
}

.rsvp__counter-button {
    display: flex;

    width: 42px;
    height: 42px;

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

    border: 1px solid var(--olive-light);
    border-radius: 50%;

    background-color: transparent;

    color: var(--olive-dark);

    cursor: pointer;

    font-family: var(--font-title);
    font-size: 1.7rem;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.rsvp__counter-button:hover {
    background-color: var(--olive);

    color: var(--white);
}

.rsvp__counter-value {
    min-width: 40px;

    color: var(--olive-dark);

    font-family: var(--font-title);
    font-size: 2.2rem;
}

.rsvp__limit {
    margin-top: 10px;

    color: var(--text-soft);

    font-size: 0.75rem;
}

.rsvp__comment {
    margin-top: 35px;

    text-align: left;
}

.rsvp__comment label {
    display: block;

    margin-bottom: 8px;

    color: var(--olive-dark);

    font-size: 0.8rem;
}

.rsvp__comment label span {
    color: var(--text-soft);
}

.rsvp__comment textarea {
    width: 100%;

    padding: 14px;

    border: 1px solid
        rgba(104, 114, 74, 0.25);

    background-color: var(--ivory);

    color: var(--text-dark);

    font-family: var(--font-body);

    outline: none;

    resize: vertical;
}

.rsvp__comment textarea:focus {
    border-color: var(--olive);
}

.rsvp__submit {
    width: 100%;

    margin-top: 30px;

    cursor: pointer;
}

.rsvp__status {
    min-height: 24px;

    margin-top: 18px;

    color: var(--olive);

    font-size: 0.8rem;
}

/* =========================================================
   RSVP - TEXTO DE CIERRE
========================================================= */

.rsvp__closing-text {
    max-width: 540px;

    margin:
        55px auto
        0;

    color: var(--text-soft);

    font-family: var(--font-title);
    font-size: 1.2rem;

    line-height: 1.75;
}

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

.rsvp__closed {
    padding: 34px 20px;
    text-align: center;
}

.rsvp__closed-eyebrow {
    margin-bottom: 18px;

    color: var(--olive);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.rsvp__closed-title {
    max-width: 420px;
    margin: 0 auto 26px;

    color: var(--olive-dark);
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    font-weight: 500;
    line-height: 1.2;
}

.rsvp__closed .ornament {
    margin-top: 0;
    margin-bottom: 26px;
}

.rsvp__closed-text {
    margin: 0;

    color: var(--text-soft);
    font-family: var(--font-title);
    font-size: 1.1rem;
    line-height: 1.7;
}

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

@media (max-width: 600px) {

    .rsvp__card {
        padding: 45px 22px;
    }

    .rsvp__attendance-options {
        flex-direction: column;
    }

    .rsvp__option {
        width: 100%;
    }

    .rsvp__closing-text {
        max-width: 310px;

        margin-top: 42px;

        font-size: 1.12rem;
    }

}

/* =========================================================
   DESPEDIDA
========================================================= */

.farewell {
    position: relative;

    display: flex;

    min-height: 85svh;

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

    padding: 90px 20px;

    background:
        linear-gradient(
            rgba(55, 61, 40, 0.45),
            rgba(55, 61, 40, 0.62)
        ),
        url("../assets/images/despedida.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--white);

    text-align: center;
}


.farewell__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(40, 45, 30, 0.10) 0%,
            rgba(40, 45, 30, 0.30) 100%
        );
}


.farewell__content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 720px;
}


/* =========================
   ENCABEZADO
========================== */

.farewell__eyebrow {
    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.68rem;
    font-weight: 500;

    letter-spacing: 0.35em;

    text-transform: uppercase;
}


.farewell__title {
    color: var(--white);

    font-family: var(--font-title);

    font-size:
        clamp(2.8rem, 8vw, 5rem);

    font-weight: 400;

    line-height: 1.05;
}


/* =========================
   ORNAMENTO
========================== */

.farewell__ornament {
    display: flex;

    margin: 35px auto;

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

    gap: 15px;
}


.farewell__ornament span:first-child,
.farewell__ornament span:last-child {
    width: 55px;
    height: 1px;

    background-color:
        rgba(255, 255, 255, 0.55);
}


.farewell__ornament span:nth-child(2) {
    color: var(--white);

    font-size: 1rem;
}


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

.farewell__message {
    max-width: 520px;

    margin: 0 auto 20px;

    color:
        rgba(255, 255, 255, 0.90);

    font-family: var(--font-title);

    font-size: 1.35rem;

    line-height: 1.7;
}


.farewell__closing {
    margin-top: 30px;

    color:
        rgba(255, 255, 255, 0.85);

    font-size: 0.7rem;
    font-weight: 400;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}


/* =========================
   NOMBRES
========================== */

.farewell__names {
    display: flex;

    margin-top: 25px;

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

    gap: 18px;

    color: var(--white);

    font-family: var(--font-title);

    font-size:
        clamp(2.2rem, 7vw, 3.8rem);

    line-height: 1;
}


.farewell__ampersand {
    font-size: 0.7em;

    font-style: italic;

    opacity: 0.85;
}


/* =========================
   FECHA
========================== */

.farewell__date {
    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.82);

    font-family: var(--font-title);

    font-size: 1.15rem;

    letter-spacing: 0.22em;
}


/* =========================================================
   ANIMACIONES DESPEDIDA
========================================================= */


/* =========================
   ORNAMENTO ANIMADO
========================== */

.farewell__ornament span:first-child,
.farewell__ornament span:last-child {
    transition:
        width 0.8s
        cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;
}


.farewell__ornament.reveal span:first-child,
.farewell__ornament.reveal span:last-child {
    width: 20px;

    opacity: 0;
}


.farewell__ornament.reveal--visible span:first-child,
.farewell__ornament.reveal--visible span:last-child {
    width: 55px;

    opacity: 1;
}


/* =========================
   NOMBRES
========================== */

.farewell__names-reveal {
    opacity: 0;

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        opacity 1s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.55s;
}


.farewell__names-reveal.reveal--visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================
   FECHA
========================== */

.farewell__date-reveal {
    opacity: 0;

    transform:
        translateY(14px);

    transition:
        opacity 0.9s ease,
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.70s;
}


.farewell__date-reveal.reveal--visible {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 600px) {

    .farewell {
        min-height: 78svh;

        padding: 75px 22px;
    }


    .farewell__names {
        flex-direction: column;

        gap: 8px;
    }


    .farewell__ampersand {
        margin: 2px 0;
    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .farewell__ornament span:first-child,
    .farewell__ornament span:last-child,
    .farewell__names-reveal,
    .farewell__date-reveal {
        transition: none;
    }


    .farewell__names-reveal,
    .farewell__date-reveal {
        opacity: 1;

        transform: none;
    }


    .farewell__ornament.reveal span:first-child,
    .farewell__ornament.reveal span:last-child {
        width: 55px;

        opacity: 1;
    }

}

/* =========================================================
   VARIANTE REVEAL - ESCALA SUAVE
========================================================= */

.reveal--scale {
    opacity: 0;

    transform:
        translateY(18px)
        scale(0.96);
}

.reveal--scale.reveal--visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.countdown .ornament span:first-child,
.countdown .ornament span:last-child {
    background-color:
        rgba(255, 255, 255, 0.45);
}

.countdown .ornament span:nth-child(2) {
    color: var(--ivory);
}

/* =========================================================
   ANIMACIÓN TARJETA UBICACIÓN
========================================================= */

.event__card::before,
.event__card::after {
    transform: scale(0.75);

    opacity: 0;

    transition:
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;

    transition-delay: 0.45s;
}

.event__card.reveal--visible::before,
.event__card.reveal--visible::after {
    transform: scale(1);

    opacity: 0.55;
}

/* =========================================================
   REVEAL FOTOGRAFÍAS
========================================================= */

.reveal--photo {
    opacity: 0;

    transform:
        translateY(24px)
        scale(0.97);

    transition:
        opacity 1s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--photo.reveal--visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

/* =========================================================
   ANIMACIÓN ITINERARIO
========================================================= */

.timeline__reveal {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.85s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline__reveal.reveal--visible {
    opacity: 1;

    transform: translateY(0);
}


/* Animación del marcador */

.timeline__reveal .timeline__marker {
    opacity: 0;

    transform:
        translateX(-50%)
        scale(0.6);

    transition:
        opacity 0.6s ease,
        transform 0.6s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline__reveal.reveal--visible .timeline__marker {
    opacity: 1;

    transform:
        translateX(-50%)
        scale(1);
}

/* =========================================================
   ANIMACIONES RSVP
========================================================= */
/* =========================
   OPCIONES SÍ / NO
========================== */

.rsvp__option:hover {
    transform: translateY(-2px);
}


.rsvp__option:active {
    transform: scale(0.98);
}


/* Estado seleccionado */

.rsvp__option--active {
    border-color: var(--olive);
    background-color: var(--olive);
    color: var(--white);
    box-shadow:
        0 8px 22px
        rgba(74, 81, 56, 0.12);
}


/* =========================
   BLOQUE DE ASISTENTES
========================== */

.rsvp__guests {
    overflow: hidden;

    max-height: 0;

    margin-top: 0;

    opacity: 0;

    transform: translateY(-10px);

    transition:
        max-height 0.45s ease,
        margin-top 0.45s ease,
        opacity 0.35s ease,
        transform 0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.rsvp__guests.rsvp__guests--visible {
    max-height: 250px;

    opacity: 1;

    transform: translateY(0);
}


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

.rsvp__counter-button {
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.rsvp__counter-button:hover {
    transform: scale(1.06);
}


.rsvp__counter-button:active {
    transform: scale(0.94);
}


.rsvp__counter-value {
    display: inline-block;

    transition:
        transform 0.18s
        cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.18s ease;
}


.rsvp__counter-value--change {
    transform: scale(1.18);
}


/* =========================
   TEXTAREA
========================== */

.rsvp__comment textarea {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


.rsvp__comment textarea:focus {
    border-color: var(--olive);

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(104, 114, 74, 0.10);
}


/* =========================
   BOTÓN CONFIRMAR
========================== */

.rsvp__submit {
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}


.rsvp__submit:hover {
    transform: translateY(-2px);
}


.rsvp__submit:active {
    transform: scale(0.98);
}


/* =========================
   MENSAJE DE ESTADO
========================== */

.rsvp__status {
    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 0.45s ease,
        transform 0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.rsvp__status.rsvp__status--visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================
   ACCESIBILIDAD
========================== */

@media (prefers-reduced-motion: reduce) {

    .rsvp__option,
    .rsvp__counter-button,
    .rsvp__counter-value,
    .rsvp__guests,
    .rsvp__comment textarea,
    .rsvp__submit,
    .rsvp__status {
        transition: none;
    }

}

/* =========================================================
   RSVP - CUPOS ADULTOS Y NIÑOS
========================================================= */


/* =========================
   CUPOS RESERVADOS
========================== */

.rsvp__reserved-detail {
    display: flex;

    margin-top: 12px;

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

    gap: 28px;

    color: var(--text-soft);

    font-size: 0.85rem;
}


.rsvp__reserved-detail strong {
    color: var(--olive-dark);

    font-family: var(--font-title);

    font-size: 1.2rem;

    font-weight: 500;
}


/* =========================
   TIPO DE INVITADO
========================== */

.rsvp__guest-type {
    padding: 18px 0;

    border-bottom:
        1px solid
        rgba(104, 114, 74, 0.15);
}


.rsvp__guest-type:last-child {
    border-bottom: none;
}


.rsvp__guest-type-header {
    display: flex;

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

    gap: 25px;
}


.rsvp__guest-type-title {
    margin-bottom: 4px;

    color: var(--olive-dark);

    font-family: var(--font-title);

    font-size: 1.3rem;

    font-weight: 500;
}


.rsvp__guest-type-limit {
    color: var(--text-soft);

    font-size: 0.72rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


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

@media (max-width: 600px) {

    .rsvp__reserved-detail {
        flex-direction: column;

        gap: 5px;
    }


    .rsvp__guest-type-header {
        gap: 15px;
    }

}

/* =========================================================
   RSVP - SIN TOKEN
========================================================= */

.rsvp__no-token-message {
    margin: 0;
    padding: 35px 20px;

    color: var(--olive);

    font-family: var(--font-title);
    font-size: 1.35rem;
    line-height: 1.6;

    text-align: center;
}

/* =========================================================
   APERTURA DE INVITACIÓN
========================================================= */

.invitation-intro {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;

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

    width: 100vw;
    height: 100svh;

    overflow: hidden;

    background-color: var(--ivory);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}


/* =========================================================
   BLOQUEAR SCROLL
========================================================= */

html.envelope-active,
body.envelope-active {
    overflow: hidden !important;

    height: 100% !important;

    overscroll-behavior: none;
}


/* =========================================================
   PANEL VERDE
========================================================= */

.invitation-intro__panel {
    position: relative;

    width: 100vw;
    height: 100svh;

    background-image:
        url("../assets/images/fondo-apertura-verde.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;

    box-shadow:
        0 0 45px
        rgba(53, 55, 47, 0.10);
}


/* =========================================================
   CONTENIDO
========================================================= */

.invitation-intro__content {
    position: absolute;
    inset: 0;

    z-index: 5;

    display: flex;

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

    flex-direction: column;

    padding: 70px 28px;

    text-align: center;

    color: var(--ivory);
}


/* =========================================================
   NOMBRES
========================================================= */

.invitation-intro__names {
    margin-bottom: 42px;

    color:
        rgba(248, 245, 238, 0.88);

    font-family: var(--font-title);

    font-size: clamp(
        1.7rem,
        3vw,
        2.15rem
    );

    font-weight: 400;

    letter-spacing: 0.12em;
}


/* =========================================================
   SELLO
========================================================= */

.invitation-seal {
    position: relative;

    display: flex;

    width: clamp(
        175px,
        18vw,
        220px
    );

    aspect-ratio: 1;

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

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    opacity: 0;
    transform: scale(0.88);

    transition:
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;

    animation:
        introSealEntrance
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.55s
        forwards,

        invitationSealPulse
        2.4s
        ease-in-out
        1.55s
        infinite;
}


.invitation-seal__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   TEXTO "TOCA PARA ABRIR"
========================================================= */

.invitation-intro__open-text {
    margin-top: 34px;

    color:
        rgba(248, 245, 238, 0.78);

    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing: 0.34em;

    text-transform: uppercase;
}


/* =========================================================
   FECHA
========================================================= */

.invitation-intro__date {
    margin-top: 28px;

    color:
        rgba(248, 245, 238, 0.72);

    font-family: var(--font-title);

    font-size: 1.28rem;

    letter-spacing: 0.24em;
}


/* =========================================================
   LUZ
========================================================= */

.invitation-intro__light {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 20;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background-color: #ffffff;

    opacity: 0;

    filter: blur(30px);

    transform:
        translate(-50%, -50%)
        scale(0.3);

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.35s ease-out;
}


/* =========================================================
   TRANSICIÓN FINAL
========================================================= */

.invitation-transition {
    position: absolute;
    inset: 0;

    z-index: 30;

    background-color: #ffffff;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;
}


/* =========================================================
   ESTADOS DE ANIMACIÓN
========================================================= */

.invitation-intro--opening
.invitation-seal {
    animation: none;

    opacity: 1;
}


.invitation-intro--zooming
.invitation-seal {
    transform: scale(6.5);
}


.invitation-intro--flashing
.invitation-intro__light {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(18);
}


.invitation-intro--opening
.invitation-intro__names,
.invitation-intro--opening
.invitation-intro__open-text,
.invitation-intro--opening
.invitation-intro__date {
    animation: none !important;

    opacity: 0 !important;

    transform: translateY(8px);

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}


.invitation-intro--transitioning
.invitation-transition {
    opacity: 1;
}


.invitation-intro--hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   ANIMACIÓN SELLO
========================================================= */

@keyframes invitationSealPulse {

    0%,
    100% {
        filter:
            brightness(1)
            drop-shadow(
                0 8px 14px
                rgba(52, 50, 38, 0.20)
            );
    }

    50% {
        filter:
            brightness(1.08)
            drop-shadow(
                0 12px 24px
                rgba(212, 184, 112, 0.30)
            );
    }

}


/* =========================================================
   ESCRITORIO
========================================================= */

@media (min-width: 701px) {

    .invitation-intro {
        padding: 0;
        background-color: var(--olive-dark);
    }


    .invitation-intro__panel {
        width: 100vw;
        height: 100svh;

        border-radius: 0;

        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        box-shadow: none;
    }


    .invitation-intro__content {
        padding: 65px 38px;
    }


    .invitation-intro__names {
        margin-bottom: 42px;

        font-size: clamp(
            1.7rem,
            3vw,
            2.15rem
        );

        letter-spacing: 0.12em;
    }

    .invitation-seal {
        width: clamp(
            175px,
            18vw,
            220px
        );
    }

    .invitation-intro__open-text {
        margin-top: 34px;

        font-size: 0.72rem;

        letter-spacing: 0.34em;
    }

    .invitation-intro__date {
        margin-top: 28px;

        font-size: 1.28rem;

        letter-spacing: 0.24em;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .invitation-intro {
        background-color: var(--olive-dark);
    }


    .invitation-intro__panel {
        width: 100vw;
        height: 100svh;

        box-shadow: none;
    }


    .invitation-intro__content {
        padding:
            60px
            24px;
    }


    .invitation-intro__names {
        margin-bottom: 42px;

        font-size: clamp(
            1.7rem,
            8vw,
            2.15rem
        );

        letter-spacing: 0.12em;
    }


    .invitation-seal {
        width: clamp(
            175px,
            50vw,
            220px
        );
        -webkit-tap-highlight-color: transparent;

        outline: none;

        -webkit-touch-callout: none;
        touch-action: manipulation;
    }


    .invitation-intro__open-text {
        margin-top: 34px;

        font-size: 0.72rem;

        letter-spacing: 0.34em;
    }


    .invitation-intro__date {
        margin-top: 28px;

        font-size: 1.28rem;

        letter-spacing: 0.24em;
    }

    .invitation-seal:focus {
        outline: none;
    }

    .invitation-seal:focus-visible {
        outline: 1px solid rgba(248, 245, 238, 0.55);
        outline-offset: 8px;
    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .invitation-seal {
        animation: none;
    }


    .invitation-seal,
    .invitation-intro__light,
    .invitation-transition,
    .invitation-intro {
        transition: none;
    }

}


/* =========================================================
   DETENER HERO HASTA ABRIR INVITACIÓN
========================================================= */

.hero--paused {
    opacity: 0 !important;
    animation: none !important;
}

.hero--paused .hero__subtitle,
.hero--paused .hero__names,
.hero--paused .hero__ampersand,
.hero--paused .decorative-line,
.hero--paused .hero__date,
.hero--paused .hero__scroll,
.hero--paused .hero__arrow {
    animation: none !important;
}


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

.invitation-intro__panel {
    animation:
        introPanelEntrance
        1.1s
        ease-out
        both;
}


.invitation-intro__names {
    opacity: 0;

    transform:
        translateY(14px);

    animation:
        introTextEntrance
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.30s
        forwards;
}

.invitation-intro__open-text {
    opacity: 0;

    transform:
        translateY(10px);

    animation:
        introTextEntrance
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.95s
        forwards;
}


.invitation-intro__date {
    opacity: 0;

    transform:
        translateY(10px);

    animation:
        introTextEntrance
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.15s
        forwards;
}

@keyframes introPanelEntrance {

    from {
        opacity: 0;
        transform:
            scale(1.02);
    }

    to {
        opacity: 1;
        transform:
            scale(1);
    }

}


@keyframes introTextEntrance {

    from {
        opacity: 0;

        transform:
            translateY(14px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes introSealEntrance {

    from {
        opacity: 0;

        transform:
            scale(0.82);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }

}

/* =========================================================
   FONDO HORIZONTAL
   Tablet horizontal / laptop / computadora
========================================================= */

@media (min-width: 701px) and (orientation: landscape) {

    .invitation-intro__panel {
        background-image:
            url("../assets/images/fondo-apertura-verde-horizontal.png");

        background-position: center;
        background-size: cover;
    }

}

/* =========================================================
   FONDO VERTICAL
   Teléfono / tablet vertical
========================================================= */

@media (orientation: portrait) {

    .invitation-intro__panel {
        background-image:
            url("../assets/images/fondo-apertura-verde.png");

        background-position: center;
        background-size: cover;
    }

}


/* =========================================================
   NUESTROS PADRES
========================================================= */

.parents {
    background-color: #E5E6DA;
    text-align: center;
    overflow: hidden;
}

.parents__intro {
    max-width: 620px;
    margin: 0 auto;
    margin-top: 40px;

    color: var(--text-soft);
    font-family: var(--font-title);
    font-size: 1.3rem;
    line-height: 1.75;
}

.parents__title {
    margin-bottom: 52px;

    color: var(--olive-dark);
    font-family: var(--font-title);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.15;
}

.parents__families {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    max-width: 850px;
    margin: 0 auto;

    align-items: center;
    gap: 50px;
}

.parents__family {
    min-width: 0;
}

.parents__label {
    margin-bottom: 24px;

    color: var(--olive);
    font-size: 0.65rem;
    font-weight: 500;

    letter-spacing: 0.24em;
}

.parents__name {
    color: var(--text-dark);
    font-family: var(--font-title);

    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 500;
    line-height: 1.15;
}

.parents__ampersand {
    display: block;

    margin: 8px 0;

    color: var(--olive-light);
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-style: italic;
}

.parents__divider {
    width: 1px;
    height: 125px;

    background-color: var(--beige);
}

@media (max-width: 600px) {

    .parents__intro {
        max-width: 320px;
        font-size: 1.15rem;
    }

    .parents__title {
        max-width: 310px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 42px;

        font-size: 2rem;
    }

    .parents__families {
        grid-template-columns: 1fr auto 1fr;

        width: 100%;
        gap: 14px;
    }

    .parents__label {
        margin-bottom: 20px;

        font-size: 0.55rem;
        letter-spacing: 0.12em;
    }

    .parents__name {
        font-size: 1.25rem;
        line-height: 1.15;
    }

    .parents__divider {
        height: 110px;
    }
}

@media (max-width: 380px) {

    .parents__families {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .parents__divider {
        width: 70px;
        height: 1px;

        margin: 0 auto;
    }

}