/* El Traductor de Ingeniería.
   Sale de su propia identidad: la pizarra de sus fotos, el logo «etdi» en slab
   con la e roja, y el amarillo y el magenta de las miniaturas. Lo escrito a
   mano es la letra de marcador, y se usa poco. */

@font-face { font-family: "Zilla Slab"; font-weight: 600; font-display: swap; src: url("/fuentes/zilla-slab-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap; src: url("/fuentes/zilla-slab-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url("/fuentes/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url("/fuentes/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Shantell"; font-weight: 300 800; font-display: swap; src: url("/fuentes/shantell-sans-latin-wght-normal.woff2") format("woff2"); }

:root {
  --pizarra: #343a44;
  --pizarra-honda: #2a2f37;
  --pizarra-clara: #454c58;
  --tiza: #f6f4ee;
  --tiza-suave: #c8ccd3;
  --papel: #fbfaf5;
  --papel-honda: #f2efe6;
  --tinta: #1d2127;
  --tinta-suave: #565d68;
  --linea: #ded9cc;
  --rojo: #cf1f2b;
  --rojo-tiza: #ff7a70;
  /* Un poco más oscuro que el de las miniaturas: sobre crema, el original no
     llegaba al contraste mínimo de 4,5. */
  --magenta: #cc1050;
  --amarillo: #ffdf3f;
  --verde: #14774a;
  --verde-tiza: #5fd69b;
  --azul: #1f5fc4;
  --azul-tiza: #7fb4ff;
  --titulo: "Zilla Slab", Georgia, serif;
  --texto: "Atkinson", system-ui, sans-serif;
  --mano: "Shantell", "Comic Sans MS", cursive;
  --radio: 8px;
  --ancho: 1160px;
}

[data-color="rojo"] { --area: var(--rojo); --area-tiza: var(--rojo-tiza); }
[data-color="verde"] { --area: var(--verde); --area-tiza: var(--verde-tiza); }
[data-color="amarillo"] { --area: #a87f00; --area-tiza: var(--amarillo); }
[data-color="azul"] { --area: var(--azul); --area-tiza: var(--azul-tiza); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.6 var(--texto); }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 3px; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--amarillo); color: var(--tinta); padding: 8px 14px; border-radius: var(--radio); }
.saltar:focus { top: 8px; }
.ancho { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.ancho--lectura { max-width: 860px; }

/* Cabecera */
.logo { font: 700 1.75rem/1 var(--titulo); color: var(--tiza); letter-spacing: -.02em; }
.logo i { font-style: normal; color: var(--rojo-tiza); }
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--pizarra-honda); color: var(--tiza); }
.cabecera__dentro { width: min(100% - 32px, var(--ancho)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.cabecera__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cabecera__nombre { font: 600 1.05rem var(--titulo); color: var(--tiza-suave); }
.cabecera nav ul { display: flex; gap: clamp(12px, 3vw, 28px); }
.cabecera nav a { text-decoration: none; font-size: 1rem; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.cabecera nav a:hover { border-color: var(--tiza-suave); }
.cabecera nav a[aria-current] { border-color: var(--amarillo); }

/* Portada */
.heroe { position: relative; overflow: hidden; color: var(--tiza); background: var(--pizarra) url("/img/pizarra.webp") center / cover; }
.heroe__dentro { position: relative; width: min(100% - 32px, var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px; min-height: min(78vh, 640px); }
.heroe__texto { padding: clamp(40px, 7vw, 84px) 0; align-self: center; position: relative; z-index: 2; }
.heroe__antes { font: 500 1.2rem var(--mano); color: var(--amarillo); margin-bottom: 12px; }
.heroe h1 { font-size: clamp(2.9rem, 7.4vw, 5.4rem); line-height: 1; }
.heroe__bajada { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 34em; margin-top: 20px; color: var(--tiza); }
.heroe__foto { position: relative; align-self: end; }
/* La foto tiene su propia pizarra detrás: se funde por tres lados para que no
   se vea el recuadro. Abajo no, porque ahí la corta el borde del héroe. */
.heroe__foto img {
  width: 100%; max-width: 620px; margin-left: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 24%, #000 80%, transparent 98%), linear-gradient(180deg, transparent 2%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 24%, #000 80%, transparent 98%), linear-gradient(180deg, transparent 2%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.heroe__porques { position: absolute; top: 6%; left: -7%; display: grid; gap: 2px; font: 500 1.15rem var(--mano); color: var(--tiza); transform: rotate(-4deg); }
.heroe__porques span:nth-child(2) { margin-left: 22px; opacity: .85; }
.heroe__porques span:nth-child(3) { margin-left: 44px; opacity: .7; }

.buscador { display: flex; margin-top: 28px; max-width: 520px; background: var(--tiza); border-radius: var(--radio); padding: 5px; }
.buscador input { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 12px; color: var(--tinta); font-size: 1.05rem; }
.buscador input::placeholder { color: var(--tinta-suave); opacity: 1; }
.buscador input:focus { outline: none; }
.buscador:focus-within { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.buscador button { border: 0; border-radius: 5px; padding: 10px 18px; background: var(--amarillo); color: var(--tinta); font-weight: 700; cursor: pointer; }
.buscador button:hover { background: #ffe971; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips a { display: block; padding: 3px 11px; border: 1px solid rgba(246, 244, 238, .45); border-radius: 99px; font-size: .95rem; text-decoration: none; }
.chips a:hover { background: var(--tiza); color: var(--tinta); }

.numeros { background: var(--pizarra-honda); color: var(--tiza-suave); }
.numeros ul { width: min(100% - 32px, var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px 0; }
.numeros b { display: block; font: 700 clamp(1.6rem, 3.6vw, 2.3rem)/1.1 var(--titulo); color: var(--tiza); }

/* Secciones */
.seccion { padding: clamp(52px, 8vw, 92px) 0; }
.seccion--pegada { padding-top: 24px; }
.seccion--papel { background: var(--papel-honda); }
.seccion--pizarra { background: var(--pizarra); color: var(--tiza); }
.seccion--amarilla { background: var(--amarillo); color: var(--tinta); }
.antes { font: 500 1.1rem var(--mano); color: var(--magenta); margin-bottom: 6px; }
.seccion--pizarra .antes, .cabeza .antes { color: var(--amarillo); }
.encabezado { max-width: 680px; margin-bottom: 32px; }
.encabezado > p:not(.antes) { margin-top: 12px; font-size: 1.12rem; }
.encabezado--fila { max-width: none; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; }
.mas { font-weight: 700; color: var(--tinta); }

.boton { display: inline-block; border: 0; border-radius: var(--radio); padding: 12px 22px; background: var(--amarillo); color: var(--tinta); font-weight: 700; text-decoration: none; cursor: pointer; }
.boton:hover { background: #ffe971; }
.boton:disabled { opacity: .6; cursor: default; }
.boton--contorno { background: none; border: 2px solid var(--tinta); margin-top: 18px; }
.boton--contorno:hover { background: var(--tinta); color: var(--papel); }
.boton--centro { display: block; margin: 32px auto 0; }

/* Mapa */
.mapa { margin-top: 8px; }
.mapa__dibujo { width: 100%; }
.mapa__linea { fill: none; stroke: var(--area-tiza); stroke-width: 3; opacity: .62; stroke-linecap: round; }
.mapa__linea--tronco { stroke-width: 6; opacity: 1; }
.mapa__nodo { text-decoration: none; cursor: pointer; }
.mapa__nodo circle { fill: var(--pizarra); stroke: var(--area-tiza); stroke-width: 4; transition: fill .15s; }
.mapa__nodo:hover circle, .mapa__nodo:focus-visible circle { fill: var(--area-tiza); }
.mapa__rotulo { fill: var(--tiza); font: 500 17px var(--mano); }
.mapa__nodo:hover .mapa__rotulo { fill: var(--amarillo); }
.mapa__nodo.visto circle { fill: var(--area-tiza); }
.mapa__lista { display: none; }
.mapa__nota { margin-top: 18px; color: var(--tiza-suave); font-size: .98rem; }

/* Cursos */
.cursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.curso { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.curso:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(29, 33, 39, .12); }
.curso__mini { aspect-ratio: 16 / 9; overflow: hidden; }
.curso__mini img { width: 100%; height: 100%; object-fit: cover; }
.curso__texto { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.curso__tipo { align-self: start; background: var(--tinta); color: var(--papel); font-size: .82rem; font-weight: 700; padding: 1px 8px; border-radius: 4px; }
.curso__tipo--nuevo { background: var(--amarillo); color: var(--tinta); }
.curso strong { font: 700 1.4rem/1.15 var(--titulo); }
.curso__meta { margin-top: auto; padding-top: 8px; color: var(--tinta-suave); font-size: .95rem; }

/* Tarjetas de video */
.grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
.grilla--chica { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.grilla--chica .tarjeta__titulo { font-size: 1rem; }
.tarjeta { min-width: 0; }
.tarjeta__enlace { display: block; text-decoration: none; }
.tarjeta__mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--pizarra-clara); }
.tarjeta__mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.tarjeta__enlace:hover img { transform: scale(1.03); }
.tarjeta__enlace:hover .tarjeta__titulo { text-decoration: underline; text-decoration-color: var(--area); text-decoration-thickness: 2px; }
.tarjeta__dur, .tarjeta__fuera { position: absolute; bottom: 6px; background: rgba(20, 22, 26, .86); color: #fff; font-size: .8rem; padding: 0 6px; border-radius: 4px; }
.tarjeta__dur { right: 6px; }
.tarjeta__fuera { left: 6px; }
.tarjeta__titulo { font: 600 1.13rem/1.22 var(--titulo); margin-top: 10px; overflow-wrap: anywhere; }
.tarjeta__meta { color: var(--tinta-suave); font-size: .92rem; margin-top: 2px; }

/* Frase */
.frases { max-width: 940px; }
.frase-grande { margin: 0; }
.frase-grande p { font: 700 clamp(1.7rem, 4.2vw, 2.9rem)/1.14 var(--titulo); letter-spacing: -.01em; text-wrap: balance; }
.frase-grande footer { margin-top: 16px; font: 500 1.05rem var(--mano); }

/* Quién */
.quien { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: center; max-width: 960px; }
.quien img { width: 100%; border-radius: 50%; }
.quien p:not(.antes) { margin-top: 12px; font-size: 1.12rem; }

.franja__dentro { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.franja__dentro p:not(.antes) { margin-top: 8px; color: var(--tiza-suave); }

/* Cabeza de página interior */
.cabeza { background: var(--pizarra) url("/img/pizarra.webp") center / cover; color: var(--tiza); padding: clamp(36px, 6vw, 64px) 0; }
.cabeza--corta { padding-bottom: 28px; }
.cabeza[data-color] { border-bottom: 6px solid var(--area-tiza); }
.cabeza__bajada { font-size: clamp(1.1rem, 1.9vw, 1.28rem); max-width: 40em; margin-top: 14px; }
.cabeza .boton { margin-top: 22px; }
.cabeza__meta { color: var(--tiza-suave); margin-top: 12px; }
.migas { color: var(--tiza-suave); margin-bottom: 10px; font-size: .98rem; }
.cabeza__partida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 5vw, 56px); align-items: center; }
.cabeza__partida img { border-radius: 50%; width: 100%; }
.progreso { margin-top: 16px; max-width: 440px; }
.progreso__barra { height: 8px; background: rgba(246, 244, 238, .2); border-radius: 9px; overflow: hidden; }
.progreso__barra span { display: block; height: 100%; width: 0; background: var(--amarillo); transition: width .2s; }
.progreso p { font-size: .95rem; margin-top: 4px; color: var(--tiza-suave); }

/* Temas */
.temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tema { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; text-decoration: none; background: #fff; border: 1px solid var(--linea); border-top: 5px solid var(--area); border-radius: var(--radio); transition: transform .15s, box-shadow .15s; }
.tema:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(29, 33, 39, .1); }
.tema h3 { font-size: 1.35rem; }
.tema p { color: var(--tinta-suave); font-size: 1rem; line-height: 1.45; }
.tema__meta { margin-top: auto; padding-top: 8px; font-size: .93rem; font-weight: 700; }
.tema__llevas { color: var(--verde); margin-left: 6px; }

/* Lista de un tema */
.grupo { margin-top: 44px; }
.grupo > h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin-bottom: 14px; }
.grupo__nota { color: var(--tinta-suave); margin: -8px 0 16px; }
.lista { display: grid; gap: 4px; }
.fila { display: grid; grid-template-columns: 34px 176px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: var(--radio); }
.fila:hover { background: var(--papel-honda); }
.fila__n { font: 700 1.25rem var(--titulo); color: var(--tinta-suave); text-align: right; }
.fila__mini { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--pizarra-clara); }
.fila__mini img { width: 100%; height: 100%; object-fit: cover; }
.fila__titulo { display: block; font: 600 1.14rem/1.25 var(--titulo); text-decoration: none; overflow-wrap: anywhere; }
.fila__titulo:hover { text-decoration: underline; }
.fila__titulo b { color: var(--magenta); }
.fila__meta { color: var(--tinta-suave); font-size: .93rem; margin-top: 3px; }
.visto { display: flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--tinta-suave); cursor: pointer; white-space: nowrap; }
.visto input { width: 18px; height: 18px; accent-color: var(--verde); }
.fila.es-visto { opacity: .62; }
.fila.es-visto .fila__n { color: var(--verde); }
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 52px 0 64px; }
.vecinos a { display: block; padding: 14px 18px; background: var(--papel-honda); border-radius: var(--radio); text-decoration: none; }
.vecinos a:last-child:not(:first-child) { text-align: right; }
.vecinos a:hover { background: var(--amarillo); }
.vecinos span { display: block; font-size: .92rem; color: var(--tinta-suave); }
.vecinos a:hover span { color: var(--tinta); }
.vecinos strong { font: 700 1.2rem var(--titulo); }

/* Filtros */
.filtros { margin-top: 18px; display: grid; gap: 12px; }
.filtros__busca input { width: 100%; max-width: 640px; border: 0; border-radius: var(--radio); padding: 13px 16px; background: var(--tiza); color: var(--tinta); font-size: 1.08rem; }
.filtros__busca input::placeholder { color: var(--tinta-suave); opacity: 1; }
.filtros__fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; }
.pastillas input { position: absolute; opacity: 0; }
.pastillas span { display: block; padding: 6px 14px; border: 1px solid rgba(246, 244, 238, .45); border-radius: 99px; cursor: pointer; }
.pastillas input:checked + span { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); font-weight: 700; }
.pastillas input:focus-visible + span { outline: 3px solid var(--tiza); outline-offset: 2px; }
.selector select { padding: 7px 10px; border: 1px solid rgba(246, 244, 238, .45); border-radius: var(--radio); background: var(--pizarra-honda); color: var(--tiza); max-width: 100%; }
.resultado { color: var(--tinta-suave); margin-bottom: 16px; }
.sin-resultados { padding: 28px 0; font-size: 1.1rem; }

/* Damián */
.cita { margin: 22px 0; padding-left: 16px; border-left: 4px solid var(--amarillo); }
.cita p { font: 500 clamp(1.25rem, 2.6vw, 1.55rem)/1.3 var(--mano); }
.cita a { display: inline-block; margin-top: 6px; font-size: .95rem; }
.relato h2 { margin-top: 40px; }
.relato h2:first-child { margin-top: 0; }
.relato > p { margin-top: 12px; font-size: 1.13rem; }
.relato .cita { border-color: var(--magenta); }
.enlace-fuerte { font-weight: 700; }
.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
.idea p { margin-top: 8px; }
.idea h3 { font-size: 1.5rem; }
.idea blockquote { margin: 12px 0 0; font: 500 1.08rem/1.35 var(--mano); color: var(--amarillo); }
.idea blockquote a { text-decoration: none; }
.idea blockquote a:hover { text-decoration: underline; }
.hitos { display: grid; gap: 16px; }
.hitos li { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.hitos__ano { font: 700 1.35rem var(--titulo); color: var(--magenta); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.redes a { display: block; padding: 8px 16px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); font-weight: 700; text-decoration: none; }
.redes a:hover { background: var(--amarillo); }

/* Charlas */
.propuestas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.propuesta { padding: 20px 22px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.propuesta h3 { font-size: 1.35rem; }
.propuesta p { margin: 8px 0 10px; color: var(--tinta-suave); }
.propuesta a { font-weight: 700; color: var(--tinta); }
.antecedentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.antecedente { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; }
.antecedente:hover { border-color: var(--tinta); }
.antecedente img { width: 120px; flex: none; border-radius: 5px; }
.antecedente small { display: block; color: var(--magenta); font-size: .86rem; font-weight: 700; }
.antecedente strong { display: block; font: 600 1.12rem/1.2 var(--titulo); }
.antecedente em { display: block; font-style: normal; color: var(--tinta-suave); font-size: .93rem; margin-top: 2px; }
.formulario-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.formulario-par h2 + p { margin-top: 12px; font-size: 1.1rem; }
.contacto-guia p { margin-top: 14px; }
.contacto-guia a { color: var(--amarillo); }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: var(--papel); color: var(--tinta); padding: clamp(18px, 3vw, 28px); border-radius: var(--radio); }
.campo { grid-column: 1 / -1; display: grid; gap: 4px; min-width: 0; }
.campo--doble { grid-column: auto; }
.campo label { font-weight: 700; font-size: .98rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #a9a496; border-radius: 6px; background: #fff; }
.campo input::placeholder { color: #6a7079; opacity: 1; }
.campo textarea { resize: vertical; }
.trampa { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.consentimiento { grid-column: 1 / -1; display: flex; gap: 8px; align-items: start; font-size: .96rem; cursor: pointer; }
.consentimiento input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--magenta); flex: none; }
.formulario .boton { grid-column: 1 / -1; justify-self: start; }
.formulario__aviso { grid-column: 1 / -1; padding: 10px 12px; border-radius: 6px; font-weight: 700; }
.formulario__aviso[data-tipo="ok"] { background: #e2f4ea; color: #0d5a36; }
.formulario__aviso[data-tipo="error"] { background: #fde7e8; color: #9c1320; }

/* Reproductor */
.reproductor { width: min(100vw - 24px, 1040px); padding: 0; border: 0; border-radius: var(--radio); background: var(--pizarra-honda); color: var(--tiza); overflow: hidden; }
.reproductor::backdrop { background: rgba(14, 16, 19, .86); }
.reproductor__marco { aspect-ratio: 16 / 9; background: #000; }
.reproductor iframe { display: block; width: 100%; height: 100%; border: 0; }
.reproductor__pie { display: flex; align-items: center; gap: 14px; padding: 10px 14px; flex-wrap: wrap; }
.reproductor__titulo { flex: 1 1 240px; font: 600 1.05rem/1.25 var(--titulo); min-width: 0; }
.reproductor__cerrar { border: 1px solid var(--tiza-suave); background: none; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.reproductor__cerrar:hover { background: var(--tiza); color: var(--tinta); }

/* Pie */
.pie { background: var(--pizarra-honda); color: var(--tiza-suave); padding: 44px 0 26px; }
.pie__dentro { width: min(100% - 32px, var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.pie h2 { font: 700 1rem var(--texto); color: var(--tiza); margin-bottom: 8px; letter-spacing: 0; }
.pie li { margin-bottom: 3px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tiza); text-decoration: underline; }
.pie__marca p { margin-top: 8px; }
.pie__nota { width: min(100% - 32px, var(--ancho)); margin: 30px auto 0; padding-top: 16px; border-top: 1px solid var(--pizarra-clara); font-size: .9rem; }

/* Tablet */
@media (max-width: 960px) {
  .grilla, .cursos, .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grilla--chica { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cursos .curso:last-child { grid-column: 1 / -1; }
  .formulario-par { grid-template-columns: 1fr; }
  .heroe__dentro { min-height: 0; }
  .heroe__porques { font-size: 1rem; left: -6px; }
}

/* Teléfono */
@media (max-width: 720px) {
  .cabecera__nombre { display: none; }
  .heroe__dentro { grid-template-columns: 1fr; gap: 0; }
  .heroe__foto { order: -1; margin: 0 -16px; max-height: 320px; overflow: hidden; }
  .heroe__foto img { max-width: none; margin: 0; -webkit-mask-image: linear-gradient(#000 58%, transparent 81%); mask-image: linear-gradient(#000 58%, transparent 81%); -webkit-mask-composite: source-over; mask-composite: add; }
  .heroe__porques { left: 12px; top: 14px; font-size: .92rem; }
  .heroe__porques span:nth-child(2) { margin-left: 12px; }
  .heroe__porques span:nth-child(3) { margin-left: 24px; }
  .heroe__texto { padding-top: 12px; }
  .numeros ul { grid-template-columns: repeat(2, 1fr); }
  .mapa__dibujo { display: none; }
  .mapa__lista { display: grid; gap: 28px; }
  .mapa__lista h3 { font-size: 1.3rem; margin-bottom: 10px; }
  .mapa__lista ol { border-left: 4px solid var(--area-tiza); margin-left: 8px; }
  .mapa__lista li { position: relative; padding: 7px 0 7px 22px; font: 500 1.08rem var(--mano); }
  .mapa__lista li::before { content: ""; position: absolute; left: -12px; top: 12px; width: 20px; height: 20px; border: 4px solid var(--area-tiza); border-radius: 50%; background: var(--pizarra); }
  .mapa__lista a { text-decoration: none; display: block; }
  .quien, .cabeza__partida { grid-template-columns: 1fr; }
  .quien picture, .cabeza__partida picture { max-width: 220px; }
  .cabeza__partida picture { order: -1; }
  .grilla, .temas, .cursos { grid-template-columns: 1fr; }
  .grilla--chica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila { grid-template-columns: 112px minmax(0, 1fr); gap: 10px 12px; padding: 10px 0; align-items: start; }
  .fila__n { display: none; }
  .fila .visto { grid-column: 2; }
  .ideas, .propuestas, .antecedentes { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }
  .campo--doble { grid-column: 1 / -1; }
  .vecinos { grid-template-columns: 1fr; }
  .vecinos a:last-child:not(:first-child) { text-align: left; }
  .antecedente img { width: 96px; }
  .pie__dentro { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

/* Teléfonos: las cinco secciones no entran al lado del logo. El menú pasa a su
   propio renglón, y la cabecera deja de ser fija para no comerse la pantalla. */
@media (max-width: 480px) {
  .cabecera { position: static; }
  .cabecera__dentro { flex-wrap: wrap; gap: 0; min-height: 0; padding-block: 8px 4px; }
  .cabecera__nombre { display: inline; }
  .cabecera nav { width: 100%; }
  .cabecera nav ul { justify-content: space-between; gap: 6px; }
}
@media (max-width: 370px) {
  .cabecera nav a { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}