/* ==========================================================================
   DECAS · Sistema de diseño
   Fundamentos: jerarquía tipográfica con tracking por tamaño, materiales
   traslúcidos con profundidad, movimiento por resortes, contención cromática.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Neutros — grafito apenas cálido, para que el ámbar no pelee */
  --n-950:#080807;  --n-900:#0C0C0B;  --n-880:#0F0F0E;  --n-850:#141312;
  --n-800:#1A1917;  --n-750:#201E1C;  --n-700:#282523;  --n-600:#35322E;
  --n-500:#54504A;  --n-400:#8A857C;  --n-300:#A39D94;  --n-200:#C9C3BB;
  --n-100:#E8E3DC;  --n-50:#F7F4EF;

  /* Ámbar de obra — el color de la maquinaria y el chaleco.
     Se usa con moderación: reglas, etiquetas, estados, un dato. */
  --acc-700:#7A4E10;  --acc-600:#A66B18;  --acc-500:#D08C22;  --acc-400:#EDA83E;
  --acc-300:#F5C378;  --acc-200:#FADFB4;
  --acc-glow:rgba(237,168,62,.15);
  --acc-line:rgba(237,168,62,.30);

  /* Semánticos */
  --bg:var(--n-950);
  --text:var(--n-50);
  --text-2:var(--n-300);
  --text-3:var(--n-400);
  --accent:var(--acc-400);

  /* Materiales traslúcidos — el peso codifica jerarquía */
  --mat-thin:rgba(255,255,255,.035);
  --mat-reg:rgba(255,255,255,.055);
  --mat-thick:rgba(255,255,255,.085);
  --mat-chrome:rgba(10,10,9,.62);
  --hairline:rgba(255,255,255,.085);
  --hairline-2:rgba(255,255,255,.14);
  --edge-hi:rgba(255,255,255,.10);   /* borde superior: la luz pega en el material */
  --blur-sm:14px; --blur-md:24px; --blur-lg:40px;

  /* Sombras por capas — superficies grandes leen más gruesas */
  --sh-1:0 1px 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.22);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.32);
  --sh-3:0 6px 16px rgba(0,0,0,.5),  0 36px 80px rgba(0,0,0,.45);

  /* Espaciado — base 4px en rem, escala con el tamaño de texto del usuario */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:2.5rem;  --sp-8:3rem;
  --sp-9:4rem;    --sp-10:5rem;   --sp-11:7rem;   --sp-12:9rem;

  /* Radios — superficies mayores, radios mayores */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;

  /* Medidas */
  --w:1240px;
  --w-narrow:760px;
  --pad:clamp(1.25rem, 4.4vw, 4rem);
  --header-h:70px;

  /* Curvas — solo para lo que el dedo no toca (§4) */
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-optical-sizing:auto;
  font-synthesis-weight:none;
  font-size:1.0625rem;
  line-height:1.6;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:var(--acc-400); color:#231404}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acc-400);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* --------------------------------------------------------------------------
   3. Tipografía — el tracking es específico del tamaño (§15)
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{margin:0; font-weight:640; text-wrap:balance; overflow-wrap:break-word}

.t-display{
  font-size:clamp(2.5rem, 6.2vw, 5.25rem);
  line-height:1.015;
  letter-spacing:-.042em;      /* negativo fuerte: a mayor tamaño, más ceñido */
  font-weight:660;
}
.t-h1{
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.034em;
  font-weight:640;
}
.t-h2{
  font-size:clamp(1.5rem, 2.6vw, 2.125rem);
  line-height:1.14;
  letter-spacing:-.026em;
  font-weight:640;
}
.t-h3{
  font-size:clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height:1.28;
  letter-spacing:-.018em;
  font-weight:620;
}
.t-body-lg{
  font-size:clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height:1.58;
  letter-spacing:-.012em;
  color:var(--n-200);
  font-weight:400;
}
.t-body{font-size:1rem; line-height:1.62; letter-spacing:-.004em; color:var(--text-2)}
.t-caption{font-size:.9375rem; line-height:1.5; letter-spacing:0; color:var(--text-3)}
.t-label{                       /* micro: tracking positivo para legibilidad */
  font-size:.75rem;
  line-height:1.2;
  letter-spacing:.115em;
  text-transform:uppercase;
  font-weight:620;
  font-feature-settings:'ss01';
}
.t-num{font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.04em}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:620; color:var(--n-100)}
.accent{color:var(--acc-300)}

/* Vibrancy: sobre material traslúcido el texto sube de peso y de contraste */
.on-material{color:var(--n-100); font-weight:450; letter-spacing:-.002em}

/* Etiqueta con regla — la única aparición sistemática del verde */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  color:var(--acc-300);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg, transparent, var(--acc-400));
}
.eyebrow.is-plain::before{display:none}
.eyebrow.is-quiet{color:var(--text-3)}
.eyebrow.is-quiet::before{background:linear-gradient(90deg,transparent,var(--n-500))}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:var(--w-narrow)}
.section{padding-block:clamp(4.5rem, 9vw, 9rem); position:relative}
.section--tight{padding-block:clamp(3rem, 6vw, 5.5rem)}
.section--sunken{background:var(--n-900)}
.stack>*+*{margin-top:var(--sp-4)}

.grid{display:grid; gap:clamp(1rem, 1.8vw, 1.5rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.duo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem, 5vw, 5.5rem);
  align-items:center;
}
.duo--top{align-items:start}

/* Encabezado de sección: título a la izquierda, bajada a la derecha */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem, 4vw, 4.5rem);
  align-items:end;
  margin-bottom:clamp(2.5rem, 4.5vw, 4rem);
}
.sec-head p{max-width:44ch}

/* --------------------------------------------------------------------------
   5. Botones — la respuesta vive en el pointer-down (§1)
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--hairline-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.8rem 1.35rem;
  min-height:46px;
  border-radius:var(--r-full);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.9375rem; font-weight:560; letter-spacing:-.008em;
  cursor:pointer;
  text-align:center;
  transform:translateZ(0);
  transition:background .28s var(--ease-out), border-color .28s var(--ease-out),
             color .28s var(--ease-out), box-shadow .28s var(--ease-out);
  will-change:transform;
}
.btn svg{width:15px; height:15px; flex:none}
.btn .arrow{transition:transform .4s var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}

.btn--primary{
  --btn-bg:var(--n-50); --btn-fg:var(--n-950); --btn-bd:transparent;
  font-weight:590;
  box-shadow:var(--sh-1);
}
.btn--primary:hover{--btn-bg:#fff; box-shadow:var(--sh-2)}

.btn--glass{
  --btn-bg:var(--mat-reg); --btn-bd:var(--hairline-2);
  backdrop-filter:blur(var(--blur-sm)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(160%);
  box-shadow:inset 0 1px 0 var(--edge-hi);
}
.btn--glass:hover{--btn-bg:var(--mat-thick); --btn-bd:rgba(255,255,255,.22)}

.btn--accent{
  --btn-bg:var(--acc-glow); --btn-fg:var(--acc-200); --btn-bd:var(--acc-line);
}
.btn--accent:hover{--btn-bg:rgba(46,209,58,.24); --btn-fg:#fff}

.btn--sm{padding:.55rem 1rem; min-height:38px; font-size:.875rem}

/* Enlace con flecha */
.link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--n-100); font-weight:520; letter-spacing:-.008em;
  padding-block:.25rem;
  border-bottom:1px solid var(--hairline-2);
  transition:border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.link:hover{color:#fff; border-bottom-color:var(--acc-400)}
.link svg{width:14px; height:14px; transition:transform .4s var(--ease-out)}
.link:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   6. Cromo traslúcido — el contenido corre por debajo (§12)
   -------------------------------------------------------------------------- */
.chrome{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease-out), backdrop-filter .5s var(--ease-out);
}
.chrome::after{                     /* scroll edge: degradado, no una línea dura */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--mat-chrome);
  backdrop-filter:blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(180%);
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  opacity:0; transition:opacity .45s var(--ease-out);
}
.chrome.is-lifted::after{opacity:1}

.chrome-inner{
  width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
}

.brand{display:flex; align-items:center; gap:.65rem; padding-block:.4rem}
/* La marca real es rectangular (100 : 63.46), no cuadrada */
.brand-mark{width:46px; flex:none; border-radius:5px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.10), var(--sh-1)}
.brand-mark svg{width:100%; height:auto; display:block}
.brand-txt{display:block; line-height:1}
.brand-word{width:74px; height:auto; color:var(--acc-400); display:block}
.brand-sub{font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-3); font-weight:600; margin-top:5px; display:block}

/* Navegación con indicador que se desplaza por resorte */
.nav{display:flex; align-items:center; gap:var(--sp-4)}
.nav-list{position:relative; display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-list a{
  position:relative; z-index:1; display:block;
  padding:.45rem .7rem; border-radius:var(--r-full);
  font-size:.9063rem; white-space:nowrap; font-weight:520; letter-spacing:-.01em;
  color:var(--n-300);
  transition:color .3s var(--ease-out);
}
.nav-list a:hover{color:var(--n-50)}
.nav-list a[aria-current]{color:var(--n-50)}
.nav-pill{
  position:absolute; z-index:0; top:0; left:0; height:100%;
  border-radius:var(--r-full);
  background:var(--mat-reg);
  box-shadow:inset 0 1px 0 var(--edge-hi);
  opacity:0;
  will-change:transform,width;
}
.nav-pill.is-on{opacity:1}

.chrome-cta{display:flex; align-items:center; gap:.6rem}

/* Botón de menú */
.menu-btn{
  display:none; width:42px; height:42px; flex:none;
  border-radius:var(--r-full); border:1px solid var(--hairline-2);
  background:var(--mat-reg);
  backdrop-filter:blur(var(--blur-sm));
  -webkit-backdrop-filter:blur(var(--blur-sm));
  position:relative; cursor:pointer;
}
.menu-btn i{position:absolute; left:12px; right:12px; height:1.5px; background:var(--n-100);
  border-radius:2px; transition:transform .45s var(--ease-out), opacity .2s linear}
.menu-btn i:nth-child(1){top:16px}
.menu-btn i:nth-child(2){top:24px}
.is-menu-open .menu-btn i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.is-menu-open .menu-btn i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   7. Hoja de menú — arrastrable, se cierra por velocidad (§3, §5, §6, §9)
   -------------------------------------------------------------------------- */
.scrim{
  position:fixed; inset:0; z-index:110;
  background:rgba(5,5,4,.6);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-out);
}
.is-menu-open .scrim{opacity:1; pointer-events:auto}

.sheet{
  position:fixed; z-index:120; inset:auto 0 0 0;
  max-height:88svh;
  padding:var(--sp-3) var(--pad) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:rgba(14,18,17,.86);
  backdrop-filter:blur(var(--blur-lg)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);
  border-top:1px solid var(--edge-hi);
  box-shadow:var(--sh-3);
  transform:translate3d(0,100%,0);
  visibility:hidden;
  will-change:transform;
  touch-action:none;
}
.is-menu-open .sheet{visibility:visible}
.sheet-grab{
  width:38px; height:4px; border-radius:var(--r-full);
  background:var(--n-600); margin:0 auto var(--sp-4);
}
.sheet-list{list-style:none; margin:0; padding:0}
.sheet-list li+li{border-top:1px solid var(--hairline)}
.sheet-list a{-webkit-user-drag:none;
  
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem .25rem;
  font-size:1.375rem; font-weight:580; letter-spacing:-.025em;
  color:var(--n-100);
}
.sheet-list a[aria-current]{color:var(--acc-300)}
.sheet-list a span{font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); font-weight:600}
.sheet-foot{margin-top:var(--sp-5); display:grid; gap:.6rem}

/* --------------------------------------------------------------------------
   8. Portada
   -------------------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:calc(var(--header-h) + var(--sp-8)) clamp(2.5rem,6vh,4.5rem);
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero-bg img,
.hero-bg video{
  position:absolute; inset:0;
  width:100%; height:110%; object-fit:cover; object-position:center 42%;
  filter:saturate(.74) contrast(1.06) brightness(.6);
  will-change:transform;
}
/* El video entra sobre el póster, no lo sustituye de golpe */
.hero-video{opacity:0; transition:opacity 1s var(--ease-out)}
.hero-video.is-playing{opacity:1}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(112% 80% at 2% 100%, rgba(8,8,7,.97) 0%, rgba(8,8,7,.74) 34%, rgba(8,8,7,.16) 70%),
    linear-gradient(to top, var(--bg) 0.5%, rgba(8,8,7,.7) 24%, rgba(8,8,7,.26) 54%, rgba(8,8,7,.62) 100%);
}
.hero-bg::before{                   /* grano fino: quita el banding del degradado */
  content:""; position:absolute; inset:0; z-index:1; opacity:.055; pointer-events:none;
  mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-body{position:relative}
.hero .t-display{max-width:14ch}
.hero .t-display em{font-style:normal; color:var(--n-200)}
/* El fondo es video: cambia cuadro a cuadro, así que el texto no puede
   depender de que el fondo se mantenga oscuro. */
.hero-body,.hero-meta{text-shadow:0 1px 24px rgba(5,5,4,.55), 0 1px 3px rgba(5,5,4,.35)}
.hero-lead{max-width:52ch; margin-top:var(--sp-5)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-7)}

.hero-meta{
  margin-top:clamp(2.5rem,6vh,4.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5) var(--sp-7);
  padding-top:var(--sp-5);
  border-top:1px solid var(--hairline);
}
.hero-meta div{display:flex; flex-direction:column; gap:.35rem}
.hero-meta b{font-size:1.5rem; font-weight:640; letter-spacing:-.035em; line-height:1}
.hero-meta b i{font-style:normal; color:var(--acc-400)}

/* Portada interior */
.subhero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:calc(var(--header-h) + clamp(4rem,10vh,7.5rem)) clamp(3rem,6vw,5rem);
}
.subhero-bg{position:absolute; inset:0; z-index:-2}
.subhero-bg img{width:100%; height:100%; object-fit:cover;
  filter:saturate(.5) brightness(.42) contrast(1.04)}
.subhero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 1%, rgba(8,8,7,.72) 46%, rgba(8,8,7,.86) 100%)}
.subhero .t-h1{max-width:17ch}
.subhero-lead{max-width:56ch; margin-top:var(--sp-4)}
.crumbs{display:flex; align-items:center; gap:.55rem; color:var(--text-3); margin-bottom:var(--sp-4)}
.crumbs a{transition:color .25s var(--ease-out)}
.crumbs a:hover{color:var(--n-100)}
.crumbs em{font-style:normal; color:var(--acc-300)}

/* --------------------------------------------------------------------------
   9. Superficies
   -------------------------------------------------------------------------- */
.surface{
  position:relative;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--mat-reg), var(--mat-thin));
  border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 var(--edge-hi);
  overflow:hidden;
}
.surface--flat{background:var(--n-880); box-shadow:none}

.card{
  padding:clamp(1.5rem, 2.2vw, 2rem);
  display:flex; flex-direction:column; gap:var(--sp-2);
  will-change:transform;
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.card:hover{border-color:var(--hairline-2)}
.card-index{color:var(--n-400)}          /* categoría, en flujo normal */
.card-num{                                /* solo para numeración corta */
  position:absolute; top:clamp(1.5rem,2.2vw,2rem); right:clamp(1.5rem,2.2vw,2rem);
  color:var(--n-500); letter-spacing:.14em;
}
.card--num h3{padding-right:3rem}
.card-sub{color:var(--text-3); font-size:.9375rem; line-height:1.45;
  letter-spacing:-.004em; margin:-.15rem 0 .35rem}
.card h3{color:var(--n-50)}
.card p{color:var(--text-2); font-size:.9688rem; line-height:1.55; letter-spacing:-.004em}
.card-list{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.card-list li{
  position:relative; padding-left:1.1rem;
  color:var(--text-2); font-size:.9375rem; line-height:1.5; letter-spacing:-.002em;
}
.card-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:var(--acc-500);
}
.card-glyph{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--acc-glow); border:1px solid var(--acc-line);
  color:var(--acc-300); margin-bottom:var(--sp-2);
}
.card-list{margin-top:.25rem}
.card-glyph svg{width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

/* Fichas de categoría */
.tags{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{
  font-size:.875rem; letter-spacing:-.004em; color:var(--n-200);
  padding:.36rem .75rem; border-radius:var(--r-full);
  background:var(--mat-thin); border:1px solid var(--hairline);
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.tag:hover{background:var(--mat-reg); border-color:var(--hairline-2)}

/* Filas de servicio */
.rows{border-top:1px solid var(--hairline)}
.row{
  display:grid;
  grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem, 3vw, 3rem);
  padding-block:clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom:1px solid var(--hairline);
  align-items:start;
  transition:background .4s var(--ease-out);
}
.row:hover{background:rgba(255,255,255,.014)}
.row-idx{color:var(--text-3); padding-top:.3rem}
.row h3{color:var(--n-50)}
.row-kind{display:inline-block; margin-top:.5rem; color:var(--acc-300)}

/* Métricas */
.metrics{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid var(--hairline);
  background:var(--n-900);
}
.metric{padding:clamp(1.75rem,3vw,2.75rem) clamp(.75rem,2vw,1.75rem); border-left:1px solid var(--hairline)}
.metric:first-child{border-left:0; padding-left:0}
.metric b{display:block; font-size:clamp(2rem,3.6vw,2.875rem); font-weight:640;
  letter-spacing:-.045em; line-height:1; color:var(--n-50)}
.metric b i{font-style:normal; color:var(--acc-400)}
.metric span{display:block; margin-top:.7rem; color:var(--text-3)}

/* Imágenes */
.frame{position:relative; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--hairline); background:var(--n-880)}
.frame img{width:100%; height:100%; object-fit:cover}
.frame::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ar-4x3{aspect-ratio:4/3} .ar-3x4{aspect-ratio:3/4}
.ar-16x9{aspect-ratio:16/9} .ar-1x1{aspect-ratio:1/1} .ar-3x2{aspect-ratio:3/2}
.caption{margin-top:.75rem; color:var(--text-3)}

/* Nota lateral */
.aside-note{border-left:2px solid var(--acc-600); padding-left:var(--sp-4); color:var(--n-200)}

/* Lista de datos */
.spec{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem 1.5rem; margin:0}
.spec dt{color:var(--text-3); padding-top:.22rem}
.spec dd{margin:0; color:var(--n-200); font-size:.9688rem; line-height:1.5}
.spec-line{grid-column:1/-1; height:1px; background:var(--hairline)}

/* Pasos */
.steps{counter-reset:step; border-top:1px solid var(--hairline)}
.step{
  counter-increment:step;
  display:grid; grid-template-columns:4.5rem minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2.5rem);
  padding-block:clamp(1.35rem,2.4vw,2rem);
  border-bottom:1px solid var(--hairline);
}
.step::before{
  content:"0" counter(step);
  font-size:1.0625rem; font-weight:600; letter-spacing:-.02em;
  color:var(--acc-500); font-variant-numeric:tabular-nums;
  padding-top:.15rem;
}
.step h4{margin-bottom:.35rem; color:var(--n-50); font-size:1.0625rem;
  font-weight:600; letter-spacing:-.018em}
.step p{color:var(--text-2); font-size:.9688rem; line-height:1.55; margin:0}

/* Lista de ventajas */
.checks{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
  border-radius:var(--r-lg); overflow:hidden}
.checks li{background:var(--n-880); padding:clamp(1.1rem,1.8vw,1.4rem);
  display:flex; gap:.85rem; align-items:flex-start;
  transition:background .35s var(--ease-out)}
.checks li:hover{background:var(--n-850)}
.checks svg{width:16px; height:16px; flex:none; margin-top:.28rem; color:var(--acc-400)}
.checks span{color:var(--n-200); font-size:.9375rem; line-height:1.5; letter-spacing:-.003em}

/* --------------------------------------------------------------------------
   10. Proyectos
   -------------------------------------------------------------------------- */
.work{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--hairline);
  background:var(--n-880); isolation:isolate; height:100%;
  will-change:transform;
}
.work img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) brightness(.7);
  transition:filter .6s var(--ease-out), transform 1.1s var(--ease-out);
  will-change:transform;
}
.work:hover img{filter:saturate(1) brightness(.84); transform:scale(1.045)}
.work-body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(1.1rem,2vw,1.6rem);
  background:linear-gradient(to top,
    rgba(6,6,5,.96) 0%, rgba(6,6,5,.9) 26%, rgba(6,6,5,.66) 62%, rgba(6,6,5,0) 100%);
  padding-top:clamp(2.5rem,5vw,3.75rem);
}
.work-kind{color:var(--acc-300); display:block; margin-bottom:.4rem; text-shadow:0 1px 8px rgba(0,0,0,.7)}
.work-body h3{color:#fff; letter-spacing:-.022em}
.work-body p{margin:.35rem 0 0; color:var(--n-300); font-size:.875rem; line-height:1.45}

.work-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(200px,16vw,255px);
  gap:clamp(.75rem,1.4vw,1.125rem);
}
.work--w{grid-column:span 2}
.work--t{grid-row:span 2}
.work.is-hidden{display:none}

/* Carrusel arrastrable */
.rail{position:relative; overflow:hidden; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)}
.rail-track{
  display:flex; gap:clamp(.75rem,1.4vw,1.125rem);
  will-change:transform; cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.rail-track.is-dragging{cursor:grabbing}
.rail-track .work{flex:0 0 clamp(268px, 30vw, 400px); height:clamp(320px,32vw,440px)}
.rail-track .work{-webkit-user-drag:none}
.rail-track .work img{pointer-events:none; -webkit-user-drag:none}
.rail-nav{display:flex; gap:.5rem}
.rail-btn{
  width:42px; height:42px; border-radius:var(--r-full);
  border:1px solid var(--hairline-2); background:var(--mat-reg);
  backdrop-filter:blur(var(--blur-sm)); -webkit-backdrop-filter:blur(var(--blur-sm));
  display:grid; place-items:center; cursor:pointer;
  transition:background .3s var(--ease-out), opacity .3s var(--ease-out);
}
.rail-btn:hover{background:var(--mat-thick)}
.rail-btn[disabled]{opacity:.32; cursor:default}
.rail-btn svg{width:15px; height:15px; stroke:var(--n-100); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.rail-hint{color:var(--text-3); display:flex; align-items:center; gap:.5rem}

/* Filtros */
.filters{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.filter{
  padding:.5rem 1rem; border-radius:var(--r-full);
  border:1px solid var(--hairline); background:var(--mat-thin);
  color:var(--text-2); font-size:.9375rem; font-weight:500; letter-spacing:-.008em;
  cursor:pointer;
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.filter:hover{color:var(--n-100); border-color:var(--hairline-2)}
.filter[aria-pressed="true"]{background:var(--n-50); color:var(--n-950); border-color:transparent; font-weight:560}

/* --------------------------------------------------------------------------
   10b. Lista de especialidades sobre imagen
   Filas numeradas a dos columnas, separadas por filetes. La imagen de fondo
   se apaga hacia los bordes para que el texto no dependa de ella.
   -------------------------------------------------------------------------- */
.spec-section{position:relative; isolation:isolate; overflow:hidden; background:#060605}
.spec-bg{position:absolute; inset:0; z-index:-2}
.spec-bg img{width:100%; height:100%; object-fit:cover;
  filter:saturate(1.15) contrast(1.1) brightness(.72)}
.spec-bg::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(85% 62% at 62% 58%, transparent 0%, rgba(6,6,5,.62) 58%, rgba(6,6,5,.94) 100%),
    linear-gradient(100deg, rgba(6,6,5,.94) 0%, rgba(6,6,5,.7) 38%, rgba(6,6,5,.34) 100%);
}

.spec-list{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(2rem, 5vw, 5rem);
}
.spec-list li{border-top:1px solid rgba(255,255,255,.14)}
.spec-list li:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
.spec-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:clamp(.85rem,1.5vw,1.15rem) 0;
  transition:padding-left .45s var(--ease-out);
}
.spec-name{
  font-size:clamp(1rem,1.4vw,1.1875rem); font-weight:560; letter-spacing:-.018em;
  color:var(--n-100);
  transition:color .35s var(--ease-out);
}
.spec-num{
  font-size:.8125rem; font-weight:520; color:var(--n-500); flex:none;
  transition:color .35s var(--ease-out);
}
.spec-list a:hover{padding-left:.7rem}
.spec-list a:hover .spec-name{color:#fff}
.spec-list a:hover .spec-num{color:var(--acc-400)}

/* Franja de clientes — los logotipos ajenos van en blanco y discretos,
   para que lean como respaldo y no como publicidad de terceros. */
.clients{
  list-style:none; margin:var(--sp-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(9, minmax(0,1fr));
  gap:clamp(1rem, 2.2vw, 2rem);
  align-items:center;
}
.clients li{display:flex; align-items:center; justify-content:center; min-width:0}
.clients img{
  height:38px; width:100%; max-width:130px; object-fit:contain; object-position:center;
  filter:brightness(0) invert(1);
  opacity:.62;
  transition:opacity .4s var(--ease-out);
}
.clients li:hover img{opacity:1}
.clients-band{border-block:1px solid var(--hairline)}

/* --------------------------------------------------------------------------
   11b. Punto de venta
   -------------------------------------------------------------------------- */
.pdv-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,268px), 1fr));
  gap:clamp(.75rem, 1.4vw, 1.125rem);
}
.pdv-item{
  margin:0; position:relative; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--hairline);
  background:linear-gradient(180deg, var(--n-880), var(--n-850));
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.pdv-item:hover{border-color:var(--hairline-2); background:linear-gradient(180deg, var(--n-850), var(--n-800))}
.pdv-item img{
  width:100%; aspect-ratio:4/3; object-fit:contain; object-position:center;
  padding:clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem) 0;
  transition:transform .7s var(--ease-out);
}
.pdv-item:hover img{transform:scale(1.035)}
.pdv-item figcaption{
  padding:clamp(.9rem,1.6vw,1.15rem) clamp(1rem,2vw,1.4rem) clamp(1.1rem,2vw,1.4rem);
  color:var(--text-2); font-size:.9375rem; line-height:1.4; letter-spacing:-.004em;
}
.pdv-item figcaption .t-label{display:block; color:var(--acc-300); margin-bottom:.35rem}

/* --------------------------------------------------------------------------
   11. Banda destacada y cierre
   -------------------------------------------------------------------------- */
.band{position:relative; isolation:isolate; overflow:hidden; background:var(--n-900)}
.band-bg{position:absolute; inset:0; z-index:-2}
.band-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.24) saturate(.42)}
.band-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(8,8,7,.97) 0%, rgba(8,8,7,.9) 42%, rgba(8,8,7,.58) 100%)}

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; border-radius:var(--r-full);
  background:var(--acc-glow); border:1px solid var(--acc-line); color:var(--acc-200);
}
.badge i{width:5px; height:5px; border-radius:50%; background:var(--acc-400);
  box-shadow:0 0 10px var(--acc-400)}

.closer{position:relative; isolation:isolate; overflow:hidden; text-align:center}
.closer-bg{position:absolute; inset:0; z-index:-2}
.closer-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.3) saturate(.4)}
.closer-bg::after{content:""; position:absolute; inset:0; background:rgba(8,8,7,.68)}
.closer .t-h1{max-width:20ch; margin-inline:auto}
.closer p{max-width:52ch; margin-inline:auto}
.closer-actions{display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-6)}

/* --------------------------------------------------------------------------
   12. Formulario
   -------------------------------------------------------------------------- */
.field{margin-bottom:var(--sp-4)}
.field label{display:block; margin-bottom:.5rem; color:var(--text-3)}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem;
  border-radius:var(--r-sm);
  border:1px solid var(--hairline);
  background:var(--n-880);
  color:var(--text);
  font:inherit; font-size:1rem; letter-spacing:-.006em;
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field textarea{min-height:150px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--n-500)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--acc-500); background:var(--n-850);
  box-shadow:0 0 0 3px var(--acc-glow);
}
.field select{appearance:none; padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2398A39D' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center}

.person{padding:clamp(1.25rem,2vw,1.6rem)}
.person h4{font-size:1.0625rem; font-weight:620; letter-spacing:-.02em; color:var(--n-50); margin:0 0 .15rem}
.person .role{color:var(--acc-300); margin-bottom:var(--sp-3)}
.person dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.4rem 1.1rem; margin:0}
.person dt{color:var(--text-3); padding-top:.2rem}
.person dd{margin:0; color:var(--n-200); font-size:.9375rem; word-break:break-word}
.person dd a{transition:color .25s var(--ease-out)}
.person dd a:hover{color:var(--acc-300)}

.form-note{color:var(--text-3); margin-top:var(--sp-4)}
.form-ok{
  margin-top:var(--sp-4); padding:.85rem 1rem; border-radius:var(--r-sm);
  background:var(--acc-glow); border:1px solid var(--acc-line); color:var(--acc-200);
  font-size:.9375rem;
}

/* --------------------------------------------------------------------------
   13. Pie
   -------------------------------------------------------------------------- */
.foot{background:#060605; border-top:1px solid var(--hairline); padding-top:clamp(3.5rem,6vw,5.5rem)}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem); padding-bottom:clamp(2.5rem,4vw,4rem);
}
.foot h5{margin:0 0 var(--sp-4); color:var(--text-3); font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.foot a{color:var(--n-200); font-size:.9375rem; transition:color .25s var(--ease-out)}
.foot a:hover{color:var(--acc-300)}
.foot .brand-mark{width:54px}
.foot .brand-word{width:88px}
.foot .brand-sub{margin-top:7px}
.foot-about p{color:var(--text-3); font-size:.9375rem; line-height:1.55; max-width:36ch; margin-top:var(--sp-4)}
.foot-bottom{
  border-top:1px solid var(--hairline); padding-block:var(--sp-5);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  color:var(--n-500); font-size:.875rem;
}

/* --------------------------------------------------------------------------
   14. Movimiento de entrada — el resorte lo maneja JS; esto es el estado base
   -------------------------------------------------------------------------- */
.js [data-enter]{opacity:0; will-change:transform,opacity}

/* --------------------------------------------------------------------------
   15. Adaptación
   -------------------------------------------------------------------------- */
@media (max-width:1160px){
  .clients{grid-template-columns:repeat(5,minmax(0,1fr)); row-gap:2rem}
  :root{--header-h:64px}
  .nav-list,.chrome-cta .btn{display:none}
  .menu-btn{display:block}
  .duo,.sec-head{grid-template-columns:1fr}
  .sec-head{align-items:start}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(190px,24vw,240px)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:2.75rem minmax(0,1fr); }
  .row>*:nth-child(3){grid-column:2}
}
@media (pointer:coarse){
  /* Un dedo necesita más superficie que un cursor. Se agranda el blanco
     sin mover el texto: padding vertical y altura mínima. */
  .foot ul a,
  .person dd a,
  .crumbs a{display:inline-flex; align-items:center; min-height:44px}
  .foot ul{gap:.15rem}
  .sheet-list a{min-height:56px}
  .spec-list a{min-height:48px}
  .filter{min-height:44px}
}

@media (max-width:680px){
  body{font-size:1rem}
  .clients{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem 1rem}
  .clients img{height:30px}
  .spec-list{grid-template-columns:1fr}
  .spec-list li:nth-last-child(-n+2){border-bottom:0}
  .spec-list li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .brand-sub{display:none}
  .brand-name{font-size:1.125rem}
  .hero-meta{display:grid; grid-template-columns:1fr 1fr; gap:1.35rem 1.25rem}
  .hero-meta div{gap:.3rem}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .metric{border-left:0; padding-inline:0}
  .metric:nth-child(even){padding-left:1.25rem; border-left:1px solid var(--hairline)}
  .metric:nth-child(n+3){border-top:1px solid var(--hairline)}
  .work-grid{grid-template-columns:1fr; grid-auto-rows:clamp(210px,58vw,290px)}
  .work--w{grid-column:span 1} .work--t{grid-row:span 1}
  .row{grid-template-columns:1fr; gap:.9rem}
  .row-idx{padding-top:0}
  .row>*:nth-child(3){grid-column:1}
  .step{grid-template-columns:1fr; gap:.5rem}
  .foot-grid{grid-template-columns:1fr}
  .hero-body,.hero-lead,.subhero .t-h1,.subhero-lead,.closer .t-h1{max-width:none}
  .btn{width:100%}
  .hero-actions,.closer-actions{flex-direction:column; align-items:stretch}
  .hero-meta{gap:var(--sp-4) var(--sp-5)}
  .rail{margin-inline:calc(var(--pad) * -1)}
}

/* --------------------------------------------------------------------------
   16. Accesibilidad — tres señales independientes (§14)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  .js [data-enter]{opacity:1 !important; transform:none !important}
  .work:hover img{transform:none}
  .hero-bg img,.hero-bg video{transform:none !important}
  .hero-video{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .chrome::after{background:#0C0C0B; backdrop-filter:none; -webkit-backdrop-filter:none;
    -webkit-mask-image:none; mask-image:none}
  .sheet{background:#0F0F0E; backdrop-filter:none; -webkit-backdrop-filter:none}
  .btn--glass,.menu-btn,.rail-btn{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--n-800)}
  .surface{background:var(--n-880)}
}
@media (prefers-contrast:more){
  :root{--text-2:#D6DDD9; --text-3:#AEB8B3; --hairline:rgba(255,255,255,.30); --hairline-2:rgba(255,255,255,.46)}
  .surface,.frame,.work,.checks li{background:var(--n-850)}
  .btn{border-width:1.5px}
}
@media print{
  .chrome,.sheet,.scrim,.rail-nav,.closer{display:none}
  body{background:#fff; color:#000}
}