/* Juan Gnarra — sitio personal.
   Cada cosa que hace Tano tiene su mundo, y el sitio los junta:
   - el marco (Tano): papel blanco y el verde de su Linktree; en oscuro, el 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, letra crema y serif;
   - Radio a la Calle: los colores de la radio, rescatados del sitio viejo.
   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. */

:root {
  /* paleta fija */
  --verde: oklch(0.24 0.037 177);
  --verde-2: oklch(0.3 0.037 176);
  --verde-filete: oklch(0.38 0.035 176);
  --menta: oklch(0.965 0.035 134);
  --menta-2: oklch(0.86 0.03 150);
  --menta-3: oklch(0.74 0.03 160);
  --amarillo: oklch(0.87 0.155 92);
  --amarillo-hover: oklch(0.92 0.13 95);
  --amarillo-tinta: oklch(0.2 0.03 92);
  --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: oklch(0.6 0.2 25);
  --radio-oscuro: oklch(0.46 0.17 25);
  --radio-fondo: oklch(0.97 0.008 60);
  --radio-fondo-2: oklch(0.935 0.014 60);
  --radio-fondo-3: oklch(0.9 0.02 60);
  --radio-filete: oklch(0.86 0.015 60);
  --radio-tinta: oklch(0.2 0.01 40);
  --radio-tinta-2: oklch(0.38 0.012 40);
  --radio-tinta-3: oklch(0.48 0.012 40);
  --radio-noche: oklch(0.19 0.01 40);
  --radio-noche-2: oklch(0.23 0.012 40);
  --radio-noche-3: oklch(0.27 0.014 40);
  --radio-noche-filete: oklch(0.35 0.014 40);
  --radio-noche-tinta-2: oklch(0.84 0.012 60);
  --radio-noche-tinta-3: oklch(0.72 0.012 60);
  --radio-claro: oklch(0.72 0.16 28);
  --radio-claro-hover: oklch(0.78 0.14 30);
  --blanco: oklch(0.99 0 0);
  --negro: oklch(0 0 0);
  --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);
  --error: oklch(0.78 0.14 40);
  --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.01 215 / 0.14);
  --gris-riel: oklch(0.5 0.01 215 / 0.2);
  --borde-vidrio: oklch(1 0 0 / 0.12);
  --sombra: oklch(0.08 0.01 215 / 0.35);

  /* tema claro, el de entrada */
  --fondo: oklch(0.985 0.006 140);
  --fondo-2: oklch(0.96 0.014 140);
  --fondo-3: oklch(0.93 0.02 140);
  --filete: oklch(0.86 0.015 160);
  --tinta: var(--verde);
  --tinta-2: oklch(0.38 0.03 177);
  --tinta-3: oklch(0.48 0.022 177);
  --foco: var(--verde);
  --primario: var(--verde);
  --primario-hover: var(--verde-2);
  --primario-tinta: var(--menta);
  --resalte: oklch(0.42 0.06 177);
  --pildora-hover: var(--menta-2);
  --vidrio: oklch(0.985 0.006 140 / 0.72);
  color-scheme: light;

  /* tipografía */
  --fuente-ui: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --fuente-lectura: "Newsreader", "Iowan Old Style", Georgia, serif;
  --t-meta: 0.8125rem;
  --t-chico: 0.9375rem;
  --t-cuerpo: 1.0625rem;
  --t-lectura: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --t-boton: 1rem;
  --t-marca: 1.0625rem;
  --t-bajada: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-nota: clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
  --t-cita: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --t-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --t-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);
  --t-ep: clamp(2.25rem, 1.65rem + 2.8vw, 4rem);
  --t-num: clamp(4rem, 2.9rem + 5vw, 6rem);
  --t-gigante: clamp(3.25rem, 2rem + 6vw, 7.5rem);
  --t-nav-grande: 2rem;

  /* 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);
  --canal: clamp(16px, 4vw, 40px);
  --ancho: 1240px;
  --ancho-lectura: 680px;
  --radio-borde: 4px;
  --barra-alto: 60px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* tema oscuro: el sitio de antes, entero en pizarrón. Pequeño Yo es pizarrón en los dos. */
:root[data-tema="oscuro"],
.mundo-pizarron {
  --fondo: var(--pizarron);
  --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);
  --pildora-hover: var(--pizarron-filete);
  --vidrio: oklch(0.225 0.014 215 / 0.7);
  --sombra: oklch(0.08 0.01 215 / 0.65);
  color-scheme: dark;
}

.mundo-libro {
  --fondo: var(--libro);
  --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);
  --pildora-hover: var(--libro-filete);
  --vidrio: oklch(0.36 0.035 205 / 0.72);
  --sombra: oklch(0.12 0.03 205 / 0.6);
  color-scheme: dark;
}

.mundo-radio {
  --fondo: var(--radio-fondo);
  --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);
  --primario-tinta: var(--blanco);
  --resalte: var(--radio-oscuro);
  --pildora-hover: var(--radio-fondo-3);
  --vidrio: oklch(0.97 0.008 60 / 0.72);
  color-scheme: light;
}

/* la radio de noche: el mismo rojo de aire, sobre negro cálido */
:root[data-tema="oscuro"] .mundo-radio {
  --fondo: var(--radio-noche);
  --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);
  --pildora-hover: var(--radio-noche-filete);
  --vidrio: oklch(0.19 0.01 40 / 0.72);
  color-scheme: dark;
}

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

/* las páginas de Pequeño Yo y de Delirante son oscuras por identidad:
   ahí el botón del tema no cambiaría nada, así que no se muestra */
body.mundo-pizarron .tema,
body.mundo-libro .tema { display: none; }

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barra-alto) + var(--e-4));
  scrollbar-color: var(--filete) var(--fondo);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  /* el reproductor acoplado no tapa el final de la página */
  padding-bottom: var(--dock-alto, 0px);
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
::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); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--e-4); top: -100px; z-index: 100;
  background: var(--primario); color: var(--primario-tinta);
  padding: var(--e-2) var(--e-4); border-radius: var(--radio-borde);
  font-weight: 600; 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 */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2);
  font-family: var(--fuente-ui); font-size: var(--t-meta); line-height: 1.4; color: var(--tinta-3);
}
.meta > * + *::before { content: "·"; margin-right: 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: 999px;
  font-family: var(--fuente-ui); font-size: var(--t-boton); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  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); }
.boton .icono { width: 18px; height: 18px; }
.boton-primario { background: var(--primario); color: var(--primario-tinta); }
.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); }
.boton-amarillo:hover { background: var(--amarillo-hover); }
.boton-papel { background: var(--papel); color: var(--libro-3); }
.boton-papel:hover { background: var(--papel-hover); }
.boton-menta { background: var(--menta); color: var(--verde); }
.boton-menta:hover { background: var(--blanco); }
.boton-linea { border: 1px solid var(--filete); color: var(--tinta); }
.boton-linea:hover { border-color: var(--tinta-3); background: var(--fondo-2); }
.boton-linea[aria-expanded="true"] { border-color: var(--resalte); }

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

.enlace-flecha {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 44px;
  font-family: var(--fuente-ui); font-weight: 600; font-size: var(--t-chico); text-decoration: none; color: var(--tinta);
}
.enlace-flecha .icono { width: 18px; height: 18px; transition: transform 200ms var(--curva); }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.enlace-volver:hover .icono { transform: translateX(-3px); }
.enlace-flecha:hover span { text-decoration: underline; }

/* el play: lo único redondo y lo único amarillo de cada tapa */
.play {
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--amarillo); color: var(--amarillo-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 ────────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  height: var(--barra-alto);
  padding-inline: var(--canal);
  background: var(--fondo); color: var(--tinta);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out;
}
.barra.con-filete { border-bottom-color: var(--filete); }

.marca {
  display: inline-flex; align-items: center; gap: var(--e-3); min-height: 44px;
  font-size: var(--t-marca); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  text-decoration: none; color: var(--tinta);
}
.marca-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.barra-acciones { display: flex; align-items: center; gap: 2px; }
.barra-boton {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; border-radius: var(--radio-borde);
  font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.06em; color: var(--tinta-2);
}
.barra-boton:hover { color: var(--tinta); background: var(--fondo-2); }
.barra-boton .icono { width: 22px; height: 22px; }
.tema .icono-sol { display: none; }
:root[data-tema="oscuro"] .tema .icono-sol { display: block; }
:root[data-tema="oscuro"] .tema .icono-luna { display: none; }
.menu-boton .icono { width: 24px; height: 24px; }
.menu-boton path { transition: transform 240ms var(--curva); transform-origin: center; }
.menu-boton[aria-expanded="true"] .menu-linea-a { transform: translateY(3px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-linea-b { transform: translateY(-3px) rotate(-45deg); }

/* menú del celular: pantalla completa debajo de la barra */
.nav {
  position: fixed; inset: var(--barra-alto) 0 0 0; z-index: 39;
  background: var(--fondo);
  padding: var(--e-6) var(--canal);
  visibility: hidden; opacity: 0;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.nav.abierto { visibility: visible; opacity: 1; transition: opacity 200ms ease-out; }
.nav-lista { display: grid; gap: var(--e-1); }
.nav-lista a {
  display: block; padding: var(--e-3) 0;
  font-size: var(--t-nav-grande); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  text-decoration: none; border-bottom: 1px solid var(--filete);
}
.nav-lista a:hover, .nav-lista a[aria-current] { color: var(--resalte); }

@media (min-width: 960px) {
  .nav {
    position: static; inset: auto; padding: 0; background: none;
    visibility: visible; opacity: 1; transition: none;
    margin-left: auto;
  }
  .nav-lista { display: flex; gap: 2px; }
  .nav-lista a {
    padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--radio-borde);
    font-size: var(--t-chico); font-weight: 600; letter-spacing: 0; color: var(--tinta-2);
  }
  .nav-lista a:hover { color: var(--tinta); background: var(--fondo-2); }
  .nav-lista a[aria-current] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); border-radius: 0; }
  .menu-boton { display: none; }
}

/* ── portada: Tano ────────────────────────────────────────────────────── */

.portada { display: grid; gap: var(--e-5); padding-block: 0 var(--e-seccion); }
.portada-foto { margin-inline: calc(-1 * var(--canal)); }
.portada-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 30%; }
.portada-nombre {
  font-size: var(--t-gigante); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em;
}
.portada-bajada {
  margin-top: var(--e-4); max-width: 30ch;
  font-family: var(--fuente-lectura); font-size: var(--t-cita); line-height: 1.25; color: var(--tinta-2);
  text-wrap: pretty;
}
/* los cuatro caminos, como las píldoras de su Linktree */
.portada-enlaces { margin-top: var(--e-6); display: grid; gap: var(--e-2); }
.pildora {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-4);
  min-height: 64px; padding: var(--e-3) var(--e-4) var(--e-3) var(--e-5);
  border-radius: 999px;
  background: var(--fondo-3); color: var(--tinta);
  text-decoration: none;
  transition: background-color 160ms ease-out, transform 120ms ease-out;
}
.pildora:hover { background: var(--pildora-hover); }
.pildora:active { transform: scale(0.985); }
.pildora-nombre { font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.2; }
.pildora-dato { grid-column: 1; font-size: var(--t-chico); line-height: 1.3; color: var(--tinta-2); }
.pildora .icono { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; transition: transform 200ms var(--curva); }
.pildora:hover .icono { transform: translateX(3px); }

@media (min-width: 600px) {
  .portada-enlaces { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .portada {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: var(--e-8);
    padding-top: var(--e-6);
  }
  .portada-foto { order: 2; margin: 0; }
  .portada-foto img { aspect-ratio: 4 / 5; border-radius: var(--radio-borde); object-position: 30% 50%; }
}

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

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

.reproductor-lugar { aspect-ratio: 16 / 9; position: relative; }
.reproductor { position: absolute; inset: 0; background: var(--fondo-2); }
.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; }
.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; }
.reproductor.iniciado .tapa { display: none; }

/* 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); } }

.ahora-encabezado { display: flex; align-items: flex-start; gap: var(--e-4); }
.ahora-num {
  font-size: var(--t-num); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
  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-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  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.35; 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: 1.45; color: var(--tinta-2);
}
.ahora .meta { margin-top: var(--e-4); }
.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; }

@media (max-width: 479px) {
  .ahora .acciones { display: grid; grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .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, .reproductor-pantalla { border-radius: var(--radio-borde); }
  .ahora-texto { padding: 0; }
  .tapa { padding: var(--e-5); }
  .play-grande { width: 80px; height: 80px; }
}

/* el reproductor acomodado abajo, mientras recorrés la página: vidrio esmerilado,
   como los reproductores de Apple. El desenfoque va solo en la barra: puesto en
   la caja que tiene el video, Safari deja el video en negro. Toma los colores
   del pizarrón en cualquier página, porque lo que suena es Pequeño Yo. */
.reproductor.acoplado {
  position: fixed; inset: auto var(--e-3) var(--e-3) var(--e-3); z-index: 45;
  background: transparent;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 48px -12px var(--sombra), 0 0 0 1px var(--borde-vidrio);
  animation: acoplar 320ms var(--curva);
}
.reproductor.acoplado .reproductor-barra {
  position: relative;
  display: flex; align-items: center; gap: var(--e-1);
  height: 56px; padding-inline: var(--e-1);
  background: var(--vidrio); color: var(--tinta);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
}
.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: 600;
  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);
}
.reproductor-boton:hover { color: var(--tinta); background: var(--gris-boton); }
.reproductor-boton[data-accion="alternar"] { color: var(--tinta); }
.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; }
.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(--amarillo);
  transform-origin: left; transform: scaleX(var(--avance, 0));
}

@media (min-width: 640px) {
  .reproductor.acoplado { left: auto; width: 400px; right: var(--e-5); bottom: var(--e-5); }
}

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

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

.seccion { padding-block: var(--e-seccion); }
.seccion-titulo {
  font-size: var(--t-h2); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  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: 1.4; 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-weight: 800; line-height: 0.95; letter-spacing: -0.045em;
  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; }
.cabecera .acciones { margin-top: var(--e-5); }
.cabecera .meta { margin-top: var(--e-4); }

/* ── 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; }
/* la foto ancha que sigue a la cabecera; en el celular, más alta para que se vea la gente */
.foto-banda { width: 100%; max-width: calc(var(--ancho) + 2 * var(--canal)); margin: 0 auto var(--e-7); padding-inline: var(--canal); }
.foto-banda img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 40% 50%; }
@media (min-width: 760px) { .foto-banda img { aspect-ratio: auto; } }

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

.episodios { padding-block: var(--e-seccion); }
.ahora + .episodios { padding-top: 0; }
/* en el celular el logo y el título van en una fila y la bajada usa todo el ancho */
.seccion-cabeza { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--e-4); align-items: center; }
.seccion-cabeza > div { display: contents; }
.seccion-cabeza .seccion-bajada, .seccion-cabeza .seccion-aviso, .seccion-cabeza .acciones { grid-column: 1 / -1; }
.seccion-cabeza .acciones { margin-top: var(--e-5); }
.programa-tapa { width: 72px; height: 72px; border-radius: var(--radio-borde); }

.cabecera-pequeno-yo .programa-logo { width: 112px; height: 112px; border-radius: var(--radio-borde); margin-bottom: var(--e-5); }
.cabecera-pequeno-yo .pagina-titulo { font-size: var(--t-gigante); }

.grilla { margin-top: var(--e-6); display: grid; gap: 0; }
.ep {
  position: relative;
  display: grid; grid-template-columns: 136px 1fr; gap: var(--e-4); align-items: start; align-content: start;
  padding: var(--e-4) 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:hover .ep-tapa::after, .ep:has(.ep-boton:focus-visible) .ep-tapa::after, .ep.esta-sonando .ep-tapa::after { opacity: 1; }
.ep:hover .ep-tapa .play, .ep:has(.ep-boton:focus-visible) .ep-tapa .play, .ep.esta-sonando .ep-tapa .play { opacity: 1; scale: 1; }
.ep-titulo { font-size: var(--t-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.ep-boton { text-align: left; }
.ep-boton::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ep-num { color: var(--tinta-3); font-variant-numeric: tabular-nums; margin-right: 0.15em; }
.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: 1.45; color: var(--tinta-2); }
.ep .meta { margin-top: var(--e-2); }
.ep:hover .ep-tapa img { transform: scale(1.04); }
.ep:hover .ep-titulo, .ep.esta-sonando .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; }

.episodios > .enlace-flecha, .episodios .envoltura > .enlace-flecha { margin-top: var(--e-5); }

@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:nth-last-child(2) { border-bottom: 1px solid var(--filete); }
}
@media (min-width: 1024px) {
  .seccion-cabeza { grid-template-columns: 96px 1fr; column-gap: var(--e-5); align-items: start; }
  .seccion-cabeza > div { display: block; }
  .programa-tapa { width: 96px; height: 96px; }
  .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: 200px 1fr; column-gap: var(--e-7); align-items: center; }
  .cabecera-pequeno-yo .programa-logo { width: 200px; height: 200px; margin: 0; }
}

/* la búsqueda (episodios y archivo de la radio) */
.buscar { margin-top: var(--e-6); max-width: 520px; }
.buscar-campo {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 52px; padding: 0 var(--e-4);
  background: var(--fondo-2); border: 1px solid var(--filete); border-radius: 999px;
}
.buscar-campo:focus-within { border-color: var(--foco); }
.buscar-campo .icono { color: var(--tinta-3); }
.buscar-campo input {
  flex: 1; min-width: 0; min-height: 50px; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--t-cuerpo); 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 ────────────────────────────────────────────────────────── */

.mundo-libro .seccion-titulo,
.mundo-libro .pagina-titulo { font-family: var(--fuente-lectura); font-weight: 500; letter-spacing: -0.02em; }

.libro { padding-block: var(--e-seccion); }
.libro-dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.libro-tapa { width: min(72%, 320px); }
.libro-tapa img { border-radius: 2px; box-shadow: 0 24px 48px -20px var(--sombra); }
.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.3;
  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: 1.5; color: var(--tinta-2);
}
.libro-texto + .libro-texto { margin-top: var(--e-3); }
.libro-precio { margin-top: var(--e-4); font-size: var(--t-h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.libro .acciones, .libro-portada .acciones { margin-top: var(--e-5); }
.libro-nota { margin-top: var(--e-3); font-size: var(--t-meta); color: var(--tinta-2); }

@media (max-width: 479px) {
  .libro .acciones, .libro-portada .acciones { display: grid; grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .libro-dentro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--e-8); }
  .libro-tapa { width: 100%; max-width: 480px; }
}

/* la página del libro */
.libro-portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); padding-block: var(--e-6) var(--e-seccion); }
.libro-portada .libro-tapa { width: min(78%, 360px); }
@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 .libro-tapa { width: 100%; max-width: 500px; }
}

.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: 700; font-size: var(--t-h3); letter-spacing: -0.015em; }
.audiolibro-sonando span:first-child { color: var(--resalte); font-variant-numeric: tabular-nums; }
.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: 52px; padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--filete);
  text-align: left;
  transition: background-color 160ms ease-out;
}
.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); }
  .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 ─────────────────────────────────────────────────── */

.radio-sello {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-weight: 800; font-size: var(--t-chico); letter-spacing: -0.01em; color: var(--resalte);
}
.radio-sello::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--radio); }
.radio-cabeza { display: grid; gap: var(--e-4); }
.radio-cabeza .seccion-titulo, .radio-cabeza .pagina-titulo { margin-top: var(--e-3); }
.radio-cifra { font-size: var(--t-gigante); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; color: var(--resalte); font-variant-numeric: tabular-nums; }
.radio-cifra-texto { margin-top: var(--e-2); font-size: var(--t-chico); color: var(--tinta-2); max-width: 28ch; }
/* tres fotos de la radio: en el celular, una grande y dos abajo */
.radio-fotos { margin-top: var(--e-6); 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; }

.notas { padding-block: var(--e-seccion); }
.notas-lista { margin-top: var(--e-6); display: grid; gap: var(--e-6); }
.nota-enlace { display: grid; gap: var(--e-3); text-decoration: none; color: inherit; }
.nota-foto {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-borde);
  background: var(--fondo-3);
}
.nota-sin-foto {
  display: grid; place-items: end start; padding: var(--e-4);
  background: var(--radio-oscuro); color: var(--blanco);
  font-weight: 800; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.1;
}
.nota-texto { display: grid; gap: var(--e-2); }
.nota-titulo {
  font-family: var(--fuente-lectura); font-weight: 500; font-size: var(--t-nota);
  line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance;
}
.nota-resumen { font-family: var(--fuente-lectura); font-size: var(--t-chico); line-height: 1.45; color: var(--tinta-2); }
.nota-enlace:hover .nota-titulo { text-decoration: underline; text-decoration-color: var(--radio); text-decoration-thickness: 2px; }
.notas .envoltura > .enlace-flecha { margin-top: var(--e-5); }
@media (min-width: 640px) {
  .notas-lista { grid-template-columns: repeat(2, 1fr); column-gap: var(--e-5); row-gap: var(--e-7); }
}
@media (min-width: 1024px) {
  .notas-lista { grid-template-columns: repeat(4, 1fr); }
  .notas-todas { grid-template-columns: repeat(3, 1fr); }
  .radio-cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--e-8); }
  .radio-fotos { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); column-gap: var(--e-4); }
  .radio-foto:first-child { grid-column: auto; }
}

/* el índice del archivo entero */
.indice { padding-block: var(--e-seccion); border-top: 1px solid var(--filete); }
.indice-grupos { margin-top: var(--e-6); columns: 1; column-gap: var(--e-7); }
.indice-grupo { break-inside: avoid; margin-bottom: var(--e-6); }
.indice-grupo[hidden] { display: none; }
.indice-programa {
  display: flex; align-items: baseline; gap: var(--e-2);
  padding-bottom: var(--e-2); margin-bottom: var(--e-2); border-bottom: 2px solid var(--radio);
  font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em;
}
.indice-cuenta { font-size: var(--t-meta); font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.indice-lista li { padding-block: 6px; font-family: var(--fuente-lectura); font-size: var(--t-chico); line-height: 1.35; }
.indice-lista li[hidden] { display: none; }
.indice-lista a { text-decoration-color: var(--filete); }
.indice-lista a:hover { text-decoration-color: var(--radio); }
.indice-fecha { font-family: var(--fuente-ui); font-size: var(--t-meta); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .indice-grupos { columns: 2; } }
@media (min-width: 1100px) { .indice-grupos { columns: 3; } }

/* 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-titulo {
  margin-top: var(--e-3);
  font-family: var(--fuente-lectura); font-weight: 500; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.03em;
  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: 1.4; color: var(--tinta-2); }
.leer-foto { max-width: calc(960px + 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); }
.leer-cuerpo { padding-block: var(--e-6); }
.leer-cuerpo p { font-family: var(--fuente-lectura); font-size: var(--t-lectura); line-height: 1.6; max-width: 66ch; }
.leer-cuerpo p + p { margin-top: 0.9em; }
.leer-pie { padding-bottom: var(--e-seccion); }
.leer-fuente { padding-top: var(--e-5); border-top: 2px solid var(--radio); font-size: var(--t-chico); color: var(--tinta-2); }
.leer-fuente a { color: var(--tinta); font-weight: 600; }
.leer-vecinas { margin-top: var(--e-6); display: grid; gap: var(--e-3); }
.nota-vecina {
  display: grid; gap: var(--e-1); padding: var(--e-4); border: 1px solid var(--filete); border-radius: var(--radio-borde);
  text-decoration: none; font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: 1.3;
}
.nota-vecina:hover { border-color: var(--radio); }
.nota-vecina:last-child { text-align: right; }
.nota-vecina:last-child .meta { justify-content: flex-end; }
@media (min-width: 640px) { .leer-vecinas { grid-template-columns: 1fr 1fr; } }

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

.sobre { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); padding-block: var(--e-seccion); }
.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.3; color: var(--tinta);
  text-wrap: pretty;
}
.sobre .enlace-flecha { margin-top: var(--e-5); }
.pagina-portada .sobre { border-top: 1px solid var(--filete); }
.sobre-foto-alta { max-width: 420px; }
.sobre-foto-alta img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .sobre { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--e-8); }
  .sobre-foto-alta { justify-self: end; width: 100%; }
}

/* la historia, de año en año: cada hito lleva el color de su mundo */
.historia { padding-block: var(--e-seccion); }
.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(--e-4); margin-inline: calc(-1 * var(--e-4));
  border-top: 1px solid var(--filete);
  background: var(--fondo); color: var(--tinta);
}
.hito.mundo-pizarron, .hito.mundo-libro, .hito.mundo-radio { border-top-color: transparent; border-radius: var(--radio-borde); margin-block: var(--e-2); }
.hito-cuando { font-weight: 800; font-size: var(--t-h3); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.hito-titulo { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.hito-texto { margin-top: var(--e-1); max-width: 60ch; font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: 1.5; color: var(--tinta-2); }
.hito-fuente { margin-top: var(--e-2); font-size: var(--t-meta); color: var(--tinta-3); }
.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)); }
}
/* 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-lista { margin-top: var(--e-6); display: grid; gap: var(--e-3); }
.proyecto {
  display: grid; align-content: start; gap: var(--e-2);
  padding: var(--e-5); border-radius: var(--radio-borde);
  background: var(--fondo-2); color: var(--tinta);
  min-height: 240px;
}
.proyecto-cuando { font-size: var(--t-meta); font-weight: 600; color: var(--tinta-3); }
.proyecto-nombre { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.mundo-libro .proyecto-nombre { font-family: var(--fuente-lectura); font-weight: 500; letter-spacing: -0.02em; }
.proyecto-texto { font-family: var(--fuente-lectura); font-size: var(--t-cuerpo); line-height: 1.45; 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 { grid-template-columns: repeat(2, 1fr); } }

/* agenda */
.agenda { padding-block: var(--e-seccion); }
.agenda-lista { margin-top: var(--e-5); border-top: 1px solid var(--filete); }
.agenda-lista:empty { 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: 800; font-size: var(--t-h3); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.fecha-dia span { color: var(--tinta-3); font-weight: 600; }
.fecha-titulo { font-size: var(--t-h3); font-weight: 700; }
.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; }
/* en la portada, la agenda aparece solo cuando hay fechas */
.agenda-portada:not(.con-fechas) { display: none; }
@media (min-width: 760px) { .fecha { grid-template-columns: 12rem 1fr auto; align-items: center; gap: var(--e-5); } }

/* contacto */
.contacto-seccion { padding-block: var(--e-seccion); }
.contacto-lista { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.contacto {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 72px; padding: var(--e-3) var(--e-5);
  border-radius: 999px; background: var(--fondo-3); text-decoration: none;
  transition: background-color 160ms ease-out;
}
.contacto:hover { background: var(--pildora-hover); }
.contacto .icono { width: 26px; height: 26px; }
.contacto > span { display: grid; }
.contacto strong { font-size: var(--t-h3); }
.contacto span span { font-size: var(--t-chico); color: var(--tinta-2); }
.contacto-redes { margin-top: var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-2); }
@media (min-width: 640px) { .contacto-lista { grid-template-columns: repeat(2, minmax(0, 360px)); } }

.red {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-width: 44px; min-height: 44px; justify-content: center;
  border-radius: 999px; text-decoration: none; color: var(--tinta);
}
.red .icono { width: 22px; height: 22px; }

/* ── pie: el verde del Linktree, en los dos temas ─────────────────────── */

.pie {
  --fondo: var(--verde); --fondo-2: var(--verde-2); --filete: var(--verde-filete);
  --tinta: var(--menta); --tinta-2: var(--menta-2); --tinta-3: var(--menta-3); --foco: var(--menta);
  background: var(--fondo); color: var(--tinta);
  padding-block: var(--e-7) var(--e-5);
}
.pie-dentro { display: grid; gap: var(--e-6); }
.pie-titulo { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; max-width: 16ch; }
.pie-bajada { margin-top: var(--e-3); max-width: 44ch; font-family: var(--fuente-lectura); font-size: var(--t-bajada); line-height: 1.4; color: var(--tinta-2); }
.correo-form { margin-top: var(--e-5); max-width: 520px; }
.correo-fila { display: grid; gap: var(--e-2); }
.correo-campo {
  min-height: 52px; width: 100%; padding: 0 var(--e-5);
  font: inherit; font-size: var(--t-cuerpo); color: var(--tinta);
  background: var(--fondo-2); border: 1px solid var(--filete); border-radius: 999px;
  caret-color: var(--menta);
}
.correo-campo::placeholder { color: var(--tinta-3); }
.correo-campo:hover { border-color: var(--tinta-3); }
.correo-campo:focus-visible { outline-offset: 0; border-color: var(--menta); }
.correo-campo[aria-invalid="true"] { border-color: var(--error); }
.correo-estado { margin-top: var(--e-2); min-height: 1.5em; font-size: var(--t-chico); color: var(--tinta-2); }
.correo-estado:empty { min-height: 0; margin: 0; }

.pie-lado { display: grid; gap: var(--e-4); align-content: start; }
.pie-redes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.pie-redes .red {
  justify-content: flex-start; padding: 0 var(--e-4); min-height: 48px;
  background: var(--fondo-2); font-weight: 600; font-size: var(--t-chico);
}
.pie-redes .red:hover { background: var(--verde-filete); }
.pie-menu { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }
.pie-menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-chico); color: var(--tinta-2); text-decoration: none; }
.pie-menu a:hover { color: var(--tinta); text-decoration: underline; }
.pie-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-5);
  padding-top: var(--e-4); border-top: 1px solid var(--filete);
  font-size: var(--t-meta); color: var(--tinta-3);
}
.pie-base a { color: var(--tinta-2); }
@media (min-width: 560px) {
  .correo-fila { grid-template-columns: 1fr auto; }
  .correo-fila .boton { min-height: 52px; }
}
@media (min-width: 960px) {
  .pie { padding-block: var(--e-8) var(--e-5); }
  .pie-dentro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-8); row-gap: var(--e-7); }
  .pie-base { grid-column: 1 / -1; }
}

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

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