/* Kitomo · kitomo.com
   Dirección de arte: el banco del taller. Haya lacada, fieltro con costura de festón, latón satinado, cuerda cruda
   y la bola azafrán como único color cálido intenso. Texto siempre en tinta #2B2118 sobre fondos claros.
   Nada se mueve solo: las únicas transiciones responden a un gesto y desaparecen con «Movimiento: desactivado»
   o con prefers-reduced-motion.
   v1.1 (4-oct-2026): revisión de dirección de arte y accesibilidad (REVISION-V1.md).
   v1.2 (4-oct-2026): la portada aprobada en la Mesa (mesa/portada/final/pieza.html). */

@font-face {
  font-family: 'Taller Logo Redonda'; /* Quicksand Bold 700, instancia estática renombrada (SIL OFL 1.1) */
  src: url('/fuentes/taller-logo-redonda-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito'; /* SIL OFL 1.1, eje de peso 400-700 */
  src: url('/fuentes/nunito-400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --crema: #F3EBDD;
  --crema-claro: #FAF6EE;
  --haya: #E6D5BC;
  --haya-media: #DCC7A6;
  --haya-linea: #CDB592;
  --tinta: #2B2118;
  --tinta-suave: #54443A;
  /* los colores de los rincones: plenos (tarjetas de rincón) y a un 55 % sobre crema (paneles de lectura) */
  --salvia: #7ACC96;
  --salvia-media: #B0DAB6;
  --azul: #82AEE0;
  --azul-media: #B5C9DF;
  --lila: #B496E0;
  --lila-media: #D0BCDF;
  --laton: #A89770;
  --laton-claro: #D8C99A;
  --azafran: #DB8A10;
  --radio: 22px;
  --radio-grande: 30px;
  --radio-foto: 12px;
  --sombra: 0 1px 2px rgba(43, 33, 24, .07), 0 22px 44px -26px rgba(43, 33, 24, .42);
  --sombra-suave: 0 1px 2px rgba(43, 33, 24, .06), 0 10px 24px -18px rgba(43, 33, 24, .35);
  --medida: 37rem;
  --medida-ancha: 54rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --fuente-titulos: 'Taller Logo Redonda', 'Nunito', ui-rounded, system-ui, sans-serif;
  --fuente-texto: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* grano de fieltro y de papel: ruido fractal en SVG, sin peticiones */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --grano-fino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  /* costura de festón: la línea del borde y las puntadas perpendiculares, con las esquinas redondeadas
     (se usa como border-image de 22 px; los tramos rectos se repiten con «round») */
  --feston: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cg fill='none' stroke='%232B2118' stroke-opacity='.34' stroke-linecap='round'%3E%3Crect x='4' y='4' width='60' height='60' rx='18' stroke-width='1.3'/%3E%3Cpath stroke-width='1.6' d='M28 4v5M40 4v5M28 64v-5M40 64v-5M4 28h5M4 40h5M64 28h-5M64 40h-5M4.99 16.11L9.72 17.75M9.27 9.27L12.81 12.81M16.11 4.99L17.75 9.72M63.01 16.11L58.28 17.75M58.73 9.27L55.19 12.81M51.89 4.99L50.25 9.72M4.99 51.89L9.72 50.25M9.27 58.73L12.81 55.19M16.11 63.01L17.75 58.28M63.01 51.89L58.28 50.25M58.73 58.73L55.19 55.19M51.89 63.01L50.25 58.28'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: 1.125rem;
  background: var(--crema) var(--grano-fino);
  overflow-wrap: break-word;
  font-variant-numeric: lining-nums;
}
@media (min-width: 60em) { body { font-size: 1.1875rem; } }

img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 700; line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.55rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.25; margin-bottom: .4em; }
p, ul, ol, table, figure, blockquote, dl { margin: 0 0 1.15em; }
p, li, td, th, dd, figcaption { text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--tinta-suave); }
strong { font-weight: 700; }
a { color: var(--tinta); text-decoration-thickness: .09em; text-underline-offset: .2em; text-decoration-color: var(--laton); }
a:hover { text-decoration-color: var(--tinta); text-decoration-thickness: .14em; }
p a[href^="mailto:"] { padding-block: .6em; } /* objetivo táctil más alto sin mover la línea */
hr { border: 0; margin: 0; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--crema-claro);
  border-radius: 6px;
}
main:focus { outline: none; }

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

.salto {
  position: absolute; left: 1rem; top: -10rem; z-index: 50;
  background: var(--tinta); color: var(--crema-claro); font-weight: 700;
  padding: .85rem 1.25rem; border-radius: 999px; text-decoration: none;
}
.salto:focus { top: 1rem; }

.envoltura { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--margen); }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--crema); position: relative; z-index: 5; }
.cabecera::after { /* listón de latón */
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--laton-claro) 8%, var(--laton) 50%, var(--laton-claro) 92%, transparent);
  opacity: .8;
}
.utilidades { background: var(--haya) var(--grano-fino); font-size: .95rem; }
.utilidades__fila { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; min-height: 3.1rem; padding-block: .2rem; }
.idiomas--arriba { margin-right: auto; }
.idiomas--arriba a:hover { background: var(--crema); }
.idiomas--arriba span[aria-current] { background: var(--crema-claro); }
.idiomas--barra { display: none; }
.prefs { display: none; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.js .prefs { display: flex; }
.pref { position: relative; display: flex; align-items: center; gap: .75rem; }

.interruptor {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .3rem .95rem .3rem .45rem;
  font: inherit; font-weight: 700; color: var(--tinta);
  background: var(--crema-claro); border: 1.5px solid var(--tinta); border-radius: 999px; cursor: pointer;
}
.interruptor__pista {
  position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px;
  background: var(--haya-media); border: 2px solid var(--tinta);
}
.interruptor__bola {
  position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 8px); height: calc(1.5rem - 8px); border-radius: 50%;
  background: var(--crema-claro); border: 2px solid var(--tinta);
}
.interruptor[aria-checked='true'] .interruptor__pista { background: var(--tinta); }
.interruptor[aria-checked='true'] .interruptor__bola {
  left: calc(100% - 1.5rem + 6px);
  background: radial-gradient(circle at 35% 30%, #FFE2A8 0 12%, #F0A52E 38%, var(--azafran) 66%, #A9680C 100%);
  border-color: var(--crema-claro);
}
.interruptor__texto { display: inline-flex; gap: .45rem; align-items: baseline; }
.interruptor__estado { font-weight: 400; color: var(--tinta-suave); }
.interruptor:hover { background: #fff; }

/* Ayuda de los interruptores: aparece al pasar o al enfocar, se puede recorrer con el ratón y se cierra con Esc */
.ayuda {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 20; width: min(20rem, 80vw);
  padding: .85rem 1rem; border-radius: 14px; background: var(--tinta); color: var(--crema-claro);
  font-size: .95rem; line-height: 1.45; box-shadow: var(--sombra);
  display: none;
}
.ayuda::before { content: ''; position: absolute; top: -6px; right: 2rem; width: 12px; height: 12px; background: var(--tinta); transform: rotate(45deg); }
.pref:hover > .ayuda, .interruptor:focus-visible + .ayuda { display: block; }
.pref:hover::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: .6rem; } /* puente hasta la ayuda */
.ayuda--cerrada .ayuda { display: none !important; }
@media (hover: none) { .pref:hover > .ayuda { display: none; } .interruptor:focus-visible + .ayuda { display: block; } }

.volumen { display: none; align-items: center; gap: .5rem; font-weight: 700; }
html[data-sonido='si'] .volumen { display: inline-flex; }
.volumen input { width: 7.5rem; accent-color: var(--tinta); height: 44px; margin: 0; cursor: pointer; }

.barra { display: flex; align-items: center; gap: 1rem 2rem; min-height: 4.5rem; flex-wrap: wrap; padding-block: .35rem; }
.marca {
  display: inline-flex; align-items: baseline; min-height: 44px; padding-block: .4rem;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 2.15rem; line-height: 1;
  color: var(--tinta); text-decoration: none; letter-spacing: -.015em;
}
.marca:hover { color: var(--tinta-suave); }
.marca picture { display: block; }
.marca img { display: block; height: 3rem; width: auto; }

.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.6rem; }
.menu li { margin: 0; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; color: var(--tinta);
  border-bottom: 3px solid transparent; padding-top: 3px;
}
.menu a:hover { border-bottom-color: var(--haya-linea); }
.menu a[aria-current] { border-bottom-color: var(--tinta); }

.idiomas ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.idiomas li { margin: 0; }
.idiomas a, .idiomas span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding-inline: .7rem; border-radius: 999px; font-size: 1rem; text-decoration: none; color: var(--tinta);
}
.idiomas a:hover { background: var(--haya); }
.idiomas span[aria-current] { font-weight: 700; background: var(--haya); box-shadow: inset 0 0 0 2px var(--tinta); }
.idiomas .corto { display: none; }

.menu-boton {
  display: none; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem 1.05rem;
  font: inherit; font-weight: 700; color: var(--tinta); background: var(--crema-claro);
  border: 1.5px solid var(--tinta); border-radius: 999px; cursor: pointer;
}
.menu-boton__raya { display: grid; gap: 4px; }
.menu-boton__raya span { display: block; width: 1.1rem; height: 2px; background: var(--tinta); border-radius: 2px; }

@media (max-width: 66em) {
  .idiomas .largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .idiomas .corto { display: inline; }
  .barra { gap: .5rem 1rem; }
  .js .menu-boton { display: inline-flex; }
  .idiomas--arriba { display: none; }
  .idiomas--barra { display: block; margin-left: auto; }
  .menu { order: 5; flex-basis: 100%; margin: 0; }
  .menu ul { flex-direction: column; gap: 0; padding-bottom: 1rem; }
  .menu a { width: 100%; font-size: 1.2rem; min-height: 52px; border-bottom: 1px solid var(--haya-linea); }
  .menu a[aria-current] { border-bottom: 3px solid var(--tinta); }
  .js .cabecera:not(.menu-abierto) .menu { display: none; }
}
/* Móvil: dos píldoras compactas en una línea (pista + palabra); el estado lo dicen la pista y aria-checked */
@media (max-width: 40em) {
  .utilidades__fila { justify-content: flex-end; min-height: 0; padding-block: .3rem; }
  .js .prefs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; width: 100%; position: relative; }
  .pref { position: static; }
  .pref--sonido { display: contents; }
  .interruptor { gap: .45rem; padding: .25rem .8rem .25rem .35rem; font-size: .95rem; }
  .interruptor__pista { width: 2.2rem; height: 1.3rem; }
  .interruptor__bola { width: calc(1.3rem - 8px); height: calc(1.3rem - 8px); }
  .interruptor[aria-checked='true'] .interruptor__bola { left: calc(100% - 1.3rem + 6px); }
  .interruptor__estado { display: none; }
  html[data-sonido='si'] .volumen { display: flex; flex-basis: 100%; justify-content: flex-end; }
  .volumen input { flex: 0 1 12rem; width: auto; }
  .ayuda { left: 0; right: 0; width: auto; }
  .ayuda::before { display: none; }
  .marca img { height: 2.35rem; }
  .barra { min-height: 3.75rem; gap: .5rem .2rem; padding-block: .25rem; }
  .menu-boton { padding-inline: .7rem; gap: .45rem; }
  .idiomas a, .idiomas span[aria-current] { padding-inline: .5rem; }
}

/* ---------- Materiales (superficies dibujadas con CSS) ---------- */
.fieltro { position: relative; background-image: var(--grano); }
.fieltro::after { /* costura de festón, solo en lo que es fieltro: las tarjetas y paneles de los rincones */
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 22px solid transparent; border-image: var(--feston) 22 round;
}
.fieltro--salvia { background-color: var(--salvia-media); }
.fieltro--azul { background-color: var(--azul-media); }
.fieltro--lila { background-color: var(--lila-media); }

.bola {
  display: inline-block; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #FFE7B8 0 9%, #F2AA38 32%, var(--azafran) 64%, #A9680C 100%);
  box-shadow: 0 6px 10px -6px rgba(90, 50, 10, .55);
}
.laton-regla { height: 2px; background: linear-gradient(90deg, var(--laton-claro), var(--laton), var(--laton-claro)); position: relative; margin-block: 2.5rem; }
.laton-regla::before, .laton-regla::after {
  content: ''; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4E9C6, var(--laton) 70%);
}
.laton-regla::before { left: 0; }
.laton-regla::after { right: 0; }

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 1.75rem 0 0; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .72rem 1.35rem; border-radius: 999px;
  font: 700 1.05rem/1.25 var(--fuente-texto); text-decoration: none; text-align: left;
  border: 1.5px solid var(--tinta); cursor: pointer; color: var(--tinta); background: transparent;
}
.boton--lleno { background: var(--tinta); color: var(--crema-claro); border-width: 2px; }
.boton--lleno:hover { background: #4A3A2D; border-color: #4A3A2D; }
.boton--claro:hover, .boton--sonido:hover { background: var(--crema-claro); }
.boton--sonido { background: var(--crema-claro); }
.boton--sonido[data-sonando] { background: var(--tinta); color: var(--crema-claro); }
.boton svg { width: 1.15em; height: 1.15em; flex: none; }
.boton--descarga { background: var(--crema-claro); }
.audios { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.audio-fila .nota { margin: .45rem 0 0 .25rem; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 7vw, 6rem); }
.seccion--ajustada { padding-top: clamp(2.5rem, 5vw, 4rem); }
.seccion--haya { background: var(--haya) var(--grano-fino); }
.seccion__cabeza { max-width: 40rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.seccion__cabeza p { font-size: clamp(1.1rem, 1.5vw, 1.25rem); }
.dos { display: grid; gap: clamp(2rem, 5vw, 4.75rem); }
@media (min-width: 56em) {
  .dos { grid-template-columns: 1.02fr .98fr; align-items: center; }
  .dos--arriba { align-items: start; }
  .dos--arriba .seccion__cabeza { margin-bottom: 0; }
}
.foto { margin: 0; }
.foto img { width: 100%; border-radius: var(--radio-foto); box-shadow: var(--sombra-suave); background: var(--haya); }
.foto figcaption { display: flex; gap: .5rem; align-items: center; font-size: .98rem; color: var(--tinta-suave); margin-top: .7rem; padding-left: .1rem; }
.foto--leyenda figcaption { text-wrap: balance; font-family: var(--fuente-titulos); font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.3; color: var(--tinta); }
.solo-ancho { display: none; }
@media (min-width: 56em) { .solo-ancho { display: block; } }
.texto-medida { max-width: var(--medida); }

.clip { position: relative; border-radius: var(--radio-foto); overflow: hidden; background: #8C8A86; box-shadow: var(--sombra-suave); aspect-ratio: 16 / 9; }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip__boton {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .75rem; min-height: 56px; padding: .85rem 1.5rem .85rem 1rem;
  border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--crema-claro); color: var(--tinta);
  font: 700 1.08rem/1.2 var(--fuente-texto); cursor: pointer; box-shadow: var(--sombra-suave); max-width: calc(100% - 2rem);
}
.clip__boton:hover { background: #fff; }
.clip__icono { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--tinta); flex: none; }
.clip__icono svg { width: 1rem; height: 1rem; margin-left: 3px; fill: var(--crema-claro); }
@media (max-width: 40em) {
  .clip__boton { left: .75rem; top: auto; bottom: .75rem; transform: none; min-height: 48px; padding: .5rem 1rem .5rem .5rem; font-size: 1rem; }
  .clip__icono { width: 2rem; height: 2rem; }
}
.nota { font-size: 1rem; color: var(--tinta-suave); }
.descripcion-medio { font-size: 1rem; border-left: 3px solid var(--haya-linea); padding: .2rem 0 .2rem 1rem; color: var(--tinta-suave); }
.descripcion-medio strong { color: var(--tinta); }

/* Materiales que suenan: baldosas de fieltro, con una muestra recortada de un render real */
.materiales { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: .9rem; }
.materiales li { margin: 0; }
.material {
  width: 100%; height: 100%; display: grid; grid-template-columns: 3.4rem 1fr; grid-template-rows: auto auto auto;
  column-gap: 1rem; row-gap: .1rem; align-items: center; text-align: left;
  padding: .95rem 1.1rem; border-radius: 18px; border: 0;
  background: var(--haya) var(--grano); color: var(--tinta); font: inherit; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 14px -12px rgba(43, 33, 24, .6);
}
.material:hover { background-color: var(--crema-claro); }
.material[data-sonando] { background-color: var(--tinta); color: var(--crema-claro); }
.material[data-sonando] .material__sonido { color: var(--crema); }
.material[disabled] { cursor: default; }
.material[disabled] .material__accion { visibility: hidden; } /* sin JS: la ficha informa y no finge un botón */
.material__muestra {
  grid-row: 1 / 4; width: 3.4rem; height: 3.4rem; border-radius: 50%; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(43, 33, 24, .18), 0 3px 6px -3px rgba(43, 33, 24, .45);
}
.material__nombre { font-family: var(--fuente-titulos); font-size: 1.25rem; line-height: 1.15; }
.material__sonido { font-size: .95rem; color: var(--tinta-suave); line-height: 1.35; }
.material__accion { font-weight: 700; font-size: .95rem; display: inline-flex; gap: .4rem; align-items: center; }
.material__accion svg { width: 1em; height: 1em; }
.muestra--fieltro { background-image: url('/img/muestra-fieltro.jpg'); background-image: image-set(url('/img/muestra-fieltro.avif') type('image/avif'), url('/img/muestra-fieltro.webp') type('image/webp'), url('/img/muestra-fieltro.jpg') type('image/jpeg')); }
.muestra--haya { background-image: url('/img/muestra-haya.jpg'); background-image: image-set(url('/img/muestra-haya.avif') type('image/avif'), url('/img/muestra-haya.webp') type('image/webp'), url('/img/muestra-haya.jpg') type('image/jpeg')); }
.muestra--cuerda { background-image: url('/img/muestra-cuerda.jpg'); background-image: image-set(url('/img/muestra-cuerda.avif') type('image/avif'), url('/img/muestra-cuerda.webp') type('image/webp'), url('/img/muestra-cuerda.jpg') type('image/jpeg')); }
.muestra--laton { background-image: url('/img/muestra-laton.jpg'); background-image: image-set(url('/img/muestra-laton.avif') type('image/avif'), url('/img/muestra-laton.webp') type('image/webp'), url('/img/muestra-laton.jpg') type('image/jpeg')); }

/* ---------- Piezas compartidas: lema, entradilla, datos y estreno (portada, Episodios y ficha del piloto) ---------- */
.lema { font-family: var(--fuente-titulos); font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.25; margin-bottom: 1rem; }
.entrada { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55; }
.datos { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.datos li { margin: 0; }
.dato {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .85rem;
  border-radius: 999px; background: var(--haya); font-weight: 700; font-size: .98rem;
}
.dato--edad { background: var(--salvia-media); }
.punto { width: .7rem; height: .7rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(43, 33, 24, .45); }
.punto--salvia { background: var(--salvia); }
.punto--azul { background: var(--azul); }
.punto--lila { background: var(--lila); }
.punto--azafran { background: var(--azafran); }
.estreno { display: flex; gap: .75rem; align-items: flex-start; font-weight: 700; margin: 0; }
.estreno .bola { margin-top: .1rem; width: 1.6rem; height: 1.6rem; }
.intro { font-size: clamp(1.1rem, 1.5vw, 1.1875rem); max-width: 36rem; }

/* ---------- Portada (aprobada el 4-oct-2026, mesa/portada/final) ---------- */
/* En la portada el logotipo grande del cartel es el h1: la cabecera no lo repite */
/* En escritorio el hueco del logotipo se reserva (invisible y fuera del tabulador) para que el menú quede a la derecha,
   en el mismo sitio que en el resto de páginas. En el móvil la barra no lo reserva y el botón del menú va primero */
.cabecera--portada .barra > .marca { visibility: hidden; }
@media (max-width: 66em) {
  .cabecera--portada .barra > .marca { display: none; }
  .cabecera--portada .menu-boton { order: -1; }
}

/* El cartel. Móvil: primero el texto sobre crema y después la foto. Pantallas anchas: el render a sangre, desplazado
   a la izquierda, y el texto sobre la pared vacía de la derecha, sin tarjeta */
.cartel { position: relative; }
.cartel__texto { padding: 1.4rem var(--margen) 2rem; }
.cartel__logo { margin: 0 0 .55rem; line-height: 0; }
.cartel__logo img { display: block; width: 100%; max-width: 14.5rem; height: auto; margin-left: -.2rem; }
.cartel .lema { font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.1; margin-bottom: .55rem; }
.cartel .entrada { font-size: 1.0625rem; line-height: 1.5; font-weight: 600; max-width: 31rem; margin-bottom: .9rem; }
.cartel .datos { gap: .4rem; margin-bottom: .9rem; }
.cartel .dato, .cartel .dato--edad { background: var(--crema-claro); box-shadow: inset 0 0 0 1px rgba(43, 33, 24, .1); }
.cartel .punto--salvia { background: #2E8A5E; box-shadow: none; }
.cartel .estreno {
  display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; max-width: 31rem;
  margin: 0 0 1.1rem; padding-top: .75rem; border-top: 2px solid rgba(43, 33, 24, .18); font-weight: 400;
}
.cartel .estreno .bola { width: 2.2rem; height: 2.2rem; margin: 0; }
/* una línea por parte; los espacios y la coma del corpus siguen en el texto (lector de pantalla y copia) */
.estreno__etiqueta, .estreno__fecha, .estreno__donde { display: block; }
.estreno__etiqueta { font-size: 1rem; font-weight: 700; }
.estreno__fecha { font-family: var(--fuente-titulos); font-size: clamp(1.375rem, 2vw, 1.85rem); line-height: 1.15; }
.estreno__donde { font-size: 1rem; font-weight: 600; }
.cartel .botones { margin-top: 0; }
.cartel__foto { background: #4BB583; line-height: 0; }
.cartel__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 64em) {
  .cartel { display: grid; min-height: clamp(38rem, 50vw, 46rem); background: #4BB583; overflow: hidden; }
  .cartel > * { grid-area: 1 / 1; }
  .cartel__foto { position: relative; overflow: hidden; }
  .cartel__foto img {
    position: absolute; top: 0; left: -12%; width: 112%; max-width: none; height: 100%; aspect-ratio: auto;
    object-fit: cover; object-position: 100% 50%;
  }
  .cartel__texto {
    position: relative; z-index: 1; align-self: center; max-width: 35rem;
    margin: 0 4.5% 0 57.5%; padding: 2.5rem 0;
  }
  .cartel__logo { margin-bottom: 1rem; }
  .cartel__logo img { max-width: 31rem; margin-left: -.35rem; }
  .cartel .lema { margin-bottom: .9rem; }
  .cartel .entrada { font-size: 1.125rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .cartel .datos { gap: .5rem; margin-bottom: 1.4rem; }
  .cartel .dato, .cartel .dato--edad { background: rgba(250, 246, 238, .92); box-shadow: none; }
  .cartel .estreno { column-gap: 1rem; margin-bottom: 1.6rem; padding-top: 1rem; border-top-color: rgba(43, 33, 24, .28); }
  .cartel .estreno .bola { width: 2.6rem; height: 2.6rem; }
  .cartel .boton--claro { background: var(--crema-claro); border-color: var(--crema-claro); }
  .cartel .boton--claro:hover { background: #fff; border-color: #fff; }
}

/* Ficha «de un vistazo»: una tira de crema con el listón de latón y los dos datos que el cartel no dice */
.vistazo-zona { padding-top: 1.25rem; }
.vistazo {
  position: relative; display: grid; grid-template-columns: 1fr; margin: 0; overflow: hidden;
  background: var(--crema-claro); border-radius: 18px; box-shadow: var(--sombra-suave);
}
.vistazo::before {
  content: ''; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--laton-claro), var(--laton), var(--laton-claro));
}
.vistazo__dato { display: grid; grid-template-columns: 7.6rem 1fr; gap: .75rem; align-items: baseline; padding: .95rem 1.2rem; }
.vistazo__dato + .vistazo__dato { border-top: 1px solid rgba(168, 151, 112, .4); }
.vistazo dt { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: var(--tinta-suave); }
.vistazo dd { margin: 0; font-family: var(--fuente-titulos); font-size: 1.125rem; line-height: 1.22; }
.vistazo dd small { display: block; margin-top: .2rem; font-family: var(--fuente-texto); font-weight: 600; font-size: 1rem; color: var(--tinta-suave); }
.icono { width: .95rem; height: .95rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(43, 33, 24, .18); }
.icono--salvia { background: var(--salvia); }
.icono--haya { background: var(--haya-media); }
.icono--lila { background: var(--lila); }
.icono--azul { background: var(--azul); }
.icono--bola {
  width: 1.05rem; height: 1.05rem; box-shadow: 0 3px 6px -3px rgba(90, 50, 10, .6);
  background: radial-gradient(circle at 34% 30%, #FFE7B8 0 9%, #F2AA38 32%, var(--azafran) 64%, #A9680C 100%);
}
@media (min-width: 56em) {
  .vistazo-zona { padding-top: 1.75rem; }
  .vistazo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vistazo__dato { grid-template-columns: auto 1fr; gap: .2rem 1.25rem; align-items: baseline; padding: 1.15rem 1.6rem 1.2rem; }
  .vistazo__dato + .vistazo__dato { border-top: 0; border-left: 1px solid rgba(168, 151, 112, .4); }
  .vistazo dd { font-size: 1.1875rem; }
}

/* Un día en el taller: la cabeza con el tiovivo, los cinco momentos sobre la cuerda y los tres rincones a sangre */
.seccion--dia { padding-bottom: 0; margin-top: clamp(3rem, 5vw, 4.5rem); }
.dia-cabeza { display: grid; gap: 2rem; }
.dia-cabeza h2 { margin-bottom: .55em; }
.dia-cabeza .foto img { aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--sombra); }
@media (min-width: 56em) { .dia-cabeza { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } }
.dia { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; position: relative; }
.dia::before { /* la cuerda: vertical en el móvil */
  content: ''; position: absolute; left: calc(1.4rem - 2px); top: 1.4rem; bottom: 2.5rem; width: 4px; border-radius: 4px;
  background: repeating-linear-gradient(25deg, #EFE3CC 0 5px, #C9B48F 5px 8px);
}
.dia li { position: relative; display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1.1rem; row-gap: .1rem; align-content: start; margin: 0; padding-bottom: 1.5rem; }
.dia__cuenta {
  grid-row: 1 / span 3; position: relative; z-index: 1; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF8EC, #EBDDC6 60%, #D5BF9B);
  box-shadow: 0 4px 8px -5px rgba(43, 33, 24, .5);
}
.dia li:first-child .dia__cuenta, .dia li:last-child .dia__cuenta {
  background: radial-gradient(circle at 34% 30%, #FFE7B8 0 9%, #F2AA38 32%, var(--azafran) 64%, #A9680C 100%);
}
.dia__minuto, .dia h3, .dia li p { grid-column: 2; }
.dia__minuto { font-family: var(--fuente-titulos); font-size: 1rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.dia h3 { font-size: 1.35rem; margin: 0 0 .2rem; }
.dia li p { font-size: 1.0625rem; line-height: 1.5; margin: 0; }
.dia__pie { margin-top: .6rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(120, 96, 60, .3); }
.dia__pie p { margin: 0; }
.dia__pie p:first-child { font-family: var(--fuente-titulos); font-size: 1.25rem; line-height: 1.3; }
@media (min-width: 56em) {
  .dia { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.6rem; margin-top: clamp(3rem, 5.5vw, 4.5rem); }
  .dia::before { left: 1.4rem; right: 0; top: calc(1.4rem - 2px); bottom: auto; width: auto; height: 4px; background: repeating-linear-gradient(115deg, #EFE3CC 0 5px, #C9B48F 5px 8px); }
  .dia li { grid-template-columns: none; gap: .25rem; padding-bottom: 0; }
  .dia__cuenta { grid-row: auto; margin-bottom: 1rem; }
  .dia__minuto, .dia h3, .dia li p { grid-column: auto; }
  .dia__pie { margin-top: 2.2rem; }
}
.rincones { margin: clamp(3rem, 6vw, 5rem) 0 0; }
.rincones__fila { display: grid; gap: 4px; }
.rincones__fila picture { display: block; }
.rincones__fila img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rincones figcaption { display: flex; flex-direction: column; gap: .3rem; padding-block: 1.4rem clamp(3rem, 6vw, 5rem); }
.rincones figcaption strong { font-family: var(--fuente-titulos); font-size: 1.5rem; line-height: 1.2; }
@media (min-width: 56em) {
  .rincones__fila { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rincones__fila img { aspect-ratio: 4 / 3; }
  .rincones figcaption { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; }
}

/* Para ver juntos: Antes, Durante y Después en fieltro de color pleno, con costura */
.juntos { display: grid; gap: 1.4rem; margin-top: 2.5rem; }
.juntos__paso { border-radius: 26px; padding: 2.3rem 2.2rem 2.4rem; }
.juntos__paso.fieltro--azul { background-color: var(--azul); }
.juntos__paso.fieltro--salvia { background-color: var(--salvia); }
.juntos__paso.fieltro--lila { background-color: var(--lila); }
.juntos__paso h3 { font-size: 1.85rem; margin: 0 0 .9rem; }
.juntos__paso p { font-size: 1.0625rem; line-height: 1.55; margin: 0; }
.juntos__paso p + p { margin-top: .7rem; }
@media (min-width: 56em) { .juntos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* El clip: en el móvil, el póster va antes que la descripción */
.clip-bloque { display: grid; gap: 1.25rem; }
.clip-bloque__texto p { margin-bottom: 0; }
@media (min-width: 56em) {
  .clip-bloque { grid-template-columns: 5fr 7fr; grid-template-areas: 'texto clip' 'desc clip'; column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 1.4rem; }
  .clip-bloque__texto { grid-area: texto; align-self: end; }
  .clip-bloque .clip { grid-area: clip; align-self: center; box-shadow: var(--sombra); }
  .clip-bloque__desc { grid-area: desc; align-self: start; }
}

/* Cuatro materiales, cuatro sonidos: la foto a sangre por la izquierda y las cuatro filas que suenan */
.materiales-bloque { display: grid; gap: 2rem; }
.materiales-foto { margin: 0 calc(-1 * var(--margen)); }
.materiales-foto img { width: 100%; aspect-ratio: 1648 / 885; object-fit: cover; }
@media (min-width: 56em) {
  .materiales-bloque { grid-template-columns: 6fr 6fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .materiales-foto { margin: 0 0 0 calc(-1 * (max(0px, (100vw - 76rem) / 2) + var(--margen))); }
  .materiales-foto img { border-radius: 0 var(--radio-foto) var(--radio-foto) 0; box-shadow: var(--sombra-suave); }
}
.materiales--filas { display: block; margin: 2rem 0 0; border-top: 1px solid rgba(43, 33, 24, .14); }
.materiales--filas li { border-bottom: 1px solid rgba(43, 33, 24, .14); }
.materiales--filas .material {
  grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 1.1rem;
  padding: .95rem 0; border-radius: 0; background: transparent; box-shadow: none;
}
.materiales--filas .material:hover { background: transparent; }
.materiales--filas .material__muestra { grid-row: 1 / 3; width: 3rem; height: 3rem; }
.materiales--filas .material__nombre { grid-column: 2; font-size: 1.3125rem; }
.materiales--filas .material__sonido { grid-column: 2; font-size: 1rem; }
.materiales--filas .material__accion {
  grid-column: 3; grid-row: 1 / 3; min-height: 2.75rem; padding: .45rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--tinta); font-size: 1rem; white-space: nowrap;
}
.materiales--filas .material:hover .material__accion { background: var(--crema-claro); }
.materiales--filas .material[data-sonando] { background: transparent; color: var(--tinta); }
.materiales--filas .material[data-sonando] .material__sonido { color: var(--tinta-suave); }
.materiales--filas .material[data-sonando] .material__accion { background: var(--tinta); color: var(--crema-claro); }
@media (max-width: 30em) {
  .materiales--filas .material { grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: .1rem; column-gap: .9rem; }
  .materiales--filas .material__muestra { grid-row: 1 / 3; width: 2.6rem; height: 2.6rem; }
  .materiales--filas .material__accion { grid-column: 2; grid-row: 3; justify-self: start; margin-top: .5rem; }
}
.materiales-bloque .boton--sonido { background: var(--tinta); color: var(--crema-claro); border-width: 2px; }
.materiales-bloque .boton--sonido:hover { background: #4A3A2D; border-color: #4A3A2D; }

/* Antes de ver y Cómo se hace: fieltro de haya con costura; y el cajón de Prensa con su listón de latón */
.tarjetas { display: grid; gap: 1.4rem; }
@media (min-width: 56em) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tarjeta { display: flex; flex-direction: column; border-radius: 26px; padding: 2.3rem 2.4rem 2.2rem; background-color: #EBDDC6; }
.tarjeta h2 { font-size: clamp(1.6rem, 2.2vw, 1.85rem); margin-bottom: .8rem; }
.tarjeta p { font-size: 1.0625rem; max-width: 30rem; margin-bottom: 1.6rem; }
.tarjeta .botones { margin-top: auto; position: relative; z-index: 1; }
.cajon {
  position: relative; display: grid; gap: 2rem; align-items: center; margin-top: clamp(3rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem); border-radius: 26px;
  background: var(--crema-claro); border: 1px solid rgba(43, 33, 24, .1);
}
.cajon::before {
  content: ''; position: absolute; left: clamp(1.5rem, 4vw, 3.5rem); right: clamp(1.5rem, 4vw, 3.5rem); top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--laton-claro), var(--laton), var(--laton-claro));
}
@media (min-width: 56em) { .cajon { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; } }
.cajon h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); margin-bottom: .6rem; }
.cajon p { max-width: 34rem; margin-bottom: 0; }
.cajon .botones { margin-top: 1.5rem; }
.cajon figure { margin: 0; }
.cajon img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-foto); box-shadow: var(--sombra-suave); }
.boton--correo { background: transparent; }
.boton--correo:hover { background: #fff; }
@media (max-width: 30em) {
  .cartel .botones, .juntos + .botones { flex-direction: column; }
  .cartel .boton, .juntos + .botones .boton { width: 100%; }
  .juntos__paso, .tarjeta { padding: 2rem 1.9rem; }
}

/* ---------- Páginas de contenido: un contenedor de 54rem, todo alineado a su borde izquierdo ---------- */
.cabeza-pagina, .articulo { max-width: calc(var(--medida-ancha) + 2 * var(--margen)); }
.cabeza-pagina { padding-block: clamp(3rem, 7vw, 5rem) .5rem; }
.cabeza-pagina > *, .articulo > * { max-width: var(--medida); margin-inline: 0 auto; }
.migas { font-size: 1rem; margin-bottom: .75rem; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; }
.migas li { margin: 0; display: flex; align-items: center; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; }
.migas li + li::before { content: '›'; margin-right: .4rem; color: var(--tinta-suave); }
.marca-rincon { display: flex; gap: .45rem; margin-bottom: 1.25rem; }
.marca-rincon span { width: 2.6rem; height: .55rem; border-radius: 999px; }
.marca-rincon .r1 { background: var(--salvia); }
.marca-rincon .r2 { background: var(--azul); }
.marca-rincon .r3 { background: var(--lila); }
.marca-rincon .r4 { background: var(--azafran); width: .55rem; }

.articulo { padding-bottom: clamp(3rem, 7vw, 6rem); }
.articulo > .ancho, .articulo > .tabla, .articulo > .ficha, .articulo > .preguntas, .articulo > .correos,
.articulo > .sinopsis, .articulo > .galeria, .articulo > .antes, .articulo > .descargas, .articulo > .prensa-final,
.articulo > .materiales { max-width: none; }
.articulo > .foto { max-width: 36rem; }
.articulo h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-top: 2em; }
.articulo h2:first-child { margin-top: 0; }
.articulo h3 { margin-top: 1.8em; }
.articulo .foto { margin-block: 2rem 2.25rem; }
.articulo .entrada { font-size: clamp(1.2rem, 1.8vw, 1.38rem); }
.destacado { font-family: var(--fuente-titulos); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; }
.articulo .tarjetas { margin-block: 1.5rem 2rem; }
.articulo .materiales { margin-block: 1.25rem 0; max-width: 40rem; }
@media (min-width: 30em) { .articulo .materiales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tablas que se apilan en pantallas estrechas */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; line-height: 1.5;
  background: var(--crema-claro); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--haya-linea); margin-block: 1.25rem 2rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: .85rem 1.1rem; border-bottom: 1px solid var(--haya-linea); }
.tabla thead th { background: var(--haya); font-weight: 700; }
.tabla thead th:first-child { border-top-left-radius: 18px; }
.tabla thead th:last-child { border-top-right-radius: 18px; }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla tbody th { font-weight: 700; }
@media (max-width: 40em) {
  .tabla, .tabla tbody, .tabla tr, .tabla td, .tabla th { display: block; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tr { padding: .75rem 1rem; border-bottom: 1px solid var(--haya-linea); }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla td, .tabla th { border: 0; padding: .15rem 0; }
  .tabla td[data-etiqueta]::before { content: attr(data-etiqueta) ': '; font-weight: 700; }
  .minutos tr.rincon--salvia { box-shadow: inset 6px 0 0 var(--salvia); }
  .minutos tr.rincon--azul { box-shadow: inset 6px 0 0 var(--azul); }
  .minutos tr.rincon--lila { box-shadow: inset 6px 0 0 var(--lila); }
  .minutos tr > :first-child { box-shadow: none !important; }
}

/* ficha técnica */
.ficha { margin-block: 1.25rem 2rem; border-radius: 22px; background: var(--crema-claro); box-shadow: inset 0 0 0 1px var(--haya-linea); padding: .5rem 1.4rem; }
.ficha div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: .25rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--haya-linea); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { font-weight: 700; }
.ficha dd { margin: 0; }
@media (max-width: 40em) { .ficha div { grid-template-columns: 1fr; } }

/* citas */
.cita { margin-block: 1.75rem; padding: 1.75rem 1.75rem 1.5rem; border-radius: 24px; background: var(--crema-claro); box-shadow: var(--sombra-suave); position: relative; }
.cita p { font-family: var(--fuente-titulos); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; margin-bottom: .6rem; }
.cita footer { font-size: 1rem; color: var(--tinta-suave); }

/* ficha de episodio: cabecera en dos columnas con su fotograma clave */
.cabeza-ficha { display: grid; gap: 1.75rem 3rem; align-items: center; }
.cabeza-ficha > * { max-width: none; margin: 0; }
.cabeza-ficha h1 { font-size: clamp(2.5rem, 4.6vw, 3.6rem); margin-bottom: .45em; }
.cabeza-ficha__texto .lema { margin-bottom: 1.25rem; }
.cabeza-ficha__texto .datos { margin-bottom: 0; }
@media (min-width: 56em) { .cabeza-ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }
.aviso-estreno { display: flex; gap: 1rem; align-items: center; padding: 1.3rem 1.5rem; border-radius: 22px; margin-block: 1.5rem 2rem; font-weight: 700; background: var(--azul-media) var(--grano); }
.aviso-estreno p { margin: 0; }
.antes { border-radius: var(--radio-grande); padding: clamp(1.75rem, 4vw, 2.75rem); margin-block: 1.25rem 2.5rem; background: var(--crema-claro); box-shadow: var(--sombra-suave); }
.antes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem 2.25rem; }
@media (min-width: 52em) { .antes ul { grid-template-columns: 1fr 1fr; } }
.antes li { margin: 0; padding-left: 1.6rem; position: relative; }
.antes li::before { content: ''; position: absolute; left: 0; top: .42em; width: .85rem; height: .85rem; border-radius: 50%; background: var(--salvia); box-shadow: inset 0 0 0 1.5px rgba(43, 33, 24, .45); }
.antes li:nth-child(4n+2)::before { background: var(--azul); }
.antes li:nth-child(4n+3)::before { background: var(--lila); }
.antes li:nth-child(4n+4)::before { background: var(--azafran); }
.minutos td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.minutos .hora { display: inline-block; min-width: 3.4rem; padding: .1rem .55rem; border-radius: 999px; background: var(--haya); text-align: center; }
.minutos tr.rincon--salvia > :first-child { box-shadow: inset 6px 0 0 var(--salvia); }
.minutos tr.rincon--azul > :first-child { box-shadow: inset 6px 0 0 var(--azul); }
.minutos tr.rincon--lila > :first-child { box-shadow: inset 6px 0 0 var(--lila); }
.galeria { display: grid; gap: 1.5rem 1.25rem; margin-block: 2rem 2.5rem; }
.galeria .foto { margin: 0; }
@media (min-width: 40em) {
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria .foto:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .625rem); }
}
.creditos { font-size: 1rem; color: var(--tinta-suave); border-top: 1px solid var(--haya-linea); padding-top: 1.5rem; margin-top: 3rem; }

/* episodios */
.episodio-tarjeta { display: grid; border-radius: var(--radio-grande); overflow: hidden; background: var(--crema-claro); box-shadow: var(--sombra); margin-block: 1rem 2rem; }
@media (min-width: 52em) { .episodio-tarjeta { grid-template-columns: 1.1fr 1fr; } }
.episodio-tarjeta img { width: 100%; height: 100%; object-fit: cover; }
.episodio-tarjeta__texto { padding: clamp(1.75rem, 4vw, 2.75rem); }
.episodio-tarjeta h2 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }

/* dónde verla */
.fecha { display: flex; gap: 1.25rem; align-items: center; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radio-grande); margin-block: 0 2rem; background: var(--lila-media) var(--grano); }
.fecha p { margin: 0; font-family: var(--fuente-titulos); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; }
.preguntas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.preguntas > div { background: var(--crema-claro); border-radius: 22px; padding: 1.5rem 1.6rem; box-shadow: var(--sombra-suave); }
.preguntas h3 { margin-top: 0; font-size: 1.2rem; }
.preguntas p { margin: 0; }

/* para ver juntos: lectura fácil */
.facil { font-size: 1.22rem; line-height: 1.65; }
.facil li { margin-bottom: .65em; }
.panel { border-radius: var(--radio-grande); padding: clamp(1.6rem, 4vw, 2.5rem); margin-block: 1.75rem; }
.panel h2 { margin-top: 0; }
.panel ul { margin-bottom: 0; }
.panel > :last-child { margin-bottom: 0; }
.articulo > .botones { margin-block: 1.5rem 2rem; }

/* prensa */
.descargas { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-block: 1rem 1.5rem; align-items: start; }
.descarga, .nombre-muestra { margin: 0; }
.descarga img { width: 100%; border-radius: var(--radio-foto); box-shadow: var(--sombra-suave); }
.descarga figcaption { display: grid; gap: .5rem; justify-items: start; margin-top: 1rem; }
.descarga .nota { margin: 0; }
.nombre-muestra__fondos { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radio-foto); overflow: hidden; box-shadow: var(--sombra-suave); aspect-ratio: 32 / 9; }
.nombre { display: grid; place-items: center; font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -.015em; line-height: 1; padding: 1rem; }
.nombre--crema { background: var(--crema-claro); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--haya-linea); }
.nombre--tinta { background: var(--tinta); color: var(--crema); }
.nombre-muestra figcaption { margin-top: .85rem; display: grid; gap: .5rem; justify-items: start; }
.nombre img { display: block; width: min(100%, 12rem); height: auto; }
.sinopsis { display: grid; gap: 1.25rem; margin-block: 1rem 2rem; }
.sinopsis > div { background: var(--crema-claro); border-radius: 22px; padding: 1.5rem 1.7rem; box-shadow: var(--sombra-suave); }
.sinopsis h3 { margin-top: 0; }
.sinopsis p { margin: 0; }
.prensa-final { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: 2.5rem; padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: var(--radio-grande); background: var(--crema-claro); box-shadow: var(--sombra-suave); }
.prensa-final section > :last-child { margin-bottom: 0; }
.articulo .prensa-final h2 { font-size: 1.3rem; margin: 0 0 .5em; }

/* contacto */
.correos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-block: 1rem 2.5rem; }
.correo { border-radius: var(--radio-grande); padding: 2rem 1.9rem 1.8rem; }
.correo.fieltro--salvia { background-color: var(--salvia); }
.correo.fieltro--azul { background-color: var(--azul); }
.articulo .correo h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin: 0 0 .9rem; }
.correo p { margin: 0; }
.correo a { font-family: var(--fuente-titulos); font-size: clamp(1.3rem, 2.4vw, 1.6rem); overflow-wrap: anywhere; }

/* 404 */
.perdido { padding-block: clamp(3rem, 8vw, 6rem); }
.perdido > *, .perdido section { max-width: 44rem; margin-inline: auto; }
.perdido > .foto { margin-block: 0 2.5rem; }
.perdido > .foto img { width: min(100%, 36rem); }
.perdido section + section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--haya-linea); }
.perdido h1, .perdido h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); max-width: 24ch; }

/* ---------- Pie ---------- */
.pie {
  background-color: var(--haya);
  background-image: var(--grano-fino), repeating-linear-gradient(91deg, rgba(150, 110, 60, .05) 0 2px, transparent 2px 11px, rgba(150, 110, 60, .035) 11px 12px, transparent 12px 23px);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 1rem;
}
.pie__rejilla { display: grid; gap: 2rem 3rem; }
@media (min-width: 56em) { .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie .marca { margin-bottom: .6rem; }
.pie .marca img { height: 3.9rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin: 0; }
.pie nav a { display: inline-flex; min-height: 44px; align-items: center; }
.pie__par { display: block; }
@media (min-width: 40em) { .pie__par { white-space: nowrap; } }
.pie__par + .pie__par { margin-top: .35rem; }
.pie__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  border-top: 1px solid var(--haya-linea); padding-top: 1.5rem; color: var(--tinta-suave); }
.pie__base p { margin: 0; }
.pie .dato { background: var(--crema-claro); }

/* ---------- Movimiento: solo con permiso ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-movimiento='no']) .boton,
  html:not([data-movimiento='no']) .material,
  html:not([data-movimiento='no']) .clip__boton,
  html:not([data-movimiento='no']) .interruptor,
  html:not([data-movimiento='no']) .menu a,
  html:not([data-movimiento='no']) .idiomas a { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  html:not([data-movimiento='no']) .interruptor__bola { transition: left .18s ease, background .18s ease; }
}
html[data-movimiento='no'] *, html[data-movimiento='no'] *::before, html[data-movimiento='no'] *::after {
  transition: none !important; animation: none !important;
}

@media (forced-colors: active) {
  .interruptor__bola, .punto, .bola, .dia__cuenta, .material__muestra, .icono { forced-color-adjust: none; }
  .fieltro::after { border-image: none; border: 2px dashed CanvasText; inset: 10px; border-radius: 20px; }
  .material { border: 2px solid ButtonText; }
}

@media print {
  .utilidades, .menu, .menu-boton, .idiomas, .salto, .clip__boton { display: none !important; }
  body { background: #fff; }
  .cartel__texto { margin: 1rem 0; }
}

/* ==== Mejoras de la Mesa de la portada (mejoras_mesa.py · mejoras-seleccion.json): uso-01, movil-02, marca-01, tipografia-03, tipografia-04, fecha-movil, fecha-marcado, seo-01, tipografia-01, movil-05, accesibilidad-02, imagen-01, conversion-05, tipografia-06, tipografia-02, contenido-04, seo-05, marca-02, movil-09, accesibilidad-01, uso-08, seo-04 ==== */
/* uso-01 · Enlace «Ver un momento del taller (23 s)» en el héroe */
.cartel__ver{margin:1.1rem 0 0;font-size:1rem;font-weight:700}.cartel__ver a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--tinta);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}.cartel__ver svg{flex:none;width:1.75rem;height:1.75rem;padding:.45rem .4rem .45rem .5rem;border-radius:50%;background:var(--tinta);fill:#FAF6EE}#t-clip{scroll-margin-top:1.5rem}

/* movil-02 · Tableta: los tres rincones en una fila */
@media (min-width: 40em) and (max-width: 55.99em) {
  html .rincones__fila { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  html .rincones__fila img { aspect-ratio: 4 / 3; }
}

/* tipografia-03 · Ficha «de un vistazo» en el móvil: la etiqueta encima del dato */
@media (max-width:29.99em){body .vistazo__dato{grid-template-columns:1fr;gap:.3rem;padding:1rem 1.2rem 1.05rem}}

/* tipografia-04 · Ficha de datos en escritorio: que «6 min 11 s» se lea como dato */
@media (min-width:60em){body .vistazo dd{font-size:1.5rem;line-height:1.2}body .vistazo dd small{margin-top:.3rem}}

/* fecha-movil · Fecha de estreno en una sola línea en cualquier móvil */
@media (max-width:29.99em){body .estreno__fecha{font-size:min(1.375rem,5.2vw);text-wrap:balance}}

/* tipografia-01 · Antes, Durante y Después: en el móvil, más pequeños que el título de su sección */
body .juntos__paso h3{font-size:clamp(1.5rem,2.1vw,1.85rem)}

/* movil-05 · Correos del pie con zona táctil de 44 px */
@media (pointer: coarse), (max-width: 66em) {
  html .pie__correos a { display: inline-flex; align-items: center; min-height: 44px; }
  html .pie__par + .pie__par { margin-top: 0; }
}

/* imagen-01 · Materiales en escritorio: recorte 4:3 para que la foto acompañe a su columna de texto */
@media (min-width: 56em) { body .materiales-foto img { aspect-ratio: 4 / 3; object-position: 72% 50%; } }

/* conversion-05 · «Con un adulto al lado» enlaza con la sección «Para ver juntos» */
main .vistazo dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; text-decoration-color: rgba(43, 33, 24, .45); }
main .vistazo dd a:hover { text-decoration-color: var(--tinta); }

/* tipografia-06 · Héroe en el móvil: aire entre el lema y la entradilla */
@media (max-width:63.99em){body .cartel .lema{margin-bottom:.9rem}}

/* movil-09 · Tableta: «Antes de ver» y «Cómo se hace» una al lado de la otra */
@media (min-width: 45em) and (max-width: 55.99em) {
  html .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .tarjeta { padding: 2rem 1.8rem; }
}

/* accesibilidad-01 · La insignia «Para ver juntos, a partir de 3 años» a 16 px */
html .dato { font-size: 1rem; }

/* uso-08 · El formato «26 episodios de 6 min 11 s» como segunda etiqueta del héroe en el móvil */
@media (min-width:64em){.datos .datos__formato{display:none}}