/*
Theme Name: La Cantina del Pixel
Theme URI: https://lacantinadelpixel.es
Author: Luis Lozana Rodríguez
Description: Tema retro tipo Tron hecho a medida.
Version: 1.0
Text Domain: lacantinadelpixel
*/

/* ===========================================================
   0. FUENTES RETRO
   - VT323 = texto general (terminal CRT)
   - Orbitron = títulos / cabeceras (Tron)
   =========================================================== */

/* @import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;600;800&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;800&display=swap');


/* ===========================================================
   1. BASE GLOBAL
   =========================================================== */

html, body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  color: #e0ffff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.5px;

  /* Rejilla TRON viva en el fondo */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(0,255,255,0.25) 0%, rgba(0,0,0,0) 70%),
    repeating-linear-gradient(
      to right,
      rgba(0,255,255,0.15) 0px,
      rgba(0,255,255,0.15) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 80px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,255,0.15) 0px,
      rgba(0,255,255,0.15) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 80px
    );
  background-size: 100% 100%, 80px 80px, 80px 80px;
  background-attachment: fixed;
  background-position: center;
}

/* texto general, párrafos, listas */
article p,
article li,
.post-content,
.post-excerpt {
  text-align: justify;
  color: #eaffff;
  line-height: 1.6;
  text-shadow: 0 0 2px #000;
}

/* títulos / cabeceras / branding */
h1,
h2,
h3,
h4,
h5,
h6,
.post-title,
.site-title,
.sidebar .widget h3,
.comments-title,
.neon-form-title {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-shadow:
    0 0 6px #00ffff,
    0 0 20px #00ffff;
  margin-top: 0;
}

/* ajustes tamaños base */
.post-title {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 1rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin-bottom: 0.75rem; }
h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.5rem; }

/* evitar justificar titulares */
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  text-align: left;
}

/* Enlaces tipo neón */
a {
  color: #00ffff;
  text-decoration: none;
  text-shadow: 0 0 6px #00ffff;
  transition: all 0.15s linear;
}
a:hover {
  color: #ffffff;
  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff;
}

/* imágenes dentro del contenido */
.post-content img,
.post-excerpt img,
article img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 10px #00ffff55, 0 0 30px #00ffff22;
}


/* ===========================================================
   2. CABECERA CON BANNER Y MENÚ
   =========================================================== */

.site-header {
  border-bottom: 2px solid #00ffff;
  box-shadow: 0 0 20px #00ffff66;
  margin-bottom: 2rem;
  background-color: #000; /* fallback si tarda en cargar la imagen */
  overflow: hidden;
  position: relative;
  z-index: 10;
}

/* Banner de fondo */
.site-header-bg {
  background-image: url('https://lacantinadelpixel.es/wp-content/uploads/2025/10/baner.png');
  background-size: 100% 100%;       /* estira ancho/alto total del contenedor */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;

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

  display: flex;
  align-items: center;              /* centramos verticalmente la caja del menú */
  justify-content: center;

  position: relative;
  padding: 1rem 0;
}

/* Caja semitransparente con el menú */
.site-header-overlay,
.site-nav {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0,255,255,0.4);
  border-radius: 8px;
  box-shadow:
    0 0 15px #00ffffaa,
    0 0 60px #00ffff55,
    inset 0 0 20px rgba(0,255,255,0.07);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  padding: 0.75rem 1rem;
  width: min(90%, 1100px);
  text-align: center;
}

/* título del sitio (puedes ocultarlo si no quieres texto encima del banner) */
.site-title {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}
.site-title a {
  color: #00ffff;
  text-decoration: none;
}

/* descripción corta oculta visualmente */
.site-desc {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* NAV principal */
.main-nav {
  width: 100%;
  padding-top: 0.4rem;
}

.main-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* Items de menú */
.main-menu-list li a {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;

  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  border: 1px solid transparent;

  min-height: 2rem;
  padding: 0.5rem 0.8rem;

  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff;
  white-space: nowrap;

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

  transition: all 0.15s linear;
}

.main-menu-list li a:hover {
  background: rgba(0,0,0,0.7);
  border: 1px solid #00ffff;
  box-shadow:
    0 0 12px #00ffff,
    0 0 30px #00ffff;
  color: #00ffff;
}

/* Estado activo genérico del menú (página actual) */
.main-menu-list li.current-menu-item > a,
.main-menu-list li.current_page_item > a {
  background: rgba(0,0,0,0.7);
  border: 1px solid #00ffff;
  box-shadow:
    0 0 12px #00ffff,
    0 0 30px #00ffff;
  color: #00ffff;
}


/* ===========================================================
   3. MENÚ: GLOW DINÁMICO POR CATEGORÍA ACTUAL
   =========================================================== */

/* Noticias → cian */
.category-noticias .main-menu-list li a[href*="noticias"],
.single-post.category-noticias .main-menu-list li a[href*="noticias"] {
  background: rgba(0,0,0,0.6);
  border: 1px solid #00ffff;
  box-shadow:
    0 0 10px #00ffff,
    0 0 30px #00ffffaa;
  color: #00ffff;
  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff;
}

/* Juegos → azul eléctrico */
.category-juegos .main-menu-list li a[href*="juegos"],
.single-post.category-juegos .main-menu-list li a[href*="juegos"] {
  background: rgba(0,0,40,0.6);
  border: 1px solid #00bfff;
  box-shadow:
    0 0 10px #00bfff,
    0 0 30px #00bfffaa;
  color: #00bfff;
  text-shadow:
    0 0 8px #00bfff,
    0 0 20px #00bfff;
}

/* Anime → magenta */
.category-anime .main-menu-list li a[href*="anime"],
.single-post.category-anime .main-menu-list li a[href*="anime"] {
  background: rgba(40,0,40,0.6);
  border: 1px solid #ff00ff;
  box-shadow:
    0 0 10px #ff00ff,
    0 0 30px #ff00ffaa;
  color: #ff00ff;
  text-shadow:
    0 0 8px #ff00ff,
    0 0 20px #ff00ff;
}

/* Bricolaje → naranja */
.category-bricolaje .main-menu-list li a[href*="bricolaje"],
.single-post.category-bricolaje .main-menu-list li a[href*="bricolaje"] {
  background: rgba(40,20,0,0.6);
  border: 1px solid #ff6600;
  box-shadow:
    0 0 10px #ff6600,
    0 0 30px #ff6600aa;
  color: #ffb347;
  text-shadow:
    0 0 8px #ff6600,
    0 0 20px #ff6600;
}

/* Entrevistas → verde neón */
.category-entrevistas .main-menu-list li a[href*="entrevistas"],
.single-post.category-entrevistas .main-menu-list li a[href*="entrevistas"] {
  background: rgba(0,40,0,0.6);
  border: 1px solid #00ff66;
  box-shadow:
    0 0 10px #00ff66,
    0 0 30px #00ff66aa;
  color: #00ff66;
  text-shadow:
    0 0 8px #00ff66,
    0 0 20px #00ff66;
}

/* Libros → violeta */
.category-libros .main-menu-list li a[href*="libros"],
.single-post.category-libros .main-menu-list li a[href*="libros"] {
  background: rgba(20,0,40,0.6);
  border: 1px solid #7a5bff;
  box-shadow:
    0 0 10px #7a5bff,
    0 0 30px #7a5bffaa;
  color: #7a5bff;
  text-shadow:
    0 0 8px #7a5bff,
    0 0 20px #7a5bff;
}

/* Info → turquesa holograma */
.category-info .main-menu-list li a[href*="info"],
.single-post.category-info .main-menu-list li a[href*="info"] {
  background: rgba(0,40,40,0.6);
  border: 1px solid #66fff4;
  box-shadow:
    0 0 10px #66fff4,
    0 0 30px #66fff4aa;
  color: #66fff4;
  text-shadow:
    0 0 8px #66fff4,
    0 0 20px #66fff4;
}


/* ===========================================================
   4. LAYOUT PRINCIPAL
   Estructura esperada:
   <main>
     <section class="content-area">...</section>
     <?php get_sidebar(); ?>
   </main>
   =========================================================== */

main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 2rem auto 4rem auto;
  padding: 0 1.5rem 4rem;
  gap: 2rem;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

/* Caja principal tipo panel de recreativa con bisel iluminado */
.content-area {
  flex: 1 1 auto;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,255,255,0.07) 0%,
      rgba(0,0,0,0) 70%
    ),
    rgba(0,0,0,0.8);

  border: 1px solid #00ffff;
  border-radius: 8px;

  box-shadow:
    0 0 15px #00ffffaa,
    0 0 60px #00ffff33,
    inset 0 0 20px rgba(0,255,255,0.07),
    inset 0 0 60px rgba(0,255,255,0.04);

  padding: 2rem;
  color: #f0f0f0;
  height: auto;
  min-height: auto;
  position: relative;
}

/* Artículo individual dentro de listados */
article {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 2rem;
}

/* Títulos de artículo por defecto (fallback si no pilla color de categoría) */
article h1,
article h2 {
  color: #fff;
  text-shadow: 0 0 10px #00ffff, 0 0 30px #00ffff;
  margin-top: 0;
}

/* Meta info del post (fecha, autor) */
.post-meta,
.meta {
  font-size: 0.8rem;
  color: #9ff;
  margin-bottom: 1rem;
  text-shadow:
    0 0 4px #00ffff,
    0 0 12px #00ffff;
}

/* Centrar imágenes grandes */
.post-content img,
.post-excerpt img,
article img {
  border-radius: 4px;
  box-shadow: 0 0 10px #00ffff55, 0 0 30px #00ffff22;
  margin-left: auto;
  margin-right: auto;
}

/* Glow "flotando" debajo de content-area */
.content-area::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 10px;
  right: 10px;
  height: 8px;
  background: radial-gradient(
    ellipse at center,
    rgba(0,255,255,0.35) 0%,
    rgba(0,255,255,0) 70%
  );
  border-radius: 50%;
  filter: blur(4px);
}


/* ===========================================================
   5. SIDEBAR
   =========================================================== */

.sidebar {
  width: 420px;
  max-width: 100%;

  background:
    radial-gradient(circle at 50% 0%, rgba(0,255,255,0.07) 0%, rgba(0,0,0,0) 70%),
    rgba(0,0,0,0.8);

  border: 1px solid #00ffff;
  border-radius: 8px;

  box-shadow:
    0 0 15px #00ffffaa,
    0 0 60px #00ffff33,
    inset 0 0 20px rgba(0,255,255,0.07),
    inset 0 0 60px rgba(0,255,255,0.04);

  padding: 1.5rem;
  color: #f0f0f0;
  height: auto;
  min-height: auto;
  position: relative;
}

.sidebar::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 10px;
  right: 10px;
  height: 8px;
  background: radial-gradient(
    ellipse at center,
    rgba(0,255,255,0.35) 0%,
    rgba(0,255,255,0) 70%
  );
  border-radius: 50%;
  filter: blur(4px);
}

/* Widgets dentro de la sidebar */
.sidebar .widget {
  margin-bottom: 1.5rem;
}

.sidebar .widget h3 {
  font-size: 1.1rem;
  color: #fff;
  text-shadow:
    0 0 10px #00ffff,
    0 0 30px #00ffff;
  margin: 0 0 1rem 0;
}

/* Lista de últimas publicaciones */
.sidebar-post-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cada post del listado lateral */
.sidebar-post-item {
  display: flex;
  align-items: center;            /* en vez de flex-start */
  gap: 0.75rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,255,255,0.25);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 0 10px rgba(0,255,255,0.4);
  transition: all 0.15s linear;
}


.sidebar-post-item:hover {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,255,255,0.8);
  box-shadow:
    0 0 12px #00ffff,
    0 0 30px #00ffff88;
}

/* Miniatura */
.sidebar-thumb-wrap {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 8px #00ffff55;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: #000;
}

/* Placeholder si NO hay imagen destacada */
.sidebar-thumb-wrap.no-thumb {
  width: 70px;
  height: 70px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #00ffff55;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px #00ffff33;
}
.sidebar-thumb-placeholder {
  color: #00ffff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff;
}

/* Texto al lado de la miniatura */
.sidebar-post-title {
  flex: 1;
  color: #00ffff;
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
  text-shadow: 0 0 6px #00ffff;
  transition: all 0.15s linear;
  padding-top: 0.25rem;
}

.sidebar-post-title:hover {
  color: #ffffff;
  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff;
}

/* Animación hover de las imágenes en la sidebar */
.sidebar img {
  transition: all 0.25s ease-in-out;
  border-radius: 6px;
}
.sidebar img:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 12px #00ffff,
    0 0 30px #00ffff;
  filter: brightness(1.2);
}


/* ===========================================================
   6. CAJA DE COMENTARIOS (comments.php)
   =========================================================== */
/* ==============
   CAJA DE COMENTARIOS AJUSTADA
   ============== */

.comments-area {
  margin-top: 3rem;

  background:
    radial-gradient(circle at 50% 0%, rgba(0,255,255,0.07) 0%, rgba(0,0,0,0) 70%),
    rgba(0,0,0,0.8);

  border: 1px solid #00ffff;
  border-radius: 8px;

  box-shadow:
    0 0 15px #00ffffaa,
    0 0 60px #00ffff33,
    inset 0 0 20px rgba(0,255,255,0.07),
    inset 0 0 60px rgba(0,255,255,0.04);

  /* antes teníamos padding: 2rem; */
  /* lo bajamos un poco y añadimos gap interno limpio */
  padding: 1.5rem 1.5rem 2rem;
  color: #f0f0f0;

  /* para que nada pueda sobresalir visualmente */
  overflow: hidden;
}

.comments-title {
  font-size: 1.25rem;
  color: #fff;
  font-weight: 600;
  text-shadow:
    0 0 6px #00ffff,
    0 0 18px #00ffff;
  border-bottom: 1px solid rgba(0,255,255,0.4);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem 0;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Lista de comentarios ya estaba bien,
   no la tocamos */

/* ============
   FORMULARIO
   ============ */

.neon-comment-form {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,255,255,0.5);
  border-radius: 8px;
  box-shadow:
    0 0 12px #00ffff55,
    0 0 40px #00ffff22,
    inset 0 0 20px rgba(0,255,255,0.05);

  /* antes:
     padding: 1rem 1rem 1.5rem;
     lo ajustamos para que el textarea no toque bordes */
  padding: 1rem 1rem 1.5rem;
  color: #dff;

  /* IMPORTANTE:
     hacemos que el formulario no se pegue a los bordes
     de .comments-area */
  margin-top: 2rem;
  margin-left: 0;
  margin-right: 0;

  /* Que todo lo de dentro se ordene en vertical con espacio */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.neon-form-title {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
  text-shadow:
    0 0 6px #00ffff,
    0 0 18px #00ffff;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.neon-comment-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.neon-comment-form label {
  display: block;
  font-size: 0.8rem;
  color: #9ff;
  text-shadow:
    0 0 4px #00ffff,
    0 0 12px #00ffff;
  font-family: 'VT323', monospace;
  letter-spacing: 0.5px;
}

/* Campos de texto y textarea */
.neon-comment-form input[type="text"],
.neon-comment-form input[type="email"],
.neon-comment-form input[type="url"],
.neon-comment-form textarea {
  width: 100%;
  background: rgba(0,0,0,0.6);
  border: 1px solid #00ffff;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4rem;
  padding: 0.75rem 0.75rem;
  box-shadow:
    0 0 10px #00ffff55,
    inset 0 0 10px rgba(0,255,255,0.15);
  outline: none;
  font-family: inherit;

  /* Clave: evitamos que haga overflow raro en algunos navegadores */
  box-sizing: border-box;
  max-width: 100%;
}

/* Si quieres forzar que el textarea no sea TAN alto,
   podemos fijar una altura razonable: */
.neon-comment-form textarea {
  min-height: 160px;   /* -> ajusta al gusto */
  resize: vertical;    /* deja que el usuario lo estire hacia abajo si quiere */
}

.neon-comment-form input[type="text"]:focus,
.neon-comment-form input[type="email"]:focus,
.neon-comment-form input[type="url"]:focus,
.neon-comment-form textarea:focus {
  border-color: #fff;
  box-shadow:
    0 0 8px #00ffffaa,
    0 0 30px #00ffff66,
    inset 0 0 10px rgba(0,255,255,0.3);
}

/* Botón */
.neon-submit-button {
  background: rgba(0,0,0,0.8);
  border: 1px solid #00ffff;
  border-radius: 6px;
  color: #00ffff;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-shadow:
    0 0 6px #00ffff,
    0 0 20px #00ffff;
  box-shadow:
    0 0 12px #00ffffaa,
    0 0 40px #00ffff55;
  transition: all 0.15s linear;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* Que el botón no se pegue al borde derecho visualmente */
  align-self: flex-start;
  max-width: 100%;
}

.neon-submit-button:hover {
  background: rgba(0,255,255,0.08);
  color: #fff;
  box-shadow:
    0 0 16px #00ffff,
    0 0 60px #00ffffaa;
}

/* Mensaje "no comments" */
.no-comments {
  color: #888;
  font-size: 0.9rem;
  margin-top: 1rem;
  text-shadow:
    0 0 4px #00ffff55,
    0 0 14px #00ffff22;
}




/* ===========================================================
   7. EFECTO CRT / MONITOR ARCADE RETRO
   Para usarlo: en el editor de WP añade la clase "crt-frame"
   a la imagen que quieras que tenga look de pantalla vieja
   =========================================================== */

.crt-frame {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;

  background: #000;
  border: 2px solid #00ffff;
  border-radius: 6px;

  box-shadow:
    0 0 10px #00ffffaa,
    0 0 40px #00ffff55;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  max-width: 100%;
  height: auto;
  overflow: hidden; /* para que las scanlines no sobresalgan */
}

/* scanlines horizontales */
.crt-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.22) 2px,
    rgba(0,0,0,0.22) 3px
  );
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.4;
}

/* brillo fosforito en esquina */
.crt-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  background: radial-gradient(
    circle at 0% 0%,
    rgba(0,255,255,0.2) 0%,
    rgba(0,0,0,0) 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.4;
}


/* ===========================================================
   8. COLORES POR CATEGORÍA (CAJA + TITULARES + CONTENIDO)
   =========================================================== */

/* ---- NOTICIAS (cian) ---- */
.category-noticias .content-area,
.single-post.category-noticias .content-area {
  border-color: #00ffff;
  box-shadow:
    0 0 20px #00ffffaa,
    0 0 60px #00ffff55,
    inset 0 0 20px rgba(0,255,255,0.07),
    inset 0 0 60px rgba(0,255,255,0.04);
}
.category-noticias .post-title,
.single-post.category-noticias .post-title {
  color: #ffffff;
  text-shadow:
    0 0 8px #00ffff,
    0 0 25px #00ffffaa;
}
.category-noticias .post-content a,
.single-post.category-noticias .post-content a {
  color: #00ffff;
  text-shadow: 0 0 6px #00ffff, 0 0 20px #00ffff88;
}
.category-noticias .post-content h2,
.category-noticias .post-content h3,
.single-post.category-noticias .post-content h2,
.single-post.category-noticias .post-content h3 {
  color: #ffffff;
  text-shadow: 0 0 8px #00ffff, 0 0 25px #00ffffaa;
}

/* ---- JUEGOS (azul eléctrico) ---- */
.category-juegos .content-area,
.single-post.category-juegos .content-area {
  border-color: #00bfff;
  box-shadow:
    0 0 20px #00bfffa0,
    0 0 60px #00bfff55,
    inset 0 0 20px rgba(0,191,255,0.07),
    inset 0 0 60px rgba(0,191,255,0.04);
}
.category-juegos .post-title,
.single-post.category-juegos .post-title {
  color: #cfffff;
  text-shadow:
    0 0 8px #00bfff,
    0 0 25px #00bfff99;
}
.category-juegos .post-content a,
.single-post.category-juegos .post-content a {
  color: #00bfff;
  text-shadow: 0 0 6px #00bfff, 0 0 20px #00bfff88;
}
.category-juegos .post-content h2,
.category-juegos .post-content h3,
.single-post.category-juegos .post-content h2,
.single-post.category-juegos .post-content h3 {
  color: #cfffff;
  text-shadow: 0 0 8px #00bfff, 0 0 25px #00bfff99;
}

/* ---- ANIME (magenta) ---- */
.category-anime .content-area,
.single-post.category-anime .content-area {
  border-color: #ff00ff;
  box-shadow:
    0 0 20px #ff00ffaa,
    0 0 60px #ff00ff55,
    inset 0 0 20px rgba(255,0,255,0.07),
    inset 0 0 60px rgba(255,0,255,0.04);
}
.category-anime .post-title,
.single-post.category-anime .post-title {
  color: #ffb3ff;
  text-shadow:
    0 0 8px #ff00ff,
    0 0 25px #ff00ff99;
}
.category-anime .post-content a,
.single-post.category-anime .post-content a {
  color: #ff4dff;
  text-shadow: 0 0 6px #ff00ff, 0 0 20px #ff00ff88;
}
.category-anime .post-content h2,
.category-anime .post-content h3,
.single-post.category-anime .post-content h2,
.single-post.category-anime .post-content h3 {
  color: #ffb3ff;
  text-shadow: 0 0 8px #ff00ff, 0 0 25px #ff00ff99;
}

/* ---- BRICOLAJE (naranja soldadura) ---- */
.category-bricolaje .content-area,
.single-post.category-bricolaje .content-area {
  border-color: #ff6600;
  box-shadow:
    0 0 20px #ff6600aa,
    0 0 60px #ff660055,
    inset 0 0 20px rgba(255,102,0,0.07),
    inset 0 0 60px rgba(255,102,0,0.04);
}
.category-bricolaje .post-title,
.single-post.category-bricolaje .post-title {
  color: #ffd9a0;
  text-shadow:
    0 0 8px #ff6600,
    0 0 25px #ff660099;
}
.category-bricolaje .post-content a,
.single-post.category-bricolaje .post-content a {
  color: #ffb347;
  text-shadow: 0 0 6px #ff6600, 0 0 20px #ff660088;
}
.category-bricolaje .post-content h2,
.category-bricolaje .post-content h3,
.single-post.category-bricolaje .post-content h2,
.single-post.category-bricolaje .post-content h3 {
  color: #ffd9a0;
  text-shadow: 0 0 8px #ff6600, 0 0 25px #ff660099;
}

/* ---- ENTREVISTAS (verde neón) ---- */
.category-entrevistas .content-area,
.single-post.category-entrevistas .content-area {
  border-color: #00ff66;
  box-shadow:
    0 0 20px #00ff66aa,
    0 0 60px #00ff6655,
    inset 0 0 20px rgba(0,255,102,0.07),
    inset 0 0 60px rgba(0,255,102,0.04);
}
.category-entrevistas .post-title,
.single-post.category-entrevistas .post-title {
  color: #d5ffcf;
  text-shadow:
    0 0 8px #00ff66,
    0 0 25px #00ff6699;
}
.category-entrevistas .post-content a,
.single-post.category-entrevistas .post-content a {
  color: #00ff66;
  text-shadow: 0 0 6px #00ff66, 0 0 20px #00ff6688;
}
.category-entrevistas .post-content h2,
.category-entrevistas .post-content h3,
.single-post.category-entrevistas .post-content h2,
.single-post.category-entrevistas .post-content h3 {
  color: #d5ffcf;
  text-shadow: 0 0 8px #00ff66, 0 0 25px #00ff6699;
}

/* ---- LIBROS (violeta azulado) ---- */
.category-libros .content-area,
.single-post.category-libros .content-area {
  border-color: #7a5bff;
  box-shadow:
    0 0 20px #7a5bffaa,
    0 0 60px #7a5bff55,
    inset 0 0 20px rgba(122,91,255,0.07),
    inset 0 0 60px rgba(122,91,255,0.04);
}
.category-libros .post-title,
.single-post.category-libros .post-title {
  color: #d8d4ff;
  text-shadow:
    0 0 8px #7a5bff,
    0 0 25px #7a5bff99;
}
.category-libros .post-content a,
.single-post.category-libros .post-content a {
  color: #7a5bff;
  text-shadow: 0 0 6px #7a5bff, 0 0 20px #7a5bff88;
}
.category-libros .post-content h2,
.category-libros .post-content h3,
.single-post.category-libros .post-content h2,
.single-post.category-libros .post-content h3 {
  color: #d8d4ff;
  text-shadow: 0 0 8px #7a5bff, 0 0 25px #7a5bff99;
}

/* ---- INFO (turquesa holograma) ---- */
.category-info .content-area,
.single-post.category-info .content-area {
  border-color: #66fff4;
  box-shadow:
    0 0 20px #66fff4aa,
    0 0 60px #66fff455,
    inset 0 0 20px rgba(102,255,244,0.07),
    inset 0 0 60px rgba(102,255,244,0.04);
}
.category-info .post-title,
.single-post.category-info .post-title {
  color: #ffffff;
  text-shadow:
    0 0 8px #66fff4,
    0 0 25px #66fff499;
}
.category-info .post-content a,
.single-post.category-info .post-content a {
  color: #66fff4;
  text-shadow: 0 0 6px #66fff4, 0 0 20px #66fff488;
}
.category-info .post-content h2,
.category-info .post-content h3,
.single-post.category-info .post-content h2,
.single-post.category-info .post-content h3 {
  color: #ffffff;
  text-shadow: 0 0 8px #66fff4, 0 0 25px #66fff499;
}


/* ===========================================================
   9. FOOTER
   =========================================================== */

footer {
  background: #0a0a0a;
  border-top: 2px solid #00ffff;
  color: #888;
  text-align: center;
  padding: 1rem;
  box-shadow: 0 0 15px #00ffff55;
  font-family: 'VT323', monospace;
  font-size: 16px;
  line-height: 1.4;
}


.post-title a {
  color: #fff;
  text-decoration: none;
  text-shadow:
    0 0 10px #00ffff,
    0 0 30px #00ffff;
  transition: all 0.15s linear;
}

.post-title a:hover {
  color: #00ffff;
  text-shadow:
    0 0 12px #00ffff,
    0 0 40px #00ffff;
}
/* ===========================================================
  10.  RESPONSIVE MÓVIL
   Ajustes para pantallas pequeñas
   =========================================================== */
@media (max-width: 768px) {

  /* -- Ajustes generales -- */
  html, body {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }

  main {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem auto 3rem auto;
    padding: 0 1rem 3rem;
    max-width: 95%;
  }

  .content-area,
  .sidebar {
    width: 100%;
    max-width: 600px;
    border-width: 1px;
    border-radius: 6px;
    padding: 1.25rem;
  }

  /* -- Cabecera más comprimida y centrada -- */
  .site-header-bg {
    min-height: 160px;
    background-size: cover;
    background-position: center center;
  }

  .site-header-overlay,
  .site-nav {
    padding: 0.5rem;
    border-radius: 6px;
    gap: 0.4rem;
    width: 92%;
    margin: 0 auto;
  }

  /* -- Menú de navegación más ordenado (tres filas de 2 botones + una de 1) -- */
  .main-menu-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    justify-items: center;
  }

  .main-menu-list li a {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
    text-align: center;
    border-radius: 4px;
    min-height: 2.2rem;
  }

  /* Centrar el último botón “Info” */
  .main-menu-list li:last-child {
    grid-column: 1 / span 2;
    justify-self: center;
  }

  /* -- Imagen de post y texto más equilibrados -- */
  .post-content img {
    margin: 0 auto 1rem auto;
    max-width: 100%;
    border-radius: 6px;
  }

  .post-title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }

  .post-meta {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
}


  /* 7. Widgets de la sidebar: que no parezcan dos columnas apretadas */
  .sidebar .widget {
    margin-bottom: 1rem;
  }

  .sidebar-post-item {
    gap: 0.5rem;
    padding: 0.6rem;
  }

  .sidebar-thumb {
    width: 60px;
    height: 60px;
  }

  .sidebar-post-title {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  /* 8. Cuadros de categoría tipo "ANIME" en páginas de categoría:
     bajamos un poco el glow magenta/azul/lo que toque para que no sature toda la pantalla */
  .content-area,
  .sidebar {
    box-shadow:
      0 0 12px rgba(0,255,255,0.6),
      0 0 30px rgba(0,255,255,0.25),
      inset 0 0 15px rgba(0,255,255,0.06),
      inset 0 0 40px rgba(0,255,255,0.03);
  }

  /* 9. Evitar que las cajas tengan bordes demasiado gordos en móvil */
  .content-area,
  .sidebar {
    border-width: 1px;
    padding: 1rem 1rem 1.5rem;
  }

  /* 10. Formularios de comentarios en móvil:
     que no ocupen medio kilómetro en alto al primer vistazo */
  .neon-comment-form textarea {
    min-height: 120px;
  }

}
/* ===========================================================
   MENÚ HAMBURGUESA MÓVIL
   =========================================================== */
.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    width: 32px;
    height: 24px;
    cursor: pointer;
    position: relative;
    margin: 0.5rem auto 0;
  }

  .menu-toggle span {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #00ffff;
    left: 0;
    border-radius: 2px;
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    transition: all 0.3s ease;
  }

  .menu-toggle span:nth-child(1) { top: 0; }
  .menu-toggle span:nth-child(2) { top: 10px; }
  .menu-toggle span:nth-child(3) { top: 20px; }

  /* animación cuando el menú está activo */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
  }

  /* el menú se oculta por defecto */
  .main-menu-list {
    display: none;
    flex-direction: column;
    align-items: center;
  }

  /* cuando el menú está activo, se muestra */
  .main-menu-list.active {
    display: flex;
    margin-top: 0.5rem;
  }
}
/* ===========================================================
   AJUSTES RESPONSIVE Y ANIMACIÓN TRON
   =========================================================== */

/* Fade-in Tron al cargar */
body {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
body.fade-in {
  opacity: 1;
}

/* Botón hamburguesa */
.menu-toggle {
  display: none;
}

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
    width: 34px;
    height: 24px;
    cursor: pointer;
    position: relative;
    margin: 0.5rem auto;
    z-index: 20;
  }

  .menu-toggle span {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #00ffff;
    left: 0;
    border-radius: 2px;
    box-shadow: 0 0 8px #00ffff, 0 0 20px #00ffff;
    transition: all 0.3s ease;
  }

  .menu-toggle span:nth-child(1) { top: 0; }
  .menu-toggle span:nth-child(2) { top: 10px; }
  .menu-toggle span:nth-child(3) { top: 20px; }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
  }

  /* Menú oculto por defecto */
  .main-menu-list {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    animation: tron-fade 0.5s ease forwards;
  }

  /* Menú visible cuando se activa */
  .main-menu-list.active {
    display: flex;
    animation: tron-fade 0.6s ease forwards;
  }

  /* Animación de aparición TRON */
  @keyframes tron-fade {
    0% {
      opacity: 0;
      transform: scale(0.9);
      filter: drop-shadow(0 0 2px #00ffff);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: drop-shadow(0 0 6px #00ffff);
    }
  }

  /* Margen general y caja */
  main {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 1rem auto 3rem auto;
    padding: 0 1rem 2rem;
    max-width: 95%;
  }

  .content-area,
  .sidebar {
    width: 100%;
    max-width: 600px;
    border-radius: 6px;
    padding: 1.25rem;
  }

  /* Menú más centrado y proporcional */
  .main-menu-list li a {
    width: 90%;
    text-align: center;
    font-size: 0.9rem;
    min-height: 2.2rem;
  }
}
/* ===========================================================
   AJUSTES FINALES RESPONSIVE / TRON
   =========================================================== */

/* fundido CRT al cargar */
body {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
body.fade-in {
  opacity: 1;
}

/* Por defecto: en escritorio mostramos nav desktop y ocultamos nav móvil */
.main-nav-desktop { display: block; }
.main-nav-mobile  { display: none; }
.menu-toggle      { display: none; }

/* Corrección del bullet blanco feo en el menú:
   forzamos quitar estilos de lista en ambos */
.main-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-menu-list li {
  list-style: none;
}

/* Para móviles */
@media (max-width: 768px) {

  /* ==================
     CABECERA / BANNER
     ================== */

  .site-header-bg {
    min-height: 180px;
    background-size: cover;           /* recorta bien en móvil */
    background-position: center center;
    padding: 0.75rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .site-header-overlay {
    width: 94%;
    max-width: 500px;
    padding: 0.75rem 0.75rem 1rem;
    border-radius: 8px;
    gap: 0.75rem;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(0,255,255,0.4);
    box-shadow:
      0 0 15px #00ffffaa,
      0 0 60px #00ffff55,
      inset 0 0 20px rgba(0,255,255,0.07);
  }

  .site-title {
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
  }
  .site-title a {
    color: #00ffff;
    text-decoration: none;
  }

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

  /* escritorio OFF en móvil */
  .main-nav-desktop {
    display: none;
  }

  /* hamburguesa visible en móvil */
  .menu-toggle {
    display: block;
    width: 36px;
    height: 26px;
    cursor: pointer;
    position: relative;
    margin: 0.5rem auto 0.25rem;
    z-index: 30;
  }
  .menu-toggle span {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #00ffff;
    left: 0;
    border-radius: 2px;
    box-shadow: 0 0 8px #00ffff, 0 0 20px #00ffff;
    transition: all 0.3s ease;
  }
  .menu-toggle span:nth-child(1) { top: 0; }
  .menu-toggle span:nth-child(2) { top: 10px; }
  .menu-toggle span:nth-child(3) { top: 20px; }
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
  }

  /* menú móvil contenedor visible (pero lista oculta al inicio) */
  .main-nav-mobile {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* la lista móvil estilo holograma flotante */
  .main-menu-mobile-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(0,255,255,0.4);
    border-radius: 8px;
    box-shadow:
      0 0 15px #00ffffaa,
      0 0 60px #00ffff55,
      inset 0 0 20px rgba(0,255,255,0.07),
      0 0 30px rgba(0,255,255,0.5);
    padding: 0.5rem 0;
    width: 90%;
    max-width: 320px;
    animation: tron-fade 0.4s ease forwards;
  }

  /* cuando el usuario pulsa la hamburguesa */
  .main-menu-mobile-list.active {
    display: flex;
  }

  /* cada item del menú móvil */
  .main-menu-mobile-list li a {
    display: block;
    padding: 0.75rem 1rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #ffffff;
    line-height: 1.2;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(0,255,255,0.2);
    text-shadow: 0 0 8px #00ffff, 0 0 20px #00ffff;
  }
  .main-menu-mobile-list li:first-child a {
    border-top: 0;
  }
  .main-menu-mobile-list li a:hover {
    background: rgba(0,0,0,0.7);
    color: #00ffff;
    box-shadow:
      0 0 12px #00ffff,
      0 0 30px #00ffff;
  }

  /* animación de aparición */
  @keyframes tron-fade {
    0%   { opacity:0; transform:scale(0.9); filter:drop-shadow(0 0 2px #00ffff); }
    100% { opacity:1; transform:scale(1);   filter:drop-shadow(0 0 6px #00ffff); }
  }

  /* ==================
     CONTENIDO / MÁRGENES
     ================== */

  main {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    padding: 0 1rem 2rem;
    margin: 1rem auto 3rem auto;
    gap: 2rem;
  }

  .content-area,
  .sidebar {
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    border-width: 1px;
    padding: 1rem 1rem 1.5rem;
    box-shadow:
      0 0 12px rgba(0,255,255,0.6),
      0 0 30px rgba(0,255,255,0.25),
      inset 0 0 15px rgba(0,255,255,0.06),
      inset 0 0 40px rgba(0,255,255,0.03);
  }

  .post-title {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }

  .post-meta {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }

  .post-content img {
    margin: 0 auto 1rem auto;
    border-radius: 6px;
    max-width: 100%;
    height: auto;
  }
}
/* === RESPONSIVE FINAL UNIFICADO === */
@media (max-width: 768px) {

.sidebar-post-item {
    align-items: flex-start;
  }

  /* ---------------------------
     1. Banner / cabecera móvil
     --------------------------- */

  /* Fondo del banner: ocupar ancho pantalla sin dejar hueco a la derecha */
  .site-header-bg {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    min-height: 180px;

    background-size: cover;
    background-position: center center;
  }

  /* Caja luminosa donde está el título + hamburguesa + menú móvil */
  .site-header-overlay {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    margin: 0 auto;
    padding: 0.75rem 0.75rem 1rem;
    box-sizing: border-box;

    background: rgba(0,0,0,0.55);
    border-left: 0;
    border-right: 0;
  }

  /* Centramos bien el botón hamburguesa */
  .menu-toggle {
    margin: 0.5rem auto 0.25rem auto;
  }

  /* El menú desplegable móvil ocupa ancho cómodo sin pegarse al borde físico */
  .main-menu-mobile-list {
    width: calc(100% - 2rem);
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
  }


  /* -------------------------------------------------
     2. Layout principal (main, content-area, sidebar)
     ------------------------------------------------- */

  /* main en columna, menos aire lateral */
  main {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 2rem;
    margin: 1rem auto 3rem auto;
    gap: 2rem;
  }

  /* desplazamos un pelín la caja a la izquierda (-6px),
     y equilibramos padding interno */
  .content-area {
    margin-left: -15px;
    margin-right: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;

    box-shadow:
      0 0 12px rgba(0,255,255,0.5),
      0 0 24px rgba(0,255,255,0.22),
      inset 0 0 15px rgba(0,255,255,0.06),
      inset 0 0 40px rgba(0,255,255,0.03);
  }

  /* la sidebar cuando baja debajo va igual de alineada */
  .sidebar {
    margin-left: -15px; /*aqui cambiamos margen */
    margin-right: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;

    box-shadow:
      0 0 12px rgba(0,255,255,0.5),
      0 0 24px rgba(0,255,255,0.22),
      inset 0 0 15px rgba(0,255,255,0.06),
      inset 0 0 40px rgba(0,255,255,0.03);
  }

  /* recortamos ligeramente el halo inferior para que no sobresalga */
  .content-area::after,
  .sidebar::after {
    left: 8px;
    right: 8px;
  }


  /* -------------------------------------------------
     3. Tipografía y bloques internos en móvil
     ------------------------------------------------- */

  .post-title {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }

  .post-meta {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }

  .sidebar .widget {
    margin-bottom: 1rem;
  }

  .sidebar-post-item {
    gap: 0.5rem;
    padding: 0.6rem;
  }

  .sidebar-thumb-wrap {
    width: 60px;
    height: 60px;
  }

  .sidebar-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sidebar-post-title {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  /* evitamos pequeños scrolls laterales fantasmas típicos de iPhone */
  html, body {
    overflow-x: hidden;
  }
}
/* ===== Separador minimalista entre posts en categorías ===== */

/* Cada artículo dentro del archivo/categoría */
.archive-post-item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

/* Línea neon inferior tipo "scanline tron" */
.archive-separator {
  width: 100%;
  height: 2px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(180,0,255,1) 0%,
    rgba(180,0,255,0.3) 40%,
    rgba(0,0,0,0) 70%
  );
  box-shadow:
    0 0 8px rgba(180,0,255,0.9),
    0 0 20px rgba(180,0,255,0.5);
  border-radius: 999px;
}

/* Para que el último artículo no acabe con una raya flotando debajo */
.archive-post-item:last-of-type .archive-separator {
  display: none;
}
/* ===========================================================
   OVERRIDES SIDEBAR POST CARDS (desktop)
   =========================================================== */

/* Contenedor de cada entrada en la sidebar */
.sidebar-post-item {
  display: flex;
  align-items: center;              /* nos aseguramos de centrar la miniatura verticalmente en DESKTOP */
  gap: 0.75rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,255,255,0.25);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 0 10px rgba(0,255,255,0.4);
  transition: all 0.15s linear;
}

/* Miniatura */
.sidebar-thumb-wrap {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 8px #00ffff55;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bloque de texto al lado de la miniatura:
   ahora lo tratamos explícitamente como una columna con título+desc */
.sidebar-text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 0.4rem;
  text-align: justify;               /* <- JUSTIFICAR en la sidebar */
}

/* Título clicable de la tarjeta */
.sidebar-post-title {
  color: #00ffff;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  text-shadow:
    0 0 6px #00ffff,
    0 0 20px #00ffff;
  transition: all 0.15s linear;
  display: block;
}

.sidebar-post-title:hover {
  color: #ffffff;
  text-shadow:
    0 0 8px #00ffff,
    0 0 24px #00ffff;
}

/* Extracto/description corto dentro de la tarjeta */
.sidebar-post-excerpt {
  color: #eaffff;
  font-size: 0.8rem;
  line-height: 1.4;
  text-shadow:
    0 0 2px #000,
    0 0 4px #00ffff55;  /* glow más suave que el título */
}
/* ===========================================================
   SIDEBAR: overrides finales (tus clases reales)
   =========================================================== */

/* Cada tarjeta lateral dentro de "Últimas publicaciones" */
.sidebar-post-card {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 10px rgba(0,255,255,0.4);
  transition: all 0.15s linear;
}

/* Todo el contenido clicable dentro de la tarjeta (thumb + texto) */
.sidebar-post-link {
  display: flex;
  flex-direction: row;
  align-items: center;            /* <- centra verticalmente la miniatura con el bloque de texto en escritorio */
  gap: 0.75rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Contenedor de la miniatura */
.sidebar-thumb {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 8px #00ffff55;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen dentro de la miniatura */
.sidebar-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

/* Si no hay thumbnail mostramos un "+" */
.sidebar-thumb-fallback {
  color: #00ffff;
  font-size: 1.2rem;
  line-height: 1;
  font-family: inherit;
  text-shadow: 0 0 8px #00ffff, 0 0 20px #00ffff;
}

/* Bloque de texto (título + descripción) */
.sidebar-post-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 0.4rem;
  text-align: justify;           /* <- esto justifica texto dentro */
}

/* TÍTULO: lo mantenemos como está pero lo estilizamos aquí */
.sidebar-post-title {
  margin: 0;
  color: #00ffff;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 600;
  text-shadow:
    0 0 6px #00ffff,
    0 0 20px #00ffff;
  text-transform: none;          /* usa el caso en que escribes el título */
}

/* Haz que el título reaccione al hover global del <a> */
.sidebar-post-link:hover .sidebar-post-title {
  color: #ffffff;
  text-shadow:
    0 0 8px #00ffff,
    0 0 24px #00ffff;
}

/* DESCRIPCIÓN / GANCHO debajo del título */
.sidebar-post-excerpt {
  color: #eaffff;
  font-size: 0.8rem;
  line-height: 1.4;
  text-shadow:
    0 0 2px #000,
    0 0 4px #00ffff55;
  margin: 0;
  max-width: 100%;
}
/* === Sidebar ancho solo en escritorio (>=1024px) === */
@media (min-width: 1024px) {

    /* Fuerza ancho del sidebar */
    .sidebar-wrapper,
    .sidebar-latest {
        width: 500px !important;
        max-width: 500px !important;
    }

    /* Empujamos el contenido principal para que no se meta debajo */
    .content-area {
        /* deja un hueco mayor a la izquierda para que quepan contenido + sidebar */
        max-width: calc(100% - 520px) !important;
        /* el -520px es 500px del sidebar + ~20px colchón de margen */
    }
}

/* ===========================================================
   ICONOS SOCIALES CABECERA (Facebook / Instagram)
   =========================================================== */

.social-icons-header {
  position: absolute;
  top: 1rem;
  right: 1rem;

  display: flex;
  gap: 0.6rem;

  z-index: 30; /* por encima del overlay y del menú */
}

.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  border-radius: 8px;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(0,255,255,0.5);

  box-shadow:
    0 0 10px #00ffffaa,
    0 0 30px #00ffff55,
    inset 0 0 15px rgba(0,255,255,0.07);

  text-shadow:
    0 0 8px #00ffff,
    0 0 20px #00ffff;

  color: #00ffff;
  cursor: pointer;
  transition: all 0.15s linear;
}

.social-icon-link:hover {
  background: rgba(0,0,0,0.8);
  border: 1px solid #00ffff;
  box-shadow:
    0 0 12px #00ffff,
    0 0 40px #00ffff;

  color: #ffffff;
  text-shadow:
    0 0 10px #00ffff,
    0 0 30px #00ffff;
}

/* El propio SVG hereda el color del enlace */
.social-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 0 4px #00ffff);
}

/* Bloques de título en la sidebar */
.sidebar-block-title {
  list-style: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 1.5rem 0 0.75rem 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0,255,255,0.5);
  color: #ffffff;
  text-shadow:
    0 0 6px #00ffff,
    0 0 18px #00ffff;
}

.neon-title {
  border-bottom-color: rgba(0,255,255,0.8);
  text-shadow:
    0 0 8px #00ffff,
    0 0 24px #00ffff;
}

.neon-title-alt {
  color: #00ffff;
  border-bottom-color: rgba(0,255,255,0.6);
  text-shadow:
    0 0 8px #00ffff,
    0 0 24px #00ffff;
}

/* ===========================================================
   BANNER ESTACIONAL
   =========================================================== */
.season-wrapper{
  position:relative; width:100%;
  background:rgba(0,0,0,0.6);
  border-bottom:1px solid rgba(0,255,255,0.4);
  box-shadow:0 0 15px #00ffff88,0 0 60px #00ffff33,inset 0 0 20px rgba(0,255,255,0.07);
  font-family:'Orbitron',sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:1px;
  color:#00ffff; text-shadow:0 0 6px #00ffff,0 0 20px #00ffff;
  display:flex; align-items:center; justify-content:center; padding:.55rem .8rem;
  animation:lcpSeasonDrop .9s ease-out forwards; opacity:0; overflow:hidden; z-index:9999;
}
.season-inner{display:flex;gap:.55rem .8rem;align-items:center;justify-content:center;text-align:center}
.season-inner .emoji{font-size:1rem;line-height:1}
.season-inner .msg{color:#fff;animation:lcpNeonPulse 3s infinite alternate}

@keyframes lcpSeasonDrop{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes lcpNeonPulse{0%,100%{text-shadow:0 0 8px #00ffff,0 0 25px #00ffffaa}50%{text-shadow:0 0 3px #00ffff,0 0 10px #00ffff55}}

.season-layer{position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:screen}

/* NAVIDAD: copos */
.season-navidad .snow-layer{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0px, rgba(255,255,255,0) 6px),
    radial-gradient(circle, rgba(255,255,255,.7) 0px, rgba(255,255,255,0) 4px),
    radial-gradient(circle, rgba(255,255,255,.5) 0px, rgba(255,255,255,0) 3px);
  background-size:8px 8px,6px 6px,4px 4px;
  animation:lcpSnow 8s linear infinite;
}
@keyframes lcpSnow{0%{background-position:0 0,0 0,0 0}100%{background-position:0 200px,0 150px,0 100px}}

/* AÑO NUEVO: fuegos + confeti */
.season-ano_nuevo .fireworks-layer{
  background-image: url('/wp-content/uploads/2025/SVG/fireworks.svg');
  background-repeat:repeat; background-size:160px 160px; animation:lcpTwinkle 2.4s ease-in-out infinite alternate;
}
.season-ano_nuevo .confetti-layer{
  background-image: url('/wp-content/uploads/2025/SVG/confetti.svg');
  background-repeat:repeat; background-size:120px 120px; opacity:.35;
}
@keyframes lcpTwinkle{0%{filter:brightness(1)}100%{filter:brightness(1.5)}}

/* REYES: camellos desfilando */
.season-reyes .camellos-layer{
  background-image:url('/wp-content/uploads/2025/SVG/reyes_silueta.svg');
  background-repeat:repeat-x; background-position:bottom left; background-size:auto 42px;
  animation:lcpScrollX 12s linear infinite; opacity:.5; filter:drop-shadow(0 0 6px #00ffff);
}
@keyframes lcpScrollX{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SAN VALENTÍN: corazones flotando */
.season-san_valentin .hearts-layer{
  background-image:url('/wp-content/uploads/2025/SVG/hearts.svg');
  background-repeat:repeat; background-size:60px 60px; animation:lcpFloatY 4s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 6px #ff007a);
}
.season-san_valentin .msg{color:#ff7ecb;text-shadow:0 0 8px #ff007a,0 0 25px #ff007a99}
@keyframes lcpFloatY{0%{transform:translateY(-3px)}100%{transform:translateY(3px)}}

/* CARNAVAL: máscaras */
.season-carnaval .masks-layer{
  background-image:url('/wp-content/uploads/2025/SVG/caretas.svg');
  background-repeat:repeat; background-size:72px 36px; animation:lcpShimmer 3s linear infinite;
  filter:drop-shadow(0 0 6px #ff00ff);
}
@keyframes lcpShimmer{0%{filter:brightness(1)}50%{filter:brightness(1.3)}100%{filter:brightness(1)}}

/* FERIA DE ABRIL: farolillos */
.season-feria_abril .farolillos-layer{
  background-image:url('/wp-content/uploads/2025/SVG/farolillos.svg');
  background-repeat:repeat-x; background-size:auto 36px; background-position:top left;
  animation:lcpSway 2.8s ease-in-out infinite alternate; filter:drop-shadow(0 0 6px #00ffff);
}
@keyframes lcpSway{0%{transform:rotate(-.3deg)}100%{transform:rotate(.3deg)}}

/* DÍA DEL LIBRO */
.season-dia_libro .bookmark-layer{
  background-image:url('/wp-content/uploads/2025/SVG/bookmark_pixel.svg');
  background-repeat:repeat; background-size:64px 64px; opacity:.35;
}

/* STAR WARS DAY: sables */
.season-star_wars .sables-layer{
  background-image:url('/wp-content/uploads/2025/SVG/sables.svg');
  background-repeat:repeat; background-size:140px 20px; animation:lcpTwinkle 1.8s ease-in-out infinite alternate;
}

/* SAN ISIDRO: claveles / boina */
.season-san_isidro .chulapo-layer{
  background-image:url('/wp-content/uploads/2025/SVG/claveles.svg');
  background-repeat:repeat; background-size:52px 52px; opacity:.4;
}

/* SAN JUAN: chispas */
.season-san_juan .hoguera-layer{
  background-image:url('/wp-content/uploads/2025/SVG/chispas.svg');
  background-repeat:repeat; background-size:96px 96px; animation:lcpTwinkle 1.6s ease-in-out infinite alternate;
}

/* SAN FERMÍN: toros corriendo */
.season-san_fermin .toros-layer{
  background-image:url('/wp-content/uploads/2025/SVG/toros_silueta.svg');
  background-repeat:repeat-x; background-position:bottom left; background-size:auto 40px;
  animation:lcpScrollX 9s linear infinite; opacity:.5; filter:drop-shadow(0 0 6px #00ffff);
}

/* HALLOWEEN: murciélagos */
.season-halloween .bats-layer{
  background-image:url('/wp-content/uploads/2025/SVG/bats_16bit.svg');
  background-repeat:repeat; background-size:60px 30px; animation:lcpFloatY 3.2s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 6px #ff00ff);
}

/* VERANO: palmera + cassette (textura suave si quieres) */
.season-verano .verano-layer{
  background-image:url('/wp-content/uploads/2025/SVG/palmera.svg'), url('/wp-content/uploads/2025/SVG/cassette.svg');
  background-repeat:repeat, repeat; background-size:90px 90px, 120px 80px; opacity:.35;
}


}
.lcpx-floating-actions {
  position: fixed;
  left: 26px;              /* antes 18px → un pelín más hacia fuera */
  top: 40%;
  margin-top: 18px;   /* súbelo a 22–24px si los quieres más separados */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;               /* antes 12px → más separación entre botones */
  z-index: 10000;
  pointer-events: none;
}

/* IMPORTANTE para que el contador se quede pegado al botón */
.lcpx-fa-btn {
  position: relative;            /* <-- nuevo */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #00ffff;
  box-shadow: 0 0 12px #00ffffaa, 0 0 40px #00ffff55, inset 0 0 14px rgba(0,255,255,0.08);
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff, 0 0 20px #00ffff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lcpx-fa-btn:hover { transform: translateY(-1px) scale(1.02); } /* un pelín menos para evitar saltos */

.lcpx-fa-count {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  border: 1px solid #00ffff;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
  box-shadow: 0 0 10px #00ffff99, 0 0 22px #00ffff66;
  pointer-events: none;          /* <-- clave: no “capta” el hover */
  z-index: 2;
}

/* === Mostrar contador solo al hover o si ya has dado like === */
.lcpx-fa-count { 
  opacity: 0; 
  transition: opacity .12s ease; 
}
.lcpx-fa-btn:hover .lcpx-fa-count,
.lcpx-fa-btn.is-liked .lcpx-fa-count { 
  opacity: 1; 
}

/* ===========================================================
   Floating Actions (Like + Share) – La Cantina del Pixel
   Fijo a la izquierda, con separación generosa entre botones.
   =========================================================== */

.lcpx-floating-actions {
  position: fixed;
  left: 90px;                 /* ajusta si lo quieres más fuera/dentro */
  top: clamp(50px, 40vh, 65vh);
  /*top: none ;*/ 
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 24px;                  /* separación principal entre iconos */
  z-index: 10000;
  pointer-events: none;       /* el contenedor no captura clics */
}

/* Por si algún estilo pisa el gap, metemos margen al segundo botón */
.lcpx-floating-actions .lcpx-fa-btn + .lcpx-fa-btn {
  margin-top: 24px !important;
}

.lcpx-fa-btn {
  position: relative;         /* ancla el badge del contador */
  pointer-events: auto;       /* los botones sí capturan clics */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  border-radius: 12px;

  background: rgba(0,0,0,0.55);
  border: 1px solid #00ffff;
  box-shadow:
    0 0 12px #00ffffaa,
    0 0 40px #00ffff55,
    inset 0 0 14px rgba(0,255,255,0.08);

  color: #00ffff;
  text-shadow: 0 0 8px #00ffff, 0 0 20px #00ffff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lcpx-fa-btn:hover {
  transform: translateY(-1px) scale(1.02);
  background: rgba(0,255,255,0.08);
  box-shadow:
    0 0 16px #00ffff,
    0 0 60px #00ffffaa;
}

.lcpx-fa-ico { display: block; }

/* Contador (badge) – no interfiere con hover */
.lcpx-fa-count {
  position: absolute;
  right: -10px;
  top: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;

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

  background: rgba(0,0,0,0.85);
  border: 1px solid #00ffff;
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1;
  box-shadow: 0 0 10px #00ffff99, 0 0 22px #00ffff66;
  pointer-events: none;        /* clave para evitar “teletransporte” */
  opacity: 0;                  /* oculto por defecto */
  transition: opacity .12s ease;
}

/* Mostrar badge al pasar el ratón o si ya diste like */
.lcpx-fa-btn:hover .lcpx-fa-count,
.lcpx-fa-btn.is-liked .lcpx-fa-count {
  opacity: 1;
}

/* Panel de compartir (fallback) anclado a la derecha de la columna */
.lcpx-share-panel {
  position: absolute;
  left: 60px;
  top: 0;
  width: 190px;

  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(0,255,255,0.6);
  border-radius: 10px;
  box-shadow: 0 0 12px #00ffff99, inset 0 0 14px rgba(0,255,255,0.06);
  padding: 10px;
}

.lcpx-share-panel .lcpx-share-link,
.lcpx-share-panel .lcpx-copy {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,255,255,0.4);
  border-radius: 8px;
  padding: 6px 10px;
  color: #e0ffff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s linear, box-shadow .15s linear;
}

.lcpx-share-panel .lcpx-share-link:hover,
.lcpx-share-panel .lcpx-copy:hover {
  background: rgba(0,255,255,0.08);
  box-shadow: 0 0 12px #00ffff77;
}

/* Oculta la barra en móvil (si quieres bottom bar luego la hacemos) */
@media (max-width: 900px) {
  .lcpx-floating-actions { display: none; }
}

/* ===== Acciones móviles al final del post ===== */
.lcpx-actions-mobile {
  display: none;              /* por defecto oculto (solo móvil) */
  margin: 24px auto 0;
  width: 100%;
  max-width: 760px;           /* se centra con el contenido */
  text-align: center;
}

.lcpx-actions-mobile .lcpx-fa-btn {
  width: 48px;
  height: 48px;
  margin: 0 10px;             /* separación horizontal entre iconos */
  border-radius: 12px;
  position: relative;
}

/* Badge del contador en móvil */
.lcpx-actions-mobile .lcpx-fa-count {
  position: absolute;
  right: -10px;
  top: -10px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  border: 1px solid #00ffff;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
  box-shadow: 0 0 10px #00ffff99, 0 0 22px #00ffff66;
  pointer-events: none;
}

/* Panel compartir en móvil: debajo y centrado */
.lcpx-actions-mobile .lcpx-share-panel {
  position: static;
  width: 100%;
  max-width: 320px;
  margin: 10px auto 0;
}

/* Breakpoint móvil: ocultamos la barra fija y mostramos la de pie */
@media (max-width: 900px) {
  .lcpx-floating-actions { display: none !important; }
  .lcpx-actions-mobile { display: block; }
}

/* ===== Forzar visibilidad y layout en móvil ===== */
@media (max-width: 900px) {
  /* Oculta la barra fija de escritorio */
  .lcpx-floating-actions { display: none !important; }

  /* Muestra el bloque móvil sí o sí (flex centrado) */
  .lcpx-actions-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 20px;              /* separación horizontal entre botones */
    margin: 24px auto 0;
    width: 100%;
    max-width: 760px;
    text-align: center;
  }

  .lcpx-actions-mobile .lcpx-fa-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    position: relative;
    margin: 0;             /* nos apoyamos en gap */
  }

  /* Badge del contador en móvil */
  .lcpx-actions-mobile .lcpx-fa-count {
    position: absolute;
    right: -10px;
    top: -10px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    border: 1px solid #00ffff;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1;
    box-shadow: 0 0 10px #00ffff99, 0 0 22px #00ffff66;
    pointer-events: none;
  }

  /* Panel de compartir en móvil: debajo y centrado */
  .lcpx-actions-mobile .lcpx-share-panel,
  .lcpx-actions-mobile .lcpx-send-panel {
    position: static !important;
    width: 100%;
    max-width: 320px;
    margin: 10px auto 0;
  }
}

/* Blindaje anti-filtros: si algún bloqueador oculta .share, usamos alias .lcpx-send */
.lcpx-send-panel { display: none; } /* por defecto oculto; lo abrirá el JS */