/* Clic Fácil — web de la serie. Paleta y letras de marca/guia-de-marca.md (§ 3 y § 4): tonos apagados de cine,
   ni blanco ni negro puros; Inter Black para títulos, ExtraBold para lemas y lecciones, SemiBold para el resto. */

@font-face { font-family: "Inter"; src: url("../fuentes/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/Inter-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/Inter-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fuentes/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  /* base de marca */
  --noche: #1e1e24;
  --tinta: #16151a;
  --crema: #f2ece0;
  --crema-suave: #cdc5b6;   /* texto secundario: ≥ 7:1 sobre Noche */
  --papel-tapiz: #5c6354;
  --madera: #6b4a2e;
  --repisa: #5c4030;
  --luz: #ffd2a1;
  --frio: #8aa9c9;
  --rojo: #a8473d;
  --verde: #8fae6a;
  --ocre: #c79a48;
  /* tintes de sección (guía § 3): Episodios azul rulo · Lecciones verde cactus · Don Anzuelo vino · Detrás de escena madera */
  --rulo: #3d5a80;
  --cactus: #5f7d45;
  --vino: #5c2534;
  --tarjeta: #26252d;
  --linea: #3d3b46;
  --radio: 14px;
  --sombra: 0 2px 4px rgb(22 21 26 / .35), 0 12px 32px rgb(22 21 26 / .45);
  --letra: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --letra-titulo: "Inter", "Segoe UI Black", "Arial Black", system-ui, sans-serif;
  --letra-cartel: "Anton", "Arial Narrow", "Inter", sans-serif;
  --barra: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background-color: var(--noche); color: var(--crema);
  font: 600 1.0625rem/1.6 var(--letra);
  /* papel tapiz del cuarto: rayas verticales muy suaves, como en los pósters */
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 34px, rgb(22 21 26 / .10) 34px 68px);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--frio); text-underline-offset: 3px; }
a:hover { color: var(--luz); }
:focus-visible { outline: 3px solid var(--luz); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 900; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 5.2vw, 2.6rem); text-transform: uppercase; letter-spacing: .04em; }
h3 { font-size: 1.15rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.envoltura { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .envoltura { padding: 0 24px; } }
.verde { color: var(--verde); }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--luz); color: var(--tinta); font-weight: 800; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font: 800 1rem/1.2 var(--letra); text-decoration: none; cursor: pointer; text-align: center;
}
.boton-ocre { background: var(--ocre); color: var(--tinta); }
.boton-ocre:hover { background: var(--luz); color: var(--tinta); }
.boton-borde { background: transparent; color: var(--crema); border-color: var(--crema-suave); }
.boton-borde:hover { border-color: var(--luz); color: var(--luz); }

/* ---------- barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 20; background: rgb(30 30 36 / .94); border-bottom: 1px solid var(--linea); }
@supports (backdrop-filter: blur(6px)) { .barra { background: rgb(30 30 36 / .82); backdrop-filter: blur(8px); } }
.barra-fila { display: flex; align-items: center; gap: 12px; min-height: var(--barra); }
/* El logo vóxel no baja de 240 px (guía § 2): más chico se escribe CLIC FÁCIL en Inter Black */
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--crema); text-decoration: none; font: 900 1.2rem/1 var(--letra-titulo); letter-spacing: .08em; white-space: nowrap; }
.marca:hover { color: var(--crema); }
.marca svg { width: 18px; height: 22px; flex: none; }
.menu-boton { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 10px; border: 2px solid var(--linea); background: transparent; color: var(--crema); cursor: pointer; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.hamburguesa { position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: -6px; }
.hamburguesa::after { top: 6px; }
.menu-boton[aria-expanded="true"] .hamburguesa { background: transparent; }
.menu-boton[aria-expanded="true"] .hamburguesa::before { top: 0; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .hamburguesa::after { top: 0; transform: rotate(-45deg); }
.menu-boton[aria-expanded="true"] { border-color: var(--ocre); }
.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--noche); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); }
.menu:not(.abierto) { display: none; }
.menu ul { list-style: none; display: grid; padding: 8px 16px 16px; }
.menu a { display: block; padding: 12px 4px; color: var(--crema); text-decoration: none; font-weight: 800; border-bottom: 1px solid var(--linea); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ocre); }
.idiomas { display: flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--linea); border-radius: 999px; }
.idiomas button { min-width: 44px; min-height: 38px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--crema-suave); font: 900 .85rem var(--letra); letter-spacing: .06em; cursor: pointer; }
.idiomas button[aria-pressed="true"] { background: var(--ocre); color: var(--tinta); }
.idiomas button:hover:not([aria-pressed="true"]) { color: var(--crema); }
@media (max-width: 379px) {
  .barra-fila { gap: 8px; }
  .marca { font-size: 1rem; letter-spacing: .05em; }
  .idiomas button { min-width: 36px; padding: 4px 6px; }
}
@media (min-width: 980px) {
  .menu-boton { display: none; }
  .menu, .menu:not(.abierto) { display: block; position: static; margin-left: auto; background: none; border: 0; box-shadow: none; }
  .menu ul { display: flex; gap: 4px; padding: 0; }
  .menu a { padding: 8px 10px; border: 0; border-radius: 8px; font-size: .95rem; color: var(--crema-suave); }
  .menu a:hover { color: var(--crema); background: rgb(242 236 224 / .06); }
}
html:not([data-js]) .hero-poster { display: none; }

/* ---------- portada (póster de la temporada) ---------- */
.hero-poster img { width: 100%; background: var(--tinta); aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 760px) {
  .hero-poster { display: block; max-width: 1180px; margin: 24px auto 0; padding: 0 24px; }
  .hero-poster img { aspect-ratio: 16 / 9; border-radius: var(--radio); box-shadow: var(--sombra); }
}
.hero-info { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 56px; }
@media (min-width: 900px) { .hero-info { grid-template-columns: 1.25fr 1fr; align-items: start; gap: 40px; padding-top: 36px; } }
.eyebrow { font: 900 .8rem/1.3 var(--letra-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--ocre); margin-bottom: 10px; }
.hero h1 { font-size: clamp(2rem, 6.4vw, 3.3rem); letter-spacing: -.01em; }
.hero h1 .verde { display: inline-block; }
.bajada { margin-top: 16px; max-width: 60ch; color: var(--crema-suave); font-size: 1.1rem; }
.bajada strong { color: var(--crema); font-weight: 800; }
.acciones { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* tarjeta «Próximo episodio»: entrada de cine con borde ocre */
.proximo { position: relative; padding: 22px 22px 20px; border: 2px solid var(--ocre); border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra); }
.proximo::before, .proximo::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--noche); border: 2px solid var(--ocre); }
.proximo::before { left: -11px; clip-path: inset(0 0 0 50%); }
.proximo::after { right: -11px; clip-path: inset(0 50% 0 0); }
.proximo-titulo { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ocre); }
.proximo-ep { margin-top: 12px; font: 900 1.6rem/1.15 var(--letra-titulo); }
.proximo-gancho { margin-top: 6px; font-weight: 800; font-size: 1.1rem; }
.proximo-fecha { margin-top: 14px; color: var(--crema-suave); }
.proximo-fecha time { color: var(--crema); font-weight: 800; }
.proximo-local { color: var(--crema-suave); font-size: .95rem; }
.cuenta { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.cuenta-etiqueta { font: 900 .78rem var(--letra-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-suave); }
.cuenta-valor { font: 400 2rem/1 var(--letra-cartel); letter-spacing: .03em; color: var(--luz); font-variant-numeric: tabular-nums; }
.proximo .enlace-ep { display: inline-block; margin-top: 14px; font-weight: 800; }

/* ---------- secciones ---------- */
.seccion { padding: 64px 0; scroll-margin-top: var(--barra); }
.seccion-cabeza { max-width: 760px; margin-bottom: 32px; }
.seccion-cabeza p { margin-top: 12px; color: var(--crema-suave); font-size: 1.08rem; }
.tinte-rulo, .tinte-cactus, .tinte-vino, .tinte-madera {
  background-color: var(--noche);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 34px, rgb(22 21 26 / .12) 34px 68px);
  border-top: 1px solid rgb(242 236 224 / .06); border-bottom: 1px solid rgb(22 21 26 / .6);
}
.tinte-rulo { background-color: color-mix(in srgb, var(--rulo) 26%, var(--noche)); }
.tinte-cactus { background-color: color-mix(in srgb, var(--cactus) 24%, var(--noche)); }
.tinte-vino { background-color: color-mix(in srgb, var(--vino) 45%, var(--noche)); }
.tinte-madera { background-color: color-mix(in srgb, var(--madera) 30%, var(--noche)); }

/* ---------- elenco ---------- */
.elenco { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 1000px) { .elenco { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.personaje figure { margin: 0; height: 100%; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: var(--tarjeta); box-shadow: var(--sombra); }
.personaje img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--tinta); }
.personaje figcaption { padding: 14px 14px 16px; display: grid; gap: 4px; }
.personaje h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .05em; }
.personaje-frase { font-weight: 800; color: var(--luz); }
.personaje-rol { color: var(--crema-suave); font-size: .95rem; line-height: 1.45; }
.personaje.villano figure { background: color-mix(in srgb, var(--vino) 55%, var(--tarjeta)); }
.personaje.villano .personaje-frase { color: #e7b9a1; }

/* ---------- episodios ---------- */
.episodios { list-style: none; display: grid; gap: 18px; }
@media (min-width: 680px) { .episodios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .episodios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.episodio { scroll-margin-top: calc(var(--barra) + 16px); }
.episodio article { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.episodio[data-estado="proximo"] article { border: 2px solid var(--ocre); }
.episodio:target article { outline: 3px solid var(--luz); outline-offset: 3px; }
.episodio-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.placa { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ocre); color: var(--tinta); font: 900 .8rem/1.3 var(--letra-titulo); letter-spacing: .1em; text-transform: uppercase; }
.placa.especial { background: var(--verde); }
.estado { font: 900 .74rem/1.2 var(--letra-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--crema-suave); text-align: right; }
.episodio[data-estado="disponible"] .estado { color: var(--verde); }
.episodio[data-estado="proximo"] .estado { color: var(--ocre); }
.episodio h3 { font-size: 1.55rem; text-transform: uppercase; letter-spacing: .02em; }
.episodio-gancho { font-weight: 800; font-size: 1.08rem; color: var(--crema); }
.episodio-corto { color: var(--crema-suave); font-size: .98rem; line-height: 1.5; }
.episodio-villano { font-weight: 800; font-size: .92rem; color: #e7b9a1; }
.episodio-fecha { margin-top: auto; padding-top: 6px; color: var(--crema-suave); font-size: .92rem; }
.episodio-fecha time { color: var(--crema); font-weight: 800; }
/* la tarjeta LECCIÓN del episodio: borde verde lección */
.leccion { padding: 12px 14px; border: 2px solid var(--verde); border-radius: 10px; background: rgb(143 174 106 / .08); }
.leccion-etiqueta { font: 900 .72rem/1.2 var(--letra-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--verde); margin-bottom: 4px; }
.leccion-texto { font-weight: 800; line-height: 1.4; }
.aviso-error { padding: 16px; border: 2px solid var(--rojo); border-radius: 10px; background: rgb(168 71 61 / .12); font-weight: 800; }

/* ---------- calendario: tablero de letras con marco de madera ---------- */
.calendario-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.segmentado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.segmentado-etiqueta { font-weight: 800; color: var(--crema-suave); margin-right: 4px; }
.segmentado button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--linea); background: transparent; color: var(--crema); font: 800 .95rem var(--letra); cursor: pointer; }
.segmentado button[aria-pressed="true"] { border-color: var(--ocre); background: rgb(199 154 72 / .16); }
.tablero { padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #7a5536, var(--madera) 40%, var(--repisa)); box-shadow: var(--sombra), inset 0 1px 0 rgb(255 210 161 / .25); }
.cartelera-marco { overflow-x: auto; border-radius: 6px; background-color: #19181d; background-image: repeating-linear-gradient(180deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 12px); box-shadow: inset 0 2px 10px rgb(0 0 0 / .6); }
.cartelera { width: 100%; border-collapse: collapse; font-family: var(--letra-cartel); letter-spacing: .06em; text-transform: uppercase; }
.cartelera th { padding: 12px 14px 8px; text-align: left; font: 900 .72rem var(--letra-titulo); letter-spacing: .18em; color: var(--ocre); border-bottom: 1px solid rgb(242 236 224 / .12); }
.cartelera td { padding: 10px 14px; vertical-align: top; font-size: 1.15rem; line-height: 1.25; color: var(--crema); border-bottom: 1px dashed rgb(242 236 224 / .10); }
.cartelera tr:last-child td { border-bottom: 0; }
.cartelera .tu-hora { display: block; font: 600 .78rem/1.3 var(--letra); letter-spacing: 0; text-transform: none; color: var(--crema-suave); }
.cartelera .fila-ep { color: var(--crema); }
.cartelera tr.pasado td { color: #a9a294; }
.cartelera tr.pasado .marca-hecho { color: var(--verde); }
.cartelera tr.siguiente td { color: var(--luz); background: rgb(199 154 72 / .10); }
.cartelera .marca-hecho { margin-left: 6px; font-family: var(--letra); }
@media (max-width: 560px) {
  .cartelera thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cartelera tr { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 10px 12px; border-bottom: 1px dashed rgb(242 236 224 / .10); }
  .cartelera td { padding: 0; border: 0; font-size: 1.05rem; }
  .cartelera td.celda-ep { grid-column: 1 / -1; margin-top: 2px; }
}
.nota { margin-top: 14px; color: var(--crema-suave); font-size: .95rem; }

/* ---------- el cactus ---------- */
.cactus-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .cactus-grid { grid-template-columns: 380px 1fr; gap: 48px; } }
.cactus-poster { margin: 0; max-width: 420px; justify-self: center; width: 100%; }
.cactus-poster img { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra); background: var(--tinta); aspect-ratio: 4 / 5; object-fit: cover; }
.cactus-poster img.saludo { aspect-ratio: 1; }
/* la plaquita de la maceta (repisa + letras ocre) */
.placa-maceta { display: inline-flex; align-items: baseline; gap: 12px; margin: 22px 0 18px; padding: 12px 22px; border-radius: 8px; border: 4px solid #9a5b3d; background-color: #3b2417; background-image: linear-gradient(180deg, #4a2e1f, #3b2417); box-shadow: inset 0 -3px 0 rgb(22 21 26 / .35), var(--sombra); }
.placa-etiqueta { font: 900 .8rem var(--letra-titulo); letter-spacing: .16em; text-transform: uppercase; color: #e9dcc6; }
.placa-nombre { font: 400 clamp(2.4rem, 8vw, 3.4rem)/1 var(--letra-cartel); letter-spacing: .08em; color: var(--luz); text-shadow: 0 2px 0 rgb(22 21 26 / .55); }
.cactus-fase { font-size: 1.1rem; max-width: 60ch; }
.pasos { list-style: none; display: grid; gap: 10px; margin: 22px 0; counter-reset: paso; }
@media (min-width: 560px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos li { counter-increment: paso; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--linea); background: rgb(22 21 26 / .35); }
.pasos li::before { content: counter(paso); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--linea); color: var(--crema); font: 900 .85rem var(--letra-titulo); }
.pasos li.hecho::before { content: "✓"; background: var(--verde); color: var(--tinta); }
.pasos li[aria-current="step"] { border-color: var(--ocre); }
.pasos li[aria-current="step"]::before { background: var(--ocre); color: var(--tinta); }
.paso-nombre { font: 900 .95rem var(--letra-titulo); text-transform: uppercase; letter-spacing: .06em; }
.paso-fecha { display: block; margin-top: 4px; color: var(--crema-suave); font-size: .92rem; }
.cactus-mascota { color: var(--crema-suave); }

/* ---------- redes ---------- */
.redes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.red { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--linea); background: rgb(22 21 26 / .35); color: var(--crema); text-decoration: none; }
.red:hover { border-color: var(--ocre); color: var(--crema); }
.red-nombre { font: 900 1rem var(--letra-titulo); }
.red-usuario { color: var(--crema-suave); font-size: .88rem; }
.redes-extra { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 860px) { .redes-extra { grid-template-columns: 1fr 1fr; } }
.hashtags h3, .aviso h3 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); margin-bottom: 8px; }
.hashtags p { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag { padding: 4px 12px; border-radius: 999px; background: rgb(242 236 224 / .08); font-weight: 800; }
.aviso { padding: 16px 18px; border-left: 4px solid var(--rojo); border-radius: 8px; background: rgb(22 21 26 / .4); }
.stickers { margin-top: 16px; font-weight: 800; }

/* ---------- empresas ---------- */
.empresas-caja { display: grid; gap: 14px; justify-items: start; padding-top: 8px; padding-bottom: 8px; }
.empresas-caja p:not(.eyebrow) { max-width: 62ch; color: var(--crema-suave); font-size: 1.08rem; }
.empresas-caja .boton { margin-top: 8px; }

/* ---------- consejos ---------- */
.consejos-cabeza { display: grid; gap: 24px; align-items: center; padding: 48px 0 24px; }
@media (min-width: 820px) { .consejos-cabeza { grid-template-columns: 1fr 240px; } }
.consejos-cabeza h1 { font-size: clamp(2rem, 6vw, 3.1rem); text-transform: uppercase; letter-spacing: .03em; }
.consejos-cabeza img { width: 200px; justify-self: center; border-radius: var(--radio); box-shadow: var(--sombra); }
.regla { margin-top: 18px; display: inline-block; padding: 10px 16px; border-radius: 10px; background: rgb(199 154 72 / .14); border: 2px solid var(--ocre); font-weight: 800; }
.consejos { list-style: none; display: grid; gap: 16px; }
@media (min-width: 760px) { .consejos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.consejo { display: grid; gap: 10px; padding: 18px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); }
.consejo-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.consejo-cabeza h2 { font-size: 1.15rem; letter-spacing: .06em; }
.consejo-etiqueta { font: 900 .72rem var(--letra-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--crema-suave); }
.consejo-situacion { font-weight: 800; font-size: 1.05rem; }
.consejo .leccion-texto { font-size: 1.08rem; }
.consejo-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .92rem; color: var(--crema-suave); }
.cai { margin-top: 40px; padding: 22px; border-radius: var(--radio); border: 2px solid var(--verde); background: rgb(143 174 106 / .07); }
.cai h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); text-transform: none; letter-spacing: 0; }
.cai ol { margin-top: 14px; padding-left: 1.4em; display: grid; gap: 8px; }
.cai li::marker { color: var(--verde); font-weight: 900; }
.consejos-acciones { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- pie ---------- */
.pie { padding: 48px 0 40px; border-top: 1px solid var(--linea); background: var(--tinta); }
.pie-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .pie-grid { grid-template-columns: 1.2fr 1fr 1.4fr; align-items: start; } }
.pie-logo { width: 260px; padding: 10px 0; } /* ≥ 240 px y con su área de respeto */
.pie-lema { margin-top: 8px; font-weight: 800; }
.pie nav ul { list-style: none; display: grid; gap: 8px; }
.pie nav a { color: var(--crema); font-weight: 800; }
.pie-legal { display: grid; gap: 6px; color: var(--crema-suave); font-size: .9rem; }

/* ---------- movimiento e impresión ---------- */
@media (prefers-reduced-motion: no-preference) {
  .red, .boton, .episodio article { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
}
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .barra, .pie, .saltar, .consejos-acciones, .consejos-cabeza img { display: none !important; }
  .consejo, .cai { break-inside: avoid; background: #fff; border: 1px solid #999; box-shadow: none; }
  .leccion { border-color: #4d6b2f; background: #fff; }
  .consejo-etiqueta, .consejo-pie, .consejos-cabeza p { color: #333; }
  a { color: #111; }
}
.cai-aviso { margin-top: 20px; }
html:not([data-js]) [data-solo-js] { display: none; }