/* ===================================================
   1. RESET Y BASE
=================================================== */
*{box-sizing:border-box;transition:background .3s ease,color .3s ease,border .3s ease}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{background:radial-gradient(circle at top,#222 0,#050505 40%,#000 100%);color:#e6e6e6;font-family:Arial,sans-serif;margin:0;padding:0}
img,video{max-width:100%;height:auto}
ul{padding-left:20px}

/* ===================================================
   2. HERO / VIDEO BANNER
=================================================== */
.hero{align-items:center;display:flex;flex-direction:column;height:400px;justify-content:center;margin-top:10px;position:relative;text-align:center;width:100%;overflow:hidden}
.hero::before{content:none}
.hero h1{color:#fff;font-family:'UnifrakturCook',cursive;font-size:5rem;margin:15px}
.hero h2{color:#fff;font-family:'UnifrakturCook',cursive;font-size:2rem;margin-top:15px}
.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:2}
.hero-content{position:relative;z-index:3}

/* ===================================================
   3. MENÚ Y LOGO
=================================================== */
.menu{background:#000;border-bottom:2px solid #333;left:0;position:fixed;top:0;width:100%;z-index:1000}
.menu ul{display:flex;gap:40px;justify-content:center;list-style:none;margin:0;padding:20px}
.menu a{color:#fff;font-size:1.2rem;text-decoration:none}
.menu a:hover{color:#bfbfbf;text-shadow:0 0 10px #fff}
.menu a{font-family:'UnifrakturCook',cursive;
font-size:1.45rem;
letter-spacing:.4px;
text-shadow:0 0 8px rgba(255,255,255,.45);
}
.logo{
align-items:center;
display:flex;
gap:14px;
left:20px;
position:fixed;
text-decoration:none;
top:10px;
z-index:2000;
}

.logo img{
width:50px;
height:50px;
object-fit:cover;
border-radius:10px;
box-shadow:0 0 12px rgba(255,255,255,.15),0 0 24px rgba(120,180,255,.18);
transition:.3s ease;
}

.logo span{
font-family:'UnifrakturCook',cursive;
font-size:2rem;
color:#fff;
letter-spacing:1px;
text-shadow:0 0 8px rgba(255,255,255,.75),0 0 18px rgba(255,255,255,.35),0 0 30px rgba(120,180,255,.18);
}

/* ===================================================
   4. SECCIONES / EFECTO PERGAMINO
=================================================== */
.section{border:none!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(18,18,18,.96),rgba(5,5,5,.98))!important;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.65)!important;margin:45px auto!important;max-width:900px;padding:60px 20px;position:relative;overflow:hidden}
.section h3{color:#fff;font-family:'UnifrakturCook',cursive;font-size:2.5rem;margin-bottom:20px}
.section p,.section li{font-size:1.2rem;line-height:1.7}
.section::before,.comentarios-layout::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 10%,transparent 90%,rgba(255,255,255,.18));opacity:.45}
.section::after,.comentarios-layout::after{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,#d8d8d8,transparent);opacity:.35}

/* ===================================================
   5. FILAS / IMÁGENES / TEXTOS
=================================================== */
.fila1,.fila2,.fila3,.fila4{align-items:center;display:flex;gap:50px;margin-top:30px}
.cuadro1,.cuadro2,.cuadro4{border:3px solid #444;border-radius:10px;width:350px}
.fila1 .texto,.fila2 .texto,.fila3 .texto,.fila4 .texto{flex:1;text-align:justify}
.texto{max-width:600px}
#postherejía .texto{max-width:100%;width:100%}
.section img{transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
.section img:hover{transform:scale(1.035);filter:brightness(1.15) contrast(1.08);box-shadow:0 0 22px rgba(255,255,255,.35)}

/* ===================================================
   6. SEPARADORES RAVEN
=================================================== */
.separador-raven{width:100%;max-width:900px;margin:10px auto;display:flex;align-items:center;justify-content:center;gap:18px;opacity:.75}
.separador-raven::before,.separador-raven::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#777,transparent)}
.separador-raven span{font-size:22px;color:#d8d8d8;text-shadow:0 0 12px rgba(255,255,255,.75)}

/* ===================================================
   7. COMENTARIOS - LAYOUT PERGAMINO
=================================================== */
.comentarios-layout{border:none!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(18,18,18,.96),rgba(5,5,5,.98))!important;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.65)!important;padding:25px;position:relative;overflow:visible!important}
.comentarios-form,.comentarios-lista{border:none!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(18,18,18,.96),rgba(5,5,5,.98))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;position:relative}
.comentarios-form{overflow:hidden;padding:25px}
.comentarios-lista{max-height:650px;overflow-y:auto!important;overflow-x:hidden;padding:25px 10px 25px 25px}

/* ===================================================
   8. COMENTARIOS - FORMULARIO
=================================================== */
.comentarios-form input,.comentarios-form textarea{background:#1a1a1a;border:1px solid #444;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.5);color:#eee;margin-bottom:15px;padding:12px;resize:none;width:100%}
.comentarios-form textarea{height:120px}
.comentarios-form input:focus,.comentarios-form textarea:focus{border-color:#e6d7a8;box-shadow:0 0 12px rgba(255,230,180,.4);outline:none}
.comentarios-form button{background:#222;border:1px solid #555;border-radius:6px;color:#fff;cursor:pointer;font-weight:bold;padding:10px 15px}
.comentarios-form button:hover{background:#333}

/* ===================================================
   9. COMENTARIOS - TARJETAS Y SCROLL
=================================================== */
.comentario-item{background:rgba(25,25,25,.92)!important;border:none!important;border-left:3px solid #c8b37d!important;border-radius:10px!important;padding:18px!important;margin-bottom:20px!important;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 25px rgba(0,0,0,.45)!important;transition:all .3s ease}
.comentario-item:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 30px rgba(0,0,0,.55)!important}
.comentarios-lista::-webkit-scrollbar{width:10px}
.comentarios-lista::-webkit-scrollbar-track{background:#111;border-radius:10px}
.comentarios-lista::-webkit-scrollbar-thumb{background:linear-gradient(#444,#777);border-radius:10px;border:2px solid #111}
.comentarios-lista::-webkit-scrollbar-thumb:hover{background:linear-gradient(#666,#aaa)}

/* ===================================================
   10. PERSONAJES - CARDS Y MODAL
=================================================== */
.personajes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.personaje-card{background:rgba(20,20,20,.95);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px;cursor:pointer;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.45);transition:transform .3s ease,box-shadow .3s ease,filter .3s ease}
.personaje-card:hover{transform:translateY(-6px);box-shadow:0 0 24px rgba(255,255,255,.28);filter:brightness(1.12)}
.personaje-card img{width:100%;height:180px;object-fit:contain;object-position:center top;border-radius:8px;margin-bottom:12px;background:#050505}
.personaje-card h4{margin:8px 0 4px;font-size:1rem;color:#fff}
.personaje-card span{font-size:.85rem;color:#c8b37d}
.modal-personaje{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);align-items:center;justify-content:center;padding:20px}
.modal-personaje.activo{display:flex}
.modal-contenido{width:100%;max-width:520px;background:linear-gradient(145deg,rgba(18,18,18,.98),rgba(5,5,5,.98));border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:28px;text-align:center;position:relative;box-shadow:0 0 40px rgba(255,255,255,.18)}
.modal-contenido img{width:100%;max-height:360px;object-fit:contain;object-position:center top;border-radius:10px;margin-bottom:18px;background:#050505}
.modal-contenido h3{font-family:'UnifrakturCook',cursive;font-size:2rem;margin:10px 0}
.modal-contenido p{font-size:1rem;line-height:1.6}
.modal-cerrar{position:absolute;top:12px;right:14px;background:#222;color:#fff;border:1px solid #555;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1.4rem}

/* ===================================================
   11. FOOTER
=================================================== */
footer{text-align:center;background:#000;color:#777;font-size:.9rem;padding:20px}
.footer40k{background:url("/img/footer.png") center/cover no-repeat;border-top:2px solid #444;color:#fff;font-family:'UnifrakturCook',cursive;font-size:22px;margin-top:40px;padding:20px 0;text-align:center}
.footer-academico{font-family:Arial,Calibri,sans-serif;font-size:13px;color:#ccc;margin-top:10px;letter-spacing:.2px}
.admin-link{color:#777;display:block;font-size:.9rem;margin-top:10px;text-decoration:none}
.admin-link:hover{color:#fff}

/* ===================================================
   12. MODO CLARO
=================================================== */
body.claro{background:radial-gradient(circle at top,#e0d6c2 0,#c7bba3 40%,#b0a58f 100%);color:#fff!important}
body.claro .section,body.claro .comentarios-layout,body.claro .comentarios-form,body.claro .comentarios-lista{background:linear-gradient(145deg,#4b4944,#2f2f2f)!important;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 18px 40px rgba(0,0,0,.45)!important;border:none!important}
body.claro .comentario-item{background:rgba(60,60,60,.92)!important}
body.claro .menu{background:#4a4a4a;border-bottom:2px solid #777;box-shadow:0 0 10px rgba(0,0,0,.5)}
body.claro .menu a{color:#fff!important}
body.claro .footer40k{border-top:2px solid #aaa;color:#000}
body.claro h1,body.claro h2,body.claro h3,body.claro h4{color:#fff!important;text-shadow:0 0 6px rgba(0,0,0,.6)}
body.claro p,body.claro li,body.claro span,body.claro .texto p,body.claro .section p,body.claro .comentarios-form p,body.claro .comentarios-lista p{color:#fff!important;text-shadow:0 0 6px rgba(0,0,0,.6)}
body.claro #form-comentario input,body.claro #form-comentario textarea{background:rgba(0,0,0,.35);border:1px solid #b8a47a;color:#fff!important}
body.claro .separador-raven span{color:#fff}
body.claro .separador-raven::before,body.claro .separador-raven::after{background:linear-gradient(90deg,transparent,#eee,transparent)}

/* ===================================================
   13. EFECTOS GENERALES
=================================================== */
.logo span,h1.titulo-raven,.raven-title{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.8),0 0 12px rgba(255,255,255,.6),0 0 18px rgba(255,255,255,.4),0 0 24px rgba(255,255,255,.25)}
.logo span:hover,h1.titulo-raven:hover,.raven-title:hover{text-shadow:0 0 10px rgba(255,255,255,1),0 0 20px rgba(255,255,255,.8),0 0 30px rgba(255,255,255,.6),0 0 40px rgba(255,255,255,.4)}
.reveal{opacity:0;transform:translateY(80px) scale(.96);filter:blur(8px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1),filter 1s ease;will-change:transform,opacity}
.reveal.activo{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ===================================================
   14. RESPONSIVE PC
=================================================== */
@media(min-width:769px){
main{max-width:none;width:100%}
.section{max-width:900px}
.fila1,.fila2{display:flex;align-items:center;gap:70px}
.fila1 img,.fila2 img{max-width:320px}
.comentarios-layout{width:calc(100% - 4cm);max-width:none;margin:50px auto;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.comentarios-form,.comentarios-lista{width:100%;max-width:none}
}

/* ===================================================
   15. RESPONSIVE MÓVIL
=================================================== */
.hamburger{color:#fff;cursor:pointer;display:none;font-size:2rem;position:fixed;right:20px;top:15px;z-index:3000}

@media(max-width:768px){
body{overflow-x:hidden}
.hamburger{display:block}
.menu ul{background:#000;border-bottom:2px solid #333;display:none;flex-direction:column;left:0;padding:20px 0;position:fixed;top:60px;width:100%;max-width:100%;overflow-x:hidden}
.menu ul.open{display:flex}
.menu ul li{margin:10px 0}
.hero{height:320px;width:100%;max-width:100%;overflow:hidden}
.hero-video{width:100%;height:100%;object-fit:cover}
.hero-content h1{font-size:2.8rem;line-height:1.1;padding:0 15px}
.hero-content h2{font-size:1.5rem;padding:0 15px}
.section{width:92%;max-width:92%;padding:35px 18px}
.fila1,.fila2,.fila3,.fila4{display:flex;flex-direction:column;gap:25px;width:100%;text-align:center}
.fila1 img,.fila2 img,.fila3 img,.fila4 img{width:100%;max-width:350px}
.texto{width:100%;max-width:100%}
.comentarios-layout{display:flex;flex-direction:column;width:92%;max-width:92%;margin:30px auto;gap:20px}
.comentarios-form,.comentarios-lista{width:100%;max-width:100%}
.personajes-grid{grid-template-columns:1fr 1fr}
.personaje-card img{height:150px}
}

/* ===================================================
  16. RECAPTCHA
=================================================== */
.grecaptcha-badge{
position:fixed!important;
z-index:999999!important;
bottom:18px!important;
right:0!important;

transform:translateX(calc(100% - 0px));

border-radius:14px 0 0 14px!important;
overflow:hidden!important;

box-shadow:
0 0 12px rgba(255,255,255,.15),
0 0 24px rgba(120,160,255,.18),
0 0 40px rgba(0,0,0,.55)!important;

transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
filter .35s ease!important;

filter:brightness(.92);
opacity:.95;
}

/* Parte visible del icono */
.grecaptcha-badge:hover{
transform:translateX(75px)!important;

box-shadow:
0 0 12px rgba(255,255,255,.25),
0 0 30px rgba(120,160,255,.35),
0 0 60px rgba(0,0,0,.75)!important;

filter:brightness(1);
}

/* Glow */
.grecaptcha-badge iframe{
filter:drop-shadow(0 0 6px rgba(180,220,255,.35));
}

body{
overflow-x:hidden;
}

.grecaptcha-badge{
margin-right:-6px!important;
}

/* ===================================================
   17. BOTÓN SUBIR ARRIBA - BOLTER
=================================================== */

#btn-top{
    position:fixed;
    bottom:25px;
    right:25px;
    width:70px;
    height:70px;
    border:none;
    background:transparent;
    cursor:pointer;
    z-index:9999;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);
    transition:.35s ease;
}

#btn-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#btn-top img{
    width:100%;
    height:100%;
    object-fit:contain;

    filter:
        drop-shadow(0 0 10px rgba(255,80,80,.45))
        drop-shadow(0 0 18px rgba(255,180,0,.18));

    transition:.3s ease;
}

/* Hover */

#btn-top:hover img{
    transform:translateY(-6px) scale(1.08) rotate(-6deg);

    filter:
        drop-shadow(0 0 16px rgba(255,90,90,.75))
        drop-shadow(0 0 24px rgba(255,180,0,.35));
}

/* ===================================================
   CIERRE FINAL: COMENTARIOS, FOOTER Y BANNER
=================================================== */
.comentarios-aviso{
font-size:.95rem;
color:#c8c8c8;
line-height:1.5;
margin:-5px 0 20px;
opacity:.9;
}

.mensaje-comentario{
background:linear-gradient(145deg,rgba(35,35,35,.95),rgba(10,10,10,.98));
border-left:3px solid #c8b37d;
border-radius:8px;
color:#fff;
font-size:.95rem;
line-height:1.5;
margin-bottom:15px;
max-height:0;
opacity:0;
overflow:hidden;
padding:0 14px;
transform:translateY(-8px);
transition:all .35s ease;
}

.mensaje-comentario.activo{
max-height:120px;
opacity:1;
padding:12px 14px;
transform:translateY(0);
}

.footer-nav{
display:flex;
justify-content:center;
gap:22px;
flex-wrap:wrap;
margin:12px 0;
font-family:'UnifrakturCook';
font-size:14px;
}

.footer-nav a{
color:#ddd;
text-decoration:none;
}

.footer-nav a:hover{
color:#fff;
text-shadow:0 0 10px rgba(255,255,255,.7);
}

.hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:45%;
z-index:2;
background:linear-gradient(to bottom,transparent,rgba(0,0,0,.92));
pointer-events:none;
}