body{

    margin:0;

    min-height:100vh;

    -ms-overflow-style:none;

    scrollbar-width:none;

}

.lector-container{

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

    margin:40px auto;

}

/*  .webtoon-panel{

    width:100%;

}*/ 


.webtoon-panel img {
	max-width: 100%;
	display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
} 

#water-effect {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 350px; /* Ajusta el tamaño según necesites */
    z-index: 10000;
    display: none; /* Oculto inicialmente */
    pointer-events: none; /* Para que no interfiera con el click/scroll */
}

/* Cada hoja del cómic */
.page {
    position: relative;      /* Clave: referencia para los diálogos */
}

/* Imagen grande de la hoja del cómic */
.imgpanel {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

/* Diálogo pequeño sobre la hoja */
.dialogue {
    position: absolute;
    width: 40%;              /* Ajusta el tamaño del globito (ej. 30%, 50%, etc.) */
    left: 0%;               /* Distancia desde la izquierda (en % de la hoja) */
    top: 40%;                /* Altura dentro de la hoja (en % de la altura) */
    transform: translateY(-50%);  /* Para centrarlo verticalmente respecto a ese “top” */
    pointer-events: none;    /* Para que no estorbe clics/scroll */

    opacity: 0;              /* Empiezan invisibles */
    transition: opacity 0.2s linear;
}

.dialogo1 {
    top: 92.5%;
    left: 0%;
}

.dialogo2 {
    top: 12.5%;
    left: 0%;
}

.dialogo3 {
    top: 37.5%;
    left: 0%;
}

.dialogo4 {
    top: 58.2%;
    left: 0%;
}

.dialogo5 {
    top: 27%;
    left: 0%;
}

.dialogo6 {
    top: 38%;
    left: 0%;
}

.dialogo7 {
    top: 42.6%;
    left: 0%;
}

.dialogo8 {
    top: 46.5%;
    left: 0%;
}

.dialogo9 {
    top: 49.8%;
    left: 0%;
}

.dialogo10 {
    top: 55.6%;
    left: 0%;
}

.dialogo11 {
    top: 62.8%;
    left: 0%;
}

.dialogo12 {
    top: 72.2%;
    left: 0%;
}

.dialogo13 {
    top: 80.3%;
    left: 0%;
}

.dialogo14 {
    top: 84.4%;
    left: 0%;
}

.dialogo15 {
    top: 44.5%;
    left: 0%;
}

.dialogo16 {
    top: 57%;
    left: 0%;
}

.dialogo17 {
    top: 68%;
    left: 0%;
}

.dialogo18 {
    top: 75.5%;
    left: 0%;
}

.dialogo19 {
    top: 77.5%;
    left: 0%;
}

.dialogo20 {
    top: 79.8%;
    left: 0%;
}

/* ==========================================
   SONIDO FUERTE - HOJA 60 y 66
========================================== */

.sonido-temblor {
    top: 87%;
    left: 0%;
    width: 40%;

    opacity: 1 !important;

    animation: temblor-sonido 0.12s infinite;
}

.sonido-temblor-66 {
    top: 82.5%;
    left: 0%;
    width: 40%;

    opacity: 1 !important;

    animation: temblor-sonido 0.12s infinite;
}

@keyframes temblor-sonido {

    0% {
        transform: translate(-2px, calc(-50% + 1px));
    }

    25% {
        transform: translate(2px, calc(-50% - 1px));
    }

    50% {
        transform: translate(-1px, calc(-50% - 2px));
    }

    75% {
        transform: translate(2px, calc(-50% + 2px));
    }

    100% {
        transform: translate(-2px, calc(-50% + 1px));
    }

}
/* ==========================================
   SONIDO FUERTE - HOJA 60 aqui acaba
========================================== */

/* ==========================================
   dialogo aparece - HOJA 63
========================================== */

.dialogue-aparece {
    top: 90%;
    left: 0%;
    opacity: 0;
    transition: opacity 0.5s linear;
}

/* ==========================================
   dialogo aparece blurreado - HOJA 64
========================================== */

.pag64 {
    top: 10%;
    filter: blur(10px);
    transition: opacity 0.5s linear, filter 0.5s linear;
}

#sideways-container{

    overflow-x:auto;
    overflow-y:hidden;

    height:100vh;
    white-space:nowrap;

    cursor: ew-resize;

}

#sideways-container::-webkit-scrollbar{

    display:none;

}



.webtoon-panel .sideways-panel{

    display:block;

    height:100%;

    width:auto;

    max-width:none;

}

.locked {
    display: none;
}

.locked.unlocked {
    display: block;
}

.eyes-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.sideways-wrapper{

    position:relative;

    width:100%;

}

.explorar-aviso{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:1000;

    pointer-events:none;

    color:white;

    transition: opacity 0.3s ease;

}

.explorar-aviso span{

    font-size:52px;

    text-shadow:0 0 15px black;

}

.explorar-aviso p{

    margin-top:15px;

    font-size:24px;

    font-weight:bold;

    text-shadow:
        0 0 8px black,
        0 0 18px black,
        0 0 28px black;

}

@keyframes explorar{

    0%{

        transform:translateX(-12px);

    }

    50%{

        transform:translateX(12px);

    }

    100%{

        transform:translateX(-12px);

    }

}

/* ==========================================
   FALLA DE LUZ
========================================== */

.flicker-page {
    position: relative;
    width: 100%;
}

.flicker-base {
    display: block;
    width: 100%;
    height: auto;
}

.flicker-dark {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: auto;

    opacity: 0;

    pointer-events: none;

    animation: luz-fallando 4s infinite;
}


@keyframes luz-fallando {

    /* Luz completamente normal */
    0% {
        opacity: 0;
    }

    /* Empieza a apagarse */
    45% {
        opacity: 0;
    }

    /* Oscurecimiento gradual */
    55% {
        opacity: 0.25;
    }

    65% {
        opacity: 0.65;
    }

    /* Se apaga */
    72% {
        opacity: 1;
    }

    /* Pequeño regreso de la luz */
    76% {
        opacity: 0.35;
    }

    /* Vuelve a fallar */
    79% {
        opacity: 0.9;
    }

    /* Regresa la luz */
    84% {
        opacity: 0;
    }

    /* Se queda iluminado un momento */
    100% {
        opacity: 0;
    }
}

/* ==========================================
   PÁGINA DE AUTORES
========================================== */

.autores {
    color: white;
    padding-bottom: 100px;
}

.autores-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 70px 20px 50px;
}

.autores-intro h1 {
    font-size: 56px;
    margin-bottom: 10px;
}

.autores-intro h2 {
    font-size: 26px;
    font-weight: normal;
    color: #cfcfcf;
    margin-bottom: 25px;
}

.autores-intro p {
    text-indent: 30px;
    text-align: justify;
    font-size: 18px;
    line-height: 1.6;
    color: #d6d6d6;
}

.autores-intro p + p {
    margin-top: 30px;
}


/* TARJETAS */

.autores-grid {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.autor {
    background: rgba(33, 22, 100, 0.75);

    border-radius: 18px;

    padding: 35px;

    text-align: center;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}


/* CHIBI */

.autor-chibi {
    display: block;

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

    height: auto;

    margin: 0 auto 20px;
}


/* NOMBRE */

.autor h2 {
    font-size: 34px;
    margin-bottom: 8px;
}


/* ROL */

.autor-rol {
    color: #cfcfcf;

    font-size: 17px;
    font-weight: bold;

    margin-bottom: 12px;
}


/* INSTAGRAM */

.autor-instagram {
    display: inline-block;

    color: #b99cff;

    text-decoration: none;

    font-size: 16px;

    margin-bottom: 25px;

    transition: .2s;
}

.autor-instagram:hover {
    color: white;
    transform: translateY(-2px);
}


/* EXPERIENCIA */

.autor-experiencia {
    color: #d6d6d6;

    font-size: 17px;
    line-height: 1.7;

    text-align: left;
}

.autor-experiencia + .autor-experiencia {
    margin-top: 30px;
}


/* FINAL */

.autores-final {
    text-align: center;

    max-width: 650px;

    margin: 80px auto 0;

    padding: 40px 20px;
}

.autores-final h2 {
    font-size: 38px;
    margin-bottom: 20px;
}

.autores-final p {
    color: #d6d6d6;

    font-size: 18px;
    line-height: 1.6;
}

.autores-final .firma {
    margin-top: 25px;
    color: #b99cff;
}

        img {
    max-width: 100%;
    height: auto;
}
        section {
            padding: 60px 0;
           /* min-height: 100vh;*/
        }
 ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

@media (max-width: 768px) {

    .autores-intro {
        padding-top: 50px;
    }

    .autores-intro h1 {
        font-size: 42px;
    }

    .autores-intro h2 {
        font-size: 22px;
    }

    .autores-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .autor {
        padding: 25px 20px;
    }

    .autor-chibi {
        max-width: 240px;
    }

    .autor h2 {
        font-size: 30px;
    }

}