/* ==========================================================================
   tema amarillo para las zonas de guías (salud / programación)
   Se carga DESPUÉS de zona.css, así que manda.
   ========================================================================== */

:root{
  --bg:#ffd400; --bg2:#ffdf33;
  --card:#fffbe8; --card2:#eef2d2;
  --line:#141414;
  --txt:#141414; --mut:#4a4a4a;
  --acc:#141414; --acc2:#e0361b;
  --ok:#1f7a3d; --warn:#a3480b; --cn:#141414;
}

body{background:var(--bg);color:var(--txt)}

/* cabecera */
.top{background:var(--bg);border-bottom:3px solid #141414}
.brand{font-weight:900;letter-spacing:-.02em;text-transform:lowercase}
.brand .cn{background:#141414;color:#ffd400;border-radius:999px;padding:1px 8px}
.top nav a, .top .nav a{color:#141414;font-weight:700}

/* migas y cabecera de zona */
.crumbs{color:#4a4a4a;font-size:14px}
.crumbs a{color:#141414;font-weight:700}
.kicker{
  display:inline-block;background:#141414;color:#ffd400;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:11.5px;padding:6px 12px;border-radius:999px;margin-bottom:14px;
}
.zone-head h1{font-weight:900;letter-spacing:-.03em;line-height:1.05}
.zone-head p{font-size:17.5px;color:#2c2c2c}

/* botones */
.btn{
  border:3px solid #141414;border-radius:14px;background:#fffbe8;color:#141414;
  font-weight:800;box-shadow:4px 4px 0 #141414;transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #141414}
.btn.primary{background:#141414;color:#ffd400}

/* bloques de contenido */
.caja, .art, .tip, .trampa, .aviso-medico, .nota, .seguridad{
  background:#fffbe8;border:4px solid #141414;border-radius:18px;
  box-shadow:7px 7px 0 #141414;padding:22px 24px;
}
.art h2, .art h3, .caja h2, .caja h3{font-weight:900;letter-spacing:-.02em}
.art p, .caja p, .art li, .caja li{font-size:17px;line-height:1.65}
.art p{margin:0 0 14px}
.lista li{margin-bottom:9px}
.ej{background:#fff;border-left:4px solid #141414;padding:10px 14px;border-radius:0 10px 10px 0;color:#333}
.aviso-medico{border-left:8px solid #e0361b}

/* pie */
footer{background:#141414;color:#ffd400;border-top:3px solid #141414}
footer a{color:#ffd400;font-weight:700}

/* enlace de vuelta */
a{color:#141414}
.art a, .caja a{color:#b3311c;font-weight:700}


/* bloque de la rutina dentro del artículo */
.rutina-caja{
  background:#fffbe8;border:3px solid #141414;border-radius:18px;
  box-shadow:8px 8px 0 #141414;padding:22px 24px;margin:26px 0;
}
.rutina-caja h2{font-size:22px;margin:0 0 8px}
.rutina-mini{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 16px}
.rutina-mini img{width:76px;height:76px;object-fit:contain;background:#fff;border:2px solid #141414;border-radius:12px;padding:4px}
.rutina-caja .btn{display:inline-block;background:#141414;color:#ffd400;text-decoration:none;
  font-weight:800;padding:11px 18px;border-radius:12px;border:3px solid #141414;box-shadow:4px 4px 0 #141414}
.rutina-caja .btn:hover{background:#000}
html[data-tema="noche"] .rutina-caja{background:#161b26;border-color:#1f2937;box-shadow:none;color:#e8eef7}
html[data-tema="noche"] .rutina-caja h2{color:#fff}
html[data-tema="noche"] .rutina-mini img{background:#0e1421;border-color:#1f2937}
html[data-tema="noche"] .rutina-caja .btn{background:linear-gradient(to right,#00f2fe,#4facfe);color:#06121f;border:0;box-shadow:none}