/* ========================================================================
   ARKEX — Design tokens
   ======================================================================== */
:root{
  /* Marca — paleta exacta */
  --azul:#004CB5;
  --azul-oscuro:#00287A;
  --dorado:#D49A00;
  --dorado-claro:#FFC233;
  --plata:#8C94A1;
  --gris-oscuro:#434A54;
  --gris-claro:#E8EBEE;
  --fondo-base:#F7F9FA;

  /* Fondos oscuros (derivados del Azul Oscuro, para contraste con secciones claras) */
  --bg-dark:#050A14;
  --bg-dark-2:#0A1526;
  --bg-dark-3:#0E1E3A;
  --line-dark:rgba(140,148,161,.16);
  --line-light:rgba(67,74,84,.14);

  --texto-claro:#F7F9FA;
  --texto-claro-sec:#B9C3D1;

  --max:1240px;
  --radius:10px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono","Space Grotesk",monospace;
  --serif:"Bricolage Grotesque","Space Grotesk",sans-serif;
  --display-alt:"Manrope",sans-serif;
  --display-black:"Archivo Black",sans-serif;
  --glow-azul:0 20px 60px rgba(0,76,181,.18);
  --glow-dorado:0 20px 60px rgba(212,154,0,.2);
}

*{box-sizing:border-box}
/* overflow-x va en html, no en body: si solo uno de los dos ejes de overflow
   se fija en un elemento, el otro eje pasa a "auto" aunque nadie lo pida (regla
   del propio CSS) — puesto en body, eso convertía a body en su propio
   "contenedor de scroll" sin que jamás llegara a desplazarse de verdad (nunca
   crece más que su contenido), y eso le quitaba a TODO el position:sticky de
   la página algo real a qué pegarse. En html no pasa nada de esto: html ya es
   el elemento que de verdad se desplaza. */
/* scroll-behavior:smooth NO va aquí a propósito: puesto en html, el navegador
   intenta animar suavemente CADA evento de rueda del mouse — con scroll rápido
   (muchos eventos seguidos) esas animaciones se acumulan en cola y la página
   tarda varios segundos en "alcanzar" a donde ya scrolleaste. El salto suave
   al hacer click en un link del menú se hace aparte, por JS (ver main.js),
   así el scroll normal con la rueda queda instantáneo y sin ese retraso. */
/* zoom (no transform:scale) a propósito: transform no vuelve a calcular el
   layout — todo se vería 10% más grande pero un poco borroso y el bounding
   box seguiría siendo el de antes (scroll, clics y JS quedarían desfasados
   del tamaño visual real). zoom sí recalcula el layout completo, como si el
   visitante le diera Ctrl+ una vez al navegador — mismo efecto que pedían,
   nítido y sin desfases. */
html{overflow-x:hidden;zoom:1.1}
@media(max-width:900px){html{zoom:1}}
/* overscroll-behavior-x, no overflow-x en body (ver nota de arriba sobre por
   qué overflow-x solo va en html): esto es lo que en el celular deja
   "arrastrar" la página un poco hacia la derecha y de rebote (rubber-band)
   asoma el fondo negro de detrás — no es contenido real desbordándose, es
   el gesto elástico que el navegador permite por defecto al llegar al
   borde. Se desactiva solo en el eje horizontal; el rebote vertical normal
   (arriba/abajo) queda intacto. */
html,body{overscroll-behavior-x:none}
/* touch-action:pan-y — esto es lo que de verdad corta el deslizamiento
   lateral en el celular real, sin importar si algún elemento fixed (el
   .grain, el header) mide unos px más que la pantalla visible por cómo el
   navegador calcula su "viewport" (un desajuste típico entre
   window.innerWidth y el ancho realmente visible, distinto por teléfono).
   overscroll-behavior de arriba solo evita el rebote elástico EN el borde;
   esto va más al fondo y le dice al navegador "con el dedo, solo se
   scrollea verticalmente en esta página" — el gesto horizontal ya ni se
   interpreta como intento de mover la página. De paso, al no incluir
   "pinch-zoom" en la lista, esto también bloquea el pellizcar con dos
   dedos para agrandar/achicar la página — que es justo lo que se quiere
   en un sitio con diseño fijo como este. */
html{touch-action:pan-y}

/* Scroll snap DESACTIVADO: junto con scroll-behavior:smooth (ver arriba) era
   la otra mitad de la combinación que Chrome tolera mal con scroll rápido de
   rueda del mouse — cada snap de sección es, en el fondo, otra animación de
   scroll que se puede sumar a la cola. Queda solo scroll-margin-top, que no
   anima nada: únicamente corrige que una sección no quede tapada por el
   header fijo cuando saltas a ella por un link. */
section{scroll-margin-top:82px}
body{
  margin:0;
  background:var(--fondo-base);
  color:var(--gris-oscuro);
  font-family:var(--serif);
  line-height:1.6;
  cursor:default;
  user-select:none;-webkit-user-select:none;
}
a{text-decoration:none;color:inherit;cursor:pointer}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
input,textarea{user-select:text;-webkit-user-select:text}
input[type="text"],input[type="email"],input[type="tel"],textarea{cursor:text}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);margin:0;color:inherit;font-weight:700}
p{margin:0}
.container{width:min(calc(100% - 48px),var(--max));margin:auto}
section{position:relative}
.section-dark{background:var(--bg-dark);color:var(--texto-claro)}
.section-light{background:var(--fondo-base);color:var(--gris-oscuro)}
.section-alt{background:var(--gris-claro);color:var(--gris-oscuro)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.01em;text-transform:uppercase;font-weight:500;
  color:var(--dorado);
}
.section-dark .eyebrow{color:var(--dorado-claro)}
.eyebrow i{display:none}
h2{text-transform:uppercase}

/* ========================================================================
   Grano de textura + cursor glow (ambiente cinematográfico)
   ======================================================================== */
.grain{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(0,76,181,.16),transparent 70%);
  transform:translate(-50%,-50%);border-radius:50%;
  opacity:0;transition:opacity .4s ease;will-change:transform;
}
.cursor-glow.on{opacity:1}
@media(max-width:900px),(pointer:coarse){.cursor-glow{display:none}}

/* ========================================================================
   Preloader
   ======================================================================== */
#preloader{
  position:fixed;inset:0;z-index:999;
  background:var(--bg-dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pre-mark{width:170px;height:170px;position:relative}
.pre-mark img{width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.8);animation:preLogoIn 1.1s var(--ease-out) forwards}
@keyframes preLogoIn{to{opacity:1;transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.pre-label{font:700 11px/1 "Space Grotesk",sans-serif;letter-spacing:.3em;color:var(--texto-claro-sec);text-transform:uppercase}
.pre-bar{width:180px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px}
.pre-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--azul),var(--dorado));animation:loadbar 1.5s var(--ease) forwards .2s}
@keyframes loadbar{to{width:100%}}

/* ========================================================================
   Header / Nav
   ======================================================================== */
/* El header es lo único fijo en toda la página: con backdrop-filter, el
   navegador tiene que volver a difuminar lo que hay detrás en cada frame de
   scroll, sobre TODO el sitio, no solo en una sección — es el costo más
   constante de la página. Se bajó el blur y se subió un poco la opacidad del
   fondo para compensar visualmente: se ve casi igual de "vidrio esmerilado"
   pero con muchos menos píxeles que recalcular por frame. */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:82px;
  background:rgba(5,10,20,.88);backdrop-filter:blur(7px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:transform .4s var(--ease),background .3s ease,border-color .3s ease;
}
#header.hide{transform:translateY(-100%)}
#header.on-light{background:rgba(247,249,250,.92);border-bottom-color:rgba(67,74,84,.12)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center}
.brand{height:100%;overflow:visible}
.brand img{height:170px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:600;color:var(--texto-claro-sec)}
#header.on-light .nav-links{color:var(--gris-oscuro)}
.nav-links a{opacity:.9;transition:opacity .2s,color .2s;position:relative;padding-bottom:3px;white-space:nowrap}
.nav-links a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--dorado-claro)}
.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1);transform-origin:left}
#header.on-light .nav-links a:hover,#header.on-light .nav-links a.active{color:var(--azul)}
.nav-right{display:flex;align-items:center;gap:14px}
/* Mismo degradado dorado que .btn-gold, para que combine con "Solicita tu
   diagnóstico" — es el carrito de compras real (silueta con ruedas), no un
   ícono genérico. */
.nav-store-btn{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:#211a02;
  box-shadow:0 8px 22px rgba(212,154,0,.22);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.nav-store-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(212,154,0,.36)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:7px;padding:13px 22px;font-size:13px;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),background .25s;
  white-space:nowrap;will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:#211a02;box-shadow:0 8px 22px rgba(212,154,0,.22)}
.btn-gold:hover{box-shadow:0 14px 34px rgba(212,154,0,.36)}
.btn-outline-dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);color:var(--texto-claro)}
.btn-outline-dark:hover{background:rgba(255,255,255,.1)}
#header.on-light .btn-outline-dark{border-color:rgba(67,74,84,.35);color:var(--gris-oscuro)}
.btn-outline-light{background:rgba(255,255,255,.9);border-color:var(--gris-claro);color:var(--azul)}
.btn-outline-light:hover{background:#fff}
.btn-primary{background:var(--azul);color:#fff}
.btn-primary:hover{background:var(--azul-oscuro)}
.btn-block{width:100%}
@media(pointer:fine){.magnetic{transition:transform .35s var(--ease-out),box-shadow .3s var(--ease),background .25s}}
#menuBtn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;border:0;background:transparent;cursor:pointer;
}
#menuBtn span{display:block;height:2px;width:100%;background:var(--texto-claro);border-radius:2px;transition:.3s}
#header.on-light #menuBtn span{background:var(--gris-oscuro)}

/* Menú overlay pantalla completa (estilo Precept) */
#menuOverlay{
  position:fixed;inset:0;z-index:200;
  background:var(--bg-dark);
  visibility:hidden;opacity:0;
  transition:opacity .55s var(--ease),visibility .55s var(--ease);
  display:flex;flex-direction:column;
}
#menuOverlay.open{visibility:visible;opacity:1}
.menu-top{height:82px;display:flex;align-items:center;justify-content:space-between}
.menu-top .brand img{height:28px}
#menuClose{width:42px;height:42px;border:0;background:transparent;color:var(--texto-claro);font-size:30px;cursor:pointer;line-height:1}
.menu-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0}
.menu-links{display:flex;flex-direction:column}
.menu-links a{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font:700 clamp(30px,6vw,58px)/1 "Space Grotesk",sans-serif; letter-spacing:-.02em;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  color:var(--texto-claro); opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s;
}
#menuOverlay.open .menu-links a{opacity:1;transform:none}
.menu-links a:nth-child(1){transition-delay:.05s}
.menu-links a:nth-child(2){transition-delay:.1s}
.menu-links a:nth-child(3){transition-delay:.15s}
.menu-links a:nth-child(4){transition-delay:.2s}
.menu-links a:nth-child(5){transition-delay:.25s}
.menu-links a:nth-child(6){transition-delay:.3s}
.menu-links a:hover{color:var(--dorado-claro)}
.menu-links a small{font:600 12px "Inter",sans-serif;letter-spacing:.08em;color:var(--texto-claro-sec);text-transform:uppercase}
.menu-foot{padding:30px 0 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid rgba(255,255,255,.08);color:var(--texto-claro-sec);font-size:13px}
.menu-foot a{color:var(--texto-claro-sec)}
.menu-foot a:hover{color:var(--dorado-claro)}

/* ========================================================================
   Hero
   ======================================================================== */
.hero{min-height:100vh;padding-top:82px;display:flex;align-items:center;background:var(--bg-dark)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{position:absolute;top:-5%;left:-5%;width:110%;height:110%;object-fit:cover;object-position:60% center;filter:saturate(1.05) contrast(1.05) brightness(.7);will-change:transform;animation:kenburns 22s ease-in-out infinite alternate}
.hero-media:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,7,14,.55) 0%,rgba(3,7,14,.35) 30%,rgba(3,7,14,.62) 70%,rgba(3,7,14,.94) 100%);
}
@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.1) translateY(-1.5%)}}

.hero-center .hero-content{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-content{position:relative;z-index:2;padding:20px 0 26px}
.hero-text{max-width:680px;width:100%}
.eyebrow-center{justify-content:center;margin-bottom:12px}

.hero-serif{
  margin:0 0 12px;color:var(--texto-claro);
  font-family:var(--serif);font-weight:460;font-optical-sizing:auto;
  font-size:clamp(22px,2.8vw,34px);line-height:1.22;letter-spacing:-.01em;
}
.hero-serif .hero-line{display:block}
.hero-serif em{font-style:italic;font-weight:420;color:var(--texto-claro-sec);opacity:.85}
.hero-line-em em{color:var(--dorado-claro);opacity:1}
/* Dentro del título con cascada (Manrope 800), el <em> no puede quedarse en
   420: .hero-serif em le gana en especificidad a .cs-cascade y lo dejaba en
   ese peso más delgado, distinto al resto de las letras — por eso, aunque
   los caracteres se ven, el trazo no combinaba con el -webkit-text-stroke
   engordado de las demás. Este selector es más específico que los dos de
   arriba, así que gana sin importar el orden. */
.hero-serif.cs-cascade em{font-weight:800}
/* Manrope no tiene un estilo itálico de verdad en Google Fonts (solo se
   pidieron los pesos rectos) — al ponerle font-style:italic, el navegador
   la fabrica inclinando la letra recta con una transformación. Esa
   inclinación no cambia el alto del glifo, pero SÍ desplaza su tinta hacia
   un lado — y en letras redondas (S, O) ese desplazamiento saca la curva
   por el borde lateral de la cajita de overflow:hidden de cada letra (ver
   .cs-char), viéndose como si la letra estuviera incompleta. Como la fuente
   no tiene itálica real que pedirle, la solución es no fabricarla: esta
   línea se distingue por color y no por inclinación. */
.hero-serif.cs-cascade em{font-style:normal}
/* El dorado de esta línea también estaba fijo con !important de facto: una
   regla que apunta directo al <em> siempre le gana a la herencia de color
   que pone .cs-cascade.cs-hovering en el <h1>, así que nunca cambiaba al
   pasar el mouse. Esta línea ya nace dorada, así que el hover la invierte a
   blanco — sigue habiendo un cambio de color visible, como en el resto. */
.cs-cascade.cs-hovering .hero-line-em em{color:var(--texto-claro)}

.hero-text p{max-width:480px;margin:0 auto;color:var(--texto-claro-sec);font-size:14px;line-height:1.45}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:16px}
.hero-tech{margin-top:18px;width:100%}
/* Pantallas de poco alto (laptops con la ventana del navegador maximizada,
   barra de tareas, etc.): el Hero es texto largo (título + 3 frases +
   párrafo + botones + logos), así que en vez de dejar que 100vh se desborde
   y obligue a hacer scroll para ver el CTA o los logos, todo se encoge un
   punto más en cuanto la altura real disponible es corta — el ancho no
   importa aquí, es la ALTURA la que decide si cabe o no. */
@media(max-height:820px){
  .hero{padding-top:64px}
  .hero-content{padding:12px 0 16px}
  .eyebrow-center{margin-bottom:8px}
  .hero-serif{font-size:clamp(19px,2.4vw,28px);line-height:1.18;margin-bottom:8px}
  .hero-text p{font-size:12.5px;line-height:1.35}
  .hero-actions{margin-top:10px}
  .btn-pill{padding:11px 20px}
  .hero-tech{margin-top:10px}
  .hero-tech>span{margin-bottom:8px}
  .hero-tech-track .logo-badge{width:34px;height:34px;border-radius:8px}
  .hero-tech-track span{font-size:13px}
  .hero-tech-track ul{gap:36px}
  .hero-chip{display:none}
}
.hero-tech>span{display:block;text-align:center;margin-bottom:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-claro-sec);opacity:.65}
.hero-tech-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.hero-tech-track ul{display:flex;align-items:center;gap:56px;list-style:none;margin:0;padding:0;flex:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
.hero-tech-track li{display:flex;align-items:center;gap:12px;white-space:nowrap}
.hero-tech-track .logo-badge{width:46px;height:46px;flex:none;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;overflow:hidden}
.hero-tech-track .logo-badge img{max-width:78%;max-height:78%;object-fit:contain}
.hero-tech-track span{font-size:16px;font-weight:600;color:var(--texto-claro-sec)}
.btn-pill{border-radius:999px;padding:15px 26px}

/* Reveal de líneas del hero: cortina (clip-path) + fade, disparado por JS al terminar el preloader */
.hero-line{
  opacity:0;transform:translateY(22px);
  clip-path:inset(0 0 100% 0);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),clip-path .9s var(--ease-out);
  transition-delay:calc(var(--ln,0) * .12s);
}
.hero-ready .hero-line{opacity:1;transform:none;clip-path:inset(0 0 0% 0)}

.hero-chip{
  position:absolute;right:4%;bottom:32%;z-index:2;
  display:flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,16,28,.72);backdrop-filter:blur(14px);
  border-radius:999px;padding:12px 20px 12px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  font:600 13px "Inter";color:var(--texto-claro);white-space:nowrap;
  opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),border-color .3s,box-shadow .3s;
  transition-delay:1.05s;
}
.hero-chip.show{opacity:1;transform:none;animation:floatY 6s ease-in-out infinite 1.9s}
.hero-chip:hover{border-color:rgba(255,194,51,.4);box-shadow:var(--glow-dorado)}
.hero-chip-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dorado-claro);box-shadow:0 0 0 0 rgba(255,194,51,.6);animation:pulseDot 1.8s ease-in-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(255,194,51,.55)}70%{box-shadow:0 0 0 7px rgba(255,194,51,0)}100%{box-shadow:0 0 0 0 rgba(255,194,51,0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:1000px){.hero-chip{display:none}}
.scroll-cue{
  position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--texto-claro-sec);font-size:11px;letter-spacing:.08em;
  font-family:var(--mono);
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--dorado-claro),transparent);animation:scrollcue 1.8s ease-in-out infinite}
@keyframes scrollcue{0%{opacity:0;transform:scaleY(.3);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}100%{opacity:0;transform:scaleY(.3);transform-origin:bottom}}

/* Tira de tecnologías */
.techstrip{background:var(--bg-dark-2);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:26px 0;overflow:hidden}
.techstrip .container{display:flex;align-items:center;gap:40px}
.techstrip-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-claro-sec);white-space:nowrap;font-weight:700}
.techstrip-track{display:flex;gap:46px;overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.techstrip-track ul{display:flex;gap:46px;list-style:none;margin:0;padding:0;animation:marquee 26s linear infinite;flex-shrink:0}
.techstrip-track li{color:var(--texto-claro-sec);font:600 14px "Space Grotesk";white-space:nowrap;opacity:.85}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ========================================================================
   Diferenciadores (Analiza / Optimiza / Transforma)
   ======================================================================== */
.difference{padding:72px 0}

/* Contraste "así es normalmente" vs "así es con Arkex" */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:56px}
.vs-card{border-radius:16px;padding:32px;border:1px solid var(--line-light)}
.vs-bad{background:var(--gris-claro)}
.vs-good{background:#fff;border:1px solid rgba(0,76,181,.25);box-shadow:0 24px 56px rgba(0,40,122,.1)}
.vs-tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.vs-bad .vs-tag{color:var(--plata)}
.vs-good .vs-tag{color:var(--azul)}
.vs-card>p{font-size:16px;line-height:1.6;margin-bottom:20px}
.vs-bad>p{color:var(--gris-oscuro);opacity:.75}
.vs-good>p{color:var(--gris-oscuro);font-weight:600}
.vs-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vs-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--gris-oscuro);opacity:.85}
.vs-x,.vs-check{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.vs-x{background:rgba(140,148,161,.18);color:var(--plata)}
.vs-check{background:rgba(0,76,181,.12);color:var(--azul)}

/* ========================================================================
   Diferenciales — antes era un panel angosto con puertas + un carrusel de
   arrastrar (mucha altura, una interacción que había que descubrir, y un bug
   real: los párrafos nunca tuvieron un color de texto claro asignado, así
   que se leían casi invisibles sobre el video oscuro). Fondo blanco (para
   distinguirse del Hero oscuro justo encima) pero el video se conserva: en
   vez de ser el fondo de toda la sección, ahora vive en un recuadro a la
   derecha, con la información al lado y una tarjeta flotante sobre su
   esquina. Los 3 pasos siguen siendo una fila estática interactiva (clic
   para voltear) debajo.
   ======================================================================== */
.diff-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;margin-bottom:52px}
.diff-intro-copy h2{
  color:var(--gris-oscuro);text-transform:none;
  font-size:clamp(26px,3.2vw,38px);line-height:1.18;letter-spacing:-.01em;margin:14px 0 20px;
}
.diff-intro-copy p{color:var(--gris-oscuro);opacity:.8;font-size:15.5px;line-height:1.65;margin:0 0 10px}
.diff-intro-copy p:last-child{margin-bottom:0}
.diff-intro-copy p strong{opacity:1;font-weight:700;color:var(--azul-oscuro)}
.diff-intro-copy p em{color:var(--dorado);font-style:italic;opacity:1}

.diff-intro-media{position:relative}
/* Recuadro más alto (antes 4/3) para que las dos tarjetas de contraste
   quepan encima del video sin taparlo por completo; el scrim lo atenúa un
   poco para que ese texto siga siendo legible. En escritorio basta con
   crecer un poco (6/5, ~altura del texto de al lado); en mobile, apilado
   y a ancho completo, se vuelve más alto todavía (ver media queries). */
.diff-video-frame{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:6/5;box-shadow:0 30px 64px rgba(10,20,40,.16);border:1px solid rgba(0,40,122,.08)}
.diff-bg-video{width:100%;height:100%;object-fit:cover;display:block}
.diff-video-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,.4),rgba(5,10,20,.58));pointer-events:none}

.diff-video-cards{position:absolute;inset:22px;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:14px}
.diff-video-card{padding:18px 20px;border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 32px rgba(0,10,30,.3);border-color:rgba(255,255,255,.5)}
.diff-video-card.vs-bad{background:rgba(255,255,255,.82)}
.diff-video-card.vs-good{background:rgba(255,255,255,.94)}
.diff-video-card .vs-tag{font-size:10px;margin-bottom:6px}
.diff-video-card>p{font-size:13px;line-height:1.5;margin-bottom:6px}
.diff-video-card>p:last-child{margin-bottom:0}

.diff-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto;perspective:1400px}

/* Tarjetas interactivas: clic para voltear y ver más detalle (en vez de
   tarjetas estáticas). Mismo mecanismo de flip que .method-card (ver
   .mc-flip), aplicado aquí con sus propias clases para no interferir con
   Metodología. El ícono es una ilustración con degradado — mismo estilo que
   .stat-card-image del Portafolio — en vez del ícono de línea anterior. */
.diff-step-static{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font-family:inherit;perspective:1200px}
.diff-step-flip{position:relative;width:100%;min-height:236px;transform-style:preserve-3d;transition:transform .6s var(--ease-out)}
.diff-step-static.is-flipped .diff-step-flip{transform:rotateY(180deg)}
.diff-step-face{
  position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  border:1px solid var(--line-light);border-radius:16px;padding:24px 22px;
  background:#fff;box-shadow:0 16px 40px rgba(0,40,122,.06);
  display:flex;flex-direction:column;
  transition:border-color .3s,box-shadow .3s;
}
.diff-step-static:hover .diff-step-face{border-color:transparent;box-shadow:0 22px 50px rgba(0,40,122,.12)}
.diff-step-image{width:58px;height:58px;object-fit:contain;margin-bottom:14px;transition:transform .35s var(--ease-out)}
.diff-step-static:hover .diff-step-image{transform:scale(1.08) rotate(-4deg)}
.diff-num{font:600 12px var(--mono);color:var(--azul);opacity:.85;letter-spacing:.1em;margin-bottom:4px}
.diff-step-face h3{font-size:19px;color:var(--gris-oscuro);margin-bottom:6px;letter-spacing:-.01em}
.diff-step-face p{font-size:13.5px;line-height:1.55;color:var(--gris-oscuro);opacity:.75}
.diff-step-hint{margin-top:auto;padding-top:10px;font:600 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--plata)}
.diff-step-back{transform:rotateY(180deg);justify-content:center;background:linear-gradient(150deg,var(--azul),var(--azul-oscuro));border-color:transparent}
.diff-step-back .diff-num{color:var(--dorado-claro);opacity:1}
.diff-step-back h3,.diff-step-back p,.diff-step-back .diff-step-hint{color:#fff}
.diff-step-back p{opacity:.9}
.diff-step-back .diff-step-hint{opacity:.7}

@media(max-width:900px){
  .diff-steps{grid-template-columns:1fr;max-width:480px}
  .diff-step-flip{min-height:200px}
  .diff-intro{grid-template-columns:1fr;gap:32px}
  .diff-intro-media{order:-1}
  .diff-video-frame{aspect-ratio:3/4}
}
@media(max-width:680px){
  .difference{padding:72px 0}
  .diff-intro{margin-bottom:36px}
  .diff-video-frame{aspect-ratio:3/4.2}
  .diff-video-cards{inset:14px;gap:10px}
  .diff-video-card{padding:14px 16px}
  .diff-video-card .vs-tag{margin-bottom:4px}
  .diff-video-card>p{font-size:12.5px;line-height:1.45;margin-bottom:5px}
}

/* ========================================================================
   Servicios
   ======================================================================== */
.services{position:relative;height:100vh;min-height:640px;max-height:920px;overflow:hidden;background:var(--bg-dark);color:var(--texto-claro)}

.service-slides{position:relative;width:100%;height:100%}
.service-slide{position:absolute;inset:0;display:none}
.service-slide.active{display:block}

.slide-bg{position:absolute;inset:0;z-index:0}
.slide-bg img{width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform}
.slide-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,10,20,.88),rgba(5,10,20,.15) 48%,rgba(5,10,20,.6))}

.slide-label{
  position:absolute;top:64px;left:5%;z-index:3;
  color:#fff;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.85;
}
.slide-counter{
  position:absolute;right:5%;bottom:44px;z-index:3;
  color:#fff;font:600 13px var(--mono);letter-spacing:.05em;opacity:.85;
}
.slide-counter i{opacity:.5;font-style:normal;margin:0 3px}

.slide-bottom{position:absolute;left:5%;right:9%;bottom:44px;z-index:3;color:#fff}
.slide-title{
  font-family:var(--serif);font-weight:600;text-transform:none;
  font-size:clamp(56px,9vw,140px);line-height:.88;letter-spacing:-.02em;margin:0 0 30px;
}
.slide-features{display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.22);padding-top:20px;max-width:860px}
.feat{flex:1 1 180px;min-width:170px}
.feat b{display:block;font:700 12px var(--mono);color:var(--dorado-claro);letter-spacing:.1em;margin-bottom:9px}
.feat h4{font-size:18px;margin-bottom:7px;letter-spacing:-.01em}
.feat p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.68)}

.slide-arrow{
  position:absolute;top:50%;right:5%;transform:translateY(-50%);z-index:5;
  width:62px;height:62px;border-radius:50%;border:0;background:#fff;color:#0b1220;
  display:grid;place-items:center;cursor:pointer;pointer-events:none;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}

/* Zona de clic invisible que cubre toda la sección: mitad izquierda = anterior, mitad derecha = siguiente */
.service-click-zone{position:absolute;inset:0;z-index:6;cursor:pointer;background:transparent;border:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Cursor circular en 3D que sigue el mouse por toda la sección (solo con mouse real) y
   gira sobre su eje Y cuando cambia de sentido al cruzar la mitad de la sección. */
.service-cursor{
  position:absolute;top:0;left:0;z-index:7;pointer-events:none;
  opacity:0;will-change:transform;perspective:600px;
}
.sc-inner{
  width:64px;height:64px;border-radius:50%;background:#fff;color:#0b1220;
  display:grid;place-items:center;box-shadow:0 16px 40px rgba(0,0,0,.4);
  transform-style:preserve-3d;
}
.sc-inner svg{transition:none}

@media(pointer:fine){
  .services.has-cursor-nav{cursor:none}
  .services.has-cursor-nav .slide-arrow{display:none}
}
@media(pointer:coarse){
  .service-cursor{display:none}
}

@media(max-width:680px){
  /* aspect-ratio en vez de una altura fija: como todo el contenido de la
     diapositiva va con position:absolute, .services necesita algo que le
     dé alto (ninguno de sus hijos aporta uno en flujo normal). 3/4 se
     quedaba corto — el título grande + la descripción + los 4 ítems no
     cabían en esos ~500px y el título terminaba tapando la etiqueta
     "SERVICIO 0X" de arriba. */
  .services{height:auto;min-height:0;max-height:none;aspect-ratio:3/5.2}
  .slide-label{top:32px}
  .slide-title{font-size:clamp(40px,13vw,64px);margin-bottom:16px}
  .slide-features{flex-direction:column;gap:8px;padding-top:14px}
  .feat{flex:none;min-width:0}
  .feat h4{margin-bottom:0}
  .feat p{display:none}
  /* Solo la diapositiva de Transforma tiene esta frase extra debajo del
     04 (Integraciones) — Analiza y Optimiza no traen nada ahí. Se oculta
     también en celular para que las tres se vean igual de completas, sin
     quitarla del HTML (en escritorio sigue apareciendo). */
  .slide-quote{display:none}
  .slide-bottom{right:5%;bottom:40px}
  /* Antes el contador "01/03" quedaba en la misma línea de fondo que el
     último ítem de la lista (ambos con el mismo bottom:28px) y se
     encimaban. Subiéndolo junto a la etiqueta de arriba deja de chocar
     con la lista sin importar cuántos ítems tenga cada servicio. */
  .slide-counter{top:32px;bottom:auto;right:5%}
  /* La flecha decorativa (no es clicable, pointer-events:none) quedaba
     centrada verticalmente sobre toda la sección y caía justo encima de
     la lista de ítems. En este layout apilado no hay espacio limpio
     donde ponerla sin tapar texto, así que se oculta — el "tap para
     avanzar" sigue funcionando igual por toda la sección. */
  .slide-arrow{display:none}
}

/* ========================================================================
   Metodología
   ======================================================================== */
.method{position:relative;padding:32px 0 10px;overflow:hidden}
.method:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(55% 55% at 12% 8%,rgba(0,76,181,.32),transparent),
    radial-gradient(50% 50% at 92% 88%,rgba(212,154,0,.16),transparent);
}
/* Video de fondo de toda la sección: semi-transparente y con el mismo
   resplandor azul/dorado de .method:before encima, así el fondo original
   nunca desaparece, solo se le suma el video. object-fit:cover para que
   cubra la sección completa sin deformarse sin importar el alto que tenga
   con contenido real. */
.method-bg-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.method-layout{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}

/* Orden de esta columna: eyebrow arriba, tarjetas justo debajo, y el título al final.
   El párrafo de apoyo ya no vive aquí — se muestra como una tarjetita flotante junto
   a la cabeza del robot (ver .method-hint). La columna ya no necesita estirarse para
   emparejar la altura del robot: ahora el robot simplemente se recorta contra el
   borde inferior de la sección (ver .method-stage), así que esta columna queda con
   su alto natural, arriba de todo. */
.method-left{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px}
.method-head{position:relative}
.method-head h2{font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.01em}

.method-stage{position:relative;height:640px;z-index:1}
.method-spline-bg{position:absolute;inset:0;opacity:.92}

/* Diagrama técnico animado — reemplaza al robot 3D (Spline) que llegaba a
   congelar Chrome por completo (ver main.js). Es SVG + CSS puro: nada corre
   por JS en cada frame, así que no hay nada que pueda colgar el navegador.
   stroke-dashoffset y transform/opacity son animaciones baratas (solo pintan
   y componen, no recalculan layout). */
.method-diagram{position:relative;width:100%;height:100%;display:block}
.md-path{stroke-dasharray:10 8;animation:mdFlow 2.4s linear infinite}
.md-node-ring{transform-box:fill-box;transform-origin:center;animation:mdPulse 2.6s ease-in-out infinite}
.md-node-2 .md-node-ring{animation-delay:.4s}
.md-node-3 .md-node-ring{animation-delay:.8s}
.md-node-4 .md-node-ring{animation-delay:1.2s}
@keyframes mdFlow{to{stroke-dashoffset:-36}}
@keyframes mdPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.12}}
@media(prefers-reduced-motion:reduce){
  .md-path,.md-node-ring{animation:none}
  .md-signal{display:none}
}

/* Globo de diálogo clásico (cuerpo redondeado + una sola colita triangular,
   dibujados como una única forma en SVG, así la colita nunca queda suelta ni
   desconectada) con acabado tecnológico: vidrio oscuro y brillo dorado en vez
   del blanco y negro de caricatura. La colita sale del mismo trazo del globo,
   apuntando hacia la cabeza del robot. Se posiciona contra .method-layout (no
   contra .method-stage) para que en mobile, cuando el robot se oculta, el
   globo pueda volver al flujo normal en vez de desaparecer con él. */
.method-hint{position:absolute;top:2%;right:2%;z-index:2;width:250px;height:175px}
.method-hint-cloud{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.4))}
.method-hint-body{
  position:relative;z-index:1;height:74%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:20px 30px;
  color:var(--texto-claro-sec);font-size:14px;line-height:1.55;
}
.method-hint-body p{margin:0}
.method-hint{animation:hintFloat 5s ease-in-out infinite}
@keyframes hintFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.method-hint{animation:none}}
@media(max-width:1180px){.method-hint{width:210px;height:147px}.method-hint-body{font-size:13px;padding:16px 24px}}
@media(max-width:900px){
  .method-hint{position:static;width:auto;height:auto;margin-top:4px;animation:none}
  .method-hint-cloud{display:none}
  .method-hint-body{height:auto;padding:16px 18px;border-radius:16px;background:rgba(10,18,36,.55);border:1px solid rgba(255,194,51,.28)}
}

@media(max-width:900px){
  .method-layout{grid-template-columns:1fr;gap:48px}
  .method-stage{display:none}
}

/* ---------- Abanico de tarjetas + panel lateral (Metodología) ---------- */
.method-left{--mc-w:220px;--mc-h:300px}
.method-deck-wrap{position:relative;height:calc(var(--mc-h) + 56px)}
.method-deck{position:absolute;inset:0;display:block;perspective:1800px}

.method-card{
  --hover-scale:1;--hover-lift:0px;--tilt-x:0deg;--tilt-y:0deg;
  position:absolute;left:50%;bottom:0;width:var(--mc-w);height:var(--mc-h);margin-left:calc(var(--mc-w) * -0.5);
  border-radius:22px;padding:0;text-align:left;overflow:hidden;perspective:1200px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  color:#fff;cursor:pointer;font-family:inherit;background:none;
  transform-origin:50% 130%;
  transform:
    translateX(calc((var(--i) - 1.5) * var(--mc-w) * .484))
    rotate(calc((var(--i) - 1.5) * 8deg))
    rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(var(--hover-lift)) scale(var(--hover-scale));
  transition:transform .5s var(--ease-out),box-shadow .4s,opacity .4s,filter .4s;
  z-index:calc(10 + var(--i));
}
.method-card:hover{--hover-scale:1.08;--hover-lift:-16px;z-index:40}
.method-card:nth-child(1){box-shadow:0 24px 60px rgba(0,76,181,.28)}
.method-card:nth-child(2){box-shadow:0 24px 60px rgba(212,154,0,.28)}
.method-card:nth-child(3){box-shadow:0 24px 60px rgba(0,40,122,.32)}
.method-card:nth-child(4){box-shadow:0 24px 60px rgba(140,148,161,.28)}

.mc-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.method-card.active .mc-flip{transform:rotateY(180deg)}
.mc-face{position:absolute;inset:0;backface-visibility:hidden;padding:28px 24px;display:flex;flex-direction:column}
.mc-front{justify-content:center;background:linear-gradient(165deg,var(--bg-dark-3),var(--bg-dark-2))}
.mc-back{
  transform:rotateY(180deg);justify-content:center;
  background:linear-gradient(150deg,var(--azul),var(--azul-oscuro));
}
.method-card:nth-child(2) .mc-back{background:linear-gradient(150deg,var(--dorado),#8a6600)}
.method-card:nth-child(4) .mc-back{background:linear-gradient(150deg,var(--gris-oscuro),#232730)}
.mc-letter{position:absolute;left:0;right:0;top:-14px;text-align:center;font:800 calc(var(--mc-w) * .884) var(--serif);line-height:1;color:rgba(255,255,255,.08);pointer-events:none}

.mc-tag{position:relative;z-index:1;display:block;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-claro);margin-bottom:16px}
.method-card:nth-child(1) .mc-tag,.method-card:nth-child(3) .mc-tag{color:#8fb8ea}
.mc-back .mc-tag{color:rgba(255,255,255,.75)}
.method-card h4{position:relative;z-index:1;font-size:22px;font-weight:600;letter-spacing:-.01em;text-transform:uppercase}
.mc-back p{position:relative;z-index:1;font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.4;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin-top:14px}

.method-card.active{
  transform:translateX(calc((var(--i) - 1.5) * var(--mc-w) * .484)) translateY(-22px) rotate(0deg) scale(1.14);
  z-index:60;box-shadow:0 34px 90px rgba(0,20,60,.4);
}
.method-layout.panel-open .method-card:not(.active){opacity:.45;filter:saturate(.6)}

.method-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(420px,88%);z-index:70;
  background:var(--bg-dark-2);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:22px;padding:48px 38px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateX(112%);opacity:0;pointer-events:none;
  transition:transform .6s var(--ease-out),opacity .5s;
  display:flex;flex-direction:column;overflow-y:auto;
}
.method-layout.panel-open .method-panel{transform:translateX(0);opacity:1;pointer-events:auto}
.method-panel-back{
  align-self:flex-start;display:flex;align-items:center;gap:6px;flex:none;
  background:none;border:0;color:var(--texto-claro-sec);font:600 13px var(--mono);
  cursor:pointer;padding:0;margin-bottom:36px;
}
.method-panel-back:hover{color:#fff}
.method-panel-num{flex:none;font:700 13px var(--mono);color:var(--dorado-claro);letter-spacing:.1em;margin-bottom:14px}
.method-panel h3{flex:none;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:18px}
.method-panel-quote{
  flex:none;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.4;letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.method-panel-detail p{font-size:15px;line-height:1.7;color:var(--texto-claro-sec)}
.method-panel-detail p+p{margin-top:16px}

@media(max-width:900px){
  .method-left{--mc-w:clamp(160px,34vw,210px);--mc-h:clamp(220px,46vw,285px)}
}
@media(max-width:680px){
  .method-left{--mc-w:clamp(130px,32vw,170px);--mc-h:clamp(180px,44vw,235px)}
  .mc-face{padding:18px 16px}
  .method-card h4{font-size:16px}
  .method-panel{width:100%;border-radius:22px 22px 0 0;left:0;right:0;top:auto;bottom:0;height:86%;
    transform:translateY(110%);}
  .method-layout.panel-open .method-panel{transform:translateY(0)}
}

/* ========================================================================
   Portafolio
   ======================================================================== */
.portfolio{padding:72px 0;background:var(--gris-claro)}
.portfolio-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:end;margin-bottom:50px}
.portfolio-head h2{font-size:clamp(32px,3.6vw,48px);letter-spacing:-.02em;margin-top:16px}
.portfolio-head p{color:var(--plata);font-size:16px;line-height:1.7;max-width:480px}
/* Antes esta columna solo tenía una frase corta y quedaba con mucho espacio
   vacío al lado del título en pantallas anchas — ahora también trae los
   filtros por categoría, que además sirven para navegar los proyectos
   (ver portfolio-filters más abajo y el filtro en main.js). */
.portfolio-head-side{display:flex;flex-direction:column;gap:22px}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px}
/* Tarjetas de cifras que antes vivían en Tecnología/Capacidades (esa sección
   quedó oculta, ver #tecnologia más abajo) — se reutiliza el mismo contenido
   aquí para llenar el espacio junto al título. Estilo de tarjeta ver
   .stat-card más abajo (compartido con las de productos.html). */
.portfolio-stats{display:flex;flex-direction:column;gap:12px}
.pf-filter{padding:10px 18px;border-radius:999px;border:1px solid var(--line-light);background:#fff;font:600 12.5px var(--mono);letter-spacing:.03em;color:var(--gris-oscuro);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.pf-filter:hover{border-color:var(--azul);color:var(--azul)}
.pf-filter.active{background:var(--azul);border-color:var(--azul);color:#fff}

/* ========================================================================
   Stat card — tarjeta de cifra con badge + resplandor degradado, compartida
   entre el header del Portafolio y el hero de productos.html ("stat-card--
   azul/dorado/oscuro" da la variante de color). El resplandor es un blur de
   CSS, no una imagen — así no depende de fotos de stock genéricas que no
   combinan con el resto del sitio.
   ======================================================================== */
.stat-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line-light);border-radius:14px;padding:16px 20px;
  background:linear-gradient(155deg,var(--stat-tint,rgba(0,76,181,.08)),rgba(255,255,255,.5));
  box-shadow:0 12px 30px rgba(0,40,122,.06);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.stat-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 20px 46px rgba(0,40,122,.14)}
.stat-card-glow{position:absolute;right:-40px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:var(--stat-glow,var(--azul));filter:blur(28px);opacity:.28;pointer-events:none}
/* Imagen decorativa recortada en la esquina, como en la tarjeta de referencia
   (objeto flotando con sombra propia, sobresaliendo del borde) — tamaño fijo
   en píxeles (no %) para que no crezca de más en tarjetas anchas; gira y
   crece un poco al pasar el mouse. Ilustraciones en assets/images/cards/. */
.stat-card-image{position:absolute;right:-8px;bottom:-10px;width:78px;pointer-events:none;transition:transform .45s var(--ease-out);z-index:0}
.stat-card:hover .stat-card-image{transform:scale(1.08) rotate(4deg)}
.stat-card-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font:700 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--gris-oscuro);opacity:.7;width:fit-content}
.stat-card-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--stat-glow,var(--azul))}
.stat-card-body{position:relative;z-index:1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.stat-card-number{font:800 28px var(--mono);color:var(--stat-glow,var(--azul));line-height:1}
.stat-card-desc{position:relative;z-index:1;font-size:12px;color:var(--gris-oscuro);opacity:.75;max-width:130px}
.stat-card--blue{--stat-tint:rgba(0,76,181,.1);--stat-glow:var(--azul)}
.stat-card--gold{--stat-tint:rgba(212,154,0,.14);--stat-glow:var(--dorado)}
.stat-card--dark{--stat-tint:rgba(67,74,84,.12);--stat-glow:var(--gris-oscuro)}

/* Tarjetas con revelado por hover, sin nada de scroll de por medio — a
   propósito, después de que la versión con carrusel fijado (sticky +
   scroll-hijacking) resultó frágil en uso real. La imagen ocupa toda la
   tarjeta; al pasar el mouse se encoge (flexbox: .pf-media es flex:1, así
   que cede espacio solo cuando el panel de abajo crece) y aparece la
   descripción + la flecha. En pantallas sin hover real (celular/tablet)
   queda expandida de una vez, sin depender de ningún gesto. */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pf-card{
  position:relative;display:flex;flex-direction:column;height:440px;
  border-radius:22px;overflow:hidden;background:#0a1220;
  box-shadow:0 20px 50px rgba(0,20,60,.14);
}
.pf-media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.pf-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.pf-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,10,30,.75));opacity:.65;transition:opacity .4s}
.pf-card:hover .pf-media img{transform:scale(1.06)}
.pf-card:hover .pf-media:after{opacity:.9}

.pf-panel{position:relative;flex:0 0 auto;padding:18px 22px;background:rgba(6,11,22,.94);backdrop-filter:blur(10px);transition:padding-bottom .5s var(--ease-out)}
.pf-tag{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dorado-claro)}
.pf-panel h3{font-size:18px;margin:8px 0 0;letter-spacing:-.01em;color:#fff}
.pf-panel p{
  max-height:0;opacity:0;overflow:hidden;margin:0;
  font-size:13px;color:rgba(255,255,255,.72);line-height:1.55;
  transition:max-height .5s var(--ease-out),opacity .35s var(--ease-out),margin-top .5s var(--ease-out);
}
.pf-arrow{
  position:absolute;right:18px;bottom:16px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--dorado-claro);color:#211a02;font-size:15px;
  opacity:0;transform:scale(.6) rotate(-45deg);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .pf-card:hover .pf-panel{padding-bottom:54px}
  .pf-card:hover .pf-panel p{max-height:80px;opacity:1;margin-top:8px}
  .pf-card:hover .pf-arrow{opacity:1;transform:scale(1) rotate(0deg)}
}
/* En celular/tablet (sin hover real) la tarjeta se queda solo en imagen +
   título: la descripción completa (Problema/Qué hicimos/Resultado/
   Tecnología) ya vive en la página del proyecto a la que lleva esta misma
   tarjeta al tocarla, así que no hace falta repetirla aquí encima de la
   imagen. */
@media not all and (hover:hover){
  .pf-panel{padding-bottom:54px}
  .pf-arrow{opacity:1;transform:scale(1) rotate(0deg)}
}

/* ========================================================================
   Tecnología / Capacidades
   ======================================================================== */
/* Oculta la sección — pedido del cliente (2026-09-21): sus 3 cifras se
   reubicaron en el header del Portafolio (ver .portfolio-stats). El HTML de
   abajo queda intacto por si se reactiva más adelante; basta con quitar esta
   línea. */
#tecnologia{display:none}
.tech{padding:72px 0;background:var(--bg-dark);color:var(--texto-claro);overflow:hidden}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.tech-copy .eyebrow{margin-bottom:16px}
.tech-copy h2{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:18px}
.tech-copy p{color:var(--texto-claro-sec);font-size:15px;line-height:1.7;max-width:440px;margin-bottom:30px}
.tech-big-number{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px 18px}
.tech-big-number strong{font:800 clamp(64px,9vw,120px) var(--mono);color:var(--dorado-claro);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tech-big-number em{font-style:normal;color:var(--texto-claro-sec)}
.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.capabilities-3{grid-template-columns:repeat(3,1fr)}
.cap-item{border:1px solid var(--line-dark);border-radius:var(--radius);padding:18px;background:rgba(255,255,255,.03);transition:border-color .3s,transform .3s var(--ease-out)}
.cap-item:hover{border-color:rgba(255,194,51,.35);transform:translateY(-3px)}
.cap-item strong{display:block;font:700 26px var(--mono);color:var(--dorado-claro);font-variant-numeric:tabular-nums}
.cap-item span{font-size:12px;color:var(--texto-claro-sec)}
@media(max-width:680px){.capabilities-3{grid-template-columns:1fr}}
.tech-visual{position:relative;border-radius:14px;border:1px solid var(--line-dark);overflow:hidden;box-shadow:0 30px 70px rgba(0,20,60,.35)}
.tech-visual img{width:100%;display:block;transition:transform .8s var(--ease-out)}
.tech-visual:hover img{transform:scale(1.03)}

/* ========================================================================
   Herramientas
   ======================================================================== */
.tools{padding:72px 0}
.tools-head{max-width:640px;margin:0 auto 50px;text-align:center}
.tools-head h2{font-size:clamp(32px,3.6vw,48px);letter-spacing:-.02em;margin-top:16px}
.tools-head p{color:var(--plata);font-size:16px;margin-top:16px;line-height:1.7}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tools-grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.tools-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.tools-grid-5{grid-template-columns:1fr 1fr}}
.tool-card{border:1px solid var(--line-light);border-radius:var(--radius);padding:24px;text-align:left;position:relative;background:#fff;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s}
.tool-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,40,122,.1);border-color:transparent}
.tool-badge{position:absolute;top:18px;right:18px;font:600 10px var(--mono);letter-spacing:.05em;padding:5px 10px;border-radius:999px}
.tool-badge.free{background:rgba(0,76,181,.1);color:var(--azul)}
.tool-badge.pro{background:rgba(212,154,0,.14);color:var(--dorado)}
.tool-badge.soon{background:var(--gris-claro);color:var(--plata);position:relative}
.tool-badge.soon:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--dorado);display:inline-block;margin-right:5px;animation:pulseDot 1.8s ease-in-out infinite}
.tool-icon{width:42px;height:42px;border-radius:9px;background:var(--fondo-base);border:1px solid var(--line-light);display:grid;place-items:center;margin-bottom:18px;color:var(--azul);font-weight:800;transition:transform .35s var(--ease-out)}
.tool-card:hover .tool-icon{transform:scale(1.1) rotate(-6deg)}
.tool-card h4{font-size:15px;margin-bottom:8px}
.tool-card p{font-size:12.5px;color:var(--gris-oscuro);opacity:.75;line-height:1.55}
.tools-cta{margin-top:44px;text-align:center}
.tools-cta p{color:var(--plata);font-size:14px;margin-bottom:18px}
.tool-card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:700 11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--azul);transition:gap .25s,color .25s}
.tool-card-cta:hover{gap:10px;color:var(--azul-oscuro)}
/* productos.html: la sección queda pegada arriba de todo, sin nada antes que
   el header fijo — necesita más aire arriba que cuando vive a mitad de la
   página del home. */
.tools-page-top{padding-top:160px}

/* ========================================================================
   productos.html — tienda: hero de dos columnas + tarjetas de producto
   ======================================================================== */
.store-hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;margin-bottom:60px}
.store-hero-copy .eyebrow{margin-bottom:14px}
.store-hero-copy h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;text-align:left;margin:0 0 16px}
.store-hero-copy p{color:var(--plata);font-size:15.5px;line-height:1.7;text-align:left;max-width:460px;margin:0}
.store-hero-highlights{display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){.store-hero-inner{grid-template-columns:1fr}}

/* Tarjeta de producto "tienda" — estilo e-commerce: imagen/mockup del
   producto arriba (assets/images/products/), categoría flotando sobre la
   imagen, cuerpo con título/descripción/features y botón de agregar al
   carrito (ver #cartFab/#cartPanel en el HTML y el bloque de carrito en
   main.js). */
.tool-card-store{display:flex;flex-direction:column;padding:0;overflow:hidden}
.tool-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#050a14}
.tool-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.tool-card-store:hover .tool-card-media img{transform:scale(1.05)}
.tool-card-media .tool-category{position:absolute;top:12px;left:12px;color:#fff;background:rgba(5,10,20,.65);backdrop-filter:blur(6px)}
.tool-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tool-category{font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--azul);background:rgba(0,76,181,.08);padding:5px 10px;border-radius:999px;width:fit-content}
.tool-features{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.tool-features li{font-size:12.5px;color:var(--gris-oscuro);opacity:.8;padding-left:16px;position:relative}
.tool-features li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--dorado)}
.cart-add-btn{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:8px;border:1px solid var(--azul);background:transparent;color:var(--azul);font:700 12.5px var(--mono);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.cart-add-btn:hover{background:var(--azul);color:#fff}
.cart-add-btn.in-cart{background:var(--azul);color:#fff;border-color:var(--azul)}
.tool-card-store{cursor:pointer}

/* ========================================================================
   productos.html — modal de detalle de producto (clic en la tarjeta, fuera
   del botón de carrito). El <video> queda listo para cuando se agreguen los
   archivos en assets/videos/products/ — main.js cae de vuelta a la imagen
   si el video no existe todavía.
   ======================================================================== */
.product-modal{position:fixed;inset:0;z-index:300;visibility:hidden;opacity:0;transition:opacity .4s,visibility .4s;display:flex;align-items:center;justify-content:center;padding:24px}
.product-modal.open{visibility:visible;opacity:1}
.product-modal-overlay{position:absolute;inset:0;background:rgba(3,7,14,.72);backdrop-filter:blur(6px)}
.product-modal-panel{
  position:relative;z-index:1;background:#fff;border-radius:20px;max-width:760px;width:100%;max-height:88vh;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;box-shadow:0 40px 100px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.98);transition:transform .4s var(--ease-out);
}
.product-modal.open .product-modal-panel{transform:translateY(0) scale(1)}
.product-modal-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(5,10,20,.5);color:#fff;border:0;cursor:pointer;font-size:14px}
.product-modal-close:hover{background:rgba(5,10,20,.75)}
.product-modal-media{position:relative;background:#050a14;min-height:220px}
.product-modal-media img,.product-modal-media video{width:100%;height:100%;object-fit:cover;display:block}
.product-modal-body{padding:32px 28px;display:flex;flex-direction:column}
.product-modal-body h3{font-size:22px;margin:10px 0 12px;color:var(--gris-oscuro);letter-spacing:-.01em;text-transform:none}
.product-modal-body p{font-size:14px;line-height:1.65;color:var(--gris-oscuro);opacity:.8;margin-bottom:16px}
.product-modal-body .tool-features{margin-bottom:6px}
.product-modal-body .cart-add-btn{margin-top:auto}
@media(max-width:680px){
  .product-modal-panel{grid-template-columns:1fr}
  .product-modal-media{min-height:180px}
}

/* ========================================================================
   productos.html — toast de bienvenida (una vez por sesión, ver main.js)
   ======================================================================== */
.store-welcome-toast{
  position:fixed;top:100px;right:28px;z-index:160;max-width:340px;
  display:flex;gap:14px;align-items:flex-start;
  background:var(--bg-dark-2);color:#fff;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:18px 40px 18px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform:translateX(120%);opacity:0;transition:transform .5s var(--ease-out),opacity .5s;
}
.store-welcome-toast.show{transform:translateX(0);opacity:1}
.store-welcome-icon{font-size:24px;flex:none;line-height:1}
.store-welcome-toast b{display:block;font-size:14px;margin-bottom:6px}
.store-welcome-toast p{font-size:12.5px;line-height:1.5;color:var(--texto-claro-sec);margin:0}
.store-welcome-close{position:absolute;top:10px;right:10px;width:24px;height:24px;background:none;border:0;color:var(--texto-claro-sec);cursor:pointer;font-size:13px}
.store-welcome-close:hover{color:#fff}
@media(max-width:680px){.store-welcome-toast{left:16px;right:16px;max-width:none;top:90px}}

/* ========================================================================
   Carrito de productos — botón flotante + ventana central (en el celular,
   hoja que sube desde abajo).
   ======================================================================== */
.cart-fab{position:fixed;right:28px;bottom:28px;z-index:150;width:60px;height:60px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:#211a02;font-size:24px;display:grid;place-items:center;box-shadow:0 16px 40px rgba(212,154,0,.35);cursor:pointer;transition:transform .3s var(--ease-out)}
.cart-fab:hover{transform:translateY(-3px) scale(1.05)}
.cart-fab-count{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;background:var(--azul);color:#fff;font:700 11px var(--mono);display:grid;place-items:center;border:2px solid var(--fondo-base)}
.cart-fab.is-empty .cart-fab-count{display:none}
.cart-overlay{position:fixed;inset:0;z-index:210;background:rgba(3,7,14,.72);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.cart-overlay.open{opacity:1;visibility:visible}
/* Ventana central (en el celular sube desde abajo, como en las tiendas en línea). */
.cart-panel{box-sizing:border-box;position:fixed;top:50%;left:50%;z-index:220;width:min(880px,calc(100% - 48px));max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-dark-2);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:34px;
  box-shadow:0 40px 110px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translate(-50%,-46%) scale(.97);
  transition:opacity .35s,visibility .35s,transform .45s var(--ease-out)}
.cart-panel.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.cart-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--dorado-claro),var(--azul))}
.cart-panel-close{position:absolute;top:18px;right:18px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-size:15px;line-height:1;cursor:pointer;transition:background .2s}
.cart-panel-close:hover{background:rgba(255,255,255,.12)}
.cart-head{padding-right:44px;margin-bottom:24px}
.cart-eyebrow{display:inline-block;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dorado-claro);margin-bottom:8px}
.cart-panel h3{font-size:24px;text-transform:none;letter-spacing:-.01em;margin-bottom:6px}
.cart-panel-sub{color:var(--texto-claro-sec);font-size:14px;margin:0}
.cart-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.cart-col h4{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-claro-sec);margin:0 0 14px}
.cart-num{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--dorado-claro);color:#211a02;font:700 11px var(--mono)}
.cart-col-datos{padding-left:28px;border-left:1px solid rgba(255,255,255,.1)}
.cart-list{display:flex;flex-direction:column;gap:10px;min-height:60px}
.cart-empty{color:var(--texto-claro-sec);font-size:14px;text-align:center;padding:24px 0;margin:0}
.cart-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04)}
.cart-item-name{font-size:13.5px;font-weight:600}
.cart-item-remove{background:none;border:0;color:var(--texto-claro-sec);cursor:pointer;font-size:18px;line-height:1;padding:0 4px}
.cart-item-remove:hover{color:#ff8a8a}
.cart-nota{margin:14px 0 0;font-size:12.5px;color:var(--texto-claro-sec);opacity:.85}
.cart-actions{display:flex;flex-direction:column;gap:10px}
.cart-actions .is-disabled{pointer-events:none;opacity:.5}
.cart-exito{text-align:center;padding:28px 10px 10px;animation:cartExito .5s var(--ease-out)}
.cart-exito-icono{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:700;color:#062414;background:#5FD39A;box-shadow:0 0 0 10px rgba(95,211,154,.14)}
.cart-exito p{color:var(--texto-claro-sec);font-size:14.5px;max-width:440px;margin:0 auto 16px}
.cart-exito-lista{list-style:none;margin:0 auto 24px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:520px}
.cart-exito-lista li{padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.14);font-size:12.5px}
@keyframes cartExito{from{opacity:0;transform:translateY(10px)}}
@media(max-width:760px){
  .cart-panel{top:auto;bottom:0;left:0;width:100%;max-height:92dvh;border-radius:22px 22px 0 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(100%)}
  .cart-panel.open{transform:translateY(0)}
  .cart-body{grid-template-columns:minmax(0,1fr);gap:22px}
  .cart-col-datos{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
}
@media(prefers-reduced-motion:reduce){.cart-panel,.cart-overlay{transition:none}.cart-exito{animation:none}}
/* Datos de quien envía el carrito: nombre y WhatsApp obligatorios, correo opcional. */
.cart-datos{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.cart-datos label{font-size:12px;font-weight:700;color:var(--texto-claro-sec)}
.cart-datos label span{font-weight:400;opacity:.8}
.cart-datos input[type="text"],.cart-datos input[type="tel"],.cart-datos input[type="email"]{
  display:block;width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-size:14px;
  border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.05);outline:none;color:var(--texto-claro);
  transition:border-color .2s,background .2s;
}
.cart-datos input:focus{border-color:var(--dorado-claro);background:rgba(255,255,255,.08)}
.cart-datos .cart-consent{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:400;line-height:1.45}
.cart-datos .cart-consent input{margin-top:2px;flex:none}
.cart-datos .cart-consent a{color:var(--dorado-claro);text-decoration:underline;text-underline-offset:2px}
.cart-error{margin:0;padding:10px 12px;border-radius:8px;background:rgba(255,138,138,.1);border:1px solid rgba(255,138,138,.35);color:#ffb3b3;font-size:13px}
/* Campo trampa contra robots: invisible para las personas. */
.hp-campo{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:680px){.cart-fab{right:18px;bottom:18px;width:54px;height:54px;font-size:21px}}

/* Teaser de Herramientas en el home: solo chips + botón hacia productos.html */
/* Antes esta fila era un montón de chips con emoji — ahora cada herramienta
   trae una miniatura real (el mismo mockup que se usa en la tienda), así se
   ve qué es cada una antes de entrar a productos.html. */
.tools-preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:8px}
.tool-preview-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line-light);background:#fff;box-shadow:0 10px 26px rgba(0,40,122,.06);transition:transform .3s var(--ease-out),box-shadow .3s}
.tool-preview-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,40,122,.1)}
.tool-preview-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.tool-preview-card span{padding:10px 8px;font-size:11.5px;font-weight:600;color:var(--gris-oscuro);text-align:center;line-height:1.3}
@media(max-width:900px){.tools-preview-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tools-preview-grid{grid-template-columns:repeat(2,1fr)}}

/* ========================================================================
   Página de caso de portafolio (proyectos/*.html)
   ======================================================================== */
.project-hero{position:relative;padding:190px 0 64px;overflow:hidden;color:var(--texto-claro)}
.project-hero-media{position:absolute;inset:0}
.project-hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.55)}
.project-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,14,.35) 0%,rgba(3,7,14,.55) 55%,rgba(3,7,14,.92) 100%)}
.project-hero-content{position:relative;z-index:2;max-width:720px}
.project-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-claro-sec);transition:color .2s,gap .2s}
.project-back:hover{color:var(--dorado-claro);gap:12px}
/* Misma idea que .project-back (link "← Volver a...") pero para fondos
   claros como el de la tienda, donde el color claro de arriba no se vería. */
.project-back--light{color:var(--gris-oscuro);opacity:.75}
.project-back--light:hover{color:var(--azul);opacity:1}
.project-hero-content .pf-tag{font-size:11px}
.project-hero-content h1{color:var(--texto-claro);text-transform:none;font-size:clamp(30px,4.2vw,52px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 0}

.project-body{padding:64px 0}
.project-body-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:60px;align-items:start}
.project-block{margin-bottom:36px}
.project-block:last-child{margin-bottom:0}
.project-block h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--azul);margin-bottom:12px}
.project-block p{font-size:16px;line-height:1.75;color:var(--gris-oscuro);opacity:.88;max-width:620px}
.project-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}
.project-side-card{border:1px solid var(--line-light);border-radius:var(--radius);padding:26px;background:#fff;box-shadow:0 20px 50px rgba(0,40,122,.08)}
.project-side-card b{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--plata);margin-bottom:14px}
.project-tech-tags{display:flex;flex-wrap:wrap;gap:8px}
.project-tech-tag{font:600 12px var(--mono);padding:7px 12px;border-radius:999px;background:var(--gris-claro);color:var(--gris-oscuro)}
.project-tech-pending{font:600 12.5px "Inter",sans-serif;font-style:italic;color:var(--plata);line-height:1.5;margin:0;padding:10px 12px;border:1px dashed var(--line-light);border-radius:10px}

/* Espacio reservado para la demo de cada proyecto: por ahora un adelanto
   visual (flujo, tabla con datos ficticios o mockup) — pensado para que más
   adelante sea trivial reemplazarlo por el video o la herramienta real
   (iframe, dashboard embebido, etc.) sin tocar el resto de la página. */
.project-demo-placeholder{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.project-demo-placeholder img{width:100%;max-width:220px;border-radius:12px;opacity:.92}
.project-demo-placeholder p{font-size:13px;line-height:1.55;color:var(--gris-oscuro);opacity:.75;margin:0}

.project-demo-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 12px "Inter",sans-serif;color:var(--gris-oscuro)}
.project-demo-flow span:not(.project-demo-arrow){background:var(--gris-claro);padding:7px 12px;border-radius:8px}
.project-demo-arrow{color:var(--dorado);font-weight:700}

.project-demo-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.project-demo-table th{text-align:left;font-weight:600;color:var(--plata);padding:8px 0;border-bottom:1px solid var(--line-light);width:42%}
.project-demo-table td{text-align:right;font-weight:600;color:var(--gris-oscuro);padding:8px 0;border-bottom:1px solid var(--line-light);font-family:var(--mono)}
.project-demo-table tr:last-child th,.project-demo-table tr:last-child td{border-bottom:0}

.project-demo-note{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--plata);font-style:italic}

.project-nav{padding:50px 0;background:var(--gris-claro)}
.project-nav-grid{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.project-nav-link{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--azul);display:inline-flex;align-items:center;gap:8px;transition:gap .25s}
.project-nav-link:hover{gap:12px}
.project-nav-link.is-center{color:var(--gris-oscuro)}

@media(max-width:900px){
  .project-body-grid{grid-template-columns:1fr}
  .project-side{position:static}
}
@media(max-width:680px){
  .project-hero{padding:170px 0 70px}
  .project-nav-grid{justify-content:center;text-align:center}
}

/* ========================================================================
   Sobre Arkex
   ======================================================================== */
.about{padding:72px 0;background:var(--gris-claro)}
.about-head{text-align:center;max-width:640px;margin:0 auto 64px}
.about-head h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;margin-top:14px;color:var(--gris-oscuro)}

/* Historia / Misión / Visión: bloques imagen+texto alternados, inspirados en
   la página "Conócenos" de Belltech (belltech.la/conocenos) — texto que
   entra deslizándose desde un lado, imagen desde el otro, y una foto real
   dentro de un marco orgánico (blob) en vez de un rectángulo, con un
   segundo blob de acento en degradado dorado/azul asomando detrás. */
.story-block{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:76px}
.story-block:last-of-type{margin-bottom:56px}
.story-label{display:block;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dorado);margin-bottom:14px}
.story-text p{font-size:16px;line-height:1.75;color:var(--gris-oscuro);opacity:.85;max-width:560px}
.story-text p + p{margin-top:16px}
.story-text .about-pull-quote{margin-top:22px;margin-bottom:0}

/* Duración lenta a propósito (1.3s) — el reveal se repite cada vez que se
   baja hasta el bloque (ver storyObserver en main.js), así que además de
   lento tiene que quedar suave y no golpeado. .no-anim fuerza un salto
   instantáneo sin transición: se usa al subir (no debe animarse) y al
   resetear el estado oculto cuando el bloque sale de pantalla. Las reglas
   ".show" van DESPUÉS de las de ".story-reverse" a propósito: tienen la
   misma especificidad (dos clases), así que si quedaran antes, el bloque
   invertido nunca llegaría a transform:none. */
.story-text{opacity:0;transform:translateX(-36px);transition:opacity 1.3s var(--ease-out),transform 1.3s var(--ease-out)}
.story-media-wrap{opacity:0;transform:translateX(36px);transition:opacity 1.3s var(--ease-out) .15s,transform 1.3s var(--ease-out) .15s}
.story-reverse .story-media-wrap{transform:translateX(-36px)}
.story-reverse .story-text{transform:translateX(36px)}
.story-text.show,.story-media-wrap.show{opacity:1;transform:none}
.story-text.no-anim,.story-media-wrap.no-anim{transition:none}

.story-media{position:relative;aspect-ratio:4/3.4}
/* La foto del fundador es vertical (retrato) mientras que el resto de fotos
   de esta sección son horizontales; con el aspect-ratio genérico de arriba
   (pensado para horizontales) el cover recortaba la cabeza. Este modificador
   deja el marco más alto solo para ella, así entra la persona completa —
   cabeza y manos cruzadas — recortando apenas un poco de los lados. */
.story-media--portrait{aspect-ratio:3/4}
.story-media:before{
  content:"";position:absolute;inset:-8%;z-index:0;
  background:linear-gradient(135deg,var(--dorado-claro),var(--azul));opacity:.22;
  border-radius:42% 58% 61% 39%/45% 42% 58% 55%;
}
.story-media:after{
  content:"";position:absolute;width:34%;height:34%;right:-6%;bottom:-8%;z-index:0;
  background:var(--dorado-claro);opacity:.5;
  border-radius:63% 37% 30% 70%/60% 40% 60% 40%;
}
.story-media img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  border-radius:42% 58% 61% 39%/45% 42% 58% 55%;
  box-shadow:0 30px 64px rgba(10,20,40,.16);
}
.story-caption{margin-top:16px;text-align:center}
.caption-block{position:relative;display:inline-block;padding:16px 42px}
.story-caption b{display:block;font:700 19px var(--serif);color:var(--gris-oscuro)}
.caption-role{display:block;margin-top:4px;font-size:13px;color:var(--gris-oscuro);opacity:.8}
.caption-arrow{position:absolute;font-size:30px;font-weight:800;color:var(--dorado);line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.ca-tl{top:-4px;left:-6px;animation:caDiagTL 1.3s ease-in-out infinite}
.ca-tr{top:-4px;right:-6px;animation:caDiagTR 1.3s ease-in-out infinite}
.ca-bl{bottom:-4px;left:-6px;animation:caDiagBL 1.3s ease-in-out infinite}
.ca-br{bottom:-4px;right:-6px;animation:caDiagBR 1.3s ease-in-out infinite}
@keyframes caDiagTL{0%,100%{transform:translate(-5px,-5px);opacity:.55}50%{transform:translate(4px,4px);opacity:1}}
@keyframes caDiagTR{0%,100%{transform:translate(5px,-5px);opacity:.55}50%{transform:translate(-4px,4px);opacity:1}}
@keyframes caDiagBL{0%,100%{transform:translate(-5px,5px);opacity:.55}50%{transform:translate(4px,-4px);opacity:1}}
@keyframes caDiagBR{0%,100%{transform:translate(5px,5px);opacity:.55}50%{transform:translate(-4px,-4px);opacity:1}}

.about-pull-quote{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(24px,3vw,34px);line-height:1.3;letter-spacing:-.01em;
  color:var(--gris-oscuro);margin:16px 0 22px;max-width:600px;
}
.about-pull-quote cite{display:block;margin-top:16px;font-style:normal;font-family:"Inter";font-size:13px;font-weight:600;color:var(--azul);letter-spacing:0}
/* Antes era una tabla con líneas duras entre celdas — desentonaba con lo
   suave/orgánico del resto de la sección. Ahora son tarjetas independientes
   con la misma sombra suave que los marcos de foto y un filo degradado
   dorado→azul arriba, para que se sientan parte del mismo sistema visual. */
.about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.about-pillar{position:relative;overflow:hidden;background:#fff;border-radius:var(--radius);padding:24px 22px;box-shadow:0 20px 48px rgba(10,20,40,.08)}
.about-pillar:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--dorado-claro),var(--azul))}
.about-pillar b{display:block;color:var(--azul);font:700 13px "Space Grotesk";letter-spacing:-.01em;margin-bottom:8px}
.about-pillar span{font-size:13px;line-height:1.5;color:var(--gris-oscuro);opacity:.75}

/* ========================================================================
   Resultados / Testimonio
   ======================================================================== */
.results{padding:72px 0;background:var(--bg-dark);color:var(--texto-claro)}
.results-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.results-copy .eyebrow{margin-bottom:16px}
.results-copy h2{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:18px}
.results-copy p{color:var(--texto-claro-sec);font-size:15px;line-height:1.7;max-width:480px}
.results-support{color:var(--texto-claro-sec);font-size:17px;line-height:1.6;max-width:420px}
.testimonial{border:1px solid var(--line-dark);border-radius:14px;padding:30px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);box-shadow:0 30px 70px rgba(0,0,0,.4);transition:border-color .4s,box-shadow .4s,transform .4s;animation:floatY 7s ease-in-out infinite}
.testimonial:hover{border-color:rgba(255,194,51,.3);box-shadow:var(--glow-dorado)}
.testimonial .stars{color:var(--dorado-claro);letter-spacing:3px;margin-bottom:16px;font-size:14px}
.testimonial p{font-size:16px;line-height:1.6;color:var(--texto-claro)}
.testimonial-who{display:flex;align-items:center;gap:12px;margin-top:20px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--dorado));display:grid;place-items:center;font:700 13px "Space Grotesk";color:#fff}
.testimonial-who b{display:block;font-size:13px}
.testimonial-who span{font-size:12px;color:var(--texto-claro-sec)}
.testimonial-flag{display:inline-block;margin-top:18px;font-size:11px;color:var(--dorado-claro);border:1px dashed rgba(255,194,51,.4);padding:6px 10px;border-radius:6px}

/* Antes era UNA tarjeta grande; ahora son varias más chicas "flotando" (el
   mismo floatY de arriba) dentro del mismo ancho/alto que ocupaba esa única
   tarjeta — con animation-delay distinto cada una para que no boten todas
   sincronizadas. */
/* Grid fijo de 2 columnas (no flex-wrap): a cualquier ancho, incluso muy
   angosto en mobile, siempre caben 2 por fila — con flex-wrap las tarjetas
   podían terminar apilándose de a una y la sección se volvía mucho más alta
   de lo que tenía antes con una sola tarjeta grande. */
.testimonial-cluster{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.testimonial-mini{padding:10px 12px;animation-duration:6.5s}
.testimonial-mini:nth-child(5){grid-column:1/-1;max-width:200px;margin:0 auto}
.testimonial-mini:nth-child(1){animation-delay:0s}
.testimonial-mini:nth-child(2){animation-delay:1.1s}
.testimonial-mini:nth-child(3){animation-delay:2.2s}
.testimonial-mini:nth-child(4){animation-delay:3.3s}
.testimonial-mini:nth-child(5){animation-delay:4.4s}
.testimonial-mini p{font-size:11px;line-height:1.4;color:var(--texto-claro);opacity:.92}
.testimonial-mini .testimonial-who{margin-top:8px;gap:6px}
.testimonial-mini .testimonial-avatar{width:22px;height:22px;font-size:9px}
.testimonial-mini .testimonial-who b{font-size:10px}
.testimonial-mini .testimonial-who span{font-size:9px}
.testimonial-cluster .testimonial-flag{grid-column:1/-1;text-align:center;margin:4px auto 0;font-size:10px}
/* .r-child normalmente anima su propio transform (translateY) al aparecer,
   pero estas tarjetas YA tienen su transform ocupado por floatY (el bobbing
   infinito) — dejarlas competir hace que la entrada nunca se vea. Se
   neutraliza el transform de r-child aquí (más específico que la regla
   genérica) y la entrada queda solo con fundido de opacidad. */
.testimonial-mini.r-child{transform:none}

/* ========================================================================
   CTA final
   ======================================================================== */
/* Antes era un bloque centrado tipo "hero" (mucho padding, un único bloque
   de texto arriba del botón) — igual de alto que una sección completa.
   Ahora es una franja horizontal (texto a la izquierda, botón a la
   derecha), con proporciones de ancho/alto parecidas a las de Resultados. */
.cta{position:relative;padding:64px 0;overflow:hidden}
.cta-media{position:absolute;inset:-8% 0}
.cta-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1);will-change:transform}
.cta-media:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(0,40,122,.95) 0%,rgba(0,76,181,.72) 45%,rgba(212,154,0,.55) 100%)}
.cta-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta-text{max-width:620px}
.cta-content .eyebrow{color:var(--dorado-claro);margin-bottom:12px}
.cta-content h2{font-size:clamp(24px,2.8vw,36px);color:#fff;letter-spacing:-.02em;line-height:1.12;margin-bottom:10px}
.cta-content p{color:#dfe6f2;font-size:14.5px;line-height:1.6}
.cta-btn{flex:none}

/* ========================================================================
   FAQ — filas horizontales en loop infinito (izquierda/derecha), pensadas
   para caber en una sola pantalla: min-height:100vh + centrado vertical, sin
   necesidad de scroll interno. Cada fila es una máscara con fade en los
   bordes (mismo recurso que .hero-tech-track) sobre un track que main.js
   mueve con rAF y pausa fuera de pantalla (ver "FAQ: filas horizontales" en
   main.js) — no es una animación CSS que corra para siempre sin control.
   ======================================================================== */
.faq{min-height:100vh;display:flex;align-items:center;padding:28px 0}
.faq-head{max-width:640px;margin:0 auto 16px;text-align:center}
.faq-head h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em;margin-top:10px}
.faq-rows{display:flex;flex-direction:column;gap:10px;width:100%}
.faq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.faq-track{display:flex;width:max-content;will-change:transform}
.faq-track-group{display:flex;gap:20px;flex:none;padding:4px 2px}
.faq-card{flex:none;width:320px;border:1px solid var(--line-light);border-radius:16px;background:#fff;box-shadow:0 16px 40px rgba(0,40,122,.06);padding:20px 24px}
.faq-card h4{font-size:17px;letter-spacing:-.01em;font-weight:700;margin-bottom:8px;color:var(--gris-oscuro)}
.faq-card p{font-size:14px;line-height:1.5;color:var(--gris-oscuro);opacity:.75}
@media(max-height:820px){
  .faq{padding:16px 0}
  .faq-head{margin-bottom:10px}
  .faq-head h2{font-size:clamp(20px,2.8vw,28px);margin-top:6px}
  .faq-rows{gap:8px}
  .faq-card{width:280px;padding:14px 18px}
  .faq-card h4{font-size:14px;margin-bottom:5px}
  .faq-card p{font-size:12px;line-height:1.4}
}
@media(max-width:680px){.faq-card{width:230px}}
@media(prefers-reduced-motion:reduce){
  .faq-track-group[aria-hidden="true"]{display:none}
  .faq-track{transform:none!important}
}

/* ========================================================================
   Contacto
   ======================================================================== */
.contact{padding:72px 0;background:var(--bg-dark);color:var(--texto-claro);position:relative;overflow:hidden}
.contact:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 20% 20%,rgba(0,76,181,.35),transparent),radial-gradient(50% 50% at 90% 90%,rgba(212,154,0,.18),transparent)}
/* Textura de puntos sutil (look "tech") detrás de todo, atenuada con una
   máscara para que no compita con el texto en los bordes de la sección. */
.contact:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.contact-grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}
.contact-copy h2{font-size:clamp(32px,3.8vw,50px);letter-spacing:-.02em;margin:16px 0 18px;color:var(--texto-claro)}
.contact-copy p{color:var(--texto-claro-sec);font-size:15px;line-height:1.7;max-width:420px}
.contact-intro{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--texto-claro);max-width:440px;margin:16px 0 0;font-weight:500}

.contact-channels{display:flex;flex-direction:column;gap:10px;margin-top:28px;max-width:420px}
.contact-channel{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s,transform .2s}
a.contact-channel:hover{border-color:var(--dorado-claro);background:rgba(255,255,255,.07);transform:translateX(4px)}
.contact-channel-icon{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,194,51,.12);color:var(--dorado-claro)}
.contact-channel-text{display:flex;flex-direction:column;gap:2px}
.contact-channel-text b{font-size:13px;color:var(--texto-claro);font-weight:600}
.contact-channel-text span{font-size:12.5px;color:var(--texto-claro-sec)}
.contact-form{position:relative;overflow:hidden;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.contact-form:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--dorado-claro),var(--azul))}
.contact-form label{font-size:12px;font-weight:700;color:var(--texto-claro-sec)}
.contact-form label.wide{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{
  display:block;width:100%;margin-top:8px;padding:12px 14px;
  border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.05);outline:none;color:var(--texto-claro);
  transition:border-color .2s,background .2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--dorado-claro);background:rgba(255,255,255,.08)}
/* El <select> hereda el texto claro de arriba para cuando está cerrado (se ve
   bien sobre el fondo oscuro del formulario), pero la lista desplegada la
   pinta el sistema operativo con SU PROPIO fondo (casi siempre blanco) sin
   heredar el fondo oscuro del select — texto claro sobre ese blanco quedaba
   invisible hasta pasar el mouse. Las <option> se fijan aparte, oscuras
   sobre blanco, independientemente del tema del <select> que las contiene. */
.contact-form select option{color:var(--gris-oscuro);background:#fff}
.contact-form textarea{min-height:100px;resize:vertical}
/* El checkbox de consentimiento no puede heredar la regla de arriba (la
   convertiría en una caja gigante de 100% de ancho) — aparte, el texto que
   acompaña a un checkbox no es una etiqueta de campo en mayúscula pequeña
   como las demás, así que también se le baja el peso. */
.contact-form input[type="checkbox"]{display:inline-block;width:auto;margin:0 8px 0 0;padding:0;vertical-align:middle}
.contact-form label.contact-consent{display:flex;align-items:center;font-size:13px;font-weight:400;color:var(--texto-claro-sec)}
.contact-form label.contact-consent a{color:var(--dorado-claro);text-decoration:underline;text-underline-offset:2px}
.contact-form small{grid-column:1/-1;color:var(--texto-claro-sec);opacity:.7;font-size:11.5px}
.form-ok{display:none;grid-column:1/-1;background:rgba(212,154,0,.12);border:1px solid rgba(212,154,0,.3);color:var(--dorado-claro);padding:12px 14px;border-radius:8px;font-size:13px}

/* ========================================================================
   Página legal (Política de tratamiento de datos) — texto largo de una sola
   columna, reutiliza los tokens de color/tipografía del resto del sitio en
   vez de definir una paleta aparte.
   ======================================================================== */
.legal-hero{padding:168px 0 46px;background:var(--gris-claro)}
.legal-hero .container{max-width:760px}
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plata);transition:color .2s,gap .2s}
.legal-back:hover{color:var(--azul);gap:12px}
.legal-hero h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;line-height:1.15;color:var(--gris-oscuro);margin-bottom:12px}
.legal-hero p{color:var(--plata);font-size:13px}
.legal-body{padding:64px 0 100px}
.legal-body .container{max-width:760px}
.legal-body h2{font-size:21px;letter-spacing:-.01em;color:var(--gris-oscuro);margin:46px 0 16px;padding-top:20px;border-top:1px solid var(--line-light)}
.legal-body section:first-of-type h2{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-size:15px;font-weight:700;color:var(--azul);margin:22px 0 8px}
.legal-body p{font-size:15px;line-height:1.75;color:var(--gris-oscuro);opacity:.88;margin-bottom:14px}
.legal-body ul,.legal-body ol{margin:0 0 14px;padding-left:22px}
.legal-body li{font-size:15px;line-height:1.7;color:var(--gris-oscuro);opacity:.88;margin-bottom:8px}
.legal-body strong{color:var(--azul-oscuro);font-weight:700;opacity:1}
.legal-body a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:var(--azul-oscuro)}
.legal-meta{color:var(--plata);font-size:13px;margin-bottom:36px}
.legal-table{width:100%;border-collapse:collapse;margin:10px 0 22px;font-size:13.5px}
.legal-table th,.legal-table td{text-align:left;padding:10px 12px;border:1px solid var(--line-light);vertical-align:top}
.legal-table th{background:var(--gris-claro);color:var(--gris-oscuro);font-weight:700}
.legal-table td{color:var(--gris-oscuro);opacity:.88}
.legal-callout{background:#fff;border:1px solid var(--line-light);border-left:3px solid var(--dorado);border-radius:0 10px 10px 0;padding:16px 20px;margin:18px 0;font-size:14px;line-height:1.7;color:var(--gris-oscuro)}
@media(max-width:680px){
  .legal-hero{padding:140px 0 36px}
  .legal-table{font-size:12.5px}
  .legal-table th,.legal-table td{padding:8px}
}

/* ========================================================================
   Footer
   ======================================================================== */
/* Fondo un tono más claro que el negro-azulado de Contacto (--bg-dark) para
   que se note dónde termina una sección y empieza la otra, aunque las dos
   sean oscuras. */
footer{background:var(--bg-dark-2);color:var(--texto-claro-sec);padding:26px 0 14px}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.2fr;gap:28px}
.footer-brand img{height:100px;margin-bottom:2px}
.footer-brand p{font-size:12.5px;line-height:1.5;max-width:260px;opacity:.85}
.footer-tagline{font-weight:700;color:var(--texto-claro);opacity:1;font-size:13.5px;margin-bottom:6px}
.footer-col b{display:block;color:var(--texto-claro);font-size:13px;margin-bottom:10px}
.footer-col a,.footer-col span{display:block;font-size:13px;margin-bottom:7px;opacity:.85}
/* Todo el sitio desactiva la selección de texto por defecto (ver user-select
   en la base, pensado para que arrastrar no seleccione texto sin querer);
   este correo es la excepción a propósito — hay que poder marcarlo y
   copiarlo con el cursor, como cualquier texto normal. */
.footer-email-copy{user-select:text;-webkit-user-select:text;cursor:text}
.footer-col a:hover{color:var(--dorado-claro)}
.footer-nav-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.footer-social{display:flex;gap:10px;margin-top:12px}
.footer-social a{width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center;color:var(--texto-claro-sec);transition:border-color .2s,color .2s,transform .2s}
.footer-social a:hover{transform:translateY(-2px)}
.footer-social a[aria-label="WhatsApp"]:hover{border-color:#25D366;color:#25D366}
.footer-social a[aria-label="Instagram"]:hover{border-color:#E1306C;color:#E1306C}
.footer-social a[aria-label="YouTube"]:hover{border-color:#FF0000;color:#FF0000}
.footer-subscribe{display:flex;margin-top:10px;gap:8px}
.footer-subscribe input{flex:1;padding:12px;border:1px solid var(--line-dark);background:transparent;color:#fff;border-radius:7px;outline:none}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-dark);font-size:11.5px}
.footer-bottom a:hover{color:var(--dorado-claro)}

/* ========================================================================
   Media rotator — tarjetas de imagen que rotan solas (sin JS)
   ======================================================================== */
.media-rotator{position:relative;border-radius:16px;overflow:hidden;height:340px;border:1px solid var(--line-light);box-shadow:0 24px 60px rgba(0,40,122,.12);margin-top:44px}
.media-rotator img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:rotatorFade 16s ease-in-out infinite}
.media-rotator img:nth-child(1){animation-delay:0s}
.media-rotator img:nth-child(2){animation-delay:4s}
.media-rotator img:nth-child(3){animation-delay:8s}
.media-rotator img:nth-child(4){animation-delay:12s}
.media-rotator:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,10,30,.55),transparent 40%)}
.media-rotator-tag{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
@keyframes rotatorFade{0%{opacity:0}4%{opacity:1}21%{opacity:1}25%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.media-rotator img{animation:none;opacity:0}.media-rotator img:first-child{opacity:1}}

/* ========================================================================
   Reveal on scroll — sin filter:blur(): un blur en transición obliga al
   navegador a repintar (no es "gratis" como opacity/transform), y cuando dos
   secciones vecinas revelan texto casi al mismo tiempo (scroll rápido,
   viewport a medio camino entre ambas) esos repintados se acumulan y se
   siente como un tranco. Con solo opacidad + desplazamiento el navegador
   puede resolverlo todo por composición, sin importar cuántos elementos
   entren a la vez.
   ======================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s);will-change:opacity,transform}
.reveal.show{opacity:1;transform:none}
.reveal-stagger.show .r-child{opacity:1;transform:none}
.r-child{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0s);will-change:opacity,transform}
/* El reveal ahora se repite (ver makeRepeatableReveal en main.js): .no-anim
   fuerza un salto instantáneo sin transición, tanto para el contenedor como
   para los hijos que son los que en realidad tienen la propiedad animada. */
.reveal.no-anim{transition:none}
.reveal-stagger.no-anim .r-child{transition:none}
.spring-title.no-anim .sp-char-inner{transition:none}

/* ========================================================================
   Título del Hero — cascada por letra al pasar el mouse (Manrope)
   Cada letra es dos copias superpuestas: la real y una "sombra" idéntica
   (text-shadow, no un nodo de más) puesta 1em más abajo y tapada por
   overflow:hidden. Al hacer hover, las dos suben 1em: la real sale por
   arriba y la sombra ocupa su lugar — un efecto de "rodillo" sin duplicar
   el DOM. El --i de cada letra (puesto por JS, ver wrapChars en main.js)
   escalona el transition-delay para que la ola se vea letra por letra.
   ======================================================================== */
/* font-weight:800 es el máximo de Manrope — el -webkit-text-stroke de abajo
   engorda un poco más el trazo encima de eso, para que se vea todavía más
   "gordita" sin depender de un peso que la fuente no tiene. La caja de cada
   letra es 1.28em (no 1em): con tildes en mayúscula (Á, É, Í, Ó, Ú) el
   acento sube más alto que una letra normal, y a 1em quedaba cortado por el
   overflow:hidden — 1.28em le da margen de sobra sin que se note el hueco.
   line-height:1.28 (igual a la caja) es la parte que faltaba antes: si el
   line-height del párrafo se queda en 1.15 mientras las letras miden 1.28em,
   el navegador agranda la línea igual (para que quepan) pero deja ese
   sobrante como espacio extra ABAJO de cada línea — eso era el hueco enorme
   entre "...ahora mismo." y "Y probablemente...". Con line-height:1.28 la
   línea ya mide lo que las letras necesitan, sin sobrante. */
.cs-cascade{font-family:var(--display-alt);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:1.28;-webkit-text-stroke:.6px currentColor}
.cs-char{display:inline-block;height:1.28em;overflow:hidden;vertical-align:top}
.cs-char-inner{
  display:inline-block;font-style:inherit;text-shadow:0 1.28em currentColor;
  transition:transform .28s ease-in-out;transition-delay:calc(var(--i,0) * 22ms);
}
.cs-cascade.cs-hovering{color:var(--dorado)}
.cs-cascade.cs-hovering .cs-char-inner{transform:translateY(-1.28em)}

/* ========================================================================
   Títulos de sección con Archivo Black — aparecen letra por letra con un
   pequeño rebote (Archivo Black solo en un puñado de títulos, intercalado
   con la tipografía normal del resto del sitio, no en todos). Reutiliza el
   mismo IntersectionObserver del reveal-on-scroll (ver main.js): se le suma
   ".spring-title" a los targets que observa, así aparece una sola vez, sin
   el parpadeo que tuvo el reveal normal antes de arreglarse.
   ======================================================================== */
.spring-title{font-family:var(--display-black)}
.spring-title .sp-char{display:inline-block;overflow:hidden;vertical-align:top}
.spring-title .sp-char-inner{
  display:inline-block;
  opacity:0;transform:translateY(.5em) scale(.7);
  transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1),color .3s ease;
  transition-delay:calc(var(--i,0) * 35ms);
}
.spring-title.show .sp-char-inner{opacity:1;transform:none}
.spring-title.sp-hovering .sp-char-inner{color:var(--dorado)}

@media(prefers-reduced-motion:reduce){
  /* Con reduced-motion, main.js ni siquiera envuelve las letras (ver el guard
     de prefersReducedMotion), así que esto es solo por si algo queda a medio
     envolver — el título y los títulos de sección se ven como texto normal. */
  .cs-char-inner{transition:none}
  .cs-cascade.cs-hovering .cs-char-inner{transform:none}
  .spring-title .sp-char-inner{transition:none;opacity:1;transform:none}
}

/* Contadores animados */
[data-count]{font-variant-numeric:tabular-nums}

/* ========================================================================
   Responsive
   ======================================================================== */
@media(max-width:1080px){
  .nav-links{display:none}
  #menuBtn{display:flex}
  .diff-grid,.service-panel.active,.portfolio-grid,.tools-grid{grid-template-columns:repeat(2,1fr)}
  .tech-grid,.results-grid,.contact-grid{grid-template-columns:1fr}
  .diff-intro,.portfolio-head{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .story-block{grid-template-columns:1fr;gap:28px}
  .story-media-wrap{order:-1}
  .cta-content{flex-direction:column;align-items:flex-start}
}
@media(min-width:1081px){
  #menuBtn{display:none}
}
@media(max-width:680px){
  .hero-chip{display:none}
  .scroll-cue{display:none}
  .hero-content{padding:120px 0 40px}
  .diff-grid,.portfolio-grid,.tools-grid,.vs-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .services-head,.diff-intro{align-items:start}
  h1{letter-spacing:-.02em}
  .story-block{margin-bottom:56px}
  .story-media{margin:0 5%}
  /* El logo del header mide 170px de alto por diseño (se sale del header a
     propósito en pantallas grandes, ver .brand{overflow:visible}), pero en
     un celular ese mismo alto lo hace también muchísimo más ancho — empuja
     el botón "Solicita tu diagnóstico", el carrito y el menú fuera de la
     pantalla, obligando a moverse hacia la derecha para verlos. */
  /* flex-shrink:0 en el link, no solo en la imagen: sin esto, .brand (un
     ítem flex dentro de .nav) se deja apretar por el botón/carrito/menú de
     al lado hasta casi 0px de ancho, y como la imagen tiene max-width:100%
     (regla global) termina igual de aplastada aunque su height:40px diga
     otra cosa. */
  .brand{flex:none}
  .brand img{height:40px;width:auto}
  /* Logo + botón "Solicita tu diagnóstico" + carrito + menú no caben los
     cuatro con su tamaño de escritorio en 375px de ancho — el botón se
     salía de la pantalla junto con el carrito y el menú. Se achica solo el
     botón (mismo texto, mismo color) y se cierran un poco los espacios. */
  .nav{gap:10px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:9px 14px;font-size:11.5px}

  .about-pillars{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.r-child,.hero-chip,.scroll-cue .line{transition:none;animation:none;opacity:1;transform:none;filter:none}
  .split-reveal .word span{transition:none;animation:none;opacity:1;transform:none;filter:none}
  .grain,.cursor-glow,.hero-hud-live i,.tool-badge.soon:before,.eyebrow i:after{animation:none}
  .hero-media img,.cta-media img{transform:none!important}
  .pf-card,.tool-card,.cap-item,.about-pillar,.contact-form label,
  .tech-visual,.testimonial,.cta-content,
  .slide-label,.slide-title,.feat,.slide-counter,
  .story-text,.story-media-wrap{
    opacity:1!important;transform:none!important;
  }
  .media-strips{display:none}
}

/* ========================================================================
   Animaciones 3D (Motion) — entrada de bloques al hacer scroll.
   El estado oculto (opacity:0) vive aquí para que nunca haya parpadeo;
   js/main.js solo se encarga de animar hacia el estado visible.
   ======================================================================== */
.portfolio-grid,.tools-grid,.capabilities,.about-pillars,
.contact-form,.tech-grid,.results-grid,.cta,.slide-features{perspective:1400px}
.pf-card,.tool-card,.cap-item,.about-pillar,.contact-form label,
.tech-visual,.testimonial,.cta-content,
.slide-label,.slide-title,.feat,.slide-counter{
  opacity:0;
}

/* Servicios: barra de progreso flotante encima del slider a pantalla completa */
.service-progress{position:absolute;top:28px;left:5%;right:9%;z-index:6;height:1px;background:rgba(255,255,255,.25)}
.service-progress span{display:block;height:100%;width:100%;background:#fff;transform:scaleX(.3333);transform-origin:left;transition:transform .5s var(--ease-out)}

/* Servicios: tiras verticales que cubren y revelan la imagen al cambiar de pestaña */
.media-strips{position:absolute;inset:0;z-index:4;display:flex;pointer-events:none}
.media-strips .strip{flex:1;background:var(--bg-dark);transform:scaleY(1);transform-origin:top}
.media-strips .strip:nth-child(even){transform-origin:bottom}
.service-media img{transform-origin:center;will-change:transform}