* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;

    min-height: 100%;

}


body {

    font-family: Georgia, serif;

    background: #efe5d5;

    color: #5a4634;

    overflow-x: hidden;

}



/* ==========================================
   PANTALLA INICIAL
========================================== */

.pantalla-inicial {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;


    opacity: 1;


    transition:
        opacity 1.2s ease,
        transform 1.2s ease;


    touch-action: none;

}


.pantalla-inicial.ocultando {

    opacity: 0;

    transform: scale(1.02);

    pointer-events: none;

}



/* ==========================================
   SOBRE
========================================== */

.sobre-con-sello {

    position: relative;

    width: min(100%, 600px);

}


.imagen-sobre {

    width: 100%;

    height: auto;

    display: block;

}



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

.sello-con-efecto {

    position: absolute;

    width: 23.5%;

    left: 50%;

    top: 53.4%;

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

    z-index: 10;

}


.sello {

    width: 100%;

    height: auto;

    display: block;

}



/* ==========================================
   GRIETA
========================================== */

.grieta-svg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 20;

    pointer-events: none;

    overflow: visible;

}


.grieta-principal {

    fill: none;

    stroke: #d9b45f;

    stroke-width: 1.5;
    filter: drop-shadow(0.25px 0.35px 0 #fff0bc) drop-shadow(-0.3px -0.3px 0.3px #70451d);

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 100;

    stroke-dashoffset: 100;

}



.sello-con-efecto.sello-rompiendo
.grieta-principal {

    animation:
        dibujarGrieta
        2.4s
        ease
        forwards;

    animation-delay: .8s;

}



@keyframes dibujarGrieta {

    from {

        stroke-dashoffset: 100;

    }

    to {

        stroke-dashoffset: 0;

    }

}



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

.sello-con-efecto.sello-rompiendo {

    animation:
        romperSello
        4s
        ease
        forwards;

}


@keyframes romperSello {

    0% {

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(0deg);

        opacity: 1;

    }


    15% {

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(-2deg);

        opacity: 1;

    }


    30% {

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(2deg);

        opacity: 1;

    }


    45% {

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(-2deg);

        opacity: 1;

    }


    60% {

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

        opacity: 1;

    }


    80% {

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(0deg);

        opacity: 1;

    }


    92% {

        transform:
            translate(-50%, -50%)
            scale(.95)
            rotate(2deg);

        opacity: .9;

    }


    100% {

        transform:
            translate(-50%, -50%)
            scale(0)
            rotate(8deg);

        opacity: 0;

    }

}



/* ==========================================
   VIDEO
========================================== */

.video-secuencia {

    position: fixed;

    inset: 0;

    z-index: 50;


    display: flex;

    justify-content: center;

    align-items: center;


    background: #efe5d5;


    opacity: 0;

    visibility: hidden;

    pointer-events: none;


    transition:
        opacity 2.7s ease;

}


.video-secuencia.visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.video-invitacion {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    background: #efe5d5;

}



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

.invitacion-abierta {

    position: fixed;

    inset: 0;

    z-index: 40;


    display: flex;

    justify-content: center;

    align-items: center;


    padding: 20px;


    background: #efe5d5;


    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.invitacion-abierta.visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.marco-invitacion {
    position: relative;
    container-type: inline-size;
    width: min(600px, 100%, calc((100vh - 40px) * 0.562799));
    flex: none;
}

.grieta-rama { stroke-width: 0.9; }
.sello-rompiendo .grieta-rama { animation-duration: 1.3s; animation-delay: 1.5s; }
.sello-rompiendo .grieta-rama-tardia { animation-delay: 2s; }
.sello-rompiendo .grieta-rama-fina { stroke-width: 0.65; animation-delay: 2.3s; }

.control-musica {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 1100;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #b18b4c80;
    border-radius: 50%;
    background: #faf3e6ed;
    color: #80612f;
    cursor: pointer;
    box-shadow: 0 2px 8px #5a463414;
}
.control-musica[hidden] { display: none; }
.control-musica svg { width: 21px; height: 21px; }
.control-musica:focus-visible { outline: 2px solid #80612f; outline-offset: 3px; }
.sonido-silenciado, .control-musica[aria-pressed="true"] .ondas-sonido { display: none; }
.control-musica[aria-pressed="true"] .sonido-silenciado { display: block; }

.imagen-invitacion-abierta {

    width: 100%;

    height: auto;

    display: block;

    max-height: none;

    object-fit: contain;

}



/* ==========================================
   BOTONES DE LA INVITACIÓN
========================================== */

.botones-invitacion {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);


    width: min(88%, 480px);


    display: flex;

    gap: 12px;


    justify-content: center;


    z-index: 100;

}



/* BOTÓN */

.boton-invitacion {

    flex: 1;


    min-height: 48px;


    display: flex;

    justify-content: center;

    align-items: center;


    text-align: center;


    padding: 12px 14px;


    text-decoration: none;


    font-family:
        Georgia,
        serif;


    font-size: 13px;

    letter-spacing: 1px;


    color: #6f542b;


    background:
        rgba(
            250,
            244,
            232,
            0.94
        );


    border:
        1px solid
        rgba(
            175,
            135,
            65,
            0.9
        );


    border-radius: 6px;


    box-shadow:
        0 4px 14px
        rgba(
            70,
            50,
            30,
            0.15
        );


    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}



/* EFECTO AL PASAR EL MOUSE */

.boton-invitacion:hover {

    transform:
        translateY(-2px);


    background:
        rgba(
            255,
            250,
            240,
            1
        );


    box-shadow:
        0 6px 18px
        rgba(
            70,
            50,
            30,
            0.2
        );

}



/* EFECTO AL PRESIONAR */

.boton-invitacion:active {

    transform:
        scale(.97);

}



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

@media
(max-width: 430px) {

    .botones-invitacion {

        width: 90%;

        gap: 8px;

    }


    .boton-invitacion {

        font-size: 11px;

        letter-spacing: .7px;

        padding: 11px 8px;

    }

}
/* ==========================================
   ZONAS CLICABLES
========================================== */

.zona-clicable {

    position: absolute;

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

    z-index: 999;

    display: block;

    pointer-events: auto;

    cursor: pointer;

    border-radius: 8px;

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
}

.indicacion-botones {
    position: absolute;
    top: 84.5%;
    left: 8%;
    width: 84%;
    margin: 0;
    color: #80612f;
    font-family: Georgia, serif;
    font-size: 2.5cqw;
    font-style: italic;
    line-height: 1.15;
    letter-spacing: 0.025em;
    text-align: center;
    pointer-events: none;
}


/* ==========================================
   MODO DE AJUSTE
   Solo se utiliza mientras acomodamos
   los botones.
========================================== */

.zona-clicable.modo-ajuste {

    background: rgba(255, 0, 0, 0.30) !important;

    border: 2px solid red !important;
}

/* Apertura adaptable y lacre dividido */
.pantalla-inicial { min-height: 100svh; flex-direction: column; gap: 12px; }
.sobre-con-sello { width: min(100%, 600px, calc((100svh - 76px) * .5625)); }
.sello-con-efecto { padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sello-con-efecto:focus-visible { outline: 2px solid #80612f; outline-offset: 5px; border-radius: 50%; }
.indicacion-abrir { margin: 0; color: #80612f; font: italic 13px/1.3 Georgia, serif; letter-spacing: .04em; }
.imagen-sobre, .sello { user-select: none; -webkit-user-drag: none; }
.sello-con-efecto:not(.sello-rompiendo) .sello-superior { clip-path: none; }
.sello-con-efecto:not(.sello-rompiendo) .sello-inferior,
.sello-con-efecto:not(.sello-rompiendo) .grieta-svg { visibility: hidden; }
.sello-superior { clip-path: polygon(0 0,100% 0,100% 45%,85% 45%,74% 43%,66% 44%,57% 46%,50% 47%,43% 48%,35% 51%,28% 53%,14% 60%,0 60%); }
.sello-inferior { position: absolute; inset: 0; clip-path: polygon(0 60%,14% 60%,28% 53%,35% 51%,43% 48%,50% 47%,57% 46%,66% 44%,74% 43%,85% 45%,100% 45%,100% 100%,0 100%); }
.sello-rompiendo .sello-superior { animation: separarLacreArriba 2.4s ease forwards; }
.sello-rompiendo .sello-inferior { animation: separarLacreAbajo 2.4s ease forwards; }
@keyframes separarLacreArriba { 0%,75% { transform: none; } 100% { transform: translate(-1%, -3%) rotate(-1deg); } }
@keyframes separarLacreAbajo { 0%,75% { transform: none; } 100% { transform: translate(1%, 3%) rotate(1deg); } }
.sello-con-efecto.sello-rompiendo { animation: tensionLacre 2.4s ease forwards; }
@keyframes tensionLacre { 0%,70% { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; } 25%,55% { transform: translate(-50%,-50%) rotate(-.5deg); } 40% { transform: translate(-50%,-50%) rotate(.5deg); } 85% { opacity: 1; } 100% { transform: translate(-50%,-50%); opacity: 0; } }
.sello-con-efecto.sello-rompiendo .grieta-principal { animation-duration: 1.4s; animation-delay: .25s; }
.sello-con-efecto.sello-rompiendo .grieta-rama { animation-duration: .8s; animation-delay: .7s; }
.sello-con-efecto.sello-rompiendo .grieta-rama-tardia { animation-delay: 1s; }
.sello-con-efecto.sello-rompiendo .grieta-rama-fina { animation-delay: 1.2s; }
.video-secuencia {
    transition: opacity 1s ease, visibility 0s linear 1s;
}
.video-secuencia.visible {
    transition: opacity .8s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) { .sello-con-efecto.sello-rompiendo, .sello-rompiendo .sello { animation: none; } .sello-con-efecto.sello-rompiendo .grieta-principal { animation-duration: .01s; animation-delay: 0s; } .pantalla-inicial, .video-secuencia { transition: none; } }

/* Un mismo encuadre para el sobre, el video y la tarjeta final. */
:root { --ancho-escena: min(100vw, calc(100svh * .5625)); }
.pantalla-inicial { height: 100svh; min-height: 0; display: grid; place-items: center; gap: 0; padding: 0; }
.sobre-con-sello, .marco-invitacion, .marco-video { width: var(--ancho-escena); }
.sobre-con-sello, .marco-video { position: relative; container-type: inline-size; }
.pantalla-inicial.ocultando { transform: none; }
.indicacion-abrir { position: absolute; top: 86.5%; bottom: auto; left: 0; width: 100%; text-align: center; font-size: clamp(10px, 3.2cqw, 17px); }
.video-invitacion { width: var(--ancho-escena); height: auto; aspect-ratio: 9 / 16; }
.invitacion-abierta { padding: 0; transition: none; }
.video-secuencia, .invitacion-abierta { height: 100svh; }
.acceso-directo { position: absolute; top: 90%; bottom: auto; left: 50%; transform: translateX(-50%); z-index: 1100; width: 74%; min-height: 36px; padding: 8px 10px; border: 1px solid #b18b4c80; border-radius: 24px; background: #faf3e6ed; color: #80612f; font: clamp(10px, 3.2cqw, 17px) Georgia, serif; white-space: nowrap; cursor: pointer; }
.control-musica { right: calc((100vw - var(--ancho-escena)) / 2 + 10px); top: calc((100svh - var(--ancho-escena) * 16 / 9) / 2 + 10px); }
.acceso-directo[hidden] { display: none; }
.acceso-directo:focus-visible { outline: 2px solid #80612f; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .invitacion-abierta { transition: none; } }