/* ================================================================
   ALTEC INDUSTRIES · Propuesta C — "La señal"
   Concepto: una línea de proceso continua (la señal) recorre toda
   la página de arriba abajo, como el flujo de un P&ID. Cada sección
   es una estación conectada a esa línea; sus nodos se encienden al
   pasar. El scroll es el recorrido de la señal por la planta:
   entrada (hero) → registro → proceso → disciplinas → operaciones
   → notas → planta → salida (contacto).

   Craft:
   · easing propio  --out: cubic-bezier(.16,1,.3,1)
                    --inout: cubic-bezier(.77,0,.175,1)
   · UI ≤ 250ms · reveals 500–600ms · stagger 60ms
   · hover solo @media (hover:hover) · :active scale(.98)
   · sin listeners de scroll: IntersectionObserver + CSS
   · radio 0 en todo (shape lock) · un solo acento #2563EB
================================================================ */
:root{
  --ink:#031938;
  --ink-2:#0C2443;
  --steel:#717277;
  --steel-2:#979CA4;
  --paper:#F4F6F8;
  --white:#FFFFFF;
  --blue:#2563EB;
  --wa:#25D366;

  --hair:rgba(3,25,56,.13);
  --hair-2:rgba(3,25,56,.08);
  --hair-inv:rgba(255,255,255,.15);
  --hair-inv-2:rgba(255,255,255,.08);

  --font:'Manrope',system-ui,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --inout:cubic-bezier(.77,0,.175,1);

  --top:68px;
  --spine:clamp(56px,7vw,104px);   /* eje de la señal */
  --pad:clamp(20px,4.5vw,60px);
  --sy:clamp(84px,10vw,148px);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 16px)}
body{
  font-family:var(--font);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul{list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.dk :focus-visible{outline-color:#fff}

.skip{position:fixed;top:-60px;left:50%;transform:translateX(-50%);z-index:400;background:var(--blue);color:#fff;padding:10px 20px;font-weight:700;font-size:13px;transition:top .18s var(--out)}
.skip:focus-visible{top:10px}

/* Grano fijo, decorativo, fuera del flujo de pintura del scroll */
.grain{
  position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

h1,h2,h3{font-weight:800;letter-spacing:-.028em;line-height:1.03}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.sub{color:var(--steel);font-size:clamp(1rem,1.25vw,1.12rem);max-width:56ch}
.dk .sub{color:var(--steel-2)}

/* ---------------- Botones (radio 0, feedback táctil) ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 30px;border:1px solid transparent;white-space:nowrap;
  font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s var(--out),color .2s var(--out),border-color .2s var(--out),transform .12s var(--out);
}
.btn:active{transform:scale(.98)}
.btn svg{transition:transform .2s var(--out)}
.btn-blue{background:var(--blue);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-wa{background:var(--wa);color:#03351A}
.btn-sm{height:42px;padding:0 20px;font-size:11.5px}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg{transform:translateX(4px)}
  .btn-blue:hover{background:#1D4FC4}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
  .btn-line:hover{background:var(--ink);color:#fff}
  .btn-wa:hover{background:#1FBF5A}
}
.lk{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
.lk svg{transition:transform .2s var(--out)}
@media (hover:hover) and (pointer:fine){ .lk:hover svg{transform:translateX(5px)} }

/* ================================================================
   LA SEÑAL — línea de proceso que atraviesa la página
================================================================ */
.station{position:relative}
.station::before{ /* segmento de línea */
  content:"";position:absolute;top:0;bottom:0;left:var(--spine);width:1px;
  background:var(--hair);
}
.station.dk::before{background:var(--hair-inv)}
/* trazo activo: crece con la visibilidad de la sección (scroll-driven, progresivo) */
.station::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--spine);width:1px;
  background:var(--blue);transform:scaleY(0);transform-origin:top;
}
@supports (animation-timeline: view()){
  .station::after{
    animation:spineGrow linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes spineGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
/* nodo de estación */
.node{
  position:absolute;left:var(--spine);top:calc(var(--sy) + .35em);z-index:2;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;
}
.node .pt{
  width:13px;height:13px;flex:none;background:var(--paper);
  border:2px solid var(--steel-2);
  transition:background .25s var(--out),border-color .25s var(--out),box-shadow .25s var(--out);
}
.dk .node .pt{background:var(--ink)}
.node .id{
  font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--steel-2);
  text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--out),transform .3s var(--out),color .25s var(--out);
}
.station.live .node .pt{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px rgba(37,99,235,.14)}
.station.live .node .id{opacity:1;transform:none;color:var(--blue)}

.station .inner{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sy) var(--pad) var(--sy) calc(var(--spine) + clamp(28px,4vw,64px));
}

/* ---------------- Reveal: 550ms, curva fuerte, stagger 60ms ---------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--out),transform .55s var(--out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:60ms}.rv[data-d="2"]{transition-delay:120ms}
.rv[data-d="3"]{transition-delay:180ms}.rv[data-d="4"]{transition-delay:240ms}

/* Animaciones de esquemas */
.blip{animation:blip 2.6s var(--inout) infinite}
@keyframes blip{0%,100%{opacity:.3}50%{opacity:1}}
.dashm{stroke-dasharray:5 6;animation:dashm 22s linear infinite}
@keyframes dashm{to{stroke-dashoffset:-220}}
.flow{stroke-dasharray:90 700;animation:flowk 5.5s linear infinite}
@keyframes flowk{to{stroke-dashoffset:-790}}

/* ================================================================
   CABECERA
================================================================ */
.top{
  position:fixed;inset:0 0 auto 0;height:var(--top);z-index:200;
  display:flex;align-items:center;
  transition:background .25s var(--out),border-color .25s var(--out),box-shadow .25s var(--out);
  border-bottom:1px solid transparent;
}
.top .row{
  width:100%;max-width:none;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 var(--pad);
}
.top.solid{
  background:rgba(244,246,248,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--hair);
}
/* Marca: logo oficial. Ratio 4.98:1 — la altura manda, el ancho se deriva. */
.brand{display:inline-flex;align-items:center}
.logo{position:relative;display:block;height:26px;width:129px;flex:none}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s var(--out)}
.logo .lc{opacity:0}
.top.solid .logo .lw{opacity:0}
.top.solid .logo .lc{opacity:1}
.foot .logo{height:30px;width:149px}
@media (max-width:640px){ .logo{height:23px;width:114px} }
.nav{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px)}
.nav a{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78);padding:8px 2px;position:relative;
  transition:color .2s var(--out);
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--out)}
.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:#fff}
.top.solid .nav a{color:var(--steel)}
.top.solid .nav a.on{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:#fff}
  .top.solid .nav a:hover{color:var(--ink)}
  .nav a:hover::after{transform:scaleX(1)}
}
.burger{display:none;width:44px;height:44px;position:relative;z-index:260;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{width:22px;height:2px;background:#fff;transition:transform .25s var(--out),opacity .2s var(--out),background .25s var(--out)}
.top.solid .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Menú móvil */
.mnav{
  position:fixed;inset:0;z-index:240;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:0 8vw;
  opacity:0;visibility:hidden;transition:opacity .3s var(--out),visibility 0s .3s;
}
.mnav.open{opacity:1;visibility:visible;transition:opacity .3s var(--out)}
.mnav a.it{
  display:flex;align-items:baseline;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--hair-inv);
  font-size:clamp(1.6rem,6.5vw,2.3rem);font-weight:800;letter-spacing:-.02em;
  opacity:0;transform:translateY(10px);
  transition:opacity .35s var(--out),transform .35s var(--out);
}
.mnav.open a.it{opacity:1;transform:none}
.mnav.open a.it:nth-of-type(1){transition-delay:60ms}
.mnav.open a.it:nth-of-type(2){transition-delay:120ms}
.mnav.open a.it:nth-of-type(3){transition-delay:180ms}
.mnav.open a.it:nth-of-type(4){transition-delay:240ms}
.mnav.open a.it:nth-of-type(5){transition-delay:300ms}
.mnav a.it i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--blue)}
.mnav .btn{margin-top:32px;align-self:flex-start}

/* ================================================================
   EST. 00 · HERO — entrada de la señal
================================================================ */
.hero{background:var(--ink);color:#fff;overflow:hidden}
.hero .inner{padding-top:calc(var(--top) + clamp(44px,6vh,80px));padding-bottom:0}
.hero .node{top:calc(var(--top) + clamp(44px,6vh,80px) + .5em)}
.hero .stack{display:grid}
.hslide{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--out),visibility 0s .5s;
}
.hslide.on{opacity:1;visibility:visible;transition:opacity .55s var(--out) .1s}
/* etiqueta del slide (único eyebrow de la página junto a contacto) */
.hslide .et{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;
  font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#7EA4F2;
}
.hslide .et::before{content:"";width:30px;height:1px;background:var(--blue)}
.hslide h1{
  font-size:clamp(2.7rem,7vw,5.6rem);max-width:12em;
}
.hslide h1 .ln{display:block;overflow:hidden}
.hslide h1 .ln span{display:block;transform:translateY(110%);transition:transform .6s var(--inout)}
.hslide.on h1 .ln:nth-child(1) span{transform:none;transition-delay:.12s}
.hslide.on h1 .ln:nth-child(2) span{transform:none;transition-delay:.2s}
.hslide h1 .mut{color:var(--steel-2)}
.hslide .row2{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(28px,3.5vw,44px);
}
.hslide .sub{color:var(--steel-2)}
.hslide .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* cinta esquemática de ancho completo */
.beltwrap{position:relative;margin-top:clamp(36px,5vw,64px)}
.belt{border-top:1px solid var(--hair-inv);padding:clamp(18px,2.5vw,28px) 0 clamp(26px,3.2vw,40px)}
.belt svg{width:100%;height:auto}
/* controles */
.hctrl{
  display:flex;align-items:center;gap:20px;
  border-top:1px solid var(--hair-inv);padding:18px 0 26px;
}
.arrs{display:flex}
.arr{
  width:46px;height:46px;border:1px solid var(--hair-inv);display:grid;place-items:center;color:#fff;
  transition:background .18s var(--out),border-color .18s var(--out),transform .12s var(--out);
}
.arr + .arr{border-left:none}
.arr:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){ .arr:hover{background:#fff;color:var(--ink);border-color:#fff} }
.dots{display:flex;gap:8px}
.dot{width:38px;height:3px;background:var(--hair-inv);position:relative;overflow:hidden;padding:0}
.dot .fl{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}
.dot.on .fl{transform:scaleX(1);transition:transform var(--auto,7000ms) linear}
@media (hover:hover) and (pointer:fine){ .dot:not(.on):hover{background:rgba(255,255,255,.4)} }
.cnt{font-size:11px;font-weight:800;letter-spacing:.24em;color:var(--steel-2);font-variant-numeric:tabular-nums;margin-left:auto}
.cnt b{color:#fff}

/* ================================================================
   EST. 01 · CLIENTES — marquesina con marcas propias
================================================================ */
.reg{background:var(--paper);border-bottom:1px solid var(--hair)}
.reg .inner{padding-top:calc(var(--sy) * .72);padding-bottom:calc(var(--sy) * .72)}
.reg .node{top:calc(var(--sy) * .72 + .35em)}
.reg .cap{
  font-size:12px;font-weight:700;color:var(--steel);margin-bottom:34px;
}
.reg .cap b{color:var(--ink);font-weight:800}
.mq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mq .track{display:flex;width:max-content;animation:mq 30s linear infinite}
@media (hover:hover) and (pointer:fine){ .mq:hover .track{animation-play-state:paused} }
@keyframes mq{to{transform:translateX(var(--mq-shift,-50%))}}
.mq .grp{display:flex;flex:none}
.lg{
  display:flex;align-items:center;justify-content:center;flex:none;
  padding:0 clamp(26px,3.5vw,52px);
  color:var(--steel-2);
}
/* Logos reales: gris en reposo, color al enfocarlos con el mouse */
.lg img{
  /* Cada marca trae su propia escala: los logos apilados (marca + texto
     debajo) necesitan mas alto que un logotipo horizontal para pesar igual. */
  height:calc(clamp(28px,3.2vw,40px) * var(--lg-escala,1));
  width:auto;max-width:190px;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:filter .3s var(--out),opacity .3s var(--out),transform .3s var(--out);
}
/* Respaldo mientras no se haya subido el archivo del logo */
.lgname{
  font-size:13px;font-weight:800;letter-spacing:.2em;white-space:nowrap;
  text-transform:uppercase;
  transition:color .3s var(--out),opacity .3s var(--out);
}
@media (hover:hover) and (pointer:fine){
  /* Al entrar a la cinta se apagan todas… */
  .mq:hover .lg img{opacity:.28}
  .mq:hover .lgname{opacity:.35}
  /* …y solo la marca bajo el cursor recupera su color */
  .mq .lg:hover img{filter:grayscale(0);opacity:1;transform:scale(1.07)}
  .mq .lg:hover .lgname{opacity:1;color:var(--ink)}
}

/* ================================================================
   EST. 02 · METODOLOGÍA — 4 tarjetas iguales sobre blanco
================================================================ */
.met{background:var(--white);border-top:1px solid var(--hair)}
.met h2{max-width:14em;margin-bottom:14px}
.met .sub{margin-bottom:clamp(40px,4.6vw,62px)}
.mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.mcard{
  background:var(--white);border:1px solid var(--hair);
  padding:clamp(24px,2.4vw,32px) clamp(20px,2vw,26px) clamp(28px,2.8vw,36px);
  position:relative;
  transition:border-color .25s var(--out),transform .25s var(--out),box-shadow .25s var(--out);
}
.mcard::before{
  content:"";position:absolute;top:-1px;left:-1px;height:3px;width:0;background:var(--blue);
  transition:width .35s var(--out);
}
.mcard .nn{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--steel-2);
  font-variant-numeric:tabular-nums;
  transition:color .25s var(--out);
}
.mcard .nn::after{content:"";width:18px;height:1px;background:var(--steel-2);transition:background .25s var(--out),width .25s var(--out)}
.mcard h3{font-size:1.18rem;margin:16px 0 10px;letter-spacing:-.015em}
.mcard p{font-size:.92rem;color:var(--steel)}
@media (hover:hover) and (pointer:fine){
  .mcard:hover{border-color:rgba(3,25,56,.26);transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(3,25,56,.28)}
  .mcard:hover::before{width:calc(100% + 2px)}
  .mcard:hover .nn{color:var(--blue)}
  .mcard:hover .nn::after{background:var(--blue);width:30px}
}

/* ================================================================
   EST. 03 · SERVICIOS — panel dividido con llamadas de detalle A / B
   (el círculo es la única forma redonda del sitio: es una llamada
   de plano, no un adorno)
================================================================ */
.svc{background:var(--paper);border-top:1px solid var(--hair)}
.svc h2{max-width:14em;margin-bottom:14px}
.svc .sub{margin-bottom:clamp(40px,4.6vw,62px)}
.scards{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);background:var(--white)}
.scard{
  padding:clamp(30px,3.4vw,50px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .25s var(--out);
}
.scard + .scard{border-left:1px solid var(--hair)}

/* llamada: círculo + línea guía */
.scard .call{
  width:58px;height:58px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;
  font-size:20px;font-weight:800;letter-spacing:0;line-height:1;
  margin-bottom:26px;position:relative;flex:none;
  transition:background .25s var(--out),border-color .25s var(--out),color .25s var(--out);
}
.scard .call::after{
  content:"";position:absolute;left:100%;top:50%;width:34px;height:1px;background:var(--hair);
  transition:background .25s var(--out),width .3s var(--out);
}
.scard .ic{
  position:absolute;right:clamp(26px,3vw,50px);top:clamp(30px,3.4vw,50px);
  color:var(--steel-2);
  transition:color .25s var(--out);
}
.scard .dt{
  font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--steel-2);margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.scard h3{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.025em;margin-bottom:14px}
.scard p{color:var(--steel);max-width:44ch;margin-bottom:28px}

/* lista de especificaciones: filas con viñeta romboidal */
.scard .spec{display:grid;border-top:1px solid var(--hair);margin-bottom:32px}
.scard .spec span{
  padding:13px 0;border-bottom:1px solid var(--hair);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  display:flex;align-items:center;gap:14px;
}
.scard .spec span::before{
  content:"";width:5px;height:5px;flex:none;background:var(--steel-2);rotate:45deg;
  transition:background .25s var(--out);
}
.scard .lk{margin-top:auto;align-self:flex-start}

@media (hover:hover) and (pointer:fine){
  .scard:hover{background:var(--paper)}
  .scard:hover .call{background:var(--blue);border-color:var(--blue);color:#fff}
  .scard:hover .call::after{background:var(--blue);width:48px}
  .scard:hover .ic{color:var(--blue)}
  .scard:hover .spec span::before{background:var(--blue)}
}

/* ================================================================
   EST. 04 · PROYECTOS — carril horizontal con snap
================================================================ */
.prj{background:var(--white);border-top:1px solid var(--hair)}
.prj .headrow{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(34px,4vw,52px);flex-wrap:wrap;
}
.prj h2{max-width:13em;margin-bottom:12px}
.prj .railbtns{display:flex}
.prj .arr{color:var(--ink);border-color:var(--hair)}
@media (hover:hover) and (pointer:fine){ .prj .arr:hover{background:var(--ink);color:#fff;border-color:var(--ink)} }
.lane-wrap{margin-right:calc(-1 * var(--pad))}
.lane{
  display:flex;gap:clamp(16px,2vw,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:16px;padding-right:var(--pad);
  scrollbar-width:none;
}
.lane::-webkit-scrollbar{display:none}
.pcard{
  flex:none;width:min(480px,84vw);scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--hair);
  display:flex;flex-direction:column;
  transition:border-color .25s var(--out),transform .25s var(--out),box-shadow .25s var(--out);
}
@media (hover:hover) and (pointer:fine){
  .pcard:hover{transform:translateY(-5px);border-color:rgba(3,25,56,.26);box-shadow:0 20px 44px -26px rgba(3,25,56,.3)}
  .pcard:hover .media svg{transform:scale(1.04)}
}
.pcard .media{background:var(--ink);aspect-ratio:16/10;overflow:hidden;position:relative}
.pcard .media svg{width:100%;height:100%;transition:transform .5s var(--out)}
.pcard .body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.pcard .kk{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
}
.pcard .kk .c{color:var(--blue)}
.pcard .kk .r{color:var(--steel-2);font-variant-numeric:tabular-nums}
.pcard h3{font-size:1.3rem;margin-bottom:8px;letter-spacing:-.015em}
.pcard p{font-size:.93rem;color:var(--steel);flex:1}

/* ================================================================
   EST. 05 · BLOG — destacado + columna
================================================================ */
.blog{background:var(--paper);border-top:1px solid var(--hair)}
.blog h2{max-width:14em;margin-bottom:12px}
.blog .sub{margin-bottom:clamp(40px,4.5vw,60px)}
.bgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;border:1px solid var(--hair);background:var(--white)}
.bfeat{
  padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;position:relative;
  background:var(--paper);
  transition:background .25s var(--out);
}
.bfeat .fk{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;display:flex;gap:12px;align-items:baseline}
.bfeat .fk time{color:var(--steel-2);letter-spacing:.16em;font-variant-numeric:tabular-nums}
.bfeat h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;margin-bottom:14px;max-width:16em;transition:color .25s var(--out)}
.bfeat p{color:var(--steel);max-width:46ch;flex:1;margin-bottom:26px}
@media (hover:hover) and (pointer:fine){ .bfeat:hover h3{color:var(--blue)} }
.bcol{display:flex;flex-direction:column;border-left:1px solid var(--hair)}
.bitem{
  flex:1;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;position:relative;
  transition:background .25s var(--out);
}
.bitem + .bitem{border-top:1px solid var(--hair)}
.bitem .fk{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:flex;gap:12px;align-items:baseline}
.bitem .fk time{color:var(--steel-2);letter-spacing:.16em;font-variant-numeric:tabular-nums}
.bitem h3{font-size:1.18rem;letter-spacing:-.015em;margin-bottom:8px;transition:color .25s var(--out)}
.bitem p{font-size:.92rem;color:var(--steel);flex:1;margin-bottom:16px}
@media (hover:hover) and (pointer:fine){
  .bitem:hover{background:var(--paper)}
  .bitem:hover h3{color:var(--blue)}
}

/* ================================================================
   EST. 06 · NOSOTROS — la planta
================================================================ */
.abt{background:var(--ink);color:#fff;overflow:hidden;position:relative}
.abt .schem{position:absolute;right:-60px;top:0;bottom:0;width:min(54vw,720px);opacity:.5;pointer-events:none}
.abt .inner{position:relative;z-index:1}
.abt h2{font-size:clamp(2.3rem,5vw,4rem);max-width:12em}
.abt h2 .mut{color:var(--steel-2)}
.abt .sub{margin-top:20px;max-width:52ch}
.knums{
  display:grid;grid-template-columns:auto auto;gap:clamp(30px,5vw,84px);width:fit-content;
  margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--hair-inv);padding-top:clamp(28px,3.4vw,44px);
}
.kn .v{font-size:clamp(3.2rem,7vw,5.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;display:flex;gap:5px}
.kn .v sup{font-size:.38em;color:var(--blue);margin-top:.4em}
.kn .l{margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2);max-width:230px;line-height:1.6}

/* ================================================================
   EST. 07 · CONTACTO — salida de la señal
================================================================ */
.ctc{background:var(--paper);border-top:1px solid var(--hair)}
.ctc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,80px)}
.ctc h2{margin-bottom:14px}
.clist{margin-top:38px;border-top:1px solid var(--hair)}
.crow{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:17px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.crow .k{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-2)}
.crow .v{font-weight:800;font-size:1.02rem}
@media (hover:hover) and (pointer:fine){ .crow a.v:hover{color:var(--blue)} }
.wab{margin-top:30px;background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--wa);padding:24px 26px}
.wab p{font-weight:700;margin-bottom:16px;max-width:34ch;font-size:.97rem}

/* Formulario */
.fpanel{background:var(--white);border:1px solid var(--hair);position:relative}
.fpanel .fhead{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px clamp(22px,3vw,38px);border-bottom:1px solid var(--hair);
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-2);
}
.fpanel .fhead b{color:var(--ink)}
.fbody{padding:clamp(24px,3vw,38px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.ff{display:flex;flex-direction:column;gap:8px}
.ff.full{grid-column:1/-1}
.ff label{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.ff input,.ff textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--hair);padding:13px 15px;
  transition:border-color .18s var(--out),background .18s var(--out),box-shadow .18s var(--out);
}
.ff textarea{min-height:120px;resize:vertical}
.ff input::placeholder,.ff textarea::placeholder{color:var(--steel)}
.ff input:focus,.ff textarea:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.ff.error input,.ff.error textarea{border-color:#C6362F;background:#FDF6F5}
.ff .err{display:none;font-size:12px;font-weight:700;color:#B02E28}
.ff.error .err{display:block}
.facts{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.fnote{font-size:11.5px;font-weight:700;color:var(--steel)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.fpanel.sending .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.fok{display:none;padding:clamp(44px,6vw,76px) 28px;text-align:center}
.fpanel.sent .fbody{display:none}
.fpanel.sent .fok{display:block}
.fok .chk{
  width:60px;height:60px;margin:0 auto 22px;border:2px solid var(--blue);
  display:grid;place-items:center;color:var(--blue);
}
.fok h3{font-size:1.5rem;margin-bottom:10px}
.fok p{color:var(--steel);max-width:38ch;margin:0 auto}

/* ================================================================
   FOOTER
================================================================ */
.foot{background:var(--ink-2);color:#fff}
.foot .inner{padding-bottom:0}
.foot::before,.foot::after{display:none}
.fgrid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.75fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);padding-bottom:clamp(44px,5vw,64px)}
.foot .desc{color:var(--steel-2);margin-top:18px;max-width:330px;font-size:.94rem}
.foot h4{font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--steel-2);margin-bottom:20px}
.foot ul{display:grid;gap:11px}
.foot ul a{color:#C7CFD9;font-size:.94rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:color .2s var(--out)}
.foot ul a::before{content:"";width:0;height:1px;background:var(--blue);transition:width .2s var(--out)}
@media (hover:hover) and (pointer:fine){
  .foot ul a:hover{color:#fff}
  .foot ul a:hover::before{width:14px}
}
.fbar{
  border-top:1px solid var(--hair-inv);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0 26px;font-size:12.5px;color:var(--steel-2);
}
.fbar .sig{font-size:10px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px}
.fbar .sig i{font-style:normal;color:var(--blue)}

/* ---------------- WhatsApp flotante ---------------- */
.waf{
  position:fixed;right:22px;bottom:22px;z-index:220;width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.55);
  transition:transform .15s var(--out);
}
.waf:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .waf:hover{transform:translateY(-3px)} }
.waf::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(37,211,102,.5);animation:wap 2.4s var(--inout) infinite}
@keyframes wap{0%{transform:scale(.9);opacity:.8}70%,100%{transform:scale(1.25);opacity:0}}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:1100px){
  :root{--spine:0px}
  .station::before,.station::after,.node{display:none}
  .station .inner{padding-left:var(--pad)}
}
@media (max-width:960px){
  .nav,.top-cta{display:none}
  .burger{display:flex}
  .hslide .row2{grid-template-columns:1fr}
  .scards{grid-template-columns:1fr}
  .scard + .scard{border-left:none;border-top:1px solid var(--hair)}
  .mcards{grid-template-columns:1fr 1fr}
  .bgrid{grid-template-columns:1fr}
  .bcol{border-left:none;border-top:1px solid var(--hair)}
  .ctc-grid{grid-template-columns:1fr}
  .abt .schem{opacity:.16}
}
@media (max-width:640px){
  :root{--top:62px}
  .hslide h1{font-size:clamp(2.3rem,10vw,3rem)}
  .hslide .ctas .btn{width:100%}
  .hctrl{flex-wrap:wrap;gap:14px}
  .cnt{margin-left:0}
  .mcards{grid-template-columns:1fr}
  .pcard{width:86vw}
  .fgrid{grid-template-columns:1fr}
  .crow{grid-template-columns:1fr;gap:5px}
  .knums{grid-template-columns:1fr;width:100%;gap:26px}
  .fgrid2{grid-template-columns:1fr}
  .fbar{flex-direction:column;align-items:flex-start}
  .waf{right:16px;bottom:16px;width:54px;height:54px}
  .lane-wrap{margin-left:calc(-1 * var(--pad))}
  .lane{padding-left:var(--pad)}
}

/* ================================================================
   REDUCED MOTION — quedan fundidos de opacidad; se elimina movimiento
================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transform:none;transition:opacity .2s ease}
  .hslide h1 .ln span{transform:none !important;transition:none}
  .hslide{transition:opacity .2s ease}
  .mq .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .mq .grp[aria-hidden]{display:none}
  .mq .grp{flex-wrap:wrap;justify-content:center;gap:18px 0}
  .mq{mask-image:none;-webkit-mask-image:none}
  .blip,.dashm,.flow,.waf::after{animation:none}
  .dot.on .fl{transition:none;transform:scaleX(1)}
  .station::after{animation:none;transform:scaleY(1)}
  .pcard,.pcard .media svg,.bfeat,.bitem{transition:none}
  .lane{scroll-behavior:auto}
}

/* ================================================================
   FORMULARIO CONECTADO AL BACKEND
   · .opt   etiqueta de campo opcional
   · .hp    honeypot antispam (invisible pero no display:none, para que
            los bots que ignoran CSS igual lo completen)
   · .fmsg  aviso de error de envio devuelto por la API
================================================================ */
.ff label .opt{font-weight:700;letter-spacing:.08em;color:var(--steel);text-transform:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{
  grid-column:1/-1;display:none;font-size:13px;font-weight:700;line-height:1.5;
  color:#B02E28;background:#FDF6F5;border:1px solid #C6362F;padding:12px 14px;
}
.fmsg.on{display:block}
.fmsg.ok{color:#136A3A;background:#F1FAF4;border-color:#1B8A4B}
.fpanel.sending .fgrid{opacity:.72;pointer-events:none}
.fgrid{transition:opacity .2s var(--out)}

/* ================================================================
   FOTOS SUBIDAS DESDE EL PANEL
   · Proyectos: la foto llena la caja 16:10 de la tarjeta.
   · Blog: la nota destacada puede llevar portada.
   Las proporciones son fijas, así una foto de cualquier tamaño nunca
   mueve el diseño mientras carga.
================================================================ */
.pcard .media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--out)}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .media img{transform:scale(1.04)}
}

.bfeat .bportada{
  margin:calc(clamp(28px,3.4vw,48px) * -1) calc(clamp(28px,3.4vw,48px) * -1) 26px;
  aspect-ratio:16/9;overflow:hidden;background:var(--ink);
}
.bfeat .bportada img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--out)}
@media (hover:hover) and (pointer:fine){
  .bfeat:hover .bportada img{transform:scale(1.03)}
}