/* ============================================================
   MÁXIMA EXPERIENCIA
   Sistema derivado del logo: monograma isométrico en carbón
   y acero. El rojo no decora — solo actúa.
   ============================================================ */

:root{
  /* --- Tomados del logo original --- */
  --brand-carbon:#262E39;
  --brand-steel:#7C8896;

  /* --- Escala de carbón --- */
  --void:#10141A;
  --carbon:#171C24;
  --carbon-2:#1F2530;
  --carbon-3:#262E39;
  --edge:#2E3744;
  --edge-2:#3D4857;

  /* --- Acero: el material de la marca --- */
  --steel:#7C8896;
  --steel-bright:#A5AFBC;
  --steel-dim:#828D9C; /* aclarado de #5A6472: el original daba 2.85:1 sobre carbón, bajo el 4.5:1 AA */
  --steel-1:rgba(124,136,150,.14);

  /* --- Claro --- */
  --paper:#F2F4F7;
  --paper-2:#E8EBF0;
  --paper-line:#D2D8E1;
  --ink:#171C24;
  --ink-2:#39424F;
  --mute:#616B7A;
  --faint:#5E6979; /* oscurecido de #98A2AF: el original daba 2.35:1 sobre papel, bajo el 4.5:1 AA */

  /* --- Acción: escaso por diseño --- */
  --action:#E01E24;
  --action-deep:#B8171C;
  /* El mismo rojo hondo, pero con trabajo propio: texto de acción pequeño sobre
     papel. El --action da 4.0:1 sobre --paper-2 y 4.35:1 sobre --paper, ambos
     bajo el 4.5:1 de AA. Este da 5.5:1 y 6.0:1. */
  --action-on-paper:#B8171C;

  --affirm:#4FA97A;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-steel:cubic-bezier(.22,.68,.24,1);
  --maxw:1280px;
  --gutter:clamp(20px,5vw,80px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  font-family:'Satoshi',system-ui,-apple-system,sans-serif;
  background:var(--void);color:var(--paper);
  font-size:16px;line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}
::selection{background:var(--action);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.wrap-narrow{max-width:880px}
.section{position:relative;padding:clamp(80px,10vw,150px) 0}
.section-light{background:var(--paper);color:var(--ink)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--action);color:#fff;padding:12px 20px}
.skip-link:focus{left:12px;top:12px}

/* Grano fijo — nunca dentro de un contenedor con scroll */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%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)' opacity='.05'/%3E%3C/svg%3E");
}
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:130;
  background:var(--mute);transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* ============ CURSOR ============ */
.cursor{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  display:none;opacity:0;
  transition:opacity .25s var(--ease);
  mix-blend-mode:difference;
}
.cursor.is-ready{opacity:1}
@media(hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor-dot{
  position:fixed;top:0;left:0;pointer-events:none;will-change:transform;
  width:6px;height:6px;margin:-3px;
  background:var(--paper);border-radius:50%;
}
.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;will-change:transform;
  width:28px;height:28px;margin:-14px;
  border:1px solid var(--paper);border-radius:50%;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease);
}
.cursor.is-interactive .cursor-ring{width:38px;height:38px;margin:-19px}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}

/* ============ TIPOGRAFÍA ============ */
.display{
  font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  font-size:clamp(34px,4.9vw,64px);font-weight:800;
  line-height:1;letter-spacing:-.035em;text-wrap:balance;
}
.h2{
  font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  font-size:clamp(30px,3.9vw,52px);font-weight:800;
  line-height:1.04;letter-spacing:-.032em;text-wrap:balance;
}
.h3{
  font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  font-size:clamp(20px,2vw,25px);font-weight:700;letter-spacing:-.022em;line-height:1.2;
}
.soft{color:var(--steel);font-weight:500}
.section-light .soft{color:var(--faint)}
.act{color:var(--action)}
.lede{font-size:clamp(16px,1.35vw,18px);line-height:1.65;color:var(--steel-bright);max-width:54ch}
.section-light .lede{color:var(--mute)}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:8px 28px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;position:relative;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .18s var(--ease);
}
.btn:active{transform:scale(.985) translateY(1px)}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-solid{background:var(--action);color:#fff}
.btn-solid:hover{background:var(--action-deep)}
.btn-steel{border-color:var(--edge-2);color:var(--paper)}
.btn-steel:hover{border-color:var(--steel);background:var(--steel-1)}
.btn-ink{border-color:var(--paper-line);color:var(--ink)}
.btn-ink:hover{border-color:var(--ink);background:rgba(23,28,36,.04)}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}
.magnetic{will-change:transform}

/* ============ HEADER ============ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:#fff;border-bottom:1px solid var(--ink);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:24px}
.brand{display:block;flex-shrink:0}
.brand img{height:40px;width:auto}

.nav{display:flex;gap:32px}
.nav a{font-size:15px;font-weight:400;color:var(--ink);position:relative;padding:4px 0;transition:color .25s var(--ease)}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--action);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--action)}
.nav a:hover::after{transform:scaleX(1)}

.burger{display:none;position:relative;background:none;border:0;cursor:pointer;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.burger::before{content:'';position:absolute;inset:-4px} /* extiende el área táctil a 44x44 sin cambiar el ícono visible */
.burger i{display:block;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.burger i:nth-child(1){width:22px}
.burger i:nth-child(2){width:15px}
.burger.open i:nth-child(1){width:22px;transform:translateY(3.75px) rotate(45deg)}
.burger.open i:nth-child(2){width:22px;transform:translateY(-3.75px) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:115;background:var(--void);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.sheet.open{opacity:1;visibility:visible}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{
  font-family:'Cabinet Grotesk','Satoshi',sans-serif;
  font-size:clamp(30px,8vw,52px);font-weight:800;letter-spacing:-.035em;
  color:var(--paper);padding:11px 0;border-bottom:1px solid var(--edge);
  opacity:0;transform:translateY(14px);
}
.sheet.open nav a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(var(--i,0)*55ms + 90ms),
             transform .5s var(--ease) calc(var(--i,0)*55ms + 90ms);
}
.sheet-foot{position:absolute;bottom:36px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:13px;color:var(--steel-dim)}

/* ============ REVEAL ============ */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease) calc(var(--i,0)*80ms),
             transform .8s var(--ease) calc(var(--i,0)*80ms);
}
/* El hero no espera al IntersectionObserver: siempre está en pantalla, así que
   entra con animación CSS pura. Antes su opacidad dependía del JS y eso
   retrasaba el pintado del H1 (elemento LCP) ~3s según PageSpeed. */
.js .hero .reveal{
  opacity:1;transform:none;
  animation:revealIn .8s var(--ease) calc(var(--i,0)*80ms) backwards;
}
@keyframes revealIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* ============ PRELOADER ============ */
html.is-loading{overflow:hidden}
#preloader{
  --pre-bg:#F2F4F7;--pre-ink:#1c2133;
  position:fixed;inset:0;z-index:99999;pointer-events:none;
}
#preloader .pre-panel{position:absolute;top:0;bottom:0;width:50%;background:var(--pre-bg);transition:transform .9s var(--ease);will-change:transform}
#preloader .pre-panel.left{left:0}
#preloader .pre-panel.right{right:0}
#preloader.is-closing .pre-panel.left{transform:translateX(-101%)}
#preloader.is-closing .pre-panel.right{transform:translateX(101%)}
.pre-stage{position:absolute;inset:0;z-index:2;transition:opacity .55s ease}
#preloader.is-closing .pre-stage{opacity:0;transition:none}
/* El apartado de las palabras respecto a la línea va por transform, no por padding:
   mismo movimiento exacto, pero corre en el compositor y no dispara layout. */
.pre-side{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0;transition:transform .55s cubic-bezier(.65,.05,.36,1);will-change:transform}
.pre-side.left{right:50%;justify-content:flex-end}
.pre-side.right{left:50%;justify-content:flex-start}
.pre-mask{display:inline-block;overflow:hidden;padding-bottom:.14em;line-height:1}
.pre-word{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(20px,6vw,78px);letter-spacing:-.02em;color:var(--pre-ink);
  font-weight:300;font-variation-settings:"wght" 300;
  display:inline-block;opacity:0;transform:translateY(110%);
  transition:font-variation-settings .55s cubic-bezier(.65,.05,.36,1),
             letter-spacing .55s cubic-bezier(.65,.05,.36,1);
  white-space:nowrap;will-change:transform,opacity;
}
.pre-word.in{animation:preFadeUp .9s cubic-bezier(.22,1,.36,1) forwards}
.pre-word.left.in{animation-delay:.12s}
.pre-word.right.in{animation-delay:.42s}
#preloader.is-locked .pre-word{font-weight:600;font-variation-settings:"wght" 600;letter-spacing:-.03em}
#preloader.is-locked .pre-side.left{transform:translateX(calc(clamp(10px,4vw,38px) * -1))}
#preloader.is-locked .pre-side.right{transform:translateX(clamp(10px,4vw,38px))}
.pre-divider{
  position:absolute;left:50%;top:8vh;bottom:8vh;
  width:1px;background:var(--pre-ink);opacity:0;
  transform:translateX(-50%) scaleY(0);transform-origin:center;
  transition:transform .6s cubic-bezier(.86,0,.07,1),opacity .25s ease;
  min-height:110px;
}
#preloader.is-line .pre-divider{transform:translateX(-50%) scaleY(1);opacity:.55}
@keyframes preFadeUp{
  from{opacity:0;transform:translateY(110%)}
  to{opacity:1;transform:translateY(0)}
}

/* ============ 1. HERO + MARQUEE ============ */
/* Hero y marquee comparten una pantalla: el marquee cierra el bloque
   contra el borde inferior y el hero absorbe lo que sobre. */
.hero-block{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
.hero{
  /* Alineado a los tokens reales de marca: antes usaba #fff/#000/#ff0000/#666
     sueltos, ignorando --ink, --action y --mute del resto del sitio. */
  --hero-bg:#fff;--hero-ink:var(--ink);--hero-accent:var(--action);--hero-mute:var(--mute);
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:78px;border-bottom:1px solid var(--hero-ink);
  position:relative;overflow:hidden;
  background:var(--hero-bg);color:var(--hero-ink);
}
.hero-gradient{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle 800px at var(--mx,28%) var(--my,38%), rgba(224,30,36,.08) 0%, transparent 60%);
  transition:background .1s;
}
.hero-content{position:relative;z-index:1;padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(40px,5vw,64px)}
.hero-eyebrow{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-ink);
  display:flex;align-items:center;gap:16px;margin-bottom:5px;
}
.hero-eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--hero-accent)}
.hero-title{
  font-family:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  font-weight:700;font-size:clamp(52px,10vw,144px);
  line-height:.92;letter-spacing:-.04em;
  margin-bottom:clamp(32px,4vw,48px);max-width:18ch;color:var(--hero-ink);
}
.hero-title em{font-style:italic;color:var(--hero-accent)}
.hero-footer{
  display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;
  border-top:1px solid var(--hero-ink);padding-top:24px;
}
.hero-desc{
  font-family:'Satoshi',system-ui,-apple-system,sans-serif;
  font-size:clamp(15px,1.5vw,18px);color:var(--hero-mute);
  max-width:42ch;line-height:1.6;flex:1 1 280px;
}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;flex-shrink:0}

.hero-btn-solid{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--hero-ink);
  background:var(--hero-ink);color:var(--hero-bg);
  transition:background .2s,border-color .2s;
}
.hero-btn-solid:hover{background:var(--hero-accent);border-color:var(--hero-accent)}
.hero-btn-arrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hero-mute);transition:color .2s,gap .3s var(--ease-steel);
  padding:11px 0;margin:-11px 0; /* area tactil ~43px sin desplazar el texto */
}
.hero-btn-arrow:hover{color:var(--hero-ink);gap:20px}
.hero-btn-arrow .arrow{font-style:normal}

/* ============ MARQUEE ============ */
.marquee-wrap{
  flex:0 0 auto;
  overflow:hidden;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  padding:12px 0;
  background:var(--ink);
}
.marquee-track{
  display:flex;gap:0;
  will-change:transform;
  animation:marqueeScroll 20s linear infinite;
  width:max-content;
}
.marquee-item{
  font-family:'Cabinet Grotesk','Satoshi',sans-serif;
  font-size:clamp(17.6px,2.5vw,24px);
  color:var(--paper);
  padding:0 40px;
  letter-spacing:-.02em;
  white-space:nowrap;
  display:flex;align-items:center;gap:40px;
}
.marquee-item::after{
  content:'×';
  color:var(--action);
  font-size:1.1em;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}

/* ============ 2. SERVICIOS ============ */
.svc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.svc-list{border-top:1px solid var(--paper-line)}
.svc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;
  gap:clamp(18px,3vw,44px);align-items:start;
  padding:clamp(26px,3.2vw,36px) 0;border-bottom:1px solid var(--paper-line);position:relative;
}
.svc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--action);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.svc:hover::before{transform:scaleY(1)}
.svc > *{transition:transform .5s var(--ease)}
.svc:hover > *{transform:translateX(18px)}
.svc-l{display:flex;flex-direction:column;gap:9px}
.svc-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--faint)}
.svc h3{transition:color .3s var(--ease)}
.svc:hover h3{color:var(--action)}
.svc-lead{font-family:'Cabinet Grotesk','Satoshi',sans-serif;font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:-.015em}
.svc p{font-size:15px;line-height:1.65;color:var(--mute);max-width:50ch;margin-bottom:14px}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px}
.svc-tags span{font-size:13px;color:var(--mute);border:1px solid var(--paper-line);border-radius:100px;padding:4px 11px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.svc-tags span:hover{color:var(--action);border-color:var(--action)}
.svc-go{color:var(--faint);align-self:center;transition:color .3s var(--ease)}
.svc-go svg{width:18px;height:18px}
.svc:hover .svc-go{color:var(--action)}

/* ============ 3. CIFRAS ============ */
.figures{background:var(--paper);color:var(--ink);padding:clamp(60px,7vw,90px) 0}
.figures .soft{color:var(--faint)}
.fig-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--paper-line)}
.fig{padding:clamp(26px,3vw,36px) clamp(16px,2vw,28px) 4px 0;border-right:1px solid var(--paper-line)}
.fig:last-child{border-right:0}
.fig b{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(30px,4.2vw,48px);font-weight:400;letter-spacing:-.045em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.fig b em{font-style:normal;color:var(--action)}
.fig > span{display:block;margin-top:14px;font-size:15px;color:var(--mute);max-width:20ch}
.fig > i{display:block;margin-top:5px;font-style:normal;font-size:13px;color:var(--faint)}
.fig-note{margin-top:28px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}

/* ============ MARCAS ============ */
.brands{background:var(--paper);padding:clamp(56px,7vw,84px) 0;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.brands-label{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center;
}
.brands-rule{width:32px;height:1px;background:var(--paper-line);flex-shrink:0}
.brands-wrap{
  overflow:hidden;margin-top:clamp(28px,4vw,40px);
  /* padding vertical: le da espacio al translateY(-3px) del hover para que no
     choque contra el borde recortado por overflow:hidden */
  padding:6px 0;
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.brands-track{
  display:flex;align-items:center;
  gap:clamp(14px,1.8vw,26px);width:max-content;
  will-change:transform;
  animation:brandsScroll 32s linear infinite;
}
@keyframes brandsScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.brands-wrap:hover .brands-track{animation-play-state:paused}
.brand-logo{display:flex;align-items:center;justify-content:center;height:clamp(30px,3.6vw,42px);flex-shrink:0}
.brand-logo img{
  height:100%;width:auto;max-width:120px;object-fit:contain;display:block;
  filter:grayscale(1);
  transition:transform .35s var(--ease),filter .5s var(--ease);
}
.brand-logo:hover img{transform:translateY(-3px);filter:grayscale(0)}
@media(hover:none){.brand-logo img{filter:grayscale(0)}}

/* Lockup compuesto: el archivo solo trae el ícono, el nombre va en texto */
.brand-logo--lockup{gap:.5em;transition:transform .35s var(--ease)}
.brand-logo--lockup:hover{transform:translateY(-3px)}
.brand-logo--lockup:hover img{transform:none}
.brand-lockup{
  display:flex;flex-direction:column;justify-content:center;gap:.04em;
  font-size:clamp(30px,3.6vw,42px);
}
.brand-lockup em{
  font-family:'Satisfy','Satisfy Fallback',cursive;font-style:normal;font-weight:400;
  font-size:.45em;line-height:1.15;letter-spacing:0;color:var(--ink);white-space:nowrap;
}
.brand-lockup i{
  font-style:normal;font-size:.17em;line-height:1;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute);white-space:nowrap;
}


/* ============ 4. CASOS ============ */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(40px,5vw,60px)}
.case{
  border:1px solid var(--paper-line);background:var(--paper-2);padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  position:relative;overflow:hidden;
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.case:hover{border-color:var(--faint);background:#fff}
.case-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.case-sector{font-size:13px;font-weight:500;color:var(--mute)}
.case-year{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--faint)}
.case h3{margin-top:14px;color:var(--ink)}
.case-scope{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:var(--action-on-paper);margin-top:8px}
.case-desc{font-size:15px;color:var(--mute);margin-top:12px;max-width:40ch;line-height:1.6}
/* La pieza real entregada (el logo) llena el espacio en vez de una cifra inventada */
.case-mark{
  flex:1;min-height:80px;
  display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--paper-line);padding-top:24px;
}
.case-mark img{max-width:65%;max-height:110px;width:auto;object-fit:contain}
.case-figs{display:flex;gap:clamp(20px,3vw,40px);border-top:1px solid var(--paper-line);padding-top:20px;flex-wrap:wrap}
.case-figs div b{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(18px,2vw,23px);font-weight:400;letter-spacing:-.03em;color:var(--action);
  font-variant-numeric:tabular-nums;
}
.case-figs div span{display:block;margin-top:5px;font-size:13px;color:var(--faint);line-height:1.4}
.case-viz{display:flex;align-items:stretch;gap:6px;flex:1;min-height:130px;margin-top:auto}
.case-viz i{
  display:block;flex:1;height:100%;background:var(--faint);border-radius:2px;
  transform-origin:50% 100%;transform:scaleY(var(--h,.3));
  transition:transform 1s var(--ease) calc(var(--d,0)*80ms);
}
.case-viz i:nth-last-child(-n+3){background:var(--action)}

/* ============ 5. PROCESO ============ */
.steps{display:grid;margin-top:clamp(40px,5vw,60px)}
.step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--paper-line)}
.step:nth-child(2){padding-left:clamp(0px,3vw,48px)}
.step:nth-child(3){padding-left:clamp(0px,6vw,96px)}
.step:nth-child(4){padding-left:clamp(0px,9vw,144px)}
.step-l{display:flex;align-items:baseline;gap:16px}
.step-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--action-on-paper);flex-shrink:0}
.step-when{display:inline-block;margin-top:9px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--faint)}
.step p{font-size:15px;line-height:1.7;color:var(--mute);max-width:50ch}

/* ============ 6. FAQ ============ */
.acc{border-top:1px solid var(--edge);margin-top:clamp(32px,4vw,48px)}
.acc-item{border-bottom:1px solid var(--edge)}
.acc-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;font-size:clamp(16px,1.6vw,19px);font-weight:600;
  letter-spacing:-.02em;line-height:1.35;color:var(--paper);transition:color .3s var(--ease);
}
@media(hover:hover){.acc-q:hover{color:var(--action)}}
.acc-ico{width:20px;height:20px;flex-shrink:0;position:relative;color:var(--steel-dim);transition:color .3s var(--ease)}
.acc-ico::before,.acc-ico::after{content:'';position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%)}
.acc-ico::before{width:13px;height:1.5px}
.acc-ico::after{width:1.5px;height:13px;transition:transform .45s var(--ease)}
.acc-q[aria-expanded="true"] .acc-ico{color:var(--action)}
.acc-q[aria-expanded="true"] .acc-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-a>div{overflow:hidden}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a p{font-size:15px;line-height:1.75;color:var(--steel);max-width:64ch;padding-bottom:26px}

/* ============ EQUIPO ============ */
/* Plano intermedio entre el vacío del FAQ y el papel del contacto */
.team{
  background:var(--paper);
  border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
  padding:clamp(32px,4vw,56px) 0; /* aún menos aire (venía de clamp(48px,6vw,90px)) */
}
.team-grid{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px; /* espacio base, ajustado aparte para el título */
}
.team-title{
  margin-bottom:clamp(14px,2.6vw,26px); /* aire extra solo entre el título y la foto */
  font-family:'Satoshi',system-ui,-apple-system,sans-serif;
  font-weight:400;font-size:clamp(26px,3.4vw,42px);
  letter-spacing:-.02em;line-height:1.25;color:var(--ink);
  max-width:42ch;
}
.team-photo{
  /* 👉 AJUSTA EL TAMAÑO DE LA FOTO AQUÍ: cambia este valor (diámetro) */
  --w:160px;
  width:100%;max-width:var(--w);
  margin:0 auto;
  aspect-ratio:1/1;
}
.team-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.02);
  transition:filter .7s var(--ease),transform .7s var(--ease);
}
.team-photo:hover img{filter:grayscale(0);transform:scale(1.025)}
/* En móvil la foto se queda en blanco y negro: no hay hover que revele el color. */
/* Nombre y rol van debajo de la foto, sueltos sobre el fondo de la sección */
.team-caption strong{
  display:block;
  font-family:'Cabinet Grotesk','Satoshi',sans-serif;
  font-size:clamp(17px,1.8vw,20px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;color:var(--ink);
}
.team-caption span{
  display:block;margin-top:4px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--mute);
}
.team-caption::after{
  content:'';
  display:block;width:28px;height:3px;
  margin:10px auto 0;
  background:var(--ink);
  border-radius: 20px;
}
/* ============ 7. CONTACTO ============ */
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,76px);align-items:start}
.contact-copy>*+*{margin-top:24px}
.contact-info{border-top:1px solid var(--paper-line);margin-top:36px;padding-top:6px}
.contact-info li{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--paper-line)}
.contact-info b{font-weight:600;font-size:13px;color:var(--faint)}
.contact-info a,.contact-info span{font-size:15px;color:var(--ink);transition:color .25s var(--ease)}
.contact-info a{display:inline-block;padding:6px 0;margin:-6px 0} /* area tactil ~36px */
.contact-info a:hover{color:var(--action)}

.form{border:1px solid var(--paper-line);background:#fff;padding:clamp(24px,3vw,38px);display:grid;gap:19px}
.field{display:grid;gap:8px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--paper-line);border-radius:2px;
  padding:13px 14px;font-size:15px;color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--action);background:#fff}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616B7A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:40px;
}
.field-help{font-size:13px;color:var(--faint);line-height:1.45}
.field-err{font-size:13px;color:var(--action);line-height:1.45;display:none;align-items:center;gap:6px}
.field-err svg{width:13px;height:13px;flex-shrink:0}
.field.invalid input,.field.invalid textarea{border-color:var(--action)}
.field.invalid .field-err{display:flex}
.form-foot{display:grid;gap:12px;margin-top:4px}
.form-note{font-size:15px;line-height:1.5;display:none;align-items:flex-start;gap:9px}
.form-note.show{display:flex}
.form-note svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.form-note.ok{color:var(--affirm)}
.form-note.bad{color:var(--action)}
.btn-load{position:relative;overflow:hidden;color:transparent!important}
.btn-load svg{opacity:0}
.btn-load::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%);animation:shimmer 1.15s linear infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ============ FOOTER ============ */
.footer{background:var(--void);border-top:1px solid var(--edge)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,3vw,48px);padding-top:clamp(50px,6vw,76px);padding-bottom:clamp(32px,4vw,46px)}
.footer-brand img{height:40px;width:auto;margin-bottom:18px}
.footer-brand p{font-size:15px;color:var(--steel-dim);line-height:1.6;max-width:32ch}
.footer h3{font-weight:600;font-size:13px;color:var(--steel);margin-bottom:16px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a,.footer-col span{font-size:15px;color:var(--steel-dim);transition:color .25s var(--ease)}
.footer-col a{display:inline-block;padding:6px 0;margin:-6px 0} /* area tactil ~36px */
.footer-col a:hover{color:var(--action)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;border-top:1px solid var(--edge);font-size:13px;color:var(--steel-dim)}

/* ============ WHATSAPP ============ */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:110;width:52px;height:52px;border-radius:50%;
  background:var(--carbon-3);color:var(--paper);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge-2);transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.wa:hover{transform:scale(1.07);background:var(--action);border-color:var(--action)}
.wa:active{transform:scale(.97)}
.wa svg{width:24px;height:24px}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .nav{display:none}
  .header .btn{display:none}
  .burger{display:flex}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .cases{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .step{grid-template-columns:1fr;gap:14px}
  .step:nth-child(2),.step:nth-child(3),.step:nth-child(4){padding-left:0}
}
@media(max-width:768px){
  /* En pantallas altas el aire se reparte arriba y abajo del texto */
  .hero{justify-content:center}
  .svc{grid-template-columns:1fr;gap:12px}
  .svc-go{display:none}
  .svc:hover > *{transform:translateX(12px)}
  .fig-grid{grid-template-columns:1fr 1fr}
  .fig{border-bottom:1px solid var(--edge)}
  .fig:nth-child(2n){border-right:0}
  .fig:nth-last-child(-n+2){border-bottom:0}
  .svc-head{grid-template-columns:1fr;align-items:start}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .hero-btn-solid,.hero-actions .hero-btn-arrow{width:100%;justify-content:center}
  .fig-grid{grid-template-columns:1fr}
  .fig{border-right:0}
  .contact-info li{grid-template-columns:1fr;gap:4px}
  .form{padding:22px}
  .wa{width:46px;height:46px;right:16px;bottom:16px}
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
  .case-viz i{transform:scaleY(var(--h,.3))}
}