/* ============ R&A · home · "El trazo" ============ */

/* ---------- tipografía: Hanken Grotesk variable, alojada en el sitio (licencia OFL en assets/fonts/OFL.txt) ----------
   La dirección va desde la raíz: LiteSpeed junta las hojas en /wp-content/litespeed/css/ y una relativa se rompería.
   Tiene que ser idéntica a la del preload de inc/assets.php. Los archivos se sirven con caché de un año: si cambia el
   archivo de la fuente, renombrarlo (p. ej. -v2) acá y en el preload. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/ra-trazo/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/wp-content/themes/ra-trazo/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* respaldo con las medidas de Hanken: mientras llega la fuente, Arial ocupa el mismo lugar y el cambio no mueve nada.
   Ancho: el promedio de los textos del sitio (fontTools), afinado en Chrome para que ningún título cambie de renglón en
   la home ES/EN, Nosotros y un servicio (1440 y 390). Alto: las métricas de Hanken (1000/−303/0 en 1000), divididas por la escala.
   Dos caras: el texto corrido sobre Arial (Hanken 400) y los títulos y botones (600 a 900) sobre Arial Bold (Hanken 700).
   Por lo mismo, los anchos máximos van en em y no en ch (el "0" de cada fuente mide distinto; en Hanken, 1ch = 0,56em). */
@font-face {
  font-family: "Hanken Fallback";
  font-style: normal;
  font-weight: 100 599;
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica");
  size-adjust: 100.4%;
  ascent-override: 99.6%;
  descent-override: 30.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  font-style: normal;
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold");
  size-adjust: 94.2%;
  ascent-override: 106.16%;
  descent-override: 32.17%;
  line-gap-override: 0%;
}
/* Android no tiene Arial: la misma idea sobre Roboto, en otra familia (si la cara Arial no está, el navegador pasa a esta).
   Medida igual (fontTools) y afinada en Chrome: ningún título, bajada ni botón cambia de renglón en la home ES/EN, Nosotros
   y un servicio, a 1440 y 390. */
@font-face {
  font-family: "Hanken Fallback Roboto";
  font-style: normal;
  font-weight: 100 599;
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 100.6%;
  ascent-override: 99.4%;
  descent-override: 30.12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback Roboto";
  font-style: normal;
  font-weight: 600 900;
  src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 101%;
  ascent-override: 99.01%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  --white: #FFFFFF;
  --ink: #121212;
  --ink-2: #1D1D1D;
  --orange: #E64E29;
  --orange-ink: #CB421E;           /* el mismo naranja, un punto más oscuro: textos chicos sobre blanco (4,8:1) */
  --gray: #5C5C5C;                 /* sobre blanco: 6,6:1 */
  --gray-d: rgba(255, 255, 255, 0.66);
  --rule: rgba(18, 18, 18, 0.14);
  --rule-d: rgba(255, 255, 255, 0.16);
  --font: "Hanken Grotesk", "Hanken Fallback", "Hanken Fallback Roboto", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gut: clamp(20px, 3.4vw, 56px);
  --nav-h: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--orange); color: var(--ink); }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { padding-inline: var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* peso variable: por defecto (sin JS) los títulos quedan en su peso final */
[data-weight], [data-hweight] { font-variation-settings: "wght" var(--w, 700); font-weight: 700; }

/* ---------- títulos que se escriben al scrollear (letra por letra) ---------- */
.ch { opacity: 0.16; }
.ch.on { opacity: 1; color: var(--flash, var(--orange)); }
.ch.done { opacity: 1; }
.estudio { --flash: var(--ink); }
.word { display: inline-block; white-space: nowrap; }

/* ---------- líneas de fondo ---------- */
.fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .footer { position: relative; z-index: 1; }

/* ---------- rótulo al costado del título (no apilado) ---------- */
.tag { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--orange-ink); }
.labelled { display: grid; grid-template-columns: minmax(118px, 13%) minmax(0, 1fr); column-gap: 20px; align-items: start; }
.labelled .tag { padding-top: 0.9em; }
.labelled h2 { font-size: clamp(2.375rem, 5.2vw, 5.25rem); line-height: 0.96; letter-spacing: -0.035em; }
.lead { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.5; color: var(--gray); max-width: 34em; text-wrap: pretty; }
.head-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); align-items: end; }

/* sin el resaltado azul del navegador al tocar: cada elemento tiene su propia respuesta al apretar */
a, button, summary, label, select { -webkit-tap-highlight-color: transparent; }
/* ---------- botones: magnéticos; al pasar, una línea cruza por el medio y se engrosa hasta llenarlos ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 26px;
  font-weight: 650;
  font-variation-settings: "wght" 650;
  font-size: 1rem;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  /* el magnetismo va en translate (lo escribe el JS) y el apretado en scale: son propiedades separadas y no se pisan */
  transition: color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), translate 420ms var(--ease-out), scale 160ms var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 200ms var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; z-index: -1;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform 200ms var(--ease-out) 110ms;
}
/* al apretar (también en el celular) el relleno se completa */
.btn:active::after { transform: scaleX(1); transform-origin: left; transition: transform 160ms var(--ease-out); }
.btn:active::before { clip-path: inset(0 0 0 0); transition: clip-path 200ms var(--ease-out) 80ms; }
.btn span { position: relative; }
.btn:active { scale: 0.97; transition: color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), translate 420ms var(--ease-out), scale 120ms var(--ease-out); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink::before { background: var(--orange); }
.btn--line { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--line::before, .btn--line::after { background: var(--ink); }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--orange::before, .btn--orange::after { background: var(--white); }
.btn--big { min-height: 68px; padding: 0 34px; font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: scaleX(1); transform-origin: left; transition: transform 220ms var(--ease-out); }
  .btn:hover::before { clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out) 170ms; }   /* los tiempos que aprobó Juan: primero se ve la línea */
  /* el texto cambia de color recién cuando el relleno ya lo cubre */
  .btn:hover { transition: color 180ms ease 230ms, box-shadow 180ms ease 230ms, translate 420ms var(--ease-out), scale 160ms var(--ease-out); }
  .btn:hover:active { transition: color 180ms ease 230ms, box-shadow 180ms ease 230ms, translate 420ms var(--ease-out), scale 120ms var(--ease-out); }
  .btn--ink:hover { color: var(--ink); }
  .btn--line:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
}
[data-theme="dark"] .btn--line::before, [data-theme="dark"] .btn--line::after { background: var(--white); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .btn--line:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--white); } }

/* ---------- navegación: siempre a mano, toma el color de la sección ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 36px);
  padding-inline: var(--gut);
  color: var(--ink);
  transition: height 320ms var(--ease-out), background-color 320ms ease, color 320ms ease, box-shadow 320ms ease;
}
.nav.is-compact { height: 62px; background: var(--white); box-shadow: 0 1px 0 var(--rule); }
.nav[data-theme="dark"] { color: var(--white); }
.nav.is-compact[data-theme="dark"] { background: var(--ink); box-shadow: 0 1px 0 var(--rule-d); }
.nav.is-compact[data-theme="orange"] { background: var(--orange); box-shadow: 0 1px 0 rgba(18,18,18,.18); }
.nav__logo { flex: none; width: 40px; height: 40px; }
.nav__logo img { width: 40px; height: 40px; }
.nav__links { margin-left: auto; }
.nav__links ul, .nav__sheet ul { list-style: none; margin: 0; padding: 0; }
.nav__links > ul { display: flex; gap: clamp(14px, 1.8vw, 30px); }
.nav__links a, .nav__lang {
  font-size: 0.9375rem;
  font-weight: 550;
  font-variation-settings: "wght" 550;
  text-decoration: none;
  padding-block: 8px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat;
  transition: background-size 180ms var(--ease-out), font-variation-settings 240ms var(--ease-out);
}
.nav__links a[aria-current="true"] { background-size: 100% 1.5px; font-variation-settings: "wght" 750; }
/* una copia invisible en negrita reserva el ancho: al marcarse la sección activa, las vecinas no saltan */
.nav__links > ul > li > a { display: inline-flex; flex-direction: column; }
.nav__links > ul > li > a::after { content: attr(data-t); font-variation-settings: "wght" 750; height: 0; visibility: hidden; overflow: hidden; pointer-events: none; }
/* un solo subrayado viaja entre las secciones (lo crea micro.js; cuelga de la barra, desde su mitad) */
.nav__links > ul { position: relative; }
.nav__ind {
  position: absolute; left: 0; top: 50%; width: 1px; height: 1.5px; background: currentColor; pointer-events: none;
  transform-origin: 0 0; opacity: 0;
  transition: transform 380ms var(--ease-in-out), opacity 200ms ease;
}
.nav__ind.is-on { opacity: 1; }
.nav__links.has-ind > ul > li > a[aria-current="true"] { background-size: 0 1.5px; }
/* la línea que nace en el logo: avanza con la lectura y cierra en el cuadrado (la crea micro.js) */
.nav__progress { position: absolute; left: var(--gut); right: var(--gut); bottom: -1px; height: 3px; pointer-events: none; }
.nav__progress i { position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(0); }
.nav__progress b {
  position: absolute; right: -5px; top: -5px; width: 13px; height: 13px; background: var(--orange);
  opacity: 0; transform: scale(0.6); transition: opacity 200ms ease, transform 260ms var(--ease-out);
}
.nav__progress.is-end b { opacity: 1; transform: none; }
.nav[data-theme="orange"] .nav__progress i, .nav[data-theme="orange"] .nav__progress b { background: var(--ink); }
.nav__lang { padding: 7px 11px; background: none; box-shadow: inset 0 0 0 1px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background-size: 100% 1.5px; background-position: 0 100%; transition: background-size 280ms var(--ease-out), font-variation-settings 240ms var(--ease-out); }
}
.nav__links .has-sub { position: relative; }
.nav__links .sub {
  position: absolute; top: 100%; left: -18px; min-width: 260px; padding: 10px 18px 14px;
  background: var(--white); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.nav__links .sub a { display: block; padding: 9px 0; }
.nav__links .has-sub:hover .sub, .nav__links .has-sub:focus-within .sub {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 0s;
}
.nav__menu { display: none; }

/* ---------- el trazo ---------- */
.trazo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.trazo path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.trazo--ink path { stroke: var(--ink); }
.trazo__end {
  fill: var(--orange); transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 200ms var(--ease-out);
}
/* cuando llega el trazo, el cuadrado aterriza (y si se vuelve para atrás, se va más rápido de lo que vino) */
.trazo__end.is-on { opacity: 1; transform: none; transition: opacity 160ms ease, transform 320ms var(--ease-out); }

/* títulos de portada de las páginas interiores: hasta que ra_renglones() les fija los renglones al peso final (.is-medido) no
   se muestran ni entran de peso (.renglones la pone el <head>; sin JS no está). Si el navegador pintaba antes, el título salía
   en un renglón a peso 200 y después saltaba. Casi siempre el script corre antes del primer pintado y esto no se ve. */
.renglones .s-hero__title:not(.is-medido) { opacity: 0; animation: none; }

/* ============ 1. portada ============ */
/* con JS la portada queda fija un tramo de scroll: ese tramo desenreda el ovillo. Va con .js-pin (la pone el script que sigue
   a Áreas, antes del primer pintado, con los altos de los dos bloques fijos): si se entra por un ancla de más abajo, nada crece
   después y la página no salta */
@media (prefers-reduced-motion: no-preference) {
  .js-pin .hero-pin { height: calc(var(--hero-h, 100svh) + 130svh); }
  .js-pin .hero { position: sticky; top: var(--hero-top, 0px); }
}
.hero {
  position: relative;
  min-height: 100svh;
  overflow-x: clip;   /* lo que se asoma de costado (el ovillo, el hilo) no agranda la página; clip no rompe el sticky */
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(24px, 4vw, 64px);
  padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) var(--gut) clamp(32px, 6vh, 64px);
}
/* el título manda: más grande que los H2 y con sus renglones fijos (los <br> del texto y los que calcula el script de la
   portada con el peso final), así la entrada de peso 200 → 700 no los vuelve a partir. El tamaño no cambia nunca con el scroll. */
.hero__title {
  position: relative; z-index: 4;
  grid-column: 1 / -1; grid-row: 1; align-self: center;
  font-size: clamp(2.75rem, 7.2vw, 8.75rem);
  max-width: 8.6em;
  line-height: 0.94;
  letter-spacing: -0.042em;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  animation: hero-weight 1600ms var(--ease-out) both;
}
/* inglés: la tercera línea ("Committed to your company.") es mucho más larga. A 7,2vw no entra, y para que entrara entera el
   título tendría que bajar a ~5vw (más chico que los H2): va un poco más chico que en español y la frase se parte en dos
   renglones ("Committed to / your company.") en vez de dejar "company." sola (6/10). Los cortes los fija ra_renglones()
   (inc/helpers.php) con el peso final y sin viudas, como en el celular; el texto no cambia */
.hero__title:lang(en) { font-size: clamp(2.75rem, 6.4vw, 7.75rem); max-width: 9em; }
/* con los renglones ya fijados por el script de la portada, ninguno se vuelve a partir durante la entrada */
.hero__title.is-lineado { white-space: nowrap; }
/* el subrayado: la misma línea (y el mismo lugar) que después escribe el hilo; sin JS o sin movimiento es un fondo CSS */
.hero__title em {
  --ul: 4px;
  font-style: normal;
  background: linear-gradient(var(--orange), var(--orange)) left 0 bottom calc(0.09em - var(--ul) / 2) / 100% var(--ul) no-repeat;
}
@media (prefers-reduced-motion: no-preference) { html:not(.hilo) .hero__title em { animation: underline 1000ms var(--ease-out) 700ms both; } }
@keyframes hero-weight { from { font-variation-settings: "wght" 200; } to { font-variation-settings: "wght" 700; } }
@keyframes underline { from { background-size: 0 var(--ul); } }
/* el ovillo: un cuadro a la derecha del título (el script de la portada calcula el lugar antes del primer pintado);
   sin JS, un lugar aproximado arriba a la derecha */
.hero__art {
  position: absolute; z-index: 1; pointer-events: none;
  --s: var(--art-s, min(34vw, 62svh));
  top: var(--art-top, calc(var(--nav-h) + 3svh));
  /* sin JS: pegado al margen, y nunca más allá del borde de la pantalla (a 1440 el cuadro se salía 10 px) */
  left: var(--art-left, calc(100% - var(--s) * 0.88 - max(var(--gut), var(--s) * 0.12)));
  width: var(--s); height: var(--s);
  /* si la tipografía llega tarde, el ovillo se corre unos px (translate): que se deslice, no que salte */
  transition: translate 500ms var(--ease-out);
}
/* con JS, el ovillo no se muestra hasta que el script de la portada lo ubica (si el navegador pintara antes, se correría) */
.ovillo-js .hero__art:not(.is-puesto) { visibility: hidden; }
.hero__art-fallback, .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* el hilo entero, más claro y fino (los tramos de atrás, como la niebla del 3D), y encima, en naranja, sus tramos de adelante.
   El grosor es el del hilo 3D, un poco menos: el tubo se ve más fino que su diámetro (los bordes quedan en sombra).
   En px: dentro del dibujo 1px es una unidad (Safari no acepta un número sin unidad que sale de un calc). */
.hero__art-fallback .atras { stroke: #E2917F; stroke-width: calc(var(--hilo-w, var(--hilo-w-def, 26)) * 0.68px); stroke-linejoin: round; }
.hero__art-fallback .frente { stroke: var(--orange); stroke-width: calc(var(--hilo-w, var(--hilo-w-def, 26)) * 0.9px); stroke-linejoin: round; stroke-linecap: butt; }
/* el ovillo se arma desde el primer cuadro: el hilo se dibuja de punta a punta (la clase .hilo la pone el <head>).
   Misma curva y duración que la entrada del 3D, que sigue desde donde va el dibujo. Cada tramo de adelante aparece recién
   cuando el armado pasa por él (--t: cuándo empieza, --d: cuánto dura, --e: la curva del armado recortada a su tramo). */
@media (prefers-reduced-motion: no-preference) {
  .hilo .hero__art-fallback .atras {
    stroke-dasharray: 1 1;
    animation: hilo-arma calc(var(--hilo-dur, 1600ms) * var(--lento, 1)) cubic-bezier(0.65, 0, 0.35, 1) calc(var(--hilo-delay, 0ms) * var(--lento, 1)) both;
  }
  .hilo .hero__art-fallback .frente path {
    stroke-dasharray: 1 1;
    animation: hilo-tramo calc(var(--hilo-dur, 1600ms) * var(--d) * var(--lento, 1)) var(--e, linear) calc((var(--hilo-delay, 0ms) + var(--hilo-dur, 1600ms) * var(--t)) * var(--lento, 1)) both;
  }
  /* el subrayado lo escribe la punta del hilo */
  .hilo .hero__title em { background: none; }
}
@keyframes hilo-arma { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hilo-tramo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* cuando llega el 3D toma la posta: el dibujo se desenfoca y se va, el lienzo entra (el desenfoque tapa la diferencia) */
/* (el lienzo, debajo del dibujo y entero desde el primer cuadro; solo el dibujo se va: las opacidades nunca suman más de 1,
   con los dos cruzándose se veía el hilo doble) */
.hero__art-fallback { z-index: 1; transition: opacity calc(200ms * var(--lento, 1)) var(--ease-out), filter calc(200ms * var(--lento, 1)) var(--ease-out); }
.hero__gl { z-index: 0; opacity: 0; }
.hero.is-3d .hero__gl { opacity: 1; }
.hero.is-3d .hero__art-fallback { opacity: 0; filter: blur(2px); }
/* ventana de industrias dentro del título (ya no se usa) */
.hero__window {
  position: relative;
  display: inline-block;
  vertical-align: -0.035em;
  width: 2.9em;
  height: 0.72em;
  margin-left: 0.2em;
  overflow: hidden;
  background: var(--ink);
  animation: window-in 1200ms var(--ease-out) 300ms both;
}
@keyframes window-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__window img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition: clip-path 1000ms var(--ease-in-out), transform 5000ms var(--ease-out);
}
.hero__window img.is-on { clip-path: inset(0 0 0 0); transform: scale(1); }
.hero__window img.is-off { clip-path: inset(0 0 0 0); }
.hero__foot {
  position: relative; z-index: 4;
  grid-column: 1 / -1; grid-row: 2;
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) minmax(0, 1.2fr) auto;
  gap: 24px clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.hero__tag { align-self: start; text-wrap: balance; }   /* si no entra en un renglón, se corta parejo (sin una palabra sola) */
.hero__lead { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.5; color: var(--gray); max-width: 32em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* tablet apaisada y escritorio chico: los botones bajan debajo de la bajada (si no, la bajada queda en una columna angostísima) */
@media (min-width: 821px) and (max-width: 1100px) {
  /* el rótulo toma su ancho (entra en un renglón, en ES y EN); la bajada, lo que queda (tiene tope de 32em) */
  .hero__foot { grid-template-columns: minmax(150px, max-content) minmax(0, 1.5fr); }
  .hero__actions { grid-column: 2; justify-content: flex-start; }
}

/* ============ 2. áreas: recorrido horizontal ============ */
.areas { position: relative; }
.areas__pin { position: relative; }
.areas__track { position: relative; display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x proximity; }
.panel { flex: none; position: relative; }
.panel--head {
  width: min(560px, 38vw);
  padding: clamp(40px, 12vh, 140px) var(--gut) 18vh;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
.panel--head .labelled { grid-template-columns: 1fr; row-gap: 18px; }
.panel--head .labelled .tag { padding-top: 0; }
.panels { display: flex; list-style: none; margin: 0; padding: 0; }
.panel--area { --riel-w: 4px; width: clamp(300px, 31vw, 520px); border-left: 1px solid var(--rule); scroll-snap-align: start; }
.panel--area a {
  position: relative; isolation: isolate;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 12vh clamp(22px, 2.6vw, 44px) 22vh;
  text-decoration: none;
}
/* el gesto del botón en grande: la línea del riel (82 % del alto, donde el trazo ya cruza la tarjeta) entra de izquierda a
   derecha y enseguida se engrosa hacia arriba y hacia abajo hasta llenar la tarjeta. Al salir, el relleno se cierra de vuelta
   a la línea y la línea se retira hacia la derecha, más rápido. Todo con transiciones: si el mouse barre varias, nada salta */
.panel--area a::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--orange);
  clip-path: inset(82% 0 18% 0); transition: clip-path 200ms var(--ease-out);   /* nace del riel, con alto cero (1/10: con 4 px quedaba una franja fija en cada tarjeta y el trazo parecía ya dibujado) */
}
/* la línea va con dos bordes de recorte (como la de las fotos de las notas): cambiar de lado no la hace saltar */
.panel--area a::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(82% - var(--riel-w) / 2); height: var(--riel-w); z-index: -1;
  background: var(--orange); transform: scaleX(0); transform-origin: right; pointer-events: none;
  transition: transform 200ms var(--ease-out) 110ms, background-color 120ms ease;   /* con el mouse, donde el riel todavía no llegó: la línea lo adelanta */
}
.panel__title { font-size: clamp(2rem, 3.3vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; }
/* con el recorrido fijo el título engorda al pasar por el centro (main.js, 300 → 750). Una copia invisible al peso máximo, en
   la misma celda, le reserva el alto: si en negrita corta en dos renglones, la caja ya los tenía y el texto y el botón no bajan
   (en inglés, Entertainment Law: CLS 0,002–0,005 al pasar por Áreas) */
.js-pin .panel__title { display: grid; }
.js-pin .panel__title > span, .js-pin .panel__title::after { grid-area: 1 / 1; }
.js-pin .panel__title::after { content: attr(data-t); font-variation-settings: "wght" 750; visibility: hidden; pointer-events: none; }
.panel__text { color: var(--gray); max-width: 26em; transition: color 200ms ease; }
.panel__go {
  width: 44px; height: 44px; border: 1.5px solid currentColor; display: grid; place-items: center;
  transition: transform 420ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.panel__go::before { content: ""; width: 14px; height: 14px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateX(-2px) rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  /* el hover ya no pinta por CSS: con el mouse quieto, al scrollear las tarjetas pasaban por debajo del cursor y quedaban dos
     pintadas (la del mouse y la del trazo). main.js decide una sola, .is-trazo: la del mouse si se movió y no se está
     scrolleando; si no, la que recorre el trazo (1/10) */
  /* al hacer clic se hunde apenas, como el botón. En táctil no: ahí la tarjeta ocupa la pantalla y el dedo también scrollea */
  .panel--area a { transition: scale 160ms var(--ease-out); }
  .panel--area a:active { scale: 0.99; transition-duration: 120ms; }
}
.panel--more {
  width: clamp(340px, 38vw, 600px); border-left: 1px solid var(--rule);
  padding: 12vh clamp(22px, 3vw, 56px) 22vh;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.more { list-style: none; margin: 0; padding: 0; width: 100%; }
.more a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  font-size: clamp(1.1875rem, 1.65vw, 1.625rem); line-height: 1.15; letter-spacing: -0.015em;
  font-weight: 500; font-variation-settings: "wght" 500; text-decoration: none;
  transition: font-variation-settings 260ms var(--ease-out), transform 320ms var(--ease-out), color 200ms ease;
}
.more li { border-top: 1px solid var(--rule); }
.more a::after {
  content: ""; flex: none; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translateX(-6px) rotate(45deg); opacity: 0; transition: opacity 200ms ease, transform 320ms var(--ease-out);
}
.more li:last-child { border-bottom: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) {
  .more a:hover { font-variation-settings: "wght" 780; transform: translateX(14px); color: var(--orange); }
  .more a:hover:active { transform: translateX(14px) scale(0.985); }
  .more a:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); }
}
.more a:active { transform: scale(0.985); }
/* al llegar el trazo, las prácticas entran una tras otra */
@media (prefers-reduced-motion: no-preference) {
  .js-pin .more li { opacity: 0; transform: translateX(28px); transition: opacity 160ms ease, transform 200ms var(--ease-out); }
  .js-pin .panel--more.is-near .more li { opacity: 1; transform: none; transition: opacity 420ms ease, transform 620ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
}
.rail { display: none; }
.trazo--entry { display: none; }
.js .trazo--entry { display: block; }

/* modo fijado (lo activa el JS en escritorio): el scroll vertical mueve el recorrido de costado */
.js-pin .areas__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* recorta solo de costado: la hoja naranja sale por abajo del bloque cuando la pantalla es más alta que él (celular con la
   barra del navegador oculta) y tapa lo que asoma debajo hasta El estudio */
@supports (overflow: clip) { .js-pin .areas__pin { overflow: visible; overflow-x: clip; } }
.js-pin .areas__track { overflow: visible; height: 100%; will-change: transform; scroll-snap-type: none; }
.js-pin .rail { display: block; position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; overflow: visible; }
.js-pin .rail path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-pin .trazo--entry { display: block; }
.js-pin .panel--area::after, .js-pin .panel--more::after {
  content: ""; position: absolute; left: -7px; top: 82%; width: 13px; height: 13px; margin-top: -6.5px;
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 420ms var(--ease-out), opacity 220ms ease;
  z-index: 2;
}
.js-pin .panel.is-passed::after { background: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); transform: scale(1.25); }
/* con la hoja en pantalla, los cuadraditos se apagan (si no, asomaban por arriba de ella); se van más rápido de lo que vuelven */
.js-pin .areas.con-hoja .panel::after { opacity: 0; transition-duration: 300ms, 300ms, 420ms, 120ms; }
/* costura áreas → el estudio: en el final del recorrido, el riel se engrosa hacia abajo hasta el pie del bloque (donde empalma
   El estudio) y después su borde curvo sube y tapa el bloque (main.js, solo transform). Sin JS o con movimiento reducido no existe. */
.areas__hoja, .areas__borde { display: none; }
.js-pin .areas { --borde-a: clamp(72px, 12vw, 150px); }
.js-pin .areas__hoja, .js-pin .areas__borde {
  display: block; position: absolute; left: 0; top: 0; width: 100%; z-index: 4;
  pointer-events: none; visibility: hidden; transform-origin: 0 0;
}
.js-pin .areas__hoja { height: 100%; background: var(--orange); }
.js-pin .areas__borde { height: var(--borde-a); overflow: visible; fill: var(--orange); transform-origin: 0 100%; }

/* ============ 3. el estudio ============ */
.estudio { position: relative; color: var(--ink); padding: 26vh 0 22vh; margin-top: -1px; }
.estudio__inner { position: relative; z-index: 2; }
.estudio .tag { color: var(--ink); }
.estudio h2 { color: var(--white); max-width: 7.84em; /* 14ch de Hanken */ }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); margin: clamp(56px, 10vh, 128px) 0 0; padding-left: calc(min(13%, 200px) + 20px); }
.figures div { border-top: 1.5px solid var(--ink); padding-top: 20px; }
.figures dt { color: var(--white); font-size: clamp(3.75rem, 8vw, 8.5rem); font-weight: 750; font-variation-settings: "wght" 750; letter-spacing: -0.05em; line-height: 0.88; font-variant-numeric: tabular-nums; }
.figures dd { margin: 14px 0 0; font-weight: 600; font-variation-settings: "wght" 600; max-width: 15em; }
/* las hojas son rectángulos de color plano: la costura curva la pone la tapa de la hoja que sigue (.hoja-tapa) */
.estudio::before, .desk::before, .contacto::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.estudio::before { background: var(--orange); }
/* pruebas (?estudio=domo, solo en las copias locales): El estudio vuelve a su domo, para comparar */
.estudio__sheet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; fill: var(--orange); }
.ab-domo .estudio::before { display: none; }

/* ---------- costuras: la tapa curva de cada hoja oscura asoma sobre la sección anterior ----------
   Una curva fija por hoja (en el HTML); main.js solo le cambia la escala: entra plana, se abomba con el borde a media
   pantalla y vuelve a plana arriba. Sin JS o con movimiento reducido, bordes rectos. */
.hoja-tapa { display: none; --borde-a: clamp(64px, 11vw, 160px); }   /* más pronunciada (30/9): en el celular 64 px */
@media (prefers-reduced-motion: no-preference) {
  .js .hoja-tapa {
    display: block; position: absolute; left: 0; bottom: calc(100% - 1px); z-index: 1;
    width: 100%; height: calc(var(--borde-a) * 1.35 * var(--amp, 1));
    overflow: visible; pointer-events: none; fill: var(--ink);
    transform-origin: 50% 100%; transform: scaleY(0);
  }
}
.contacto > .hoja-tapa { --amp: 0.85; }   /* el cierre, más calmo */

/* ============ 4. vaca muerta desk ============ */
.desk { position: relative; color: var(--white); padding: 26vh 0 20vh; margin-top: -1px; }
.desk::before { background: var(--ink); }
.desk__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.desk .tag { color: var(--orange); }
.desk .lead { color: var(--gray-d); margin: 28px 0 36px; padding-left: calc(min(13%, 200px) + 20px); }
.desk__text > .btn { margin-left: calc(min(13%, 200px) + 20px); }
.desk .labelled { grid-template-columns: minmax(118px, 26%) minmax(0, 1fr); }
.desk .lead { padding-left: 0; }
.desk .lead, .desk__text > .btn { margin-left: calc(26% + 20px); }
.desk__card { padding-top: 22px; }   /* sin filete: el separador es el trazo que corre por encima (pedido de Juan, 1/10) */
.desk__seal { font-size: 0.875rem; font-weight: 600; color: var(--orange); }
.desk__card h3 { font-size: clamp(1.625rem, 2.4vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.05; margin: 10px 0 22px; font-weight: 700; }
.desk__card > p { color: var(--gray-d); margin-top: 26px; }
/* el mapa es una maqueta: un plano inclinado en perspectiva (costa, ríos, cuenca, pines) y encima el relieve en capas, cada
   curva de nivel a su altura. Los textos de los pines quedan de pie, mirando a la cámara */
.desk__map { position: relative; aspect-ratio: 16 / 9.4; perspective: 1500px; perspective-origin: 50% 20%; }
.desk__plano { position: absolute; left: 3%; right: 3%; top: -6%; bottom: -2%; transform-style: preserve-3d; transform: rotateX(46deg) rotateZ(-3deg); transform-origin: 50% 60%; }
.desk__capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--n) * var(--paso, 7px))); }
.desk__capa path { fill: none; stroke: rgba(255, 255, 255, 1); stroke-opacity: var(--o); stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 820px) { .desk__map { --paso: 4px; } }
.pin { position: absolute; font-size: 0.8125rem; color: var(--gray-d); line-height: 1.3; }
.pin b { display: block; color: var(--white); font-size: 1rem; font-weight: 650; }
.pin::before { content: ""; position: absolute; width: 14px; height: 14px; background: var(--orange); left: -7px; top: -7px; }
/* los pines van en sus coordenadas reales (partials/desk-mapa.php): el cuadrado, acostado en el plano, centrado en el punto */
.pin--anelo { left: 25.18%; top: 64.67%; }
.pin--ba { left: 81.66%; top: 23.91%; }
/* el pin es un punto (ancho cero): main.js lee su posición para pasar el trazo por el cuadrado; el texto cuelga a un costado */
.pin { width: 0; height: 0; z-index: 1; transform-style: preserve-3d; }
/* el texto va debajo del punto (el arco del trazo sale hacia arriba y no lo tacha), de pie frente a la cámara */
.pin__lbl { position: absolute; left: 12px; top: 6px; white-space: nowrap; transform-origin: 0 0; transform: rotateX(-46deg); }
.pin--ba .pin__lbl { left: auto; right: -4px; top: 14px; text-align: right; transform-origin: 100% 0; }
.desk__km { position: absolute; right: 16px; bottom: 12px; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--white); }
.ticks { list-style: none; margin: 16px 0 0; padding: 0; }
.ticks li { padding: 12px 0 12px 26px; border-top: 1px solid var(--rule-d); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--orange); }

/* ============ 5. novedades ============ */
.novedades { position: relative; padding: 20vh 0 16vh; }
.novedades .head-row { margin-bottom: clamp(48px, 8vh, 96px); }
.posts { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.posts a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding-top: 22px; border-top: 1.5px solid var(--ink); text-decoration: none; }
/* imagen destacada de la nota; si la nota no tiene, una placa de marca con el trazo */
.post__media { position: relative; display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--ink); margin-bottom: 4px; }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__media--none::before {
  content: ""; position: absolute; left: 0; top: 60%; height: 4px; width: 72%; background: var(--orange);
  transform-origin: left; transition: width 700ms var(--ease-out);
}
.post__media--none::after {
  content: ""; position: absolute; top: 60%; left: 72%; width: 16px; height: 16px; margin: -6px 0 0 -2px; background: var(--orange);
  transition: left 700ms var(--ease-out);
}
.posts li:nth-child(2) .post__media--none::before { top: 38%; width: 48%; }
.posts li:nth-child(2) .post__media--none::after { top: 38%; left: 48%; }
.posts li:nth-child(3) .post__media--none::before { top: 74%; width: 86%; }
.posts li:nth-child(3) .post__media--none::after { top: 74%; left: 86%; }
/* bordes del recorte de la línea de las fotos (en %): registrados para que se animen */
@property --pl { syntax: "<number>"; inherits: false; initial-value: 100; }
@property --pr { syntax: "<number>"; inherits: false; initial-value: 100; }
@media (hover: hover) and (pointer: fine) {
  /* al pasar, una línea naranja se apoya sobre el borde inferior de la foto y al salir se retira hacia la derecha (como los subrayados).
     Va con clip-path y dos bordes: al entrar crece desde la izquierda, al salir el borde izquierdo corre hacia la derecha, y el
     derecho vuelve a su lugar recién cuando la línea ya no se ve. Si se interrumpe, sigue desde donde está: nunca salta. */
  .post__media:not(.post__media--none)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--orange); pointer-events: none;
    --pl: 100; --pr: 100;
    clip-path: inset(0 calc(var(--pr) * 1%) 0 calc(max(0, var(--pl) - var(--pr)) * 1%));
    transition: --pl 200ms var(--ease-out), --pr 0s linear 200ms;
  }
  .posts a:hover .post__media:not(.post__media--none)::after { --pl: 0; --pr: 0; transition: --pl 260ms var(--ease-out), --pr 260ms var(--ease-out); }
  .posts a:hover .post__media--none::before { width: 92%; }
  .posts a:hover .post__media--none::after { left: 92%; }
}
.posts a { border-top: 0; padding-top: 0; }
[data-theme="dark"] .tag { color: var(--orange); }   /* sobre negro, el naranja de marca ya contrasta (4,9:1) */
.post__cat { font-size: 0.875rem; font-weight: 600; color: var(--orange-ink); }
.post__title {
  font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; font-variation-settings: "wght" 600;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat;
  transition: background-size 200ms var(--ease-out), font-variation-settings 300ms var(--ease-out);
  width: fit-content;
}
.post__date { color: var(--gray); font-size: 0.9375rem; margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .posts a:hover .post__title { background-size: 100% 1.5px; background-position: 0 100%; font-variation-settings: "wght" 720; transition: background-size 420ms var(--ease-out), font-variation-settings 300ms var(--ease-out); }
}

/* ============ 6. clientes ============ */
.clientes { position: relative; padding: 14vh 0 18vh; overflow: hidden; }
.clientes .head-row { margin-bottom: clamp(48px, 8vh, 96px); }
.marquee { display: grid; gap: 28px; }
.marquee__row { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(40px, 5vw, 88px); width: max-content; will-change: transform; }
.marquee__row li { flex: none; width: clamp(112px, 11vw, 168px); height: clamp(44px, 5vw, 64px); display: flex; align-items: center; justify-content: center; }
/* todos los logos en la misma caja, en blanco y negro, sea cual sea el archivo que se suba */
/* el fondo blanco de cada logo desaparece: la fila entera se "multiplica" sobre la página (en la imagen sola no alcanza,
   porque la fila se mueve y queda aislada del fondo) */
.marquee__row { mix-blend-mode: multiply; }
.marquee__row img { width: 100%; height: 100%; max-width: none; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: 0.82; transition: opacity 200ms ease; }
/* con JS, el blanco ya viene sacado del archivo (main.js): no hace falta filtro ni mezcla */
.marquee__row img.is-keyed { filter: none; }
.marquee__row:not(:has(img:not(.is-keyed))) { mix-blend-mode: normal; }
@media (hover: hover) and (pointer: fine) { .marquee__row img:hover { opacity: 1; } }

/* ============ 7. contacto ============ */
.contacto { position: relative; color: var(--white); padding: 30vh 0 24vh; margin-top: -1px; }
.contacto::before { background: var(--ink); }
.contacto__inner { position: relative; z-index: 2; }
.contacto .tag { color: var(--orange); }
.contacto h2 { font-size: clamp(3rem, 8.2vw, 8.5rem) !important; line-height: 0.92; max-width: 6.16em; /* 11ch de Hanken */ }
.contacto .btn { margin: clamp(40px, 7vh, 80px) 0 0 calc(min(13%, 200px) + 20px); }

/* ============ pie ============ */
.footer { background: var(--ink); color: var(--gray-d); font-size: 0.9375rem; padding-top: 12vh; }
.footer a { text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--orange); } }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr 1.1fr; gap: 40px; padding-bottom: 64px; border-bottom: 1px solid var(--rule-d); }
.footer__brand p { margin-top: 20px; max-width: 19.04em; /* 34ch de Hanken */ }
.footer__social { display: flex; gap: 18px; }
.footer__social a { color: var(--white); }
.footer__title { color: var(--white); font-weight: 650; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer__data { font-style: normal; }
.footer__data p { margin-bottom: 10px; }
.footer__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 28px; font-size: 0.8125rem; }

/* ============ tablet ============ */
@media (max-width: 1180px) {
  .nav__links > ul { gap: 14px; }
  .nav__links a { font-size: 0.875rem; }
}

/* ============ celular y tablet chica ============ */
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav__links, .nav__lang { display: none; }
  .nav__menu { display: block; margin-left: auto; }
  .nav__menu summary {
    list-style: none; cursor: pointer; font-weight: 650; padding: 10px 14px;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .nav__menu summary::-webkit-details-marker { display: none; }
  .nav__sheet {
    position: fixed; inset: var(--nav-h) 0 0 0; background: var(--ink); color: var(--white);
    padding: 20px var(--gut) 40px; overflow-y: auto;
  }
  .nav__sheet a { display: block; padding: 12px 0; font-size: 1.5rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--rule-d); }
  .nav__sheet ul ul { padding-left: 16px; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  .nav__sheet ul ul a { font-size: 1.125rem; font-weight: 500; }

  /* menú del celular (con micro.js): "Menú" pasa a "Cerrar", la línea naranja cruza bajo la barra
     y el panel negro se despliega desde ella; los ítems entran de a uno. Al cerrar, todo más rápido. */
  .nav__menu summary { display: inline-grid; transition: transform 120ms var(--ease-out); }
  .nav__menu summary:active { transform: scale(0.96); }
  .nav__menu summary > span { grid-area: 1 / 1; text-align: center; transition: opacity 200ms ease, filter 200ms ease; }
  .nav__menu-x { opacity: 0; filter: blur(2px); }
  .nav__menu.is-open summary > span:first-child { opacity: 0; filter: blur(2px); }
  .nav__menu.is-open .nav__menu-x { opacity: 1; filter: none; }
  .has-micro .nav__menu::before {
    content: ""; position: fixed; left: 0; right: 0; top: var(--nav-h); height: 3px; z-index: 2; pointer-events: none;
    background: var(--orange); transform: scaleX(0); transform-origin: right;
    transition: transform 200ms var(--ease-out) 200ms;
  }
  .has-micro .nav__menu.is-open::before { transform: scaleX(1); transform-origin: left; transition: transform 240ms var(--ease-out); }
  .has-micro .nav__sheet { clip-path: inset(0 0 100% 0); transition: clip-path 260ms var(--ease-in-out) 60ms; }
  .has-micro .nav__menu.is-open .nav__sheet { clip-path: inset(0 0 0 0); transition: clip-path 320ms cubic-bezier(0.32, 0.72, 0, 1) 60ms; }
  /* (1/10, pedido de Juan: una apertura más novedosa) el menú es una lista con el trazo, como los frentes de cada práctica:
     una línea naranja baja por el costado y, a medida que llega a cada ítem, su cuadrado se llena y la palabra se asienta
     (gana peso, de 300 a 650, sin cambiar de tamaño). Al cerrar, todo se va de una vez y más rápido. */
  .has-micro .nav__sheet > ul { position: relative; padding-left: 30px; }
  .has-micro .nav__sheet > ul::before {
    content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 3px; background: var(--orange);
    transform: scaleY(0); transform-origin: top; transition: transform 160ms var(--ease-out);
  }
  .has-micro .nav__menu.is-open .nav__sheet > ul::before { transform: scaleY(1); transition: transform 560ms cubic-bezier(0.65, 0, 0.35, 1) 160ms; }
  .has-micro .nav__sheet > ul > li { position: relative; opacity: 0; transform: translateX(-8px); transition: opacity 120ms ease, transform 120ms ease; }
  .has-micro .nav__sheet > ul > li::before {
    content: ""; position: absolute; left: -30px; top: 24px; width: 13px; height: 13px; margin-top: -6.5px;
    background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-d); transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  }
  .has-micro .nav__sheet > ul > li > a { font-variation-settings: "wght" 300; transition: color 120ms ease, font-variation-settings 160ms ease; }
  .has-micro .nav__menu.is-open .nav__sheet > ul > li {
    opacity: 1; transform: none;
    transition: opacity 220ms ease, transform 300ms var(--ease-out);
    transition-delay: calc(160ms + var(--i, 0) * 50ms);   /* al ritmo de la línea que baja */
  }
  .has-micro .nav__menu.is-open .nav__sheet > ul > li::before {
    background: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); transform: scale(1.15);
    transition: background-color 200ms ease, box-shadow 200ms ease, transform 300ms var(--ease-out);
    transition-delay: calc(220ms + var(--i, 0) * 50ms);
  }
  .has-micro .nav__menu.is-open .nav__sheet > ul > li > a {
    font-variation-settings: "wght" 650;
    transition: color 120ms ease, font-variation-settings 420ms var(--ease-out) calc(220ms + var(--i, 0) * 50ms);
  }
  .has-micro .nav__sheet a[aria-current="true"] { color: var(--orange); }
  .nav__sheet a { transition: color 120ms ease; }
  .nav__sheet a:active { color: var(--orange); }
  /* mientras el menú está abierto, la página de atrás no se mueve */
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 820px) {
  .hero { min-height: 100svh; display: flex; flex-direction: column; gap: 20px; padding-top: calc(var(--nav-h) + 20px); }
  .trazo path, .js-pin .rail path { stroke-width: 3; }
  /* el ovillo a la altura del título, junto a las palabras cortas y pegado al margen del trazo (el script de la portada
     calcula el lugar); su hilo termina siendo el subrayado */
  .hero__art { --s: var(--art-s, 44vw); top: var(--art-top, calc(var(--nav-h) + 10svh)); left: var(--art-left, calc(100% - 8px - var(--s) * 0.883)); }
  /* sin JS (no hay --hilo-w): el grosor del hilo en el cuadro de 44vw, ~2-2,8 px de frente (el de escritorio dejaba 1 px en
     el celular). El dibujo escala con el cuadro: un valor para teléfonos y otro para tabletas */
  .hero__art { --hilo-w-def: 34; }
  /* en celular la portada no queda fija: el ovillo empieza a desenredarse al scrollear y la página sigue de largo */
  .js-pin .hero-pin { height: auto; }
  .js-pin .hero { position: relative; top: auto; }
  /* los renglones los parte el ancho de la pantalla; el script de la portada los fija con el peso final (.is-lineado) */
  .hero__title, .hero__title:lang(en) { order: 1; margin: auto 0; align-self: stretch; font-size: clamp(2.75rem, 12.8vw, 4.75rem); max-width: none; }
  .hero__title em { --ul: 3px; }
  .hero__foot { order: 3; padding-top: 16px; gap: 16px; }
  .hero__tag { display: none; }
  .hero__window { width: 1.9em; margin-left: 0.14em; }
  .hero__foot { grid-template-columns: 1fr; }
  .hero__actions { justify-content: stretch; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .labelled { grid-template-columns: 1fr; row-gap: 12px; }
  .labelled .tag { padding-top: 0; }
  .head-row { grid-template-columns: 1fr; align-items: start; }
  .panel--head { width: 100%; padding: 64px var(--gut) 32px; }
  .areas__track { flex-direction: column; overflow: visible; }
  .panels { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .panel--area { width: 82vw; }
  .panel--area a { padding: 36px 24px 40px; }
  .panel--more { width: 86vw; padding: 36px 24px 40px; }
  .areas__pin { position: relative; }
  .figures { grid-template-columns: 1fr; padding-left: 0; }
  .desk__grid { grid-template-columns: 1fr; }
  .desk .labelled { grid-template-columns: 1fr; }
  .desk .lead, .desk__text > .btn { margin-left: 0; }
  .posts { grid-template-columns: 1fr; }
  .contacto .btn { margin-left: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__data { grid-column: 1 / -1; }
  .estudio, .desk { padding-top: 18vh; }
}

@media (max-width: 480px) { .hero__art { --hilo-w-def: 60; } }

/* áreas en celular: el mismo recorrido horizontal que en escritorio, con paneles casi a pantalla completa */
@media (max-width: 820px) {
  .js-pin .areas__track { flex-direction: row; height: 100%; }
  .js-pin .panel--head { width: 88vw; padding: calc(var(--nav-h) + 24px) var(--gut) 22svh; justify-content: center; }
  .js-pin .panels { overflow: visible; padding-bottom: 0; scroll-snap-type: none; }
  .js-pin .panel--area { width: 80vw; }
  .js-pin .panel--area a { padding: calc(var(--nav-h) + 16px) 24px 24svh; justify-content: center; }
  .js-pin .panel--more { width: 86vw; padding: calc(var(--nav-h) + 16px) 24px 24svh; }
  .js-pin .panel__title { font-size: clamp(2rem, 9vw, 2.75rem); }
}
/* táctil: al frenar, el recorrido se asienta con un panel centrado (main.js). Cada práctica mide la pantalla menos 48 px: sus
   vecinos asoman solo con los 24 px de su margen, sin letras cortadas. La portada y "Otras prácticas", en las puntas, 24 px menos */
@media (max-width: 820px) and (pointer: coarse) {
  .js-pin .panel--head, .js-pin .panel--more { width: calc(100vw - 24px); }
  .js-pin .panel--area { width: calc(100vw - 48px); }
}
/* táctil: el panel del centro hace el mismo gesto que el hover de escritorio (la línea del riel se engrosa hasta llenarlo) */
@media (max-width: 820px) { .panel--area { --riel-w: 3px; } }   /* el grosor del riel en el celular */
.panel--area.is-live { z-index: 3; }
.panel--area.is-live a::after { transform: scaleX(1); transform-origin: left; background: var(--ink); transition: transform 220ms var(--ease-out), background-color 200ms ease 420ms; }
.panel--area.is-live a::before { clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out) 170ms; }
.panel--area.is-live .panel__text { color: var(--ink); transition: color 180ms ease 230ms; }
.panel--area.is-live .panel__go { transform: translateX(8px); background: var(--ink); color: var(--orange); transition: transform 420ms var(--ease-out), background-color 180ms ease 230ms, color 180ms ease 230ms; }

/* ---------- cifras que cuentan (main.js / servicio.js) ----------
   El número del HTML no se toca nunca: mientras cuenta queda transparente en su lugar (nada se corre) y una capa vacía
   encima muestra el valor con ::before (así el texto de la cifra sigue siendo el real para Google y los lectores). */
[data-count], [data-km] { position: relative; }
[data-count].is-counting, [data-km].is-counting { -webkit-text-fill-color: transparent; }
.cuenta { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; -webkit-text-fill-color: currentColor; }
.cuenta::before { content: attr(data-v); }
/* los km del Desk corren con el trazo (la misma capa): crecen hacia la izquierda, pegados a "km" */
[data-km] .cuenta { right: 0; text-align: right; }   /* caja fija (de borde a borde del número): no se corre al crecer */
/* en bloque de línea: la capa toma el alto de línea del número y queda en su misma línea base, pegada a "km" (en línea,
   la capa medía el alto de línea y el número solo el de sus letras: quedaba 5 px más abajo) */
[data-km] { display: inline-block; }

/* ============ movimiento reducido: todo quieto y completo ============ */
/* ---------- correo: con mouse, se copia y confirma "Copiado" ---------- */
.copy-mail { display: inline-grid; position: relative; }
.copy-mail > span { grid-area: 1 / 1; transition: opacity 200ms ease, filter 200ms ease; }
.copy-mail__ok { opacity: 0; filter: blur(2px); color: var(--orange-ink); }
[data-theme="dark"] .copy-mail__ok, .footer .copy-mail__ok { color: var(--orange); }
.copy-mail.is-done > span:first-child { opacity: 0; filter: blur(2px); }
.copy-mail.is-done .copy-mail__ok { opacity: 1; filter: none; }
.copy-mail__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.copy-mail:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__title em, .hero__window { animation: none; }
  .hero__window img { transition: none; }
  .btn, .btn::before, .btn::after, .hero__art, .panel--area a, .panel--area a::before, .panel--area a::after, .panel__text, .panel__go, .nav, .more a, .more li, .post__title, .post__media::after, .trazo__end, .nav__ind, .nav__sheet, .nav__sheet li, .nav__sheet > ul::before, .nav__sheet > ul > li::before, .nav__sheet > ul > li > a, .nav__menu::before, .nav__menu summary > span { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}

/* el trazo entra a la tarjeta: la punta del riel la recorre y el naranja se abre desde esa línea; cuando la punta sigue a la
   próxima, se cierra otra vez sobre el riel (pedido de Juan, 1/10: "el efecto tiene que venir con el trazo") */
.panel--area.is-trazo, .panel--area:focus-within { z-index: 3; }
/* con la tarjeta ya naranja, la línea que la cruza pasa a negro (como el trazo sobre la hoja de El estudio): el trazo no se corta */
.panel--area:is(.is-trazo, :focus-within) a::after { transform: scaleX(1); transform-origin: left; background: var(--ink); transition: transform 220ms var(--ease-out), background-color 200ms ease 420ms; }
.panel--area:is(.is-trazo, :focus-within) a::before { clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out) 170ms; }
.panel--area:is(.is-trazo, :focus-within) .panel__text { color: var(--ink); transition: color 180ms ease 230ms; }
.panel--area:is(.is-trazo, :focus-within) .panel__go { transform: translateX(8px); background: var(--ink); color: var(--orange); transition: transform 420ms var(--ease-out), background-color 180ms ease 230ms, color 180ms ease 230ms; }

/* ============ textos clickeables: el mismo trazo en chico (pedido de Juan, 1/10) ============
   Al pasar el mouse, una línea naranja se dibuja de izquierda a derecha bajo el texto (y se retira hacia la derecha, más
   rápido); al apretar, la línea se engrosa y el texto pasa a naranja: la confirmación de que el clic llegó. Mismo lenguaje
   que los subrayados del menú y de las notas. Los links de listas (Otras prácticas) conservan su corrimiento con flecha. */
:is(.faq__list summary > span, .indice a > span, .footer a, .nota__cats a, .v-subnav ol a, .v-index a, .n-socio__links a:not(.link-go)) {
  background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat;
  background-size: 0 1.5px; background-position: 100% 100%;
  transition: background-size 180ms var(--ease-out), color 180ms ease;
}
.indice a > span { justify-self: start; }
@media (hover: hover) and (pointer: fine) {
  :is(.faq__list summary:hover > span, .indice a:hover > span, .footer a:hover, .nota__cats a:hover, .v-subnav ol a:hover, .v-index a:hover, .n-socio__links a:not(.link-go):hover) {
    background-size: 100% 1.5px; background-position: 0 100%;
    transition: background-size 280ms var(--ease-out), color 180ms ease;
  }
}
:is(.faq__list summary:active > span, .indice a:active > span, .footer a:active, .nota__cats a:active, .v-subnav ol a:active, .v-index a:active, .n-socio__links a:not(.link-go):active, .nav__links a:active, .crumbs a:active, .posts a:active .post__title) {
  background-size: 100% 3px; background-position: 0 100%; color: var(--orange-ink);
  transition: background-size 100ms var(--ease-out), color 100ms ease;
}
[data-theme="dark"] :is(.footer a, .v-subnav ol a, .v-index a):active, .footer a:active { color: var(--orange); }
.faq__list summary { transition: scale 160ms var(--ease-out); }
.faq__list summary:active { scale: 0.99; transition-duration: 100ms; }
@media (prefers-reduced-motion: reduce) {
  :is(.faq__list summary > span, .indice a > span, .footer a, .nota__cats a, .v-subnav ol a, .v-index a, .n-socio__links a), .faq__list summary { transition-duration: 0ms !important; }
}

/* ============ PRUEBA (1/10/2026): la costura — el hilo del ovillo cose las industrias ============
   Sin JS, sin WebGL o con movimiento reducido: una tira de fotos a color que se desliza de costado, con su rubro y su frase.
   Con el 3D (.is-3d, lo pone main.js al arrancar; costura.js arma la escena cuando la sección se acerca): un bloque fijo de una
   pantalla que se recorre en --costura-viaje. El hilo 3D (WebGL) entra por el margen, atraviesa cada foto por delante y por
   detrás, y desde cada puntada la foto pasa de blanco y negro a color. Los textos siguen en el HTML, pegados a su foto. */
.costura { position: relative; background: var(--ink); color: var(--white); margin-top: -1px; }
.costura .tag { color: var(--orange); }
.costura__head { padding-top: 18vh; }
.costura__head h2 { max-width: 9.5em; }
.costura__head .lead { color: var(--gray-d); margin-top: 26px; padding-left: calc(min(13%, 200px) + 20px); }
.costura__list {
  list-style: none; margin: 0; padding: 9vh var(--gut) 18vh calc(var(--gut) + min(13%, 200px) + 20px);
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px); gap: clamp(20px, 3vw, 48px);
  overflow-x: auto; scrollbar-width: none; align-items: start;
}
.costura__list::-webkit-scrollbar { display: none; }
.costura__foto { margin: 0 0 20px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.costura__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.costura__rubro { font-size: clamp(1.75rem, 2.8vw, 3rem); line-height: 1; letter-spacing: -0.035em; font-weight: 700; }
.costura__frase { color: var(--gray-d); margin-top: 12px; max-width: 24em; font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.costura__gl, .costura__tapa { display: none; }

.costura.is-3d { height: calc(100svh + var(--costura-viaje, 380svh)); }
.costura.is-3d .costura__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.costura.is-3d .costura__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.costura.is-3d .costura__head { position: absolute; left: 0; right: 0; top: 0; z-index: 2; will-change: transform; }
.costura.is-3d .costura__list { position: absolute; inset: 0; padding: 0; display: block; overflow: visible; pointer-events: none; z-index: 2; }
.costura.is-3d .costura__item { position: absolute; left: 0; top: 0; width: var(--cw, 360px); will-change: transform; }
.costura.is-3d .costura__txt { position: absolute; left: 0; bottom: 0; width: 100%; }
.costura.is-3d .costura__frase { color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.costura.is-3d .costura__rubro { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35); }
/* la foto la dibuja el 3D (la imagen del HTML queda para buscadores y lectores de pantalla) */
.costura.is-3d .costura__foto { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
/* el rubro se destapa de izquierda a derecha cuando la foto toma color; la frase llega después */
.costura.is-3d .costura__rubro { clip-path: inset(-10% 100% -10% 0); transition: clip-path 700ms var(--ease-out); }
.costura.is-3d .costura__frase { opacity: 0; translate: 0 10px; transition: opacity 500ms ease 220ms, translate 700ms var(--ease-out) 220ms; }
.costura.is-3d .costura__item.is-on .costura__rubro { clip-path: inset(-10% -2% -10% 0); }
.costura.is-3d .costura__item.is-on .costura__frase { opacity: 1; translate: 0 0; }
.costura.is-3d .costura__item:not(.is-on) :is(.costura__rubro, .costura__frase) { transition-delay: 0ms; transition-duration: 300ms; }
@media (prefers-reduced-motion: no-preference) {
  /* el borde de la hoja se comba hacia abajo (una curva blanca desde arriba, del color de la portada): no tapa nada de ella */
  .js .costura__tapa {
    display: block; position: absolute; left: 0; top: -1px; z-index: 3; width: 100%;
    height: clamp(70px, 10vw, 150px); overflow: visible; pointer-events: none; fill: var(--white);
    transform-origin: 50% 0; transform: scaleY(0);
  }
}
/* el aviso de que la sección se recorre bajando: abajo al centro, solo con el bloque fijo. Los cuadraditos (el marcador del sitio)
   se llenan con cada industria cosida; la línea naranja baja como la lapicera del trazo */
.costura__guia { display: none; }
.costura.is-gl .costura__guia {
  display: flex; align-items: center; gap: 14px; position: absolute; left: 50%; bottom: 26px; z-index: 3; pointer-events: none;
  color: var(--gray-d); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  opacity: 0; translate: -50% 8px; transition: opacity 300ms ease, translate 500ms var(--ease-out);
}
.costura.is-gl .costura__guia.is-on { opacity: 1; translate: -50% 0; transition: opacity 500ms ease 150ms, translate 700ms var(--ease-out) 150ms; }
.costura__cuadros { display: flex; gap: 6px; }
.costura__cuadros i { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); transition: background-color 300ms ease, box-shadow 300ms ease; }
.costura__cuadros i.is-lit { background: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); }
.costura__linea { display: block; width: 2px; height: 28px; background: var(--orange); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .costura__linea { animation: costura-baja 1.9s var(--ease-in-out) infinite; }
  @keyframes costura-baja {
    0% { transform: scaleY(0); transform-origin: 50% 0; }
    48% { transform: scaleY(1); transform-origin: 50% 0; }
    52% { transform: scaleY(1); transform-origin: 50% 100%; }
    100% { transform: scaleY(0); transform-origin: 50% 100%; }
  }
}
@media (max-width: 820px) {
  .costura__head { padding-top: 16vh; }
  .costura__head .lead { padding-left: 0; margin-top: 18px; }
  .costura__list { padding-left: var(--gut); grid-auto-columns: 74vw; }
  .costura__rubro { font-size: 2rem; }
  .costura__frase { font-size: 1rem; }
}

/* PRUEBA (1/10): las tarjetas de Áreas se llenan con un video corto de su mundo en lugar del naranja plano. El gesto es el
   mismo: la línea del riel cruza la tarjeta y el relleno (el video, con un velo de tinta encima) se abre desde ella; el video
   llega un poco ampliado y se asienta despacio. La línea que la cruza vuelve a ser naranja (sobre la imagen se ve) y los
   textos pasan a blanco. El video corre solo mientras la tarjeta está pintada (main.js); sin movimiento, queda el póster */
.panel__fondo {
  position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; background: var(--ink);
  clip-path: inset(82% 0 18% 0); transition: clip-path 200ms var(--ease-out);
}
.panel__fondo video { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.12; transform-origin: 50% 82%; transition: scale 500ms var(--ease-out); }
.panel--area.con-video a::before { background: linear-gradient(to bottom, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.6) 30%, rgba(18, 18, 18, 0.6) 60%, rgba(18, 18, 18, 0.9) 100%); }
.panel--area.con-video:is(.is-trazo, .is-live, :focus-within) .panel__fondo { clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out) 170ms; }
.panel--area.con-video:is(.is-trazo, .is-live, :focus-within) .panel__fondo video { scale: 1; transition: scale 2400ms var(--ease-out) 170ms; }
.panel--area.con-video:is(.is-trazo, .is-live, :focus-within) a::after { background: var(--orange); }
.panel--area.con-video:is(.is-trazo, .is-live, :focus-within) :is(.panel__title, .panel__text) { color: var(--white); transition: color 180ms ease 230ms; }
.panel--area.con-video:is(.is-trazo, .is-live, :focus-within) .panel__go { background: var(--orange); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .panel__fondo, .panel__fondo video { transition-duration: 0ms !important; transition-delay: 0ms !important; } }

/* ---------- el mapa del Desk: Buenos Aires → Añelo (1/10, propuesta a Juan: un mapa de verdad en vez del recuadro vacío) ----------
   Líneas finas sobre la tinta: la cuadrícula de latitud y longitud, el relieve de la cordillera en curvas de nivel, los ríos y
   la costa. Al aparecer se dibujan (primero la costa, después ríos y relieve); cuando el trazo llega a Añelo se ilumina la
   cuenca neuquina y el cuadrado de Añelo late una vez. Sin movimiento: todo dibujado y quieto */
.desk__geo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.desk__geo :is(path, line) { fill: none; vector-effect: non-scaling-stroke; }
.geo-grat line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 2 6; }
.geo-grat text, .geo-lbl { fill: rgba(255, 255, 255, 0.38); font-size: 26px; font-weight: 600; letter-spacing: 0.02em; }
.geo-sombra { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.geo-cumbres { stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.3; }
.geo-relieve .geo-cumbre { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.geo-rios path { stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.2; }
.geo-costa { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
.geo-costa--uy { stroke: rgba(255, 255, 255, 0.3); }
.geo-cuenca { fill: var(--orange); fill-opacity: 0; stroke: var(--orange); stroke-opacity: 0; stroke-width: 1; stroke-dasharray: 3 5; }
.geo-lbl--cuenca { fill: var(--orange); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .desk__geo :is(.geo-costa, .geo-rios path, .geo-cumbres) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .desk__geo :is(.geo-sombra, .geo-cumbre), .js .geo-grat { opacity: 0; }
  .js .desk__map.is-in .geo-costa { stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms var(--ease-in-out); }
  .js .desk__map.is-in .geo-rios path { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-in-out) calc(500ms + var(--i) * 120ms); }
  .js .desk__map.is-in .geo-cumbres { stroke-dashoffset: 0; transition: stroke-dashoffset 2000ms var(--ease-in-out) 200ms; }
  .js .desk__capa { transform: translateZ(0); opacity: 0; transition: transform 1600ms var(--ease-out), opacity 600ms ease; }
  .js .desk__map.is-in .desk__capa { transform: translateZ(calc(var(--n) * var(--paso, 7px))); opacity: 1; transition: transform 1800ms var(--ease-out) calc(600ms + var(--n) * 60ms), opacity 700ms ease calc(600ms + var(--n) * 60ms); }
  .js .desk__map.is-in :is(.geo-sombra, .geo-cumbre, .geo-grat) { opacity: 1; transition: opacity 1400ms ease 900ms; }
  .geo-cuenca, .geo-lbl--cuenca { transition: fill-opacity 900ms ease, stroke-opacity 900ms ease, opacity 900ms ease 200ms; }
  .desk__map.is-llego .pin--anelo::after {
    content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; box-shadow: 0 0 0 1.5px var(--orange);
    animation: geo-late 1100ms var(--ease-out) 1 both;
  }
  @keyframes geo-late { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
}
.desk__map.is-llego .geo-cuenca { fill-opacity: 0.1; stroke-opacity: 0.55; }
.desk__map.is-llego .geo-lbl--cuenca { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .geo-cuenca { fill-opacity: 0.1; stroke-opacity: 0.55; } .geo-lbl--cuenca { opacity: 1; } }
@media (max-width: 820px) { .geo-grat text, .geo-lbl { font-size: 34px; } }

/* la costura: cada rubro lleva a su práctica (auditoría 6/10: la sección no tenía enlaces). En el celular el recorrido es
   más corto (las prácticas aparecían recién en la sexta pantalla) */
.costura__rubro a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size 260ms var(--ease-out); }
.costura__rubro a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .costura__rubro a:hover { background-size: 100% 1.5px; } }
.costura.is-3d .costura__item.is-on .costura__rubro a { pointer-events: auto; }
@media (max-width: 820px) { .costura { --costura-viaje: 300svh; } }

/* vista-alta (render de Google, ventana tan alta como la página): portadas con alto fijo y sin fijarse al scrollear */
.vista-alta .hero { min-height: 900px; }
.vista-alta .hero-pin { height: auto !important; }
.vista-alta .hero { position: relative !important; top: auto !important; }