:root{ --card:#ffffff; --card-2:var(--surface); }
  html[data-theme="dark"]{
    --bg: oklch(0.155 0.012 264);
    --ink-900: oklch(0.97 0.004 264);
    --ink-800: oklch(0.90 0.006 264);
    --ink-700: oklch(0.80 0.008 264);
    --ink-600: oklch(0.70 0.010 264);
    --ink-500: oklch(0.62 0.012 264);
    --ink-400: oklch(0.52 0.012 264);
    --ink-300: oklch(0.42 0.012 264);
    --surface: oklch(0.205 0.013 264);
    --surface-2: oklch(0.245 0.015 264);
    --line: oklch(0.30 0.012 264);
    --line-strong: oklch(0.40 0.013 264);
    --blue-tint: oklch(0.28 0.05 264);
    --blue-tint-2: oklch(0.34 0.07 264);
    --card: oklch(0.205 0.013 264);
    --card-2: oklch(0.245 0.015 264);
  }

  body{margin:0; background:var(--bg); color:var(--ink-900); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; line-height:1.55; transition:background .3s,color .3s;}
  a{color:inherit; text-decoration:none;}
  a:hover{color:var(--blue);}
  ::selection{background:var(--blue); color:#fff;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
  .eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:10px;}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--blue); display:inline-block;}
  .btn{font-family:var(--font-sans); font-weight:700; font-size:15px; border-radius:var(--r-md); padding:13px 22px; border:1px solid transparent; cursor:pointer; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .2s, border-color .2s, color .2s; display:inline-flex; gap:9px; align-items:center; white-space:nowrap;}
  .btn.primary{background:var(--blue); color:#fff; box-shadow:0 1px 2px oklch(0.2 0.02 264 / .12), inset 0 1px 0 rgba(255,255,255,.16);}
  .btn.primary:hover{background:var(--blue-bright); transform:translateY(-2px); color:#fff; box-shadow:0 12px 28px oklch(0.52 0.215 264 / .32), inset 0 1px 0 rgba(255,255,255,.2);}
  .btn:active{transform:translateY(0) scale(.98);}
  .btn.ghost{background:transparent; color:var(--ink-900); border-color:var(--line-strong);} .btn.ghost:hover{border-color:var(--ink-900); color:var(--ink-900);}
  .btn.sm{padding:10px 18px; font-size:14px;}
  .arrow{transition:transform .2s;} .btn:hover .arrow{transform:translateX(3px);}

  .nav{position:sticky; top:0; z-index:60; background:color-mix(in oklch,var(--bg) 82%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
  .nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px;}
  .nav .links{display:flex; gap:34px; font-size:15px; color:var(--ink-700);}
  @media(max-width:920px){ .nav .links{display:none;} }

  section{padding:128px 0;}
  .sec-head{max-width:720px;}
  .sec-head h2{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4.1vw,50px); letter-spacing:-.038em; line-height:1.06; margin:0; text-wrap:balance;}
  .sec-head p{font-size:18px; color:var(--ink-600); margin:18px 0 0; line-height:1.6; text-wrap:pretty;}
  .blue{color:var(--blue);}

  /* ===== HERO ===== */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:0;}
  .hero .grid-bg{position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(130% 95% at 92% 2%,#000 0%,transparent 56%); opacity:.6;}
  .hero .hero-in{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; padding:110px 40px 104px; position:relative; z-index:1;}
  .hero h1{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5.1vw,64px); line-height:1.0; letter-spacing:-.045em; margin:22px 0 0; text-wrap:balance;}
  .hero .lede{font-size:19px; color:var(--ink-600); max-width:50ch; margin:26px 0 0; line-height:1.6; text-wrap:pretty;}
  .hero .cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  @media(max-width:960px){ .hero .hero-in{grid-template-columns:1fr; text-align:center;} .hero .lede{margin-left:auto; margin-right:auto;} .hero .cta{justify-content:center;} }

  /* ===== capas · hero visual ===== */
  .stack-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; min-width:0; width:100%; text-align:left;}
  .stack-card .bar{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--card-2);}
  .stack-card .bar .lbl{font-family:var(--font-mono); font-size:11px; color:var(--ink-500); letter-spacing:.04em; margin-left:auto;}
  .stack-card .bar .dots{display:flex; gap:6px;} .stack-card .bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);}

  /* stepper rail */
  .rail{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid var(--line);}
  .step{border:none; border-left:1px solid var(--line); background:transparent; text-align:left; padding:13px 14px 12px; cursor:pointer; font:inherit; transition:.18s; position:relative;}
  .step:first-child{border-left:none;}
  .step .sn{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink-400); display:block;}
  .step .st{font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:-.01em; color:var(--ink-500); display:block; margin-top:5px; line-height:1.2;}
  .step::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent;}
  .step:hover .st{color:var(--ink-800);}
  .step.done .sn{color:var(--blue);} .step.done .st{color:var(--ink-700);}
  .step.on{background:var(--blue-tint);}
  .step.on .sn{color:var(--blue);} .step.on .st{color:var(--ink-900);}
  .step.on::after{background:var(--blue);}

  /* morphing viewport */
  .view{padding:18px; min-height:322px; position:relative;}
  .vpane{display:none; flex-direction:column; gap:8px;}
  .vpane.on{display:flex; animation:fadeUp .4s cubic-bezier(.22,1,.36,1);}
  @keyframes fadeUp{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
  @media(prefers-reduced-motion:reduce){ .vpane.on{animation:none;} }
  .vh{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); display:flex; justify-content:space-between; align-items:center; margin-bottom:2px;}

  /* 01 · dominios estructurados */
  .rec{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; font-size:13px; background:var(--card-2);}
  .rec .lbl{flex:1; min-width:0; color:var(--ink-800); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .rec .meta{font-family:var(--font-mono); font-size:10px; color:var(--ink-400); flex:none;}
  .rec .ok{width:15px; height:15px; border-radius:4px; background:var(--blue); flex:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size:10px; background-position:center; background-repeat:no-repeat;}

  /* 02 · conexión */
  .net{position:relative; height:190px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card-2); overflow:hidden;}
  .net svg{position:absolute; inset:0; width:100%; height:100%;}
  .net .nl{stroke:var(--blue); stroke-width:1.4; opacity:.55;}
  .net .nd{fill:var(--card); stroke:var(--blue); stroke-width:1.6;}
  .net .nc{fill:var(--blue);}
  .net text{font-family:var(--font-mono); font-size:8.5px; fill:var(--ink-500);}
  .netnote{font-size:12.5px; color:var(--ink-600); line-height:1.5;}

  /* 03 · inteligencia */
  .chartbox{border:1px solid var(--line); border-radius:var(--r-md); padding:13px;}
  .chartbox .ch{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .chartbox .ch .l{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500);}
  .find{display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; color:var(--ink-700); line-height:1.45;}
  .find i{width:6px; height:6px; border-radius:2px; flex:none; margin-top:6px;}
  .badge{font-family:var(--font-mono); font-size:9.5px; padding:3px 8px; border-radius:100px; display:inline-flex; gap:5px; align-items:center; white-space:nowrap;}
  .badge .dot{width:5px;height:5px;border-radius:50%;}
  .badge.warn{background:color-mix(in oklch,var(--amber) 20%,var(--card)); color:var(--amber);}
  .badge.ok{background:color-mix(in oklch,var(--green) 16%,var(--card)); color:var(--green);}

  /* 04 · actuar */
  .act{display:flex; gap:11px; align-items:flex-start; padding:10px 0;}
  .act+.act{border-top:1px solid var(--line);}
  .act .tick{font-family:var(--font-mono); font-size:9.5px; color:var(--ink-400); flex:none; width:34px; padding-top:2px;}
  .act .bd{min-width:0; flex:1;}
  .act .bd b{display:block; font-size:12.5px; font-weight:600; color:var(--ink-800);}
  .act .bd span{display:block; font-size:12px; color:var(--ink-500); margin-top:2px; line-height:1.45;}
  .act .ic{width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; background:var(--blue-tint); color:var(--blue); font-family:var(--font-mono); font-size:10px;}

  .view .cap{font-family:var(--font-mono); font-size:10px; color:var(--ink-400); letter-spacing:.02em; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px;}
  .view .cap::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--blue); flex:none;}
  @media(max-width:640px){ .hero .hero-in{padding:64px 22px;} .step{padding:11px 9px;} .step .st{font-size:11px;} .view{min-height:0;} }

  /* ===== EL CAMBIO ===== */
  .cambio-sec{background:var(--surface); border-bottom:1px solid var(--line);}
  .shift{display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; margin-top:48px;}
  .shift .side{border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; background:var(--card);}
  .shift .side.now{background:var(--ink-900); border-color:var(--ink-900); color:#fff;}
  .shift .side .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); margin-bottom:14px;}
  .shift .side.now .k{color:var(--blue-soft);}
  .shift .side h3{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.02em; margin:0 0 14px; line-height:1.15;}
  .shift .side ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px;}
  .shift .side li{font-size:14px; color:var(--ink-600); line-height:1.5; padding-left:18px; position:relative;}
  .shift .side li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:2px; background:var(--ink-300);}
  .shift .side.now li{color:rgba(255,255,255,.78);}
  .shift .side.now li::before{background:var(--blue-soft);}
  .shift .mid{font-family:var(--font-mono); font-size:22px; color:var(--blue); flex:none;}
  @media(max-width:860px){ .shift{grid-template-columns:1fr; gap:16px;} .shift .mid{transform:rotate(90deg); text-align:center;} }

  /* ===== PILARES ===== */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px;}
  .pillar{border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; background:var(--card); display:flex; flex-direction:column; transition:.18s;}
  .pillar:hover{border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .pillar .pn{font-family:var(--font-mono); font-size:11.5px; color:var(--blue); letter-spacing:.08em;}
  .pillar h3{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.025em; margin:16px 0 12px; line-height:1.12;}
  .pillar .p1{font-size:14.5px; color:var(--ink-700); margin:0 0 14px; line-height:1.55;}
  .pillar .p2{font-size:13.5px; color:var(--ink-600); margin:0; line-height:1.55;}
  .pillar ul{margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none; display:flex; flex-direction:column; gap:8px;}
  .pillar li{font-family:var(--font-mono); font-size:12px; color:var(--ink-500); letter-spacing:.01em; padding-left:16px; position:relative;}
  .pillar li::before{content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:1px; background:var(--blue);}
  @media(max-width:900px){ .pillars{grid-template-columns:1fr;} }

  /* ===== PROGRESION ===== */
  .prog-sec{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .proc{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px;}
  .phase{border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; background:var(--card); transition:.18s;}
  .phase:hover{border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .phase .pn{font-family:var(--font-mono); font-size:13px; color:var(--blue); letter-spacing:.06em;}
  .phase .pl{height:3px; background:var(--blue-tint-2); border-radius:3px; margin:16px 0 14px; position:relative; overflow:hidden;}
  .phase .pl::after{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--blue); border-radius:3px; transition:width 1.2s cubic-bezier(.22,1,.36,1); transition-delay:calc(.35s + var(--i,0) * 120ms);}
  .proc.in .phase .pl::after{width:var(--p,25%);}
  .phase h3{font-family:var(--font-display); font-weight:700; font-size:18.5px; letter-spacing:-.015em; margin:0 0 8px;}
  .phase p{font-size:13.5px; color:var(--ink-600); margin:0; line-height:1.55;}
  @media(max-width:900px){ .proc{grid-template-columns:1fr 1fr;} }
  @media(max-width:520px){ .proc{grid-template-columns:1fr;} }

  /* ===== AGENTES ===== */
  .agent-head{max-width:700px;}
  .agentgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:48px;}
  .agent{background:var(--card); padding:26px 24px; transition:.15s;}
  .agent:hover{background:var(--card-2);}
  .agent .an{font-family:var(--font-mono); font-size:10.5px; color:var(--blue); letter-spacing:.07em; text-transform:uppercase;}
  .agent h4{font-family:var(--font-display); font-weight:700; font-size:16.5px; letter-spacing:-.015em; margin:12px 0 7px; line-height:1.2;}
  .agent p{font-size:13.5px; color:var(--ink-600); margin:0; line-height:1.5;}
  .notchat{margin-top:36px; padding:26px 30px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:var(--r-md); background:var(--surface); font-size:16px; color:var(--ink-700); line-height:1.6;}
  .notchat b{color:var(--ink-900); font-weight:700;}
  @media(max-width:900px){ .agentgrid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .agentgrid{grid-template-columns:1fr;} }

  /* ===== INDUSTRIAS ===== */
  .industrias-sec{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .sectgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;}
  .sectcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; transition:.18s;}
  .sectcard:hover{border-color:var(--blue);}
  .sectcard h4{font-family:var(--font-display); font-weight:700; font-size:17px; margin:0 0 6px; letter-spacing:-.01em;}
  .sectcard p{font-size:13.5px; color:var(--ink-600); margin:0; line-height:1.5;}
  @media(max-width:900px){ .sectgrid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .sectgrid{grid-template-columns:1fr;} }

  /* ===== CLIENTES ===== */
  .cli-sec{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .cli-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px;}
  .cli-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); height:190px; display:flex; align-items:center; justify-content:center; padding:22px 24px; transition:.18s;}
  .cli-card:hover{border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .cli-card img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
  .cli-card img.mono{filter:brightness(0) opacity(.62); transform:scale(.84);}
  .cli-card img.tall{transform:scale(1.22);}
  .cli-card.brand-blue{background:#2B5BFD; border-color:#2B5BFD;}
  .cli-card.brand-blue:hover{border-color:#5C82FF;}
  .cli-note{font-family:var(--font-mono); font-size:12px; color:var(--ink-400); margin-top:22px; letter-spacing:.03em;}
  @media(max-width:680px){ .cli-grid{gap:12px;} .cli-card{height:130px; padding:16px;} }
  @media(max-width:480px){ .cli-grid{gap:8px;} .cli-card{height:96px; padding:10px 12px; border-radius:var(--r-md);} }

  /* ===== DONDE OPERAMOS ===== */
  .geo-sec{background:var(--ink-900); color:#fff; border-top:1px solid var(--line); position:relative; overflow:hidden;}
  .geo-sec .gb{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(110% 90% at 20% 0%,#000,transparent 70%); pointer-events:none;}
  .geo-in{display:grid; grid-template-columns:.62fr 1.38fr; gap:48px; align-items:center; position:relative;}
  .geo-copy h2{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,40px); letter-spacing:-.03em; line-height:1.1; margin:16px 0 0; color:#fff;}
  .geo-copy p{font-size:16.5px; color:rgba(255,255,255,.62); margin:18px 0 0; line-height:1.6; max-width:42ch;}
  .geo-copy .eyebrow{color:var(--blue-soft);} .geo-copy .eyebrow::before{background:var(--blue-soft);}
  .geo-legend{display:flex; flex-direction:column; gap:12px; margin-top:30px;}
  .geo-legend .lg{display:flex; align-items:center; gap:12px; font-size:13.5px; color:rgba(255,255,255,.72);}
  .geo-legend .sw{width:16px; height:16px; border-radius:4px; flex:none;}
  .geo-legend .sw.mx{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30);}
  .geo-legend .sw.son{background:var(--blue); border:1px solid var(--blue-bright);}
  .geo-legend .sw.city{background:transparent; border:none; display:flex; align-items:center; justify-content:center;}
  .geo-legend .sw.city::after{content:""; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(47,93,245,.35);}
  .geo-cities{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;}
  .geo-cities span{font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); border-radius:100px; padding:7px 14px;}
  .geo-map{position:relative; min-width:0;}
  .geo-map svg{width:100%; height:auto; display:block; overflow:visible;}
  .geo-map .mx-state{fill:rgba(255,255,255,.13); stroke:none; stroke-width:0; vector-effect:non-scaling-stroke;}
  .geo-map .mx-body{filter:drop-shadow(0 0 1px rgba(255,255,255,.75));}
  .geo-map .mx-outline{fill:none; stroke:rgba(255,255,255,.42); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linejoin:round;}
  .geo-map .son{fill:rgba(47,93,245,.30); stroke:var(--blue-bright); stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round;}
  .geo-map .city-dot{fill:#fff;}
  .geo-map .city-ring{fill:none; stroke:var(--blue-bright); stroke-width:1.2; opacity:.55;}
  .geo-map .city-pulse{fill:none; stroke:var(--blue-bright); stroke-width:1.4; transform-origin:center; transform-box:fill-box;}
  .geo-map .city-lbl{font-family:var(--font-mono); font-size:14px; letter-spacing:.05em; fill:rgba(255,255,255,.92); paint-order:stroke; stroke:rgba(13,15,18,.75); stroke-width:3px; stroke-linejoin:round;}
  .geo-map .son-lbl{font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:.02em; fill:#fff; paint-order:stroke; stroke:rgba(13,15,18,.6); stroke-width:4px;}
  .geo-map .mx-lbl{font-family:var(--font-mono); font-size:14px; letter-spacing:.28em; fill:rgba(255,255,255,.30);}
  @keyframes geoPulse{0%{transform:scale(.6); opacity:.75}100%{transform:scale(2.6); opacity:0}}
  .geo-map .city-pulse{animation:geoPulse 2.8s ease-out infinite;}
  @media(prefers-reduced-motion:reduce){ .geo-map .city-pulse{animation:none; opacity:.25;} }
  @media(max-width:900px){ .geo-in{grid-template-columns:1fr; gap:36px;} }

  /* ===== CTA FINAL ===== */
  .final-sec{padding:112px 0;}
  .final{background:var(--blue); border-radius:var(--r-xl); padding:70px 56px; color:#fff; text-align:center; position:relative; overflow:hidden;}
  .final .gb{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(80% 120% at 50% 0%,#000,transparent 72%);}
  .final h2{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.03em; margin:0; position:relative;}
  .final p{font-size:17px; opacity:.92; margin:16px 0 32px; position:relative;}
  .final .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative;}
  .final .btn.white{background:#fff; color:var(--blue);} .final .btn.white:hover{background:var(--blue-tint); color:var(--blue);}
  .final .contact-mini{display:flex; gap:20px; justify-content:center; margin-top:26px; position:relative; font-family:var(--font-mono); font-size:12.5px; flex-wrap:wrap;}
  .final .contact-mini a{opacity:.85;} .final .contact-mini a:hover{opacity:1; color:#fff;}

  footer{padding:48px 0 64px; border-top:1px solid var(--line);}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;}
  footer .links{display:flex; gap:24px; font-size:14px; color:var(--ink-600);}
  footer .fl{font-family:var(--font-mono); font-size:12px; color:var(--ink-400);}

  /* ===== MOTION ===== */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1);}
  .reveal.in{opacity:1; transform:none; filter:none;}
  .sec-head.reveal:not(.in), .notchat.reveal:not(.in), .geo-copy.reveal:not(.in), .final.reveal:not(.in){filter:blur(8px);}
  .stagger > *{opacity:0; transform:translateY(28px) scale(.985); filter:blur(6px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i,0) * 80ms);}
  .stagger.in > *{opacity:1; transform:none; filter:none;}
  .sec-head h2{opacity:0; transform:translateY(14px); transition:opacity .75s cubic-bezier(.22,1,.36,1) .06s, transform .75s cubic-bezier(.22,1,.36,1) .06s;}
  .sec-head.in h2, .reveal.in .sec-head h2, .sec-head.in > h2{opacity:1; transform:none;}
  .reveal.in h2{opacity:1; transform:none;}

  /* scroll progress */
  .sprog{position:fixed; top:0; left:0; height:2px; width:100%; z-index:80; background:transparent; pointer-events:none;}
  .sprog i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transition:width .12s linear;}

  /* nav condense */
  .nav{transition:background .35s, border-color .35s;}
  .nav .wrap{transition:height .4s cubic-bezier(.22,1,.36,1), max-width .45s cubic-bezier(.22,1,.36,1), margin .4s cubic-bezier(.22,1,.36,1), border-radius .4s, background .35s, box-shadow .35s, border-color .35s, padding .4s cubic-bezier(.22,1,.36,1); border:1px solid transparent;}
  .nav.small{background:transparent; border-bottom-color:transparent; backdrop-filter:none;}
  .nav.small .wrap{height:54px; max-width:1000px; margin-top:10px; border-radius:100px; padding:0 10px 0 22px; background:color-mix(in oklch,var(--bg) 76%,transparent); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border-color:var(--line); box-shadow:0 10px 40px oklch(0.2 0.02 264 / .10), 0 1px 2px oklch(0.2 0.02 264 / .06);}
  .nav .links a{position:relative; transition:color .2s;}
  .nav .links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.22,1,.36,1);}
  .nav .links a:hover::after{transform:scaleX(1);}

  /* hero entrance */
  @keyframes heroIn{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
  .hero-copy > *{animation:heroIn .8s cubic-bezier(.22,1,.36,1) both;}
  .hero-copy > *:nth-child(1){animation-delay:.05s}
  .hero-copy > *:nth-child(2){animation-delay:.15s}
  .hero-copy > *:nth-child(3){animation-delay:.25s}
  .hero-copy > *:nth-child(4){animation-delay:.35s}
  .hero-copy > h1.split{animation:none; opacity:1; transform:none;}
  @keyframes gridDrift{from{background-position:0 0, 0 0}to{background-position:52px 52px, 52px 52px}}
  .hero .grid-bg{animation:gridDrift 28s linear infinite;}
  @keyframes gridDrift2{from{background-position:0 0, 0 0}to{background-position:-42px 42px, -42px 42px}}
  .final .gb{animation:gridDrift2 34s linear infinite;}

  /* cards */
  .pillar, .phase, .agent, .sectcard, .cli-card{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .2s, background .2s;}
  .cli-card:hover{transform:translateY(-4px);}
  .cli-card img{transition:transform .35s cubic-bezier(.22,1,.36,1);}
  .cli-card:hover img{transform:scale(1.06);}
  .cli-card.brand-blue:hover img, .cli-card:hover img.mono{transform:scale(.89);}
  .cli-card:hover img.tall{transform:scale(1.3);}

  /* map entrance */
  @keyframes dotIn{from{opacity:0; transform:scale(.2)}to{opacity:1; transform:none}}
  .geo-map .city-g{opacity:0; animation:dotIn .55s cubic-bezier(.34,1.56,.64,1) both; transform-origin:center; transform-box:fill-box;}
  .geo-map .son{opacity:0; animation:sonIn .9s cubic-bezier(.22,1,.36,1) .35s both;}
  @keyframes sonIn{from{opacity:0}to{opacity:1}}
  .geo-map .mx-body{opacity:0; animation:sonIn .9s ease-out both;}

  @media(prefers-reduced-motion:reduce){
    .reveal,.stagger > *,.sec-head h2{opacity:1 !important; transform:none !important; filter:none !important;}
    .w > span{opacity:1 !important; transform:none !important; filter:none !important; animation:none !important;}
    .hero .aurora i, .final::before, .step.on::after, .shift .mid, .side.now::before{animation:none !important;}
    .hero-visual{transform:none !important;}
    .phase .pl::after{transition:none !important;}
    .hero-copy > *, .hero .grid-bg, .final .gb, .geo-map .city-g, .geo-map .son, .geo-map .mx-body{animation:none !important; opacity:1 !important;}
  }

  @media(max-width:600px){
    .wrap{padding:0 20px;}
    section{padding:64px 0;}
    .nav .wrap{height:60px;}
    .nav .btn.primary{padding:9px 15px; font-size:13.5px;}
    .sec-head h2{font-size:26px;}
    .shift, .pillars, .proc, .agentgrid, .sectgrid, .cli-grid{margin-top:32px;}
    .final{padding:44px 26px; border-radius:var(--r-lg);}
  }

  /* ===== PAGINAS INTERIORES ===== */
  .page-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface); padding:0;}
  .page-hero .grid-bg{position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(130% 110% at 50% 0%,#000 0%,transparent 62%); opacity:.7;}
  .page-hero .wrap{position:relative; padding-top:84px; padding-bottom:84px; text-align:center;}
  .page-hero .crumbs{justify-content:center;}
  .page-hero .eyebrow{margin-top:20px;}
  .page-hero h1{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,46px); line-height:1.06; letter-spacing:-.032em; margin:18px auto 0; max-width:22ch;}
  .page-hero .lede{font-size:17.5px; color:var(--ink-600); max-width:60ch; margin:20px auto 0; line-height:1.6;}
  .page-hero .cta{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; justify-content:center;}
  @media(max-width:600px){ .page-hero .wrap{padding-top:48px; padding-bottom:48px;} }

  /* en paginas interiores el encabezado de seccion comparte el eje centrado */
  .page-hero ~ section .sec-head{max-width:760px; margin-inline:auto; text-align:center;}

  .crumbs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-400);}
  .crumbs a{color:var(--ink-500);} .crumbs a:hover{color:var(--blue);}
  .crumbs span{color:var(--ink-300);}

  .prose{max-width:70ch; margin-inline:auto;}
  .prose h2{font-family:var(--font-display); font-weight:800; font-size:clamp(23px,2.9vw,31px); letter-spacing:-.025em; line-height:1.15; margin:0 0 14px;}
  .prose h3{font-family:var(--font-display); font-weight:700; font-size:18.5px; letter-spacing:-.015em; margin:30px 0 8px;}
  .prose p{font-size:15.5px; color:var(--ink-600); line-height:1.68; margin:0 0 15px;}
  .prose p strong, .prose li strong{color:var(--ink-900); font-weight:700;}

  .featlist{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 22px;}
  @media(max-width:680px){ .featlist{grid-template-columns:1fr;} }
  .featlist li{font-size:14.5px; color:var(--ink-700); line-height:1.5; padding-left:24px; position:relative;}
  .featlist li::before{content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:4px; background:var(--blue); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size:9px; background-position:center; background-repeat:no-repeat;}

  .faq{border-top:1px solid var(--line); margin-top:14px;}
  .page-hero ~ section .faq{max-width:860px; margin-inline:auto;}
  .faq details{border-bottom:1px solid var(--line);}
  .faq summary{cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink-900);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:16px; font-family:var(--font-mono); font-size:19px; color:var(--blue); transition:transform .2s;}
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq summary:hover{color:var(--blue);}
  .faq .ans{padding:0 34px 20px 0; font-size:14.5px; color:var(--ink-600); line-height:1.65;}
  .faq .ans p{margin:0 0 11px;} .faq .ans p:last-child{margin:0;}

  .linkgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px;}
  @media(max-width:860px){ .linkgrid{grid-template-columns:1fr 1fr;} }
  @media(max-width:540px){ .linkgrid{grid-template-columns:1fr;} }
  .linkcard{display:block; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; background:var(--card); transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .2s, box-shadow .25s;}
  .linkcard:hover{border-color:var(--blue); box-shadow:var(--shadow-md); transform:translateY(-3px); color:inherit;}
  .linkcard h4{font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 6px; letter-spacing:-.012em;}
  .linkcard p{font-size:13px; color:var(--ink-600); margin:0; line-height:1.5;}
  .linkcard .go{display:inline-block; margin-top:11px; font-family:var(--font-mono); font-size:11.5px; color:var(--blue);}

  /* tarjetas de sector como enlace, sin cambiar su apariencia */
  a.sectcard{display:block;}
  a.sectcard:hover{color:inherit;}

  /* ===== FOOTER NAV ===== */
  .fnav{border-top:1px solid var(--line); background:var(--surface); padding:0;}
  .fnav .wrap{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:30px; padding-top:52px; padding-bottom:52px;}
  @media(max-width:820px){ .fnav .wrap{grid-template-columns:1fr 1fr;} }
  @media(max-width:480px){ .fnav .wrap{grid-template-columns:1fr; gap:26px;} }
  .fcol h5{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); margin:0 0 14px; font-weight:600;}
  .fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .fcol a{font-size:14px; color:var(--ink-600); line-height:1.45;}
  .fcol a:hover{color:var(--blue);}

  /* ============================================================
     MOTION II — acabado tipo Apple: profundidad, luz y ritmo
     ============================================================ */
  html{scroll-behavior:smooth; scroll-padding-top:84px;}
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

  /* --- luz ambiental del hero --- */
  .hero .aurora{position:absolute; inset:-25% -15%; pointer-events:none; filter:blur(80px); opacity:.6; z-index:0;}
  .hero .aurora i{position:absolute; border-radius:50%; width:min(60vw,820px); height:min(60vw,820px); mix-blend-mode:multiply;}
  .hero .aurora i:nth-child(1){left:38%; top:-8%; background:radial-gradient(closest-side, oklch(0.80 0.10 264 / .75), transparent 72%); animation:auroraA 22s ease-in-out infinite alternate;}
  .hero .aurora i:nth-child(2){left:62%; top:30%; width:min(44vw,600px); height:min(44vw,600px); background:radial-gradient(closest-side, oklch(0.86 0.08 220 / .7), transparent 72%); animation:auroraB 26s ease-in-out infinite alternate;}
  .hero .aurora i:nth-child(3){left:-6%; top:45%; width:min(36vw,480px); height:min(36vw,480px); background:radial-gradient(closest-side, oklch(0.90 0.05 264 / .8), transparent 72%); animation:auroraC 30s ease-in-out infinite alternate;}
  html[data-theme="dark"] .hero .aurora{opacity:.35; mix-blend-mode:screen;}
  html[data-theme="dark"] .hero .aurora i{mix-blend-mode:screen;}
  @keyframes auroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(-9%,12%) scale(1.12)}}
  @keyframes auroraB{from{transform:translate(0,0) scale(1)}to{transform:translate(-14%,-10%) scale(.9)}}
  @keyframes auroraC{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,-8%) scale(1.08)}}

  /* --- titulares palabra por palabra --- */
  .w{display:inline-block; white-space:nowrap;}
  .w > span{display:inline-block; will-change:transform, opacity, filter;}
  @keyframes wordIn{from{opacity:0; transform:translateY(.45em); filter:blur(12px)}to{opacity:1; transform:none; filter:blur(0)}}
  .hero h1.split .w > span, .page-hero h1.split .w > span{animation:wordIn .9s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0ms);}
  .page-hero h1.split{opacity:1;}
  h2.split{opacity:1 !important; transform:none !important;}
  h2.split .w > span{opacity:0; transform:translateY(.4em); filter:blur(10px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0ms);}
  .in h2.split .w > span, h2.split.in .w > span{opacity:1; transform:none; filter:blur(0);}

  /* --- hero: parallax suave y tarjeta con profundidad --- */
  .hero-copy{transform:translateY(var(--py,0px)); opacity:var(--po,1); will-change:transform, opacity;}
  .hero-visual{perspective:1400px; transform:translateY(var(--pv,0px)); will-change:transform;}
  .hero-visual .stack-card{transform-style:preserve-3d; position:relative; transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1), box-shadow .4s;}
  .hero-visual .stack-card.reveal{transform:translateY(34px) scale(.96); filter:blur(10px);}
  .hero-visual .stack-card.reveal.in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); filter:none;}
  .hero-visual.tilting .stack-card.reveal.in{transition-duration:.18s, .9s, .9s, .4s;}
  .hero-visual .stack-card:hover{box-shadow:0 34px 80px oklch(0.2 0.02 264 / .14), 0 6px 16px oklch(0.2 0.02 264 / .06);}
  .stack-card .glare{position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:5; background:radial-gradient(520px circle at var(--gx,30%) var(--gy,20%), rgba(255,255,255,.55), transparent 55%); opacity:0; transition:opacity .4s; mix-blend-mode:soft-light;}
  .hero-visual.tilting .stack-card .glare{opacity:1;}
  html[data-theme="dark"] .stack-card .glare{background:radial-gradient(520px circle at var(--gx,30%) var(--gy,20%), rgba(255,255,255,.18), transparent 55%);}

  /* --- stepper: barra de tiempo del paso activo --- */
  .step.on::after{background:var(--blue); transform:scaleX(1); transform-origin:left;}
  .stack-card.playing .step.on::after{animation:stepProg 3.4s linear both;}
  @keyframes stepProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .stack-card .bar .dots i:nth-child(1){background:var(--blue); opacity:.55;}
  .stack-card .bar .dots i:nth-child(2){background:var(--blue); opacity:.32;}
  .stack-card .bar .dots i:nth-child(3){background:var(--blue); opacity:.18;}

  /* --- luz que sigue al cursor en tarjetas --- */
  .spot{position:relative; isolation:isolate; overflow:hidden;}
  .spot::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .45s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), oklch(0.52 0.215 264 / .11), transparent 60%);}
  .spot:hover::before{opacity:1;}
  html[data-theme="dark"] .spot::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), oklch(0.72 0.12 264 / .16), transparent 60%);}
  .pillar, .phase, .sectcard, .agent, .linkcard, .cli-card{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s;}
  .pillar:hover, .phase:hover, .linkcard:hover{transform:translateY(-5px); box-shadow:0 22px 48px oklch(0.2 0.02 264 / .10), 0 2px 6px oklch(0.2 0.02 264 / .05);}
  .sectcard:hover{transform:translateY(-4px); box-shadow:0 18px 40px oklch(0.2 0.02 264 / .08);}

  /* --- el cambio: flecha viva y borde de luz en el "ahora" --- */
  @property --ga{syntax:'<angle>'; inherits:false; initial-value:0deg;}
  .shift .mid{display:inline-block; animation:nudge 2.2s cubic-bezier(.45,0,.55,1) infinite;}
  @keyframes nudge{0%,100%{transform:translateX(0); opacity:.75}50%{transform:translateX(8px); opacity:1}}
  @media(max-width:860px){ .shift .mid{animation:nudgeY 2.2s cubic-bezier(.45,0,.55,1) infinite;} @keyframes nudgeY{0%,100%{transform:rotate(90deg) translateX(0); opacity:.75}50%{transform:rotate(90deg) translateX(8px); opacity:1}} }
  .shift .side.now{position:relative; isolation:isolate; overflow:hidden;}
  .shift .side.now::before{content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px; background:conic-gradient(from var(--ga), transparent 0 55%, var(--blue-soft) 72%, oklch(0.85 0.08 220) 80%, transparent 92%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spinGa 6s linear infinite;}
  .shift .side.now::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 50% at 100% 0%, oklch(0.52 0.215 264 / .35), transparent 70%);}
  @keyframes spinGa{to{--ga:360deg}}

  /* --- CTA final: luz en movimiento --- */
  .final::before{content:""; position:absolute; inset:-30%; pointer-events:none; background:radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.28), transparent 70%), radial-gradient(35% 35% at 75% 70%, oklch(0.75 0.16 264 / .9), transparent 70%), radial-gradient(30% 30% at 80% 20%, oklch(0.85 0.09 220 / .6), transparent 70%); filter:blur(40px); animation:finalGlow 16s ease-in-out infinite alternate;}
  @keyframes finalGlow{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-6%,4%) rotate(8deg)}}
  .final{box-shadow:0 20px 50px oklch(0.52 0.215 264 / .20);}
  .final .btn.white{box-shadow:0 10px 30px rgba(0,0,0,.18);}
  .final .btn.white:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.24);}

  /* --- tarjetas de cliente: fondo con tinte suave en hover --- */
  .cli-card::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), oklch(0.52 0.215 264 / .08), transparent 60%);}

  /* --- notchat: entra como una hoja --- */
  .notchat{transition:border-color .3s, transform .4s cubic-bezier(.22,1,.36,1);}

  /* --- interiores: page-hero comparte la luz --- */
  .page-hero{isolation:isolate;}
  .page-hero::before{content:""; position:absolute; left:50%; top:-40%; width:min(80vw,1100px); height:min(60vw,760px); transform:translateX(-50%); background:radial-gradient(closest-side, oklch(0.84 0.09 264 / .55), transparent 72%); filter:blur(70px); pointer-events:none; z-index:-1; animation:auroraA 24s ease-in-out infinite alternate;}
  html[data-theme="dark"] .page-hero::before{opacity:.35;}

  @media(hover:none){ .spot::before, .stack-card .glare{display:none;} }
  @media(max-width:600px){
    .hero h1{font-size:clamp(34px,9.6vw,44px);}
    .hero .hero-in{padding:60px 22px 56px;}
    .nav.small .wrap{margin:8px 10px 0; padding:0 8px 0 16px; height:50px;}
    .hero .aurora{filter:blur(50px);}
  }