/* ══════════════════════════════════════════════════════════════════
   RECO-LAB · global current · August 2026
   Stylesheet for RECO_LAB_GLOBAL_CURRENT.html

   One system for the whole page. It does not extend system-2.9.css or
   v3-reco-lab.css and it does not touch their selectors: the global page
   loads this sheet alone, so a single radius scale, a single type scale
   and a single colour model govern header, hero, topics, systems,
   projects, methods, profile and footer at once. That is what "the design
   came apart" was asking for — not another layer on top of two sheets
   that already disagree.

   Structure, spacing, display type and the light/dark palettes come from
   the RECO-LAB shell design system (design tokens + hero).
   Three things are the site's own, and deliberate:

     · corners are round everywhere. The design system's Industry base is
       square-cornered; every card, chip, block and panel here carries a
       radius from one scale. Nothing on the page has a square corner.
     · three moods. The design system ships light/dark; night is a third,
       deeper step derived from the same dark tokens, never a new hue.
     · reading floors. Nothing that carries running text goes below
       14px, no label below 11px, body line-height 1.55 or more.

   Agosto 13 · cierre del sistema. Tres decisiones quedan fijadas como
   token en :root y ya no se toman rule por rule: la escala tipográfica
   (razón 1.125), el ritmo vertical (unidad 4px) y el criterio de
   movimiento (tres duraciones). Ver los comentarios de cada bloque de
   tokens. La referencia visible de las tres vive en
   assets/design-system/index.html.
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{
  /* A phone must never inflate this page's type on rotate, and a click
     must never be answered with a zoom step. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  /* clip, not hidden: the hero globe is allowed to bleed off the right
     edge without ever creating a horizontal scrollbar, and clip does not
     turn the body into a scroll container the way hidden does. */
  overflow-x:clip;
  /* Scroll anchoring off, for the whole page.
     Measured defect: with anchoring on, opening a methods accordion at the
     centre of the screen scrolled the page by exactly the height the block
     had just gained (320px, 252px, 208px, 463px on the six phases). The
     browser was picking an anchor node *below* the growth and holding it
     still, which shoves the block the reader just clicked up and off the
     screen. That is what read as "I touch something and the page resizes".
     With anchoring off the scroll position stays put and the content below
     simply moves down, so the summary stays under the cursor. */
  overflow-anchor:none;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-shell);
  font-size:var(--fs-03);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul{list-style:none;padding:0;}
img,svg{max-width:100%;}
img{height:auto;display:block;}
a{color:var(--accent-700);}
a:hover{color:var(--accent-900);}
button{font:inherit;color:inherit;}

/* Every anchor target clears the sticky bar by itself. This is the whole
   deep-link mechanism on this page: no script re-scrolls the reader, so a
   click on the nav can never turn into a fight with the scroll wheel. */
[id]{scroll-margin-top:calc(var(--hdr-h,64px) + 16px);}

/* ── Tokens · light ─────────────────────────────────────────────── */
:root{
  --bg:#f2f2f3;
  --surface:#ffffff;
  --surface-2:#fbfbfc;
  --panel:#1d2d3d;
  --panel-text:rgba(255,255,255,0.78);
  --text:#1d1f20;
  --muted:#5a5a5d;
  --muted-2:#6e6e71;  /* 3.93:1 → 4.54:1 sobre --bg a 11.25px */
  --accent:#5980a6;
  --accent-700:#416180;
  --accent-900:#1d2d3d;
  --accent-soft:rgba(89,128,166,0.10);
  --accent-line:rgba(89,128,166,0.34);
  --divider:#dcdcdf;
  /* Tinta de acento cuando el texto se apoya en la placa navy: en claro el
     acento medio da 3.39:1 contra #1d2d3d, así que la placa usa el paso
     luminoso de la familia. En oscuro y noche el acento ya despeja. */
  --accent-panel:#8fb2d4;
  /* Proporción de tinta de fase que se mezcla hacia --text para que el
     numeral de fase se lea. Medido: con 65% los seis colores de fase
     despejan 4.5:1 sobre --surface y --surface-2 en claro. */
  --phase-mix:65%;
  --divider-soft:#e7e7e9;
  --cta-bg:#1d2d3d;
  --cta-fg:#ffffff;
  --shell-bg:#1d2d3d;
  --teal:#4fb3a5;
  --gold:#c8901f;
  --shadow-card:0 22px 44px -34px rgba(14,20,24,0.45);
  --shadow-lift:0 30px 56px -38px rgba(14,20,24,0.50);
  --globe-theme:light;

  --container:1240px;
  --gutter:28px;

  /* Escala tipográfica · razón 1.125, ancla 16px (--fs-03).
     Nueve pasos de lectura, del piso de etiqueta al título de bloque, más
     dos pasos de display que sólo se usan como techo de un clamp(). Ningún
     font-size suelto sobrevive en esta hoja: cada uno se migró al paso más
     cercano de esta escala. Piso de lectura: --fs-02 (14.2px) para texto
     corrido, --fs-00 (11.25px) para etiqueta con tracking, nada por debajo.
     Fuera de la escala quedan, declaradas: los clamp() del hero (aprobados)
     y la firma del footer, que son tipografía de display, no de lectura. */
  --fs-00:11.25px; --fs-01:12.65px; --fs-02:14.2px;  --fs-03:16px;
  --fs-04:18px;    --fs-05:20.25px; --fs-06:22.8px;  --fs-07:25.6px;
  --fs-08:28.8px;  --fs-09:32.4px;  --fs-10:36.5px;

  /* Ritmo vertical · unidad base 4px, múltiplos limpios en los ocho pasos.
     Los ocho valores anteriores (4/8/12/16/20/26/34/44) dejaban de ser
     múltiplos de 4 a partir del quinto, así que la mitad de la página se
     apoyaba en una retícula y la otra mitad en nada. */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px; --space-6:32px;  --space-7:40px;  --space-8:48px;

  /* Criterio de movimiento · tres tokens, y ninguna transición fuera de ellos.
       --motion-fast      control en línea: color, borde y fondo de nav,
                          píldoras, botones, chips y enlaces de texto.
       --motion-base      superficie: hover y estado de tarjeta, panel,
                          summary de acordeón y su marca +/− (fondo, borde,
                          sombra, translación de 2px).
       --motion-emphasis  desplazamiento real: el thumb del selector de modo
                          viajando a su paso y la entrada del panel de línea.
     Las dos animaciones ambientales (recoPing, recoBlink) son señal continua,
     no respuesta a una acción, y quedan declaradas fuera del criterio. */
  --motion-fast:.16s ease;
  --motion-base:.18s ease;
  --motion-emphasis:.24s cubic-bezier(.2,.6,.3,1);

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  --font-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --font-shell:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'IBM Plex Serif',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --hdr-h:64px;
}

/* ── Tokens · dark ──────────────────────────────────────────────── */
html[data-theme="dark"]{
  --bg:#0f1c26;
  --surface:#16242f;
  --surface-2:#132029;
  --panel:#132029;
  --panel-text:rgba(255,255,255,0.76);
  --text:#e9eef2;
  --muted:rgba(233,238,242,0.72);
  --muted-2:rgba(233,238,242,0.55);
  --accent:#7ea6cc;
  --accent-700:#a9c6e0;
  --accent-900:#c3d8ea;
  --accent-soft:rgba(126,166,204,0.13);
  --accent-line:rgba(126,166,204,0.36);
  --divider:rgba(255,255,255,0.15);
  --divider-soft:rgba(255,255,255,0.09);
  --accent-panel:var(--accent);
  --phase-mix:82%;
  --cta-bg:#7ea6cc;
  --cta-fg:#0f1c26;
  --shell-bg:#132029;
  --shadow-card:0 22px 44px -34px rgba(0,0,0,0.72);
  --shadow-lift:0 30px 56px -38px rgba(0,0,0,0.80);
  --globe-theme:dark;
}

/* ── Tokens · night ─────────────────────────────────────────────
   One step deeper than dark, same hues. For reading the page in a dark
   room: the ground drops toward black, the accent loses luminance, and
   the dividers thin out so the page stops glowing at the seams. */
html[data-theme="night"]{
  /* El cuerpo sube un paso y la placa institucional baja dos, para que
     header, footer, sistemas y el bloque de encuadre queden por debajo
     del fondo y el canto entre placa y cuerpo se perciba. Ningún valor
     llega a negro puro y todos siguen leyéndose como navy. */
  --bg:#0b131c;
  --surface:#111b25;
  --surface-2:#0e1620;
  --panel:#050a10;
  --panel-text:rgba(219,228,234,0.70);
  --text:#dbe4ea;
  --muted:rgba(219,228,234,0.64);
  --muted-2:rgba(219,228,234,0.52);  /* 3.84:1 → 4.54:1 */
  --accent:#6d93b8;
  --accent-700:#93b3d1;
  --accent-900:#adc7de;
  --accent-soft:rgba(109,147,184,0.12);
  --accent-line:rgba(109,147,184,0.30);
  --divider:rgba(255,255,255,0.11);
  --divider-soft:rgba(255,255,255,0.06);
  --accent-panel:var(--accent);
  --phase-mix:87%;
  --cta-bg:#6d93b8;
  --cta-fg:#0b131c;
  /* Deep, never pure black: the footer must still read as a navy plate. */
  --shell-bg:#050a10;
  --teal:#3f9d91;
  --gold:#b07f1c;
  --shadow-card:0 22px 44px -34px rgba(0,0,0,0.9);
  --shadow-lift:0 30px 56px -38px rgba(0,0,0,0.95);
  --globe-theme:dark;
}

@keyframes recoPing{0%{transform:scale(.6);opacity:.55}70%,100%{transform:scale(2.1);opacity:0}}
@keyframes recoBlink{0%,100%{opacity:1}50%{opacity:.55}}

/* ── Language ───────────────────────────────────────────────────
   Only the inactive side is hidden, so the visible side keeps whatever
   display its element naturally has and no block ever collapses. */
html[data-lang="es"] .lang-en,
html[data-lang="en"] .lang-es{display:none !important;}

/* ── Layout primitives ──────────────────────────────────────────── */
.row{
  width:100%;max-width:var(--container);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.section{padding:clamp(56px,7vh,88px) 0;}
.section + .section{padding-top:0;}
.section-inner{
  border-top:1px solid var(--divider-soft);
  padding-top:clamp(40px,5vh,60px);
}
.section:first-of-type .section-inner{border-top:0;padding-top:0;}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-shell);
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent-700);margin-bottom:var(--space-5);
}
.eyebrow .num{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-00);
  /* En claro el acento medio da 3.71:1 sobre --bg; el paso 700 da 5.78:1. */
  color:var(--accent-700);
}
.eyebrow::after{
  content:"";flex:1;height:1px;background:var(--divider);max-width:200px;
}
.h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(var(--fs-07),2.8vw,var(--fs-09));line-height:1.24;letter-spacing:-0.012em;
  color:var(--text);margin:0 0 var(--space-5);max-width:34ch;
}
.h2 em{font-style:normal;color:var(--accent-700);}
.lede{
  font-size:var(--fs-03);line-height:1.65;color:var(--muted);
  max-width:92ch;margin:0;
}
.section-head{margin-bottom:clamp(32px,4vh,44px);}

/* El encabezado de sección apila en una sola columna que ocupa el ancho del
   contenedor: eyebrow, título con su propia medida (dos líneas) y la bajada
   debajo, leyendo casi hasta el borde (~90 caracteres) en vez de quedar a
   media página. Mismo comportamiento en todos los anchos. */
.section-head{
  display:flex;flex-direction:column;align-items:stretch;
  gap:var(--space-4);width:100%;
}
.section-head > .eyebrow{width:100%;}
.section-head > .h2{margin-bottom:0;max-width:34ch;}
.section-head > .lede{max-width:none;width:100%;}

/* ══ Skip link ═══════════════════════════════════════════════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--shell-bg);color:#fff;padding:12px 18px;
  border-radius:0 0 var(--r-md) 0;font-family:var(--font-ui);font-size:var(--fs-02);
  text-decoration:none;
}
.skip:focus{left:0;color:#fff;}

/* ══ HEADER ══════════════════════════════════════════════════════
   Grid auto | 1fr | auto on the institutional navy, per the design system.
   Three written controls close the row: mood, language, Contacto. None
   of them is an icon and none of them is a black button. */
.hdr{
  position:sticky;top:0;z-index:80;
  background:var(--shell-bg);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.hdr-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:24px;height:64px;
}
.wordmark{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-04);
  letter-spacing:-0.02em;color:#fff;white-space:nowrap;
  text-decoration:none;line-height:1;
}
.wordmark em{font-style:normal;color:var(--accent-panel);}
.wordmark:hover,.wordmark:focus-visible{color:#fff;}

.nav{
  display:flex;align-items:center;justify-content:flex-start;gap:18px;
  min-width:0;font-family:var(--font-shell);
  padding-left:clamp(12px,2.5vw,40px);
}
/* Contacto ya no vive dentro de .nav: se movió al bloque de controles,
   donde cierra la barra contra el borde derecho del contenedor. Así
   deja de heredar .nav a (0,1,1), que le pisaba padding-bottom,
   line-height y el canto inferior del borde de acento. */
.nav a{
  font-size:var(--fs-02);letter-spacing:0.02em;line-height:1;
  color:rgba(255,255,255,0.74);text-decoration:none;white-space:nowrap;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color var(--motion-fast),border-color var(--motion-fast);
}
.nav a:hover{color:#fff;}
.nav a.is-active{color:#fff;border-bottom-color:var(--accent);}

/* Los tres controles comparten eje: una misma altura de 34px centrada
   en la barra de 64px, de modo que modo, idioma y Contacto se apoyan en
   el mismo ritmo vertical en lugar de quedar montados. */
.hdr-end{display:flex;align-items:center;justify-content:flex-end;gap:14px;}
.hdr-end > .mood,
.hdr-end > .lang,
.hdr-end > .contact-pill{height:34px;flex:none;}
.hdr-sep{width:1px;height:20px;background:rgba(255,255,255,0.18);flex:none;}

/* 08 · 02 — El selector se lee como un instrumento del laboratorio:
   pauta monoespaciada, tres pasos separados por marcas finas y un
   thumb con canto propio. Sigue siendo el mismo control, con el mismo
   deslizamiento por data-theme y sin medir nada. */
.mood{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  border:1px solid rgba(255,255,255,0.22);border-radius:var(--r-pill);
  padding:3px;background:rgba(255,255,255,0.05);
  isolation:isolate;
}
.mood button + button::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;
  background:rgba(255,255,255,0.16);
  transition:opacity var(--motion-emphasis);
}
.mood button[aria-pressed="true"]::before,
.mood button[aria-pressed="true"] + button::before{opacity:0;}
.mood-thumb{
  position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px) / 3);
  border-radius:var(--r-pill);background:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.9);
  transition:transform var(--motion-emphasis);
  pointer-events:none;
}
html[data-theme="dark"] .mood-thumb{transform:translateX(100%);}
html[data-theme="night"] .mood-thumb{transform:translateX(200%);}
.mood button{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;font-size:var(--fs-00);
  letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;text-align:center;
  background:none;border:0;padding:0 12px;cursor:pointer;
  color:rgba(255,255,255,0.62);line-height:1.4;
  border-radius:var(--r-pill);
  transition:color var(--motion-fast);
}
.mood button:hover{color:rgba(255,255,255,0.92);}
.mood button[aria-pressed="true"]{color:var(--shell-bg);}
html[data-theme="dark"] .mood button[aria-pressed="true"],
html[data-theme="night"] .mood button[aria-pressed="true"]{color:#0f1c26;}

.lang{
  display:flex;align-items:stretch;border:1px solid rgba(255,255,255,0.22);
  border-radius:var(--r-pill);overflow:hidden;
}
.lang button{
  display:flex;align-items:center;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);
  letter-spacing:0.08em;padding:0 13px;
  border:0;background:transparent;color:rgba(255,255,255,0.7);
  cursor:pointer;line-height:1.35;transition:background var(--motion-fast),color var(--motion-fast);
}
.lang button:hover{color:#fff;}
.lang button.is-on{background:#fff;color:var(--shell-bg);}

.contact-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);
  line-height:1;letter-spacing:0.06em;text-transform:uppercase;
  color:#fff;background:transparent;text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--r-pill);
  padding:0 18px;white-space:nowrap;
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
.contact-pill:hover,.contact-pill:focus-visible{background:var(--accent);color:#fff;}

.burger{
  display:none;border:1px solid rgba(255,255,255,0.22);
  border-radius:var(--r-sm);background:transparent;
  color:#fff;font-size:var(--fs-02);line-height:1;padding:8px 11px;cursor:pointer;
}
.drawer{display:none;background:var(--shell-bg);}
.drawer[data-open="true"]{display:block;}
.drawer nav{
  display:flex;flex-direction:column;
  border-top:1px solid rgba(255,255,255,0.14);
  padding:var(--space-4) 0 var(--space-6);
}
.drawer nav a{
  font-family:var(--font-shell);font-size:var(--fs-02);line-height:1.5;
  color:rgba(255,255,255,0.84);text-decoration:none;
  padding:11px 2px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.drawer nav a:last-child{border-bottom:0;}
.drawer nav a:hover{color:#fff;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

/* ══ HERO ════════════════════════════════════════════════════════
   Statement on the light technical ground; the globe bleeds off the right
   edge with no card and no frame. Synthetic: kicker, wordmark, fields,
   lead, closing line, two buttons. No long editorial, no em dashes, no
   arrows on the calls to action. */
.hero{
  background:var(--bg);color:var(--text);
  border-bottom:1px solid var(--divider);
  overflow:hidden;
}
/* El hero vive dentro del mismo contenedor centrado que el resto de
   la página. La versión anterior sangraba el bloque a la izquierda y
   dejaba el globo salirse por la derecha, que es exactamente el
   desbalance que se veía: aire muerto de un lado, recorte del otro.
   Dos columnas equilibradas, sin margen negativo y sin desborde. */
.hero-row{padding-top:0;padding-bottom:0;}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  align-items:center;gap:clamp(24px,4vw,64px);
  padding-top:clamp(38px,5.5vh,68px);
  padding-bottom:clamp(38px,5.5vh,64px);
}
.hero-copy{max-width:none;min-width:0;}
.hero-kicker{
  display:flex;align-items:flex-start;gap:11px;
  font-size:var(--fs-00);line-height:1.5;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent-700);
  margin:0 0 var(--space-5) 9px;
}
.sig{position:relative;width:7px;height:7px;flex:none;margin-top:5px;}
.sig i{position:absolute;inset:0;border-radius:50%;background:var(--accent);}
.sig b{
  position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--accent);
  animation:recoPing 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
/* Flex rule of the design system: text that can wrap lives in its own
   min-width:0 child, never as a loose inline sibling. */
.hero-kicker .txt,.sig-row .txt{min-width:0;}

/* 08 · 01 — El wordmark cede escala a la definición del laboratorio:
   RECO-LAB deja de pesar más que lo que RECO-LAB hace. La marca queda
   como firma y el lead pasa a ser el objeto de lectura del hero. */
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(46px,5.2vw,75px);line-height:0.92;letter-spacing:-0.02em;
  color:var(--text);margin:0 0 var(--space-4);
}
.hero h1 em{font-style:normal;color:var(--accent);}
/* Los cinco campos entran en una sola línea en escritorio: paso de
   cuerpo y tracking ajustados a la medida real de la columna del hero.
   Por debajo de 1080px vuelve a envolver, que es lo correcto ahí. */
.hero-fields{
  font-size:clamp(11px,0.92vw,12.65px);letter-spacing:0.07em;line-height:1.7;
  text-transform:uppercase;color:var(--accent-700);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--divider);
  margin-bottom:var(--space-6);
}
@media (min-width:1081px){.hero-fields{white-space:nowrap;}}
.hero-lead{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(18px,1.5vw,22px);line-height:1.42;letter-spacing:-0.008em;
  max-width:40ch;margin:0 0 var(--space-5);color:var(--text);
}
.hero-close{
  font-size:var(--fs-02);line-height:1.62;max-width:48ch;
  color:var(--muted);margin:0 0 var(--space-7);
}
.hero-ctas{display:flex;gap:var(--space-3);flex-wrap:wrap;}

.btn{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);
  letter-spacing:0.06em;text-transform:uppercase;line-height:1.2;
  padding:13px 24px;border-radius:var(--r-pill);
  text-decoration:none;display:inline-block;border:1px solid transparent;
  transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast);
}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg);}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="night"] .btn-primary:hover{color:var(--cta-fg);}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--text);}
.btn-secondary:hover,.btn-secondary:focus-visible{
  border-color:var(--accent);color:var(--accent-700);
}

.hero-globe{position:relative;justify-self:stretch;min-width:0;
  max-width:560px;width:100%;margin-inline:auto;}
/* Las marcas de registro encuadran la figura, no el bloque entero:
   así el pie de alcance territorial puede crecer sin que los cantos
   inferiores caigan dentro del texto. */
.globe-figure{position:relative;}
.hero-globe .reg{
  position:absolute;color:var(--muted-2);opacity:.6;
  font-size:var(--fs-01);line-height:1;pointer-events:none;
}
.hero-globe .reg.tl{left:-6px;top:-6px;}
.hero-globe .reg.tr{right:-6px;top:-6px;}
.hero-globe .reg.bl{left:-6px;bottom:-6px;}
.hero-globe .reg.br{right:-6px;bottom:-6px;}
reco-globe{display:block;width:100%;aspect-ratio:1/1;max-height:60vh;}
/* 08 · 01 — El globo se gana la mitad derecha llevando el alcance
   territorial a su propio pie: cuatro entradas indexadas contra una
   pauta, no una línea de texto corrida bajo la figura. */
.hero-strip{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);
  padding-top:var(--space-4);margin-top:var(--space-4);
  border-top:1px solid var(--divider);
}
.hero-strip .k{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted-2);
  line-height:1.9;
}
/* Los cuatro territorios entran en una sola línea bajo el globo, y la
   regla superior del pie mide exactamente el ancho del bloque. */
.hero-scope{
  display:flex;flex-wrap:nowrap;justify-content:flex-start;
  gap:0 19px;margin:0;padding:0;list-style:none;min-width:0;
}
.hero-scope li{
  position:relative;padding-left:13px;min-width:0;
  font-family:var(--font-ui);font-size:var(--fs-00);line-height:1.9;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-700);
  white-space:nowrap;
}
.hero-scope li::before{
  content:"";position:absolute;left:0;top:calc(50% - 1px);
  width:6px;height:1px;background:var(--accent-line);
}

/* ══ ABOUT · two editorial columns ═══════════════════════════════
   "Sobre RECO-LAB" states what the lab is; "Cómo trabaja RECO-LAB"
   states how it works. Third person throughout, no team voice, and
   neither block repeats the hero. */
.about-grid{
  display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  padding-top:var(--space-2);
}
@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr;gap:var(--space-5);}
}
.about-aside .h2{margin-bottom:0;max-width:26ch;}
.about-mark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-700);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-pill);padding:7px 16px;margin-bottom:var(--space-5);
}
.about-body p{
  font-size:var(--fs-03);line-height:1.72;color:var(--muted);
  max-width:none;margin:0 0 var(--space-4);
}
.about-body p:last-child{margin-bottom:0;}
.about-body p:first-child{color:var(--text);font-size:var(--fs-04);}

.work-panel{
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:var(--r-xl);
  padding:clamp(26px,3vw,40px);
  box-shadow:var(--shadow-card);
}
.work-panel .h2{max-width:30ch;}

/* ══ LÍNEAS DE INVESTIGACIÓN ═════════════════════════════════════
   Selección arriba, panel editorial de detalle abajo, todo dentro
   de la misma página: seis líneas no son seis páginas nuevas y no
   son un modal. Las tarjetas son redondeadas, no tienen aspecto de
   botón de aplicación y no llevan gradiente, sombra pesada ni
   pastel. La herramienta no compite con la línea: Python, R o GIS
   viven en Métodos, no aquí. */
.lines-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-bottom:clamp(22px,3vh,30px);
}
.line{
  position:relative;min-width:0;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"num name" "num tag";
  column-gap:14px;row-gap:5px;align-content:center;
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:var(--r-lg);
  padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 3px);
  cursor:pointer;overflow:hidden;
  transition:border-color var(--motion-base),box-shadow var(--motion-base),background var(--motion-base);
}
.line::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
  background:var(--line-accent,var(--accent));
  opacity:.42;transition:opacity var(--motion-base);
}
.line:hover{border-color:var(--accent-line);box-shadow:var(--shadow-card);}
.line:hover::before{opacity:.8;}
.line[aria-selected="true"]{
  border-color:var(--line-accent,var(--accent));
  background:var(--surface-2);
  box-shadow:var(--shadow-card);
}
.line[aria-selected="true"]::before{opacity:1;}
.line-num{
  grid-area:num;align-self:center;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-01);letter-spacing:0.08em;
  color:var(--line-accent,var(--accent));
}
.line-name{
  grid-area:name;min-width:0;
  font-family:var(--font-serif);font-weight:500;font-size:var(--fs-03);line-height:1.3;
  color:var(--text);letter-spacing:-0.006em;
}
.line-tag{
  grid-area:tag;min-width:0;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-00);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--line-accent,var(--accent));
}
/* En claro los acentos de linea se profundizan antes de pintar la etiqueta:
   el teal y el azul son los dos mas claros de la familia. */
html[data-theme="light"] .line-tag{filter:saturate(1.1) brightness(0.68);}

.line-detail{
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:var(--r-xl);
  padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow-card);
  /* Altura mínima estable: cambiar de línea no debe reflowear la
     página bajo el cursor ni parecer que algo se reescala. */
  min-height:380px;
}
.line-panel[hidden]{display:none;}
/* 08 · 03 — Transición entre paneles: la línea elegida entra, no
   aparece de golpe. La altura mínima del contenedor no cambia, así
   que nada se mueve bajo el cursor. */
@keyframes linePanelIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.line-panel:not([hidden]){animation:linePanelIn var(--motion-emphasis) both;}
@media (prefers-reduced-motion:reduce){
  .line-panel:not([hidden]){animation:none;}
}
.line-panel-head{display:flex;align-items:baseline;gap:14px;margin-bottom:var(--space-4);}
.line-panel-num{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-01);letter-spacing:0.14em;
  color:var(--line-accent,var(--accent));flex:none;
  border:1px solid var(--line-accent,var(--accent));border-radius:var(--r-pill);
  padding:3px 11px;line-height:1.6;
}
.line-panel h3{
  font-family:var(--font-serif);font-weight:500;font-size:clamp(var(--fs-05),2vw,var(--fs-07));
  line-height:1.26;color:var(--text);letter-spacing:-0.01em;min-width:0;
}
.line-panel-lede{max-width:none;
  font-size:var(--fs-03);line-height:1.7;color:var(--muted);
  max-width:88ch;margin:0 0 var(--space-6);
}
.line-panel-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);
  gap:clamp(24px,3.5vw,52px);align-items:start;
  border-top:1px solid var(--divider-soft);padding-top:var(--space-6);
}
.line-block{min-width:0;}
.line-block .k{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:var(--space-4);
}
.line-block .k-2{margin-top:var(--space-6);}
.line-q{display:flex;flex-direction:column;gap:11px;}
.line-q li{
  position:relative;padding-left:20px;
  font-size:var(--fs-02);line-height:1.66;color:var(--text);max-width:74ch;
}
.line-q li::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--line-accent,var(--accent));
}
.line-cases{display:flex;flex-direction:column;gap:9px;}
.line-cases li{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:var(--fs-02);line-height:1.55;
}
.line-cases a{color:var(--accent-700);text-decoration:none;border-bottom:1px solid var(--accent-line);}
.line-cases a:hover,.line-cases a:focus-visible{color:var(--accent-900);border-bottom-color:var(--accent);}
.line-cases .flat{color:var(--muted);}
.line-cta{
  display:inline-block;margin-top:var(--space-6);
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--accent-700);text-decoration:none;
  border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:9px 18px;
  transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);
}
.line-cta:hover,.line-cta:focus-visible{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent-900);
}

.chips{display:flex;flex-wrap:wrap;gap:6px;}
/* Cada chip en una línea: si uno envuelve por dentro, el pie de su
   tarjeta crece y la regla superior deja de estar a la misma altura que
   la de la tarjeta vecina. */
.chip{white-space:nowrap;}
.chip{
  font-family:var(--font-ui);font-weight:500;font-size:var(--fs-00);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent-700);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-pill);padding:4px 11px;line-height:1.5;
}

/* ══ SYSTEMS ═════════════════════════════════════════════════════ */
/* La placa de sistemas usa exactamente el mismo navy que el header y
   el footer, no un azul medio propio: era ese desajuste el que hacía
   que la sección no perteneciera al mismo sistema cromático. */
.systems{
  background:var(--shell-bg);color:var(--panel-text);
  border-radius:var(--r-xl);
  padding:clamp(32px,4vw,56px);
}
.systems .h2,.systems .h3{color:#fff;}
.systems .eyebrow{color:rgba(255,255,255,0.62);}
.systems .eyebrow::after{background:rgba(255,255,255,0.18);}
.systems .eyebrow .num{color:var(--accent-panel);}
.systems .lede{color:rgba(255,255,255,0.68);}
/* On the navy plate the accent has to be the light one in every mood,
   and the primary button cannot be navy on navy. */
.systems .h2 em{color:var(--accent);}
.systems .btn-primary,
.systems .btn-primary:hover,
.systems .btn-primary:focus-visible{
  background:var(--accent);border-color:var(--accent);color:#0f1c26;
}
.systems .btn-primary:hover,
.systems .btn-primary:focus-visible{background:#ffffff;border-color:#ffffff;color:#1d2d3d;}
html[data-theme="light"] .systems .h2 em{color:#8fb2d4;}

.found{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,44px);align-items:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-left:3px solid var(--accent);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);
}
.found-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--space-3);}
.code-tag{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-01);letter-spacing:0.1em;
  color:var(--accent-panel);background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);border-radius:var(--r-pill);
  padding:4px 13px;
}
.found-eyebrow,.mod-eyebrow{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.56);
}
.found h3{
  font-family:var(--font-serif);font-weight:400;font-size:var(--fs-06);line-height:1.3;
  color:#fff;margin:0 0 var(--space-3);
}
.found p{font-size:var(--fs-02);line-height:1.68;color:rgba(255,255,255,0.72);margin:0;max-width:64ch;}
/* 08 · 04 — IVUB es la fila superior y los cuatro módulos cuelgan
   indentados de ella: la ramificación deja de estar sólo enunciada en
   una línea de texto y pasa a leerse en la propia estructura. */
.branch{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.58);margin:0;  /* 4.44:1 → 5.2:1 */
  display:flex;align-items:center;gap:16px;
  margin-left:clamp(14px,3vw,40px);
  padding:var(--space-6) 0 var(--space-6) clamp(14px,3vw,30px);
  border-left:1px solid rgba(255,255,255,0.16);
}
.branch::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.14);}
.mods{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin-left:clamp(14px,3vw,40px);
  padding-left:clamp(14px,3vw,30px);
  border-left:1px solid rgba(255,255,255,0.16);
}
.mod{
  position:relative;
  min-width:0;display:flex;flex-direction:column;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.13);
  border-radius:var(--r-lg);
  padding:var(--space-6) var(--space-5) var(--space-5);
  transition:border-color var(--motion-base),background var(--motion-base);
}
/* Marca de derivación: cada módulo se engancha a la espina de IVUB. */
.mods > .mod:first-child::before{
  content:"";position:absolute;left:calc(-1 * clamp(14px,3vw,30px));top:26px;
  width:clamp(14px,3vw,30px);height:1px;background:rgba(255,255,255,0.16);
}
.mod:hover{border-color:var(--accent);background:rgba(255,255,255,0.07);}
.mod .code-tag{align-self:flex-start;margin-bottom:var(--space-3);}
.mod h4{
  font-family:var(--font-serif);font-weight:500;font-size:var(--fs-04);line-height:1.32;
  color:#fff;margin:var(--space-2) 0 var(--space-3);
}
.mod p{font-size:var(--fs-02);line-height:1.62;color:rgba(255,255,255,0.68);margin:0 0 var(--space-5);}
.mod-link{
  margin-top:auto;font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);
  letter-spacing:0.04em;color:var(--accent-panel);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;align-self:flex-start;
}
.mod-link:hover,.mod-link:focus-visible{color:#fff;border-bottom-color:var(--accent);}
.systems-foot{
  display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap;
  margin-top:var(--space-7);padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,0.14);
}
.systems-foot p{font-size:var(--fs-02);line-height:1.62;color:rgba(255,255,255,0.62);margin:0;flex:1;min-width:240px;}
.systems-foot a{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);letter-spacing:0.05em;
  text-transform:uppercase;color:#fff;text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--r-pill);padding:11px 22px;
  transition:background var(--motion-fast);
}
.systems-foot a:hover,.systems-foot a:focus-visible{background:var(--accent);color:#fff;}

/* ══ PROJECTS ════════════════════════════════════════════════════
   The photograph is the photograph. No veil, no wash, no reduced
   opacity — including on the entries whose page is not written yet: an
   unfinished page is stated in words, never by dimming the image. */
.projects-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  grid-auto-rows:1fr;
}
.project{
  min-width:0;display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color var(--motion-base),box-shadow var(--motion-base),transform var(--motion-base);
}
.project:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lift);transform:translateY(-2px);}
.project-link{
  display:flex;flex-direction:column;flex:1 1 auto;
  text-decoration:none;color:inherit;
}
/* Formato más ancho que alto: con 1.5 la tarjeta crecía tanto que en
   un viewport de revisión no entraban a la vez el título de la
   sección, una fila completa y su leyenda. La fotografía llena el
   recuadro; no queda media tarjeta en blanco y no hay velo encima. */
.project-media{
  position:relative;flex:0 0 auto;
  aspect-ratio:2;background:var(--surface-2);overflow:hidden;
  /* The card already clips, but the media carries the radius itself so
     no engine can leave a square corner peeking above the photograph. */
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.project-media img{width:100%;height:100%;object-fit:cover;}
/* La etiqueta se apoya en la placa institucional, no en un blanco
   fijo: así conserva contraste en claro, oscuro y noche, y nunca se
   superpone a una leyenda porque vive en la esquina de la foto. */
.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;
  padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(29,45,61,0.92);border:1px solid rgba(255,255,255,0.22);
  font-family:var(--font-ui);font-size:var(--fs-00);letter-spacing:0.14em;
  text-transform:uppercase;color:#ffffff;font-weight:600;white-space:nowrap;
  box-shadow:0 2px 10px -5px rgba(0,0,0,0.7);
}
html[data-theme="night"] .badge{background:rgba(5,10,16,0.92);}
.project-body{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--space-5) var(--space-6) var(--space-6);}
.project-meta{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:var(--font-ui);font-size:var(--fs-00);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted-2);font-weight:500;
  margin-bottom:var(--space-3);
}
/* El separador es un signo, no una regla: con el token de divider se
   volvía invisible en oscuro y noche, y la meta se leía como dos
   datos pegados. Toma el gris de la propia meta, un paso más tenue. */
.project-meta .sep{color:var(--muted-2);opacity:.7;}
.project h3{
  font-family:var(--font-serif);font-weight:500;font-size:var(--fs-05);line-height:1.26;
  color:var(--text);margin:0 0 var(--space-2);letter-spacing:-0.012em;
}
.project p{font-size:var(--fs-02);line-height:1.62;color:var(--muted);margin:0 0 var(--space-5);}
.project-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  flex-wrap:wrap;margin-top:auto;padding-top:var(--space-4);
  border-top:1px solid var(--divider-soft);
}
.project-foot .chips{flex:1 1 auto;min-width:0;}
.section-head.is-tight{margin-bottom:clamp(22px,2.6vh,30px);}
.project-cta{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--accent-700);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--motion-fast);
}
.project:hover .project-cta{border-bottom-color:var(--accent);}
/* 08 · 05 — Los casos sin página publicada se presentan como ficha de
   registro documental: misma foto y misma ficha, sin llamada y con el
   estado enunciado al pie. No es un enlace roto ni una tarjeta apagada. */
.project.is-record{background:var(--surface-2);}
.project.is-record:hover{border-color:var(--divider);box-shadow:none;transform:none;}
.project.is-record .project-foot{
  justify-content:flex-start;gap:var(--space-4);
  border-top:1px solid var(--divider);
}
.project.is-record .state-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-00);letter-spacing:0.1em;
  color:var(--muted);background:transparent;
  border:1px solid var(--divider);border-radius:var(--r-pill);
  padding:5px 13px;
}
.project.is-record .state-tag::before{
  content:"";width:6px;height:6px;border-radius:2px;flex:none;
  background:var(--muted-2);
}
/* Institutional, discreet, and never a broken placeholder. */
.state-tag{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-00);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--divider);border-radius:var(--r-pill);
  padding:4px 12px;line-height:1.6;
}

/* ══ METHODS ═════════════════════════════════════════════════════
   Same grammar as the rest of the page: rounded blocks, real separation,
   one differentiating line per phase and an accordion wherever the text
   is long. No square corners, no dead grey, no black call to action, no
   decorative arrow, no blue underline, nothing under 11px. */
.methods-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-3);margin:clamp(28px,4vh,40px) 0;
}
.methods-meta div{
  background:var(--surface-2);border:1px solid var(--divider);
  border-radius:var(--r-md);padding:var(--space-5);
  display:flex;flex-direction:column;gap:5px;min-width:0;
}
.methods-meta .k{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;color:var(--muted-2);
}
.methods-meta .v{
  font-family:var(--font-ui);font-size:var(--fs-02);line-height:1.5;font-weight:500;
  color:var(--accent-900);
}
html[data-theme="dark"] .methods-meta .v,
html[data-theme="night"] .methods-meta .v{color:var(--text);}

/* 08 · 06 — Mapa de entrada: la sección más larga de la página deja
   de depender sólo del acordeón. Seis entradas con el título real de
   cada fase, cada una con su línea diferenciadora. */
.phase-map{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-3);align-items:stretch;margin-bottom:var(--space-6);
}
.phase-map a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:baseline;
  text-decoration:none;min-width:0;
  background:var(--surface-2);border:1px solid var(--divider);
  border-left:3px solid var(--phase,var(--accent));
  border-radius:var(--r-md);padding:var(--space-3) var(--space-4);
  transition:border-color var(--motion-fast),background var(--motion-fast);
}
.phase-map a:hover,.phase-map a:focus-visible{background:var(--accent-soft);border-color:var(--accent-line);border-left-color:var(--phase,var(--accent));}
.phase-map .n{
  font-family:var(--font-mono);font-weight:600;font-size:var(--fs-00);letter-spacing:0.1em;
  /* La identidad de la fase se conserva en el canto de 3px, que es
     decorativo; el numeral, que es texto de 11.25px, lleva la tinta ya
     mezclada hacia --text. Sin la mezcla, cuatro de los seis colores de
     fase caían entre 2.44:1 y 4.06:1. */
  color:var(--phase,var(--accent));
  color:color-mix(in srgb,var(--phase,var(--accent)) var(--phase-mix),var(--text));
}
.phase-map .t{
  font-family:var(--font-ui);font-size:var(--fs-01);line-height:1.45;color:var(--text);min-width:0;
}

.phases{display:flex;flex-direction:column;gap:var(--space-3);overflow-anchor:none;}
.phase{
  background:var(--surface);
  border:1px solid var(--divider);
  border-left:3px solid var(--phase,var(--accent));
  border-radius:var(--r-lg);
  overflow:hidden;
}
.phase > summary{
  display:flex;align-items:center;gap:16px;
  padding:var(--space-5) var(--space-6);
  cursor:pointer;list-style:none;
  transition:background var(--motion-fast);
}
.phase > summary::-webkit-details-marker{display:none;}
.phase > summary:hover{background:var(--accent-soft);}
.phase-num{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-01);letter-spacing:0.12em;
  color:var(--phase,var(--accent));
  color:color-mix(in srgb,var(--phase,var(--accent)) var(--phase-mix),var(--text));
  flex:none;
  border:1px solid var(--phase,var(--accent));border-radius:var(--r-pill);
  padding:3px 11px;line-height:1.6;
}
.phase-title{
  font-family:var(--font-serif);font-weight:500;font-size:var(--fs-04);line-height:1.35;
  color:var(--text);flex:1;min-width:0;
}
/* Plus / minus, not a chevron: the page carries no decorative arrows. */
.pm{
  position:relative;width:18px;height:18px;flex:none;color:var(--muted-2);
}
.pm::before,.pm::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform var(--motion-base),opacity var(--motion-base);
}
.pm::before{left:0;right:0;top:8px;height:2px;}
.pm::after{top:0;bottom:0;left:8px;width:2px;}
.phase[open] .pm::after{transform:rotate(90deg);opacity:0;}
.phase[open] > summary{background:var(--accent-soft);}
.phase-body{
  padding:0 var(--space-6) var(--space-6);
  border-top:1px solid var(--divider-soft);
  margin-top:0;padding-top:var(--space-5);
}
.phase-body p{font-size:var(--fs-02);line-height:1.72;color:var(--muted);margin:0 0 var(--space-4);max-width:74ch;}
.phase-body p:last-child{margin-bottom:0;}
.phase-body strong{color:var(--text);font-weight:600;}
.status-line{
  display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4);
}
.status-line span{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-00);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent-700);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-pill);padding:5px 13px;line-height:1.5;
}
.layer-defs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--space-3);margin-top:var(--space-5);
}
.layer-def{
  background:var(--surface-2);border:1px solid var(--divider);
  border-radius:var(--r-md);padding:var(--space-5);min-width:0;
}
.layer-def .k{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent-700);margin-bottom:var(--space-2);
}
.layer-def p{font-size:var(--fs-02);line-height:1.65;color:var(--muted);margin:0;}

/* Misma placa navy que systems, header y footer. */
.frame-block{
  background:var(--shell-bg);color:var(--panel-text);
  border-radius:var(--r-xl);padding:clamp(28px,3.4vw,44px);
  margin-top:var(--space-6);
}
.frame-block .eyebrow::after{background:rgba(255,255,255,0.18);}
.frame-block .eyebrow.is-on-panel{color:rgba(255,255,255,0.62);}
.frame-block .eyebrow .num{color:var(--accent-panel);}
.frame-block h3{
  font-family:var(--font-serif);font-weight:400;font-size:var(--fs-06);line-height:1.32;
  color:#fff;margin:0 0 var(--space-5);max-width:34ch;
}
.frame-block p{font-size:var(--fs-02);line-height:1.72;color:rgba(255,255,255,0.74);margin:0 0 var(--space-4);max-width:74ch;}
.frame-block p:last-child{margin-bottom:0;}
.frame-block strong{color:#fff;font-weight:600;}
.chain{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0;}
.chain span{
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);letter-spacing:0.08em;
  color:#fff;border:1px solid rgba(255,255,255,0.28);border-radius:var(--r-pill);
  padding:6px 15px;line-height:1.5;
}
.chain span.lead{border-color:var(--accent);background:rgba(126,166,204,0.20);}
.module-lines{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-5) 0;}
.module-lines li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:var(--fs-02);line-height:1.62;color:rgba(255,255,255,0.74);
}
.module-lines .k{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-01);letter-spacing:0.1em;
  color:var(--accent-panel);flex:none;min-width:44px;padding-top:2px;
}
.module-lines .t{min-width:0;}

.progression{
  background:var(--surface);border:1px solid var(--divider);
  border-radius:var(--r-xl);padding:clamp(26px,3vw,40px);margin-top:var(--space-6);
}
/* Una cápsula por etapa, conectadas por un hairline corto: la secuencia
   se lee como progresión y no como una tabla continua. Una sola cápsula
   por paso, sin doble marco y sin barra rectangular. */
.progression-chain{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-4);
  margin-bottom:var(--space-6);
}
.progression-chain > span{
  position:relative;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);letter-spacing:0.06em;
  color:var(--accent-700);padding:8px 18px;line-height:1.5;
  display:flex;align-items:center;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:var(--r-pill);
}
.progression-chain > span + span::before{
  content:"";position:absolute;left:calc(-1 * var(--space-4));top:50%;
  width:var(--space-4);height:1px;background:var(--accent-line);
}
@media (max-width:960px){
  .progression-chain > span + span::before{display:none;}
}
.progression p{font-size:var(--fs-02);line-height:1.72;color:var(--muted);margin:0 0 var(--space-4);max-width:74ch;}
.progression p:last-child{margin-bottom:0;}

/* ══ Utilidades editoriales ══════════════════════════════════════
   No hay sección de perfil: el CV vive en el footer, uno solo y
   siguiendo al idioma activo. Lo que queda aquí son las utilidades
   que usan Métodos y Sobre RECO-LAB. */
.mt-20{margin-top:var(--space-5);} /* nombre histórico; el valor es un paso del ritmo */
.h2-sm{font-size:clamp(var(--fs-05),2.1vw,var(--fs-07));margin-bottom:var(--space-5);}
.limits-block{margin-top:clamp(28px,4vh,44px);}

/* ══ FOOTER · institutional signature ════════════════════════════
   It closes the page; it does not explain the project a second time. */
.ftr{
  background:var(--shell-bg);color:rgba(255,255,255,0.72);
  padding:clamp(40px,6vh,64px) 0 0;margin-top:clamp(48px,7vh,80px);
}
/* 08 · 09 — El cierre lleva firma institucional compacta, no un segundo
   hero: marca a escala de firma, los cinco campos en una línea y la
   descripción breve, todo encima del nombre. */
.ftr-top{
  padding-bottom:clamp(20px,3vh,28px);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-2);
}
.ftr .wordmark{
  align-self:flex-start;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-05);line-height:1.1;letter-spacing:-0.02em;
}
.ftr .wordmark em{color:var(--accent);}
@media (max-width:1180px){
  .ftr-fields{white-space:normal;}
}
.ftr-grid{
  display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(0,0.8fr) minmax(0,1.3fr);
  gap:clamp(28px,5vw,72px);padding-bottom:clamp(30px,5vh,44px);
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:clamp(26px,4vh,38px);
}
.ftr-fields{
  grid-area:fields;
  display:flex;align-items:baseline;gap:9px;
  font-size:var(--fs-00);line-height:1.6;letter-spacing:0.1em;text-transform:uppercase;
  color:#ffffff;margin-top:0;
  /* De Economía urbana a Recuperación en una sola línea en escritorio.
     Debajo de 760px vuelve a envolver, que es lo correcto ahí. */
  white-space:nowrap;
}
@media (max-width:760px){.ftr-fields{white-space:normal;}}
.ftr-fields .dot{
  width:6px;height:6px;border-radius:50%;background:var(--teal);
  flex:none;margin-top:7px;animation:recoBlink 4.5s ease-in-out infinite;
}
.ftr-fields .txt{min-width:0;}
.ftr-blurb{
  grid-area:blurb;
  font-size:var(--fs-01);line-height:1.6;max-width:74ch;
  margin:0;color:rgba(255,255,255,0.62);
}
.ftr-rule{height:1px;background:rgba(255,255,255,0.14);margin:var(--space-7) 0;max-width:380px;}
.ftr-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-04);color:#fff;line-height:1.2;}
.ftr-role{font-size:var(--fs-01);line-height:1.5;color:rgba(255,255,255,0.6);margin-top:3px;}
.ftr-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--space-5);}
.ftr-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-01);line-height:1.2;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,0.28);border-radius:var(--r-pill);
  padding:9px 17px;transition:border-color var(--motion-fast),color var(--motion-fast);
}
.ftr-btn:hover,.ftr-btn:focus-visible{border-color:var(--accent);color:var(--accent-panel);}
.ftr-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.ftr-h{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.56);margin-bottom:var(--space-5);
}
.ftr-list{display:flex;flex-direction:column;gap:11px;}
.ftr-list a,.ftr-list .flat{
  display:flex;gap:9px;align-items:flex-start;
  font-size:var(--fs-02);line-height:1.5;text-decoration:none;color:rgba(255,255,255,0.75);
}
.ftr-list a:hover,.ftr-list a:focus-visible{color:var(--accent-panel);}
.ftr-list .n{
  font-family:var(--font-ui);font-size:var(--fs-00);line-height:1.85;color:var(--accent-panel);flex:none;
}
.ftr-list .t{min-width:0;}
.ftr-list .flat{color:rgba(255,255,255,0.6);}
/* Los proyectos se nombran, no se numeran a secas: el índice y el
   caso en una línea, el título del caso debajo. Ninguna entrada dice
   "Pronto": las dos que aún no tienen página se enuncian y ya. */
.ftr-list.is-projects li{margin-bottom:2px;}
.ftr-list.is-projects .tt{display:block;font-size:var(--fs-02);line-height:1.45;}
.ftr-list.is-projects .flat .tt{color:rgba(255,255,255,0.55);}
/* El CV es un enlace más de la fila de contacto, discreto, sin decir
   PDF y sin repetir ES / EN: el archivo sigue al idioma activo. */
.ftr-btn.is-cv{border-color:var(--accent);}
.ftr-btn.is-cv:hover,.ftr-btn.is-cv:focus-visible{background:rgba(255,255,255,0.07);color:#fff;border-color:var(--accent);}
.ftr-bot{
  border-top:1px solid rgba(255,255,255,0.14);
  padding:var(--space-5) 0 var(--space-7);text-align:center;
  font-size:var(--fs-00);letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.56);
}

/* ══ Responsive ══════════════════════════════════════════════════ */
@media (max-width:1180px){
  .nav{gap:14px;padding-left:16px;}
  .mods{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lines-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:1080px){
  .nav{display:none;}
  .hdr-sep{display:none;}
  .burger{display:inline-block;}
  .about-grid{grid-template-columns:1fr;}
  .line-panel-grid{grid-template-columns:1fr;gap:var(--space-6);}
  .line-detail{min-height:0;}
}

@media (max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;gap:clamp(26px,5vh,40px);
  }
  .hero-copy{max-width:none;}
  .hero h1{font-size:clamp(50px,11vw,80px);}
  .hero-globe{max-width:460px;justify-self:center;width:100%;}
  reco-globe{max-height:none;}
  .projects-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
  .found{grid-template-columns:1fr;align-items:start;}
  .found .btn{justify-self:start;}
  .ftr-grid{grid-template-columns:1fr;gap:clamp(26px,5vh,36px);}
  .ftr-rule{max-width:none;}
}

@media (max-width:720px){
  :root{--gutter:20px;}
  .lines-grid,.mods{grid-template-columns:1fr;}
  .hdr-row{height:60px;gap:14px;}
  /* Scoped to the bar: the drawer keeps its own copy, so a phone never
     loses light / dark / night. */
  .hdr-end .mood{display:none;}
  .hero h1{font-size:clamp(44px,13vw,62px);}
  .hero-globe .reg{display:none;}
  .systems{padding:26px 20px;border-radius:var(--r-lg);}
  .phase > summary{padding:var(--space-4) var(--space-5);gap:12px;}
  .phase-title{font-size:var(--fs-03);}
  .phase-body{padding:var(--space-5) var(--space-5) var(--space-5);}
  .h2{max-width:none;}
  /* La secuencia de Métodos conserva un solo marco: en pantalla
     estrecha se apila dentro de la misma cápsula, no se rompe en
     cinco cápsulas sueltas. */
  .progression-chain{border-radius:var(--r-lg);flex-direction:column;}
  .progression-chain span{border-left:0;border-top:1px solid var(--accent-line);}
  .progression-chain span:first-child{border-top:0;}
}

/* ══ Sin salto de escala al hacer clic ═══════════════════════════
   Nada en esta página escala al pulsar. Las tres causas reales del
   defecto se cierran aquí:
     · doble tap de los navegadores móviles sobre cualquier control
       (touch-action:manipulation);
     · auto-zoom de iOS sobre controles por debajo de 16px, que sólo
       se dispara en campos de formulario y por eso el select/input
       queda anclado a 16px;
     · reflow lateral al aparecer o desaparecer la barra de scroll,
       que en escritorio se leía como "la página cambió de tamaño"
       (scrollbar-gutter:stable).
   Nada de esto se resuelve reduciendo tipografías. */
html{scrollbar-gutter:stable;}
a,button,summary,[role="tab"],label{touch-action:manipulation;}
input,select,textarea{font-size:16px;} /* piso funcional anti-zoom de iOS, no un paso de la escala */

/* The mood control leaves the bar on a phone and reappears in the drawer,
   so a narrow screen never loses light / dark / night. */
.drawer-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:var(--space-4) 2px var(--space-2);
  border-top:1px solid rgba(255,255,255,0.14);
}
.drawer-controls .k{
  font-size:var(--fs-00);letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.56);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .sig b,.ftr-fields .dot{animation:none;}
  .sig b{opacity:.45;}
  .project,.line,.mod{transition:none;}
  .mood-thumb{transition:none;}
  .project:hover{transform:none;}
}

@media print{
  .hdr,.drawer,.hero-globe,.burger{display:none;}
  .systems,.frame-block{background:#fff;color:#000;}
}

/* ══ 08 · 13 — Identidad por módulo en la placa de sistemas ═══════
   Cada módulo lleva su propio canto superior y su etiqueta en color,
   de modo que TMD, HAR, FAI y UPI no se lean como cuatro cajas
   idénticas. Los cuatro tonos vienen de la paleta del sistema; el
   mostaza intenso queda fuera y el terracota se aclara para que la
   etiqueta mantenga contraste sobre el navy en los tres modos. */
.mod{border-top:3px solid var(--mod,var(--accent));}
.mod .code-tag{
  color:#fff;
  background:color-mix(in srgb,var(--mod,var(--accent)) 34%,transparent);
  border-color:color-mix(in srgb,var(--mod,var(--accent)) 66%,transparent);
}
.mod .mod-eyebrow{color:color-mix(in srgb,var(--mod,var(--accent)) 34%,#ffffff);}
.mod:hover{border-top-color:var(--mod,var(--accent));border-color:var(--mod,var(--accent));}
.mod:hover .mod-link{color:#fff;}

/* En móvil los cuatro territorios pasan a dos por fila en lugar de
   desbordar la línea única del escritorio. */
@media (max-width:520px){
  .hero-scope{flex-wrap:wrap;justify-content:flex-start;gap:var(--space-1) var(--space-5);}
}

/* El CV vive en la navegación del footer como enlace discreto. */
.ftr-list .is-cv{letter-spacing:0.06em;}