:root{
  --bg: #0b0b0d;
  --bg-card: #16151a;
  --red: #c1121f;
  --red-dark: #7a0c14;
  --text: #e7e3e0;
  --text-dim: #a39c98;
  --border: #2a2730;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(ellipse at top, #1a1418 0%, var(--bg) 60%);
  color:var(--text);
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height:1.6;
}

a{color:var(--red);text-decoration:none}
a:hover{color:#e63946;text-decoration:underline}

.header{
  background:linear-gradient(180deg, #150b0d, #0b0b0d);
  border-bottom:1px solid var(--red-dark);
  padding:1.2rem 1rem;
  text-align:center;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
  max-width:1100px;
  margin:0 auto;
}
.header h1{
  font-family:'Creepster', 'Georgia', serif;
  font-weight:normal;
  font-size:2.8rem;
  letter-spacing:3px;
  margin:0;
  color:#e8dedb;
  text-shadow:
    0 0 10px rgba(193,18,31,0.9),
    0 0 26px rgba(193,18,31,0.55),
    3px 3px 0 #3d0000;
  animation: parpadeo-terror 6s infinite;
}

@keyframes parpadeo-terror{
  0%, 89%, 100% {
    opacity:1;
    text-shadow: 0 0 10px rgba(193,18,31,0.9), 0 0 26px rgba(193,18,31,0.55), 3px 3px 0 #3d0000;
  }
  90% { opacity:.35; text-shadow:none; }
  91% { opacity:1; }
  92% { opacity:.15; text-shadow:none; }
  93% { opacity:1; text-shadow: 0 0 10px rgba(193,18,31,0.9), 0 0 26px rgba(193,18,31,0.55), 3px 3px 0 #3d0000; }
}

.header .tagline{color:var(--text-dim);font-style:italic;margin-top:.5rem;font-size:.95rem}

@media (max-width:600px){
  .header h1{font-size:1.9rem;letter-spacing:1.5px}
  .header .tagline{font-size:.82rem}
}

/* --- Botones de redes sociales --- */
.social-bar{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.social-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;border-radius:30px;
  font-family:system-ui,sans-serif;font-size:.82rem;font-weight:600;
  color:#fff !important;text-decoration:none !important;
  transition:transform .15s, opacity .15s;
}
.social-btn:hover{transform:translateY(-2px);opacity:.9}
.social-tiktok{background:#000;border:1px solid #444}
.social-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4)}
.social-youtube{background:#ff0000}

.footer .social-bar{margin-bottom:1.2rem}
.footer-links{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:.8rem;font-size:.82rem;
}
.footer-links a{color:var(--text-dim)}
.footer-links a:hover{color:var(--red)}

/* --- Menú de navegación (con hamburguesa en móvil) --- */
nav.menu{
  background:#111;
  border-bottom:1px solid var(--border);
  padding:.5rem 1rem;
  font-family: system-ui, sans-serif;
}
.menu-toggle{
  display:none;
  width:100%;
  background:none;border:none;color:var(--text);
  padding:.6rem 0;font-size:1rem;text-align:left;cursor:pointer;
  text-transform:uppercase;letter-spacing:1px;
}
.menu-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.2rem;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
nav.menu a{color:var(--text-dim)}
nav.menu a:hover{color:var(--red);text-decoration:none}

@media (max-width:760px){
  .menu-toggle{display:block}
  .menu-links{
    display:none;
    flex-direction:column;
    gap:0;
    text-align:left;
  }
  .menu-links.abierto{display:flex}
  .menu-links a{padding:.6rem 0;border-bottom:1px solid var(--border)}
}

/* --- Banner de cookies --- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:999;
  background:#111;border-top:1px solid var(--red-dark);
  padding:1rem 1.2rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-family:system-ui,sans-serif;font-size:.85rem;color:var(--text-dim);
  box-shadow:0 -4px 16px rgba(0,0,0,0.5);
}
.cookie-banner p{margin:0;flex:1;min-width:220px}
.cookie-actions{display:flex;gap:.6rem;flex-shrink:0}
@media (max-width:600px){
  .cookie-banner{flex-direction:column;align-items:stretch;text-align:center}
  .cookie-actions{justify-content:center}
}

/* --- Páginas legales --- */
.legal-page{max-width:760px;margin:0 auto;font-family:system-ui,sans-serif;color:#ded8d4}
.legal-page h1{color:#f2ede9;font-family:Georgia,serif}
.legal-page h2{color:var(--red);font-size:1.05rem;margin-top:1.8rem}
.legal-page a{word-break:break-word}

.container{max-width:1100px;margin:0 auto;padding:2rem 1rem}
img{max-width:100%;height:auto}

.layout{display:grid;grid-template-columns: 1fr 280px;gap:2rem}
@media (max-width:860px){.layout{grid-template-columns:1fr}}

.grid-cuentos{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.5rem;
}
@media (max-width:600px){
  .grid-cuentos{grid-template-columns:1fr}
  .container{padding:1.2rem .8rem}
}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  display:flex;
  flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(193,18,31,0.25)}
.card img{width:100%;height:170px;object-fit:cover;display:block;filter:saturate(0.8) contrast(1.05)}
.card .body{padding:1rem;flex:1;display:flex;flex-direction:column}
.card h3{margin:.2rem 0 .5rem;font-size:1.15rem;color:#f2ede9}
.card h3 a{color:inherit}
.card .meta{font-size:.78rem;color:var(--text-dim);font-family:system-ui,sans-serif;margin-bottom:.5rem}
.card p{color:var(--text-dim);font-size:.92rem;flex:1}
.card .leer{margin-top:.6rem;font-weight:bold;font-family:system-ui,sans-serif;font-size:.85rem}
.badge{
  display:inline-block;
  background:var(--red-dark);
  color:#fff;
  font-family:system-ui,sans-serif;
  font-size:.7rem;
  padding:.15rem .5rem;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.sidebar .box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.2rem;
  margin-bottom:1.5rem;
}
.sidebar h4{margin-top:0;color:var(--red);font-family:system-ui,sans-serif;text-transform:uppercase;font-size:.85rem;letter-spacing:1px}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{padding:.35rem 0;border-bottom:1px dashed var(--border);font-size:.92rem}
.sidebar li:last-child{border-bottom:none}

.paginacion{display:flex;gap:.5rem;justify-content:center;margin-top:2rem;font-family:system-ui,sans-serif}
.paginacion a, .paginacion span{
  padding:.5rem .9rem;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);
}
.paginacion a:hover{border-color:var(--red);color:var(--red);text-decoration:none}
.paginacion .activa{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}

.cuento-single{max-width:760px;margin:0 auto}
.cuento-single .imagen-cabecera{width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin-bottom:1.5rem;border:1px solid var(--border)}
.cuento-single h1{font-size:2rem;color:#f2ede9;margin-bottom:.3rem}
.cuento-single .meta{font-family:system-ui,sans-serif;color:var(--text-dim);font-size:.85rem;margin-bottom:1.5rem}
.cuento-single .contenido{font-size:1.12rem;color:#ded8d4;white-space:pre-line}
@media (max-width:600px){
  .cuento-single h1{font-size:1.5rem}
  .cuento-single .contenido{font-size:1rem}
}

/* Tarjeta destacada de portada: apilar en pantallas pequeñas */
@media (max-width:600px){
  .card[style*="flex-direction:row"]{flex-direction:column !important}
  .card[style*="flex-direction:row"] img{width:100% !important}
}

.footer{
  border-top:1px solid var(--border);
  text-align:center;
  padding:2rem 1rem;
  color:var(--text-dim);
  font-family:system-ui,sans-serif;
  font-size:.85rem;
}

.search-box{display:flex;gap:.4rem}
.search-box input{flex:1;padding:.5rem;background:#0e0e10;border:1px solid var(--border);color:var(--text);border-radius:6px;font-family:system-ui,sans-serif}
.search-box button{padding:.5rem .8rem;background:var(--red-dark);border:none;color:#fff;border-radius:6px;cursor:pointer}

.contador-visitas{
  text-align:center;
  font-family:system-ui,sans-serif;
  font-size:.85rem;
  color:var(--text-dim);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem;
  margin-bottom:1.5rem;
}

/* --- ESTILOS ADMIN --- */
.admin-wrap{max-width:960px;margin:0 auto;padding:2rem 1rem;font-family:system-ui,sans-serif}
.admin-wrap table{width:100%;min-width:520px;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border)}
.admin-wrap{overflow-x:auto}
@media (max-width:640px){
  .admin-wrap > div[style*="justify-content:space-between"]{flex-direction:column;align-items:flex-start !important;gap:.6rem}
}
.admin-wrap th,.admin-wrap td{padding:.6rem .8rem;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem}
.admin-wrap th{background:#1c1a20;color:var(--text-dim);text-transform:uppercase;font-size:.75rem}
.admin-wrap input[type=text], .admin-wrap textarea, .admin-wrap select, .admin-wrap input[type=date], .admin-wrap input[type=password]{
  width:100%;padding:.6rem;background:#0e0e10;border:1px solid var(--border);color:var(--text);border-radius:6px;margin-bottom:1rem;font-family:system-ui,sans-serif;
}
.admin-wrap textarea{min-height:260px}
.btn{display:inline-block;padding:.55rem 1rem;background:var(--red-dark);color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:system-ui,sans-serif;font-size:.9rem}
.btn:hover{background:var(--red);color:#fff;text-decoration:none}
.btn-danger{background:#5a0000}
.btn-danger:hover{background:#8a0000}
.alerta{padding:.8rem 1rem;border-radius:6px;margin-bottom:1rem;font-family:system-ui,sans-serif;font-size:.9rem}
.alerta-ok{background:#123c1c;color:#7CFC00;border:1px solid #1e5c2c}
.alerta-error{background:#3c1212;color:#ff6b6b;border:1px solid #5c1e1e}