/* AIDEV-NOTE: estilos propios de las páginas de charla (charlas/*.html). La base (paleta, botones,
   frame, menú y pie) está en ../sitio.css (GAMEFEST009-JSK); aquí va lo de charla.
   Para una charla nueva: tools/gen-charla.py (ver su docstring); deja el dia= de la marca cabeza
   (sab|dom: el día que abren "Programa" y el pie) y después se corre python3 armar-parciales.py. */

/* ---------- type ---------- */
h1.big{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,6vw,72px);line-height:.95;margin:14px 0 18px;text-wrap:balance;letter-spacing:.01em}
.big .hl{color:var(--magenta);display:block}
h2,h3{font-family:var(--f-head);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:0}

/* ---------- header de charla ---------- */
.th{background:radial-gradient(ellipse at 75% 0%,#3a1660 0%,var(--ink) 62%);padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,44px);overflow:hidden}
.th .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);align-items:center}
.th .back{display:flex;width:fit-content;gap:8px;font-family:var(--f-pixel);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-decoration:none;margin-bottom:22px}
.th .back:hover{color:var(--sillar)}
.th .eyebrow{color:var(--gold)}
.th .subt{font-family:var(--f-head);font-weight:700;font-size:clamp(21px,2.2vw,28px);text-transform:uppercase;letter-spacing:.03em;line-height:1.1;color:var(--gold);margin:-4px 0 16px;max-width:30ch}
.th .who-line{font-family:var(--f-head);font-weight:700;font-size:clamp(20px,2vw,26px);text-transform:uppercase;letter-spacing:.04em;color:var(--sillar);margin-bottom:18px}
.th .who-line span{color:var(--violet-soft)}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fact{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:2px solid var(--line);background:rgba(23,14,46,.8);min-width:120px}
.fact small{font-family:var(--f-pixel);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fact b{font-family:var(--f-head);font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.th .portrait{padding:10px;width:100%}
.th .portrait img{width:100%;aspect-ratio:400/447;object-fit:cover}
/* escritorio: retrato + botón Compartir apilados en la columna derecha, mismo ancho */
.th-side{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;justify-self:end}
.th-actions{display:flex;flex-wrap:wrap;gap:12px}
.th-side .th-actions .btn{flex:1;justify-content:center}
/* retrato sin foto: iniciales en pixel frame */
.portrait.ini{display:grid;place-items:center;aspect-ratio:400/447;background:radial-gradient(circle at 50% 35%,#2a1455,var(--panel) 70%)}
.portrait.ini span,.bio-head .ini{font-family:var(--f-display);color:var(--magenta);text-shadow:4px 4px 0 var(--violet);line-height:1}
.portrait.ini span{font-size:clamp(64px,9vw,120px)}
@media (max-width:820px){
  /* móvil: volver → retrato chico → título; el retrato grande empujaba todo fuera de la primera pantalla */
  /* fila 1: volver · fila 2: retrato chico + eyebrow · resto a todo el ancho */
  .th .wrap{grid-template-columns:84px 1fr;gap:0 14px;align-items:start}
  .th .wrap > div:first-child,.th-side{display:contents}
  .th .wrap > div:first-child > *{grid-column:1 / -1}
  .th .wrap > div:first-child > .back{grid-row:1;margin-bottom:16px}
  .th .portrait{grid-row:2;grid-column:1;justify-self:start;width:84px;padding:4px}
  .th .th-side > .th-actions{grid-column:1 / -1;margin-top:24px}
  .th .wrap > div:first-child > .eyebrow{grid-row:2;grid-column:2;align-self:center;font-size:13px;line-height:1.6}
  .portrait.ini span{font-size:32px;text-shadow:2px 2px 0 var(--violet)}
  .th h1.big{margin-top:16px}
  .th h1.big{font-size:clamp(34px,11vw,52px)}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fact{min-width:0}
  .fact:nth-child(3){grid-column:span 2}
  .fact b{font-size:17px}
  .th-actions .btn{flex:1;justify-content:center}
}

/* ---------- cuerpo ---------- */
.tb{padding-block:clamp(32px,4vw,52px) clamp(44px,6vw,80px)}
.tb .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);align-items:start}
.tb h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px;color:var(--sillar)}
.tb h2 + p,.tb p + p{margin-top:0}
.tb .block + .block{margin-top:clamp(32px,4vw,48px)}
.tb .block p{color:var(--mute);max-width:64ch}
.tb .block p + p{margin-top:14px}
.tb .block a{color:var(--gold);text-underline-offset:3px}
/* un botón dentro del cuerpo no hereda el dorado de los links: texto oscuro del .btn y aire arriba */
.tb .block a.btn{color:var(--t);margin-top:26px}
/* tarjeta con varios ponentes (bio_full en tools/gen-charla.py): aire entre uno y otro */
.card p + .bio-head{margin-top:20px}
.takeaways{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.takeaways.juegos{gap:14px;padding:6px 0 4px}
/* bloque con viñeta absoluta, no flex: con flex un <b> dentro del ítem se volvía columna aparte */
.takeaways li{position:relative;padding-left:24px;color:var(--mute);max-width:64ch}
.takeaways li::before{content:"▶";position:absolute;left:0;top:.45em;font-family:var(--f-pixel);font-size:12px;line-height:1;color:var(--gold)}
.side{display:grid;gap:22px;position:sticky;top:calc(var(--nav-h) + 20px)}
.card{padding:clamp(18px,2.4vw,26px)}
.card h3{font-size:20px;margin-bottom:12px}
.card p{color:var(--mute);font-size:16px}
.card p + p{margin-top:10px}
.card p a{color:var(--gold);text-underline-offset:3px}
.bio-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.bio-head .ini{width:64px;height:64px;flex:none;display:grid;place-items:center;font-size:24px;text-shadow:2px 2px 0 var(--violet);background:var(--panel-2);border:2px solid var(--line)}
.bio-head img{width:64px;height:64px;object-fit:cover;object-position:50% 20%;border:2px solid var(--line)}
/* redes del ponente, debajo del nombre en la tarjeta de bio */
.bio-links{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.bio-links a{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:5px 10px;border:2px solid var(--line);color:var(--mute)}
.bio-links a:hover{border-color:var(--k,var(--violet-soft));color:var(--sillar);background:var(--panel-2)}
.bio-links svg{width:15px;height:15px;fill:var(--k,currentColor);flex:none}
.bio-links .li{--k:#0a66c2}.bio-links .ig{--k:#e1306c}.bio-links .web{--k:var(--gold)}.bio-links .x{--k:var(--sillar)}.bio-links .yt{--k:#ff0033}.bio-links .tt{--k:#69c9d0}
.bio-head b{display:block;font-family:var(--f-head);font-weight:800;font-size:21px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.bio-head span{font-size:14.5px;color:var(--dim)}
@media (max-width:820px){.tb .wrap{grid-template-columns:1fr}.side{position:static}}

/* ---------- compartir ---------- */
.share{display:flex;flex-wrap:wrap;gap:8px}
.sh{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:9px 13px;border:2px solid var(--line);background:var(--ink-2);color:var(--sillar);cursor:pointer;transition:border-color .15s,background .15s}
.sh:hover{border-color:var(--k,var(--violet-soft));background:var(--panel-2)}
.sh svg{width:18px;height:18px;fill:var(--k,currentColor);flex:none}
.sh.wa{--k:#25d366}.sh.fb{--k:#1877f2}.sh.x{--k:var(--sillar)}.sh.li{--k:#0a66c2}.sh.cp{--k:var(--gold)}.sh.nat{--k:var(--magenta)}.sh.ig{--k:#e1306c}
.sh-tip{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--mute)}
.sh.done{border-color:var(--lime);color:var(--lime)}
.sh.nat[hidden]{display:none}