/* Adrià Cruz */
/*FUENTES:INI*/
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fuentes/albert-sans-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fuentes/albert-sans-italic-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: "Albert Sans"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fuentes/albert-sans-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fuentes/albert-sans-normal-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: 300 700; font-display: swap; src: url("fuentes/newsreader-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("fuentes/newsreader-italic-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: normal; font-weight: 300 700; font-display: swap; src: url("fuentes/newsreader-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fuentes/newsreader-normal-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; }
/*FUENTES:FIN*/

:root {
  --azul-b3tter: #0091FF; /* el azul antiguo de B3TTER, medido en 6 miniaturas del B3TTER PODCAST (oct-2023 a abr-2025); fuente en data.md */
  --noche: #130A07;
  --papel: #F4F1EF;
  --arena: #E6DFDA;
  --mar: #28394F;
  --rojo: #B21A24;
  --rojo-hover: #961520;
  --tinta: #130A07;
  --tinta-2: #564B45;
  --claro: #F4F1EF;
  --claro-2: #C4CEDA;
  --noche-2: #B9ADA6;
  --linea: rgba(19, 10, 7, .16);
  --f-display: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Newsreader", Georgia, "Times New Roman", serif;
  --margen: clamp(16px, 3.4vw, 48px);
  --ancho: 1344px;
  --hueco: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 20px;
  line-height: 1.7;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
.mar :focus-visible, .noche :focus-visible, .rojo :focus-visible { outline-color: #fff; }

.saltar { position: absolute; left: -9999px; top: 8px; }
.saltar:focus { left: 16px; z-index: 100; background: #fff; padding: 8px 14px; font-family: var(--f-display); }

/* ---------- tipos ---------- */
h1, h2 {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(64px, 12.6vw, 188px); line-height: .9; }
h2 { font-size: clamp(46px, 6.2vw, 92px); line-height: .96; }
h2.aparece[lang="en"] { font-size: clamp(56px, 9.4vw, 136px); white-space: nowrap; }

.banda { padding: clamp(80px, 9.5vw, 144px) var(--margen); position: relative; }
.dentro { max-width: var(--ancho); margin: 0 auto; }
.papel { background: var(--papel); }
.blanco { background: #fff; }
.arena { background: var(--arena); }
.mar { background: var(--mar); color: var(--claro); }
.rojo { background: var(--rojo); color: #fff; }
.noche { background: var(--noche); color: var(--claro); }

.rejilla, .hero .dentro, .invitados .dentro, .historia .dentro, .b3tter .dentro, .donde .dentro,
.podcast .dentro, .invitado .dentro, .charlas .dentro, .runclub .dentro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
}
.dentro > * { grid-column: 1 / -1; min-width: 0; }

figure { margin: 0; }
figcaption {
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-2);
  margin-top: 12px;
  max-width: 48ch;
}
.mar figcaption { color: var(--claro-2); }

.intro { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.6; max-width: 40ch; }
.fuente { font-family: var(--f-display); font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.enlace { font-family: var(--f-display); font-weight: 700; font-size: 16px; text-decoration: underline; }
.cita-b { margin: 40px 0 24px; }
.cita-b p { font-style: italic; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.4; margin: 0 0 10px; max-width: 30ch; }
.cita-b footer { font-family: var(--f-display); font-size: 14px; color: var(--tinta-2); }

/* ---------- botones (radio único: píldora) ---------- */
.boton {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .005em;
  background: var(--rojo);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.boton:hover { background: var(--rojo-hover); }
.boton-grande { min-height: 56px; padding: 0 30px; font-size: 17px; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 12px var(--margen);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.marca { font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -.03em; text-decoration: none; margin-right: auto; }
.cabecera nav { display: flex; gap: 28px; font-family: var(--f-display); font-size: 15px; font-weight: 500; }
.cabecera nav a { text-decoration: none; }
.cabecera nav a:hover { text-decoration: underline; }

/* ---------- 1 · hero ---------- */
.hero { padding-top: clamp(24px, 1.8vw, 28px); padding-bottom: 40px; }
.hero .dentro { grid-template-columns: minmax(0, 1fr) min(620px, 44%); grid-template-rows: auto auto 1fr auto; column-gap: clamp(32px, 4vw, 64px); }
.hero h1 { grid-column: 1; grid-row: 1; font-weight: 800; font-size: clamp(60px, 8.6vw, 124px); line-height: .9; letter-spacing: -.035em; margin: 0 0 clamp(28px, 3vw, 40px); white-space: nowrap; }
.hero h1 span { display: block; }
.hero-foto { grid-column: 2; grid-row: 1 / 4; width: 100%; max-width: 620px; margin: 0; }
.hero-foto img { display: block; width: 100%; height: auto; }
.hero-texto { grid-column: 1; grid-row: 2; }
.hero-lema { grid-column: 1; grid-row: 3; align-self: start; margin-top: 48px; border-top: 1px solid var(--linea); padding-top: 20px; }
.lema { font-family: var(--f-display); font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; margin: 0; }
.lema a { text-decoration: none; }
.lema a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lema-fuente { font-size: 16px; color: var(--tinta-2); margin: 10px 0 0; }
.nota-fuente { font-size: 16px; color: var(--tinta-2); margin: -8px 0 0; }
.nota-fuente a { color: inherit; }
.entradilla { font-size: clamp(23px, 2vw, 28px); line-height: 1.5; margin: 0 0 40px; max-width: 26ch; }
.accion .nota { font-family: var(--f-display); font-size: 15px; color: var(--tinta-2); margin: 14px 0 0; }


/* ---------- 3 · invitados ---------- */
.invitados { padding-top: clamp(64px, 7vw, 104px); }
.invitados h2 { grid-column: 1 / 10; }
.invitados .intro { grid-column: 1 / 7; margin: 32px 0 56px; }
.lista-ep, .lista-inv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista-ep { grid-column: 1 / 7; grid-row: 3 / 5; }
.lista-ep li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.lista-ep a, .lista-inv a {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-decoration: none;
}
.lista-ep a:hover, .lista-inv a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lista-ep .titulo, .lista-inv .titulo { grid-column: 1; font-size: 18px; line-height: 1.5; color: var(--tinta-2); }
.lista-ep .dato { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-family: var(--f-display); font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.lista-ep .dato b { display: block; font-weight: 300; font-size: 28px; letter-spacing: -.02em; color: var(--tinta); }
.invitados .fuente { grid-column: 1 / 8; margin-top: 24px; }
.invitados .fuente .enlace { display: inline-block; margin-top: 10px; }

/* ---------- 4 · be quiet ---------- */
.f-portal { grid-column: 1 / 6; }
.historia .texto { grid-column: 7 / 13; align-self: center; }
.historia h2 { margin-bottom: 44px; }
.primera { font-size: clamp(22px, 1.8vw, 25px); line-height: 1.62; max-width: 33em; }

/* ---------- 5 · work hard ---------- */
.b3tter .texto { grid-column: 1 / 7; }
.b3tter h2 { margin-bottom: 36px; }
.cronologia { margin: 44px 0 16px; border-top: 1px solid var(--linea); }
.cronologia div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.cronologia dt { font-family: var(--f-display); font-weight: 500; font-size: 16px; padding-top: 4px; }
.cronologia dd { margin: 0; line-height: 1.55; }
.nota-margen {
  margin: 40px 0 8px 214px;
  padding-left: 18px;
  border-left: 2px solid var(--rojo);
  max-width: 30ch;
  transform: rotate(-1.2deg);
  transform-origin: left top;
}
.nota-margen p { font-style: italic; font-size: 19px; line-height: 1.5; margin: 0 0 6px; }
.nota-margen a { font-family: var(--f-display); font-size: 13px; color: var(--tinta-2); }
.f-palets { grid-column: 8 / 13; align-self: start; margin-top: 12px; }

/* ---------- 6 · dónde ---------- */
.donde h2 { grid-column: 1 / 11; }
.donde .intro { grid-column: 1 / 6; margin-top: 32px; }
.donde .cita-b { grid-column: 7 / 13; margin-top: 32px; }
.f-bandejas { grid-column: 1 / 7; margin-top: 56px; }
.f-avion { grid-column: 7 / 10; margin-top: 176px; }
.f-stand { grid-column: 10 / 13; margin-top: 16px; }

/* ---------- 7 · cita ---------- */
.banda.cita { padding-top: clamp(64px, 6.6vw, 96px); padding-bottom: clamp(72px, 7.4vw, 108px); }
.cita blockquote { margin: 0; max-width: 1180px; }
.cita p { font-style: italic; font-weight: 300; font-size: clamp(40px, 5.8vw, 88px); line-height: 1.06; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.cita footer { font-family: var(--f-display); font-size: 16px; margin-top: 28px; }

/* ---------- 8 · pódcast ---------- */
.podcast { padding-top: 0; }
.f-neon { grid-column: 1 / 6; margin-top: -90px; position: relative; z-index: 1; }
.podcast .texto { grid-column: 7 / 13; padding-top: clamp(72px, 8vw, 120px); }
.podcast h2 { margin-bottom: 36px; }
.podcast .texto > p { max-width: 36ch; }
.cifra { font-family: var(--f-display); font-weight: 300; font-size: clamp(64px, 7vw, 104px); line-height: 1; letter-spacing: -.04em; margin: 44px 0 6px; font-variant-numeric: tabular-nums; }
.cifra-pie { font-family: var(--f-display); font-size: 15px; color: var(--claro-2); margin-bottom: 40px; }
.donde-oir { font-family: var(--f-display); font-size: 16px; color: var(--claro-2); margin-top: 32px; }
.donde-oir a { color: #fff; font-weight: 700; }

/* ---------- 9 · invitado ---------- */
.invitado h2 { grid-column: 1 / 9; }
.invitado .intro { grid-column: 1 / 7; margin: 32px 0 56px; }
.lista-inv { grid-column: 1 / 7; grid-row: 3; }
.lista-inv li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2px 32px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.lista-inv .fecha { grid-row: 1 / 3; font-family: var(--f-display); font-size: 15px; font-weight: 500; padding-top: 10px; font-variant-numeric: tabular-nums; }
.lista-inv a, .lista-inv .titulo { grid-column: 2; }

/* ---------- 10 · charlas ---------- */
.charlas .texto { grid-column: 1 / 7; align-self: center; }
.charlas h2 { margin-bottom: 40px; }
.charlas .texto p { max-width: 38ch; }
.charlas .boton { margin-top: 12px; }
.f-escenario { grid-column: 8 / 13; }

/* ---------- 11 · stay healthy ---------- */
.runclub h2 { grid-column: 1 / -1; margin-bottom: 40px; }
.runclub .texto { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; }
.runclub .texto .intro { grid-column: 1; grid-row: 1 / 3; max-width: 34ch; margin: 0; }
.runclub .texto .cita-b { grid-column: 2; grid-row: 1; margin: 0 0 24px; }
.runclub .texto .nota-motor { grid-column: 2; grid-row: 2; }
.runclub .texto .enlace { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 24px; }
.runclub .cita-b p { max-width: 24ch; }
.nota-motor { font-size: 18px; color: var(--tinta-2); max-width: 34ch; }
.runclub figure { grid-row: 3; margin-top: 56px; }
.runclub .f-medallas { grid-column: 1 / 4; }
.runclub .f-dorsal { grid-column: 4 / 7; margin-top: 136px; }
.runclub .f-puente { grid-column: 7 / 10; margin-top: 88px; }
.runclub .f-adoquines { grid-column: 10 / 13; margin-top: 184px; }

/* ---------- 12 · invitar + pie ---------- */
.invitar { padding-bottom: 40px; }
.invitar h2 { font-size: clamp(56px, 9.4vw, 140px); margin-bottom: 40px; }
.invitar p { max-width: 38ch; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.55; }
.invitar .boton { margin: 16px 0 28px; }
.alternativa { font-size: 18px; color: var(--noche-2); }
.alternativa a { color: var(--claro); }
.pie {
  background: var(--noche);
  padding: 4px var(--margen) 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--noche-2);
}
.pie span { margin-right: auto; }
.pie a { color: var(--claro); }

/* ---------- panel flotante ---------- */
.panel {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 60;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--noche);
  padding: 22px 24px 20px;
  transform-origin: var(--ox, 100%) var(--oy, 100%);
}
.panel[hidden] { display: none; }
.panel.entra { animation: panel-entra .2s ease-out both; }
@keyframes panel-entra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-titulo { font-family: var(--f-display); font-weight: 300; font-size: 32px; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.cerrar { width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 999px; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--tinta); }
.panel-sub { font-family: var(--f-display); font-size: 14px; color: var(--tinta-2); margin: 6px 0 0; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 8px; }
.pasos span { height: 6px; border-radius: 999px; background: rgba(19, 10, 7, .14); position: relative; overflow: hidden; }
.pasos span::after { content: ""; position: absolute; inset: 0; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.pasos span.hecho::after { transform: scaleX(1); }
.pasos-nombres { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-family: var(--f-display); font-size: 13px; color: var(--tinta-2); }
.pasos-nombres [aria-current] { color: var(--tinta); font-weight: 700; }
.paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.paso legend { font-family: var(--f-display); font-weight: 700; font-size: 18px; margin-bottom: 10px; padding: 0; }
.opcion { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 19px; cursor: pointer; }
.opcion input { accent-color: var(--rojo); width: 18px; height: 18px; margin: 0; }
.campo { display: block; font-family: var(--f-display); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.campo input, .campo textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: 400 19px/1.4 var(--f-texto);
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tinta-2);
  border-radius: 0;
  padding: 8px 0;
}
.campo textarea { resize: vertical; }
.campo input::placeholder { color: #6E625B; }
.panel-botones { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 18px; }
.atras { background: none; border: 0; font-family: var(--f-display); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; color: var(--tinta); min-height: 44px; }
.error { color: var(--rojo); font-family: var(--f-display); font-size: 14px; margin: 10px 0 0; }
.panel-nota, .hecho-msg { font-family: var(--f-display); font-size: 13px; line-height: 1.5; color: var(--tinta-2); margin: 16px 0 0; }
.hecho-msg { font-size: 15px; color: var(--tinta); }

/* ---------- entrada del texto (un solo tipo) ---------- */
/* cada línea sube tras su propia máscara (.l); las filas de las listas, escalonadas 75 ms desde web.js; sin fundido */
.js .aparece .l { display: block; transform: translateY(calc(100% + .35em)); transition: transform .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js .aparece :is(.titulo, .dato, .fecha) .l { transition-delay: calc(var(--d, 0ms) + 60ms); }
.js .aparece:not(.hecho):has(> .l), .js .aparece:not(.hecho) :has(> .l) { overflow: clip; overflow-clip-margin: .12em; }
.js .aparece.visto .l { transform: none; }
.js .aparece.hecho .l { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece .l { transform: none; transition: none; }
  .panel.entra { animation: none; }
  .pasos span::after, .boton { transition: none; }
}

/* ---------- tableta y móvil ---------- */
@media (max-width: 1100px) {
  .cabecera nav { gap: 20px; }
  .nota-margen { margin-left: 0; }
}
@media (max-width: 900px) {
  :root { --hueco: 16px; }
  body { font-size: 19px; }
  .cabecera { gap: 16px; }
  .cabecera nav { display: none; }
  .cabecera .boton { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .dentro > *, .hero-texto, .hero-foto, .lista-ep, .f-portal, .historia .texto, .b3tter .texto, .f-palets,
  .donde .intro, .donde .cita-b, .f-bandejas, .f-neon, .podcast .texto, .lista-inv, .charlas .texto, .f-escenario,
  .runclub .texto, .f-medallas, .invitados h2, .invitados .intro, .invitados .fuente, .invitado h2, .invitado .intro,
  .donde h2, .runclub h2 { grid-column: 1 / -1; grid-row: auto; }
  .hero .dentro { grid-template-columns: minmax(0, 1fr); }
  .hero .dentro > * { grid-column: 1; grid-row: auto; }
  .hero h1 { margin-bottom: 24px; }
  .hero-texto { margin-top: 40px; }
  .hero h1 { order: 1; } .hero-foto { order: 2; } .prensa { order: 3; } .hero-lema { order: 4; margin-top: 32px; } .hero-texto { order: 5; }
  .f-palets, .f-escenario { margin-top: 56px; }
  .f-portal { margin-bottom: 48px; }
  .f-bandejas { margin-top: 48px; }
  .f-avion { grid-column: 1 / 7; grid-row: auto; margin-top: 40px; }
  .f-stand { grid-column: 7 / -1; grid-row: auto; margin-top: 120px; }
  .f-neon { margin-top: -64px; width: 78%; }
  .podcast .texto { padding-top: 48px; }
  .runclub .texto { display: block; }
  .runclub .texto .cita-b { margin: 40px 0 24px; }
  .runclub figure { grid-row: auto; margin-top: 40px; }
  .runclub .f-medallas, .runclub .f-puente { grid-column: 1 / 7; }
  .runclub .f-dorsal, .runclub .f-adoquines { grid-column: 7 / -1; margin-top: 112px; }
  .runclub .f-puente { margin-top: 0; }
  .lista-inv li { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 16px; }
  .lista-inv .fecha { grid-column: 2; grid-row: auto; padding-top: 0; align-self: baseline; }
  .lista-inv a { grid-column: 1; align-self: baseline; }
  .lista-inv .titulo { grid-column: 1 / -1; }
  .cronologia div { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lista-ep li { grid-template-columns: 1fr; }
  .lista-ep .dato { grid-column: 1; grid-row: auto; text-align: left; margin-top: 8px; }
  .lista-ep .dato b { display: inline; font-size: 22px; margin-right: 4px; }
  .entradilla { max-width: none; }
}

/*AJUSTES-QA*/
.cita-b p, .nota-margen p, blockquote p { text-wrap: balance; }
figcaption, .entradilla, .charlas p { text-wrap: pretty; }
.podcast h2 { font-size: clamp(44px, 6.4vw, 96px); white-space: nowrap; }
@media (max-width: 380px) { h2, .podcast h2 { font-size: 42px; } h2.aparece[lang="en"] { font-size: 52px; } }
/*LEGAL*/
.legal-main { padding: clamp(56px, 7vw, 112px) var(--margen); }
.legal-main .dentro { max-width: 760px; }
.legal-main h1 { font-size: clamp(48px, 7vw, 96px); margin-bottom: 40px; }
.legal-main h2 { font-size: 28px; letter-spacing: -.02em; line-height: 1.2; margin: 44px 0 12px; }
.legal-main p, .legal-main li { font-size: 19px; }
.falta { background: #FFF1B8; padding: 0 4px; }

/*RONDA5*/
/* 2 · el carrito: el logo de B3TTER tal cual, grande; el carrito a seis columnas */
.f-marca { margin: 48px 0 0; }
.f-marca img { display: block; width: min(100%, 780px); height: auto; }
@media (min-width: 901px) {
  .donde h2 { grid-column: 1 / 11; grid-row: 1; }
  .f-marca { grid-column: 1 / 9; grid-row: 2; margin-top: 64px; align-self: center; }
  .f-bote { grid-column: 9 / 13; grid-row: 2; margin: 64px 0 0; }
  .donde .intro { grid-column: 1 / 6; grid-row: 3; margin-top: 56px; }
  .donde .cita-b { grid-column: 7 / 13; grid-row: 3; margin: 56px 0 0; }
  .f-avion { grid-column: 7 / 13; grid-row: 4 / 6; margin-top: 64px; }
  .f-bandejas { grid-column: 1 / 6; grid-row: 4; margin-top: 64px; }
  .f-stand { grid-column: 2 / 5; grid-row: 5; margin-top: 32px; align-self: start; }
}
@media (max-width: 900px) {
  .f-marca { grid-column: 1 / -1; margin-top: 32px; }
  .f-bote { grid-column: 4 / -1; margin: 32px 0 0; }
  .f-avion { grid-column: 1 / -1; margin-top: 40px; }
  .f-bandejas { grid-column: 1 / 8; margin-top: 32px; }
  .f-stand { grid-column: 8 / -1; margin-top: 96px; }
}

/* más visual al bajar: sobre cada foto, una cortina del color de la banda se recoge hacia arriba y la foto se asienta;
   el logo de B3TTER se descubre de izquierda a derecha. Solo transform: la imagen nunca queda recortada para la carga diferida. */
.banda.papel { --fondo-banda: var(--papel); } .banda.blanco { --fondo-banda: #fff; } .banda.arena { --fondo-banda: var(--arena); } .banda.mar { --fondo-banda: var(--mar); }
.js .revela { position: relative; overflow: hidden; }
.js .revela::after { content: ""; position: absolute; inset: 0; background: var(--fondo-banda, var(--papel)); pointer-events: none; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.js .revela::after { transform-origin: 50% 0; }
.js .revela.visto::after { transform: scaleY(0); }
.js .revela img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .revela.visto img { transform: none; }
.js .revela.lado::after { transform-origin: 100% 50%; }
.js .revela.lado.visto::after { transform: scaleX(0); }
.js .revela.lado img { transform: none; transition: none; }

/* 5 · remate (ronda 6): al llegar al final, una hoja de papel se desdobla en tres pliegues en 0,6 s
   y, cuando el tercero termina, se abre el pergamino. Colores planos por cara: ni degradados ni sombras. */
.remate { background: var(--noche); padding: 0 var(--margen) clamp(24px, 5vh, 56px); perspective: 1200px; }
.remate span { display: block; height: clamp(44px, 8vh, 84px); transform-origin: 50% 0; }
.remate span:nth-child(1) { background: #F4F1EF; }
.remate span:nth-child(2) { background: #E4DCD5; }
.remate span:nth-child(3) { background: #EEE9E5; }
.js .remate span { transform: rotateX(-90deg); transition: transform .36s cubic-bezier(.3, .6, .3, 1); }
.js .remate.visto span { transform: none; }
.js .remate.visto span:nth-child(2) { transition-delay: .12s; }
.js .remate.visto span:nth-child(3) { transition-delay: .24s; }
.final-centinela { height: 1px; }

@media (prefers-reduced-motion: reduce) {
  .js .revela::after { display: none; }
  .js .revela img { transform: none; transition: none; }
  .js .remate span { transform: none; transition: none; }
}

/*RONDA9*/
/* portada: fila de prensa en la primera pantalla. Los logos, tal cual; el de 30 Under 30 (blanco y rojo) se pasa a negro por CSS. */
.prensa { grid-column: 1 / -1; grid-row: 4; list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 72px; }
.prensa li { margin: 0; }
.prensa a { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.prensa img { display: block; width: auto; }
.logo-forbes { height: 46px; }
.logo-30 { height: 24px; filter: brightness(0); }
.logo-ee { height: 36px; }
@media (max-width: 900px) {
  .prensa { margin-top: 24px; padding-top: 18px; gap: 16px 36px; }
  .logo-forbes { height: 36px; } .logo-30 { height: 19px; } .logo-ee { height: 28px; }
}

/* paneles de fotos junto a las listas de episodios: la foto sigue a la fila del centro de la pantalla (web.js) */
.panel-ep { grid-column: 7 / 13; grid-row: 3 / 5; align-self: stretch; justify-self: end; width: min(100%, 620px); container-type: inline-size; }
.invitado .panel-ep { grid-row: 3; }
.panel-marco { position: sticky; top: calc(50vh - 28.125cqi); aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: var(--linea); }
.pan-foto { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.pan-foto.is-on { visibility: visible; }
.pan-foto picture, .ep-foto picture { display: block; height: 100%; }
.pan-foto img, .ep-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ep-foto { display: none; grid-column: 1 / -1; aspect-ratio: 16 / 9; margin: 0 0 18px; }
@media (min-width: 901px) {
  .lista-ep li.activa a, .lista-inv li.activa a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rojo); text-underline-offset: .12em; }
}
@media (max-width: 900px) {
  .panel-ep { display: none; }
  .ep-foto { display: block; }
  .lista-ep li[data-foto] .dato { grid-row: 2 / 4; }
}
@media (max-width: 480px) { .lista-ep li[data-foto] .dato { grid-row: auto; } }

/* work hard: palés y cajas en la misma figura; con movimiento, las cajas tapan a los palés con el scroll (web.js) */
.f-palets picture { display: block; }
.f-palets .capa-2 { margin-top: 16px; }
.mueve .f-palets .capa-1 { transform: scale(1.12); transform-origin: 50% 40%; will-change: transform; }
.mueve .f-palets .capa-2 { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); }
.mueve .f-palets .capa-2 img { width: 100%; height: 100%; object-fit: cover; }
.f-bote { margin: 0; }
.f-bote img { display: block; width: 100%; height: auto; }

/*RONDA10*/
/* pie: una línea discreta después del remate (el pergamino sigue saltando con el centinela) */
.pie { font-size: 14px; gap: 8px 28px; }
/* Forbes entera, junto a su mención en charlas */
.f-forbes { max-width: 400px; margin: 8px 0 36px; }
.f-forbes img { display: block; width: 100%; height: auto; }
/* logo de B3TTER (el foco azul que sigue al puntero está en el bloque RONDA21B, al final) */
.f-marca .logo-b3tter { position: relative; display: block; width: min(100%, 780px); }
.f-marca .logo-b3tter img { width: 100%; }
/* ratio ≥ 2 también en tableta (481-900 px): cada foto, como mucho a la mitad de su ancho real; el neón lo resuelve su <picture> (1440 desde 700 px) */
@media (min-width: 481px) and (max-width: 900px) {
  .ep-foto { max-width: 640px; }
  .lista-inv li[data-foto="puroarde28"] .ep-foto { max-width: 540px; }
  .f-portal, .f-escenario { max-width: 600px; }
  .f-palets { max-width: 560px; }
  .f-avion { max-width: 720px; }
  .runclub :is(.f-medallas, .f-dorsal, .f-puente, .f-adoquines) { max-width: 400px; }
}

/* pódcast · el plató en luz blanca (ronda 10b). La cámara se acerca al rótulo mientras la sección cruza la pantalla
   (1 → 1,08, solo transform, will-change solo cerca; web.js) y una capa blanca sobre el rótulo respira (0,10 ↔ 0,18, 4,6 s).
   Con movimiento reducido o sin JS, todo quieto. */
.f-neon { overflow: hidden; overflow: clip; }
.neon-cam { position: relative; transform-origin: 50.3% 26.1%; }
.f-neon.cerca .neon-cam { will-change: transform; }
.neon-luz {
  position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: radial-gradient(ellipse 30% 13% at 50.3% 26.1%, #fff 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .neon-luz { animation: neon-respira 4.6s ease-in-out infinite alternate both; animation-play-state: paused; }
  .f-neon.cerca .neon-luz { animation-play-state: running; }
}
@keyframes neon-respira { from { opacity: .10; } to { opacity: .18; } }

/*RONDA11*/
/* cierre: el lema de Adrià a toda la pantalla, entre la invitación y el papel. Con movimiento, la caja se queda anclada
   una pantalla y cada línea sube tras su máscara al ritmo del scroll (web.js); al caer la x roja, debajo se despliega el
   papel y se abre el pergamino. Sin movimiento o sin JS, el lema quieto y entero. La x va en el rojo de la marca un punto
   más encendido para pasar de 3:1 sobre la noche (#B21A24 da 2,9:1; #D0212D da 3,7:1). */
.cierre { padding-top: clamp(24px, 4vw, 64px); padding-bottom: clamp(64px, 9vw, 128px); }
.cierre-fijo { display: flex; align-items: center; }
.cierre-lema { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: min(15.8vw, 21vh, 204px); line-height: .96; letter-spacing: -.05em; }
.cierre-lema .c { display: block; }
.cierre-lema .cl { display: block; white-space: nowrap; }
.mueve .cierre { height: var(--cierre-alto, 180vh); padding-top: 0; padding-bottom: 0; }
.mueve .cierre-fijo { position: sticky; top: 0; height: var(--cierre-caja, 100vh); }
.mueve .cierre .c { overflow: clip; overflow-clip-margin: .14em; }
.mueve .cierre .cl { transform: translateY(calc(100% + .35em)); }
.mueve .cierre.cerca .cl { will-change: transform; }
.mueve .cierre.hecho .cl { transform: none; }
/* invitado: en móvil y tableta el año caía bajo la miniatura y se leía como pie de foto; fuera (en escritorio sigue en su columna) */
/* ronda 24: sigue sin verse (nada de pie de foto), pero queda dentro de la fila para el lector de pantalla y el toque */
@media (max-width: 900px) { .lista-inv .fecha { position: absolute; grid-column: 1 / -1; grid-row: 1 / -1; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } }
/* ratio ≥ 2 con margen en tableta: los topes que daban 2,000 justos bajan un 1 % */
@media (min-width: 481px) and (max-width: 900px) {
  .ep-foto { max-width: 632px; }
  .lista-inv li[data-foto="puroarde28"] .ep-foto { max-width: 534px; }
  .f-portal, .f-escenario { max-width: 594px; }
  .f-avion { max-width: 712px; }
  .f-forbes { max-width: 396px; }
  .runclub :is(.f-medallas, .f-dorsal, .f-puente, .f-adoquines) { max-width: 396px; }
}

/*RONDA12*/
/* remate: la hoja es una carta (A4 plegada en tres, 1 : 2,12 por cara) que se desdobla bajo el lema, dentro del último
   tramo del cierre, así el pergamino se abre con el lema entero en pantalla. Caras planas y un filo de pliegue: sin
   degradados ni sombras, la misma luz única. El lema sube un poco en su caja para dejarle sitio. */
.cierre { --pl: clamp(30px, 5vh, 50px); }
.remate { display: grid; grid-template-columns: calc(var(--pl) * 2.12); justify-content: center; background: none; padding: 28px var(--margen) clamp(20px, 3vh, 32px); perspective: 900px; }
.remate span { height: var(--pl); }
.remate span + span { box-shadow: inset 0 1px 0 rgba(19, 10, 7, .16); }
.mueve .cierre { position: relative; }
.mueve .cierre-fijo { padding-bottom: calc(var(--pl) * 1.6); }
.mueve .cierre .remate { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 0; }
/* PuroArde: su portada es cuadrada y de 1081 px; en el panel 16:9 se enseña entera, en cuadrado, a su tamaño nativo (ratio ≥ 2) */
.pan-foto[data-foto="puroarde28"] picture { aspect-ratio: 1; width: auto; height: 100%; margin-inline: auto; }

/*RONDA13*/
/* Portada (más de 900 px): la prensa sube a la columna del nombre, justo debajo del h1, para que Forbes,
   30 Under 30 y El Español se vean sin bajar en portátiles de 1280×720 y 1366×768. La foto no cambia
   (mismo fichero, mismo ancho de columna). En móvil el orden sigue siendo el de la ronda 9. */
@media (min-width: 901px) {
  .hero .dentro { grid-template-rows: auto auto auto 1fr; }
  .hero h1 { margin-bottom: clamp(14px, 1.4vw, 22px); }
  .hero-foto { grid-row: 1 / 5; }
  .prensa { grid-column: 1; grid-row: 2; margin: 0 0 clamp(20px, 2vw, 34px); padding: 16px 0 0; gap: 14px clamp(28px, 3.2vw, 56px); }
  .prensa a { gap: 18px; }
  .hero-texto { grid-row: 3; }
  .entradilla { margin-bottom: 24px; }
  .hero-lema { grid-row: 4; margin-top: clamp(20px, 2vw, 36px); }
}

/*RONDA14*/
/* Portada en pantallas anchas y bajas (1536×730, 1440×700, 1600×760): el lema se salía por abajo porque el h1 ya va
   a 124 px. Solo se recorta aire (relleno de arriba, márgenes del h1, de la prensa, de la entradilla y del lema);
   tipografía, logos y retrato no cambian. */
@media (min-width: 901px) and (max-height: 800px) {
  .hero { padding-top: 16px; }
  .hero h1 { margin-bottom: 12px; }
  .prensa { padding-top: 12px; margin-bottom: 18px; }
  .entradilla { margin-bottom: 16px; }
  .hero-lema { margin-top: 18px; padding-top: 14px; }
}
/* 1440×700 y más bajas: la entradilla pasa de 4 a 3 líneas (misma letra, línea algo más larga) para que el lema quepa. */
@media (min-width: 901px) and (max-height: 719px) {
  .entradilla { max-width: 36ch; }
}

/* Cierre: la carta pasa de azulejo de 95 px a hoja de papel (≥ 160 px a 1440×900). Grano, fibra y manchas son
   los mismos SVG de pergamino/pergamino.css (--pg-grano, --pg-fibra, --pg-manchas, copiados como valor, sin
   tocar la pieza); la sombra interior es la de .pg__papel. La textura corre seguida de un pliegue a otro y la
   luz llega de arriba: el pliegue central queda un punto en sombra y cada doblez deja su raya.
   El despliegue es el mismo de la ronda 6 (rotateX, 0,36 s, retardos 0/0,12/0,24 s): ningún tipo de entrada nuevo.
   El lema se calcula para caber entero entre la cabecera y la carta. */
.cierre { --pl: clamp(42px, min(5.4vw, 8.6vh), 84px); --pl-pie: clamp(20px, 3vh, 32px); --pl-aire: clamp(16px, 2.4vh, 28px); }
.remate {
  --rg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.13'/></svg>");
  --rf: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='420' height='420' filter='url(%23f)' opacity='.07'/></svg>");
  --rm: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 -1.6 .9'/></filter><rect width='600' height='600' filter='url(%23m)' opacity='.16'/></svg>");
  padding-bottom: var(--pl-pie);
}
.remate span {
  --y: 0px;
  background-color: #F4F1EF;
  background-image: var(--luz, none), var(--rg), var(--rf), var(--rm);
  background-size: 100% 100%, 180px 180px, 420px 420px, 600px 600px;
  background-position: 0 0, 0 var(--y), 0 var(--y), 0 var(--y);
  box-shadow: inset 0 0 0 .5px rgba(60, 44, 24, .16), inset 0 0 18px rgba(96, 72, 40, .10);
}
.remate span:nth-child(1) { background-color: #F4F1EF; --luz: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%, rgba(60, 44, 24, .05)); }
.remate span:nth-child(2) { background-color: #ECE6E0; --y: calc(var(--pl) * -1); --luz: linear-gradient(180deg, rgba(60, 44, 24, .16), rgba(60, 44, 24, .04) 2px, rgba(60, 44, 24, 0) 45%, rgba(255, 255, 255, .10)); }
.remate span:nth-child(3) { background-color: #F1ECE7; --y: calc(var(--pl) * -2); --luz: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .12) 2px, rgba(255, 255, 255, 0) 35%, rgba(60, 44, 24, .07)); }
.remate span + span { box-shadow: inset 0 1px 0 rgba(60, 44, 24, .20), inset 0 0 0 .5px rgba(60, 44, 24, .16), inset 0 0 18px rgba(96, 72, 40, .10); }
.cierre-lema { font-size: min(15.8vw, 204px, calc((100vh - var(--pl) * 3 - var(--pl-pie) - var(--pl-aire) - 140px) / 2.88)); }
.mueve .cierre-fijo { padding-top: 136px; padding-bottom: calc(var(--pl) * 3 + var(--pl-pie) + var(--pl-aire)); }
@media (max-width: 600px) {
  .cierre { --pl: clamp(42px, 13vw, 60px); }
  .mueve .cierre-fijo { padding-top: 96px; }
}

/* PuroArde: la portada es cuadrada. En el panel (más de 900 px) lo que sobra a los lados del 16:9 se rellena con el
   rojo de su propio borde (#F9423A, muestreado del fichero material/puroarde-28-portada.png: 249,66,58), no con la
   banda gris del marco.
   RONDA14: en la lista (hasta 900 px) la fila vuelve al recorte a sangre que aprobó GATE-13; el rojo queda solo en el panel. */
.pan-foto[data-foto="puroarde28"] { background: #F9423A; }

/*RONDA14*/
/* Carta: el grano, la fibra y las manchas de la ronda 13 no se pintaban. La regla antigua
   `.remate span:nth-child(n) { background: … }` (ronda 6, línea 452-454) es más específica que `.remate span` y su
   `background` abreviado dejaba background-image en none. Se repiten las capas con la misma especificidad, más abajo.
   Aire entre el lema y la carta: +10 px a 1440×900 (--pl-aire) quitándolos del pie (--pl-pie), así la suma no cambia
   y el lema del cierre conserva su tamaño en todas las pantallas. */
.cierre { --pl-aire: clamp(24px, 3.6vh, 40px); --pl-pie: clamp(12px, 1.8vh, 24px); }
.remate span:nth-child(n) {
  background-image: var(--luz, none), var(--rg), var(--rf), var(--rm);
  background-size: 100% 100%, 180px 180px, 420px 420px, 600px 600px;
  background-position: 0 0, 0 var(--y), 0 var(--y), 0 var(--y);
  background-repeat: no-repeat, repeat, repeat, repeat;
}

/*RONDA15*/
/* 1 · Portada en el móvil (≤ 900 px): el lema se lee entero en la primera pantalla también con la barra de Safari
   (390×664, 375×667, 360×740). Primero se recorta aire (relleno de arriba, márgenes del h1, de la prensa y del lema).
   Si aun así no cabe, el retrato pierde alto por abajo (object-fit: cover, mismo ancho): la cara conserva su tamaño
   y su nitidez (mismo fichero, misma escala) y nunca baja de 62vw de alto. --resto = cabecera + aire + h1 + prensa +
   lema + 8 px de margen, medido en esta ronda. El recorte de la foto solo actúa en el móvil (≤ 600 px): en tableta la
   foto no cambia (así la fila de PuroArde a 900 px sigue igual píxel a píxel que en la ronda 13). En escritorio no cambia nada. */
@media (max-width: 900px) {
  .hero { padding-top: 16px; --r-prensa: 67px; --r-lema: 30px;
    --resto: calc(65px + 16px + 1.8 * max(60px, 8.6vw) + 16px + var(--r-prensa) + 33px + var(--r-lema) + 8px); }
  .hero h1 { margin-bottom: 16px; }
  .prensa { margin-top: 16px; padding-top: 14px; row-gap: 10px; }
  .hero-lema { margin-top: 18px; padding-top: 14px; }
}
@media (max-width: 600px) {
  .hero-foto img { max-height: max(calc(100vh - var(--resto)), 62vw); max-height: max(calc(100svh - var(--resto)), 62vw); object-fit: cover; object-position: 50% 16%; }
}
@media (max-width: 480px) {
  .hero { --r-prensa: 105px; --r-lema: 60px; }
}

/* 3 · PuroArde en el panel (≥ 901 px): la portada cuadrada va pegada al borde izquierdo del panel, como las demás
   fotos, y a la derecha sigue su propio borde: los colores del borde del fichero servido
   (pod-puroarde28-1080.avif, media de sus columnas W-8 a W-4, 74 paradas, _qa/ronda15-costura-opt.mjs) funden en 3-28 px con el rojo #F9423A.
   Ya no hay relleno junto a la foto de la persona, que era donde saltaba el color. La foto no se toca; en la lista
   (≤ 900 px) todo sigue igual. */
@media (min-width: 901px) {
  .pan-foto[data-foto="puroarde28"] { display: flex; }
  .pan-foto[data-foto="puroarde28"] picture { flex: none; margin-inline: 0; }
  .pan-foto[data-foto="puroarde28"]::after { content: ""; flex: 1 1 0; background: linear-gradient(90deg, rgba(249, 66, 58, 0) 0 3px, #F9423A 28px), linear-gradient(180deg, #f9423a 0.05%, #f9423a 22.82%, #f9423c 23.38%, #ff443e 23.47%, #df3c35 23.56%, #2c0b06 23.66%, #040100 23.75%, #000000 24.03%, #000200 30.23%, #130606 30.32%, #9e2b2b 30.42%, #7f2223 30.51%, #080202 30.6%, #040202 30.69%, #0a0303 30.79%, #010100 30.97%, #020100 32.73%, #060100 32.82%, #240906 32.92%, #b9322f 33.01%, #fb4240 33.1%, #f0413a 33.19%, #f8433a 33.75%, #f8433a 34.03%, #f2423d 34.12%, #100401 34.31%, #030000 34.4%, #070200 34.58%, #010000 34.86%, #020000 36.16%, #0e0402 36.25%, #952822 36.34%, #ff4541 36.44%, #f2413b 36.53%, #f9423a 36.81%, #f7413c 50.88%, #fc4340 50.97%, #a92c26 51.06%, #0a0200 51.16%, #000000 51.53%, #010001 52.64%, #070300 52.92%, #7a221c 53.01%, #fc463e 53.1%, #f64339 53.19%, #fa413d 70.88%, #dc3933 70.97%, #2f0b05 71.06%, #020101 71.16%, #000001 71.34%, #040000 72.45%, #1a0606 72.55%, #cf362c 72.64%, #fe433c 72.73%, #f5443a 74.95%, #df3d35 75.05%, #2d0d08 75.14%, #020100 75.23%, #000000 75.32%, #030000 78.47%, #0c0300 78.56%, #ce3730 78.66%, #fc423d 78.75%, #fa423c 87.08%, #f6413b 87.18%, #b22f29 87.27%, #3f0f0b 87.36%, #030201 87.45%, #000000 90.6%, #1a0707 90.69%, #90261f 90.79%, #f03f38 90.88%, #f84239 90.97%, #f9423a 99.95%); }
}

/*RONDA16*/
/* 1 · plató: la versión a color (mismo recorte, 1440×1800, de ig-C9sU-S5tPmJ-8) va encima de la blanca y se enciende
   con el scroll, nunca con un reloj: primero el rótulo, luego el centro del plató (caja y alfombra) y al final la
   habitación entera. Tres capas de la misma foto con máscaras radiales fijas; web.js solo cambia su opacidad.
   Sin JS o con movimiento reducido no hay .vivo: la de color queda fija y entera. */
.neon-color { position: absolute; inset: 0; pointer-events: none; }
.neon-color .nc { position: absolute; inset: 0; display: block; }
.neon-color .nc img { display: block; width: 100%; height: 100%; }
.neon-color.vivo .nc { opacity: 0; }
.f-neon.cerca .neon-color.vivo .nc { will-change: opacity; }
.neon-color .nc-1 {
  -webkit-mask-image: radial-gradient(ellipse 44% 30% at 50.3% 26.1%, #000 30%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 44% 30% at 50.3% 26.1%, #000 30%, rgba(0, 0, 0, 0) 100%);
}
.neon-color .nc-2 {
  -webkit-mask-image: radial-gradient(ellipse 95% 72% at 50.3% 34%, #000 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 95% 72% at 50.3% 34%, #000 35%, rgba(0, 0, 0, 0) 100%);
}
/* 2 · paneles (≥ 901 px): cada fila tiene su tramo de pantalla. La foto es la de la fila que cruza el centro y se
   queda mientras la cruza; el texto va centrado en su tramo, a la altura de la foto pegajosa. */
@media (min-width: 901px) {
  .lista-ep li, .lista-inv li { min-height: clamp(240px, 36vh, 340px); align-content: center; }
}
/* 3a · al pasar el ratón o el dedo se ilumina SOLO la fila tocada (una capa de luz por fila, solo opacidad) */
.lista-ep li, .lista-inv li { position: relative; isolation: isolate; }
.lista-ep li::before, .lista-inv li::before {
  content: ""; position: absolute; inset: 0 -10px; z-index: -1; pointer-events: none;
  background: #fff; opacity: 0; transition: opacity .2s ease;
}
@media (hover: hover) { .lista-ep li:hover::before, .lista-inv li:hover::before { opacity: .85; } }
.lista-ep li.toca::before, .lista-inv li.toca::before, .lista-ep li:focus-within::before, .lista-inv li:focus-within::before { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .lista-ep li::before, .lista-inv li::before { transition: none; } }

/*RONDA17*/
/* 1 · logo de B3TTER con el dedo: la tienda va en un texto aparte que solo aparece en pantallas táctiles
   (el foco azul del logo está en RONDA21B) */
.f-marca .ver-b3tter { display: none; }
@media (hover: none) and (pointer: coarse) {
  .f-marca .ver-b3tter {
    display: inline-block; margin-top: 14px; padding: 6px 0;
    font-size: 16px; font-weight: 600; letter-spacing: .01em; color: inherit;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  }
}
/* 3a · run club y palés: la foto se abre con el scroll (web.js). Aquí, solo el estado de salida (sin JS en marcha
   ya se ve recortada, sin destello) y fuera la cortina de tiempo: en estas fotos manda el scroll. */
.mueve .revela.abre { clip-path: inset(40% 12%); }
.mueve .revela.abre::after { display: none; }
.mueve .revela.abre img { transform: scale(1.08); transition: none; transform-origin: 50% 50%; }
.mueve .f-palets.abre img { transform: none; }
/* 3b · nombres: cada línea sube tras su máscara en 0,85 s; nombre, título y dato de cada fila, 90 ms uno tras otro */
.js .aparece .l { transition-duration: .85s; }
.js .aparece .titulo .l { transition-delay: calc(var(--d, 0ms) + 90ms); }
.js .aparece :is(.dato, .fecha) .l { transition-delay: calc(var(--d, 0ms) + 180ms); }
@media (prefers-reduced-motion: reduce) { .js .aparece .l { transition: none; } }
/* 6 · PuroArde (DUDAS-RONDA16 §5): la fila vuelve a su posición de subpíxel de la ronda 13 en los dos anchos exactos
   donde la foto se redibujaba distinta; no se ve, solo iguala el render píxel a píxel */
@media (width: 900px) { .lista-inv li[data-foto="puroarde28"] { margin-top: .390625px; } }
@media (width: 360px) { .lista-inv li[data-foto="puroarde28"] { margin-top: .75px; } }

/*RONDA18*/
/* 2 · listas del pódcast en escritorio (≥ 901 px): ninguna fila se lee vacía. El tramo de cada fila baja de
   240-340 px a 220-260 px y el texto crece para llenarlo: el nombre grande, debajo su título real (solo los que
   están en data.md y en el HTML) y las visitas grandes debajo (antes, 28 px en una columna aparte). En invitado,
   el año va a la escala del nombre y La Pròrroga #94 lleva su título (data.md §9, comprobado en YouTube).
   En ≤ 900 px no cambia nada: cada fila lleva su foto. */
.solo-ancho { display: none; }
@media (min-width: 901px) {
  .lista-ep li, .lista-inv li { min-height: clamp(220px, 28vh, 260px); padding: 24px 0; }
  .lista-ep li { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .lista-ep a, .lista-inv a { font-size: clamp(40px, 3.5vw, 54px); line-height: 1.04; }
  .lista-ep .titulo, .lista-inv .titulo { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.4; margin-top: 10px; max-width: 34ch; }
  .lista-ep .dato { grid-column: 1; grid-row: auto; align-self: start; text-align: left; margin-top: 14px; font-size: 15px; }
  .lista-ep .dato b { display: inline; font-size: clamp(36px, 3.1vw, 48px); line-height: 1; margin-right: 8px; }
  .lista-inv li { grid-template-columns: clamp(118px, 10vw, 150px) minmax(0, 1fr); min-height: clamp(210px, 26vh, 240px); }
  .lista-inv .titulo { font-size: clamp(20px, 1.6vw, 24px); }
  .lista-inv .fecha { font-size: clamp(40px, 3.5vw, 54px); font-weight: 300; line-height: 1.04; padding-top: 0; letter-spacing: -.02em; }
  .lista-inv .solo-ancho { display: block; }
}

/*RONDA19*/
/* 0 · ninguna palabra sola en la última línea. Nombres y títulos de las dos listas reparten sus líneas a partes
   iguales (balance no cambia el número de líneas, así que las filas y sus tramos miden lo mismo); en la cronología
   y los párrafos, «pretty». */
.lista-ep a, .lista-inv a, .lista-ep .titulo, .lista-inv .titulo { text-wrap: balance; }
dd, p { text-wrap: pretty; }
/* 2 · episodios: la lista va sobre blanco y la capa blanca no se veía. La fila tocada toma el papel cálido #F4F1EF
   (nada de azul, que es del logo); solo esa fila y solo mientras el ratón o el dedo están encima. */
.blanco .lista-ep li::before { background: var(--papel); }
@media (hover: hover) { .blanco .lista-ep li:hover::before { opacity: 1; } }
.blanco .lista-ep li.toca::before, .blanco .lista-ep li:focus-within::before { opacity: 1; }
/* 4 · PuroArde de 901 a 1100 px: a sangre, como en la lista de ≤ 900 px. Sin relleno a la derecha, no hay costura.
   A partir de 1101 px sigue el cuadrado con su borde (ronda 15). */
@media (min-width: 901px) and (max-width: 1100px) {
  .pan-foto[data-foto="puroarde28"] { display: block; }
  .pan-foto[data-foto="puroarde28"] picture { aspect-ratio: auto; width: 100%; height: 100%; margin-inline: 0; }
  .pan-foto[data-foto="puroarde28"]::after { content: none; }
}
/* 0b · invitados de 901 a 1100 px: la columna del nombre mide 258-351 px y «Emocional Podcast» o «La Pròrroga #94»
   se partían con una palabra sola abajo. Año y nombre bajan a 3,6vw (32-40 px) y la columna del año a 96 px: caben
   en una línea. El alto de las filas no cambia (manda su min-height). */
@media (min-width: 901px) and (max-width: 1100px) {
  .lista-inv li { grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; }
  .lista-inv a, .lista-inv .fecha { font-size: clamp(32px, 3.6vw, 40px); }
}
/* ronda 20 · títulos en móvil un punto menos (18 → 17 px) */
@media (max-width: 900px) { .lista-ep .titulo, .lista-inv .titulo { font-size: 17px; } }
/* ronda 20 · banda vacía en 901-1100 px: las filas de invitados de título corto (La Pròrroga, PuroArde) bajan su alto mínimo */
@media (min-width: 901px) and (max-width: 1100px) { .lista-inv li { min-height: 180px; } }

/*RONDA21B*/
/* 1 · logo de B3TTER (Uriel 27-sep 11:45: «solo la parte que esté tocando, como muy flow»). El logo se queda en su gris
   (el PNG, intacto y visible). Encima, la capa .logo-azul lleva la máscara del mismo PNG y dentro un foco radial azul
   #0091FF de radio 13,5 % del ancho del logo (105 px a 780), macizo hasta el 35 % y con borde largo. web.js lo lleva
   detrás del puntero o del dedo con inercia, solo con transform; entra en 150 ms y se apaga en 400 ms. La máscara lo
   recorta a las letras: fuera del logo no pinta nada. Teclado: el foco en el centro. */
.logo-azul {
  position: absolute; inset: 0; pointer-events: none; background: none;
  -webkit-mask-image: url(img/b3tter-logo.png); mask-image: url(img/b3tter-logo.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.logo-azul i {
  position: absolute; left: 0; top: 0; width: 27%; height: auto; aspect-ratio: 1; margin: -13.5% 0 0 -13.5%; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--azul-b3tter) 35%, rgba(0, 145, 255, .6) 65%, rgba(0, 145, 255, 0) 100%);
  transform: translate3d(-999px, -999px, 0); will-change: transform, opacity; opacity: 0; transition: opacity .4s ease;
}
.logo-b3tter.enfoca .logo-azul i, .logo-b3tter:focus-visible .logo-azul i { opacity: 1; transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) { .logo-azul i { transition: none; } }

/*RONDA22*/
/* Fase 2 · la caja de granola de B3TTER en la tarjeta del cierre. Sustituye a la carta plegada del remate como señal de
   llegada (el papel ahora sale de la caja, y el pergamino ya no se abre solo). El lienzo reserva desde el principio el
   tamaño del escenario (CLS 0); mientras es icono, un recorte (clip-path, que también limita el toque) deja solo su
   rincón: abajo a la derecha en pantallas anchas y bajo el lema, centrada, en el móvil. Al despertar, el recorte se abre
   a todo el escenario en 0,6 s y el lema queda detrás un punto más apagado, sin moverse de sitio. */
.js .cierre .remate { visibility: hidden; }
.cierre-fijo { position: relative; }
.caja3d { display: none; }
.js .caja3d {
  display: block; position: absolute; z-index: 1; right: var(--margen); bottom: var(--pl-pie, 16px);
  width: min(50vw, 700px); height: calc(var(--cierre-caja, 100vh) * .55);
  pointer-events: none;
}
.caja3d-lienzo, .caja3d-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: auto; cursor: grab; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; outline: none; border-radius: 12px;
  opacity: 0; transition: opacity .2s linear, clip-path .6s cubic-bezier(.22, .8, .24, 1);
  clip-path: inset(var(--c3-arriba, 45%) var(--c3-der, 0px) 0px var(--c3-izq, 60%) round 12px);
}
.caja3d-lienzo:active { cursor: grabbing; }
.caja3d-lienzo.c3-fuera, .caja3d-lienzo.c3-fuera:active { cursor: default; } /* ronda 25: fuera de la silueta de la caja (tableta) */
.caja3d.dentro .caja3d-lienzo, .caja3d.dentro .caja3d-foto { opacity: 1; }
.caja3d.vivo .caja3d-lienzo { clip-path: inset(0px 0px 0px 0px round 12px); }
.caja3d-lienzo:focus-visible, .caja3d-foto:focus-visible { box-shadow: inset 0 0 0 2px rgba(244, 241, 239, .55); }
/* sin WebGL: la foto real del frontal, del alto del icono y en el mismo rincón */
.caja3d-foto {
  inset: auto calc(var(--c3-icono, 150px) * .12) 6px auto; width: auto; height: var(--c3-icono, 150px);
  clip-path: none; border-radius: 3px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35));
}
.cierre-lema { transition: opacity .6s cubic-bezier(.22, .8, .24, 1), transform .6s cubic-bezier(.22, .8, .24, 1); transform-origin: 0 0; }
.cierre.c3-vivo .cierre-lema { opacity: .42; transform: translateY(var(--c3-sube, 0px)) scale(var(--c3-lema, 1)); }
@media (max-width: 600px) {
  .js .caja3d { left: 0; right: 0; width: auto; height: calc(var(--cierre-caja, 100vh) * .40); }
  .caja3d-foto { inset: auto 0 6px 0; margin: 0 auto; --c3-icono: 110px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .caja3d-foto { --c3-icono: 130px; right: calc(var(--c3-icono) * .12 + var(--margen)); }
  /* ronda 24: en tableta el lienzo ocupa todo el ancho para que la escena quepa entera en la columna derecha del lema; el icono dormido sigue a un margen del borde */
  .js .caja3d { left: 0; right: calc(-1 * var(--margen)); width: auto; padding-right: calc(var(--margen) * 2); box-sizing: border-box; height: calc(var(--cierre-caja, 100vh) * .62); } /* ronda 25: el lienzo llega al borde de la pantalla (la escena gana el margen derecho; el icono dormido no se mueve) */
}
/* sin movimiento: la tarjeta no está anclada; se reserva debajo del lema el sitio que ocupaba la carta */
.js:not(.mueve) .cierre-fijo { padding-bottom: calc(var(--pl) * 3 + var(--pl-pie) + var(--pl-aire)); }
.js:not(.mueve) .cierre .remate { display: none; }
.js:not(.mueve) .caja3d { height: min(calc(100vh * .55), 100%); }
@media (max-width: 600px) { .js:not(.mueve) .caja3d { height: min(calc(100vh * .40), 100%); } }
/* foco de teclado: un filo claro en el rincón del icono (el recorte del lienzo se comería su propio borde) */
.js .caja3d::after {
  content: ''; position: absolute; top: var(--c3-arriba, 45%); left: var(--c3-izq, 60%); right: var(--c3-der, 0px); bottom: 0;
  border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(244, 241, 239, .55); opacity: 0; pointer-events: none;
}
.js .caja3d.vivo::after { top: 0; left: 0; right: 0; }
.js .caja3d.es-foto::after { display: none; }
.js .caja3d:has(:focus-visible)::after { opacity: 1; }

/* ronda 28C: la caja más grande también de 791 a 1100. La columna del cierre gana hacia la derecha hasta el borde de la pantalla (--c3-ancha, en rampa: 0 a 790 y a 1101, entera de 890 a 1024; el fondo es la banda entera, no se ve) y, de 791 a 1023, el lema baja hasta 7 px de cuerpo (en rampa) para que la caja crezca sin tocar letras */
@media (min-width: 791px) and (max-width: 1100px) {
  .cierre { --c3-ancha: clamp(0px, min((100vw - 790px) * .3, (1101px - 100vw) * .4), var(--margen)); }
  .cierre-fijo { margin-right: calc(-1 * var(--c3-ancha)); }
  .js .caja3d { right: calc(var(--c3-ancha) - var(--margen)); }
}
@media (min-width: 791px) and (max-width: 1023px) {
  .cierre-lema { font-size: calc(min(15.8vw, 204px, calc((100vh - var(--pl) * 3 - var(--pl-pie) - var(--pl-aire) - 140px) / 2.88)) - clamp(0px, min((100vw - 790px) * .07, (1024px - 100vw) * .2), 7px)); }
}

/* ronda 28C: sin WebGL, la foto del frontal crece como la caja (390 +27 %, tableta +25 %, escritorio +28 %) */
.caja3d-foto { --c3-icono: 192px; }
@media (max-width: 600px) { .caja3d-foto { --c3-icono: 140px; } }
@media (min-width: 601px) and (max-width: 1100px) { .caja3d-foto { --c3-icono: 162px; } }

/* ronda 29A (orden de Uriel 28-sep 09:50): la caja grande desde el principio y sin recortes. El lienzo cubre la tarjeta entera
   del cierre, detrás del lema; caja3d.js coloca la caja y la fila de productos en los huecos que deja el lema (medidos), así
   que ya no hay icono, recorte ni despertar. El lema, al 100 % y por encima (sin recibir el puntero). */
.js .cierre .caja3d { inset: 0; width: auto; height: auto; padding: 0; pointer-events: none; }
.js .cierre .caja3d::after { display: none; }
.cierre .caja3d-lienzo { clip-path: none; border-radius: 0; cursor: default; }
.cierre .caja3d-lienzo:not(.c3-fuera) { cursor: grab; }
.cierre .caja3d-lienzo:not(.c3-fuera):active { cursor: grabbing; }
.cierre .caja3d-lienzo:focus-visible { box-shadow: inset 0 0 0 2px rgba(244, 241, 239, .35); }
.js .cierre .caja3d-foto { inset: auto; right: auto; bottom: auto; clip-path: none; border-radius: 3px; cursor: default; object-fit: contain; }
.cierre-lema { position: relative; z-index: 2; pointer-events: none; }
.cierre.c3-vivo .cierre-lema { opacity: 1; transform: translateY(var(--c3-sube, 0px)) scale(var(--c3-lema, 1)); } /* ronda 29C: en tableta vertical el lema puede subir hasta 40 px (--c3-sube) */
@media (max-width: 900px), (max-aspect-ratio: 102/100) { .cierre-fijo { align-items: flex-start; } }
.js:not(.mueve) .cierre-fijo { min-height: 100vh; box-sizing: border-box; }