/* ==========================================================================
   OFFICE PACK — hoja de estilos
   Sistema: "spec sheet industrial" + barra de color CMYK (4 unidades)
   Autor: sitio corporativo 4 LOG S.R.L.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Tinta y papel — paleta OFFICE PACK (navy / celeste / grises) */
  --ink:      #071b34;   /* azul marino oscuro */
  --ink-2:    #0A2647;   /* azul marino */
  --ink-3:    #144272;   /* azul corporativo */
  --paper:    #F7F9FC;   /* blanco hueso */
  --paper-2:  #E7ECF3;   /* gris niebla claro */

  /* Las 4 unidades, dentro de la paleta de marca (antes: colores estridentes tipo CMYK) */
  --c-tec: #2CB1BC;  /* turquesa */
  --c-imp: #6FA8D8;  /* celeste */
  --c-sof: #3FD0DC;  /* turquesa claro */
  --c-mer: #9FB3CC;  /* gris azulado */

  /* versiones "tinta" para fondos claros */
  --c-tec-ink: #1C7A82;
  --c-imp-ink: #144272;
  --c-sof-ink: #14818C;
  --c-mer-ink: #4A5568;

  --accent: var(--c-tec);

  /* Tipografía */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-display: clamp(2.5rem, 6.1vw, 5.25rem);
  --fs-h2:      clamp(1.9rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.15rem, 1.6vw, 1.45rem);
  --fs-lead:    clamp(1.02rem, 1.15vw, 1.18rem);
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-label:   .6875rem;

  /* Medidas */
  --wrap: 1280px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);
  --r: 2px;             /* radio: casi recto, look industrial */
  --r-lg: 4px;

  /* Movimiento */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t: .4s var(--ease);
}

/* Temas por sección */
.theme-dark{
  --bg: var(--ink);
  --fg: #F7F9FC;
  --fg-dim: rgba(247,249,252,.60);
  --fg-mute: rgba(247,249,252,.40);
  --line: rgba(247,249,252,.13);
  --line-2: rgba(247,249,252,.22);
  --surface: rgba(247,249,252,.035);
}
.theme-light{
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-dim: rgba(7,27,52,.62);
  --fg-mute: rgba(7,27,52,.42);
  --line: rgba(7,27,52,.14);
  --line-2: rgba(7,27,52,.26);
  --surface: rgba(7,27,52,.03);
}

/* ----------------------------------------------------------- 2. RESET/BASE */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-weight:700; line-height:1.05; letter-spacing:-.025em; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink);
  padding:.75rem 1.25rem; font:600 var(--fs-sm)/1 var(--sans);
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* Compensa el nav fijo cuando se navega por anclas */
section[id], .unit[id]{ scroll-margin-top:92px; }

.section{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:var(--sec-y);
}

/* Textura de grano: mata el aspecto "plano de plantilla" */
.noise{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section > .wrap{ position:relative; z-index:1; }

/* ------------------------------------------------ 3. BARRA DE COLOR (marca) */
.colorbar{ display:flex; width:100%; height:4px; }
.colorbar i{ flex:1; transform:scaleX(0); transform-origin:left; animation:barIn .7s var(--ease) forwards; }
.colorbar i:nth-child(1){ background:var(--c-tec); animation-delay:.05s; }
.colorbar i:nth-child(2){ background:var(--c-imp); animation-delay:.13s; }
.colorbar i:nth-child(3){ background:var(--c-sof); animation-delay:.21s; }
.colorbar i:nth-child(4){ background:var(--c-mer); animation-delay:.29s; }
@keyframes barIn{ to{ transform:scaleX(1); } }
.colorbar--top{ position:fixed; top:0; left:0; z-index:120; }

/* ------------------------------------------------------------- 4. TIPOGRAFÍA */
.label{
  font:500 var(--fs-label)/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim);
  display:flex; align-items:center; gap:.7rem;
}
.label em{
  font-style:normal; color:var(--accent);
  padding-right:.7rem; border-right:1px solid var(--line-2);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.8rem;
  font:500 var(--fs-label)/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim);
  border:1px solid var(--line);
  border-radius:100px;
  padding:.55rem 1rem .55rem .8rem;
}
.eyebrow__dots{ display:flex; gap:4px; }
.eyebrow__dots i{ width:6px; height:6px; border-radius:50%; }
.eyebrow__dots i:nth-child(1){ background:var(--c-tec); }
.eyebrow__dots i:nth-child(2){ background:var(--c-imp); }
.eyebrow__dots i:nth-child(3){ background:var(--c-sof); }
.eyebrow__dots i:nth-child(4){ background:var(--c-mer); }

.shead{ max-width:44rem; }
.shead__h2{
  font-size:var(--fs-h2); font-stretch:104%;
  margin-top:1.4rem;
  text-wrap:balance;
}
.shead__lead{
  margin-top:1.25rem;
  font-size:var(--fs-lead);
  color:var(--fg-dim);
  max-width:38rem;
  text-wrap:pretty;
}
.shead__lead strong{ color:var(--fg); font-weight:600; }
.shead--center{ margin-inline:auto; text-align:center; }
.shead--center .label{ justify-content:center; }
.shead--center .shead__lead{ margin-inline:auto; }

/* --------------------------------------------------------------- 5. BOTONES */
.btn{
  --btn-fg:var(--fg);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font:600 var(--fs-sm)/1 var(--sans);
  letter-spacing:-.01em;
  padding:1rem 1.5rem;
  border-radius:var(--r-lg);
  border:1px solid transparent;
  color:var(--btn-fg);
  position:relative; overflow:hidden;
  transition:background var(--t), color var(--t), border-color var(--t), transform .25s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; flex:none; }
.ico-arrow{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease); }
.btn:hover .ico-arrow{ transform:translateX(4px); }
.ico-wa{ fill:currentColor; width:18px; height:18px; }

.btn--primary{ background:var(--paper); color:var(--ink); }
.btn--primary:hover{ background:#fff; }
.theme-light .btn--primary{ background:var(--ink); color:var(--paper); }
.theme-light .btn--primary:hover{ background:#000; }

.btn--ghost{ border-color:var(--line-2); color:var(--fg); }
.btn--ghost:hover{ background:var(--surface); border-color:var(--fg); }

.btn--wa{ background:#1FAF54; color:#fff; }
.btn--wa:hover{ background:#199847; }

.btn--sm{ padding:.65rem 1.05rem; font-size:var(--fs-xs); }
.btn--block{ width:100%; }

.btn--unit{
  background:var(--u); color:var(--ink);
  font-weight:700;
}
.btn--unit:hover{ filter:brightness(1.08); }

/* ------------------------------------------------------------------- 6. NAV */
.nav{
  position:fixed; top:4px; left:0; right:0; z-index:110;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,27,52,.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(247,249,252,.12);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut);
  height:74px; display:flex; align-items:center; gap:2rem;
  color:#F7F9FC;
}

.brand{ display:inline-flex; align-items:center; }
.brand__logo{ height:41px; width:auto; transition:opacity .25s var(--ease); }
.brand:hover .brand__logo{ opacity:.85; }
.brand--lg .brand__logo{ height:56px; }

.nav__links{ display:flex; gap:.35rem; margin-left:auto; }
.nav__links a{
  position:relative;
  font-size:var(--fs-xs); font-weight:500;
  color:rgba(247,249,252,.62);
  padding:.55rem .8rem; border-radius:var(--r-lg);
  transition:color var(--t);
}
.nav__links a::after{
  content:''; position:absolute; left:.8rem; right:.8rem; bottom:.25rem; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:#F7F9FC; }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:#F7F9FC; }

.nav__cta{ margin-left:.5rem; }

/* Hamburguesa */
.burger{
  display:none; width:44px; height:44px; margin-left:auto; margin-right:-.5rem;
  position:relative; border-radius:var(--r-lg);
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; background:#F7F9FC; border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* Menú móvil */
.mnav{
  position:fixed; inset:0; z-index:105;
  background:var(--ink); color:var(--paper);
  padding-top:78px;
  display:flex; flex-direction:column; justify-content:space-between;
  animation:mnavIn .35s var(--ease);
}
.mnav[hidden]{ display:none; }
@keyframes mnavIn{ from{ opacity:0; transform:translateY(-8px); } }
.mnav > .colorbar{ position:absolute; top:0; left:0; }
.mnav__links{ display:flex; flex-direction:column; padding:2rem var(--gut) 0; }
.mnav__links a{
  display:flex; align-items:baseline; gap:1rem;
  font-size:clamp(1.6rem,7vw,2.2rem); font-weight:700; letter-spacing:-.03em;
  padding:1rem 0; border-bottom:1px solid rgba(247,249,252,.12);
}
.mnav__links em{ font:500 .7rem/1 var(--mono); font-style:normal; color:var(--c-tec); letter-spacing:.1em; }
.mnav__links a:nth-child(2) em{ color:var(--c-imp); }
.mnav__links a:nth-child(3) em{ color:var(--c-sof); }
.mnav__links a:nth-child(4) em{ color:var(--c-mer); }
.mnav__foot{ padding:1.5rem var(--gut) 2.5rem; display:grid; gap:1rem; }
.mnav__tel{ font:500 var(--fs-sm)/1 var(--mono); color:rgba(247,249,252,.6); text-align:center; }

/* ------------------------------------------------------------------ 7. HERO */
.hero{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding-top:clamp(8rem,15vh,11rem);
  padding-bottom:0;
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='rgba(247,249,252,.08)' stroke-width='1.5'%3E%3Cpath d='M0 40H60V100H140V40H200'/%3E%3Cpath d='M40 0V60H100V140H160V200'/%3E%3Cpath d='M0 160H70'/%3E%3Cpath d='M130 200V170H200'/%3E%3Crect x='84' y='84' width='18' height='18' rx='2'/%3E%3C/g%3E%3Cg fill='rgba(247,249,252,.14)'%3E%3Ccircle cx='60' cy='40' r='3'/%3E%3Ccircle cx='140' cy='100' r='3'/%3E%3Ccircle cx='40' cy='60' r='3'/%3E%3Ccircle cx='100' cy='140' r='3'/%3E%3Ccircle cx='160' cy='160' r='3'/%3E%3Ccircle cx='70' cy='160' r='2.5'/%3E%3Ccircle cx='130' cy='200' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 240px;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(120% 80% at 70% 0%, #000 20%, transparent 78%);
}
.hero__glow{
  position:absolute; z-index:0; top:-28vh; right:-14vw;
  width:min(74vw,900px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity:.16; filter:blur(20px);
  transition:background .6s var(--ease), opacity .6s var(--ease);
}
.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem);
  align-items:end;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.hero__h1{
  font-size:var(--fs-display);
  font-stretch:106%;
  letter-spacing:-.038em;
  margin-top:1.6rem;
  text-wrap:balance;
}
.hero__h1 .mark{
  position:relative; white-space:nowrap;
  background-image:linear-gradient(var(--c-tec),var(--c-tec));
  background-size:100% .1em; background-position:0 92%; background-repeat:no-repeat;
  padding-bottom:.03em;
}
.hero__lead{
  margin-top:1.6rem; max-width:38rem;
  font-size:var(--fs-lead); color:rgba(247,249,252,.66);
  text-wrap:pretty;
}
.hero__actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* El "pack" — 4 módulos */
.pack{ position:relative; }
.pack__label{
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,249,252,.38); margin-bottom:.9rem; padding-left:.1rem;
}
.pack__grid{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid rgba(247,249,252,.14);
  border-radius:var(--r-lg); overflow:hidden;
  background:rgba(247,249,252,.02);
}
.tile{
  --u:var(--c-tec);
  position:relative; text-align:left;
  padding:1.4rem 1.25rem 1.5rem;
  border-right:1px solid rgba(247,249,252,.14);
  border-bottom:1px solid rgba(247,249,252,.14);
  display:flex; flex-direction:column; gap:.15rem;
  transition:background .35s var(--ease);
  isolation:isolate;
}
.tile:nth-child(2n){ border-right:0; }
.tile:nth-child(n+3){ border-bottom:0; }
.tile::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--u); opacity:0; transition:opacity .35s var(--ease);
}
.tile:hover::before{ opacity:.09; }
.tile::after{
  content:''; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--u); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.tile:hover::after,.tile:focus-visible::after{ transform:scaleY(1); }
.tile__n{
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.1em;
  color:var(--u); opacity:.85;
}
.tile__ico{
  width:26px; height:26px; margin:.85rem 0 .7rem;
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  color:rgba(247,249,252,.8);
  transition:color .35s var(--ease), transform .45s var(--ease);
}
.tile:hover .tile__ico{ color:var(--u); transform:translateY(-2px); }
.tile__name{ font-weight:700; font-size:1.02rem; letter-spacing:-.02em; }
.tile__desc{ font-size:var(--fs-xs); color:rgba(247,249,252,.5); line-height:1.4; }

/* Stats */
.stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(247,249,252,.14);
}
.stat{ padding:2rem 1.5rem 2.4rem; border-right:1px solid rgba(247,249,252,.14); }
.stat:first-child{ padding-left:0; }
.stat:last-child{ border-right:0; }
.stat__v{
  display:flex; align-items:baseline; gap:.1rem;
  font:600 clamp(2.1rem,3.6vw,3rem)/1 var(--mono);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.stat__v em{ font-style:normal; color:var(--accent); font-size:.6em; }
.stat:nth-child(1) .stat__v em{ color:var(--c-tec); }
.stat__k{
  margin-top:.6rem; font-size:var(--fs-xs); color:rgba(247,249,252,.5);
  letter-spacing:.005em;
}

/* --------------------------------------------------------------- 8. UNIDADES */
.section--units{ padding-top:clamp(3.5rem,7vw,6rem); }
.units{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line); }

.unit{ --u:var(--c-tec); border-bottom:1px solid var(--line); position:relative; }
.unit__h{ margin:0; font-weight:inherit; letter-spacing:normal; }
.unit__head{
  position:relative; width:100%; text-align:left;
  display:grid; grid-template-columns:auto auto 1fr auto auto;
  align-items:center; gap:clamp(.9rem,2vw,1.75rem);
  padding:clamp(1.5rem,2.6vw,2.1rem) 0;
  transition:padding-left .45s var(--ease);
  isolation:isolate;
}
.unit__head::before{
  content:''; position:absolute; z-index:-1; inset:0 -1.5rem;
  background:linear-gradient(90deg, var(--u), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.unit__head:hover::before{ opacity:.07; }
.unit.is-open .unit__head{ padding-left:clamp(.6rem,1.4vw,1.1rem); }
.unit::after{
  content:''; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--u); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.unit.is-open::after{ transform:scaleY(1); }

.unit__n{
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.12em;
  color:var(--fg-mute); transition:color .35s var(--ease);
  padding-top:.2em;
}
.unit__head:hover .unit__n,
.unit.is-open .unit__n{ color:var(--u); }

.unit__ico{
  width:30px; height:30px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
  color:var(--fg-mute);
  transition:color .35s var(--ease), transform .5s var(--ease);
}
.unit__head:hover .unit__ico{ color:var(--u); }
.unit.is-open .unit__ico{ color:var(--u); transform:scale(1.06); }

.unit__title{ display:block; min-width:0; }
.unit__name{
  display:block;
  font-size:clamp(1.55rem,3.4vw,2.6rem); font-weight:700;
  letter-spacing:-.035em; font-stretch:104%; line-height:1.02;
}
.unit__tag{
  display:block; margin-top:.4rem;
  font-size:var(--fs-sm); color:var(--fg-dim);
  max-width:34rem;
}
.unit__meta{
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-mute); white-space:nowrap;
}
.unit__plus{
  position:relative; width:44px; height:44px; flex:none;
  border:1px solid var(--line-2); border-radius:50%;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .5s var(--ease);
}
.unit__plus::before,.unit__plus::after{
  content:''; position:absolute; top:50%; left:50%; width:13px; height:1.5px;
  background:var(--fg); transform:translate(-50%,-50%);
  transition:transform .45s var(--ease), background .35s var(--ease);
}
.unit__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.unit__head:hover .unit__plus{ border-color:var(--u); }
.unit.is-open .unit__plus{ background:var(--u); border-color:var(--u); transform:rotate(180deg); }
.unit.is-open .unit__plus::before,
.unit.is-open .unit__plus::after{ background:var(--ink); }
.unit.is-open .unit__plus::after{ transform:translate(-50%,-50%) rotate(0deg); }

/* Acordeón (grid 0fr → 1fr: alto automático, sin JS de medidas).
   Sin JS (sin la clase .js en <html>) todo queda desplegado y legible. */
.unit__body{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .55s var(--ease);
}
.js .unit__body{ grid-template-rows:0fr; }
.unit.is-open .unit__body{ grid-template-rows:1fr; }
.unit__clip{ overflow:hidden; }
.unit__inner{
  padding:0 0 clamp(2rem,4vw,3rem);
  transition:opacity .4s var(--ease) .1s, transform .5s var(--ease) .1s;
}
.js .unit__inner{ opacity:0; transform:translateY(8px); }
.unit.is-open .unit__inner{ opacity:1; transform:none; }
.unit__lead{
  font-size:var(--fs-lead); color:var(--fg);
  max-width:44rem; margin-bottom:2rem;
  padding-left:clamp(0rem,3.4vw,3.6rem);
  text-wrap:pretty;
}

/* Grilla de servicios: hoja de especificaciones */
.svc{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);
  margin-left:clamp(0rem,3.4vw,3.6rem);
}
.svc--2{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); max-width:56rem; }
.svc li{
  position:relative;
  border-top:1px solid var(--line);
  padding:1.05rem 0 1.35rem;
  transition:transform .4s var(--ease);
}
.svc li::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--u); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.svc li:hover::before{ transform:scaleX(1); }
.svc li:hover{ transform:translateX(4px); }
.svc .n{
  display:block; font:500 var(--fs-label)/1 var(--mono); letter-spacing:.12em;
  color:var(--u); opacity:.75; margin-bottom:.6rem;
}
.svc h4{ font-size:1.0rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.svc p{ margin-top:.4rem; font-size:var(--fs-xs); line-height:1.55; color:var(--fg-dim); }

.unit__cta{ margin-top:2.25rem; margin-left:clamp(0rem,3.4vw,3.6rem); }

/* --------------------------------------------------------------- 9. NOSOTROS */
.split{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);
}
.shead--sticky{ position:sticky; top:110px; align-self:start; }

.reasons{ border-top:1px solid var(--line); }
.reason{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.75rem,3vw,2.4rem) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.reason::after{
  content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.reason:hover::after{ transform:scaleX(1); }
.reason__n{
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.12em;
  color:var(--fg-mute); padding-top:.45em;
}
.reason:nth-child(1) .reason__n{ color:var(--c-tec-ink); }
.reason:nth-child(2) .reason__n{ color:var(--c-imp-ink); }
.reason:nth-child(3) .reason__n{ color:var(--c-sof-ink); }
.reason:nth-child(4) .reason__n{ color:var(--c-mer-ink); }
.reason h3{ font-size:var(--fs-h3); font-stretch:103%; }
.reason p{ margin-top:.6rem; color:var(--fg-dim); font-size:var(--fs-sm); max-width:36rem; text-wrap:pretty; }

/* --------------------------------------------------------------- 10. PROCESO */
.section--process{ padding-top:0; }
.steps{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:rgba(255,255,255,.5);
  overflow:hidden;
}
.step{
  padding:clamp(1.5rem,2.4vw,2rem);
  border-right:1px solid var(--line);
  position:relative;
}
.step:last-child{ border-right:0; }
.step::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background:var(--c-tec); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.step:nth-child(2)::before{ background:var(--c-imp); }
.step:nth-child(3)::before{ background:var(--c-sof); }
.step:nth-child(4)::before{ background:var(--c-mer); }
.step:hover::before,.step.is-in::before{ transform:scaleX(1); }
.step__n{
  display:block; font:600 1.5rem/1 var(--mono); letter-spacing:-.03em;
  color:var(--fg-mute); margin-bottom:1.4rem;
}
.step h3{ font-size:1.05rem; font-weight:700; }
.step p{ margin-top:.5rem; font-size:var(--fs-xs); color:var(--fg-dim); line-height:1.55; }

/* -------------------------------------------------------------- 12. CONTACTO */
.section--contact{ overflow:hidden; background:#0A0B0D; }
.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
.contact__info .shead__h2{ max-width:14em; }
.contact__info .shead__lead{ max-width:30rem; }

.infolist{ margin-top:clamp(2.5rem,4vw,3.5rem); border-top:1px solid var(--line); }
.infolist > div{ padding:1.15rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:9rem 1fr; gap:1rem; align-items:baseline; }
.infolist dt{ font:500 var(--fs-label)/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); }
.infolist dd{ font-size:var(--fs-sm); line-height:1.5; }
.infolist a{ transition:color var(--t); border-bottom:1px solid transparent; }
.infolist a:hover{ color:var(--c-tec); border-bottom-color:currentColor; }

/* Tarjeta de formulario */
.formcard{
  background:var(--paper); color:var(--ink);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.formcard__in{ padding:clamp(1.5rem,3vw,2.5rem); }
.formcard__h{ font-size:1.35rem; font-stretch:103%; }
.formcard__sub{ margin-top:.5rem; font-size:var(--fs-sm); color:rgba(7,27,52,.6); }
.formcard form{ margin-top:1.75rem; display:grid; gap:1.1rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

.field label{
  display:flex; align-items:baseline; gap:.5rem;
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:rgba(7,27,52,.55); margin-bottom:.55rem;
}
.field label span[aria-hidden]{ color:var(--c-imp-ink); }
.field .opt{ text-transform:none; letter-spacing:.02em; opacity:.6; font-family:var(--sans); }

.field input,.field textarea,.field select{
  width:100%; background:transparent;
  border:0; border-bottom:1px solid rgba(7,27,52,.22);
  padding:.65rem 0; font-size:var(--fs-sm); color:var(--ink);
  border-radius:0;
  transition:border-color var(--t), background var(--t);
}
.field textarea{ resize:vertical; min-height:5.5rem; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(7,27,52,.32); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-bottom-color:var(--ink); border-bottom-width:2px; padding-bottom:calc(.65rem - 1px);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-bottom-color:var(--c-imp-ink); }

.selectwrap{ position:relative; }
.selectwrap select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2rem; }
.ico-chev{
  position:absolute; right:.1rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; pointer-events:none;
  fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.5;
}

.err{ margin-top:.45rem; font-size:.75rem; color:var(--c-imp-ink); font-weight:500; }

.formcard__actions{ margin-top:.5rem; display:grid; gap:.6rem; }
.formcard__note{ font-size:.75rem; color:rgba(7,27,52,.5); text-align:center; }
.formcard__note.is-ok{ color:#12803D; font-weight:600; }
.formcard__note.is-err{ color:var(--c-imp-ink); font-weight:600; }

/* ---------------------------------------------------------------- 13. FOOTER */
.footer{
  background:#121419; color:var(--paper);
  padding-top:clamp(3.5rem,6vw,5rem);
  border-top:1px solid rgba(247,249,252,.1);
}
.footer__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.footer__brand p{ margin-top:1.1rem; font-size:var(--fs-sm); color:rgba(247,249,252,.55); max-width:24rem; }
.footer__col{ display:flex; flex-direction:column; gap:.65rem; }
.footer__col h4{
  font:500 var(--fs-label)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,249,252,.4); margin-bottom:.45rem;
}
.footer__col a{ font-size:var(--fs-sm); color:rgba(247,249,252,.72); width:fit-content; transition:color var(--t); }
.footer__col a:hover{ color:var(--paper); }

.footer__bar{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding:1.4rem 0;
  border-top:1px solid rgba(247,249,252,.1);
  font:400 var(--fs-xs)/1.5 var(--mono);
  color:rgba(247,249,252,.42);
}

/* ------------------------------------------------------------------- 14. FAB */
.fab{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:100;
  display:inline-flex; align-items:center; gap:.6rem;
  background:#1FAF54; color:#fff;
  padding:.9rem 1.15rem; border-radius:100px;
  box-shadow:0 12px 34px -10px rgba(31,175,84,.65);
  font-size:var(--fs-sm); font-weight:600;
  transition:opacity .4s var(--ease), transform .4s var(--ease), background var(--t);
}
.js .fab{ opacity:0; transform:translateY(14px) scale(.96); pointer-events:none; }
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:#199847; }
.fab svg{ width:21px; height:21px; fill:currentColor; }

/* -------------------------------------------------------------- 15. REVEALS */
[data-reveal]{
  transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s);
}
.js [data-reveal]{ opacity:0; transform:translateY(18px); will-change:opacity, transform; }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------- 16. RESPONSIVE */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; align-items:start; }
  .pack{ margin-top:1rem; }
  .split{ grid-template-columns:1fr; }
  .shead--sticky{ position:static; }
  .contact{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step:nth-child(2){ border-right:0; }
  .step:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ padding:1.5rem 1.25rem 1.75rem; }
  .stat:nth-child(2n){ border-right:0; }
  .unit__head{ grid-template-columns:auto 1fr auto; row-gap:.35rem; }
  .unit__ico{ display:none; }
  .unit__meta{ display:none; }
}

@media (max-width:640px){
  :root{ --sec-y: 4rem; }
  .hero{ padding-top:6.5rem; }
  .hero__h1 .mark{ white-space:normal; }
  .pack__grid{ grid-template-columns:1fr; }
  .tile{ border-right:0 !important; border-bottom:1px solid rgba(247,249,252,.14) !important; }
  .tile:last-child{ border-bottom:0 !important; }
  .tile__ico{ position:absolute; top:1.3rem; right:1.25rem; margin:0; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:0; border-bottom:1px solid var(--line); }
  .step:last-child{ border-bottom:0; }
  .step__n{ margin-bottom:.9rem; }
  .f2{ grid-template-columns:1fr; }
  .infolist > div{ grid-template-columns:1fr; gap:.35rem; }
  .unit__plus{ width:36px; height:36px; }
  .unit__plus::before,.unit__plus::after{ width:11px; }
  .footer__top{ grid-template-columns:1fr; }
  .fab span{ display:none; }
  .fab{ padding:.95rem; }
  .btn{ padding:.9rem 1.25rem; }
  .hero__actions .btn{ flex:1 1 auto; }
}

/* -------------------------------------------------- 17. MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .colorbar i{ transform:scaleX(1); }
}

/* --------------------------------------------------------------- 18. PRINT */
@media print{
  .nav,.mnav,.fab,.colorbar,.hero__glow,.hero__grid,.noise{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section,.hero,.footer{ background:#fff !important; color:#000 !important; }
  .unit__body{ grid-template-rows:1fr !important; }
  .unit__inner{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.7em; }
}