/* Juan Gnarra — sitio personal.
   Un solo sitio con el aspecto del portfolio (la opción A): fondo gris claro,
   tarjetas blancas con su sombra suave, tinta negra, Archivo para el texto y
   Archivo Black para los títulos y el nombre. De lo sencillo a lo profundo: la
   portada es neutra y cada pilar, adentro de su página, conserva el color de su
   mundo, con la misma letra y las mismas tarjetas:
   - el marco (Tano): el gris de la A; en oscuro, casi negro. El reproductor
     acoplado es del marco siempre; la barra y el pie, desde 960 (en el celular la
     barra toma el mundo de la página y el pie es de pizarrón);
   - Pequeño Yo: pizarrón y tiza, como el logo, y el amarillo de sus miniaturas para lo que suena;
   - Delirante: el verde azulado de la tapa y la letra crema;
   - Radio a la Calle: los colores de la radio, rescatados de su hoja de estilos de 2019
     (el turquesa del logo, el menta y el verde de sus secciones) y el pájaro del logo.
   Un mundo es una clase que redefine los tokens semánticos (--fondo, --tinta…):
   los componentes son los mismos y toman el color de donde están. */

/* Las letras viven en el sitio (fonts/, con su licencia OFL), así no dependen de
   Google: Archivo, variable, para el texto y Archivo Black para los títulos.
   Los rangos son los de Google: latin-ext baja solo si una página lo usa. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/archivo-italica-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/archivo-italica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-black-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-black-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* la letra de los titulares de Escritos: la misma Archivo, en su ancho más angosto (62,5 %), para el aire de portal de la revista */
@font-face { font-family: "Archivo Angosta"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/archivo-angosta-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Angosta"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/archivo-angosta-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* la letra de leer: una serif de diario para lo que se lee de corrido (escritos, notas, bajadas); los títulos y la interfaz siguen en Archivo, que es lo de la A */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; size-adjust: 105%; src: url("../fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; size-adjust: 105%; src: url("../fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 105%; src: url("../fonts/newsreader-italica-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 105%; src: url("../fonts/newsreader-italica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* paleta fija: todos los colores del sitio están acá */
  --gris: oklch(0.982 0 0);
  --gris-2: oklch(0.955 0 0);
  --gris-3: oklch(0.925 0 0);
  --gris-filete: oklch(0.89 0 0);
  --grafito: oklch(0.17 0 0);
  --grafito-2: oklch(0.4 0 0);
  --grafito-3: oklch(0.5 0 0);
  --grafito-hover: oklch(0.32 0 0);
  /* el oscuro es un azul de noche, no un negro (pedido de David, 29/10) */
  --noche: oklch(0.3 0.04 255);
  --noche-tarjeta: oklch(0.35 0.042 255);
  --noche-2: oklch(0.33 0.04 255);
  --noche-3: oklch(0.39 0.042 255);
  --noche-filete: oklch(0.45 0.04 255);
  --noche-tinta: oklch(0.97 0.006 255);
  --noche-tinta-2: oklch(0.88 0.015 255);
  --noche-tinta-3: oklch(0.81 0.02 255);
  --noche-hover: oklch(0.9 0.01 255);
  --amarillo: oklch(0.87 0.155 92);
  --amarillo-hover: oklch(0.92 0.13 95);
  --amarillo-tinta: oklch(0.2 0.03 92);
  --amarillo-noche: oklch(0.87 0.155 92 / 0.34);
  --pizarron: oklch(0.185 0.012 215);
  --pizarron-2: oklch(0.225 0.014 215);
  --pizarron-3: oklch(0.27 0.015 215);
  --pizarron-filete: oklch(0.34 0.014 215);
  --tiza: oklch(0.955 0.012 90);
  --tiza-2: oklch(0.82 0.012 215);
  --tiza-3: oklch(0.68 0.012 215);
  --libro: oklch(0.42 0.035 205);
  --libro-2: oklch(0.36 0.035 205);
  --libro-3: oklch(0.31 0.035 205);
  --libro-filete: oklch(0.54 0.03 205);
  --papel: oklch(0.95 0.02 85);
  --papel-2: oklch(0.88 0.02 200);
  --papel-3: oklch(0.82 0.02 200);
  --papel-hover: oklch(0.99 0.01 85);
  --ocre: oklch(0.82 0.11 75);
  --radio-turquesa: oklch(0.631 0.106 183);
  --radio-oscuro: oklch(0.48 0.085 184);
  --radio-oscuro-hover: oklch(0.42 0.08 184);
  --radio-menta: oklch(0.884 0.063 181);
  --radio-verde: oklch(0.493 0.093 157);
  --radio-fondo: oklch(0.99 0.005 185);
  --radio-fondo-2: oklch(0.965 0.018 183);
  --radio-fondo-3: oklch(0.93 0.032 182);
  --radio-filete: oklch(0.87 0.03 183);
  --radio-tinta: oklch(0.22 0.02 195);
  --radio-tinta-2: oklch(0.4 0.025 195);
  --radio-tinta-3: oklch(0.5 0.025 195);
  --radio-noche: oklch(0.31 0.035 220);
  --radio-noche-2: oklch(0.36 0.037 220);
  --radio-noche-3: oklch(0.41 0.04 220);
  --radio-noche-cartela: oklch(0.43 0.06 190);
  --radio-noche-filete: oklch(0.47 0.035 220);
  --radio-noche-tinta-2: oklch(0.89 0.015 200);
  --radio-noche-tinta-3: oklch(0.81 0.02 200);
  --radio-claro: oklch(0.76 0.1 181);
  --radio-claro-hover: oklch(0.82 0.09 181);
  /* el violeta de la revista (la opción C), para Escritos, y el verde azulado de
     la tapa de Delirante con un punto más de color, para que se lea como color */
  --violeta: oklch(0.5 0.16 285);
  --violeta-hondo: oklch(0.42 0.15 285);
  --violeta-claro: oklch(0.76 0.1 285);
  --libro-acento: oklch(0.46 0.075 205);
  --libro-acento-claro: oklch(0.8 0.07 200);
  --blanco: oklch(1 0 0);
  --negro: oklch(0 0 0);
  --rojo: oklch(0.55 0.2 27);
  --naranja: oklch(0.78 0.14 40);
  --kawsay: oklch(0.5 0.19 28);
  --kawsay-tinta-2: oklch(0.95 0.02 28);
  --kawsay-tinta-3: oklch(0.92 0.03 28);
  --velo: oklch(0.1 0.01 215 / 0.18);
  --velo-suave: oklch(0.1 0.01 215 / 0.05);
  --velo-fuerte: oklch(0.1 0.01 215 / 0.4);
  --gris-boton: oklch(0.5 0 0 / 0.14);
  --gris-riel: oklch(0.5 0 0 / 0.2);
  --vidrio-claro: oklch(1 0 0 / 0.86);
  --vidrio-noche: oklch(0.33 0.04 255 / 0.86);
  --borde-vidrio-claro: oklch(0 0 0 / 0.08);
  --borde-vidrio-noche: oklch(1 0 0 / 0.1);
  --sombra-claro: oklch(0 0 0 / 0.08);
  --sombra-noche: oklch(0.12 0.03 255 / 0.45);
  --sombra-flota-claro: oklch(0 0 0 / 0.18);
  --sombra-flota-noche: oklch(0 0 0 / 0.6);
  --pizarron-sombra: oklch(0.08 0.01 215 / 0.65);
  --libro-sombra: oklch(0.12 0.03 205 / 0.6);
  --radio-sombra: oklch(0.22 0.02 195 / 0.1);
  /* el libro como objeto de Delirante (su lomo y su sombra) y el papel de la
     hoja de Escritos */
  --libro-sombra-suave: oklch(0.12 0.03 205 / 0.28);
  --lomo-sombra: oklch(0 0 0 / 0.3);
  --lomo-luz: oklch(1 0 0 / 0.18);
  --lomo-pliegue: oklch(0 0 0 / 0.12);
  --papel-tenue: oklch(0.9 0.02 85);
  --papel-gastado: oklch(0.8 0.02 85);
  --hoja-sombra: oklch(0.25 0.02 85 / 0.22);

  /* letra: Archivo para el texto, Archivo Black para los títulos y el nombre */
  --fuente-ui: "Archivo", system-ui, sans-serif;
  --fuente-titulo: "Archivo Black", "Archivo", system-ui, sans-serif;
  --fuente-lectura: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fuente-titular: "Archivo Angosta", "Archivo", "Arial Narrow", sans-serif;

  /* la escala de la A (nombre, títulos, cuerpo y pie salen de ahí); la lectura
     larga de las notas va un punto más grande, y los campos en 16 px para que
     el iPhone no haga zoom. En escritorio el cuerpo y lo chico suben un punto:
     a 1440 los 15 px de la A quedan chicos */
  --t-meta: 0.8125rem;
  --t-chico: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --t-cuerpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-boton: 0.9375rem;
  --t-campo: 1rem;
  --t-marca: 1.25rem;
  --t-bajada: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lectura: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --t-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-nota: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-cita: clamp(1.1875rem, 1.06rem + 0.6vw, 1.5rem);
  --t-h2: clamp(1.4375rem, 1.06rem + 1.05vw, 1.9375rem);
  --t-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --t-ep: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --t-num: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  --t-gigante: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --t-frase: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  /* los titulares angostos de Escritos: el de arriba, los de la lista y el nombre de la página */
  --t-titular: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
  --t-titular-chico: clamp(1.375rem, 1.22rem + 0.65vw, 1.75rem);
  --t-cabezal: clamp(3.25rem, 2.2rem + 4.6vw, 6rem);
  --t-nav-grande: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-firma: calc((100vw - 2 * var(--canal)) / 6.92);
  --t-firma-ancha: calc(100cqw / 6.92);
  /* el texto corrido a 1,5: lo más cerca del 1,2–1,45 de Butterick sin bajar
     del mínimo de WCAG; los títulos y lo chico van más apretados */
  --interlineado: 1.5;

  /* espacio */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-seccion: clamp(56px, 8vw, 112px);
  --hueco: 4.5rem;
  --hueco-tanda: var(--hueco);
  --alto-spotify: 152px;   /* el reproductor compacto de Spotify */
  /* con viewport-fit=cover, en el apaisado el canal no baja de la muesca */
  --canal: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ancho: 1240px;
  --ancho-lectura: 680px;
  --radio-borde: 0;
  --radio-short: 12px;
  --barra-alto: 3.5rem;
  --marca-grande: 1.42;
  --banda-alto: 11rem;
  --banda-margen: max(var(--canal), calc(50% - var(--ancho) / 2));
  --radio-boton: 0;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --ancho-foto-nota: 960px;
  /* el reproductor acoplado: su ancho desde 640 px y su distancia al borde, que
     suma la zona segura (el indicador de inicio y la muesca del iPhone) */
  --acoplado-ancho: 400px;
  --acoplado-borde: var(--e-3);
  --acoplado-izq: calc(var(--acoplado-borde) + env(safe-area-inset-left, 0px));
  --acoplado-der: calc(var(--acoplado-borde) + env(safe-area-inset-right, 0px));
  --acoplado-abajo: calc(var(--acoplado-borde) + env(safe-area-inset-bottom, 0px));
  /* la franja que ocupa a la derecha, con su aire */
  --acoplado-reserva: calc(var(--acoplado-ancho) + var(--acoplado-borde) + var(--acoplado-der));
}

@media (min-width: 768px) {
  :root { --hueco: clamp(128px, 15vw, 240px); --hueco-tanda: clamp(96px, 10vw, 160px); }
}

@media (min-width: 960px) {
  :root {
    --barra-alto: 5.5rem;
    --t-marca: clamp(1.0625rem, 0.92rem + 0.45vw, 1.375rem);
  }
}

@media (min-width: 640px) {
  :root { --acoplado-borde: var(--e-5); }
}
/* el celular apaisado: a 400 px tapaba tres cuartos de la pantalla */
@media (min-width: 640px) and (max-height: 500px) {
  :root { --acoplado-ancho: 256px; --acoplado-borde: var(--e-3); }
}

/* el marco, el mundo de Tano: la A, en claro */
:root,
.marco,
.mundo-tano,
.reproductor.acoplado {
  --fondo: var(--gris);
  --tarjeta: var(--blanco);
  --fondo-2: var(--gris-2);
  --fondo-3: var(--gris-3);
  --filete: var(--gris-filete);
  --tinta: var(--grafito);
  --tinta-2: var(--grafito-2);
  --tinta-3: var(--grafito-3);
  --foco: var(--grafito);
  --primario: var(--grafito);
  --primario-hover: var(--grafito-hover);
  --primario-tinta: var(--blanco);
  --resalte: var(--grafito);
  --play: var(--blanco);
  --play-tinta: var(--grafito);
  --error: var(--rojo);
  --vidrio: var(--vidrio-claro);
  --borde-vidrio: var(--borde-vidrio-claro);
  --sombra: var(--sombra-claro);
  --sombra-flota: var(--sombra-flota-claro);
  /* el color de cada pilar cuando aparece en el marco (la portada, Escritos) */
  --acento-escritos: var(--violeta);
  --acento-delirante: var(--libro-acento);
  --acento-radio: var(--radio-oscuro);
  --resaltador: var(--amarillo);
  /* el punto del nombre: amarillo, y el color del pilar en su página */
  --punto: var(--amarillo);
  color-scheme: light;
}

/* y en oscuro, con el botón del tema */
:root[data-tema="oscuro"],
:root[data-tema="oscuro"] .marco,
:root[data-tema="oscuro"] .mundo-tano,
:root[data-tema="oscuro"] .reproductor.acoplado {
  --fondo: var(--noche);
  --tarjeta: var(--noche-tarjeta);
  --fondo-2: var(--noche-2);
  --fondo-3: var(--noche-3);
  --filete: var(--noche-filete);
  --tinta: var(--noche-tinta);
  --tinta-2: var(--noche-tinta-2);
  --tinta-3: var(--noche-tinta-3);
  --foco: var(--noche-tinta);
  --primario: var(--noche-tinta);
  --primario-hover: var(--noche-hover);
  --primario-tinta: var(--noche);
  --resalte: var(--noche-tinta);
  --error: var(--naranja);
  --vidrio: var(--vidrio-noche);
  --borde-vidrio: var(--borde-vidrio-noche);
  --sombra: var(--sombra-noche);
  --sombra-flota: var(--sombra-flota-noche);
  --acento-escritos: var(--violeta-claro);
  --acento-delirante: var(--libro-acento-claro);
  --acento-radio: var(--radio-claro);
  --resaltador: var(--amarillo-noche);
  color-scheme: dark;
}

/* Pequeño Yo: pizarrón en los dos temas */
.mundo-pizarron {
  --fondo: var(--pizarron);
  --tarjeta: var(--pizarron-2);
  --fondo-2: var(--pizarron-2);
  --fondo-3: var(--pizarron-3);
  --filete: var(--pizarron-filete);
  --tinta: var(--tiza);
  --tinta-2: var(--tiza-2);
  --tinta-3: var(--tiza-3);
  --foco: var(--amarillo);
  --primario: var(--amarillo);
  --primario-hover: var(--amarillo-hover);
  --primario-tinta: var(--amarillo-tinta);
  --resalte: var(--amarillo);
  --play: var(--amarillo);
  --play-tinta: var(--amarillo-tinta);
  --error: var(--naranja);
  --sombra: var(--pizarron-sombra);
  color-scheme: dark;
}

/* Delirante: el verde azulado de la tapa, en los dos temas */
.mundo-libro {
  --fondo: var(--libro);
  --tarjeta: var(--libro-2);
  --fondo-2: var(--libro-2);
  --fondo-3: var(--libro-3);
  --filete: var(--libro-filete);
  --tinta: var(--papel);
  --tinta-2: var(--papel-2);
  --tinta-3: var(--papel-3);
  --foco: var(--papel);
  --primario: var(--papel);
  --primario-hover: var(--papel-hover);
  --primario-tinta: var(--libro-3);
  --resalte: var(--ocre);
  --play: var(--papel);
  --play-tinta: var(--libro-3);
  --error: var(--naranja);
  --sombra: var(--libro-sombra);
  color-scheme: dark;
}

/* Radio a la Calle, de día */
.mundo-radio {
  --fondo: var(--radio-fondo);
  --tarjeta: var(--blanco);
  --fondo-2: var(--radio-fondo-2);
  --fondo-3: var(--radio-fondo-3);
  --filete: var(--radio-filete);
  --tinta: var(--radio-tinta);
  --tinta-2: var(--radio-tinta-2);
  --tinta-3: var(--radio-tinta-3);
  --foco: var(--radio-oscuro);
  --primario: var(--radio-oscuro);
  --primario-hover: var(--radio-oscuro-hover);
  --primario-tinta: var(--blanco);
  --resalte: var(--radio-oscuro);
  --linea: var(--radio-turquesa);
  --cartela: var(--radio-menta);
  --cartela-tinta: var(--radio-tinta);
  --cartela-pajaro: var(--radio-oscuro);
  --sombra: var(--radio-sombra);
  color-scheme: light;
}

/* y de noche: el turquesa más claro, sobre un azul petróleo */
:root[data-tema="oscuro"] .mundo-radio {
  --fondo: var(--radio-noche);
  --tarjeta: var(--radio-noche-2);
  --fondo-2: var(--radio-noche-2);
  --fondo-3: var(--radio-noche-3);
  --filete: var(--radio-noche-filete);
  --tinta: var(--radio-fondo);
  --tinta-2: var(--radio-noche-tinta-2);
  --tinta-3: var(--radio-noche-tinta-3);
  --foco: var(--radio-claro);
  --primario: var(--radio-claro);
  --primario-hover: var(--radio-claro-hover);
  --primario-tinta: var(--radio-tinta);
  --resalte: var(--radio-claro);
  --error: var(--naranja);
  --linea: var(--radio-claro);
  --cartela: var(--radio-noche-cartela);
  --cartela-tinta: var(--radio-fondo);
  --cartela-pajaro: var(--radio-claro);
  --sombra: var(--sombra-noche);
  color-scheme: dark;
}

.mundo-pizarron,
.mundo-libro,
.mundo-radio { background: var(--fondo); color: var(--tinta); }

/* la barra y el pie son del marco. La barra toma el mundo de la página, sin corte,
   y el pie es de pizarrón en todas; el punto del nombre sigue amarillo */
.marco { background: var(--fondo); color: var(--tinta); }
:root .barra.marco {
  --fondo: inherit; --tarjeta: inherit; --fondo-2: inherit; --fondo-3: inherit; --filete: inherit;
  --tinta: inherit; --tinta-2: inherit; --tinta-3: inherit; --foco: inherit;
  color-scheme: inherit;
}
:root .pie.marco {
  --fondo: var(--pizarron); --tarjeta: var(--pizarron-2); --fondo-2: var(--pizarron-2); --fondo-3: var(--pizarron-3); --filete: var(--pizarron-filete);
  --tinta: var(--tiza); --tinta-2: var(--tiza-2); --tinta-3: var(--tiza-3); --foco: var(--amarillo);
  --primario: var(--amarillo); --primario-hover: var(--amarillo-hover); --primario-tinta: var(--amarillo-tinta);
  --resalte: var(--amarillo); --error: var(--naranja); --sombra: var(--pizarron-sombra);
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barra-alto) + var(--e-4));
  /* lo que se enfoca o se trae a la vista queda arriba del reproductor acoplado */
  scroll-padding-bottom: calc(var(--dock-alto, 0px) + var(--e-3) + env(safe-area-inset-bottom, 0px));
  scrollbar-color: var(--filete) var(--fondo);
  /* lo que asoma al estirar la página es el gris del marco */
  background: var(--fondo);
  /* Archivo Black tiene un solo peso: nada de negritas inventadas */
  font-synthesis-weight: none;
}

/* una palabra larga, un mail o un link que cargue Tano parte el renglón en vez de
   salirse de la pantalla, también con la letra del navegador agrandada */
body {
  margin: 0; overflow-wrap: anywhere;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: var(--t-cuerpo);
  line-height: var(--interlineado);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* sin el zoom del doble toque: dos toques rápidos al play o al menú no agrandan la página */
a, button, label, summary { touch-action: manipulation; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* los títulos que son links van subrayados, como en la A */
h2 a { text-decoration-thickness: 0.085em; text-underline-offset: 0.1em; }
::selection { background: var(--primario); color: var(--primario-tinta); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; overflow-wrap: normal; border: 0;
}

.saltar {
  position: absolute; left: calc(var(--e-4) + env(safe-area-inset-left, 0px)); top: -100px; z-index: 100;
  background: var(--primario); color: var(--primario-tinta);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--e-2) var(--e-4); border-radius: var(--radio-borde);
  font-weight: 500; text-decoration: none;
}
.saltar:focus { top: var(--e-2); }

.envoltura {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--canal));
  margin-inline: auto;
  padding-inline: var(--canal);
}

.icono {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icono-relleno { fill: currentColor; stroke: none; }

/* meta: fecha, duración, programa, separados por un punto medio; el punto va
   al final de cada dato, así ningún renglón empieza con él */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2);
  font-size: var(--t-meta); line-height: 1.4; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.meta > :not(:last-child)::after { content: "·"; margin-left: var(--e-2); color: var(--tinta-3); }

/* ── botones ──────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-5);
  border-radius: var(--radio-boton);
  font-size: var(--t-boton); font-weight: 500; line-height: 1;
  text-decoration: none; text-align: center; max-width: 100%;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}
.boton:active { transform: scale(0.97); }
/* mientras sale el correo el botón queda apagado, y se nota */
.boton:disabled { opacity: 0.5; cursor: progress; }
.boton .icono { width: 18px; height: 18px; }
.boton-primario { background: var(--primario); color: var(--primario-tinta); }
@media (hover: hover) and (pointer: fine) { .boton-primario:hover { background: var(--primario-hover); } }
/* el amarillo es de lo que suena: en cualquier mundo */
.boton-amarillo { background: var(--amarillo); color: var(--amarillo-tinta); }
@media (hover: hover) and (pointer: fine) { .boton-amarillo:hover { background: var(--amarillo-hover); } }
.boton-papel { background: var(--papel); color: var(--libro-3); }
@media (hover: hover) and (pointer: fine) { .boton-papel:hover { background: var(--papel-hover); } }
.boton-linea { border: 1px solid var(--tinta-3); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .boton-linea:hover { border-color: var(--tinta); background: var(--fondo-2); } }

.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* un texto largo del panel (un link, una palabra de 20 letras) parte el renglón
   en vez de salirse de la tarjeta */
.boton > span, .enlace-flecha > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: var(--e-2); max-width: 100%;
  min-height: 44px;
  font-weight: 500; font-size: var(--t-chico); text-decoration: none; color: var(--tinta);
}
.enlace-flecha .icono { width: 18px; height: 18px; transition: transform 200ms var(--curva); }
/* en táctil el :hover queda pegado después del toque: solo con puntero */
@media (hover: hover) and (pointer: fine) {
  .enlace-flecha:hover .icono { transform: translateX(3px); }
  .enlace-volver:hover .icono { transform: translateX(-3px); }
  .enlace-flecha:hover span { text-decoration: underline; }
  /* compartir sube, bajar baja, copiar se queda */
  .enlace-compartir:hover .icono { transform: translateY(-2px); }
  .enlace-bajar:hover .icono { transform: translateY(2px); }
  .enlace-copiar:hover .icono { transform: none; }
  .enlace-flecha:hover .prensa-medida { text-decoration: none; }
}

/* el play: lo único redondo de cada tapa. Blanco con el triángulo negro, como
   en la A; en Pequeño Yo, el amarillo de sus miniaturas */
.play {
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--play); color: var(--play-tinta);
  box-shadow: 0 6px 20px -6px var(--sombra);
  transition: transform 200ms var(--curva), background-color 160ms ease-out;
}
.play .icono { width: 44%; height: 44%; margin-left: 6%; }
.play-grande { width: 64px; height: 64px; }
.play-chico { width: 30px; height: 30px; }

/* ── barra: es parte de la página, del color de su mundo y sin corte. El nombre
   a la izquierda y, a la derecha, «Menú» con su palabra; desde 960 el menú en la
   fila, el tema y el idioma ─────────────────────────────────────────────────────────────── */

.barra { position: sticky; top: 0; z-index: 40; }
.barra.con-filete { box-shadow: 0 1px 0 var(--filete); }
.barra:has(.nav.abierto) { z-index: 50; touch-action: none; }
.barra-dentro { display: flex; align-items: center; gap: var(--e-4); height: var(--barra-alto); }
.marca {
  display: inline-block; padding-block: calc((44px - 1.1em) / 2); margin-right: auto;
  font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-marca); line-height: 1.1; letter-spacing: -0.005em;
  text-decoration: none; color: var(--tinta);
  transition: opacity 240ms var(--curva), translate 240ms var(--curva);
}
/* el punto de la marca: chiquito, redondo, al final del nombre. Amarillo en el
   marco y, adentro de cada pilar, del acento de su mundo */
.marca::after,
.pie-nombre::after {
  content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin-left: 0.06em;
  border-radius: 50%; background: var(--punto);
}
/* el nombre también está grande al pie: una sola vez por pantalla. Con el menú
   abierto vuelve, porque es la salida a la portada */
.barra.sin-marca .marca:not(:focus-visible) { opacity: 0; translate: 0 0.25rem; pointer-events: none; }
.barra:has(.nav.abierto).sin-marca .marca { opacity: 1; translate: 0; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .marca:hover { text-decoration: underline; text-decoration-thickness: 0.085em; text-underline-offset: 0.15em; } }
/* arriba de todo en la portada el nombre de la barra es el nombre grande de la
   página: comparte la fila con «Menú» y al bajar se achica a la marca
   de siempre. Es un solo elemento, así que nunca está dos veces. Crece con scale
   para no correr nada; cada corte es lo que entra al lado del botón. Un quinto
   más chico que al principio: pedido de Tano del 11/11 */
@media (min-width: 360px) { :root { --marca-grande: 1.4; } }
@media (min-width: 375px) { :root { --marca-grande: 1.48; } }
@media (min-width: 390px) { :root { --marca-grande: 1.55; } }
@media (min-width: 412px) { :root { --marca-grande: 1.66; } }
@media (min-width: 430px) { :root { --marca-grande: 1.76; } }
@media (min-width: 960px) { :root { --marca-grande: 1.64; } }
@media (min-width: 1024px) { :root { --marca-grande: 1.76; } }
@media (min-width: 1100px) { :root { --marca-grande: 2.15; } }
@media (min-width: 1280px) { :root { --marca-grande: 2.4; } }
.marca { scale: var(--marca-escala, 1); transform-origin: left center; }
.pagina-portada .barra:not(.con-filete) { --marca-escala: var(--marca-grande); }
.pagina-portada .barra { box-shadow: 0 1px 0 var(--filete); }

/* el hover siempre va con pointer: fine: hay celulares que dicen tener hover y
   el estado queda pegado después del toque. «Menú» no lleva fondo en ningún caso */
.barra-boton {
  display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 50%;
  font-size: var(--t-meta); font-weight: 500; letter-spacing: 0.04em; color: var(--tinta-2);
}
@media (hover: hover) and (pointer: fine) { .barra-boton:not(.menu-boton):hover { color: var(--tinta); background: var(--fondo-3); } }
.barra-boton .icono { width: 20px; height: 20px; stroke-width: 1.5; }
.tema .icono-sol { display: none; }
.idioma { letter-spacing: 0.06em; }
:root[data-tema="oscuro"] .tema .icono-sol { display: block; }
:root[data-tema="oscuro"] .tema .icono-luna { display: none; }

/* «Menú» y sus dos rayas, que se cruzan en el mismo lugar: la X queda donde
   estaba el botón y el ancho no salta entre las dos palabras */
.menu-boton {
  display: flex; align-items: center; gap: 0.625rem; border-radius: 0;
  font-size: var(--t-chico); letter-spacing: 0; color: var(--tinta);
}
.menu-rotulo { display: grid; justify-items: end; }
.menu-rotulo > span { grid-area: 1 / 1; transition: opacity 160ms ease-out, visibility 0s linear 160ms; }
.menu-rotulo > span:last-child,
.menu-boton[aria-expanded="true"] .menu-rotulo > span:first-child { visibility: hidden; opacity: 0; }
.menu-boton[aria-expanded="true"] .menu-rotulo > span:last-child { visibility: visible; opacity: 1; transition: opacity 160ms ease-out; }
.menu-rayas { position: relative; display: block; width: 1.375rem; height: 0.75rem; }
.menu-rayas::before,
.menu-rayas::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: translate 250ms var(--curva), rotate 250ms var(--curva);
}
.menu-rayas::before { top: 0; }
.menu-rayas::after { bottom: 0; }
.menu-boton[aria-expanded="true"] .menu-rayas::before { translate: 0 0.3125rem; rotate: 45deg; }
.menu-boton[aria-expanded="true"] .menu-rayas::after { translate: 0 -0.3125rem; rotate: -45deg; }

/* el tema y el idioma, en el celular, solo a mano al abrir el menú: quedan a la
   derecha de su pie */
.barra-acciones { display: contents; }
.barra-acciones .barra-boton {
  position: fixed; z-index: 41; bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  color: var(--tinta); visibility: hidden; opacity: 0;
  transition: opacity 120ms ease-out, visibility 0s linear 180ms, scale 140ms ease-out;
}
.barra-acciones .idioma { right: calc(var(--canal) - 10px); }
.barra-acciones .tema { right: calc(var(--canal) - 10px + 44px + var(--e-2)); }
.barra:has(.nav.abierto) .barra-acciones .barra-boton { visibility: visible; opacity: 1; transition: opacity 200ms ease-out 180ms, scale 140ms ease-out; }

/* ── menú del celular: la pantalla entera, una banda por pilar con el color de
   su mundo y su objeto. Se abre barriendo de izquierda a derecha, una banda tras
   otra: es el único movimiento propio de la barra. Los colores van por variables
   locales y no con las clases de los mundos, que pisarían el menú de la fila ── */

.nav {
  position: fixed; inset: var(--barra-alto) 0 0 0; z-index: 39;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden; background: var(--fondo); border-top: 1px solid var(--filete);
  visibility: hidden; opacity: 0;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms;
}
.nav.abierto { visibility: visible; opacity: 1; transition: opacity 80ms ease-out; }
.nav-lista {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(4.5rem, 1fr);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
.nav-pilar {
  position: relative; overflow: hidden; display: grid;
  background: var(--banda); color: var(--banda-tinta);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0s linear 180ms;
}
.nav.abierto .nav-pilar {
  clip-path: inset(0);
  transition: clip-path 380ms var(--curva) calc(var(--i) * 40ms);
}
.nav-pilar[data-pilar="pequeno_yo"] { --banda: var(--pizarron); --banda-tinta: var(--tiza); --banda-punto: var(--amarillo); }
.nav-pilar[data-pilar="delirante"] { --banda: var(--libro); --banda-tinta: var(--papel); --banda-punto: var(--amarillo); }
.nav-pilar[data-pilar="escritos"] { --banda: var(--papel); --banda-tinta: var(--grafito); --banda-punto: var(--violeta); }
.nav-pilar[data-pilar="radio"] { --banda: var(--radio-menta); --banda-tinta: var(--radio-tinta); --banda-punto: var(--radio-oscuro); --banda-pajaro: var(--radio-oscuro); }
.nav-pilar[data-pilar="tanito"] { --banda: var(--gris); --banda-tinta: var(--grafito); --banda-punto: var(--grafito); }
:root[data-tema="oscuro"] .nav-pilar[data-pilar="escritos"] { --banda: var(--papel-tenue); }
:root[data-tema="oscuro"] .nav-pilar[data-pilar="radio"] { --banda: var(--radio-noche-cartela); --banda-tinta: var(--radio-fondo); --banda-punto: var(--radio-claro); --banda-pajaro: var(--radio-claro); }
:root[data-tema="oscuro"] .nav-pilar[data-pilar="tanito"] { --banda: var(--noche); --banda-tinta: var(--noche-tinta); --banda-punto: var(--amarillo); }

.nav-lista a {
  display: flex; align-items: flex-end; min-width: 0; overflow-wrap: anywhere;
  padding: var(--e-3) calc(var(--canal) + 4.5rem) var(--e-3) var(--canal);
  font-family: var(--fuente-titulo); font-size: var(--t-nav-grande); line-height: 1.1; letter-spacing: -0.005em;
  color: inherit; text-decoration: none; text-wrap: balance;
}
.nav-pilar[data-pilar="escritos"] a {
  font-family: var(--fuente-titular); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase;
}
.nav-pilar a[aria-current]::after {
  content: ""; flex: none; align-self: flex-end; width: 0.3em; height: 0.3em; margin: 0 0 0.16em 0.14em;
  border-radius: 50%; background: var(--banda-punto);
}
.nav-pilar a:active { background: color-mix(in oklch, var(--banda-tinta) 9%, transparent); opacity: 1; }
.nav-pilar a:focus-visible { outline-color: currentColor; outline-offset: -6px; }

/* el objeto de cada banda: la espiral, la tapa, el pájaro, su cara. Viven en el
   CSS y no en el HTML para que el enrutador no tenga que tocarlos. En el celular
   la banda es el renglón entero, así que su caja no existe */
.nav-banda { display: contents; }
.nav-banda-nombre, .nav-banda-texto { display: none; }
.nav-motivo { position: absolute; right: var(--canal); inset-block: 0; display: grid; place-items: center; pointer-events: none; }
.nav-pilar[data-pilar="pequeno_yo"] .nav-motivo { width: 4.5rem; color: var(--amarillo); }
.nav-pilar[data-pilar="pequeno_yo"] .nav-motivo .icono { width: 100%; height: auto; stroke-width: 1.25; }
.nav-pilar[data-pilar="delirante"] .nav-motivo {
  inset-block: 0.75rem auto; width: 5rem; aspect-ratio: 240 / 369;
  background: url("../img/menu-tapa.webp") center / cover; rotate: 5deg;
  box-shadow: 0 0.75rem 1.5rem var(--libro-sombra);
}
.nav-pilar[data-pilar="escritos"] .nav-motivo {
  inset-block: 0; right: 0; width: 10rem;
  background: url("../img/menu-escritos.webp") left 0.25rem / 100% auto no-repeat;
}
.nav-pilar[data-pilar="radio"] .nav-motivo {
  inset-block: auto 0.75rem; width: 3.75rem; aspect-ratio: 106 / 98; background: var(--banda-pajaro);
  -webkit-mask: url("../img/radio/pajaro.svg") center / contain no-repeat; mask: url("../img/radio/pajaro.svg") center / contain no-repeat;
}
.nav-pilar[data-pilar="tanito"] .nav-motivo {
  right: 0; width: min(38%, 13rem);
  background: url("../img/menu-tano.webp") center 22% / cover;
}

/* el pie del menú: del color de la página, las redes a un toque; a la derecha
   quedan el tema y el idioma */
.nav-pie {
  display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--filete);
  padding: var(--e-3) var(--canal) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
}
.nav-redes { display: flex; gap: var(--e-2); margin-left: -10px; }
.nav-redes a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--tinta); }
.nav-redes .icono { width: 20px; height: 20px; }

/* el celular apaisado: cinco columnas en vez de cinco renglones */
@media (orientation: landscape) and (max-height: 500px) {
  .nav-lista { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .nav-lista a { padding: var(--e-3) var(--e-3) var(--e-3) max(var(--e-3), var(--canal)); font-size: var(--t-h3); }
  .nav-pilar:not(:first-child) a { padding-left: var(--e-3); }
  .nav-motivo { inset-block: var(--e-3) auto; right: var(--e-3); }
  .nav-pilar[data-pilar="pequeno_yo"] .nav-motivo { width: 3rem; }
  .nav-pilar[data-pilar="delirante"] .nav-motivo { width: 3.5rem; }
  .nav-pilar[data-pilar="radio"] .nav-motivo { inset-block: var(--e-3) auto; width: 3rem; }
  .nav-pilar[data-pilar="tanito"] .nav-motivo { inset: 0 0 auto; width: 100%; height: 55%; background-position: center 18%; }
}

/* sin JS no hay botón que abra nada: el menú queda a la vista, en su fila */
@media (max-width: 959px) {
  html:not(.js) .barra { position: relative; }
  html:not(.js) .barra-dentro { flex-wrap: wrap; height: auto; min-height: var(--barra-alto); }
  html:not(.js) .nav {
    position: static; order: 3; display: block; width: 100%; overflow: visible; background: none; border: 0;
    visibility: visible; opacity: 1; transition: none;
  }
  html:not(.js) .nav-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--e-4); overflow: visible; padding: 0 0 var(--e-3); }
  html:not(.js) .nav-pilar { display: block; background: none; color: inherit; clip-path: none; transition: none; }
  html:not(.js) .nav-lista a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-1);
    font-family: inherit; font-weight: inherit; font-size: var(--t-chico); line-height: 1.2; letter-spacing: 0; text-transform: none;
  }
  html:not(.js) .nav-motivo,
  html:not(.js) .nav-pie,
  html:not(.js) .menu-boton { display: none; }
}

/* la computadora: el menú en la fila. Los links van pegados y a todo el alto de la
   barra, así el mouse pasa de uno a otro, y de ahí a su banda, sin caerse */
@media (min-width: 960px) {
  .nav {
    position: static; inset: auto; z-index: auto; display: block; align-self: stretch; overflow: visible; background: none; border: 0;
    visibility: visible; opacity: 1; transition: none;
  }
  .nav-lista { display: flex; flex-direction: row; align-items: stretch; justify-content: center; height: 100%; margin-right: calc(-0.5 * var(--e-5)); overflow: visible; }
  .nav-pilar { position: static; display: flex; overflow: visible; background: none; color: inherit; clip-path: none; transition: none; }
  .nav-lista a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(var(--e-1) + 0.5 * var(--e-5));
    font-family: inherit; font-size: var(--t-chico); line-height: 1.2; letter-spacing: inherit; text-align: center;
  }
  .nav-pilar[data-pilar="escritos"] a { font-family: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; }
  .nav-pilar a[aria-current]::after { content: none; }
  .nav-pilar a:active { background: none; }
  .nav-pilar a:focus-visible { outline-color: var(--foco); outline-offset: 2px; }
  .nav-lista a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  .nav-banda,
  .nav-pie,
  .menu-boton { display: none; }
  .barra-acciones { display: flex; align-items: center; gap: var(--e-1); margin-left: var(--e-3); margin-right: -10px; }
  .barra-acciones .barra-boton { position: static; color: var(--tinta-2); visibility: visible; opacity: 1; transition: scale 140ms ease-out; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .nav-lista a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  .barra-acciones .barra-boton:hover { color: var(--tinta); }

  /* al pasar el mouse por un pilar baja su banda, con su color y su objeto: el menú
     del celular, en la fila. Barre de izquierda a derecha, y al cambiar de pilar una
     banda barre a la otra. Se toca entera, porque es del link. En la página en la
     que ya se está no baja. Es un adorno: el teclado y el lector siguen con el link */
  .nav-banda {
    display: grid; align-content: end; gap: var(--e-2);
    position: absolute; inset: 100% 0 auto; min-height: var(--banda-alto); overflow: hidden;
    padding: var(--e-5) var(--banda-margen);
    background: var(--banda); color: var(--banda-tinta); box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--banda-tinta) 18%, transparent);
    pointer-events: none; clip-path: inset(0 100% 0 0);
    transition: clip-path 220ms ease-in 100ms;
  }
  .nav-banda-nombre { display: block; font-family: var(--fuente-titulo); font-size: var(--t-gigante); line-height: 1.05; letter-spacing: -0.005em; overflow-wrap: anywhere; }
  .nav-pilar[data-pilar="escritos"] .nav-banda-nombre { font-family: var(--fuente-titular); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; }
  .nav-banda-texto { display: block; max-width: 52ch; font-size: var(--t-chico); line-height: var(--interlineado); }
  .nav-motivo { right: var(--banda-margen); translate: 0 1rem; transition: translate 220ms ease-in 100ms; }
  .nav-pilar[data-pilar="pequeno_yo"] .nav-motivo { width: 7rem; }
  .nav-pilar[data-pilar="delirante"] .nav-motivo { inset-block: 0.75rem auto; width: 6.25rem; }
  .nav-pilar[data-pilar="escritos"] .nav-motivo { inset-block: 0; right: var(--banda-margen); width: 16.875rem; background-position: left top; }
  .nav-pilar[data-pilar="radio"] .nav-motivo { inset-block: auto 1.25rem; width: 6.5rem; }
  /* Tanito: el amarillo del punto de su nombre y tres fotos enteras, impresas y tiradas
     como la tapa y la hoja de las otras bandas: en su casa, con el micrófono y con el libro */
  .nav-pilar[data-pilar="tanito"],
  :root[data-tema="oscuro"] .nav-pilar[data-pilar="tanito"] { --banda: var(--amarillo); --banda-tinta: var(--amarillo-tinta); }
  .nav-pilar[data-pilar="tanito"] .nav-motivo,
  .nav-pilar[data-pilar="tanito"] .nav-motivo::before,
  .nav-pilar[data-pilar="tanito"] .nav-motivo::after {
    border: 0.375rem solid var(--blanco); box-shadow: 0 0.5rem 1.25rem var(--hoja-sombra);
  }
  .nav-pilar[data-pilar="tanito"] .nav-motivo {
    right: var(--banda-margen); inset-block: 0.75rem auto; width: 9.25rem; aspect-ratio: 1; rotate: 3deg; background-position: center;
  }
  .nav-pilar[data-pilar="tanito"] .nav-motivo::before,
  .nav-pilar[data-pilar="tanito"] .nav-motivo::after { content: ""; position: absolute; }
  .nav-pilar[data-pilar="tanito"] .nav-motivo::before {
    right: calc(100% - 0.75rem); top: 0.125rem; width: 7.25rem; aspect-ratio: 4 / 5; rotate: -9deg;
    background: url("../img/menu-tano-terraza.webp") center / cover;
  }
  .nav-pilar[data-pilar="tanito"] .nav-motivo::after {
    right: calc(100% + 5.5rem); top: 0.25rem; width: 8rem; aspect-ratio: 1; rotate: 1deg;
    background: url("../img/menu-tano-libro.webp") center / cover;
  }
  .barra:not(.sin-banda) .nav-pilar:not(:has(a[aria-current])):hover .nav-banda { clip-path: inset(0); transition: clip-path 380ms var(--curva); }
  .barra:not(.sin-banda) .nav-pilar:not(:has(a[aria-current])):hover .nav-motivo { translate: 0; transition: translate 480ms var(--curva); }
  .barra:not(.sin-banda) .nav-pilar:not(:has(a[aria-current])):hover a::before { content: ""; position: absolute; inset: 100% 0 auto; height: var(--banda-alto); }
}

/* ── portada: un pilar por pieza, con la composición de la A ────────────
   La foto (o el video del último episodio) y la tarjeta blanca encimada. En el
   celular van apiladas y la tarjeta se monta un poco sobre la foto; desde 768 px,
   una grilla de 12 columnas con los lados alternados. Cada pieza dice en --alto
   la proporción de su foto (alto sobre ancho). En las de foto la pieza entera se
   toca: el ::after del link del título la cubre y los otros links van por
   encima. La foto va detrás de la tarjeta (z -1 adentro de la pieza aislada), así
   la tarjeta no necesita posición y no encierra al ::after. La de Pequeño Yo no
   se aísla: su tarjeta queda por encima del video, que se dibuja afuera de main. */

/* el cabezal de la portada: el nombre grande con su punto, un filete, qué
   hago y, al lado, el apodo y las redes. En escritorio va en la grilla de las
   piezas de abajo, así el cabezal y la primera foto arrancan en el mismo eje */
/* va a lo ancho de la barra: la bajada arranca donde arranca el nombre */
.portada-cabeza { max-width: calc(var(--ancho) + 2 * var(--canal)); margin-inline: auto; padding: var(--e-5) var(--canal) 0; }
.portada-bajada { margin: 0; max-width: 34ch; font-family: var(--fuente-lectura); font-size: var(--t-cita); line-height: 1.35; text-wrap: pretty; }
.portada-lado { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-5); margin-top: var(--e-5); }
.portada-apodo { margin: 0; font-family: var(--fuente-lectura); font-style: italic; font-size: var(--t-bajada); color: var(--tinta-2); }
.portada-redes { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin: 0; }
.pilares { padding-block: var(--e-4) var(--e-seccion); }
.portada-cabeza + .pilares { padding-top: var(--e-7); }
.pieza { position: relative; }
.pieza:has(.pieza-enlace) { isolation: isolate; }
.pieza + .pieza { margin-top: var(--hueco); }
.pieza-enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pieza .enlace-flecha { position: relative; z-index: 3; }
.pieza-foto { position: relative; z-index: -1; overflow: hidden; }
/* en el celular la foto y el video van a sangre y la tarjeta es una hoja encimada
   que toca un borde: a la derecha y, en las espejadas, a la izquierda, como los
   lados alternados de la computadora */
.pieza-foto, .pieza-video { margin-inline: calc(-1 * var(--canal)); }
.pieza-foto > img {
  width: 100%; height: auto; aspect-ratio: 1 / var(--alto);
  object-fit: cover; background: var(--fondo-3);
}
.par .tarjeta { margin: calc(-1 * var(--e-6)) calc(-1 * var(--canal)) 0 0; padding-right: var(--canal); }
.par.espejo .tarjeta { margin-inline: calc(-1 * var(--canal)) 0; padding-inline: var(--canal) 1.25rem; }
.pieza .titulo { margin-bottom: var(--e-3); }
/* el título es el link a la página del pilar; el relleno le da alto para el dedo
   sin mover el renglón */
.pieza .titulo a { padding-block: 0.6em; }
.pieza-texto { max-width: 46ch; font-size: var(--t-cuerpo); line-height: var(--interlineado); text-wrap: pretty; }
.pieza .enlace-flecha { margin-top: var(--e-3); }

/* Pequeño Yo: el último episodio, con el botón que lo hace sonar en el video de arriba */
.pieza-meta { margin-top: var(--e-5); }
.pieza-episodio {
  margin-top: var(--e-1);
  font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em;
  text-wrap: balance;
}
.pieza-bajada { margin-top: var(--e-2); max-width: 46ch; font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2); text-wrap: pretty; }
.pieza-aviso { margin-top: var(--e-2); font-size: var(--t-meta); color: var(--tinta-3); }
.pieza-acciones { margin-top: var(--e-5); align-items: center; column-gap: var(--e-5); row-gap: var(--e-1); }
.pieza-acciones .enlace-flecha { margin-top: 0; }
/* cuando suena, la tarjeta deja ver el video entero, con sus controles: en el
   celular baja un poco; desde 768 se corre al costado del video, sin empujar la
   página para abajo (Tano, en la reunión del 29/10). Mientras se mueve queda por
   encima del video, que se dibuja afuera de main (z 1) */
.pieza-ahora .tarjeta { position: relative; z-index: 2; transition: margin 500ms var(--curva); }
.pieza-ahora:has(.reproductor-lugar.ocupado) .tarjeta { margin-top: var(--e-3); }
/* Delirante, lo mismo con el audiolibro: «Escuchar el audiolibro» pone el
   reproductor de Spotify sobre el pie de la tapa y la tarjeta se corre, en el
   celular para abajo y desde 768 al costado (David, 29/10). Va por encima del
   link que cubre la pieza */
.pieza-audio { position: relative; z-index: 3; height: var(--alto-spotify); margin: calc(-1 * (var(--alto-spotify) + var(--e-3))) var(--e-3) var(--e-3); }
.pieza-audio iframe { display: block; width: 100%; height: var(--alto-spotify); border: 0; border-radius: 12px; }
.pieza-escucha .tarjeta { transition: margin 500ms var(--curva); }
.pieza-sonando .tarjeta { margin-top: 0; }
/* el play, por encima de lo que la tarjeta tapa del video */
@media (max-width: 767px) {
  .pieza-ahora .tapa { padding-bottom: calc(var(--e-6) + var(--e-4)); }
}

@media (min-width: 768px) {
  .pilares { padding-top: var(--e-7); }
  .portada-cabeza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: var(--e-6); }
  .portada-bajada { grid-column: 1 / 8; }
  .portada-lado { grid-column: 9 / 13; flex-direction: column; align-items: flex-start; margin-top: 0; padding-top: var(--e-1); }
  .portada-cabeza + .pilares { padding-top: var(--e-8); }
  .par { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: var(--ancho); margin-inline: auto; }
  .pieza-foto, .pieza-video { margin-inline: 0; }
  .par .tarjeta, .par.espejo .tarjeta { padding-inline: 2.25rem; }
  .par .pieza-foto, .par .pieza-video { grid-column: 1 / 8; grid-row: 1; }
  .par .tarjeta, .par.espejo .tarjeta { grid-column: 6 / 13; grid-row: 1; align-self: start; margin: calc(var(--alto) * 46%) 0 0; }
  .par.espejo .pieza-foto, .par.espejo .pieza-video { grid-column: 6 / 13; }
  .par.espejo .tarjeta { grid-column: 1 / 8; }
  /* la de Pequeño Yo es la más grande. Mientras no entra al lado de su tarjeta
     (hasta 1100 px), el video va a todo el ancho, con techo según el alto de la
     ventana, y la tarjeta abajo, encimada; sonando, la tarjeta baja y no lo tapa */
  .par.grande .pieza-video { grid-column: 1 / -1; width: min(100%, calc((100svh - 12rem) * 16 / 9)); }
  .par.grande .tarjeta { grid-column: 5 / 13; grid-row: 2; margin: calc(-1 * var(--e-8)) 0 0; }
  .par.grande.espejo .pieza-video { justify-self: end; }
  .par.grande.espejo .tarjeta { grid-column: 1 / 9; }
  .par.grande.espejo .tapa { justify-content: flex-end; }
  .pieza-ahora:has(.reproductor-lugar.ocupado) .tarjeta { margin-top: var(--e-5); }
  /* Delirante: el reproductor va en la celda de la tapa, abajo, y la tarjeta
     deja libres las dos columnas que le encimaba (dos de sus siete) */
  .pieza-audio { grid-column: 1 / 8; grid-row: 1; align-self: end; margin: 0 var(--e-4) var(--e-4); }
  .par.espejo .pieza-audio { grid-column: 6 / 13; }
  .pieza-sonando .tarjeta { margin-top: 0; margin-left: calc(28.571% + var(--e-5)); }
  .pieza-sonando.espejo .tarjeta { margin-left: 0; margin-right: calc(28.571% + var(--e-5)); }
  /* las angostas llegan a los mismos bordes que el resto de la portada y no crecen
     de más: la foto toma seis columnas y la tarjeta le encima una. El 39,43% deja
     la tarjeta a la misma altura de la foto que el 46% de las otras (6/7 de 46) */
  .par.angosta .pieza-foto { grid-column: 1 / 7; }
  .par.angosta .tarjeta { grid-column: 6 / 13; margin-top: calc(var(--alto) * 39.43%); }
  .par.angosta .pieza-audio { grid-column: 1 / 7; }
  .par.angosta.espejo .pieza-foto, .par.angosta.espejo .pieza-audio { grid-column: 7 / 13; }
  .par.angosta.espejo .tarjeta { grid-column: 1 / 8; }
  .par.angosta.pieza-sonando .tarjeta { margin-top: 0; margin-left: calc(14.286% + var(--e-5)); }
  .par.angosta.pieza-sonando.espejo .tarjeta { margin-left: 0; margin-right: calc(14.286% + var(--e-5)); }
}

/* desde 1100 px, el video toma ocho columnas y la tarjeta, seis (el porcentaje
   se mide sobre el ancho de la tarjeta) */
@media (min-width: 1100px) {
  .par.grande .pieza-video { grid-column: 1 / 9; width: auto; }
  .par.grande .tarjeta { grid-column: 7 / 13; grid-row: 1; margin: calc(var(--alto) * 61.33%) 0 0; }
  .par.grande.espejo .pieza-video { grid-column: 5 / 13; }
  .par.grande.espejo .tarjeta { grid-column: 1 / 7; }
  /* sonando: la tarjeta sube a la altura del video y se angosta a las cuatro
     columnas que el video deja libres (dos de sus seis, más el aire) */
  .pieza-ahora:has(.reproductor-lugar.ocupado) .tarjeta { margin-top: 0; margin-left: calc(33.333% + var(--e-5)); }
  .pieza-ahora.espejo:has(.reproductor-lugar.ocupado) .tarjeta { margin-left: 0; margin-right: calc(33.333% + var(--e-5)); }
}

@media (min-width: 960px) { .portada-cabeza { padding-top: var(--e-7); } }

/* el color de cada pilar en la portada, sutil sobre el blanco y negro: el
   subrayado del nombre va del color de su mundo y, con el puntero, el nombre
   también (Pequeño Yo, con su amarillo, solo en el subrayado: en letra no se lee) */
.pieza { --acento: var(--tinta); --acento-linea: var(--acento); }
.pieza[data-pilar="pequeno_yo"] { --acento-linea: var(--amarillo); }
.pieza[data-pilar="delirante"] { --acento: var(--acento-delirante); }
.pieza[data-pilar="escritos"] { --acento: var(--acento-escritos); }
.pieza[data-pilar="radio"] { --acento: var(--acento-radio); }
.pieza .titulo a { text-decoration-color: var(--acento-linea); transition: color 200ms ease-out, text-decoration-thickness 200ms ease-out; }

/* lo que responde al puntero: el subrayado del título engorda, el nombre toma
   su color y, en las de foto, la foto se acerca un poco */
@media (hover: hover) and (pointer: fine) {
  .pieza .titulo a:hover, .pieza:has(.pieza-enlace:hover) .titulo a { color: var(--acento); text-decoration-thickness: 0.14em; }
  .pieza:has(.pieza-enlace:hover) .pieza-foto img { scale: 1.04; }
}

/* más para escuchar y leer: una lista larga de titulares con su miniatura, como
   la sección de audio de saraselvaortiz.com. El pilar se nombra con un punto de
   su color; al pasar, el título se subraya con ese color */
/* las tandas: entre pieza y pieza, lo último de ese pilar con otra forma
   (David, 29/10, como el Audio de saraselvaortiz.com). Arriba un filete con
   el nombre y el link a todo; en el celular van en renglones, en escritorio
   en tres columnas: con su cuadro las de Pequeño Yo y la radio, y como notas
   de diario, sin foto, las de Escritos */
.tanda { --punto: var(--amarillo); display: flex; flex-direction: column; max-width: var(--ancho); margin-inline: auto; }
.tanda[data-pilar="escritos"] { --punto: var(--acento-escritos); }
.tanda[data-pilar="radio"] { --punto: var(--acento-radio); }
.pieza + .tanda { margin-top: var(--e-7); }
.tanda + .pieza { margin-top: var(--hueco-tanda); }
/* en el celular el link a todo cierra la lista, como un renglón más: arriba no
   entra al lado del título y un renglón propio empuja la lista para abajo */
.tanda-cabeza { display: contents; }
.tanda-cabeza .enlace-flecha { order: 2; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--filete); }
.tanda-titulo { display: inline-flex; align-items: center; gap: var(--e-3); margin: 0; padding-top: var(--e-4); border-top: 2px solid var(--tinta); font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; }
.tanda-titulo::before { content: ""; flex: none; width: 0.6em; height: 0.6em; background: var(--punto); }
.tanda-lista { margin-top: var(--e-2); }
.novedad { border-bottom: 1px solid var(--filete); }
.tanda-nota {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding-block: var(--e-4);
  text-decoration: none; color: inherit;
}
.tanda-nota > * { flex: 0 0 100%; }
/* la sección de la nota, en el celular, en el renglón de la fecha: un kicker
   ocupando un renglón entero se come la lista */
.tanda-nota > .novedad-pilar, .tanda-nota > .meta { flex: none; order: 1; }
.tanda-nota > .etiqueta-ejemplo { flex: none; order: 2; }
.tanda-nota-titulo {
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-titular-chico); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.04em; text-wrap: balance;
  text-decoration: underline 0.06em transparent; text-underline-offset: 0.14em; transition: text-decoration-color 200ms ease-out, color 200ms ease-out;
}
.tanda-nota-resumen { font-family: var(--fuente-lectura); font-size: var(--t-bajada); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.novedad-enlace {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--e-4); align-items: start;
  padding-block: var(--e-4); text-decoration: none; color: inherit;
}
.novedad-foto { display: block; position: relative; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; border-radius: var(--radio-borde); background: var(--fondo-3); }
.novedad-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--curva); }
.novedad-foto.escrito-tapa { padding: var(--e-1); }
.novedad-texto { display: grid; gap: var(--e-1); align-content: start; justify-items: start; }
.novedad-pilar {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-meta); font-weight: 500; line-height: 1.3; color: var(--tinta-2);
}
.novedad-pilar::before { content: ""; flex: none; width: 0.55em; height: 0.55em; background: var(--punto); }
.novedad-titulo {
  font-family: var(--fuente-titulo); font-size: var(--t-cuerpo); line-height: 1.25; text-wrap: pretty;
  text-decoration: underline 0.08em transparent; text-underline-offset: 0.18em; transition: text-decoration-color 200ms ease-out;
}
.novedad .etiqueta-ejemplo { margin-top: var(--e-1); }
@media (hover: hover) and (pointer: fine) {
  .novedad-enlace:hover .novedad-titulo { text-decoration-color: var(--punto); }
  .novedad-enlace:hover .novedad-foto img { scale: 1.04; }
  .tanda-nota:hover .tanda-nota-titulo { color: var(--punto); text-decoration-color: currentColor; }
}
@media (min-width: 768px) {
  .tanda { display: block; }
  .tanda-cabeza {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-5);
    padding-top: var(--e-4); border-top: 2px solid var(--tinta);
  }
  .tanda-titulo { padding-top: 0; border-top: 0; }
  .tanda-cabeza .enlace-flecha { justify-content: flex-start; min-height: 44px; border-bottom: 0; }
  .tanda-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-6); margin-top: var(--e-5); }
  .tanda .novedad { border-bottom: 0; }
  .tanda .novedad-enlace { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding-block: 0; }
  /* las notas, como columnas de diario: un filete fino entre una y otra */
  .tanda-notas .tanda-lista { column-gap: 0; }
  .tanda-notas .novedad { padding-inline: var(--e-5); }
  .tanda-notas .novedad:first-child { padding-left: 0; }
  .tanda-notas .novedad:last-child { padding-right: 0; }
  .tanda-notas .novedad + .novedad { border-left: 1px solid var(--filete); }
  .tanda-nota { display: grid; justify-items: start; padding-block: var(--e-1) 0; }
  .tanda-nota > .novedad-pilar, .tanda-nota > .meta, .tanda-nota > .etiqueta-ejemplo { order: 0; }
  .novedad-pilar { letter-spacing: 0.06em; text-transform: uppercase; }
  .novedad-pilar::before { width: 0.7em; height: 0.7em; }
  .pieza + .tanda { margin-top: var(--e-8); }
}

/* ── el reproductor ───────────────────────────────────────────────────── */

.ahora { padding-bottom: var(--e-seccion); }

/* El lugar, adentro de la página: la tapa del episodio. El reproductor es uno
   solo para todo el sitio y está afuera de main, así sigue sonando al cambiar de
   página: mientras el lugar se ve, el JS lo dibuja encima (en-lugar, con la
   posición del lugar en --lugar-*); si no, lo acopla abajo. Ocupado es el lugar
   del episodio que suena: la tapa se apaga para no invitar a empezarlo de nuevo. */
.reproductor-lugar { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--negro); }
.reproductor-lugar.ocupado { background: var(--fondo-2); }
.reproductor-lugar.ocupado .tapa { visibility: hidden; }
.reproductor { display: none; }
.reproductor.iniciado { display: block; }
.reproductor.en-lugar {
  position: absolute; z-index: 1;
  top: var(--lugar-y); left: var(--lugar-x); width: var(--lugar-ancho); height: var(--lugar-alto);
}
/* cerrado en una página sin su lugar: pausado y fuera de la vista, sin salir del documento */
.reproductor.guardado { position: fixed; inset: auto var(--acoplado-der) var(--acoplado-abajo) var(--acoplado-izq); visibility: hidden; }
.reproductor-pantalla { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--negro); }

/* el play va abajo a la izquierda: el centro de la miniatura es el título que diseñó Tano */
.tapa { position: absolute; inset: 0; width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--e-4); }
.tapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tapa::after {
  content: ""; position: absolute; inset: 0;
  background: var(--velo);
  transition: background-color 200ms ease-out;
}
.tapa .play { position: relative; z-index: 1; }
/* el nombre del programa sobre el cuadro, en el amarillo de Pequeño Yo */
.tapa-logo {
  position: absolute; z-index: 1; top: 0; left: 0;
  font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: 1;
  padding: var(--e-2) var(--e-3); background: var(--amarillo); color: var(--negro);
}
@media (min-width: 768px) {
  .tapa-logo { top: var(--e-4); left: var(--e-4); font-size: var(--t-h1); }
}
.par.grande.espejo .tapa-logo { left: auto; right: var(--e-4); }
/* el lugar recorta lo que sale de su caja: el anillo del foco de la tapa va en el lugar */
.tapa:focus-visible { outline: none; }
.reproductor-lugar:has(.tapa:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tapa:hover .play { transform: scale(1.06); }
  .tapa:hover::after { background: var(--velo-suave); }
}

.reproductor-video { position: absolute; inset: 0; }
.reproductor-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* la barra del reproductor solo se ve cuando está abajo */
.reproductor-barra { display: none; }

.ahora-texto { padding: var(--e-5) var(--canal) 0; }
.ahora-texto.cambiando { animation: cambiar 360ms var(--curva); }
@keyframes cambiar { from { opacity: 0; transform: translateY(6px); } }

.etiqueta-nueva {
  display: inline-block; margin-bottom: var(--e-4); padding: 5px 12px;
  background: var(--primario); color: var(--primario-tinta); border-radius: var(--radio-boton);
  font-size: var(--t-meta); font-weight: 500; line-height: 1.3;
}
.ahora-encabezado { display: flex; align-items: flex-start; gap: var(--e-4); }
.ahora-num { flex: none; overflow-wrap: normal; }
.ahora-num {
  font-size: var(--t-num); font-weight: 400; line-height: 0.8; letter-spacing: -0.03em;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  margin-top: 0.02em;
}
.ahora-num:empty { display: none; }
.ahora-titulo {
  font-size: var(--t-ep); font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em;
  text-wrap: balance;
  padding-top: 0.06em;
}
.ahora-con {
  margin-top: var(--e-4);
  font-family: var(--fuente-lectura); font-style: italic;
  font-size: var(--t-bajada); line-height: 1.45; color: var(--tinta);
}
.ahora-bajada {
  margin-top: var(--e-2); max-width: 42ch;
  font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2);
}
.ahora .meta { margin-top: var(--e-4); }
/* el título lleva a la página del episodio: subrayado fino, como los links de la A */
:is(.ahora-titulo, .pieza-episodio) a {
  color: inherit;
  text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.14em;
  text-decoration-color: var(--filete);
  transition: text-decoration-color 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) { :is(.ahora-titulo, .pieza-episodio) a:hover { text-decoration-color: currentColor; } }
/* en la portada, el episodio que suena va resaltado con el amarillo de Pequeño
   Yo, como marcado con resaltador; con el puntero, el resaltado lo cubre entero */
.pieza-episodio a {
  text-decoration: none;
  background: linear-gradient(var(--resaltador), var(--resaltador)) no-repeat 0 92% / 100% 0.44em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 260ms var(--curva);
}
@media (hover: hover) and (pointer: fine) { .pieza-episodio a:hover { background-size: 100% 100%; } }
/* «Quedaste en el 12:34»: el dato que importa de la línea, un tono más fuerte */
.retomar { color: var(--tinta); font-weight: 500; }
.ahora .acciones { margin-top: var(--e-5); }

.spotify-panel { margin-top: var(--e-4); }
.spotify-panel iframe { display: block; width: 100%; border: 0; border-radius: 12px; }

/* un botón y, al lado o abajo, el link de Spotify: nunca dos botones apilados */
.ahora .acciones, .libro-portada .acciones { align-items: center; column-gap: var(--e-5); }

/* el video de Pequeño Yo: apilado mientras no entra al lado del texto, con techo
   según el alto de la ventana; desde 900 px, video y texto lado a lado */
@media (min-width: 600px) and (max-width: 899.98px) {
  .ahora > .reproductor-lugar { width: min(100%, calc((100svh - 10rem) * 16 / 9)); margin-inline: auto; }
}
@media (min-width: 900px) {
  .ahora {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center; gap: var(--e-7);
    max-width: calc(var(--ancho) + 2 * var(--canal)); margin-inline: auto;
    padding: var(--e-seccion) var(--canal);
  }
  .reproductor-lugar, .reproductor, .reproductor-pantalla { border-radius: var(--radio-borde); }
  .ahora-texto { padding: 0; }
  .tapa { padding: var(--e-5); }
  .play-grande { width: 80px; height: 80px; }
}

/* el reproductor acoplado abajo, mientras recorrés la página. Es del marco, así
   que se ve igual en todas las páginas, y es lo único con vidrio esmerilado
   porque flota. */
.reproductor.acoplado {
  position: fixed; inset: auto var(--acoplado-der) var(--acoplado-abajo) var(--acoplado-izq); z-index: 45;
  background: transparent;
  border-radius: var(--radio-borde); overflow: hidden;
  box-shadow: 0 0 0 1px var(--borde-vidrio), 0 1rem 2.5rem -0.75rem var(--sombra-flota);
  animation: acoplar 320ms var(--curva);
}
.reproductor.acoplado .reproductor-barra {
  position: relative;
  display: flex; align-items: center; gap: var(--e-1);
  height: 60px; padding-inline: var(--e-1);
  /* opaca: al final de la página pisa el nombre gigante del pie */
  background: var(--fondo); color: var(--tinta);
}
.reproductor.acoplado .reproductor-pantalla { border-radius: 0; }
.reproductor-ahora {
  flex: 1; min-width: 0; padding-inline: var(--e-2);
  font-size: var(--t-chico); font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reproductor-boton {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; color: var(--tinta-2);
}
@media (hover: hover) and (pointer: fine) { .reproductor-boton:hover { color: var(--tinta); background: var(--gris-boton); } }
.reproductor-boton[data-accion="alternar"] { color: var(--tinta); }
.reproductor-boton[hidden] { display: none; }
.reproductor-boton .icono { width: 20px; height: 20px; }
.reproductor-boton .icono-pausa { display: none; }
.reproductor.sonando .reproductor-boton .icono-pausa { display: block; }
.reproductor.sonando .reproductor-boton[data-accion="alternar"] .icono:not(.icono-pausa) { display: none; }
/* con un episodio de Pequeño Yo, su espiral al lado del título (gira mientras
   suena: ver «movimiento») */
.reproductor-espiral { display: none; place-items: center; width: 28px; flex: none; color: var(--tinta-2); }
.reproductor.pequeno-yo .reproductor-espiral { display: grid; }
.reproductor-espiral .icono { width: 20px; height: 20px; }
.reproductor-progreso {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gris-riel);
}
.reproductor-progreso span {
  display: block; height: 100%; width: 100%;
  background: var(--tinta);
  transform-origin: left; transform: scaleX(var(--avance, 0));
}

@media (min-width: 640px) {
  .reproductor.acoplado, .reproductor.guardado { left: auto; width: var(--acoplado-ancho); }
}
/* ACC-17: con el teclado abierto, el acoplado deja solo su barra, apoyada en el borde de
   abajo: el video baja entero fuera de la pantalla (sigue sonando, nunca display: none)
   y no tapa el campo donde se escribe. Se corre con translate: no cambia el alto que
   mide acomodar(), así la página no salta mientras se escribe */
@media (pointer: coarse) {
  .reproductor.acoplado { transition: translate 250ms var(--curva); }
  html:has(:is(input, textarea):focus) .reproductor.acoplado { translate: 0 calc(100% - 60px + var(--acoplado-abajo)); }
}
/* el celular apaisado: el video en su lugar entra entero debajo de la barra, con su
   aire, y la portada no suma aire arriba para que el suyo tampoco se corte */
@media (orientation: landscape) and (max-height: 500px) {
  .reproductor-lugar { width: min(100%, calc((100svh - var(--barra-alto) - 2 * var(--e-3)) * 16 / 9)); margin-inline: auto; }
  .pilares { padding-top: var(--e-3); }
}

/* mientras llega la página nueva (el reproductor ya suena y el link no recarga) */
.cargando { cursor: progress; }
.cargando #contenido { opacity: 0.55; transition: opacity 200ms ease-out; }
/* al llegar, el foco va al título de la página: el lector de pantalla lo anuncia,
   y el contorno no hace falta porque no es un control */
#contenido [tabindex="-1"]:focus { outline: none; }

@keyframes acoplar {
  from { opacity: 0; transform: translateY(24px); }
}

/* ── secciones ────────────────────────────────────────────────────────── */

/* la tarjeta de la A: blanca sobre el gris, con su sombra suave; en cada mundo,
   del color de su mundo */
.tarjeta,
.proyecto,
.contacto,
.nota-vecina { color: var(--tinta); }
.tarjeta, .proyecto { background: var(--tarjeta); }
/* en el celular, los proyectos, el contacto y los vecinos son bandas o filas: la sombra les llega desde tablet */
.tarjeta { box-shadow: 0 1px 3px var(--sombra), 0 1.5rem 2.5rem -1.75rem var(--sombra); }
.tarjeta { padding: 1.5rem 1.25rem 1.75rem; }
@media (min-width: 768px) { .tarjeta { padding: 2.25rem 2.25rem 2.5rem; } }

/* el título de la A, en Archivo Black; si es un link, va subrayado */
.titulo {
  font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.01em;
  text-wrap: balance;
}

.seccion-titulo {
  font-size: var(--t-h2); font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em;
  text-wrap: balance;
}
.seccion-bajada {
  margin-top: var(--e-3); max-width: 52ch;
  font-family: var(--fuente-lectura); font-size: var(--t-bajada); line-height: var(--interlineado); color: var(--tinta-2);
  text-wrap: pretty;
}
.seccion-bajada .dia { color: var(--tinta); }
.seccion-aviso { margin-top: var(--e-2); font-size: var(--t-meta); color: var(--tinta-3); }
.pagina-titulo {
  font-size: var(--t-h1); font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em;
  text-wrap: balance;
}

/* la cabecera de una página de mundo */
.cabecera { padding-block: var(--e-6) var(--e-7); }
.cabecera .seccion-bajada { max-width: 46ch; }
.pagina-error .enlace-flecha { margin-top: var(--e-4); }
.cabecera .acciones { margin-top: var(--e-5); }

/* ── Fotos: cuadros de sus videos, cada una con su epígrafe ───────────── */

.foto img { width: 100%; height: auto; border-radius: var(--radio-borde); background: var(--fondo-3); }
.foto figcaption { margin-top: var(--e-2); font-size: var(--t-meta); line-height: 1.4; color: var(--tinta-3); text-wrap: pretty; }

/* ── Pequeño Yo ───────────────────────────────────────────────────────── */

.episodios { padding-block: var(--e-seccion); }
.ahora + .episodios { padding-top: 0; }
.shorts + .episodios { padding-top: 0; }

/* la cabecera, como el cabezal de una revista: el logo y el nombre en una
   fila, un filete, y abajo la bajada y, a su lado, cuándo sale con los links.
   En escritorio usa las mismas dos columnas que el episodio de abajo, así la
   cabecera y el episodio quedan en un mismo eje (David, 29/10: «queda medio
   desplazada», «más editorial») */
.cabecera-pequeno-yo { padding-bottom: var(--e-6); }
.programa-cabeza { display: flex; align-items: center; gap: var(--e-4); padding-bottom: var(--e-5); border-bottom: 1px solid var(--filete); }
.cabecera-pequeno-yo .programa-logo { flex: none; width: 60px; height: 60px; border-radius: var(--radio-borde); }
.cabecera-pequeno-yo .pagina-titulo { font-size: var(--t-h1); line-height: 0.95; }
.programa-cuerpo { padding-top: var(--e-5); }
.cabecera-pequeno-yo .seccion-bajada { margin-top: 0; }
.programa-lado { margin-top: var(--e-5); }
.programa-dia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); font-size: var(--t-chico); font-weight: 500; line-height: 1.3; }
.programa-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); }
.programa-cuenta { color: var(--tinta-3); font-weight: 400; }
.programa-cuenta::before { content: "·"; margin-right: var(--e-3); }
.cabecera-pequeno-yo .acciones { margin-top: var(--e-4); }
/* los dos links van juntos: si no entran al lado del botón, bajan juntos */
.cabecera-pequeno-yo .acciones { align-items: center; column-gap: var(--e-5); }
.programa-redes { display: inline-flex; gap: var(--e-5); }
/* en el celular el video está justo abajo: el botón era una segunda entrada al mismo lugar */
.cabecera-pequeno-yo .boton { display: none; }
@media (min-width: 768px) { .cabecera-pequeno-yo .boton { display: inline-flex; } }

.grilla { margin-top: var(--e-6); display: grid; gap: 0; }
.ep {
  position: relative;
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--e-3); align-items: start; align-content: start;
  padding: var(--e-3) 0;
  border-top: 1px solid var(--filete);
}
.ep:last-child { border-bottom: 1px solid var(--filete); }
.ep-tapa {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radio-borde); background: var(--fondo-2);
}
.ep-tapa img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--curva); }
/* en reposo la miniatura queda limpia (abajo están los nombres de los invitados);
   el play aparece en lo que va a sonar o en lo que suena */
.ep-tapa::after {
  content: ""; position: absolute; inset: 0;
  background: var(--velo-fuerte); opacity: 0;
  transition: opacity 200ms ease-out;
}
.ep-tapa .play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  translate: -50% -50%; scale: 0.85; opacity: 0;
  transition: opacity 200ms ease-out, scale 240ms var(--curva);
}
.ep:has(.ep-boton:focus-visible) .ep-tapa::after, .ep.esta-sonando .ep-tapa::after { opacity: 1; }
.ep:has(.ep-boton:focus-visible) .ep-tapa .play, .ep.esta-sonando .ep-tapa .play { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .ep:hover .ep-tapa::after { opacity: 1; }
  .ep:hover .ep-tapa .play { opacity: 1; scale: 1; }
}
.ep-titulo { font-size: var(--t-h3); font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
/* el botón ya cubre toda la fila con su ::after; el relleno con margen negativo
   le da además 44 px propios sin mover nada */
.ep-boton, .pieza-episodio a { padding-block: 12px; margin-block: -12px; }
.ep-boton { text-align: left; text-decoration-thickness: 0.085em; text-underline-offset: 0.12em; }
.ep-boton:focus-visible { text-decoration: underline; }
/* en el celular, los títulos sueltos llegan al área táctil sin mover nada */
@media (pointer: coarse) {
  :is(.pieza-episodio, .fecha-titulo, .ahora-titulo, .contratapa-datos) a { position: relative; }
  :is(.pieza-episodio, .fecha-titulo, .ahora-titulo, .contratapa-datos) a::after { content: ""; position: absolute; inset: -14px 0; }
}
@media (hover: hover) and (pointer: fine) { .ep:hover .ep-boton { text-decoration: underline; } }
.ep-boton::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* flotado, el número no se subraya y el espacio que lo sigue cae al principio del renglón y se pierde */
.ep-num { float: left; margin-right: 0.3em; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ep-con { margin-top: var(--e-1); font-size: var(--t-chico); line-height: 1.35; color: var(--tinta-2); }
.ep-bajada { margin-top: var(--e-2); font-family: var(--fuente-lectura); font-size: var(--t-chico); line-height: var(--interlineado); color: var(--tinta-2); }
.ep .meta { margin-top: var(--e-2); }
.ep.esta-sonando .ep-titulo { color: var(--resalte); }
@media (hover: hover) and (pointer: fine) {
  .ep:hover .ep-tapa img { transform: scale(1.04); }
  .ep:hover .ep-titulo { color: var(--resalte); }
}
.ep-boton:focus-visible { outline: none; }
.ep:has(.ep-boton:focus-visible) { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 2px; }
.ep[hidden] { display: none; }

@media (max-width: 759px) {
  .grilla-todos .ep-bajada { display: none; }
}
@media (min-width: 760px) {
  .grilla { grid-template-columns: repeat(2, 1fr); column-gap: var(--e-6); }
  .ep { grid-template-columns: 136px 1fr; gap: var(--e-4); padding: var(--e-4) 0; }
  .ep:nth-last-child(2) { border-bottom: 1px solid var(--filete); }
}
@media (min-width: 1024px) {
  .grilla { grid-template-columns: repeat(3, 1fr); column-gap: var(--e-6); row-gap: var(--e-7); margin-top: var(--e-7); }
  .ep, .ep:last-child, .ep:nth-last-child(2) { grid-template-columns: 1fr; gap: var(--e-4); padding: 0; border: 0; }
  .ep-tapa .play { width: 52px; height: 52px; }
  .cabecera-pequeno-yo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-7); padding-block: var(--e-7) 0; }
  .programa-cabeza { grid-column: 1 / -1; gap: var(--e-6); padding-bottom: var(--e-6); }
  .cabecera-pequeno-yo .programa-logo { width: 104px; height: 104px; }
  .cabecera-pequeno-yo .pagina-titulo { font-size: var(--t-gigante); }
  .programa-cuerpo { padding-top: var(--e-6); }
  .cabecera-pequeno-yo .seccion-bajada { max-width: 44ch; font-size: var(--t-cita); }
  .programa-lado { margin-top: 0; padding-top: var(--e-6); }
  .cabecera-pequeno-yo + .ahora { padding-top: var(--e-8); }
}

/* la búsqueda (episodios y archivo de la radio) */
.buscar { margin-top: var(--e-4); max-width: 360px; }
.buscar-campo {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 44px; padding: 0 var(--e-3);
  background: var(--tarjeta); border: 1px solid var(--tinta-3); border-radius: var(--radio-boton);
}
.buscar-campo:focus-within { border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.buscar-campo .icono { color: var(--tinta-3); }
.buscar-campo input {
  flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--t-campo); color: var(--tinta);
}
.buscar-campo input::placeholder { color: var(--tinta-3); }
.buscar-cuenta { margin-top: var(--e-2); min-height: 1.4em; font-size: var(--t-meta); color: var(--tinta-3); }
.buscar-nada { margin-top: var(--e-5); font-family: var(--fuente-lectura); font-size: var(--t-bajada); color: var(--tinta-2); }

/* ── Delirante ────────────────────────────────────────────────────────── */

.libro-tapa { width: min(72%, 320px); }
/* el libro como objeto: el lomo a la izquierda (una sombra, una luz y el pliegue
   sobre la tapa), el canto de las hojas asomando a la derecha y una sombra en
   capas. Es el mismo en la portada y en su página */
.libro-objeto { position: relative; z-index: 1; }
.libro-objeto img {
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 1px 2px var(--libro-sombra-suave), 0 10px 18px -8px var(--libro-sombra-suave), 0 32px 48px -24px var(--libro-sombra);
}
.libro-objeto::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 8%;
  border-radius: 2px 0 0 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--lomo-sombra), var(--lomo-luz) 35%, var(--lomo-pliegue) 60%, transparent);
}
.libro-objeto::after {
  content: ""; position: absolute; z-index: -1; top: 1.5%; bottom: 1.5%; right: -5px; width: 7px;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(90deg, var(--papel) 0 1px, var(--papel-3) 1px 2px);
}
.libro-de { margin-top: var(--e-2); font-family: var(--fuente-lectura); font-style: italic; font-size: var(--t-bajada); color: var(--tinta-2); }
.libro-cita {
  margin-top: var(--e-4); max-width: 30ch;
  font-family: var(--fuente-lectura); font-style: italic; font-size: var(--t-cita); line-height: 1.4;
  text-wrap: pretty;
}
.libro-texto {
  margin-top: var(--e-4); max-width: 46ch;
  font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2);
}
.libro-precio { margin-top: var(--e-4); font-size: var(--t-h3); font-weight: 500; font-variant-numeric: tabular-nums; }
.libro-portada .acciones { margin-top: var(--e-5); }

@media (min-width: 900px) {
  .libro-tapa { width: 100%; max-width: 480px; }
}

/* la página del libro */
/* en el celular, la tapa y el título lado a lado, y el resto abajo a todo el
   ancho: la tapa sola dejaba un vacío a la derecha y empujaba los botones */
.libro-portada { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--e-4); padding-block: var(--e-5) var(--e-seccion); }
.libro-portada > div { display: contents; }
.libro-portada .libro-tapa { grid-row: 1 / span 2; width: 100%; }
.libro-portada .pagina-titulo { align-self: end; }
.libro-portada > div > :not(.pagina-titulo, .libro-de) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .libro-portada { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--e-8); padding-top: var(--e-7); }
  .libro-portada > div { display: block; }
  .libro-portada .libro-tapa { grid-row: auto; max-width: 400px; justify-self: center; }
}
.libro-portada:has(+ .contratapa) { padding-bottom: var(--e-7); }

/* la contratapa y la solapa: el título a un lado y el texto al otro, alineados con la portada */
.contratapa, .solapa { display: grid; gap: var(--e-4); }
.contratapa { padding-bottom: var(--e-seccion); }
.solapa { padding-block: 0; }
@media (min-width: 768px) { .solapa { padding-top: var(--e-seccion); } }
.contratapa-texto, .solapa-texto {
  display: grid; gap: var(--e-4); max-width: 52ch;
  font-family: var(--fuente-lectura); font-size: var(--t-lectura); line-height: var(--interlineado); color: var(--tinta-2);
}
.contratapa-texto p, .solapa-texto p { text-wrap: pretty; }
.contratapa-datos { margin-top: var(--e-2); font-family: inherit; }
.contratapa-datos a { color: inherit; text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .contratapa, .solapa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-8); align-items: start; }
  /* el título, centrado abajo de la tapa */
  .contratapa > :first-child { text-align: center; }
}

/* las imágenes del libro: la primera a todo el ancho en el celular, tres iguales de ahí en más */
.libro-imagenes { padding-bottom: var(--e-seccion); }
.libro-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); align-items: start; }
.libro-galeria > li:first-child { grid-column: 1 / -1; margin-inline: calc(-1 * var(--canal)); }
.libro-galeria > li:first-child figcaption { padding-inline: var(--canal); }
@media (min-width: 760px) {
  .libro-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-5); }
  .libro-galeria > li:first-child { grid-column: auto; margin-inline: 0; }
  .libro-galeria > li:first-child figcaption { padding-inline: 0; }
}

/* lo que escribieron los lectores: notas de papel, apenas torcidas, que flotan
   mientras se ven (la pausa la pone el JS fuera de la vista). Van en una grilla
   de filas parejas y no en columnas de CSS: Safari rompía una nota en columnas
   (David, 11/11: «algo raras y mal organizadas») */
.lectores { display: grid; gap: var(--e-5); padding-bottom: var(--e-seccion); container-type: inline-size; }
.lector {
  --giro: -0.5deg; --demora: 0s;
  display: grid; align-content: center; padding: var(--e-4) var(--e-5);
  background: var(--papel); color: var(--libro-3);
  box-shadow: 0 1px 2px var(--sombra), 0 1.25rem 2rem -1rem var(--sombra);
  rotate: var(--giro); transition: rotate 300ms var(--curva), box-shadow 300ms var(--curva);
}
.lectores-lista { display: grid; gap: var(--e-4); }
.lector:nth-child(2n) { --giro: 0.6deg; --demora: -2.4s; }
.lector:nth-child(3n) { --giro: -0.3deg; --demora: -4.1s; }
.lector:nth-child(5n) { --giro: 0.4deg; --demora: -5.6s; }
/* las columnas salen del lugar que tiene la sección, no de la pantalla: una,
   dos o tres, y la primera nota siempre sola arriba */
@container (min-width: 36rem) {
  .lectores-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lector:first-child { grid-column: 1 / -1; }
}
@container (min-width: 54rem) {
  .lectores-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lector p {
  font-family: var(--fuente-lectura); font-style: italic; font-size: var(--t-lectura); line-height: 1.45;
  text-wrap: pretty;
}
.lector:first-child p { font-size: var(--t-cita); line-height: 1.35; }
.lector p::before { content: "«"; }
.lector p::after { content: "»"; }
:root[lang="en"] .lector p::before { content: "“"; }
:root[lang="en"] .lector p::after { content: "”"; }
.lectores-accion { margin-top: 0; }
@keyframes nota-flota { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: no-preference) {
  .lectores .lector { animation: nota-flota 7s ease-in-out var(--demora) infinite paused; }
  .lectores.a-la-vista .lector { animation-play-state: running; }
}
@media (hover: hover) and (pointer: fine) {
  .lectores.a-la-vista .lector:hover { rotate: 0deg; animation-play-state: paused; box-shadow: 0 1px 2px var(--sombra), 0 1.75rem 2.5rem -1rem var(--sombra); }
}
@media (min-width: 900px) {
  /* arriba el título y el botón; abajo las notas a todo el ancho: la primera
     sola y las otras seis en dos filas de tres */
  .lectores { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-8); row-gap: var(--e-6); }
  .lectores-cabeza { grid-column: 1; grid-row: 1; }
  .lectores-accion { grid-column: 2; grid-row: 1; align-self: end; }
  .lectores-lista { grid-column: 1 / -1; grid-row: 2; }
}

.audiolibro { padding-block: var(--e-seccion); background: var(--fondo-2); }
.audiolibro-total { margin-top: var(--e-3); max-width: 52ch; font-family: var(--fuente-lectura); font-size: var(--t-bajada); color: var(--tinta-2); }
.audiolibro-cuerpo { margin-top: var(--e-6); display: grid; gap: var(--e-6); align-items: start; }
.audiolibro-reproductor { display: grid; gap: var(--e-3); }
.audiolibro-sonando { font-weight: 500; font-size: var(--t-h3); line-height: 1.4; }
.audiolibro-sonando span:first-child { color: var(--resalte); font-variant-numeric: tabular-nums; }
.audiolibro-marco { min-height: 152px; border-radius: 12px; background: var(--fondo-3); }
.audiolibro-marco iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: var(--fondo-3); }
.capitulos { border-top: 1px solid var(--filete); }
.capitulo {
  display: grid; grid-template-columns: 2.25em 1fr auto; align-items: baseline; gap: var(--e-3);
  width: 100%; min-height: 44px; padding: var(--e-2);
  border-bottom: 1px solid var(--filete);
  text-align: left;
  transition: background-color 160ms ease-out, scale 140ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .capitulo:hover { background: var(--fondo-3); } }
.capitulo-num { font-variant-numeric: tabular-nums; color: var(--tinta-3); font-size: var(--t-chico); }
.capitulo-titulo { font-family: var(--fuente-lectura); font-size: var(--t-bajada); line-height: 1.3; }
.capitulo-dura { font-variant-numeric: tabular-nums; color: var(--tinta-3); font-size: var(--t-meta); }
.capitulo[aria-current="true"] { background: var(--fondo-3); }
.capitulo[aria-current="true"] .capitulo-titulo,
.capitulo[aria-current="true"] .capitulo-num { color: var(--resalte); }
@media (min-width: 900px) {
  .audiolibro-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-8); }
  .capitulo { min-height: 52px; padding: var(--e-3) var(--e-2); }
  .audiolibro-reproductor { position: sticky; top: calc(var(--barra-alto) + var(--e-5)); }
}

.presentacion { padding-block: var(--e-seccion); }
.presentacion .reproductor-lugar { margin-top: var(--e-6); }
.presentacion-dentro > .meta { margin-top: var(--e-3); }
.presentacion-foto { margin-top: var(--e-5); }
@media (min-width: 1024px) {
  .presentacion-dentro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 var(--e-8); align-items: center; }
  .presentacion-dentro > .meta { grid-column: 2; }
  .presentacion .reproductor-lugar { margin-top: 0; }
}

/* ── Radio a la Calle ─────────────────────────────────────────────────── */

/* el logo de 2019, pintado con el color del mundo (en oscuro se aclara solo) */
.radio-logo {
  display: block; width: 168px; aspect-ratio: 400 / 190; background: var(--resalte);
  -webkit-mask: url("../img/radio/logo.svg") center / contain no-repeat; mask: url("../img/radio/logo.svg") center / contain no-repeat;
}
/* el logo y el nombre en una fila, y la bajada al lado o abajo: los momentos arrancan enseguida */
.cabecera-radio { padding-bottom: var(--e-6); }
.radio-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-4) var(--e-5); }
.radio-cabeza .radio-logo { width: 104px; }
.radio-cabeza .seccion-bajada { grid-column: 1 / -1; margin-top: 0; }
/* la historia de la radio, del primer año al último, como una línea de verdad:
   un riel con un punto por año. En el celular el riel baja por la izquierda; en
   pantalla ancha los años van en fila, colgados de una sola línea, como el dial,
   y cada renglón (año, título, texto, fuente) queda a la misma altura en todas
   las columnas (David, 29/10: «está bien pero desprolija») */
/* el aire de arriba ya lo pone la cabecera: el padding va de un solo lado */
.radio-historia { padding-block: 0; }
.radio-hitos { --punto-hito: 0.75rem; margin-top: var(--e-6); display: grid; }
.radio-hito { position: relative; display: grid; align-content: start; gap: var(--e-1); padding: 0 0 var(--e-6) var(--e-6); }
.radio-hito::before, .radio-hito::after { content: ""; position: absolute; background: var(--linea); }
.radio-hito::before { left: calc(var(--punto-hito) / 2 - 1px); top: 0.5rem; bottom: 0; width: 2px; }
.radio-hito:last-child { padding-bottom: 0; }
.radio-hito:last-child::before { display: none; }
.radio-hito::after { left: 0; top: calc(0.5rem - var(--punto-hito) / 2); width: var(--punto-hito); height: var(--punto-hito); border-radius: 50%; box-shadow: 0 0 0 4px var(--fondo); }
.radio-hito-cuando {
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-titular-chico); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--resalte); font-variant-numeric: tabular-nums;
}
.radio-hito-titulo { margin-top: var(--e-2); font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
.radio-hito-texto { margin-top: var(--e-1); max-width: 60ch; font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2); text-wrap: pretty; }
/* desde 1280: abajo de eso, palabras como #PingPongALaCalle no entran en la columna */
@media (min-width: 1280px) {
  /* una columna por año, sin importar cuántos sean; los cuatro renglones se
     comparten (subgrid), así los títulos y los textos arrancan parejos */
  .radio-hitos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto); column-gap: var(--e-5); }
  .radio-hito { grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; padding: calc(var(--punto-hito) + var(--e-5)) 0 0; }
  .radio-hito::before { left: 0; right: calc(-1 * var(--e-5)); top: calc(var(--punto-hito) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
  .radio-hito:last-child::before { display: block; right: 0; }
  .radio-hito::after { top: 0; }
  .radio-hito .hito-fuente { align-self: end; }
}
/* tres fotos de la radio: en el celular, una grande y dos abajo */
.radio-fotos { margin-top: var(--e-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-3); align-items: start; }
.radio-foto:first-child { grid-column: 1 / -1; }
.radio-foto img { aspect-ratio: 4 / 3; object-fit: cover; }
/* la grande, a sangre en el celular; el epígrafe sigue en el canal */
.radio-foto:first-child { margin-inline: calc(-1 * var(--canal)); }
.radio-foto:first-child figcaption { padding-inline: var(--canal); }
@media (min-width: 768px) {
  .radio-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-4); }
  .radio-foto:first-child { grid-column: auto; margin-inline: 0; }
  .radio-foto:first-child figcaption { padding-inline: 0; }
}

.notas { padding-block: var(--e-seccion); }
/* el archivo es un índice de diario: un filete por nota y, la que tiene foto, su
   miniatura al costado. Las que no tienen van en texto: los renglones parejos no dejan huecos */
/* tantas columnas como entren de 21rem: una en el celular, dos en la tableta,
   tres en la compu, y en el medio lo que dé la ventana */
.notas-lista {
  margin-top: var(--e-4); display: grid; border-bottom: 1px solid var(--filete);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); column-gap: var(--e-6);
}
.nota { border-top: 1px solid var(--filete); container-type: inline-size; }
.nota-enlace { display: grid; align-items: start; gap: var(--e-3); padding-block: var(--e-3); text-decoration: none; color: inherit; }
.nota-enlace:has(> .nota-foto) { grid-template-columns: 5rem minmax(0, 1fr); }
.nota-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-borde); background: var(--fondo-3); }
/* con lugar, la miniatura crece y pasa a 4:3 */
@container (min-width: 24rem) {
  .nota-enlace:has(> .nota-foto) { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .nota-foto { aspect-ratio: 4 / 3; }
}
.nota-texto { display: grid; gap: var(--e-2); }
.nota-titulo {
  font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-nota);
  line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance;
  text-decoration: underline 0.085em transparent; text-underline-offset: 0.12em;
}
.nota-resumen { font-family: var(--fuente-lectura); font-size: var(--t-chico); line-height: var(--interlineado); color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .nota-enlace:hover .nota-titulo { text-decoration-color: currentColor; } }
/* en el celular entran cinco notas por pantalla y no dos: el titular en la letra
   angosta de la radio, y el resumen espera adentro de la nota */
@media (max-width: 639px) {
  .nota-texto { gap: var(--e-1); }
  .nota-titulo { font-family: var(--fuente-titular); font-weight: 700; font-size: var(--t-titular-chico); line-height: 1.08; letter-spacing: 0.005em; }
  .nota-resumen { display: none; }
}
@media (min-width: 640px) {
  .notas-lista { margin-top: var(--e-6); }
  .nota-enlace { gap: var(--e-4); padding-block: var(--e-4) var(--e-5); }
}
@media (min-width: 1024px) {
  .radio-cabeza { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--e-6); }
  .radio-cabeza .radio-logo { width: 128px; }
  .radio-cabeza .pagina-titulo { white-space: nowrap; }
  .radio-cabeza .seccion-bajada { grid-column: auto; justify-self: end; }
}

/* con el dedo, todo el renglón (con el año) es el link y mide 44 px: no se abre la nota de al lado */

/* una nota, para leer */
.leer-dentro { width: 100%; max-width: calc(var(--ancho-lectura) + 2 * var(--canal)); margin-inline: auto; padding-inline: var(--canal); }
.leer-cabeza { padding-block: var(--e-5) var(--e-6); }
.leer-firma { margin-top: var(--e-5); }
.leer-cabeza .radio-logo { width: 112px; margin-top: var(--e-6); }
.leer-cabeza .radio-logo + .leer-firma { margin-top: var(--e-4); }
.leer-titulo {
  margin-top: var(--e-3);
  font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.015em;
  text-wrap: balance;
}
.leer-resumen { margin-top: var(--e-4); font-family: var(--fuente-lectura); font-style: italic; font-size: var(--t-bajada); line-height: var(--interlineado); color: var(--tinta-2); }
.leer-foto { max-width: calc(var(--ancho-foto-nota) + 2 * var(--canal)); margin-inline: auto; padding-inline: var(--canal); }
.leer-img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: var(--radio-borde); background: var(--fondo-3); }
.leer-foto figcaption { margin-top: var(--e-2); font-size: var(--t-meta); color: var(--tinta-3); }
/* la miniatura que guardó el Archive, a su tamaño, sobre la cartela */
.leer-foto-chica .leer-img { display: block; width: auto; max-width: 100%; margin-inline: auto; border: 3px solid var(--blanco); box-shadow: 0 6px 18px var(--velo); }
.leer-foto-chica {
  max-width: var(--ancho-lectura); padding-block: var(--e-6); background: var(--cartela);
  border-radius: var(--radio-borde);
}
@media (max-width: 759px) { .leer-foto-chica { margin-inline: var(--canal); } }
.leer-cuerpo { padding-block: var(--e-6); }
.leer-cuerpo p { font-family: var(--fuente-lectura); font-size: var(--t-lectura); line-height: var(--interlineado); max-width: 66ch; }
.leer-cuerpo p + p { margin-top: 0.9em; }
.leer-pie { padding-bottom: var(--e-seccion); }
/* mientras suena abajo, la nota se corre a la izquierda y deja libre la franja del
   acoplado: los renglones no pasan por debajo del video. Se corre lo justo para que
   la foto ancha tampoco quede debajo; en una pantalla muy ancha, nada. Se corre de
   una vez: animar el padding rearmaría los renglones en cada cuadro */
@media (min-width: 1024px), (min-width: 640px) and (max-height: 500px) {
  body:has(#reproductor.acoplado) .leer {
    padding-right: clamp(0px, 2 * var(--acoplado-reserva) + var(--ancho-foto-nota) + 2 * var(--canal) - 100vw, var(--acoplado-reserva));
  }
}
.leer-fuente { padding-top: var(--e-5); border-top: 2px solid var(--linea); font-size: var(--t-chico); color: var(--tinta-2); }
.leer-original { margin-top: var(--e-1); }
.leer-vecinas { margin-top: var(--e-6); display: grid; border-bottom: 1px solid var(--filete); }
.leer-vecinas > span:empty { display: none; }
.nota-vecina {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-1) var(--e-4); padding: var(--e-3) 0;
  border-top: 1px solid var(--filete);
  text-decoration: none; font-size: var(--t-cuerpo); line-height: 1.35;
}
.nota-vecina > .icono { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; }
.nota-vecina > span { grid-column: 1; }
.nota-vecina > span:last-child { font-family: var(--fuente-titulo); text-wrap: balance; }
@media (min-width: 640px) {
  .leer-vecinas { grid-template-columns: 1fr 1fr; gap: var(--e-3); border-bottom: 0; }
  .leer-vecinas > span:empty { display: block; }
  .nota-vecina {
    grid-template-columns: minmax(0, 1fr); align-items: normal; padding: var(--e-4) var(--e-5) var(--e-5);
    background: var(--tarjeta); border-top: 0; box-shadow: 0 1px 3px var(--sombra), 0 1.5rem 2.5rem -1.75rem var(--sombra);
  }
  .nota-vecina > .icono { display: none; }
  .nota-vecina > span:last-child { text-decoration: underline; text-decoration-thickness: 0.085em; text-underline-offset: 0.12em; }
  .nota-vecina:last-child { text-align: right; }
  .nota-vecina:last-child .meta { justify-content: flex-end; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 640px) { .nota-vecina:hover > span:last-child { text-decoration-color: var(--linea, currentColor); } }

/* los momentos de la radio: los links que manda Tano, arriba de la historia */
.momentos { padding-block: 0 var(--e-seccion); }
/* en el celular, una fila que se desliza con el dedo y deja asomar la que sigue */
.momentos-lista {
  display: flex; gap: var(--e-3); margin-top: var(--e-5);
  margin-inline: calc(var(--canal) * -1); padding-inline: var(--canal); scroll-padding-inline: var(--canal);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.momentos-lista::-webkit-scrollbar { display: none; }
.momento { flex: 0 0 min(68%, 260px); scroll-snap-align: start; }
.momento-enlace { display: grid; gap: var(--e-2); text-decoration: none; color: inherit; }
.momento-foto .play { position: absolute; left: var(--e-2); bottom: var(--e-2); width: 36px; height: 36px; }
.momento-foto { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio-borde); background: var(--cartela); }
.momento-foto img { width: 100%; height: 100%; object-fit: cover; }
.momento-titulo { font-weight: 500; font-size: var(--t-cuerpo); line-height: 1.3; text-wrap: pretty; }
@media (min-width: 760px) {
  .momentos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); margin-inline: 0; padding-inline: 0; overflow: visible; }
}
@media (min-width: 1024px) { .momentos-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* los shorts de Pequeño Yo: en el celular, una fila que se desliza y deja asomar el
   que sigue; con más lugar, una fila entera. La tapa va vertical, como el video */
/* el aire de arriba ya lo da .ahora; abajo separa los shorts de los episodios */
.shorts { padding-block: 0 var(--e-seccion); }
.shorts-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-4); }
.shorts-carril { position: relative; margin-top: var(--e-5); container-type: inline-size; }
/* como en YouTube: tapas 2:3 y cuántas entran según el ancho, con la siguiente asomando en el celular */
.shorts-lista, .shorts-flecha { --short-hueco: var(--e-3); --short-ancho: 44cqw; }
.shorts-lista {
  display: flex; gap: var(--short-hueco); list-style: none;
  margin-inline: calc(var(--canal) * -1); padding-inline: var(--canal); scroll-padding-inline: var(--canal);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.shorts-lista::-webkit-scrollbar { display: none; }
.short { flex: 0 0 var(--short-ancho); scroll-snap-align: start; }
.short-boton { display: grid; align-content: start; gap: var(--e-3); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: scale 140ms ease-out; }
.short-boton:active { scale: 0.98; }
.short-foto { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radio-short); background: var(--velo); }
.short-foto img { width: 100%; height: 100%; object-fit: cover; }
.shorts-flecha { display: none; }
.short-titulo { display: block; overflow-wrap: anywhere; font-weight: 500; font-size: var(--t-cuerpo); line-height: 1.3; text-wrap: pretty; }

/* el visor: en el celular ocupa toda la pantalla, con los controles al alcance del
   pulgar; con más lugar, el video centrado sobre el velo */
.short-abierto { overflow: hidden; }
.short-visor {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--negro); color: var(--blanco); overflow: hidden;
}
.short-visor[open] { display: flex; flex-direction: column; align-items: center; }
.short-visor::backdrop { background: var(--pizarron-sombra); }
.short-visor-marco { flex: 1 1 auto; display: flex; justify-content: center; width: 100%; min-height: 0; padding-top: env(safe-area-inset-top); }
.short-visor-marco iframe { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 9 / 16; border: 0; }
.short-visor-barra {
  flex: none; display: flex; align-items: center; gap: var(--e-1); width: 100%; max-width: 32rem;
  padding: var(--e-1) var(--e-2) calc(var(--e-1) + env(safe-area-inset-bottom));
}
.short-visor-titulo { flex: 1; min-width: 0; margin: 0; font-size: var(--t-chico); line-height: 1.25; text-align: center; text-wrap: balance; color: var(--blanco); }
.short-control { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--blanco); font-size: var(--t-h2); line-height: 1; cursor: pointer; }
.short-control:active { background: var(--gris-boton); }
.short-control:focus-visible { outline: 2px solid var(--blanco); outline-offset: -2px; }
@media (min-width: 760px) {
  .shorts-lista, .shorts-flecha { --short-ancho: calc((100cqw - 2 * var(--short-hueco)) / 3); }
  .shorts-lista { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .shorts-flecha {
    position: absolute; z-index: 1; top: calc(var(--short-ancho) * 0.75 - 22px); right: -22px;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: var(--fondo-3); color: var(--tinta);
    box-shadow: 0 2px 8px var(--sombra); cursor: pointer; transition: scale 140ms ease-out, background-color 140ms ease-out;
  }
  .shorts-flecha[hidden] { display: none; }
  .shorts-flecha-antes { right: auto; left: -22px; }
  .shorts-flecha:active { scale: 0.94; }
  .shorts-flecha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
  .short-visor { width: min(26rem, 92vw); height: min(92dvh, 52rem); margin: auto; border-radius: var(--radio-borde); }
}
@media (min-width: 1024px) { .shorts-lista, .shorts-flecha { --short-ancho: calc((100cqw - 3 * var(--short-hueco)) / 4); } }
@media (min-width: 1280px) { .shorts-lista, .shorts-flecha { --short-ancho: calc((100cqw - 4 * var(--short-hueco)) / 5); } }
@media (hover: hover) {
  .short-control:hover { background: var(--gris-boton); }
  .shorts-flecha:hover { background: var(--gris-boton); }
  .short-boton:hover .short-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .short-boton { transition: none; } }

/* los programas que condujo: filas con su miniatura, como las tandas de la portada */
.programas { padding-top: var(--e-seccion); }
.programas-lista { margin-top: var(--e-4); }
.programas .novedad-enlace { align-items: center; min-height: 44px; }
/* el programa sin miniatura lleva el pájaro de la radio */
.programa-pajaro {
  position: absolute; right: 8%; bottom: -6%; height: 78%; aspect-ratio: 106 / 98; background: var(--acento-radio);
  -webkit-mask: url("../img/radio/pajaro.svg") center / contain no-repeat; mask: url("../img/radio/pajaro.svg") center / contain no-repeat;
}
.programa-texto { display: grid; gap: var(--e-1); min-width: 0; }
.programa-nombre { font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: 1.2; text-wrap: balance; }
.programa-detalle { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-meta); color: var(--tinta-3); }
.programa-detalle .icono { flex: none; width: 0.9rem; height: 0.9rem; }
@media (min-width: 760px) {
  .programas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
}

/* ── Escritos: lo que Tano escribe solo para el sitio, con el aire de portal
   de la revista (la opción C, la que eligió): titulares angostos en mayúscula,
   la sección en violeta y una foto por escrito. Es del marco, con las tarjetas
   de la A: el último arriba y grande, los demás como titulares con su foto
   chica. Cada escrito se lee como una nota ─────────────────────────────── */

.pagina-escritos .cabecera .pagina-titulo {
  padding-bottom: var(--e-3); border-bottom: 3px solid var(--tinta);
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-cabezal); line-height: 0.88; letter-spacing: 0.005em; text-transform: uppercase;
}
.escritos { padding-bottom: var(--e-seccion); }
.escritos-lista { display: grid; gap: var(--e-4); }
.escrito-enlace { display: grid; grid-template-columns: 6.5rem 1fr; text-decoration: none; transition: scale 140ms ease-out; }
.escrito-enlace.tarjeta { padding: 0; overflow: hidden; }
.escrito-enlace:active { scale: 0.99; }
.escrito-foto { display: block; position: relative; overflow: hidden; background: var(--fondo-3); }
.escrito-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--curva); }
.escrito .escrito-foto { min-height: 6.5rem; }
/* sin foto: el recuadro violeta con la sección, como las tapas de la revista */
.escrito-tapa {
  display: grid; place-items: center; padding: var(--e-2); background: var(--violeta-hondo); color: var(--blanco);
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-chico); line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere;
}
.escrito-texto { display: grid; align-content: start; gap: var(--e-2); padding: var(--e-4); }
.escrito-volanta, .escrito-etiqueta {
  font-size: var(--t-meta); font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
}
.escrito-volanta { color: var(--acento-escritos); }
.escrito-titulo {
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-titular-chico); line-height: 0.98; letter-spacing: 0.04em; text-transform: uppercase;
  text-wrap: balance; transition: color 200ms ease-out;
}
.escrito-texto .meta { margin-top: var(--e-1); }
/* el último: grande, con la foto arriba y la sección encima de la foto */
.escrito-principal .escrito-enlace { grid-template-columns: 1fr; margin-inline: calc(-1 * var(--canal)); box-shadow: none; }
.escrito-cuadro { position: relative; display: block; }
.escrito-principal .escrito-foto { aspect-ratio: 16 / 9; }
.escrito-principal .escrito-tapa { font-size: var(--t-titular); }
.escrito-etiqueta { position: absolute; top: 0; left: 0; padding: 6px 12px; background: var(--violeta); color: var(--blanco); }
.escrito-principal .escrito-texto { gap: var(--e-3); padding: var(--e-5) var(--canal); }
.escrito-principal .escrito-titulo { font-size: var(--t-titular); line-height: 0.94; }
.escrito-resumen { max-width: 52ch; font-family: var(--fuente-lectura); font-size: var(--t-bajada); line-height: var(--interlineado); color: var(--tinta-2); text-wrap: pretty; }
/* los escritos de la demo: se ven marcados para que nadie los lea como suyos */
.etiqueta-ejemplo, .aviso-ejemplo {
  display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--radio-boton);
  font-size: var(--t-meta); font-weight: 500; line-height: 1.3; color: var(--tinta-2);
}
.aviso-ejemplo { margin-top: var(--e-4); }
.escrito-texto .etiqueta-ejemplo { justify-self: start; }
@media (hover: hover) and (pointer: fine) {
  .escrito-enlace:hover .escrito-titulo { color: var(--acento-escritos); }
  .escrito-enlace:hover .escrito-foto img { scale: 1.04; }
}
@media (min-width: 768px) {
  .escritos-lista { grid-template-columns: 1fr 1fr; gap: var(--e-5); }
  .escrito-principal { grid-column: 1 / -1; }
  .escrito-principal .escrito-enlace { grid-template-columns: 7fr 5fr; margin-inline: 0; box-shadow: 0 1px 3px var(--sombra), 0 1.5rem 2.5rem -1.75rem var(--sombra); }
  .escrito-principal .escrito-foto { aspect-ratio: auto; height: 100%; min-height: 24rem; }
  .escrito-principal .escrito-texto { align-content: center; padding: var(--e-7) var(--e-6); }
  .escrito-enlace { grid-template-columns: 9.5rem 1fr; }
  .escrito .escrito-foto { min-height: 9.5rem; }
  .escrito-texto { padding: var(--e-5); }
}

/* Más escritos: después de los destacados, la lista de un portal de noticias.
   Arriba, el filete grueso de una sección de diario; entre fila y fila, uno
   fino. Cada fila, la sección, el título, una línea del resumen y la fecha, con
   la foto chica a la derecha */
.escritos-mas { margin-top: var(--e-8); }
.escritos-mas-titulo {
  padding-top: var(--e-2); border-top: 4px solid var(--acento-escritos);
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-h2); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
}
.escritos-filas { margin-top: var(--e-2); }
.escrito-fila + .escrito-fila { border-top: 1px solid var(--filete); }
.escrito-fila-enlace {
  display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: var(--e-4); align-items: start;
  padding-block: var(--e-5); text-decoration: none;
}
.escrito-fila-texto { display: grid; align-content: start; gap: var(--e-2); }
.escrito-fila-titulo {
  font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-titular-chico); line-height: 0.98; letter-spacing: 0.04em; text-transform: uppercase;
  text-wrap: balance; transition: color 200ms ease-out;
}
.escrito-fila-resumen { max-width: 60ch; font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2); text-wrap: pretty; }
.escrito-fila-texto .meta { margin-top: var(--e-1); }
.escrito-fila-texto .etiqueta-ejemplo { justify-self: start; }
.escrito-fila .escrito-foto { aspect-ratio: 1; }
@media (hover: hover) and (pointer: fine) {
  .escrito-fila-enlace:hover .escrito-fila-titulo { color: var(--acento-escritos); }
  .escrito-fila-enlace:hover .escrito-foto img { scale: 1.04; }
}
@media (min-width: 768px) {
  .escrito-fila-enlace { grid-template-columns: minmax(0, 1fr) 12.5rem; gap: var(--e-6); padding-block: var(--e-6); }
  .escrito-fila .escrito-foto { aspect-ratio: 4 / 3; }
}
/* en escritorio, el nombre de la sección queda en su columna, a la izquierda y
   fijo mientras bajan las filas, como en un diario */
@media (min-width: 1024px) {
  .escritos-mas {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--e-7);
    padding-top: var(--e-2); border-top: 4px solid var(--acento-escritos);
  }
  .escritos-mas-titulo { position: sticky; top: calc(var(--barra-alto) + var(--e-5)); align-self: start; margin-top: var(--e-5); padding-top: 0; border-top: 0; }
  .escritos-filas { margin-top: 0; }
  .escrito-fila:first-child .escrito-fila-enlace { padding-top: var(--e-5); }
}

/* un escrito, adentro: el titular angosto, la sección arriba, su foto y su nota de voz */
.leer-escrito .escrito-volanta { margin-top: var(--e-5); }
.leer-escrito .aviso-ejemplo + .escrito-volanta { margin-top: var(--e-4); }
.leer-escrito .leer-titulo { font-family: var(--fuente-titular); font-weight: 800; font-size: var(--t-titular); line-height: 0.94; letter-spacing: 0.005em; text-transform: uppercase; }
.leer-escrito .escrito-volanta + .leer-titulo { margin-top: var(--e-2); }
.leer-foto-cuadro { aspect-ratio: 16 / 9; }
.escrito-audio { padding-top: var(--e-6); }
.escrito-audio-rotulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-chico); font-weight: 500; color: var(--acento-escritos); }
.escrito-audio-rotulo .icono { width: 20px; height: 20px; }
.escrito-audio audio { display: block; width: 100%; margin-top: var(--e-3); }

/* todavía sin escritos: una hoja casi en blanco, con el aviso arriba y la línea
   de abajo al pie, sobre otra corrida. Es de papel en los dos temas (de noche, un
   poco más apagada). La de atrás asoma porque la sección se aísla; la
   suscripción es la del pie */
.escritos { isolation: isolate; }
.hoja {
  --tinta: var(--grafito); --tinta-2: var(--grafito-2); --tinta-3: var(--grafito-3);
  --foco: var(--grafito); --resalte: var(--grafito);
  position: relative;
  padding: var(--e-6) var(--e-5) var(--e-6);
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 1px 2px var(--hoja-sombra), 0 1.25rem 2.5rem -1.5rem var(--hoja-sombra);
}
.hoja::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--papel-tenue);
  rotate: -2.2deg; translate: 3px 6px;
  box-shadow: 0 1px 2px var(--hoja-sombra);
}
:root[data-tema="oscuro"] .hoja { background: var(--papel-tenue); }
:root[data-tema="oscuro"] .hoja::before { background: var(--papel-gastado); }
.hoja-frase {
  margin-top: var(--e-5); max-width: 24ch;
  font-size: var(--t-frase); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
}
.hoja-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); margin-top: var(--e-6); font-size: var(--t-chico); line-height: 1.5; color: var(--tinta-2); }
.escritos-vacio { display: flex; flex-direction: column; max-width: 46rem; min-height: 15rem; }
.escritos-vacio .hoja-frase { margin-top: 0; }
.escritos-vacio .hoja-pie { margin-top: auto; padding-top: var(--e-6); }
@media (min-width: 768px) {
  .hoja { padding: var(--e-8) var(--e-8) var(--e-7); }
  .escritos-vacio { min-height: 21rem; }
}

/* un escrito: sin fuente que citar, el pie empieza en los vecinos */
.leer-escrito .leer-vecinas { padding-top: var(--e-6); border-top: 2px solid var(--filete); }

/* ── Sobre mí ─────────────────────────────────────────────────────────── */

/* en el celular la foto arranca pegada a la barra y a sangre: es la tapa de la página */
.sobre { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); padding-block: 0 var(--e-seccion); }
.sobre-foto { margin-inline: calc(-1 * var(--canal)); }
.sobre-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-borde); }
.sobre-bio {
  margin-top: var(--e-4); max-width: 34ch;
  font-family: var(--fuente-lectura); font-size: var(--t-cita); line-height: 1.4; color: var(--tinta);
  text-wrap: pretty;
}
.sobre .acciones { margin-top: var(--e-6); }
/* celular bajo (660): la foto pasa a apaisada para que «Escribirme» entre en la pantalla */
@media (max-width: 599px) and (max-height: 700px) {
  .sobre-foto img { aspect-ratio: 3 / 2; object-position: 50% 55%; }
}
@media (min-width: 640px) { .sobre-foto img { aspect-ratio: 3 / 2; } }
@media (min-width: 900px) {
  .sobre { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--e-8); padding-top: var(--e-seccion); }
  .sobre-foto { margin-inline: 0; }
  .sobre-foto img { aspect-ratio: 1; }
}
/* el celular apaisado: la foto de Tano y la tapa del libro van al costado,
   como en escritorio; arriba de todo ocupaban dos pantallas */
@media (max-width: 899px) and (min-width: 640px) and (max-height: 500px) {
  .sobre, .libro-portada { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--e-6); padding-top: var(--e-5); }
  .libro-portada > div { display: block; }
  .libro-portada .libro-tapa { grid-row: auto; }
  .sobre-foto { margin-inline: 0; }
  .sobre-foto img { aspect-ratio: 1; }
}

/* la historia, de año en año: cada hito lleva el color de su mundo */
/* abajo, el último hito ya trae su aire */
.historia { padding-block: var(--e-seccion) var(--e-6); }
.historia-lista { margin-top: var(--e-6); display: grid; }
.hito {
  display: grid; grid-template-columns: 1fr; gap: var(--e-2);
  padding: var(--e-5) var(--canal); margin-inline: calc(-1 * var(--canal));
  border-top: 1px solid var(--filete);
}
/* un solo fondo para toda la línea: de qué mundo es cada año lo dice una marca de color */
.hito-pizarron { --marca: var(--amarillo); }
.hito-libro { --marca: var(--acento-delirante); }
.hito-radio { --marca: var(--acento-radio); }
.hito-tano { --marca: var(--tinta); }
.hito-cuando { display: flex; align-items: baseline; gap: 0.5em; font-weight: 500; font-size: var(--t-chico); line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.hito-cuando::before { content: ""; flex: none; width: 0.7em; height: 0.7em; background: var(--marca); }
.hito-titulo { font-size: var(--t-h3); font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: -0.005em; line-height: 1.25; text-wrap: balance; }
.hito-texto { margin-top: var(--e-1); max-width: 60ch; font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2); }
/* la fuente se lee chica, pero se toca con los 44 px de siempre */
.hito-fuente { font-size: var(--t-meta); color: var(--tinta-3); }
.hito-fuente a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.hito-enlace { margin-top: var(--e-1); }
.hito-foto { margin-top: var(--e-4); max-width: 480px; }
@media (min-width: 760px) {
  .hito { grid-template-columns: 9rem 1fr; gap: var(--e-6); padding-inline: var(--e-5); margin-inline: calc(-1 * var(--e-5)); }
  .hito-cuando { font-size: var(--t-h3); }
}
/* en pantalla ancha la foto del hito va al costado del texto */
@media (min-width: 1024px) {
  .con-foto .hito-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--e-7); align-content: start; }
  .con-foto .hito-cuerpo > * { grid-column: 1; }
  .con-foto .hito-foto { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* proyectos: una ficha por mundo */
.proyectos { padding-block: var(--e-seccion); }
.proyectos { container-type: inline-size; }
.proyectos-lista { margin: var(--e-5) 0 0; display: grid; gap: var(--e-3); }
@container (min-width: 34rem) {
  .proyectos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
}
/* tarjetas de verdad: toda la ficha es el link, se levanta con el puntero y se hunde con el dedo */
.proyecto {
  position: relative; display: grid; align-content: start; gap: var(--e-2);
  padding: var(--e-5);
  box-shadow: 0 1px 3px var(--sombra), 0 1.5rem 2.5rem -1.75rem var(--sombra);
  transition: translate 260ms var(--curva), scale 160ms var(--curva), box-shadow 260ms var(--curva);
}
.proyecto .enlace-flecha { position: static; }
.proyecto .enlace-flecha::after { content: ""; position: absolute; inset: 0; }
.proyecto .enlace-flecha svg { transition: translate 260ms var(--curva); }
.proyecto:has(:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.proyecto .enlace-flecha:focus-visible { outline: 0; }
@media (prefers-reduced-motion: no-preference) {
  .proyecto:active { scale: 0.985; }
  @media (hover: hover) and (pointer: fine) {
    .proyecto:hover { translate: 0 -6px; box-shadow: 0 2px 6px var(--sombra), 0 2.5rem 3rem -1.75rem var(--sombra); }
    .proyecto:hover .enlace-flecha svg { translate: 3px 0; }
  }
}
.proyecto-cuando { font-size: var(--t-meta); font-weight: 500; color: var(--tinta-3); }
.proyecto-nombre { font-size: var(--t-h2); font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
.proyecto-texto { font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: var(--interlineado); color: var(--tinta-2); max-width: 40ch; }
.proyecto .enlace-flecha { margin-top: auto; align-self: end; }
.proyecto.mundo-pizarron, .proyecto.mundo-libro, .proyecto.mundo-radio { background: var(--fondo); }
.proyecto.mundo-kawsay {
  --fondo: var(--kawsay); --tinta: var(--blanco); --tinta-2: var(--kawsay-tinta-2); --tinta-3: var(--kawsay-tinta-3); --foco: var(--blanco);
  background: var(--fondo); color: var(--tinta);
}
@media (min-width: 760px) {
  .proyectos-lista { margin: var(--e-6) 0 0; }
  .proyecto { min-height: 240px; }
}

/* mentorías: una franja corta, con la línea y el botón para escribir */
/* el aire de arriba lo deja Lo que hago hoy y el de abajo, la historia */
.mentorias { display: grid; justify-items: start; gap: var(--e-3); }
.mentorias .seccion-bajada { max-width: 46ch; }
.mentorias .acciones { margin-top: var(--e-2); }

/* agenda */
.agenda { padding-block: var(--e-seccion); }
.agenda-lista { margin-top: var(--e-5); border-top: 1px solid var(--filete); }
/* sin fechas por venir, la lista no se ve (ni su filete): queda el aviso */
.agenda-lista:not(:has(.fecha:not([hidden]))) { display: none; }
.fecha { display: grid; gap: var(--e-2); padding-block: var(--e-4); border-bottom: 1px solid var(--filete); }
.fecha[hidden] { display: none; }
.fecha-dia { display: flex; gap: var(--e-2); font-weight: 500; font-size: var(--t-h3); font-variant-numeric: tabular-nums; }
.fecha-dia span { color: var(--tinta-3); font-weight: 500; }
.fecha-titulo { font-size: var(--t-h3); font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.25; }
.fecha-lugar { font-size: var(--t-chico); color: var(--tinta-2); }
.agenda-vacia { margin-top: var(--e-4); max-width: 52ch; font-family: var(--fuente-lectura); font-size: var(--t-bajada); color: var(--tinta-2); }
.agenda.con-fechas .agenda-vacia { display: none; }
/* lo de todas las semanas: arriba, con el punto amarillo de Pequeño Yo */
.fecha-siempre .fecha-dia::before { content: ""; flex: none; align-self: center; width: 0.6em; height: 0.6em; background: var(--amarillo); }
@media (min-width: 760px) { .fecha { grid-template-columns: 12rem 1fr auto; align-items: center; gap: var(--e-5); } }

/* el final de Tanito: las próximas fechas y el contacto. Sin fechas a la vista,
   en pantalla ancha van lado a lado: la agenda vacía es una línea y no deja hueco */
.cierre { display: grid; gap: var(--e-7) var(--e-8); padding-block: var(--e-seccion); }
/* Tanito: entre bloques del mismo fondo, el aire va de un solo lado */
.sobre + .proyectos, .proyectos + .historia, .historia + .cierre { padding-top: 0; }
.cierre > .agenda, .cierre > .contacto-seccion { padding-block: 0; }
@media (min-width: 960px) {
  .cierre:not(:has(.fecha:not([hidden]))) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* contacto */
.contacto-seccion { padding-block: var(--e-seccion); }
.contacto-lista { margin-top: var(--e-4); display: grid; border-bottom: 1px solid var(--filete); }
.contacto {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 4.5rem; padding: var(--e-3) 0;
  border-top: 1px solid var(--filete);
  text-decoration: none;
  transition: scale 140ms ease-out;
}
.contacto .icono { flex: none; width: 24px; height: 24px; }
.contacto > span { display: grid; flex: 1; min-width: 0; }
.contacto > .icono:last-child { width: 20px; height: 20px; }
.contacto strong { font-size: var(--t-h3); font-family: var(--fuente-titulo); font-weight: 400; line-height: 1.3; }
.contacto span span { font-size: var(--t-chico); color: var(--tinta-2); }
@media (min-width: 640px) {
  .contacto-lista { margin-top: var(--e-5); grid-template-columns: repeat(2, minmax(0, 360px)); gap: var(--e-3); border-bottom: 0; }
  .contacto { min-height: 80px; padding: var(--e-4) var(--e-5); background: var(--tarjeta); border-top: 0; box-shadow: 0 1px 3px var(--sombra), 0 1.5rem 2.5rem -1.75rem var(--sombra); }
  .contacto .icono { width: 26px; height: 26px; }
  .contacto > span { flex: none; }
  .contacto > .icono:last-child { display: none; }
  .contacto strong { text-decoration: underline; text-decoration-thickness: 0.085em; text-underline-offset: 0.12em; }
}

/* ── la página de un episodio: la misma pieza que arriba en Pequeño Yo, con el
   link para volver a todos y, abajo, el anterior y el siguiente ─────────── */

.episodio-cabeza { padding-block: var(--e-4); }
.pagina-episodio .ahora { padding-bottom: var(--e-7); }
.episodio-vecinas { margin-top: 0; }
@media (min-width: 1024px) {
  .episodio-cabeza + .episodio { padding-top: var(--e-5); }
}

/* ── el kit de prensa: para copiar y bajar, sin adornos ────────────────── */

.prensa { padding-block: var(--e-5) var(--e-seccion); }
.prensa-cabeza .pagina-titulo { margin-top: var(--e-4); }
.prensa-cabeza .acciones { margin-top: var(--e-5); }
.prensa-bloque { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 2px solid var(--filete); }
.prensa-bloque-cabeza {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e-4);
}
.prensa-texto {
  margin-top: var(--e-3); max-width: 66ch;
  font-family: var(--fuente-lectura); font-size: var(--t-lectura); line-height: var(--interlineado); color: var(--tinta);
  text-wrap: pretty;
}
.prensa-texto p + p { margin-top: 0.75em; }
/* cada foto entera, en su forma: se baja la original */
.prensa-fotos { margin-top: var(--e-5); columns: 2; column-gap: var(--e-4); }
.prensa-foto { break-inside: avoid; margin-bottom: var(--e-5); }
.prensa-foto img { width: 100%; background: var(--fondo-2); }
.prensa-foto .enlace-flecha { margin-top: var(--e-1); }
.prensa-medida { color: var(--tinta-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.prensa-contacto .contacto-lista { margin-top: var(--e-4); }
@media (min-width: 760px) {
  .prensa-fotos { columns: 3; column-gap: var(--e-5); }
}

/* ── al terminar una página, los otros pilares: cada uno con el color de su
   mundo, para seguir sin volver a la portada ──────────────────────────── */

.seguir { padding-block: var(--e-7) 0; }
.seguir-lista { margin: var(--e-4) calc(-1 * var(--canal)) 0; display: grid; }
.seguir-pilar { background: none; }
.seguir-enlace {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center;
  gap: var(--e-3) var(--e-4); height: 100%; min-height: 4.75rem; padding: var(--e-3) var(--canal);
  background: var(--fondo); color: var(--tinta); text-decoration: none;
  transition: translate 300ms var(--curva), scale 140ms ease-out;
}
.mundo-radio > .seguir-enlace { background: var(--cartela); color: var(--cartela-tinta); }
/* Escritos es de papel, como su hoja en la portada */
.tono-hoja {
  --fondo: var(--papel); --tinta: var(--grafito); --tinta-2: var(--grafito-2); --tinta-3: var(--grafito-3);
  --foco: var(--grafito); --resalte: var(--grafito); --sombra: var(--hoja-sombra);
}
:root[data-tema="oscuro"] .tono-hoja { --fondo: var(--papel-tenue); }
.seguir-nombre {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--fuente-titulo); font-size: var(--t-h3); line-height: 1.2;
}
.seguir-nombre .icono { width: 1.75rem; height: 1.75rem; color: var(--resalte); }
.seguir-nombre img { width: 2.5rem; height: 2.5rem; border-radius: 2px; box-shadow: 0 2px 6px var(--sombra); }
.seguir-pajaro {
  flex: none; width: 2rem; aspect-ratio: 106 / 98; background: var(--cartela-pajaro);
  -webkit-mask: url("../img/radio/pajaro.svg") center / contain no-repeat; mask: url("../img/radio/pajaro.svg") center / contain no-repeat;
}
.seguir-texto { display: none; max-width: 36ch; font-size: var(--t-chico); line-height: 1.5; color: var(--tinta-2); }
.seguir-enlace > .icono { width: 20px; height: 20px; transition: translate 300ms var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .seguir-enlace:hover { translate: 0 -3px; }
  .seguir-enlace:hover > .icono { translate: 3px 0; }
  .seguir-enlace:hover .seguir-nombre > span:last-child { text-decoration: underline; text-decoration-thickness: 0.085em; text-underline-offset: 0.12em; }
}
.seguir-enlace:active { scale: 0.98; }
@media (min-width: 768px) {
  .seguir { padding-block: var(--e-seccion); }
  .seguir-lista { margin: var(--e-5) 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
  .seguir-enlace {
    align-content: space-between; align-items: end; min-height: 8.5rem; padding: var(--e-5);
    box-shadow: 0 1px 3px var(--sombra), 0 1.5rem 2.5rem -1.75rem var(--sombra);
  }
  .seguir-nombre { grid-column: 1 / -1; }
  .seguir-texto { display: block; }
}

/* ── pie: el cierre del sitio, a todo el ancho y en pizarrón en los dos temas:
   arriba la suscripción, después las redes y al final el nombre de punta a punta.
   El reproductor acoplado puede pisar el nombre; solo se agrega lugar si taparía
   un enlace o el campo de correo (--pie-extra lo calcula sitio.js) ──────────── */

.pie {
  border-top: 1px solid var(--filete);
  padding-block: var(--e-7) calc(var(--e-4) + var(--pie-extra, 0px) + env(safe-area-inset-bottom, 0px));
}
.pie-dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.pie-correo { display: grid; gap: var(--e-4); }
.pie-titulo { max-width: 16ch; font-size: var(--t-h2); line-height: 1.12; text-wrap: balance; }
.pie-bajada { margin-top: var(--e-3); max-width: 44ch; font-size: var(--t-chico); line-height: var(--interlineado); color: var(--tinta-2); text-wrap: pretty; }
/* el campo y el botón son una sola pieza */
.correo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.correo-fila .boton { min-height: 52px; padding-inline: var(--e-4); }
.correo-campo {
  min-height: 52px; width: 100%; min-width: 0; padding: 0 var(--e-4);
  font: inherit; font-size: var(--t-campo); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--tinta-3); border-right: 0; border-radius: var(--radio-boton) 0 0 var(--radio-boton); caret-color: var(--tinta);
}
.correo-campo::placeholder { color: var(--tinta-3); }
@media (hover: hover) and (pointer: fine) { .correo-campo:hover { border-color: var(--tinta-2); } }
.correo-campo:focus-visible { outline-offset: 2px; border-color: var(--tinta); }
.correo-campo[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.correo-estado { margin-top: var(--e-2); min-height: 1.5em; font-size: var(--t-chico); line-height: 1.5; color: var(--tinta-2); }
.correo-estado:empty { min-height: 0; margin: 0; }

.pie-linea { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); font-size: var(--t-chico); line-height: 1.5; }
.pie-redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-5); }
.pie-redes li { border-top: 1px solid var(--filete); }
.pie-redes li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pie-redes a { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 48px; text-decoration: none; }
.pie-redes .icono { flex: none; width: 16px; height: 16px; color: var(--tinta-3); }
/* el nombre de punta a punta: el tamaño sale del ancho de la pantalla */
.pie-nombre {
  margin-block: 0 calc(-1 * var(--e-5));
  font-family: var(--fuente-titulo); font-size: var(--t-firma); line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.pie-firma { color: var(--tinta-3); }
.pie-firma a { color: var(--tinta-2); }

@media (min-width: 960px) {
  .pie { padding-top: var(--e-8); overflow: clip; }
  .pie-dentro { gap: var(--e-7); container-type: inline-size; }
  .pie-correo { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: end; column-gap: var(--e-7); }
  .pie-titulo { max-width: none; }
  .pie-linea { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-7) var(--e-6); }
  .pie-redes { display: flex; flex-wrap: wrap; column-gap: var(--e-6); }
  .pie-redes li { border-top: 0; }
  .pie-redes a { justify-content: flex-start; min-height: 44px; }
  .pie-firma { grid-column: 2; grid-row: 1; }
  .pie-nombre { grid-column: 1 / -1; font-size: var(--t-firma-ancha); }
}
@media (hover: hover) and (pointer: fine) { .pie-redes a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; } }

/* ── respuesta al tocar: se hunde un poco con la propiedad scale, así no
   pisa las transformaciones que cada pieza ya tiene ────────────────────── */

.ep, .nota-enlace, .barra-boton, .reproductor-boton, .nota-vecina, .pieza:has(.pieza-enlace) { transition: scale 140ms ease-out; }
.ep:has(.ep-boton:active), .nota-enlace:active, .capitulo:active, .contacto:active, .nota-vecina:active,
.pieza:has(.pieza-enlace:active) { scale: 0.98; }
.barra-boton:active, .reproductor-boton:active { scale: 0.92; }
.marca:active { scale: calc(var(--marca-escala, 1) * 0.92); }
/* el resaltado de iOS está apagado: todo link responde al dedo enseguida */
@media (hover: none), (pointer: coarse) { :where(a:not(.boton)):active { opacity: 0.72; } }
/* la marca se achica y se funde con calma, no solo responde al toque */
.marca { transition: scale 280ms var(--curva), opacity 240ms var(--curva), translate 240ms var(--curva); }

/* ── la barra de lectura de las notas: se llena mientras se lee ───────── */

.lectura {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--linea, var(--tinta)); transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

/* ── movimiento ───────────────────────────────────────────────────────── */

/* el espiral de Pequeño Yo gira mientras suena uno de sus episodios: en la barra
   del reproductor, en la franja de la portada y en su tarjeta al pie de las otras
   páginas. En pausa queda donde paró */
@keyframes girar { to { rotate: 360deg; } }
.espiral { animation: girar 9s linear infinite paused; }
body:has(#reproductor.sonando.pequeno-yo) .espiral { animation-play-state: running; }

/* las fotos se descubren de abajo hacia arriba la primera vez que entran a la
   pantalla; las que ya se ven al cargar quedan como están. Las marca el JS
   (.por-descubrir), así que sin JS se ven todas */
[data-descubre] { overflow: hidden; }
[data-descubre] img, .pieza-foto img { transition: clip-path 1100ms var(--curva), scale 900ms var(--curva); }
.por-descubrir img { clip-path: inset(100% 0 0 0); }
.pieza-foto.por-descubrir img { scale: 1.08; }

/* entre páginas, un fundido corto: adentro del sitio lo pide el enrutador
   (startViewTransition) y al recargar, la navegación misma. El reproductor no
   lleva nombre propio: se funde con la página y sigue sonando. Con movimiento
   reducido el cambio es seco. Un pase que se aborta (la pantalla cambia de tamaño
   en el medio) lo atienden el script del head y el enrutador */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

/* al cambiar el tema el color nuevo se llena en círculo desde el botón, como en la
   web de DT System: acá la foto vieja queda quieta abajo y sitio.js abre la nueva.
   Sin ese pase (navegadores viejos), un fundido de los colores */
html.pase-tema::view-transition-old(root),
html.pase-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.pase-tema::view-transition-old(root) { z-index: 1; }
html.pase-tema::view-transition-new(root) { z-index: 2; }
html.tema-fundido, html.tema-fundido *, html.tema-fundido *::before, html.tema-fundido *::after {
  transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease, fill 500ms ease, stroke 500ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── al imprimir (el kit de prensa en una hoja o en PDF): sin el marco ni los
   botones, sin fondos, y los links de contacto con su dirección escrita ── */

@media print {
  /* lo que todavía no entró al bajar (las entradas lo ocultan por código) se imprime igual */
  main [style*="opacity"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .por-descubrir img { clip-path: none !important; scale: 1 !important; }
  .barra, .pie, .reproductor, .seguir, .saltar, .acciones, .enlace-volver, .enlace-copiar, .enlace-bajar, .enlace-compartir { display: none !important; }
  html, body, .tarjeta, .contacto, .nota-vecina { background: none !important; box-shadow: none !important; }
  .prensa { padding: 0; }
  .prensa-bloque { margin-top: var(--e-5); }
  .seccion-titulo, .pagina-titulo { break-after: avoid; }
  .prensa-fotos { columns: 3; }
  .prensa-foto { margin-bottom: var(--e-3); }
  .contacto { display: block; min-height: 0; padding: var(--e-2) 0; }
  .contacto .icono { display: none; }
  .contacto[href^="http"]::after { content: attr(href); display: block; font-size: var(--t-meta); }
  p { orphans: 2; widows: 2; }
}