@font-face {
  font-family: Archivo;
  src: url('/fonts/Archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* The stream's world: multicam paper, Se Fue Larga navy as ink, Luzu's four flat block colours.
     OKLCH so every step keeps its hue; lightness is what sets contrast against navy ink. */
  --paper: oklch(92% .009 78);
  --paper-2: oklch(87.8% .014 78);
  --sheet: oklch(98.5% .004 91);
  --ink: oklch(28.9% .074 278);
  --ink-2: oklch(45% .052 280);
  --line: oklch(82.9% .017 79);
  --teal: oklch(72.9% .107 187);
  --yellow: oklch(84.2% .168 90);
  --pink: oklch(80.2% .102 355);
  --red: oklch(58.7% .228 21);
  --peach: oklch(83.5% .084 48);
  /* Set blue sits at 68% lightness so navy names on it pass 4.5:1 (it was 3.5:1 at 60%). */
  --set: oklch(68% .13 266);
  /* Deep teal carries white on-air titles at 5.7:1; the light teal carries only navy. */
  --teal-deep: oklch(50% .09 190);
  /* Red is the live lamp: something sounding right now. */
  --live: var(--red);
  --danger: oklch(49.5% .19 21);
  /* One colour per person, the same everywhere that person appears. */
  --ch-0: oklch(76.6% .018 78);
  --ch-1: var(--teal);
  --ch-2: var(--pink);
  --ch-3: var(--yellow);
  --ch-4: var(--set);
  --ch-5: oklch(73.6% .13 298);
  --ch-6: oklch(73.5% .12 151);
  --ch-7: var(--peach);
  --ch-8: oklch(72.5% .15 50);
  --ch-music: var(--ink);
  /* People without a voice of their own take their group's tint. */
  --g-invitado: oklch(83.5% .08 298);
  --g-produccion: oklch(89.5% .12 92);
  --g-extra: oklch(85.5% .065 188);

  --gutter: clamp(1rem, .3rem + 2.4vw, 2.5rem);
  --content-max: 1600px;
  --bar-h: 4.25rem;
  --radius: 10px;
  /* Motion: settle (most UI), travel (something crossing the screen), pop (a sticker landing, with a little overshoot). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-pop: cubic-bezier(.175, .885, .32, 1.275);
  --lift: 0 1px 0 rgb(35 38 79 / .06), 0 10px 24px -14px rgb(35 38 79 / .45);

  font-family: Archivo, system-ui, sans-serif;
  font-stretch: 100%;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--paper) url('/assets/paper-ground.webp') repeat;
  background-size: 512px;
  accent-color: var(--ink);
  caret-color: var(--red);
  scrollbar-color: var(--ink-2) transparent;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

*, *::before, *::after { box-sizing: border-box; min-inline-size: 0; }
/* clip, not hidden: full-bleed shelves may reach under a classic scrollbar without making the page scroll sideways or breaking sticky. */
/* Header, page, footer: a short page still ends on the footer band, not on bare texture. */
html { scroll-padding-block: calc(var(--bar-h) + 1rem) calc(var(--tabs-h, 0px) + 1rem); }
body { margin: 0; min-block-size: 100svh; overflow-x: clip; display: grid; grid-template-rows: auto 1fr auto; }
/* Phone Chromium widens the page to anything painted past the edge (a sticker mid-slap) despite body's clip; the main column clips it itself. */
/* The footer starts below the fold, so a view filling in after its data arrives never shoves it (CLS 0.54 on Episodios). */
#main { overflow-x: clip; min-block-size: 100svh; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, audio, video { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Cut-out buttons (stickers, the fish) would flash a grey box on tap; :active and focus rings give the feedback instead. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 3px; border-radius: 4px; }
/* Navy and set-photo surfaces take a light ring: the navy one vanished on «Jugar» over the game's navy band. */
:is(.hero, .quiz-card, .about-hero, .p-credits, .transport, .mesa, .studio-console, .studio-door, .video-player, .toast) { --focus-ring: var(--sheet); }
::selection { background: var(--yellow); color: var(--ink); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; inline-size: 1.15em; block-size: 1.15em; flex: none; }
[hidden] { display: none !important; }
time, .tc { font-variant-numeric: tabular-nums; }

h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 900; font-stretch: 108%; line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: 1.35rem; font-weight: 850; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 750; line-height: 1.3; }
p { line-height: 1.55; }

.legend { font-weight: 650; font-size: .85rem; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }

.skip-link { position: fixed; inset-block-start: -10rem; inset-inline-start: 1rem; z-index: 20; min-block-size: 2.75rem; padding: .75rem 1rem; background: var(--sheet); border-radius: var(--radius); }
.skip-link:focus { inset-block-start: 1rem; }

/* ——— The bar: logo, three sections, the on-air corner card ——— */
.bar {
  position: sticky; inset-block-start: 0; z-index: 10;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.75rem);
  /* The bar's content lines up with main's 1600px column, so a wide monitor never strands the logo and clock at its edges. */
  block-size: var(--bar-h); padding-inline: max(var(--gutter), (100% - var(--content-max)) / 2 + var(--gutter));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-block-end: 1px solid var(--line);
}
.logo { flex: none; display: flex; align-items: center; min-block-size: 2.75rem; inline-size: 6.6rem; }
.logo svg { inline-size: 100%; block-size: auto; stroke: none; }
.l-i { fill: var(--teal); } .l-t { fill: var(--yellow); } .l-u { fill: var(--pink); } .l-x { fill: var(--red); }
.l-tv { fill: var(--ink); font: 900 30px Archivo, sans-serif; font-stretch: 100%; letter-spacing: -.02em; }
.bar nav { display: flex; gap: .35rem; }
.bar nav a {
  position: relative; display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 1rem;
  text-decoration: none; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink-2);
  border-radius: 999px; transition: color .2s, background .2s;
}
.bar nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--tab) 22%, transparent); }
.bar nav a[aria-current='page'] { color: var(--ink); background: var(--tab); }
.on-air {
  margin-inline-start: auto; display: grid; justify-items: stretch; gap: 3px;
  font-weight: 850; font-size: .82rem; text-align: center;
}
.on-air > * { background: var(--sheet); border-radius: 5px; padding: .18rem .7rem; box-shadow: var(--lift); }
.on-air time { font-size: 1rem; font-weight: 800; }
.on-air span { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--ink-2); }
.lamp { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: #cdb9b9; transition: background .15s, box-shadow .15s; }
.on-air[data-live] span { color: var(--ink); }
.on-air[data-live] .lamp, .strip[data-active] .lamp { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 30%, transparent); }

main { inline-size: 100%; min-block-size: calc(100svh - var(--bar-h)); padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) 5rem; max-inline-size: var(--content-max); margin-inline: auto; }
/* Charlá owns its room height; other short pages keep the full-viewport main floor. */
body[data-route='charla'] #main { min-block-size: 0; }
main:focus { outline: none; }

/* ——— Buttons & fields ——— */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 2.75rem; padding: .55rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--sheet); color: var(--ink);
  font-weight: 800; font-size: .95rem; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .1s;
}
.button:hover { background: var(--yellow); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--ink); color: var(--sheet); }
.button.primary:hover { background: color-mix(in srgb, var(--ink) 85%, var(--set)); }
.button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding-inline: .7rem; }
.button.quiet:hover { background: var(--paper-2); color: var(--ink); }
.button:disabled { opacity: .5; }
label, .label { display: block; font-weight: 750; margin-block-end: .4rem; }
input[type='text'], input[type='search'], input[type='tel'], input[type='date'], input[type='password'], select, textarea {
  inline-size: 100%; min-block-size: 2.75rem; padding: .6rem .9rem; border-radius: 999px;
  border: 2px solid var(--line); background: var(--sheet); font-size: 1rem; transition: border-color .15s;
}
textarea { border-radius: var(--radius); field-sizing: content; min-block-size: 6.5rem; max-block-size: 20rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 1; }
input:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.hint { font-size: .875rem; color: var(--ink-2); margin-block-start: .5rem; }
.error { color: var(--danger); font-weight: 650; }

/* A sheet of paper laid on the desk: the one container. */
.module { background: var(--sheet); border-radius: var(--radius); box-shadow: var(--lift); }

.page-head { display: grid; gap: .6rem; margin-block-end: 2rem; max-inline-size: 60rem; }
.page-head p { color: var(--ink-2); font-size: 1.1rem; max-inline-size: 62ch; }
/* Stop-motion figures (avatar.js): the pose frame with its face patches laid over it in percent of the pose. */
.anim { position: absolute; aspect-ratio: var(--aspect); }
.anim > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.anim > .patch { inset: auto; visibility: hidden; }
.anim[data-mouth='closed'] > [data-part='mouth'][data-state='closed'], .anim[data-mouth='mid'] > [data-part='mouth'][data-state='mid'],
.anim[data-mouth='open'] > [data-part='mouth'][data-state='open'], .anim[data-blink] > [data-part='blink'],
.anim[data-alt='0'] > [data-part='alt'][data-state='0'] { visibility: visible; }
.tile .block > .anim { inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; block-size: 96%; }

/* Quién es: the person's credential pinned beside the folders of their file, the show's credits rolling under both.
   The credential stays in view on a desk while the folders scroll; a phone stacks them. */
.p-about-body { display: grid; grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (max-width: 760px) {
  .p-about-body { grid-template-columns: minmax(0, 1fr); }
}
:root:not([data-studio]) .studio-only { display: none; }
.observations { display: grid; gap: .9rem; }
.observations li { line-height: 1.5; }
blockquote { margin-block-start: .4rem; padding: .55rem .85rem; border-radius: 8px; background: var(--sheet); font-size: .95rem; line-height: 1.5; }
blockquote a { font-weight: 750; white-space: nowrap; }
.chip { padding: .25rem .7rem; border-radius: 999px; background: var(--sheet); font-weight: 750; font-size: .9rem; box-shadow: var(--lift); }
/* The studio's «Temas pedidos» metrics (requests.js). */
.engagement { padding: clamp(1rem, 2vw, 2rem); margin-block-end: 2rem; display: grid; gap: 1rem; }
.engagement > p { color: var(--ink-2); max-inline-size: 65ch; }
.engagement-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.25rem; margin: 0; }
.engagement-totals dt { color: var(--ink-2); font-size: .9rem; }
.engagement-totals dd { font-size: 1.8rem; font-weight: 900; font-variant-numeric: tabular-nums; margin: .2rem 0 0; }
.engagement summary { cursor: pointer; padding-block: .75rem; font-weight: 750; }
.engagement-sections { columns: 2 16rem; padding-inline-start: 1.1rem; margin-block: .75rem 1.5rem; }
.back { display: inline-flex; align-items: center; min-block-size: 2.75rem; gap: .4rem; font-weight: 800; text-decoration: none; color: var(--ink-2); margin-block-end: 1rem; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); } }
.back svg { rotate: 180deg; }

/* ——— Archivo ——— */
.programmes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.4rem 1.1rem; }
.programme { display: grid; gap: .55rem; text-decoration: none; }
.programme .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--ink); box-shadow: var(--lift); transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .programme:hover .thumb { transform: translateY(-3px); } }
.programme .thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.programme .thumb .length { position: absolute; inset-block-end: .5rem; inset-inline-end: .5rem; padding: .15rem .45rem; border-radius: 5px; background: rgb(20 22 50 / .85); color: white; font-weight: 800; font-size: .8rem; }
.programme .thumb .status { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; }
.programme strong { font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.programme .when { color: var(--ink-2); font-weight: 650; font-size: .875rem; }

.archive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.source-view { display: grid; gap: 1rem; }
.source-view h1 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); }
.source-view .frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--ink); box-shadow: var(--lift); }
.source-view .frame img, .source-view .frame video { inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--ink); }
.source-view .frame video { object-fit: contain; }
.source-view audio { inline-size: 100%; }
.voices-in { display: flex; flex-wrap: wrap; gap: .45rem; }
.voices-in span { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .45rem; border-radius: 999px; background: var(--sheet); font-weight: 750; font-size: .9rem; box-shadow: var(--lift); }
.editions { display: flex; flex-wrap: wrap; gap: .4rem; }
.editions .button[aria-pressed='true'] { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.transcript { display: grid; grid-template-rows: auto 1fr auto; max-block-size: calc(100svh - var(--bar-h) - 2rem); position: sticky; inset-block-start: calc(var(--bar-h) + 1rem); overflow: hidden; }
.transcript .search-row { padding: .9rem 1rem; border-block-end: 2px dashed var(--line); flex-wrap: wrap; }
.transcript .search-row input { flex: 1 1 12rem; }
.transcript .search-row select { inline-size: auto; flex: 1 0 10rem; }
.turns { overflow-y: auto; padding: .4rem .5rem; min-block-size: 12rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; border-block-start: 2px dashed var(--line); font-weight: 650; color: var(--ink-2); }
/* The studio's control desk: navy like the transport bar, so the tools read as the studio, not as a form left on the page. */
.studio-console {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem clamp(1.5rem, 4vw, 3rem); align-items: start;
  margin-block-start: 3rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; background: var(--ink); color: var(--sheet); box-shadow: var(--lift);
}
.studio-console > h2 { grid-column: 1 / -1; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 900; }
.console-import { display: grid; gap: .6rem; }
.console-import label, .console-log h3 { font-weight: 850; font-size: 1.05rem; }
.console-import input { border-color: transparent; color: var(--ink); }
.console-import input:focus-visible { outline-color: var(--yellow); }
.console-note { font-size: .875rem; color: color-mix(in oklab, var(--sheet) 72%, var(--ink)); }
.console-log { display: grid; gap: .6rem; }
.rundown { display: grid; }
.rundown li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding-block: .6rem; border-block-start: 1px solid color-mix(in oklch, var(--sheet) 16%, transparent); }
.rundown-kind { justify-self: start; padding: .1rem .55rem; border-radius: 5px; background: var(--teal); color: var(--ink); font-weight: 850; font-size: .78rem; }
.rundown li[data-kind='generate'] .rundown-kind { background: var(--yellow); }
.rundown li[data-kind='ingest'] .rundown-kind { background: var(--pink); }
.rundown-title { font-weight: 650; font-size: .92rem; line-height: 1.35; }
.rundown .button { min-block-size: 2.25rem; padding-block: .25rem; background: var(--yellow); border-color: var(--yellow); }
.console-error summary { margin-block-start: .3rem; color: oklch(80% .12 21); font-weight: 750; cursor: pointer; }
.console-error code { display: block; margin-block-start: .3rem; font-size: .8rem; color: color-mix(in oklab, var(--sheet) 70%, var(--ink)); overflow-wrap: anywhere; }
.analysis-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.empty { display: grid; gap: .75rem; justify-items: start; padding: 2.5rem; max-inline-size: 40rem; }
.toast { position: fixed; z-index: 30; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; max-inline-size: min(26rem, calc(100vw - 2.5rem)); padding: .85rem 1.2rem; border-radius: 12px; background: var(--ink); color: var(--sheet); font-weight: 650; box-shadow: 0 14px 30px -10px rgb(0 0 0 / .5); }
.loading { display: grid; gap: 1rem; min-block-size: 70svh; align-content: start; }
.loading .skeleton { display: block; }
/* Silhouettes sized like the real blocks they stand for (measured at 1440: hero 547px, stage 16:9, script 27rem). */
.sk-title { block-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); inline-size: min(34rem, 80%); }
.sk-line { block-size: 1.1rem; inline-size: min(40rem, 90%); }
.sk-pill { block-size: 3rem; inline-size: min(14rem, 50%); border-radius: 999px; }
.sk-hero { block-size: clamp(24rem, 38vw, 34rem); border-radius: 22px; background-image: linear-gradient(90deg, var(--ink) 30%, color-mix(in oklch, white 12%, var(--ink)) 50%, var(--ink) 70%); }
.sk-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 27vw, 27rem); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.sk-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; margin-block-start: 2rem; }
.sk-stack { display: grid; gap: 1rem; align-content: start; }
.sk-stage, .sk-cover { aspect-ratio: 16 / 9; border-radius: 14px; }
.sk-side { min-block-size: 32rem; border-radius: 14px; }
.sk-form { min-block-size: 40rem; border-radius: 14px; }
.sk-preview { block-size: 24rem; border-radius: 22px; }
.sk-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.sk-card { aspect-ratio: 16 / 11; border-radius: 14px; }
.sk-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.sk-tile { aspect-ratio: 4 / 5; border-radius: 14px; }
@media (max-width: 1080px) { .sk-cols, .sk-feature { grid-template-columns: 1fr; } .sk-side { min-block-size: 12rem; } }
.sk-back { block-size: 1.4rem; inline-size: 7rem; margin-block-end: .6rem; }
.sk-profile { display: grid; grid-template-columns: minmax(15rem, 30rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-block-end: 2rem; }
.sk-portrait { aspect-ratio: 1; border-radius: 12px; }
.sk-moment { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: .55rem; border-radius: 18px; background: var(--sheet); }
.sk-frame { flex: 1 1 15rem; max-inline-size: 22rem; aspect-ratio: 16 / 9; border-radius: 12px; }
.sk-moment > .sk-stack { flex: 999 1 20rem; padding-block: 1rem; }
.sk-prog { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sk-seats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem; margin-block-start: 1.5rem; }
.sk-quote { block-size: clamp(11rem, 18vw, 14rem); border-radius: 22px; margin-block: 1.5rem 1rem; }
.sk-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, 1rem); max-inline-size: 44rem; }
@media (max-width: 700px) { .sk-profile { grid-template-columns: 1fr; } .sk-portrait { aspect-ratio: 2 / 1; } .sk-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
/* Paper with a soft sweep of light; under reduced motion the blocks hold still and the hidden status line still reads. */
.skeleton { border-radius: 8px; background: linear-gradient(100deg, var(--paper-2) 35%, color-mix(in oklch, var(--sheet) 80%, var(--yellow)) 50%, var(--paper-2) 65%) 0 0 / 300% 100% var(--paper-2); }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: shimmer 1.6s cubic-bezier(.4, 0, .2, 1) infinite; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }


.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.button.big { min-block-size: 3.25rem; padding-inline: 1.5rem; font-size: 1.05rem; }
svg.solid { fill: currentColor; stroke: none; }
.bar .ask { margin-inline-start: auto; gap: 0; background: var(--yellow); }
.bar .ask:hover, .bar .ask[aria-current='page'] { background: var(--ink); color: var(--sheet); }
.bar .on-air { margin-inline-start: 0; }
.episode-show { inline-size: 7.5rem; rotate: -4deg; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .25)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ideas .chip { border: 0; min-block-size: 2.75rem; cursor: pointer; }
.ideas .chip:hover { background: var(--yellow); }

/* ——— Para repasar ——— */
/* One rhythm for short and long notes: number, the idea in a readable measure, its sources as one row of chips, a dashed rule. */
.notes { padding: 1.25rem; display: grid; gap: .5rem; }
.notes ol { display: grid; counter-reset: note; }
.notes li { counter-increment: note; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .5rem .8rem; padding-block: .95rem; border-block-start: 2px dashed var(--line); }
.notes li:first-child { border-block-start: 0; padding-block-start: .35rem; }
.notes li::before { content: counter(note); grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 6px; background: var(--teal); font-weight: 900; }
.notes li > p { grid-column: 2; line-height: 1.5; }
.note-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; }
.note-sources .note-label { margin-inline-end: .2rem; color: var(--ink-2); font-weight: 700; }
/* Wide modules read like a ledger: the idea on the left, its sources stacked in their own column. */
/* The module is ≥ 46rem wide from 783 px (full width, gutters ≈ 2.4vw) to 1080 px, and again from 1150 px beside the
   script column (listen.css). A viewport query, not a container: as a container, every grid pass re-laid out the
   whole page next to the long script (three 280–440 ms frames on a phone opening an episode, 18/10). */
@media (783px <= width <= 1080px) or (width >= 1150px) {
  .notes li { grid-template-columns: 1.7rem minmax(0, 1fr) 15rem; column-gap: 1.25rem; }
  .notes li::before { grid-row: 1; }
  .notes li > p:first-child { max-inline-size: 64ch; }
  .notes li > .note-sources { grid-column: 3; grid-row: 1; flex-direction: column; align-items: stretch; gap: .3rem; }
  .note-sources .note-label { display: none; }
  .note-sources .source-chip { max-inline-size: none; }
}
.note-sources .source-chip { max-inline-size: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .15rem .6rem; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 750; text-decoration: none; }
.note-sources a:hover, .note-sources a:focus-visible { background: var(--teal); }

/* ——— Reacciones ——— */
.reactions { padding: 1.25rem; display: grid; gap: .8rem; }
.reactions form { display: grid; gap: .8rem; }
.scale { display: grid; grid-template-columns: repeat(5, minmax(2.75rem, 3.5rem)); gap: .4rem; border: 0; margin: 0; padding: 0; }
.scale label { cursor: pointer; }
.scale input { position: absolute; opacity: 0; }
.scale label span { display: grid; place-items: center; block-size: 2.75rem; border-radius: 10px; background: var(--paper); font-weight: 900; font-size: 1.1rem; transition: background .15s, transform .15s; }
.scale label:hover span { background: color-mix(in srgb, var(--yellow) 50%, var(--paper)); }
.scale input:checked + span { background: var(--yellow); transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--ink); }
.scale input:focus-visible + span { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 2px; }
.scale-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--ink-2); font-size: .82rem; font-weight: 650; }
.reactions textarea { min-block-size: 4.5rem; }
.reactions .button { justify-self: start; }
.thanks { font-weight: 800; padding: .6rem 0; }

/* ——— Pedidos ——— */
.table-wrap { overflow-x: auto; }
.studio-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block-end: 1rem; }
.studio-tabs { display: flex; gap: .3rem; padding: .25rem; inline-size: fit-content; border-radius: 999px; background: var(--paper-2); }
.studio-tabs a { padding: .35rem .95rem; border-radius: 999px; font-weight: 800; text-decoration: none; color: var(--ink-2); }
.studio-tabs a[aria-current] { background: var(--ink); color: var(--sheet); }
table.requests { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.requests th { text-align: start; padding: .8rem 1rem; font-weight: 800; border-block-end: 2px dashed var(--line); white-space: nowrap; }
.requests td { padding: .7rem 1rem; border-block-end: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.requests tr[data-status='new'] td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }
.request-production { margin-block-start: .75rem; min-inline-size: 12rem; overflow-wrap: anywhere; }
.request-production progress { inline-size: 100%; accent-color: var(--teal-deep); }
.request-producer { padding: clamp(1.25rem, 3vw, 2rem); margin-block-end: 2rem; scroll-margin-block-start: 5rem; max-inline-size: 48rem; }
.request-producer form { display: grid; gap: 1rem; }
.request-producer input[type='number'] { inline-size: 8rem; min-block-size: 2.75rem; padding: .6rem .9rem; border: 2px solid var(--line); border-radius: 999px; background: var(--sheet); font: inherit; }
.request-producer .consent { display: flex; align-items: start; gap: .75rem; font-weight: 400; line-height: 1.55; }
.request-producer .consent input { flex-shrink: 0; inline-size: 1.4rem; block-size: 1.4rem; accent-color: var(--ink); }
.request-producer .hero-actions { flex-wrap: wrap; }
.request-producer .form-error, .request-production .form-error { color: var(--danger); overflow-wrap: anywhere; }

/* The studio's door: one field on the navy desk, like the control console it opens. */
.studio-door { display: grid; gap: 1rem; max-inline-size: 30rem; margin: clamp(2rem, 8vh, 5rem) auto; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 22px; background: var(--ink); color: var(--sheet); box-shadow: var(--lift); }
.studio-door h1 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 900; text-transform: uppercase; font-stretch: 112%; }
.studio-door p { color: color-mix(in oklab, var(--sheet) 78%, var(--ink)); }
.studio-login { display: grid; gap: .6rem; }
.studio-login input { border-color: transparent; color: var(--ink); }
.studio-login input:focus-visible { outline-color: var(--yellow); }
.studio-login .error { color: oklch(82% .12 21); }
.studio-login .button { justify-self: start; margin-block-start: .4rem; background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

/* ——— Pie ——— */
/* The footer is the header's band at the other end: the same paper over the texture, full width, content on main's column,
   opened by the logo's four colours. ItuTV and the homage on the left, the maker's signature on the right; no second nav. */
.foot {
  display: grid; grid-template-areas: 'logo note maker'; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: 2rem max(var(--gutter), (100% - var(--content-max)) / 2 + var(--gutter)) 2.25rem;
  background: linear-gradient(90deg, var(--teal) 0 25%, var(--yellow) 0 50%, var(--pink) 0 75%, var(--red) 0) top / 100% 6px no-repeat, var(--paper);
  color: var(--ink-2);
}
.foot .logo { grid-area: logo; inline-size: 7.5rem; }
.foot-note { grid-area: note; max-inline-size: 68ch; font-size: .95rem; line-height: 1.55; }
/* 120 px is the 42N lockup's governed minimum; its own clear space stays inside the SVG's square. */
.foot-maker { grid-area: maker; display: flex; align-items: center; gap: .9rem; padding-inline-start: clamp(1.5rem, 3vw, 2.5rem); border-inline-start: 2px solid var(--line); color: var(--ink-2); font-size: .9rem; line-height: 1.25; }
.foot-maker b { display: block; color: var(--ink); font-size: 1.2rem; font-weight: 900; letter-spacing: -.01em; }
.foot-maker a { display: block; border-radius: 12px; }
.foot-maker img { display: block; inline-size: 120px; block-size: auto; }
/* Narrower, the signature joins the logo's row and the homage reads full width below. */
@media (max-width: 900px) {
  .foot { grid-template-areas: 'logo maker' 'note note'; grid-template-columns: auto minmax(0, 1fr); row-gap: .5rem; padding-block: 1.5rem 1.75rem; }
  .foot .logo { inline-size: 5.5rem; }
  .foot-maker { justify-self: end; padding-inline-start: 0; border: 0; gap: .5rem; text-align: end; }
  .foot-note { max-inline-size: none; font-size: .9rem; }
}
/* On a phone the row cannot hold both logos and the name: the signature closes the band as its own ruled line. */
@media (max-width: 520px) {
  .foot { grid-template-areas: 'logo' 'note' 'maker'; grid-template-columns: minmax(0, 1fr); padding-block-end: .75rem; }
  .foot .logo { inline-size: 6.5rem; }
  .foot-maker { justify-self: stretch; justify-content: space-between; margin-block-start: .25rem; padding-block-start: .5rem; border-block-start: 2px solid var(--line); text-align: start; }
}
.foot-maker b { white-space: nowrap; }
.foot-maker img { flex: none; }
/* The nav moves to the bottom tabs on phones, so the top bar has room for the whole call except on the narrowest screens. */
@media (max-width: 340px) { .bar .ask .long { display: none; } }
.bar nav a, .bar .ask { white-space: nowrap; }
/* Between the phone tabs and a full desktop bar the sections keep one line: the corner clock gives up its room first,
   then the call shortens to its verb. */
@media (min-width: 701px) and (max-width: 1180px) {
  .bar { gap: 1rem; }
  .bar .on-air { display: none; }
  .bar nav { gap: .15rem; }
  .bar nav a { padding-inline: .7rem; font-size: .95rem; }
}
/* At tablet width the whole call still fits once the sections tighten; «Armá» alone read as half a sentence. */
@media (min-width: 701px) and (max-width: 960px) {
  .bar { gap: .6rem; }
  .bar .logo { inline-size: 5.4rem; }
  .bar nav { gap: 0; }
  .bar nav a { padding-inline: .55rem; font-size: .9rem; }
  .bar .ask { padding-inline: .9rem; font-size: .9rem; }
}
@media (max-width: 700px) {
  .bar .ask { min-block-size: 2.75rem; padding-inline: .9rem; }
  .bar [data-route='estudio'] { display: none; }
  /* Four tabs fit at 390 px; «Cómo lo hice» stays in the desktop bar only. */
  .bar nav [data-route='quien'] { display: none; }
  /* Square on phones, so the name and the first facts share the opening screen with the portrait. */

  .episode-show { inline-size: 5.5rem; }
}

@media (max-width: 1080px) {
  .archive, .about-hero { grid-template-columns: 1fr; }
  .studio-console { grid-template-columns: 1fr; }
  .transcript { position: static; max-block-size: 34rem; }

}
@media (max-width: 700px) {
  :root { --bar-h: 3.6rem; --tabs-h: 3.75rem; }
  /* No backdrop-filter here: it would make the bar the containing block of the fixed tab bar below. */
  .bar { gap: .75rem; backdrop-filter: none; background: var(--paper); }
  .logo { inline-size: 4.2rem; }
  /* Phones get the sections as a bottom tab bar, where the thumb is; the top keeps the logo and the Armá pill. */
  .bar nav {
    position: fixed; z-index: 12; inset: auto 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--paper) 94%, transparent);
    backdrop-filter: blur(10px) saturate(1.2); border-block-start: 1px solid var(--line);
  }
  .bar nav a { justify-content: center; min-block-size: 3rem; padding-inline: .4rem; font-size: .82rem; text-align: center; line-height: 1.1; }
  body { padding-block-end: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
  .toast { inset-block-end: calc(var(--tabs-h) + 1rem); }
  .on-air { display: none; }
}
.yt-shelf header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: end; margin-block-end: 1rem; }
.yt-shelf header > :not(.button) { grid-column: 1; }
.yt-shelf header > .button { grid-column: 2; grid-row: 1 / span 2; }
.yt-shelf header p { color: var(--ink-2); }
/* A phone stacks title, note and link: side by side, the long link squeezed the title into five lines. */
@media (max-width: 700px) {
  .yt-shelf header { grid-template-columns: minmax(0, 1fr); }
  .yt-shelf header > .button { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* A quiet link under a title lines its words up with the title. Wide, its hover pill reaches into the margin; on a
   phone the margin is too thin for the focus ring, so the link drops its side padding and border instead. */
.yt-group > .button.quiet { margin-inline-start: calc(-.7rem - 2px); }
@media (max-width: 700px) {
  .yt-shelf header > .button.quiet, .yt-group > .button.quiet { margin-inline-start: 0; padding-inline: 0; border-inline-width: 0; }
}
.real-show { scroll-margin-block-start: calc(var(--bar-h) + 1rem); }
.yt-group h3 { margin-block-end: .9rem; font-size: 1.15rem; font-weight: 850; }
.yt-group + .yt-group { margin-block-start: 2.5rem; }
.yt-group > .button { margin-block-start: .9rem; }
.yt-group[data-open] > [data-show-all] { display: none; }
/* A closed grid shows whole rows: --cols per container width, and the cards past rows × cols wait for "Ver los …".
   The nth-child limits are rows × cols + 1 for each column count (CSS cannot multiply inside a selector). */
.yt-group { container-type: inline-size; }
.yt-grid { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.4rem 1rem; }
.yt-group:not([data-open]) .yt-grid[data-rows='1'] > :nth-child(n+3), .yt-group:not([data-open]) .yt-grid[data-rows='2'] > :nth-child(n+5) { display: none; }
@container (min-width: 40rem) {
  .yt-grid { --cols: 3; }
  .yt-group:not([data-open]) .yt-grid[data-rows] > :nth-child(n) { display: grid; }
  .yt-group:not([data-open]) .yt-grid[data-rows='1'] > :nth-child(n+4), .yt-group:not([data-open]) .yt-grid[data-rows='2'] > :nth-child(n+7) { display: none; }
}
@container (min-width: 56rem) {
  .yt-grid { --cols: 4; }
  .yt-group:not([data-open]) .yt-grid[data-rows] > :nth-child(n) { display: grid; }
  .yt-group:not([data-open]) .yt-grid[data-rows='1'] > :nth-child(n+5), .yt-group:not([data-open]) .yt-grid[data-rows='2'] > :nth-child(n+9) { display: none; }
}
@container (min-width: 74rem) {
  .yt-grid { --cols: 5; }
  .yt-group:not([data-open]) .yt-grid[data-rows] > :nth-child(n) { display: grid; }
  .yt-group:not([data-open]) .yt-grid[data-rows='1'] > :nth-child(n+6), .yt-group:not([data-open]) .yt-grid[data-rows='2'] > :nth-child(n+11) { display: none; }
}
.yt-card { display: grid; grid-template-rows: auto auto 1fr; gap: .6rem; padding-block-end: 1rem; border-radius: 12px; background: var(--sheet); box-shadow: var(--lift); text-decoration: none; color: var(--ink); scroll-snap-align: start; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border-radius: 12px 12px 0 0; background: var(--ink); }
.yt-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.yt-card:active { background: var(--paper-2); }
@media (hover: hover) and (pointer: fine) {
  .yt-card:hover { background: var(--yellow); }
}
.yt-thumb .length { position: absolute; inset: auto .5rem .5rem auto; padding: .1rem .45rem; border-radius: 5px; background: rgb(25 28 64 / .85); color: white; font-size: .78rem; font-weight: 800; }
.yt-badge { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; display: flex; align-items: center; gap: .35rem; min-block-size: 1.5rem; padding: .2rem .55rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: .75rem; font-weight: 850; }
.yt-meta { padding-inline: .85rem; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.yt-card strong { margin-inline: .85rem; font-weight: 850; font-size: 1rem; line-height: 1.3; font-stretch: 104%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: clip; }
.yt-months .month-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .9rem 1.5rem; margin-block-end: 1.1rem; }
.month-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.yt-months .month-title h3 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 900; font-stretch: 108%; line-height: 1; letter-spacing: -.02em; scroll-margin-block-start: calc(var(--bar-h) + 1rem); }
.month-title h3:focus { outline: none; }
.month-title h3:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 4px; }
.month-count { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: .82rem; font-weight: 850; font-stretch: 100%; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Arrows and jump list: one row of 44 px pills; the arrow names the month it leads to. */
.month-steps { display: flex; align-items: center; gap: .5rem; }
.month-step { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: .7rem .95rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--sheet); color: var(--ink); font-weight: 850; font-size: .92rem; cursor: pointer; transition: background .15s; }
.month-step[data-step='newer'] { padding-inline: .95rem .7rem; }
.month-step:empty, .month-step:has(span:empty) { padding-inline: .7rem; }
.month-step svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.month-step[data-step='newer'] svg { rotate: 180deg; }
.month-step:disabled { border-color: var(--line); background: transparent; color: var(--ink-2); opacity: .55; cursor: default; }
@media (hover: hover) and (pointer: fine) { .month-step:not(:disabled):hover { background: var(--yellow); } }
.month-step:not(:disabled):active { transform: translateY(1px) scale(.97); }
.month-step:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 2px; }
.month-jump { inline-size: auto; min-inline-size: 0; padding-inline: 1rem 2.2rem; font-weight: 750; font-size: .92rem; color: var(--ink-2); cursor: pointer;
  appearance: none; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323264f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 1rem; }

/* The month's cards are the whole grid (no data-rows limit); a swipe sideways changes month, vertical stays scroll. */
.month-grid { touch-action: pan-y; }
.yt-months > .month-steps { justify-content: space-between; margin-block-start: 1.4rem; }

/* Phone: heading on its own line, the three controls share the row below it; the jump list takes the slack. */
@container (max-width: 39.99rem) {
  .yt-months .month-bar { flex-direction: column; align-items: stretch; }
  /* The select's intrinsic width (its longest option) must not push the newer arrow off a 320 px screen. */
  .month-bar .month-steps .month-jump { flex: 1; inline-size: 0; }
}

.real-show .yt-group h3 .month-count { margin-inline-start: .5rem; }

/* ——— Motion: one entrance per view, people that pop up, actions that answer ——— */
/* backwards, not both: a held translate (even 0) would become the containing block of the fixed mini-player. */
#main > div { animation: view-in .42s var(--ease-out) backwards; }
/* Then its first sections arrive one after another, a beat apart, instead of the whole page at once. */
#main > div > :not(.loading) > :nth-child(-n + 6) { animation: view-in .5s var(--ease-out) backwards; }
#main > div > * > :nth-child(2) { animation-delay: .06s; } #main > div > * > :nth-child(3) { animation-delay: .12s; }
#main > div > * > :nth-child(4) { animation-delay: .18s; } #main > div > * > :nth-child(5) { animation-delay: .24s; }
#main > div > * > :nth-child(6) { animation-delay: .3s; }
@keyframes view-in { from { opacity: 0; translate: 0 12px; } }
.button:active { transform: translateY(1px) scale(.97); }
.cover-art { will-change: transform; }

/* ——— El muro de la comunidad ——— */
.wall { display: grid; gap: 1.25rem; }
.wall header h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 900; }
.wall header p { color: var(--ink-2); margin-block-start: .3rem; }
.wall-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
.wall-notes li {
  --tone: var(--yellow); display: grid; gap: 1rem; align-content: space-between; min-block-size: 9rem; padding: 1.1rem 1.1rem .9rem;
  border-radius: 6px 6px 14px 6px; background: color-mix(in srgb, var(--tone) 55%, var(--sheet)); box-shadow: var(--lift);
  rotate: calc((var(--i) % 3 - 1) * 1.2deg); animation: note-in .5s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms);
}
.wall-notes li:nth-child(4n+2) { --tone: var(--pink); } .wall-notes li:nth-child(4n+3) { --tone: var(--teal); } .wall-notes li:nth-child(4n+4) { --tone: var(--peach); }
@keyframes note-in { from { opacity: 0; translate: 0 -14px; rotate: -4deg; } }
.wall-notes p { font-weight: 800; font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.wall-notes footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.vote { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; padding: .2rem .4rem .2rem .8rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--sheet); font: inherit; font-weight: 850; color: var(--ink); cursor: pointer; transition: transform .15s var(--ease-out), background .15s; }
.vote b { display: grid; place-items: center; min-inline-size: 1.6rem; block-size: 1.6rem; border-radius: 999px; background: var(--ink); color: var(--sheet); font-size: .8rem; }
@media (hover: hover) and (pointer: fine) { .vote:hover { transform: scale(1.04); } }
.vote[aria-pressed='true'] { background: var(--ink); color: var(--sheet); } .vote[aria-pressed='true'] b { background: var(--yellow); color: var(--ink); }
.vote[aria-pressed='true'] b { animation: pop .35s var(--ease-out); }
@keyframes pop { 50% { scale: 1.35; } }
.optional { font-weight: 600; font-size: .8rem; color: var(--ink-2); margin-inline-start: .3rem; }

/* ——— Cómo empezó ——— */
.about { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
/* The night in Mendoza on the same lit set as Inicio: navy wash, white headline, the polaroid pinned on top. */
.about-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
  padding: clamp(1.75rem, 5vw, 4rem); border-radius: 22px; overflow: hidden; isolation: isolate; color: white;
  /* Anchored at the top: centred, the set's desk showed as a pale band under the copy. */
  background: var(--set) url('/assets/set-bright.webp') center top / cover no-repeat; box-shadow: var(--lift);
}
.about-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(25 28 64 / .92) 0 45%, rgb(25 28 64 / .55)); }
.about-hero-copy { display: grid; gap: 1.1rem; }
.about h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); font-weight: 900; font-stretch: 108%; line-height: .96; letter-spacing: -.03em; color: white; }
.about .lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); max-inline-size: 42ch; color: color-mix(in oklch, white 88%, var(--set)); }
.about-photo { margin: 0; rotate: 3deg; padding: .75rem .75rem 2.8rem; background: var(--sheet); color: var(--ink); border-radius: 6px; box-shadow: 0 30px 50px -24px rgb(0 0 0 / .7); animation: sticker-in .6s var(--ease-out) both; }
.about-photo img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.about-photo figcaption { margin-block-start: .8rem; font-weight: 850; text-align: center; }
/* An idea on yellow paper, beside the work behind it on the show's teal. */
.about-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: start; gap: clamp(1.5rem, 4vw, 4rem); padding-inline: clamp(0rem, 2vw, 2rem); }
.about-idea { position: relative; display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--yellow); border-radius: 6px 14px 14px 6px; rotate: -2deg; box-shadow: var(--lift); }
.about-idea::before { content: ''; position: absolute; inset-block-start: -.5rem; inset-inline-start: 35%; inline-size: 30%; block-size: 1.2rem; background: var(--pink); rotate: 4deg; }
.about-story h2, .about-credits h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
.about-story p { font-size: 1.08rem; line-height: 1.6; max-inline-size: 55ch; }
.about-process { display: grid; justify-items: start; gap: 1rem; margin-block-start: clamp(2rem, 6vw, 5rem); padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--teal); border-radius: 22px; }
.about-process .button { margin-block-start: .5rem; }
@media (max-width: 800px) {
  .about-story { grid-template-columns: minmax(0, 1fr); padding-inline: .5rem; gap: 2rem; }
  .about-process { margin-block-start: 0; }
}
.about-credits { display: grid; gap: .9rem; justify-items: start; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 22px; background: var(--pink); box-shadow: var(--lift); }
.about-credits p { font-size: 1.08rem; line-height: 1.6; max-inline-size: 70ch; }
/* The promises as rubber stamps, held right beside the text (pushed to the card's far edge they left a hole beside it on
   a wide screen); under the text when the card is narrow. */
.about-credits { grid-template-columns: minmax(0, 46rem) minmax(max-content, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); }
.about-credits > :not(.about-stamps) { grid-column: 1; }
.about-stamps { grid-column: 2; grid-row: 1 / span 3; place-self: center start; display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.about-stamps li { padding: .6rem 1.3rem; border: 3px solid var(--ink); border-radius: 8px; font-weight: 900; font-size: clamp(1.05rem, .8rem + .55vw, 1.4rem); text-transform: uppercase; font-stretch: 110%; letter-spacing: .03em; text-align: center; rotate: -4deg; background: color-mix(in oklch, white 30%, var(--peach)); }
.about-stamps li:nth-child(2) { rotate: 3deg; translate: .8rem 0; background: var(--sheet); } .about-stamps li:nth-child(3) { rotate: -2deg; background: var(--yellow); }
@media (max-width: 700px) { .about-credits { grid-template-columns: 1fr; } .about-stamps { grid-column: 1; grid-row: auto; display: flex; flex-wrap: wrap; } }
.about-turn .signature { margin-block-start: .8rem; }
.signature { font-weight: 900; font-size: 1.6rem; rotate: -3deg; inline-size: fit-content; }
@media (max-width: 700px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero { border-radius: 0; margin-inline: calc(var(--gutter) * -1); margin-block-start: calc(clamp(1.25rem, 3vw, 2.25rem) * -1); }
  .about-photo { rotate: -1.5deg; }
}



/* ——— Programas que se recorren a mano ——— */
.yt-marquee {
  overflow-x: auto; margin-inline: calc(50% - 50vw); padding-block: .5rem 1rem;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scroll-padding-inline: max(var(--gutter), (100vw - var(--content-max)) / 2 + var(--gutter));
}
.yt-track { display: flex; gap: 1rem; inline-size: max-content; padding-inline: max(var(--gutter), (100vw - var(--content-max)) / 2 + var(--gutter)); }
.yt-track .yt-card { inline-size: clamp(14rem, 18vw, 18.5rem); flex: none; scroll-snap-align: start; }
.yt-badge svg { inline-size: .8em; block-size: .8em; }

/* ——— Reproductor de YouTube ——— */
.video-player { inline-size: min(68rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 18px; background: var(--ink); color: var(--sheet); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8); }
.video-player::backdrop { background: rgb(20 22 50 / .78); backdrop-filter: blur(6px); }
.video-player[open] { animation: player-in .35s var(--ease-out); }
@keyframes player-in { from { opacity: 0; scale: .96; } }
.video-head { display: flex; align-items: center; gap: .75rem; padding: .7rem .7rem .7rem 1.2rem; }
.video-head strong { flex: 1; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-head .button.quiet { color: color-mix(in oklab, var(--sheet) 80%, var(--ink)); }
.video-head .button.quiet:hover { background: rgb(255 255 255 / .1); color: white; }
.video-head .button:not(.quiet) { inline-size: 2.75rem; padding: 0; }
.video-frame { aspect-ratio: 16 / 9; background: black; }
.video-frame iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

.cover-art[data-loading] { opacity: 0; }


/* Qué pasó en el programa: the cover plays the whole show, the timeline plays each scene at its second. */
.prog { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); max-inline-size: 84rem; }
.prog-body { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); align-items: start; }
@media (min-width: 1080px) { .prog-body { grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); }
  .prog-side { position: sticky; inset-block-start: calc(var(--bar-h) + 1.2rem); } }
.prog-side { display: grid; gap: 1.1rem; }
.prog-side > section { padding: 1.15rem 1.25rem 1.25rem; border-radius: 12px; background: var(--sheet); box-shadow: var(--lift); }
.prog-side h2 { font-size: 1.2rem; font-weight: 850; letter-spacing: -.01em; }
.prog-best ol { display: grid; list-style: none; margin-block-start: .5rem; }
.prog-best li + li { border-block-start: 1px dashed var(--line); }
.prog-best a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .75rem; padding-block: .7rem; color: var(--ink); text-decoration: none; }
.prog-best-time { grid-row: span 2; align-self: start; display: inline-flex; align-items: center; gap: .3rem; min-block-size: 2.75rem; padding-inline: .7rem; border-radius: 999px; background: var(--yellow); font-weight: 850; }
.prog-best-time svg { inline-size: .8rem; block-size: .8rem; }
.prog-best b { font-weight: 800; line-height: 1.3; padding-block-start: .55rem; }
.prog-best a > span:last-child { color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .prog-best a:hover .prog-best-time { background: var(--ink); color: var(--sheet); } }
.prog-best a:focus-visible .prog-best-time { background: var(--ink); color: var(--sheet); }
.prog-ask p { margin-block-start: .45rem; color: var(--ink-2); line-height: 1.5; }
.prog-ask-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-block-start: .9rem !important; }
.prog-head { display: grid; gap: 1.1rem; }
@media (min-width: 800px) { .prog-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
/* Wide, the header shares the body's columns: the title opens the reading column and the cover heads the side rail, so
   a short title no longer leaves a hole above it beside a tall cover. */
@media (min-width: 1080px) {
  .prog-head { grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); column-gap: clamp(1.8rem, 4vw, 2.6rem); align-items: center; }
  .prog-head > .prog-cover-wrap { grid-area: 1 / 2; }
}
.prog-cover { position: relative; display: block; overflow: clip; border-radius: 14px; background: var(--ink); box-shadow: var(--lift); aspect-ratio: 16 / 9; }
.prog-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.prog-play { position: absolute; inset: .8rem .8rem auto auto; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem .6rem .8rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 850; }
.prog-play svg { inline-size: 1.1rem; block-size: 1.1rem; }
.prog-meta { margin-block-start: .6rem; color: var(--ink-2); font-weight: 700; }
/* YouTube titles arrive in capitals; set narrower and smaller so they read as the show's caption, not a shout. */
.prog-head h1 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); font-stretch: 88%; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.prog-voices, .prog-moments { display: grid; gap: .8rem; }
.prog-summary { max-inline-size: 62ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; text-wrap: pretty; }
.prog-bar { display: flex; gap: 3px; block-size: 1.1rem; border-radius: 999px; overflow: hidden; }
.prog-bar span { background: var(--cap); min-inline-size: 4px; }
.prog-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; }
.prog-legend li { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; }
.prog-legend li::before { content: ''; inline-size: .8rem; block-size: .8rem; border-radius: 3px; background: var(--cap); }
.prog-legend a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--ink); }
.prog-legend .tc { color: var(--ink-2); font-weight: 700; }
.prog-timeline { display: grid; list-style: none; }
.prog-star { display: inline-flex; align-items: center; gap: .3rem; margin-block-end: .35rem; padding: .12rem .6rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: .8rem; font-weight: 800; letter-spacing: .01em; }
.prog-timeline li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .9rem; padding-block: .9rem; border-block-start: 1px solid var(--line); }
.prog-time { align-self: start; display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: .35rem; min-block-size: 2.75rem; padding-inline: .6rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 850; text-decoration: none; }
.prog-time svg { inline-size: .85rem; block-size: .85rem; flex: none; }
.prog-time:focus-visible { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .prog-time:hover { background: var(--ink); color: var(--paper); } }
@media (prefers-reduced-motion: no-preference) { .prog-time { transition: scale 160ms var(--ease-out); } .prog-time:active { scale: .97; } }
/* Scene titles are the digest's own lines, some a full sentence: a lighter weight keeps a dozen of them readable. */
.prog-timeline h3 { font-size: 1.05rem; font-weight: 760; line-height: 1.3; text-wrap: pretty; }
/* The title's first line sits on the pill's label: (2.75rem pill - 1.05rem × 1.3 line) / 2. */
.prog-timeline li > div { padding-block-start: calc((2.75rem - 1.05rem * 1.3) / 2); }
.prog-timeline p { margin-block-start: .25rem; line-height: 1.5; color: var(--ink-2); }
.prog-more > summary { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 850; cursor: pointer; }
.prog-cover-wrap { isolation: isolate; }
.prog-cover-wrap { position: relative; }
.prog-cover-wrap > .prog-cover { z-index: 1; }
/* Un Churrito, the origin: the summer show's own churro waves from the band's side. */
.historia .page-head { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
/* The list is the container: a stage's body cannot query its own width. */
.eras { display: grid; container-type: inline-size; }

/* One stage: its number on the rail, then the sheet and the cards. The rail is the line that runs between numbers. */
.era { --rail: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: clamp(.6rem, 2vw, 1.5rem); }
.era::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: calc(var(--rail) / 2 - 1.5px); inline-size: 3px; border-radius: 2px; background: var(--ink); opacity: .85; }
.era:first-child::before { inset-block-start: 1.4rem; }
.era:last-child::before { inset-block-end: auto; block-size: 1.4rem; }
.era-mark { position: relative; display: flex; justify-content: center; padding-block-start: .4rem; }
.era-n { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 8px; background: var(--era); box-shadow: 0 0 0 4px var(--paper); font-weight: 900; font-size: 1.25rem; rotate: -4deg; }
.era:nth-child(even) .era-n { rotate: 3deg; }

.era-body { display: grid; gap: 1rem; padding-block-end: clamp(2.25rem, 5vw, 3.5rem); }
/* The sheet in the stage's colour: when, what, and the sagas born there. Navy ink on every tint passes 4.5:1. */
.era-head { position: relative; display: grid; gap: .55rem; align-content: start; padding: clamp(1.1rem, 2.5vw, 1.6rem); border-radius: 18px; background: var(--era); box-shadow: var(--lift); }
.era-when { justify-self: start; padding: .2rem .65rem; border-radius: 6px; background: var(--ink); color: var(--sheet); font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; }
.era-head h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 900; font-stretch: 106%; line-height: 1.05; }
.era-text { max-inline-size: 52ch; font-size: 1.02rem; line-height: 1.55; }
.era-starts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; margin-block-start: .2rem; }
.era-starts > span { font-weight: 800; font-size: .85rem; }
.era-starts .chip { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: .95rem; text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .era-starts .chip:hover { background: var(--ink); color: var(--sheet); } }
/* A sticker slapped on the sheet's corner, when the stage has a drawn one. */
.era-sticker { position: absolute; inset: -2.2rem .4rem auto auto; inline-size: clamp(4.2rem, 3rem + 4vw, 6rem); aspect-ratio: 1; rotate: 7deg; filter: drop-shadow(0 4px 6px rgb(35 38 79 / .25)); pointer-events: none; }
.era-sticker img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.era-head:has(.era-sticker) h2 { margin-inline-end: clamp(3.6rem, 2.4rem + 4vw, 5.4rem); }

.era-cards { --cols: 3; }
.era-all { justify-self: start; display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 800; }

/* Wide: the sheet beside its three programmes, the link under the sheet. */
@container (min-width: 60rem) {
  .era-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; align-items: start; column-gap: clamp(1.25rem, 2.5vw, 2rem); }
  .era-head { grid-column: 1; grid-row: 1; }
  .era-cards { grid-column: 2; grid-row: 1 / span 2; }
  .era-all { grid-column: 1; grid-row: 2; }
}
/* Phone: the three programmes scroll sideways like Inicio's shelves; the next card's edge shows there is more. */
@container (max-width: 43.99rem) {
  .era-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    /* Room for the 3 px focus ring (offset 3 px), which the scroller would otherwise clip. */
    padding: .5rem .5rem .75rem; margin: -.5rem -.5rem -.25rem; scroll-padding-inline: .5rem; }
  .era-cards > * { scroll-snap-align: start; }
}