/* IA Panel - root neutro. Fondo BLANCO y texto negro (decision Fernando 2026-10-02: los logos de
   revendedor con fondo blanco se veian mal sobre negro). Lo unico que se mueve es la orbe. */
:root{
  --bg:#ffffff; --panel:#f5f5f7; --line:#e4e4ea;
  --text:#111114; --muted:#4a4a55; --faint:#6b6b76;
  --accent:#4b4fc4;
  --maxw:980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; display:flex; flex-direction:column;
}
a{color:var(--text); text-decoration:none}
a:hover{color:#000}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px,4vw,36px); max-width:var(--maxw); width:100%; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:9px; color:var(--text)}
.brand-mark{color:var(--accent)}
.brand-name{font-weight:600; letter-spacing:.2px; font-size:16px}
.brand.small .brand-name{font-size:14px; color:var(--muted)}
.brand.small svg{color:var(--faint)}

.lang{display:flex; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px}
.lang-btn{
  appearance:none; background:transparent; border:0; color:var(--muted);
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.5px;
  padding:8px 13px; border-radius:999px; cursor:pointer;
}
.lang-btn[aria-pressed="true"]{background:#e6e6ee; color:var(--text)}

main{flex:1 0 auto; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,36px)}

/* HERO / ORBE */
/* La orbe + los dos textos ocupan la PRIMERA pantalla; los servicios quedan en la 2a (al bajar). */
.firstscreen{min-height:66dvh; display:flex; flex-direction:column; justify-content:center}
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8px 0 8px;
}
.orb-wrap{
  position:relative;
  width:min(72vw,340px); height:min(72vw,340px);
  display:flex; align-items:center; justify-content:center;
}
.orb{width:100%; height:100%; display:block}
.orb-btn{
  position:absolute; inset:0; margin:auto;
  width:68%; height:68%; border-radius:50%;
  background:transparent; border:0; cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent;
}
.orb-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 1px rgba(75,79,196,.10);
  transition:box-shadow .25s ease;
}
.orb-btn:hover .orb-ring,.orb-btn:focus-visible .orb-ring{box-shadow:0 0 0 1px rgba(75,79,196,.28)}
.orb-btn:focus-visible{outline:none}

.orb-hint{margin:26px 0 0; color:var(--muted); font-size:14px; letter-spacing:.2px}
.orb-note{margin:12px auto 0; color:var(--faint); font-size:12.5px; max-width:52ch; line-height:1.5}
.orb-warn{
  margin:16px auto 0; max-width:40ch;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; color:var(--text); font-size:13px;
}

/* Estados de la orbe (clases en .orb-wrap) */
.orb-wrap.is-connecting .orb-hint,.orb-wrap.is-live .orb-hint,.orb-wrap.is-switching .orb-hint{color:var(--accent)}
/* cambiando idioma: orbe en pausa (atenuada y latiendo suave) para que no parezca colgada */
.orb-wrap.is-switching .orb{opacity:.45; transition:opacity .2s ease; animation:orb-switch 1.1s ease-in-out infinite}
.orb-wrap.is-switching .orb-btn{cursor:default}
@keyframes orb-switch{0%,100%{opacity:.35}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.orb-wrap.is-switching .orb{animation:none}}

/* Intro */
.intro{text-align:center; padding:8px 0 4px}
.tagline{
  font-size:clamp(20px,3.4vw,27px); font-weight:500; line-height:1.4;
  color:var(--text); max-width:24ch; margin:0 auto; letter-spacing:.1px;
}

/* Servicios */
.services{padding:48px 0 8px}
.section-title{
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px;
  color:var(--faint); text-align:center; margin:0 0 26px;
}
.svc-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.svc{background:var(--bg); padding:20px 18px}
.svc h3{margin:0 0 6px; font-size:15px; font-weight:600; color:var(--text)}
.svc p{margin:0; font-size:13px; color:var(--muted); line-height:1.5}

/* Partners */
.partners{padding:44px 0 56px; text-align:center}
.partners p{
  display:inline-block; color:var(--muted); font-size:14px;
  border-top:1px solid var(--line); padding-top:26px; max-width:46ch; margin:0;
}

/* Footer */
.footer{
  flex-shrink:0; border-top:1px solid var(--line);
  max-width:var(--maxw); width:100%; margin:0 auto;
  padding:26px clamp(16px,4vw,36px) 40px;
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
}
.legal-links{display:flex; flex-wrap:wrap; gap:10px 18px}
.legal-links a{color:var(--muted); font-size:13px; display:inline-block; padding:6px 0; min-height:24px}
.legal-links a:hover{color:var(--text)}
.copy{margin:0; color:var(--faint); font-size:12px}

/* Movil: la orbe es lo primero, pero los DOS textos (nota + tagline) caben en la 1a pantalla */
@media (max-width:720px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .orb-wrap{width:min(66vw,300px); height:min(66vw,300px)}
}
@media (max-width:600px){
  .orb-wrap{width:min(56vw,220px); height:min(56vw,220px)}
  .orb-hint{margin-top:14px}
  .orb-note{font-size:12px; margin-top:8px; max-width:42ch}
  .intro{padding-top:8px}
}
@media (max-width:460px){
  .svc-grid{grid-template-columns:1fr}
}

/* Respeta reduccion de movimiento: el shader ya es sutil; aqui solo evitamos transiciones */
@media (prefers-reduced-motion:reduce){
  .orb-ring{transition:none}
}

/* ===== VIDA (2026-10-02): todo lo de debajo del menu. Sin tocar fuente ni recuadros. ===== */
/* Aura de color suave detras de la orbe (respira muy despacio) */
.firstscreen{position:relative; isolation:isolate}
.firstscreen::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 44% at 50% 34%, rgba(75,79,196,.16), transparent 70%),
    radial-gradient(26% 32% at 30% 58%, rgba(232,89,12,.09), transparent 70%),
    radial-gradient(26% 32% at 72% 52%, rgba(37,211,102,.07), transparent 70%);
  animation:iap-aura 14s ease-in-out infinite alternate;
}
@keyframes iap-aura{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(0,-2%,0) scale(1.06)}}
/* Halo claro detras de la orbe: sobre blanco deja de parecer una bola oscura suelta */
.orb-wrap{isolation:isolate}
.orb-wrap::before{
  content:""; position:absolute; inset:-14%; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(75,79,196,.20), rgba(75,79,196,.07) 62%, transparent);
}
/* Onda que invita a tocar la orbe (se apaga mientras se habla) */
.orb-btn::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:1px solid rgba(75,79,196,.45); opacity:0;
  animation:iap-ripple 3.2s ease-out infinite;
}
@keyframes iap-ripple{0%{transform:scale(.95); opacity:0} 25%{opacity:.7} 100%{transform:scale(1.32); opacity:0}}
.orb-wrap.is-live .orb-btn::after,.orb-wrap.is-connecting .orb-btn::after,.orb-wrap.is-switching .orb-btn::after{animation:none; opacity:0}
/* Frase principal con degradado (misma fuente) */
.tagline{background:linear-gradient(100deg,#111114 30%,#4b4fc4 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
/* Titulos de seccion con una linea de color */
.section-title::after{content:""; display:block; width:38px; height:2px; margin:12px auto 0; border-radius:2px; background:linear-gradient(90deg,#4b4fc4,#e8590c)}
/* Recuadros: mismo diseno; solo se iluminan al pasar el raton */
/* Recuadros: mismo diseno; al pasar el raton, un foco de luz sigue al cursor (vars de fx.js) */
.svc{transition:background-color .25s ease}
.svc:hover{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(75,79,196,.10), transparent 70%), #fbfbff}
/* Aparicion suave al hacer scroll (la activa /assets/fx.js) */
.fx .fx-item{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), background-color .25s ease}
.fx .fx-item.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .firstscreen::before,.orb-btn::after{animation:none}
  .fx .fx-item{opacity:1; transform:none; transition:none}
}

/* Cinta animada "Conecta con" (bucle infinito; se pausa al pasar el raton) */
.channels{padding:40px 0 0; text-align:center}
.channels-title{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color:var(--faint); margin:0 0 16px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex; width:max-content; animation:iap-marquee 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee ul{display:flex; gap:10px; list-style:none; margin:0; padding:0 10px 0 0}
.marquee li{white-space:nowrap; font-size:14px; color:var(--muted); padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:#fff}
@keyframes iap-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none; mask-image:none}
  .marquee-track{animation:none; width:auto}
  .marquee ul{flex-wrap:wrap; justify-content:center}
  .marquee ul[aria-hidden]{display:none}
}

/* Franja de cifras (contador animado por fx.js) */
.stats{display:grid; grid-template-columns:repeat(4,1fr); max-width:760px; margin:34px auto 0}
.stat{text-align:center; padding:4px 10px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block; font-size:clamp(26px,4vw,34px); font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#4b4fc4,#e8590c); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{font-size:13px; color:var(--muted)}
/* Como funciona: 3 pasos unidos por una linea en degradado */
.steps{padding:60px 0 8px}
.steps ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative}
.steps ol::before{content:""; position:absolute; top:22px; left:17%; right:17%; height:2px; border-radius:2px; background:linear-gradient(90deg,#4b4fc4,#e8590c); opacity:.4}
.step{text-align:center; position:relative}
.step-n{width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#4b4fc4; margin-bottom:14px;
  border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#4b4fc4,#e8590c) border-box; box-shadow:0 6px 18px -8px rgba(75,79,196,.5)}
.step h3{margin:0 0 6px; font-size:15px; font-weight:600; color:var(--text)}
.step p{margin:0 auto; font-size:13.5px; color:var(--muted); line-height:1.5; max-width:30ch}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr); row-gap:18px}
  .stat:nth-child(3){border-left:0}
  .steps ol{grid-template-columns:1fr; gap:26px}
  .steps ol::before{display:none}
}

/* Filtros de productos (los crea fx.js): resaltan una categoria, los recuadros no cambian */
.svc-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 18px}
.svc-filters button{appearance:none; font:inherit; font-size:13px; font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:all .2s ease}
.svc-filters button:hover{color:var(--text); border-color:#c9c9d6}
.svc-filters button[aria-pressed="true"]{color:#fff; background:linear-gradient(100deg,#4b4fc4,#e8590c); border-color:transparent}
.svc{transition:opacity .35s ease, background-color .25s ease}
.svc-grid.filtering .svc.dim{opacity:.25}
/* Chat de ejemplo animado (lo reproduce fx.js al verse) */
.demo{padding:60px 0 0}
.chat{max-width:420px; margin:0 auto; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#efeae2; box-shadow:0 18px 40px -24px rgba(17,17,20,.35)}
.chat-head{display:flex; align-items:center; gap:10px; padding:12px 14px; background:#f7f7f9; border-bottom:1px solid var(--line)}
.chat-head b{display:block; font-size:14px; color:var(--text)}
.chat-head small{display:block; font-size:11.5px; color:var(--faint)}
.chat-av{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#4b4fc4,#e8590c); flex-shrink:0}
.chat-body{padding:16px 14px; display:flex; flex-direction:column; gap:8px; min-height:270px}
.msg{margin:0; max-width:82%; padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.45; color:#111114; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.msg.cli{align-self:flex-start; background:#fff; border-top-left-radius:4px}
.msg.bot{align-self:flex-end; background:#d9fdd3; border-top-right-radius:4px}
.typing{margin:0; align-self:flex-end; background:#d9fdd3; border-radius:12px; padding:10px 12px; display:none; gap:4px}
.typing i{width:6px; height:6px; border-radius:50%; background:#5b8f57; display:inline-block; animation:iap-dot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes iap-dot{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.chat.play .msg{opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease}
.chat.play .msg.show{opacity:1; transform:none}
.chat.play .typing.on{display:inline-flex}
/* Sectores */
.sectors{padding:60px 0 0}
.sec-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.sec{position:relative; border:1px solid var(--line); border-radius:12px; padding:16px 14px 14px; background:#fff; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
.sec::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg,#4b4fc4,#e8590c)}
.sec:hover{transform:translateY(-3px); box-shadow:0 12px 26px -16px rgba(75,79,196,.5)}
.sec b{display:block; font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:4px}
.sec span{display:block; font-size:12.5px; color:var(--muted); line-height:1.45}
@media (max-width:900px){ .sec-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .sec-grid{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion:reduce){ .typing i{animation:none} .sec{transition:none} }