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

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #f5f0e8;
    color: #302b27;
    overflow: hidden;
}


/* =========================================================
   PANTALLA PRINCIPAL
   ========================================================= */

.pantalla {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;

    background: #f5f0e8;

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

    overflow: hidden;

    cursor: pointer;
}


/* =========================================================
   PERRETES
   ========================================================= */

.perretes {
    position: absolute;

    width: 100%;
    height: 70%;

    top: 50%;
    left: 0;

    transform: translateY(-50%);

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

    z-index: 5;
}

.perros-juntos {
    position: absolute;

    width: min(76vw, 430px);
    max-height: 55vh;

    object-fit: contain;

    opacity: 1;

    z-index: 20;

    transition:
        opacity 0.9s ease,
        transform 1s ease;
}

.perro {
    position: absolute;

    width: min(48vw, 270px);
    max-height: 55vh;

    object-fit: contain;

    opacity: 0;

    transition:
        transform 1.4s cubic-bezier(.77, 0, .18, 1),
        opacity 0.8s ease;
}

.perro-izquierda {
    width: 45vw;
    max-width: 190px;

    left: 50%;
    margin-left: -190px;
}

.perro-derecha {
    width: 45vw;
    max-width: 190px;

    right: 50%;
    margin-right: -190px;
}


/* =========================================================
   TEXTO INICIAL
   ========================================================= */

.contenido-inicial {
    position: absolute;

    bottom: 10%;

    width: 100%;

    text-align: center;

    z-index: 10;

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

.fecha {
    font-size: 14px;

    letter-spacing: 4px;

    margin-bottom: 18px;
}

.mensaje {
    font-size: 12px;

    letter-spacing: 3px;

    text-transform: uppercase;

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


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

@keyframes respirar {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

@keyframes palpitar {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.08);
    }
}


/* =========================================================
   INVITACIÓN
   ========================================================= */

.invitacion {
    position: absolute;

    width: min(90%, 500px);

    padding: 40px 25px;

    left: 50%;
    top: 50%;

    text-align: center;

    opacity: 0;
    visibility: hidden;

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

    transition:
        opacity 1s ease,
        transform 1s ease,
        visibility 1s ease;

    z-index: 30;
}

.invitacion .pequeno {
    margin-bottom: 25px;

    font-size: 12px;

    letter-spacing: 5px;

    text-align: center;
}

.invitacion h1 {
    font-size: clamp(48px, 13vw, 78px);

    font-weight: normal;

    line-height: 0.95;

    letter-spacing: 2px;
}

.invitacion h1 span {
    display: block;

    font-size: 25px;

    margin: 15px 0;
}

.texto {
    max-width: 300px;

    margin: 30px auto 0;

    font-size: 16px;

    line-height: 1.7;

    text-align: center;
}

.toca-invitacion {
    display: block;

    margin-top: 18px;

    text-align: center;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 4px;

    text-transform: uppercase;

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


/* =========================================================
   APERTURA
   ========================================================= */

.pantalla.abierta .perros-juntos {
    opacity: 0 !important;

    transform: scale(1.08);
}

.pantalla.abierta .perro {
    opacity: 1;
}

.pantalla.abierta .perro-izquierda {
    transform:
        translateX(-100vw)
        translateY(10px)
        rotate(-4deg);
}

.pantalla.abierta .perro-derecha {
    transform:
        translateX(100vw)
        translateY(10px)
        rotate(4deg);
}

.pantalla.abierta .contenido-inicial {
    opacity: 0;

    transform:
        translateY(20px);
}

.pantalla.abierta .invitacion {
    opacity: 1;

    visibility: visible;

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


/* =========================================================
   HISTORIA
   ========================================================= */

.historia {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;

    background: #f5f0e8;

    overflow: hidden;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none;

    z-index: 50;

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

.historia-fecha {
    position: absolute;

    top: 7%;

    left: 50%;

    width: 100%;

    transform:
        translateX(-50%)
        translateY(-15px);

    text-align: center;

    font-size: 14px;

    letter-spacing: 5px;

    opacity: 0;

    z-index: 60;

    transition:
        opacity 1s ease 0.3s,
        transform 1s ease 0.3s;
}

.fotos-historia {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.foto {
    position: fixed;

    opacity: 0;
}

.foto img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.pantalla.mostrar-historia .historia {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}

.pantalla.mostrar-historia .historia-fecha {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   POLAROIDS — PC
   ========================================================= */

@media (min-width: 769px) {

    .pantalla.mostrar-historia .foto {

        position: fixed !important;

        width: 380px !important;
        height: 380px !important;

        min-width: 380px !important;
        min-height: 380px !important;

        max-width: 380px !important;
        max-height: 380px !important;

        opacity: 1 !important;
    }

    .pantalla.mostrar-historia .foto1 {

        left: 23vw !important;
        top: 5vh !important;

        transform:
            rotate(12deg) !important;
    }

    .pantalla.mostrar-historia .foto2 {

        left: 36vw !important;
        top: 8vh !important;

        transform:
            rotate(3deg) !important;
    }

    .pantalla.mostrar-historia .foto3 {

        left: 50vw !important;
        top: 4vh !important;

        transform:
            rotate(-5deg) !important;
    }

    .pantalla.mostrar-historia .foto4 {

        left: 63vw !important;
        top: 6vh !important;

        transform:
            rotate(5deg) !important;
    }

    .pantalla.mostrar-historia .foto5 {

        left: 29vw !important;
        top: 44vh !important;

        transform:
            rotate(-12deg) !important;
    }

    .pantalla.mostrar-historia .foto6 {

        left: 44vw !important;
        top: 43vh !important;

        transform:
            rotate(4deg) !important;
    }

    .pantalla.mostrar-historia .foto7 {

        left: 58vw !important;
        top: 43vh !important;

        transform:
            rotate(4deg) !important;
    }
}


/* =========================================================
   TEXTO FINAL DE HISTORIA
   ========================================================= */

.historia-final {

    position: absolute;

    left: 50%;

    bottom: 8%;

    width: 85%;

    margin: 0;

    transform:
        translateX(-50%)
        translateY(15px);

    text-align: center;

    font-size: 16px;

    line-height: 1.5;

    letter-spacing: 5px;

    opacity: 0;

    z-index: 60;

    transition:
        opacity 1s ease 0.4s,
        transform 1s ease 0.4s;
}

.pantalla.mostrar-historia .historia-final {

    opacity: 1 !important;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   TOCA LA PANTALLA — HISTORIA
   ========================================================= */

.toca-historia {

    position: absolute;

    left: 50%;

    bottom: 3%;

    width: 100%;

    transform:
        translateX(-50%);

    text-align: center;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0;

    z-index: 70;
}

.pantalla.mostrar-historia .toca-historia {

    opacity: 1 !important;

    animation:
        palpitar 2s ease-in-out 1.2s infinite;
}


/* =========================================================
   CONFIRMACIÓN
   ========================================================= */

.confirmacion {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100dvh;

    display: flex;

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

    overflow: hidden;

    background: #f5f0e8;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 200;

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

.confirmacion .foto-lugar {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.5;

    filter: saturate(0.85);

    z-index: 1;
}

.confirmacion::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(
            250,
            246,
            238,
            0.48
        );

    z-index: 2;
}

.confirmacion-contenido {

    position: relative;

    z-index: 3;

    width: min(90%, 600px);

    padding: 10px 25px;

    text-align: center;

    margin: 0 auto;
}


/* =========================================================
   CABECERA CONFIRMACIÓN
   ========================================================= */

.confirmacion-contenido .pequeno {

    margin: 0 0 10px;

    font-size: 16px;

    letter-spacing: 5px;

    text-align: center;
}

.lugar-texto {

    margin: 0 0 4px;

    font-size: 35px;

    letter-spacing: 1px;

    text-align: center;
}

.hora-confirmacion {

    margin: 4px 0 14px;

    font-size: 35px;

    font-weight: bold;

    letter-spacing: 5px;

    text-align: center;
}

.mensaje-confirmacion {

    max-width: 480px;

    margin: 0 auto 25px;

    font-size: 16px;

    line-height: 1.6;

    text-align: center;
}


/* =========================================================
   TÍTULO DATOS
   ========================================================= */

.confirmacion-contenido h3 {

    margin: 12px 0 14px;

    font-size: 17px;

    font-weight: bold;

    letter-spacing: 4px;

    text-align: center;
}


/* =========================================================
   NOMBRE
   ========================================================= */

#nombre {

    display: block;

    width: min(100%, 360px);

    margin: 0 auto;

    padding: 13px 15px;

    border: 1px solid #cfc4b6;

    border-radius: 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    text-align: center;

    color: #302b27;

    outline: none;
}

#nombre::placeholder {

    color: #9a8f83;
}


/* =========================================================
   ASISTENCIA
   ========================================================= */

.asistencia {

    width: 100%;

    margin: 0 auto;

    text-align: center;
}

.pregunta {

    margin: 20px 0 12px;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

    text-align: center;
}


/* =========================================================
   OPCIONES DE ASISTENCIA
   ========================================================= */

.opciones-asistencia {

    display: flex;

    flex-direction: column;

    width: 100%;

    max-width: 360px;

    margin: 15px auto 0;

    gap: 10px;
}

.opcion-asistencia {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    cursor: pointer;

    text-align: left;
}

.opcion-asistencia input {

    flex-shrink: 0;

    width: 16px;
    height: 16px;

    margin: 0 10px 0 0;

    cursor: pointer;
}

.opcion-asistencia span {

    font-size: 11px;

    line-height: 1.4;

    letter-spacing: 1.5px;

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   INFORMACIÓN COMIDA + ANIMACIÓN
   ========================================================= */

.informacion-comida {

    display: block;

    width: 100%;

    margin: 0 auto;

    text-align: center;

    opacity: 0;

    max-height: 0;

    overflow: hidden;

    transform: translateY(15px);

    pointer-events: none;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        max-height 0.7s ease,
        margin-top 0.6s ease;
}

.informacion-comida.visible {

    opacity: 1;

    max-height: 180px;

    transform: translateY(0);

    margin-top: 18px;

    pointer-events: auto;
}

.comida {

    max-width: 460px;

    margin: 0 auto;

    font-size: 13px;

    line-height: 1.6;

    text-align: center;
}

.comida span {

    display: block;

    margin-bottom: 3px;
}

.comida strong {

    display: block;

    margin-top: 5px;

    font-weight: bold;

    letter-spacing: 1px;
}


/* =========================================================
   ALERGIAS / INTOLERANCIAS + ANIMACIÓN
   ========================================================= */

.alergias {

    display: block;

    width: 100%;

    margin: 0 auto;

    text-align: center;

    opacity: 0;

    max-height: 0;

    overflow: hidden;

    transform: translateY(15px);

    pointer-events: none;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        max-height 0.7s ease,
        margin-top 0.6s ease;

    transition-delay: 0.15s;
}

.alergias.visible {

    opacity: 1;

    max-height: 180px;

    transform: translateY(0);

    margin-top: 18px;

    pointer-events: auto;
}

.alergias p {

    margin: 0 0 8px;

    font-size: 11px;

    line-height: 1.4;

    letter-spacing: 1.5px;

    text-align: center;
}

.alergias input {

    display: block;

    width: min(100%, 360px);

    margin: 0 auto;

    padding: 11px 14px;

    border: 1px solid #cfc4b6;

    border-radius: 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    text-align: center;

    color: #302b27;

    outline: none;
}

.alergias input::placeholder {

    color: #9a8f83;
}


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

.boton-confirmar {

    display: block;

    width: min(100%, 260px);

    margin: 20px auto 0;

    padding: 12px 20px;

    border: 1px solid #a99b8b;

    border-radius: 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    color: #5f554c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.boton-confirmar:hover {

    background: #fff;

    transform:
        translateY(-2px);
}


/* =========================================================
   RESPUESTA
   ========================================================= */

#respuesta-confirmacion {

    margin-top: 18px;

    font-size: 13px;

    letter-spacing: 2px;

    text-align: center;
}


/* =========================================================
   BOTÓN MÚSICA
   ========================================================= */

.boton-musica {

    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(
            95,
            85,
            76,
            0.45
        );

    border-radius: 50%;

    background:
        rgba(
            250,
            246,
            238,
            0.75
        );

    color: #5f554c;

    display: flex;

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

    z-index: 1000;

    cursor: pointer;
}


/* =========================================================
   CONFIRMACIÓN ACTIVA
   ========================================================= */

.pantalla:not(.mostrar-confirmacion)
.confirmacion {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}

.pantalla.mostrar-confirmacion
.confirmacion {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 9999 !important;
}

.pantalla.mostrar-confirmacion
.perretes,

.pantalla.mostrar-confirmacion
.contenido-inicial,

.pantalla.mostrar-confirmacion
.invitacion,

.pantalla.mostrar-confirmacion
.historia {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


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

.lugar {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


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

@media (max-width: 768px) {

    /* =====================================================
       GENERAL
       ===================================================== */

    html,
    body {

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

    .pantalla {

        width: 100%;
        height: 100%;
    }


    /* =====================================================
       BOTÓN MÚSICA
       ===================================================== */

    .boton-musica {

        right: 16px;
        bottom: 16px;

        width: 38px;
        height: 38px;

        font-size: 15px;
    }


    /* =====================================================
       PERROS
       ===================================================== */

    .perros-juntos {

        width: 78vw;

        max-width: 330px;

        max-height: 48vh;
    }

    .perro {

        width: 45vw;

        max-width: 190px;

        max-height: 45vh;
    }


    /* =====================================================
       TEXTO INICIAL
       ===================================================== */

    .contenido-inicial {

        bottom: 8%;

        padding: 0 20px;
    }

    .fecha {

        font-size: 14px;

        letter-spacing: 3px;

        margin-bottom: 14px;
    }

    .mensaje {

        font-size: 10px;

        letter-spacing: 2.5px;
    }


    /* =====================================================
       INVITACIÓN
       ===================================================== */

    .invitacion {

        width: 90%;

        max-width: 420px;

        padding: 25px 18px;
    }

    .invitacion .pequeno {

        font-size: 10px;

        letter-spacing: 4px;

        margin-bottom: 18px;
    }

    .invitacion h1 {

        font-size: 58px;
    }

    .invitacion h1 span {

        font-size: 20px;

        margin: 10px 0;
    }

    .texto {

        max-width: 280px;

        margin-top: 25px;

        font-size: 14px;

        line-height: 1.6;
    }

    .toca-invitacion {

        margin-top: 16px;

        font-size: 9px;

        letter-spacing: 3px;
    }


    /* =====================================================
       HISTORIA
       ===================================================== */

    .historia-fecha {

        top: 6%;

        font-size: 10px;

        letter-spacing: 3px;

        white-space: nowrap;
    }


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

    .pantalla.mostrar-historia .foto {

        position: fixed !important;

        width: 185px !important;
        height: 185px !important;

        min-width: 185px !important;
        min-height: 185px !important;

        max-width: 185px !important;
        max-height: 185px !important;

        opacity: 1 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .pantalla.mostrar-historia .foto img {

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }


    /* =====================================================
       POLAROID 1
       ===================================================== */

    .pantalla.mostrar-historia .foto1 {

        left: 10vw !important;

        top: 9vh !important;

        transform:
            rotate(-7deg) !important;
    }


    /* =====================================================
       POLAROID 2
       ===================================================== */

    .pantalla.mostrar-historia .foto2 {

        left: 40vw !important;

        top:10vh !important;

        transform:
            rotate(5deg) !important;
    }


    /* =====================================================
       POLAROID 3
       ===================================================== */

    .pantalla.mostrar-historia .foto3 {

        left: 13vw !important;

        top: 25vh !important;

        transform:
            rotate(7deg) !important;
    }


    /* =====================================================
       POLAROID 4
       ===================================================== */

    .pantalla.mostrar-historia .foto4 {

        left: 45vw !important;

        top: 27vh !important;

        transform:
            rotate(-9deg) !important;
    }


    /* =====================================================
       POLAROID 5
       ===================================================== */

    .pantalla.mostrar-historia .foto5 {

        left: 25vw !important;

        top: 38vh !important;

        transform:
            rotate(-10deg) !important;
    }


    /* =====================================================
       POLAROID 6
       ===================================================== */

    .pantalla.mostrar-historia .foto6 {

        left: 14vw !important;

        top: 53vh !important;

        transform:
            rotate(5deg) !important;
    }


    /* =====================================================
       POLAROID 7
       ===================================================== */

    .pantalla.mostrar-historia .foto7 {

        left: 68% !important;

        top: 52vh !important;

        transform:
            translateX(-50%)
            rotate(4deg) !important;
    }


    /* =====================================================
       TEXTO HISTORIA
       ===================================================== */

    .historia-final {

        position: absolute !important;

        left: 50% !important;

        bottom: 8% !important;

        width: 88% !important;

        margin: 0 !important;

        transform:
            translateX(-50%) !important;

        font-size: 10px !important;

        line-height: 1.5 !important;

        letter-spacing: 2px !important;

        text-align: center !important;

        z-index: 100 !important;
    }


    /* =====================================================
       TOCA LA PANTALLA
       ===================================================== */

    .toca-historia {

        position: absolute !important;

        left: 50% !important;

        bottom: 3% !important;

        width: 100% !important;

        transform:
            translateX(-50%) !important;

        font-size: 9px !important;

        letter-spacing: 3px !important;

        text-align: center !important;

        z-index: 110 !important;

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


    /* =====================================================
       CONFIRMACIÓN MÓVIL
       ===================================================== */

    .confirmacion {

        width: 100%;

        height: 100%;

        overflow: hidden;
    }

    .confirmacion .foto-lugar {

        width: 100%;

        height: 100%;

        object-fit: cover;
    }

    .confirmacion-contenido {

        width: 92%;

        max-width: 430px;

        padding: 10px 12px;

        max-height: 94%;

        overflow-y: auto;

        scrollbar-width: none;
    }

    .confirmacion-contenido::-webkit-scrollbar {

        display: none;
    }


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

    .confirmacion-contenido .pequeno {

        margin-bottom: 8px;

        font-size: 10px;

        letter-spacing: 4px;
    }

    .lugar-texto {

        margin-bottom: 3px;

        font-size: 25px;

        line-height: 1.15;
    }

    .hora-confirmacion {

        margin: 4px 0 10px;

        font-size: 25px;

        letter-spacing: 4px;
    }

    .mensaje-confirmacion {

        width: 90%;

        margin: 0 auto 16px;

        font-size: 13px;

        line-height: 1.4;
    }


    /* =====================================================
       DATOS
       ===================================================== */

    .confirmacion-contenido h3 {

        margin: 8px 0 10px;

        font-size: 14px;

        letter-spacing: 3px;
    }

    #nombre {

        width: 90%;

        max-width: 330px;

        padding: 11px 12px;

        font-size: 14px;
    }


    /* =====================================================
       PREGUNTA ASISTENCIA
       ===================================================== */

    .pregunta {

        margin: 12px 0 8px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    /* =====================================================
       OPCIONES ASISTENCIA MÓVIL
       ===================================================== */

    .opciones-asistencia {

        width: 90%;

        max-width: 330px;

        gap: 9px;

        margin: 12px auto 0;
    }

    .opcion-asistencia {

        width: 100%;

        justify-content: flex-start;

        text-align: left;
    }

    .opcion-asistencia input {

        width: 15px;

        height: 15px;

        margin-right: 8px;
    }

    .opcion-asistencia span {

        font-size: 9px;

        line-height: 1.4;

        letter-spacing: 1px;

        text-align: left;
    }


    /* =====================================================
       INFORMACIÓN COMIDA MÓVIL
       ===================================================== */

    .informacion-comida {

        margin-top: 0;
    }

    .informacion-comida.visible {

        margin-top: 14px;

        max-height: 160px;
    }

    .comida {

        width: 90%;

        font-size: 10px;

        line-height: 1.4;
    }

    .comida strong {

        margin-top: 5px;

        font-size: 12px;

        letter-spacing: 1px;
    }


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

    .alergias {

        width: 90%;

        margin-top: 0;
    }

    .alergias.visible {

        margin-top: 14px;

        max-height: 160px;
    }

    .alergias p {

        margin-bottom: 6px;

        font-size: 9px;

        letter-spacing: 1px;
    }

    .alergias input {

        width: 100%;

        padding: 10px 12px;

        font-size: 13px;
    }


    /* =====================================================
       BOTÓN CONFIRMAR MÓVIL
       ===================================================== */

    .boton-confirmar {

        width: 90%;

        max-width: 300px;

        margin-top: 16px;

        padding: 11px 15px;

        font-size: 9px;

        letter-spacing: 1.5px;
    }


    /* =====================================================
       RESPUESTA
       ===================================================== */

    #respuesta-confirmacion {

        margin-top: 14px;

        font-size: 11px;

        line-height: 1.5;

        letter-spacing: 1px;
    }

}


/* =========================================================
   COLORES FINALES
   ========================================================= */

.confirmacion,
.confirmacion p,
.confirmacion h2,
.confirmacion h3,
.confirmacion strong,
.confirmacion .pequeno,
.confirmacion .lugar-texto,
.confirmacion .hora-confirmacion,
.confirmacion .mensaje-confirmacion,
.confirmacion .pregunta,
.confirmacion .comida,
.confirmacion .comida span,
.confirmacion .comida strong,
.confirmacion .alergias p,
.confirmacion #respuesta-confirmacion {

    color: #302b27 !important;
}

.confirmacion input {

    color: #302b27 !important;
}

.confirmacion input::placeholder {

    color: #9a8f83 !important;
}

.confirmacion .botones-asistencia button {

    color: #5f554c;
}


/* =========================================================
   MENSAJE FINAL DE CONFIRMACIÓN
   ========================================================= */

.mensaje-final {

    width: 100%;

    max-width: 520px;

    margin: 0 auto;

    text-align: center;
}


/* ---------------------------------------------------------
   MENSAJE ENVIADO
   --------------------------------------------------------- */

.mensaje-final-titulo {

    margin: 0 0 28px;

    font-size: 18px;

    font-weight: normal;

    letter-spacing: 4px;

    text-transform: uppercase;

    line-height: 1.4;

    text-align: center;

    color: #302b27;
}


/* ---------------------------------------------------------
   TEXTO DEL MENSAJE
   --------------------------------------------------------- */

.mensaje-final-texto {

    width: 100%;

    margin: 0 auto;

    max-width: 500px;

    font-size: 16px;

    line-height: 1.5;

    text-align: center;

    color: #302b27;
}


/* ---------------------------------------------------------
   BOTÓN / ENLACE DESCARGAR
   --------------------------------------------------------- */

.boton-descargar {

    display: inline-block;

    margin-top: 28px;

    padding: 10px 18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    color: #302b27;

    border: 1px solid #a99b8b;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.boton-descargar:hover {

    background: #fff;

    transform:
        translateY(-2px);
}


/* =========================================================
   MENSAJE FINAL — MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    .mensaje-final {

        width: 90%;

        max-width: 360px;

        margin: 0 auto;

        text-align: center;
    }


    .mensaje-final-titulo {

        margin-bottom: 28px;

        font-size: 14px;

        letter-spacing: 3px;

        line-height: 1.4;
    }


    .mensaje-final-texto {

        width: 100%;

        font-size: 14px;

        line-height: 1.5;

        text-align: center;
    }


    .boton-descargar {

        margin-top: 28px;

        padding: 9px 15px;

        font-size: 9px;

        letter-spacing: 1.5px;
    }

}