/* ═══════════════════════════════════════════════════════════════════════
   Lime AI — hoja de estilos única
   Identidad heredada de limedevs.com: lima #accd00, navy #39385e,
   violeta #7372b5, papel #e7e7f0, tipografías Outfit + Fjalla One.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #08080e;
  --ink-2:      #0d0d16;
  --ink-3:      #12121d;
  --navy:       #39385e;
  --violet:     #7372b5;
  --lime:       #accd00;
  --lime-hi:    #d4f52e;
  --lime-soft:  #f2ffbb;
  --paper:      #e7e7f0;
  --muted:      rgba(231,231,240,.62);
  --faint:      rgba(231,231,240,.36);
  --line:       rgba(115,114,181,.28);
  --line-2:     rgba(231,231,240,.09);

  --display: "Fjalla One", "Arial Narrow", sans-serif;
  --sans:    "Outfit", ui-sans-serif, system-ui, sans-serif;

  --pad:  clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw: 1280px;
  --r:    14px;                        /* radio base — coherente en todo el sitio */
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:6rem; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* grilla técnica de fondo, con desvanecido radial */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right,  var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 10%, transparent 72%);
          mask-image:radial-gradient(130% 100% at 50% 0%, #000 10%, transparent 72%);
}

main,.nav,.foot,.ticker{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--lime); color:var(--ink); padding:.6rem 1rem; font-weight:500;
}
.skip:focus{ left:1rem; top:1rem; }

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

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

/* ═══ ATMÓSFERA ══════════════════════════════════════════════════════
   Luz ambiental difusa + grano. Da profundidad sin cargar el diseño. */
.atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.atmos__bloom{
  position:absolute; display:block;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
.atmos__bloom--lime{
  width:52vw; height:52vw; top:-18vw; left:46vw;
  background:radial-gradient(circle, rgba(172,205,0,.16), transparent 68%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.atmos__bloom--violet{
  width:46vw; height:46vw; top:34vh; left:-14vw;
  background:radial-gradient(circle, rgba(115,114,181,.20), transparent 68%);
  animation:drift-b 32s ease-in-out infinite alternate;
}
.atmos__bloom--deep{
  width:60vw; height:60vw; top:118vh; left:24vw;
  background:radial-gradient(circle, rgba(57,56,94,.34), transparent 70%);
  animation:drift-a 40s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a{ to{ transform:translate3d(-7vw, 9vh, 0) scale(1.16); } }
@keyframes drift-b{ to{ transform:translate3d(9vw, -7vh, 0) scale(1.12); } }

.grain{
  position:fixed; inset:-50%; z-index:2; 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='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) } 80%{ transform:translate(3%,3%) }
}

/* ── tipografía base ─────────────────────────────────────────────────── */
h1,h2,h3{ font-weight:400; letter-spacing:-.032em; line-height:1.04; margin:0; }
h1{ font-size:clamp(2.3rem,4.1vw,3.5rem); letter-spacing:-.042em; }
h2{ font-size:clamp(1.75rem,3.2vw,2.75rem); letter-spacing:-.036em; }
h3{ font-size:1.1rem; font-weight:500; letter-spacing:-.018em; line-height:1.25; }
p{ margin:0; }

/* el acento del hero: degradado lima, no color plano.
   Recto de claro a oscuro para que se lea igual aunque el titular
   se corte en varias líneas (cada línea repinta su propio degradado). */
h1 em{
  font-style:normal;
  background:linear-gradient(96deg, var(--lime-hi), var(--lime));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
em{ font-style:normal; color:var(--lime); }

.eyebrow,.sec__num,.svc__idx,.prod__idx,.tag,.d-label,.portrait__cap,.foot__legal,.ticker{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.68rem;
}

/* ── botones ─────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--lime); --fg:var(--ink);
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--bg); color:var(--fg);
  padding:.82rem 1.55rem;
  font-weight:500; font-size:.925rem; text-decoration:none; white-space:nowrap;
  border:1px solid var(--bg);
  border-radius:100px;
  transition:transform .4s var(--spring), box-shadow .4s var(--ease),
             background .25s, color .25s, border-color .25s;
}
/* barrido de luz al pasar el cursor.
   Sin z-index: como caja posicionada se pinta sobre el fondo del botón
   (con z-index negativo quedaría detrás y no se vería). */
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn:hover::before{ transform:translateX(120%); }
.btn::after{ content:"→"; transition:transform .4s var(--spring); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(172,205,0,.55); }
.btn:hover::after{ transform:translateX(4px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--ghost{ --bg:transparent; --fg:var(--paper); border-color:var(--line); }
.btn--ghost::before{ background:linear-gradient(100deg, transparent 20%, rgba(172,205,0,.16) 50%, transparent 80%); }
.btn--ghost:hover{
  border-color:var(--lime); color:var(--lime);
  box-shadow:0 10px 30px -14px rgba(172,205,0,.4);
}
.btn--sm{ padding:.52rem 1.05rem; font-size:.82rem; }

/* ═══ NAV ════════════════════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:2rem;
  padding:1.05rem var(--pad);
  transition:background .35s var(--ease), padding .35s var(--ease),
             box-shadow .35s var(--ease), backdrop-filter .35s;
}
/* hairline degradada en lugar de un borde plano */
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  opacity:0; transition:opacity .35s;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--ink) 62%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
          backdrop-filter:blur(20px) saturate(160%);
  padding-block:.65rem;
  box-shadow:0 12px 40px -24px rgba(0,0,0,.9);
}
.nav.is-stuck::after{ opacity:1; }

/* barra de avance de lectura */
.nav__progress{
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:left;
  background:linear-gradient(90deg, var(--lime), var(--lime-hi));
  box-shadow:0 0 12px rgba(172,205,0,.7);
  opacity:0; transition:opacity .35s;
}
.nav.is-stuck .nav__progress{ opacity:1; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand img{ width:clamp(74px,7vw,92px); height:auto; }
.brand__rule{ width:1px; height:26px; background:var(--line); }
.brand__ai{
  font-family:var(--display); font-size:1.05rem; letter-spacing:.2em;
  color:var(--lime); padding-top:2px;
}

.nav__links{ display:flex; gap:.35rem; }
.nav__links a{
  position:relative;
  text-decoration:none; font-size:.9rem; color:var(--muted);
  padding:.4rem .85rem; border-radius:100px;
  transition:color .25s;
}
/* píldora que se ilumina detrás del enlace */
.nav__links a::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(231,231,240,.07);
  border:1px solid transparent;
  transform:scale(.86); opacity:0;
  transition:transform .35s var(--spring), opacity .25s;
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::before{ transform:scale(1); opacity:1; }
.nav__links a.is-current{ color:var(--lime); }
.nav__links a.is-current::before{
  transform:scale(1); opacity:1;
  background:rgba(172,205,0,.09); border-color:rgba(172,205,0,.28);
}

/* ═══ HERO ═══════════════════════════════════════════════════════════ */
.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,7vw,6.5rem) var(--pad) clamp(3.5rem,7vw,6rem);
  display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(2rem,4vw,3.75rem);
  align-items:center;
}
.hero__copy{ max-width:41rem; }

.eyebrow{ display:flex; align-items:center; gap:.6rem; color:var(--faint); margin-bottom:1.7rem; }
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 0 rgba(172,205,0,.55); animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(172,205,0,.5); }
  70%{ box-shadow:0 0 0 9px rgba(172,205,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(172,205,0,0); }
}

/* revelado del titular línea por línea.
   El padding/margen compensa el recorte de descendentes por overflow. */
.line{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.line > span{
  display:block;
  transform:translateY(104%);
  animation:lineUp 1.05s var(--ease) forwards;
  animation-delay:calc(var(--i) * 85ms + 100ms);
}
@keyframes lineUp{ to{ transform:translateY(0); } }

.lead{ color:var(--muted); font-size:1.07rem; margin-top:1.45rem; max-width:33rem; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.3rem; }

.facts{
  display:grid; grid-template-columns:repeat(3,auto); gap:1.6rem;
  margin:3.1rem 0 0; padding-top:1.6rem;
  border-top:1px solid var(--line-2);
}
.facts div{ min-width:0; }
/* mismo cuidado que .integra__num con el recorte del degradado */
.facts dt{
  font-family:var(--display); font-size:1.75rem; line-height:1;
  padding-block:.12em .04em; margin-block:-.12em -.04em;
  background:linear-gradient(160deg, var(--lime-hi), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.facts dd{ margin:.48rem 0 0; font-size:.8rem; color:var(--faint); line-height:1.35; }

/* ── el diagrama del hero ───────────────────────────────────────────── */
.hero__art{ margin:0; }
.diagram{
  width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}

.d-crop,.d-ruler,.d-dim{ fill:none; stroke:var(--line); stroke-width:1; }
.d-tick{ stroke:var(--violet); opacity:.55; }
.d-guide{ fill:none; stroke:var(--violet); stroke-width:1; stroke-dasharray:2 6; opacity:.35; }
.d-tangle{ fill:none; stroke:var(--violet); stroke-width:1.1; opacity:.6; }
.d-node{ fill:var(--ink); stroke:var(--violet); stroke-width:1.5; }
.d-label{ fill:var(--faint); font-family:var(--display); font-size:11px; letter-spacing:.17em;
          text-transform:uppercase; }
.d-label--lime{ fill:var(--lime); }

/* llamada tipo plano: texto + guía punteada al detalle señalado */
.d-call text{
  fill:var(--faint); font-family:var(--display); font-size:11px;
  letter-spacing:.17em; text-transform:uppercase;
}
.d-call path,.d-call circle{
  fill:none; stroke:var(--violet); stroke-width:1; stroke-dasharray:2 4; opacity:.75;
}

.d-layer rect{ fill:rgba(172,205,0,.055); stroke:var(--lime); stroke-width:1.3; }
.d-layer-mark rect{ fill:var(--lime); stroke:none; }
.d-scan{
  stroke:var(--lime); stroke-width:1.6; filter:url(#fGlow);
  animation:scan 5.5s var(--ease) infinite;
}
@keyframes scan{
  0%,100%{ transform:translateY(0);     opacity:.2; }
  50%    { transform:translateY(284px); opacity:1;  }
}

.d-lane{ fill:none; stroke:var(--violet); stroke-width:1.1; stroke-dasharray:3 5; opacity:.55; }
.d-flow path{
  fill:none; stroke:url(#gLane); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:54 400; stroke-dashoffset:454;
  animation:flow 3.6s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:0; } }

.d-term rect{ fill:rgba(172,205,0,.1); stroke:var(--lime); stroke-width:1.3; }
.d-out text{ fill:var(--paper); font-family:var(--sans); font-size:13px; font-weight:300; }
.d-dim text{ fill:var(--faint); font-family:var(--display); font-size:10px; letter-spacing:.2em;
             text-anchor:middle; text-transform:uppercase; }

/* ═══ BANDA TÉCNICA ══════════════════════════════════════════════════ */
.ticker{
  overflow:hidden;
  border-block:1px solid var(--line-2);
  background:rgba(255,255,255,.015);
  padding:.85rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:marquee 46s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker span{ color:var(--faint); white-space:nowrap; transition:color .3s; }
.ticker span:hover{ color:var(--paper); }
.ticker i{ width:4px; height:4px; border-radius:50%; background:var(--lime); opacity:.55; flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══ SECCIONES ══════════════════════════════════════════════════════ */
.sec{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4rem,8vw,7rem) var(--pad);
}
.sec--alt{
  max-width:none;
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006));
  border-block:1px solid var(--line-2);
}
.sec--alt > *{ max-width:var(--maxw); margin-inline:auto; }

/* El titular respira más ancho que el párrafo: así los saltos de línea
   forzados (<br class="salto">) caen donde corresponde y no antes. */
.sec__head{ max-width:58rem; margin-bottom:clamp(2.6rem,5vw,4rem); }
.sec__num{
  color:var(--lime); margin-bottom:1.15rem;
  display:flex; align-items:center; gap:.8rem;
}
.sec__num::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.sec__lead{ color:var(--muted); margin-top:1.15rem; max-width:38rem; }

/* ── superficie de tarjeta reutilizable, con foco que sigue al cursor ── */
.card{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  border:1px solid var(--line-2);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
/* halo que sigue al puntero (--mx/--my los escribe main.js).
   z-index 0 + contenido en 1: el halo queda sobre el fondo de la tarjeta
   pero por debajo del texto. */
.card::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(172,205,0,.14), transparent 62%);
  transition:opacity .4s;
}
.card > *{ position:relative; z-index:1; }
.card:hover::before{ opacity:1; }
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(172,205,0,.26);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.95);
}

/* ── servicios ──────────────────────────────────────────────────────── */
.svc{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.svc__item{
  display:grid;
  grid-template-columns:4rem 4.5rem 1fr;
  gap:1.5rem; align-items:start;
  padding:1.7rem 1.6rem;
}
.svc__idx{ color:var(--violet); padding-top:.5rem; transition:color .35s; }
.svc__item:hover .svc__idx{ color:var(--lime); }
.svc__mark{ color:var(--paper); }
.svc__body{ max-width:44rem; }
.svc__body p{ color:var(--muted); margin-top:.5rem; font-size:.95rem; }

.glyph{ width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.35;
        stroke-linecap:round; stroke-linejoin:round; }
.glyph .dim{ opacity:.35; }
.glyph .lime{ stroke:var(--lime); }
.glyph .vio{ stroke:var(--violet); }
/* stroke:none acá y no como atributo: la regla .glyph{stroke:currentColor}
   le gana a los atributos de presentación del SVG. */
.glyph .lime-fill{ fill:var(--lime); stroke:none; }
.svc__mark .glyph{ max-width:56px; }

.svc__item .glyph{ transition:transform .55s var(--spring); }
.svc__item:hover .glyph{ transform:translateX(5px) scale(1.06); }

/* ── productos ──────────────────────────────────────────────────────── */
.prod{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.prod__card{
  padding:1.9rem 1.7rem 1.5rem;
  display:flex; flex-direction:column; gap:.75rem;
}
/* filete de estado en el borde superior */
.prod__card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--violet), transparent 70%);
  opacity:.55;
}
.prod__card.is-live::after{
  background:linear-gradient(90deg, var(--lime-hi), var(--lime) 40%, transparent 85%);
  opacity:1;
}
/* tercer estado: no es un producto cerrado, es adaptación */
.prod__card.is-custom::after{
  background:linear-gradient(90deg, var(--paper), transparent 70%);
  opacity:.45;
}
.prod__card header{ display:flex; align-items:center; justify-content:space-between; }
.prod__idx{ color:var(--violet); }
.prod__card p{ color:var(--muted); font-size:.93rem; flex:1; }
.prod__card p strong{ color:var(--paper); font-weight:400; }

/* marca propia dentro de un producto (ej. Stockgo) */
.prod__card .prod__brand{ flex:none; margin-top:-.35rem; }
.prod__brand a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--display); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--lime); text-decoration:none;
  border:1px solid rgba(172,205,0,.3); border-radius:100px; padding:.2rem .6rem;
  transition:background .25s, border-color .25s;
}
.prod__brand a[href]::after{ content:"↗"; font-size:.85em; }
.prod__brand a[href]:hover{ background:rgba(172,205,0,.12); border-color:var(--lime); }

.tag{
  border:1px solid currentColor; border-radius:100px;
  padding:.24rem .68rem; font-size:.6rem; letter-spacing:.13em;
  display:inline-flex; align-items:center; gap:.4rem;
}
.tag--live{ color:var(--lime); background:rgba(172,205,0,.09); }
.tag--live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:pulse-sm 2s ease-in-out infinite;
}
@keyframes pulse-sm{ 50%{ opacity:.25; } }
.tag--dev{ color:var(--violet); border-style:dashed; }
.tag--custom{ color:var(--muted); border-color:var(--line-2); }

.prod__art{ margin-top:1.1rem; padding-top:1.25rem; border-top:1px solid var(--line-2); color:var(--faint); }
.prod__art .glyph{ stroke-width:1.2; }
.wave,.wave path{ transform-box:fill-box; transform-origin:center; }
.wave path{ stroke:var(--lime); stroke-width:2.5; opacity:.55; animation:eq 1.9s ease-in-out infinite; }
.wave path:nth-child(odd){ animation-delay:-.6s; }
@keyframes eq{ 50%{ transform:scaleY(.35); } }
.rf{ animation:rf 2.4s ease-out infinite; }
@keyframes rf{ 0%{ opacity:0 } 25%{ opacity:1 } 100%{ opacity:0 } }

/* ── panel de integraciones ─────────────────────────────────────────── */
.integra{ margin-top:.9rem; padding:1.9rem 1.8rem 0; }
.integra__head{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem 2rem;
  align-items:start; padding-bottom:1.7rem;
}
/* Texto con degradado: background-clip:text solo pinta dentro de la caja
   del elemento. Con line-height < 1 las cifras sobresalen por arriba y esa
   parte queda sin pintar (se ve "cortada"). De ahí el padding, compensado
   con un margen negativo para no alterar el espaciado. */
.integra__num{
  font-family:var(--display); font-size:clamp(3rem,5.6vw,4.4rem); line-height:1;
  padding-block:.12em .04em; margin-block:-.12em -.04em;
  background:linear-gradient(160deg, var(--lime-hi), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.integra__head h3{ font-size:1.18rem; }
/* acotado a la columna de texto: si no, le gana en especificidad
   a .integra__num y el número grande sale en tamaño de párrafo. */
.integra__head > div p{ color:var(--muted); margin-top:.55rem; font-size:.95rem; max-width:46rem; }

/* bornes sobre un bus: la hairline es el riel, el punto es la toma */
/* 12 ítems en 4 columnas: 3 rieles parejos, sin filas huérfanas */
.integra__ports{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.integra__ports li{
  position:relative;
  padding:.9rem .6rem 1.05rem 1.15rem;
  border-top:1px solid var(--line-2);
  font-size:.88rem; color:var(--muted);
}
.integra__ports li::before{
  content:""; position:absolute; top:-3.5px; left:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--violet);
  transition:background .3s, box-shadow .3s;
}
.integra__ports li:nth-child(3n+1)::before{
  background:var(--lime); box-shadow:0 0 9px rgba(172,205,0,.75);
}

/* ── clientes: rail de logos ────────────────────────────────────────── */
/* Quieto a propósito, no carrusel: una grilla muestra todos los logos a la
   vez y se lee más segura que algo que se mueve.                        */
.marcas{
  list-style:none; margin:0 0 clamp(2rem,4vw,3rem); padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden;
}
.marcas__slot{
  background:var(--ink-2);
  min-height:104px;
  display:grid; place-items:center; padding:1.1rem;
}
.marcas__slot img{
  max-height:44px; width:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.9); opacity:.5;
  transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.marcas__slot:hover img{ filter:none; opacity:1; transform:scale(1.04); }

/* estado vacío: se apaga solo cuando el <li> recibe un <img> */
.marcas__slot:empty::after{
  content:""; width:52px; height:22px; border-radius:3px;
  border:1px dashed var(--line); opacity:.5;
}

/* ── clientes: casos con foto o video ───────────────────────────────── */
.casos{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.caso{ display:flex; flex-direction:column; }
.caso__media{
  margin:0; aspect-ratio:16/10; position:relative; overflow:hidden;
  background:var(--ink); border-bottom:1px solid var(--line-2);
  display:grid; place-items:center;
}
.caso__media img,.caso__media video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.caso:hover .caso__media img{ transform:scale(1.04); }

/* estado vacío: encuadre técnico, coherente con el resto del sitio */
.caso__media:empty{
  background-image:
    linear-gradient(to right,  var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size:34px 34px;
}
.caso__media:empty::before{
  content:""; position:absolute; inset:14px;
  border:1px dashed var(--line); opacity:.55;
}
.caso__media:empty::after{
  content:attr(data-pending);
  font-family:var(--display); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet);
}

.caso__txt{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.caso__cliente{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.15em;
  font-size:.68rem; color:var(--lime);
}
.caso__txt > p:not(.caso__cliente){ color:var(--muted); font-size:.93rem; flex:1; }

.caso__kpi{
  margin:.5rem 0 0; padding-top:1rem; border-top:1px solid var(--line-2);
  display:flex; align-items:baseline; gap:.7rem;
}
.caso__kpi dt{
  font-family:var(--display); font-size:1.65rem; line-height:1;
  padding-block:.12em .04em; margin-block:-.12em -.04em;
  background:linear-gradient(160deg, var(--lime-hi), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.caso__kpi dd{ margin:0; font-size:.8rem; color:var(--faint); line-height:1.3; }

/* ── sobre mí ───────────────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.about__copy p{ color:var(--muted); margin-top:1.1rem; }
.about__copy h2{ margin-top:.4rem; }
.about__copy strong{ color:var(--paper); font-weight:400; }

.portrait{
  position:relative; aspect-ratio:3/3.8;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  display:grid; place-items:center; overflow:hidden;
}
.portrait::after{
  content:attr(data-pending);
  position:absolute; bottom:.85rem; left:.95rem;
  font-family:var(--display); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet);
  border:1px dashed var(--violet); border-radius:100px; padding:.18rem .55rem;
}
.portrait__ph{ width:74%; fill:none; stroke:var(--violet); stroke-width:1; opacity:.45; }
.portrait__cap{ color:var(--faint); margin-top:.95rem; }

blockquote{
  position:relative;
  margin:2.4rem 0 0; padding:1.35rem 0 0 1.5rem;
  font-size:1.16rem; color:var(--paper); line-height:1.42; letter-spacing:-.018em;
}
blockquote::before{
  content:""; position:absolute; left:0; top:1.35rem; bottom:.2rem; width:2px;
  background:linear-gradient(180deg, var(--lime), transparent);
}

/* ── por qué elegirnos ──────────────────────────────────────────────── */
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.why article{ padding:1.9rem 1.8rem; }
.why span{
  font-family:var(--display); font-size:2.2rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--violet);
  display:block; margin-bottom:.95rem;
  transition:-webkit-text-stroke-color .4s, transform .5s var(--spring);
}
.why article:hover span{ -webkit-text-stroke-color:var(--lime); transform:translateY(-2px); }
.why p{ color:var(--muted); margin-top:.5rem; font-size:.93rem; }

/* ── cómo trabajamos ────────────────────────────────────────────────── */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.7rem;
  position:relative;
}
.steps::before,.steps::after{
  content:""; position:absolute; top:23px; left:23px; right:23px; height:1px;
}
.steps::before{ background:var(--line-2); }
.steps::after{
  background:linear-gradient(90deg, var(--lime), var(--lime-hi));
  box-shadow:0 0 14px rgba(172,205,0,.55);
  transform-origin:left; transform:scaleX(0);
  transition:transform 1.6s var(--ease) .2s;
}
.steps.is-in::after{ transform:scaleX(1); }

.steps li{ position:relative; }
.steps__node{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-2);
  background:var(--ink-2);
  display:grid; place-items:center; margin-bottom:1.15rem;
  position:relative; z-index:1;
  transition:border-color .45s, box-shadow .45s, transform .5s var(--spring);
}
.steps__node span{
  font-family:var(--display); font-size:.85rem; letter-spacing:.06em;
  color:var(--muted); transition:color .45s;
}
.steps.is-in .steps__node{
  border-color:var(--lime);
  box-shadow:0 0 0 4px rgba(172,205,0,.08), 0 0 22px -6px rgba(172,205,0,.7);
}
.steps.is-in .steps__node span{ color:var(--lime); }
.steps li:nth-child(1) .steps__node{ transition-delay:.2s }
.steps li:nth-child(2) .steps__node{ transition-delay:.55s }
.steps li:nth-child(3) .steps__node{ transition-delay:.9s }
.steps li:nth-child(4) .steps__node{ transition-delay:1.25s }
.steps li:hover .steps__node{ transform:scale(1.08); }
.steps p{ color:var(--muted); margin-top:.55rem; font-size:.92rem; }
/* "Sin costo" bajo el título, para que el título entre en una línea.
   Solo texto: itálica, más chico y en lima. Sin recuadro ni píldora. */
.steps__free{
  font-style:italic;
  font-size:.85rem;
  color:var(--lime) !important;
  margin-top:.3rem !important;
}

/* ── contacto ───────────────────────────────────────────────────────── */
.contact__inner{ max-width:52rem; }
.contact h2{ font-size:clamp(2.15rem,4.6vw,3.5rem); letter-spacing:-.042em; }
.hl{ color:var(--lime); }

.contact__list{ list-style:none; margin:2.9rem 0 0; padding:0; }
.contact__list li{ border-bottom:1px solid var(--line-2); }
.contact__list li:first-child{ border-top:1px solid var(--line-2); }
.contact__list a{
  position:relative;
  display:flex; align-items:baseline; gap:1rem;
  padding:1.25rem .9rem; text-decoration:none;
  transition:padding-left .45s var(--ease);
}
/* flecha permanente: deja claro que la fila entera es accionable */
.contact__list a[href]::after{
  content:"→"; position:relative;
  color:var(--lime); font-size:1.15rem; line-height:1;
  transform:translateX(-4px); opacity:.55;
  transition:transform .45s var(--spring), opacity .3s;
}
.contact__list a[href]:hover::after{ transform:translateX(2px); opacity:1; }
/* barrido de fondo al pasar el cursor */
.contact__list a::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(172,205,0,.1), transparent 65%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.contact__list a:hover::before{ transform:scaleX(1); }
.contact__list a:hover{ padding-left:1.5rem; }
.ch{ position:relative; font-size:1.3rem; font-weight:400; letter-spacing:-.028em; transition:color .3s; }
.contact__list a:hover .ch{ color:var(--lime); }
.cv{ position:relative; margin-left:auto; color:var(--faint); font-size:.82rem; }

/* enlaces de contacto todavía sin definir */
.contact__list a.is-pending{ cursor:default; }
.contact__list a.is-pending .ch{ color:var(--faint); }
.contact__list a.is-pending::before{ display:none; }
.contact__list a.is-pending:hover{ padding-left:.9rem; }
.contact__list a.is-pending .cv::after{
  content:"pendiente"; margin-left:.7rem;
  font-family:var(--display); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet); border:1px dashed var(--violet); border-radius:100px; padding:.15rem .5rem;
}
.nav .btn.is-pending,.cta-row .btn.is-pending{ opacity:.75; }

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line-2);
  padding:2.4rem var(--pad);
  display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin-inline:auto;
}
.foot__brand{ display:flex; align-items:center; gap:1.1rem; }
.foot__brand p{ color:var(--faint); font-size:.85rem; max-width:22rem; }
.foot__brand a{ color:var(--lime); text-decoration:none; }
.foot__brand a:hover{ text-decoration:underline; }
.foot__legal{ color:var(--faint); }

/* ═══ REVELADO AL SCROLL ═════════════════════════════════════════════ */
[data-reveal]{ opacity:0; transform:translateY(22px); }
.js [data-reveal]{
  transition:opacity .85s var(--ease), transform .85s var(--ease),
             filter .85s var(--ease);
  filter:blur(6px);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:none; }
html:not(.js) [data-reveal]{ opacity:1; transform:none; filter:none; }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; }
  .hero__copy{ max-width:none; }
  .hero__art{ max-width:560px; margin-top:1rem; }
  .prod{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .steps::before,.steps::after{ display:none; }
  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:300px; }
  .integra__ports{ grid-template-columns:repeat(3,1fr); }
  .casos{ grid-template-columns:repeat(2,1fr); }
  .marcas{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  /* Nav compacto: el sticky no debe comerse la pantalla. Baja de ~86 a ~60px. */
  html{ scroll-padding-top:4.5rem; }
  .nav{ gap:1rem; padding-block:.6rem; }
  .nav__links{ display:none; }
  .nav .btn--sm{ margin-left:auto; }
  .brand{ margin-right:0; }
  .brand img{ width:64px; }

  /* Secciones más ceñidas: en desktop el padding vertical llega a 7rem;
     en mobile 4rem+ es aire muerto. .sec--alt hereda esto por ser .sec. */
  .sec{ padding-block:clamp(2.6rem,9vw,3.4rem); }
  .sec__head{ margin-bottom:2rem; }

  .svc__item{ grid-template-columns:3.2rem 1fr; row-gap:.9rem; padding:1.5rem 1.3rem; }
  .svc__mark{ grid-column:1; grid-row:1; }
  .svc__idx{ grid-column:1; grid-row:2; padding-top:0; }
  .svc__body{ grid-column:2; grid-row:1 / span 2; }
  .why,.steps,.prod{ grid-template-columns:1fr; }

  /* Tres cifras en una fila pareja, no 2+1 con un huérfano abajo. */
  .facts{ grid-template-columns:repeat(3,1fr); gap:1rem; }
  .facts dt{ font-size:1.5rem; }
  .facts dd{ font-size:.72rem; }

  .salto{ display:none; }
  /* el CTA pasa a dos renglones y la flecha se ancla a la derecha */
  .contact__list a{ flex-wrap:wrap; row-gap:.2rem; padding-right:2.2rem; }
  .cv{ margin-left:0; flex-basis:100%; }
  .contact__list a[href]::after{ position:absolute; right:.7rem; top:1.5rem; }
  .integra{ padding:1.5rem 1.3rem 0; }
  .integra__head{ grid-template-columns:1fr; gap:.6rem; }
  .integra__ports{ grid-template-columns:repeat(2,1fr); }
  .casos{ grid-template-columns:1fr; }
  .marcas{ grid-template-columns:repeat(2,1fr); }
  .marcas__slot{ min-height:88px; }
  .atmos__bloom{ filter:blur(70px); }

  /* Diagrama del hero: a ~335px de ancho, los adornos de "plano técnico"
     (marco de encuadre, regla, guías punteadas) son ruido ilegible.
     Se ocultan y queda la narrativa: enredo → capa IA → flujos medibles. */
  .d-crop,.d-ruler,.d-tick,.d-guide{ display:none; }
  .hero__art{ margin-top:.5rem; }
}

/* ── Teléfonos angostos ─────────────────────────────────────────────── */
@media (max-width:400px){
  h1{ font-size:2.05rem; }
  .facts dt{ font-size:1.3rem; }
  /* la cota "Medible" y la llamada del diagrama ya no entran legibles */
  .d-dim,.d-call{ display:none; }
}

/* ═══ MOVIMIENTO REDUCIDO ════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .line > span{ transform:none !important; }
  .steps::after{ transform:scaleX(1); }
  .grain,.atmos{ display:none; }
}

/* ═══ IMPRESIÓN ══════════════════════════════════════════════════════ */
@media print{
  body{ background:#fff; color:#000; }
  body::before,.nav,.hero__art,.atmos,.grain,.ticker{ display:none; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  .line > span{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIME DEVS (sitio principal) — agregados sobre la hoja compartida.
   Todo lo específico de esta versión vive en este bloque, así se ve de
   un vistazo qué cambia respecto del sitio de Lime AI.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── diagrama del hero: producto en despiece ─────────────────────────── */
.d-shell{ fill:none; stroke:var(--violet); stroke-width:1.3; }
.d-trace{ fill:none; stroke:var(--violet); stroke-width:1.1; opacity:.55; }
.d-pad{ fill:var(--ink); stroke:var(--violet); stroke-width:1.2; }
.d-pcb > rect{ fill:rgba(172,205,0,.055); stroke:var(--lime); stroke-width:1.3; }
.d-ui{ fill:none; stroke:var(--paper); stroke-width:1.2; opacity:.75; }
.d-rf{ fill:none; stroke:var(--lime); stroke-width:1.3; animation:rf 2.4s ease-out infinite; }

/* barrido de inspección sobre la placa */
.d-scanx{
  stroke:var(--lime); stroke-width:1.6; filter:url(#fGlow);
  animation:scanx 5.5s var(--ease) infinite;
}
@keyframes scanx{
  0%,100%{ transform:translateX(0);     opacity:.2; }
  50%    { transform:translateX(152px); opacity:1;  }
}

/* la tapa y la base respiran: el despiece se arma y se abre muy lento */
.d-lid{ animation:lift-a 7s ease-in-out infinite alternate; }
.d-base{ animation:lift-b 7s ease-in-out infinite alternate; }
@keyframes lift-a{ to{ transform:translateY(-9px); } }
@keyframes lift-b{ to{ transform:translateY(9px); } }

/* ── grilla de proyectos con imagen ──────────────────────────────────── */
.proj{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.proj__card{ display:flex; flex-direction:column; }
.proj__media{
  margin:0; aspect-ratio:4/5; overflow:hidden;
  background:var(--ink); border-bottom:1px solid var(--line-2);
}
.proj__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.proj__card:hover .proj__media img{ transform:scale(1.04); }
.proj__body{
  padding:1.05rem 1.15rem 1.1rem; flex:1;
  display:flex; flex-direction:column; gap:.55rem;
}
.proj__idx{
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:.15em; font-size:.68rem;
  color:var(--violet); transition:color .35s;
}
.proj__card:hover .proj__idx,.hw__card:hover .proj__idx{ color:var(--lime); }
.proj__body h3{ font-size:1rem; flex:1; }
.proj__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* etiquetas de disciplina: lima = software, violeta = hardware */
.tag--sw{ color:var(--lime); background:rgba(172,205,0,.07); }
.tag--hw{ color:var(--violet); background:rgba(115,114,181,.08); }

/* ── hardware: cuatro etapas con foto ────────────────────────────────── */
.hw{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.hw__card{ display:flex; flex-direction:column; }
.hw__txt{
  padding:1.4rem 1.5rem 1.5rem; flex:1;
  display:flex; flex-direction:column; gap:.55rem;
}
.hw__txt p{ color:var(--muted); font-size:.93rem; }

/* ── equipo: tres integrantes ────────────────────────────────────────── */
.team{ display:flex; flex-direction:column; gap:.9rem; }
.team__member{
  margin:0; display:flex; align-items:center; gap:1.1rem;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  padding:.95rem 1.1rem;
}
.avatar{
  width:76px; height:76px; flex:none; border-radius:50%;
  border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  display:grid; place-items:center;
  object-fit:cover;                  /* por si el div se reemplaza por <img> */
}
.avatar svg{ width:72%; fill:none; stroke:var(--violet); stroke-width:3; opacity:.5; }
.team__member figcaption{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.team__member strong{ font-weight:500; letter-spacing:-.018em; }
.team__member span{ color:var(--muted); font-size:.85rem; }
.team__member em{
  font-style:normal; margin-top:.3rem; align-self:flex-start;
  font-family:var(--display); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet);
  border:1px dashed var(--violet); border-radius:100px; padding:.14rem .5rem;
}

/* ── selector de idioma en el nav ────────────────────────────────────── */
.lang{
  font-family:var(--display); font-size:.72rem; letter-spacing:.16em;
  text-decoration:none; color:var(--muted);
  border:1px solid var(--line); border-radius:100px;
  padding:.34rem .7rem;
  transition:color .25s, border-color .25s;
}
.lang:hover{ color:var(--lime); border-color:var(--lime); }

/* enlace dentro de un párrafo */
.in-text{ color:var(--lime); text-decoration:none; border-bottom:1px solid rgba(172,205,0,.35); }
.in-text:hover{ border-bottom-color:var(--lime); }

/* ── CTA del panel Lime AI ───────────────────────────────────────────── */
.ai-cta{ margin-top:1.15rem !important; }

@media (max-width:1000px){
  .proj{ grid-template-columns:repeat(2,1fr); }
  .team{ flex-direction:row; flex-wrap:wrap; }
  .team__member{ flex:1 1 260px; }
}
@media (max-width:720px){
  .proj{ grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .proj__body{ padding:.85rem .9rem .9rem; }
  .proj__body h3{ font-size:.88rem; }
  .tag{ font-size:.55rem; padding:.2rem .5rem; }
  .hw{ grid-template-columns:1fr; }
  .team{ flex-direction:column; }
  .nav .lang{ margin-left:auto; }
  .nav .btn--sm{ margin-left:0; }
}