/* =========================================================
   PROJECT SHADAI V2
   SEVR - MIS XV PRIMAVERAS
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {

    --sky-light: #dff4ff;
    --sky-blue: #9dcfee;
    --blue-soft: #72acd2;
    --blue-medium: #477ca7;
    --blue-deep: #183f68;
    --blue-book: #244f79;
    --blue-book-dark: #123452;

    --silver: #e7edf2;
    --silver-medium: #bfcbd5;

    --ivory: #fffaf0;

    --text-light: #ffffff;
    --text-dark: #19324a;

    --lavender: #cfc7ef;

}


/* =========================================================
   02. RESET
   ========================================================= */

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

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    font-family: "Cormorant Garamond", serif;

        background:
        radial-gradient(
            circle at 50% 20%,
            rgba(180, 150, 210, 0.25),
            transparent 35%
        ),
        linear-gradient(
            to bottom,
            #18263b 0%,
            #263b50 35%,
            #182b36 70%,
            #101d25 100%
        );

}


/* =========================================================
   03. ESCENA PRINCIPAL
   ========================================================= */

.wonderland {

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

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

    padding: 35px 20px 45px;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(255,255,255,.95) 0%,
            rgba(220,244,255,.85) 13%,
            transparent 34%
        ),

        linear-gradient(
            180deg,
            #a9d9f4 0%,
            #7eb7dc 32%,
            #568bb4 62%,
            #254f75 100%
        );

}


/* =========================================================
   04. RESPLANDOR
   ========================================================= */

.sky-glow {

    position: absolute;

    width: 900px;
    height: 600px;

    top: -330px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

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

    filter: blur(90px);

    pointer-events: none;
}


/* =========================================================
   05. LUNA
   ========================================================= */

.moon {

    position: absolute;

    width: 115px;
    height: 115px;

    top: 8%;
    right: 11%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #f4f5ee 55%,
            #dce7ed 100%
        );

    box-shadow:
        0 0 25px rgba(255,255,255,.8),
        0 0 80px rgba(220,240,255,.7);

    opacity: .75;
}


/* =========================================================
   06. BOSQUE
   ========================================================= */

.forest {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    pointer-events: none;
}


/* Bosque lejano */

.forest-back {

    height: 52%;

    opacity: .25;

    background:

        radial-gradient(
            ellipse at 8% 100%,
            #214d66 0 22%,
            transparent 23%
        ),

        radial-gradient(
            ellipse at 25% 100%,
            #214d66 0 26%,
            transparent 27%
        ),

        radial-gradient(
            ellipse at 75% 100%,
            #214d66 0 27%,
            transparent 28%
        ),

        radial-gradient(
            ellipse at 95% 100%,
            #214d66 0 24%,
            transparent 25%
        );
}


/* Bosque cercano */

.forest-front {

    height: 37%;

    opacity: .42;

    background:

        radial-gradient(
            ellipse at -5% 100%,
            #123c50 0 30%,
            transparent 31%
        ),

        radial-gradient(
            ellipse at 13% 110%,
            #17495e 0 31%,
            transparent 32%
        ),

        radial-gradient(
            ellipse at 88% 110%,
            #17495e 0 32%,
            transparent 33%
        ),

        radial-gradient(
            ellipse at 108% 100%,
            #123c50 0 30%,
            transparent 31%
        );
}


/* =========================================================
   07. NIEBLA
   ========================================================= */

.mist {

    position: absolute;

    left: -10%;

    width: 120%;
    height: 170px;

    border-radius: 50%;

    background: rgba(240,250,255,.17);

    filter: blur(35px);

    pointer-events: none;
}

.mist-one {
    bottom: 6%;
}

.mist-two {
    bottom: 25%;
    opacity: .45;
}


/* =========================================================
   08. LUCIÉRNAGAS
   ========================================================= */

.fireflies {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.firefly {

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #fffbd1;

    box-shadow:
        0 0 7px #ffffff,
        0 0 15px #fff8b5;

    opacity: .75;
}


/* =========================================================
   09. CONTENIDO CENTRAL
   ========================================================= */

.hero {

    position: relative;

    z-index: 10;

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

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

    text-align: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: visible !important;
}


/* =========================================================
   10. FRASE SUPERIOR
   ========================================================= */

.story-intro {
    position: relative;
    z-index: 20;

    display: block;

    margin: 0 auto 28px;

    width: 90%;
    max-width: 430px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(22px, 5vw, 30px);

    font-weight: 600;

    font-style: italic;

    line-height: 1.35;

    text-align: center;

    color: #ffffff;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.75),
        0 0 12px rgba(190, 155, 220, 0.95),
        0 0 25px rgba(130, 85, 170, 0.65);
}


/* =========================================================
   11. CONTENEDOR DEL LIBRO
   ========================================================= */

.book-wrapper {

    position: relative;

    width: min(390px, 78vw);

    aspect-ratio: 0.72;

    perspective: 1800px;
}


/* Sombra debajo */

.book-shadow {

    position: absolute;

    width: 82%;
    height: 10%;

    left: 9%;
    bottom: -4%;

    border-radius: 50%;

    background: rgba(4,25,44,.42);

    filter: blur(18px);
}


/* Libro */

/* Libro */

.book {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    filter:
        drop-shadow(0 22px 22px rgba(10,37,60,.30))
        drop-shadow(0 45px 45px rgba(7,29,47,.24));

    /* 🟢 SOLUCIÓN 3D: Trae el libro y todo su contenido hacia el frente físico */
    transform: translateZ(100px) !important; 
    
    /* Mantenemos las prioridades previas */
    z-index: 9999 !important;
    isolation: isolate; 
}




/* =========================================================
   12. PÁGINAS DEL LIBRO
   ========================================================= */

.page-stack {
    position: absolute;

    top: 2.3%;
    left: 4%;

    width: 97%;
    height: 96%;

    border-radius: 8px 13px 13px 8px;

    /* 🟢 CAMBIO DEFINITIVO: Eliminamos los renglones molestos 
       y dejamos un fondo liso color pergamino claro muy elegante */
    background: #fffaf0 !important; 

    transform: translateX(3px);

    box-shadow: 4px 4px 10px rgba(0,0,0,.16);
}



/* =========================================================
   13. CUBIERTA
   ========================================================= */

.book-cover {

    position: absolute;

    inset: 0;

    border-radius: 12px 16px 16px 12px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(130,190,225,.22),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #315f8b 0%,
            #234f79 42%,
            #173c60 100%
        );

    border:
        1px solid rgba(230,240,247,.55);

    box-shadow:

        inset 10px 0 22px rgba(255,255,255,.08),

        inset -12px 0 25px rgba(5,28,49,.27),

        inset 0 0 35px rgba(255,255,255,.06),

        0 0 0 2px rgba(128,165,192,.25);

}


/* Lomo */

.book-cover::before {

    content: "";

    position: absolute;

    left: 18px;
    top: 0;

    width: 13px;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(4,25,45,.28),
            rgba(255,255,255,.10),
            rgba(4,25,45,.18)
        );

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

    border-right:
        1px solid rgba(0,0,0,.18);
}


/* Brillo de cubierta */

.book-cover::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 15%,
            rgba(255,255,255,.09) 43%,
            transparent 62%
        );
}


/* =========================================================
   14. MARCO PLATEADO
   ========================================================= */

.cover-border {

    position: absolute;

    inset: 27px 25px 27px 42px;

    border:
        1px solid rgba(230,239,245,.75);

    outline:
        1px solid rgba(187,205,218,.30);

    outline-offset: 7px;

    border-radius: 4px;

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


/* Segundo marco */

.cover-border::before {

    content: "";

    position: absolute;

    inset: 9px;

    border:
        1px solid rgba(230,239,245,.22);

    pointer-events: none;
}


/* =========================================================
   15. ESQUINAS
   ========================================================= */

.corner {

    position: absolute;

    color: rgba(234,242,247,.82);

    font-size: 22px;

    line-height: 1;
}

.corner-tl {
    top: 8px;
    left: 10px;
}

.corner-tr {
    top: 8px;
    right: 10px;
    transform: rotate(90deg);
}

.corner-bl {
    bottom: 8px;
    left: 10px;
    transform: rotate(-90deg);
}

.corner-br {
    bottom: 8px;
    right: 10px;
    transform: rotate(180deg);
}


/* =========================================================
   16. CONTENIDO DE LA CUBIERTA
   ========================================================= */

.cover-content {

    width: 100%;

    padding: 22px;

    color: var(--silver);

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

.small-ornament {

    margin-bottom: 13px;

    font-size: 18px;

    color: #f0f4f7;
}

.cover-pretitle {

    margin-bottom: 8px;

    font-size: clamp(16px, 2vw, 20px);

    font-style: italic;

    letter-spacing: 1px;

    color: rgba(240,246,249,.85);
}


/* SEVR */

.cover-content h1 {

    margin: 0;

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 6vw, 66px);

    font-weight: 600;

    letter-spacing: 10px;

    line-height: 1.1;

    color: #f4f7f9;

    text-shadow:
        0 1px 0 #ffffff,
        0 3px 8px rgba(7,31,51,.45);
}


/* Separador */

.title-divider {

    width: 78%;

    margin: 18px 0;

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

    gap: 10px;
}

.title-divider span {

    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(230,239,245,.75),
            transparent
        );
}

.title-divider i {

    font-style: normal;

    font-size: 15px;

    color: rgba(240,245,248,.85);
}


/* Mis XV Primaveras */

.cover-content h2 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(29px, 4vw, 39px);
    
    /* 🟢 CAMBIO 1: Subimos el grosor para evitar que la letra se vea borrosa */
    font-weight: 600 !important; 
    line-height: .95;
    color: #f7f9fa !important;

    /* 🟢 CAMBIO 2: Filtro de contraste limpio. Crea una delgada línea oscura 
       alrededor de las letras que las separa del bosque sin nublar la tipografía */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.9)) !important;
    text-shadow: 
        1px 1px 0px rgba(0, 0, 0, 0.8),
       -1px 1px 0px rgba(0, 0, 0, 0.8),
        1px -1px 0px rgba(0, 0, 0, 0.8),
       -1px -1px 0px rgba(0, 0, 0, 0.8) !important;
}

.cover-content h2 strong {
    display: block;
    margin-top: 8px;
    font-size: 1.12em;
    
    /* 🟢 Subimos también el grosor aquí */
    font-weight: 700 !important; 
    font-style: italic;
}



/* Fecha */

.cover-date {

    margin-top: 30px;

    font-family: "Cinzel", serif;

    font-size: clamp(14px, 2vw, 18px);

    letter-spacing: 4px;

    color: rgba(235,242,246,.9);
}

.cover-flourish {

    margin-top: 25px;

    font-size: 28px;

    color: rgba(230,239,245,.8);
}


/* =========================================================
   17. BOTÓN / LLAVE
   ========================================================= */

.enter-button {

    position: relative;

    margin-top: 32px;

    min-width: 210px;

    padding: 12px 28px 12px 18px;

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

    gap: 12px;

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

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #7950a0,
            #9b62b8,
            #c58bd8
        );

    backdrop-filter: blur(10px);

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 0 14px rgba(196, 135, 220, .55),
        0 8px 25px rgba(35, 15, 50, .45),
        inset 0 0 18px rgba(255,255,255,.12);

    text-shadow:
        0 1px 5px rgba(30,10,40,.65);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}

.enter-button:hover {

    transform: translateY(-2px) scale(1.03);

    filter: brightness(1.12);

    box-shadow:
        0 0 22px rgba(220, 165, 240, .80),
        0 10px 30px rgba(35, 15, 50, .50),
        inset 0 0 20px rgba(255,255,255,.15);
}
.enter-button::after {

    content: "✦";

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: #fff4ff;

    font-size: 14px;

    opacity: .9;

    animation: buttonSparkle 1.8s ease-in-out infinite;
}


@keyframes buttonSparkle {

    0%, 100% {
        opacity: .35;
        transform: translateY(-50%) scale(.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }
}


/* Llave */

.key-icon {

    display: inline-flex;

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

    width: 36px;
    height: 36px;

    font-family: Georgia, serif;

    font-size: 31px;

    color: #f0f3f5;

    transform: rotate(-25deg);

    text-shadow:
        0 0 10px rgba(255,255,255,.7);
}


/* Texto botón */

.button-text {

    font-family: "Montserrat", sans-serif;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 1.2px;
}


/* =========================================================
   18. TEXTO INFERIOR
   ========================================================= */

.follow-text {
    margin: 18px auto 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;

    font-style: italic;

    letter-spacing: 0.5px;

    color: #8b6aa3;

    text-shadow:
        0 1px 8px rgba(139, 106, 163, 0.22);

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

.follow-text:hover {
    color: #684783;

    transform: translateY(-2px);
}


/* =========================================================
   19. RELOJ DE ALICIA
   ========================================================= */

.wonder-clock {

    position: absolute;

    z-index: 4;

    top: 14%;
    left: 8%;

    width: 82px;
    height: 82px;

    border-radius: 50%;

    border:
        2px solid rgba(240,245,248,.35);

    box-shadow:
        inset 0 0 15px rgba(255,255,255,.08),
        0 0 25px rgba(255,255,255,.08);

    opacity: .48;

    transform: rotate(-13deg);
}

.wonder-clock::before {

    content: "";

    position: absolute;

    width: 20px;
    height: 12px;

    top: -11px;
    left: 29px;

    border:
        2px solid rgba(240,245,248,.35);

    border-bottom: none;

    border-radius: 8px 8px 0 0;
}

.wonder-clock > span:first-child {

    position: absolute;

    top: 6px;
    left: 50%;

    transform: translateX(-50%);

    color: white;

    font-family: "Cinzel", serif;

    font-size: 9px;
}

.clock-hand {

    position: absolute;

    left: 50%;
    top: 50%;

    display: block;

    width: 2px;

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

    transform-origin: bottom center;
}

.clock-hour {

    height: 20px;

    transform:
        translate(-50%, -100%)
        rotate(35deg);
}

.clock-minute {

    height: 28px;

    transform:
        translate(-50%, -100%)
        rotate(130deg);
}


/* =========================================================
   20. CARTAS
   ========================================================= */

.playing-card {

    position: absolute;

    z-index: 3;

    width: 48px;
    height: 70px;

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

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

    border-radius: 5px;

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

    color:
        rgba(255,255,255,.55);

    font-size: 22px;

    backdrop-filter: blur(2px);
}

.card-left {

    left: 10%;
    bottom: 14%;

    transform: rotate(-18deg);
}

.card-right {

    right: 9%;
    bottom: 20%;

    transform: rotate(14deg);
}


/* =========================================================
   21. FLORES
   ========================================================= */

.flowers {

    position: absolute;

    z-index: 5;

    bottom: 0;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    color: rgba(230,243,250,.55);

    text-shadow:
        0 0 10px rgba(255,255,255,.25);
}

.flowers span:nth-child(1) {
    font-size: 32px;
}

.flowers span:nth-child(2) {
    font-size: 45px;
}

.flowers span:nth-child(3) {
    font-size: 28px;
}

.flowers-left {
    left: 4%;
}

.flowers-right {
    right: 4%;
    transform: scaleX(-1);
}


/* =========================================================
   22. TRANSICIÓN
   ========================================================= */

.transition-light {

    position: fixed;

    z-index: 100;

    inset: 0;

    pointer-events: none;

    background: white;

    opacity: 0;

    visibility: hidden;
}


/* =========================================================
   23. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .wonderland {

        min-height: 100svh;

        padding:
            25px 15px 35px;
    }

    .story-intro {

        width: 88%;

        margin-bottom: 16px;
    }

    .book-wrapper {

        width:
            min(310px, 76vw);
    }

    .cover-border {

        inset:
            22px 20px 22px 34px;
    }

    .cover-content {

        padding: 14px;
    }

    .cover-content h1 {

        letter-spacing: 7px;
    }

    .wonder-clock {

        width: 60px;
        height: 60px;

        left: 3%;
        top: 12%;
    }

    .clock-hour {
        height: 15px;
    }

    .clock-minute {
        height: 21px;
    }

    .playing-card {

        width: 37px;
        height: 55px;

        opacity: .55;
    }

    .moon {

        width: 80px;
        height: 80px;

        right: 6%;
    }
    /* ==========================================
       AJUSTES PARA CELULAR
    ========================================== */

    /* Información del evento centrada */
    #eventInfo {
        width: 100%;
        max-width: 92vw;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
        box-sizing: border-box;
    }

    #eventInfo .event-info {
        width: 100%;
        max-width: 92vw;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* Evita que el contenido se desplace hacia la derecha */
    .event-info,
    .verse-section,
    .adventure-section {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Personajes detrás del libro */
    .alice-character {
        z-index: 2 !important;
    }

}


@media (max-width: 420px) {

    .wonderland {

        padding-top: 20px;
    }

    .story-intro {

        font-size: 16px;
    }

    .book-wrapper {

        width: min(285px, 75vw);
    }

    .cover-date {

        margin-top: 22px;
    }

    .cover-flourish {

        margin-top: 17px;
    }

    .enter-button {

        margin-top: 25px;
    }

    .playing-card {

        display: none;
    }

}
/* =====================================================
   INFORMACIÓN DEL EVENTO
===================================================== */

.event-info {

    width: min(90%, 600px);

    margin: 40px auto 80px;

    padding: 35px 25px;

    text-align: center;

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

    border: 1px solid #c5d5df;

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(20, 55, 80, 0.25);

    color: #24445f;

    opacity: 0;

    transform: translateY(30px);

    visibility: hidden;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        visibility 0.6s ease;
}


.event-info.show {

    opacity: 1;

    transform: translateY(0);

    visibility: visible;
}


.event-info h2 {

    margin: 12px 0 25px;

    font-family: "Cinzel", serif;

    color: #244f79;

    font-size: 32px;
}


.event-intro {

    font-size: 19px;

    line-height: 1.5;

    font-style: italic;

    color: #52708a;
}


.event-details {
    /* Mantenemos el sistema grid pero optimizado */
    display: grid;

    /* 🟢 CAMBIO 1: Forzamos a que haya 1 sola columna completa en lugar de 2. 
       Esto le da el 100% del ancho del libro a cada dato para que quepa en una sola línea. */
    grid-template-columns: 1fr !important;

    /* Ajustamos el espacio vertical entre los datos (líneas) */
    gap: 16px !important;

    margin: 0 auto 30px;

    max-width: 470px;
    
    /* 🟢 CAMBIO 2: Centramos el texto de todos los bloques internos */
    text-align: center !important;
}



.detail {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 10px;

    border-bottom: 1px solid #dce6ec;

    font-family: "Montserrat", sans-serif;

    font-size: 14px;
}


.detail .icon {

    font-size: 21px;
}


.event-closing {

    margin-top: 25px;

    font-size: 18px;

    font-style: italic;

    color: #52708a;

    line-height: 1.5;
}


@media (max-width: 480px) {

    .event-info {

        padding: 28px 18px;
    }

    .event-info h2 {

        font-size: 27px;
    }

    .event-intro {

        font-size: 17px;
    }

    .detail {

        font-size: 13px;
    }

}
/* ==========================================
   BOTÓN ABRIR EL LIBRO
========================================== */

.enter-button {
    position: relative !important;

    display: flex !important;

    width: 150px !important;
    height: 58px !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

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

    gap: 8px !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(255, 255, 255, 0.65) !important;

    border-radius: 30px !important;

    background: rgba(38, 67, 94, 0.82) !important;

    color: #ffffff !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 14px !important;

    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20) !important;

    transform: none !important;
}

.enter-button span {
    position: static !important;

    display: inline !important;

    width: auto !important;
    height: auto !important;

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

    transform: none !important;

    color: #ffffff !important;

    font-size: 14px !important;

    white-space: nowrap !important;
}

.enter-button:hover {
    transform: translateY(-2px) !important;

    background: rgba(48, 78, 106, 0.95) !important;
}S

/* ==========================================
   INFORMACIÓN DE LA CELEBRACIÓN
========================================== */

.event-info {
    width: min(88%, 560px);

    margin: 80px auto 70px;

    padding: 42px 15px;

    box-sizing: border-box;

    text-align: center;

    background: transparent;

    border: none;

    border-radius: 0;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    color: #fff8ff;

    opacity: 0;

    transform: translateY(25px);

    visibility: hidden;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        visibility 0.7s ease;
}

.event-info.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


/* Pequeña frase superior */

.event-label {
    margin: 0 0 10px;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;

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

    text-shadow:
        0 1px 8px rgba(255, 220, 255, 0.35);
}


/* Título */

.event-info > h2 {
    margin: 0;

    font-family: "Cinzel", serif;

    font-size: clamp(30px, 6vw, 42px);

    font-weight: 600;

    background: linear-gradient(
        90deg,
        #d8b7e8,
        #ffffff,
        #d8b7e8
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        0 2px 14px rgba(30, 15, 45, 0.55),
        0 0 18px rgba(220, 190, 240, 0.35);       
}

/* Título de las XV Primaveras */
.event-title-xv {
    margin: 5px 0 4px;

    font-family: "Cinzel", serif;

    font-size: clamp(28px, 6vw, 40px);

    font-weight: 600;

    color: #f5d9ff;

    text-shadow:
        0 2px 12px rgba(40, 20, 55, 0.55),
        0 0 16px rgba(220, 180, 240, 0.35);
}


/* Texto "de su princesa" */
.event-princess {
    margin: 4px 0 6px; /* Ajustamos un poco los márgenes para dar espacio */

    font-family: "Cormorant Garamond", serif;

    /* 🟢 CAMBIO 1: Lo agrandamos para que mantenga proporción en móviles y PC */
    font-size: clamp(24px, 4.5vw, 30px) !important;

    font-style: italic;

    /* 🟢 CAMBIO 2: Subimos el grosor para que la tipografía fina no se pierda */
    font-weight: 600 !important;

    /* 🟢 CAMBIO 3: Blanco puro al 100% sin transparencias para máximo contraste */
    color: #ffffff !important;
    
    /* 🟢 CAMBIO 4: Añadimos una sombra sutil para despegarlo de la niebla */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5) !important;
}



/* Nombre de Shadai */
.event-info > h2.event-name-shadai {
    display: block;

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

    margin: 4px auto 28px;

    padding: 0;

    box-sizing: border-box;

    font-family: "Cormorant Garamond", serif;

    /* 🟢 CAMBIO 1: Agrandamos el nombre significativamente.
       Ahora medirá mínimo 28px en celulares pequeños y hasta 46px en pantallas grandes. */
    font-size: clamp(28px, 6vw, 46px) !important;

    line-height: 1.1;

    font-style: italic;

    /* 🟢 CAMBIO 2: Le damos el grosor máximo para un contraste perfecto */
    font-weight: 700 !important;

    letter-spacing: 1px; /* Un toque de separación elegante entre letras */

    color: #ffffff;

    /* 🟢 CAMBIO 3: Cambiamos nowrap por normal para que si el nombre es muy largo,
       se acomode en dos renglones estéticos en celulares en lugar de cortarse */
    white-space: normal !important;

    overflow: visible;

    text-overflow: clip;

    background: none;

    -webkit-text-fill-color: #ffffff;

    text-shadow:
        0 2px 12px rgba(30, 15, 45, 0.60),
        0 0 14px rgba(220, 190, 240, 0.30);
}


.event-name-shadai {
    width: 100%;
    max-width: 100%;

    margin: 4px auto 28px;
    padding: 0;

    box-sizing: border-box;

    font-family: "Cormorant Garamond", serif;

    font-size: 22px !important;

    line-height: 1.1;

    font-style: italic;
    font-weight: 600;

    letter-spacing: 0;

    color: #ffffff;

    white-space: nowrap;

    overflow: visible;

    background: none;

    -webkit-text-fill-color: #ffffff;

    text-shadow:
        0 2px 12px rgba(30, 15, 45, 0.60),
        0 0 14px rgba(220, 190, 240, 0.30);
}

/* Nombre */

.event-name {
    margin: 14px 0 24px; /* Damos un poquito más de espacio para que respire */

    font-family: "Cormorant Garamond", serif;

    /* 🟢 CAMBIO 1: Tamaño fluido. Crecerá de forma inteligente entre 24px (celular) y 32px (pantalla grande) */
    font-size: clamp(24px, 3.8vw, 32px) !important;

    font-style: italic;

    /* 🟢 CAMBIO 2: Grosor aumentado para que los trazos finos no desaparezcan en el follaje */
    font-weight: 600 !important;

    /* 🟢 CAMBIO 3: Blanco puro brillante al 100% para romper la oscuridad del bosque */
    color: #ffffff !important;

    /* 🟢 CAMBIO 4: Sombra ultra-nítida en 4 esquinas. Esto crea un "delineado" oscuro invisible 
       que rescata el texto de cualquier fondo claro */
    text-shadow: 
        1px  1px 2px rgba(0, 0, 0, 0.95),
       -1px  1px 2px rgba(0, 0, 0, 0.95),
        1px -1px 2px rgba(0, 0, 0, 0.95),
       -1px -1px 2px rgba(0, 0, 0, 0.95),
        0px  3px 8px rgba(0, 0, 0, 0.60) !important;
}

.event-line {
    width: 80px;

    height: 1px;

    margin: 0 auto 30px;

    background: rgba(235, 215, 245, 0.65);
}


/* Datos */

.event-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin: 0 auto 30px;

    max-width: 470px;
}


.detail {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 60px;

    padding: 8px;

    border-bottom: 1px solid rgba(100, 125, 145, 0.18);
}


.detail .icon {
    min-width: 45px;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    letter-spacing: 1px;

    color: #71899d;
}


.detail span:last-child {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;
}


.detail small {
    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #899aa8;
}


.detail strong {
    margin-top: 3px;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 500;

    color: #304b61;
}


/* Mensaje */

.event-message {
    max-width: 400px;

    margin: 25px auto 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 19px;

    line-height: 1.5;

    font-style: italic;

    color: #62798c;
}


/* ==========================================
   AJUSTES PARA CELULAR
========================================== */

/* Información del evento centrada */
#eventInfo {
    width: 100%;
    max-width: 92vw;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center;

    box-sizing: border-box;

    position: relative;

    left: auto !important;
    right: auto !important;

    transform: none !important;
}

#eventInfo .event-info {
    width: 100%;
    max-width: 92vw;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center;

    box-sizing: border-box;

    position: relative;

    left: auto !important;
    right: auto !important;

    transform: none !important;
}


/* Evitar desplazamiento horizontal */
.event-info,
.verse-section,
.adventure-section {
    width: 100%;
    max-width: 100%;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;

    position: relative;

    left: auto !important;
    right: auto !important;

    transform: none !important;
}


/* Personajes: detrás del libro */
.alice-character {
    z-index: 2 !important;
}
/* ==========================================
   VERSÍCULO
========================================== */

.verse-section {
    width: min(88%, 560px);
    margin: 30px auto 80px;
    padding: 45px 30px;
    box-sizing: border-box;

    text-align: center;

    background: transparent;

    border: none;

    border-radius: 0;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color: #fff8ff;
}

.verse-decoration {
    font-size: 20px;
    color: #8a9aaa;
    margin: 5px 0 20px;
}

.verse-label {
    margin: 0 0 22px;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #8193a2;
}

.verse-section blockquote {
    margin: 0 auto;

    max-width: 450px;

    font-family: "Cormorant Garamond", serif;
    font-size: 23px;
    line-height: 1.55;
    font-style: italic;

    color: #40566b;
}

.verse-reference {
    margin: 22px 0 0;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;

    color: #7c8e9d;
}

@media (max-width: 600px) {

    .verse-section {
        padding: 38px 22px;
    }

    .verse-section blockquote {
        font-size: 21px;
    }
}
.follow-text {
    position: relative;
    z-index: 20;

    margin: 20px auto 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    font-weight: 600;

    font-style: italic;

    letter-spacing: 0.6px;

    text-align: center;

    color: #e2c8ef;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.75),
        0 0 10px rgba(180, 130, 210, 0.9),
        0 0 22px rgba(130, 80, 170, 0.6);
}
/* ==========================================
   NUEVA AVENTURA - ALICIA
========================================== */

.adventure-section {
    position: relative;

    width: min(88%, 560px);

    margin: 35px auto 70px;

    padding: 48px 30px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(246, 241, 247, 0.96),
            rgba(235, 231, 241, 0.96)
        );

    border-radius: 26px;

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

    box-shadow:
        0 18px 45px rgba(55, 40, 70, 0.18);

    overflow: hidden;
}


/* Pequeños destellos */

.adventure-symbol {
    margin-bottom: 15px;

    font-size: 25px;

    color: #87649d;

    text-shadow:
        0 0 12px rgba(150, 110, 175, 0.7);
}


/* Texto pequeño superior */

.adventure-label {
    margin: 0 0 12px;

    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: #8b7b94;
}


/* Título */

.adventure-section h2 {
    margin: 0 auto 25px;

    max-width: 450px;

    font-family: "Cinzel", serif;

    font-size: clamp(25px, 5vw, 34px);

    line-height: 1.3;

    color: #604873;

    text-shadow:
        0 2px 10px rgba(120, 90, 140, 0.18);
}


/* Texto */

.adventure-text {
    max-width: 430px;

    margin: 0 auto 18px;

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    line-height: 1.55;

    color: #596070;
}


.adventure-text strong {
    color: #705084;

    font-weight: 600;
}


/* Símbolos de las cartas */

.card-symbols {
    margin-top: 28px;

    font-family: Georgia, serif;

    font-size: 21px;

    letter-spacing: 5px;

    color: #80608f;

    opacity: 0.85;
}


/* Adaptación para celular */

@media (max-width: 600px) {

    .adventure-section {
        width: 90%;

        padding: 40px 22px;
    }

    .adventure-section h2 {
        font-size: 25px;
    }

    .adventure-text {
        font-size: 19px;
    }
}
/* ==========================================
   CONTENIDO OCULTO HASTA ABRIR EL LIBRO
========================================== */

/* Información de la celebración */
#eventInfo {
    display: none !important;
    visibility: hidden;
}

/* Versículo oculto inicialmente */
#eventInfo ~ .verse-section {
    display: none !important;
    visibility: hidden;
}

/* Sección de Alicia oculta inicialmente */
#eventInfo ~ .adventure-section {
    display: none !important;
    visibility: hidden;
}


/* ==========================================
   MOSTRAR CONTENIDO AL ABRIR EL LIBRO
========================================== */

#eventInfo.show {
    display: block !important;
    visibility: visible;
}

#eventInfo.show ~ .verse-section {
    display: block !important;
    visibility: visible;
}

#eventInfo.show ~ .adventure-section {
    display: block !important;
    visibility: visible;
}
/* ==========================================
   PARTÍCULAS MÁGICAS
========================================== */

.magic-particles {
    position: absolute;
    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 1;
}

.magic-particles span {
    position: absolute;

    font-family: Georgia, serif;

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

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.9),
        0 0 18px rgba(180, 145, 220, 0.7);

    animation:
        magicFloat 6s ease-in-out infinite,
        magicTwinkle 2.5s ease-in-out infinite;
}


/* Posiciones */

.magic-particles span:nth-child(1) {
    left: 12%;
    top: 22%;
    font-size: 15px;
    animation-delay: 0s;
}

.magic-particles span:nth-child(2) {
    left: 82%;
    top: 18%;
    font-size: 12px;
    animation-delay: 1.2s;
}

.magic-particles span:nth-child(3) {
    left: 20%;
    top: 55%;
    font-size: 8px;
    animation-delay: 2s;
}

.magic-particles span:nth-child(4) {
    left: 88%;
    top: 48%;
    font-size: 16px;
    animation-delay: 0.8s;
}

.magic-particles span:nth-child(5) {
    left: 8%;
    top: 72%;
    font-size: 7px;
    animation-delay: 2.5s;
}

.magic-particles span:nth-child(6) {
    left: 75%;
    top: 68%;
    font-size: 13px;
    animation-delay: 1.7s;
}

.magic-particles span:nth-child(7) {
    left: 92%;
    top: 82%;
    font-size: 10px;
    animation-delay: 3s;
}

.magic-particles span:nth-child(8) {
    left: 30%;
    top: 85%;
    font-size: 7px;
    animation-delay: 1s;
}


/* Movimiento vertical */

@keyframes magicFloat {

    0% {
        transform: translateY(15px);
    }

    50% {
        transform: translateY(-25px);
    }

    100% {
        transform: translateY(15px);
    }
}


/* Brillo */

@keyframes magicTwinkle {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}
/* ==========================================
   BOSQUE MÁGICO DE ALICIA
========================================== */

/* ==========================================
   BOSQUE MÁGICO - FONDO DE LA INVITACIÓN
========================================== */

.wonderland-forest {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

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

    overflow: hidden;

    pointer-events: none;

    z-index: 1 !important;

    opacity: 1;
}

.forest-background {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

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

    display: block !important;

    object-fit: cover;

    object-position: center center;

    opacity: 0.88;

    filter:
        saturate(1.15)
        brightness(0.78);

    pointer-events: none;
}


/* Árboles */

.tree {
    position: absolute;

    bottom: -20px;

    width: 90px;
    height: 190px;

    opacity: 0.72;

    animation: treeSway 7s ease-in-out infinite;
}


/* Tronco */

.tree::before {
    content: "";

    position: absolute;

    left: 39px;
    bottom: 0;

    width: 18px;
    height: 125px;

    border-radius: 50% 50% 10% 10%;

    background: rgba(35, 48, 55, 0.72);

    transform: rotate(2deg);
}


/* Copa */

.tree::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 35%,
            rgba(80, 103, 91, 0.78),
            rgba(38, 59, 59, 0.9) 70%
        );

    box-shadow:
        25px 20px 0 rgba(43, 64, 61, 0.75),
        -18px 35px 0 rgba(48, 70, 65, 0.78);
}


/* Posiciones */

.tree-1 {
    left: -15px;
    transform: scale(1.15);
    animation-delay: 0s;
}

.tree-2 {
    left: 18%;
    transform: scale(0.72);
    animation-delay: 1.2s;
}

.tree-3 {
    left: 42%;
    transform: scale(1.05);
    animation-delay: 2.4s;
}

.tree-4 {
    right: 17%;
    transform: scale(0.72);
    animation-delay: 1.5s;
}

.tree-5 {
    right: -15px;
    transform: scale(1.2);
    animation-delay: 0.7s;
}


/* Arbustos */

.bush {
    position: absolute;

    bottom: -20px;

    width: 130px;
    height: 75px;

    border-radius: 50% 50% 0 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(73, 92, 82, 0.85),
            rgba(35, 52, 52, 0.92)
        );
}

.bush-1 {
    left: 5%;
}

.bush-2 {
    left: 43%;
    transform: scale(1.25);
}

.bush-3 {
    right: 5%;
    transform: scale(1.1);
}


/* Niebla */

.forest-mist {
    position: absolute;

    left: -10%;
    bottom: 20px;

    width: 120%;
    height: 65px;

    background:
        radial-gradient(
            ellipse,
            rgba(220, 220, 225, 0.18),
            transparent 70%
        );

    animation: mistMove 8s ease-in-out infinite;
}


/* Movimiento suave de los árboles */

@keyframes treeSway {

    0%,
    100% {
        margin-left: 0;
    }

    50% {
        margin-left: 5px;
    }
}


/* Movimiento de la niebla */

@keyframes mistMove {

    0%,
    100% {
        transform: translateX(-2%);
        opacity: 0.45;
    }

    50% {
        transform: translateX(2%);
        opacity: 0.75;
    }
}
/* ==========================================
   CAPAS DE LA PORTADA
========================================== */

.story-intro,
.book-wrapper,
.follow-text {
    position: relative;
    z-index: 20;
}

.magic-particles {
    position: absolute;
    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 5;
}

.wonderland-forest {
    z-index: 1;
}
/* El contenido de la portada queda por encima del bosque */
.story-intro,
.book-wrapper,
.follow-text {
    position: relative;
    z-index: 20;
}
/* ==========================================
   PÁGINAS INTERIORES - MUNDO MÁGICO
========================================== */

.event-info,
.verse-section,
.shadai-gallery {
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(67, 42, 91, 0.18),
            rgba(32, 25, 57, 0.22)
        );

    color: #fffaff;

    text-shadow:
        0 2px 8px rgba(15, 8, 25, 0.65);
}
/* Información pequeña */

.event-details,
.event-details p,
.event-details span,
.event-meta,
.event-location {
    color: #fff5ff !important;

    text-shadow:
        0 2px 8px rgba(15, 8, 25, 0.80);
}
.event-title-xv,
.event-name-shadai {
    color: #f7dcff !important;

    text-shadow:
        0 2px 12px rgba(25, 10, 35, 0.80),
        0 0 18px rgba(220, 175, 245, 0.45);
}
/* ==========================================
   ÚLTIMA PÁGINA - VERSÍCULO
========================================== */

.verse-section {
    color: #ffffff !important;

    text-align: center;

    text-shadow:
        0 2px 10px rgba(10, 5, 20, 0.90);
}

.verse-section .verse-text,
.verse-section p {
    color: #fffaff !important;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(19px, 4.5vw, 27px);

    line-height: 1.55;

    text-shadow:
        0 2px 10px rgba(10, 5, 20, 0.90),
        0 0 14px rgba(190, 150, 220, 0.35);
}

.verse-section .verse-reference {
    margin-top: 20px;

    color: #e8cfff !important;

    font-family: "Cinzel", serif;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1px;

    text-shadow:
        0 2px 8px rgba(10, 5, 20, 0.90);
}
/* ==========================================
   ÚLTIMA PÁGINA - VERSÍCULO
========================================== */

.verse-section {
    position: relative;
    z-index: 20;

    color: #ffffff !important;
}

.verse-section p {
    color: #fffaff !important;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(20px, 4.8vw, 28px);

    line-height: 1.55;

    font-weight: 500;

    text-shadow:
        0 2px 10px rgba(5, 3, 12, 0.95),
        0 0 16px rgba(210, 170, 240, 0.45);
}

.verse-section .verse-reference {
    color: #f0cfff !important;

    font-family: "Cinzel", serif;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: 1px;

    text-shadow:
        0 2px 9px rgba(5, 3, 12, 0.95);
}
/* ==========================================
   DATOS DEL EVENTO - VISIBLES SOBRE EL BOSQUE
========================================== */

.event-details {
    position: relative;
    z-index: 20;

    color: #ffffff;
}

.event-details .detail {
    color: #ffffff;
}

.event-details .icon {
    color: #f0cfff !important;

    font-size: 24px;

    font-weight: 600;

    text-shadow:
        0 2px 8px rgba(10, 5, 20, 0.95),
        0 0 12px rgba(220, 170, 245, 0.55);
}

.event-details small {
    display: block;

    color: #e8c9f5 !important;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    text-shadow:
        0 2px 8px rgba(10, 5, 20, 0.95);
}

.event-details strong {
    display: block;

    color: #ffffff !important;

    font-family: "Cormorant Garamond", serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.2;

    text-shadow:
        0 2px 10px rgba(10, 5, 20, 0.95),
        0 0 12px rgba(220, 180, 245, 0.30);
}
.event-message {
    position: relative;
    z-index: 20;

    margin-top: 25px;

    color: #fff5ff !important;

    font-family: "Cormorant Garamond", serif;

    font-size: 19px;

    line-height: 1.45;

    text-shadow:
        0 2px 10px rgba(10, 5, 20, 0.95),
        0 0 12px rgba(210, 170, 240, 0.35);
}
/* ==========================================
   ÚLTIMA PÁGINA - VERSÍCULO
========================================== */

.verse-section {
    position: relative;
    z-index: 20;

    background: transparent;

    color: #ffffff;
}

.verse-section .verse-decoration {
    color: #e8bfff !important;

    font-size: 28px;

    text-shadow:
        0 0 15px rgba(220, 170, 245, 0.70);
}

.verse-section blockquote {
    margin: 20px auto;

    color: #ffffff !important;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(20px, 5vw, 28px);

    font-weight: 500;

    line-height: 1.55;

    text-align: center;

    text-shadow:
        0 2px 12px rgba(5, 2, 15, 0.95),
        0 0 16px rgba(220, 180, 245, 0.45);
}

.verse-section .verse-reference {
    color: #edcfff !important;

    font-family: "Cinzel", serif;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1px;

    text-shadow:
        0 2px 10px rgba(5, 2, 15, 0.95);
}
/* ==========================================
   AMBIENTE MORADO - PÁGINAS INTERIORES
========================================== */

.event-info {
    background:
        linear-gradient(
            180deg,
            rgba(91, 55, 122, 0.18),
            rgba(55, 36, 82, 0.22)
        );

    border-radius: 28px;
}

/*
.verse-section {
    background:
        linear-gradient(
            180deg,
            rgba(91, 55, 122, 0.18),
            rgba(55, 36, 82, 0.25)
        );

    border-radius: 28px;
}
*/


/* ==========================================
   BOSQUE MÁGICO - FONDO COMPLETO
========================================== */

.wonderland-forest {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

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

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 1 !important;

    opacity: 1 !important;
}

/* ==========================================
   IMAGEN DEL BOSQUE
========================================== */

.forest-background {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

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

    opacity: 0.88;

    pointer-events: none !important;
}

.wonderland-forest {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 1 !important;
}


/* ==========================================
   FLORES DEL BOSQUE
========================================== */

.forest-flowers {
    position: absolute;

    left: 50%;
    bottom: -20px;

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

    transform: translateX(-50%);

    opacity: 0.65;

    pointer-events: none;

    filter:
        saturate(0.9)
        brightness(0.9);
}

@media (max-width: 480px) {

    .event-details {
        grid-template-columns: 1fr 1fr;

        gap: 20px 10px;
    }

    .event-details strong {
        font-size: 19px;
    }

    .event-details small {
        font-size: 10px;
    }
}

/* ==========================================
   BLOQUEAR DESPLAZAMIENTO HORIZONTAL
========================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.wonderland {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* ==========================================
   EL BOTÓN SIEMPRE ENCIMA DEL BOSQUE
========================================== */

.enter-button,
.enter-button span {
    position: relative;
    z-index: 100;
}

.enter-button {
    isolation: isolate;
}
/* ==========================================
   ICONOS DE VESTIDO Y REGALO
========================================== */

.event-details .icon {
    font-size: 26px;

    filter:
        drop-shadow(0 2px 5px rgba(20, 5, 30, .65));

    text-shadow:
        0 0 10px rgba(235, 190, 255, .45);
}

.event-details .detail:last-child .icon {
    font-size: 25px;
}

.hero,
.event-info,
.verse-section,
.enter-button {
    position: relative;
    z-index: 20;
}

.enter-button {
    z-index: 100;
}

/* ==========================================
   INFORMACIÓN SIN CUADRO
========================================== */

.event-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================
   CAPAS DEL CONTENIDO
========================================== */

.hero {
    position: relative;
    z-index: 10;
}

.event-info {
    position: relative;
    z-index: 10;

    margin-top: 70px !important;

    background: transparent !important;
}

.verse-section {
    position: relative;
    z-index: 10;
}

.enter-button {
    position: relative;
    z-index: 100 !important;
}

/* ==========================================
   CONTENIDO SOBRE EL BOSQUE
========================================== */

.hero {
    position: relative;
    z-index: 10;
}

.event-info {
    position: relative;
    z-index: 10;
}

.verse-section {
    position: relative;
    z-index: 10;
}

.enter-button {
    position: relative;
    z-index: 100 !important;
}

/* =========================================
   PERSONAJES DE ALICIA
========================================= */

.alice-character {
    position: fixed;
    z-index: 3;

    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

.alice-character img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* CONEJO */
/* CONEJO */
.alice-rabbit {
    left: 23%;
    bottom: 13%;
    width: 150px;
}


/* SOMBRERERO */
.alice-hatter {
    right: 23%;
    top: 9%;
    width: 80px;
}


/* REINA BLANCA */
.alice-white-queen {
    left: 27%;
    top: 9%;
    width: 80px;
}


/* REINA DE CORAZONES */
.alice-red-queen {
    right: 25%;
    bottom: 5%;
    width: 80px;
}


/* =========================================
   APARICIÓN
========================================= */

@keyframes aliceCharacterFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

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

/* ==========================================
   ALICIA - LADO DERECHO
========================================== */

.alice-alice {
    position: fixed;

    /* Más cerca del libro */
    right: 14%;

    /* Un poco más abajo */
    top: 40%;

    width: 125px;

    z-index: 2;

    pointer-events: none;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.alice-alice img {
    width: 100%;
    height: auto;

    display: block;

    border: none !important;
    box-shadow: none !important;

    object-fit: contain;

    /* Intentamos eliminar visualmente el fondo */
    mix-blend-mode: multiply;
}


/* ==========================================
   GATO - LADO CONTRARIO A ALICIA
========================================== */

.alice-character.alice-gato {
    position: fixed !important;
    display: block !important;

    /* Cambiamos al lado izquierdo de la ventana */
    left: 14% !important;
    right: auto !important;
    
    /* Mantiene su misma altura */
    top: 40% !important;
    bottom: auto !important;

    /* Mantiene el tamaño correcto que ya funcionó */
    width: 115px !important;
    min-width: 115px !important;
    max-width: 115px !important;
    height: auto !important;

    margin: 0 !important;
    transform: none !important;
    align-self: auto !important;
    justify-self: auto !important;
    flex: none !important;

    z-index: 10;
    pointer-events: none;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.alice-character.alice-gato img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    display: block !important;
    margin: 0 !important;
    transform: none !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: contain !important; 

    /*transform: scaleX(-1) !important;*/
}

.nombre-de-tu-contenedor p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}
/* ==========================================
   CAPAS: EL LIBRO POR ENCIMA DE LOS PERSONAJES
========================================== */

.book-wrapper {
    position: relative;
    z-index: 60;
}

.book {
    position: relative;
    z-index: 60;
}

.book-cover,
.page-stack {
    z-index: 61;
}

/* Personajes detrás del libro */
.alice-character {
    z-index: 2 !important;
}
/* ==========================================
   TEXTO DE LA PORTADA - MAYOR CONTRASTE
========================================== */

.book-cover .cover-content {
    position: relative;
    z-index: 10;
}

/* Título principal */
.book-cover .cover-content h1 {
    color: #ffffff !important;
    font-weight: 700 !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(255, 255, 255, 0.45),
        0 0 14px rgba(40, 20, 70, 0.85) !important;
}

/* Subtítulos y textos */
.book-cover .cover-content h2,
.book-cover .cover-content p,
.book-cover .cover-content .cover-pretitle,
.book-cover .cover-content .cover-date {
    color: #ffffff !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(20, 10, 40, 0.90) !important;
}

/* Elementos decorativos */
.book-cover .cover-content .small-ornament,
.book-cover .cover-content .title-divider,
.book-cover .cover-content .cover-flourish {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.90),
        0 0 10px rgba(220, 190, 255, 0.75) !important;
}
/* ==========================================
   EVITAR DESPLAZAMIENTO HORIZONTAL
========================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.wonderland {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* El contenido debe permanecer centrado */
#eventInfo,
.event-info,
.verse-section,
.adventure-section {
    max-width: 100%;
    box-sizing: border-box;
}

/* 🟢 CONTROL DE COLOR Y NIEBLA PARA EL BOSQUE */
img.forest-background {
    /* 1. brightness(0.45): Apagamos la luz de la niebla central de forma agresiva.
       2. saturate(0.65): Le bajamos el exceso de color un 35% para que los tonos 
          del bosque se vuelvan sobrios y no compitan con el texto blanco.
       3. contrast(1.10): Mantiene las flores y detalles definidos pero oscuros. */
    filter: brightness(0.45) saturate(0.65) contrast(1.10) !important;
    
    /* Mantiene la imagen anclada en el fondo del escenario 3D */
    transform: translateZ(0px) !important; 
}
/* 🟢 AGRANDAR EL TAMAÑO DEL TEXTO DEL LIBRO */

/* Para los párrafos de información (fecha, dirección, Hotel Plaza, etc.) */
.book p, 
.book span, 
.book div {
    /* Elige dinámicamente un tamaño más grande (entre 18px y 24px según la pantalla) */
    font-size: clamp(18px, 2.2vw, 24px) !important; 
    line-height: 1.4 !important; /* Espaciado cómodo entre líneas para que respire el texto */
    font-weight: 500 !important; /* Les da el cuerpo necesario para resaltar */
}

/* Coloca un velo oscuro semitransparente sobre el bosque */
.book-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(24, 38, 59, 0.40) !important; /* Tono azul/oscuro al 40% (como tu body) */
    z-index: 2 !important; /* Se ubica encima de la niebla */
    pointer-events: none !important;
    border-radius: 12px !important;
}


/* 🟢 AGRANDAR ÚNICAMENTE EL TEXTO EN LAS PÁGINAS INTERIORES */

/* Títulos dentro de las páginas (Nombres, Fecha, Título de secciones) */
.page h1, .page h2, .page h3,
.book-page h1, .book-page h2, .book-page h3 {
    /* 🟢 CAMBIO 1: Tamaño fluido. Se adapta perfecto a pantallas de celular (28px) y PC (38px) */
    font-size: clamp(28px, 4.5vw, 38px) !important; 

    /* 🟢 CAMBIO 2: Bajamos el grosor a 500. La letra Garamond se ve mil veces más elegante 
       siendo esbelta que siendo demasiado gorda */
    font-weight: 500 !important;

    /* 🟢 CAMBIO 3: Un toque de cursiva clásico de las invitaciones reales */
    font-style: italic !important;

    /* 🟢 CAMBIO 4: Separación elegante entre letras para un look premium de marca */
    letter-spacing: 1px !important;

    /* 🟢 CAMBIO 5: Un color blanco roto/perla que se ve más lujoso que el blanco puro */
    color: #fcfaf2 !important;

    margin-top: 10px !important;
    margin-bottom: 18px !important;

    /* 🟢 CAMBIO 6: Sombra ultra-fina de alta definición que le da relieve sobre el bosque 
       sin ensuciar el diseño de la letra */
    text-shadow: 
        0px 2px 5px rgba(0, 0, 0, 0.45),
        0px 0px 1px rgba(0, 0, 0, 0.6) !important;
}


/* Párrafos informativos dentro de las páginas (Dirección, Hotel Plaza, Pases, etc.) */
.page p, .page span, .page div,
.book-page p, .book-page span, .book-page div {
    /* 🟢 CAMBIO 1: Tamaño fluido. Se adapta perfecto midiendo 18px en celular y hasta 23px en PC */
    font-size: clamp(18px, 2.2vw, 23px) !important; 

    /* 🟢 CAMBIO 2: Bajamos el grosor a 500. Elimina el look tosco pero mantiene el cuerpo para leerse */
    font-weight: 500 !important;

    /* 🟢 CAMBIO 3: Espaciado perfecto para que el texto respire sobre el bosque */
    line-height: 1.5 !important; 
    letter-spacing: 0.5px !important;

    /* 🟢 CAMBIO 4: Color blanco puro brillante para contrastar con las hojas oscurecidas */
    color: #ffffff !important;

    /* 🟢 CAMBIO 5: Sombra perimetral limpia en 4 direcciones. 
       Funciona como un "escudo" oscuro que despega el texto de los detalles del bosque */
    text-shadow: 
        1px  1px 2px rgba(0, 0, 0, 0.95),
       -1px  1px 2px rgba(0, 0, 0, 0.95),
        1px -1px 2px rgba(0, 0, 0, 0.95),
       -1px -1px 2px rgba(0, 0, 0, 0.95) !important;
}

/* 🟢 AGRANDAR ÚNICAMENTE LAS LETRAS PEQUEÑAS DE LAS PÁGINAS INTERIORES */

/* Apuntamos a todos los párrafos, etiquetas pequeñas y textos dentro de las hojas */
.page p, .page span, .page div, .page em, .page small,
.book-page p, .book-page span, .book-page div, .book-page em, .book-page small,
.page-stack p, .page-stack span, .page-stack div {
    
    /* 1. Cambiamos el tamaño a un valor fijo grande y cómodo */
    font-size: 24px !important; 
    
    /* 2. Subimos el grosor (font-weight) para que la letra Garamond no se desvanezca */
    font-weight: 600 !important; 
    
    /* 3. Aumentamos el espacio entre líneas para evitar que se amontone el texto */
    line-height: 1.6 !important; 
    
    /* Extra: Mantiene el texto nítido en el entorno 3D */
    transform: translateZ(2px) !important;
}
/* 🔴 ELIMINACIÓN DE RENGLONES REBELDES EN PÁGINAS INTERIORES */
.book .front, 
.book .back, 
.page-content,
.book-page-content,
.sheet-content {
    /* Fuerza un fondo color crema liso, eliminando cualquier imagen de renglones */
    background: #fffaf0 !important; 
    background-image: none !important;
}

/* Si los renglones eran una imagen HTML oculta, la ocultamos por completo */
.page img[src*="lineas"], 
.page img[src*="renglon"],
.book-page img[src*="paper"] {
    display: none !important;
}