/* ===========================
        ESTILOS GENERALES
=========================== */

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

body{

    background:
        radial-gradient(circle at top, #0d0935 0%, #080521 35%, #0d0930 100%);

    font-family:Arial, Helvetica, sans-serif;

    min-height:100vh;

}

/* ===========================
            HEADER
=========================== */

header{

    width:100%;
    min-height:150px;

    overflow:hidden;

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

    background:#221664;

}

.logo{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* ===========================
        MENÚ
=========================== */

nav{

background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 35%),
        linear-gradient(180deg, #221c4d 0%, #171236 100%);

    display:flex;

    justify-content:center;

}

nav a{

    color:white;

    text-decoration:none;

    padding:20px 40px;

    font-size:20px;

    transition:0.3s;
     transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

nav a:hover{

    background:#b6a403bf;
    transform: scale(1.05);

}

/* ===========================
        BIENVENIDA
=========================== */

.bienvenida{

    text-align:center;

    padding:80px 20px;

    color:white;

}

.bienvenida h1{

    font-size:60px;

    margin-bottom:20px;

}

.bienvenida p{

    font-size:22px;

    max-width:700px;

    margin:auto;

    margin-bottom:40px;

    line-height:1.6;

}

.boton{

    display:inline-block;

    background:#7c2cff;

    color:white;

    text-decoration:none;

    padding:18px 40px;

    border-radius:10px;

    font-size:22px;

    transition:.3s;

}

.boton:hover{

    transform:scale(1.05);

}

/* ===========================
      IMAGEN PROMOCIONAL
=========================== */

.promo{

    width:100%;

    display:flex;

    justify-content:center;

    padding:80px 20px;

}

.promo-img{

    width:90%;

    max-width:1100px;

    border-radius:15px;

    box-shadow:0px 0px 30px rgba(0,0,0,.4);

}

/* ===========================
            HERO
=========================== */

.hero{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;

    padding:80px 8%;

    color:white;

    flex-wrap:wrap;

}

.hero-texto{

    flex:1;
    min-width:300px;
    max-width:600px;

}

.hero-texto h1{

    font-size:64px;
    margin-bottom:25px;
    line-height:1.1;

}

.sinopsis{

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

    color:#d6d6d6;

    margin-bottom:40px;

}

.boton-principal{

    display:inline-block;

    background:#211664;
    color:white;

    text-decoration:none;

    padding:18px 42px;

    border-radius:12px;

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

    transition:.3s;

}

.boton-principal:hover{

    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(124,44,255,.35);

}

.hero-imagen{

    flex:1;
    min-width:320px;
    max-width:700px;

}

.hero-imagen img{

    width:100%;
    display:block;

    border-radius:18px;

    box-shadow:0 20px 40px rgba(0,0,0,.45);

}


/* ===========================
        BITÁCORA
=========================== */

.bitacora{

    max-width:1000px;

    margin:0 auto;

    padding:60px 20px 100px;

    color:white;

}

.bitacora h2{

    font-size:42px;

    margin-bottom:40px;

    text-align:center;

}

.entrada{

    background:#2a2a2a;

    border-left:4px solid #7c2cff;

    padding:20px 25px;

    border-radius:10px;

    margin-bottom:20px;

}

.fecha{

    display:block;

    font-size:15px;

    color:#b0b0b0;

    margin-bottom:8px;

}

.entrada p{

    font-size:18px;

    line-height:1.6;

}

/* ===========================
        PÁGINA LEER
=========================== */

.catalogo{

    max-width:900px;

    margin:0 auto;

    padding:80px 20px;

    color:white;

}

.catalogo h1{

    font-size:52px;

    text-align:center;

    margin-bottom:20px;

}

.catalogo > p{

    text-align:center;

    font-size:20px;

    color:#cfcfcf;

    margin-bottom:60px;

}

.capitulo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#211664;

    border-radius:15px;

    padding:25px 35px;

    margin-bottom:25px;

}

.capitulo h2{

    font-size:30px;

    margin-bottom:8px;

}

.capitulo p{

    color:#d0d0d0;

    font-size:18px;

}

.bloqueado{

    opacity:.45;

}

/* ===========================
      PÁGINA CAPÍTULO
=========================== */

.info-capitulo{

    text-align:center;

    color:white;

    padding:60px 20px 30px;

}

.info-capitulo h1{

    font-size:48px;

    margin-bottom:10px;

}

.info-capitulo p{

    font-size:22px;

    color:#cfcfcf;

}

.navegacion-capitulo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin:30px auto;

    padding:18px 24px;

    max-width:900px;

    background:#211664;

    border-radius:12px;

}

.navegacion-capitulo a{

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.2s;

}

.navegacion-capitulo a:hover{

    color:#b99cff;

}

.navegacion-capitulo span{

    color:white;

}

.deshabilitado{

    color:#777 !important;

}

.info-capitulo h2{

    font-size:26px;

    color:#cfcfcf;

    font-weight:normal;

}

/* ===========================
        CELULARES
=========================== */

@media (max-width: 768px){

    .hero-texto h1{
         font-size: 34px;

    }
    .capitulo{

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }

    .boton-principal{

        width: 100%;

        max-width: 260px;

        padding: 15px 20px;

        font-size: 18px;

        text-align: center;

    }

    header{

        height:85px;

    }

    nav{

    justify-content:space-evenly;

}

nav a{

    padding:14px 0;

    flex:1;

    text-align:center;

    font-size:15px;

}



}