/* STOIC Arquitectura · sitio v3 (concepto) · estructura y ritmo inspirados en kineticsplay.com, tropicalizados a la marca Firma.
   CSS propio, escrito desde cero. Tokens de Marca: /static/css/tokens-marca.css (copia de stoic-marca/sistema/tokens.css).
   Marca v1.5: una sola familia, Hanken Grotesk (400 texto y UI · 500 titulares en dos tonos, −0.015em). Verde sierra solo en foco, estado activo y filetes (≤ 5 %).
   Sin naranja, sin grotesca en mayúsculas, sin etiquetas mono, sin cotas ni símbolos técnicos. Esquinas rectas. */
/* ---------- FUENTES · único bloque (marca v1.5: una sola familia, Hanken Grotesk, SIL OFL 1.1; licencia en /static/fonts/OFL-HankenGrotesk.txt).
   Archivos de Stoic Marca (sistema/fuentes/web/, subset latino). 400 texto, navegación, botones y datos · 500 titulares y etiquetas.
   300 y 600 solo viven en el logo SVG. ---------- */
@font-face { font-family: "Hanken Grotesk"; src: url("/static/fonts/HankenGrotesk-VF-latin.woff2") format("woff2-variations"), url("/static/fonts/HankenGrotesk-VF-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ======================================================================================================================
   STOIC v4 · estructura, ritmo y motion de heronaiapp.com recreados con CSS propio (sin código de Heron).
   Retícula de filetes de 1 px con cruces «+», reglas en el marco del hero, celdas en el header, pins con sticky.
   COLOR solo con tokens de Marca. Verde sierra solo como acento (marcadores, línea de proceso, CONTACTO, foco): ≤ 5 %.
   Diferencia consciente con Marca: titulares en MAYÚSCULAS y lenguaje de dibujo técnico (reglas, cruces, coordenadas),
   porque así se lee Heron. Interruptor único: html.caps (CAPS en build.py).
   ====================================================================================================================== */
:root {
  --muted: var(--color-text-muted);
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --line: var(--stoic-piedra);           /* filetes de la retícula */
  --fr: 8px;                             /* marco: separación del borde del viewport (Heron ~8 px) */
  --pad: clamp(16px, 1.67vw, 24px);      /* relleno de celda */
  --bar-h: 56px;
  --ease: cubic-bezier(.23, 1, .32, 1);  /* salida larga (la curva más usada en Heron, como valor estándar) */
  --ease-b: cubic-bezier(.625, .05, 0, 1);
  --fs-hero: clamp(32px, 26px + 1.55vw, 48px);
  --fs-h2: clamp(26px, 21.5px + 1.15vw, 40px);
  --fs-h3: clamp(20px, 18px + .5vw, 26px);
  --fs-lead: clamp(17px, 16.4px + .19vw, 19px);
  --fs-body: 16px;
  --track: .14em;
  --t-ui: 180ms; --t-in: 700ms; --t-step: 90ms; --t-stagger: 40ms;
}
@media (max-width: 759px) { :root { --fr: 6px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
@view-transition { navigation: auto; }   /* transición entre páginas (en lugar de Barba); con reduced-motion se apaga abajo */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease); }
body { margin: 0; background: var(--stoic-cal); color: var(--stoic-carbon); font: 400 var(--fs-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea, option { font-family: var(--font); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--stoic-carbon); color: var(--stoic-cal); }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.label { font: 500 12px/1.4 var(--font); letter-spacing: .02em; }
.p-etq .label { font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.idx { font: 500 12px/1.4 var(--font); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted); }
.tag { font: inherit; color: inherit; }
.tt-b { color: var(--color-text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 200; background: var(--stoic-carbon); color: var(--stoic-cal); padding: .7rem 1rem; }
.skip:focus { top: 1rem; }
.h1, .h2, .h3 { font-weight: 500; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; hyphens: manual; }
.h1 { font-size: var(--fs-hero); line-height: 1; }
.h2 { font-size: var(--fs-h2); line-height: 1.02; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; }
.caps .h1, .caps .h2, .caps .h3, .caps .sc__t, .caps .fr__t, .caps .ty__t, .caps .wy__t, .caps .uc__t, .caps .pc__t, .caps .st__t, .caps .menu__link, .caps .dn__t { text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- MARCO: el sitio vive dentro de dos filetes verticales a --fr del borde (como Heron); cada sección es una banda ---------- */
main, .foot { display: block; margin: 0 var(--fr); border-left: 1px solid var(--line); border-right: 1px solid var(--line); position: relative; }
main > section, main > div, .foot > section, .foot > div { position: relative; border-bottom: 1px solid var(--line); }
.pl { position: absolute; width: 11px; height: 11px; pointer-events: none; z-index: 3; }
.pl::before, .pl::after { content: ""; position: absolute; background: var(--stoic-carbon); }
.pl::before { left: 5px; top: 0; width: 1px; height: 11px; } .pl::after { top: 5px; left: 0; height: 1px; width: 11px; }
.pl--tl { left: -6px; top: -6px; } .pl--tr { right: -6px; top: -6px; } .pl--bl { left: -6px; bottom: -6px; } .pl--br { right: -6px; bottom: -6px; }
/* reglas (ticks) en los cuatro lados de un marco de imagen */
.rl { position: absolute; z-index: 2; pointer-events: none; }
.rl--t, .rl--b { left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, var(--stoic-concreto) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--stoic-concreto) 0 1px, transparent 1px 60px); background-size: auto 5px, auto 9px; background-repeat: repeat-x; }
.rl--t { top: 0; background-position: 0 0, 0 0; } .rl--b { bottom: 0; background-position: 0 100%, 0 100%; }
.rl--l, .rl--r { top: 0; bottom: 0; width: 9px; background: repeating-linear-gradient(180deg, var(--stoic-concreto) 0 1px, transparent 1px 12px), repeating-linear-gradient(180deg, var(--stoic-concreto) 0 1px, transparent 1px 60px); background-size: 5px auto, 9px auto; background-repeat: repeat-y; }
.rl--l { left: 0; } .rl--r { right: 0; background-position: 100% 0, 100% 0; }

/* ---------- imágenes ---------- */
.media { position: relative; overflow: hidden; background: var(--stoic-piedra); }
.media img, .media picture, .media video { width: 100%; height: 100%; object-fit: cover; }
.media picture img { width: 100%; height: 100%; object-fit: cover; }
.media--3x2 { aspect-ratio: 3 / 2; } .media--16x9 { aspect-ratio: 16 / 9; } .media--4x5 { aspect-ratio: 4 / 5; }
/* render en monocromo sobre Cal (la lectura de las ilustraciones de Heron); en tarjetas vuelve a color al pasar */
picture.g img { filter: grayscale(1) contrast(1.04) brightness(1.04); mix-blend-mode: multiply; transition: filter 700ms var(--ease), transform 900ms var(--ease); }
.media:has(picture.g) { background: var(--stoic-cal); }
.pc__a:hover picture.g img, .fr:hover picture.g img { filter: none; }

/* ---------- LOGOTIPO (SVG oficiales v1.5; ver logo() en build.py) ---------- */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { display: block; max-width: none; }
.logo--bar { gap: 10px; }
.logo--bar .logo__iso.logo--d { width: 24px; height: 24px; }
.logo--bar .logo__w.logo--d { height: 16px; width: auto; }
.logo__rule { width: 1px; height: 16px; background: currentColor; margin: 0 2px; }
.logo__desc { font: 400 11px/1 var(--font); letter-spacing: .16em; color: inherit; white-space: nowrap; }
.logo--m { display: none !important; }
.logo--bar .logo__iso.logo--m { width: 20px; height: 20px; }
.logo--bar .logo__w.logo--m { height: 12px; width: auto; }
@media (max-width: 1099px) { .logo--d { display: none !important; } .logo--m { display: block !important; } }
.lgm { display: block; flex: none; background-color: currentColor; -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.logo--menu { gap: 8px; } .logo--menu .logo__iso { width: 20px; height: 20px; } .logo--menu .logo__w { height: 12px; width: auto; }

/* ---------- HEADER · celdas con filetes, sin placa (sin fondo): positivo o negativo según la sección (data-header) ----------
   Se oculta al bajar y vuelve al subir (como Heron). */
.bar { position: fixed; top: 0; left: var(--fr); right: var(--fr); z-index: 60; height: var(--bar-h); display: flex; align-items: stretch; color: var(--stoic-carbon); --bl: var(--stoic-piedra); --bar-act: currentColor;
  border-bottom: 1px solid var(--bl); transition: transform 600ms var(--ease), color 180ms var(--ease-io), border-color 180ms var(--ease-io); }
.bar--neg { color: var(--stoic-cal); --bl: var(--stoic-concreto); --bar-act: currentColor; }   /* filete activo: Carbón / Cal (dictamen 16257bc: sin verde) */
.bar.is-hidden { transform: translateY(calc(-100% - 2px)); }
html:not(.js) .bar { position: absolute; }
.bar__logo { display: flex; align-items: center; padding: 0 var(--pad); min-height: 48px; color: inherit; text-decoration: none; border-right: 1px solid var(--bl); margin-right: auto; }
.bar__nav { display: flex; align-items: stretch; }
.nav { display: flex; align-items: stretch; }
.nav__i { position: relative; display: flex; align-items: stretch; border-left: 1px solid var(--bl); }
.nav__a, .lang { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--pad); min-width: 132px; font: 500 12px/1 var(--font); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; color: inherit; position: relative; }
.nav__i--dd .nav__a { padding-right: 40px; }
.nav__ico { position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4px; pointer-events: none; }
.nav__ico::before, .nav__ico::after { content: ""; position: absolute; background: currentColor; transition: transform 400ms var(--ease); }
.nav__ico::before { left: 4px; top: 0; width: 1px; height: 9px; } .nav__ico::after { top: 4px; left: 0; width: 9px; height: 1px; }
.nav__i--dd:hover .nav__ico::before, .nav__i--dd:focus-within .nav__ico::before { transform: scaleY(0); }
.nav__a::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 12px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.nav__a:hover::after { transform: scaleX(1); }
.nav__a[aria-current="page"]::after { transform: scaleX(1); background: var(--bar-act); height: 2px; }
.lang { min-width: 96px; gap: 5px; letter-spacing: .08em; }
.lang__on { font-weight: 500; } .lang__sep { opacity: 1; }
.nav__cta { border-left: 1px solid var(--bl); color: var(--stoic-carbon); min-width: 170px; justify-content: space-between; }
.bar--neg .nav__cta { color: var(--stoic-cal); }   /* dictamen Marca edc7701: sin Verde sierra en texto */
.nav__arr { display: inline-block; transition: transform 400ms var(--ease); } .nav__cta:hover .nav__arr { transform: translateX(4px); }
.nav__cta::after { display: none; }
/* desplegables (Proyectos, Servicios): panel Cal con filetes; no es placa del header, es un menú que se abre */
.dd { position: absolute; top: 100%; left: -1px; min-width: 300px; background: var(--stoic-cal); color: var(--stoic-carbon); border: 1px solid var(--stoic-piedra); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s 300ms; }
.nav__i--dd:hover .dd, .nav__i--dd:focus-within .dd { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.dd ul { padding: 8px 0; }
.dd li a, .dd__all { display: flex; gap: 14px; align-items: baseline; padding: 9px var(--pad); font: 400 14px/1.3 var(--font); text-decoration: none; color: var(--stoic-carbon); }
.dd li a:hover { background: var(--stoic-piedra); }
.dd__n { font: 500 11px/1 var(--font); color: var(--stoic-concreto); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.dd__all { border-top: 1px solid var(--stoic-piedra); font: 500 12px/1 var(--font); letter-spacing: var(--track); text-transform: uppercase; padding: 16px var(--pad); color: var(--stoic-carbon); }
.menu-btn { display: none; align-items: center; justify-content: space-between; gap: 18px; min-width: 132px; padding: 0 var(--pad); border: 0; border-left: 1px solid var(--bl); background: none; color: inherit; font: 500 12px/1 var(--font); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
.menu-btn__ico { display: grid; gap: 5px; width: 18px; } .menu-btn__ico i { display: block; height: 1.5px; background: currentColor; }
@media (max-width: 1099px) { .bar__nav { display: none; } .menu-btn { display: flex; } }
@media (max-width: 374px) { .menu-btn { min-width: 0; } .menu-btn > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.menu { position: fixed; inset: 0; z-index: 80; background: var(--stoic-cal); color: var(--stoic-carbon); display: flex; flex-direction: column; padding: 0 var(--fr) 24px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: stretch; justify-content: space-between; min-height: var(--bar-h); border-bottom: 1px solid var(--line); }
.menu__logo { display: flex; align-items: center; padding: 0 12px; line-height: 0; }
.menu__close { font: 500 12px/1 var(--font); letter-spacing: var(--track); text-transform: uppercase; color: var(--stoic-carbon); background: none; border: 0; border-left: 1px solid var(--line); padding: 0 var(--pad); min-height: 44px; min-width: 120px; cursor: pointer; }
.menu__list { margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__link { display: flex; align-items: baseline; gap: 16px; padding: 18px 12px; font: 500 clamp(30px, 8vw, 56px)/1 var(--font); color: var(--stoic-carbon); text-decoration: none; }
.menu__n { font: 500 12px/1 var(--font); color: var(--stoic-concreto); letter-spacing: .08em; }
.menu__link[aria-current="page"] { color: inherit; }
.menu__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; padding: 18px 12px 0; font: 500 12px/1.4 var(--font); letter-spacing: var(--track); text-transform: uppercase; }
.menu__lang { min-height: 24px; color: inherit; }
.preview { position: fixed; right: 12px; bottom: 12px; z-index: 50; margin: 0; padding: 6px 10px; background: var(--stoic-carbon); color: var(--stoic-cal); font: 500 11px/1.3 var(--font); letter-spacing: .04em; pointer-events: none; max-width: calc(100vw - 24px); }

/* ---------- botones ---------- */
.bt { display: inline-flex; align-items: stretch; min-height: 48px; text-decoration: none; background: var(--stoic-carbon); color: var(--stoic-cal); font: 500 12px/1 var(--font); letter-spacing: var(--track); text-transform: uppercase; border: 1px solid var(--stoic-carbon); cursor: pointer; padding: 0; }
.bt__t { position: relative; display: grid; align-items: center; padding: 0 22px; overflow: hidden; }
.bt__a, .bt__b { grid-area: 1 / 1; display: block; transition: transform 550ms var(--ease); }
.bt__b { transform: translateY(300%); }
.bt__i { position: relative; display: grid; place-items: center; width: 48px; overflow: hidden; border-left: 1px solid var(--stoic-concreto); font-size: 15px; letter-spacing: 0; }
.bt__i span { grid-area: 1 / 1; transition: transform 550ms var(--ease); } .bt__i span + span { transform: translateX(-180%); }
.bt:hover .bt__a, a:hover > .bt .bt__a, .dn__a:hover .bt__a { transform: translateY(-300%); }
.bt:hover .bt__b, .dn__a:hover .bt__b { transform: none; }
.bt:hover .bt__i span:first-child, .dn__a:hover .bt__i span:first-child { transform: translateX(180%); }
.bt:hover .bt__i span + span, .dn__a:hover .bt__i span + span { transform: none; }
.bt--line { background: transparent; color: var(--stoic-carbon); }
.bt--line .bt__i { border-left-color: var(--stoic-carbon); }
.lk { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--stoic-carbon); font: 500 12px/1 var(--font); letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; }
.lk__i { display: inline-block; transition: transform 450ms var(--ease); } .lk:hover .lk__i { transform: translateX(5px); }
.lk__t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 450ms var(--ease); padding-bottom: 3px; } .lk:hover .lk__t { background-size: 100% 1px; }

/* ======================================================= INICIO ======================================================= */
/* ---------- HERO: marco con reglas, mira con coordenadas, lupa que revela el trazo, marcadores; fila de titular; ticker ---------- */
.h4 { padding-top: var(--bar-h); }
/* hero A→B: texto a un lado, imagen cuadrada al otro (Heron); el papel de las capas ya es Cal */
.h4__grid { --hs: min(56vw, calc(100svh - var(--bar-h) - 58px)); display: grid; grid-template-columns: minmax(0, 1fr) var(--hs); border-bottom: 1px solid var(--line); }
.h4__txt { display: grid; grid-template-rows: 1fr auto; border-right: 1px solid var(--line); min-width: 0; }
.h4__frame { position: relative; width: var(--hs); aspect-ratio: 1; overflow: hidden; background: var(--stoic-cal); cursor: crosshair; touch-action: pan-y; }
.ab picture, .ab img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab img { object-fit: cover; }
.ab .ab__a { display: none; }
/* capa B: sin JS o con reduced-motion se ve entera. Con motion: el cuadrado nace de su esquina superior derecha
   (1.6rem, parpadeo «fade-loop») y crece hasta su caja: top/right fijos, ancho y alto 0.4s ease, como los marcadores de Heron */
.motion .ab .ab__a { display: block; }
.motion .ab__b { clip-path: inset(var(--st) calc(100% - var(--sr)) calc(100% - var(--st) - 1.6rem) calc(var(--sr) - 1.6rem)); opacity: 0; }
.motion .is-sq .ab__b { opacity: .72; animation: h4-fade 1.1s ease-in-out 2 both; }
.motion .is-b .ab__b { opacity: 1; animation: none; clip-path: inset(var(--st) calc(100% - var(--sr)) calc(100% - var(--sb)) var(--sl));
  transition: clip-path var(--ab-dur, 600ms) var(--ab-ease, cubic-bezier(.625, .05, 0, 1)), opacity 200ms ease; }
@keyframes h4-fade { 0%, 100% { opacity: .72; } 50% { opacity: .25; } }
.h4__img { position: absolute; inset: 0; background: var(--stoic-cal); }
.bc { padding: calc(var(--pad) * 1.2) var(--pad); border-bottom: 1px solid var(--line); display: grid; gap: 18px; }
.bc__head { display: grid; gap: 8px; }
.bc__t { font-size: var(--fs-lead); line-height: 1.35; max-width: 40ch; }
.bc__frame { position: relative; background: var(--stoic-cal); }
.bc__frame .boceto img { width: 100%; height: auto; display: block; }
/* portada v4: boceto a tinta. El papel crema (≈ #FAF7F1) se lleva a blanco (brightness 1.08) y se multiplica sobre Cal:
   el fondo queda exactamente en Cal y la línea no cambia de forma ni de color perceptible. Sin recorte del dibujo (contain). */
.boceto { display: block; width: 100%; height: 100%; }
.boceto img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: brightness(1.08); mix-blend-mode: multiply; }
.h4__trazo { position: absolute; inset: 0; background: var(--stoic-cal); opacity: 0; --r: 0px;
  -webkit-mask: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 calc(var(--r) - 1px), transparent var(--r)); mask: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 calc(var(--r) - 1px), transparent var(--r)); }
.h4__trazo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%; }
.js .h4__trazo { opacity: 1; }
.h4__trazo::after { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border: 1px solid var(--stoic-carbon); border-radius: 50%; }
.h4__cx, .h4__cy { position: absolute; z-index: 2; pointer-events: none; background: var(--stoic-carbon); opacity: 0; transition: opacity 300ms var(--ease); }
.h4__cx { top: 0; bottom: 0; width: 1px; left: var(--x, 50%); } .h4__cy { left: 0; right: 0; height: 1px; top: var(--y, 50%); }
.is-aim .h4__cx, .is-aim .h4__cy { opacity: 1; }
.spots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spot { position: absolute; left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%); display: flex; align-items: center; gap: 8px; }
.spot__sq { width: 14px; height: 14px; background: var(--stoic-carbon); outline: 1px solid var(--stoic-cal); flex: none; }
.spot__t { padding: 6px 9px; background: var(--stoic-cal); border: 1px solid var(--stoic-carbon); font: 500 11px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.spot__t b { font-weight: 500; color: inherit; margin-right: 4px; }
.h4__hint, .h4__ref { position: absolute; z-index: 3; bottom: 18px; margin: 0; font: 500 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; background: var(--stoic-cal); }
.h4__hint { right: 20px; } .h4__ref { left: 20px; color: var(--stoic-concreto); }
.h4 .h4__ref { top: 18px; bottom: auto; }
.h4__hint-m { display: none; }
html:not(.js) .h4__hint { display: none; }
@media (hover: none) { .h4__hint-d { display: none; } .h4__hint-m { display: inline; } }
.h4__l { padding: calc(var(--pad) * 1.2) var(--pad) var(--pad); display: grid; gap: 18px; align-content: start; }
.h4__h { max-width: 18ch; }
@media (max-width: 759px) { .h4__h { font-size: min(var(--fs-hero), 8.2vw); } }
.h4__r { padding: var(--pad); display: grid; gap: 18px; align-content: end; border-top: 1px solid var(--line); }
.h4__t { font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; }
/* barra de etapas: estática y en orden 01 → 05 (antes era marquee y podía verse a mitad del ciclo) */
.tk { border-top: 1px solid var(--line); }
.tk__run { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.tk__run li { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad); font: 500 12px/1.2 var(--font); letter-spacing: var(--track); text-transform: uppercase; border-right: 1px solid var(--line); min-width: 0; }
.tk__run li:last-child { border-right: 0; }
.tk__sq { width: 8px; height: 8px; flex: none; background: var(--stoic-carbon); }
@media (max-width: 759px) {
  .tk__run { grid-template-columns: 1fr 1fr; }
  .tk__run li { padding: 11px var(--pad); font-size: 11px; gap: 8px; border-bottom: 1px solid var(--line); }
  .tk__run li:nth-child(2n) { border-right: 0; }
  .tk__run li:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 379px) { .tk__run li { padding: 10px 12px; gap: 6px; letter-spacing: .04em; } .tk__sq { display: none; } }

/* ---------- INTRO: imagen + manifiesto que se enciende; tipologías en carrusel ---------- */
.in { display: grid; grid-template-columns: 5fr 7fr; }
.in__img { position: relative; padding: var(--pad); border-right: 1px solid var(--line); }
.in__img .media { width: 100%; }
.in__sq { position: absolute; right: calc(var(--pad) + 8%); bottom: calc(var(--pad) + 10%); width: 22%; aspect-ratio: 1; background: var(--stoic-piedra); mix-blend-mode: multiply; }
.in__kay { aspect-ratio: 1449 / 1183; background: var(--stoic-cal); }   /* KAY en el encuadre de Obi (HOME_INTRO_KAY); capas .ab__l como el hero */
/* KAY · cuadro en escritorio (Guppi 17:11, opción Marca): justo debajo de la imagen, su borde superior tocando el borde
   inferior de la foto y alineado a su borde derecho; nunca sobre la foto. cqw = 1 % del ancho de la imagen (alto = 81.642cqw). */
.in__img--kay { container-type: inline-size; }
/* KAY: transición de ST encima de la v3. El video completo mide 1448×1182 (las capas 1449×1183, 1 px menos a la derecha y abajo,
   mismo origen 0,0): se estira a la caja (×1.0007), sin franja de 1 px; el desfase máximo contra la v3 es 1 px de fuente en el borde
   derecho/inferior (≈0.4 px en pantalla). El 4x5 (944×1180) coincide al píxel con el recorte 4x5 de las capas.
   Sin JS / reduced-motion: solo la v3 (póster y video ocultos). Con motion: póster -> video -> al terminar, fundido a la v3. */
.kv .kv__p, .kv .kv__v { display: none; }
.kv .kv__p, .kv .kv__p img, .kv .kv__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.motion .kv .kv__p, .motion .kv .kv__v { display: block; }
.kv__v { opacity: 0; transition: opacity .3s; }
.kv.is-play .kv__v { opacity: 1; }
.kv.is-play .kv__p { visibility: hidden; }
.kv.is-fin .kv__v { opacity: 0; transition: opacity .6s var(--ease, ease); }
@media (prefers-reduced-motion: reduce) { .kv .kv__p, .kv .kv__v { display: none !important; } }   /* cqw = 1 % del ancho de la imagen (la del bloque KAY) */
@media (min-width: 760px) {
  .in__img--kay .in__sq { --s: 24cqw; width: var(--s); right: auto; bottom: auto; left: calc(var(--pad) + 100cqw - var(--s)); top: calc(var(--pad) + 81.642cqw); }
}
.in__txt { padding: calc(var(--pad) * 2) var(--pad) var(--pad); display: grid; align-content: space-between; gap: 40px; }
.in__st { max-width: 22ch; }
.ty { display: block; }
.ty__head { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 1px solid var(--line); }
.ty__head .label { padding: 16px var(--pad); align-self: center; }
.ty__nav { display: flex; }
.ty__arr { width: 56px; min-height: 48px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--stoic-carbon); font-size: 18px; cursor: pointer; transition: background var(--t-ui) var(--ease-io), color var(--t-ui) var(--ease-io); }
.ty__arr:hover { background: var(--stoic-carbon); color: var(--stoic-cal); }
.ty__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / 5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.ty__track::-webkit-scrollbar { display: none; }
.ty__c { scroll-snap-align: start; border-right: 1px solid var(--line); }
.ty__c a { display: grid; gap: 8px; align-content: space-between; min-height: 150px; padding: var(--pad); text-decoration: none; transition: background var(--t-ui) var(--ease-io); }
.ty__c a:hover { background: var(--stoic-piedra); }
.ty__t { font: 500 17px/1.15 var(--font); }
.ty__s { font-size: 13px; color: var(--muted); }
.ty__note { padding: 14px var(--pad); border-top: 1px solid var(--line); font: 500 12px/1.4 var(--font); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }

/* ---------- SERVICIOS (lectura de «Problems»): cabecera en 3 celdas + 4 tarjetas con isométricos ---------- */
.sv__head { display: grid; grid-template-columns: 3fr 5fr 4fr; border-bottom: 1px solid var(--line); }
.sv__head > * { padding: calc(var(--pad) * 2) var(--pad) var(--pad); }
.sv__head > * + * { border-left: 1px solid var(--line); }
.sv__r { display: grid; gap: 20px; align-content: end; }
.scs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 6 tarjetas: 3 + 3 (Obi 15:45) */
.sc { display: grid; grid-template-rows: auto 220px auto 1fr; gap: 14px; padding: var(--pad); min-height: 500px; }
.sc:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); } .sc:nth-child(n+4) { border-top: 1px solid var(--line); }
.sc__top { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: baseline; min-width: 0; }
.sc__top .label { padding: 4px 8px; border: 1px solid var(--stoic-carbon); }
.sc__ico { display: grid; place-items: center; height: 220px; min-height: 0; }
.sc__ico svg { max-height: 220px; }
.ico { width: min(100%, 260px); height: auto; overflow: visible; }
.ico path, .ico circle { fill: none; stroke: var(--stoic-carbon); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ico .tf { fill: var(--stoic-piedra); }
.ico .ds { stroke-dasharray: 3 3; }
.ico .c { stroke: currentColor; }
.sc__t { font: 500 20px/1.1 var(--font); min-height: 2.2em; display: flex; align-items: flex-end; }   /* títulos a la misma línea base */
.sc__d { color: var(--muted); font-size: 15px; }
/* isométricos: se dibujan al entrar y las capas respiran al pasar */
.motion .sc .ico path:not(.ds), .motion .sc .ico circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--ease-b); }
.motion .sc .ico .tf { fill-opacity: 0; transition: fill-opacity 600ms var(--ease) 900ms, stroke-dashoffset 1600ms var(--ease-b); }
.motion .sc .ico .ds { opacity: 0; transition: opacity 600ms var(--ease) 700ms; }
.motion .sc.is-in .ico path, .motion .sc.is-in .ico circle { stroke-dashoffset: 0; opacity: 1; fill-opacity: 1; }
.motion .sc .ico .l { transition: transform 700ms var(--ease), stroke-dashoffset 1600ms var(--ease-b), fill-opacity 600ms var(--ease) 900ms; }

/* ---------- DEL TRAZO A LA OBRA (lectura de «Map»): escena fija; --p 0→1 la conduce site.js ---------- */
.mp__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; }
.mp__w { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: clamp(34px, 26px + 2.6vw, 74px); line-height: 1; pointer-events: none; }
.mp__w span { display: block; }
.mp__fig { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--bar-h) + 24px); bottom: 150px; border: 1px solid var(--line); background: var(--stoic-cal); }
.mp__photo, .mp__trazo { position: absolute; inset: 9px; }
.mp__photo img, .mp__trazo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%; }
.mp__photo { background: var(--stoic-cal); }
.mp__trazo { z-index: 1; }
.mp__scan { position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--stoic-carbon); left: 0; opacity: 0; }
.mp__ref { position: absolute; z-index: 3; right: 16px; top: 16px; font: 500 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; background: var(--stoic-cal); color: var(--stoic-concreto); }
.mp__info { position: absolute; z-index: 4; left: var(--pad); bottom: 24px; width: min(440px, calc(100% - 2 * var(--pad))); padding: 16px 18px; background: var(--stoic-cal); border: 1px solid var(--stoic-carbon); display: grid; gap: 10px; }
.mp__sts { position: relative; min-height: 46px; }
.mp__st { font-size: 15px; line-height: 1.35; }
.mp__st b { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.mp__st span:last-child { color: var(--muted); }
.mp__panel { position: absolute; z-index: 4; right: var(--pad); top: calc(var(--bar-h) + 24px); bottom: 24px; width: min(38%, 520px); padding: var(--pad); background: var(--stoic-cal); border-left: 1px solid var(--line); display: grid; gap: 18px; align-content: center; }
.mp__cks { display: grid; border-top: 1px solid var(--line); }
.mp__cks li { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.ck { width: 14px; height: 14px; border: 1px solid var(--stoic-carbon); position: relative; flex: none; }
.ck::after { content: ""; position: absolute; inset: 3px; background: var(--stoic-carbon); }
.mp__hint { position: absolute; z-index: 4; right: var(--pad); bottom: 24px; font: 500 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--stoic-concreto); }
/* sin motion (sin JS o reduced-motion): todo apilado y visible */
html:not(.motion) .mp__stage { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; place-items: stretch; }
html:not(.motion) .mp__w { position: static; transform: none; grid-column: 1 / -1; padding: calc(var(--pad) * 2) var(--pad); border-bottom: 1px solid var(--line); }
html:not(.motion) .mp__fig { position: relative; inset: auto; grid-column: 1 / -1; aspect-ratio: 16 / 8; margin: var(--pad) var(--pad) 48px; }
html:not(.motion) .mp__trazo { display: none; }
html:not(.motion) .mp__info, html:not(.motion) .mp__panel { position: static; width: auto; margin: 0 var(--pad) var(--pad); border: 1px solid var(--line); }
html:not(.motion) .mp__hint { display: none; }
html:not(.motion) .mp__st + .mp__st { margin-top: 8px; }
/* con motion: la escena se fija 6 pantallas y se conduce con --p */
.motion .mp { height: 640svh; }
.motion .mp--corto { height: 340svh; }   /* tramo corto mientras falta un trazo aprobado (MP_TRAMO_CORTO; guion remapeado en site.js) */
.motion .mp__stage { position: sticky; top: 0; }
.motion .mp__wa { opacity: calc(1 - clamp(0, (var(--p, 0) - .07) * 14, 1)); transform: translateY(calc(clamp(0, (var(--p, 0) - .07) * 14, 1) * -30px)); }
.motion .mp__wb { position: absolute; left: 0; right: 0; top: 0; opacity: calc(clamp(0, (var(--p, 0) - .1) * 14, 1) - clamp(0, (var(--p, 0) - .2) * 14, 1)); transform: translateY(calc((1 - clamp(0, (var(--p, 0) - .1) * 14, 1)) * 30px)); }
.motion .mp__fig { opacity: clamp(0, (var(--p, 0) - .19) * 14, 1); right: calc(var(--pad) + clamp(0, (var(--p, 0) - .8) / .1, 1) * (min(38%, 520px) + 24px)); transition: right 120ms linear; }
.motion .mp__trazo { clip-path: inset(0 calc((1 - clamp(0, (var(--p, 0) - .23) / .22, 1)) * 100%) 0 0); }
.motion .mp__scan { left: calc(clamp(0, (var(--p, 0) - .23) / .22, 1) * 100%); opacity: calc(clamp(0, (var(--p, 0) - .23) * 40, 1) - clamp(0, (var(--p, 0) - .45) * 40, 1)); }
.motion .mp__photo { opacity: clamp(0, (var(--p, 0) - .47) / .12, 1); }
.motion .mp__trazo img { opacity: calc(1 - clamp(0, (var(--p, 0) - .5) / .1, 1) * .75); }
/* sin foto (regla de imágenes, 26-oct): el trazo es la imagen; sin JS/reduced se ve completo y no se desvanece */
html:not(.motion) .mp--sinfoto .mp__trazo { display: block; }
.motion .mp--sinfoto .mp__trazo img { opacity: 1; }
.motion .spots--map .spot { opacity: clamp(0, (var(--p, 0) - .62 - var(--k, 0) * .03) * 18, 1); transform: translateY(calc((1 - clamp(0, (var(--p, 0) - .62) * 18, 1)) * 10px)); }
.spots--map .spot:nth-child(2) { --k: 1; } .spots--map .spot:nth-child(3) { --k: 2; }
.motion .mp__info { opacity: calc(clamp(0, (var(--p, 0) - .22) * 14, 1) - clamp(0, (var(--p, 0) - .8) * 14, 1)); }
.motion .mp__st { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.motion .mp__st.is-on { opacity: 1; transform: none; }
.motion .mp__panel { opacity: clamp(0, (var(--p, 0) - .82) / .08, 1); transform: translateX(calc((1 - clamp(0, (var(--p, 0) - .82) / .08, 1)) * 60px)); }
.motion .mp__hint { opacity: calc(1 - clamp(0, (var(--p, 0) - .05) * 20, 1)); }

/* ---------- PROYECTOS (lectura de «Platform»): filas [01]/[02] ---------- */
.fe__head { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--pad); border-bottom: 1px solid var(--line); }
.fr { display: grid; grid-template-columns: 3fr 6fr 3fr; }
.fr + .fr { border-top: 1px solid var(--line); }
.fr__l, .fr__r { padding: var(--pad); display: grid; align-content: space-between; gap: 24px; }
.fr__l { border-right: 1px solid var(--line); }
.fr__t { font: 500 var(--fs-h3)/1.05 var(--font); }
.fr__img { position: relative; display: block; padding: 24px; }
.fr__img .rl { opacity: .9; }
.fr__img .media { transition: transform 900ms var(--ease); }
.fr:hover .fr__img .media { transform: scale(.985); }
.fr__r { border-left: 1px solid var(--line); align-content: end; }
.fr__d { font: 500 12px/1.4 var(--font); letter-spacing: var(--track); text-transform: uppercase; }
.fr__a { font: 500 var(--fs-h3)/1 var(--font); font-variant-numeric: tabular-nums; }

/* ---------- CÓMO TRABAJAMOS (lectura de «Why»): barras Carbón; secuencia fija (sin la línea verde: dictamen edc7701) ---------- */
.wy__head { display: grid; grid-template-columns: 3fr 5fr 4fr; border-bottom: 1px solid var(--line); }
.wy__head > * { padding: calc(var(--pad) * 2) var(--pad) var(--pad); }
.wy__head > * + * { border-left: 1px solid var(--line); }
.wy__p { align-self: end; color: var(--muted); font-size: var(--fs-lead); line-height: 1.45; }
.wy__stage { position: relative; }
.wy__list { display: grid; }
.wy__s { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; border-bottom: 1px solid var(--line); }
.wy__bar { display: flex; gap: 18px; align-items: center; padding: 18px var(--pad); background: var(--stoic-carbon); color: var(--stoic-cal); margin: var(--pad) 0 0 var(--pad); }
.wy__bar .idx { color: var(--stoic-piedra); }
.wy__t { font: 500 clamp(20px, 17px + .9vw, 32px)/1 var(--font); }
.wy__d { padding: 16px var(--pad) var(--pad) calc(var(--pad) * 2); color: var(--muted); font-size: var(--fs-lead); }
.wy__fig { grid-column: 2; grid-row: 1 / span 2; position: relative; aspect-ratio: 16 / 9; margin: var(--pad); border: 1px solid var(--line); background: var(--stoic-cal); }
.wy__fig img { width: 100%; height: 100%; object-fit: cover; }
.wy__fig--vacio { border: 0; background: transparent; }   /* pasos sin imagen: retícula continua, sin marco (Marca C1, 1d36e7b) */
.motion .wy__pin { height: calc(100svh + 5 * 60svh); }
.motion .wy__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.motion .wy__list { position: absolute; inset: var(--bar-h) 0 0 0; display: block; }
.motion .wy__s { position: absolute; inset: 0; display: block; border: 0; pointer-events: none; }
.motion .wy__bar { position: absolute; left: var(--pad); width: calc(41% - var(--pad)); top: calc(50% - 180px + var(--k) * 72px); height: 64px; padding-top: 0; padding-bottom: 0; margin: 0; background: var(--stoic-piedra); color: var(--stoic-carbon); transition: background 500ms var(--ease), color 500ms var(--ease), transform 700ms var(--ease); }
.motion .wy__bar .idx { color: var(--stoic-carbon); transition: color 500ms var(--ease); }
.motion .wy__s.is-on .wy__bar { background: var(--stoic-carbon); color: var(--stoic-cal); transform: translateX(16px); }
.motion .wy__s.is-on .wy__bar .idx { color: var(--stoic-piedra); }
.motion .wy__d { position: absolute; left: var(--pad); width: calc(41% - var(--pad)); top: calc(50% - 180px + 5 * 72px + 8px); padding: 0; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.motion .wy__s.is-on .wy__d { opacity: 1; transform: none; transition-delay: 150ms; }
.motion .wy__fig { position: absolute; left: 50%; right: var(--pad); top: 50%; margin: 0; transform: translateY(-50%); clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-b); }
.motion .wy__s.is-on .wy__fig { clip-path: inset(0 0 0 0); }
.motion .wy__s.was-on .wy__fig { clip-path: inset(0 0 0 0); }
.motion .wy__list:has(.wy__s.is-on .wy__fig--vacio) .wy__s.was-on .wy__fig { clip-path: inset(0 100% 0 0); }   /* la figura anterior no asoma bajo un paso vacío */

/* ---------- PARA QUIÉN (lectura de «Use cases»): imagen que cambia + acordeón ---------- */
.uc__head { display: grid; grid-template-columns: 3fr 9fr; border-bottom: 1px solid var(--line); }
.uc__head > * { padding: calc(var(--pad) * 2) var(--pad) var(--pad); }
.uc__head > * + * { border-left: 1px solid var(--line); }
.uc__grid { display: grid; grid-template-columns: 6fr 6fr; }
.uc__imgs { position: relative; margin: var(--pad); aspect-ratio: 4 / 3.4; border: 1px solid var(--line); }
.uc__img { position: absolute; inset: 9px; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-b); }
.uc__img.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
.uc__ref { position: absolute; z-index: 3; left: 16px; bottom: 16px; font: 500 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; background: var(--stoic-cal); color: var(--stoic-concreto); }
.uc__list { border-left: 1px solid var(--line); }
.uc__i { border-bottom: 1px solid var(--line); }
.uc__b { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 26px var(--pad); background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.uc__t { font: 500 var(--fs-h3)/1.1 var(--font); }
.uc__pm { position: relative; width: 14px; height: 14px; }
.uc__pm::before, .uc__pm::after { content: ""; position: absolute; background: currentColor; transition: transform 500ms var(--ease); }
.uc__pm::before { left: 6.5px; top: 0; width: 1px; height: 14px; } .uc__pm::after { top: 6.5px; left: 0; height: 1px; width: 14px; }
.uc__i.is-open .uc__pm::before { transform: scaleY(0); }
.uc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease); }
.uc__p > p { overflow: hidden; padding: 0 var(--pad) 0 calc(var(--pad) + 56px); color: var(--muted); font-size: var(--fs-lead); }
.uc__i.is-open .uc__p { grid-template-rows: 1fr; }
.uc__i.is-open .uc__p > p { padding-bottom: 28px; }
.uc__i.is-open .uc__t { color: var(--stoic-carbon); }
html:not(.js) .uc__p { grid-template-rows: 1fr; } html:not(.js) .uc__p > p { padding-bottom: 24px; }
html:not(.js) .uc__img:not(:first-child) { display: none; }
.motion .uc__imgs { position: sticky; top: calc(var(--bar-h) + 24px); }

/* ---------- CTA con retícula y coordenadas ---------- */
.ct { position: relative; min-height: 640px; display: grid; place-items: center; overflow: hidden; padding: 96px var(--pad) 0; }
.ct__in { position: relative; z-index: 2; text-align: center; display: grid; gap: 22px; justify-items: center; max-width: 760px; padding: 40px var(--pad); background: var(--stoic-cal); border: 1px solid var(--line); }
.ct__t { max-width: 46ch; color: var(--muted); font-size: var(--fs-lead); }
.ct__trazo { position: relative; z-index: 1; width: min(980px, 100%); margin-top: -20px; height: 300px; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 25%); mask: linear-gradient(180deg, transparent, #000 25%); }
.ct__trazo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* ---------- PIE ---------- */
.ft { position: relative; }
.ft__top { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 1px solid var(--line); }
.ft__h { padding: calc(var(--pad) * 2) var(--pad); max-width: 16ch; }
.ft__info { border-left: 1px solid var(--line); display: grid; }
.ft__d { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px var(--pad); align-items: baseline; }
.ft__d + .ft__d { border-top: 1px solid var(--line); }
.ft__d dd { font-size: 15px; }
.ft__nav { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.ft__col { padding: var(--pad); display: grid; gap: 14px; align-content: start; }
.ft__col + .ft__col { border-left: 1px solid var(--line); }
.ft__col ul { display: grid; gap: 2px; }
.ft__col a { display: inline-flex; min-height: 28px; align-items: center; text-decoration: none; font-size: 15px; }
.ft__col a:hover { text-decoration: underline; }
.ft__col--top { align-content: end; justify-items: end; }
.ft__up { font: 500 12px/1 var(--font) !important; letter-spacing: var(--track); text-transform: uppercase; }
.ft__logo { position: relative; padding: calc(var(--pad) * 1.5) var(--pad); border-bottom: 1px solid var(--line); line-height: 0; display: grid; }
.logo--foot { grid-area: 1 / 1; width: 100%; height: auto; min-height: 74px; transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.logo--foot-iso { position: absolute; left: 50%; top: 15%; height: 70%; width: auto; opacity: 0; transform: translateX(-50%) scale(.9); transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.ft__logo:hover .logo--foot { opacity: 0; transform: scale(.98); }
.ft__logo:hover .logo--foot-iso { opacity: 1; transform: translateX(-50%); }
.ft__legal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 16px var(--pad) 64px; font-size: 13px; color: var(--muted); }
.ft__legal p:nth-child(2) { text-align: center; } .ft__legal p:last-child { text-align: right; }
.ft__legal a { color: var(--stoic-carbon); }

/* ================================================= PÁGINAS INTERIORES ================================================= */
.ph { display: grid; grid-template-columns: 7fr 5fr; padding-top: var(--bar-h); }
.ph__l { padding: calc(var(--pad) * 3) var(--pad) var(--pad); display: grid; gap: 22px; align-content: end; border-right: 1px solid var(--line); }
.ph__h { max-width: 20ch; }
.ph__txt { padding: calc(var(--pad) * 3) var(--pad) var(--pad); display: grid; gap: 14px; align-content: end; }
.dh .dcs { border-left: 0; }
.dcs { display: grid; grid-template-columns: 1fr 1fr; align-content: end; }
.dc { padding: 14px var(--pad); border-top: 1px solid var(--line); display: grid; gap: 4px; }
.dc:nth-child(odd) { border-right: 1px solid var(--line); }
.dc dd { font-size: 15px; }
.dcs--col { grid-template-columns: 1fr; } .dcs--col .dc { border-right: 0; }
.dh__frame { position: relative; margin: 0; padding: 24px; height: clamp(320px, 78svh, 900px); cursor: crosshair; overflow: hidden; }
.dh__frame .dh__img { width: 100%; height: 100%; }
.dh__frame .h4__ref { left: 36px; bottom: 36px; }
.dh__frame--stone { cursor: auto; }
@media (max-width: 759px) { .dh__frame--c { display: none; } }
.lt { display: grid; grid-template-columns: 3fr 9fr; }
.lt > * { padding: calc(var(--pad) * 2) var(--pad); }
.lt > .label { border-right: 1px solid var(--line); }
.lt__t { max-width: 30ch; }
.lt__d { max-width: 52ch; font-size: clamp(20px, 1.2vw + 12px, 28px); line-height: 1.35; }
.lt__s { grid-column: 2; padding-top: 0; color: var(--muted); font-size: var(--fs-lead); max-width: 56ch; }
.motion [data-lit] .lw { color: var(--stoic-piedra); transition: color var(--t-ui) var(--ease-io); }
.motion [data-lit] .lw.on { color: inherit; }
.motion [data-lit] .tt-b .lw.on { color: var(--muted); }
.sqs__l { display: grid; }
.sq-r { display: grid; grid-template-columns: 3fr 9fr; }
.sq-r + .sq-r { border-top: 1px solid var(--line); }
.sq-r__l { padding: var(--pad); border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.sq-r__img { position: relative; padding: 24px; }
.sts-w { display: grid; grid-template-columns: 3fr 9fr; }
.sts-w__l { padding: calc(var(--pad) * 2) var(--pad); border-right: 1px solid var(--line); }
.sts-w__h { padding: calc(var(--pad) * 2) var(--pad); }
.sts-w .sts { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.sts { display: grid; grid-template-columns: repeat(5, 1fr); }
.sts--3 { grid-template-columns: repeat(3, 1fr); }
.st { padding: var(--pad); display: grid; gap: 12px; align-content: start; min-height: 220px; }
.st + .st { border-left: 1px solid var(--line); }
.st__t { font: 500 20px/1.1 var(--font); }
.st p { color: var(--muted); font-size: 15px; }
.dn__a { display: grid; grid-template-columns: 5fr 7fr; text-decoration: none; color: inherit; }
.dn__l { padding: calc(var(--pad) * 2) var(--pad) var(--pad); display: grid; gap: 16px; align-content: space-between; justify-items: start; border-right: 1px solid var(--line); }
.dn__s { color: var(--muted); }
.dn__img { margin: 24px; }
.pcs { display: grid; grid-template-columns: repeat(3, 1fr); }
.pc { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pc:nth-child(3n) { border-right: 0; }
.pc__a { display: grid; gap: 14px; padding: var(--pad); text-decoration: none; color: inherit; height: 100%; align-content: start; }
.pc__top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.pc__b { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pc__t { font: 500 20px/1.1 var(--font); }
.pc__ar { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc__img { transition: transform 900ms var(--ease); }
.pc__a:hover .pc__img { transform: scale(.985); }
.pcs-w { border-bottom: 0 !important; }
.ix { display: grid; grid-template-columns: 3fr 9fr; }
.ix__l { padding: calc(var(--pad) * 2) var(--pad); border-right: 1px solid var(--line); }
.ix__tbl { overflow-x: auto; }
.ix table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ix th, .ix td { text-align: left; padding: 14px var(--pad); border-bottom: 1px solid var(--line); font-weight: 400; }
.ix thead th { font: 500 12px/1.4 var(--font); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.ix tbody th a { text-decoration: none; font-weight: 500; display: inline-flex; min-height: 24px; align-items: center; }
.ix tbody th a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }
.crumb { text-decoration: none; display: inline-flex; min-height: 24px; align-items: center; } .crumb:hover { text-decoration: underline; }
.fo { display: grid; grid-template-columns: 5fr 7fr; }
.fo__ph { padding: var(--pad); border-right: 1px solid var(--line); display: grid; gap: 10px; }
.fo__flat { position: relative; aspect-ratio: 4 / 5; background: var(--stoic-piedra); }
.fo__img, .fo__img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fo__img img { object-fit: cover; }
.fo__txt { padding: calc(var(--pad) * 2) var(--pad); display: grid; gap: 14px; align-content: start; }
.fo__role { color: var(--muted); margin-bottom: 24px; }
.sv--page .scs { border-top: 0; }
.bm { display: grid; grid-template-columns: 1fr 1fr; }
.bm__img { position: relative; margin: var(--pad); aspect-ratio: 4 / 4.4; border: 1px solid var(--line); overflow: hidden; }
.bm__ph { position: absolute; inset: 9px; }
.bm__tr { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; z-index: 1; clip-path: inset(0 50% 0 0); background: var(--stoic-cal); }
.bm__ref { position: absolute; z-index: 2; left: 16px; bottom: 16px; padding: 5px 8px; background: var(--stoic-cal); }
.bm__txt { padding: calc(var(--pad) * 2) var(--pad); border-left: 1px solid var(--line); display: grid; gap: 18px; align-content: center; }
.bm__txt .label:not(:first-child) { margin-top: 16px; }
.cf { display: grid; grid-template-columns: 4fr 8fr; }
.cf__info { border-right: 1px solid var(--line); align-content: start; }
.cf__info .dc:first-child { border-top: 0; }
.cf__info > .dcs .dc:first-child { border-top: 0; }
.cf__ph { margin: 0; padding: var(--pad); display: grid; gap: 10px; border-top: 1px solid var(--line); }
.cf__ph .fo__flat { max-width: 420px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.f { display: grid; gap: 8px; padding: 16px var(--pad); border-bottom: 1px solid var(--line); }
.f:nth-child(odd):not(.f--wide) { border-right: 1px solid var(--line); }
.f--wide { grid-column: 1 / -1; }
.f label { font: 500 12px/1.4 var(--font); letter-spacing: var(--track); text-transform: uppercase; }
.f input, .f select, .f textarea { width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--stoic-concreto); background: transparent; color: var(--stoic-carbon); font-size: 16px; border-radius: 0; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--stoic-carbon); outline-offset: 2px; }
.f [aria-invalid="true"] { border-bottom: 2px solid var(--stoic-carbon); }
.f--check .opt { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font: 400 15px/1.5 var(--font); }
.f--check input { width: 24px; min-height: 24px; height: 24px; margin: 0; accent-color: var(--stoic-carbon); }
abbr { text-decoration: none; }
.form__msg { margin: 14px 0 6px; font-weight: 500; min-height: 1.5em; }
.lg { padding: calc(var(--pad) * 2) var(--pad); max-width: 860px; display: grid; gap: 28px; }
.lg__tag { display: inline-block; padding: 4px 8px; border: 1px solid var(--stoic-piedra); color: var(--stoic-concreto); margin-bottom: 8px; }   /* etiqueta discreta (Guppi 14:49) */
.lg__draft { color: var(--stoic-concreto); }
.lg__s { display: grid; gap: 12px; }
.lg__h { font: 500 var(--fs-h3)/1.15 var(--font); }

/* ===================================================== MOTION ===================================================== */
.cw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.cw__i { display: inline-block; }
.motion .cw__i { transform: translateY(110%); transition: transform 900ms var(--ease); transition-delay: calc(var(--l, 0) * var(--t-step) + var(--d0, 0ms)); }
.motion .h4 .cw__i, .motion .ph .cw__i { --d0: 80ms; }
.motion.is-ready .ph .cw__i, .motion.is-ready .h4 .cw__i, .motion .is-in .cw__i, .motion .is-in.cw__i { transform: none; }
.motion [data-enter] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-in) var(--ease), transform var(--t-in) var(--ease); transition-delay: calc(200ms + var(--i, 0) * var(--t-stagger) * 2); }
.motion.is-ready [data-enter] { opacity: 1; transform: none; }
.motion.con-loader [data-enter] { opacity: 1; transform: none; transition: none; }
.motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .scs .sc:nth-child(3n+2) { transition-delay: 90ms; } .motion .scs .sc:nth-child(3n+3) { transition-delay: 180ms; }
/* hero: el marco se abre de arriba abajo al entrar (como el destape del hero de Heron) */
.motion .h4__frame { clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--ease-b) 80ms; }
.motion.is-ready .h4__frame, .motion.con-loader .h4__frame { clip-path: inset(0 0 0 0); }
.motion.con-loader .h4__frame { transition: none; }

/* ===================================================== RESPONSIVO ===================================================== */
@media (max-width: 1099px) {
  .sv__head, .wy__head { grid-template-columns: 1fr 1fr; }
  .sv__head > :first-child, .wy__head > :first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .sv__head > :nth-child(2), .wy__head > :nth-child(2) { border-left: 0; }
  .scs { grid-template-columns: 1fr; } .sc:not(:nth-child(3n+1)) { border-left: 0; } .sc:nth-child(n+2) { border-top: 1px solid var(--line); }   /* tableta y móvil: una columna */
  .sc { min-height: 0; grid-template-rows: auto 220px auto auto; } .sc__t { min-height: 0; }
  .fr { grid-template-columns: 1fr 1fr; } .fr__img { grid-column: 1 / -1; grid-row: 1; } .fr__l { border-right: 1px solid var(--line); border-top: 1px solid var(--line); } .fr__r { border-left: 0; border-top: 1px solid var(--line); }
  .ty__track { grid-auto-columns: calc(100% / 3); }
  .sts { grid-template-columns: repeat(3, 1fr); } .st:nth-child(4) { border-left: 0; } .st:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pcs { grid-template-columns: 1fr 1fr; } .pc:nth-child(3n) { border-right: 1px solid var(--line); } .pc:nth-child(2n) { border-right: 0; }
  .mp__panel { width: min(46%, 520px); }
  .motion .mp__fig { right: calc(var(--pad) + clamp(0, (var(--p, 0) - .8) / .1, 1) * (min(46%, 520px) + 24px)); }
}
@media (max-width: 759px) {
  :root { --pad: 16px; }
  .h4__grid { grid-template-columns: 1fr; } .h4__txt { border-right: 0; border-bottom: 1px solid var(--line); } .h4__frame { width: 100%; }
  .h4 .h4__ref { top: 12px; bottom: auto; }
  .in, .ph, .lt, .sts-w, .sq-r, .ix, .dn__a, .fo, .bm, .cf, .ft__top, .uc__head, .uc__grid { grid-template-columns: 1fr; }
  .ph__l, .in__img, .lt > .label, .sts-w__l, .sq-r__l, .ix__l, .dn__l, .fo__ph, .cf__info { border-right: 0; border-bottom: 1px solid var(--line); }
  .in__kay { aspect-ratio: 4 / 5; }   /* móvil: recorte 4x5 de ST (la esquina curva completa); nunca 16x9 */
  .in__img--kay .in__sq { left: calc(var(--pad) + 2.542cqw); right: auto; top: calc(var(--pad) + 2.542cqw); bottom: auto; width: 26.483cqw; }   /* en el cielo del 4x5 (944 px nativos): 250 px por lado a 24 px del borde; la azotea de la esquina curva empieza en x494 y106 del recorte */
  .lt__s { grid-column: 1; }
  .h4__l { padding-top: 22px; }
  .ft__info, .uc__list, .uc__head > * + *, .bm__txt { border-left: 0; }
  .uc__head > * + * { padding-top: 0; }
  .ft__info { border-top: 1px solid var(--line); }
  .sv__head, .wy__head { grid-template-columns: 1fr; } .sv__head > * + *, .wy__head > * + * { border-left: 0; padding-top: 12px; }
  .ty__track { grid-auto-columns: 62%; }
  .fr { grid-template-columns: 1fr; } .fr__l { border-right: 0; } .fr__img { padding: 16px; }
  .sts, .sts--3 { grid-template-columns: 1fr; } .st + .st { border-left: 0; border-top: 1px solid var(--line); } .st { min-height: 0; }
  .pcs { grid-template-columns: 1fr; } .pc { border-right: 0 !important; }
  .ft__nav { grid-template-columns: 1fr 1fr; } .ft__col:nth-child(3) { border-left: 0; } .ft__col:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ft__legal { grid-template-columns: 1fr; padding-bottom: 72px; } .ft__legal p:nth-child(2), .ft__legal p:last-child { text-align: left; }
  .ft__d { grid-template-columns: 96px 1fr; }
  .form { grid-template-columns: 1fr; } .f:nth-child(odd):not(.f--wide) { border-right: 0; }
  .dcs { grid-template-columns: 1fr 1fr; }
  .dh__frame { padding: 14px; height: 62svh; }
  /* Lote 28 (v3 solo 16:9, sin recorte 4:5): marco 16:9 con la imagen completa, sin franja Piedra bajo el hero (Marca, 29-oct) */
  .dh__frame--169 { height: auto; } .dh__frame--169 .dh__img { height: auto; aspect-ratio: 16 / 9; }
  .dh__frame--169 .dh__img .vz { height: 100%; }
  .h4__hint { right: 12px; bottom: 12px; left: 12px; text-align: left; justify-self: start; width: max-content; max-width: calc(100% - 24px); } .h4__ref { left: 12px; bottom: 48px; max-width: calc(100% - 24px); }
  .spot__t { font-size: 10px; padding: 5px 7px; white-space: normal; max-width: 44vw; }
  .uc__p > p { padding-left: calc(var(--pad) + 44px); }
  .spot:nth-child(3) .spot__t { display: none; }
  .ct { min-height: 0; padding-top: 56px; } .ct__trazo { height: 200px; }
  /* map en móvil: la figura arriba, la caja de pasos abajo; al final el panel BIM toma el lugar de la caja */
  .mp__fig { left: var(--pad); right: var(--pad); top: calc(var(--bar-h) + 16px); bottom: 46%; }
  .motion .mp__fig { right: var(--pad); }
  .mp__info { bottom: 16px; }
  .mp__panel { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: 16px; border: 1px solid var(--stoic-carbon); align-content: start; gap: 12px; }
  .mp__panel p:not(.label) { font-size: 15px; }
  .mp__cks li { padding: 8px 0; font-size: 14px; }
  .motion .mp__panel { transform: translateY(calc((1 - clamp(0, (var(--p, 0) - .82) / .08, 1)) * 40px)); }
  html:not(.motion) .mp__stage { grid-template-columns: 1fr; }
  html:not(.motion) .mp__fig { aspect-ratio: 4 / 5; }
  html:not(.motion) .mp__panel { border: 1px solid var(--line); }
  /* cómo trabajamos en móvil: barras arriba, figura abajo */
  .wy__s { grid-template-columns: 1fr; } .wy__fig { grid-column: 1; grid-row: auto; }
  .motion .wy__bar { width: calc(100% - 2 * var(--pad)); top: calc(var(--k) * 52px + 12px); height: 46px; padding: 0 16px; }
  .motion .wy__s.is-on .wy__bar { transform: none; }
  .motion .wy__d { width: calc(100% - 2 * var(--pad)); top: calc(5 * 52px + 22px); }
  .motion .wy__fig { left: var(--pad); top: auto; bottom: 24px; transform: none; }
  .motion .uc__imgs { position: relative; top: 0; }
  .uc__imgs { aspect-ratio: 4 / 3; }
  .bm__img { aspect-ratio: 4 / 5; }
}
@media (max-width: 359px) { .nav__a, .lang { min-width: 0; } .bar__logo { padding: 0 10px; } .menu-btn { padding: 0 12px; gap: 10px; } }

/* ---------- reduced motion: todo quieto; nada se fija (salvo la barra del header) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .bar.is-hidden { transform: none; }
}

/* ---------- PROPUESTAS DE MARCA sin aprobar (flags en <html>, ver PROPUESTAS en content.py) ---------- */
html:not(.p-reticula) .pl { display: none; }
html:not(.p-reticula) main, html:not(.p-reticula) .foot { border-left-color: transparent; border-right-color: transparent; }
.p-reticula main { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), color-mix(in srgb, var(--line) 38%, transparent) calc(100% / 12 - 1px), color-mix(in srgb, var(--line) 38%, transparent) calc(100% / 12)); }
@media (max-width: 759px) { .p-reticula main { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), color-mix(in srgb, var(--line) 38%, transparent) calc(25% - 1px), color-mix(in srgb, var(--line) 38%, transparent) 25%); } }
html.p-loader-linea .stoa-loader { --loader-build: 1300ms; --loader-max: 1700ms; --loader-pausa: 60000ms; --loader-fade: 300ms; --loader-ancho: 84px; }
html.p-loader-linea .stoa-loader__iso .muro, html.p-loader-linea .stoa-loader__iso .pilar { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: .34; transform: none; opacity: 1;
  animation: stoa-linea 600ms cubic-bezier(0, 0, 0, 1) both, stoa-relleno 300ms ease 1000ms both; }
html.p-loader-linea .stoa-loader__iso .muro { stroke-dasharray: 68; --len: 68; }
html.p-loader-linea .stoa-loader__iso .pilar { stroke-dasharray: 16; --len: 16; animation-delay: calc(240ms + var(--i) * 120ms), 1000ms; animation-duration: 400ms, 300ms; }
@keyframes stoa-linea { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes stoa-relleno { to { fill-opacity: 1; } }

/* ---------- MARCADOR «VANO» (v1.6 aprobado): cuadrado sólido Verde sierra 1:1, esquinas rectas, sin marco; uno por pantalla ---------- */
.vano { display: block; aspect-ratio: 1; background: var(--stoic-verde); border: 0; border-radius: 0; }
.h4__v { position: absolute; z-index: 3; width: 12px; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease); }
.is-aim .h4__v { opacity: 1; }

.iso-w { margin-top: 12px; }
.iso { display: block; width: clamp(240px, 34vw, 480px); height: auto; }
@media (max-width: 759px) { .iso { width: min(320px, 100%); } }
.motion .iso-w:not(.dibujado) .iso path[pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .iso-w:not(.dibujado) .iso .iso-contorno, .motion .iso-w:not(.dibujado) .iso .iso-vano,
.motion .iso-w:not(.dibujado) .iso .iso-reticula, .motion .iso-w:not(.dibujado) .iso .iso-caras { opacity: 0; }
.motion .iso-w.dibujado:not(.listo) .iso path[pathLength] { stroke-dasharray: 1 1; animation: iso-trazo 600ms cubic-bezier(0, 0, 0, 1) both; }
.motion .iso-w.dibujado .iso .muro.arista { animation-delay: 120ms; }
.motion .iso-w.dibujado .iso .p1.contorno { animation-delay: 360ms; } .motion .iso-w.dibujado .iso .p1.arista { animation-delay: 480ms; }
.motion .iso-w.dibujado .iso .p2.contorno { animation-delay: 480ms; } .motion .iso-w.dibujado .iso .p2.arista { animation-delay: 600ms; }
.motion .iso-w.dibujado .iso .p3.contorno { animation-delay: 600ms; } .motion .iso-w.dibujado .iso .p3.arista { animation-delay: 720ms; }
.motion .iso-w.dibujado .iso .p4.contorno { animation-delay: 720ms; } .motion .iso-w.dibujado .iso .p4.arista { animation-delay: 840ms; }
.motion .iso-w.dibujado:not(.listo) .iso .iso-reticula, .motion .iso-w.dibujado:not(.listo) .iso .iso-caras { animation: iso-aparece 600ms cubic-bezier(0, 0, 0, 1) both; }
.motion .iso-w.dibujado:not(.listo) .iso .iso-contorno, .motion .iso-w.dibujado:not(.listo) .iso .iso-vano { animation: iso-aparece 600ms cubic-bezier(0, 0, 0, 1) 1000ms both; }
@keyframes iso-trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes iso-aparece { from { opacity: 0; } }

/* ---------- PLANTA A→B (estilo «mapa» de Heron): mismo componente que el hero, se dispara al entrar en vista ---------- */
.pz { border-bottom: 1px solid var(--line); }
.pz__head { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 0; border-bottom: 1px solid var(--line); }
.pz__head > * { padding: calc(var(--pad) * 1.2) var(--pad) var(--pad); margin: 0; }
.pz__head > * + * { border-left: 1px solid var(--line); }
.pz__dl { display: grid; gap: 10px; align-content: end; padding-bottom: 8px !important; }
.pz__head > .pz__u { grid-column: -2; border-left: 1px solid var(--line); padding-top: 0; }
.pz__dl div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.pz__dl dd { margin: 0; text-align: right; }
.pz__frame { position: relative; aspect-ratio: var(--ar, 2720 / 2048); margin: var(--pad); background: var(--stoic-cal); }
.pz__frame .h4__ref { top: 12px; bottom: auto; left: 12px; }
.pz__tags { position: absolute; inset: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; z-index: 2; pointer-events: none; }
.pz__t { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.pz__w { display: grid; justify-items: center; padding: 3px 6px; background: color-mix(in srgb, var(--stoic-cal) 88%, transparent); color: var(--stoic-carbon);
  font: 500 clamp(9px, .78vw, 12px)/1.25 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pz__w b { font-weight: 600; } .pz__w span { font-weight: 400; letter-spacing: .02em; text-transform: none; }
.pz__n { display: none; }
.pz__leg { display: none; }
.motion .pz__t { opacity: 0; transition: opacity 500ms var(--ease) calc(var(--k, 0) * 40ms); }
.motion .pz__frame.is-in .pz__t { opacity: 1; }
@media (max-width: 1099px) { .pz__head { grid-template-columns: 1fr 1fr; } .pz__head > :first-child { grid-column: 1 / -1; padding-bottom: 0; } .pz__head > :nth-child(2) { border-left: 0; } }
@media (max-width: 899px) {
  /* en móvil y tableta chica los nombres se enciman: números sobre la planta y leyenda numerada debajo */
  .pz__head { grid-template-columns: 1fr; } .pz__head > * + *, .pz__head > .pz__u { border-left: 0; }
  .pz__frame { margin: 12px 0 0; }
  .pz__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  .pz__n { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; background: var(--stoic-carbon); color: var(--stoic-cal); font: 500 10px/1 var(--font); font-variant-numeric: tabular-nums; }
  .pz__leg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .pz__leg li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 10px var(--pad); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
  .pz__leg li:nth-child(odd) { border-right: 1px solid var(--line); }
  .pz__leg li > span:last-child { color: var(--muted); text-transform: none; font-variant-numeric: tabular-nums; }
}
@media (max-width: 359px) { .pz__leg { grid-template-columns: 1fr; } .pz__leg li:nth-child(odd) { border-right: 0; } }

/* ---------- SERIES (proceso): wireframe → dibujo → foto, barrido por scroll dentro de una escena fija ---------- */
.sr { border-bottom: 1px solid var(--line); }
.sr__head { display: grid; grid-template-columns: 4fr 8fr; border-bottom: 1px solid var(--line); }
.sr__head > * { margin: 0; padding: calc(var(--pad) * 1.2) var(--pad) var(--pad); }
.sr__head > * + * { border-left: 1px solid var(--line); }
.sr__s + .sr__s { border-top: 1px solid var(--line); }
.sr__pin { display: grid; grid-template-columns: 4fr 8fr; }
.sr__info { display: grid; align-content: space-between; gap: 22px; padding: var(--pad); border-right: 1px solid var(--line); }
.sr__t { margin: 0; }
.sr__sts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr__st { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); font: 500 12px/1.2 var(--font); letter-spacing: var(--track); text-transform: uppercase; }
/* barra de etapa activa: Carbón sólido con texto Cal (v1.6) */
.sr__st.is-on { background: var(--stoic-carbon); color: var(--stoic-cal); border-color: var(--stoic-carbon); }
.sr__st.is-on .idx { color: var(--stoic-piedra); }
.sr__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; }
.sr__dl div { border-top: 1px dashed var(--line); padding-top: 8px; } .sr__dl dd { margin: 4px 0 0; font-size: 13px; }
.sr__frame { position: relative; margin: var(--pad); align-self: center; }
.sr__ls { position: relative; overflow: hidden; aspect-ratio: 16 / 8.93; background: var(--stoic-cal); }
.sr__ls--sq { aspect-ratio: 1; width: min(100%, calc(100svh - 160px)); margin-inline: auto; }   /* torre 2048×2048: sin recorte */
.sr__l, .sr__l img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sr__l img { object-fit: cover; }
.sr__l:not(.sr__last) { display: none; }
.sr__scan { display: none; }
.sr__ref { left: 12px; top: 12px; bottom: auto; right: auto; }
.sr__frame--recorte .sr__l img { transform: scale(1.125); transform-origin: 100% 0; }
.sr__frame--tapa .sr__ref { left: 1%; top: auto; bottom: 1.6%; min-width: 11%; min-height: 6.2%; display: grid; align-items: center; background: var(--stoic-cal); color: var(--stoic-carbon); }
.motion .sr__s { height: calc(var(--n, 3) * 85svh + 60svh); }
.motion .sr__s[data-n="2"] { --n: 2; }
.motion .sr__pin { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); }
.motion .sr__l:not(.sr__last) { display: block; }
/* capa k (≥ 2) barre de izquierda a derecha sobre la anterior; la línea Carbón marca el frente del barrido */
.motion .sr__l2 { --e: clamp(0, (var(--p, 0) - .12) / .3, 1); }
.motion [data-n="3"] .sr__l3 { --e: clamp(0, (var(--p, 0) - .56) / .3, 1); }
.motion [data-n="2"] .sr__l2 { --e: clamp(0, (var(--p, 0) - .25) / .45, 1); }
.motion .sr__l2, .motion .sr__l3 { clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0); }
.motion .sr__scan { display: block; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--stoic-carbon); left: calc(var(--sx, 0) * 100%); opacity: var(--so, 0); z-index: 2; }
@media (max-width: 899px) {
  .sr__head, .sr__pin { grid-template-columns: 1fr; } .sr__head > * + * { border-left: 0; padding-top: 0; }
  .sr__info { order: 2; border-right: 0; padding-top: 12px; gap: 12px; }
  .sr__frame { margin: 12px 0 0; }
  .sr__sts { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .sr__st { padding: 8px 8px; font-size: 10px; letter-spacing: .06em; gap: 6px; flex-wrap: wrap; }
  .sr__st + .sr__st { border-left: 0; }
  .sr__dl { grid-template-columns: 1fr 1fr; gap: 6px 12px; } .sr__dl dd { font-size: 12px; }
  .motion .sr__pin { align-content: start; }
}

/* planta casa: capa previa (boceto) que se retira con un barrido de izquierda a derecha antes del A→B; sin JS / reduced: oculta */
.ab .ab__0 { display: none; }
.motion .ab .ab__0 { display: block; clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.625,.05,0,1); }
.motion .ab.is-t .ab__0 { clip-path: inset(0 0 0 100%); }
.pz--2 { border-top: 0; }

/* capas N (hero de 2, 3 o más capas): cada una barre de izquierda a derecha sobre la anterior; sin JS / reduced: la última */
.ab .ab__l:not(.ab__last) { display: none; }
.motion .ab .ab__l { display: block; }
.motion .ab .ab__l ~ .ab__l { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.625,.05,0,1); }
.motion .ab .ab__l.is-on { clip-path: inset(0 0 0 0); }

/* Cursor «trazo» (CURSOR_TRAZO, static/js/cursor-trazo.js). La clase .cur-on la pone el JS solo si arranca (escritorio).
   El nativo se ve siempre (flecha + pickbox + estela), salvo sobre imágenes y tarjetas (.cur-cruz: cruz + X/Y). Dictamen edc7701. */
.cur-cv { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
html.cur-on.cur-cruz, html.cur-on.cur-cruz * { cursor: none !important; }
html.cur-on input, html.cur-on textarea, html.cur-on select, html.cur-on [contenteditable] { cursor: auto !important; }
html.cur-on input[type=text], html.cur-on input[type=email], html.cur-on input[type=tel], html.cur-on input:not([type]), html.cur-on textarea { cursor: text !important; }
@media (hover: none), (pointer: coarse) { .cur-cv { display: none; } html.cur-on, html.cur-on * { cursor: auto !important; } }
html.cur-on .h4__cx, html.cur-on .h4__cy { display: none; }   /* la cruz del cursor sustituye la mira propia del marco */
html.cur-on .h4__v { display: none; }   /* sin cuadrado dentro del vano: manda el cursor-trazo (dictamen 16257bc, bloqueante 2) */
@media (hover: none), (pointer: coarse) { .h4__cx, .h4__cy { display: none !important; } }   /* táctil: sin cursor ni mira (Guppi 15:25) */

/* ---- Proyectos: transición triple por tarjeta (CARD_TRIPLE). Reposo = línea; hover/focus = sketch y luego foto (~1.2 s);
   al salir regresa a línea (~0.6 s). Solo escritorio con puntero fino y motion; táctil, reduced-motion y sin JS: foto. ---- */
.tri { display: none; }
@media (hover: hover) and (pointer: fine) {
  .motion .pc--tri .tri { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .motion .pc--tri .tri__l, .motion .pc--tri .tri__l img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .motion .pc--tri .tri__l img { object-fit: cover; object-position: 50% 50%; }
  .motion .pc--tri .tri__l { clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.625,.05,0,1); }
  .motion .pc--tri .pc__a:hover .tri__l1, .motion .pc--tri .pc__a:focus-visible .tri__l1 { clip-path: inset(0 0 0 100%); transition: clip-path .55s cubic-bezier(.625,.05,0,1); }
  .motion .pc--tri .pc__a:hover .tri__l2, .motion .pc--tri .pc__a:focus-visible .tri__l2 { clip-path: inset(0 0 0 100%); transition: clip-path .55s cubic-bezier(.625,.05,0,1) .62s; }
}

/* ---- Studio: secuencia STUDIO_INSIGNIA. Sin JS / reduced: fotos finales apiladas, sin pin. ---- */
.si { border-bottom: 1px solid var(--line); }
.si__p { position: relative; }
.si__ls { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stoic-cal); }
.si__l, .si__l img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.si__l img { object-fit: cover; }
.si__l1, .si__l2 { display: none; }
.si__ct { margin: 0; padding: 14px var(--pad); border-top: 1px solid var(--line); font: 500 12px/1.3 var(--font); letter-spacing: var(--track); text-transform: uppercase; color: var(--stoic-carbon); }
.si__ct .idx { margin-right: 10px; } .si__ct span:last-child { color: var(--stoic-concreto); }
.si__seam { display: none; }
.motion .si.si--on { height: calc(var(--n, 2) * 240svh); }
.motion .si--on .si__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.motion .si--on .si__p { position: absolute; inset: 0; z-index: calc(var(--j) + 1); background: var(--stoic-cal); }
.motion .si--on .si__ls { position: absolute; inset: var(--bar-h) 0 52px 0; aspect-ratio: auto; }
.motion .si--on .si__l1, .motion .si--on .si__l2 { display: block; }
.motion .si--on .si__l2 { clip-path: inset(0 calc((1 - var(--e2, 0)) * 100%) 0 0); }
.motion .si--on [data-capas="3"] .si__l3 { clip-path: inset(0 calc((1 - var(--e3, 0)) * 100%) 0 0); }
.motion .si--on .si__ct { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; background: var(--stoic-cal); opacity: 0; transition: opacity .3s var(--ease); }
.motion .si--on .si__p.is-on .si__ct { opacity: 1; }
.si-fija .si-fija__pic, .si-fija .si-fija__pic img { width: 100%; height: 100%; display: block; object-fit: cover; }

.es { display: grid; grid-template-columns: 7fr 5fr; gap: var(--pad); padding: calc(var(--pad) * 2) var(--pad); border-top: 1px solid var(--line); align-items: center; }
.es__svg { width: 100%; height: auto; display: block; overflow: visible; }
.es__svg path { fill: none; stroke: var(--stoic-carbon); stroke-width: 1; vector-effect: non-scaling-stroke; }
.es__svg .vano { fill: var(--stoic-verde); stroke: none; }
.es__txt { display: grid; gap: 18px; max-width: 46ch; }
.es__p { margin: 0; font-weight: 400; } .es__c2 { margin: 0; color: var(--stoic-concreto); }
.motion .es__svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.625,.05,0,1); }
.motion .es__svg .es__c { transition-delay: calc(.35s + var(--i) * .12s); }
.motion .es__svg .es__s { transition-delay: .2s; }
.motion .es__svg .vano { opacity: 0; transition: opacity .6s var(--ease) 1.6s; }
.motion .es.is-in .es__svg path { stroke-dashoffset: 0; } .motion .es.is-in .es__svg .vano { opacity: 1; }
@media (max-width: 900px) { .es { grid-template-columns: 1fr; } }

/* ---- Servicios: dibujos animados (Marca, 26-oct 13:32). Línea 1 px Carbón; secundario Concreto punteado; una sola vez al
   entrar en vista (~2–3 s), sin replay en hover. Reduced-motion / sin JS: cuadro final. ---- */
.ico2 { width: min(100%, 260px); height: auto; overflow: visible; }
.ico2 path, .ico2 circle { fill: none; stroke: var(--stoic-carbon); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ico2 .s { stroke: var(--stoic-concreto); stroke-dasharray: 2 3; }
.ico2 .e { stroke-dasharray: 1 3; }
.motion .sc .ico2 .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t, .6s) cubic-bezier(.625,.05,0,1) var(--d, 0s); }
.motion .sc .ico2 .fd, .motion .sc .ico2 .sol, .motion .sc .ico2 .sombra { opacity: 0; transition: opacity .5s var(--ease) var(--d, 0s); }
.motion .sc .ico2 .sol, .motion .sc .ico2 .sombra { --d: .8s; }
.motion .sc.is-in .ico2 .dr { stroke-dashoffset: 0; }
.motion .sc.is-in .ico2 .fd, .motion .sc.is-in .ico2 .sol, .motion .sc.is-in .ico2 .sombra { opacity: 1; }
.motion .sc.is-in .ico2 .vt { animation: vt-flow 2.4s linear var(--d, 0s) 1 both; }
@keyframes vt-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* ---- Planta de Inicio (PLANTA_ANIMADA): solo el dibujo. Sin JS / reduced: el dibujo fijo, sin pin. ---- */
.pa { border-bottom: 1px solid var(--line); padding: var(--pad); }
.pa__frame { position: relative; width: 100%; max-width: 1400px; margin-inline: auto; aspect-ratio: var(--ar); }
.pa__l, .pa__l img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pa__l img { object-fit: contain; mix-blend-mode: multiply; }
.pa__amb { opacity: 0; } .pa__ph { background: var(--stoic-piedra); }
.motion .pa.pa--on { height: var(--pa-h, 260svh); padding: 0; }
.pa__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pa--gl .pa__completa { visibility: hidden; }
.motion .pa--on .pa__pin { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); display: grid; place-items: center; padding: var(--pad); }
.motion .pa--on .pa__frame { width: min(100%, calc((100svh - var(--bar-h) - 2 * var(--pad)) * 2720 / 2048)); }
.motion .pa--on .pa__l { transition: none; will-change: opacity, transform; }

/* ---- Videos de ST solo en ?revision=marca: secuencia de Studio y transiciones de ficha (EDH, VR HAUS) ---- */
.sv { background: var(--stoic-cal, #efebe4); }
.sv__f { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.sv__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.fv__f { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.fv__p, .fv__p img, .fv__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fv__v { opacity: 0; transition: opacity .3s; }
.fv.is-play .fv__v { opacity: 1; }
.fv__vano { position: absolute; height: auto; opacity: 0; transition: opacity .6s var(--ease, ease); z-index: 2; }
.fv.is-fin .fv__vano { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fv__vano { opacity: 1; transition: none; } }
@media (max-width: 759px) { .fv__f { aspect-ratio: 4 / 5; } .fv__vano { display: none; } }
@media (min-width: 760px) and (max-width: 1199px) and (orientation: portrait) { .fv__f { aspect-ratio: 1 / 1; } .fv__vano { display: none; } }

/* Coordenadas del cursor (cursor-trazo.js): solo junto a la cruz y sobre imágenes; Concreto, 11 px, Hanken, cifras tabulares.
   Reemplaza el Cal al 80 % y el letrero estático «X 0000 · Y 0000» de las fichas (Guppi 26-oct 14:38). */
.cur-xy { position: fixed; left: 0; top: 0; z-index: 2147483001; pointer-events: none; opacity: 0; color: var(--stoic-concreto, #6A665F);
  font: 400 11px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.cur-xy.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cur-xy { display: none; } }

/* Servicios: el dibujo se repite en bucle mientras el cursor está encima (ciclo ~3.6 s, Carbón, sin verde). Al salir termina
   su ciclo y queda en el cuadro final; una sola tarjeta anima a la vez (v4-extra.js). Táctil: una vez al entrar en vista.
   Reduced motion: quieto. */
.motion .sc.is-rs, .motion .sc.is-rs .ico2 *, .motion .sc.is-rs .ico * { transition: none !important; animation: none !important; }
.motion .sc.is-rs { opacity: 1; transform: none; }
.motion .sc.is-fast .ico2 *, .motion .sc.is-fast .ico * { transition-duration: .45s !important; transition-delay: 0s !important; }
/* Marca 15:44/16:04: ninguna línea cruza el texto. La retícula de fondo queda detrás de los bloques de texto (fondo Cal);
   :where() = especificidad 0, así cualquier fondo propio (botones, pestañas, etiquetas oscuras) sigue mandando. */
:where(.p-reticula main [data-header="claro"]) :where(p, h1, h2, h3, h4, dt, dd, .label):not(:where(button *, [role=tab] *, .bt *)) { background-color: var(--stoic-cal); }

/* B1.3 · Proyectos por categoría */
.pcat__h { padding: calc(var(--pad) * 1.5) var(--pad) var(--pad); border-bottom: 1px solid var(--line); }
.pcat__n { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Punto 0 (Obi, 29-oct): tarjetas de Proyectos en loop mientras el puntero está encima (anim-loop.js). ---- */
@media (hover: hover) and (pointer: fine) {
  .motion .pc--tri .pc__a.is-lp .tri__l1 { animation: tri-l1 2.8s cubic-bezier(.625,.05,0,1) infinite; }
  .motion .pc--tri .pc__a.is-lp .tri__l2 { animation: tri-l2 2.8s cubic-bezier(.625,.05,0,1) infinite; }
}
@keyframes tri-l1 { 0% { clip-path: inset(0 0 0 0); } 20%, 88% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes tri-l2 { 0%, 22% { clip-path: inset(0 0 0 0); } 42%, 88% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .pc--tri .pc__a.is-lp .tri__l { animation: none !important; } }