/* ══════════════════════════════════════════════════════════════
   ContactSphere AI — hoja de estilos compartida
   index.html · caracteristicas.html
   Marca ValTIC: navy #040c1e · azul #0a74f0 · cian #00c8f0 · magenta #d946ef
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Oscuro (nav, hero, CTA, footer) */
  --navy:      #040c1e;
  --navy-2:    #081428;
  --navy-line: rgba(255,255,255,.09);
  --on-navy:   #eef4ff;
  --on-navy-2: #8ea0bf;

  /* Claro (cuerpo) */
  --bg:        #ffffff;
  --bg-soft:   #f7f9fc;
  --bg-soft-2: #f1f5fa;
  --ink:       #0a1526;
  --ink-2:     #3d4d66;
  --muted:     #64748b;
  --line:      #e5eaf1;
  --line-2:    #eef2f7;

  /* Acentos */
  --brand:     #0a74f0;
  --brand-d:   #0757c4;
  --cyan:      #00c8f0;
  --pink:      #d946ef;
  --green:     #16a34a;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(10,21,38,.05);
  --shadow-md: 0 4px 18px rgba(10,21,38,.06);
  --shadow-lg: 0 24px 70px rgba(10,21,38,.14);

  --nav-h: 64px;
  --announce-h: 34px;
  --maxw: 1140px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ── Tipografía de sección ──────────────────────────────── */
.eyebrow{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); margin-bottom:18px;
}
.eyebrow.on-dark{ color:var(--cyan); }

.h-sec{ font-size:clamp(30px,4.2vw,44px); line-height:1.12; }
.sub-sec{ margin-top:18px; font-size:17px; line-height:1.65; color:var(--muted); max-width:56ch; }

.section{ padding:110px 0; }
.section.tight{ padding:80px 0; }
.section.soft{ background:var(--bg-soft); }
.section.dark{ background:var(--navy); color:var(--on-navy); }
.section.dark h2,.section.dark h3{ color:#fff; }
.section.dark .sub-sec{ color:var(--on-navy-2); }

/* ── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 22px; border-radius:999px; border:1px solid transparent;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }

.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 6px 20px rgba(10,116,240,.26); }
.btn-primary:hover{ background:var(--brand-d); box-shadow:0 10px 26px rgba(10,116,240,.34); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:#cfd9e6; background:var(--bg-soft); }

.btn-on-dark{ background:#fff; color:var(--navy); }
.btn-on-dark:hover{ background:#e8f1ff; }

.btn-ghost-dark{ background:transparent; color:var(--on-navy); border-color:rgba(255,255,255,.22); }
.btn-ghost-dark:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); }

.btn-sm{ height:38px; padding:0 16px; font-size:13.5px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:600; color:var(--brand);
}
.link-arrow svg{ transition:transform .18s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ── Barra de aviso + Nav ───────────────────────────────── */
.cs-announce{
  position:fixed; top:0; left:0; right:0; z-index:201;
  height:var(--announce-h); background:#020814; color:#9fb2ce;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 16px; font-size:12px; line-height:1.4;
  white-space:nowrap; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.07);
}
.cs-announce strong{ color:#fff; font-weight:600; }
.cs-announce a{ color:#6fb8ff; text-decoration:underline; }
.cs-announce span{ overflow:hidden; text-overflow:ellipsis; }

nav{
  position:fixed; top:var(--announce-h); left:0; right:0; z-index:200;
  height:var(--nav-h); background:rgba(4,12,30,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--navy-line);
}
.nav-wrap{
  max-width:var(--maxw); margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; gap:30px;
}
.nav-logo img{ height:26px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:12px; }
.nav-links a{
  font-size:14.5px; font-weight:500; color:#b9c7dd;
  transition:color .16s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:#fff; }
.nav-ctas{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-ctas .ghost{ font-size:14.5px; font-weight:500; color:#b9c7dd; }
.nav-ctas .ghost:hover{ color:#fff; }

.nav-burger{ display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; }
.nav-burger span{ display:block; width:20px; height:1.8px; background:#dfe8f5; border-radius:2px; }
.nav-burger span + span{ margin-top:5px; }

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--on-navy);
  padding:calc(var(--nav-h) + var(--announce-h) + 92px) 0 0;
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 420px at 18% 4%,  rgba(0,200,240,.17), transparent 62%),
    radial-gradient(680px 400px at 86% 16%, rgba(217,70,239,.13), transparent 60%),
    radial-gradient(900px 500px at 50% 96%, rgba(10,116,240,.16), transparent 66%);
}
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}
.hero-inner{ position:relative; z-index:1; text-align:center; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  padding:7px 16px 7px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  margin-bottom:30px;
}
.hero-eyebrow img{ height:23px; width:auto; }
.hero-eyebrow .sep{ width:1px; height:14px; background:rgba(255,255,255,.18); }
.hero-eyebrow span{ font-size:12.5px; font-weight:500; color:#a9bcd8; letter-spacing:.01em; }

.hero h1{
  font-size:clamp(38px,6vw,66px); line-height:1.04; letter-spacing:-.035em;
  color:#fff; max-width:15ch; margin:0 auto;
}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--cyan) 12%,#5aa8ff 52%,var(--pink) 94%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.hero-sub{
  margin:26px auto 0; max-width:60ch;
  font-size:17.5px; line-height:1.66; color:#a9bcd8;
}
.hero-ctas{ margin-top:38px; display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }
.hero-note{ margin-top:20px; font-size:13px; color:#728aad; }

/* Captura del CRM montada a caballo entre el hero oscuro y el cuerpo claro */
.hero-shot{ position:relative; z-index:1; margin-top:64px; padding-bottom:1px; }
.hero-shot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:var(--bg); z-index:0;
}
.shot{
  position:relative; z-index:1; max-width:1080px; margin:0 auto;
  border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
}
.shot-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:linear-gradient(180deg,#141c2e,#0c1322);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.shot-dot{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35); }
.shot-dot:nth-child(1){ background:#ff5f57; }
.shot-dot:nth-child(2){ background:#febc2e; }
.shot-dot:nth-child(3){ background:#28c840; }
.shot-url{
  margin-left:12px; flex:1; height:24px; border-radius:7px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; padding:0 11px;
  font-size:11px; color:#8ea0bf; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.shot img{ width:100%; height:auto; display:block; }
.shot-cap{
  position:relative; z-index:1; max-width:1080px; margin:16px auto 0;
  text-align:center; font-size:12.5px; color:var(--muted);
}

/* ── Tira de confianza ──────────────────────────────────── */
.trust{ padding:46px 0 52px; border-bottom:1px solid var(--line-2); }
.trust-label{
  text-align:center; font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:26px;
}
.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.trust-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-size:13.5px; font-weight:500; color:var(--ink-2);
}
.trust-chip img{ height:17px; width:auto; flex:0 0 auto; }
.trust-chip img.wide{ height:15px; }
.trust-chip:has(img.wide){ padding:8px 16px; }
.trust-foot{ margin-top:24px; text-align:center; font-size:13.5px; color:var(--muted); }

/* ── Pilares (3 columnas) ───────────────────────────────── */
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(10,116,240,.08); color:var(--brand); margin-bottom:20px;
}
  content:""; flex:0 0 5px; width:5px; height:5px; border-radius:50%;
  background:var(--brand); margin-top:8px; opacity:.55;
}

/* ── Bloque captura + texto ─────────────────────────────── */
.split{ display:grid; grid-template-columns:.86fr 1.14fr; gap:70px; align-items:center; }
.split-shot{
  border-radius:var(--r-md); overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.split-list{ margin-top:32px; display:flex; flex-direction:column; gap:20px; }
.split-list h4{ font-size:16px; margin-bottom:5px; }
.split-list p{ font-size:14.5px; line-height:1.65; color:var(--muted); }

/* ── Pasos ──────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:60px; }
.step-n{
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  color:var(--brand); letter-spacing:.06em; margin-bottom:14px;
  padding-top:16px; border-top:2px solid var(--brand);
}
.step h3{ font-size:17px; margin-bottom:9px; }
.step p{ font-size:14.5px; line-height:1.65; color:var(--muted); }

/* ── Precios ────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; align-items:start; }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 24px 26px; display:flex; flex-direction:column; height:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.plan:hover{ border-color:#cfdcec; box-shadow:var(--shadow-md); }
.plan.featured{ border-color:var(--brand); box-shadow:0 14px 40px rgba(10,116,240,.13); position:relative; }
.plan-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
  white-space:nowrap;
}
.plan-name{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.plan-price{ margin:16px 0 4px; display:flex; align-items:baseline; gap:3px; }
.plan-price .amount{ font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.plan-price .curr{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; }
.plan-price .per{ font-size:14px; color:var(--muted); font-weight:500; }
.plan-for{ font-size:13.5px; line-height:1.6; color:var(--muted); min-height:44px; margin-bottom:20px; }
.plan ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.plan li{ font-size:14px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start; line-height:1.5; }
.plan li svg{ flex:0 0 14px; margin-top:4px; color:var(--brand); }
.plan .btn{ margin-top:auto; width:100%; }
.plans-foot{ margin-top:34px; text-align:center; font-size:13.5px; color:var(--muted); }
.plans-foot a{ color:var(--brand); font-weight:600; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq{ margin-top:52px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:'Space Grotesk',sans-serif; font-size:16.5px; font-weight:600;
  letter-spacing:-.01em; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:21px; font-weight:400; color:var(--brand); line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 40px 24px 0; font-size:15px; line-height:1.72; color:var(--muted); margin-top:-4px; }

/* ── CTA final ──────────────────────────────────────────── */
.cta{ position:relative; overflow:hidden; background:var(--navy); text-align:center; padding:104px 0; }
.cta-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 320px at 24% 8%,  rgba(0,200,240,.16), transparent 62%),
    radial-gradient(620px 320px at 78% 88%, rgba(217,70,239,.14), transparent 62%);
}
.cta-inner{ position:relative; z-index:1; }
.cta-logos{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:30px; }
.cta-logos img{ height:27px; width:auto; opacity:.9; }
.cta-logos span{ font-size:12.5px; color:#5f7597; }
.cta h2{ font-size:clamp(30px,4.4vw,46px); line-height:1.1; color:#fff; }
.cta h2 .grad{
  background:linear-gradient(100deg,var(--cyan),var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.cta p{ margin:22px auto 0; max-width:54ch; font-size:16.5px; line-height:1.65; color:#a9bcd8; }
.cta-ctas{ margin-top:36px; display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

/* ── Footer ─────────────────────────────────────────────── */
footer{ background:#020814; color:#8ea0bf; padding:72px 0 0; }
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px 56px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px;
}
.footer-brand img.f-csai{ height:25px; width:auto; margin-bottom:18px; }
.footer-brand p{ font-size:14px; line-height:1.68; max-width:34ch; margin-bottom:22px; }
.footer-brand img.f-valtic{ height:34px; width:auto; opacity:.85; }
.footer-col h4{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.footer-col li{ margin-bottom:11px; }
.footer-col a{ font-size:14px; color:#8ea0bf; transition:color .16s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);
  max-width:var(--maxw); margin:0 auto; padding:22px 24px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13px; color:#647a9c;
}
.footer-bottom a{ color:#647a9c; margin-left:18px; }
.footer-bottom a:hover{ color:#fff; }

/* ══ Página de características ══════════════════════════ */
.page-head{
  background:var(--navy); color:var(--on-navy);
  padding:calc(var(--nav-h) + var(--announce-h) + 76px) 0 76px;
  position:relative; overflow:hidden;
}
.page-head h1{ font-size:clamp(34px,5vw,54px); line-height:1.08; color:#fff; max-width:18ch; }
.page-head p{ margin-top:20px; max-width:62ch; font-size:17px; line-height:1.65; color:#a9bcd8; }

.toc{ display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; position:relative; z-index:1; }
.toc a{
  padding:7px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  font-size:13.5px; font-weight:500; color:#c3d2e8; transition:all .16s ease;
}
.toc a:hover{ border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.05); }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; transition:border-color .18s ease, box-shadow .18s ease;
}
.card:hover{ border-color:#d8e3f0; box-shadow:var(--shadow-md); }
.card h3{ font-size:17px; margin-bottom:10px; letter-spacing:-.015em; }
.card p{ font-size:14.5px; line-height:1.66; color:var(--muted); }
.card .tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand); margin-bottom:12px;
}
.card ul{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.card li{ font-size:14px; line-height:1.55; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start; }
.card li svg{ flex:0 0 14px; margin-top:4px; color:var(--brand); }

/* Tabla comparativa */
.tbl-wrap{ margin-top:44px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
table.cmp{ width:100%; border-collapse:collapse; font-size:14px; min-width:820px; }
table.cmp th,table.cmp td{ padding:12px 16px; border-bottom:1px solid var(--line-2); text-align:left; }
table.cmp thead th{
  position:sticky; top:0; background:var(--navy); color:#fff; z-index:2;
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-align:center; line-height:1.35;
}
table.cmp thead th:first-child{ text-align:left; }
table.cmp thead th small{ display:block; font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:none; color:#8ea0bf; margin-top:3px; }
table.cmp td:not(:first-child),table.cmp th:not(:first-child){ text-align:center; }
table.cmp tr.grp td{
  background:var(--bg-soft-2); font-family:'Space Grotesk',sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
table.cmp td.yes{ color:var(--green); font-weight:700; }
table.cmp td.no{ color:#b6c0cd; }
table.cmp tbody tr:hover td:not(.grp){ background:#fafcff; }
table.cmp td:first-child{ color:var(--ink-2); }

/* ── Sección sofá (portátil sobre asiento, fundido con el blanco) ── */
.sofa-sec{
  position:relative; overflow:hidden; background:#fff;
  min-height:calc(min(57vw,960px) * 0.792 + 30px);
  display:flex; align-items:center;
}
.sofa-copy{ position:relative; z-index:1; max-width:370px; padding:96px 0; margin-left:auto; }
.sofa-h{
  font-weight:400; font-size:clamp(40px,4.3vw,62px); line-height:1.03;
  letter-spacing:-.035em; color:var(--ink);
}
.sofa-copy .sub-sec{ font-size:17px; margin-top:26px; }
.sofa-facts{ margin-top:30px; display:flex; flex-direction:column; gap:11px; }
.sofa-facts span{ font-size:14.5px; color:var(--ink-2); display:inline-flex; align-items:center; gap:9px; }
.sofa-facts svg{ color:var(--brand); flex:0 0 15px; }
.sofa-img{ position:absolute; left:0; bottom:0; width:min(57vw,960px); height:auto; }
@media (max-width:1040px){
  .sofa-sec{ display:block; min-height:0; }
  .sofa-copy{ max-width:none; padding:76px 0 8px; margin-left:0; }
  .sofa-img{ position:relative; width:100%; }
}

/* ── Ventana de Mac para capturas ───────────────────────── */
.mac-stage{ position:relative; perspective:1800px; padding:26px 0; }
.mac-glow{
  position:absolute; inset:2% -6% -2% 4%; z-index:0; pointer-events:none; filter:blur(52px); opacity:.85;
  background:
    radial-gradient(45% 55% at 25% 30%, rgba(0,200,240,.75), transparent 70%),
    radial-gradient(45% 55% at 80% 75%, rgba(217,70,239,.6), transparent 70%),
    radial-gradient(40% 40% at 60% 20%, rgba(10,116,240,.55), transparent 70%);
  animation:glowDrift 12s ease-in-out infinite alternate;
}
@keyframes glowDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-3%,3%) scale(1.06); } }
.mac-win{
  position:relative; z-index:1; margin:0; border-radius:13px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(10,21,38,.07), 0 34px 80px -10px rgba(10,21,38,.28), 0 10px 26px rgba(10,21,38,.08);
  transform:rotateY(-10deg) rotateX(5deg) rotateZ(.4deg); transform-origin:60% 50%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .8s ease;
}
.mac-stage:hover .mac-win{ transform:rotateY(0) rotateX(0); box-shadow:0 0 0 1px rgba(10,21,38,.07), 0 40px 90px -10px rgba(10,21,38,.3), 0 10px 26px rgba(10,21,38,.08); }
.mac-bar{
  position:relative; height:36px; display:flex; align-items:center; gap:8px; padding:0 14px;
  background:linear-gradient(180deg,#f7f8fa,#eceff3); border-bottom:1px solid #e0e5ec;
}
.tl{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2); }
.tl.r{ background:#ff5f57; } .tl.y{ background:#febc2e; } .tl.g{ background:#28c840; }
.mac-title{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:#5b6678; letter-spacing:-.005em;
}
.mac-title img{ width:15px; height:15px; border-radius:4px; }
.mac-win > img{ width:100%; height:auto; display:block; }

.float-badge{
  position:absolute; z-index:2; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(10,21,38,.07); border-radius:14px; padding:10px 14px;
  box-shadow:0 14px 34px rgba(10,21,38,.14);
  font-size:13px; line-height:1.3; color:var(--ink); animation:floaty 6s ease-in-out infinite;
}
.float-badge small{ display:block; font-size:11.5px; color:var(--muted); font-weight:500; }
.float-badge strong{ font-weight:650; }
.float-badge .fb-ico{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 30px;
}
.fb-ai{ top:-4px; right:-18px; }
.fb-ai .fb-ico{ background:linear-gradient(135deg,#00c8f0,#7a5cff 55%,#d946ef); color:#fff; }
.fb-cal{ bottom:-2px; left:-28px; animation-delay:-3s; }
.fb-cal .fb-ico{ background:#e8f7ee; color:#16a34a; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; margin-right:6px;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:livePulse 2s ease-out infinite; vertical-align:1px; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 100%{ box-shadow:0 0 0 9px rgba(34,197,94,0); } }
@media (max-width:1000px){
  .mac-win{ transform:none; }
  .fb-ai{ right:6px; top:0; } .fb-cal{ left:6px; bottom:0; }
}
@media (max-width:560px){
  .float-badge{ padding:8px 11px; font-size:12px; }
  .fb-cal{ display:none; }
}

/* ── Título del hero: aparición con estrellas de IA ─────── */
.ai-title .w{
  display:inline-block; opacity:0; filter:blur(14px); transform:translateY(20px);
  animation:wordIn .95s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.15s + var(--i) * .085s);
}
@keyframes wordIn{ to{ opacity:1; filter:blur(0); transform:none; } }
.ai-title .grad-wrap{ position:relative; isolation:isolate; }
.ai-title .grad-wrap::before{
  content:""; position:absolute; inset:18% 2% 8% 2%; z-index:-1; border-radius:40px;
  background:linear-gradient(100deg,rgba(0,200,240,.55),rgba(122,92,255,.45),rgba(217,70,239,.55));
  filter:blur(34px); opacity:0; animation:glowIn 1.4s ease-out .8s forwards, glowPulse 4s ease-in-out 2.2s infinite;
}
@keyframes glowIn{ to{ opacity:.55; } }
@keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.32; } }
.hero h1.ai-title .grad{
  background:linear-gradient(100deg,var(--cyan) 0%,#5aa8ff 22%,var(--pink) 45%,#5aa8ff 70%,var(--cyan) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:gradFlow 7s linear 1.4s infinite;
}
@keyframes gradFlow{ from{ background-position:0% 50%; } to{ background-position:220% 50%; } }
.sparkles{ position:absolute; inset:-38% -10% -30% -6%; pointer-events:none; }
.sparkle{
  position:absolute; width:var(--s); height:var(--s); color:var(--c);
  filter:drop-shadow(0 0 6px var(--c));
  animation:sparkle var(--d,1.5s) ease-in-out forwards;
}
.sparkle svg{ width:100%; height:100%; display:block; }
@keyframes sparkle{
  0%{ transform:scale(0) rotate(0deg); opacity:0; }
  45%{ transform:scale(1) rotate(80deg); opacity:1; }
  100%{ transform:scale(0) rotate(170deg); opacity:0; }
}
.hero-sub,.hero-ctas,.hero-note{ opacity:0; animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-sub{ animation-delay:.95s; } .hero-ctas{ animation-delay:1.1s; } .hero-note{ animation-delay:1.25s; }
.hero-shot{ opacity:0; animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) 1.25s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ── Fondo animado del hero: curvas de luz (de la web anterior) ── */
.hero-waves{ position:absolute; top:0; left:0; width:100%; height:100vh; min-height:720px; z-index:0; pointer-events:none; }
.hero-noise{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}
@keyframes wave-float{ 0%,100%{ transform:translateY(0) rotate(0deg); } 33%{ transform:translateY(-18px) rotate(.4deg); } 66%{ transform:translateY(10px) rotate(-.3deg); } }
@keyframes wave-float-rev{ 0%,100%{ transform:translateY(0) rotate(0deg); } 33%{ transform:translateY(12px) rotate(-.3deg); } 66%{ transform:translateY(-16px) rotate(.4deg); } }
@keyframes wave-drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(12px,-10px); } }
.wa1{ animation:wave-float 12s ease-in-out infinite; transform-origin:30% 60%; }
.wa2{ animation:wave-float-rev 16s ease-in-out infinite; transform-origin:20% 50%; }
.wa3{ animation:wave-float 20s ease-in-out infinite 3s; transform-origin:15% 40%; }
.wp1{ animation:wave-float-rev 14s ease-in-out infinite 1s; transform-origin:90% 90%; }
.wp2{ animation:wave-float 18s ease-in-out infinite 2s; transform-origin:80% 85%; }
.wo1{ animation:wave-drift 10s ease-in-out infinite; transform-origin:15% 55%; }
.wo2{ animation:wave-drift 14s ease-in-out infinite 4s; transform-origin:88% 88%; }

/* ── Sección App móvil (iPhone con movimiento) ─────────── */
.app-sec{
  position:relative; overflow:hidden; padding:120px 0;
  background:
    radial-gradient(700px 420px at 18% 55%, rgba(0,200,240,.10), transparent 65%),
    radial-gradient(640px 400px at 34% 90%, rgba(217,70,239,.08), transparent 65%),
    linear-gradient(180deg,#ffffff,#f8faff);
}
.app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.new-pill{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  padding:5px 12px 5px 6px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.new-pill b{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  padding:3px 8px; border-radius:999px; background:linear-gradient(100deg,var(--cyan),#7a5cff 55%,var(--pink));
}
.app-feats{ margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; }
.app-feat{ display:flex; gap:12px; align-items:flex-start; }
.app-feat .ico{
  flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(10,116,240,.08); color:var(--brand);
}
.app-feat h4{ font-size:14.5px; margin-bottom:3px; }
.app-feat p{ font-size:13.5px; line-height:1.55; color:var(--muted); }
.app-cta{ margin-top:36px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.app-cta img{ height:50px; width:auto; transition:transform .2s ease; }
.app-cta a:hover img{ transform:translateY(-2px); }
.app-cta span{ font-size:13px; color:var(--muted); line-height:1.45; max-width:200px; }

/* escenario del teléfono */
.phone-stage{ position:relative; display:flex; justify-content:center; perspective:1600px; padding:30px 0; }
.phone-glow{
  position:absolute; width:440px; height:440px; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; filter:blur(60px); opacity:.8; pointer-events:none;
  background:
    radial-gradient(50% 50% at 35% 40%, rgba(0,200,240,.55), transparent 70%),
    radial-gradient(50% 50% at 70% 70%, rgba(217,70,239,.45), transparent 70%);
  animation:glowDrift 12s ease-in-out infinite alternate;
}
.phone-float{ position:relative; animation:floaty 7s ease-in-out infinite; }
.iphone{
  position:relative; width:292px; aspect-ratio:292/604; border-radius:56px; padding:10px;
  background:linear-gradient(145deg,#4a4e57 0%,#1c1e23 35%,#2b2e35 62%,#101114 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 4px #15171b,
    0 60px 100px -30px rgba(10,21,38,.45), 0 20px 40px -10px rgba(10,21,38,.25);
  transform:rotateY(16deg) rotateX(6deg) rotateZ(-1.5deg); transform-origin:50% 50%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.phone-stage:hover .iphone{ transform:rotateY(0) rotateX(0) rotateZ(0); }
.iphone::before,.iphone::after{ content:""; position:absolute; width:4px; border-radius:2px; background:linear-gradient(90deg,#2a2c31,#4b4f57); }
.iphone::before{ left:-3px; top:112px; height:28px;                           /* botón acción */
  box-shadow:0 52px 0 0 #3a3d44, 0 52px 0 0 #3a3d44, 0 110px 0 0 #3a3d44; }  /* volumen */
.iphone::after{ right:-3px; top:170px; height:84px; }                      /* encendido */
.iphone-screen{
  position:relative; width:100%; height:100%; border-radius:46px; overflow:hidden;
  background:#070b16; color:#eef1f6; display:flex; flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.iphone-screen::after{ /* reflejo del cristal */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:20;
  background:linear-gradient(120deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 30%, transparent 31%);
}
.island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px; height:28px; border-radius:20px; background:#000; z-index:15; }
.ip-status{ display:flex; justify-content:space-between; align-items:center; padding:16px 26px 6px; font-size:13px; font-weight:600; }
.ip-status .icons{ display:flex; gap:5px; align-items:center; }
.ip-head{ display:flex; align-items:center; gap:9px; padding:12px 16px 10px; }
.ip-head img{ width:26px; height:26px; border-radius:8px; }
.ip-head .t{ flex:1; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
.ip-head .t span{ color:var(--cyan); }
.ip-bell{ position:relative; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.07); display:grid; place-items:center; }
.ip-bell i{ position:absolute; top:-2px; right:-2px; min-width:15px; height:15px; border-radius:8px; background:#ef4444; font-size:9px; font-style:normal; font-weight:700; display:grid; place-items:center; }
.ip-chips{ display:flex; gap:6px; padding:0 16px 10px; }
.ip-chips span{ white-space:nowrap; font-size:10.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:#aab4c6; }
.ip-chips span.on{ background:linear-gradient(100deg,rgba(0,200,240,.25),rgba(217,70,239,.25)); color:#fff; }
.ip-list{ flex:1; padding:2px 0; }
.ip-row{ display:flex; gap:10px; align-items:center; padding:9px 16px; }
.ip-row.hl{ background:linear-gradient(90deg,rgba(0,200,240,.08),transparent); }
.ip-av{ position:relative; flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:700; color:#fff; }
.ip-av em{ position:absolute; right:-2px; bottom:-2px; width:15px; height:15px; border-radius:50%; border:2px solid #070b16; font-style:normal; }
.ip-body{ flex:1; min-width:0; }
.ip-top{ display:flex; justify-content:space-between; gap:6px; }
.ip-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-time{ font-size:10px; color:#6f7a8e; flex:0 0 auto; }
.ip-sub{ font-size:11px; color:#8a95a8; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-ia{ font-size:9.5px; font-weight:700; color:#fff; padding:1px 6px; border-radius:6px; margin-right:4px;
  background:linear-gradient(100deg,var(--cyan),var(--pink)); }
.ip-un{ flex:0 0 auto; min-width:18px; height:18px; border-radius:9px; background:#25d366; color:#04240f; font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px; }
.ip-typing{ display:inline-flex; gap:3px; vertical-align:middle; }
.ip-typing i{ width:4px; height:4px; border-radius:50%; background:var(--cyan); animation:typing 1.2s infinite ease-in-out; }
.ip-typing i:nth-child(2){ animation-delay:.15s; } .ip-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.ip-fab{ position:absolute; right:16px; bottom:78px; width:50px; height:50px; border-radius:16px; z-index:5;
  background:linear-gradient(135deg,var(--cyan),#7a5cff 55%,var(--pink)); display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(122,92,255,.5); }
.ip-tabs{ display:flex; justify-content:space-around; padding:10px 8px 22px; border-top:1px solid rgba(255,255,255,.06); background:rgba(7,11,22,.9); }
.ip-tabs span{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; color:#6f7a8e; }
.ip-tabs span.on{ color:var(--cyan); }
.ip-home{ position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:110px; height:4px; border-radius:3px; background:rgba(255,255,255,.55); z-index:16; }
/* notificación push que entra desde arriba en bucle */
.ip-notif{
  position:absolute; top:46px; left:9px; right:9px; z-index:14;
  display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:18px;
  background:rgba(40,44,56,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.4); transform:translateY(-140%); opacity:0;
  animation:notif 8s cubic-bezier(.2,.8,.2,1) 2s infinite;
}
.ip-notif img{ width:30px; height:30px; border-radius:8px; }
.ip-notif > div{ flex:1; min-width:0; }
.ip-notif b{ font-size:11.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-notif small{ font-size:10.5px; color:#b9c2d3; display:block; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ip-notif .when{ margin-left:auto; align-self:flex-start; font-size:9.5px; color:#8a95a8; }
@keyframes notif{ 0%{ transform:translateY(-140%); opacity:0; } 8%,48%{ transform:translateY(0); opacity:1; } 58%,100%{ transform:translateY(-140%); opacity:0; } }

.app-badge-ai{ top:36%; right:0; }
.app-badge-inv{ bottom:10%; left:0; animation-delay:-3s; }
.app-badge-inv .fb-ico{ background:#e8f7ee; color:#16a34a; }
.app-icon-float{
  position:absolute; top:4%; left:10%; width:74px; height:74px; border-radius:20px; overflow:hidden; z-index:3;
  box-shadow:0 0 0 1px rgba(0,200,240,.35), 0 16px 40px rgba(10,116,240,.35);
  animation:floaty 6s ease-in-out infinite; animation-delay:-1.5s;
}
.app-icon-float img{ width:100%; height:100%; }
@media (max-width:1000px){
  .app-grid{ grid-template-columns:1fr; gap:40px; }
  .phone-stage{ order:2; }
  .iphone{ transform:none; }
  .app-badge-ai{ right:0; } .app-badge-inv{ left:0; }
  .app-icon-float{ left:2%; }
}
@media (max-width:560px){
  .app-sec{ padding:80px 0; }
  .app-feats{ grid-template-columns:1fr; }
  .iphone{ width:258px; }
  .app-icon-float{ width:58px; height:58px; border-radius:16px; }
}

/* ── Bento "Una plataforma" ─────────────────────────────── */
.bento-head{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end; }
.bento-head .h-sec .soft{ color:#a3adbd; }
.bento-head .sub-sec{ margin-top:0; }
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:56px; }
.bcard{
  position:relative; overflow:hidden; border-radius:26px; background:#fff;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.bcard:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -18px rgba(10,21,38,.18); border-color:#d6e0ee; }
.b-omni{ grid-column:span 7; } .b-ai{ grid-column:span 5; } .b-ops{ grid-column:span 5; } .b-more{ grid-column:span 7; }
.viz{ position:relative; height:250px; overflow:hidden;
  background:linear-gradient(180deg,#f6f9fd,#ffffff); border-bottom:1px solid var(--line-2); }
.bc-text{ padding:24px 28px 28px; }
.bc-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:10px; }
.bc-text h3{ font-size:21px; letter-spacing:-.02em; margin-bottom:8px; }
.bc-text p{ font-size:14.5px; line-height:1.62; color:var(--muted); max-width:46ch; }

/* 1 · omnicanal */
.omni{ display:grid; grid-template-columns:54px 110px 1fr; align-items:center; height:100%; padding:0 26px; }
.omni-ch{ display:flex; flex-direction:column; justify-content:space-between; height:200px; }
.omni-ch span{ width:42px; height:42px; border-radius:13px; background:#fff; display:grid; place-items:center;
  box-shadow:0 0 0 1px var(--line), 0 6px 14px rgba(10,21,38,.06); }
.omni-ch img{ width:21px; height:21px; }
.omni-lines{ width:110px; height:200px; }
.omni-lines path{ fill:none; stroke:url(#omniGrad); stroke-width:1.6; stroke-dasharray:4 7; animation:dashFlow 1.6s linear infinite; }
@keyframes dashFlow{ to{ stroke-dashoffset:-22; } }
.omni-thread{ background:#fff; border-radius:18px; padding:14px; box-shadow:0 0 0 1px var(--line), 0 18px 40px -16px rgba(10,21,38,.2); }
.ot-head{ display:flex; align-items:center; gap:9px; padding-bottom:9px; margin-bottom:4px; border-bottom:1px solid var(--line-2); }
.ot-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#f97316,#ef4444); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
.ot-head b{ font-size:13px; } .ot-head small{ display:block; font-size:11px; color:var(--muted); }
.msg{ display:flex; gap:7px; align-items:flex-end; margin-top:7px; opacity:0; }
.msg p{ font-size:12px; line-height:1.4; padding:7px 10px; border-radius:12px; background:#f1f4f9; color:var(--ink); max-width:85%; }
.msg img{ width:15px; height:15px; flex:0 0 15px; margin-bottom:5px; }
.msg.me{ justify-content:flex-end; }
.msg.me p{ background:linear-gradient(100deg,#0a74f0,#6d5dfc); color:#fff; }
.msg .ai{ font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:5px; background:rgba(255,255,255,.22); margin-right:4px; }
.m1{ animation:m1 10s ease infinite; } .m2{ animation:m2 10s ease infinite; }
.m3{ animation:m3 10s ease infinite; } .m4{ animation:m4 10s ease infinite; }
@keyframes m1{ 0%,4%{ opacity:0; transform:translateY(8px); } 9%,90%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }
@keyframes m2{ 0%,20%{ opacity:0; transform:translateY(8px); } 25%,90%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }
@keyframes m3{ 0%,38%{ opacity:0; transform:translateY(8px); } 43%,90%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }
@keyframes m4{ 0%,56%{ opacity:0; transform:translateY(8px); } 61%,90%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }

/* 2 · agente IA (tarjeta oscura) */
.b-ai{ background:var(--navy); border-color:#0f1d36; }
.b-ai .viz{ background:
    radial-gradient(260px 180px at 50% 45%, rgba(0,200,240,.20), transparent 70%),
    radial-gradient(240px 160px at 70% 80%, rgba(217,70,239,.16), transparent 70%), #061126;
  border-bottom-color:rgba(255,255,255,.06); }
.b-ai .bc-tag{ color:var(--cyan); } .b-ai h3{ color:#fff; } .b-ai p{ color:#9fb0cb; }
.b-ai:hover{ border-color:#1d3358; box-shadow:0 24px 50px -18px rgba(4,12,30,.55); }
.orb{ position:absolute; left:50%; top:40%; width:74px; height:74px; transform:translate(-50%,-50%); display:grid; place-items:center; }
.orb svg{ width:40px; height:40px; color:#fff; filter:drop-shadow(0 0 12px rgba(0,200,240,.9)); animation:orbPulse 3s ease-in-out infinite; position:relative; z-index:2; }
.orb .core{ position:absolute; inset:10px; border-radius:50%; background:radial-gradient(circle,#2b6bff,#0a1a3a 70%); box-shadow:0 0 30px rgba(10,116,240,.8); }
.orb .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(0,200,240,.5); animation:ringOut 3s ease-out infinite; }
.orb .ring:nth-child(2){ animation-delay:1s; } .orb .ring:nth-child(3){ animation-delay:2s; }
@keyframes ringOut{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(2.6); opacity:0; } }
@keyframes orbPulse{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.12) rotate(45deg); } }
.intent{ position:absolute; top:18px; left:0; right:0; height:22px; text-align:center; font-size:12px; color:#9fb0cb; }
.intent span{ position:absolute; left:0; right:0; opacity:0; animation:specCycle 8s infinite; }
.intent b{ color:#fff; font-weight:600; }
.specs{ position:absolute; left:16px; right:16px; bottom:22px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.specs span{ font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px; color:#7f90ad;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); animation:specOn 8s infinite; }
.specs span:nth-child(2),.intent span:nth-child(2){ animation-delay:2s; }
.specs span:nth-child(3),.intent span:nth-child(3){ animation-delay:4s; }
.specs span:nth-child(4),.intent span:nth-child(4){ animation-delay:6s; }
@keyframes specCycle{ 0%{ opacity:0; transform:translateY(4px); } 3%,22%{ opacity:1; transform:none; } 25%,100%{ opacity:0; } }
@keyframes specOn{
  0%,23%{ color:#fff; border-color:rgba(0,200,240,.7); background:rgba(0,200,240,.16); box-shadow:0 0 18px rgba(0,200,240,.35); }
  26%,100%{ color:#7f90ad; border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.03); box-shadow:none; }
}
.ai-stats{ display:flex; gap:22px; margin-top:16px; }
.ai-stats div{ font-size:12px; color:#8193b1; }
.ai-stats b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:20px; color:#fff; letter-spacing:-.02em; }

/* 3 · operativa */
.ops{ position:absolute; inset:0; padding:22px 26px; }
.inv{ position:relative; background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 0 0 1px var(--line), 0 16px 34px -14px rgba(10,21,38,.2); }
.inv-h{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
.inv-h small{ display:block; font-size:11px; color:var(--muted); font-weight:500; }
.paid{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#16a34a;
  border:1.5px solid #16a34a; border-radius:6px; padding:3px 7px; transform:rotate(-8deg); animation:stamp 6s ease infinite; }
@keyframes stamp{ 0%,15%{ opacity:0; transform:rotate(-8deg) scale(1.8); } 22%,90%{ opacity:1; transform:rotate(-8deg) scale(1); } 97%,100%{ opacity:0; } }
.inv-rows{ margin-top:10px; font-size:11.5px; color:var(--ink-2); }
.inv-rows div{ display:flex; justify-content:space-between; padding:3px 0; font-variant-numeric:tabular-nums; }
.inv-rows .tot{ border-top:1px dashed var(--line); margin-top:4px; padding-top:6px; font-weight:700; color:var(--ink); font-size:12.5px; }
.trk{ margin-top:12px; background:#fff; border-radius:14px; padding:11px 14px; box-shadow:0 0 0 1px var(--line); font-size:11.5px; color:var(--ink-2); }
.trk b{ color:var(--ink); }
.trk-bar{ margin-top:8px; height:5px; border-radius:3px; background:#eef2f7; overflow:hidden; }
.trk-bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#0a74f0,#00c8f0); animation:trk 6s ease-in-out infinite; }
@keyframes trk{ 0%{ width:18%; } 60%,100%{ width:74%; } }

/* 4 · y mucho más */
.b-more{ background:linear-gradient(135deg,#f5f8ff,#fbf6ff); }
.b-more .viz{ background:transparent; display:flex; flex-direction:column; justify-content:center; gap:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.mq{ display:flex; gap:10px; width:max-content; animation:mq 42s linear infinite; }
.mq.rev{ animation-direction:reverse; animation-duration:48s; }
.mq span{ white-space:nowrap; font-size:13px; font-weight:500; color:var(--ink-2); background:#fff; padding:9px 15px;
  border-radius:999px; box-shadow:0 0 0 1px var(--line), 0 4px 10px rgba(10,21,38,.04); }
@keyframes mq{ to{ transform:translateX(-50%); } }
.b-more .link-arrow{ margin-top:14px; }

/* animaciones solo cuando la rejilla está a la vista */
.bento:not(.in) *{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){
  .bento *{ animation:none !important; }
  .msg,.intent span:first-child,.paid{ opacity:1 !important; transform:none !important; }
}
@media (max-width:1000px){
  .bento-head{ grid-template-columns:1fr; gap:18px; }
  .b-omni,.b-ai,.b-ops,.b-more{ grid-column:span 12; }
}
@media (max-width:560px){
  .b-omni .viz{ height:auto; }
  .omni{ grid-template-columns:1fr; gap:14px; padding:18px 16px 20px; }
  .omni-ch{ flex-direction:row; justify-content:center; gap:12px; height:auto; }
  .omni-ch span{ width:38px; height:38px; }
  .omni-lines{ display:none; }
  .viz{ height:240px; }
  .bc-text{ padding:20px 22px 24px; }
}

/* ── Precio anterior tachado ───────────────────────────── */
.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; }
.cs-was{
  color:var(--muted); font-weight:500; text-decoration:line-through;
  text-decoration-thickness:1.5px; text-decoration-color:rgba(217,70,239,.8);
  margin-right:.25em; white-space:nowrap;
}
.plan-was{ display:flex; align-items:center; gap:10px; margin-top:14px; min-height:24px; }
.plan-was .cs-was{ font-size:15px; }
.plan-was + .plan-price{ margin-top:4px; }
.save-chip{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  color:#15803d; background:rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.22);
  padding:3px 8px; border-radius:999px;
}
.save-chip.neutral{ color:var(--ink-2); background:var(--bg-soft-2); border-color:var(--line); }
.plan.featured .save-chip{ color:#fff; background:linear-gradient(100deg,#16a34a,#0ea5a4); border-color:transparent; }
.hero-note .cs-was{ color:#7f93b3; text-decoration-color:rgba(217,70,239,.9); }
table.cmp thead .cs-was{ color:#8ea0bf; }

/* ── Selector mensual / anual ───────────────────────────── */
.billing{ display:inline-flex; gap:4px; margin-top:30px; padding:4px; border-radius:999px;
  background:var(--bg-soft-2); border:1px solid var(--line); }
.billing-opt{ appearance:none; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:14px; font-weight:600; color:var(--muted); padding:9px 18px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.billing-opt.is-on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(10,21,38,.12); }
.billing-gift{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#15803d; background:rgba(22,163,74,.12); padding:3px 7px; border-radius:999px; }
.billing + .plans{ margin-top:34px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1000px){
  .split{ grid-template-columns:1fr; gap:42px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:34px 30px; }
  .plans{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:760px){
  .section{ padding:76px 0; }
  .section.tight{ padding:58px 0; }
  .nav-links{ display:none; }
  .nav-ctas .ghost{ display:none; }
  .cs-announce{ font-size:11px; }
  .hero{ padding-top:calc(var(--nav-h) + var(--announce-h) + 64px); }
  .hero h1{ max-width:none; }
  .hero-shot{ margin-top:48px; }
  .hero-shot::after{ height:40%; }
  .shot-bar{ padding:9px 12px; }
  .shot-url{ display:none; }
  .grid-2,.grid-3,.grid-4,.plans{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .footer-inner{ grid-template-columns:1fr; gap:34px; }
  .footer-bottom{ justify-content:flex-start; }
  .footer-bottom a{ margin:0 18px 0 0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ── Banner de cookies (heredado del sitio anterior) ───── */
.cookie-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;z-index:9997}
.cookie-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.cookie-banner{position:fixed;left:18px;bottom:18px;width:min(470px,calc(100% - 36px));background:#0a0f1e;color:rgba(255,255,255,.85);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 30px rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.2);padding:24px;z-index:9998;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .28s,transform .28s,visibility .28s}
.cookie-banner.show{opacity:1;visibility:visible;transform:translateY(0)}
.cookie-title{margin:0 0 12px;font-size:18px;font-weight:800;color:#fff;line-height:1.25}
.cookie-text{margin:0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.65)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cookie-btn{appearance:none;border:1px solid #00c8ff;background:linear-gradient(135deg,#00c8f0,#cc00ee);color:#fff;font-weight:700;font-size:15px;border-radius:10px;padding:12px 18px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.cookie-btn:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(0,200,255,.3)}
.cookie-btn.secondary{background:rgba(0,200,255,.1);color:#00c8ff;border-color:rgba(0,200,255,.3)}
.cookie-btn.ghost{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.15)}
.cookie-settings{display:none;margin-top:18px;padding-top:18px;border-top:1px solid rgba(0,200,255,.15)}
.cookie-settings.show{display:block}
.cookie-setting-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cookie-setting-item:last-child{border-bottom:0;padding-bottom:0}
.cookie-setting-text strong{display:block;margin-bottom:4px;font-size:14px;color:#fff}
.cookie-setting-text span{display:block;font-size:13px;line-height:1.55;color:rgba(255,255,255,.55)}
.cookie-switch{position:relative;width:52px;height:30px;flex:0 0 52px}
.cookie-switch input{opacity:0;width:0;height:0}
.cookie-slider{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.15);transition:background .2s;cursor:pointer}
.cookie-slider::before{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:transform .2s}
.cookie-switch input:checked+.cookie-slider{background:linear-gradient(135deg,#00c8f0,#cc00ee)}
.cookie-switch input:checked+.cookie-slider::before{transform:translateX(22px)}
.cookie-switch input:disabled+.cookie-slider{background:rgba(255,255,255,.1);cursor:not-allowed}