/* ─── Healthy English · Blog ───────────────────────────────────────
   Reutiliza el sistema visual de las landings (mismas variables).
   Editable sin tocar el generador.
------------------------------------------------------------------ */

:root {
  --mint:#5fd0a6; --mint-deep:#2fae84; --mint-tint:#eafaf3;
  --navy:#2b3349; --navy-light:#3b4762; --navy-tint:#eef0f5;
  --dark:#111827; --text-main:#4b5563; --text-muted:#6b7280;
  --bg-body:#f9fafb; --bg-surface:#fff; --border:#e5e7eb;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
  --radius-md:12px; --radius-lg:20px;
  /* Colores por curso, iguales a los de index.html (const COLORS) */
  --c-5p:#10b981; --c-6p:#f97316; --c-1e:#3b82f6;
  --c-2e:#8b5cf6; --c-3e:#f43f5e; --c-4e:#14b8a6;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg-body); color:var(--text-main); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:'Fraunces',Georgia,serif; color:var(--navy); line-height:1.15; font-weight:700; font-variation-settings:'SOFT' 20,'WONK' 1; letter-spacing:-.015em; }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 5%; }

/* ── Navegación (idéntica a las landings) ── */
nav { background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
/* El relleno NO puede ir en %: un porcentaje se mide contra el padre
   (la barra, ancha) y no contra esta caja, que esta topada a 1080.
   Resultado: cuanto mas ancha la pantalla, menos sitio para el menu
   (888 px utiles a 1920 frente a 969 a 1110) y las palabras se cortaban
   justo en los monitores grandes. Con clamp el tope son 28 px. */
.nav-inner { max-width:1080px; margin:0 auto; padding:18px clamp(16px,4%,28px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:1.3rem; color:var(--navy); text-decoration:none; letter-spacing:-.03em; }
.logo span { color:var(--mint-deep); }
.nav-cta { background:var(--navy); color:#fff; border-radius:100px; padding:10px 20px; font-weight:700; font-size:.9rem; text-decoration:none; white-space:nowrap; }
.nav-cta:hover { background:var(--navy-light); }
.nav-links { display:flex; gap:4px; align-items:center; overflow-x:auto; scrollbar-width:none; flex:1; justify-content:center; }
.nav-links::-webkit-scrollbar { display:none; }
/* 12 y no 14 de lado: con tres botones de idioma en la barra, el
   castellano se quedaba clavado en el limite y cualquier rotulo un poco
   mas largo empezaba a cortarse por los dos extremos. */
.nav-links a { color:var(--text-muted); font-weight:600; font-size:.9rem; text-decoration:none; padding:8px 12px; border-radius:100px; white-space:nowrap; }
.nav-links a:hover { color:var(--navy); background:var(--navy-tint); }
.nav-links a.active { color:var(--mint-deep); background:var(--mint-tint); }
.lang-switch { display:inline-flex; border:1px solid var(--border); border-radius:100px; overflow:hidden; }
.lang-switch a { padding:7px 12px; font-size:.8rem; font-weight:700; color:var(--text-muted); text-decoration:none; }
.lang-switch a.active { background:var(--navy); color:#fff; }
@media (max-width:760px) { .nav-links { justify-content:flex-start; } .logo { font-size:1.1rem; } .nav-cta { padding:9px 16px; } }

/* ── Cabecera del índice ── */
.blog-hero { background:linear-gradient(155deg,#323c54,#1c2233); color:#fff; padding:64px 5% 72px; }
.blog-hero .inner { max-width:1080px; margin:0 auto; }
.blog-hero .crumb { font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:16px; }
.blog-hero .crumb a { color:var(--mint); text-decoration:none; font-weight:600; }
.blog-hero h1 { color:#fff; font-size:2.6rem; letter-spacing:-.03em; margin-bottom:14px; }
.blog-hero h1 span { color:var(--mint); }
.blog-hero p { color:rgba(255,255,255,.78); font-size:1.08rem; max-width:60ch; }
@media (max-width:760px) { .blog-hero h1 { font-size:1.9rem; } .blog-hero { padding:44px 5% 52px; } }

/* ── Filtros por curso ── */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:36px 0 28px; }
.filters button { font-family:'Inter',sans-serif; font-weight:700; font-size:.85rem; padding:9px 16px; border-radius:100px; border:1px solid var(--border); background:#fff; color:var(--text-muted); cursor:pointer; transition:all .18s ease; }
.filters button:hover { border-color:var(--navy); color:var(--navy); }
.filters button.active { background:var(--navy); border-color:var(--navy); color:#fff; }

/* ── Rejilla de artículos ── */
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; padding-bottom:72px; }
.post-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; display:flex; flex-direction:column; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease; }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--mint); }
.post-card .thumb { aspect-ratio:4/3; background:var(--navy-tint) center/cover no-repeat; }
.post-card .body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card h2 { font-size:1.18rem; letter-spacing:-.02em; }
.post-card p { font-size:.93rem; color:var(--text-muted); flex:1; }
.post-card time { font-size:.8rem; color:var(--text-muted); }
.badge { align-self:flex-start; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:100px; color:#fff; }
.empty { padding:60px 0 90px; text-align:center; color:var(--text-muted); }

/* ── Artículo ── */
.post-hero { position:relative; background:var(--navy) center/cover no-repeat; color:#fff; padding:76px 5% 84px; }
.post-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(105deg,rgba(28,34,51,.94) 0%,rgba(28,34,51,.82) 50%,rgba(28,34,51,.6) 100%); }
.post-hero .inner { position:relative; max-width:760px; margin:0 auto; }
.post-hero .crumb { font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:18px; }
.post-hero .crumb a { color:var(--mint); text-decoration:none; font-weight:600; }
.post-hero h1 { color:#fff; font-size:2.5rem; letter-spacing:-.03em; margin:14px 0 16px; }
.post-hero .meta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.88rem; color:rgba(255,255,255,.7); }
@media (max-width:760px) { .post-hero h1 { font-size:1.75rem; } .post-hero { padding:48px 5% 56px; } }

.post-body { max-width:720px; margin:0 auto; padding:56px 5% 40px; font-size:1.06rem; }
/* Los apartados van envueltos en <section>, así que los párrafos ya no son
   hijos directos de .post-body. Hay que contemplar los dos casos. */
.post-body > p,
.post-body > section > p { margin-bottom:1.15em; }
/* Bandera a la derecha, no justificado.
   El justificado se quitó el 30 de agosto de 2026 porque delataba un
   defecto real: el navegador no tiene motor de justificación como una
   imprenta, así que para cuadrar el margen derecho estira los espacios
   entre palabras. En un párrafo largo apenas se nota; en uno de una
   sola frase hay que estirar mucho, y el mismo texto parece escrito
   con otra letra y con otro interlineado. No lo estaba: la medida es
   la misma en todo el artículo.

   Y este blog está escrito a propósito con párrafos muy cortos, muchos
   de una sola línea usados como remate. Justificar es justo lo peor
   que se le puede hacer a ese ritmo.

   Para volver al justificado: text-align:justify; hyphens:auto. */
.post-body { text-align:left; }
.post-body h2, .post-body h3, .post-body .destacado,
.post-body .ficha, .post-body figcaption { text-align:left; hyphens:none; }

.post-body h2 { font-size:1.75rem; letter-spacing:-.02em; margin:2.4em 0 .7em; }
.post-body h3 { font-size:1.3rem; letter-spacing:-.01em; margin:2em 0 .6em; color:var(--navy-light); }
.post-body hr { border:none; border-top:1px solid var(--border); margin:3em 0; }
.post-body strong { color:var(--dark); font-weight:700; }
.post-body em { color:var(--navy-light); }
.post-body ul, .post-body ol { margin:0 0 1.4em 1.3em; }
.post-body li { margin-bottom:.6em; }
.post-body a { color:var(--mint-deep); font-weight:600; }
.post-body blockquote { margin:2.2em 0; padding:26px 30px; background:var(--mint-tint); border-left:4px solid var(--mint-deep); border-radius:0 var(--radius-md) var(--radius-md) 0; font-family:'Fraunces',Georgia,serif; font-size:1.15rem; font-weight:700; color:var(--navy); line-height:1.45; }
.post-body blockquote p { margin:0; }

/* Fuentes: más pequeñas y discretas */
.post-body h2#fuentes + ul, .post-body h2#fonts + ul { font-size:.88rem; color:var(--text-muted); line-height:1.55; }

/* ── Aviso legal del pie de artículo ── */
.post-disclaimer { max-width:720px; margin:0 auto 56px; padding:22px 26px; background:var(--navy-tint); border:1px solid var(--border); border-radius:var(--radius-md); font-size:.86rem; color:var(--text-muted); line-height:1.6; }
.post-disclaimer strong { color:var(--navy); }

/* ── Navegación entre artículos ── */
.post-nav { max-width:720px; margin:0 auto; padding:0 5% 72px; display:flex; gap:14px; flex-wrap:wrap; }
.post-nav a { flex:1; min-width:220px; padding:18px 22px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
.post-nav a:hover { border-color:var(--mint); transform:translateY(-2px); }
.post-nav span { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--text-muted); margin-bottom:5px; }
.post-nav b { font-family:'Fraunces',Georgia,serif; color:var(--navy); font-size:.97rem; }

/* ── CTA final ── */
.post-cta { background:linear-gradient(155deg,#323c54,#1c2233); color:#fff; padding:56px 5%; text-align:center; }
.post-cta h2 { color:#fff; font-size:1.7rem; margin-bottom:12px; letter-spacing:-.02em; }
.post-cta p { color:rgba(255,255,255,.75); max-width:52ch; margin:0 auto 26px; }
.post-cta a { display:inline-block; background:var(--mint-deep); color:#fff; font-weight:700; padding:14px 30px; border-radius:100px; text-decoration:none; }
.post-cta a:hover { background:var(--mint); color:var(--navy); }

/* ── Pie ── */
.footer-legal { display:flex; flex-wrap:wrap; gap:16px; font-size:.82rem; }
.credit { font-size:.78rem; color:rgba(255,255,255,.45); max-width:1080px; margin:22px auto 0; }

/* ═══════════════════════════════════════════════════════════════
   Recorrido del curso (índice del blog)
═══════════════════════════════════════════════════════════════ */
.curso { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 28px 22px; margin-bottom:34px; box-shadow:var(--shadow-sm); }
.curso-head { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.curso-head h2 { font-size:1.15rem; letter-spacing:-.02em; }
.curso-now { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.curso-now .pill { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; background:var(--mint-tint); color:var(--mint-deep); padding:5px 11px; border-radius:100px; }
.curso-now b { font-family:'Fraunces',Georgia,serif; color:var(--navy); font-size:.95rem; }
.curso-bar { width:150px; height:6px; background:var(--navy-tint); border-radius:100px; overflow:hidden; }
.curso-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--mint-deep),var(--mint)); border-radius:100px; transition:width .6s cubic-bezier(.22,1,.36,1); }

.strip-legend { display:flex; flex-wrap:wrap; gap:18px; font-size:.78rem; color:var(--text-muted); margin-bottom:16px; }
.strip-legend span { display:flex; align-items:center; gap:7px; }
.strip-legend .k { width:11px; height:11px; border-radius:50%; display:inline-block; }
.strip-legend .k.pub  { background:var(--mint-deep); }
.strip-legend .k.pend { background:#fff; border:2px solid var(--border); }
.strip-legend .k.now  { background:var(--navy); box-shadow:0 0 0 3px rgba(43,51,73,.18); }

.strip-panel { display:none; }
.strip-panel.active { display:block; }
.strip-meta { font-size:.85rem; color:var(--text-muted); margin-bottom:14px; }
.strip-meta b { font-family:'Fraunces',Georgia,serif; }

/* La linea del curso se desplaza a lo ancho, pero SIN barra a la vista: la
   barrita gris debajo de las paradas era lo unico que desentonaba de la pagina.
   Se sigue moviendo igual: con la rueda del raton (lo traduce el script del
   indice), con el dedo en tactil y con el teclado al tabular por las paradas.
   overscroll-behavior-x evita que al llegar al final el gesto se convierta en
   el "atras" del navegador. */
.strip-track { display:flex; gap:0; overflow-x:auto; padding:22px 2px 8px;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; }
.strip-track::-webkit-scrollbar { display:none; }

.stop { position:relative; flex:0 0 auto; min-width:58px; display:flex; flex-direction:column; align-items:center; text-decoration:none; padding-top:16px; }
/* la línea que une las paradas */
.stop::after { content:''; position:absolute; top:22px; left:50%; width:100%; height:2px; background:var(--border); z-index:0; }
.stop:last-child::after { display:none; }
.stop .w { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-width:13px; height:13px; padding:0 4px; border-radius:100px; font-size:0; background:#fff; border:2px solid var(--border); transition:all .22s ease; }
.stop.pub .w { background:var(--mint-deep); border-color:var(--mint-deep); }
.stop.past.pend .w { background:var(--navy-tint); }
.stop.now .w { background:var(--navy); border-color:var(--navy); box-shadow:0 0 0 4px rgba(43,51,73,.16); min-width:auto; height:auto; padding:4px 10px; font-size:.72rem; font-weight:800; color:#fff; font-family:'Fraunces',Georgia,serif; }
.stop.past::after { background:var(--mint); }
a.stop:hover .w { transform:scale(1.25); }
a.stop.now:hover .w { transform:scale(1.06); }

.stop .tip { position:absolute; bottom:calc(100% - 4px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--navy); color:#fff; font-size:.76rem; line-height:1.35; padding:9px 12px; border-radius:10px; width:210px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:5; }
.stop .tip b { display:block; color:var(--mint); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.stop:hover .tip, .stop:focus .tip { opacity:1; transform:translateX(-50%) translateY(0); }
.stop:first-child .tip { left:0; transform:translateX(0) translateY(6px); }
.stop:first-child:hover .tip { transform:translateX(0) translateY(0); }
.stop:last-child .tip { left:auto; right:0; transform:translateX(0) translateY(6px); }
.stop:last-child:hover .tip { transform:translateX(0) translateY(0); }

@media (max-width:760px) {
  .curso { padding:22px 18px 18px; }
  .curso-bar { width:110px; }
  .stop .tip { width:170px; }
}

/* ═══════════════════════════════════════════════════════════════
   Valoración del artículo
═══════════════════════════════════════════════════════════════ */
.rating { max-width:720px; margin:0 auto 40px; padding:30px 32px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); text-align:center; box-shadow:var(--shadow-sm); }
.rating h2 { font-size:1.25rem; letter-spacing:-.02em; margin-bottom:6px; }
.rating > p { font-size:.92rem; color:var(--text-muted); margin-bottom:18px; }
.hp { position:absolute; left:-9999px; }

.stars { display:flex; justify-content:center; gap:6px; }
.star { font-size:2rem; line-height:1; background:none; border:none; cursor:pointer; color:var(--border); padding:2px 4px; transition:transform .15s ease, color .15s ease; }
.star:hover { transform:scale(1.15); }
.star.on { color:#f5b93b; }
.star:focus-visible { outline:2px solid var(--mint-deep); outline-offset:3px; border-radius:6px; }

.rating-extra { margin-top:18px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.rating-extra label { font-size:.85rem; color:var(--text-muted); }
.rating-extra textarea { width:100%; max-width:460px; font-family:'Inter',sans-serif; font-size:.93rem; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); resize:vertical; color:var(--text-main); background:var(--bg-body); }
.rating-extra textarea:focus { outline:none; border-color:var(--mint-deep); background:#fff; }
.rating-send { font-family:'Inter',sans-serif; font-weight:700; font-size:.9rem; background:var(--navy); color:#fff; border:none; padding:12px 30px; border-radius:100px; cursor:pointer; transition:background .2s ease, transform .15s ease; }
.rating-send:hover { background:var(--navy-light); transform:translateY(-1px); }
.rating-msg { font-family:'Fraunces',Georgia,serif; font-weight:700; color:var(--mint-deep); font-size:1rem; }

@media (max-width:760px) { .rating { padding:24px 18px; } .star { font-size:1.7rem; } }

/* ═══════════════════════════════════════════════════════════════
   Modo familias — el blog es general por defecto.
   El recorrido del curso y el filtro solo aparecen al pedirlo.
═══════════════════════════════════════════════════════════════ */
:root {
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

.gate { margin:38px 0 8px; }
.gate-btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:.92rem;
  color:var(--navy); background:var(--bg-surface);
  border:1px solid var(--border); border-radius:100px;
  padding:11px 20px 11px 16px; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform 160ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
.gate-btn:active { transform:scale(.97); }
.gate-btn:focus-visible { outline:2px solid var(--mint-deep); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .gate-btn:hover { border-color:var(--mint-deep); box-shadow:var(--shadow-md); }
}
.gate-ico {
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:var(--mint-tint); color:var(--mint-deep);
  transition:transform 220ms var(--ease-out), background 200ms ease;
}
.gate-ico svg { width:13px; height:13px; }
.gate-btn[aria-expanded="true"] .gate-ico { transform:rotate(90deg); background:var(--navy); color:#fff; }
.gate-hint { font-size:.83rem; color:var(--text-muted); margin-top:9px; max-width:52ch; }

/* El panel usa grid-template-rows 0fr→1fr: se anima sin medir alturas en JS */
.gate-panel {
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows 260ms var(--ease-out), opacity 200ms ease;
}
/* display:grid ganaría al atributo hidden del navegador: hay que decirlo */
.gate-panel[hidden] { display:none; }
.gate-panel > .gate-panel-in { overflow:hidden; min-height:0; }
.gate-panel.abierto { grid-template-rows:1fr; opacity:1; }
.gate-panel.sin-animar { transition:none; }

/* Sin modo familias no hay nada que filtrar: la rejilla manda */
.gate-panel .filters { margin:22px 0 24px; }

@media (prefers-reduced-motion:reduce) {
  .gate-panel { transition:opacity 200ms ease; }
  .gate-ico, .gate-btn { transition:none; }
  .gate-btn:active { transform:none; }
}

/* ── Rejilla: que una sola tarjeta no quede perdida en el ancho ── */
.post-grid { grid-template-columns:repeat(auto-fill,minmax(300px,380px)); justify-content:start; }

/* ── Recorrido del curso: paradas más legibles ── */
.stop { min-width:64px; }
.stop::after { top:23px; height:3px; }
.stop .w { min-width:15px; height:15px; border-width:2px; }
.stop.pub .w { box-shadow:0 0 0 3px var(--mint-tint); }

/* ═══════════════════════════════════════════════════════════════
   Fuera del modo familias no existe el programa
═══════════════════════════════════════════════════════════════ */
body:not(.es-familia) .post-card .badge { display:none; }
body:not(.es-familia) .post-card .body { padding-top:24px; }
/* El anuncio solo se enseña a quien no es familia: ellos ya nos conocen */
body.es-familia .promo { display:none; }

/* ── Tarjeta: qué unidad se está dando esta semana ── */
.ahora {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
  color:#fff; border-radius:var(--radius-md);
  padding:20px 24px; margin:4px 0 20px;
}
.ahora-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; }
.ahora-k {
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:var(--mint);
}
.ahora-txt b { font-family:'Fraunces',Georgia,serif; font-size:1.22rem; line-height:1.25; color:#fff; }
.ahora-sub { font-size:.82rem; color:rgba(255,255,255,.62); }
.ahora-cta {
  background:var(--mint); color:var(--navy); font-weight:700; font-size:.88rem;
  text-decoration:none; padding:10px 20px; border-radius:100px; white-space:nowrap;
  transition:transform 160ms var(--ease-out), background 200ms ease;
}
.ahora-cta:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) { .ahora-cta:hover { background:#fff; } }
.ahora-no { font-size:.82rem; color:rgba(255,255,255,.5); white-space:nowrap; }

/* ── Anuncio de servicios (solo para quien no es familia) ── */
.promo { margin:16px 0 76px; }
.promo-in {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:38px 36px;
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--mint-deep);
}
.promo h2 { font-size:1.5rem; margin-bottom:12px; }
.promo p { font-size:.98rem; max-width:62ch; margin-bottom:22px; }
.promo-links { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.promo-links a {
  font-size:.87rem; font-weight:700; color:var(--navy);
  text-decoration:none; padding:9px 17px; border-radius:100px;
  background:var(--navy-tint); border:1px solid transparent;
  transition:transform 160ms var(--ease-out), background 180ms ease, border-color 180ms ease;
}
.promo-links a:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .promo-links a:hover { background:var(--mint-tint); border-color:var(--mint-deep); color:var(--mint-deep); }
}
.promo-cta {
  display:inline-block; background:var(--navy); color:#fff;
  font-weight:700; font-size:.92rem; text-decoration:none;
  padding:13px 28px; border-radius:100px;
  transition:transform 160ms var(--ease-out), background 200ms ease;
}
.promo-cta:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) { .promo-cta:hover { background:var(--navy-light); } }
@media (max-width:760px) { .promo-in { padding:28px 22px; } .promo h2 { font-size:1.25rem; } }

@media (prefers-reduced-motion:reduce) {
  .ahora-cta, .promo-links a, .promo-cta { transition:none; }
  .ahora-cta:active, .promo-links a:active, .promo-cta:active { transform:none; }
}

/* El artículo lee la elección guardada en el índice (clase en <html>) */
html:not(.familia-pre) .post-hero .badge,
html:not(.familia-pre) .post-hero .solo-familia { display:none; }

/* display:flex/grid ganan al atributo hidden: hay que neutralizarlos */
.ahora[hidden], .ahora-cta[hidden], .curso-now[hidden] { display:none; }

/* ═══════════════════════════════════════════════════════════════
   Artículo: los apartados de familias solo si se han pedido
═══════════════════════════════════════════════════════════════ */
html:not(.familia-pre) .sec-familia { display:none; }
html.familia-pre .art-gate { display:none; }

.sec { display:block; }
/* El separador anterior a un apartado oculto sobraría */
html:not(.familia-pre) .sec-familia + .sec > hr:first-child { display:none; }

/* ── Bloque final: "¿tienes un hijo aquí?" ── */
.art-gate {
  max-width:720px; margin:8px auto 44px; padding:30px 32px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
  color:#fff; border-radius:var(--radius-lg);
}
.art-gate h2 { color:#fff; font-size:1.3rem; margin-bottom:10px; }
.art-gate p { font-size:.95rem; color:rgba(255,255,255,.75); margin-bottom:20px; }
.art-gate button {
  font-family:'Inter',sans-serif; font-weight:700; font-size:.92rem;
  background:var(--mint); color:var(--navy); border:none;
  padding:13px 26px; border-radius:100px; cursor:pointer;
  transition:transform 160ms var(--ease-out), background 200ms ease;
}
.art-gate button:active { transform:scale(.97); }
.art-gate button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (hover:hover) and (pointer:fine) { .art-gate button:hover { background:#fff; } }
@media (max-width:760px) { .art-gate { padding:24px 22px; margin-inline:5%; } }

/* ── Laterales del artículo: que respiren en pantallas anchas ── */
.post-body img {
  display:block; width:100%; height:auto; border-radius:var(--radius-md);
  margin:2.4em 0 .8em;
}
.post-body figure { margin:2.4em 0 1.6em; }
.post-body figure img { margin:0; }
/* Las fotos verticales no se estiran al ancho de la figura. Una vertical
   —la del vaso con hielo es de 1600x2133— pintada a los 789 px que mide
   la figura en pantalla ancha sale midiendo mas de mil de alto: mas que
   la ventana entera. Y recortarla a banda tampoco vale: una macro
   recortada por el centro se queda sin encuadre y no se reconoce nada.
   Asi que se quedan verticales, en columna estrecha y centradas, foto y
   pie juntos. La marca `alta` la pone el agente de imagenes. */
.post-body figure.alta { width:min(400px,100%); margin-inline:auto; }
/* Tope de seguridad, por si llega una desproporcionada sin marcar: se
   limita el alto y el ancho lo sigue, sin recortar ni deformar. Son 700
   y no menos para que una horizontal normal quepa entera en la figura
   ancha de las pantallas grandes: un 3:2 a 1000 px mide 667 de alto, y
   con el tope mas bajo se quedaba estrechada sin motivo. */
.post-body img { max-height:700px; width:auto; max-width:100%; margin-inline:auto; }
.post-body figcaption {
  font-size:.83rem; color:var(--text-muted); line-height:1.5;
  margin-top:10px; padding-left:2px; border-left:2px solid var(--mint); padding-left:12px;
}
/* En pantallas anchas las imágenes se salen del texto y llenan el vacío */
@media (min-width:1180px) {
  .post-body figure.ancha { width:min(1000px,86vw); margin-inline:calc(50% - min(500px,43vw)); }
  .post-body figure.ancha figcaption { max-width:720px; margin-inline:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .art-gate button { transition:none; }
  .art-gate button:active { transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   ARREGLOS
═══════════════════════════════════════════════════════════════ */

/* 1 · Nav: la página actual se marca con color, no con una píldora */
.nav-links a.active { background:transparent; color:var(--mint-deep); font-weight:700; }
@media (hover:hover) and (pointer:fine) {
  .nav-links a.active:hover { background:var(--mint-tint); }
}

/* 2 · Cabecera del índice: centrada y más contenida.
      Antes el texto ocupaba el 60% izquierdo y dejaba un vacío azul enorme. */
.blog-hero { padding:52px 5% 56px; text-align:center; }
.blog-hero .inner { max-width:760px; }
.blog-hero .crumb { margin-bottom:12px; }
.blog-hero h1 { font-size:2.9rem; text-wrap:balance; margin-bottom:16px; }
.blog-hero p { margin-inline:auto; text-wrap:pretty; font-size:1.05rem; max-width:56ch; }
@media (max-width:760px) {
  .blog-hero { padding:38px 5% 42px; }
  .blog-hero h1 { font-size:1.95rem; }
}

/* 3 · Recorrido: fuera los globos, que el carril con overflow recortaba.
      El texto va en una línea fija bajo el carril, y así también funciona
      al tocar en el móvil, donde el hover no existe. */
.stop .tip { display:none; }
.strip-track { padding:14px 2px 6px; }
.strip-cap {
  min-height:1.5em; margin:10px 2px 2px;
  font-size:.86rem; color:var(--navy); font-weight:600;
  transition:opacity 160ms ease;
}
.strip-cap.vacio { opacity:0; }

/* 4 · Artículo: 360 px muertos a cada lado. El margen izquierdo pasa a
      llevar el índice de apartados, y la columna de texto respira un poco. */
.post-wrap { margin:0 auto; }
.post-body { max-width:840px; font-size:1.08rem; }

/* Todo lo que va bajo el artículo comparte columna con él, o descuadra:
   antes se centraban contra la ventana y el texto no. */
.post-col > .art-gate,
.post-col > .post-disclaimer,
.post-col > .rating,
.post-col > .post-nav { max-width:840px; margin-inline:auto; }

.post-toc { display:none; }
@media (min-width:1240px) {
  /* Tres columnas simétricas: el texto queda centrado en la página de
     verdad, y la columna derecha es el hueco de fichas y destacados. */
  .post-wrap {
    display:grid;
    grid-template-columns:230px minmax(0,840px) 230px;
    gap:44px; justify-content:center; align-items:start;
    padding:0 24px;
  }
  .post-wrap::after { content:''; }
  .post-toc {
    display:block; position:sticky; top:110px;
    max-height:calc(100vh - 150px); overflow-y:auto;
    padding-bottom:8px; margin-top:86px;
  }
  .post-toc[hidden] { display:none; }
  .post-body { padding-left:0; padding-right:0; }
}
/* Sin índice no hay tres columnas: el texto se centra solo */
@media (max-width:1239px) {
  .post-col { max-width:840px; margin-inline:auto; }
}
.post-toc-t {
  font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-muted); margin-bottom:12px;
}
.post-toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--border); }
.post-toc li { margin:0; }
.post-toc a {
  display:block; padding:7px 0 7px 14px; margin-left:-2px;
  border-left:2px solid transparent;
  font-size:.85rem; line-height:1.35; color:var(--text-muted);
  text-decoration:none; transition:color 180ms ease, border-color 180ms ease;
}
@media (hover:hover) and (pointer:fine) { .post-toc a:hover { color:var(--navy); } }
.post-toc a.act { color:var(--navy); font-weight:700; border-left-color:var(--mint-deep); }

/* Las imágenes van entre párrafos, al ancho del texto */
.post-body figure.ancha { width:auto; margin-inline:0; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Índice lateral: los subapartados sangrados y más discretos */
.post-toc li.sub a { padding-left:26px; font-size:.8rem; color:var(--text-muted); }
.post-toc li.sub a.act { color:var(--navy); }

/* Las imágenes se salen un poco del texto: llenan el margen sin romper la
   columna de lectura. Siguen yendo entre párrafos, en el flujo. */
@media (min-width:1240px) {
  .post-body figure { width:calc(100% + 120px); margin-inline:-60px; }
  .post-body figure figcaption { margin-inline:60px; }
}

/* ═══════════════════════════════════════════════════════════════
   Elementos al margen: ficha de estudio y destacado
   La cifra manda: es lo que se lee de un vistazo.
═══════════════════════════════════════════════════════════════ */
.ficha, .destacado { margin:2em 0; }

/* ── Ficha de estudio ── */
.ficha {
  background:var(--navy);
  border-radius:14px;
  padding:18px 18px 16px;
  display:flex; flex-direction:column;
  color:rgba(255,255,255,.62);
  box-shadow:0 10px 24px -12px rgba(43,51,73,.5);
}
.ficha > b {
  font-family:'Inter',sans-serif;
  font-size:.64rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--mint);
  line-height:1.35; margin-bottom:14px;
}
.ficha > span {
  display:flex; align-items:baseline; gap:9px;
  padding:7px 0; border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; line-height:1.3;
}
.ficha > span strong {
  font-family:'Fraunces',Georgia,serif;
  font-size:1.45rem; font-weight:700; color:#fff;
  line-height:1; letter-spacing:-.02em;
  min-width:2.1em; flex:0 0 auto;
}
.ficha > em {
  font-style:normal; font-size:.72rem; line-height:1.4;
  color:rgba(255,255,255,.45);
  margin-top:12px; padding-top:11px;
  border-top:1px solid rgba(255,255,255,.1);
}

/* ── Destacado ── */
.destacado {
  font-family:'Fraunces',Georgia,serif;
  font-weight:600; font-size:1.32rem; line-height:1.22;
  color:var(--navy); letter-spacing:-.02em;
  text-wrap:balance; position:relative;
  padding:22px 0 0; border-top:3px solid var(--mint);
}
.destacado::after {
  content:''; display:block; width:34px; height:3px;
  background:var(--border); margin-top:20px;
}

/* A partir de tablet grande, al margen */
@media (min-width:1100px) {
  .ficha, .destacado { float:right; width:206px; margin:.4em 0 1.6em 2.4em; }
  .post-body h2, .post-body h3, .post-body hr { clear:right; }
}
/* En pantalla ancha se salen al hueco. El desplazamiento nunca supera el
   margen disponible, o aparece scroll horizontal. */
@media (min-width:1400px) {
  .ficha, .destacado { margin-right:-130px; }
}
@media (min-width:1650px) {
  .ficha, .destacado { margin-right:-200px; width:238px; }
}
@media (max-width:1099px) {
  .destacado { font-size:1.42rem; margin-block:2.2em; }
  .ficha { max-width:420px; }
}


/* La zona derecha de la nav iba apiñada: el idioma pegado al menú y el
   WhatsApp pegado al idioma. */
.nav-inner > div:last-child { gap:16px; margin-left:26px; }
.nav-inner > div:last-child .nav-cta { margin-left:0 !important; }
.lang-switch { flex:0 0 auto; }
@media (max-width:760px) {
  /* En movil la separacion generosa no cabe: el grupo derecho se salia */
  .nav-inner { gap:8px; }
  .nav-inner > div:last-child { gap:7px; margin-left:0; flex:0 0 auto; }
  .nav-links { min-width:0; }
  .lang-switch a { padding:6px 9px; }
  .nav-cta { padding:9px 14px; font-size:.85rem; }
}

/* ── Logo con la marca HE, igual que index.html ── */
.logo { display:flex; align-items:center; gap:9px; text-decoration:none; letter-spacing:-.04em; }
.logo-img { height:38px; width:auto; display:block; flex:0 0 auto; }
.logo-text { font-family:'Inter',sans-serif; font-weight:800; font-size:1.24rem; letter-spacing:-.04em; line-height:1; }
.logo-text b { color:var(--mint-deep); font-weight:800; }
.logo-text i { color:var(--navy); font-weight:800; font-style:normal; }
/* En el pie, sobre fondo oscuro */
footer .logo-text i { color:#fff; }
footer .logo-img { filter:brightness(1.08); }
@media (max-width:760px) {
  .logo-img { height:30px; }
  .logo-text { font-size:1.02rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Cabecera del blog: con la marca HE el logo ocupa ~130 px más y
   los enlaces dejaban de caber por debajo de 1040 px, convirtiendo
   el menú en una tira desplazable que se metía bajo el logo.
═══════════════════════════════════════════════════════════════ */
@media (max-width:1040px) {
  .nav-inner { padding:16px 18px; gap:10px; }
  .nav-links { gap:2px; }
  .nav-links a { padding:8px 10px; font-size:.86rem; }
  .nav-inner > div:last-child { gap:10px; margin-left:12px; }
  .lang-switch a { padding:6px 10px; }
  .nav-cta { padding:9px 16px; font-size:.86rem; }
}
@media (max-width:920px) {
  /* Solo la marca: "HealthyEnglish" se lee igual en el pie y en el título */
  .nav-inner .logo-text { display:none; }
  .nav-inner .logo-img { height:34px; }
}


/* Por debajo de ~690 px los cinco enlaces no caben en una fila junto al
   logo. En vez de convertirlos en una tira recortada, el menú baja a su
   propia fila: cabe entero y nada se corta. */
@media (max-width:700px) {
  /* Dos filas: se recorta el alto para que la barra fija no se coma
     media pantalla en el movil. */
  .nav-inner { flex-wrap:wrap; row-gap:2px; padding:10px 14px 6px; }
  .nav-inner .logo { order:1; }
  .nav-inner > div:last-child { order:2; margin-left:auto; }
  .nav-links {
    order:3; flex:1 0 100%; width:100%; justify-content:flex-start;
    gap:2px; padding-bottom:2px;
  }
  .nav-links a { padding:9px 10px; font-size:.85rem; }
}
/* Pantallas de móvil pequeño: se aprieta lo justo para que las cinco
   palabras sigan cabiendo sin recorte. */
@media (max-width:470px) {
  .nav-inner { padding:10px 10px 6px; }
  .nav-links { gap:0; }
  .nav-links a { padding:9px 6px; font-size:.79rem; letter-spacing:-.01em; }
}
/* Los moviles antiguos de 320 px: ultimo apreton */
@media (max-width:365px) {
  .nav-inner { padding:10px 8px 6px; }
  .nav-links a { padding:9px 3px; font-size:.75rem; }
  .nav-cta { padding:8px 12px; font-size:.8rem; }
  .lang-switch a { padding:6px 8px; font-size:.75rem; }
}
/* Si aun así no cupiera (traducciones más largas), el borde se
   desvanece en lugar de cortar la palabra a cuchillo. */
@media (max-width:700px) {
  .nav-links {
    -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PIE DE PAGINA — el mismo que index.html
   El marcado lo genera build-blog.js en {{PIE}}, asi que solo vive
   en un sitio y sale en los dos idiomas.
═══════════════════════════════════════════════════════════════ */
.site-footer { border-top:1px solid rgba(255,255,255,.12); background:var(--navy); color:#fff;
  line-height:1.6; }   /* el body del blog va a 1.65 y el pie de index a 1.6 */
.footer-top { max-width:1200px; margin:0 auto; padding:48px 5% 36px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; font-size:.9rem; }   /* .9rem, igual que index */
/* Identico al de index.html, hasta la fuente */
.footer-brand .foot-logo { font-family:'Plus Jakarta Sans', sans-serif; font-weight:800;
  font-size:1.4rem; color:#fff; text-decoration:none; display:inline-block; margin-bottom:12px; }
.footer-brand .foot-logo span { color:var(--mint); }
.footer-brand p { color:rgba(255,255,255,.6); line-height:1.6; max-width:320px; margin-bottom:16px; }
.foot-social { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.7);
  text-decoration:none; font-weight:600; font-size:.9rem; }
.foot-social:hover { color:var(--mint); }
.foot-social svg { width:20px; height:20px; }
.footer-col h4 { color:#fff; font-family:'Inter',sans-serif; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.07em; font-weight:800; margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0; }
.footer-col a { color:rgba(255,255,255,.7); text-decoration:none; }
.footer-col a:hover { color:var(--mint); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); }
.footer-bottom-inner { max-width:1200px; margin:0 auto; padding:20px 5%;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.footer-legal-links { display:flex; flex-wrap:wrap; gap:16px; }
.footer-legal-links a { color:rgba(255,255,255,.6); text-decoration:none; font-size:.82rem; }
.footer-legal-links a:hover { color:var(--mint); }
.footer-copy { color:rgba(255,255,255,.5); font-size:.82rem; }
/* El credito de la imagen queda justo encima del pie */
.credit { max-width:1080px; margin:0 auto; padding:0 5% 22px;
  font-size:.8rem; color:var(--text-muted); }
@media (max-width:760px) {
  .footer-top { grid-template-columns:1fr; gap:32px; }
  .footer-bottom-inner { flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   AYUDAS DE INGLES
   Las anotaciones que deja el agente `anotador-en`: estructuras
   subrayadas en la version inglesa con su explicacion en castellano
   dentro de data-nota. Las marcas viven en el .md y son texto normal
   hasta que el lector enciende la ayuda; por eso todo lo visual
   cuelga de .ing-on, y una pagina sin el interruptor se lee igual.
   ═══════════════════════════════════════════════════════════════ */

/* La marca. Sin la clase del guion no existe: ni subrayado, ni cursor,
   ni foco. Con JavaScript apagado el texto se queda liso, que es mejor
   que subrayar algo cuyo globo no se va a poder abrir. */
.ing { border-bottom:0; }
.ing-on .ing { border-bottom:2px dotted var(--mint-deep); cursor:help; }
.ing-on .ing:hover, .ing-on .ing:focus-visible { background:var(--mint-tint); }
.ing-on .ing:focus-visible { outline:2px solid var(--mint-deep); outline-offset:2px; }

/* El globo. Uno solo, reutilizado, colocado por el guion. */
.ing-pop { position:fixed; z-index:120; max-width:320px; display:none;
  background:var(--navy); color:#fff; border-radius:12px; padding:11px 14px;
  font-family:'Inter',sans-serif; font-size:.86rem; line-height:1.5;
  box-shadow:var(--shadow-lg); }
.ing-pop.on { display:block; }

/* En papel no hay raton: el subrayado sin globo solo seria ruido. */
@media print {
  .ing-on .ing { border-bottom:0; background:none; }
  .ing-pop { display:none !important; }
}

/* ── Nivel MCER del texto ────────────────────────────────────────
   Es el nivel de lectura del propio articulo, no el de la unidad que se
   da en clase: el temario de 1º de ESO trabaja en A2 y un articulo
   divulgativo en ingles esta muy por encima de eso. Lo asigna quien
   traduce, en el campo `cefr` del frontmatter, y solo lo llevan los
   textos que estan de verdad en ingles.
   Ojo: esta chapa la ve todo el mundo. La de curso no: esa se le
   esconde a quien no ha dicho que tiene un hijo en el programa. */
.cefr { display:inline-block; font-size:.72rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 10px;
  border-radius:100px; white-space:nowrap; }
.post-hero .cefr { margin-left:8px; color:#fff;
  border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.08); }
.post-card .cefr { color:var(--text-muted);
  border:1px solid var(--border); background:var(--bg-body); }
.post-card .chapas { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Aviso de idioma ─────────────────────────────────────────────
   El blog se anuncia en la portada con el titular en castellano y abre
   la version inglesa. Este aviso es lo que evita que eso parezca un
   error: al llegar, ofrece el mismo articulo en el idioma del lector.
   Se va solo a los cinco segundos y se puede cerrar antes. */
.avlang { position:fixed; z-index:130; left:50%; bottom:22px;
  transform:translateX(-50%) translateY(10px); opacity:0;
  display:flex; align-items:center; gap:12px; max-width:min(440px, calc(100vw - 32px));
  background:var(--navy); color:#fff; border-radius:100px; padding:10px 10px 10px 20px;
  box-shadow:var(--shadow-lg); font-size:.9rem; line-height:1.35;
  transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
.avlang.on { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.avlang p { margin:0; }
.avlang a { color:var(--mint); font-weight:700; text-decoration:none; white-space:nowrap; }
.avlang a:hover { text-decoration:underline; }
.avlang button { flex:none; width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.12); color:rgba(255,255,255,.75);
  font-size:15px; line-height:1; display:grid; place-items:center; }
.avlang button:hover { background:rgba(255,255,255,.22); color:#fff; }
@media (max-width:520px) {
  .avlang { left:16px; right:16px; bottom:16px; transform:translateY(10px);
    border-radius:16px; padding:12px 12px 12px 16px; }
  .avlang.on { transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) { .avlang { transition:none; } }
@media print { .avlang { display:none !important; } }