/* Plantillas de página de la revista Hablemos Tech.
   Cada composición se arma con clases sobre .pagina__lienzo; un volumen nuevo
   reutiliza estas piezas y solo cambia textos, fotos y orden. */

/* ───────────────────────── Base de composición ───────────────────────── */

.hoja {
  display: flex;
  flex-direction: column;
  padding: var(--margen-y) var(--margen);
}

.hoja > .folio {
  margin-top: auto;
  padding-top: 2.4cqi;
}

.hoja--banda {
  padding-bottom: 0;
}

.titulo-1,
.titulo-2 {
  max-width: var(--measure-display);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.titulo-1 {
  font-size: var(--text-display-1);
}

.titulo-2 {
  font-size: var(--text-display-2);
}

.entrada {
  max-width: var(--measure-body);
  font-size: var(--text-body-lg);
  line-height: 1.38;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.pagina--noche .entrada {
  color: rgba(255, 255, 255, 0.88);
}

.texto {
  max-width: var(--measure-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  hyphens: auto;
  text-wrap: pretty;
}

.pagina--noche .texto {
  color: rgba(255, 255, 255, 0.78);
}

.texto--2col {
  max-width: none;
  columns: 2;
  column-gap: 4.5cqi;
  column-fill: balance;
}

.texto p + p {
  text-indent: 1.4em;
}

.capitular::first-letter {
  float: left;
  margin: 0.06em 0.08em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  font-weight: 800;
  line-height: 0.78;
  color: var(--verde-tinta);
}

.pagina--noche .capitular::first-letter {
  color: var(--verde);
}

.articulo__cabeza {
  display: grid;
  gap: 2.2cqi;
  margin-top: 3.4cqi;
}

.articulo .texto {
  margin-top: 2.8cqi;
}

.articulo--foto .articulo__cabeza {
  margin-top: 2.8cqi;
}

.articulo--foto .texto {
  margin-top: 2.2cqi;
}

.articulo--foto > .recuadro {
  grid-template-columns: 1fr 1fr;
  margin-top: 2.4cqi;
}

.articulo--foto > .cita-banda {
  font-size: var(--text-heading-3);
}

.hoja.articulo--foto > .folio {
  padding-top: 2.4cqi;
}

/* Cita que cierra una página, con filete verde */
.cita-banda {
  margin-top: 2cqi;
  padding-top: 1.6cqi;
  border-top: 0.6cqi solid var(--verde);
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

/* Atribución bajo una cita o una cifra */
.firma {
  display: block;
  margin-top: 0.9cqi;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.firma b {
  font-weight: 600;
  color: var(--tinta);
}

.pagina--noche .firma {
  color: var(--tenue);
}

.pagina--noche .firma b {
  color: var(--blanco);
}

/* Franja verde al pie de la hoja, a sangre */
.banda {
  display: flex;
  align-items: center;
  gap: 3cqi;
  margin: auto calc(var(--margen) * -1) 0;
  padding: 2.6cqi var(--margen);
  background: var(--verde);
  color: var(--negro);
}

.banda__asterisco {
  flex: none;
  width: 6.5cqi;
  height: 6.5cqi;
  fill: var(--negro);
}

.banda p {
  display: grid;
  gap: 0.6cqi;
}

.banda p span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.banda strong {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.banda .folio__num {
  flex: none;
  margin-left: auto;
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--negro);
}

/* Tres cifras en fila */
.trio,
.cifras-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3cqi;
  padding-top: 2cqi;
  border-top: 1px solid var(--linea-papel);
}

.trio {
  margin-top: 3.6cqi;
}

.pagina--verde .trio {
  margin-top: 2.8cqi;
  border-top-color: var(--linea-verde);
}

.trio dt,
.cifras-fila dt {
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.cifras-fila dt small {
  font-size: 0.55em;
  letter-spacing: 0;
}

.trio dd,
.cifras-fila dd {
  margin-top: 0.9cqi;
  font-size: var(--text-body);
  line-height: 1.3;
  color: var(--tinta-suave);
}

.pagina--verde .trio dd {
  color: rgba(5, 5, 5, 0.75);
}

.cifras-fila cite {
  display: block;
  margin-top: 0.5cqi;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-style: normal;
  letter-spacing: var(--tracking-ui);
  color: var(--tinta-suave);
}

/* ───────────────────────── Portada ───────────────────────── */

/* Arte final a página completa. Sin velo ni filtros: el PNG ya trae el diseño. */
.portada--arte {
  background: #050505;
}

.portada__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portada__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.82) contrast(1.08) brightness(0.86);
}

.portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.84) 0%, rgba(5, 5, 5, 0) 22%, rgba(5, 5, 5, 0) 42%, rgba(5, 5, 5, 0.86) 64%, #050505 90%),
    radial-gradient(55% 35% at 88% 30%, rgba(49, 220, 141, 0.22), transparent 70%);
}

.portada__cabecera {
  position: absolute;
  top: var(--margen-y);
  left: var(--margen);
  right: var(--margen);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.portada__logo {
  width: 54cqi;
  height: auto;
}

.portada__ficha {
  display: grid;
  gap: 0.9cqi;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.portada__ficha dt {
  color: var(--tenue);
}

.portada__ficha dd {
  font-weight: 600;
}

.portada__pixel {
  position: absolute;
  top: 31cqh;
  right: var(--margen);
  width: 23cqi;
}

.portada__vertical {
  position: absolute;
  top: 47cqh;
  right: 2.6cqi;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tenue);
}

.portada__titular {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: 23.5cqh;
  display: grid;
  justify-items: start;
  gap: 2.6cqi;
}

.portada__h1 {
  max-width: var(--measure-display);
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.portada__h1 mark,
.retrato__cita mark {
  padding: 0 0.07em 0.02em;
  margin-left: -0.07em;
  background: var(--verde);
  color: var(--negro);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.portada__lineas {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: 10.5cqh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3cqi;
  padding-top: 2cqi !important;
  border-top: 1px solid var(--linea-noche);
}

.portada__lineas li {
  display: grid;
  align-content: start;
  gap: 0.8cqi;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
}

.portada__lineas span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--verde);
}

.portada__pie {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: var(--margen-y);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqi;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  color: var(--tenue);
}

/* ───────────────────────── Sumario ───────────────────────── */

.sumario {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--papel);
}

.sumario__titulo {
  margin: 3.4cqi 0 0 -0.05em;
  font-family: var(--font-display);
  font-size: var(--text-mega);
  font-weight: 800;
  line-height: var(--leading-mega);
  letter-spacing: var(--tracking-mega);
}

.sumario__punto {
  color: var(--verde);
}

.pagina--papel .sumario__punto {
  color: var(--verde-tinta);
}

.sumario__cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 24cqi 1fr;
  gap: 4.5cqi;
  margin-top: 4.4cqi;
}

.sumario__lado {
  display: flex;
  flex-direction: column;
  gap: 2.2cqi;
  padding-top: 1.8cqi;
  border-top: 2px solid var(--tinta);
}

.sumario__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--papel-hondo);
}

.sumario__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.85) contrast(1.04);
}

.sumario__foto figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.7cqi 1.2cqi;
  background: var(--verde);
  color: var(--negro);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.sumario__nota {
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.sumario__portada {
  display: grid;
  gap: 0.6cqi;
  margin-top: auto;
  font-size: var(--text-body);
  line-height: 1.35;
  color: var(--tinta-suave);
}

.sumario__portada span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tinta);
}

.indice {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--tinta);
}

.indice__item {
  position: relative;
  display: grid;
  grid-template-columns: 7cqi 1fr;
  gap: 1.4cqi;
  padding: 0.95cqi 0 1.1cqi;
  border-bottom: 1px solid var(--linea-papel);
}

.indice__num {
  font-family: var(--font-mono);
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: 1.1;
  color: var(--verde-tinta);
  font-variant-numeric: tabular-nums;
}

.indice__seccion {
  margin-bottom: 0.4cqi;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.indice__titulo {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 750;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.indice__item--destacado::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  width: 7cqi;
  height: 0.8cqi;
  background: var(--verde);
}

/* ───────────────────────── Crónica ───────────────────────── */

.cronica {
  background:
    radial-gradient(70% 45% at 100% 0%, rgba(49, 220, 141, 0.13), transparent 70%),
    var(--negro);
}

.cronica__cabeza {
  display: grid;
  grid-template-columns: 1fr 30cqi;
  gap: 4cqi;
  align-items: end;
  margin-top: 6.4cqi;
}

.cronica__titular {
  display: grid;
  gap: 2cqi;
}

.cronica__marca {
  display: block;
  width: 100%;
  height: auto;
}

.cronica .entrada {
  margin-top: 4.8cqi;
}

.cronica .texto {
  margin: 4.8cqi 0 4.4cqi;
}

.linea-tiempo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2cqi;
  margin-top: auto;
}

.hoja.cronica > .folio {
  margin-top: 0;
}

.linea-tiempo::before {
  content: '';
  position: absolute;
  top: 0.9cqi;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--linea-noche);
}

.linea-tiempo li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.8cqi;
  padding-top: 3.6cqi;
}

.linea-tiempo li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.8cqi;
  height: 1.8cqi;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: var(--negro);
}

.linea-tiempo li:last-child::before {
  border-color: var(--verde);
  background: var(--verde);
  box-shadow: 0 0 2.4cqi rgba(49, 220, 141, 0.5);
}

.linea-tiempo b {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.linea-tiempo span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.linea-tiempo li:last-child span {
  color: var(--verde);
}

/* ───────────────────────── Apertura (red de dependencias) ───────────────────────── */

.apertura {
  background:
    radial-gradient(55% 40% at 50% 33%, rgba(49, 220, 141, 0.13), transparent 70%),
    var(--negro);
}

.apertura__red {
  display: grid;
  justify-items: center;
  gap: 1.4cqi;
  width: 61cqi;
  margin: 2.6cqi auto 0;
}

.red {
  width: 100%;
  aspect-ratio: 1;
}

.red svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.red__lineas line {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.3;
}

.red__lejanos circle {
  fill: rgba(255, 255, 255, 0.5);
}

.red__directos circle {
  fill: var(--blanco);
}

.red__ruta line {
  stroke: var(--verde);
  stroke-width: 0.8;
}

.red__ruta circle {
  fill: var(--verde);
}

.red__ruta .red__halo {
  fill: none;
  stroke: var(--verde);
  stroke-width: 0.5;
  opacity: 0.7;
}

.red__centro {
  fill: var(--verde);
}

.apertura__red figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-align: center;
  text-transform: uppercase;
  color: var(--tenue);
}

.apertura__red figcaption b {
  font-weight: 600;
  color: var(--blanco);
}

.apertura__cita {
  display: grid;
  gap: 2cqi;
  margin-top: auto;
}

.apertura__frase {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.apertura__remate {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  color: var(--verde);
  text-wrap: balance;
}

.apertura__autor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6cqi 2.4cqi;
  margin-top: 3.4cqi;
  padding-top: 1.6cqi;
  border-top: 1px solid var(--linea-noche);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.apertura__autor b {
  font-weight: 600;
  color: var(--blanco);
}

.hoja.apertura > .folio {
  margin-top: 0;
}

.js .pagina .red g {
  transform-box: view-box;
  transform-origin: center;
  transition: opacity 900ms ease, transform 1400ms var(--ease-salida);
}

.js .pagina .red__directos { transition-delay: 200ms; }
.js .pagina .red__lineas { transition-delay: 320ms; }
.js .pagina .red__lejanos { transition-delay: 480ms; }
.js .pagina .red__ruta { transition-delay: 1100ms; }

.js .pagina:not(.is-visible) .red g {
  opacity: 0;
  transform: scale(0.72);
}

.js .pagina:not(.is-visible) .red .red__ruta {
  transform: none;
}

/* ───────────────────────── Artículo ───────────────────────── */

.cifras-fila {
  margin-top: 3.4cqi;
}

.pagina--noche .cifras-fila {
  border-top-color: var(--linea-noche);
}

.pagina--noche .cifras-fila dd,
.pagina--noche .cifras-fila cite {
  color: var(--tenue);
}

/* Artículo que cierra con una lista de acciones al pie */
.ciber > .texto {
  margin-bottom: 3.6cqi;
}

.ciber .checklist {
  margin-top: auto;
}

.hoja.ciber > .folio {
  margin-top: 0;
}

/* Apertura de artículo con foto a sangre arriba */
.articulo-foto__foto {
  position: relative;
  flex: none;
  height: 58cqh;
  margin: calc(var(--margen-y) * -1) calc(var(--margen) * -1) 0;
  overflow: hidden;
}

.articulo-foto__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.articulo-foto__chip {
  position: absolute;
  top: var(--margen-y);
  left: var(--margen);
}

.articulo-foto .articulo__cabeza {
  margin-top: 4.4cqi;
}

.articulo-foto .firma {
  margin-top: 0.4cqi;
}

.ciber > .cita-banda {
  margin: 3cqi 0 3.2cqi;
  font-size: var(--text-display-3);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.ciber > .cita-banda .firma {
  margin-top: 1.8cqi;
}

/* ───────────────────────── Cuatro puertas (noche) ───────────────────────── */

.puertas-hoja__titulo {
  margin-top: 3.4cqi;
}

.puertas-hoja > .entrada {
  margin-top: 2.2cqi;
}

.puertas-grande {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4.5cqi;
  margin-top: 3.6cqi;
}

.puertas-grande li {
  display: grid;
  align-content: start;
  gap: 1.8cqi;
  padding: 2.4cqi 0 2.6cqi;
  border-top: 1px solid var(--linea-noche);
}

.puertas-grande__num {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--verde);
}

.puertas-grande b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.puertas-grande p {
  max-width: 34ch;
  margin-top: 1cqi;
  font-size: var(--text-body);
  line-height: 1.35;
  color: var(--tenue);
}

.puertas-grande--tres li:last-child {
  grid-column: 1 / -1;
}

.puertas-hoja .cifras-fila {
  margin-top: auto;
}

.hoja.puertas-hoja > .folio {
  margin-top: 0;
}

/* ───────────────────────── Industria (noche, texto + principios) ───────────────────────── */

.industria .principios {
  margin-top: auto;
}

.hoja.industria > .folio {
  margin-top: 0;
}

/* ───────────────────────── Dato (página verde) ───────────────────────── */

.dato {
  background:
    radial-gradient(70% 45% at 100% 0%, rgba(255, 255, 255, 0.3), transparent 70%),
    var(--verde);
}

.dato__etiqueta {
  margin-top: 3cqi;
}

.dato__giga {
  display: flex;
  align-items: flex-start;
  margin: 1cqi 0 0 -0.05em;
  font-family: var(--font-display);
  font-size: var(--text-giga);
  font-weight: 800;
  line-height: var(--leading-giga);
  letter-spacing: var(--tracking-mega);
  font-variant-numeric: tabular-nums;
}

.dato__giga small {
  margin: 0.1em 0 0 0.06em;
  font-size: 0.3em;
  line-height: 1;
  letter-spacing: -0.02em;
}

.dato__pie {
  max-width: 44ch;
  margin-top: 2.4cqi;
  font-size: var(--text-body-lg);
  line-height: 1.38;
  text-wrap: pretty;
}

.escalera {
  display: grid;
  gap: 1.5cqi;
  margin-top: 3cqi;
}

.escalera li {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 0.8cqi;
  font-size: var(--text-body);
  line-height: 1.2;
}

.escalera b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.escalera i {
  grid-column: 1 / -1;
  height: 1.8cqi;
  background: linear-gradient(90deg, var(--negro) calc(var(--valor) * 1%), rgba(5, 5, 5, 0.12) 0);
}

.escalera li:last-child i {
  background: linear-gradient(90deg, var(--blanco) calc(var(--valor) * 1%), rgba(5, 5, 5, 0.12) 0);
}

.dato__alerta {
  display: grid;
  gap: 0.7cqi;
  margin-top: 2.8cqi;
  padding: 2.2cqi 2.6cqi;
  background: var(--negro);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-body);
  line-height: 1.4;
}

.dato__alerta strong {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--verde);
}

/* Recuadro oscuro dentro de una página de papel */
.recuadro {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 3cqi;
  margin-top: 3cqi;
  padding: 2.6cqi 2.8cqi;
  background: var(--negro);
  color: var(--blanco);
}

.recuadro .etiqueta--verde {
  color: var(--verde);
}

.recuadro__intro {
  display: grid;
  align-content: start;
  gap: 1.4cqi;
}

.recuadro__lead {
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.recuadro ul {
  display: grid;
  align-content: start;
  gap: 1.3cqi;
}

.recuadro li {
  position: relative;
  padding-left: 2.4cqi;
  font-size: var(--text-body);
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.78);
}

.recuadro li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 1cqi;
  height: 1cqi;
  background: var(--verde);
}

/* Foto a sangre en la cabecera de una hoja; reemplaza la cornisa */
.foto-cabecera {
  position: relative;
  flex: none;
  height: 28cqh;
  margin: calc(var(--margen-y) * -1) calc(var(--margen) * -1) 0;
  overflow: hidden;
}

.foto-cabecera--grande {
  height: 27cqh;
}

.foto-cabecera .foto-cabecera__credito--derecha {
  left: auto;
  right: var(--margen);
  text-align: right;
}

.foto-cabecera--alta {
  height: 28cqh;
}

.foto-cabecera__credito {
  position: absolute;
  left: var(--margen);
  bottom: 2.4cqi;
  max-width: 30ch;
  padding: 0.9cqi 1.4cqi;
  background: rgba(5, 5, 5, 0.78);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.foto-cabecera__credito b {
  font-weight: 600;
  color: var(--blanco);
}

.foto-cabecera img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}

.foto-cabecera__chip {
  position: absolute;
  top: var(--margen-y);
  left: var(--margen);
}

/* ───────────────────────── Caso (foto + tríada) ───────────────────────── */

.caso .titulo-2 {
  margin-top: 3.8cqi;
}

.caso .entrada {
  margin-top: 2.2cqi;
}

.caso__texto {
  margin-top: 2.6cqi;
  color: var(--tinta-suave);
}

.triada,
.principios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3cqi;
  margin-top: 3.2cqi;
}

.triada li,
.principios li {
  display: grid;
  align-content: start;
  gap: 0.9cqi;
  padding-top: 1.6cqi;
  border-top: 1px solid var(--linea-papel);
}

.pagina--noche .principios li {
  border-top-color: var(--linea-noche);
}

.triada__num,
.principios__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--verde-tinta);
}

.pagina--noche .principios__num {
  color: var(--verde);
}

.triada b,
.principios b {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}

.triada p,
.principios p {
  font-size: var(--text-body);
  line-height: 1.38;
  color: var(--tinta-suave);
}

.pagina--noche .principios p {
  color: rgba(255, 255, 255, 0.72);
}

/* ───────────────────────── Ruta (dos caminos) ───────────────────────── */

.ruta {
  background:
    radial-gradient(70% 40% at 0% 100%, rgba(49, 220, 141, 0.13), transparent 70%),
    var(--negro);
}

/* La foto ocupa la tercera columna de los principios y sale a sangre
   por arriba y por la derecha; su alto lo marca el texto */
.ruta__cabeza {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3cqi;
}

.ruta__titular {
  grid-column: span 2;
  display: grid;
  align-content: start;
  gap: 1.8cqi;
}

.ruta__cabeza + .ruta__mapa {
  margin-top: 2.2cqi;
}

.ruta__cabeza ~ .principios {
  margin-top: 2cqi;
}

.ruta__foto {
  position: relative;
  margin: calc(var(--margen-y) * -1) calc(var(--margen) * -1) 0 0;
  overflow: hidden;
}

.ruta__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.ruta__foto .foto-cabecera__credito {
  left: 2.4cqi;
  bottom: 2.4cqi;
}

.ruta__mapa {
  display: grid;
  gap: 1.2cqi;
  margin-top: 3.4cqi;
  padding: 1.8cqi 2.6cqi 2cqi;
  border: 1px solid var(--linea-noche);
}

.ruta__mapa figcaption {
  color: var(--tenue);
}

.ruta__fila {
  display: grid;
  grid-template-columns: 13cqi 1fr 12cqi;
  gap: 2cqi;
  align-items: center;
}

.ruta__tag {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.ruta__pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1cqi 2.6cqi;
}

.ruta__pasos li {
  position: relative;
  padding: 0.6cqi 1.3cqi;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--text-body);
  line-height: 1.2;
}

.ruta__pasos li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -2.1cqi;
  width: 1.6cqi;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.ruta__fila--antes .ruta__pasos li {
  border-style: dashed;
  color: rgba(255, 255, 255, 0.62);
}

.ruta__fila--ahora .ruta__pasos li {
  border-color: var(--verde);
  background: var(--verde);
  color: var(--negro);
  font-weight: 600;
}

.ruta__fila--ahora .ruta__pasos li + li::before {
  background: var(--verde);
  opacity: 1;
}

.ruta__tiempo {
  justify-self: end;
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
}

.ruta__fila--ahora .ruta__tiempo {
  color: var(--verde);
}

.ruta__cita {
  margin-top: auto;
  padding-top: 2.2cqi;
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.hoja.ruta > .folio {
  margin-top: 0;
}

/* ───────────────────────── Retrato ───────────────────────── */

.retrato {
  display: flex;
  flex-direction: column;
  background: var(--negro);
}

.retrato__foto {
  position: relative;
  flex: none;
  height: 60cqh;
  overflow: hidden;
}

.retrato__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 30%;
}

.retrato__foto--duo img {
  object-position: 50% 20%;
}

.retrato__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.4), transparent 26%, transparent 55%, #050505 98%);
}

.retrato__foto figcaption {
  position: absolute;
  top: var(--margen-y);
  right: var(--margen);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  color: rgba(255, 255, 255, 0.8);
}

.retrato__chip {
  position: absolute;
  top: var(--margen-y);
  left: var(--margen);
  z-index: 2;
}

.retrato__cuerpo {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: -9cqi;
  padding: 0 var(--margen) var(--margen-y);
}

.retrato__cita {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.retrato__fuente {
  max-width: 44ch;
  margin-top: 2cqi;
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--tenue);
}

.retrato__ficha {
  display: grid;
  gap: 0.6cqi;
  margin-top: auto;
  padding-top: 1.8cqi;
  border-top: 1px solid var(--linea-noche);
}

.retrato__ficha dt {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 750;
  letter-spacing: var(--tracking-heading);
}

.retrato__ficha dd {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.retrato__cuerpo > .folio {
  padding-top: 2.4cqi;
}

/* ───────────────────────── Entrevista ───────────────────────── */

.entrevista__cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 29cqi;
  gap: 4.5cqi;
  margin-top: 3.8cqi;
  padding-top: 2.2cqi;
  border-top: 2px solid var(--tinta);
}

.qa {
  display: grid;
  align-content: start;
  gap: 2.6cqi;
}

.qa__p {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 750;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.qa__r {
  margin-top: 1cqi;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.usos {
  display: flex;
  flex-direction: column;
  gap: 1.4cqi;
  align-self: start;
  padding: 2.2cqi 2.4cqi 2.4cqi;
  background: var(--papel-hondo);
}

.usos ul {
  display: grid;
  gap: 1.3cqi;
}

.usos li {
  display: grid;
  gap: 0.4cqi;
  padding-top: 1.2cqi;
  border-top: 1px solid var(--linea-papel);
  font-size: var(--text-body);
  line-height: 1.35;
}

.usos li b {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--verde-tinta);
}

.usos__nota {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  color: var(--tinta-suave);
}

/* ───────────────────────── Receta (acróstico) ───────────────────────── */

.receta {
  background:
    radial-gradient(60% 40% at 0% 45%, rgba(49, 220, 141, 0.12), transparent 70%),
    var(--negro);
}

/* Cabecera en dos columnas, alineada con el cuerpo: la foto ocupa la
   columna derecha y sale a sangre por arriba y por la derecha */
.receta__cabeza {
  display: grid;
  grid-template-columns: 1fr 29cqi;
  gap: 4.5cqi;
}

.receta__titular {
  display: grid;
  align-content: start;
  gap: 2.2cqi;
  padding-top: 0.4cqi;
}

.receta__titular .etiqueta {
  margin-bottom: 0.6cqi;
}

.receta__foto {
  position: relative;
  aspect-ratio: 0.93;
  margin: calc(var(--margen-y) * -1) calc(var(--margen) * -1) 0 0;
  overflow: hidden;
}

.receta__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.receta .receta__cuerpo {
  margin-top: 3.2cqi;
}

.receta__foto .foto-cabecera__credito {
  left: 2.4cqi;
  bottom: 2.4cqi;
}

.receta__cuerpo {
  display: grid;
  grid-template-columns: 1fr 29cqi;
  gap: 4.5cqi;
  margin-top: 4cqi;
}

.receta__lista {
  border-top: 1px solid var(--linea-noche);
}

.receta__lista li {
  display: grid;
  grid-template-columns: 9cqi 1fr;
  column-gap: 2cqi;
  align-items: center;
  padding: 1.25cqi 0;
  border-bottom: 1px solid var(--linea-noche);
}

.receta__letra {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--verde);
}

.receta__lista b {
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

.receta__lista li > span:last-child {
  font-size: var(--text-body);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

.contrato {
  display: flex;
  flex-direction: column;
  gap: 1.4cqi;
}

.contrato dl {
  border-top: 1px solid var(--linea-noche);
}

.contrato dl div {
  display: grid;
  gap: 0.4cqi;
  padding: 1.3cqi 0;
  border-bottom: 1px solid var(--linea-noche);
}

.contrato dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.contrato dd {
  font-size: var(--text-body-lg);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.contrato dd small {
  display: block;
  margin-top: 0.3cqi;
  font-size: var(--text-label);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--verde);
}

.contrato__dato {
  display: grid;
  gap: 0.6cqi;
  margin-top: 1.6cqi;
  font-size: var(--text-body);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

.contrato__dato b {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────── Impresión ───────────────────────── */

.impresion__dato {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.4cqi;
  align-items: center;
  margin-top: 3.6cqi;
  padding: 2.4cqi 0;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--linea-papel);
}

.impresion__cifra {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.impresion__dato p:last-child {
  max-width: 36ch;
  font-size: var(--text-body-lg);
  line-height: 1.32;
  text-wrap: pretty;
}

.checklist {
  margin-top: 3.6cqi;
}

.impresion > .texto {
  margin-bottom: 3.6cqi;
}

.articulo--foto.impresion > .texto {
  margin-bottom: 1.8cqi;
}

.articulo--foto .impresion__dato {
  margin-top: 2.2cqi;
  padding: 1.5cqi 0;
}

.articulo--foto .impresion__cifra {
  font-size: var(--text-display-2);
}

.articulo--foto .impresion__dato p:last-child {
  max-width: none;
}

.impresion .checklist {
  margin-top: auto;
}

/* Sin foto ni checklist: las cifras bajan y la cita cierra la hoja */
.impresion > .cifras-fila {
  margin-top: auto;
}

.impresion > .cifras-fila + .cita-banda {
  margin-top: 3.2cqi;
}

.hoja.impresion > .folio {
  margin-top: 0;
}

.checklist ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6cqi 4cqi;
  margin-top: 1.6cqi;
  counter-reset: pregunta;
}

.checklist li {
  display: grid;
  grid-template-columns: 5cqi 1fr;
  padding-top: 1.4cqi;
  border-top: 1px solid var(--linea-papel);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  counter-increment: pregunta;
}

.checklist li::before {
  content: counter(pregunta, decimal-leading-zero);
  padding-top: 0.25em;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--verde-tinta);
}

/* ───────────────────────── Ideas (cierre) ───────────────────────── */

.ideas__h2 {
  max-width: 13ch;
  margin-top: 4cqi;
}

.ideas__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5cqi;
  margin-top: 5cqi;
  border-top: 2px solid var(--tinta);
}

.ideas__lista li {
  display: grid;
  grid-template-columns: 7cqi 1fr;
  column-gap: 1.4cqi;
  row-gap: 1cqi;
  align-content: start;
  padding: 2cqi 0 2.2cqi;
  border-bottom: 1px solid var(--linea-papel);
}

.ideas__num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: 1.15;
  color: var(--verde-tinta);
}

.ideas__lista p {
  font-size: var(--text-body-lg);
  font-weight: 650;
  line-height: 1.24;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.ideas__quien {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ───────────────────────── Ecosistema ───────────────────────── */

.ecosistema {
  display: flex;
  flex-direction: column;
  background: var(--negro);
}

.ecosistema__foto {
  position: relative;
  flex: none;
  height: 44cqh;
  overflow: hidden;
}

.ecosistema__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.85) contrast(1.05);
}

.ecosistema__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 5, 5, 0.88) 100%);
}

.ecosistema__foto figcaption {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: 2cqi;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  color: rgba(255, 255, 255, 0.85);
}

.ecosistema__cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 3.6cqi var(--margen) 0;
}

.ecosistema .titulo-2 {
  margin-top: 1.8cqi;
}

.ecosistema__alti {
  display: grid;
  grid-template-columns: 22cqi 1fr;
  gap: 3cqi;
  align-items: start;
  margin-top: 3.6cqi;
  padding-top: 2cqi;
  border-top: 1px solid var(--linea-noche);
}

.ecosistema__logo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.6cqi;
}

.ecosistema__marcas {
  margin-top: 3.2cqi;
}

.ecosistema__cuerpo > .folio {
  margin-top: auto;
  padding: 2.4cqi 0 var(--margen-y);
}

.ecosistema__marcas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1cqi;
  margin-top: 1.6cqi;
}

.ecosistema__marcas li {
  padding: 0.8cqi 1.4cqi;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

/* ───────────────────────── Contraportada ───────────────────────── */

/* Visor: marco fino con esquinas de encuadre. La foto trae la marca del
   festival impresa al centro; el marco casi cuadrado la deja completa. */
.contra__marco {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 5cqi;
  overflow: hidden;
  border: 1px solid var(--linea-noche);
}

.contra__marco::before {
  content: '';
  position: absolute;
  inset: 2.4cqi;
  z-index: 1;
  pointer-events: none;
  --l: 3.6cqi;
  --t: 1.5px;
  --c: var(--verde);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}

.contra__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.contra__pie {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 6cqi;
  margin-top: 5cqi;
  padding-top: 3cqi;
  border-top: 1px solid var(--linea-noche);
}

.contra__logo {
  width: 24cqi;
  height: auto;
}

.contra__texto {
  justify-self: end;
  max-width: 30ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-align: right;
  text-wrap: balance;
  color: var(--tenue);
}

/* ───────────────────────── Podcast ───────────────────────── */

.episodio-portada {
  position: relative;
  overflow: hidden;
  background: var(--negro);
}

.episodio-portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.episodio-portada__chip {
  position: absolute;
  top: var(--margen-y);
  left: var(--margen);
}

.episodio {
  background:
    radial-gradient(80% 45% at 100% 0%, rgba(49, 220, 141, 0.14), transparent 70%),
    var(--negro);
}

.episodio .titulo-2 {
  margin-top: 3.2cqi;
}

.episodio .entrada {
  margin-top: 1.8cqi;
}

.episodio__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqi;
  margin-top: 4.4cqi;
}

.episodio__cifras p {
  display: grid;
  gap: 1cqi;
  padding-top: 1.8cqi;
  border-top: 1px solid var(--linea-noche);
}

.episodio__cifras b {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.episodio__cifras p + p b {
  color: var(--verde);
}

.episodio__cifras p > span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--tenue);
}

.episodio__temas {
  margin-top: 4.4cqi;
}

.episodio__temas .etiqueta {
  color: var(--tenue);
}

.episodio__temas ol {
  margin-top: 1.2cqi;
  counter-reset: tema;
}

.episodio__temas li {
  display: grid;
  grid-template-columns: 6cqi 1fr;
  padding: 1.7cqi 0;
  border-bottom: 1px solid var(--linea-noche);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  counter-increment: tema;
}

.episodio__temas li::before {
  content: counter(tema, decimal-leading-zero);
  padding-top: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--verde);
}

.episodio__nota {
  max-width: var(--measure-body);
  margin-top: 3.2cqi;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--tenue);
}

.episodio__nota b {
  font-weight: 600;
  color: var(--blanco);
}

.episodio__banda {
  text-decoration: none;
}

.episodio__qr {
  flex: none;
  width: 13cqi;
  height: 13cqi;
}

.episodio__banda p span:last-child {
  text-transform: none;
  letter-spacing: var(--tracking-ui);
}

@media (prefers-reduced-motion: reduce) {
  .js .pagina .red g {
    transition: none !important;
  }
}