/* ═══════════════════════════════════════════════════════════════════
 * site.css — el sistema visual del estudio, en un solo sitio.
 *
 * Los valores de color y tipografía salen literalmente del `brief.md` y
 * del <style> del home: esto no reinterpreta la marca, la centraliza.
 * Los contrastes AA medidos el 30-jul-2026 se conservan tal cual.
 *
 * Anti-checklist del brief, vigente aquí: sin gradientes decorativos, sin
 * sombras, sin radios, sin negrita en display. El único gradient es el
 * barrido de relleno de los botones, que ya existía y es un mecanismo de
 * interacción, no un adorno.
 * ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#15181C; --graphite:#3A3F45; --steel:#9AA0A8; --bone:#F4F2EC;
  --signal:#E2581C; --signal-ink:#BD4917; --signal-text:#FFF3EC;
  /* Contraste AA medido sobre Bone #F4F2EC (30-jul-2026):
       --steel-text #6B6F75 sobre Bone .......... 4,51:1
       --signal-ink #BD4917 sobre Bone .......... 4,54:1
       --signal-text #FFF3EC sobre --signal-ink . 4,67:1
     El --steel de siempre se queda para texto sobre Ink (6,76:1). */
  --steel-text:#6B6F75;
  --line:#9AA0A866; --line-soft:#9AA0A833;
  --f-display:'Space Grotesk',sans-serif;
  --f-body:'Inter',sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --shell:1280px; --gut:32px; --pad:clamp(20px,5vw,64px);
  --sec:clamp(88px,9vw,160px);
  /* La hoja respira MENOS que el home a propósito: el home es la portada,
     la hoja es documentación técnica y va más densa. */
  --sec-hoja:clamp(64px,7vw,112px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body); color:var(--ink); background:var(--bone);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
}
/* Papel milimetrado: la superficie del plano. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 30%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 30%,#000 55%,transparent 100%);
  opacity:.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:var(--ink)}

/* ---------- shell / retícula de 12 columnas ---------- */
.shell{ width:min(var(--shell),100% - var(--pad)*2); margin-inline:auto; position:relative; }
.reticle{ position:fixed; inset:0; z-index:1; pointer-events:none; display:flex; justify-content:center; }
.reticle__inner{ width:min(var(--shell),100% - var(--pad)*2); height:100%; position:relative; }
.reticle__inner span{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.reticle__inner span:nth-child(1){left:0} .reticle__inner span:nth-child(2){left:25%}
.reticle__inner span:nth-child(3){left:50%} .reticle__inner span:nth-child(4){left:75%}
.reticle__inner span:nth-child(5){left:100%}
@media(max-width:760px){ .reticle__inner span:nth-child(2),.reticle__inner span:nth-child(4){display:none} }

/* ---------- eyebrow ---------- */
.eyebrow{ font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.25em;
  text-transform:uppercase; color:var(--steel-text); display:flex; align-items:center; gap:14px; }
.eyebrow .x{ color:var(--signal-ink) }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--steel); flex:none }

/* ---------- nav ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:20;
  transition:background .4s,border-color .4s,backdrop-filter .4s; border-bottom:1px solid transparent; }
header.scrolled{ background:color-mix(in srgb,var(--bone) 86%,transparent); backdrop-filter:blur(8px);
  border-bottom-color:var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.04em; }
.brand .x{ color:var(--signal); margin:0 .08em; display:inline-block; transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.brand:hover .x{ transform:rotate(45deg) }
.nav__links{ display:flex; align-items:center; gap:30px; font-size:14px; }
.nav__links a{ position:relative; color:var(--graphite); transition:color .2s }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--signal); transition:width .3s cubic-bezier(.2,.8,.2,1) }
.nav__links a:hover{ color:var(--ink) } .nav__links a:hover::after{ width:100% }
/* El conmutador son ENLACES: el idioma vive en la URL, no en localStorage. */
.lang{ display:flex; font-family:var(--f-mono); font-size:11px; border:1px solid var(--line); }
.lang a,.lang .lang__on{ padding:9px 11px; min-height:44px; display:flex; align-items:center;
  color:var(--steel-text); transition:color .2s,background .2s; }
.lang a::after{ display:none }
.lang a:hover{ color:var(--ink); background:var(--line-soft) }
.lang .lang__on{ background:var(--ink); color:var(--bone) }
/* Idéntico al del home, valor a valor: el mismo botón no puede verse relleno
   en Signal en la portada y hueco en una hoja. */
.nav__cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  background-image:linear-gradient(90deg,var(--ink) 0 50%,var(--signal) 50% 100%);
  background-size:200% 100%; background-position:100% 0;
  color:var(--ink); font-size:13px; font-weight:500;
  transition:background-position .42s cubic-bezier(.2,.8,.2,1), transform .12s ease }
.nav__cta::after{ display:none !important }
.nav__cta:hover{ background-position:0 0; color:var(--bone) }
.nav__cta:active{ transform:translateY(1px) }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px;
  padding:10px; min-height:44px; }
.nav__burger span{ width:22px; height:2px; background:var(--ink); display:block; transition:.3s }
@media(max-width:880px){
  .nav__burger{ display:flex }
  .nav__links{ position:fixed; inset:72px 0 auto 0; background:var(--bone); flex-direction:column;
    align-items:flex-start; gap:0; padding:var(--pad); border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
  .nav__links.open{ transform:none }
  .nav__links>a{ padding:15px 0; width:100%; border-bottom:1px solid var(--line-soft); font-size:17px }
  .lang{ margin:18px 0 } .nav__cta{ margin-top:8px }
  .nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .nav__burger.is-open span:nth-child(2){ opacity:0 }
  .nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
}

/* ---------- tipografía ---------- */
h1{ font-family:var(--f-display); font-weight:700; line-height:1.04; letter-spacing:-.015em;
  font-size:clamp(38px,5.4vw,72px); }
h2{ font-family:var(--f-display); font-weight:500; line-height:1.08; letter-spacing:-.01em;
  font-size:clamp(28px,3.6vw,46px); }
h3{ font-family:var(--f-display); font-weight:500; font-size:clamp(20px,2.4vw,26px); }
.lead{ font-size:clamp(17px,2vw,20px); color:var(--graphite); max-width:46ch }
.mono{ font-family:var(--f-mono) }

/* ---------- botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:500; padding:15px 26px;
  border:1px solid transparent; background-size:200% 100%; background-position:100% 0;
  transition:background-position .45s cubic-bezier(.2,.8,.2,1),color .3s,gap .3s; cursor:pointer; }
.btn:active{ transform:translateY(1px) }
.btn--signal{ background-image:linear-gradient(90deg,var(--ink) 0 50%,var(--signal) 50% 100%); color:var(--ink) }
.btn--signal:hover{ background-position:0 0; color:var(--bone) }
.btn--ghost{ border-color:var(--graphite); color:var(--ink);
  background-image:linear-gradient(90deg,var(--ink) 0 50%,transparent 50% 100%) }
.btn--ghost:hover{ background-position:0 0; color:var(--bone); border-color:var(--ink) }
.btn--ghost-d{ border-color:#ffffff40; color:var(--bone);
  background-image:linear-gradient(90deg,var(--bone) 0 50%,transparent 50% 100%) }
.btn--ghost-d:hover{ background-position:0 0; color:var(--ink); border-color:var(--bone) }
.btn .ar{ transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.btn:hover{ gap:14px } .btn:hover .ar{ transform:translateX(4px) }

/* ═══════════════════════════════════════════════════════════════════
 * LA HOJA — plantilla de página de servicio.
 *
 * No es el home con menos cosas. El home abre con el instrumento ✕ que
 * converge con el cursor; una hoja abre con lo OTRO que tiene un plano:
 * el cuadro de rotulación. El instrumento sigue siendo exclusivo del
 * home — ese es justo el motivo de que sea memorable.
 * ═══════════════════════════════════════════════════════════════════ */

main{ position:relative; z-index:4 }
.hoja section{ padding-block:var(--sec-hoja); position:relative; z-index:4 }

/* Cabecera: anotación a la izquierda, cuadro de rotulación a la derecha. */
.hoja__head{ padding-top:calc(72px + clamp(48px,6vw,96px)); padding-bottom:var(--sec-hoja);
  position:relative; z-index:4; }
.hoja__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(32px,5vw,72px); align-items:start; }
/* Se apila EN CUANTO deja de caber, no solo en móvil. Sin esto la cabecera
   seguía a dos columnas a 390px: el h1 quedaba encajonado en 193px cuando
   necesitaba 234, y su última palabra se metía debajo del cuadro de
   rotulación, que se pinta encima. Medido en producción en las 14 hojas
   («development», «Automatización») — era de plantilla, no de una página. */
@media(max-width:820px){
  .hoja__grid{ grid-template-columns:1fr; gap:34px }
  .tblock{ max-width:420px }
}
.hoja__head h1{ margin-top:22px; max-width:16ch }
.hoja__head .lead{ margin-top:26px; max-width:52ch; font-size:clamp(17px,1.8vw,21px) }

/* Cuadro de rotulación. Es lo que cose las 15 páginas a la marca. */
.tblock{ border:1px solid var(--ink); font-family:var(--f-mono); font-size:12px;
  position:relative; background:var(--bone); }
.tblock__row{ display:flex; justify-content:space-between; gap:18px; padding:11px 14px;
  border-bottom:1px solid var(--line-soft); }
.tblock__row:last-child{ border-bottom:0 }
.tblock__row span{ color:var(--steel-text); letter-spacing:.14em; text-transform:uppercase }
.tblock__row b{ font-weight:500; letter-spacing:.06em }
/* LA única ✕ en Signal de la página: estática, marca de registro en la
   esquina del cuadro. No sigue al cursor y no se anima. */
.tblock__x{ position:absolute; top:-11px; right:-11px; width:22px; height:22px }
.tblock__x line{ stroke:var(--signal); stroke-width:5; stroke-linecap:square }

/* Eje vertical con nodo por sección: el mismo lenguaje del home, en Steel. */
.hoja__body{ position:relative }
.hoja__body::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line); }
.hoja section{ padding-left:clamp(20px,3vw,46px) }
.hoja section::before{ content:""; position:absolute; left:-4px; top:var(--sec-hoja);
  width:9px; height:9px; background:var(--bone);
  border-left:1px solid var(--steel); border-top:1px solid var(--steel);
  transform:rotate(45deg) translateY(-1px); }
@media(max-width:760px){
  .hoja__body::before{ display:none }
  .hoja section{ padding-left:0 } .hoja section::before{ display:none }
}

.sec-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:34px }
.prosa p{ max-width:64ch; margin-top:20px; color:var(--graphite); }
.prosa p:first-child{ margin-top:0 }
.prosa b{ color:var(--ink); font-weight:500 }
.prosa a{ color:var(--signal-ink); border-bottom:1px solid var(--line) }
.prosa a:hover{ border-bottom-color:var(--signal) }

/* Tabla de especificación. Dos columnas mono, filetes, cero cards y cero
   iconos: es donde esta plantilla se volvería genérica si se descuidara. */
.spec{ border-top:1px solid var(--line); }
.spec__row{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(16px,3vw,40px);
  padding:20px 0; border-bottom:1px solid var(--line-soft); }
.spec__k{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); }
.spec__v{ color:var(--graphite); font-size:16px }
.spec__v b{ color:var(--ink); font-weight:500 }
@media(max-width:640px){ .spec__row{ grid-template-columns:1fr; gap:8px } }

/* Caso real: reutiliza la tarjeta del home, no estrena componente. */
.caso{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,4vw,56px);
  align-items:center; }
.caso__media{ position:relative; overflow:hidden; border:1px solid var(--line) }
.caso__media img{ width:100%; filter:grayscale(1) contrast(1.05); transition:filter .6s,transform .8s cubic-bezier(.2,.8,.2,1) }
.caso:hover .caso__media img{ filter:none; transform:scale(1.02) }
.caso__media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--signal) }
.caso h3{ margin-bottom:16px }
.caso p{ color:var(--graphite) }
.cifras{ display:flex; flex-wrap:wrap; gap:32px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line) }
.cifras div{ font-family:var(--f-mono) }
.cifras b{ display:block; font-family:var(--f-display); font-weight:500; font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.01em; }
.cifras span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-text) }
@media(max-width:820px){ .caso{ grid-template-columns:1fr } }

/* FAQ. <details> nativo: sin JS, y accesible de serie. */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line-soft) }
.faq summary{ cursor:pointer; list-style:none; padding:22px 0; display:flex; gap:18px;
  align-items:baseline; font-family:var(--f-display); font-weight:500; font-size:clamp(17px,1.9vw,21px); }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{ content:"+"; font-family:var(--f-mono); color:var(--signal-ink); font-size:15px; flex:none }
.faq details[open] summary::before{ content:"−" }
.faq summary:hover{ color:var(--signal-ink) }
.faq__a{ padding:0 0 24px 33px; color:var(--graphite); max-width:66ch }
.faq__a a{ color:var(--signal-ink); border-bottom:1px solid var(--line) }

/* Banda de contacto: la misma inversión Ink del home. */
.cta{ background:var(--ink); color:var(--bone); padding-block:var(--sec-hoja);
  position:relative; z-index:4; margin-top:var(--sec-hoja); }
.cta h2{ color:var(--bone); max-width:20ch }
.cta .eyebrow{ color:var(--steel) } .cta .eyebrow::before{ background:var(--steel) }
.cta p{ color:#c2c6cb; margin-top:18px; max-width:48ch }
.cta__row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px }
.cta__meta{ display:flex; flex-wrap:wrap; gap:40px; margin-top:48px; padding-top:26px;
  border-top:1px solid #ffffff1f; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); }
.cta__meta b{ display:block; color:var(--bone); font-weight:500; margin-top:6px;
  letter-spacing:.04em; text-transform:none; font-size:14px }

/* Navegación entre hojas: lo más barato que convierte páginas huérfanas
   en una colección. */
.sheetnav{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 0; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; }
.sheetnav a{ color:var(--steel-text); transition:color .2s }
.sheetnav a:hover{ color:var(--ink) }
.sheetnav b{ display:block; font-family:var(--f-body); font-size:15px; letter-spacing:0;
  text-transform:none; color:var(--ink); font-weight:500; margin-top:5px }
.sheetnav .nx{ text-align:right }

/* ---------- leyenda del catálogo (cuadro de piezas) ---------- */
/* Los dos paneles del cruce ya no llevan viñetas: el catálogo real vive
   aquí abajo. Un plano no lista las piezas dentro del dibujo. */
.leyenda{ margin-top:clamp(48px,6vw,88px); border-top:1px solid var(--line) }
/* Se llena por COLUMNAS, no por filas. Con el flujo por filas, B07 acababa al
   lado de G01 y cada renglón mezclaba los dos brazos — que es justo el eje que
   la sección defiende. Con siete filas por columna, BUILD ocupa la izquierda
   entera y GROW + ADVISORY la derecha, y la leyenda vuelve a leerse como la ✕. */
.leyenda__grid{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,auto);
  grid-auto-columns:1fr; gap:0 clamp(28px,5vw,72px) }
.leyenda__row{ display:flex; align-items:baseline; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line-soft); font-family:var(--f-mono); font-size:13px;
  letter-spacing:.04em; }
.leyenda__row .cod{ color:var(--steel-text); flex:none; font-size:11px; letter-spacing:.12em }
.leyenda__row .nom{ font-family:var(--f-body); font-size:15px; letter-spacing:0; flex:1 }
.leyenda__row .ar{ color:var(--signal-ink); transition:transform .3s cubic-bezier(.2,.8,.2,1) }
a.leyenda__row:hover{ background:var(--line-soft) }
a.leyenda__row:hover .ar{ transform:translateX(4px) }
/* Fila sin página: sin flecha y sin hover. Media afordancia no se entrega. */
.leyenda__row--flat{ color:var(--steel-text) }
.leyenda__row--flat .nom{ color:var(--steel-text) }
@media(max-width:760px){ .leyenda__grid{ grid-auto-flow:row; grid-template-rows:none } }

/* ---------- hub ---------- */
.hub__eje{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--steel-text); margin:38px 0 4px; padding-bottom:10px; border-bottom:1px solid var(--line) }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}