/* ============================================================
   xiexie.es — Zonas informativas (guías)
   Estilos compartidos por /salud/ y /programacion/
   Sin CDN. Paleta «papel y tinta», igual que la portada.
   ============================================================ */

:root{
  --bg:#f6f2ea; --bg2:#efe8dc;
  --card:#fffdf8; --card2:#f4efe5;
  --line:#ded4c5;
  --txt:#221e1a; --mut:#5f574d;
  --acc:#b23a1f; --acc2:#8d2c15;
  --ok:#3f6b46; --warn:#7d4f0c; --cn:#b23a1f;
  --r:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--bg);min-height:100vh;line-height:1.65;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:800px;margin:0 auto;padding:0 20px}

/* ---------- Cabecera ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:#fffdf8;border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;gap:16px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--txt)}
.brand:hover{text-decoration:none}
.brand .cn{font-size:14px;padding:3px 8px;border-radius:9px;
  background:#f6e7e0;
  border:1px solid var(--line);font-weight:700}
.top nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.top nav a{color:var(--mut);font-size:14px;padding:7px 11px;border-radius:10px}
.top nav a:hover{color:var(--txt);background:var(--card);text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--card);color:var(--txt);
  padding:10px 17px;border-radius:12px;font-size:14.5px;font-weight:650;
  cursor:pointer;font-family:inherit;transition:.16s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--acc);text-decoration:none}
.btn.primary{background:var(--acc);color:#fff;border-color:transparent;font-weight:700}
.btn.lang{padding:9px 13px;font-size:14px;white-space:nowrap}
.btn.lang span{font-weight:750}

/* ---------- Cabecera de zona ---------- */
.zone-head{padding:46px 0 30px}
.kicker{color:var(--acc);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-bottom:12px}
.zone-head h1{font-size:40px;line-height:1.14;margin:0 0 14px;letter-spacing:-.7px}
.zone-head .lead{color:var(--mut);font-size:18px;max-width:720px;margin:0}
.zone-head .lead strong{color:var(--txt)}

/* ---------- Aviso informativo ---------- */
.nota{
  margin-top:18px;background:#f4efe5;border:1px solid var(--line);
  color:var(--mut);border-radius:8px;padding:14px 17px;font-size:14px;
}
.nota b{color:var(--txt)}

/* ---------- Listado de articulos ---------- */
.lista{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:26px}
.art{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;transition:.16s;
}
.art:hover{border-color:var(--acc);transform:translateY(-3px)}
.art .tag{
  display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;
  border:1px solid #c3d5c6;background:#e6eee7;color:var(--ok);
  margin-bottom:12px;width:fit-content;font-weight:650;
}
.art h3{margin:0 0 8px;font-size:19px;line-height:1.3}
.art h3 a{color:var(--txt)}
.art h3 a:hover{color:var(--acc);text-decoration:none}
.art p{color:var(--mut);font-size:14.5px;margin:0 0 14px}
.art .meta{margin-top:auto;font-size:12.5px;color:var(--mut)}
.art.prox{opacity:.72}
.art.prox .tag{background:#f7ecd9;color:var(--warn);border-color:#e6d3ab}

/* ---------- Articulo ---------- */
.crumbs{font-size:13px;color:var(--mut);padding-top:26px}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--txt)}
.crumbs span{margin:0 7px;opacity:.6}
article.post{padding:18px 0 20px}
article.post h1{font-size:37px;line-height:1.18;margin:10px 0 14px;letter-spacing:-.6px}
article.post .post-meta{color:var(--mut);font-size:13.5px;margin-bottom:6px}
article.post .cat{display:inline-block;font-size:11.5px;padding:3px 11px;border-radius:999px;
  background:var(--card2);border:1px solid var(--line);color:var(--acc);font-weight:650;margin-bottom:6px}
article.post h2{font-size:25px;margin:38px 0 12px;letter-spacing:-.3px}
article.post h3{font-size:19px;margin:26px 0 8px}
article.post p{margin:0 0 16px}
article.post ul,article.post ol{margin:0 0 16px;padding-left:22px}
article.post li{margin-bottom:7px}
article.post strong{color:var(--txt)}
article.post blockquote{
  margin:22px 0;padding:16px 20px;border-left:3px solid var(--acc);
  background:var(--card);border-radius:0 12px 12px 0;color:var(--mut);
}
.hero{
  border-radius:var(--r);border:1px solid var(--line);padding:34px 26px;margin:22px 0 6px;
  background:var(--card2);
}
.hero .big{font-size:52px;line-height:1;margin-bottom:10px}
.hero p{margin:0;color:var(--mut);font-size:15px}

/* ---------- Ejercicios numerados ---------- */
.ej{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin:0 0 18px;
}
.ej .num{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;background:var(--acc);color:#fff;margin-bottom:12px;
}
.ej h3{margin:0 0 8px;font-size:20px}
.ej > p{color:var(--mut);font-size:14.5px}
.ej ul{margin:0 0 14px;padding-left:20px;font-size:14.5px}
.tip{
  background:#e9f1ea;border:1px solid #c3d5c6;
  border-radius:8px;padding:12px 15px;font-size:14px;color:#2f5738;
}
.tip b{color:#22402a}

/* ---------- Seguridad ---------- */
.seguridad{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.seguridad ul{list-style:none;padding:0;margin:0}
.seguridad li{padding-left:28px;position:relative;margin-bottom:13px}
.seguridad li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

/* ---------- Aviso medico ---------- */
.aviso-medico{
  margin:30px 0 10px;background:#f9efdc;border:1px solid #e3cfa6;
  border-radius:8px;padding:16px 18px;font-size:14px;color:#6b4a12;
}
.aviso-medico b{color:#4a3208}

/* ---------- Autor / cierre ---------- */
.caja{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin-top:30px;
}
.caja h3{margin:0 0 8px;font-size:17px}
.caja p{margin:0;color:var(--mut);font-size:14.5px}

/* ---------- Trampas de casa: tarjetas con icono (SVG propio) ---------- */
.trampas{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:22px 0 8px}
.trampa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.trampa .ti{
  display:flex;width:40px;height:40px;align-items:center;justify-content:center;
  border-radius:9px;background:#f6e7e0;color:var(--acc);margin-bottom:13px;
}
.trampa .ti svg{width:23px;height:23px;display:block}
.trampa b{display:block;font-size:15px;margin-bottom:5px;line-height:1.35}
.trampa span{color:var(--mut);font-size:13.5px;line-height:1.5}

footer{border-top:1px solid var(--line);margin-top:44px;padding:28px 0 46px;color:var(--mut);font-size:13.5px}
footer .wrap{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--mut)}
footer a:hover{color:var(--txt)}

@media(max-width:760px){
  .zone-head{padding:32px 0 22px}
  .zone-head h1{font-size:29px}
  .zone-head .lead{font-size:16px}
  article.post h1{font-size:27px}
  article.post h2{font-size:21px}
  .hero .big{font-size:40px}
  .top nav{width:100%;margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ---------- Titulares con serif: aire editorial, no de plantilla ---------- */
h1,h2,h3,h4{font-family:Georgia,"Iowan Old Style","Times New Roman","Songti SC","SimSun",serif;font-weight:700}
h1{letter-spacing:-.4px}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{letter-spacing:0}