/* ==========================================================================
   inkbrand lab. — site.css (shell compartido, T0)
   Capas: tokens · base · layout · components · utilities.
   El CSS de cada página va SIN layer (siempre le gana a este archivo sin !important).
   !important solo en guards: [hidden], pausa offscreen y reduced-motion.
   Breakpoints (mobile first): 480 · 768 · 1024 · 1280.
   ========================================================================== */
@layer tokens, base, layout, components, utilities;

/* ==========================================================================
   TOKENS (plan-rediseno §1.3)
   ========================================================================== */
@layer tokens {
  :root {
    /* Marca */
    --color-process:#3B4EFC; --color-transform:#7B2DFF; --color-result:#AAFF00;
    --color-process-soft:#8BA4FF; --color-transform-soft:#C080FF; --color-result-soft:#CCFF44;
    --color-result-ink:#467A00;
    --color-wa:#25D366;
    --btn-primary:#3B4EFC;              /* relleno de botón primario: igual en los 2 temas (blanco encima = 5,7:1) */
    /* Superficies claras */
    --color-bg:#F7F7FC; --color-surface:#EEEEF6; --color-text:#09090E;
    --color-muted:rgba(9,9,14,.62);
    --color-border:rgba(9,9,14,.08); --color-border-strong:rgba(9,9,14,.16);
    --color-card:#FFFFFF;
    /* Superficies siempre oscuras */
    --surface-dark:#0D0D14; --surface-dark-2:#15151D;
    --color-on-dark:#F4F4FA; --color-on-dark-muted:rgba(244,244,250,.68); --color-on-dark-border:rgba(244,244,250,.12);
    /* Etiquetas tintadas */
    --tag-process-bg:rgba(59,78,252,.10); --tag-process-bd:rgba(59,78,252,.28);
    --tag-transform-bg:rgba(123,45,255,.10); --tag-transform-bd:rgba(123,45,255,.28);
    --tag-result-bg:rgba(170,255,0,.16); --tag-result-bd:rgba(110,170,0,.40);
    /* Tipografía */
    --font:'Space Grotesk',system-ui,sans-serif; --font-sec:'Manrope',system-ui,sans-serif;
    --t-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
    --t-sm:clamp(.875rem,.84rem + .2vw,.9375rem);
    --t-base:clamp(1rem,.96rem + .2vw,1.125rem);
    --t-lg:clamp(1.125rem,1.05rem + .35vw,1.375rem);
    --t-xl:clamp(1.375rem,1.2rem + .8vw,2rem);
    --t-2xl:clamp(2rem,1.45rem + 2.3vw,3.5rem);
    --t-display:clamp(2.625rem,1.1rem + 5.4vw,6.75rem);
    --t-hero:clamp(2.5rem,11.2vw,8.5rem);
    /* Espaciado */
    --s-xs:clamp(6px,1.5vw,8px); --s-sm:clamp(12px,3vw,16px); --s-md:clamp(20px,5vw,32px);
    --s-lg:clamp(36px,8vw,64px);
    --s-xl:clamp(48px,4vw + 24px,96px);
    --s-2xl:clamp(80px,6vw + 48px,144px);
    /* Layout */
    --wrap:1240px; --wrap-narrow:760px; --gutter:clamp(16px,5vw,48px);
    --nav-h:64px; --promo-h:0px;
    /* Radios y sombras */
    --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --pill:100px;
    --shadow-card:0 24px 64px -24px rgba(9,9,14,.18),0 4px 16px rgba(9,9,14,.05);
    --shadow-shot:0 30px 60px -30px rgba(9,9,14,.45);
    --glow-process:0 14px 30px -12px rgba(59,78,252,.65);
    --glow-result:0 10px 32px -10px rgba(170,255,0,.45);
    /* Motion */
    --ease-smooth:cubic-bezier(.16,1,.3,1); --ease-organic:cubic-bezier(.34,1.56,.64,1);
    --d-fast:150ms; --d-ui:240ms; --d-reveal:700ms;
    /* z-index */
    --z-base:1; --z-nav:100; --z-fab:150; --z-drawer:200; --z-modal:300; --z-toast:400;
    /* Degradé de marca (wordmark, líneas, aro) */
    --grad-triad:linear-gradient(90deg,#3B4EFC,#7B2DFF 55%,#AAFF00);
    color-scheme:light;
  }
  @media (min-width:1024px){ :root{ --nav-h:72px } }

  [data-theme=dark] {
    --color-bg:#060610; --color-surface:#0E0E1E; --color-text:#E4E4F2;
    --color-muted:rgba(228,228,242,.60); --color-border:rgba(228,228,242,.08); --color-border-strong:rgba(228,228,242,.16);
    --color-process:#5B6FFF; --color-transform:#9B50FF; --color-result:#C8FF00;
    --color-card:#0C0C1A;
    --shadow-card:0 24px 64px -24px rgba(0,0,0,.6);
    --shadow-shot:0 30px 60px -30px rgba(0,0,0,.8);
    --tag-process-bg:rgba(91,111,255,.12); --tag-process-bd:rgba(91,111,255,.30);
    --tag-transform-bg:rgba(155,80,255,.12); --tag-transform-bd:rgba(155,80,255,.30);
    --tag-result-bg:rgba(200,255,0,.10); --tag-result-bd:rgba(200,255,0,.28);
    color-scheme:dark;
  }

  /* Variables contextuales por superficie: los componentes usan --fg, --fg-muted, --line, --accent-result */
  :root,[data-surface=light] {
    --fg:var(--color-text); --fg-muted:var(--color-muted); --line:var(--color-border-strong);
    --accent-result:var(--color-result-ink); --bg-section:var(--color-bg); --card-bg:var(--color-card);
    --accent-process:var(--color-process); --accent-transform:var(--color-transform);
    --field-bg:#fff; --field-bd:rgba(9,9,14,.35); --field-fg:var(--color-text);
    --focus:var(--color-process);
  }
  [data-surface=soft] { --bg-section:var(--color-surface); --card-bg:var(--color-card) }
  [data-theme=dark],[data-theme=dark] [data-surface=light],[data-theme=dark] [data-surface=soft] {
    --accent-result:var(--color-result);
    --field-bg:rgba(255,255,255,.04); --field-bd:rgba(244,244,250,.24); --field-fg:var(--color-on-dark);
    --focus:var(--color-process-soft);
  }
  [data-surface=dark] {
    --fg:var(--color-on-dark); --fg-muted:var(--color-on-dark-muted); --line:var(--color-on-dark-border);
    --accent-result:var(--color-result); --bg-section:var(--surface-dark); --card-bg:var(--surface-dark-2);
    --accent-process:var(--color-process-soft); --accent-transform:var(--color-transform-soft);
    --field-bg:rgba(255,255,255,.04); --field-bd:rgba(244,244,250,.24); --field-fg:var(--color-on-dark);
    --focus:var(--color-process-soft);
    --shadow-card:0 24px 64px -24px rgba(0,0,0,.7);
    color:var(--fg); background:var(--bg-section);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  *,*::before,*::after { box-sizing:border-box }
  html {
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
    scroll-padding-top:calc(var(--nav-h) + var(--promo-h) + 16px);
    background:var(--color-bg);
    overflow-x:clip;
  }
  @media (prefers-reduced-motion:no-preference){ html:focus-within{ scroll-behavior:smooth } }
  body {
    margin:0; min-height:100vh; overflow-x:clip;
    background:var(--color-bg); color:var(--color-text);
    font:400 var(--t-base)/1.6 var(--font-sec);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    transition:background-color .3s, color .3s;
  }
  h1,h2,h3,h4,h5,h6 { margin:0; font-family:var(--font); font-weight:600; color:inherit; text-wrap:balance }
  p,ul,ol,figure,blockquote,dl,dd { margin:0 }
  ul[role=list],ol[role=list] { list-style:none; padding:0 }
  img,svg,video,canvas,picture { display:block; max-width:100% }
  img { height:auto }
  a { color:inherit; text-decoration-thickness:1px; text-underline-offset:.2em }
  button,input,select,textarea { font:inherit; color:inherit }
  button { cursor:pointer }
  /* Guard: [hidden] tiene que ganarle a cualquier display de componente o de página (casos sin permiso, FAQ ocultas).
     Es, junto con reduced-motion y la pausa offscreen, la única excepción a la regla "sin !important". */
  [hidden] { display:none !important }
  ::selection { background:var(--color-process); color:#fff }
  :focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px }
  [data-surface=dark] :focus-visible { outline-color:var(--color-process-soft) }
  strong,b { font-weight:700 }
  small { font-size:var(--t-sm) }
  hr { border:0; border-top:1px solid var(--line); margin:0 }

  .skip-link {
    position:fixed; top:8px; left:8px; z-index:calc(var(--z-toast) + 1);
    padding:12px 18px; border-radius:var(--pill); background:var(--color-text); color:var(--color-bg);
    font:600 .9375rem/1 var(--font); text-decoration:none;
    transform:translateY(-150%); transition:transform var(--d-ui) var(--ease-smooth);
  }
  .skip-link:focus { transform:none }

  /* Tipografía (§1.4) */
  .display { font:700 var(--t-display)/.95 var(--font); letter-spacing:-.04em; text-wrap:balance }
  h1,.h1 { font-size:clamp(2.25rem,1.2rem + 3.6vw,4.5rem); font-weight:700; letter-spacing:-.035em; line-height:1 }
  h2,.h2,.section-title { font-size:var(--t-2xl); font-weight:600; letter-spacing:-.03em; line-height:1.05 }
  h3,.h3 { font-size:var(--t-xl); font-weight:600; letter-spacing:-.02em; line-height:1.15 }
  .lead { font:400 var(--t-lg)/1.55 var(--font-sec); color:var(--fg-muted); max-width:60ch; text-wrap:pretty }
  .small { font-size:var(--t-sm); line-height:1.6 }
  .muted { color:var(--fg-muted) }
  .num { font-family:var(--font); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.03em }
  .hero-word { font:700 var(--t-hero)/.9 var(--font); letter-spacing:-.05em }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .wrap { width:100%; max-width:calc(var(--wrap) + 2*var(--gutter)); margin-inline:auto; padding-inline:var(--gutter) }
  .wrap--narrow { max-width:calc(var(--wrap-narrow) + 2*var(--gutter)) }

  .section {
    position:relative; padding-block:var(--s-2xl);
    background:var(--bg-section); color:var(--fg);
  }
  .section--tight { padding-top:calc(var(--s-2xl)*.5) }
  .section--flush { padding-block:0 }

  .section-head { margin-bottom:var(--s-xl); display:grid; gap:16px; max-width:760px }
  .section-head > .lead { margin-top:4px }
  @media (min-width:1024px) {
    .section-head--split {
      max-width:none; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; column-gap:var(--s-lg);
    }
    .section-head--split > .eyebrow,.section-head--split > .h2,.section-head--split > h2 { grid-column:1 }
    .section-head--split > .section-head__aside { grid-column:2; grid-row:1 / span 3; align-self:end; display:grid; gap:16px; justify-items:start }
  }
  .section-head--center { margin-inline:auto; text-align:center; justify-items:center }
  .section-head--center .eyebrow::after { content:""; width:20px; height:1px; background:currentColor }

  /* Grilla de 12 (desde 1024) */
  .grid-12 { display:grid; gap:clamp(16px,2vw,28px) }
  @media (min-width:1024px){ .grid-12 { grid-template-columns:repeat(12,minmax(0,1fr)) } }
  .stack { display:grid; gap:var(--stack-gap,16px) }
  .row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--row-gap,12px) }

  .anchor-alias { display:block; position:relative; top:calc(-1*var(--nav-h)); height:0; width:0; overflow:hidden; visibility:hidden }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---------- Eyebrow ---------- */
  .eyebrow {
    display:flex; align-items:center; gap:10px;
    font:500 var(--t-xs)/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase;
    color:var(--fg-muted); font-variant-numeric:tabular-nums;
  }
  .eyebrow::before { content:""; width:20px; height:1px; background:currentColor; flex:none }
  .eyebrow--plain::before { display:none }

  /* ---------- Botones ---------- */
  .btn {
    --lift:0px; --mx:0px; --my:0px;
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:52px; padding:0 26px; border-radius:var(--pill);
    font:600 1rem/1 var(--font); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
    border:1.5px solid transparent; cursor:pointer; isolation:isolate;
    transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0);
    transition:transform var(--d-ui) var(--ease-smooth),background-color var(--d-ui),box-shadow var(--d-ui),border-color var(--d-ui),color var(--d-ui);
    -webkit-tap-highlight-color:transparent;
  }
  @media (min-width:1024px){ .btn { min-height:56px; padding:0 30px } }
  .btn .i { width:18px; height:18px; flex:none }
  .btn .i--arrow { transition:transform var(--d-ui) var(--ease-smooth) }
  .btn:hover .i--arrow { transform:translateX(3px) }
  .btn:active { --lift:1px }

  .btn--primary { background:var(--btn-primary); color:#fff }
  .btn--primary::after { /* brillo sutil que cruza al pasar el mouse */
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
    background-size:250% 100%; background-position:120% 0; opacity:0;
    transition:background-position .7s var(--ease-smooth),opacity .3s;
  }
  .btn--primary:hover { background:#2E3FE6; --lift:-2px; box-shadow:var(--glow-process) }
  .btn--primary:hover::after { background-position:-20% 0; opacity:1 }
  [data-theme=dark] .btn--primary:hover { background:#4B5EFF }

  .btn--secondary { background:transparent; color:var(--fg); border-color:var(--line) }
  .btn--secondary:hover { border-color:var(--fg); --lift:-2px }

  .btn--accent { background:var(--color-result); color:#09090E }
  .btn--accent:hover { background:#C4FF4D; box-shadow:var(--glow-result); --lift:-2px }

  .btn--sm { min-height:44px; padding:0 18px; font-size:.9375rem }
  @media (min-width:1024px){ .btn--sm { min-height:44px; padding:0 20px } }
  .btn--block { width:100% }
  .btn--icon { width:44px; min-height:44px; padding:0; border-radius:50% }
  .btn[aria-disabled=true],.btn:disabled { opacity:.45; pointer-events:none }

  /* Link con flecha (para "Ver más →", "Ver sitio ↗") */
  .link-arrow {
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
    font:600 var(--t-sm)/1 var(--font); color:var(--fg); text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
    transition:background-size var(--d-ui) var(--ease-smooth);
  }
  .link-arrow:hover { background-size:calc(100% - 26px) 1px }
  .link-arrow .i { width:16px; height:16px; transition:transform var(--d-ui) var(--ease-smooth) }
  .link-arrow:hover .i { transform:translate(3px,0) }
  .link-arrow:hover .i--ext { transform:translate(2px,-2px) }

  /* ---------- Chips y badges ---------- */
  .chip {
    display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
    border-radius:var(--pill); border:1px solid var(--line); color:var(--fg-muted);
    font:500 var(--t-xs)/1 var(--font); letter-spacing:.01em; white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .chip .i { width:14px; height:14px }
  .chip--process { background:var(--tag-process-bg); border-color:var(--tag-process-bd); color:var(--accent-process) }
  .chip--transform { background:var(--tag-transform-bg); border-color:var(--tag-transform-bd); color:var(--accent-transform) }
  .chip--result { background:var(--tag-result-bg); border-color:var(--tag-result-bd); color:var(--accent-result) }
  .chip--demo { background:var(--color-text); border-color:transparent; color:var(--color-bg); letter-spacing:.08em; text-transform:uppercase; height:24px; padding:0 10px; font-size:.75rem }
  [data-surface=dark] .chip--demo { background:var(--color-on-dark); color:#09090E }
  .chip--lg { height:36px; padding:0 14px; font-size:var(--t-sm) }
  .chip__dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }

  .badge {
    display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:var(--pill);
    font:600 .75rem/1 var(--font); letter-spacing:.02em; white-space:nowrap;
    background:var(--color-text); color:var(--color-bg);
  }
  .badge--result { background:var(--color-result); color:#09090E }
  .badge--process { background:var(--btn-primary); color:#fff }

  /* ---------- Tarjetas ---------- */
  .card {
    position:relative; background:var(--card-bg); color:var(--fg);
    border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(20px,2.5vw,32px);
    transition:transform var(--d-ui) var(--ease-smooth),box-shadow var(--d-ui),border-color var(--d-ui);
  }
  [data-surface=light] .card,[data-surface=soft] .card { border-color:var(--color-border-strong) }
  @media (hover:hover) and (pointer:fine) {
    .card--hover:hover { transform:translateY(-4px); box-shadow:var(--shadow-card) }
  }
  a.card { display:block; text-decoration:none; color:var(--fg) }
  .card--dark { --fg:var(--color-on-dark); --fg-muted:var(--color-on-dark-muted); --line:var(--color-on-dark-border); --card-bg:var(--surface-dark-2) }
  .card__link::after { content:""; position:absolute; inset:0; border-radius:inherit; z-index:1 } /* link estirado */

  /* Tarjeta destacada con aro giratorio de la tríada (plan recomendado).
     El aro es un cuadrado con conic-gradient que rota con transform, recortado por la card. */
  .card--featured {
    --ring-w:1.5px;
    --fg:var(--color-on-dark); --fg-muted:var(--color-on-dark-muted); --line:var(--color-on-dark-border);
    --accent-result:var(--color-result); --accent-process:var(--color-process-soft); --accent-transform:var(--color-transform-soft);
    color:var(--fg);
    background:linear-gradient(180deg,rgba(200,255,0,.08) 0%,rgba(200,255,0,0) 42%),var(--surface-dark-2);
    border-color:transparent; isolation:isolate; overflow:hidden;
    box-shadow:0 30px 80px -30px rgba(123,45,255,.55),0 0 0 1px rgba(170,255,0,.10);
  }
  .card--featured::before {
    content:""; position:absolute; z-index:-2; left:50%; top:50%;
    width:max(142%,820px); aspect-ratio:1; translate:-50% -50%;
    background:conic-gradient(from 0deg,#AAFF00,#3B4EFC 25%,#7B2DFF 50%,#AAFF00 75%,#3B4EFC 90%,#AAFF00);
    animation:ib-spin 10s linear infinite;
  }
  .card--featured::after {
    content:""; position:absolute; z-index:-1; inset:var(--ring-w); border-radius:calc(var(--r-xl) - var(--ring-w));
    background:linear-gradient(180deg,rgba(200,255,0,.08) 0%,rgba(200,255,0,0) 42%),var(--surface-dark-2);
  }
  html:not(.anim) .card--featured::before { animation:none }

  /* ---------- Marcos para capturas ---------- */
  .frame-browser {
    --bar:28px;
    position:relative; overflow:hidden; border-radius:10px 10px 0 0;
    background:#fff; box-shadow:var(--shadow-shot);
    padding-top:var(--bar);
  }
  .frame-browser::before { /* barra */
    content:""; position:absolute; z-index:2; inset:0 0 auto 0; height:var(--bar);
    background:#F1F1F6; border-bottom:1px solid rgba(9,9,14,.07);
  }
  .frame-browser::after { /* 3 puntos */
    content:""; position:absolute; z-index:3; top:calc(var(--bar)/2 - 4px); left:12px; width:8px; height:8px; border-radius:50%;
    background:rgba(255,95,87,.8); box-shadow:14px 0 0 rgba(254,188,46,.8),28px 0 0 rgba(40,200,64,.8);
  }
  .frame-browser--dark { background:#0B0B12 }
  .frame-browser--dark::before { background:#1B1B24; border-color:rgba(255,255,255,.06) }
  .frame-browser--round { border-radius:12px }
  .frame-browser img,.frame-browser video { display:block; width:100%; height:auto }
  .shot-comp { display:block; width:100%; height:auto } /* composición ya armada (compu + celular, fondo transparente): va sin marco */
  .frame-browser__url {
    position:absolute; top:5px; left:50%; translate:-50% 0; z-index:3; height:18px; min-width:40%; max-width:60%;
    padding:0 10px; border-radius:6px; background:rgba(9,9,14,.05);
    font:500 10px/18px var(--font); color:rgba(9,9,14,.5); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .frame-browser--dark .frame-browser__url { background:rgba(255,255,255,.06); color:rgba(255,255,255,.5) }

  .frame-phone {
    position:relative; overflow:hidden; aspect-ratio:9/19.5; border-radius:36px; border:10px solid #0D0D14;
    background:#0D0D14; box-shadow:var(--shadow-shot),inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .frame-phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:26px }
  .frame-phone--notch::before {
    content:""; position:absolute; z-index:2; top:6px; left:50%; translate:-50% 0; width:34%; height:20px; border-radius:12px; background:#0D0D14;
  }

  /* Fondo de caso detrás del marco */
  .case-bg {
    position:relative; overflow:hidden; border-radius:var(--r-lg);
    background:var(--case-bg,var(--color-surface));
    padding:clamp(16px,2.5vw,32px) clamp(16px,2.5vw,32px) 0;
  }

  /* ---------- Precio ---------- */
  .price { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:6px; color:var(--fg) }
  .price__num { font:600 clamp(2.75rem,4vw,3.75rem)/1 var(--font); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
  .price__cur,.price__desde { font:500 .875rem/1 var(--font); color:var(--fg-muted); letter-spacing:.02em }
  .price__per { font:500 .875rem/1 var(--font); color:var(--fg-muted) }
  .price__ars { flex-basis:100%; display:block; font-size:.8125rem; line-height:1.4; color:var(--fg-muted); font-variant-numeric:tabular-nums }
  .price--accent .price__num { color:var(--accent-result) }
  .price--sm .price__num { font-size:clamp(1.5rem,1.2rem + 1vw,2rem) }
  .price--inline { display:inline-flex; column-gap:5px }
  .price--inline .price__num { font-size:inherit; font-weight:600; letter-spacing:-.01em }

  /* ---------- Formulario ---------- */
  .field { display:grid; gap:8px }
  .field__label { font:600 var(--t-sm)/1.3 var(--font); color:var(--fg) }
  .field__hint { font-size:.8125rem; color:var(--fg-muted) }
  .field__input {
    width:100%; height:52px; padding:0 16px; border-radius:14px;
    font:400 1rem/1.4 var(--font-sec); color:var(--field-fg);
    background:var(--field-bg); border:1.5px solid var(--field-bd);
    transition:border-color var(--d-fast),box-shadow var(--d-fast),background-color var(--d-fast);
    -webkit-appearance:none; appearance:none;
  }
  textarea.field__input { height:auto; min-height:120px; padding:14px 16px; resize:vertical }
  .field__input::placeholder { color:var(--fg-muted); opacity:.85 }
  .field__input:hover { border-color:color-mix(in srgb,var(--field-bd),var(--fg) 30%) }
  .field__input:focus,.field__input:focus-visible {
    outline:2px solid transparent; outline-offset:0; border-color:var(--color-process); box-shadow:0 0 0 4px rgba(59,78,252,.25);
  }
  .field__input:user-invalid { border-color:#E5484D }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } /* honeypot */

  .chips-select { display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:0; min-width:0 }
  .chips-select legend { padding:0; margin-bottom:10px; font:600 var(--t-sm)/1.3 var(--font); color:var(--fg) }
  .chips-select label {
    position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
    border-radius:var(--pill); border:1.5px solid var(--field-bd); background:var(--field-bg); color:var(--fg);
    font:500 var(--t-sm)/1 var(--font); cursor:pointer; user-select:none;
    transition:background-color var(--d-fast),border-color var(--d-fast),color var(--d-fast),transform var(--d-fast);
  }
  .chips-select label::before {
    content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; opacity:.6;
    transition:background-color var(--d-fast),transform var(--d-ui) var(--ease-organic);
  }
  .chips-select label:hover { border-color:var(--fg) }
  .chips-select label:active { transform:scale(.97) }
  .chips-select label:has(input:checked) { background:var(--btn-primary); border-color:var(--btn-primary); color:#fff }
  .chips-select label:has(input:checked)::before { background:var(--color-result); border-color:transparent; opacity:1; transform:scale(1.2) }
  .chips-select label:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:3px }

  /* ---------- FAQ ---------- */
  .faq { border-top:1px solid var(--line) }
  .faq:last-of-type { border-bottom:1px solid var(--line) }
  .faq > summary {
    list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    padding:22px 0; font:600 var(--t-lg)/1.3 var(--font); letter-spacing:-.01em; color:var(--fg);
    transition:color var(--d-fast);
  }
  .faq > summary::-webkit-details-marker { display:none }
  .faq > summary::after {
    content:""; flex:none; width:32px; height:32px; margin-top:-3px; border-radius:50%; border:1px solid var(--line);
    background:
      linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;
    transition:transform var(--d-ui) var(--ease-smooth),background-color var(--d-ui),color var(--d-ui),border-color var(--d-ui);
  }
  .faq > summary:hover::after { border-color:var(--fg) }
  .faq[open] > summary::after { transform:rotate(45deg); background-color:var(--btn-primary); border-color:var(--btn-primary); color:#fff }
  .faq__body { padding:0 52px 24px 0; color:var(--fg-muted); max-width:70ch; font-size:var(--t-base) }
  .faq__body p + p { margin-top:.75em }
  .faq__body a { color:var(--accent-process) }
  @supports (interpolate-size:allow-keywords) {
    .faq { interpolate-size:allow-keywords }
    .faq::details-content { height:0; overflow:clip; transition:height var(--d-ui) var(--ease-smooth),content-visibility var(--d-ui) allow-discrete }
    .faq[open]::details-content { height:auto }
  }

  /* ---------- Marquee ---------- */
  .marquee {
    position:relative; display:flex; overflow:hidden; height:56px; align-items:center;
    border-block:1px solid var(--line); color:var(--fg-muted);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .marquee__track { display:flex; flex:none; min-width:100%; animation:ib-marquee var(--marquee-dur,40s) linear infinite }
  .marquee__group { display:flex; flex:none; align-items:center; gap:28px; padding-right:28px }
  .marquee__item { font:500 .8125rem/1 var(--font); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap }
  .marquee__sep { font:700 1.25rem/1 var(--font); color:var(--color-process) }
  .marquee__sep:nth-of-type(3n+2) { color:var(--color-transform) }
  .marquee__sep:nth-of-type(3n) { color:var(--accent-result) }
  .marquee:hover .marquee__track { animation-play-state:paused }
  .marquee--lg { height:clamp(72px,9vw,120px) }
  .marquee--lg .marquee__item { font:600 clamp(1.5rem,1rem + 2.4vw,3rem)/1 var(--font); letter-spacing:-.03em; text-transform:none; color:var(--fg) }
  .marquee--lg .marquee__sep { font-size:clamp(1.5rem,1rem + 2vw,2.5rem) }

  /* ---------- Rail horizontal ---------- */
  .rail {
    display:grid; grid-auto-flow:column; grid-auto-columns:var(--rail-col,clamp(280px,30vw,420px)); gap:20px;
    max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
    padding-bottom:8px;
  }
  .rail::-webkit-scrollbar { display:none }
  .rail > * { scroll-snap-align:start; min-width:0 }
  @media (max-width:767px){ .rail { --rail-col:var(--rail-col-m,78vw) } }
  /* Rail alineado con .wrap desde 1280: el primer ítem arranca en el borde del contenido */
  @media (min-width:1280px){ .rail--wrap { padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2)); scroll-padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2)) } }
  .rail-nav { display:flex; gap:10px }
  .rail__prev,.rail__next {
    display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line); background:transparent; color:var(--fg);
    transition:background-color var(--d-fast),color var(--d-fast),border-color var(--d-fast),opacity var(--d-fast);
  }
  .rail__prev:hover,.rail__next:hover { background:var(--fg); color:var(--bg-section); border-color:var(--fg) }
  .rail__prev[disabled],.rail__next[disabled] { opacity:.35; pointer-events:none }
  .rail__prev svg,.rail__next svg { width:18px; height:18px }
  .rail-progress { height:2px; width:calc(100% - 2*var(--gutter)); max-width:var(--wrap); margin:20px auto 0; background:var(--line); border-radius:2px; overflow:hidden }
  .rail-progress > span { display:block; height:100%; width:100%; background:var(--grad-triad); transform-origin:left; transform:scaleX(var(--p,.1)) }

  /* ---------- Logo ---------- */
  .logo { display:inline-flex; align-items:center; gap:9px; color:inherit; text-decoration:none; font:600 1.0625rem/1 var(--font); letter-spacing:-.02em; white-space:nowrap }
  .logo__mark { width:22px; height:26px; flex:none; transition:transform var(--d-ui) var(--ease-organic) }
  .logo:hover .logo__mark { transform:rotate(-8deg) }
  .logo__lab .dot { color:var(--color-transform) }
  [data-surface=dark] .logo__lab .dot,.on-dark .logo__lab .dot { color:var(--color-transform-soft) }
  /* Burbuja del frasco: misma posición que el kit (assets/brand). Sobre oscuro, el tono del logo-full-dark. */
  [data-theme=dark] .logo__bubble,[data-surface=dark] .logo__bubble,.on-dark .logo__bubble { fill:#8BA4FF; opacity:.7 }
  @media (hover:hover){ .logo:hover .logo__lab .dot { animation:ib-dotcycle 1.6s linear infinite } }

  /* ---------- Nav ---------- */
  .nav {
    position:fixed; top:0; inset-inline:0; z-index:var(--z-nav); height:var(--nav-h);
    color:var(--color-text);
    transform:translateY(var(--promo-h));
    transition:transform .28s ease,background-color .3s,color .3s,border-color .3s,box-shadow .3s;
    border-bottom:1px solid transparent;
  }
  .nav__inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px }
  .nav__logo { flex:none }
  .nav__links { display:none }
  .nav__actions { display:flex; align-items:center; gap:8px; flex:none }
  .nav.scrolled {
    background:rgba(247,247,252,.85); border-bottom-color:var(--color-border);
    -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  }
  [data-theme=dark] .nav { color:var(--color-text) }
  [data-theme=dark] .nav.scrolled { background:rgba(6,6,16,.78); border-bottom-color:rgba(255,255,255,.06) }
  .nav.on-dark { color:var(--color-on-dark) }
  .nav.on-dark.scrolled { background:rgba(13,13,20,.82); border-bottom-color:rgba(255,255,255,.06) }

  .nav { --nav-fg:var(--color-text); --nav-link:rgba(9,9,14,.62) }
  [data-theme=dark] .nav { --nav-link:rgba(228,228,242,.64) }
  .nav.on-dark { --nav-fg:var(--color-on-dark); --nav-link:rgba(244,244,250,.72) }
  @media (min-width:1024px) {
    .nav__links { display:flex; align-items:center; gap:clamp(18px,2.4vw,36px) }
    .nav__links > a,.nav__dd > button {
      position:relative; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; background:none; border:0;
      font:500 .8125rem/1 var(--font); letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
      color:var(--nav-link); transition:color var(--d-fast);
    }
    .nav__links > a::after,.nav__dd > button::after {
      content:""; position:absolute; left:0; right:0; bottom:8px; height:1.5px; border-radius:2px;
      background:var(--grad-triad); transform:scaleX(0); transform-origin:right; transition:transform var(--d-ui) var(--ease-smooth);
    }
    .nav__links > a:hover,.nav__links > a[aria-current],.nav__dd > button:hover,.nav__dd > button[aria-expanded=true],.nav__dd.is-current > button { color:var(--nav-fg) }
    .nav__links > a:hover::after,.nav__links > a[aria-current]::after,.nav__dd > button[aria-expanded=true]::after,.nav__dd.is-current > button::after { transform:scaleX(1); transform-origin:left }
  }

  .nav__dd { position:relative }
  .nav__dd > button .i { width:10px; height:10px; transition:transform var(--d-ui) var(--ease-smooth) }
  .nav__dd > button[aria-expanded=true] .i { transform:rotate(180deg) }
  .nav__menu {
    position:absolute; top:calc(100% + 14px); left:50%; width:min(560px,90vw);
    display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:10px; margin:0; list-style:none;
    background:var(--color-card); color:var(--color-text); border:1px solid var(--color-border-strong); border-radius:var(--r-xl);
    box-shadow:0 30px 80px -20px rgba(9,9,14,.30),0 2px 8px rgba(9,9,14,.06);
    translate:-50% 0; transform-origin:top center;
    animation:ib-dd-in var(--d-ui) var(--ease-smooth);
  }
  .nav__menu::before { content:""; position:absolute; inset:-16px 0 auto; height:16px } /* puente de hover */
  .nav__menu a {
    display:grid; grid-template-columns:40px 1fr; align-items:center; column-gap:12px; padding:12px; border-radius:14px;
    text-decoration:none; color:inherit; transition:background-color var(--d-fast);
  }
  .nav__menu a:hover,.nav__menu a:focus-visible,.nav__menu a[aria-current] { background:var(--color-surface) }
  .nav__menu b { display:block; font:600 .9375rem/1.2 var(--font); letter-spacing:-.01em; text-transform:none }
  .nav__menu small { display:block; margin-top:3px; font:400 .8125rem/1.35 var(--font-sec); color:var(--color-muted); letter-spacing:0; text-transform:none }
  .svc-ico {
    display:grid; place-items:center; width:40px; height:40px; border-radius:12px; grid-row:span 2;
    background:var(--tag-process-bg); color:var(--color-process);
  }
  .svc-ico svg { width:20px; height:20px }
  .svc-ico--transform { background:var(--tag-transform-bg); color:var(--color-transform) }
  .svc-ico--result { background:var(--tag-result-bg); color:var(--accent-result) }
  [data-surface=dark] .svc-ico { color:var(--color-process-soft) }
  [data-surface=dark] .svc-ico--transform { color:var(--color-transform-soft) }
  [data-surface=dark] .svc-ico--result { color:var(--color-result) }

  .nav__cta .nav__cta-txt { display:none }
  .nav__cta { width:44px; padding:0 }
  @media (min-width:1024px){ .nav__cta { width:auto; padding:0 20px } .nav__cta .nav__cta-txt { display:inline } }

  .theme-btn,.nav__burger {
    position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
    border:1px solid transparent; background:transparent; color:inherit; flex:none;
    transition:background-color var(--d-fast),border-color var(--d-fast);
  }
  .theme-btn:hover,.nav__burger:hover { background:rgba(9,9,14,.06) }
  [data-theme=dark] .theme-btn:hover,[data-theme=dark] .nav__burger:hover,.on-dark .theme-btn:hover,.on-dark .nav__burger:hover,[data-surface=dark] .theme-btn:hover { background:rgba(255,255,255,.08) }
  .theme-btn svg,.nav__burger svg { width:20px; height:20px; grid-area:1/1 }
  .theme-btn .i-sun,.theme-btn .i-moon { transition:transform .5s var(--ease-organic),opacity .3s }
  .theme-btn .i-sun { transform:rotate(-90deg) scale(.4); opacity:0 }
  [data-theme=dark] .theme-btn .i-sun { transform:none; opacity:1 }
  [data-theme=dark] .theme-btn .i-moon { transform:rotate(90deg) scale(.4); opacity:0 }
  @media (max-width:399px){ .nav .theme-btn { display:none } }
  @media (min-width:1024px){ .nav__burger { display:none } }

  /* ---------- Drawer ---------- */
  .drawer {
    --fg:var(--color-on-dark); --fg-muted:var(--color-on-dark-muted); --line:var(--color-on-dark-border); --accent-result:var(--color-result);
    position:fixed; z-index:var(--z-drawer); top:0; right:0; bottom:0; width:min(440px,100%);
    display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
    padding:0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
    background:var(--surface-dark); color:var(--fg);
    background-image:radial-gradient(60% 40% at 100% 0%,rgba(123,45,255,.28),transparent 70%),radial-gradient(50% 35% at 0% 100%,rgba(59,78,252,.22),transparent 70%);
    visibility:hidden; box-shadow:none; transform:translateX(100%);
    transition:transform .5s var(--ease-smooth),visibility 0s linear .5s,box-shadow .3s;
  }
  .drawer.is-open { visibility:visible; transform:none; box-shadow:-30px 0 80px -20px rgba(0,0,0,.5); transition:transform .5s var(--ease-smooth),visibility 0s,box-shadow .3s }
  .drawer__head { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); flex:none }
  .drawer__close { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--fg) }
  .drawer__close svg { width:20px; height:20px }
  .drawer__nav { display:grid; margin-top:12px }
  .drawer__nav > a,.drawer__group > summary {
    display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:6px 0;
    border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg);
    font:600 clamp(1.625rem,1.2rem + 2vw,2rem)/1.1 var(--font); letter-spacing:-.03em; list-style:none; cursor:pointer;
  }
  .drawer__group > summary::-webkit-details-marker { display:none }
  .drawer__group > summary .i { width:18px; height:18px; transition:transform var(--d-ui) var(--ease-smooth) }
  .drawer__group[open] > summary .i { transform:rotate(45deg) }
  .drawer__sub { display:grid; padding:6px 0 12px; border-bottom:1px solid var(--line) }
  .drawer__sub a { display:flex; align-items:center; gap:12px; min-height:48px; color:var(--fg-muted); text-decoration:none; font:500 1.0625rem/1.2 var(--font) }
  .drawer__sub a:hover,.drawer__sub a[aria-current] { color:var(--fg) }
  .drawer__sub .svc-ico { width:32px; height:32px; border-radius:10px }
  .drawer__sub .svc-ico svg { width:16px; height:16px }
  .drawer__nav > a[aria-current] { color:var(--accent-result) }
  .drawer__foot { margin-top:auto; padding-top:28px; display:grid; gap:16px }
  .drawer__social { display:flex; align-items:center; gap:8px; color:var(--fg-muted); font-size:var(--t-sm) }
  .drawer__social a { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); color:var(--fg) }
  .drawer__social svg { width:18px; height:18px }
  .drawer__social .theme-btn { margin-left:auto; border-color:var(--line) }
  /* entrada escalonada de los links */
  html.anim .drawer__nav > * { opacity:0; transform:translateX(24px); transition:opacity .4s,transform .5s var(--ease-smooth) }
  html.anim .drawer.is-open .drawer__nav > * { opacity:1; transform:none; transition-delay:calc(80ms + var(--i,0)*45ms) }
  .drawer-backdrop {
    position:fixed; inset:0; z-index:calc(var(--z-drawer) - 1); background:rgba(6,6,16,.5);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    opacity:0; transition:opacity .35s;
  }
  .drawer-backdrop.is-open { opacity:1 }
  body.drawer-open { overflow:hidden }

  /* ---------- Promo (vacía por defecto; la escribe T6) ---------- */
  .promo {
    position:fixed; top:0; inset-inline:0; z-index:calc(var(--z-nav) + 1); height:40px;
    display:flex; align-items:center; justify-content:center; gap:10px; padding:0 52px 0 16px;
    --accent-result:var(--color-result);
    background:var(--surface-dark); color:var(--color-on-dark);
    font:600 .8125rem/1.2 var(--font); text-align:center;
    transform:translateY(calc(var(--promo-h) - 40px)); transition:transform .28s ease;
  }
  .promo::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--grad-triad) }
  .promo a { color:var(--accent-result); text-underline-offset:3px }
  .promo__close { position:absolute; right:0; top:0; width:44px; height:40px; display:grid; place-items:center; background:none; border:0; color:inherit; opacity:.8 }
  .promo__close svg { width:14px; height:14px }
  html.has-promo { --promo-h:40px }
  html.has-promo.promo-off { --promo-h:0px }

  /* ---------- Footer ---------- */
  .footer {
    position:relative; overflow:hidden; padding-top:var(--s-xl);
    padding-bottom:calc(40px + env(safe-area-inset-bottom));
    background:var(--surface-dark); color:var(--fg);
  }
  .footer::before { /* grilla milimetrada tenue */
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:linear-gradient(rgba(139,164,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(139,164,255,.06) 1px,transparent 1px);
    background-size:48px 48px;
    -webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%);
  }
  .footer::after { /* halo */
    content:""; position:absolute; left:50%; top:-20%; width:min(1100px,140vw); aspect-ratio:2/1; translate:-50% 0; pointer-events:none;
    background:radial-gradient(closest-side,rgba(123,45,255,.22),rgba(59,78,252,.10) 55%,transparent);
  }
  .footer > * { position:relative; z-index:1 }
  .footer__cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-bottom:var(--s-lg) }
  .footer__cta p { font:600 var(--t-xl)/1.15 var(--font); letter-spacing:-.02em; max-width:22ch }
  .footer__word {
    display:block; margin:0 0 var(--s-lg); white-space:nowrap;
    /* min(…,15.5vw): de 320 a ~360 px el mínimo de 56px no entraba y se leía "inkbrand la" */
    font:700 min(clamp(56px,13vw,208px),15.5vw)/.9 var(--font); letter-spacing:-.05em; color:var(--color-on-dark);
    margin-left:-.04em;
  }
  .footer__word .lab {
    background:linear-gradient(90deg,#3B4EFC,#7B2DFF 55%,#AAFF00); -webkit-background-clip:text; background-clip:text; color:transparent;
    padding-right:.04em;
  }
  html.anim .footer__word { clip-path:inset(100% 0 0 0); transition:clip-path var(--d-reveal) var(--ease-smooth) }
  html.anim .footer__word.in { clip-path:inset(0 0 -10% 0) }
  html.anim .footer__word > span { display:inline-block; transform:translateY(40%); transition:transform .9s var(--ease-smooth) }
  html.anim .footer__word.in > span { transform:none }
  html.anim .footer__word.in > .lab { transition-delay:.08s }

  .footer__grid { display:grid; gap:32px; padding-block:var(--s-lg); border-top:1px solid var(--line) }
  @media (min-width:768px){ .footer__grid { grid-template-columns:1fr 1fr } }
  @media (min-width:1024px){ .footer__grid { grid-template-columns:1.4fr 1fr 1fr 1.1fr } }
  .footer__col h2 { font:500 var(--t-xs)/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:10px }
  .footer__col p { color:var(--fg-muted); font-size:.9375rem; max-width:34ch }
  .footer__col ul { list-style:none; margin:0; padding:0 }
  .footer__col a {
    display:inline-flex; align-items:center; gap:8px; padding-block:10px;
    color:var(--color-on-dark-muted); font-size:.9375rem; text-decoration:none; transition:color var(--d-fast);
  }
  .footer__col a:hover,.footer__col a[aria-current] { color:var(--color-on-dark) }
  .footer__col a svg { width:16px; height:16px; flex:none }
  .footer__bottom {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
    padding-top:24px; border-top:1px solid var(--line);
    font:500 .8125rem/1.4 var(--font); color:var(--fg-muted); font-variant-numeric:tabular-nums;
  }
  .footer__bottom a { color:var(--fg-muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:44px }
  .footer__bottom a:hover { color:var(--fg) }
  .footer__batch { display:inline-flex; align-items:center; gap:8px; letter-spacing:.06em }
  .footer__batch::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--grad-triad) }
  .status { display:inline-flex; align-items:center; gap:8px }
  .status__dot { position:relative; width:8px; height:8px; border-radius:50%; background:var(--color-result); flex:none }
  .status__dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ib-ping 2.4s var(--ease-smooth) 3 }

  /* ---------- FAB de WhatsApp ---------- */
  .fab {
    position:fixed; z-index:var(--z-fab); right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
    display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
    background:var(--color-wa); color:#fff; text-decoration:none;
    box-shadow:0 12px 30px -8px rgba(37,211,102,.55),0 2px 6px rgba(0,0,0,.12);
    transition:opacity .2s,transform .2s var(--ease-smooth);
  }
  .fab svg { width:26px; height:26px; position:relative; z-index:1 }
  .fab::before { content:""; position:absolute; inset:0; border-radius:50%; background:var(--color-wa); animation:ib-ping 2.2s var(--ease-smooth) 1.5s 3 both }
  .fab:hover { transform:translateY(-3px) scale(1.04) }
  .fab.is-hidden,body.drawer-open .fab { opacity:0; transform:translateY(12px); pointer-events:none }
  @media (min-width:768px){ .fab { width:56px; height:56px; right:24px; bottom:calc(24px + env(safe-area-inset-bottom)) } }
  /* En escritorio el menú fijo ya muestra "WhatsApp" con texto: la burbuja sobra y tapa contenido */
  @media (min-width:1024px){ .fab { display:none } }

  /* ---------- Pill que sigue al cursor (se activa con [data-cursor]) ---------- */
  .cursor-pill {
    position:fixed; left:0; top:0; z-index:var(--z-toast); pointer-events:none;
    display:grid; place-items:center; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%;
    background:var(--color-result); color:#09090E; font:600 .8125rem/1.1 var(--font); text-align:center; letter-spacing:-.01em;
    box-shadow:0 10px 30px -10px rgba(170,255,0,.6);
    transform:translate3d(var(--x,-200px),var(--y,-200px),0) scale(var(--s,0)); transition:scale .3s var(--ease-organic);
    will-change:transform;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .t-process { color:var(--accent-process) }
  .t-transform { color:var(--accent-transform) }
  .t-result { color:var(--accent-result) }
  [data-surface=dark] .t-result { color:var(--color-result) }

  /* Subrayado lima dibujado. Sin JS: subrayado de fondo. Con JS: site.js inyecta el SVG y lo dibuja. */
  .u-mark {
    position:relative; display:inline-block; white-space:nowrap;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 60 7, 130 5, 200 9 S 280 15, 296 8' fill='none' stroke='%23AAFF00' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") left 100% / 100% .28em no-repeat;
    padding-bottom:.06em;
  }
  .u-mark.has-svg { background:none }
  .u-mark__svg { position:absolute; left:-2%; bottom:-.12em; width:104%; height:.34em; overflow:visible; pointer-events:none; z-index:-1 }
  /* Trazo en unidades del viewBox (sin vector-effect:non-scaling-stroke ni pathLength): el guion se mide sobre el largo
     real del path (~293 u.), igual en todos los navegadores y a cualquier ancho, y el grosor acompaña al tamaño de la letra.
     --u-stroke ajusta el grosor por contexto. Oculto: offset 310 > largo, así la punta redonda no asoma al principio. */
  .u-mark__svg path { fill:none; stroke:var(--color-result); stroke-width:var(--u-stroke,7); stroke-linecap:round }
  html.anim .u-mark__svg path { stroke-dasharray:300 400; stroke-dashoffset:310; transition:stroke-dashoffset .6s var(--ease-smooth) var(--u-delay,.3s) }
  html.anim .u-mark.in .u-mark__svg path { stroke-dashoffset:0 }
  .u-mark { isolation:isolate }

  .dot-result { display:inline-block; width:.16em; height:.16em; border-radius:50%; background:var(--color-result); box-shadow:0 0 0 .025em #09090E; vertical-align:baseline; margin-left:.02em }
  [data-surface=dark] .dot-result,[data-theme=dark] .dot-result { box-shadow:none }

  .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 }

  /* Fondo de grilla milimetrada (identidad) */
  .bg-grid { position:relative; isolation:isolate }
  .bg-grid::before {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:linear-gradient(rgba(59,78,252,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(59,78,252,.05) 1px,transparent 1px);
    background-size:clamp(32px,5vw,48px) clamp(32px,5vw,48px);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent);
  }
  [data-theme=dark] .bg-grid::before,[data-surface=dark].bg-grid::before {
    background-image:linear-gradient(rgba(139,164,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(139,164,255,.07) 1px,transparent 1px);
  }
  /* Manchas de color estáticas (sin filter, sin animación) */
  .bg-glow { position:relative; isolation:isolate }
  .bg-glow::after {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(40% 50% at var(--glow-x1,85%) var(--glow-y1,20%),rgba(59,78,252,.22),transparent 70%),
      radial-gradient(35% 45% at var(--glow-x2,65%) var(--glow-y2,75%),rgba(123,45,255,.18),transparent 70%);
  }

  .line-grad { height:2px; border:0; background:var(--grad-triad); border-radius:2px }
  .text-grad { background:var(--grad-triad); -webkit-background-clip:text; background-clip:text; color:transparent }
  .tabular { font-variant-numeric:tabular-nums }
  .nowrap { white-space:nowrap }
  .mt-0 { margin-top:0 } .mt-sm { margin-top:var(--s-sm) } .mt-md { margin-top:var(--s-md) } .mt-lg { margin-top:var(--s-lg) } .mt-xl { margin-top:var(--s-xl) }
  .center { text-align:center }
  .float { animation:ib-float var(--float-dur,7s) ease-in-out infinite alternate }
}

/* ==========================================================================
   MOTION (§1.6) — fuera de layers para keyframes; reglas en utilities
   ========================================================================== */
@keyframes ib-spin { to { rotate:360deg } }
@keyframes ib-marquee { to { transform:translateX(-50%) } }
@keyframes ib-float { from { transform:translateY(-8px) } to { transform:translateY(8px) } }
@keyframes ib-ping { 0% { transform:scale(1); opacity:.55 } 80%,100% { transform:scale(2.1); opacity:0 } }
@keyframes ib-dd-in { from { opacity:0; transform:translateY(-6px) scale(.98) } }
@keyframes ib-dotcycle { 0%,100% { color:var(--color-process) } 33% { color:var(--color-transform) } 66% { color:var(--accent-result) } }
@keyframes rv-show { to { opacity:1; transform:none; clip-path:none } }
@keyframes ib-expand { from { clip-path:inset(0 var(--expand-inset) round var(--r-2xl)) } to { clip-path:inset(0 0 round 0) } }
@keyframes plx { from { transform:translateY(-6%) scale(1.08) } to { transform:translateY(6%) scale(1.08) } }
@keyframes ib-rise { from { transform:translateY(var(--rise,60px)) } to { transform:translateY(calc(var(--rise,60px) * -1)) } }
@keyframes ib-scale-in { from { transform:scale(.92); opacity:.4 } to { transform:none; opacity:1 } }

@layer utilities {
  /* Reveal estándar: solo existe bajo html.anim (contenido visible sin JS) */
  html.anim .rv {
    opacity:0; transform:translateY(16px);
    transition:opacity var(--d-reveal) var(--ease-smooth),transform var(--d-reveal) var(--ease-smooth);
    transition-delay:calc(min(var(--i,0),5)*80ms);
  }
  html.anim .rv.in { opacity:1; transform:none }
  html.anim .rv--scale { transform:scale(.96) translateY(12px) }
  html.anim .rv--left { transform:translateX(-24px) }
  /* Seguro: si el JS no llega a correr, todo aparece a los 2,5 s */
  html.anim:not(.js) .rv:not(.in),html.anim:not(.js) .rv-clip:not(.in) { animation:rv-show 0s 2.5s forwards }

  /* Reveal por líneas con máscara (site.js parte en palabras y calcula la línea de cada una) */
  .rv-lines .w { display:inline-block; overflow:clip; overflow-clip-margin:.12em; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em }
  .rv-lines .w > span { display:inline-block }
  html.anim .rv-lines.is-split:not(.in) .w > span { transform:translateY(108%) }
  html.anim .rv-lines.is-split .w > span { transition:transform .6s var(--ease-smooth); transition-delay:calc(var(--l,0)*90ms + var(--d0,0ms)) }

  /* Reveal con cortina (imágenes, bloques) */
  html.anim .rv-clip { clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease-smooth); transition-delay:calc(min(var(--i,0),5)*80ms) }
  html.anim .rv-clip.in { clip-path:inset(0 0 0 0) }

  /* Pausa de loops fuera de pantalla (guard de motion: !important para ganarle al CSS de página sin layer) */
  .is-offscreen *,.is-offscreen::before,.is-offscreen::after { animation-play-state:paused !important }
}

/* Scroll-driven: pantalla que se expande + parallax (solo con soporte y sin reduced motion) */
.section--expand { --expand-inset:12px }
@media (min-width:768px){ .section--expand { --expand-inset:24px } }
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    html.anim .section--expand {
      animation:ib-expand linear both;
      animation-timeline:view(); animation-range:entry 0% cover 30%;
    }
    html.anim .parallax { overflow:hidden }
    html.anim .parallax img,html.anim .parallax .parallax__layer {
      animation:plx linear both; animation-timeline:view(); will-change:transform;
    }
    html.anim .rise { animation:ib-rise linear both; animation-timeline:view(); animation-range:cover 0% cover 100% }
    html.anim .scale-in { animation:ib-scale-in linear both; animation-timeline:view(); animation-range:entry 0% cover 35% }
  }
}

/* View Transition del cambio de tema (círculo desde el botón). html.vt apaga transiciones durante la captura */
@layer utilities { html.vt *,html.vt *::before,html.vt *::after { transition:none } }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal }
::view-transition-new(root) { z-index:2 }

/* ==========================================================================
   REDUCED MOTION — único lugar con !important
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important;
  }
  .rv,.rv-clip,.rv-lines .w > span { opacity:1 !important; transform:none !important; clip-path:none !important }
  .marquee { overflow-x:auto; -webkit-mask-image:none; mask-image:none }
  .marquee__track { animation:none !important }
  .marquee__group[aria-hidden=true] { display:none }
  .card--featured::before { animation:none !important }
}