/* ============================================
   1. RESET Y BASE
   ============================================ */
*{box-sizing:border-box;transition:background .3s ease,color .3s ease,border .3s ease}
body{background:radial-gradient(circle at top,#222 0,#050505 40%,#000 100%);color:#e6e6e6;font-family:Arial,sans-serif;margin:0;padding:0}

/* ============================================
   2. HERO / PORTADA
   ============================================ */
.hero{align-items:center;background:url("/img/banner_corvus_corax.png") center/cover no-repeat;display:flex;flex-direction:column;height:400px;justify-content:center;margin-top:10px;position:relative;text-align:center;width:100%}
.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}

/* ============================================
   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;transition:.3s}
.menu a:hover{color:#bfbfbf;text-shadow:0 0 10px #fff}
.logo{align-items:center;display:flex;gap:30px;left:20px;position:fixed;text-decoration:none;top:10px;z-index:2000}
.logo img{width:45px}
.logo span{color:#fff;font-family:'UnifrakturCook',cursive;font-size:1.8rem;text-shadow:0 0 10px #fff}

/* ============================================
   4. SECCIONES DE CONTENIDO
   ============================================ */
.section{border-bottom:1px solid #333;margin:auto;max-width:900px;padding:60px 20px}
.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}
ul{padding-left:20px}

/* ============================================
   5. LAYOUT DE FILAS / CUADROS
   ============================================ */
.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{text-align:justify;flex:1}

/* ============================================
   6. 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}

/* ============================================
   7. HAMBURGER / RESPONSIVE
   ============================================ */
.hamburger{color:#fff;cursor:pointer;display:none;font-size:2rem;position:fixed;right:20px;top:15px;z-index:3000}
@media(max-width:768px){
.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%}
.menu ul.open{display:flex}
.menu ul li{margin:10px 0}
.fila1,.fila2,.fila3,.fila4{flex-direction:column;text-align:center}
.fila1 img,.fila2 img,.fila3 img,.fila4 img{max-width:350px;width:90%}
}

/* ============================================
   8. COMENTARIOS – LAYOUT
   ============================================ */
.comentarios-layout{align-items:stretch;display:flex;gap:30px;margin:50px 20px;padding:20px}
.comentarios-form{background:#111;border:1px solid #333;border-radius:8px;flex:1;overflow:hidden;padding:20px;resize:none}
.comentarios-lista{background:#0d0d0d;border:1px solid #333;border-radius:8px;flex:1;max-height:600px;overflow-y:auto;padding:20px}
.comentario-item{background:#1a1a1a;border:1px solid #333;border-bottom:1px solid #444;border-left:3px solid #b8a47a;border-right:1px solid #555;border-top:1px solid #777;border-radius:6px;box-shadow:0 0 12px rgba(0,0,0,.4);margin-bottom:15px;padding:15px;transition:transform .2s ease,box-shadow .3s ease}
.comentario-item:hover{box-shadow:0 0 18px rgba(0,0,0,.55);transform:translateY(-3px)}
.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}
.admin-link{color:#777;display:block;font-size:.9rem;margin-top:10px;text-decoration:none}
.admin-link:hover{color:#fff}
.comentarios-layout{display:flex;gap:20px}@media(max-width:768px){.comentarios-layout{flex-direction:column}.comentarios-form,.comentarios-lista{width:100%}}


/* ============================================
   9. EFECTOS COMPARTIDOS (OSCURO Y CLARO)
   ============================================ */
.comentario-item{transition:transform .2s ease,box-shadow .3s ease}

/* ============================================
   10. MODO OSCURO (POR DEFECTO)
   ============================================ */
body h1,body h2,body h3,body h4{color:#fff}
body p,body li,body span{color:#e6e6e6}

/* ============================================
   11. MODO CLARO – RAVEN GUARD + SEPIA/GRIS
   ============================================ */
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:#3a3a3a;border:1px solid #6b6b6b;border-radius:10px;box-shadow:0 0 18px rgba(0,0,0,.45);padding:25px}
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 .hero{background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),url('/img/banner_corvus_corax.png');background-position:center;background-size:cover;color:#fff!important}
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}

/* ============================================
   12. EFECTO "RAVEN GUARD" GLOW (AMBOS MODOS)
   ============================================ */
.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);transition:text-shadow .4s ease}
.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)}

/* ============================================
   13. BORDES METÁLICOS EN MODO OSCURO
   ============================================ */
body .section,body .comentarios-layout,body .comentarios-form,body .comentarios-lista{background:inherit;border:1px solid #555;border-left:3px solid #f7f7f6;border-radius:10px;box-shadow:0 0 18px rgba(0,0,0,.45);padding:25px}