/* Inicio (home.js): the hero, the featured episode, how an episode is made, the calls. */
/* ——— Inicio ——— */
.home { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
/* Every section of Inicio opens with the same size of heading; the hero and the episode title are the larger voices. */
.home :is(.steps, .yt-shelf, .wall) h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem); font-weight: 900; }
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: end; gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--set) url('/assets/set-bright.webp') center top / cover no-repeat; color: var(--sheet); box-shadow: var(--lift);
}
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(25 28 64 / .88) 0 34%, rgb(25 28 64 / .35) 62%, transparent); }
.hero-copy { display: grid; gap: 1.1rem; align-self: center; max-inline-size: 34rem; }
.hero-show { inline-size: clamp(8rem, 14vw, 12rem); rotate: -5deg; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .4)); }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.9rem); color: white; }
.hero p { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); color: color-mix(in srgb, white 88%, var(--set)); max-inline-size: 44ch; }
.hero .button:not(.primary) { background: transparent; color: white; border-color: white; }
.hero .button:not(.primary):hover { background: white; color: var(--ink); }
.hero .button.primary { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.hero .button.primary:hover { background: var(--pink); border-color: var(--pink); }
/* The table runs off the right edge and sits on the bottom one, like a camera framing the desk. */
.hero-set { position: relative; align-self: end; margin-block-end: calc(clamp(1.5rem, 4vw, 3.5rem) * -1); margin-inline-end: calc(clamp(1.5rem, 4vw, 3.5rem) * -1); }
.hero-body { filter: drop-shadow(0 14px 22px rgb(0 0 0 / .35)); }
/* Each plate sits under its person's head centre in the group image. */
.hero-names { position: absolute; inset-inline: 0; inset-block-end: 1.2rem; pointer-events: none; }
.hero-names b { position: absolute; inset-block-end: 0; inset-inline-start: var(--x); translate: -50% 0; }
.hero-names b {
  padding: .2rem .65rem; border-radius: 5px; background: var(--cap); color: var(--ink);
  font-weight: 900; font-size: .9rem; text-transform: uppercase; font-stretch: 110%; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .45);
}
.feature { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 14px; background: var(--sheet); box-shadow: var(--lift); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
.feature-cover { display: block; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .feature-cover:hover .cover-art { transform: translateY(-3px) rotate(-.4deg); }
}
.feature-copy { display: grid; gap: .8rem; align-content: center; }
.feature-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.feature-cast { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; font-weight: 750; color: var(--ink-2); }
.cast-face { display: block; inline-size: 2.6rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--cap); box-shadow: 0 0 0 3px var(--paper); }
.cast-face + .cast-face { margin-inline-start: -.85rem; }
.cast-face img { inline-size: 100%; block-size: auto; translate: 0 8%; }
/* Off-mic production has no drawing: its initial on the group colour, centred like a seat badge. */
.cast-face:has(.monogram) { display: grid; place-items: center; font-weight: 900; color: var(--ink); }
.feature-blocks { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; counter-reset: block; }
.feature-blocks li { display: flex; gap: .6rem; align-items: baseline; font-weight: 700; counter-increment: block; }
.feature-blocks li::before { content: counter(block); display: grid; place-items: center; flex: none; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 6px; background: var(--ink); color: var(--sheet); font-size: .78rem; font-weight: 900; }
.steps { display: grid; gap: 1.25rem; }
.steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: 1rem; counter-reset: step; align-items: stretch; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.4rem; border-radius: 14px; background: var(--sheet); box-shadow: var(--lift); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 8px; margin-block-end: .3rem;
  font-weight: 900; font-size: 1.3rem; background: var(--step); rotate: -4deg;
}
.steps li:nth-child(1) { --step: var(--teal); } .steps li:nth-child(2) { --step: var(--pink); } .steps li:nth-child(3) { --step: var(--yellow); } .steps li:nth-child(4) { --step: var(--peach); }
.steps li:nth-child(5) { --step: var(--set); }
.steps li a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 800; }
.steps p { color: var(--ink-2); }
.steps li > p { font-size: .95rem; line-height: 1.5; }
.step-art { margin-block-start: auto; padding-block-start: .5rem; }

/* The person who speaks, as on the transcripts: their colour, their name. */
.step-who { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding: .1rem .6rem; border-radius: 6px; background: var(--cap); font-weight: 850; font-size: .85rem; }

/* 1 · A transcript line: the words in quotes, who said them and the clock that opens the moment. */
.step-said { display: grid; gap: .6rem; margin-inline: 0; }
.step-said blockquote { margin: 0; padding: .7rem .85rem; border-radius: 10px; background: var(--paper); font-weight: 650; font-size: .95rem; line-height: 1.4; text-wrap: pretty; }
.step-said blockquote::before { content: '«'; } .step-said blockquote::after { content: '»'; }
.step-said-from { font-size: .8rem; font-weight: 700; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: clip; }
.step-said figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.step-said .play-at { min-block-size: 2.75rem; }

/* 2 and 4 · A voice: the round button in the person's colour, a label, the bar or the line's own wave. */
.step-voice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .4rem .8rem .4rem .4rem; border-radius: 999px; background: var(--paper); margin-block-start: auto; }
.step-voice.has-wave { grid-template-areas: 'label label label' 'play wave time'; border-radius: 14px; padding: .6rem .8rem .5rem .5rem; row-gap: .35rem; }
.step-voice.has-wave .step-voice-body { display: contents; }
.step-voice.has-wave .step-voice-label { grid-area: label; padding-inline-start: .3rem; }
.step-voice.has-wave .sample-play { grid-area: play; } .step-voice.has-wave .step-wave { grid-area: wave; } .step-voice.has-wave .step-voice-time { grid-area: time; }
/* The profile no longer has its old sample button; keep the approved round control local to these pieces. */
.step-voice .sample-play { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--cap); color: var(--ink); }
.step-voice .sample-play svg { inline-size: 1.2rem; block-size: 1.2rem; }
.step-voice .sample-play:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .step-voice .sample-play:hover { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) { .step-voice .sample-play { transition: scale .16s var(--ease-out); } }
.step-voice-body { display: grid; gap: .3rem; }
.step-voice-label { font-weight: 800; font-size: .85rem; line-height: 1.25; }
.step-voice .sample-track { position: relative; display: block; block-size: .4rem; border-radius: 999px; background: var(--paper-2); overflow: clip; }
.step-voice .sample-track i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; background: var(--ink); border-radius: inherit; }
.step-voice-time { font-weight: 800; font-size: .85rem; color: var(--ink-2); }

/* The wave: drawn once in the person's colour and once in ink, the ink copy uncovered as the line sounds. */
.wave { inline-size: 100%; block-size: 2.25rem; stroke: var(--cap, var(--ink)); stroke-width: 1.8; stroke-linecap: round; }
.step-wave { position: relative; display: block; }
.step-wave .is-heard { position: absolute; inset: 0; stroke: var(--ink); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }

/* 3 · A script line as it sits in the .guion: the name in capitals, the stage direction, the words. */
.step-script { display: grid; gap: .35rem; margin-inline: 0; padding: .75rem .85rem .8rem; border-radius: 10px; background: var(--paper); border-inline-start: 4px solid var(--ink); }
.step-script figcaption { font-size: .8rem; color: var(--ink-2); }
.step-script b { color: var(--ink); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.step-script blockquote { margin: 0; padding: 0; background: none; font-weight: 650; font-size: .95rem; line-height: 1.4; }

/* 5 · The finished mix: the whole episode's level strip on its blocks, and the way in. */
/* `.steps li a` makes step links 44 px inline-flex rows; the mix card is a whole block. */
.steps li a.step-mix { display: grid; align-items: stretch; gap: .45rem; padding: .7rem .85rem .75rem; border-radius: 10px; background: var(--ink); color: var(--sheet); text-decoration: none; --focus-ring: var(--ink); }
.step-mix .wave { block-size: 2.5rem; stroke: var(--sheet); stroke-width: 1.4; }
.step-mix-band { display: flex; gap: 2px; block-size: .35rem; }
.step-mix-band i { flex-basis: 0; border-radius: 2px; }
.step-mix-meta { font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--sheet) 80%, var(--ink)); }
.step-mix-go { display: flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; font-weight: 850; font-size: .92rem; }
.step-mix-go svg { flex: none; }
@media (hover: hover) and (pointer: fine) { .step-mix:hover .step-mix-go { color: var(--yellow); } }

.home-classics { display: grid; gap: clamp(2rem, 4vw, 3rem); }
/* The door to La historia de SFL: the six stages as one ribbon, each as wide as its programmes, numbered as on the page. */
.history-door {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem 1.25rem;
  padding: 1.1rem 1.25rem 1.2rem; border-radius: 14px; background: var(--sheet); box-shadow: var(--lift);
  color: var(--ink); text-decoration: none;
}
.history-door-text { display: grid; gap: .25rem; }
.history-door-text b { font-size: 1.35rem; font-weight: 850; letter-spacing: -.015em; line-height: 1.15; }
.history-door-text span { color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
.history-door > svg { grid-area: 1 / 2; inline-size: 1.6rem; block-size: 1.6rem; stroke-width: 2.4; transition: translate .2s var(--ease-out); }
.history-door-eras { grid-column: 1 / -1; display: flex; gap: 3px; }
.history-door-eras i {
  flex-basis: 0; min-inline-size: 1.75rem; display: grid; place-items: center; block-size: 2rem; border-radius: 6px;
  background: var(--era); font-style: normal; font-weight: 900; font-size: .85rem;
}
@media (min-width: 700px) {
  .history-door { grid-template-columns: minmax(16rem, auto) minmax(0, 1fr) auto; gap: 2.5rem; padding: 1.25rem 1.5rem; }
  .history-door-text { grid-area: 1 / 1; }
  .history-door-eras { grid-area: 1 / 2; }
  .history-door > svg { grid-area: 1 / 3; }
}
@media (hover: hover) and (pointer: fine) { .history-door:hover > svg { translate: 4px 0; } }
.ask-band {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem 2rem;
  padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 22px; background: var(--yellow); box-shadow: var(--lift);
}
.ask-band h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 900; }
.ask-band p { font-size: 1.1rem; margin-block-start: .4rem; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-set { max-inline-size: 46rem; justify-self: center; inline-size: 100%; margin-inline-end: 0; }
  .hero::before { background: linear-gradient(180deg, rgb(25 28 64 / .9) 0 45%, rgb(25 28 64 / .25)); }
  .feature { grid-template-columns: 1fr; }
  /* Stacked, the section heading leads and the cover follows it, instead of a title, a heading and the same title again. */
  .feature { gap: .8rem; }
  .feature-copy { display: contents; }
  .feature-copy h2 { order: -1; }
  .feature-cover { margin-block-end: .4rem; }
}
@media (max-width: 700px) {
  .hero { min-block-size: 0; padding: 1.5rem 1.25rem 0; border-radius: 0; margin-inline: calc(var(--gutter) * -1); margin-block-start: calc(clamp(1.25rem, 3vw, 2.25rem) * -1); }
  /* Stacked, the set photo would stretch a strip of wall and desk between the copy and the table: the hero stays
     navy and the set shows only behind the mesa, like a window into the studio. */
  .hero { background: var(--ink); }
  .hero::before { display: none; }
  .hero-set {
    --hero-pad-block: 1.25rem; --hero-pad-inline: .5rem;
    margin-inline: -1.25rem; inline-size: auto; max-inline-size: none; margin-block-end: 0; padding: var(--hero-pad-block) var(--hero-pad-inline) 0;
    background: var(--set) url('/assets/set-bright.webp') 50% 30% / cover no-repeat;
  }
  .hero-names { inset-block-end: .6rem; }
  .hero-names b { font-size: .75rem; padding: .15rem .4rem; }
  /* The mesa opens the phone's first screen; the title already names the show, so the sticker stays on wide screens. */
  .hero { padding-block: 0 1.75rem; gap: 1.5rem; }
  .hero-set { order: -1; }
  .hero-show { display: none; }
}
/* ——— El programa de verdad (YouTube) ——— */
/* Inicio spaces its sections with the page gap; the listen page's shelf margin would double it. */
.home > .shelf { margin-block-start: 0; }
/* The table sits down one by one, from the edges toward Ferbo. */
.hero-body { animation: rise-in .7s var(--ease-out) both; animation-delay: calc(.12s + var(--seat-delay, 0s)); }
@keyframes rise-in { from { translate: 0 6%; opacity: 0; } }
.hero-show { animation: sticker-in .6s var(--ease-out) .1s both; }
@keyframes sticker-in { from { scale: .6; rotate: -18deg; opacity: 0; } }
/* The entrance stays first in the list so hovering never restarts it (that replayed the pop from opacity 0). */
@media (hover: hover) and (pointer: fine) { .hero-show:hover { animation: sticker-in .6s var(--ease-out) .1s both, wobble .6s ease-in-out; }
}
@keyframes wobble { 25% { rotate: 1deg; scale: 1.06; } 55% { rotate: -9deg; scale: 1.04; } 80% { rotate: -3deg; } }

/* ——— Armá: the yellow call ——— */
.hero .button.ask-cta, .button.ask-cta { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 0 10px 24px -10px rgb(245 197 24 / .8); }
.hero .button.ask-cta:hover, .button.ask-cta:hover { background: var(--pink); border-color: var(--pink); }
/* Scoped to the band: its paragraph size would otherwise win over the signature's. */
.ask-band .signature { font-weight: 900; font-size: 1.6rem; rotate: -3deg; inline-size: fit-content; }
.about-teaser { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 36rem); justify-content: center; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; padding-block: 1rem; }
.about-teaser img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 60%; border-radius: 8px; border: 6px solid var(--sheet); outline: 4px solid var(--yellow); rotate: -3deg; }
.about-teaser h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 900; }
.about-teaser p { margin-block: .4rem .9rem; color: var(--ink-2); max-inline-size: 56ch; }
@media (max-width: 700px) {
.about-teaser { grid-template-columns: 1fr; }
  /* Rows that would leave one card alone scroll sideways on phones, like a streaming shelf. */
  .steps ol { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block-end: .6rem; scrollbar-width: none; }
  .steps ol > li { scroll-snap-align: start; }
  .about-teaser img { inline-size: 100%; }
}

/* The game is a small pink door leading to Guiños (the door itself is .quiz-door in guinos.css): one card centred like
   the Mendoza polaroid under it, never a banner across the desk. */
.home > .quiz-door { justify-self: center; }

/* ——— Lo que más se vio ———
   A ranking, so each short leans on a giant outlined place number (the TV top-ten grammar); the rail bleeds to the
   screen edges like the programme shelf above it. */
.viewed-track {
  display: flex; gap: .25rem; margin: 0 calc(50% - 50vw); padding-block: .5rem 1rem; list-style: none;
  padding-inline: max(var(--gutter), (100vw - var(--content-max)) / 2 + var(--gutter));
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scroll-padding-inline: max(var(--gutter), (100vw - var(--content-max)) / 2 + var(--gutter));
}
/* The numeral stands on the cover's bottom edge, not the card's: its top margin is the 9:16 cover's height minus its own. */
.viewed-item { --card: clamp(9.5rem, 8rem + 4vw, 12.5rem); flex: none; display: flex; align-items: start; scroll-snap-align: start; }
.viewed-rank {
  --size: clamp(6.5rem, 5rem + 5vw, 9.5rem);
  margin-block-start: calc(var(--card) * 16 / 9 - var(--size) * .78); margin-inline-end: -1.2rem; translate: 0 .06em;
  font-size: var(--size); font-weight: 900; line-height: .78; letter-spacing: -.07em; font-stretch: 110%;
  color: var(--paper); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; user-select: none;
}
.viewed-card { position: relative; display: grid; align-content: start; gap: .45rem; inline-size: var(--card); color: var(--ink); text-decoration: none; }
.viewed-thumb {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--ink);
  box-shadow: var(--lift); transition: transform .25s var(--ease-out);
}
.viewed-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.viewed-count {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--yellow); color: var(--ink); font-size: .78rem; font-weight: 750; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .45);
}
.viewed-count b { font-size: 1.05rem; font-weight: 900; }
.viewed-card strong { font-size: 1rem; line-height: 1.15; text-wrap: balance; }
.viewed-from { display: flex; gap: .3rem; align-items: start; font-size: .82rem; color: var(--ink-2); }
.viewed-from svg { flex: none; inline-size: .8rem; block-size: .8rem; margin-block-start: .2rem; }
.viewed-card:focus-visible { outline-offset: 4px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .viewed-card:hover .viewed-thumb { transform: translateY(-3px) rotate(-.6deg); } }
@media (prefers-reduced-motion: reduce) { .viewed-thumb { transition: none; } }