/* ═══════════════════════════════════════════════════════════════════
   INVENCION506 — Landing corporativa
   Paleta: negro · blanco · un único acento azul acero (sobrio)
   Capas: WebGL (puntos) · velo de legibilidad · DOM 3D · cursor
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #000000;
  --bg-soft:   #0a0b0e;
  --ink:       #f4f6fa;
  --ink-dim:   #9aa0ad;
  --ink-faint: #5f6470;

  /* Acento único, azul acero. Nada de neón. */
  --acc:       #5c82bd;
  --acc-soft:  #93a9cb;
  --acc-rgb:   92,130,189;

  --line:  rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.030);

  --max: 1240px;
  --pad: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-3d: cubic-bezier(.65,.05,.25,1);

  --font: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* El escenario es un contenedor 3D real: todo hijo hereda profundidad.
   `position/z-index` son obligatorios: `perspective` crea contexto de apilamiento,
   pero con z-index auto quedaría por debajo del velo y este grisaría el texto. */
.stage{ position:relative; z-index:2; perspective:1400px; perspective-origin:50% 50%; transform-style:preserve-3d }

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

::selection{ background:var(--ink); color:#000 }

/* ── Fondo WebGL: negro puro ───────────────────────────────────────── */
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block; background:#000;
}

/* ── Logo orbital ──────────────────────────────────────────────────────
   Núcleo hexagonal (la invención) dentro de dos anillos que giran en
   sentidos opuestos. Solo se anima `transform` de dos grupos.           */
.logo{
  width:var(--logo-size,76px); height:var(--logo-size,76px);
  flex-shrink:0; overflow:visible;
  transition:width .4s var(--ease), height .4s var(--ease);
}
.nav.is-stuck .logo{ --logo-size:56px }
.foot .logo{ --logo-size:72px }
.logo ellipse, .logo polygon{ fill:none; stroke:currentColor; stroke-width:1.6 }
.logo__o1 ellipse{ opacity:.42 }
.logo__o2 ellipse{ opacity:.24 }
.logo__core{ stroke-width:2.4 }
.logo__nucleus{ fill:var(--acc-soft) }
.logo__sat{ fill:currentColor }

.logo__o1, .logo__o2{ transform-origin:32px 32px; transform-box:view-box }
.logo__o1{ animation:orb1 16s linear infinite }
.logo__o2{ animation:orb2 23s linear infinite }
@keyframes orb1{ from{ transform:rotate(24deg) }  to{ transform:rotate(384deg) } }
@keyframes orb2{ from{ transform:rotate(-30deg) } to{ transform:rotate(-390deg) } }

.nav__brand:hover .logo__o1{ animation-duration:3.5s }
.nav__brand:hover .logo__o2{ animation-duration:5s }
.nav__brand:hover .logo__nucleus{ fill:#fff }
.logo__nucleus{ transition:fill .4s }

.logo--xl{ --logo-size:180px }
.logo--xl .logo__core{ stroke-width:2 }

/* ── Aurora que acompaña al puntero ────────────────────────────────────
   Tamaño fijo y solo `transform`: la mueve el compositor, no repinta.   */
.aurora{
  position:fixed; top:0; left:0; z-index:1; pointer-events:none;
  width:760px; height:760px; margin:-380px 0 0 -380px;
  background:radial-gradient(circle, rgba(var(--acc-rgb),.16) 0%, rgba(var(--acc-rgb),.06) 35%, transparent 68%);
  opacity:0; transition:opacity .8s var(--ease);
  will-change:transform;
}
.aurora.is-on{ opacity:1 }

/* ── Bocetos técnicos que cruzan el fondo ──────────────────────────────
   Trazo fino, opacidad baja: se leen como plano de ingeniería, no compiten
   con el texto. Solo se anima `transform` → trabajo del compositor, no del
   hilo principal.                                                        */
.sketches{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none }

.sk{
  position:absolute; top:var(--top); left:0;
  width:var(--size); height:var(--size);
  fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.13;
  animation:sk-cross var(--dur) linear infinite;
  animation-delay:var(--delay);
  /* Capa propia en la GPU: la rotación deja de re-rasterizar el SVG
     en cada fotograma y pasa a ser trabajo del compositor. */
  will-change:transform;
  backface-visibility:hidden;
}
.sk--rev{ animation-name:sk-cross-rev }

@keyframes sk-cross{
  from{ transform:translate3d(-24vw, 0, 0) rotate(-8deg) }
  to  { transform:translate3d(124vw, -6vh, 0) rotate(352deg) }
}
@keyframes sk-cross-rev{
  from{ transform:translate3d(124vw, 0, 0) rotate(8deg) }
  to  { transform:translate3d(-24vw, 6vh, 0) rotate(-352deg) }
}

@media (max-width:700px){
  .sk{ opacity:.09 }
  .sk:nth-of-type(2n){ display:none }   /* menos piezas en pantallas chicas */
}

/* ── Velo de legibilidad ───────────────────────────────────────────────
   Oscurece el fondo bajo el texto sin apagar los puntos del resto.
   Sin esto, un punto brillante justo detrás de una letra la borra.      */
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,0) 80%);
}

/* Grano de película, muy leve */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}  60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,2%)}   100%{transform:translate(0,0)}
}

/* ── Cursor personalizado ──────────────────────────────────────────── */
.cursor{ position:fixed; inset:0; z-index:9999; pointer-events:none; display:none }
.cursor__ring,.cursor__dot{ position:absolute; top:0; left:0; border-radius:50% }
.cursor__ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(255,255,255,.40);
  transition:width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease);
}
.cursor__dot{
  width:4px; height:4px; margin:-2px 0 0 -2px;
  background:#fff; box-shadow:0 0 10px rgba(255,255,255,.8);
}
.cursor.is-link .cursor__ring{
  width:60px; height:60px; margin:-30px 0 0 -30px;
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.6);
}
.cursor.is-expand .cursor__ring{
  width:82px; height:82px; margin:-41px 0 0 -41px;
  border-color:rgba(var(--acc-rgb),.75); background:rgba(var(--acc-rgb),.08);
}
.cursor.is-down .cursor__ring{ transform:scale(.82) }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block }
  body.has-cursor,body.has-cursor *{ cursor:none !important }
}

/* ── Progreso de scroll ────────────────────────────────────────────── */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:120; background:rgba(255,255,255,.06) }
.scroll-progress i{ display:block; height:100%; width:0; background:var(--ink) }

/* ── Boot ──────────────────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:9000; background:#000;
  display:grid; place-content:center; gap:28px; justify-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
/* `pointer-events:none` es obligatorio, no un extra: la capa cubre la pantalla
   entera con z-index 9000, y con solo `opacity:0` seguiría interceptando todos
   los clics del sitio. La transición de `visibility` no basta, porque hasta que
   termina el elemento sigue siendo visible para la detección de impactos. */
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none }
.boot__mark{ position:relative; display:grid; place-items:center; width:180px; height:180px; color:#fff }
.boot__mark .logo{ position:absolute; inset:0 }
.boot__num{ font-family:var(--mono); font-size:28px; letter-spacing:.2em; position:relative }
.boot__bar{ width:170px; height:1px; background:rgba(255,255,255,.14); overflow:hidden }
.boot__bar i{ display:block; height:100%; width:0; background:#fff; transition:width .3s linear }

/* ── Navegación ────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--pad);
  transition:background .4s var(--ease), backdrop-filter .4s, padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(0,0,0,.72); backdrop-filter:blur(20px) saturate(120%);
  border-bottom-color:var(--line); padding:13px var(--pad);
}
.nav__brand{ display:flex; align-items:center; gap:16px; flex-shrink:0 }
.nav__name{ font-size:21px; font-weight:600; letter-spacing:.14em; transition:font-size .4s var(--ease) }
.nav.is-stuck .nav__name{ font-size:17px }
@media (max-width:1180px){ .nav__name{ font-size:17px } }
@media (max-width:520px){ .nav__name{ font-size:14.5px; letter-spacing:.1em } }

/* ── "506" en los colores de la bandera de Costa Rica ──────────────────
   Tonos aclarados respecto de los oficiales (#002B7F / #CE1126): sobre
   negro, el azul de bandera es prácticamente ilegible.                  */
.cr506{ font-weight:700; font-style:normal }
.cr506 i{ font-style:normal; transition:text-shadow .4s var(--ease), transform .5s var(--ease-3d);
  display:inline-block }
.cr506 i:nth-child(1){ color:#2f6fdb }   /* azul */
.cr506 i:nth-child(2){ color:#ffffff }   /* blanco */
.cr506 i:nth-child(3){ color:#e0344a }   /* rojo */
.nav__brand:hover .cr506 i:nth-child(1){ text-shadow:0 0 16px rgba(47,111,219,.9);  transform:translateY(-2px) }
.nav__brand:hover .cr506 i:nth-child(2){ text-shadow:0 0 16px rgba(255,255,255,.9) }
.nav__brand:hover .cr506 i:nth-child(3){ text-shadow:0 0 16px rgba(224,52,74,.9);   transform:translateY(2px) }

/* El hueco se estrecha antes que la letra: así el texto se mantiene legible
   hasta que entra el menú móvil, sin que la barra se desborde. */
.nav__links{ display:flex; gap:clamp(20px,2.6vw,42px); font-size:17px; color:var(--ink-dim) }
.nav__links a{ position:relative; padding:4px 0; transition:color .3s }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
.nav__links a.is-active{ color:var(--ink) }
.nav__links a.is-active::after{ transform:scaleX(1); background:var(--acc) }

.nav__actions{ display:flex; align-items:center; gap:18px }
.lang{ display:flex; align-items:center; gap:6px; font-size:14px; letter-spacing:.12em; color:var(--ink-faint); font-family:var(--mono) }
.lang__opt{ transition:color .3s }
.lang__opt.is-active{ color:var(--ink) }
.lang__sep{ opacity:.35 }

.burger{ display:none; width:26px; height:18px; position:relative }
.burger i{ position:absolute; left:0; width:100%; height:1.5px; background:var(--ink); transition:transform .45s var(--ease), opacity .3s }
.burger i:first-child{ top:3px } .burger i:last-child{ bottom:3px }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-6px) rotate(-45deg) }

/* ── Botones ───────────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:2px; font-size:14px; font-weight:600;
  letter-spacing:.01em; white-space:nowrap;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  transition:transform .35s var(--ease), border-color .35s, color .35s, background .35s, box-shadow .35s;
  transform-style:preserve-3d;
}
.btn--primary{ background:var(--ink); color:#000; border-color:var(--ink) }
.btn--primary:hover{ background:#fff; border-color:#fff; box-shadow:0 14px 40px -16px rgba(255,255,255,.5) }
.btn--ghost:hover{ border-color:rgba(var(--acc-rgb),.7); color:#fff; background:rgba(var(--acc-rgb),.10) }
.btn--sm{ padding:12px 24px; font-size:15px }
.btn__arrow{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(4px) }

/* ── Tipografía de sección ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--acc-soft); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.5 }

.section{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:clamp(90px,13vh,150px) var(--pad) }
.section--tight{ padding-block:clamp(50px,7vh,80px) }
.section__head{ max-width:760px; margin-bottom:clamp(44px,6vw,72px) }
.section__title{
  font-size:clamp(30px,4.4vw,52px); line-height:1.1; letter-spacing:-.028em;
  font-weight:600; margin:20px 0 16px;
}
.section__lead{ color:var(--ink-dim); font-size:clamp(15px,1.6vw,18px); max-width:56ch }

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero{
  position:relative; z-index:2; min-height:calc(100svh - 78px);   /* deja ver el carrusel */
  display:flex; align-items:center;
  max-width:var(--max); margin:0 auto; padding:130px var(--pad) 70px;
}
.hero__inner{
  width:100%; transform-style:preserve-3d;
  display:grid; gap:clamp(28px,5vw,64px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
}
.hero__copy{ min-width:0 }

/* Marca a gran tamaño en la portada */
.hero__logo{ display:flex; justify-content:center; color:#fff }
.hero__logo .logo{ --logo-size:clamp(200px, 27vw, 360px) }
.hero__logo .logo__core{ stroke-width:1.5 }
.hero__logo .logo__o1 ellipse,.hero__logo .logo__o2 ellipse{ stroke-width:1 }
.hero__logo .logo__nucleus{ r:4 }

.hero__title{
  font-size:clamp(40px,7.6vw,96px); line-height:1.06; letter-spacing:-.042em;
  font-weight:600; margin:26px 0 30px; transform-style:preserve-3d;
  text-shadow:0 1px 14px rgba(0,0,0,.75);          /* separa el texto sin vaciar el campo */
}
/* `overflow:hidden` es lo que hace posible la entrada deslizante, pero recorta
   los descendentes (g, p, j). Se abre espacio abajo y se recupera con margen
   negativo, de modo que el interlineado no cambia. */
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.34em; margin-bottom:-.28em }
.hero__title .line > span{
  display:block; transform:translateY(110%) rotateX(-70deg); opacity:0;
  transform-origin:top center;
  transition:transform 1.05s var(--ease-3d), opacity .8s ease;
}
.hero__title.is-in .line > span{ transform:translateY(0) rotateX(0); opacity:1 }
.hero__title .line:nth-child(2) > span{ transition-delay:.09s }
.hero__title .line:nth-child(3) > span{ transition-delay:.18s }
.hero__title .line:nth-child(4) > span{ transition-delay:.27s }

/* Acento del título: plata → azul acero. Legible, sin estridencia.

   `background-clip:text` pinta el degradado solo dentro de la caja del
   elemento. Con un interlineado ajustado, el rabo de la g y la p queda por
   debajo de esa caja y se queda sin pintar: la letra aparece cortada aunque
   nada la esté recortando. El relleno agranda la zona pintada y el margen
   negativo devuelve el espacio, de modo que el interlineado no cambia. */
.grad{
  background:linear-gradient(100deg,#ffffff 0%,#d3e0f2 42%,#8ba7d0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* Medido: con este tipo a 96 px el trazo baja 23 px bajo la línea base.
     .30em = 29 px deja holgura sobrada en cualquier tamaño. */
  padding-bottom:.30em; margin-bottom:-.30em;
}

.hero__sub{ color:var(--ink-dim); font-size:clamp(15px,1.7vw,18.5px); max-width:58ch;
  text-shadow:0 1px 10px rgba(0,0,0,.85) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px }

.hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,52px); margin-top:clamp(50px,8vh,86px) }
.hero__meta li{
  display:flex; flex-direction:column; gap:4px;
  padding-left:18px; border-left:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
.hero__meta li:hover{ border-left-color:var(--acc) }
.hero__meta b{ font-size:15.5px; font-weight:600; letter-spacing:-.005em }
.hero__meta span{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:34px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
}
.hero__scroll i{ width:52px; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.7),transparent);
  animation:pulse 2.4s var(--ease) infinite }
@keyframes pulse{ 0%,100%{ transform:scaleX(.35); opacity:.35 } 50%{ transform:scaleX(1); opacity:.9 } }

/* ── Carrusel de servicios ─────────────────────────────────────────────
   Banda a todo el ancho bajo la portada: la oferta completa desfila, en
   lugar de dejar el foco en un solo servicio.                           */
.ticker{
  position:relative; z-index:2; overflow:hidden;
  border-block:1px solid var(--line); background:rgba(0,0,0,.55);
  padding:23px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{ display:flex; width:max-content; animation:marq 58s linear infinite }
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker__item{
  display:flex; align-items:center; gap:30px; padding-right:30px;
  white-space:nowrap; font-size:15px; letter-spacing:.01em; color:var(--ink-dim);
  transition:color .3s;
}
.ticker__item:hover{ color:var(--ink) }
.ticker__item::after{ content:""; width:5px; height:5px; background:var(--acc); transform:rotate(45deg) }

/* ── Revelado 3D al hacer scroll ───────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(46px) rotateX(-12deg) scale(.97);
  transform-origin:50% 100%;
  transition:opacity .9s var(--ease), transform 1.05s var(--ease-3d);
}
.reveal.is-in{ opacity:1; transform:none }

/* ── Bloque partido: copia + lista de capacidades ──────────────────── */
.split{ display:grid; gap:clamp(36px,6vw,80px); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center }
.split__copy .btn{ margin-top:30px }

.checklist{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.checklist li{
  position:relative; padding:19px 0 19px 40px; border-bottom:1px solid var(--line);
  font-size:15.5px; color:var(--ink-dim);
  transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.checklist li::before{
  content:""; position:absolute; left:8px; top:26px;
  width:11px; height:11px; border:1px solid var(--acc); transform:rotate(45deg);
  transition:background .35s var(--ease), transform .5s var(--ease-3d), border-color .35s;
}
.checklist li:hover{ color:var(--ink); padding-left:48px }
.checklist li:hover::before{ background:var(--acc); transform:rotate(135deg); border-color:var(--acc-soft) }

/* ── Productos propios ─────────────────────────────────────────────────
   Cada tarjeta lleva su color en `--p`: identifica al producto sin romper
   la sobriedad del conjunto, porque son tonos apagados de una misma familia. */
.products{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) }

.product{
  position:relative; display:flex; flex-direction:column; gap:15px;
  padding:30px 28px 26px; border-radius:3px; overflow:hidden;
  border:1px solid var(--line); background:rgba(9,10,14,.86);
  transition:transform .6s var(--ease-3d), border-color .4s, background .4s;
  transform-style:preserve-3d;
}
.product::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--p,var(--acc)); opacity:.55; transition:opacity .4s, width .4s var(--ease);
}
/* Sin `translateZ`: el escenario tiene la perspectiva centrada en su propio
   medio, y como mide miles de píxeles de alto, acercar un elemento lo desplaza
   radialmente desde ese centro lejano. La tarjeta saltaba lejos de su caja y el
   enlace dejaba de quedar bajo el cursor. `translateY` + `scale` dan el mismo
   relieve sin mover el objetivo. */
.product:hover{ transform:translateY(-6px) scale(1.012); background:rgba(13,15,21,.92) }
.product:hover::before{ opacity:1; width:3px }

.product__head{ display:flex; align-items:center; gap:14px }
.product__icon{
  width:32px; height:32px; flex-shrink:0;
  fill:none; stroke:var(--p,var(--acc)); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .6s var(--ease-3d);
}
.product:hover .product__icon{ transform:scale(1.1) }
.product__name{ font-size:19.5px; font-weight:600; letter-spacing:-.015em }
.product__tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:4px;
}
.product__desc{ color:var(--ink-dim); font-size:14.5px }
.product__list{ display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--ink-dim) }
.product__list li{ position:relative; padding-left:16px }
.product__list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--p,var(--acc)) }

.product__link{
  margin-top:auto; padding-top:8px;
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--p,var(--acc)); transition:gap .35s var(--ease), color .3s;
}
.product__link svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.product__link:hover{ gap:15px; color:#fff }
/* El enlace se extiende sobre toda la tarjeta: el objetivo del clic pasa de un
   texto de 110 px a la tarjeta completa, y deja de depender de acertarle a un
   elemento que además se desplaza en 3D al pasar el puntero.
   `.product__foot` NO lleva `position`, para que este `inset:0` siga
   resolviéndose contra la tarjeta y no contra el pie. */
.product__link::after{ content:""; position:absolute; inset:0; z-index:1 }

.product__foot{ margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px }
.product__foot .product__link{ margin-top:0; padding-top:0 }

/* La insignia de Android va por encima de la capa de clic de la tarjeta,
   para poder llevar a su propia tienda. */
.product__store{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding:5px 11px 5px 9px;
  border:1px solid var(--line); border-radius:2px;
  transition:color .3s, border-color .3s;
}
.product__store svg{ width:11px; height:11px; fill:currentColor; stroke:none }
a.product__store:hover{ color:var(--ink); border-color:var(--p,var(--acc)) }
.product__store--plain{ cursor:default }        /* aún sin enlace de tienda */
.product__link--soft{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint) }
.product__link--soft:hover{ color:var(--p,var(--acc)) }

/* ── Cobertura de soporte ──────────────────────────────────────────── */
.cover{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.cover__item{
  padding:28px 26px; border-radius:3px; border:1px solid var(--line); background:rgba(8,9,12,.6);
  transition:transform .6s var(--ease-3d), border-color .4s, background .4s;
  transform-style:preserve-3d;
}
.cover__item:hover{ transform:translateY(-5px) scale(1.012); border-color:rgba(255,255,255,.26); background:rgba(14,17,24,.75) }
.cover__item b{ display:block; font-size:16.5px; font-weight:600; margin-bottom:9px; letter-spacing:-.01em }
.cover__item p{ color:var(--ink-dim); font-size:14px }

/* ── Tarjetas de servicio (volteo 3D real) ─────────────────────────── */
.cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }

.card{ perspective:1600px; min-height:340px }
.card__inner{
  position:relative; width:100%; height:100%; min-height:340px;
  transform-style:preserve-3d;
  transition:transform 1s var(--ease-3d);
}
.card.is-open .card__inner{ transform:rotateY(180deg) }

.card__face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  display:flex; flex-direction:column; gap:14px;
  padding:30px; border-radius:3px;
  border:1px solid var(--line); background:rgba(9,10,14,.90);
  overflow:hidden;
  transition:border-color .4s, box-shadow .4s, background .4s;
}
.card__face--back{ transform:rotateY(180deg); overflow-y:auto; background:rgba(10,13,20,.88) }

/* Halo que sigue al puntero dentro de la tarjeta */
.card__face--front::before{
  content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(var(--acc-rgb),.16),transparent 65%);
  opacity:0; transition:opacity .45s; pointer-events:none;
}
.card:hover .card__face--front::before{ opacity:1 }
.card:hover .card__face{ border-color:rgba(255,255,255,.28); box-shadow:0 30px 70px -34px rgba(0,0,0,.9) }

.card__num{ font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; color:var(--ink-faint) }
.card__icon{ width:28px; height:28px; fill:none; stroke:var(--acc-soft); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .6s var(--ease-3d), stroke .4s }
.card:hover .card__icon{ transform:translateZ(30px) scale(1.06); stroke:#fff }
.card h3,.card h4{ font-size:20px; font-weight:600; letter-spacing:-.02em }
.card p{ color:var(--ink-dim); font-size:14.5px }
.card ul{ display:flex; flex-direction:column; gap:9px; color:var(--ink-dim); font-size:14px }
.card li{ position:relative; padding-left:18px }
.card li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:1px; background:var(--acc-soft) }
.card__more{
  margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acc-soft); display:flex; align-items:center; gap:8px;
}
.card__more::after{ content:"→"; transition:transform .4s var(--ease) }
.card:hover .card__more::after{ transform:translateX(5px) }

/* ── Proceso ───────────────────────────────────────────────────────── */
.steps{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
.step{
  position:relative; padding:30px 26px; border-radius:3px;
  border:1px solid var(--line); background:rgba(8,9,12,.6);
  transition:transform .6s var(--ease-3d), border-color .4s, background .4s;
  transform-style:preserve-3d;
}
.step:hover{ transform:translateY(-6px) scale(1.012); border-color:rgba(255,255,255,.26); background:rgba(14,17,24,.75) }
.step__n{
  font-family:var(--mono); font-size:34px; font-weight:600; letter-spacing:-.04em;
  color:var(--ink-faint); display:block; margin-bottom:14px;
  transition:color .4s;
}
.step:hover .step__n{ color:var(--acc-soft) }
.step h3{ font-size:17.5px; font-weight:600; margin-bottom:8px }
.step p{ color:var(--ink-dim); font-size:14px }

/* ── Marquesina de tecnologías ─────────────────────────────────────── */
.marquee{ position:relative; overflow:hidden; padding:26px 0;
  border-block:1px solid var(--line);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{ display:flex; gap:56px; width:max-content; animation:marq 38s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__track span{
  font-family:var(--mono); font-size:clamp(16px,2.2vw,24px); letter-spacing:-.01em;
  color:var(--ink-faint); transition:color .3s; white-space:nowrap;
}
.marquee__track span:hover{ color:var(--ink) }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ── Resultados ────────────────────────────────────────────────────── */
.stats{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.stat{ padding:30px 26px; border-radius:3px; border:1px solid var(--line); background:rgba(8,9,12,.6);
  transition:transform .6s var(--ease-3d), border-color .4s; transform-style:preserve-3d }
.stat:hover{ transform:translateY(-5px) scale(1.012); border-color:rgba(255,255,255,.26) }
.stat b{ display:block; font-size:clamp(36px,4.6vw,54px); font-weight:600; letter-spacing:-.045em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; margin-bottom:12px }
.stat p{ color:var(--ink-dim); font-size:13.5px }

.quote{ margin-top:44px; padding:34px clamp(24px,4vw,48px); border-radius:3px;
  border:1px solid var(--line); border-left:2px solid var(--acc); background:rgba(8,9,12,.6) }
.quote p{ font-size:clamp(17px,2.2vw,24px); line-height:1.45; letter-spacing:-.02em }
.quote cite{ display:block; margin-top:18px; font-style:normal; font-size:13px; color:var(--ink-faint) }

/* ── Contacto ──────────────────────────────────────────────────────── */
.contact{ display:grid; gap:clamp(36px,6vw,72px); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start }
.contact__list{ margin-top:36px; display:flex; flex-direction:column; gap:2px }
.contact__list li{ display:flex; flex-wrap:wrap; gap:6px 18px; padding:16px 0; border-top:1px solid var(--line) }
.contact__list span{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); min-width:110px }
.contact__list a{ transition:color .3s } .contact__list a:hover{ color:var(--acc-soft) }

.form{ display:flex; flex-direction:column; gap:14px; padding:clamp(24px,3vw,36px);
  border-radius:3px; border:1px solid var(--line); background:rgba(9,10,14,.88) }
.field{ position:relative }
.field input,.field textarea{
  width:100%; padding:20px 16px 9px; font:inherit; font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:2px;
  resize:vertical; transition:border-color .3s, background .3s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--acc); background:rgba(var(--acc-rgb),.06) }

/* El autocompletado de Chrome impone fondo blanco y texto oscuro, y rompe el
   diseño en un formulario oscuro. No se puede cambiar con `background`: hay que
   taparlo con una sombra interior y forzar el color del texto. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 60px #0d0f14 inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s;   /* impide el destello blanco inicial */
}
.field label{ position:absolute; left:16px; top:15px; font-size:15px; color:var(--ink-faint);
  pointer-events:none; transition:transform .28s var(--ease), font-size .28s var(--ease), color .28s }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-11px); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-soft);
}
.field.is-bad input,.field.is-bad textarea{ border-color:#c25a6e }

/* Campo trampa contra robots: fuera de la vista y del recorrido del teclado.
   No se usa `display:none` porque muchos robots detectan esa regla y lo omiten. */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form__note{ font-size:13px; color:var(--acc-soft); min-height:20px }
.form__note.is-bad{ color:#c25a6e }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:60px var(--pad) 40px; border-top:1px solid var(--line) }
.foot__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding-bottom:34px }
.foot__top p{ color:var(--ink-faint); font-size:13.5px }
.foot__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:22px;
  border-top:1px solid var(--line); color:var(--ink-faint); font-size:12px }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .burger{ display:block }
  .nav__links{
    position:fixed; inset:0 0 auto; top:0; padding:96px var(--pad) 40px;
    flex-direction:column; gap:6px; font-size:24px; letter-spacing:-.02em;
    background:rgba(0,0,0,.97); backdrop-filter:blur(24px);
    transform:translateY(-102%) rotateX(35deg); transform-origin:top center;
    transition:transform .8s var(--ease-3d); z-index:-1;
  }
  .nav__links.is-open{ transform:translateY(0) rotateX(0) }
  .nav__links a{ padding:12px 0; border-bottom:1px solid var(--line) }
  .nav .btn--sm{ display:none }
  .hero__scroll{ display:none }
  /* En vertical la marca va arriba y el texto debajo */
  .hero__inner{ grid-template-columns:1fr }
  .hero__logo{ order:-1; margin-bottom:6px }
  .hero__logo .logo{ --logo-size:clamp(150px, 44vw, 240px) }
  /* En pantallas chicas el texto ocupa todo el ancho: velo parejo y suave */
  .veil{ background:rgba(0,0,0,.42) }
}
@media (max-width:520px){
  .hero__meta{ gap:22px } .hero__meta div{ min-width:44% }
  .card__face{ padding:24px }
}

/* ── Accesibilidad: movimiento reducido ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
  .hero__title .line > span{ opacity:1; transform:none }
  .sketches,.aurora{ display:none }
  .cursor{ display:none !important }
  body.has-cursor,body.has-cursor *{ cursor:auto !important }
  /* El logo conserva su composición, solo deja de girar */
  .logo__o1{ transform:rotate(24deg) }
  .logo__o2{ transform:rotate(-30deg) }
}

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