/* tra|ma · sitio público — Manual de identidad v1.0 (agosto 2026)
   Los colores viven solo en :root. Ningún otro bloque escribe un color a mano. */

/* ---------- Fuentes autoalojadas (OFL), variables, subconjunto latino ---------- */
@font-face{font-family:"Jost";src:url("fonts/jost.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --tinta:#171512;
  --papel:#F4F2ED;
  --lima:#CBF23D;
  --lima-profundo:#55720A;
  --bruma:#C9C4B8;
  --grafito:#6B665C;

  /* roles (modo claro por defecto) */
  --fg:var(--tinta);          /* texto principal */
  --fg2:var(--grafito);       /* texto secundario: 5,1:1 sobre papel */
  --fondo:var(--papel);
  --linea:var(--tinta);       /* reglas de 2 px */
  --tick:var(--bruma);        /* marcas de la retícula */
  --suave:var(--bruma);       /* bordes internos */

  --f-display:"Jost",system-ui,sans-serif;
  --f-texto:"Archivo",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  /* escala tipográfica fluida (320 px → 1440 px) */
  --t-cuerpo:clamp(17px,.28vw + 16px,18px);
  --t-lead:clamp(19px,.7vw + 15px,23px);
  --t-h2:clamp(31px,2.4vw + 18px,54px);
  --t-h3:clamp(19px,.5vw + 16px,22px);
  --t-hero:clamp(40px,7.6vw + 6px,116px);
  --t-kicker:13px;

  --celda:20px;
  --regla:2px;
  --seccion:clamp(72px,8vw,120px);
}
.oscuro{
  --fg:var(--papel);
  --fg2:var(--bruma);          /* 10,5:1 sobre tinta */
  --fondo:var(--tinta);
  --linea:var(--papel);
  --tick:var(--grafito);
  --suave:var(--grafito);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:16px;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--f-texto);font-weight:400;font-size:var(--t-cuerpo);line-height:1.6;
  text-align:left;overflow-x:hidden;
}
.oscuro,.claro{background:var(--fondo);color:var(--fg)}
a{color:inherit}
ul,ol{list-style:none}
p{text-wrap:pretty}
h1,h2,h3{text-align:left;text-wrap:balance}
:focus-visible{outline:2px solid var(--lima-profundo);outline-offset:3px;border-radius:0}

.saltar{position:absolute;left:12px;top:-60px;z-index:10;background:var(--papel);color:var(--tinta);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;text-decoration:none}
.saltar:focus{top:12px}

/* ---------- Retícula de 12 columnas ----------
   Se insinúa como una regla con marcas en el borde superior de cada sección.
   Nunca cruza texto. */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative}
.regla{position:relative;height:18px;border-top:var(--regla) solid var(--linea);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-right:1px solid var(--tick)}
.regla i{border-left:1px solid var(--tick);height:100%}

.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.g > *{padding-left:var(--celda);padding-right:var(--celda)}

.seccion{padding:var(--seccion) 0}
.seccion > .wrap > .regla{margin-bottom:clamp(40px,5vw,72px)}

/* ---------- Tipografía ---------- */
.kicker{
  font-family:var(--f-mono);font-weight:400;font-size:var(--t-kicker);line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);
  display:flex;gap:.9em;align-items:baseline;
}
.kicker .pleca{color:var(--lima-profundo);letter-spacing:0}
.oscuro .kicker .pleca{color:var(--lima)}
.kicker .num{color:var(--fg)}

h2{font-weight:800;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.025em}
h3{font-weight:800;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em}
.intro{color:var(--fg2);max-width:44ch}

/* cabecera de sección: título a la izquierda, entradilla a la derecha */
.cab{margin-bottom:clamp(48px,6vw,88px);row-gap:20px;align-items:end}
.cab .c-kicker{grid-column:1 / -1}
.cab h2{grid-column:1 / 8;max-width:16ch}
.cab .intro{grid-column:8 / 13}

/* ---------- Barra superior (sobre el hero oscuro) ---------- */
.barra .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.logo{font-family:var(--f-display);font-size:30px;line-height:1;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;color:var(--fg)}
.logo .t{font-weight:300}
.logo .p{font-weight:400;color:var(--lima)}
.logo .m{font-weight:700}
.nav{display:flex;align-items:center;gap:32px}
.nav a{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--fg2);padding:6px 0;border-bottom:var(--regla) solid transparent;
}
.nav a:hover{color:var(--fg);border-bottom-color:var(--fg)}
.nav a.ingresar{padding:9px 16px;border:var(--regla) solid var(--fg);color:var(--fg);margin-left:4px}
.nav a.ingresar:hover{background:var(--fg);color:var(--fondo)}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;text-align:left;text-decoration:none;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 24px;border:var(--regla) solid var(--fg);border-radius:0;
  transition:background-color .15s,color .15s;
}
.btn-lleno{background:var(--fg);color:var(--fondo)}
.btn-lleno:hover{background:transparent;color:var(--fg)}
.btn-linea{background:transparent;color:var(--fg)}
.btn-linea:hover{background:var(--fg);color:var(--fondo)}

/* ---------- Hero (oscuro) ---------- */
.hero{padding-top:0;padding-bottom:clamp(72px,9vw,128px)}
.hero .regla{margin-bottom:clamp(40px,5vw,64px)}
.hero h1{
  font-family:var(--f-display);font-weight:300;
  font-size:var(--t-hero);line-height:.93;letter-spacing:-.025em;margin-top:clamp(20px,2.4vw,32px);
}
.hero h1 .l{display:block}
.hero h1 .fuerte{font-weight:700}
.caret{
  display:inline-block;width:.075em;height:.68em;background:var(--lima);
  margin-left:.07em;vertical-align:baseline;
  animation:parpadeo 1.1s steps(1,end) 1.1s 1 both;
}
@keyframes parpadeo{0%{opacity:1}35%{opacity:0}70%{opacity:1}100%{opacity:1}}

.hero-pie{margin-top:clamp(48px,6vw,88px);row-gap:32px;align-items:start}
.hero .lead{grid-column:1 / 7;font-size:var(--t-lead);line-height:1.5;max-width:38ch}
.hero .acciones{grid-column:8 / 13;display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}
.c-todo{grid-column:1 / -1;position:relative}

@keyframes trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes encender{from{opacity:0}to{opacity:1}}
@keyframes ojos{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}

/* ---------- Servicios: grafo "tu operación" ---------- */
.grafo{position:relative}
.hilos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lin{fill:none;stroke:var(--fg2);stroke-width:1.5;transition:stroke .2s,stroke-width .2s}

.nodos{position:relative;display:grid;grid-template-columns:31% 38% 31%;grid-template-rows:repeat(3,1fr)}
.nodo{position:relative;margin:12px 0;padding:24px 26px 28px;background:var(--papel);
  border:var(--regla) solid var(--suave);transition:border-color .2s}
.nodo:nth-child(-n+3){grid-column:1}
.nodo:nth-child(n+4){grid-column:3}
.nodo:nth-child(1){grid-row:1}.nodo:nth-child(2){grid-row:2}.nodo:nth-child(3){grid-row:3}
.nodo:nth-child(4){grid-row:1}.nodo:nth-child(5){grid-row:2}.nodo:nth-child(6){grid-row:3}
.nodo:hover{border-color:var(--tinta)}
/* nodo de anclaje sobre el borde interior */
.nodo::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--tinta)}
.nodo:nth-child(-n+3)::after{right:-8px}
.nodo:nth-child(n+4)::after{left:-8px}
.idx{display:block;font-family:var(--f-mono);font-size:var(--t-kicker);letter-spacing:.14em;color:var(--fg2);margin-bottom:14px}
.nodo h3{margin-bottom:10px}
.nodo p{color:var(--fg2);font-size:var(--t-cuerpo);line-height:1.55}

.nucleo{position:absolute;left:50%;top:50%;width:21%;min-width:220px;transform:translate(-50%,-50%);z-index:2;
  background:var(--tinta);color:var(--papel);padding:26px 24px 28px;border:var(--regla) solid var(--tinta)}
.nucleo .k{display:flex;gap:.8em;align-items:baseline;font-family:var(--f-mono);font-size:var(--t-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--bruma)}
.nucleo .k b{font-weight:400;color:var(--lima)}
.nucleo .t{display:block;margin-top:14px;font-weight:800;font-size:clamp(24px,1.6vw + 14px,34px);line-height:1.05;letter-spacing:-.02em}

/* íconos lineales mínimos, trazo fino */
.ic{position:absolute;top:20px;right:22px;width:30px;height:30px;fill:none;stroke:var(--tinta);stroke-width:1.5;stroke-linejoin:miter;stroke-linecap:butt;transition:transform .25s}
.nodo:hover .ic{transform:translateY(-3px)}
.ic-n{display:block;width:54px;height:54px;margin-bottom:22px;fill:none;stroke:var(--papel);stroke-width:2;stroke-linejoin:miter;stroke-linecap:butt}

/* hover: el nodo resalta su conexión */
.grafo:has(.nodo[data-n="1"]:hover) .lin[data-n="1"],
.grafo:has(.nodo[data-n="2"]:hover) .lin[data-n="2"],
.grafo:has(.nodo[data-n="3"]:hover) .lin[data-n="3"],
.grafo:has(.nodo[data-n="4"]:hover) .lin[data-n="4"],
.grafo:has(.nodo[data-n="5"]:hover) .lin[data-n="5"],
.grafo:has(.nodo[data-n="6"]:hover) .lin[data-n="6"]{stroke:var(--tinta);stroke-width:3}

/* ---------- Método (oscuro): línea de proceso ---------- */
.pasos{position:relative;margin-top:0}
.pasos::before,.pasos::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--regla);transform-origin:left}
.pasos::before{background:var(--suave)}                       /* pista */
.pasos::after{background:var(--papel);transform:scaleX(var(--p,1))}   /* tramo recorrido */
.pasos li{grid-column:span 3;position:relative;padding-top:36px;padding-bottom:8px}
.pasos li::before{content:"";position:absolute;left:var(--celda);top:-7px;width:14px;height:14px;background:var(--papel);
  border:var(--regla) solid var(--papel);transition:background-color .3s,border-color .3s,width .25s,height .25s,top .25s,margin .25s}
/* con JS activo: el recorrido enciende cada paso; el paso actual lleva la pleca lima */
.pasos.go li:not(.on)::before{background:var(--tinta);border-color:var(--grafito)}
.pasos.go li:not(.on) .n{color:var(--grafito)}   /* cifra grande (64 px): 3,19:1, válido para texto grande */
.pasos li.actual::before,.pasos li:hover::before{width:6px;height:26px;top:-12px;margin-left:4px;background:var(--lima);border-color:var(--lima)}
.pasos li:hover .n{transform:translateX(6px)}
.pasos .n{display:block;font-weight:800;font-size:clamp(44px,2.4vw + 28px,64px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:28px;color:var(--fg);transition:color .4s,transform .3s}
.pasos h3{margin-bottom:10px}
.pasos p{color:var(--fg2);max-width:28ch}

/* ---------- Contacto (único bloque en acento) ---------- */
.contacto .c-lado{grid-column:1 / 5;display:flex;flex-direction:column;gap:20px}
.contacto .c-lado p:not(.kicker){max-width:30ch;font-size:var(--t-lead);line-height:1.45}
.bloque{grid-column:5 / 13;background:var(--lima);color:var(--tinta);padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px) clamp(32px,4vw,56px)}
.bloque h2{max-width:14ch;font-size:clamp(32px,2.6vw + 18px,56px)}
.bloque .btn{margin-top:36px;border-color:var(--tinta);color:var(--papel);background:var(--tinta);overflow-wrap:anywhere}
.bloque .btn:hover{background:transparent;color:var(--tinta)}

/* ---------- Pie ---------- */
.pie{border-top:var(--regla) solid var(--tinta);font-size:15px;color:var(--grafito)}
.pie .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:baseline;padding-top:24px;padding-bottom:32px}
.pie a{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);text-underline-offset:4px}
.pie a:hover{text-decoration-thickness:var(--regla)}

/* ---------- Movimiento (solo con JS y sin reduced-motion; si no, todo visible) ---------- */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.js .hero h1 .l{animation:sube .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*140ms + 100ms)}
@keyframes sube{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}

.js .lin{stroke-dasharray:1;stroke-dashoffset:1}
.js .nucleo{opacity:0;transition:opacity .8s .2s}
.js .grafo.in .nucleo{opacity:1}
.js .grafo:not(.in) .nucleo{animation:aparece .01s 4s forwards}
.js .grafo.in .lin{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.3s cubic-bezier(.5,.1,.2,1) var(--d,0s),stroke .2s,stroke-width .2s}

/* íconos: se trazan al entrar */
.js .nodo .ic *,.js .ic-n *{stroke-dasharray:1;stroke-dashoffset:1}
.js .nodo.in .ic *{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .35s}
.js .grafo.in .ic-n *{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease .5s}
.js .nodo:not(.in) .ic *{animation:traza .01s 4s forwards}
.js .grafo:not(.in) .ic-n *{animation:traza .01s 4s forwards}

/* red de seguridad: si el script no llega a marcar, todo se muestra a los 4 s */
.js .rv:not(.in){animation:aparece .01s 4s forwards}
.js .grafo:not(.in) .lin{animation:traza .01s 4s forwards}
@keyframes aparece{to{opacity:1;transform:none}}
@keyframes traza{to{stroke-dashoffset:0}}

/* ---------- Tablet y celular: grafo vertical ---------- */
@media (max-width:1099px){
  .hilos{display:none}
  .nodos{display:block;margin-left:10px;padding-left:30px;border-left:var(--regla) solid var(--tinta)}
  .nodo,.nodo:nth-child(n){margin:0 0 20px;grid-column:auto;grid-row:auto}
  .nodo:last-child{margin-bottom:0}
  .nodo::before{content:"";position:absolute;left:-32px;top:42px;width:30px;height:var(--regla);background:var(--tinta);transform-origin:left}
  .nodo::after,.nodo:nth-child(n)::after{left:-39px;right:auto;top:42px;margin-top:-5px;width:12px;height:12px}
  .nucleo{position:static;transform:none;width:auto;min-width:0;margin-bottom:0}
  .nucleo .t{font-size:clamp(28px,4vw,34px)}
  .js .nodo{--i:0 !important}
  .js .nodo:not(.in)::before{transform:scaleX(0)}
  .js .nodo.in::before{transition:transform .6s .2s}
}

@media (max-width:960px){
  .nav a:not(.ingresar){display:none}
  .g{grid-template-columns:minmax(0,1fr)}
  .g > *{grid-column:1 / -1 !important}
  .cab h2,.cab .intro{max-width:none}
  .cab h2{max-width:18ch}
  .hero .lead{max-width:38ch}
  .pasos{display:block;margin-left:10px;padding-left:30px}
  .pasos::before,.pasos::after{left:0;right:auto;top:0;bottom:0;width:var(--regla);height:auto;transform-origin:top}
  .pasos::after{transform:scaleY(var(--p,1))}
  .pasos li.actual::before,.pasos li:hover::before{left:-32px;top:0;margin-left:0}
  .pasos li{padding-top:0;padding-bottom:36px}
  .pasos li::before{left:-36px;top:6px}
  .pasos .n{margin-bottom:16px}
  .contacto .c-lado{padding-bottom:28px}
}

@media (max-width:600px){
  :root{--celda:0px;--t-hero:max(36px,10.8vw)}
  .ic{top:16px;right:16px;width:26px;height:26px}
  .ic-n{width:38px;height:38px;margin-bottom:16px}
  .wrap{padding:0 20px}
  .logo{font-size:26px}
  .barra .wrap{min-height:68px}
  .nav a.ingresar{padding:8px 12px}
  .regla{height:14px}
  .acciones .btn{flex:1 1 100%}
  .btn{padding:15px 18px}
  .nodo{padding:20px 20px 24px}
  .nodo::before,.nodo::after{top:36px}
  .nodo:nth-child(n)::after{top:36px}
  .bloque{padding:28px 20px 32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .caret{animation:none}
}