/* ===== Sitio Conectado ===== */
:root{
  --bg:#05070d;
  --bg2:#080c18;
  --card:#0c1222;
  --card2:#101830;
  --line:rgba(148,163,207,.14);
  --line2:rgba(148,163,207,.28);
  --txt:#e8edf7;
  --muted:#93a0b8;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --wa:#25d366;
  --grad:linear-gradient(100deg,var(--cyan),var(--violet));
  --r:18px;
  --f-tit:"Outfit",system-ui,sans-serif;
  --f-txt:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:400 16px/1.65 var(--f-txt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-tit);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:700;max-width:22ch}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.9em 1.5em;border-radius:999px;font:600 1rem/1 var(--f-txt);border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;cursor:pointer;white-space:nowrap}
.btn svg{width:1.25em;height:1.25em}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:.65em 1.15em;font-size:.92rem}
.btn--wa{background:var(--wa);color:#04210f;box-shadow:0 8px 30px -8px rgba(37,211,102,.6)}
.btn--grad{background:var(--grad);color:#fff;box-shadow:0 8px 30px -10px rgba(139,92,246,.7)}
.btn--line{border-color:var(--line2);background:rgba(255,255,255,.03)}
.btn--line:hover{border-color:var(--cyan);background:rgba(34,211,238,.06)}

/* Navegación */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.is-scroll{background:rgba(5,7,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav__links{display:flex;gap:28px;font-size:.95rem;color:var(--muted)}
.nav__links a:hover{color:var(--txt)}
.logo{display:flex;align-items:center;gap:10px}
.logo__mark{width:38px;height:38px}
.logo__txt{font:600 1.25rem/1 var(--f-tit);letter-spacing:-.01em}
.logo__txt b{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo__line{stroke-dasharray:60;animation:trazo 3s ease-in-out infinite alternate}
@keyframes trazo{from{stroke-dashoffset:60;opacity:.4}to{stroke-dashoffset:0;opacity:1}}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;overflow:hidden;isolation:isolate}
.red-fondo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.6;pointer-events:none}
.hero__glow{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(600px 400px at 15% 20%,rgba(34,211,238,.13),transparent 70%),
  radial-gradient(700px 500px at 85% 70%,rgba(139,92,246,.16),transparent 70%)}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:.6em;padding:.45em 1em;border:1px solid var(--line2);border-radius:999px;font:500 .78rem/1.3 var(--f-txt);letter-spacing:.06em;text-transform:uppercase;color:#b8c4dc;background:rgba(12,18,34,.6);margin-bottom:1.6em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:late 2s infinite}
@keyframes late{70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:2em 0 2.4em}
.hero__datos{display:flex;flex-wrap:wrap;gap:36px;list-style:none;padding:0;margin:0}
.hero__datos li{display:flex;flex-direction:column}
.hero__datos b{font:700 1.7rem/1.1 var(--f-tit)}
.hero__datos span{font-size:.85rem;color:var(--muted)}

/* Tarjeta de flujo */
.flujo{background:linear-gradient(180deg,rgba(16,24,48,.85),rgba(8,12,24,.9));border:1px solid var(--line2);border-radius:22px;padding:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(139,92,246,.06) inset;backdrop-filter:blur(8px)}
.flujo__barra{display:flex;align-items:center;gap:6px;padding:2px 4px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.flujo__barra span{width:10px;height:10px;border-radius:50%;background:#2a3350}
.flujo__barra em{margin-left:auto;font:500 .75rem/1 ui-monospace,Consolas,monospace;color:var(--muted);font-style:normal}
.flujo__pasos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flujo__pasos li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line);opacity:.35;animation:paso 10s infinite;animation-delay:calc(var(--i)*1.2s)}
.flujo__pasos li div{flex:1;min-width:0}
.flujo__pasos b{display:block;font-size:.95rem}
.flujo__pasos small{display:block;color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok{font:600 .75rem/1 ui-monospace,Consolas,monospace;color:var(--wa)}
@keyframes paso{0%,4%{opacity:.35;border-color:var(--line);transform:none}10%,80%{opacity:1;border-color:rgba(34,211,238,.45);transform:translateX(4px)}92%,100%{opacity:.35;border-color:var(--line);transform:none}}

/* Iconos (máscaras SVG) */
.ico{flex:none;display:inline-grid;width:42px;height:42px;border-radius:12px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.22);position:relative}
.ico::after{content:"";position:absolute;inset:10px;background:var(--grad);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico--wa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E")}
.ico--bot{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v3h4a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h4V2Zm-2 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM1 10h2v5H1zm20 0h2v5h-2z'/%3E%3C/svg%3E")}
.ico--pay{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2H2V6Zm0 5h20v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7Zm3 4v2h5v-2H5Z'/%3E%3C/svg%3E")}
.ico--box{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 2 6v12l10 5 10-5V6L12 1Zm0 2.2L19.6 7 12 10.8 4.4 7 12 3.2ZM4 8.6l7 3.5v8.3l-7-3.5V8.6Zm9 11.8v-8.3l7-3.5v8.3l-7 3.5Z'/%3E%3C/svg%3E")}
.ico--bell{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7v4l-2 3v1h18v-1l-2-3V9a7 7 0 0 0-7-7Zm-3 17a3 3 0 0 0 6 0H9Z'/%3E%3C/svg%3E")}
.ico--cal{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2ZM5 9v10h14V9H5Zm2 2h4v4H7v-4Z'/%3E%3C/svg%3E")}
.ico--web{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm1 5v9h16V9H4Zm1-3v1.5h2V6H5Zm3 0v1.5h2V6H8Zm-2 5h7v5H6v-5Zm9 0h3v2h-3v-2Zm0 3h3v2h-3v-2Z'/%3E%3C/svg%3E")}
.ico--cart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 2h3.6l1 3H23l-3 9H7.4l-.7 2H20v2H4l1.8-5.2L3.2 4H1V2Zm7 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E")}
.ico--flow{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h7v6H2V3Zm13 0h7v6h-7V3Zm-6.5 12H15v6H8.5v-6ZM5 9h2v3h10V9h2v5h-6v1h-2v-1H5V9Z'/%3E%3C/svg%3E")}
.ico--seo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2Zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm-3 7h2v3H7v-3Zm3-3h2v6h-2V8Zm3 1.5h2V14h-2V9.5Z'/%3E%3C/svg%3E")}
.ico--shield{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4Zm-1.2 15.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E")}

/* Secciones */
.sec{padding:110px 0;position:relative}
.sec--alt{background:linear-gradient(180deg,transparent,rgba(8,12,24,.72) 18%,rgba(8,12,24,.72) 82%,transparent)}
.kicker{font:600 .8rem/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.1em}
.sub{color:var(--muted);font-size:1.08rem;max-width:60ch;margin-bottom:2.6em}
h2+.grid3{margin-top:2.4em}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card,.serv{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:border-color .25s,transform .25s,background .25s}
.card:hover,.serv:hover{border-color:rgba(34,211,238,.4);transform:translateY(-4px);background:var(--card2)}
.card p,.serv p{color:var(--muted);margin:0}
.card__n{display:block;font:700 .85rem/1 ui-monospace,Consolas,monospace;color:var(--violet);margin-bottom:1.4em}
.serv .ico{margin-bottom:1.2em}

/* Automatizaciones */
.auto{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.lista{list-style:none;padding:0;margin:0 0 2.2em;display:grid;gap:12px}
.lista li{padding-left:32px;position:relative}
.lista--2{grid-template-columns:1fr 1fr;gap:12px 22px;font-size:.95rem}
.lista b{color:var(--txt);font-weight:600}
.auto{align-items:start}
.auto .nodos{position:sticky;top:100px}
.lista li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:6px;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.nodos{background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.12),transparent 65%),var(--card);border:1px solid var(--line);border-radius:24px;padding:20px}
.nodos svg{width:100%;height:auto;display:block}
.nodos__lineas path{stroke-dasharray:6 6;animation:fluye 1.2s linear infinite;opacity:.7}
@keyframes fluye{to{stroke-dashoffset:-24}}
.nodos__caja rect{fill:#0f1730;stroke:var(--line2)}
.nodos__caja rect.centro{fill:url(#lg2);stroke:none}
.nodos__caja text{fill:#dbe3f3;font:600 14px var(--f-txt);text-anchor:middle}
.nodos__caja text.centro{fill:#fff;font:800 20px var(--f-tit)}

/* Portafolio */
.port{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proy{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.proy:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5);box-shadow:0 24px 60px -30px rgba(139,92,246,.6)}
.proy__img{aspect-ratio:16/10;overflow:hidden;background:#0a0f1d;border-bottom:1px solid var(--line)}
.proy__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.proy:hover .proy__img img{transform:scale(1.04)}
.proy__txt{padding:20px 22px 24px}
.proy__txt h3{margin:.5em 0 .3em}
.proy__txt p{color:var(--muted);font-size:.95rem;margin:0}
.tag{display:inline-block;font:600 .72rem/1 var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);padding:.45em .7em;border-radius:6px;background:rgba(34,211,238,.08)}
.proy--tuyo{border-style:dashed;border-color:var(--line2);background:transparent}
.proy__tuyo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:6px}
.proy__tuyo>.grad{font:800 3.4rem/1 var(--f-tit)}
.proy__tuyo p{color:var(--muted)}

/* Tiendas y envíos */
.envios{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.envios__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.envios__grid .serv{padding:22px}
.envios__grid .serv h3{font-size:1.05rem}
.envios__grid .serv p{font-size:.92rem}
.envios__paq{margin:22px 0 0;color:var(--muted);font-size:.92rem}
.envios__paq span{display:inline-block;margin-right:8px;font:600 .72rem/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:.5em .7em;border:1px solid rgba(34,211,238,.3);border-radius:6px}
.mapa{position:relative;background:radial-gradient(circle at 52% 60%,rgba(34,211,238,.12),transparent 60%),var(--card);border:1px solid var(--line);border-radius:24px;padding:18px}
.mapa svg{width:100%;height:auto;display:block}
.mapa__rutas path{stroke-dasharray:5 7;animation:fluye 1.4s linear infinite;opacity:.75}
.mapa__dest circle{fill:#0f1730;stroke:#8b5cf6;stroke-width:2}
.mapa__dest text{fill:#dbe3f3;font:600 12px var(--f-txt);text-anchor:middle}
.mapa__origen circle{fill:url(#lg3);animation:late2 2.2s ease-out infinite;transform-origin:210px 190px}
.mapa__origen text{font-size:20px;text-anchor:middle}
@keyframes late2{0%{filter:drop-shadow(0 0 0 rgba(34,211,238,.7))}70%{filter:drop-shadow(0 0 14px rgba(34,211,238,0))}}
.mapa__tag{margin-top:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.mapa__tag b{color:var(--txt)}

/* WhatsApp con API */
.wa-sec{background:radial-gradient(700px 400px at 50% 0%,rgba(37,211,102,.08),transparent 70%)}
.wa-sec__head{text-align:center}
.wa-sec__head h2,.wa-sec__head .sub{margin-inline:auto}
.wa-sec__head h2{max-width:24ch}
.wa-sec .kicker{color:var(--wa)}
.wa-pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wa-pasos li{padding:26px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);position:relative;transition:border-color .25s,transform .25s}
.wa-pasos li:hover{border-color:rgba(37,211,102,.45);transform:translateY(-4px)}
.wa-pasos__n{display:block;font:600 .78rem/1 ui-monospace,Consolas,monospace;color:var(--wa);margin-bottom:1em}
.wa-pasos h3{font-size:1.1rem}
.wa-pasos p{color:var(--muted);margin:0;font-size:.95rem}
.wa-regla{display:flex;align-items:center;gap:16px;margin:26px auto 0;max-width:760px;padding:18px 22px;border-radius:16px;border:1px solid rgba(37,211,102,.35);background:rgba(37,211,102,.06)}
.wa-regla p{margin:0;color:#c9d2e4}
.wa-regla b{color:var(--txt)}

/* Plantillas */
.plant{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pl{display:block;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.pl:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.5)}
.pl__img{aspect-ratio:4/5;overflow:hidden;background:#0a0f1d}
.pl__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 3s ease}
.pl:hover .pl__img img{transform:translateY(-12%)}
.pl__txt{padding:16px 18px 20px}
.pl__txt h3{font-size:1.05rem;margin:0 0 .25em}
.pl__txt p{color:var(--muted);font-size:.9rem;margin:0}

/* Proceso */
.pasos{list-style:none;padding:0;margin:2.6em 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:p}
.pasos li{position:relative;padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.pasos span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grad);font:800 1.15rem/1 var(--f-tit);margin-bottom:1.1em}
.pasos p{color:var(--muted);margin:0;font-size:.95rem}

/* Paquetes */
.precios{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:30px 26px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
.plan--top{border-color:transparent;background:linear-gradient(var(--card2),var(--card2)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 30px 70px -35px rgba(139,92,246,.7)}
.plan__badge{position:absolute;top:-12px;left:26px;font:700 .72rem/1 var(--f-txt);letter-spacing:.06em;text-transform:uppercase;padding:.5em .9em;border-radius:999px;background:var(--grad)}
.plan__para{color:var(--muted);font-size:.92rem;min-height:2.8em}
.plan__precio{font:800 2.1rem/1 var(--f-tit);margin:.2em 0 1em}
.plan__precio small{font:500 .82rem var(--f-txt);color:var(--muted)}
.plan__precio--txt{font-size:1.8rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.8em;display:grid;gap:10px;flex:1}
.plan li{padding-left:24px;position:relative;font-size:.94rem;color:#c9d2e4}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:700}
.plan .btn{width:100%}
.lanz{margin:-1.2em 0 34px;color:var(--muted);font-size:.98rem}
.lanz span{display:inline-block;margin-right:8px;font:700 .8rem/1 var(--f-txt);letter-spacing:.04em;padding:.55em .9em;border-radius:999px;background:linear-gradient(100deg,rgba(34,211,238,.18),rgba(139,92,246,.22));border:1px solid rgba(139,92,246,.45);color:var(--txt)}
.plan__antes{margin:0;color:var(--muted);font-size:.88rem;text-decoration:line-through;text-decoration-color:rgba(248,113,113,.8)}
.como__tit{margin:70px 0 22px;font-size:1.5rem}
.como{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.como li{display:flex;gap:16px;padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.como li>span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);font:800 1.05rem/1 var(--f-tit)}
.como h4{margin:4px 0 6px;font:600 1.08rem/1.25 var(--f-tit)}
.como p{margin:0;color:var(--muted);font-size:.94rem}
.como b{color:var(--txt)}
.mant{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.mant__c{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t p" "t b";gap:8px 24px;align-items:center;padding:26px 28px;border-radius:22px;border:1px solid var(--line2);background:var(--card)}
.mant__c>div{grid-area:t}
.mant__c h3{font-size:1.25rem}
.mant__c p{margin:0;color:var(--muted)}
.mant__c b{color:var(--txt)}
.mant__c .mant__p{grid-area:p;font:800 1.9rem/1 var(--f-tit);color:var(--txt);text-align:right;white-space:nowrap}
.mant__p small{font:500 .8rem var(--f-txt);color:var(--muted)}
.mant__c .btn{grid-area:b;justify-self:end}
.mant__c--top{background:radial-gradient(400px 180px at 100% 0%,rgba(139,92,246,.18),transparent),var(--card);border-color:rgba(139,92,246,.5)}

/* FAQ */
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.faq__lista{display:grid;gap:12px}
details{border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .2s}
details[open]{border-color:rgba(34,211,238,.4)}
summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font:400 1.6rem/1 var(--f-tit);color:var(--cyan);transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 22px 20px;margin:0;color:var(--muted)}

/* CTA y pie */
.cta{padding:40px 0 110px}
.cta__in{text-align:center;padding:70px 30px;border-radius:28px;border:1px solid var(--line2);background:radial-gradient(600px 300px at 50% 0%,rgba(139,92,246,.22),transparent 70%),radial-gradient(500px 260px at 50% 100%,rgba(34,211,238,.14),transparent 70%),var(--card)}
.cta__in h2{margin-inline:auto}
.cta__in p{color:var(--muted);font-size:1.1rem}
.cta .hero__cta{justify-content:center;margin-bottom:0}
.pie{border-top:1px solid var(--line);padding:70px 0 0;background:linear-gradient(180deg,rgba(5,7,13,.55),rgba(3,5,10,.92));color:var(--muted);font-size:.93rem}
.pie__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
.pie__marca p{max-width:38ch;margin:16px 0 22px}
.pie h3{font:600 .8rem/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--txt);margin:6px 0 18px}
.pie nav a,.pie__cols>div:last-child a{display:block;padding:5px 0;transition:color .2s}
.pie nav a:hover,.pie__cols a:hover{color:var(--cyan)}
.pie__cols>div:last-child p{margin:8px 0 0}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin-top:56px;padding:24px 0 30px;border-top:1px solid var(--line);font-size:.86rem}
.pie__base p{margin:0}
.pie__base a:hover{color:var(--cyan)}
.wa-flot{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff;box-shadow:0 10px 30px -6px rgba(37,211,102,.7);transition:transform .2s}
.wa-flot:hover{transform:scale(1.08)}
.wa-flot svg{width:30px;height:30px}

/* Aparición al hacer scroll */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* Responsivo */
@media (max-width:1024px){
  .precios{grid-template-columns:repeat(2,1fr)}
  .pasos,.wa-pasos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav__links{display:none}
  .hero__in,.auto,.faq,.envios{grid-template-columns:1fr;gap:44px}
  .grid3,.port,.plant{grid-template-columns:1fr 1fr}
  .como,.mant{grid-template-columns:1fr}
  .pie__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .sec{padding:80px 0}
  .grid3,.port,.precios,.pasos,.wa-pasos,.envios__grid,.lista--2{grid-template-columns:1fr}
  .wa-regla{align-items:flex-start}
  .hero{padding-top:100px}
  .hero__cta .btn{flex:1 1 100%}
  .hero__datos{gap:24px}
  .flujo{padding:14px}
  .mant__c{grid-template-columns:1fr;grid-template-areas:"t" "p" "b"}
  .mant__c .mant__p{text-align:left}
  .mant__c .btn{justify-self:stretch}
  .cta__in{padding:50px 20px}
  .logo__txt{font-size:1.1rem}
  .pie__cols{grid-template-columns:1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .flujo__pasos li{opacity:1}
  .js .reveal{opacity:1;transform:none}
}

/* Páginas legales */
.legal-pg .nav{position:sticky}
.legal{max-width:780px;padding:60px 0 90px}
.legal h1{font-size:clamp(2rem,5vw,3rem)}
.legal h2{font-size:1.35rem;margin:2.2em 0 .6em;max-width:none}
.legal p,.legal li{color:#c3cbdc}
.legal ul{padding-left:1.2em;display:grid;gap:6px}
.legal a{color:var(--cyan)}
.legal__fecha{color:var(--muted);font-size:.9rem}
.legal-pg .pie{padding-top:0}
.legal-pg .pie__base{margin-top:0}
.pend{background:rgba(250,204,21,.18);color:#fde047;padding:0 .25em;border-radius:4px}

@media (max-width:1180px) and (min-width:901px){.nav__links{gap:18px;font-size:.88rem}}
@media (max-width:900px){.auto .nodos{position:static}}

/* ===== Celular: menú, carruseles y tamaños ===== */
.nav__acc{display:flex;align-items:center;gap:10px}
.nav__menu{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.03);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav__menu span{display:block;width:18px;height:2px;border-radius:2px;background:var(--txt);transition:transform .25s,opacity .25s}
.nav.is-open .nav__menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__menu span:nth-child(2){opacity:0}
.nav.is-open .nav__menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.desliza{display:none}

@media (max-width:900px){
  .nav__menu{display:flex}
  .nav__links{display:flex;position:fixed;left:0;right:0;top:72px;flex-direction:column;gap:0;padding:8px 16px 18px;background:rgba(5,7,13,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);font-size:1.05rem;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-height:calc(100vh - 72px);overflow:auto}
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:14px 4px;border-bottom:1px solid var(--line);color:var(--txt)}
  .nav.is-open{background:rgba(5,7,13,.97);border-color:var(--line)}
}

@media (max-width:620px){
  .sec{padding:64px 0}
  h2{font-size:1.75rem}
  .sub{font-size:1rem;margin-bottom:1.8em}
  .hero{min-height:auto;padding:96px 0 50px}
  .hero__in{gap:36px}
  h1{font-size:2.35rem}
  .lead{font-size:1.02rem}
  .chip{font-size:.68rem;letter-spacing:.04em}
  .hero__cta{margin:1.6em 0 1.8em}
  .hero__datos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hero__datos li{padding:12px 8px;border-radius:14px;background:rgba(12,18,34,.7);border:1px solid var(--line);text-align:center}
  .hero__datos b{font-size:1.3rem}
  .hero__datos span{font-size:.72rem;line-height:1.25}
  .flujo__pasos li{padding:10px}
  .flujo .ico{width:36px;height:36px}

  /* Carruseles: se deslizan de lado y se asoma la siguiente tarjeta */
  .carrusel{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:84%;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:-16px;padding:4px 16px 14px;scroll-padding-inline:16px;scrollbar-width:none}
  .carrusel::-webkit-scrollbar{display:none}
  .carrusel>*{scroll-snap-align:start}
  .carrusel.plant{grid-auto-columns:62%}
  .carrusel.precios{grid-auto-columns:86%;padding-top:16px}
  .js .carrusel>.reveal{opacity:1;transform:none}
  .desliza{display:flex;align-items:center;gap:8px;margin:2px 0 0;color:var(--muted);font-size:.82rem}
  .desliza i{display:flex;gap:5px}
  .desliza i b{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:background .2s,width .2s}
  .desliza i b.on{width:18px;border-radius:4px;background:var(--cyan)}

  .card,.serv{padding:22px}
  .proy__txt{padding:16px 18px 20px}
  .plan{padding:26px 22px}
  .como li{padding:20px}
  .faq__lista summary{padding:18px 48px 18px 18px}
  details p{padding:0 18px 18px}
  .pie nav a,.pie__cols>div:last-child a{padding:9px 0}
  .pie__base{text-align:left}
  .cta{padding:20px 0 70px}
  .wa-flot{width:54px;height:54px;right:14px;bottom:14px}
  .mapa__dest text{font-size:14px}
}

/* ===== Franja de logos de clientes ===== */
.marcas{padding:34px 0 40px;border-block:1px solid var(--line);background:rgba(8,12,24,.55)}
.marcas__tit{text-align:center;margin:0 0 22px;font:600 .78rem/1.4 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.marcas__tira{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marcas__fila{display:flex;gap:22px;width:max-content;list-style:none;margin:0;padding:6px 0;animation:marcas 32s linear infinite}
.marcas__tira:hover .marcas__fila{animation-play-state:paused}
.marcas__fila a{display:grid;place-items:center;width:220px;height:96px;padding:14px 22px;border-radius:18px;background:#f5f7fb;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px -18px rgba(0,0,0,.8);transition:transform .25s,box-shadow .25s}
.marcas__fila a:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(34,211,238,.6)}
.marcas__fila img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
@keyframes marcas{to{transform:translateX(calc(-50% - 11px))}}
@media (max-width:620px){
  .marcas{padding:26px 0 30px}
  .marcas__fila{gap:14px;animation-duration:24s}
  .marcas__fila a{width:160px;height:76px;padding:10px 16px;border-radius:14px}
  .marcas__fila img{max-height:50px}
}
@media (prefers-reduced-motion:reduce){
  .marcas__tira{overflow-x:auto;-webkit-mask:none;mask:none}
  .marcas__fila li[aria-hidden]{display:none}
}

/* Que los carruseles no empujen a su contenedor */
.envios>*,.auto>*,.hero__in>*,.faq>*{min-width:0}

.pie__legal{margin:0;padding:0 0 26px;font-size:.76rem;line-height:1.5;color:var(--muted);opacity:.75}

.lead__extra{display:block;margin-top:.6em;font-size:.92em;opacity:.8}
@media (max-width:620px){.hero__datos b{font-size:1.05rem}}

/* Firma animada en el pie */
.pie__firma{display:flex;justify-content:center;padding:4px 0 30px}
.sc-firma,.sc-firma *{text-transform:none!important;letter-spacing:normal!important;box-sizing:border-box}
.sc-firma{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border-radius:999px;border:1px solid rgba(139,92,246,.35);background:rgba(127,127,127,.06);color:inherit;font:500 13px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none!important;transition:transform .25s,box-shadow .25s,border-color .25s;vertical-align:middle}
.sc-firma:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.7);box-shadow:0 8px 24px -10px rgba(34,211,238,.6)}
.sc-firma__logo{flex:none;display:block;border-radius:8px;transition:transform .5s}
.sc-firma:hover .sc-firma__logo{transform:rotate(-8deg) scale(1.08)}
.sc-firma__lin{stroke-dasharray:60;animation:scfTrazo 3s ease-in-out infinite alternate}
.sc-firma__n{transform-box:fill-box;transform-origin:center;animation:scfLate 2.4s ease-in-out infinite}
.sc-firma__n2{animation-delay:.4s}.sc-firma__n3{animation-delay:.8s}
.sc-firma__txt{white-space:nowrap;letter-spacing:.01em}
.sc-firma__pre{font-size:11px;opacity:.7;margin-right:2px}
.sc-firma__dom{opacity:.75;font-weight:600}
.sc-firma__txt b{font-weight:800;font-size:inherit;background:linear-gradient(100deg,#22d3ee,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes scfTrazo{from{stroke-dashoffset:60;opacity:.45}to{stroke-dashoffset:0;opacity:1}}
@keyframes scfLate{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.sc-firma__lin,.sc-firma__n{animation:none}}
