:root{
  --brand-600:#0E7AFE; --brand-700:#0B61C9; --brand-300:#5AB6FF;
  --ink:#0F172A; --ink-2:#334155; --bg:#F8FAFC; --card:#fff;
  --line:#e5e7eb; --muted:#64748B;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
  --radius:16px
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
a{color:var(--brand-700);text-decoration:none}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--brand-300);outline-offset:2px;border-radius:8px}

/* Header glass */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;gap:20px;align-items:center;justify-content:space-between;height:64px}
.brand .logo{height:40px}
.menu{display:flex;gap:14px;align-items:center}
.menu a{padding:8px 12px;border-radius:12px;color:var(--ink-2)}
.menu a.active{background:#eef2ff;color:#1e293b}
.lang-switch select{padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* Botones */
.btn{display:inline-block;border-radius:12px;border:1px solid transparent;padding:12px 16px;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow);position:relative}
.btn-primary:hover{background:var(--brand-700);transform:translateY(-1px)}
.btn-primary::after{content:'';position:absolute;inset:-8px;border-radius:16px;background:radial-gradient(closest-side,rgba(14,122,254,.25),transparent 70%);opacity:0;transition:opacity .2s}
.btn-primary:hover::after{opacity:1}
.btn-outline{border-color:var(--line);color:var(--ink)}
.btn-ghost{border-color:transparent;color:var(--ink)}

/* Hero con “glow” y flujo animado */
.hero{position:relative;background:linear-gradient(180deg,#fff,#F5F8FF);padding:84px 0;border-bottom:1px solid var(--line)}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.hero::before{width:420px;height:420px;top:-60px;left:5%;background:radial-gradient(closest-side,var(--brand-300),transparent 70%)}
.hero::after{width:380px;height:380px;bottom:-120px;right:5%;background:radial-gradient(closest-side,#93c5fd,transparent 70%)}
.hero-inner{display:grid;gap:28px;grid-template-columns:1.2fr 1fr;align-items:center}
.hero h1{font-size:clamp(30px,4vw,44px);margin:0 0 10px}
.lead{font-size:18px;color:var(--ink-2);margin:0 0 22px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

.hero-visual .flow{display:grid;gap:14px}
.hero-visual .node{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.8));border:1px solid rgba(14,122,254,.15);border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px rgba(14,122,254,.08), var(--shadow);animation:floaty 6s ease-in-out infinite}
.hero-visual .node:nth-child(2){animation-delay:.2s}
.hero-visual .node:nth-child(3){animation-delay:.4s}
.hero-visual .node:nth-child(4){animation-delay:.6s}
.hero-visual .node::before{content:'';position:absolute;inset:-1px;border-radius:15px;padding:1px;background:linear-gradient(90deg,var(--brand-300),var(--brand-700),var(--brand-300));background-size:200% 100%;animation:shine 5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.hero-visual .node::after{content:'';position:absolute;left:22px;right:22px;bottom:-10px;height:3px;background:linear-gradient(90deg,var(--brand-300),var(--brand-700),var(--brand-300));background-size:200% 100%;animation:move 6s linear infinite;opacity:.7}
.hero-visual .node:last-child::after{display:none}

@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes shine{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes move{0%{background-position:0 0}100%{background-position:200% 0}}

.muted{color:var(--muted)}
.cards{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}

/* Cards y microinteracciones */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(15,23,42,.10),var(--shadow)}
.card.feature{padding:22px}
.card.success{border-color:#bbf7d0;background:#f0fdf4}
.card.danger{border-color:#fecaca;background:#fff1f2}

.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;border:1px solid var(--line);font-size:12px;color:#334155;margin-bottom:8px}

.step{display:flex;gap:12px;align-items:flex-start}
.step-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--brand-600);color:#fff;font-weight:700;flex:0 0 28px}

.logo-chip{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;margin:6px 8px;box-shadow:var(--shadow)}
.logo-chip.muted{opacity:.6}

.form input,.form select,.form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.form label{display:block;font-weight:600;color:#0f172a;margin-bottom:12px}
.form .actions{margin-top:10px}

.footer{background:#fff;border-top:1px solid var(--line);padding:26px 0;margin-top:24px}
.footer-inner{display:flex;justify-content:space-between;gap:16px;align-items:center}
.footer a{color:#334155}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}

/* Utilidades */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
.modal.open{display:flex}
.modal .dialog{background:#fff;border-radius:16px;max-width:880px;width:100%;padding:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.video-box{aspect-ratio:16/9;background:#0f172a;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center}
.modal-actions{text-align:right;margin-top:12px}
/* Iconos */
.ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;color:var(--brand-700)}
.ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.node .ico{color:var(--brand-600)}
.card .ico{color:var(--brand-700)}
.step p{margin:0}
/* Secciones */
.section{padding:36px 0}
.section-title{font-size:26px;margin:0 0 10px}
.section-title .ico{margin-right:10px;width:26px;height:26px}
.section-title .ico svg{width:24px;height:24px}

/* Botón hamburguesa */
/* --- NAV móvil como cajón izquierdo --- */
.nav-toggle{display:none;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;margin-left:auto}
.nav-toggle svg{width:22px;height:22px;stroke:#0f172a;fill:none;stroke-width:2}
.nav-toggle .ico-x{display:none}

/* Menú móvil (dropdown) */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  /* cajón */
  .menu{
    position:fixed; top:64px; left:0; right:auto;
    width:min(360px,88vw); height:calc(100vh - 64px);
    display:flex; flex-direction:column; gap:8px; padding:16px;
    background:#fff; border-right:1px solid var(--line); border-bottom:none;
    box-shadow:var(--shadow); text-align:left; align-items:stretch;
    border-radius:0 16px 16px 0; transform:translateX(-105%); transition:transform .25s ease;
    z-index:45;
  }
  header.site.open .menu{ transform:translateX(0) }
  header.site.open .nav-toggle .ico-menu{display:none}
  header.site.open .nav-toggle .ico-x{display:inline}

  /* backdrop */
  .nav-backdrop{
    position:fixed; inset:64px 0 0 0; background:rgba(15,23,42,.35);
    backdrop-filter:blur(2px); display:none; z-index:40;
  }
  header.site.open + .nav-backdrop{ display:block }
}
/* Iconos en chips de integraciones */
.logo-chip .ico{margin-right:8px;width:20px;height:20px}
.logo-chip .ico svg{width:18px;height:18px}
/* Nav con iconos */
.menu a{display:flex;align-items:center;gap:6px}
.nav-ico{width:18px;height:18px;margin:0}
.nav-ico svg{width:18px;height:18px}

/* Inputs con icono */
.input-wrap{position:relative;display:block}
.field-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);opacity:.9}
.field-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.input-wrap input,
.input-wrap select,
.input-wrap textarea{padding-left:42px}
.input-wrap select[multiple]{padding-left:42px;padding-top:10px;padding-bottom:10px}
/* Icono en botones */
.btn .btn-ico{display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
.btn .btn-ico svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8}
.btn.btn-ghost .btn-ico svg{stroke:currentColor}

/* Footer con iconos */
.footer-links{display:flex;flex-wrap:wrap;gap:10px}
.footer-links a{display:inline-flex;align-items:center;gap:6px;color:#334155}
.f-ico{width:18px;height:18px}
.f-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
/* Modal bonito */
.modal .dialog{max-width:560px}
.modal-header{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:4px}
.modal-header .ico svg{width:22px;height:22px}
.modal .form input{padding:12px;border-radius:10px}
/* Rail de flujo: chips de entrada/salida */
.rail{display:grid;gap:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;
  box-shadow:var(--shadow); font-weight:600;
}
.chips.source .chip{background:#f0f9ff;border-color:#bae6fd}
.chips.dest .chip{background:#f8fafc}
/* ===== Timeline en el héroe ===== */
.hero-visual.timeline .node::after{display:none} /* anula conectores antiguos */

.hero-visual.timeline .tline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  align-items:flex-start;
}

/* Línea horizontal animada */
.hero-visual.timeline .t-track{
  position:absolute; left:0; right:0; top:34px; height:4px;
  background:linear-gradient(90deg,var(--brand-300),var(--brand-700),var(--brand-300));
  background-size:200% 100%;
  animation:flowX 6s linear infinite;
  border-radius:999px; opacity:.9;
}

/* Columna/paso */
.hero-visual.timeline .t-col{position:relative; text-align:center}
.hero-visual.timeline .t-step{position:relative; padding-top:10px}
.hero-visual.timeline .t-dot{
  width:16px; height:16px; margin:0 auto; border-radius:999px; background:#fff;
  border:3px solid var(--brand-600);
  box-shadow:0 0 0 0 rgba(14,122,254,.35);
  animation:pulse 2.4s ease-out infinite;
  position:relative; z-index:2;
}
.hero-visual.timeline .node{margin-top:14px}

/* Chips de entrada/salida */
.hero-visual.timeline .chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.hero-visual.timeline .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff;
  box-shadow:var(--shadow); font-weight:600;
}
.hero-visual.timeline .chips.source .chip{background:#f0f9ff; border-color:#bae6fd}
.hero-visual.timeline .chips.dest   .chip{background:#f8fafc}

/* Animaciones */
@keyframes flowX{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes flowY{0%{background-position:0 0}100%{background-position:0 200%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,122,254,.35)}70%{box-shadow:0 0 0 10px rgba(14,122,254,0)}100%{box-shadow:0 0 0 0 rgba(14,122,254,0)}}

/* ----- Responsive: timeline vertical ----- */
@media (max-width:900px){
  .hero-visual.timeline .tline{grid-template-columns:1fr}
  .hero-visual.timeline .t-track{
    left:26px; right:auto; top:0; bottom:0; width:4px; height:auto;
    background:linear-gradient(180deg,var(--brand-300),var(--brand-700),var(--brand-300));
    animation:flowY 6s linear infinite;
  }
  .hero-visual.timeline .t-col{display:grid; grid-template-columns:52px 1fr; align-items:start; gap:8px; text-align:left; position:relative}
  .hero-visual.timeline .t-step{grid-column:1 / -1; padding-left:0}
  .hero-visual.timeline .t-dot{margin:4px 0 0 18px; grid-column:1}
  .hero-visual.timeline .node{grid-column:2}
  .hero-visual.timeline .chips{grid-column:2; justify-content:flex-start}
  /* Conector entre pasos */
  .hero-visual.timeline .t-col{padding-bottom:18px}
  .hero-visual.timeline .t-col:not(:last-child)::after{
    content:''; position:absolute; left:26px; top:22px; bottom:-6px; width:4px;
    background:rgba(14,122,254,.14); border-radius:999px;
  }
}
.brand-watermark{
  position:absolute; right:-40px; bottom:-30px; width:380px; height:380px;
  background:url('img/logo.webp') center/contain no-repeat; opacity:.06; filter:grayscale(100%);
  pointer-events:none;
}
@media(max-width:900px){ .brand-watermark{display:none} }
/* Marca con robot-flow */
.brand{display:flex;align-items:center;gap:10px}
.logo{height:40px}
.logo-flow{height:28px;width:auto;opacity:.95}
@media (max-width:900px){ .logo-flow{display:none} } /* opcional, limpia en móvil */
.footer-left{display:flex;align-items:center;gap:10px}
.footer-logo{height:28px;width:auto}

.group-logos{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:10px 0 18px;border-top:1px solid var(--line);margin-top:12px
}
.group-label{font-weight:600;color:#334155}
.group-logos img{
  height:40px;width:auto;display:block;filter:grayscale(100%);opacity:.9;
  transition:opacity .2s, filter .2s
}
.group-logos a:hover img{opacity:1;filter:none}
/* Brand strip con robot grande (desktop) */
.brand-strip{padding:24px 0}
.brand-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand-strip-logo{height:44px;width:auto}
.brand-robot-xl{width:auto;max-width:100%;filter:drop-shadow(0 10px 24px rgba(14,122,254,.10))}
@media (max-width:900px){ .brand-robot-xl{max-width:100%;} }