/* Perfiles (profiles.js): the index of people, one person's page, the crew passes. */
/* ——— Perfiles ——— */
.crew { display: grid; gap: 2.75rem; }
.crew-group { display: grid; gap: 1rem; }
/* Group titles carry the weight of a section: big, with a strip of the group's tape, like a profile's sections. */
.crew-group > h2 { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); font-weight: 900; font-stretch: 108%; letter-spacing: -.02em; }
.crew-group > h2::before { content: ''; flex: none; inline-size: 1.9rem; block-size: .85rem; border-radius: 2px; background: var(--g-tape, var(--yellow)); rotate: -8deg; box-shadow: 0 1px 0 oklch(28.9% .074 278 / .2); }
#crew-produccion { --g-tape: var(--g-produccion); }
#crew-extra { --g-tape: var(--g-extra); }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile, 10.5rem)), 1fr)); }
.tiles[data-size='big'] { --tile: 14rem; }
@media (min-width: 1000px) { .crew .tiles[data-size='big'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.tile .plate small { display: block; font-size: .72em; font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.tile { display: grid; gap: .55rem; text-decoration: none; }
.tile .block {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--cap);
  box-shadow: var(--lift); transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .tile:hover .block { transform: translateY(-4px) rotate(-.8deg); }
}
.tile .block > img { position: absolute; inset: auto 0 0 50%; translate: -50% 0; block-size: 96%; inline-size: auto; max-inline-size: none; }
.tile .block > img[data-kind='photo'] { inset: 12% auto auto 50%; block-size: auto; inline-size: 74%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--sheet); border-radius: 4px; rotate: -3deg; box-shadow: 0 10px 20px -10px rgb(0 0 0 / .5); }
.tile .block .monogram { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-stretch: 112%; font-size: 4.5rem; color: var(--ink); opacity: .85; }
.tile .block .monogram:has(+ .prop) { place-items: start; padding: .4rem .9rem; font-size: 5.5rem; opacity: .22; }
.tile .block > img.prop { inset: 22% 4% auto auto; translate: none; block-size: auto; inline-size: 64%; max-block-size: 60%; object-fit: contain; rotate: -6deg; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .3)); }
.tile:hover .block img.prop { rotate: 3deg; }
.tile .plate {
  position: absolute; inset: auto .6rem .6rem; padding: .35rem .6rem; border-radius: 5px; background: var(--sheet);
  text-align: center; text-transform: uppercase; font-weight: 900; font-stretch: 110%; font-size: 1.05rem; line-height: 1.05; box-shadow: 0 6px 14px -8px rgb(0 0 0 / .5);
}

/* A profile reads top to bottom like the person: the line of who they are, their biography beside their story on
   the show, their classics and moments, and the sources at the foot. One card shape, one play pill. */
/* A sheet on the profile lifts a little more than elsewhere, so it reads against the paper beside the colour blocks. */
.profile { --sheet-lift: 0 1px 0 rgb(35 38 79 / .08), 0 16px 32px -16px rgb(35 38 79 / .6); display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.profile-hero { display: grid; grid-template-columns: minmax(15rem, 30rem) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.profile-portrait .block { aspect-ratio: 1; }
/* The portrait covers the stickers tucked behind it, so it takes the pointer, but stays still under it. */
.profile-portrait { position: relative; z-index: 1; }
.profile-portrait.tile:hover .block { transform: none; }
.profile-portrait.tile:hover .block img.prop { rotate: -6deg; }
.profile-stage { position: relative; min-inline-size: 0; isolation: isolate; }
.profile-intro { display: grid; align-content: center; justify-items: start; gap: 1.1rem; }
.profile-intro h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); text-transform: uppercase; font-stretch: 112%; overflow-wrap: anywhere; }
/* The line is who they are in one breath: it reads as the page's subtitle, in ink, not as a caption. */
.profile-line { max-inline-size: 34ch; font-size: clamp(1.2rem, 1.02rem + .6vw, 1.55rem); font-weight: 750; line-height: 1.32; letter-spacing: -.01em; text-wrap: balance; }
.profile-intro .hero-actions { margin-block: .35rem 0; }
.profile-jumps { display: flex; flex-wrap: wrap; gap: .5rem; }
.profile-jumps .chip { color: inherit; text-decoration: none; }
.profile [id^="p-"] { scroll-margin-block-start: calc(var(--bar-h) + 1rem); }

/* Section heads carry a strip of the person's tape, the one mark that ties every block to them. */
.p-section { display: grid; align-content: start; gap: 1.1rem; min-inline-size: 0; scroll-margin-block-start: calc(var(--bar-h) + 1rem); }
.p-section > h2 { display: flex; align-items: center; gap: .65rem; font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); font-weight: 900; font-stretch: 106%; }
.p-section > h2::before { content: ''; flex: none; inline-size: 1.6rem; block-size: .75rem; border-radius: 2px; background: var(--cap); rotate: -8deg; box-shadow: 0 1px 0 oklch(28.9% .074 278 / .2); }

/* The one way a moment opens: a yellow pill with the programme's clock. 44 px tall; ink when pointed at. */
.play-at {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; padding: .35rem .95rem .35rem .75rem;
  border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 850; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.play-at svg { inline-size: .8rem; block-size: .8rem; fill: currentColor; stroke: none; }
.play-at:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .play-at:hover { background: var(--ink); color: var(--sheet); }
}
@media (prefers-reduced-motion: no-preference) { .play-at { transition: background-color .16s var(--ease-out), color .16s var(--ease-out), scale .16s var(--ease-out); }
}

/* Who they are beside their story on the show: two sheets with the person's tape across the top. A wide screen sets
   them side by side; the biography, the longer read, takes the wider column. */
.p-story { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.p-story:empty { display: none; }
/* The biography keeps a reading measure and the history, shorter, rides along beside it while it is read. */
@media (min-width: 1000px) { .p-story:has(> :nth-child(2)) { grid-template-columns: minmax(0, 44rem) minmax(20rem, 1fr); }
  .p-story:has(> :nth-child(2)) > :nth-child(2) { position: sticky; inset-block-start: calc(var(--bar-h) + 1.25rem); }
}
.p-story > .p-section > :not(h2) { padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: 18px; background: var(--sheet); box-shadow: inset 0 5px 0 var(--cap), var(--sheet-lift); }

/* The biography, as a magazine profile: each theme under a small title, each fact a paragraph with its label run in. */
.bio { display: grid; gap: 1.4rem; }
/* Alone, the biography keeps the same reading measure it has beside a history. */
.p-story > .p-about:only-child { max-inline-size: 44rem; }
.bio-theme { display: grid; gap: .7rem; }
/* «N datos más» reads as one more line of the biography, not a button on the desk. */
.bio-more { display: grid; }
.bio-more[open] { gap: .7rem; }
.bio-more > summary { position: relative; font-weight: 850; font-size: .95rem; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--cap); text-underline-offset: 3px; }
.bio-more[open] > summary { order: 1; margin-block-end: 0; }
@media (hover: hover) and (pointer: fine) { .bio-more > summary:hover { color: var(--ink); text-decoration-color: var(--ink); }
}
.bio-theme + .bio-theme { padding-block-start: 1.3rem; border-block-start: 2px dashed var(--line); }
.bio-theme h3 { justify-self: start; padding: .2rem .6rem .15rem; border-radius: 5px; background: color-mix(in oklab, var(--cap) 50%, var(--sheet)); font-size: .82rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.fact { font-size: 1.04rem; line-height: 1.6; text-wrap: pretty; }
.fact b { font-weight: 850; }

/* The credits as the show rolls them at every close: navy plates, the way the names come up on screen. */
.p-credits { display: grid; gap: .5rem; }
.p-credits > b { font-weight: 850; }
.p-credits ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.credit-plate { padding: .4rem .7rem; border-radius: 6px; background: var(--ink); color: var(--sheet); font-weight: 800; font-size: .92rem; line-height: 1.3; text-wrap: balance; }
.credit-plate.credit-title { font-weight: 900; font-stretch: 112%; letter-spacing: .01em; }

/* Their history: the dashed rules become one line through dated stops. */
.line-list { display: grid; }
.line-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .3rem 1rem; padding-block: 1rem; }
.line-list > li > :not(.play-at) { grid-column: 1; }
.line-list > li > .play-at { grid-column: 2; grid-row: 1 / span 2; }
.line-list p { line-height: 1.5; max-inline-size: 60ch; }
.line-list time { font-weight: 850; font-size: .9rem; color: var(--ink-2); }
.timeline > li { position: relative; padding-inline-start: 1.6rem; }
.timeline > li::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: .35rem; border-inline-start: 2px dashed var(--line); }
.timeline > li::after { content: ''; position: absolute; inset-block-start: 1.3rem; inset-inline-start: 0; inline-size: .85rem; block-size: .85rem; border-radius: 3px; background: var(--cap); rotate: 45deg; box-shadow: 0 0 0 3px var(--sheet); }
.timeline > li:first-child::before { inset-block-start: 1.3rem; }
.timeline > li:last-child::before { block-size: 1.3rem; }
/* Beside the biography the column is narrow: each pill goes under its stop. */
@media (min-width: 1000px) { .p-story:has(> :nth-child(2)) .line-list > li { grid-template-columns: minmax(0, 1fr); }
  .p-story:has(> :nth-child(2)) .line-list > li > .play-at { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Moments, as an episode guide: each programme is a card with its frame across the top and its date on it, then its
   scenes in airing order, each with its pill. Wide screens lay the cards in two columns that fill like a scrapbook
   page, so no card stretches into an empty half. A classic is the same card, tagged, opening its own page. */
.moment-grid { columns: 3 21rem; column-gap: 1.25rem; }
.moment-card {
  container: moment / inline-size; break-inside: avoid; display: grid; gap: .2rem; margin-block-end: 1.25rem;
  padding: .55rem; border-radius: 18px; background: var(--sheet); box-shadow: var(--sheet-lift);
}
.moment-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border-radius: 12px; background: var(--paper-2); }
.moment-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.moment-meta { display: flex; align-items: center; gap: .5rem; padding: .7rem .5rem 0; color: var(--ink-2); font-size: .88rem; font-weight: 800; }
.moment-tag { padding: .15rem .5rem; border-radius: 5px; background: color-mix(in oklab, var(--cap) 50%, var(--sheet)); color: var(--ink); font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .moment-thumb:hover img { scale: 1.03; }
}
@media (prefers-reduced-motion: no-preference) { .moment-thumb img { transition: scale .3s var(--ease-out); }
}
.moment-scenes { display: grid; padding-inline: .5rem; }
.moment-scenes > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem 1.25rem; padding-block: .85rem; }
.moment-scenes > li + li { border-block-start: 2px dashed var(--line); }
.moment-scenes > li > :not(.play-at) { grid-column: 1; }
.moment-scenes > li > .play-at { grid-column: 2; grid-row: 1 / span 2; }
.moment-scenes h3, .classic-body h3 { font-size: 1.15rem; font-weight: 850; line-height: 1.22; text-wrap: balance; }
.moment-scenes p, .classic-body p { line-height: 1.5; text-wrap: pretty; }
.classic-body { display: grid; justify-items: start; gap: .45rem; padding: .5rem .5rem .4rem; }
.classic-at { display: inline-flex; align-items: center; gap: .55rem; min-block-size: 2.75rem; margin-block-start: .35rem; padding: .35rem 1rem; border-radius: 999px; background: var(--ink); color: var(--sheet); font-weight: 850; font-size: .92rem; text-decoration: none; }
.classic-at:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .classic-at:hover { background: var(--yellow); color: var(--ink); }
}
/* A narrow card (a phone) puts each pill under its scene so the text keeps the full width. */
@container moment (max-width: 30rem) {
  .moment-scenes { padding-inline: .35rem; }
  .moment-scenes > li { grid-template-columns: minmax(0, 1fr); }
  .moment-scenes > li > .play-at { grid-column: 1; grid-row: auto; justify-self: start; margin-block-start: .35rem; }
}

/* «Ver N más» opens in place; the extra cards grow in where the browser can animate the height. */
.p-more > summary { justify-self: start; inline-size: fit-content; list-style: none; display: inline-flex; align-items: center; min-block-size: 2.75rem; cursor: pointer; }
.p-more > summary::-webkit-details-marker { display: none; }
.p-more:not([open]) .p-more-close, .p-more[open] .p-more-open { display: none; }
.p-more[open] > summary { margin-block-end: 1.1rem; }
.p-more::details-content { block-size: 0; overflow: clip; }
.p-more[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .p-more::details-content { transition: block-size .32s var(--ease-out), content-visibility .32s allow-discrete; }
}

/* «Fuentes»: a folded sheet at the foot. Open, each article or video with its outlet and date, and what the page
   took from it. */
.p-sources-fold { border-radius: 18px; background: var(--sheet); box-shadow: var(--lift); }
.p-sources-fold > summary { display: flex; align-items: center; gap: .8rem; min-block-size: 3.5rem; padding: .5rem clamp(1.1rem, 2.5vw, 1.75rem); list-style: none; cursor: pointer; border-radius: inherit; }
.p-sources-fold > summary::-webkit-details-marker { display: none; }
.p-sources-fold h2 { font-size: 1.2rem; font-weight: 900; }
.p-sources-count { color: var(--ink-2); font-weight: 750; font-size: .92rem; }
.p-sources-fold > summary::after { content: ''; margin-inline-start: auto; inline-size: .6rem; block-size: .6rem; border: solid var(--ink); border-width: 0 3px 3px 0; rotate: 45deg; translate: 0 -.15rem; }
.p-sources-fold[open] > summary::after { rotate: -135deg; translate: 0 .15rem; }
.source-list { display: grid; padding: 0 clamp(1.1rem, 2.5vw, 1.75rem) 1rem; counter-reset: source; }
.source-list > li { display: grid; gap: .25rem; padding-block: .9rem; border-block-start: 2px dashed var(--line); }
.source-list a { position: relative; justify-self: start; font-weight: 800; line-height: 1.35; text-decoration-thickness: 2px; text-decoration-color: var(--cap); text-underline-offset: 3px; text-wrap: pretty; }
/* A title link is one line of text tall; its touch area reaches 44 px without moving the layout. */
.source-list a::after { content: ''; position: absolute; inset: -.7rem -.3rem; }
.source-meta { color: var(--ink-2); font-size: .85rem; font-weight: 750; }
.source-says { font-size: .92rem; line-height: 1.45; }
.source-says span { color: var(--ink-2); font-weight: 750; }
@media (hover: hover) and (pointer: fine) { .source-list a:hover { text-decoration-color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) { .p-sources-fold > summary::after { transition: rotate .2s var(--ease-out), translate .2s var(--ease-out); }
}

/* Crew off the table: one compact row each, their face or the tool of their job on their group's tint. */
.crew-title { margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
/* ——— Credenciales del equipo ——— */
/* Everyone off the table wears a backstage pass on their colour: the SFL band, a punched lanyard slot, their face
   (or their tool when the cameras never caught them), their name and their job. */
.passes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
.pass {
  position: relative; display: grid; grid-template-rows: auto 7.5rem auto auto; align-content: start; gap: .35rem; justify-items: center; padding: 0 .9rem 1rem;
  border-radius: 14px; background: var(--sheet); box-shadow: var(--lift); text-decoration: none; text-align: center; overflow: clip;
}
/* The lanyard slot punched above the band. */
.pass::before { content: ''; position: absolute; inset-block-start: .45rem; inset-inline-start: 50%; translate: -50% 0; inline-size: 2.2rem; block-size: .45rem; border-radius: 999px; background: var(--paper); z-index: 1; }
.pass-band { justify-self: stretch; display: flex; justify-content: center; align-items: baseline; gap: .4rem; margin-inline: -.9rem; padding: 1.35rem .9rem .5rem; background: var(--cap); font-weight: 750; font-size: .82rem; }
.pass-band span { font-weight: 900; font-stretch: 112%; }
.pass-art { display: grid; place-items: center; inline-size: 7rem; block-size: 7rem; margin-block-start: .4rem; border-radius: 50%; background: color-mix(in oklab, var(--cap) 45%, var(--sheet)); overflow: clip; }
.pass-art img { inline-size: 78%; block-size: 78%; object-fit: contain; rotate: -6deg; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .25)); }
/* A drawn teammate is framed head and shoulders, like the photo on a real pass, not shrunk whole into the badge. */
.pass-art:has(img[data-kind='cutout']) { place-items: start center; }
.pass-art img[data-kind='cutout'] { inline-size: 170%; block-size: auto; max-inline-size: none; margin-block-start: -6%; rotate: none; filter: none; }
.pass-art img[data-kind='photo'] { inline-size: 100%; block-size: 100%; object-fit: cover; rotate: none; filter: none; }
.pass strong { margin-block-start: .35rem; font-weight: 900; font-stretch: 110%; font-size: 1.12rem; text-transform: uppercase; line-height: 1.05; }
.pass .role { color: var(--ink-2); font-weight: 650; font-size: .86rem; line-height: 1.3; }
.passes > .pass:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .passes > .pass:nth-child(odd):hover { translate: 0 -4px; rotate: -1.2deg; }
  .passes > .pass:nth-child(even):hover { translate: 0 -4px; rotate: 1.2deg; }
  .passes > .pass:hover .pass-art img:not([data-kind]) { rotate: 4deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .pass { transition: translate .3s var(--ease-out), rotate .3s var(--ease-out), scale .16s var(--ease-out); }
  .pass-art img { transition: rotate .3s var(--ease-out); }
}

@media (max-width: 700px) {
  .profile-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .profile-portrait .block { aspect-ratio: 2 / 1; }
  .profile-intro { gap: .8rem; }
  .profile-intro h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .line-list > li { grid-template-columns: minmax(0, 1fr); }
  .line-list > li > .play-at { grid-column: 1; grid-row: auto; justify-self: start; }
  .tiles { --tile: 9rem; }
  .tiles[data-size='big'] { --tile: 9.5rem; }
  /* Five at the mesa in two columns: the odd one out takes the whole last row as a wide card instead of leaving a hole. */
  .crew .tiles[data-size='big'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew .tiles[data-size='big'] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .crew .tiles[data-size='big'] > :last-child:nth-child(odd) .block { aspect-ratio: 16 / 10; }
  /* Fifteen passes one under another made a 10,000 px list; two to a row keep the crew a wall of badges. */
  .passes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .passes .pass { grid-template-rows: auto 5.9rem auto auto; }
  .passes .pass-art { inline-size: 5.5rem; block-size: 5.5rem; }
  .tile .plate { font-size: .85rem; inset: auto .4rem .4rem; }
}
.tile .block { will-change: transform; }

/* «Sus cositas»: small cards pinned like a fan's scrapbook, each with a strip of the person's tape, slightly askew. */
.cositas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.6rem 1.2rem; padding-block-start: .5rem; }
.cosita { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.25rem 1.1rem 1rem;
  border-radius: 14px; background: var(--sheet); box-shadow: var(--sheet-lift); rotate: var(--tilt, 0deg); }
.cosita::before { content: ''; position: absolute; inset: -.55rem auto auto 50%; inline-size: 4.2rem; block-size: 1.15rem; translate: -50% 0; rotate: calc(var(--tilt, 0deg) * -3);
  background: color-mix(in oklab, var(--cap) 82%, transparent); box-shadow: 0 1px 0 oklch(28.9% .074 278 / .15); }
.cosita h3 { font-size: 1.12rem; font-weight: 900; line-height: 1.15; text-wrap: balance; }
.cosita > p { line-height: 1.45; text-wrap: pretty; }
.cosita-quote { align-self: stretch; padding: .55rem .75rem; border-inline-start: 4px solid var(--cap); border-radius: 4px; background: color-mix(in oklab, var(--cap) 14%, var(--sheet)); }
.cosita-quote p { font-weight: 700; line-height: 1.38; }
.cosita-quote cite { display: block; margin-block-start: .25rem; font-style: normal; font-size: .78rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.cosita .play-at { margin-block-start: auto; }

/* ——— Cómo habla ———
   Their words as speech bubbles in their colour (a tail on the lower left, like a comic balloon); each one plays a turn
   where they said it. The measured habits read as a short list under them. */
.talk-words { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 0; padding: 0; list-style: none; }
.talk-word {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem .6rem;
  border: 2px solid var(--ink); border-radius: 1.4rem; background: color-mix(in srgb, var(--cap) 55%, var(--sheet));
  color: var(--ink); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); font-weight: 850; text-decoration: none;
  box-shadow: 0 3px 0 var(--ink);
}
.talk-word::after {
  content: ''; position: absolute; inset-block-end: -.5rem; inset-inline-start: 1.2rem; inline-size: .85rem; block-size: .85rem;
  border-inline-end: 2px solid var(--ink); border-block-end: 2px solid var(--ink); rotate: 45deg;
  background: color-mix(in srgb, var(--cap) 55%, var(--sheet));
}
.talk-word svg { inline-size: .75rem; block-size: .75rem; fill: currentColor; stroke: none; opacity: .7; }
.talk-word:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) { .talk-word:hover, .talk-word:hover::after { background: var(--cap); } }
.talk-facts { display: grid; gap: .4rem; margin: 1.6rem 0 0; padding-inline-start: 1.1rem; color: var(--ink-2); }
.talk-facts li::marker { color: var(--cap); }

/* ——— Con los chicos ———
   One card per person at the table: their face in their colour leads, then what they are to each other, the words
   that show it and the clock. */
.duos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.duo {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: 1rem;
  border-radius: 14px; background: var(--sheet); box-shadow: var(--lift); border-block-start: 6px solid var(--cap);
}
.duo-face { display: block; inline-size: 4.5rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--cap); }
.duo-face img { inline-size: 100%; block-size: auto; translate: 0 6%; }
.duo-body { display: grid; gap: .45rem; justify-items: start; }
.duo-body h3 { margin: 0; font-size: 1.15rem; }
.duo-body h3 a { color: inherit; text-decoration: none; }
.duo-body p { margin: 0; }
.duo-tag { padding: .15rem .5rem; border-radius: 5px; background: color-mix(in oklab, var(--cap) 50%, var(--sheet)); font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.duo-quote { margin: 0; padding-inline-start: .75rem; border-inline-start: 4px solid var(--cap); font-style: italic; color: var(--ink-2); }