/* TEDxCórdoba · 15 años
   Archivo editorial en blanco, negro y el rojo de TED, con modo oscuro.
   Una sola familia tipográfica en pesos altos; la línea de tiempo es el único gesto visual. */

:root {
  --bg: #ffffff;
  --surface: #f4f4f2;
  --surface-2: #ffffff;
  --ink: #0b0b0b;
  --mute: #66666b;
  --faint: #a6a6ab;
  --line: rgba(11, 11, 11, .12);
  --red: #e62b1e;
  --red-ink: #c8221a;
  --btn: #0b0b0b;
  --btn-ink: #ffffff;
  --cta: #d0251b;
  --thumb: #111112;
  --sh-hover: 0 2px 4px rgba(0, 0, 0, .06), 0 24px 40px -22px rgba(0, 0, 0, .38);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --head-h: 68px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c; --surface: #151517; --surface-2: #1d1d20; --ink: #f2f2f2; --mute: #a2a2a8; --faint: #66666c;
    --line: rgba(255, 255, 255, .12); --red: #ff3d30; --red-ink: #ff6257; --btn: #f2f2f2; --btn-ink: #0b0b0b; --thumb: #242427;
    --sh-hover: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 44px -22px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --surface: #151517; --surface-2: #1d1d20; --ink: #f2f2f2; --mute: #a2a2a8; --faint: #66666c;
  --line: rgba(255, 255, 255, .12); --red: #ff3d30; --red-ink: #ff6257; --btn: #f2f2f2; --btn-ink: #0b0b0b; --thumb: #242427;
  --sh-hover: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 44px -22px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 60; }
html.lock { overflow: hidden; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--btn); color: var(--btn-ink); padding: 10px 14px; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Logos claro / oscuro */
.logo-d { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-l { display: none; }
  :root:not([data-theme="light"]) .logo-d { display: block; }
}
:root[data-theme="dark"] .logo-l { display: none; }
:root[data-theme="dark"] .logo-d { display: block; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); transition: box-shadow .6s var(--ease), background-color .5s var(--ease); }
.top.scrolled { box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--head-h); }
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { position: relative; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; }
.nav a.u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.nav a.u:hover::after { transform: scaleX(1); }
.nav .cta { background: var(--cta); color: #fff; padding: 11px 18px; border-radius: 8px; font-weight: 700; transition: transform .6s var(--ease), filter .4s; }
.nav .cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.theme {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: border-color .4s, transform .6s var(--ease);
}
.theme:hover { border-color: var(--ink); transform: rotate(-18deg); }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme .i-moon { display: none; }
}
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="dark"] .theme .i-moon { display: none; }
html:not(.js) .theme { display: none; }
@media (max-width: 760px) {
  /* En celular el menú baja a una segunda fila. La altura del encabezado deja
     de ser fija: con el alto de antes el logo quedaba cortado contra el borde.
     --head-h se sube en la misma medida, porque de ella cuelgan la posición de
     la barra del buscador y el salto a cada edición. */
  :root { --head-h: 88px; }
  .top .wrap { flex-wrap: wrap; row-gap: 5px; height: auto; min-height: var(--head-h);
               padding-top: 12px; padding-bottom: 8px; align-content: center; }
  .nav { gap: 12px; order: 3; width: 100%; justify-content: flex-start; padding-bottom: 2px; }
  .nav .theme { order: -1; margin-left: auto; position: absolute; top: 10px; right: var(--gutter, 18px); }
  .nav a.u { font-size: .86rem; }
  .brand img { height: 25px; }
  .nav .cta { padding: 10px 14px; font-size: .9rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 6vw, 72px); overflow: hidden; }
.hero h1 {
  font-weight: 900; font-size: clamp(2.6rem, 11.5vw, 8.4rem); line-height: .86; letter-spacing: -.05em;
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .ln > span { display: block; animation: lift 1.3s var(--ease) both; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .1s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .2s; }
.hero h1 .r { color: var(--red); }
@keyframes lift { from { transform: translateY(108%); } to { transform: none; } }
.lead { margin-top: 30px; max-width: 34ch; font-size: clamp(1.12rem, 2.1vw, 1.38rem); line-height: 1.4; color: var(--mute); animation: fade 1.2s .45s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Línea de tiempo animada del inicio */
.htl { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.htl__cap { font-size: .85rem; font-weight: 600; color: var(--mute); margin-bottom: 14px; animation: fade 1s .6s var(--ease) both; }
.htl__nodes { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); }
.htl__body { position: relative; }
.htl__track { position: absolute; left: calc(100% / 32); right: calc(100% / 32); top: 77px; height: 2px; background: var(--line); border-radius: 2px; }
.htl__prog { position: absolute; inset: 0; background: var(--ink); border-radius: 2px; transform-origin: left; animation: grow 3.2s cubic-bezier(.65, 0, .35, 1) .9s both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.htl__nodes li { position: relative; z-index: 1; display: flex; justify-content: center; }
.htl__nodes a { display: flex; flex-direction: column; align-items: center; text-decoration: none; min-width: 0; padding-bottom: 4px; }
.htl__barbox { height: 64px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.htl__bar { width: 6px; height: calc(var(--v) * 64px); border-radius: 3px 3px 0 0; background: var(--faint); transform-origin: bottom; animation: bar .9s var(--ease) both; animation-delay: var(--d); transition: background .4s; }
@keyframes bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.htl__dot {
  margin-top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--faint); background: var(--bg);
  animation: reach .5s var(--ease) both; animation-delay: var(--d); transition: transform .5s var(--ease);
}
@keyframes reach { from { background: var(--bg); border-color: var(--faint); transform: scale(1); } 60% { transform: scale(1.5); } to { background: var(--ink); border-color: var(--ink); transform: scale(1); } }
.htl__y { margin-top: 10px; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mute); animation: fade .7s var(--ease) both; animation-delay: var(--d); white-space: nowrap; transition: color .4s; }
.htl__nodes a:hover .htl__bar { background: var(--red); }
.htl__nodes a:hover .htl__y { color: var(--ink); }
.htl__nodes a:hover .htl__dot { transform: scale(1.35); }
.htl__nodes .next .htl__dot { width: 18px; height: 18px; margin-top: 5px; animation-name: reachNext; }
@keyframes reachNext { from { background: var(--bg); border-color: var(--faint); } to { background: var(--red); border-color: var(--red); } }
.htl__nodes .next .htl__dot::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; animation: pulse 2.4s ease-out 4.4s infinite; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(230, 43, 30, .5); } to { box-shadow: 0 0 0 16px rgba(230, 43, 30, 0); } }
.htl__nodes .next .htl__y { color: var(--red-ink); }
.htl__note { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); animation: fade .7s var(--ease) both; animation-delay: var(--d); }
@media (max-width: 760px) {
  .htl__bar { width: 4px; }
  .htl__dot { width: 9px; height: 9px; margin-top: 9px; border-width: 1.5px; }
  .htl__nodes .next .htl__dot { width: 14px; height: 14px; margin-top: 7px; }
  .htl__nodes li:not(.lbl) .htl__y { visibility: hidden; }
  .htl__y { font-size: .72rem; }
}

/* ---------- Números ---------- */
.stats { border-block: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { padding: 34px 20px 38px 24px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n {
  display: flex; align-items: flex-end; font-weight: 800; font-size: clamp(2.3rem, 4.5vw, 4.1rem); line-height: 1.06;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat__n .plus { color: var(--red); }
.stat__n .v { display: inline-flex; }
.odo { display: inline-block; height: 1.06em; overflow: hidden; }
.odo__in { display: flex; flex-direction: column; transition: transform 2.6s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--dl, 0s); }
.odo__in > span { display: block; height: 1.06em; }
.go .odo__in { transform: translateY(calc(var(--t) * -1.06em)); }
.stat__l { margin-top: 12px; max-width: 19ch; color: var(--mute); font-size: .95rem; line-height: 1.32; }
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat:first-child { padding: 24px 16px 28px 0; border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .stat:first-child, .stat:nth-child(2) { border-top: 0; }
  .stat:last-child { grid-column: 1 / -1; }
}

/* ---------- Archivo ---------- */
.archive { padding-block: clamp(72px, 10vw, 136px) 24px; }
.sec-title { font-weight: 900; font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: .9; letter-spacing: -.055em; }

/* Barra de búsqueda y orden */
/* El buscador vive fuera del hero y el sticky va en este contenedor, no en la
   barra: un elemento pegajoso solo puede viajar dentro de su padre, así que el
   padre tiene que ser alto. Siendo hijo directo del <main>, lo acompaña por
   toda la página. Va a todo ancho para tapar lo que pasa por debajo. */
.toolbar {
  position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); z-index: 6;
  background: var(--bg); transition: background-color .5s var(--ease);
  /* hilo inferior: separa la barra de lo que le pasa por debajo al quedar fija */
  box-shadow: 0 1px 0 var(--line);
}
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-top: clamp(28px, 4vw, 44px); padding-block: 12px; background: var(--bg);
  transition: background-color .5s var(--ease);
}
html:not(.js) .tools { display: none; }
.search { position: relative; flex: 1 1 320px; min-width: 0; }
.search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input {
  width: 100%; height: 52px; padding: 0 48px 0 46px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; outline: none;
  transition: border-color .4s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
}
.search input::placeholder { color: var(--mute); }
.search input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--line); }
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute; right: 8px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s, background .3s;
}
.search__clear svg { position: static; transform: none; width: 14px; height: 14px; stroke: var(--ink); }
.search.has-q .search__clear { opacity: 1; pointer-events: auto; }
.search__clear:hover { background: var(--line); }
.kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: .75rem; font-weight: 700; color: var(--mute); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; pointer-events: none; transition: opacity .3s; }
.search.has-q .kbd, .search input:focus ~ .kbd { opacity: 0; }
@media (hover: none) { .kbd { display: none; } }

.sort { position: relative; display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.sort__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 9px; background: var(--btn); transition: transform .6s var(--ease), width .6s var(--ease); }
.sort button { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; padding: 11px 16px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--mute); transition: color .4s var(--ease); white-space: nowrap; }
.sort button[aria-pressed="true"] { color: var(--btn-ink); }
@media (max-width: 760px) {
  /* La barra acompaña todo el scroll también en celular, así que va compacta
     para no comerse media pantalla. */
  .tools { position: static; gap: 6px; padding-block: 8px; margin-top: clamp(22px, 4vw, 34px); }
  .sort { width: 100%; padding: 2px; }
  .sort button { flex: 1; padding: 7px 12px; font-size: .84rem; }
  .search input { height: 44px; }
}

/* Resultados del buscador */
.results { display: none; padding-top: 18px; }
.is-search .results { display: block; }
.is-search .tlwrap { display: none; }
.results .talks > li { animation: fade .6s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
.results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                 gap: 10px 18px; margin-bottom: 22px; }
.results__clear {
  flex: 0 0 auto; font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mute); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.results__clear:hover { color: #fff; background: var(--red); border-color: var(--red); }
.results__count { font-weight: 700; font-size: 1.05rem; margin-bottom: 0; }
.results__count span { color: var(--mute); font-weight: 500; }
.results__empty { padding: 40px 0 20px; color: var(--mute); font-size: 1.05rem; max-width: 46ch; }
mark { background: color-mix(in srgb, var(--red) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Línea de tiempo de ediciones */
.tlwrap { position: relative; }
.tl { padding: 22px 0 0 56px; display: grid; gap: 18px; }
.tl__rail, .tl__fill { position: absolute; left: 20px; width: 2px; border-radius: 2px; }
.tl__rail { top: 0; bottom: 0; background: var(--line); }
.tl__fill { top: 0; height: 0; background: var(--red); }
.ed { position: relative; scroll-margin-top: calc(var(--head-h) + 96px); }
.ed::before {
  content: ""; position: absolute; left: -42px; top: 44px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--faint); z-index: 1;
  transition: background .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease);
}
.ed.passed::before { background: var(--red); border-color: var(--red); transform: scale(1.12); }
.ed.next.passed::before { animation: pulse 2.4s ease-out infinite; }
@media (max-width: 760px) {
  .tl { padding-left: 28px; gap: 14px; }
  .tl__rail, .tl__fill { left: 6px; }
  .ed::before { left: -28px; top: 30px; width: 12px; height: 12px; }
}

.ed__card { background: var(--surface); border-radius: 18px; padding: clamp(22px, 3vw, 36px); transition: background-color .5s var(--ease); }
.ed__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px 40px; }
.ed__head.has-kv { grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); }
.ed__year { font-weight: 900; font-size: clamp(4rem, 9vw, 7.8rem); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.ed.next .ed__year { color: var(--red); }
.ed__meta { min-width: 0; padding-bottom: 2px; }
.ed__ed { font-size: .92rem; font-weight: 600; color: var(--mute); }
.ed__badge { display: table; margin: 0 0 10px; background: var(--cta); color: #fff; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; vertical-align: 1px; }
.ed__theme { margin-top: 6px; font-weight: 800; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.ed__venue { margin-top: 8px; color: var(--mute); font-size: 1rem; line-height: 1.4; max-width: 60ch; }
.kv { align-self: stretch; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.kv img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .ed__head, .ed__head.has-kv { grid-template-columns: minmax(0, 1fr); }
  .kv { max-width: 420px; }
}
.ed__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.ed__note { color: var(--mute); }

/* Pieza de identidad de la edición actual, clicable hacia la landing.
   Con la pieza adentro la columna crece, así que el año deja de alinearse
   abajo (como en el resto de las ediciones) y se mantiene arriba. */
.ed.next .ed__head { align-items: start; }
.ident {
  display: block; position: relative; margin-top: 26px; max-width: 480px;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ident img { display: block; width: 100%; height: auto; }
.ident__go {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 18px; font-weight: 700; font-size: .95rem;
  background: linear-gradient(to top, rgba(10, 8, 12, .92), rgba(10, 8, 12, 0));
}
.ident__go svg { width: 14px; height: 14px; transition: transform .45s var(--ease); }
@media (hover: hover) {
  .ident:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .55); }
  .ident:hover .ident__go svg { transform: translateX(4px); }
}
@media (max-width: 760px) { .ident { max-width: 100%; } }
.toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border: 0; border-radius: 10px;
  background: var(--btn); color: var(--btn-ink); font-weight: 700; font-size: .95rem; padding: 13px 18px;
  transition: transform .6s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.toggle:hover { transform: translateY(-2px); background: var(--cta); color: #fff; }
.toggle .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .8s var(--ease); }
.ed.open .toggle .chev { transform: rotate(-135deg) translate(-2px, -2px); }
html:not(.js) .toggle { display: none; }

.panel { display: grid; grid-template-rows: 1fr; }
.js .panel { grid-template-rows: 0fr; transition: grid-template-rows 1s var(--ease); }
.js .ed.open .panel { grid-template-rows: 1fr; }
.panel__in { min-height: 0; overflow: hidden; }

/* Charlas */
.talks { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 26px 20px; padding: 28px 2px 4px; }
.js .ed .talks > li { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .ed.open .talks > li { opacity: 1; transform: none; transition-delay: calc(min(var(--i, 0), 12) * 50ms + 150ms); }
.talk { display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--thumb); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 20px, rgba(255, 255, 255, .07) 20px 21px); }
.thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #e62b1e; }
.thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), opacity .9s var(--ease); }
.js .thumb img { opacity: 0; }
.js .thumb img.ok { opacity: 1; }
.play { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); transform: scale(.85); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.play svg { width: 12px; height: 12px; margin-left: 2px; fill: #c8221a; }
.talk:hover .thumb { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.talk:hover .thumb img { transform: scale(1.05); }
.talk:hover .play, .talk:focus-visible .play { opacity: 1; transform: none; }
@media (hover: none) { .play { opacity: 1; transform: none; } }
.talk__y { position: absolute; z-index: 2; left: 10px; top: 10px; background: rgba(11, 11, 11, .78); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
/* ===== Línea de tiempo del hero: solo años, atajo a cada edición =====
   Se dibuja sola cuando entra en pantalla (la clase .in la pone el JS). */
.yrs { margin-top: clamp(30px, 5vw, 48px); }
.yrs__rail { position: relative; padding: 2px 0 0; }
@media (max-width: 760px) {
  /* No entran 16 años: se desplaza, y el degradado de la derecha avisa que sigue */
  .yrs__rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
               -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
               mask-image: linear-gradient(to right, #000 86%, transparent); }
  .yrs__rail::-webkit-scrollbar { display: none; }
  .yrs__years { min-width: 600px; padding-right: 26px; }
  .yrs__dot { width: 17px; height: 17px; }
  .yrs__y { font-size: .74rem; }
  .yrs__line { top: 8px; }
}
.yrs__line { position: absolute; left: 7px; right: 7px; top: 9px; height: 2px; background: var(--line); }
.yrs__prog { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.yrs.in .yrs__prog { animation: tl-draw 1.6s var(--ease) .1s forwards; }
@keyframes tl-draw { to { transform: scaleX(1); } }

.yrs__years { position: relative; display: flex; justify-content: space-between;
             list-style: none; margin: 0; padding: 0; }
.yrs__years li { flex: 0 0 auto; }
.yrs__years a { display: grid; justify-items: center; gap: 9px; text-decoration: none;
               color: var(--mute); padding: 0 2px; }
.yrs__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--bg);
           border: 2px solid var(--faint); transform: scale(0);
           transition: background .3s var(--ease), border-color .3s var(--ease); }
.yrs.in .yrs__dot { animation: tl-pop .55s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * .07s); }
@keyframes tl-pop { 0% { transform: scale(0); } 62% { transform: scale(1.4); } 100% { transform: scale(1); } }

.yrs__y { font-size: .8rem; font-weight: 700; letter-spacing: -.01em; opacity: 0; transform: translateY(7px); }
.yrs.in .yrs__y { animation: tl-up .55s var(--ease) forwards; animation-delay: calc(.34s + var(--i) * .07s); }
@keyframes tl-up { to { opacity: 1; transform: none; } }

.yrs__tag { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
           color: var(--red); margin-top: -4px; }
.yrs .is-next .yrs__dot { border-color: var(--red); background: var(--red); }
.yrs.in .is-next .yrs__dot::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--red); animation: tl-latido 2.4s var(--ease) 1.6s infinite;
}
.yrs .is-next a { position: relative; }
@keyframes tl-latido { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

@media (hover: hover) {
  .yrs__years a:hover .yrs__dot { background: var(--red); border-color: var(--red); transform: scale(1.25); }
  .yrs__years a:hover .yrs__y { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .yrs__dot, .yrs__y { animation: none !important; transform: none; opacity: 1; }
  .yrs__prog { transform: scaleX(1); animation: none !important; }
  .yrs.in .is-next .yrs__dot::after { animation: none; opacity: 0; }
}

/* ===== Sección "Explorá por temática": las 8 corrientes desplegadas ===== */
.ramas { padding: clamp(50px, 7vw, 86px) 0 0; }
.ramas__intro { color: var(--mute); max-width: 56ch; margin: clamp(16px, 2vw, 22px) 0 clamp(24px, 3vw, 34px); }
.ramas__grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .ramas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ramas__grid { grid-template-columns: 1fr; } }
.rama {
  display: grid; gap: 4px; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 20px 22px; color: var(--ink);
  transition: border-color .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease);
}
.rama__n { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--red); }
.rama__t { font-size: 1.02rem; font-weight: 700; }
.rama__sub { font-size: .76rem; line-height: 1.5; color: var(--mute); }
@media (hover: hover) {
  .rama:hover { border-color: var(--red); transform: translateY(-3px); }
}
.rama[aria-pressed="true"] { border-color: var(--red); }

/* Clubes TED-Ed: una tarjeta más, pero con su logo en vez del título */
.rama--clubes[aria-expanded="true"] { border-color: var(--red); }
.rama__logo { display: block; margin: 4px 0 2px; }
/* Sin display aquí: la regla que oculta el logo del otro modo tiene que ganar */
.rama__logo img { height: 21px; width: auto; }

/* ===== Clubes TED-Ed ===== */
.clubes { padding: clamp(50px, 7vw, 86px) 0 clamp(20px, 3vw, 36px); }
.clubes__intro { max-width: 62ch; margin: clamp(16px, 2vw, 22px) 0 clamp(26px, 3vw, 36px); color: var(--mute); }
.clubes__intro p + p { margin-top: .8em; }

/* Grandes corrientes: filtros rápidos debajo del buscador */
.corrientes { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
.corriente {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: var(--mute); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.corriente:hover { color: var(--ink); border-color: var(--ink); }
.corriente[aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); }
@media (max-width: 760px) {
  /* En celular se deslizan en una sola fila, para no apilar ocho botones */
  .corrientes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
                mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 24px; }
  .corrientes::-webkit-scrollbar { display: none; }
  .corriente { font-size: .76rem; padding: 6px 12px; }
}

/* La corriente de cada charla: etiqueta chica arriba del título.
   Las temáticas y los términos finos viajan en data-tema y data-detalle,
   sin mostrarse (ver el comentario del archivo de charlas en el HTML). */
.talk__corriente { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.talk__corriente .tag {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px; line-height: 1.25; white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.talk:hover .tag { color: var(--red); border-color: var(--red); }
.talk__corriente + .talk__t { margin-top: 6px; }

.talk__t { margin-top: 8px; font-weight: 700; font-size: 1.02rem; line-height: 1.22; letter-spacing: -.01em; overflow-wrap: anywhere; }
.talk__s { color: var(--mute); font-size: .92rem; line-height: 1.3; }

/* ---------- Revelado ---------- */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Reproductor ---------- */
.player { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .6s var(--ease), visibility 0s .6s; }
.player.open { visibility: visible; opacity: 1; transition: opacity .6s var(--ease), visibility 0s; }
.player__bg { position: absolute; inset: 0; background: rgba(6, 6, 6, .8); }
.player__box { position: relative; width: min(1000px, 100%); background: var(--surface-2); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); transform: translateY(24px) scale(.97); transition: transform .9s var(--ease); }
.player.open .player__box { transform: none; }
.player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 22px 20px; }
.player__meta h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.player__meta p { color: var(--mute); font-size: .95rem; }
.player__meta a { font-weight: 700; font-size: .93rem; }
.player__close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .95); color: #0b0b0b; display: grid; place-items: center; transition: transform .6s var(--ease); }
.player__close:hover { transform: rotate(90deg); }
.player__close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* ---------- Pie ---------- */
.foot { margin-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); padding-block: 40px 52px; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.foot img { height: 34px; width: auto; }
/* Redes: mismos iconos que la landing, en botones redondos */
.foot__links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.foot__links a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink); background: transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
.foot__links a svg { width: 20px; height: 20px; display: block; }
.foot__links a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
.foot__legal { flex-basis: 100%; color: var(--mute); font-size: .88rem; }

/* ---------- Movimiento reducido: solo lo que se repite sin fin ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .htl__nodes .next .htl__dot::after, .ed.next.passed::before { animation: none; }
}

/* Título de Clubes TED-Ed: el logo hace de encabezado */
.clubes__titulo { margin: 0; }
.clubes__titulo img { height: clamp(34px, 5vw, 52px); width: auto; }