/* jlvflores.com, the page CSS of the "laboratorio" look (2026-11-09), built with the Taste Skill kit in
   /assets/ (MIT, assets/LICENSE). The kit carries the system: tokens, grid, sections, buttons, nav,
   footer, cards, motion and moments. This file holds only what the kit asks a page to write itself:
   the collage pieces, the drawn instruments (recording windows, the protocol sheet, the publications
   browser), the section layouts that are this page's own, and the two overrides the
   Content-Security-Policy needs. Every colour comes from the palette in palette.css. */

/* ---------------------------------------------------------------- the Content-Security-Policy
   img-src 'self' refuses the kit's data: URLs, so the two that would load on this page point at
   first-party copies of the same drawings: the dealt ring mark and the pill buttons' chevron. */
.mark[data-mark="ring"] { --mark: url("/img/ui/mark-ring.svg"); }
html[data-buttons="pill"] { --btn-glyph: url("/img/ui/glyph-chevron.svg"); }

/* ---------------------------------------------------------------- the nav
   1024 to 1279: the centred words would reach the name and the button with a Spanish main action, so
   the bar keeps its first two words there; every section is in the footer's columns at every width */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__item--wide { display: none; }
}
/* a phone: the name (22 characters) leaves no room for the main button and the menu button, so the bar
   shows the mark alone and keeps the name for screen readers; the footer sets it large */
.footer .nav__logo.footer__name { white-space: normal; }
@media (max-width: 379px) {
  .nav:not(.is-open) .nav__actions { display: none; }
  .nav:not(.is-open) .nav__toggle { margin-left: auto; }
}
@media (max-width: 639px) {
  .nav .nav__logo { min-width: 44px; min-height: 44px; }
  .nav .nav__logo .nav__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.footer .nav__logo.footer__name { font-size: clamp(30px, 1.71vw + 23.3px, 48px); line-height: 1.05; align-items: baseline; }

/* ---------------------------------------------------------------- the hero (triptych)
   Left: the laboratory's name as the kicker over his name (the h1). Right: the lead, then the one
   large button on the right line, so the third column is words and an action, not a lone button. */
.hero--triptych .hero__kicker { font: 500 13px/1.4 var(--font-mono); letter-spacing: 0.01em; color: var(--accent); align-items: flex-start; }
.hero--triptych .hero__kicker .dot { margin-top: 5px; }
.hero--triptych .hero__kicker + h1 { margin-top: var(--s-4); }
.hero--triptych .hero__cta { flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-6); }
.hero--triptych .hero__cta .hero__lead { margin-top: 0; color: var(--ink); }
@media (min-width: 1280px) {
  .hero--triptych .hero__cta { align-self: center; }
  .hero--triptych .hero__cta .btn { align-self: flex-end; }
}
/* a tablet: the button keeps its own width under the collage (across the screen it reads as a band) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero--triptych .hero__cta .btn { width: auto; }
}
@media (max-width: 639px) {
  .hero--triptych .hero__kicker + h1 { margin-top: var(--s-2); }
  .hero--triptych .hero__cta { align-items: stretch; gap: var(--s-5); }
  .hero--triptych .hero__cta .hero__lead { max-width: none; }
  /* the kicker over the name costs a line: the collage gives back 20px of its least height and 16px of air */
  .hero--triptych .ly-collage { min-height: 280px; margin-block: var(--s-5); }
}
.ly-collage { container-type: inline-size; }
.ly-collage .pc { position: absolute; }
.ly-collage .pc > picture, .ly-collage .pc > picture > img { display: block; width: 100%; height: 100%; }
.ly-collage .pc > picture > img { object-fit: cover; object-position: 50% 30%; }
/* set 1: the portrait, a recording window, the printed reference of the most cited paper */
.pc-portrait { left: 4%; top: 6%; width: 50%; height: 60%; }
.pc-rec { left: 58%; top: 6%; width: 38%; height: 60%; }
.pc-snii { left: 58%; top: 70%; width: 38%; height: 26%; }
.pc-cite { left: 4%; top: 70%; width: 50%; height: 26%; }
/* set 2: the talk in Xicotepec de Juárez */
.pc-charla { left: 4%; top: 6%; width: 56%; height: 39%; }
.pc-charla > img { object-position: 50% 35%; }
.pc-cartel { left: 64%; top: 6%; width: 32%; height: 45%; }
.pc-cartel > img { object-position: 50% 0%; }
.pc-organizadores { left: 4%; top: 49%; width: 56%; height: 47%; }
.pc-organizadores > img { object-position: 50% 45%; }
.pc-ticket { left: 64%; top: 55%; width: 32%; height: 41%; }
/* set 3: the forum */
.pc-ponentes { left: 4%; top: 6%; width: 92%; height: 52%; }
.pc-ponentes > img { object-position: 50% 42%; }
.pc-reconocimiento { left: 4%; top: 62%; width: 44%; height: 34%; }
.pc-reconocimiento > img { object-position: 60% 40%; }
.pc-sede { left: 52%; top: 62%; width: 44%; height: 34%; }

/* the printed pieces: bone paper with ink, the one light thing in the collage */
.ly-collage .pc-cite, .ly-collage .pc-ticket {
  background: var(--p-ink); color: var(--p-bg); padding: 3.4cqw 3.8cqw;
  display: grid; align-content: start; gap: 1.6cqw;
}
.pc-cite .cite__kind, .pc-ticket .ticket__kind { font-size: max(13px, 1.9cqw); line-height: 1.3; color: #444a45; }
.pc-cite .cite__title { font: 500 max(14px, 2.6cqw)/1.3 var(--font-display); letter-spacing: -0.01em; max-width: 58ch; }
.pc-cite .cite__who { font-size: max(13px, 2cqw); line-height: 1.4; color: #353b37; }
.pc-cite .cite__who b { font-weight: 600; color: var(--p-bg); }
.pc-ticket .ticket__title { font: 500 max(15px, 3.2cqw)/1.15 var(--font-display); letter-spacing: -0.015em; padding-right: 9cqw; }
.pc-ticket .ticket__where { font-size: max(13px, 2cqw); line-height: 1.35; color: #353b37; }
@media (max-width: 1279px) { .pc-cite .cite__who { display: none; } }
@media (max-width: 639px) {
  .pc-portrait, .pc-rec { height: 54%; }
  .pc-cite, .pc-snii { top: 63%; height: 33%; }
  .pc-cite .cite__who, .pc-cite .cite__type, .pc-cite .cite__rest, .pc-ticket .ticket__where { display: none; }
  .pc-cite .cite__title { font-size: 13px; line-height: 1.25; }
  .pc-rec .rec__name, .pc-rec .rec__foot, .pc-rec .rec__keys { display: none; }
  .pc-snii .snii__what { display: none; }
}

/* ---------------------------------------------------------------- the drawn windows: their own tokens
   (the hero's collage piece is no kit fragment, so base.css's .ui tokens are not assumed) */
.rec, .sheet, .tools, .path {
  --u-bg: #0e1311; --u-ink: #e3e2da; --u-muted: #a3aaa1;
  --u-line: color-mix(in oklab, #e3e2da 10%, transparent); --u-line-2: color-mix(in oklab, #e3e2da 18%, transparent);
  --u-border: color-mix(in oklab, #e3e2da 14%, transparent);
}

/* ---------------------------------------------------------------- the recording window
   A drawn acquisition window: channel, units, a time scale bar and two traces. Every trace is a
   schematic (the "Esquema" chip in its bar says so, and its accessible name too), never data. */
.rec {
  /* control dim grey, dopamine the bright accent: the two must read apart at a glance */
  --trace-a: color-mix(in oklab, #e3e2da 34%, transparent); --trace-b: #a9dcc8;
  background: var(--u-bg); color: var(--u-ink); border: 1px solid var(--u-border); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; overflow: hidden;
  font-family: var(--font-text);
}
.ly-collage .pc-rec { padding: 2cqw 2.2cqw; gap: 1.4cqw; font-size: max(13px, 2cqw); }
/* the SNII readout: a small instrument card; the pause disc sits on its lower right corner, kept clear */
.ly-collage .pc-snii { background: #0e1311; color: #e3e2da; border: 1px solid color-mix(in oklab, #e3e2da 14%, transparent); padding: 2.4cqw 2.6cqw; display: grid; align-content: start; gap: 0.8cqw; }
.pc-snii .snii__kind { font-size: max(12px, 1.8cqw); line-height: 1.3; color: #a3aaa1; }
.pc-snii .snii__level { font: 500 max(22px, 5.4cqw)/1 var(--font-display); letter-spacing: -0.02em; color: #9fc7b8; }
.pc-snii .snii__what { font-size: max(13px, 2cqw); line-height: 1.3; padding-right: 9cqw; }
.rec__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--u-line); font-size: 13px; line-height: 20px; }
.rec__live { width: 8px; height: 8px; border-radius: 50%; background: var(--trace-b); flex: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--trace-b) 22%, transparent); }
.rec__name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__chip { margin-left: auto; flex: none; padding: 0 8px; border-radius: 99px; font: 500 12px/20px var(--font-mono);
             color: var(--trace-b); background: color-mix(in oklab, var(--trace-b) 14%, transparent); border: 1px solid color-mix(in oklab, var(--trace-b) 35%, transparent); }
.rec__label, .rec__foot, .rec__keys { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--u-muted); }
.rec__label .mono, .rec__foot { font-family: var(--font-mono); }
.rec__plot { width: 100%; height: auto; aspect-ratio: 320 / 120; flex: 1 1 auto; min-height: 0; overflow: visible;
             border-radius: 6px; background-color: color-mix(in oklab, #000 18%, var(--u-bg)); }
.rec__plot path { fill: none; vector-effect: non-scaling-stroke; }
.rec__base { stroke: var(--u-line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.rec__stim { stroke: var(--u-muted); stroke-width: 1.5; }
.rec__scale { stroke: var(--u-ink); stroke-width: 1.5; }
.rec__trace { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rec__trace--a { stroke: var(--trace-a); }
.rec__trace--b { stroke: var(--trace-b); stroke-width: 2.5; }
.rec__keys span { display: inline-flex; align-items: center; gap: 6px; }
.rec__keys i { width: 14px; height: 3px; border-radius: 2px; background: var(--trace-a); }
.rec__keys i.k-b { background: var(--trace-b); }
.rec__keys .rec__ms { margin-left: auto; }
.ly-collage .pc-rec .rec__plot { flex: 1 1 0; aspect-ratio: auto; }

/* the sweep: each pass draws the traces left to right over the last one, kept dim underneath, so the
   window never blanks; motion.css runs it on --m-cycle, holds it under reduced motion and on a phone
   on the finished picture (--m-still), and gives the frame its pause button */
.rec__ghost { opacity: .32; }
.rec__sweep { stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: rec-sweep var(--m-cycle, 3.2s) linear infinite; }
@keyframes rec-sweep {
  0% { stroke-dashoffset: 1; }
  78% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.rec[data-m-loop] { --m-still: 0.9; padding-bottom: 14px; }

/* ---------------------------------------------------------------- the four lines (pinned-chapters)
   two screens live; at rest (a tablet, a phone, reduced motion) as tall as its steps */
#investigacion { --h: 2; }
#investigacion .section-head { margin-bottom: var(--s-5); }
#investigacion .section-head p { font-size: var(--t-body); color: var(--ink); }
.step-num { font-size: 0.6em; font-weight: 500; color: var(--accent); vertical-align: 0.18em; margin-right: 0.35em; letter-spacing: 0; }
#investigacion .mo-pc__visual--lit {
  background: var(--ground-bg); color: var(--ground-ink);
  --bg: var(--ground-surface); --card: var(--ground-surface); --surface: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
  --accent: #2f6b58; --accent-ink: #f3f1ea;
  --line: color-mix(in oklab, var(--ground-ink) 12%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 24%, transparent);
}
#investigacion .mo-pc__visual--lit > .ui { width: min(100%, 460px); }
#investigacion .mo-pc__visual--lit > .dg { width: 100%; }
.rec--step .rec__plot { aspect-ratio: 320 / 140; }
/* at rest (no pin: a tablet, a phone, reduced motion) each window keeps its own height, never clipped */
#investigacion:not(.is-live) .mo-pc__visual--lit { aspect-ratio: auto; }
/* at rest on a tablet each window beside its lines, with less ground round it, and the section two screens */
@media (min-width: 640px) and (max-width: 1023px) {
  main > #investigacion[data-moment]:not(.is-live) { min-height: 200svh; }
  #investigacion:not(.is-live) > .mo-pc__grid { align-content: stretch; align-items: stretch; }
  #investigacion:not(.is-live) .mo-pc__text { grid-template-rows: auto minmax(0, 1fr); }
  #investigacion:not(.is-live) .mo-pc__steps { align-content: space-between; }
  #investigacion .mo-pc__visual--lit { padding: 12px; }
  #investigacion .mo-pc__visual--lit > .ui { width: 100%; }
  .sheet__rows > div:nth-child(5) { display: none; }
}
/* a phone: the four steps and their windows in two screens; each window keeps its first rows */
@media (max-width: 639px) {
  main > #investigacion[data-moment]:not(.is-live) { min-height: 200lvh; }
  #investigacion .section-head p { display: none; }
  #investigacion .mo-pc__steps { gap: var(--s-4); }
  #investigacion .mo-pc__visual { margin-top: var(--s-3); }
  #investigacion .mo-pc__visual--lit { padding: 12px; }
  .rec--step .rec__label, .sheet__rows > div:nth-child(3), .sheet__rows > div:nth-child(4), .tools__rows li:nth-child(3) { display: none; }
  .tools__rows li:nth-child(2) { border-bottom: 0; }
  .rec--step .rec__foot, .sheet__rows > div:nth-child(5), .sheet__ref, .tools__what > span { display: none; }
  .rec--step .rec__plot { aspect-ratio: 320 / 96; }
}

/* the signalling path, the protocol sheet and the tools list: the same window, on the lit ground */
.path__steps { display: grid; gap: 0; }
.path__steps li { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 9px 0 9px 26px; font-size: 13px; line-height: 20px; }
.path__steps li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--trace-b); background: var(--u-bg); }
.path__steps li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 26px; bottom: -6px; width: 2px; background: color-mix(in oklab, var(--trace-b) 45%, transparent); }
.path__steps b { font-weight: 500; }
.path__steps span { font-size: 12px; color: var(--u-muted); }
.path__steps li.is-end b, .path__steps li.is-end span { color: var(--trace-b); }
.path__steps li.is-end::before { background: var(--trace-b); }
.sheet, .tools, .path {
  --trace-b: #9fc7b8;
  background: var(--u-bg); color: var(--u-ink); border: 1px solid var(--u-border); border-radius: var(--r-md);
  padding: 12px 14px 14px; display: grid; gap: 10px; font-family: var(--font-text);
}
.sheet__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--u-line); font-size: 13px; font-weight: 500; line-height: 20px; }
.sheet__rows { margin: 0; display: grid; }
.sheet__rows > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--u-line); font-size: 13px; line-height: 20px; }
.sheet__rows dt { font-family: var(--font-mono); font-size: 12px; color: var(--u-muted); }
.sheet__rows dd { margin: 0; }
.sheet__ref { font-size: 12px; line-height: 16px; color: var(--u-muted); }
.tools__rows { display: grid; }
.tools__rows li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--u-line); font-size: 13px; line-height: 20px; }
.tools__rows li:last-child { border-bottom: 0; }
.tools__year { font-size: 12px; color: var(--trace-b); }
.tools__what { display: grid; gap: 2px; }
.tools__what b { font-weight: 500; }
.tools__what > span { color: var(--u-muted); }

/* ---------------------------------------------------------------- the publications browser (app-frame)
   the list of twelve papers beside the open one, one window across the wrap. The list is a tablist
   and each paper a tabpanel: system.js shows the chosen one (click or arrow keys), no page script. */
#publicaciones .pub-head { row-gap: var(--s-4); }
#publicaciones .pub-head p { font-size: var(--t-body); max-width: 56ch; }
.app.frame { display: grid; padding: 0; align-items: stretch; justify-content: stretch; isolation: auto; }
.app.frame::before { display: none; }
.app.ui {
  --fx-bg: #101614; --fx-surface: #18201d; --fx-ink: #e3e2da; --fx-muted: #9aa198; --fx-accent: #9fc7b8;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); margin-top: var(--s-7);
  background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow);
  overflow: hidden; font-size: 13px; line-height: 20px;
}
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--u-line); flex: none; }
.app__dots { display: inline-flex; gap: 6px; flex: none; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--u-fill-3); }
.app__crumb { color: var(--u-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app__crumb i { font-style: normal; opacity: .6; margin-inline: 4px; }
.app__crumb b { color: var(--u-ink); font-weight: 500; }
.app__src { margin-left: auto; font-size: 12px; color: var(--u-muted); white-space: nowrap; }
.app__rows { display: grid; align-content: start; }
.pubrow {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 12px; align-items: center;
  min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--u-line); cursor: pointer; color: var(--u-text-2);
  transition: background-color var(--m-in, 150ms) var(--ease), color var(--m-in, 150ms) var(--ease);
}
.pubrow:hover { background: var(--u-fill); color: var(--u-ink); }
.pubrow:focus-visible { outline: 2px solid var(--u-accent); outline-offset: -2px; }
.pubrow[aria-selected="true"] { background: var(--u-tint); color: var(--u-ink); box-shadow: inset 2px 0 0 var(--u-accent); }
.pubrow__year { font-size: 12px; color: var(--u-muted); }
.pubrow[aria-selected="true"] .pubrow__year { color: var(--u-accent); }
.pubrow__title { padding-block: 10px; line-height: 20px; }
.pubrow__n { font-size: 12px; text-align: right; }
.paper { display: flex; flex-direction: column; gap: 16px; padding: 28px 32px 32px; min-height: 0; overflow-y: auto; }
.paper__kind { font-size: 12px; color: var(--u-accent); }
.paper__title { font: 500 22px/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--u-ink); max-width: 44ch; hyphens: manual; }
.paper__who { font-size: 14px; line-height: 22px; color: var(--u-text-2); max-width: 70ch; }
.paper__who b { color: var(--u-ink); font-weight: 600; }
.paper__data { margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 0 40px; border-top: 1px solid var(--u-line); padding-top: 16px; }
.paper__data div { display: grid; gap: 2px; }
.paper__data dt { font: 12px/16px var(--font-mono); color: var(--u-muted); }
.paper__data dd { margin: 0; font-size: 14px; line-height: 22px; }
.paper__doi { align-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px;
              border: 1px solid var(--u-line-2); font-size: 13px; color: var(--u-ink); overflow-wrap: anywhere;
              transition: background-color var(--m-in, 150ms) var(--ease), border-color var(--m-in, 150ms) var(--ease); }
.paper__doi:hover { background: var(--u-fill-2); border-color: var(--u-accent); }
@media (min-width: 640px) and (max-width: 1279px) { #publicaciones { --h: 2; } }
@media (min-width: 1024px) and (max-width: 1279px) { .app__src { display: none; } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  #publicaciones { --hm: 2; }
  .app.ui { grid-template-rows: auto auto; }
  .app__src { display: none; }
  .pubrow { min-height: 48px; grid-template-columns: 44px minmax(0, 1fr) 36px; padding: 0 12px; }
  .paper { padding: 20px 16px 20px; gap: 12px; }
  .paper__title { font-size: 18px; }
  .paper__data { grid-template-columns: 1fr; gap: 8px; }
}

/* the citations chart under the open paper: the twelve papers, oldest first, the open one in the accent */
.app__pane--open { display: flex; flex-direction: column; }
.cites { margin: auto 32px 24px; padding-top: 16px; border-top: 1px solid var(--u-line); display: grid; gap: 12px; flex: none; }
.cites__title { font-size: 12px; color: var(--u-muted); }
.cites__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 112px; }
.cbar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; height: 100%; }
.cbar b { font-size: 11px; line-height: 14px; font-weight: 400; color: var(--u-muted); align-self: end; }
.cbar i { width: 100%; max-width: 28px; height: max(2px, calc(var(--v) / 276 * 64px)); align-self: end; border-radius: 3px 3px 0 0; background: var(--u-fill-3); transition: background-color var(--m-in, 150ms) var(--ease); }
.cbar span { font-size: 11px; line-height: 14px; color: var(--u-muted); }
.cbar--1994 { --v: 46; } .cbar--1997 { --v: 85; } .cbar--2000 { --v: 152; } .cbar--2001a { --v: 176; } .cbar--2001b { --v: 139; } .cbar--2002 { --v: 276; }
.cbar--2009 { --v: 21; } .cbar--2018 { --v: 0; } .cbar--2020 { --v: 1; } .cbar--2022 { --v: 7; } .cbar--2025a { --v: 6; } .cbar--2025b { --v: 0; }
.app:has(#tab-1994[aria-selected="true"]) .cbar--1994 i, .app:has(#tab-1997[aria-selected="true"]) .cbar--1997 i,
.app:has(#tab-2000[aria-selected="true"]) .cbar--2000 i, .app:has(#tab-2001a[aria-selected="true"]) .cbar--2001a i,
.app:has(#tab-2001b[aria-selected="true"]) .cbar--2001b i, .app:has(#tab-2002[aria-selected="true"]) .cbar--2002 i,
.app:has(#tab-2009[aria-selected="true"]) .cbar--2009 i, .app:has(#tab-2018[aria-selected="true"]) .cbar--2018 i,
.app:has(#tab-2020[aria-selected="true"]) .cbar--2020 i, .app:has(#tab-2022[aria-selected="true"]) .cbar--2022 i,
.app:has(#tab-2025a[aria-selected="true"]) .cbar--2025a i, .app:has(#tab-2025b[aria-selected="true"]) .cbar--2025b i { background: var(--u-accent); }
.app:has(#tab-1994[aria-selected="true"]) .cbar--1994 b, .app:has(#tab-1997[aria-selected="true"]) .cbar--1997 b,
.app:has(#tab-2000[aria-selected="true"]) .cbar--2000 b, .app:has(#tab-2001a[aria-selected="true"]) .cbar--2001a b,
.app:has(#tab-2001b[aria-selected="true"]) .cbar--2001b b, .app:has(#tab-2002[aria-selected="true"]) .cbar--2002 b,
.app:has(#tab-2009[aria-selected="true"]) .cbar--2009 b, .app:has(#tab-2018[aria-selected="true"]) .cbar--2018 b,
.app:has(#tab-2020[aria-selected="true"]) .cbar--2020 b, .app:has(#tab-2022[aria-selected="true"]) .cbar--2022 b,
.app:has(#tab-2025a[aria-selected="true"]) .cbar--2025a b, .app:has(#tab-2025b[aria-selected="true"]) .cbar--2025b b { color: var(--u-ink); font-weight: 500; }
@media (max-width: 639px) { .cites { margin: 0 16px 20px; } .cites__bars { gap: 4px; height: 96px; } }

/* ---------------------------------------------------------------- the profile (split, the one effect)
   the frame holds soft-light-bars (system.js draws it once and keeps it as a picture) and one compact
   recording window rising out of its foot */
.sobre-grid { align-items: stretch; height: 100%; }
.sobre-grid .split-col { gap: var(--s-5); }
.sobre-frame { --ratio: 0px; height: 100%; min-height: 420px; }
.sobre-frame > .stage > .sobre-rec { --w: 440px; }
.rec--two .rec__plot { aspect-ratio: 320 / 96; }
@media (max-width: 1023px) {
  .sobre-grid { row-gap: var(--s-7); }
  .sobre-frame { height: auto; min-height: 0; --ratio: 68%; }
}
/* a tablet: the frame takes what the text leaves of the screen, so a tall screen has no hole at its foot */
@media (min-width: 640px) and (max-width: 1023px) {
  #sobre .sobre-grid { flex: 1 0 auto; height: auto; grid-template-rows: auto minmax(420px, 1fr); }
  #sobre .sobre-frame { --ratio: 0px; min-height: 420px; }
}
@media (max-width: 639px) {
  #sobre { --hm: 2; }
  .sobre-frame { --ratio: 110%; }
}

/* ---------------------------------------------------------------- teaching (the hub across the wrap) */
.doc-head { row-gap: var(--s-4); margin-bottom: var(--s-7); }
.doc-text { display: grid; gap: var(--s-4); }
.doc-text p { max-width: 60ch; }
.doc-frame { padding: 0; min-height: 300px; background: var(--surface); }
.doc-frame > .dg { width: 100%; height: 100%; }
/* the hub is drawn still: no node changes colour as it comes on screen */
#docencia .dg * { transition: none; }
.inst-list { display: none; }
/* a phone: the hub keeps its lines and glyphs but has no room for the names, so the frame lists them under it */
@media (max-width: 639px) {
  #docencia { --hm: 2; }
  #docencia .doc-frame { display: block; flex: none; height: auto; padding: var(--s-4); }
  .doc-frame > .dg { position: relative; inset: auto; height: 300px; }
  .inst-list { display: block; margin-top: var(--s-4); line-height: 1; }
  .inst-list li { display: inline-block; margin: 0 var(--s-2) var(--s-2) 0; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: var(--t-small); line-height: 1.4; }
}

/* ---------------------------------------------------------------- career: the figures, then the ledger */
.tray-head { row-gap: var(--s-4); margin-bottom: var(--s-6); }
.tray-head p { font-size: var(--t-body); }
.figures { margin-bottom: var(--s-7); row-gap: var(--s-5); }
.figure { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.figure .t-stat { color: var(--ink); }
.figure__what { font-size: var(--t-body); color: var(--muted); }
.ledger { display: grid; }
.ledger li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ledger .when { grid-column: 1 / span 2; font-size: 14px; color: var(--muted); }
.ledger .what { grid-column: 3 / span 5; font-weight: 500; }
.ledger .where { grid-column: 8 / span 5; color: var(--muted); }
.ledger .what.now { color: var(--accent); }
/* a tablet keeps the desktop rows and one screen: the years set a size smaller, so each stays on one line */
@media (min-width: 640px) and (max-width: 1023px) {
  #trayectoria .figure { grid-column: span 3; }
  .ledger .when { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 639px) {
  #trayectoria { --hm: 2; }
  #trayectoria .figure { grid-column: span 6; }
  .ledger li { padding: 12px 0; }
  .ledger .when, .ledger .what, .ledger .where { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- outreach */
.div-grid { align-items: stretch; height: 100%; }
.div-text .section-head { margin-bottom: var(--s-5); }
.div-text .section-head p { font-size: var(--t-body); color: var(--ink); }
.outreach { display: grid; }
.outreach li { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.outreach__title { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.outreach p { max-width: 56ch; }
.outreach__kind { font-size: 13px; color: var(--accent); }
.outreach .link { justify-self: start; }
.outreach li:last-child { border-bottom: 0; }
.outreach__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
.outreach__body { display: grid; gap: var(--s-1); }
.outreach__body > span { display: block; }
.outreach__logo { position: relative; display: block; width: 56px; height: 56px; border-radius: 50%; overflow: clip; background: #fff; }
.outreach__logo > .frame__img { width: 100%; height: 100%; object-fit: contain; }
.outreach__text { max-width: 56ch; }
.outreach__go { justify-self: start; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color var(--m-in, 150ms) var(--ease); }
.outreach__card:hover .outreach__go, .outreach__card:focus-visible .outreach__go { text-decoration-color: currentColor; }
/* the forum in pictures (Valente's six, 2026-11-08): beside the outreach, the two portraits on the first
   row, the four landscapes under them; each tile opens the full picture */
.gal { display: flex; flex-direction: column; gap: var(--s-4); min-height: 0; }
.gal__head { display: grid; gap: var(--s-1); }
.gal__head h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.gal__head p { font-size: 13px; color: var(--ink); }
.gal__grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             grid-template-rows: minmax(0, 1.78fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.gal__item { min-height: 0; }
/* plain linked pictures, no card box: a photo set, not six copies of a card */
.gal__tile { position: relative; display: block; height: 100%; overflow: clip; border-radius: var(--r-md); }
.gal__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--m-image-out, 400ms) var(--ease); }
.gal__item:nth-child(1) .gal__img { object-position: 45% 35%; }
.gal__item:nth-child(3) .gal__img { object-position: 60% 40%; }
.gal__item:nth-child(4) .gal__img { object-position: 50% 45%; }
.gal__item:nth-child(5) .gal__img { object-position: 50% 42%; }
.gal__item:nth-child(6) .gal__img { object-position: 50% 12%; }
@media (max-width: 1023px) { .div-grid { row-gap: var(--s-7); } }
/* a tablet: two screens as two groups, the text on the first and the gallery filling the second
   (the kit's .g2 rows, kept on the grid inside the .wrap) */
@media (min-width: 640px) and (max-width: 1023px) {
  #divulgacion { --h: 2; }
  #divulgacion .div-grid { flex: 1 0 auto; height: auto; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: calc(var(--padt) + var(--padb) + var(--bar)); }
  #divulgacion .div-text { align-self: start; }
}
/* a phone: the tiles at their pictures' own shape, two to a row */
@media (max-width: 639px) {
  #divulgacion { --hm: 2; }
  .gal__grid { flex: none; grid-template-rows: none; }
  .gal__tile { height: auto; aspect-ratio: 4 / 3; }
  .gal__item--tall .gal__tile { aspect-ratio: 3 / 4; }
}
/* a linked photograph answers the pointer wherever hover is reported, not only on a fine pointer */
html:not([data-motion="off"]) .gal__tile:hover > .gal__img { transform: scale(1.03); transition-duration: var(--m-image, 600ms); }
.gal__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gal__img { transition: none; } html:not([data-motion="off"]) .gal__tile:hover > .gal__img { transform: none; } }

/* the effect's fallback without WebGL: the kit's grain is a data: picture the CSP refuses; site.js
   swaps it for /img/ui/fx-grain-*.svg, and until then (one microtask) no data: background is drawn */
[data-fx-fallback][style*="data:image"] { background-image: none !important; }

/* ---------------------------------------------------------------- the close and the footer */
footer.closing .closing__cta .section-head p { color: var(--ink); max-width: 64ch; font-size: var(--t-body); }
.footer__who { color: var(--muted); max-width: 36ch; }
.footer__col address { font-style: normal; color: var(--ink); font-size: var(--t-small); line-height: 1.6; }
.footer__col li { color: var(--ink); }
.footer__col a { overflow-wrap: anywhere; }
@media (min-width: 640px) and (max-width: 1023px) {
  footer.closing > .wrap { row-gap: var(--s-6); }
  .closing__links { gap: var(--s-5); }
  .closing__links > .grid { row-gap: var(--s-5); }
}
@media (max-width: 639px) { #contacto { --hm: 2; } }

/* ---------------------------------------------------------------- the 404 page */
.notfound { padding-block: calc(var(--nav) + var(--s-9)) var(--s-9); min-height: 100svh; display: grid; align-content: start; gap: var(--s-6); }
.notfound .rec { max-width: 460px; }
.notfound h1 { font-size: var(--t-h1); max-width: 18ch; }
.notfound p { max-width: 56ch; font-size: var(--t-lead); }