/* ============================================================
   MG SMART SERVICES — sistema visual
   Base: ecomlab360 V2. Adaptado a identidad MG.
   ============================================================ */

:root{
  --bg:#0B1030; --bg-2:#070A20; --bg-3:#141B4A;
  --card:#141B4A; --card-2:#0F1538;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --text:#FFFFFF; --text-2:#C5CEF0; --muted:#8E98C4;
  --brand:#2E6BFF; --brand-2:#6E9BFF; --brand-soft:rgba(46,107,255,.14);
  --violet:#7C5CFF; --violet-2:#A78BFF;
  --cta:#FF7900; --cta-h:#E86E00; --cta-2:#FF9E3D; --cta-ink:#FFFFFF;
  --ok:#2BD9A0;
  --wa:#24CC63; --wa-h:#1FB456; --wa-ink:#FFFFFF;   /* verde WhatsApp */

  /* paleta de acentos — 4 colores, como ecomlab360 */
  --c1:#FF7900; --c1-2:#E05A00;   /* coral   */
  --c2:#5B8CFF; --c2-2:#2a4fc7;   /* azul    */
  --c3:#2BD9A0; --c3-2:#15a37a;   /* verde   */
  --c4:#B459FF; --c4-2:#6b22d6;   /* púrpura */
  --lift:#2A1E78;                 /* tope del gradiente de tarjeta */
  --radius:14px; --radius-lg:22px; --pill:999px;
  --max:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 1.0625rem/1.7 'Poppins',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0; list-style:none}
/* evita que una sola palabra quede sola en el último renglón: el navegador
   reparte las líneas solo, sin tocar el texto. Sin soporte, no hace nada. */
h1,h2,h3,h4,.eyebrow,.lead{text-wrap:balance}
:focus-visible{outline:3px solid var(--brand-2); outline-offset:3px; border-radius:4px}

/* ---------- tipografía ---------- */
h1,.h1{font-size:clamp(2.6rem,6.2vw,4.6rem); font-weight:700; line-height:1.05; letter-spacing:-.02em}
h2,.h2{font-size:clamp(2rem,4.2vw,3.1rem); font-weight:700; line-height:1.12; letter-spacing:-.015em}
h3,.h3{font-size:clamp(1.3rem,2.2vw,1.6rem); font-weight:600; line-height:1.25}
.lead{font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.6; color:var(--text-2); max-width:62ch}
.small{font-size:.9375rem}
.muted{color:var(--muted)}
.t2{color:var(--text-2)}
p{max-width:68ch}
.eyebrow{
  font:500 .8125rem/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-2);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--eb,var(--brand)),transparent); flex:none}
.eyebrow--coral{color:var(--cta-2); --eb:var(--c1)}
.eyebrow--green{color:#7ff0cd; --eb:var(--c3)}
.eyebrow--violet{color:var(--violet-2); --eb:var(--c4)}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,5vw,32px)}
section{padding-block:clamp(72px,10vw,128px); position:relative}
.sec-alt{background:var(--bg-2)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead,.center p{margin-inline:auto}
.stack>*+*{margin-top:20px}
.grid{display:grid; gap:24px}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.g4{grid-template-columns:repeat(4,1fr)}}
@media(max-width:979px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
.head{max-width:760px; margin-bottom:clamp(40px,6vw,64px)}
.center.head{margin-inline:auto}

/* ============================================================
   CAPA DE FONDO — adaptada de ecomlab360 v1
   ============================================================ */
.fx{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:radial-gradient(1200px 620px at 50% -10%, rgba(46,107,255,.20), transparent 62%), var(--bg);
}
.fx__stars{position:absolute; inset:0; width:100%; height:100%}
.fx__aurora{position:absolute; inset:0; filter:blur(90px)}
.fx__blob{position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:.5; animation:drift 26s ease-in-out infinite alternate}
.fx__blob--1{width:620px; height:620px; left:8%;  top:-12%; background:var(--brand)}
.fx__blob--2{width:540px; height:540px; right:-10%; top:32%; background:var(--violet); opacity:.34; animation-duration:34s}
.fx__blob--3{width:500px; height:500px; left:18%; top:118%; background:var(--c1); opacity:.22; animation-duration:42s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(42px,-32px,0) scale(1.08)}
  100%{transform:translate3d(-32px,22px,0) scale(.96)}
}
.fx__beams{position:absolute; inset:0; overflow:hidden}
.fx__beam{
  position:absolute; top:-20%; width:2px; height:140%; opacity:0; filter:blur(1.2px);
  background:linear-gradient(to bottom, transparent, var(--brand-2), transparent);
  animation:beam 10s linear infinite;
}
.fx__beam:nth-child(1){left:18%; animation-delay:0s}
.fx__beam:nth-child(2){left:54%; animation-delay:3.4s; background:linear-gradient(to bottom,transparent,var(--violet-2),transparent)}
.fx__beam:nth-child(3){left:82%; animation-delay:6.8s}
@keyframes beam{
  0%{transform:translateY(-30%) rotate(8deg); opacity:0}
  15%,85%{opacity:.4}
  100%{transform:translateY(30%) rotate(8deg); opacity:0}
}
.fx__grain{
  position:absolute; inset:-50%; opacity:.045; pointer-events:none;
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.8'/></svg>");
  animation:grain 1.8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)}
  40%{transform:translate(4%,-2%)} 60%{transform:translate(-2%,4%)} 80%{transform:translate(3%,2%)}
}
/* las secciones dejan ver el fondo */
body{background:transparent}
.sec-alt{background:rgba(7,10,32,.80)}

/* ---------- tilt ---------- */
.tilt{transition:transform .4s var(--ease); transform-style:preserve-3d; will-change:transform}

/* ============================================================
   GRAFO ORBITAL — adaptado de ecomlab360 v1
   ============================================================ */
.graph{
  position:relative; aspect-ratio:1; width:100%; max-width:460px; margin-inline:auto;
  display:grid; place-items:center; --ring:38%;
}

/* vía: anillo con degradado que da la vuelta completa */
.graph__ring{
  position:absolute; inset:29%; border-radius:50%;
  background:conic-gradient(from -90deg, var(--brand), var(--violet) 30%, var(--cta) 62%, var(--c3) 82%, var(--brand));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity:.75;
}
/* halo suave detrás de la vía */
.graph__ring::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  background:conic-gradient(from -90deg, var(--brand), var(--violet) 30%, var(--cta) 62%, var(--c3) 82%, var(--brand));
  filter:blur(26px); opacity:.30; z-index:-1;
}
/* anillo punteado exterior, gira lento */
.graph__dash{
  position:absolute; inset:8%; border-radius:50%;
  border:1px dashed rgba(255,255,255,.10); animation:ringSpin 90s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* pulso que recorre el circuito: es el recorrido en marcha */
.graph__pulse{position:absolute; inset:29%; animation:ringSpin 11s linear infinite}
.graph__pulse i{
  position:absolute; top:-7px; left:50%; margin-left:-7px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 0 24px 7px rgba(110,155,255,.9);
}
.graph__pulse--2{animation-duration:11s; animation-delay:-5.5s}
.graph__pulse--2 i{background:var(--cta-2); box-shadow:0 0 22px 6px rgba(255,121,0,.8)}

/* centro: el 7 es el centro de gravedad de la órbita */
.graph__mid{text-align:center; width:24%; z-index:3; pointer-events:none; position:relative}
.graph__mid::before{
  content:''; position:absolute; left:50%; top:50%; width:150px; height:150px;
  margin:-75px 0 0 -75px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(46,107,255,.30), rgba(124,92,255,.12) 55%, transparent 72%);
}
.graph__mid b{
  display:block; font:700 clamp(2.8rem,7vw,4rem)/1 'Poppins',sans-serif; letter-spacing:-.04em; margin-block:6px;
  background:linear-gradient(135deg,#fff,var(--brand-2) 60%,var(--violet-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.graph__mid em{
  display:block; font-style:normal;
  font:500 .5625rem/1.4 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* órbita: siete puntos numerados sobre la vía, sin texto que se choque */
.graph__orbit{position:absolute; inset:29%; animation:ringSpin 30s linear infinite}
.node{
  position:absolute; top:50%; left:50%; z-index:4;
  transform:translate(-50%,-50%) rotate(var(--t)) translate(var(--r)) rotate(calc(-1 * var(--t)));
}
.node>span{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%; position:relative;
  animation:ringSpinRev 30s linear infinite;
  font:500 .625rem/1 'JetBrains Mono',monospace; color:var(--nc,var(--brand-2));
  background:var(--bg); border:2px solid var(--nc,var(--brand-2));
  box-shadow:0 0 0 5px rgba(11,16,48,.92), 0 0 20px -2px var(--nc,var(--brand-2));
}
@keyframes ringSpinRev{to{transform:rotate(-360deg)}}

/* halo que late, escalonado — da la sensación de sistema en marcha */
.node>span::after{
  content:''; position:absolute; inset:-3px; border-radius:50%; z-index:-1;
  border:1px solid var(--nc,var(--brand-2)); opacity:0;
  animation:nodeHalo 3.5s var(--ease) infinite;
}
@keyframes nodeHalo{
  0%{transform:scale(.85); opacity:.9}
  60%,100%{transform:scale(1.85); opacity:0}
}
.node:nth-child(1)>span::after{animation-delay:0s}
.node:nth-child(2)>span::after{animation-delay:.5s}
.node:nth-child(3)>span::after{animation-delay:1s}
.node:nth-child(4)>span::after{animation-delay:1.5s}
.node:nth-child(5)>span::after{animation-delay:2s}
.node:nth-child(6)>span::after{animation-delay:2.5s}
.node:nth-child(7)>span::after{animation-delay:3s}

/* leyenda: acá van los nombres, legibles y sin pelearse */
.graph__legend{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px;
  margin-top:30px; max-width:440px; margin-inline:auto;
}
.leg{display:grid; grid-template-columns:26px 1fr; gap:11px; align-items:center; font-size:.875rem; color:var(--text-2)}
.leg i{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-style:normal;
  font:500 .5625rem/1 'JetBrains Mono',monospace; color:var(--nc); border:1.5px solid var(--nc);
  background:rgba(255,255,255,.04);
}
.leg--loop{grid-column:1 / -1; color:var(--muted); font-size:.8125rem; padding-top:6px; border-top:1px solid var(--line); margin-top:4px}
.leg--loop i{border-style:dashed; color:var(--muted); border-color:var(--line-2)}

.graph__cap{
  display:block; text-align:center; margin-top:24px; color:var(--text-2);
  font-size:.9375rem; line-height:1.6; max-width:46ch; margin-inline:auto;
}
.graph__cap b{color:var(--text); font-weight:600}

@media(max-width:560px){
  .graph__legend{grid-template-columns:1fr; gap:9px; max-width:none}
  .node>span{width:26px; height:26px; font-size:.5625rem}
  .graph__mid b{font-size:2.2rem}
}

/* ---------- glows de fondo ---------- */
.glow{position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; z-index:0}
.glow--brand{background:rgba(46,107,255,.20)}
.glow--violet{background:rgba(124,92,255,.16)}
section>.wrap{position:relative; z-index:1}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:var(--pill); font-weight:600; font-size:1.0625rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
  min-height:52px; text-align:center;
}
.btn--cta{background-color:#FF7900; color:#FFFFFF; box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn--cta:hover{background-color:#E86E00; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.45)}
.btn--ghost{border:1px solid var(--line-2); color:var(--text)}
.btn--ghost:hover{border-color:var(--brand-2); background:var(--brand-soft); transform:translateY(-2px)}
.btn--sm{padding:12px 22px; font-size:.9375rem; min-height:44px}
.btn-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center}
/* si un CTA largo igual corta a dos líneas en mobile, que sea rectángulo redondeado, no cápsula estirada */
@media(max-width:520px){.btn{border-radius:var(--radius-lg); font-size:1rem; padding:15px 24px}}
.center .btn-row{justify-content:center}
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--brand-2);
  font-weight:600; min-height:44px; transition:gap .25s var(--ease)
}
.link-arrow:hover{gap:14px; color:var(--text)}

/* ---------- tarjetas ---------- */
.card{
  background:linear-gradient(150deg,rgba(20,27,74,.55) 0%,rgba(42,30,120,.55) 130%);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,34px); position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.85; pointer-events:none;
  background:radial-gradient(circle at 22% -10%, var(--tint,rgba(46,107,255,.22)), transparent 62%);
}
.card--hover:hover{transform:translateY(-5px); border-color:var(--edge,var(--brand)); box-shadow:0 18px 46px rgba(0,0,0,.36)}
.card__n{
  font:500 .8125rem/1 'JetBrains Mono',monospace; color:var(--cta);
  letter-spacing:.1em; margin-bottom:16px; display:block
}
.card h3{margin-bottom:12px}
.card p{color:var(--text-2)}

/* variantes de acento — se aplican con .a1 … .a4 */
.a1{--tint:rgba(255,121,0,.26); --edge:var(--c1); --g1:var(--c1); --g2:var(--c1-2)}
.a2{--tint:rgba(91,140,255,.26);  --edge:var(--c2); --g1:var(--c2); --g2:var(--c2-2)}
.a3{--tint:rgba(43,217,160,.24);  --edge:var(--c3); --g1:var(--c3); --g2:var(--c3-2)}
.a4{--tint:rgba(180,89,255,.26);  --edge:var(--c4); --g1:var(--c4); --g2:var(--c4-2)}

/* chip de icono con gradiente */
.ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--violet)));
  color:#fff; margin-bottom:20px; box-shadow:0 8px 22px -6px var(--g1,var(--brand));
}
.ico svg{width:24px; height:24px}

/* texto con gradiente */
.grad{background:linear-gradient(100deg,var(--brand-2),var(--violet-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad--warm{background:linear-gradient(100deg,var(--cta-2),var(--c4-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(9,13,40,.62); backdrop-filter:blur(16px); isolation:isolate;
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex; align-items:center; gap:24px; min-height:74px}
.logo{display:flex; align-items:center; gap:13px; flex:none}
.logo__mark{width:auto; height:46px; flex:none; display:block; transition:transform .3s var(--ease); filter:drop-shadow(0 3px 10px rgba(255,121,0,.32))}
.logo:hover .logo__mark{transform:translateY(-1px) scale(1.04)}
.logo__txt{
  font:600 .8125rem/1.15 'Poppins',sans-serif; letter-spacing:.17em; white-space:nowrap;
  text-transform:uppercase; color:var(--text);
}
.logo__txt b{display:block; font-weight:600}
.logo__txt i{
  display:block; font-style:normal; font-weight:500; font-size:.5625rem; letter-spacing:.2em;
  color:var(--muted); margin-top:4px;
}
@media(max-width:400px){.logo__mark{height:36px} .logo__txt{font-size:.6875rem; letter-spacing:.14em}}
.nav{display:flex; gap:6px; margin-left:auto}
.nav a{padding:10px 14px; border-radius:var(--pill); color:var(--text-2); font-size:.9375rem; font-weight:500; transition:color .2s, background-color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text); background:rgba(255,255,255,.06)}
/* el CTA del nav es solo para el menú móvil — en escritorio manda .hdr__cta */
.nav>.btn{display:none}

/* ---------- submenú de Soluciones ---------- */
.has-sub{position:relative}
.subtrig{
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:var(--pill);
  color:var(--text-2); font-size:.9375rem; font-weight:500; min-height:44px;
  transition:color .2s, background-color .2s;
}
.subtrig:hover,.subtrig[aria-expanded="true"]{color:var(--text); background:rgba(255,255,255,.06)}
.subtrig svg{width:11px; height:11px; transition:transform .25s var(--ease)}
.subtrig[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub{
  position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0; z-index:110;
  min-width:310px; padding:10px; border-radius:18px;
  background:rgba(14,20,58,.97); backdrop-filter:blur(18px);
  border:1px solid var(--line-2); box-shadow:0 26px 60px -16px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-sub:hover .sub,.sub.open{opacity:1; visibility:visible; transform:none}
.sub::before{content:''; position:absolute; inset:-12px 0 auto; height:14px}
.sub a{
  display:grid; grid-template-columns:34px 1fr; gap:13px; align-items:start;
  padding:12px 13px; border-radius:12px; transition:background-color .2s;
}
.sub a:hover{background:rgba(255,255,255,.07)}
.sub i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px; font-style:normal;
  background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff;
}
.sub i svg{width:17px; height:17px}
.sub b{display:block; font-size:.9375rem; font-weight:600; line-height:1.3}
.sub span{display:block; color:var(--muted); font-size:.8125rem; line-height:1.45; margin-top:3px}
@media(max-width:940px){
  .sub{
    position:static; translate:none; opacity:1; visibility:visible; transform:none;
    min-width:0; background:none; border:0; box-shadow:none; backdrop-filter:none;
    padding:4px 0 4px 12px; margin-left:8px; border-left:1px solid var(--line);
    display:none;
  }
  .sub.open{display:block}
  .subtrig{width:100%; justify-content:space-between; padding:15px 4px; font-size:1.0625rem}
  .sub a{padding:11px 4px}
}
.hdr .btn{flex:none}
.burger{display:none; width:46px; height:46px; margin-left:auto; place-items:center; border-radius:10px; border:1px solid var(--line-2)}
.burger span{display:block; width:20px; height:2px; background:var(--text); position:relative; transition:transform .3s var(--ease), background-color .2s}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:20px; height:2px; background:var(--text); transition:transform .3s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:940px){
  .nav,.hdr__cta{display:none}
  .burger{display:grid}
  .nav>.btn{display:inline-flex}
  .nav--open{
    display:flex; flex-direction:column; gap:4px; position:fixed; inset:74px 0 auto;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:20px clamp(20px,5vw,32px) 32px; margin:0; max-height:calc(100dvh - 74px); overflow-y:auto;
  }
  .nav--open a{padding:15px 4px; font-size:1.0625rem; border-radius:10px}
  .nav--open .btn{margin-top:14px; width:100%}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,9vw,110px) clamp(72px,10vw,120px); overflow:hidden}
.hero__grid{display:grid; gap:clamp(48px,6vw,72px); align-items:center}
@media(min-width:1000px){.hero__grid{grid-template-columns:1.05fr .95fr; align-items:start}
  .hero__grid>.flow{margin-top:clamp(8px,2vw,28px)}
  /* cuando el gráfico va acompañado de una foto, que ambas columnas midan lo mismo */
  .hero__grid--flow-img{align-items:stretch; grid-template-columns:1fr 1fr; margin-top:clamp(32px,4vw,56px)}
  .hero__grid--flow-img>.flow{margin-top:0; order:2}
  .hero__grid--flow-img>.flow ~ *{order:1}
}
.hero h1{margin-bottom:16px; font-size:clamp(2.3rem,5.1vw,3.7rem)}
.type-in__cursor{display:inline-block; width:3px; height:.85em; margin-left:2px; background:currentColor; vertical-align:-.1em; animation:typeBlink 1s step-end infinite}
@keyframes typeBlink{0%,100%{opacity:1} 50%{opacity:0}}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,var(--brand-2),var(--violet-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{margin-bottom:36px}
.hero__note{margin-top:22px; color:var(--muted); font-size:.9375rem; display:flex; align-items:center; gap:9px}

/* mobile/tablet: se centra todo el bloque de texto del hero, tenga o no columna con gráfico */
@media(max-width:999px){
  .hero__grid:not(.hero__grid--flow-img)>div:first-child{text-align:center}
  .hero > .wrap > .eyebrow,
  .hero > .wrap > h1,
  .hero > .wrap > .lead{text-align:center}
  .hero .btn-row{justify-content:center}
  .hero__note{justify-content:center}
  .hero .img-slot{text-align:center; margin-inline:auto}
}

/* hero con imagen de fondo ambiental, opcional: la imagen va directo como
   background-image inline en el propio elemento (nada de custom property con
   url(): en la práctica el navegador no siempre resuelve var() ahí, y el fondo
   queda invisible aunque la imagen exista). El degradado va en un ::before aparte. */
.hero--img{
  position:relative; background-size:cover; background-position:center;
  min-height:clamp(440px,64vh,660px); display:flex; align-items:center;
}
.hero--img::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(11,16,48,.72) 0%, rgba(11,16,48,.5) 45%, var(--bg) 100%);
}
/* variante para heroes "sangrados": la foto se extiende bastante más abajo
   (para que asome detrás de los cards de la sección siguiente), así que el
   fade a sólido se corre mucho más tarde, casi al borde real de la caja. */
.hero--bleed::before{
  background:linear-gradient(180deg,rgba(11,16,48,.55) 0%, rgba(11,16,48,.3) 55%, rgba(11,16,48,.2) 85%, var(--bg) 100%);
}
.hero--img>.wrap{position:relative; z-index:1}

/* hero con foto de fondo que deja ver los efectos (estrellas/aurora) detrás:
   la foto va en capa propia semi-transparente entre el fondo fijo (.fx, z-index -1)
   y el contenido (z-index 1), no como background sólido que taparía todo. */
.hero--photo{position:relative}
.hero__photo{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero__photo img{width:100%; height:100%; object-fit:cover; opacity:.42; mix-blend-mode:screen}
.hero--photo>.wrap{position:relative; z-index:1}

/* ---------- espacios de imagen pendientes (visibles hasta que se cargue el archivo real) ---------- */
.img-slot{
  border:1px dashed var(--line-2); border-radius:14px; background:rgba(255,255,255,.03);
  padding:18px 20px; font-size:.8125rem; line-height:1.6; color:var(--muted); position:relative;
}
.img-slot__tag{display:block; color:var(--brand-2); font-weight:700; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px}
.img-slot__file{display:block; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--text-2); word-break:break-all}
.img-slot img{display:none}
.img-slot--filled{border:0; background:none; padding:0}
.img-slot--filled img{display:block; width:100%; border-radius:14px}
.img-slot--filled .img-slot__tag, .img-slot--filled .img-slot__prompt, .img-slot--filled .img-slot__file{display:none}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 4px rgba(43,217,160,.16)}

/* ---------- diagrama del recorrido (hero) ---------- */
.flow{
  background:linear-gradient(160deg,rgba(20,27,74,.45),rgba(26,34,96,.45));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3.6vw,38px); position:relative; overflow:hidden;
}
.flow::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(600px 200px at 50% -10%, rgba(46,107,255,.22), transparent 70%);
  pointer-events:none;
}
.flow__t{font:500 .75rem/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:26px}
.flow__steps{display:grid; gap:0; position:relative}
.fstep{display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start; position:relative; padding-bottom:8px}
.fstep:last-child{padding-bottom:0}
.fstep__ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-soft); border:1px solid rgba(46,107,255,.4); color:var(--brand-2); z-index:1;
}
.fstep__ico svg{width:20px; height:20px}
.fstep:not(:last-child)::before{
  content:''; position:absolute; left:21px; top:44px; bottom:0; width:2px;
  background:linear-gradient(180deg,rgba(46,107,255,.5),rgba(46,107,255,.12));
}
.fstep__lbl{display:block; font-weight:600; font-size:1.0625rem; line-height:1.3}
.fstep__sub{display:block; color:var(--muted); font-size:.875rem; margin-top:4px; line-height:1.45}
/* pulso de luz que recorre la línea */
.fstep:not(:last-child)::after{
  content:''; position:absolute; left:19px; top:44px; width:6px; height:6px; border-radius:50%;
  background:var(--brand-2); box-shadow:0 0 12px 3px rgba(110,155,255,.85);
  animation:travel 3.2s var(--ease) infinite;
}
.fstep:nth-child(2)::after{animation-delay:.5s}
.fstep:nth-child(3)::after{animation-delay:1s}
@keyframes travel{
  0%,12%{transform:translateY(0); opacity:0}
  20%{opacity:1}
  72%{opacity:1}
  85%,100%{transform:translateY(72px); opacity:0}
}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--pill);
  padding:8px 16px 8px 8px; font-size:.875rem; font-weight:500; color:var(--text);
}
.chip i{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--violet))); color:#fff;
}
.chip i svg{width:15px; height:15px}

/* punto de fuga en coral */
.leak{
  grid-column:2; justify-self:start; margin-top:4px; display:inline-flex; align-items:center; gap:6px;
  font:500 .625rem/1 'JetBrains Mono',monospace; color:var(--cta);
  background:rgba(255,121,0,.12); border:1px solid rgba(255,121,0,.34);
  padding:4px 9px; border-radius:var(--pill); white-space:nowrap;
  animation:leakpulse 5.5s var(--ease) infinite;
}
.leak::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--cta); flex:none}
.fstep:nth-child(2) .leak{animation-delay:.5s}
.fstep:nth-child(3) .leak{animation-delay:1s}
@keyframes leakpulse{0%,55%{opacity:.28} 68%{opacity:1} 100%{opacity:.28}}
@media(max-width:520px){.leak{display:none}}

/* ============================================================
   RECORRIDO CON FUGAS — paso a paso horizontal
   ============================================================ */
.journey{position:relative; margin-top:clamp(44px,6vw,68px); overflow:hidden}

/* cuña que se angosta: el caudal que se pierde en el camino */
.journey__wedge{
  position:absolute; left:0; right:0; top:96px; height:74px; pointer-events:none;
  background:linear-gradient(90deg, rgba(46,107,255,.55), rgba(124,92,255,.34) 45%, rgba(255,121,0,.20));
  clip-path:polygon(0 0, 100% 34%, 100% 66%, 0 100%);
  filter:blur(.4px); opacity:.55;
}
.journey__steps{display:grid; gap:0; position:relative}
@media(min-width:900px){
  /* display:contents — los hijos van al grid padre, así las 3 filas se comparten de verdad */
  .journey__steps{grid-template-columns:repeat(6,1fr); grid-template-rows:auto 74px auto}
  .journey__steps>.jstep{display:contents}
  .journey__steps>.jstep>.jstep__head{grid-row:1}
  .journey__steps>.jstep>.jstep__node{grid-row:2}
  .journey__steps>.jstep>.jstep__leak{grid-row:3}
}

.jstep{display:grid; grid-template-rows:auto 74px auto; position:relative; text-align:center; padding-inline:6px}

.jstep__head{
  padding:0 6px 14px; display:flex; flex-direction:column; justify-content:flex-end;
  text-align:center; min-height:0;
}
.jstep__name{font-size:1rem}
@media(min-width:900px){.jstep__leak{padding-inline:6px; text-align:center}}
.jstep__n{
  display:block; font:500 .6875rem/1 'JetBrains Mono',monospace; letter-spacing:.14em;
  color:var(--muted); margin-bottom:8px;
}
.jstep__name{display:block; font-weight:600; font-size:1.0625rem; line-height:1.25}

/* nodo sobre la vía */
.jstep__node{
  place-self:center; width:20px; height:20px; border-radius:50%; position:relative; z-index:2;
  background:var(--bg-3); border:2px solid var(--g1,var(--brand));
  box-shadow:0 0 0 6px rgba(11,16,48,.9), 0 0 22px -2px var(--g1,var(--brand));
  transition:transform .3s var(--ease), box-shadow .3s;
}
.jstep__node::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--g1,var(--brand));
  animation:nodeBlink 3.4s var(--ease) infinite;
}
@keyframes nodeBlink{0%,100%{opacity:.35; transform:scale(.7)} 50%{opacity:1; transform:scale(1)}}
.jstep:nth-child(1){--g1:var(--c2)} .jstep:nth-child(2){--g1:#7B7BFF}
.jstep:nth-child(3){--g1:var(--c4)} .jstep:nth-child(4){--g1:#D95CC4}
.jstep:nth-child(5){--g1:#FF7E6E} .jstep:nth-child(6){--g1:var(--c1)}
.jstep:nth-child(2) .jstep__node::after{animation-delay:.25s}
.jstep:nth-child(3) .jstep__node::after{animation-delay:.5s}
.jstep:nth-child(4) .jstep__node::after{animation-delay:.75s}
.jstep:nth-child(5) .jstep__node::after{animation-delay:1s}
.jstep:nth-child(6) .jstep__node::after{animation-delay:1.25s}

/* flecha entre pasos */
.jstep:not(:last-child) .jstep__node::before{
  content:''; position:absolute; left:calc(100% + 10px); top:50%; width:calc(100% + 999px); max-width:none;
  height:2px; margin-top:-1px; background:linear-gradient(90deg,var(--g1),rgba(255,255,255,.10));
  z-index:-1;
}
@media(min-width:900px){
  .jstep:not(:last-child) .jstep__node::before{width:calc(100vw / 6 - 30px); max-width:190px}
}

/* la fuga que cae */
.jstep__leak{padding-top:18px; position:relative}
.jstep__leak::before{
  content:''; position:absolute; left:50%; top:0; width:2px; height:14px; margin-left:-1px;
  background:linear-gradient(180deg,rgba(255,121,0,.7),transparent);
}
.jstep__drop{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
  font:500 .625rem/1 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cta); background:rgba(255,121,0,.12); border:1px solid rgba(255,121,0,.32);
  padding:5px 10px; border-radius:var(--pill);
}
.jstep__drop::before{content:'↓'; font-size:.8125rem; line-height:1}
.jstep__leak p{font-size:.875rem; line-height:1.55; color:var(--text-2); margin-inline:auto; max-width:24ch}

/* hover: se ilumina el paso */
.jstep:hover .jstep__node{transform:scale(1.25); box-shadow:0 0 0 6px rgba(11,16,48,.9), 0 0 34px 2px var(--g1)}
.jstep:hover .jstep__name{color:var(--g1)}

/* móvil: vertical */
@media(max-width:899px){
  .journey__wedge{display:none}
  .journey__steps{gap:0}
  .jstep{
    grid-template-rows:none; grid-template-columns:20px 1fr; gap:0 20px;
    text-align:left; padding:0 0 30px; align-items:start;
  }
  .jstep__head{grid-column:2; padding-bottom:10px}
  .jstep__node{grid-column:1; grid-row:1 / span 2; place-self:start; margin-top:6px}
  .jstep:not(:last-child) .jstep__node::before{
    left:50%; top:calc(100% + 8px); width:2px; height:999px; max-width:2px; margin:0 0 0 -1px;
    background:linear-gradient(180deg,var(--g1),rgba(255,255,255,.08));
  }
  .jstep__leak{grid-column:2; padding-top:6px}
  .jstep__leak::before{display:none}
  .jstep__leak p{margin-inline:0; max-width:52ch}
  .jstep:last-child{padding-bottom:0}
}

/* ============================================================
   CHAT DE WHATSAPP SIMULADO
   ============================================================ */
.chat{
  max-width:420px; margin-inline:auto; width:100%;
  background:linear-gradient(170deg,#0d1b2a,#0a1420); border:1px solid var(--line-2);
  border-radius:26px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.chat__bar{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:rgba(255,255,255,.05); border-bottom:1px solid var(--line);
}
.chat__av{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#0B1030; border:1px solid rgba(255,255,255,.12); font:700 .75rem/1 'Poppins',sans-serif;
}
.chat__who{font-weight:600; font-size:.9375rem; line-height:1.2}
.chat__st{font-size:.75rem; color:var(--ok); display:flex; align-items:center; gap:6px; margin-top:3px}
.chat__st::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--ok)}
.chat__body{
  padding:20px 18px; display:flex; flex-direction:column; gap:12px;
  min-height:400px; justify-content:flex-end;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:22px 22px;
}
.msg{
  max-width:82%; padding:11px 15px; border-radius:16px; font-size:.9375rem; line-height:1.5;
  opacity:0; transform:translateY(10px) scale(.97); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.msg.show{opacity:1; transform:none}
.msg--in{align-self:flex-start; background:rgba(255,255,255,.09); border-bottom-left-radius:5px}
.msg--out{align-self:flex-end; background:linear-gradient(135deg,#1f6b4d,#15543b); border-bottom-right-radius:5px}
.msg--sys{
  align-self:center; max-width:92%; text-align:center; background:rgba(46,107,255,.14);
  border:1px solid rgba(46,107,255,.32); font-size:.75rem; color:var(--brand-2);
  font-family:'JetBrains Mono',monospace; letter-spacing:.04em; padding:8px 13px; border-radius:var(--pill);
}
.msg__t{display:block; font-size:.6875rem; color:rgba(255,255,255,.45); margin-top:5px; text-align:right}
.typing{
  align-self:flex-start; display:flex; gap:5px; padding:14px 16px;
  background:rgba(255,255,255,.09); border-radius:16px; border-bottom-left-radius:5px;
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .2s;
}
.typing.show{opacity:1; visibility:visible}
.typing i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); animation:typing 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}
.chat__tag{
  display:block; text-align:center; margin-top:16px; color:var(--muted);
  font:400 .75rem/1.4 'JetBrains Mono',monospace;
}

/* ============================================================
   CALCULADORA DE OPORTUNIDADES
   ============================================================ */
.calc{display:grid; gap:clamp(28px,4vw,48px)}
@media(min-width:900px){.calc{grid-template-columns:1fr 1fr}}
.field{margin-bottom:24px}
.field label{display:block; font-weight:600; font-size:.9375rem; margin-bottom:6px}
.field .hint{display:block; color:var(--muted); font-size:.8125rem; margin-bottom:12px; line-height:1.5}
.field input[type=range]{
  width:100%; height:6px; border-radius:3px; appearance:none; cursor:pointer;
  background:linear-gradient(90deg,var(--brand) var(--p,50%), rgba(255,255,255,.10) var(--p,50%));
}
.field input[type=range]::-webkit-slider-thumb{
  appearance:none; width:24px; height:24px; border-radius:50%; cursor:grab;
  background:var(--cta); border:3px solid var(--bg); box-shadow:0 4px 16px rgba(255,121,0,.5);
}
.field input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; border:3px solid var(--bg); cursor:grab;
  background:var(--cta); box-shadow:0 4px 16px rgba(255,121,0,.5);
}
.field output{
  display:block; margin-top:10px; font:700 1.5rem/1 'Poppins',sans-serif; color:var(--brand-2); letter-spacing:-.01em;
}
.calc__out{
  background:linear-gradient(160deg,var(--bg-3),var(--card-2)); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:clamp(26px,3.6vw,38px); align-self:start; position:relative; overflow:hidden;
}
.calc__out::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% 0%, rgba(255,121,0,.22), transparent 60%);
}
.calc__out>*{position:relative}
.calc__row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.calc__row span{color:var(--text-2); font-size:.9375rem}
.calc__row b{font-weight:600; font-size:1.125rem; white-space:nowrap}
.calc__hero{padding-top:24px}
.calc__hero span{display:block; color:var(--text-2); font-size:.9375rem; margin-bottom:8px}
.calc__hero b{
  display:block; font:700 clamp(2.4rem,5vw,3.4rem)/1 'Poppins',sans-serif; letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--cta-2),var(--c4)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.calc__note{color:var(--muted); font-size:.8125rem; line-height:1.55; margin-top:20px}

/* ============================================================
   MG CONNECT INTERACTIVO
   ============================================================ */
.tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(28px,4vw,44px)}
.tab{
  display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:var(--pill);
  border:1px solid var(--line-2); color:var(--text-2); font-weight:600; font-size:.9375rem; min-height:48px;
  transition:border-color .25s, color .25s, background-color .25s, transform .25s var(--ease);
}
.tab i{font:500 .6875rem/1 'JetBrains Mono',monospace; color:var(--muted); font-style:normal}
.tab:hover{border-color:var(--g1); color:var(--text); transform:translateY(-2px)}
.tab[aria-selected="true"]{
  background:linear-gradient(135deg,var(--g1),var(--g2)); border-color:transparent; color:#fff;
  box-shadow:0 10px 26px -8px var(--g1);
}
.tab[aria-selected="true"] i{color:rgba(255,255,255,.75)}

/* variante: tabs tipo carpeta, adosados arriba de un card (sin huecos, la activa se funde con el card) */
.tabs--onCard{
  display:flex; flex-wrap:wrap; gap:2px; justify-content:flex-start; margin-bottom:0;
}
.tabs--onCard .tab{
  flex:1 1 0; justify-content:center; text-align:center;
  border:1px solid var(--line); border-bottom:0; border-radius:0; background:rgba(20,27,74,.35);
  padding:14px 20px; min-height:auto; color:var(--muted); box-shadow:none;
}
.tabs--onCard .tab i{color:var(--muted)}
.tabs--onCard .tab:hover{color:var(--text); transform:none; background:rgba(255,255,255,.05)}
.tabs--onCard .tab:first-child{border-top-left-radius:14px}
.tabs--onCard .tab:last-child{border-top-right-radius:14px}
.tabs--onCard .tab[aria-selected="true"]{
  background:linear-gradient(150deg,rgba(20,27,74,.55) 0%,rgba(42,30,120,.55) 130%);
  border-color:var(--line); color:var(--text); box-shadow:inset 0 2px 0 0 var(--g1);
}
.tabs--onCard .tab[aria-selected="true"] i{color:var(--g1)}
@media(max-width:999px){.tabs--onCard{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .tabs--onCard::-webkit-scrollbar{display:none} .tabs--onCard .tab{flex:none}}

.panel{display:none}
.panel.on{display:block; animation:panelIn .45s var(--ease)}
@keyframes panelIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.panel__grid{display:grid; gap:clamp(26px,4vw,48px); align-items:start}
@media(min-width:860px){.panel__grid{grid-template-columns:1.1fr .9fr}}
.panel h3{margin-bottom:14px; font-size:clamp(1.6rem,3vw,2.1rem)}
.panel__list{display:grid; gap:12px; margin-top:22px}
.panel__list li{display:block; position:relative; padding-left:34px; color:var(--text-2); font-size:.9375rem}
.panel__list li::before{
  content:''; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px;
  background:linear-gradient(135deg,var(--g1),var(--g2)) center/12px no-repeat;
  background-image:linear-gradient(135deg,var(--g1),var(--g2)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-blend-mode:normal; background-size:cover,12px; background-position:center,center; background-repeat:no-repeat;
}
.panel__side{background:linear-gradient(160deg,var(--card),var(--card-2)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px)}
.panel__side h4{font:500 .75rem/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}

/* ---------- barra de progreso de lectura ---------- */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg,var(--brand),var(--violet),var(--cta))}

/* ============================================================
   CURSOR PERSONALIZADO — adaptado de ecomlab360 v1
   ============================================================ */
.cursor{position:fixed; top:0; left:0; width:0; height:0; pointer-events:none; z-index:9999}
.cursor__dot,.cursor__ring{position:fixed; top:0; left:0; transform:translate(-100px,-100px); will-change:transform; mix-blend-mode:screen}
.cursor__dot{
  width:6px; height:6px; border-radius:50%; background:var(--brand-2);
  box-shadow:0 0 18px var(--brand-2); transition:width .2s, height .2s, background-color .2s;
}
.cursor__ring{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--brand-2); opacity:.65;
  transition:width .25s var(--ease), height .25s var(--ease), opacity .25s, border-color .25s;
}
body.cursor-hover .cursor__ring{width:58px; height:58px; border-color:var(--cta-2); opacity:.9}
body.cursor-hover .cursor__dot{background:var(--cta-2); box-shadow:0 0 18px var(--cta-2)}
@media(hover:none){.cursor{display:none}}
@media(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ---------- fases MG Connect ---------- */
.phase .card__n{
  font:700 1.75rem/1 'Poppins',sans-serif; letter-spacing:-.02em; margin-bottom:18px;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- banda de cifras ---------- */
.stats{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
}
@media(min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:linear-gradient(160deg,var(--card),var(--card-2)); padding:clamp(26px,3.4vw,38px);
  position:relative; overflow:hidden;
}
.stat::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 20% 0%, var(--tint,rgba(46,107,255,.22)), transparent 64%);
}
.stat>*{position:relative}
.stat__n{
  font:700 clamp(2.6rem,5.4vw,3.6rem)/1 'Poppins',sans-serif; letter-spacing:-.03em; display:block;
  background:linear-gradient(135deg,var(--g1,var(--brand-2)),var(--g2,var(--violet-2)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__n sup{font-size:.42em; vertical-align:super; margin-left:2px; -webkit-text-fill-color:var(--g1,var(--brand-2))}
.stat__l{display:block; margin-top:12px; color:var(--text-2); font-size:.9375rem; line-height:1.5}
.stat__src{
  display:block; margin-top:14px; color:var(--muted);
  font:400 .6875rem/1.3 'JetBrains Mono',monospace; letter-spacing:.04em;
}

/* ---------- barra de progreso animada ---------- */
.bar{height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:18px}
.bar i{display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--g1,var(--brand)),var(--g2,var(--violet))); transition:width 1.4s var(--ease)}
.in .bar i{width:var(--w,60%)}

/* ---------- botón flotante de WhatsApp ---------- */
.fab{
  position:fixed; right:clamp(16px,3vw,26px); bottom:clamp(16px,3vw,26px); z-index:90;
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px 14px 16px; border-radius:var(--pill);
  background-color:var(--wa); color:var(--wa-ink); font-weight:600; font-size:.9375rem;
  box-shadow:0 12px 34px rgba(36,204,99,.42); min-height:56px;
  transform:translateY(18px); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), opacity .45s var(--ease), box-shadow .3s;
}
.fab.show{transform:none; opacity:1; pointer-events:auto}
.fab:hover{background-color:var(--wa-h); box-shadow:0 16px 42px rgba(36,204,99,.5); transform:translateY(-2px)}
.fab svg{width:26px; height:26px; flex:none}
.fab__t{white-space:nowrap}
.fab::after{
  content:''; position:absolute; inset:-4px; border-radius:var(--pill); z-index:-1;
  background:var(--wa); opacity:.4; animation:halo 2.6s ease-out infinite;
}
@keyframes halo{0%{transform:scale(.94);opacity:.45} 70%,100%{transform:scale(1.22);opacity:0}}
@media(max-width:560px){
  .fab{padding:0; width:60px; height:60px; justify-content:center; border-radius:50%}
  .fab__t{display:none}
}

/* ---------- lista de resultados ---------- */
.checks{display:grid; gap:16px}
@media(min-width:760px){.checks{grid-template-columns:repeat(2,1fr); gap:16px 32px}}
.checks li{display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start; color:var(--text-2)}
.checks li::before{
  content:''; width:26px; height:26px; border-radius:50%; margin-top:2px;
  background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand-2))) center/13px no-repeat;
  background-image:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand-2))),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-blend-mode:normal; background-size:cover,13px; background-position:center,center; background-repeat:no-repeat;
  border:1px solid var(--line);
}
.checks strong{color:var(--text); font-weight:600}

/* ---------- proceso ---------- */
.steps{display:grid; gap:0; counter-reset:s}
.step{display:grid; grid-template-columns:64px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{
  font:700 1.125rem/1 'Poppins',sans-serif; color:#fff;
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--violet)));
  box-shadow:0 8px 22px -8px var(--g1,var(--brand));
}
.step:nth-child(1){--g1:var(--c2); --g2:var(--c2-2)}
.step:nth-child(2){--g1:var(--c4); --g2:var(--c4-2)}
.step:nth-child(3){--g1:var(--c1); --g2:var(--c1-2)}
.step:nth-child(4){--g1:var(--c2); --g2:var(--c2-2)}
.step:nth-child(5){--g1:var(--c3); --g2:var(--c3-2)}
.step h3{margin-bottom:8px}
.step p{color:var(--text-2)}
.step__n svg{width:24px; height:24px}
@media(max-width:560px){.step:not(.svc-row){grid-template-columns:1fr; gap:14px}}

/* fila de servicio en la home: ícono + texto + "Ver más", toda la fila es clicable */
.svc-row{
  text-decoration:none; color:inherit; grid-template-columns:52px 1fr auto; align-items:center; gap:22px;
  transition:background-color .2s;
}
.svc-row:hover{background:rgba(255,255,255,.03)}
.svc-row h3{margin-bottom:2px; font-size:1.0625rem}
.svc-row .t2{font-size:.9375rem}
.svc-row .link-arrow{white-space:nowrap}
@media(max-width:480px){.svc-row{grid-template-columns:44px 1fr auto; gap:18px}}

/* tarjetas de "¿Qué necesitas?": chicas, ícono + título corto + "Ver más" */
.need-card{
  text-decoration:none; color:inherit; padding:clamp(18px,2.2vw,24px);
  display:flex; align-items:center; gap:16px;
}
.need-card .ico{margin-bottom:0; width:40px; height:40px; flex:none}
.need-card .ico svg{width:20px; height:20px}
.need-card h3{font-size:.9375rem; font-weight:600; line-height:1.35; flex:1}
.need-card .link-arrow{white-space:nowrap; flex:none}
@media(max-width:768px){
  .need-card{display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:6px; align-items:start}
  .need-card .ico{grid-row:1 / 3; grid-column:1}
  .need-card h3{grid-row:1; grid-column:2}
  .need-card .link-arrow{grid-row:2; grid-column:2}
}

/* ---------- cita ---------- */
.quote{
  border-left:3px solid var(--brand); padding:6px 0 6px 26px; margin-top:36px;
  font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.5; color:var(--text); font-weight:500; max-width:62ch;
}

/* ---------- fundadores ---------- */
.founder{display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:start}
.founder__ph{
  width:96px; height:96px; border-radius:20px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--bg-3),var(--card-2));
  border:1px solid var(--line-2); font:700 1.5rem/1 'Poppins',sans-serif; color:var(--brand-2);
}
.founder h3{margin-bottom:6px}
.founder .role{color:var(--text-2); font-size:.9375rem; margin-bottom:14px}
@media(max-width:480px){.founder{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  padding:24px 44px 24px 0; font-weight:600; font-size:1.0625rem; cursor:pointer;
  position:relative; list-style:none; line-height:1.45; transition:color .2s;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--brand-2)}
.faq__i summary::after{
  content:''; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:2px solid var(--brand-2); border-bottom:2px solid var(--brand-2);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq__i[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq__i p{padding:0 0 26px; color:var(--text-2); max-width:74ch}

/* ---------- CTA final ---------- */
.cta-final{
  background:linear-gradient(150deg,var(--bg-3),var(--card-2) 60%,var(--bg-2));
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:clamp(44px,7vw,84px) clamp(26px,5vw,64px); text-align:center; position:relative; overflow:hidden;
}
.cta-final::before{
  content:''; position:absolute; inset:auto 0 -60% 0; height:120%;
  background:radial-gradient(closest-side, rgba(46,107,255,.24), transparent);
  pointer-events:none;
}
.cta-final>*{position:relative}
.cta-final h2{margin-bottom:20px}
.cta-final .lead{margin-bottom:36px; margin-inline:auto}
.cta-final .btn-row{justify-content:center}
.cta-final p{margin-inline:auto}

/* ---------- footer ---------- */
.ftr{background:var(--bg-2); border-top:1px solid var(--line); padding-block:64px 34px}
.ftr__grid{display:grid; gap:40px}
@media(min-width:820px){.ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
@media(max-width:819px) and (min-width:520px){.ftr__grid{grid-template-columns:repeat(2,1fr)}}
.ftr h3{margin-bottom:20px}
.ftr li+li{margin-top:11px}
.ftr a{color:var(--text-2); font-size:.9375rem; transition:color .2s}
.ftr a:hover{color:var(--brand-2)}
.ftr__tag{color:var(--muted); font-size:.9375rem; margin-top:16px; max-width:32ch}
.ftr__bot{margin-top:52px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; color:var(--muted); font-size:.875rem}

/* ---------- animación de entrada ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------- accesibilidad ---------- */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--cta); color:var(--cta-ink); padding:14px 22px; border-radius:0 0 12px 0; font-weight:600}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============================================================
   MÓVIL — repaso 320 / 360 / 390 / 768
   ============================================================ */
@media(max-width:768px){
  html,body{max-width:100%; overflow-x:hidden}
  .wrap{padding-inline:20px}
  section{padding-block:clamp(56px,11vw,76px)}

  /* los glows decorativos generan scroll lateral en pantallas chicas */
  .glow{display:none}

  .panel__side,.card,.calc__out{min-width:0}
  .grid,.g2,.g3,.g4,.stats,.calc,.panel__grid,.hero__grid{grid-template-columns:1fr !important}

  /* el orden visual no puede quedar invertido */
  .hero__grid>.flow{margin-top:8px}
  [style*="order:2"]{order:0 !important}

  body{font-size:1rem}
  .lead{font-size:1.0625rem}
  .quote{font-size:1.125rem; padding-left:18px}

  .btn-row{gap:12px}
  .btn-row .btn{width:100%}
  .cta-final .btn-row .btn{width:auto; min-width:min(100%,320px)}

  .graph{max-width:340px}
  .node{--r:30% !important}

  .chat{max-width:100%}
  .chat__body{min-height:340px; padding:16px 14px}
  .msg{max-width:88%; font-size:.9375rem}

  /* pestañas: scroll horizontal en su propia caja, nunca la página */
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:6px; margin-inline:-20px; padding-inline:20px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}

  /* módulos con muchas tarjetas: carrusel horizontal en vez de columna larga */
  .rail{
    display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory;
    margin-inline:-20px; padding:4px 20px 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    overflow-anchor:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 82%; scroll-snap-align:start; min-width:0; overflow-anchor:none}

  .founder{grid-template-columns:76px 1fr; gap:16px}
  .founder__ph{width:76px; height:76px; font-size:1.25rem}
  .ftr__bot{flex-direction:column; gap:8px}
}

@media(max-width:400px){
  .wrap{padding-inline:16px}
  .hdr__in{min-height:66px; gap:12px}
  .nav--open{inset-block-start:66px}
  h1,.h1{font-size:clamp(2.1rem,9vw,2.7rem)}
  .graph{max-width:300px}
  .node{font-size:.5rem; padding:4px 8px}
  .calc__hero b{font-size:2.1rem}
  .stat__n{font-size:2.6rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

/* ---------- ícono de WhatsApp en los CTA ---------- */
.btn[data-wa]::before{
  content:''; width:20px; height:20px; flex:none; background:currentColor;
  -webkit-mask:var(--wa-icon) center/contain no-repeat; mask:var(--wa-icon) center/contain no-repeat;
}
:root{
  --wa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.5-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.4.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3a8.2 8.2 0 1 1 7.2 3.9z'/%3E%3C/svg%3E");
}
.btn--sm[data-wa]::before{width:17px; height:17px}

/* los botones nunca heredan mezclas ni filtros del entorno */
.btn{position:relative; z-index:1; isolation:isolate; mix-blend-mode:normal}
.fab{isolation:isolate; mix-blend-mode:normal}

/* ---------- páginas legales ---------- */
.legal h2{font-size:clamp(1.15rem,2.2vw,1.4rem); font-weight:600; margin-top:36px; margin-bottom:6px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-2); max-width:none}
.legal a{color:var(--brand-2); text-decoration:underline; text-underline-offset:3px}

/* ---------- rol del fundador ---------- */
.rolo{
  display:inline-block; margin-right:10px; padding:4px 10px; border-radius:var(--pill);
  background:var(--brand-soft); border:1px solid rgba(110,155,255,.32); color:var(--brand-2);
  font:600 .625rem/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase;
  vertical-align:middle;
}

/* ---------- bloque de equipo ---------- */
.team{
  margin-top:clamp(32px,4vw,48px); padding:clamp(26px,3.6vw,40px);
  background:linear-gradient(150deg,var(--card),var(--card-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.team__t{
  font:500 .75rem/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.team__d{color:var(--text-2); max-width:74ch; font-size:1.0625rem; line-height:1.7}
.team__areas{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.team__areas li{
  padding:8px 15px; border-radius:var(--pill); border:1px solid var(--line-2);
  color:var(--text-2); font-size:.875rem;
}

/* ancla bajo el header fijo */
section[id]{scroll-margin-top:96px}

/* aviso de vista previa (solo mientras PREVIEW esté activo) */
.pv-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,14px);
  z-index:10000; max-width:min(92vw,420px); text-align:center;
  padding:13px 20px; border-radius:var(--pill);
  background:var(--card); border:1px solid var(--line-2); color:var(--text);
  font-size:.875rem; line-height:1.4; box-shadow:0 12px 32px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.pv-toast.on{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.pv-toast{transition:none}}

/* ---------- tarjetas de caso ---------- */
.case{display:flex; flex-direction:column; gap:0}
.case__tipo{
  font:500 .6875rem/1 'JetBrains Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.case__n{
  display:block; font:700 clamp(2.2rem,4.4vw,3rem)/1 'Poppins',sans-serif; letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--g1,var(--brand-2)),var(--g2,var(--violet-2)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.case__m{
  font-size:.9375rem; line-height:1.5; color:var(--text-2);
  margin:10px 0 20px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.case__steps{margin:0; display:grid; gap:14px}
.case__steps dt{
  font:500 .625rem/1 'JetBrains Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tint-solid,var(--brand-2)); margin-bottom:5px;
}
.case__steps dd{margin:0; color:var(--text-2); font-size:.9375rem; line-height:1.55}
.case.a1 .case__steps dt{color:var(--c1)}
.case.a2 .case__steps dt{color:var(--c2)}
.case.a3 .case__steps dt{color:var(--c3)}
.case.a4 .case__steps dt{color:var(--c4)}

/* una sección marcada hidden no se muestra bajo ninguna circunstancia */
[hidden]{display:none !important}

/* La card del fundador acepta una foto sin cambiar nada más:
   basta con poner <img> dentro de .founder__ph en lugar de las iniciales. */
.founder__ph{overflow:hidden; padding:0; position:relative}
.founder__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* ═══════════ Canal alternativo a WhatsApp ═══════════ */
.altc{
  display:block; margin-top:14px; background:none; border:0; padding:6px 2px;
  color:var(--muted); font:400 .875rem/1.4 'Poppins',sans-serif; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer; transition:color .2s;
}
.altc:hover{color:var(--text-2)}
.btn-row + .altc{margin-top:16px}
.cta-final .altc{margin-inline:auto; text-align:center}
.ftr .altc{margin-top:10px; font-size:.875rem}

.dlg{
  border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:0;
  background:linear-gradient(160deg,var(--card),var(--card-2)); color:var(--text);
  width:min(92vw,480px); box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.dlg::backdrop{background:rgba(4,7,22,.72); backdrop-filter:blur(3px)}
.dlg__in{padding:clamp(24px,4vw,34px)}
.dlg__top{display:flex; align-items:flex-start; gap:16px; margin-bottom:20px}
.dlg__top h2{font-size:1.25rem; line-height:1.3; margin:0}
.dlg__x{
  margin-left:auto; flex:none; width:36px; height:36px; border-radius:10px;
  background:none; border:1px solid var(--line-2); color:var(--text-2);
  font-size:1.125rem; line-height:1; cursor:pointer; transition:background-color .2s;
}
.dlg__x:hover{background:rgba(255,255,255,.07)}
.dlg__sub{color:var(--text-2); font-size:.9375rem; line-height:1.6; margin:0 0 22px}

.frm{display:grid; gap:16px}
.frm__f{display:grid; gap:6px}
.frm__f label{font-size:.875rem; font-weight:500; color:var(--text-2)}
.frm__f label span{color:var(--muted); font-weight:400}
.frm__f input,.frm__f textarea{
  width:100%; padding:12px 14px; border-radius:10px; font:400 1rem/1.4 'Poppins',sans-serif;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--text);
  transition:border-color .2s;
}
.frm__f textarea{min-height:84px; resize:vertical}
.frm__f input:focus,.frm__f textarea:focus{outline:none; border-color:var(--brand-2)}
.frm__f input[aria-invalid="true"],.frm__f textarea[aria-invalid="true"]{border-color:var(--cta-2)}
.frm__e{font-size:.8125rem; color:var(--cta-2); min-height:1.1em}
.frm__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.frm button[type="submit"]{width:100%; justify-content:center}
.frm button[type="submit"][disabled]{opacity:.6; cursor:progress}
.frm__msg{font-size:.9375rem; line-height:1.6; padding:14px 16px; border-radius:10px; margin:0}
.frm__msg--ok{background:rgba(43,217,160,.10); border:1px solid rgba(43,217,160,.34); color:var(--text)}
.frm__msg--err{background:rgba(255,121,0,.10); border:1px solid rgba(255,121,0,.34); color:var(--text)}
.frm__legal{font-size:.75rem; line-height:1.55; color:var(--muted); margin:0}
.frm__legal a{color:var(--text-2); text-decoration:underline; text-underline-offset:2px}
@media(max-width:400px){.dlg__in{padding:22px 18px}}

/* ---------- lightbox: click en una foto de caso para verla más grande ---------- */
.card .img-slot--filled img{cursor:zoom-in}
.lightbox{
  position:fixed; inset:0; z-index:300; display:none; place-items:center;
  background:rgba(4,6,20,.92); backdrop-filter:blur(6px); padding:32px; cursor:zoom-out;
}
.lightbox.on{display:grid}
.lightbox img{max-width:min(1200px,92vw); max-height:88vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__close{
  position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--line); color:#fff;
  display:grid; place-items:center; cursor:pointer;
}

/* ---------- flechas de navegación para los módulos .rail (carrusel) ---------- */
.rail-wrap{position:relative}
.rail-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:5; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:rgba(9,13,40,.75); backdrop-filter:blur(6px);
  border:1px solid var(--line); color:#fff; cursor:pointer; transition:opacity .2s,transform .2s;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.rail-arrow:hover{transform:translateY(-50%) scale(1.06); border-color:var(--brand)}
.rail-arrow[disabled]{opacity:0; pointer-events:none}
.rail-arrow--prev{left:-6px}
.rail-arrow--next{right:-6px}
/* en mobile el swipe nativo ya alcanza; las flechas ahí solo tapan contenido */
@media(max-width:768px){.rail-arrow{display:none !important}}

/* ---------- puntos de paginación para los .rail en mobile ---------- */
.rail-dots{display:none; justify-content:center; gap:8px; margin-top:14px}
@media(max-width:768px){.rail-dots{display:flex}}
.rail-dot{width:7px; height:7px; border-radius:50%; background:var(--line); border:0; padding:0; cursor:pointer; transition:background .2s,width .2s}
.rail-dot.on{background:var(--brand); width:20px; border-radius:4px}