/* =========================================================
   EBQ Software SpA — sistema de diseño "señal azul"
   Usado por: index.php, quienes-somos.html, contacto.html,
              publiadmin.html, sdm.html, 404.html

   DIRECCIÓN
   Fondo azul profundo con luz. No es un gris oscuro con un
   acento encima: el azul ES la superficie. La profundidad sale
   de focos radiales saturados, hilos de 1px y grano, no de
   sombras negras. Una sola atmósfera de arriba abajo.

   COLOR
   Un solo tono en todo el sitio, el azul del logotipo llevado a
   tres claridades (profundo / señal / brillo). El blanco es el
   color de acción: los botones principales van en blanco, nunca
   en azul, para que el azul quede libre y signifique "dato".

   TIPOGRAFÍA
   Onest .......... titulares y texto. En display se usa en peso
                    medio con tracking muy cerrado y interlínea
                    por debajo de 1: presencia sin gritar.
   JetBrains Mono . cifras, etiquetas y datos técnicos.

   ESQUINAS
   contenedores ... 24px    superficies .... 16px
   controles ...... 999px (píldora)   teselas ... 10px
   ========================================================= */

:root{
  /* --- Azules. Una sola familia, del casi-negro al brillo. --- */
  --b-950:#04070F;           /* fondo del documento              */
  --b-900:#070C18;           /* bandas alternas                  */
  --b-850:#0A1122;           /* superficie                       */
  --b-800:#0E182D;           /* superficie elevada               */
  --b-750:#132039;           /* hover de superficie              */
  --b-700:#1B2C4C;

  --deep:#0B3F7E;            /* azul profundo, para degradados   */
  --signal:#2E86E8;          /* azul señal: enlaces, datos       */
  --bright:#63B3FF;          /* brillo: realces puntuales        */
  --signal-rgb:46,134,232;
  --bright-rgb:99,179,255;

  --signal-soft:rgba(46,134,232,.12);
  --signal-line:rgba(99,179,255,.28);

  /* --- Hilos: un solo blanco a tres opacidades. --- */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --line-3:rgba(255,255,255,.22);

  /* --- Texto --- */
  --text:#EEF2F7;
  --text-2:#9DABBF;
  --text-3:#66748A;

  /* --- Acción --- */
  --bone:#FFFFFF;

  /* --- Alias heredados: las páginas internas y el PHP nombran
         estas variables. Apuntan al sistema nuevo. --- */
  --brand:var(--signal);
  --brand-dark:var(--deep);
  --brand-light:var(--bright);
  --brand-tint:var(--signal-soft);
  --accent:var(--signal);
  --accent-hi:var(--bright);
  --accent-deep:var(--deep);
  --accent-soft:var(--signal-soft);
  --accent-line:var(--signal-line);
  --accent-rgb:var(--signal-rgb);
  --accent-bg:var(--signal-soft);
  --accent-hover:var(--bright);
  --bg:var(--b-950);
  --surface:var(--b-850);
  --surface-alt:var(--b-800);
  --text-soft:var(--text-2);
  --line-strong:var(--line-2);
  --ink:var(--b-950);
  --ink-2:var(--b-850);
  --ink-text:var(--text);
  --ink-soft:var(--text-2);
  --ink-line:var(--line-2);
  --corp-ink:var(--b-950);
  --panel-bg:var(--b-850);
  --panel-text:var(--text);
  --panel-soft:var(--text-2);
  --panel-line:var(--line);
  --panel-key:var(--signal);
  --btn-bg:var(--bone);
  --btn-bg-hover:#FFFFFF;
  --btn-text:#04070F;
  --btn-dark-bg:var(--bone);
  --btn-dark-text:#04070F;

  /* --- Error --- */
  --danger:#FF7A66;
  --danger-bg:rgba(255,122,102,.10);
  --danger-line:rgba(255,122,102,.34);
  --danger-text:#FFA294;

  /* --- Sombras teñidas de azul, jamás negro plano. --- */
  --shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -26px rgba(2,10,30,.95);
  --shadow-lift:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -32px rgba(3,16,48,1);
  --glow-sm:0 0 40px -12px rgba(var(--signal-rgb),.55);
  --glow-lg:0 0 120px -30px rgba(var(--signal-rgb),.75);

  /* --- Esquinas --- */
  --r-xl:24px;
  --r-surface:16px;
  --r-control:999px;
  --r-tile:10px;

  /* --- Estructura --- */
  --nav-h:76px;
  --wrap:1280px;
  --gutter:28px;

  /* --- Curvas --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --animate-duration:.9s;

  --grid:rgba(255,255,255,.05);
  --fx-punto:99,179,255;

  color-scheme:dark;
}

/* =========================  BASE  ========================= */
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
  background:var(--b-950);
}
body{
  font-family:'Onest','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  color:var(--text);
  background:var(--b-950);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Grano. Fijo, sin eventos, por encima de todo. Es lo que impide
   que los degradados se vean como plástico. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

h1,h2,h3,h4{
  font-family:'Onest',sans-serif;
  font-weight:500;line-height:1.02;letter-spacing:-.04em;
  text-wrap:balance;
}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:rgba(var(--signal-rgb),.35);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:640px){:root{--gutter:20px}}

/* Píldora de etiqueta: mono diminuto sobre vidrio. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);margin-bottom:24px;
  padding:8px 15px 8px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.eyebrow::before{
  content:"";width:5px;height:5px;flex:none;border-radius:50%;
  background:var(--bright);box-shadow:0 0 10px 1px rgba(var(--bright-rgb),.9);
  animation:latir 2.6s ease-in-out infinite;
}
@keyframes latir{50%{opacity:.35}}

/* --- Accesibilidad --- */
:focus-visible{outline:2px solid var(--bright);outline-offset:3px;border-radius:8px}
.field :focus-visible{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bone);color:#04070F;padding:14px 24px;
  border-radius:0 0 var(--r-tile) 0;font-weight:600;font-size:14px;
}
.skip:focus{left:0}

/* =====================  ANIMACIONES DE ENTRADA  =====================
   Los nombres de clase se conservan para no tocar el JavaScript que
   las aplica; las curvas y recorridos son nuevos. */
.js .reveal{opacity:0}
.animate__animated{
  animation-duration:var(--animate-duration);
  animation-fill-mode:both;
  animation-timing-function:var(--ease);
}
@keyframes fadeIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes fadeInUp{
  from{opacity:0;transform:translate3d(0,30px,0);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes fadeInLeft{
  from{opacity:0;transform:translate3d(-34px,0,0);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes fadeInRight{
  from{opacity:0;transform:translate3d(34px,0,0);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.animate__fadeIn{animation-name:fadeIn}
.animate__fadeInUp{animation-name:fadeInUp}
.animate__fadeInLeft{animation-name:fadeInLeft}
.animate__fadeInRight{animation-name:fadeInRight}

/* Titular por líneas: cada línea sube desde detrás de su máscara.
   Lo monta el JavaScript; sin JS el titular se ve entero. */
.linea-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.linea-mask>span{display:block;transform:translateY(108%);opacity:0}
.js .titular.listo .linea-mask>span{
  animation:subeLinea 1s var(--ease) forwards;animation-delay:var(--d,0ms);
}
@keyframes subeLinea{to{transform:none;opacity:1}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1}
  .linea-mask>span{transform:none!important;opacity:1!important}
  .marquee-track{animation:none!important}
}

/* =========================  NAV  =========================
   body>nav y no nav a secas: las migas de pan también son un <nav>. */
body>nav{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s,backdrop-filter .35s;
}
body>nav.fijo{
  background:rgba(4,7,15,.68);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
@supports not (backdrop-filter:blur(1px)){body>nav.fijo{background:rgba(4,7,15,.97)}}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.logo{display:flex;align-items:center;gap:11px}
.logo-ico{width:34px;height:34px;color:var(--bright);flex:none;transition:transform .6s var(--spring);filter:drop-shadow(0 0 10px rgba(var(--bright-rgb),.45))}
.logo:hover .logo-ico{transform:rotate(90deg)}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-txt b{font-weight:700;font-size:19px;color:var(--text);letter-spacing:-.03em}
.logo-txt small{
  font-family:'JetBrains Mono',monospace;font-weight:400;font-size:8.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);margin-top:4px;
}

.nav-links{display:flex;align-items:center;gap:2px;font-size:14.5px;font-weight:500;color:var(--text-2)}
.nav-links a{
  position:relative;padding:9px 15px;border-radius:999px;
  transition:color .22s,background-color .22s;white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:var(--bright);
  box-shadow:0 0 8px 1px rgba(var(--bright-rgb),.9);
}

.nav-acciones{display:flex;align-items:center;gap:10px}
.nav-cta{
  background:var(--bone);color:#04070F;
  padding:11px 22px;border-radius:999px;font-size:14.5px;font-weight:600;white-space:nowrap;
  transition:transform .25s var(--spring),box-shadow .3s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(var(--bright-rgb),.75)}
.nav-cta:active{transform:translateY(0) scale(.97)}
.nav-cta-m{display:none}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);
  border-radius:999px;background:rgba(255,255,255,.04);cursor:pointer;
  padding:0;place-items:center;gap:5px;flex-direction:column;transition:border-color .2s;
}
.nav-toggle:hover{border-color:var(--line-3)}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:980px){
  .nav-toggle{display:flex;justify-content:center}
  .nav-cta{display:none}
  body>nav{background:rgba(4,7,15,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--line)}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    /* Opaco del todo: el panel se abre sobre el titular del hero y
       cualquier transparencia deja el texto asomando por detrás. */
    background:#070C18;
    border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 24px;box-shadow:var(--shadow-lift);
    display:none;font-size:16px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:16px 4px;border-bottom:1px solid var(--line);color:var(--text);border-radius:0}
  .nav-links a.active::after{display:none}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a.nav-cta-m{
    display:block;background:var(--bone);color:#04070F;text-align:center;
    border-radius:999px;padding:16px;margin-top:18px;font-weight:600;border-bottom:none;
  }
}

/* =========================  HERO  =========================
   Banda a sangre con dos focos azules saturados. El de la izquierda
   es el foco principal (nace detrás del titular), el de la derecha
   ilumina la estructura isométrica. */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(64px,8vw,120px) 0 clamp(48px,5vw,72px);
  background:
    radial-gradient(980px 700px at 6% 46%,   rgba(56,150,255,.55), transparent 62%),
    radial-gradient(820px 660px at 84% 22%,  rgba(30,104,208,.52), transparent 60%),
    radial-gradient(1500px 820px at 50% -12%, rgba(24,92,190,.45), transparent 66%),
    linear-gradient(180deg,#08182F 0%, #061225 48%, var(--b-950) 100%);
}
/* Retícula romboidal de marca, con gradientes: cero peticiones. */
.hero::after,.phead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(62deg,  var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-62deg, var(--grid) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 40% 10%, #000 0%, transparent 76%);
  mask-image:radial-gradient(ellipse 85% 80% at 40% 10%, #000 0%, transparent 76%);
}
.fx-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(#000 55%, transparent);
  mask-image:linear-gradient(#000 55%, transparent);
}
.hero>.wrap,.phead>.wrap{position:relative;z-index:2}

.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(32px,4vw,56px);align-items:center}
.hero-inner{max-width:740px}

/* El titular es la pieza central: grande, peso medio, interlínea
   por debajo de 1 y tracking muy cerrado. */
.hero h1{
  font-size:clamp(42px,6.4vw,86px);font-weight:500;
  letter-spacing:-.048em;line-height:.98;margin-bottom:28px;
}
/* El destacado del titular. Se declara para el <em> original y para
   .destacado, que es la clase que el JavaScript deja en las palabras
   al reagruparlas por línea (ahí ya no hay <em> que las envuelva). */
.hero h1 em,.hero h1 .destacado{
  font-style:normal;
  background:linear-gradient(100deg,var(--bright),#A5D2FF 60%,var(--signal));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--bright);
}
.hero p.lead{
  font-size:clamp(16.5px,1.3vw,19px);color:var(--text-2);
  max-width:50ch;margin-bottom:40px;line-height:1.6;
}

/* Fila de píldoras técnicas sobre el titular. */
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.hero-pills .p{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  transition:border-color .25s,color .25s,background-color .25s;
}
.hero-pills .p:hover{border-color:var(--signal-line);color:var(--text);background:var(--signal-soft)}

.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Botón principal: píldora blanca con disco de flecha. */
.btn-primary{
  position:relative;overflow:hidden;
  background:var(--bone);color:#04070F;font-weight:600;font-size:15px;
  padding:8px 8px 8px 26px;border-radius:999px;
  display:inline-flex;align-items:center;gap:16px;white-space:nowrap;
  transition:transform .28s var(--spring),box-shadow .35s;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.7) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .8s var(--ease);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(var(--bright-rgb),.8)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-primary svg{
  width:34px;height:34px;flex:none;padding:9px;border-radius:50%;
  background:#04070F;color:var(--bone);stroke-width:2.2;
  transition:transform .35s var(--ease);
}
.btn-primary:hover svg{transform:rotate(-45deg)}

.btn-ghost{
  color:var(--text);font-weight:600;font-size:15px;padding:15px 26px;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;
  transition:border-color .28s,background-color .28s,transform .28s var(--spring),color .22s;
}
.btn-ghost:hover{border-color:var(--signal-line);background:var(--signal-soft);color:#fff;transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.98)}

/* --- Estructura isométrica ---
   El rombo del logotipo extruido en un volumen de alambre. Es la
   pieza de marca del hero: se dibuja sola al cargar y flota despacio.
   Si existe img/hero.(webp|png|jpg), esa captura la sustituye. */
.hero-visual{position:relative;display:grid;place-items:center;min-height:clamp(320px,38vw,520px)}
.hero-shot{
  width:100%;display:block;border-radius:var(--r-xl);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lift);
}
.iso{width:100%;max-width:560px;overflow:visible;animation:flotar 9s ease-in-out infinite}
@keyframes flotar{
  0%,100%{transform:translateY(-10px)}
  50%{transform:translateY(10px)}
}
.iso .halo{filter:blur(38px);opacity:.55}
.iso .trazo{
  fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  animation:dibujar 2.2s var(--ease) forwards;animation-delay:var(--d,0ms);
}
.iso .trazo.fino{stroke:rgba(255,255,255,.16);stroke-width:1}
.iso .trazo.viva{stroke:var(--bright);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(var(--bright-rgb),.9))}
@keyframes dibujar{to{stroke-dashoffset:0}}
.iso .cara{opacity:0;animation:aparecerCara 1.2s var(--ease) forwards;animation-delay:1.1s}
@keyframes aparecerCara{to{opacity:1}}
.iso .nodo{
  fill:var(--bright);
  filter:drop-shadow(0 0 7px rgba(var(--bright-rgb),1));
  opacity:0;animation:aparecerNodo .5s var(--ease) forwards;animation-delay:var(--d,1.4s);
}
@keyframes aparecerNodo{to{opacity:1}}
.iso .pulso{transform-origin:center;animation:pulsar 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes pulsar{0%,100%{opacity:.25}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .iso{animation:none}
  .iso .trazo{stroke-dashoffset:0}
  .iso .cara,.iso .nodo{opacity:1}
}

@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-inner{max-width:none}
  .hero-visual{min-height:300px;max-width:460px}
}
@media(max-width:640px){
  .hero-visual{display:none}
  .hero p.lead{font-size:16px;margin-bottom:32px}
}

/* =====================  FRANJA DE CONFIANZA  =====================
   Cinta continua dentro del hero: prueba inmediata, en movimiento. */
/* Sin rótulo y más apretada que una sección: es un compás entre el hero
   y las cifras, no un bloque con entidad propia. Quien manda sobre los
   clientes es el muro del final. */
.trust{position:relative;padding:26px 0 30px;overflow:hidden;background:transparent}
.hero + .trust{margin-top:-8px}
.trust::before{
  content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 25%,var(--line-2) 75%,transparent);
}
.marquee{position:relative;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)}
.marquee-track{display:flex;width:max-content;animation:desfilar 50s linear infinite}
.trust:hover .marquee-track{animation-play-state:paused}
@keyframes desfilar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-logos{list-style:none;display:flex;align-items:center;gap:0}
/* La celda es alta para lo que se ve dentro: los logos vienen en un
   lienzo comun (ver herramientas/procesar-logos.py), asi que traen su
   propio margen y con 32px de alto quedaban recortados a la mitad. */
.trust-logos li{flex:none;width:154px;height:58px;display:grid;place-items:center;padding:0 12px}
.trust-logos img{
  max-height:100%;max-width:100%;object-fit:contain;
  opacity:.3;filter:grayscale(1);transition:opacity .35s,filter .35s;
}
.trust-logos li:hover img{opacity:1;filter:grayscale(0)}
.trust-logos .ini{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:14px;color:var(--text-3);letter-spacing:.1em}

/* =========================  CIFRAS  ========================= */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{padding:42px 32px;border-left:1px solid var(--line);position:relative;transition:background-color .4s}
.stat:first-child{border-left:none;padding-left:0}
.stat:hover{background:rgba(255,255,255,.018)}
.stat .n{
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:clamp(40px,4.8vw,60px);color:var(--text);
  line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;
}
.stat .n .suf{
  color:var(--bright);font-size:.5em;letter-spacing:0;margin-left:1px;
}
.stat .l{font-size:13.5px;color:var(--text-2);margin-top:16px;line-height:1.45;max-width:20ch}
@media(max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:30px 22px}
  .stat:nth-child(odd){border-left:none;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* =====================  SECCIONES  ===================== */
.section{padding:clamp(76px,8.5vw,132px) 0;position:relative}
.section.tight{padding-top:0}
.section.alt{background:var(--b-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Foco azul de sección: da dirección de luz sin inventar un fondo nuevo.
   Cada sección elige de qué lado entra la luz con --lx, así el ojo no
   recorre la página siempre por el mismo eje. */
.section.luz::before{
  content:"";position:absolute;inset:-10% 0;pointer-events:none;
  background:radial-gradient(1000px 640px at var(--lx,15%) 32%, rgba(var(--signal-rgb),.20), transparent 64%);
}
.section.luz>.wrap{position:relative;z-index:1}

/* Cabecera: título a la izquierda, bajada a la derecha. Sin eje central. */
.sec-head{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;
  margin:0 0 clamp(44px,5vw,72px);
}
/* El tope de ancho va sobre el <h2> y no sobre su contenedor: la
   unidad ch se mide contra la fuente del propio elemento, y en el
   contenedor (16px) 14ch son apenas 110px, no una línea de titular. */
.sec-head h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.045em;line-height:1;max-width:15ch}
.sec-head p{color:var(--text-2);font-size:16.5px;max-width:46ch;padding-bottom:8px}
@media(max-width:860px){
  .sec-head{grid-template-columns:1fr;gap:20px;align-items:start}
}

/* Cabecera de páginas internas */
.phead{
  padding:clamp(62px,7vw,110px) 0 clamp(52px,6vw,80px);position:relative;overflow:hidden;
  background:
    radial-gradient(900px 600px at 10% 42%, rgba(56,150,255,.48), transparent 62%),
    radial-gradient(780px 540px at 88% 6%,  rgba(30,104,208,.48), transparent 60%),
    linear-gradient(180deg,#08182F 0%, var(--b-950) 100%);
}
.phead h1{font-size:clamp(38px,5.6vw,72px);margin-bottom:22px;letter-spacing:-.048em;line-height:.99}
.phead h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--bright),#A5D2FF 60%,var(--signal));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--bright);
}
.phead p{color:var(--text-2);font-size:18px;max-width:56ch}
.phead .btns{margin-top:32px}
.crumbs{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);padding:0 0 28px;position:relative;z-index:2;
}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--bright)}
.crumbs span{opacity:.4;margin:0 9px}

/* =====================  ACERCA / PANEL  ===================== */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:40px}}
.about h2{font-size:clamp(30px,3.9vw,48px);margin-bottom:26px;letter-spacing:-.045em}
.about p{color:var(--text-2);font-size:16.5px;margin-bottom:18px;max-width:58ch}
.about p:last-child{margin-bottom:0}

/* Vidrio: borde interior de 1px + desenfoque + brillo superior.
   Es la superficie base de todo el sitio. */
.panel,.form-card,.owner{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 45%),var(--b-850);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lift);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.panel::before,.form-card::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--bright-rgb),.85),transparent);
}
.panel{padding:10px 32px}
.panel .row{
  display:grid;grid-template-columns:106px 1fr;gap:22px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.panel .row:last-child{border-bottom:none}
.panel .row .k{
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--bright);padding-top:6px;
}
.panel .row .v{font-size:15px;color:var(--text-2);line-height:1.6}
@media(max-width:520px){.panel{padding:8px 22px}.panel .row{grid-template-columns:1fr;gap:8px}}

/* =====================  SOLUCIONES  =====================
   Bento asimétrico: el insignia ocupa la columna alta, los otros dos
   se apilan. Foco que sigue al cursor en cada tarjeta. */
.sols{display:grid;grid-template-columns:1.2fr 1fr;grid-auto-rows:1fr;gap:14px}
.sol{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 45%),var(--b-850);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),border-color .4s;
}
.sol::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(var(--signal-rgb),.18), transparent 62%);
  transition:opacity .45s;
}
.sol:hover{transform:translateY(-5px);border-color:var(--signal-line)}
.sol:hover::before{opacity:1}

.sol .idx{
  position:absolute;top:28px;right:30px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  color:var(--text-3);transition:color .3s;
}
.sol:hover .idx{color:var(--bright)}

.sol:first-child{
  grid-row:span 2;padding:44px;
  background:
    radial-gradient(600px 380px at 100% 100%, rgba(46,134,232,.20), transparent 66%),
    linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%),var(--b-800);
  border-color:var(--line-2);
}
.sol:first-child::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(62deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-62deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 100% 100%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 85% 75% at 100% 100%, #000 0%, transparent 72%);
}

.sol .ic{
  width:46px;height:46px;border-radius:var(--r-tile);display:grid;place-items:center;
  margin-bottom:28px;background:var(--signal-soft);border:1px solid var(--signal-line);
  transition:background-color .35s,transform .5s var(--spring),box-shadow .35s;
}
.sol:hover .ic{transform:translateY(-3px) rotate(-8deg);box-shadow:var(--glow-sm)}
.sol .ic svg{width:21px;height:21px;stroke:var(--bright)}

.sol .tag{font-size:22px;font-weight:600;margin-bottom:8px;letter-spacing:-.035em}
.sol:first-child .tag{font-size:clamp(30px,3.2vw,40px)}
.sol .role{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--bright);margin-bottom:20px;
}
.sol p{color:var(--text-2);font-size:15px;margin-bottom:26px;max-width:50ch}
.sol:first-child p{font-size:16.5px;margin-bottom:30px}

.sol-mods{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-bottom:32px}
.sol-mods li{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text-2);
  padding:11px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
}
.sol-mods li::before{content:"";width:4px;height:4px;flex:none;background:var(--bright);transform:rotate(45deg);box-shadow:0 0 6px rgba(var(--bright-rgb),.8)}
@media(max-width:520px){.sol-mods{grid-template-columns:1fr}}

.sol .link{
  font-weight:600;font-size:14.5px;color:var(--text);
  display:inline-flex;align-items:center;gap:10px;margin-top:auto;
  transition:color .25s,gap .3s var(--ease);
}
.sol .link:hover{color:var(--bright)}
.sol .link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.sol:hover .link{gap:14px}
.sol:hover .link svg{transform:translateX(3px)}

@media(max-width:900px){
  .sols{grid-template-columns:1fr}
  .sol:first-child{grid-row:auto;padding:34px}
}

/* =====================  PROCESO  ===================== */
.proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.paso{position:relative;padding:0 28px 0 0}
.paso .top{display:flex;align-items:center;gap:14px;padding-bottom:24px;margin-bottom:26px;position:relative}
.paso .top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.paso .top::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--bright);
  box-shadow:0 0 8px rgba(var(--bright-rgb),.8);transition:width .6s var(--ease);
}
.paso:hover .top::before{width:100%}
.paso .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;color:var(--bright);flex:none}
.paso .diamante{
  width:9px;height:9px;flex:none;transform:rotate(45deg);
  border:1px solid var(--signal-line);background:var(--signal-soft);
  transition:background-color .4s,transform .55s var(--spring),box-shadow .4s;
}
.paso:hover .diamante{background:var(--bright);transform:rotate(135deg);box-shadow:0 0 12px rgba(var(--bright-rgb),.9)}
.paso h3{font-size:18px;margin-bottom:12px;letter-spacing:-.032em}
.paso p{color:var(--text-2);font-size:14.5px;max-width:30ch;line-height:1.6}
@media(max-width:980px){.proceso{grid-template-columns:1fr 1fr;gap:38px 0}}
@media(max-width:560px){.proceso{grid-template-columns:1fr;gap:32px 0}.paso{padding-right:0}}

/* =====================  TARJETAS (valores / features)  ===================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}
.vcard{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 45%),var(--b-850);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:32px;transition:transform .45s var(--ease),border-color .4s;
}
.vcard::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(var(--signal-rgb),.16), transparent 62%);
  transition:opacity .45s;
}
.vcard:hover{transform:translateY(-5px);border-color:var(--signal-line)}
.vcard:hover::before{opacity:1}
.vcard .ic{
  width:44px;height:44px;border-radius:var(--r-tile);display:grid;place-items:center;
  background:var(--signal-soft);border:1px solid var(--signal-line);margin-bottom:24px;
  transition:transform .5s var(--spring),box-shadow .35s;
}
.vcard:hover .ic{transform:rotate(-8deg);box-shadow:var(--glow-sm)}
.vcard .ic svg{width:20px;height:20px;stroke:var(--bright)}
.vcard h3{font-size:19px;margin-bottom:11px;letter-spacing:-.032em}
.vcard p{color:var(--text-2);font-size:15px}

/* =====================  PROPIETARIO  ===================== */
.owner{padding:48px;display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:center}
@media(max-width:780px){.owner{grid-template-columns:1fr;gap:30px;text-align:center;padding:32px}}
.owner .photo{
  width:190px;height:190px;border-radius:var(--r-surface);background:var(--b-800);
  border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden;margin:0 auto;
}
.owner .photo svg{width:76px;height:76px;stroke:var(--text-3)}
.owner .photo img{width:100%;height:100%;object-fit:cover}
.owner .role{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bright);margin-bottom:12px}
.owner h3{font-size:30px;margin-bottom:16px;letter-spacing:-.04em}
.owner p{color:var(--text-2);font-size:15.5px;margin-bottom:14px}
.owner .sig{font-weight:600;color:var(--text);font-size:16px}

/* =====================  LÍNEA DE TIEMPO  ===================== */
.timeline{max-width:780px;position:relative;padding-left:44px}
.timeline::before{
  content:"";position:absolute;left:10px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--bright),var(--line) 72%);
}
.tl{position:relative;margin-bottom:40px}
.tl:last-child{margin-bottom:0}
.tl::before{
  content:"";position:absolute;left:-44px;top:5px;width:21px;height:21px;
  transform:rotate(45deg);background:var(--b-950);border:1px solid var(--bright);
  transition:background-color .35s,box-shadow .35s;
}
.tl:hover::before{background:var(--bright);box-shadow:0 0 16px rgba(var(--bright-rgb),.8)}
.tl .yr{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--bright);font-size:11.5px;margin-bottom:8px;letter-spacing:.16em;text-transform:uppercase}
.tl h3{font-size:20px;margin-bottom:8px;letter-spacing:-.032em}
.tl p{color:var(--text-2);font-size:15px;max-width:56ch}

/* =====================  TECNOLOGÍAS  ===================== */
.tech{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,68px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(44px,5vw,64px);
}
@media(max-width:860px){.tech{grid-template-columns:1fr;gap:32px}}
.tech h2,.tech h3{font-size:clamp(28px,3.6vw,44px);margin-bottom:18px;letter-spacing:-.045em}
.tech p{color:var(--text-2);font-size:16px;max-width:40ch}

.stack{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
@media(max-width:560px){.stack{grid-template-columns:1fr}}
.stack .it{
  display:flex;align-items:baseline;gap:16px;
  padding:16px 6px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text);
  transition:color .25s,padding-left .35s var(--ease),border-color .3s;
}
.stack .it span{font-size:10px;color:var(--text-3);letter-spacing:.12em;transition:color .25s}
.stack .it:hover{color:var(--bright);padding-left:12px;border-color:var(--signal-line)}
.stack .it:hover span{color:var(--bright)}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 18px;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:12.5px;
  color:var(--text-2);transition:border-color .25s,color .25s,background-color .25s,transform .28s var(--spring);
}
.chip:hover{border-color:var(--signal-line);color:var(--bright);background:var(--signal-soft);transform:translateY(-2px)}

/* =====================  CLIENTES — muro de logos  =====================
   Sustituye a la rueda giratoria. Aquella mostraba UN cliente cada vez y
   escondía los otros veintitrés detrás de puntos grises; además se
   ocultaba entera en móvil y la reemplazaba una parrilla distinta.

   Aquí están todos a la vez, apagados en gris sobre la retícula de hilos
   que usa el resto del sitio, y una linterna sigue al cursor
   encendiéndolos a su paso. Es el mismo mecanismo de foco (--mx/--my)
   que las tarjetas de soluciones, y es el MISMO componente en escritorio
   y en móvil: solo cambia el número de columnas. */
/* Cada linea de negocio es su propio muro, con rotulo encima. Se
   separan porque no son la misma venta: corto plazo y leasing operativo
   tienen ciclos y contratos distintos, y juntos el muro no se leia. */
.muro-grupo + .muro-grupo{margin-top:clamp(30px,4vw,52px)}
.muro-titulo{
  display:flex;align-items:center;gap:14px;
  margin:0 0 16px;font-weight:500;
}
.muro-titulo span{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;background:rgba(5,9,18,.5);white-space:nowrap;
}
/* El hilo que sale del rotulo hasta el borde ata el titulo a su muro. */
.muro-titulo::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}

.muro{position:relative;isolation:isolate}

/* Luz detrás del muro. Va por debajo de las celdas, que son casi opacas:
   el resplandor se filtra por ellas y tiñe de azul la zona que el cursor
   está recorriendo, en vez de pintarse encima de los logotipos. */
.muro::before{
  content:"";position:absolute;inset:-80px;z-index:0;pointer-events:none;
  background:radial-gradient(circle 380px at var(--mx,50%) var(--my,50%), rgba(var(--signal-rgb),1), transparent 68%);
  filter:blur(50px);
  opacity:0;transition:opacity .6s var(--ease);
}
.muro.encendido::before{opacity:1}

.muro-grid{
  list-style:none;position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
}
.muro-grid li{
  background:rgba(5,9,18,.72);
  min-height:clamp(88px,9.5vw,126px);
  display:grid;place-items:center;
  padding:clamp(16px,2vw,28px);
}
.muro-grid img{max-width:100%;max-height:100%;object-fit:contain}
.muro-grid .ini{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;
  letter-spacing:.12em;color:var(--text-3);
}

/* Capa apagada. Es la que lleva el texto alternativo. A .27 los
   logotipos se leían bien pero el salto al entrar en el haz apenas se
   notaba; a .2 sigue habiendo pared visible y el contraste con la capa
   encendida ya es evidente. */
.muro-base img{filter:grayscale(1);opacity:.2;transition:opacity .4s}

/* Capa encendida: los mismos logotipos a plena luz, recortados por una
   máscara radial anclada al cursor. Fuera del haz no se ve nada de esta
   capa y queda la de abajo. */
.muro-luz{
  position:absolute;inset:0;pointer-events:none;
  background:transparent;border-color:transparent;
  -webkit-mask-image:radial-gradient(circle 340px at var(--mx,-999px) var(--my,-999px), #000 0%, #000 34%, rgba(0,0,0,.5) 62%, transparent 84%);
  mask-image:radial-gradient(circle 340px at var(--mx,-999px) var(--my,-999px), #000 0%, #000 34%, rgba(0,0,0,.5) 62%, transparent 84%);
}
/* Dentro del haz la celda también se tiñe: sin esto solo se aclaran los
   logotipos y no se lee como una luz recorriendo un muro. */
.muro-luz li{background:rgba(var(--signal-rgb),.15)}
.muro-luz img{opacity:1;filter:drop-shadow(0 0 20px rgba(var(--bright-rgb),.65))}
.muro-luz .ini{color:var(--bright)}

/* Sin JavaScript no hay linterna: los logotipos se muestran legibles y
   el muro sigue cumpliendo su función de prueba social. */
html:not(.js) .muro-base img{filter:none;opacity:.65}
html:not(.js) .muro-luz{display:none}

/* Puntero grueso o sin hover (táctil): la linterna la mueve el JavaScript
   con una deriva lenta, así que la máscara se ensancha para que se lea
   como una luz ambiente y no como un cursor invisible. */
@media(hover:none){
  .muro-luz{
    -webkit-mask-image:radial-gradient(circle 360px at var(--mx,50%) var(--my,50%), #000 0%, #000 32%, rgba(0,0,0,.5) 60%, transparent 86%);
    mask-image:radial-gradient(circle 360px at var(--mx,50%) var(--my,50%), #000 0%, #000 32%, rgba(0,0,0,.5) 60%, transparent 86%);
  }
}

@media(max-width:1100px){.muro-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.muro-grid{grid-template-columns:repeat(3,1fr)}}

/* Con movimiento reducido no hay deriva ni linterna: se enciende todo. */
@media(prefers-reduced-motion:reduce){
  .muro::before{display:none}
  .muro-base img{opacity:.6;filter:grayscale(1)}
  .muro-luz{display:none}
}

.logo-note{
  font-family:'JetBrains Mono',monospace;color:var(--text-3);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;margin-top:22px;
}

/* =====================  CONTACTO  ===================== */
.contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4.5vw,56px);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:36px}}
.cinfo h2{font-size:clamp(30px,3.9vw,48px);margin-bottom:18px;letter-spacing:-.045em}
.cinfo p{color:var(--text-2);font-size:16.5px;margin-bottom:32px;max-width:40ch}
.ch{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.028);border:1px solid var(--line);border-radius:var(--r-surface);
  padding:18px;margin-bottom:9px;
  transition:transform .35s var(--ease),border-color .3s,background-color .3s;
}
.ch:hover{transform:translateX(6px);border-color:var(--signal-line);background:var(--signal-soft)}
.ch .ci{
  width:44px;height:44px;border-radius:var(--r-tile);flex:none;display:grid;place-items:center;
  background:var(--signal-soft);border:1px solid var(--signal-line);
}
.ch svg{width:18px;height:18px;stroke:var(--bright)}
.ch .lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.ch .val{display:block;font-weight:600;font-size:15px;margin-top:3px;color:var(--text)}
.hours{
  background:rgba(255,255,255,.028);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-surface);padding:18px 20px;margin-top:8px;display:flex;align-items:center;gap:13px;
}
.hours .dot{width:8px;height:8px;border-radius:50%;background:var(--bright);flex:none;box-shadow:0 0 10px rgba(var(--bright-rgb),.9);animation:latir 2.6s ease-in-out infinite}
.hours .t{font-weight:600;font-size:14.5px}
.hours .s{font-size:13px;color:var(--text-2)}

/* --- Formulario --- */
.form-card{padding:38px}
@media(max-width:520px){.form-card{padding:28px 22px}}
.form-card h2,.form-card h3{font-size:23px;margin-bottom:8px;letter-spacing:-.04em}
.form-card .sub{color:var(--text-2);font-size:15px;margin-bottom:30px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:10px;color:var(--text-3);
}
.field label span{color:var(--bright)}
.field input,.field textarea,.field select{
  width:100%;font-family:'Onest',system-ui,sans-serif;font-size:15px;color:var(--text);
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 16px;transition:border-color .22s,background-color .22s,box-shadow .22s;
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366748A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px;padding-right:42px}
.field select option{background:#0A1122;color:var(--text)}
.field textarea{resize:vertical;min-height:124px;line-height:1.6}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--line-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--signal);background:rgba(var(--signal-rgb),.07);
  box-shadow:0 0 0 3px rgba(var(--signal-rgb),.18);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);opacity:1}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.err{color:var(--danger-text);font-size:12.5px;margin-top:8px;display:none}
.field.invalid .err{display:block;animation:fadeIn .3s var(--ease)}
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

.submit{
  position:relative;overflow:hidden;
  width:100%;border:none;cursor:pointer;font-family:'Onest',sans-serif;
  font-weight:600;font-size:15.5px;
  background:var(--bone);color:#04070F;padding:9px 9px 9px 24px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;
  transition:transform .28s var(--spring),box-shadow .35s;
}
.submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(var(--bright-rgb),.8)}
.submit:active:not(:disabled){transform:translateY(0) scale(.99)}
.submit:disabled{opacity:.5;cursor:progress}
.submit svg{
  width:34px;height:34px;flex:none;padding:9px;border-radius:50%;
  background:#04070F;color:var(--bone);stroke-width:2.2;transition:transform .35s var(--ease);
}
.submit:hover:not(:disabled) svg{transform:rotate(-45deg)}

.form-error{
  display:none;background:var(--danger-bg);border:1px solid var(--danger-line);
  color:var(--danger-text);border-radius:12px;padding:15px 17px;font-size:14px;margin-bottom:22px;
}
.form-error.show{display:block;animation:fadeInUp .4s var(--ease)}
.sin-js{background:var(--signal-soft);border:1px solid var(--signal-line);border-radius:12px;padding:15px 17px;font-size:14px;margin-bottom:22px;color:var(--text-2)}
.sin-js a{color:var(--bright);font-weight:600;text-decoration:underline}
.form-error a{color:var(--danger-text);text-decoration:underline;font-weight:600}

.success{display:none;text-align:center;padding:38px 10px}
.success.show{display:block;animation:fadeInUp .5s var(--ease)}
.success .ck{
  width:62px;height:62px;border-radius:50%;background:var(--signal-soft);
  border:1px solid var(--signal-line);display:grid;place-items:center;margin:0 auto 22px;
  box-shadow:var(--glow-sm);
}
.success .ck svg{width:27px;height:27px;stroke:var(--bright)}
.success h3{font-size:23px;margin-bottom:10px}
.success p{color:var(--text-2);font-size:15px;max-width:38ch;margin:0 auto}

/* Mapa */
.map{margin-top:40px}
.map iframe{width:100%;height:340px;border-radius:var(--r-xl);border:1px solid var(--line-2);display:block;filter:invert(.93) hue-rotate(185deg) saturate(.75) brightness(.92) contrast(1.05)}
.map .cap{font-family:'JetBrains Mono',monospace;color:var(--text-3);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:16px}

/* =====================  BANDA DE CIERRE  ===================== */
.cta-band{
  position:relative;overflow:hidden;padding:clamp(80px,9vw,130px) 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(900px 500px at 50% 130%, rgba(46,134,232,.30), transparent 66%),
    radial-gradient(700px 420px at 12% -20%, rgba(11,63,126,.36), transparent 64%);
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{font-size:clamp(34px,5vw,64px);margin-bottom:20px;letter-spacing:-.048em;max-width:16ch;line-height:1}
.cta-band p{color:var(--text-2);font-size:17px;margin-bottom:36px;max-width:52ch}
.btns.centrados{justify-content:flex-start}

/* =====================  PÁGINA DE PRODUCTO  ===================== */
.prod-badge{display:inline-flex;align-items:center;gap:14px;margin-bottom:24px;position:relative;z-index:2}
.prod-badge .ic{
  width:50px;height:50px;border-radius:var(--r-tile);display:grid;place-items:center;
  background:var(--signal-soft);border:1px solid var(--signal-line);box-shadow:var(--glow-sm);
}
.prod-badge .ic svg{width:23px;height:23px;stroke:var(--bright)}
.feature-list{list-style:none;display:grid;gap:0}
.feature-list li{
  display:flex;gap:16px;align-items:flex-start;font-size:15.5px;color:var(--text-2);
  padding:18px 0;border-bottom:1px solid var(--line);
}
.feature-list li:last-child{border-bottom:none}
.feature-list li b{color:var(--text);font-weight:600}
.feature-list .tick{
  width:23px;height:23px;transform:rotate(45deg);background:var(--signal-soft);
  border:1px solid var(--signal-line);display:grid;place-items:center;flex:none;margin-top:3px;
}
.feature-list .tick svg{width:11px;height:11px;stroke:var(--bright);stroke-width:3.2;transform:rotate(-45deg)}

/* =====================  404  ===================== */
/* El bloque va dentro de un .wrap, así que aquí solo se toca el eje
   vertical: con max-width y padding propios anulaba el contenedor y el
   404 quedaba flotando en mitad de la pantalla, desalineado del resto
   del sitio. El tope de línea se pone en los textos, no en la caja. */
.nf{padding-block:clamp(90px,12vw,150px) clamp(70px,9vw,110px)}
.nf .code{
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:clamp(80px,16vw,160px);line-height:1;letter-spacing:-.07em;
  background:linear-gradient(150deg,var(--bright),var(--signal) 55%,var(--deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--bright);
}
.nf h1{font-size:clamp(28px,3.9vw,42px);margin:22px 0 16px;letter-spacing:-.045em;max-width:16ch}
.nf p{color:var(--text-2);font-size:17px;margin-bottom:36px;max-width:46ch}

/* =====================  PIE  ===================== */
footer{
  position:relative;padding:clamp(60px,6.5vw,88px) 0 0;font-size:14px;color:var(--text-2);
  border-top:1px solid var(--line);background:var(--b-900);overflow:hidden;
}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 85% 110%, rgba(46,134,232,.16), transparent 66%);
}
footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(62deg,  var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-62deg, var(--grid) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(ellipse 65% 90% at 88% 100%, #000 0%, transparent 74%);
  mask-image:radial-gradient(ellipse 65% 90% at 88% 100%, #000 0%, transparent 74%);
}
footer .wrap{position:relative;z-index:1}
.foot-inner{display:grid;grid-template-columns:1.2fr auto;gap:48px;align-items:start}
@media(max-width:820px){.foot-inner{grid-template-columns:1fr;gap:40px}}
.foot-brand{display:inline-flex;align-items:center;gap:12px}
.foot-brand svg{width:30px;height:30px;flex:none;color:var(--bright)}
footer address{font-style:normal;margin-top:15px;line-height:1.75;color:var(--text-3);font-size:13.5px}
footer b{color:var(--text);font-size:18px;font-weight:600;letter-spacing:-.035em}
footer .cols{display:flex;gap:clamp(32px,6vw,76px);flex-wrap:wrap}
footer .cols h2{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text-3);
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px;
}
footer .cols ul{list-style:none;display:grid;gap:12px}
footer .cols a{color:var(--text-2);transition:color .22s,transform .28s var(--ease);display:inline-block}
footer .cols a:hover{color:var(--bright);transform:translateX(3px)}
.foot-legal{
  margin-top:clamp(48px,5vw,68px);padding:24px 0 28px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--text-3);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
}
.foot-legal.suelto{margin-top:0}
.foot-legal a{transition:color .2s}
.foot-legal a:hover{color:var(--bright)}