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

:root {
    --fondo: #f2e8d6;
    --texto: #8b684b;
    --cafe: #987150;
    --crema: #f7efdf;

    --fuente-sans: "Roboto", Arial, sans-serif;
    --fuente-serif: "Libertinus Serif", Georgia, serif;

    --tipo-display: clamp(30px, 7vw, 38px);
    --tipo-titulo: clamp(21px, 5.4vw, 26px);
    --tipo-nombre: clamp(18px, 4.7vw, 22px);
    --tipo-nombre-secundario: clamp(17px, 4.4vw, 20px);
    --tipo-subtitulo: clamp(15px, 4vw, 17px);
    --tipo-cuerpo: clamp(14px, 3.7vw, 16px);

    --ancho-texto: 430px;
    --ancho-nombres: 500px;
    --ornamento-ancho: 270px;
}


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

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

html {
    width: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    background: var(--fondo);
    color: var(--texto);

    font-family: var(--fuente-sans);
    font-weight: 300;
}

body.invitacion-cerrada {
    height: 100svh;
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

.invitacion {
    width: 100%;
    margin: 0 auto;
    background: var(--fondo);
}

.contenido-invitacion {
    display: none;
    width: 100%;
}


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

.titulo-seccion {
    font-family: var(--fuente-serif);
    font-size: var(--tipo-titulo);
    font-weight: 400;
    line-height: 1.2;
}

.titulo-claro {
    color: var(--crema);
}

.ornamento-seccion {
    display: block;

    width: 100%;
    max-width: var(--ornamento-ancho);
    height: auto;

    margin-left: auto;
    margin-right: auto;
}

.animar-scroll {
    will-change: transform, opacity;
}


/* ==================================================
   BOTONES · SISTEMA UNIFICADO
================================================== */

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

    text-decoration: none;
}

.boton-interactivo {
    transform-origin: center;

    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.28s ease;

    will-change: transform;
}

@media (hover: hover) {

    .boton-interactivo:hover {
        transform:
            translateY(-3px)
            scale(1.045);

        filter: brightness(1.04);
    }

}

.boton-interactivo:active {
    transform:
        translateY(0)
        scale(0.96);

    transition-duration: 0.1s;
}

.boton-interactivo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}

.boton-interactivo img {
    pointer-events: none;
}


/* ==================================================
   1 · PORTADA
================================================== */

.portada {
    width: 100%;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--fondo);
}

.portada-superior {
    position: relative;

    width: 100%;
    min-height: 48svh;

    padding:
        40px
        24px
        28px;

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

    text-align: center;
}

.monograma {
    width: 135px;
    max-width: 42vw;
    height: auto;

    margin-bottom: 18px;
}

.nombres {
    margin-bottom: 30px;

    font-size: var(--tipo-display);
    font-weight: 300;
    line-height: 1.1;
}

.boton-abrir {
    position: relative;

    margin-bottom: 25px;

    padding:
        12px
        32px;

    border:
        2px solid
        var(--texto);

    border-radius: 999px;

    background: var(--cafe);
    color: var(--crema);

    font: inherit;
    font-size: var(--tipo-nombre);

    cursor: pointer;
}

.boton-abrir::before {
    content: "";

    position: absolute;
    inset: -9px;

    border:
        2px solid
        var(--texto);

    border-radius: 999px;

    pointer-events: none;
}

.fecha {
    font-size: var(--tipo-display);

    line-height: 1;

    letter-spacing: 2px;
}

.portada-foto {
    position: relative;

    flex: 1;

    width: 100%;
    min-height: 52svh;

    overflow: hidden;
}

.foto-portada {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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


/* ==================================================
   2 · PRESENTACIÓN
================================================== */

.presentacion {
    width: 100%;

    overflow: hidden;

    background: var(--cafe);
}

.presentacion-foto {
    position: relative;

    width: 100%;

    height: 58svh;
    min-height: 450px;
    max-height: 680px;

    overflow: hidden;

    background: var(--cafe);
}

.foto-presentacion {
    position: absolute;

    top: -10%;
    left: 0;

    width: 100%;
    height: 120%;

    object-fit: cover;
    object-position: center;

    will-change: transform;
}


/* TRANSICIÓN MÓVIL */

.transicion-diagonal {
    position: absolute;

    left: -5%;
    bottom: -35px;

    width: 110%;
    height: 80px;

    background: var(--cafe);

    transform: rotate(-1.7deg);
    transform-origin: left center;

    z-index: 4;
}

.transicion-diagonal::before {
    content: "";

    position: absolute;

    top: -9px;
    left: 0;

    width: 100%;
    height: 9px;

    background: var(--crema);
}

.presentacion-contenido {
    position: relative;

    width: 100%;

    padding:
        52px
        30px
        90px;

    overflow: hidden;

    background: var(--cafe);
    color: var(--crema);

    text-align: center;
}

.marca-agua,
.marca-agua-seccion {
    position: absolute;

    inset: 0;

    background-image:
        url("assets/decoracion/monograma.png");

    background-repeat: no-repeat;

    pointer-events: none;
}

.marca-agua {
    background-position: center 58%;
    background-size: 83%;

    opacity: 0.055;
}

.presentacion-contenido > * {
    position: relative;
    z-index: 1;
}

.frase-presentacion {
    width: 100%;
    max-width: var(--ancho-texto);

    margin:
        0
        auto
        44px;

    font-size:
        clamp(
            16px,
            4.2vw,
            18px
        );

    line-height: 1.5;
}

.pareja-presentacion {
    width: 100%;
    max-width: var(--ancho-nombres);

    margin:
        0
        auto
        52px;
}

.pareja-presentacion h2,
.grupo-padres h3 {
    font-family: var(--fuente-serif);
    font-weight: 400;
}

.pareja-presentacion h2 {
    font-size: var(--tipo-nombre);
    line-height: 1.25;
}

.ampersand {
    display: block;
    line-height: 1;
}

.pareja-ampersand {
    margin:
        8px
        0;

    font-family: var(--fuente-serif);
    font-size: var(--tipo-nombre);
}

.ornamento-wrap {
    width: 100%;

    display: flex;
    justify-content: center;

    margin:
        0
        auto
        52px;
}

.ornamento {
    width: 100%;
    height: auto;
}

.ornamento-superior,
.ornamento-inferior {
    max-width: 255px;
}

.ornamento-medio {
    max-width: 275px;
}

.familias-frase {
    width: 100%;
    max-width: var(--ancho-texto);

    margin:
        0
        auto
        58px;

    font-size: var(--tipo-cuerpo);
    line-height: 1.5;
}

.grupo-padres {
    width: 100%;
    max-width: var(--ancho-nombres);

    margin:
        0
        auto
        54px;
}

.titulo-padres {
    margin-bottom: 24px;

    font-size: var(--tipo-subtitulo);
    line-height: 1.4;
}

.grupo-padres h3 {
    font-size: var(--tipo-nombre-secundario);
    line-height: 1.3;
}

.padres-ampersand {
    margin:
        7px
        0;

    font-family: var(--fuente-serif);
    font-size: var(--tipo-nombre-secundario);
}


/* ==================================================
   3 · COUNTDOWN
================================================== */

.countdown-seccion {
    width: 100%;

    overflow: hidden;

    background: var(--cafe);
}


/*
    Todos los elementos de la sección
    conservan la proporción original:
    1800 × 1200 = 3:2
*/

.countdown-panel,
.countdown-stage {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    background: var(--cafe);
}

.countdown-panel-photo,
.countdown-stage-bg,
.countdown-stage-cutout,
.countdown-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.countdown-panel-photo,
.countdown-stage-bg,
.countdown-stage-cutout {
    object-fit: cover;
    object-position: center;
}

.countdown-stage-bg {
    z-index: 1;
}

.countdown-stage-cutout {
    z-index: 3;

    will-change: transform;
}

.countdown-overlay {
    object-fit: fill;

    z-index: 8;

    pointer-events: none;
}


/* FECHA */

.countdown-date {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;

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

    text-align: center;

    white-space: nowrap;

    font-family: var(--fuente-sans);

    font-size:
        clamp(
            92px,
            25vw,
            150px
        );

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.045em;

    pointer-events: none;
}

.countdown-date-fill {
    z-index: 2;

    color:
        rgba(
            247,
            239,
            223,
            0.98
        );
}

.countdown-date-stroke {
    z-index: 4;

    color: transparent;

    -webkit-text-stroke:
        0.65px
        rgba(
            247,
            239,
            223,
            0.92
        );
}


/* CONTADOR */

.countdown-counter {
    position: absolute;

    left: 50%;
    bottom: 13%;

    width:
        min(
            92%,
            440px
        );

    transform:
        translateX(-50%);

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

    gap: 6px;

    z-index: 6;
}

.countdown-box {
    width: 72px;
    min-height: 62px;

    padding: 6px;

    display: flex;
    flex-direction: column;

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

    background:
        rgba(
            152,
            113,
            80,
            0.96
        );

    color: var(--crema);

    text-align: center;
}

.countdown-box-label {
    margin-bottom: 3px;

    font-size: 12px;
    line-height: 1;
}

.countdown-box-value {
    font-size:
        clamp(
            18px,
            5vw,
            26px
        );

    font-weight: 400;

    line-height: 1;
}

.countdown-colon {
    color: var(--crema);

    font-size:
        clamp(
            22px,
            6vw,
            32px
        );

    line-height: 1;
}


/* ==================================================
   4 · UBICACIONES
================================================== */

.ubicaciones {
    position: relative;

    width: 100%;

    padding:
        34px
        0
        72px;

    overflow: hidden;

    background: var(--cafe);
    color: var(--crema);

    text-align: center;
}

.marca-agua-seccion {
    background-position: center 58%;
    background-size: 80%;

    opacity: 0.045;
}

.ubicaciones > * {
    position: relative;
    z-index: 1;
}


/* ORNAMENTOS */

.ubicacion-inicio,
.ubicacion-separador,
.ubicacion-final {
    width: 100%;

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

    padding-left: 24px;
    padding-right: 24px;
}

.ubicacion-inicio {
    padding-top: 0;
    padding-bottom: 28px;
}

.ubicacion-separador {
    padding-top: 38px;
    padding-bottom: 38px;
}

.ubicacion-final {
    padding-top: 48px;
    padding-bottom: 0;
}

.ubicacion-ornamento {
    display: block;

    width: 275px;
    max-width: 70vw;
    height: auto;

    margin:
        0
        auto;
}


/* ENCABEZADOS */

.ubicacion-encabezado {
    width: 100%;

    padding:
        0
        24px;

    text-align: center;
}

.ubicacion-icono {
    width: 70px;
    height: auto;

    margin:
        0
        auto
        13px;
}

.ubicacion-icono-recepcion {
    width: 78px;
}

.ubicacion-titulo,
.ubicacion-nombre {
    font-family: var(--fuente-serif);
    font-size: var(--tipo-nombre);
    font-weight: 400;
}

.ubicacion-titulo {
    margin-bottom: 6px;
}

.ubicacion-hora {
    margin-bottom: 20px;

    font-size: var(--tipo-subtitulo);
}


/* FOTOS */

.ubicacion-foto {
    position: relative;

    width: 100%;
    height: 225px;

    margin-bottom: 25px;

    overflow: hidden;
}

.ubicacion-foto-img {
    position: absolute;

    top: -15%;
    left: 0;

    width: 100%;
    height: 130%;

    object-fit: cover;
    object-position: center;

    will-change: transform;
}


/* INFORMACIÓN */

.ubicacion-info {
    width: 100%;
    max-width: 500px;

    margin:
        0
        auto;

    padding:
        0
        28px;

    text-align: center;
}

.ubicacion-nombre {
    max-width: 450px;

    margin:
        0
        auto
        11px;

    line-height: 1.3;
}

.ubicacion-direccion {
    max-width: 400px;

    margin:
        0
        auto
        26px;

    font-size: var(--tipo-cuerpo);
    line-height: 1.45;
}


/* BOTÓN MAPA */

.boton-mapa-img {
    width: 128px;
    height: auto;

    margin:
        0
        auto;
}


/* ==================================================
   5 · ITINERARIO
================================================== */

.itinerario {
    width: 100%;

    padding:
        78px
        28px
        82px;

    background: var(--fondo);
    color: var(--texto);

    text-align: center;
}

.itinerario-encabezado {
    margin-bottom: 52px;
}

.itinerario-encabezado
.titulo-seccion {
    margin-bottom: 30px;
}

.itinerario-evento {
    width: 100%;
    max-width: 420px;

    margin:
        0
        auto
        68px;

    display: flex;
    flex-direction: column;

    align-items: center;
}

.itinerario-icono {
    width: 82px;
    height: 82px;

    margin:
        0
        auto
        14px;

    object-fit: contain;
}

.itinerario-icono-grande {
    width: 90px;
    height: 90px;
}

.itinerario-evento h3 {
    margin-bottom: 5px;

    font-family: var(--fuente-serif);
    font-size: var(--tipo-nombre);
    font-weight: 400;
}

.itinerario-evento p {
    font-size: var(--tipo-subtitulo);
}

.itinerario-final {
    margin-top: -16px;
}


/* ==================================================
   6 · CÓDIGO DE VESTIMENTA
================================================== */

.codigo-vestimenta {
    width: 100%;

    padding:
        82px
        28px
        92px;

    overflow: hidden;

    background: var(--cafe);
    color: var(--crema);

    text-align: center;
}

.codigo-encabezado {
    width: 100%;
    max-width: 500px;

    margin:
        0
        auto
        58px;
}

.codigo-encabezado
.titulo-seccion {
    margin-bottom: 30px;
}

.codigo-encabezado
.ornamento-seccion {
    margin-bottom: 34px;
}

.codigo-formal {
    margin-bottom: 7px;

    font-size: var(--tipo-subtitulo);
}

.codigo-nota {
    font-size: var(--tipo-cuerpo);
    line-height: 1.45;
}

.codigo-opciones {
    width: 100%;
    max-width: 540px;

    margin:
        0
        auto;

    display: grid;

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

    gap: 36px;
}

.codigo-opcion {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
}

.codigo-imagen-contenedor {
    width: 100%;
    height: 265px;

    margin-bottom: 28px;

    display: flex;

    justify-content: center;
    align-items: flex-end;
}

.codigo-imagen {
    width: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.codigo-descripcion {
    width: 100%;

    font-size: var(--tipo-cuerpo);
    line-height: 1.35;
}

.codigo-descripcion p {
    margin-bottom: 27px;
}

.codigo-descripcion p:last-child {
    margin-bottom: 0;
}


/* ==================================================
   7 · GALERÍA
================================================== */

.galeria {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--fondo);

    outline: none;
}

.galeria-visor {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    cursor: pointer;

    touch-action: pan-y;

    user-select: none;
}

.galeria-imagen {
    position: absolute;

    top: -5%;
    left: 0;

    width: 100%;
    height: 110%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;

    user-select: none;

    will-change:
        opacity,
        transform;
}

.galeria-imagen-a {
    opacity: 1;
    z-index: 2;
}

.galeria-imagen-b {
    opacity: 0;
    z-index: 1;
}


/* ==================================================
   8 · MESA DE REGALOS
================================================== */

.mesa-regalos {
    width: 100%;

    padding:
        68px
        28px
        94px;

    background: var(--fondo);
    color: var(--texto);

    text-align: center;
}

.mesa-regalos-contenido {
    width: 100%;
    max-width: 520px;

    margin:
        0
        auto;
}

.mesa-regalos
.titulo-seccion {
    margin-bottom: 28px;
}

.mesa-regalos
.ornamento-seccion {
    margin-bottom: 28px;
}

.mesa-regalos-textos {
    max-width: 450px;

    margin:
        0
        auto;

    font-size: var(--tipo-cuerpo);
    line-height: 1.32;
}

.mesa-regalos-textos p {
    margin-bottom: 25px;
}

.mesa-regalos-textos p:last-child {
    margin-bottom: 0;
}

.lluvia-sobres {
    font-weight: 700;
}


/* ==================================================
   9 + 10 · CIERRE FINAL
   RECUERDOS + ASISTENCIA
================================================== */

.cierre-final {
    position: relative;

    width: 100%;

    margin-top: -25px;

    padding:
        90px
        28px
        90px;

    overflow: hidden;

    background: var(--cafe);
    color: var(--crema);

    text-align: center;

    clip-path:
        polygon(
            0 25px,
            100% 0,
            100% 100%,
            0 100%
        );
}


/* RECUERDOS */

.recuerdos {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    color: var(--crema);

    text-align: center;
}

.recuerdos-contenido {
    width: 100%;
    max-width: 500px;

    margin:
        0
        auto;
}

.recuerdos-titulo {
    margin-bottom: 28px;

    font-family: var(--fuente-serif);
    font-size: var(--tipo-titulo);
    font-weight: 400;

    line-height: 1.2;
}

.recuerdos-ornamento {
    margin-bottom: 34px;
}

.recuerdos-textos {
    width: 100%;
    max-width: 430px;

    margin:
        0
        auto;

    font-size: var(--tipo-cuerpo);
    line-height: 1.35;
}

.recuerdos-textos p {
    margin-bottom: 28px;
}

.recuerdos-textos p:last-child {
    margin-bottom: 0;
}


/* QR */

.qr-contenedor {
    width: 100%;

    margin-top: 38px;

    display: flex;

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

.qr-recuerdos {
    width: 155px;
    max-width: 45vw;

    height: auto;
}


/* ASISTENCIA */

.asistencia {
    position: relative;

    width: 100%;

    /*
        Solo una separación editorial pequeña.
        Ya no existe el hueco enorme.
    */

    margin:
        48px
        0
        0;

    padding: 0;

    background: transparent;

    color: var(--crema);

    text-align: center;
}

.asistencia-contenido {
    width: 100%;
    max-width: 500px;

    margin:
        0
        auto;
}

.asistencia-ornamento {
    margin-bottom: 38px;
}

.asistencia-textos {
    width: 100%;
    max-width: 440px;

    margin:
        0
        auto
        38px;

    font-size: var(--tipo-cuerpo);
    line-height: 1.45;
}

.asistencia-textos p {
    margin-bottom: 26px;
}

.asistencia-textos p:last-child {
    margin-bottom: 0;
}

.asistencia-boton {
    margin-bottom: 38px;
}

.asistencia-boton-img {
    width: 225px;
    max-width: 70vw;

    height: auto;

    margin:
        0
        auto;
}

.asistencia-cierre {
    font-family: var(--fuente-serif);
    font-size: var(--tipo-nombre-secundario);
    font-weight: 400;

    line-height: 1.3;
}


/* ==================================================
   CELULARES PEQUEÑOS
================================================== */

@media (max-width: 370px) {

    .codigo-vestimenta {
        padding-left: 20px;
        padding-right: 20px;
    }

    .codigo-opciones {
        gap: 20px;
    }

    .codigo-imagen-contenedor {
        height: 235px;
    }

    .countdown-date {
        font-size:
            clamp(
                82px,
                24vw,
                105px
            );
    }

    .countdown-box {
        width: 66px;
    }

    .countdown-counter {
        gap: 4px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media
(min-width: 700px)
and
(max-width: 899px) {

    .invitacion {
        width: 100%;
        max-width: none;
    }

    .presentacion-foto {
        height: 650px;
    }

    .ubicacion-foto {
        height: 320px;
    }

    .codigo-imagen-contenedor {
        height: 300px;
    }

    .countdown-date {
        font-size:
            clamp(
                150px,
                23vw,
                205px
            );
    }

}


/* ==================================================
   DESKTOP
================================================== */

@media (min-width: 900px) {

    :root {
        --tipo-display:
            clamp(
                46px,
                4vw,
                58px
            );

        --tipo-titulo:
            clamp(
                30px,
                2.5vw,
                38px
            );

        --tipo-nombre:
            clamp(
                25px,
                2vw,
                31px
            );

        --tipo-nombre-secundario:
            clamp(
                21px,
                1.8vw,
                26px
            );

        --tipo-subtitulo:
            clamp(
                18px,
                1.5vw,
                21px
            );

        --tipo-cuerpo:
            clamp(
                17px,
                1.3vw,
                19px
            );

        --ancho-texto: 620px;
        --ancho-nombres: 720px;
        --ornamento-ancho: 320px;
    }


    /* CONTENEDOR */

    .invitacion {
        width:
            min(
                1180px,
                calc(
                    100vw - 80px
                )
            );

        max-width: 1180px;

        min-height: 100vh;

        margin:
            0
            auto;
    }


    /* FULL BLEED */

    .portada,
    .presentacion,
    .countdown-seccion,
    .ubicaciones,
    .itinerario,
    .codigo-vestimenta,
    .galeria,
    .mesa-regalos,
    .cierre-final {
        width: 100vw;

        margin-left:
            calc(
                50%
                -
                50vw
            );
    }


    /* ==================================================
       PORTADA WEB
    ================================================== */

    .portada {
        display: grid;

        grid-template-columns:
            44%
            56%;

        height: 100vh;
        min-height: 700px;
    }

    .portada-superior {
        min-height: 100%;
        height: 100%;

        padding: 60px;
    }

    .portada-foto {
        min-height: 100%;
        height: 100%;
    }

    .monograma {
        width: 165px;

        max-width: none;

        margin-bottom: 28px;
    }

    .nombres {
        margin-bottom: 42px;
    }

    .boton-abrir {
        padding:
            14px
            38px;

        margin-bottom: 38px;

        font-size: 22px;
    }


    /* ==================================================
       PRESENTACIÓN WEB
    ================================================== */

    .presentacion-foto {
        width: 100%;

        height:
            min(
                76vh,
                820px
            );

        min-height: 650px;
        max-height: none;
    }

    /*
        Bajamos el encuadre para mostrar
        mejor las caras.
    */

    .foto-presentacion {
        top: -4%;

        height: 120%;

        object-position:
            center
            30%;
    }


    /* TRANSICIÓN SIN LÍNEA NEGRA */

    .transicion-diagonal {
        left: 0;
        bottom: -1px;

        width: 100%;
        height: 78px;

        transform: none;

        background: var(--crema);

        clip-path:
            polygon(
                0 0,
                100% 10%,
                100% 100%,
                0 100%
            );

        overflow: hidden;
    }

    .transicion-diagonal::before {
        content: "";

        position: absolute;

        top: 8px;
        left: 0;

        width: 100%;

        height:
            calc(
                100%
                -
                8px
            );

        background: var(--cafe);

        clip-path:
            polygon(
                0 0,
                100% 10%,
                100% 100%,
                0 100%
            );
    }

    .presentacion-contenido {
        width: 100%;

        padding-top: 95px;
        padding-bottom: 125px;

        padding-left:
            max(
                100px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    100px
                )
            );

        padding-right:
            max(
                100px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    100px
                )
            );
    }

    .frase-presentacion {
        max-width: 660px;

        margin-bottom: 60px;

        font-size: 25px;
        line-height: 1.42;
    }

    .pareja-presentacion {
        margin-bottom: 66px;
    }

    .familias-frase {
        margin-bottom: 72px;

        font-size: 19px;
    }

    .grupo-padres {
        margin-bottom: 68px;
    }

    .ornamento-wrap {
        margin-bottom: 64px;
    }


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

    .countdown-seccion {
        padding: 0;

        background: var(--cafe);
    }

    .countdown-panel,
    .countdown-stage {
        width: 100%;
        max-width: none;

        aspect-ratio: 3 / 2;

        margin: 0;
    }

    .countdown-panel-photo,
    .countdown-stage-bg,
    .countdown-stage-cutout {
        width: 100%;
        height: 100%;

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

    .countdown-overlay {
        width: 100%;
        height: 100%;

        object-fit: fill;
    }


    /* FECHA WEB GRANDE */

    .countdown-date {
        top: 49%;

        width: 100%;

        font-size:
            clamp(
                260px,
                20vw,
                410px
            );

        line-height: 0.86;

        letter-spacing: -0.055em;
    }

    .countdown-date-stroke {
        -webkit-text-stroke:
            0.9px
            rgba(
                247,
                239,
                223,
                0.92
            );
    }


    /* CONTADOR WEB */

    .countdown-counter {
        bottom: 11%;

        width:
            min(
                76vw,
                950px
            );

        gap:
            clamp(
                10px,
                1.2vw,
                22px
            );
    }

    .countdown-box {
        width:
            clamp(
                105px,
                7vw,
                140px
            );

        min-height:
            clamp(
                88px,
                6vw,
                115px
            );

        padding:
            10px
            8px;
    }

    .countdown-box-label {
        margin-bottom: 7px;

        font-size:
            clamp(
                14px,
                1vw,
                19px
            );
    }

    .countdown-box-value {
        font-size:
            clamp(
                32px,
                2.5vw,
                48px
            );
    }

    .countdown-colon {
        font-size:
            clamp(
                38px,
                3vw,
                56px
            );
    }


    /* ==================================================
       UBICACIONES WEB
    ================================================== */

    .ubicaciones {
        padding-top: 80px;
        padding-bottom: 110px;

        padding-left:
            max(
                70px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    70px
                )
            );

        padding-right:
            max(
                70px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    70px
                )
            );
    }


    /* ORNAMENTOS CENTRADOS */

    .ubicacion-inicio,
    .ubicacion-separador,
    .ubicacion-final {
        width: 100%;

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

        padding-left: 0;
        padding-right: 0;
    }

    .ubicacion-inicio {
        padding-top: 0;
        padding-bottom: 45px;
    }

    .ubicacion-separador {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .ubicacion-final {
        padding-top: 80px;
        padding-bottom: 0;
    }

    .ubicacion-ornamento {
        width: 310px;
        max-width: 310px;

        margin:
            0
            auto;
    }


    /* CEREMONIA */

    .ubicacion {
        width: 100%;
        max-width: 1040px;

        margin:
            0
            auto;

        display: grid;

        grid-template-columns:
            minmax(
                300px,
                0.85fr
            )
            minmax(
                430px,
                1.15fr
            );

        grid-template-areas:
            "encabezado foto"
            "informacion foto";

        align-items: center;

        column-gap: 65px;
    }

    .ubicacion-encabezado {
        grid-area: encabezado;

        align-self: end;

        padding:
            0
            10px
            15px;
    }

    .ubicacion-foto {
        grid-area: foto;

        width: 100%;
        height: 440px;

        margin: 0;
    }

    .ubicacion-info {
        grid-area: informacion;

        align-self: start;

        padding:
            15px
            10px
            0;
    }

    .ubicacion-icono {
        width: 82px;
    }

    .ubicacion-icono-recepcion {
        width: 92px;
    }


    /* RECEPCIÓN INVERTIDA */

    .ubicacion-recepcion {
        grid-template-columns:
            minmax(
                430px,
                1.15fr
            )
            minmax(
                300px,
                0.85fr
            );

        grid-template-areas:
            "foto encabezado"
            "foto informacion";
    }


    /* BOTONES MAPA */

    .boton-mapa-img {
        width: 148px;
    }


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

    .itinerario {
        padding-top: 105px;
        padding-bottom: 115px;

        padding-left:
            max(
                80px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    80px
                )
            );

        padding-right:
            max(
                80px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    80px
                )
            );

        display: grid;

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

        column-gap: 50px;
        row-gap: 72px;
    }

    .itinerario-encabezado {
        grid-column:
            1
            /
            -1;

        margin-bottom: 15px;
    }

    .itinerario-evento {
        max-width: none;

        margin: 0;
    }

    .itinerario-icono {
        width: 94px;
        height: 94px;

        margin-bottom: 20px;
    }

    .itinerario-icono-grande {
        width: 102px;
        height: 102px;
    }

    .itinerario-final {
        grid-column:
            1
            /
            -1;

        margin-top: 15px;
    }


    /* ==================================================
       VESTIMENTA WEB
    ================================================== */

    .codigo-vestimenta {
        padding-top: 105px;
        padding-bottom: 120px;

        padding-left:
            max(
                80px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    80px
                )
            );

        padding-right:
            max(
                80px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    80px
                )
            );
    }

    .codigo-encabezado {
        max-width: 680px;

        margin-bottom: 70px;
    }

    .codigo-opciones {
        max-width: 800px;

        gap: 100px;
    }

    .codigo-imagen-contenedor {
        height: 390px;

        margin-bottom: 34px;
    }

    .codigo-descripcion {
        line-height: 1.45;
    }


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

    .galeria {
        padding: 0;
    }

    .galeria-visor {
        width: 100%;
        max-width: none;

        margin: 0;

        aspect-ratio: 16 / 9;
    }

    .galeria-imagen {
        width: 100%;
        height: 110%;

        object-fit: cover;
    }


    /* ==================================================
       MESA REGALOS WEB
    ================================================== */

    .mesa-regalos {
        padding-top: 105px;
        padding-bottom: 125px;

        padding-left:
            max(
                60px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    60px
                )
            );

        padding-right:
            max(
                60px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    60px
                )
            );
    }

    .mesa-regalos-contenido {
        max-width: 680px;
    }

    .mesa-regalos-textos {
        max-width: 590px;

        line-height: 1.45;
    }

    .mesa-regalos-textos p {
        margin-bottom: 32px;
    }


    /* ==================================================
       CIERRE WEB
    ================================================== */

    .cierre-final {
        margin-top: -35px;

        padding-top: 125px;
        padding-bottom: 130px;

        padding-left:
            max(
                60px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    60px
                )
            );

        padding-right:
            max(
                60px,
                calc(
                    (
                        100vw
                        -
                        1180px
                    )
                    /
                    2
                    +
                    60px
                )
            );

        clip-path:
            polygon(
                0 35px,
                100% 0,
                100% 100%,
                0 100%
            );
    }

    .recuerdos-contenido {
        max-width: 680px;
    }

    .recuerdos-titulo {
        margin-bottom: 32px;
    }

    .recuerdos-ornamento {
        margin-bottom: 38px;
    }

    .recuerdos-textos {
        max-width: 560px;

        font-size: 19px;
        line-height: 1.45;
    }

    .recuerdos-textos p {
        margin-bottom: 32px;
    }

    .qr-contenedor {
        margin-top: 45px;
    }

    .qr-recuerdos {
        width: 190px;

        max-width: none;
    }


    /*
        Separación entre QR
        y Confirmación de asistencia.
    */

    .asistencia {
        margin-top: 64px;
    }

    .asistencia-contenido {
        max-width: 680px;
    }

    .asistencia-ornamento {
        margin-bottom: 42px;
    }

    .asistencia-textos {
        max-width: 580px;

        margin-bottom: 44px;

        font-size: 19px;
        line-height: 1.5;
    }

    .asistencia-textos p {
        margin-bottom: 30px;
    }

    .asistencia-boton {
        margin-bottom: 44px;
    }

    .asistencia-boton-img {
        width: 260px;

        max-width: none;
    }

    .asistencia-cierre {
        font-size: 25px;
    }

}


/* ==================================================
   MONITORES GRANDES
================================================== */

@media (min-width: 1500px) {

    .invitacion {
        max-width: 1240px;
    }

    .portada {
        grid-template-columns:
            42%
            58%;
    }

}


/* ==================================================
   MOVIMIENTO REDUCIDO
================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

}