/* ============================================================
   GRAFIKA STUDIO 360 — sistema de diseño
   Paleta cerrada. El lima nunca supera ~5% de la superficie.
   ============================================================ */

/* ── Tipografías (alojadas aquí, no en Google: más rápido y sin cookies) ── */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── Tokens ───────────────────────────────────────────────── */
:root{
  /* Paleta — cerrada, no añadir colores */
  --graf:#1B2426;
  --carbon:#0F1618;
  --bone:#F7F8F6;
  --lime:#A3D92B;
  --lime-deep:#7FB316;
  --amber:#E0A32E;

  /* Grises derivados */
  --graf-70:rgba(27,36,38,.70);
  /* .65 y no .55: al .55 el texto silenciado (.eyebrow, el pie del
     asistente) quedaba en 3.59:1 sobre fondo claro — no llega al 4.5:1
     que exige WCAG AA para texto de este tamaño. Verificado con la
     fórmula de contraste real, no a ojo. */
  --graf-55:rgba(27,36,38,.65);
  --graf-12:rgba(27,36,38,.12);
  --graf-07:rgba(27,36,38,.07);
  --bone-70:rgba(247,248,246,.70);
  --bone-50:rgba(247,248,246,.50);
  --bone-14:rgba(247,248,246,.14);
  --bone-08:rgba(247,248,246,.08);

  /* Superficies por defecto (modo claro) */
  --bg:var(--bone);
  --fg:var(--graf);
  --fg-soft:var(--graf-70);
  --fg-mute:var(--graf-55);
  --line:var(--graf-12);
  --line-soft:var(--graf-07);

  /* Tipografía fluida */
  --f-display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-xs:.78rem;
  --t-sm:.895rem;
  --t-base:clamp(1rem,.97rem + .14vw,1.06rem);
  --t-lg:clamp(1.12rem,1.05rem + .34vw,1.3rem);
  --t-xl:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --t-2xl:clamp(1.75rem,1.45rem + 1.4vw,2.6rem);
  --t-3xl:clamp(2rem,1.55rem + 2.1vw,3.2rem);
  --t-4xl:clamp(2.35rem,1.75rem + 2.7vw,4rem);

  /* Ritmo */
  --sp-section:clamp(4.5rem,3rem + 7vw,9rem);
  --wrap:1180px;
  --wrap-narrow:760px;
  --radius:14px;
  --radius-lg:22px;

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Secciones oscuras: invierten los tokens, no los colores sueltos */
.dark{
  --bg:var(--graf);
  --fg:var(--bone);
  --fg-soft:var(--bone-70);
  --fg-mute:var(--bone-50);
  --line:var(--bone-14);
  --line-soft:var(--bone-08);
  background:var(--bg);
  color:var(--fg);
}
.darker{ --bg:var(--carbon); }

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* ── Tipografía ───────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:700;
  line-height:1.06;letter-spacing:-.028em;text-wrap:balance;
}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);line-height:1.2;letter-spacing:-.02em}
h4{font-size:var(--t-lg);line-height:1.25;letter-spacing:-.015em}
p{text-wrap:pretty}
.lead{font-size:var(--t-lg);color:var(--fg-soft);line-height:1.55;max-width:60ch}
.muted{color:var(--fg-mute)}
strong{font-weight:600}

/* Etiqueta de sección — pequeña, en mayúsculas, con marca lima */
.eyebrow{
  display:inline-flex;align-items:center;gap:.62rem;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:1.15rem;
}
.eyebrow::before{
  content:'';width:22px;height:2px;background:var(--lime);flex:none;
}

/* ── Layout ───────────────────────────────────────────────── */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media(max-width:640px){ .wrap{width:min(100% - 2rem,var(--wrap))} }
.narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sp-section)}
.section-head{max-width:56ch;margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem)}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.6rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} }

/* ── Logo ─────────────────────────────────────────────────── */
.logo{display:inline-flex;flex-direction:column;gap:.18em;line-height:1}
.logo-word{
  display:flex;align-items:baseline;
  font-family:var(--f-display);font-weight:700;
  font-size:1.42rem;letter-spacing:.005em;line-height:1;color:var(--fg);
}
/* La K es la letra real de la fuente (proporciones perfectas por
   definición). Encima se superpone una copia en lima recortada en
   diagonal, que deja teñido solo el brazo superior.
   Antes era un SVG dibujado a mano: nunca casaba de altura ni de
   grosor con las letras vecinas. */
.logo-k{position:relative;display:inline-block;color:inherit}
.logo-k i{
  position:absolute;inset:0;
  font-style:normal;color:var(--lime);
  /* Triángulo que cubre el brazo superior entero, desde el asta
     hasta la esquina de arriba a la derecha */
  clip-path:polygon(26% 0, 105% 0, 26% 58%);
  pointer-events:none;
}
.logo-sub{
  font-family:var(--f-display);font-weight:500;
  font-size:.5rem;letter-spacing:.34em;color:var(--fg-mute);
  padding-left:.12em;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--lime);--btn-fg:var(--graf);--btn-line:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.5rem;min-height:48px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-line);border-radius:100px;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-sm);letter-spacing:-.005em;
  cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),background-color .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary:hover{background:var(--lime-deep);box-shadow:0 10px 30px -12px rgba(163,217,43,.65)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-line:var(--line)}
.btn-ghost:hover{--btn-line:var(--fg);background:transparent}
.btn-lg{padding:1.08rem 1.9rem;font-size:var(--t-base)}
.btn .ico{width:1.05em;height:1.05em;flex:none}

/* Enlace con subrayado que crece */
.link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:500;color:var(--fg);position:relative;padding-block:.15rem;
}
.link::after{
  content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.link:hover::after{transform:scaleX(1)}
.link .ico{width:.95em;height:.95em;transition:transform .3s var(--ease)}
.link:hover .ico{transform:translateX(3px)}

/* ── Tarjetas — el borde que se enciende ──────────────────── */
.card{
  position:relative;padding:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background-color .4s var(--ease);
}
.card:hover{border-color:color-mix(in srgb,var(--lime) 55%,transparent);transform:translateY(-3px)}
/* Motivo de marca: el corte diagonal de la K, arriba a la derecha */
.card::after{
  content:'';position:absolute;top:0;right:0;width:28px;height:28px;
  background:linear-gradient(225deg,var(--lime) 0 46%,transparent 46%);
  opacity:0;transition:opacity .4s var(--ease);
  border-top-right-radius:var(--radius);
}
.card:hover::after{opacity:.9}
.card h3{margin-bottom:.5rem}
.card p{color:var(--fg-soft);font-size:var(--t-sm)}

/* ── Reveal al hacer scroll ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}

/* ── Utilidades ───────────────────────────────────────────── */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.center{text-align:center}
.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}
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--lime);color:var(--graf);padding:.7rem 1.1rem;border-radius:8px;
  font-weight:600;transition:top .2s var(--ease);
}
.skip:focus{top:1rem}

/* ════════════════════════════════════════════════════════════
   CABECERA
   ════════════════════════════════════════════════════════════ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bone) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  min-height:74px;padding-block:.7rem}
.head-logo{flex:none}
.head-nav{display:flex;align-items:center;gap:2.1rem}
.head-nav ul{display:flex;align-items:center;gap:1.9rem}
.head-nav a:not(.btn){
  position:relative;font-size:var(--t-sm);font-weight:500;color:var(--fg-soft);
  padding-block:.4rem;transition:color .25s var(--ease);
}
.head-nav a:not(.btn)::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.head-nav a:not(.btn):hover{color:var(--fg)}
.head-nav a:not(.btn):hover::after,
.head-nav a[aria-current="page"]::after{transform:scaleX(1)}
.head-nav a[aria-current="page"]{color:var(--fg);font-weight:600}
.nav-only-mobile{display:none}

.head-burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  padding:0;place-items:center;
}
.head-burger span{
  display:block;width:22px;height:2px;background:var(--fg);border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.head-burger span+span{margin-top:6px}
.head-burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.head-burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media(max-width:900px){
  .head-burger{display:grid}
  .nav-only-mobile{display:block}
  .head-nav{
    position:fixed;inset:74px 0 auto;z-index:99;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bone);border-bottom:1px solid var(--line);
    padding:1.4rem 1.25rem 2rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    max-height:calc(100dvh - 74px);overflow-y:auto;
  }
  .head-nav.open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .head-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .head-nav ul li{border-bottom:1px solid var(--line-soft)}
  .head-nav a:not(.btn){display:block;padding:1rem .25rem;font-size:var(--t-lg);color:var(--fg)}
  .head-nav a:not(.btn)::after{display:none}
  .nav-cta{margin-top:1.4rem;width:100%}
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(3rem,2rem + 3.5vw,4.75rem) clamp(3.25rem,2.2rem + 4vw,5.5rem);
}
/* Degradado: solo mancha de fondo, nunca sobre texto */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(163,217,43,.13) 0%, transparent 68%),
    radial-gradient(70% 60% at 8% 92%, rgba(163,217,43,.06) 0%, transparent 62%),
    linear-gradient(180deg, var(--carbon) 0%, var(--graf) 62%, var(--graf) 100%);
}
.hero > *{position:relative;z-index:1}

/* Dos columnas: mensaje a la izquierda, muestra de trabajo a la derecha */
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(2rem,1rem + 4vw,4.5rem);
}
.hero-visual{margin:0;position:relative}
.hero-visual img{
  width:100%;height:auto;
  /* La imagen nace con fondo grafito; esta máscara difumina sus bordes
     para que se funda con la sección en vez de leerse como un recuadro */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 93%, transparent 100%);
          mask-composite:intersect;
  animation:float 7s ease-in-out infinite;
}
.hero-visual::after{ /* halo lima muy tenue detrás del conjunto */
  content:'';position:absolute;inset:12% -6% -6% 6%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(163,217,43,.16), transparent 70%);
  filter:blur(30px);
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .hero-visual{max-width:520px;margin-inline:auto}
}
@media(max-width:560px){
  /* Botones al mismo ancho: en móvil dos anchos distintos se ven desordenados */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}

.hero h1{max-width:15ch}
.hero .lead{margin-top:1.5rem;max-width:52ch}
.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.6rem}
.hero-note{margin-top:1.6rem;font-size:var(--t-sm);color:var(--fg-mute)}
.hero-note b{color:var(--lime);font-weight:600}

/* Línea fina de marca bajo el hero */
.hero-rule{height:1px;background:linear-gradient(90deg,var(--lime) 0%,transparent 34%)}

/* ════════════════════════════════════════════════════════════
   PIE
   ════════════════════════════════════════════════════════════ */
.site-foot{padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem) 2.2rem}
.foot-top{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(2.5rem,1.5rem + 4vw,5rem)}
.foot-claim{margin-top:1.1rem;font-size:var(--t-sm);color:var(--fg-soft);max-width:34ch}
.foot-place{margin-top:.4rem;font-size:var(--t-sm)}
.foot-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.foot-nav h4{
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:1.1rem;
}
.foot-nav li+li{margin-top:.7rem}
.foot-nav .link{font-size:var(--t-sm);color:var(--fg-soft)}
.foot-nav .link:hover{color:var(--fg)}
/* Volver arriba: al final de cada página, para no obligar a hacer
   scroll de vuelta solo para cambiar de sección. */
.foot-top-link{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:clamp(2.5rem,2rem + 2vw,3.6rem);
  padding:.6rem 1.1rem .6rem .6rem;
  border:1px solid var(--line);border-radius:100px;
  font-size:var(--t-sm);font-weight:500;color:var(--fg-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease),
             transform .3s var(--ease);
}
.foot-top-ico{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  background:var(--bone-08);border-radius:50%;
  transition:background-color .3s var(--ease),color .3s var(--ease),
             transform .35s var(--ease);
}
.foot-top-ico svg{width:15px;height:15px}
.foot-top-link:hover{border-color:var(--lime);color:var(--fg);transform:translateY(-2px)}
.foot-top-link:hover .foot-top-ico{background:var(--lime);color:var(--graf);transform:translateY(-2px)}

.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:var(--t-sm);
}
.foot-legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-legal a{color:var(--fg-mute);transition:color .25s var(--ease)}
.foot-legal a:hover{color:var(--lime)}
@media(max-width:820px){
  .foot-top{grid-template-columns:1fr}
  .foot-nav{grid-template-columns:repeat(2,1fr);gap:2.2rem}
}
@media(max-width:480px){ .foot-nav{grid-template-columns:1fr} }

/* ════════════════════════════════════════════════════════════
   WHATSAPP — presente pero nunca agresivo
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   COMPONENTES
   (bloque recuperado del navegador tras un borrado accidental;
    las reglas son las mismas, se perdieron solo los comentarios)
   ════════════════════════════════════════════════════════════ */
.problems { display: grid; gap: 0px; border-top: 1px solid var(--line); }
.problems li { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.35rem 0.25rem; border-bottom: 1px solid var(--line); font-size: var(--t-lg); color: var(--fg-soft); transition: color .3s var(--ease),padding-left .3s var(--ease); }
.problems li:hover { color: var(--fg); padding-left: 0.75rem; }
.problems svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 0.28em; color: var(--lime); opacity: 0.85; }
.card-gain { font-weight: 500; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); font-size: var(--t-sm) !important; color: var(--fg) !important; }
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 0.4rem + 1.6vw, 2rem); counter-reset: step 0; }
.process li { position: relative; padding-top: 1.7rem; border-top: 2px solid var(--line); }
.process li::before { content: ""; position: absolute; top: -2px; left: 0px; height: 2px; width: 0px; background: var(--lime); transition: width .8s var(--ease-out); }
.process li.in::before { width: 100%; }
.process li:nth-child(2)::before { transition-delay: 0.1s; }
.process li:nth-child(3)::before { transition-delay: 0.2s; }
.process li:nth-child(4)::before { transition-delay: 0.3s; }
.process li:nth-child(5)::before { transition-delay: 0.4s; }
.process-n { display: block; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.1em; color: var(--lime); margin-bottom: 0.75rem; }
.process h3 { font-size: var(--t-lg); margin-bottom: 0.45rem; }
.process p { font-size: var(--t-sm); color: var(--fg-soft); }
.process-loop { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.4rem; font-size: var(--t-sm); font-weight: 500; color: var(--fg-mute); }
.process-loop svg { width: 19px; height: 19px; color: var(--lime); }
@media (max-width: 900px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .process { grid-template-columns: 1fr; }
}
.ba { margin: 0px; }
.ba-pane { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--carbon); aspect-ratio: 1200 / 750; touch-action: pan-y; --pos: 50%; }
.ba-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.ba-overlay { position: absolute; inset: 0px; clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; }
.ba-tag { position: absolute; top: 1rem; z-index: 3; padding: 0.4rem 0.8rem; border-radius: 100px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(6px); pointer-events: none; }
.ba-tag-before { left: 1rem; background: rgba(15, 22, 24, 0.72); color: var(--bone); }
.ba-tag-after { right: 1rem; background: var(--lime); color: var(--graf); }
.ba-handle { position: absolute; top: 0px; bottom: 0px; left: var(--pos); z-index: 4; width: 2px; background: var(--lime); transform: translateX(-1px); pointer-events: none; }
.ba-handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: var(--graf); box-shadow: rgba(15, 22, 24, 0.55) 0px 6px 22px -6px; }
.ba-handle-grip svg { width: 22px; height: 22px; }
.ba-range { position: absolute; inset: 0px; z-index: 5; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: ew-resize; appearance: none; background: none; }
.ba-range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; }
.ba-range:focus-visible ~ .ba-handle .ba-handle-grip { outline: 3px solid var(--bone); outline-offset: 3px; }
.ba-caption { margin-top: 1rem; font-size: var(--t-sm); color: var(--fg-mute); text-align: center; }
@media (max-width: 560px) {
  .ba-tag { top: 0.7rem; font-size: 0.7rem; padding: 0.32rem 0.62rem; }
  .ba-tag-before { left: 0.7rem; }
  .ba-tag-after { right: 0.7rem; }
  .ba-handle-grip { width: 38px; height: 38px; }
  .ba-handle-grip svg { width: 18px; height: 18px; }
}
.statement { background: radial-gradient(58% 60% at 12% 10%, rgba(163,217,43,.10) 0%, transparent 64%),
    var(--graf); }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); align-items: center; }
@media (max-width: 880px) {
  .statement-grid { align-items: start; }
}
@media (max-width: 880px) {
  .statement-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.statement-title { font-size: var(--t-2xl); line-height: 1.15; }
.statement-title .hl { color: var(--lime); position: relative; white-space: nowrap; }
.statement-body p { color: var(--fg-soft); }
.statement-body strong { color: var(--fg); font-weight: 600; }
.statement-list { display: grid; gap: 0.8rem; }
.statement-list li { padding-left: 1.5rem; position: relative; font-size: var(--t-sm); color: var(--fg-soft); }
.statement-list li::before { content: ""; position: absolute; left: 0px; top: 0.55em; width: 8px; height: 8px; background: var(--lime); clip-path: polygon(0px 0px, 100% 0px, 100% 100%); }
.statement-list strong { color: var(--fg); font-weight: 600; }
.sectors { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.sectors li { padding: 0.62rem 1.15rem; border: 1px solid var(--line); border-radius: 100px; font-size: var(--t-sm); color: var(--fg-soft); transition: border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease); }
.sectors li:hover { border-color: color-mix(in srgb,var(--lime) 60%,transparent); color: var(--fg); transform: translateY(-2px); }
.price-block h2 { font-size: var(--t-3xl); }
.price-num { color: var(--lime); }
.cta-final { position: relative; overflow: hidden; background: radial-gradient(64% 100% at 50% 0%, rgba(163,217,43,.11) 0%, transparent 66%),
    var(--graf); }
.page-hero { position: relative; overflow: hidden; padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem) clamp(3rem, 2.2rem + 3.4vw, 4.75rem); }
.page-hero::before { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: radial-gradient(62% 58% at 88% 4%, rgba(163,217,43,.11) 0%, transparent 66%),
    linear-gradient(180deg, var(--carbon) 0%, var(--graf) 78%); }
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: 1.2rem; }
.svc-hero { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(1.5rem, 0.6rem + 3vw, 3rem); align-items: center; }
.svc-hero h1 { max-width: 15ch; }
.svc-visual { margin: 0px -6% 0px 0px; position: relative; }
.svc-visual img { width: 100%; height: auto; mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent 100%), linear-gradient(transparent 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, transparent 100%); mask-composite: intersect; animation: 8s ease-in-out 0s infinite normal none running float; }
.svc-visual::after { content: ""; position: absolute; inset: 14% 0px 0px 4%; z-index: -1; background: radial-gradient(46% 46%, rgba(163, 217, 43, 0.15), transparent 70%); filter: blur(34px); }
@media (max-width: 900px) {
  .svc-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-visual { max-width: 440px; margin: 0px auto; }
}
.wide-visual { margin: 0px; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--carbon); border: 1px solid var(--line); }
.wide-visual img { width: 100%; height: auto; display: block; }
.wide-visual figcaption { position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 2.4rem 1.4rem 0.9rem; background: linear-gradient(to top, rgba(15, 22, 24, 0.86), transparent); color: var(--bone-70); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.prose p + p { margin-top: 1rem; }
.why-list { display: grid; gap: 1.1rem; }
.why-list li { padding-left: 1.4rem; position: relative; color: var(--fg-soft); }
.why-list li::before { content: ""; position: absolute; left: 0px; top: 0.62em; width: 7px; height: 7px; background: var(--lime); clip-path: polygon(0px 0px, 100% 0px, 100% 100%); }
.why-list strong { color: var(--fg); font-weight: 600; }
.ticks { display: grid; gap: 0.85rem; }
.ticks li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--t-sm); color: var(--fg-soft); }
.ticks svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 0.22em; color: var(--lime); }
.plans { align-items: start; }
.plan { display: flex; flex-direction: column; }
.plan-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.plan-tag { padding: 0.28rem 0.68rem; border-radius: 100px; background: color-mix(in srgb,var(--lime) 18%,transparent); border: 1px solid color-mix(in srgb,var(--lime) 40%,transparent); color: var(--lime); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; }
.plan-lead { font-size: var(--t-base) !important; color: var(--fg) !important; }
.plan-for { margin-top: 0.7rem; font-size: var(--t-sm); color: var(--fg-mute); }
.plan-for strong { color: var(--fg-soft); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plans-note { margin-top: 2rem; text-align: center; font-size: var(--t-sm); color: var(--fg-mute); }
.plans-note strong { color: var(--fg-soft); }
.svc-card { --bg: var(--graf); --fg: var(--bone); --fg-soft: var(--bone-70); --fg-mute: var(--bone-50); --line: var(--bone-14); --line-soft: var(--bone-08); position: relative; overflow: hidden; background: var(--graf); color: var(--bone); border-color: transparent; }
.svc-card:hover { border-color: color-mix(in srgb,var(--lime) 55%,transparent); box-shadow: rgba(15, 22, 24, 0.7) 0px 24px 50px -30px; }
.svc-card.on-dark { background: var(--carbon); border-color: var(--bone-08); }
.svc-thumb { position: absolute; top: -16%; right: -12%; width: 46%; pointer-events: none; z-index: 0; opacity: 0.85; transition: transform .7s var(--ease),opacity .5s var(--ease); }
.svc-thumb img { width: 100%; height: auto; display: block; mask-image: radial-gradient(62% 62% at 50% 46%, rgb(0, 0, 0) 34%, transparent 100%); }
.svc-card:hover .svc-thumb { transform: translate3d(-6px, 6px, 0px) scale(1.06); opacity: 1; }
.svc-card > :not(.svc-thumb) { position: relative; z-index: 1; }
.svc-card h3, .svc-card p, .svc-card .link { max-width: min(100%, 33ch); }
@media (max-width: 560px) {
  .svc-thumb { width: 56%; opacity: 0.55; }
}
.svc-pain { padding-left: 0.9rem; border-left: 2px solid var(--line); font-size: var(--t-sm) !important; color: var(--fg-mute) !important; }
.svc-pain strong { color: var(--fg-soft); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
.split-mid { align-items: center; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
}
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 0.25rem; cursor: pointer; list-style: none; font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; transition: color .25s var(--ease); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--lime); }
.faq-item summary svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 0.2em; color: var(--lime); transition: transform .35s var(--ease); }
.faq-item[open] summary svg { transform: rotate(135deg); }
.faq-body { padding: 0px 0.25rem 1.4rem; max-width: 62ch; }
.faq-body p { color: var(--fg-soft); }
.an { margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); max-width: 680px; }
.an-form { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.an-input { position: relative; flex: 1 1 300px; display: flex; align-items: center; background: rgba(247, 248, 246, 0.06); border: 1px solid var(--line); border-radius: 100px; transition: border-color .3s var(--ease),background-color .3s var(--ease); }
.an-input:focus-within { border-color: var(--lime); background: rgba(247, 248, 246, 0.09); }
.an-ico { width: 20px; height: 20px; flex: 0 0 auto; margin-left: 1.1rem; color: var(--fg-mute); }
.an-input input { flex: 1 1 0%; min-width: 0px; padding: 1rem 0.9rem; min-height: 52px; background: none; border: 0px; outline: none; color: var(--fg); font-size: var(--t-base); }
.an-input input::placeholder { color: var(--fg-mute); }
.an-help { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--fg-mute); }
#anBtn.is-busy { opacity: 0.72; pointer-events: none; }
.an-loading { margin-top: 1.5rem; }
.an-bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.an-bar span { display: block; height: 100%; width: 38%; background: var(--lime); border-radius: 3px; animation: anSlide 1.5s var(--ease) infinite; }
@keyframes anSlide { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}
.an-step { margin-top: 0.8rem; font-size: var(--t-sm); color: var(--fg-soft); }
.an-error { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: rgba(224, 163, 46, 0.12); border: 1px solid rgba(224, 163, 46, 0.4); color: var(--fg); font-size: var(--t-sm); }
.an-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 0.6rem + 3vw, 3rem); align-items: center; }
@media (max-width: 980px) {
  .an-hero { grid-template-columns: 1fr; }
  .an-hero .svc-visual { max-width: 340px; margin: 0px auto; order: -1; }
}
@media (max-width: 640px) {
  .an-hero .svc-visual { display: none; }
}
.an-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; margin-top: 0.6rem; }
@media (max-width: 640px) {
  .an-top { grid-template-columns: 1fr; justify-items: start; }
}
.an-ring { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.an-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.an-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.an-ring-bg { stroke: var(--line); }
.an-ring-fg { stroke: var(--lime); transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.an-ring.is-medio .an-ring-fg { stroke: var(--amber); }
.an-ring.is-bajo .an-ring-fg { stroke: var(--amber); }
.an-ring-num { position: absolute; inset: 0px; display: grid; place-content: center; text-align: center; font-family: var(--f-display); line-height: 1; }
.an-ring-num b { display: block; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; }
.an-ring-num span { font-size: 0.8rem; color: var(--fg-mute); font-weight: 500; }
.an-top-txt h2 { font-size: var(--t-2xl); }
.an-top-txt .lead { margin-top: 0.6rem; font-size: var(--t-base); }
.an-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .an-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .an-cats { grid-template-columns: 1fr; }
}
.an-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: var(--t-sm); color: var(--fg-soft); margin-bottom: 0.5rem; }
.an-cat-top b { font-family: var(--f-display); font-size: var(--t-lg); color: var(--fg); }
.an-cat-bar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.an-cat-bar i { display: block; height: 100%; width: 0px; border-radius: 5px; background: var(--lime); transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s; }
.an-cat-bar i.go { width: var(--w); }
.an-cat.is-medio .an-cat-bar i, .an-cat.is-bajo .an-cat-bar i { background: var(--amber); }
.an-prio { margin-top: 2.4rem; padding: clamp(1.4rem, 1rem + 1.4vw, 2rem); border: 1px solid color-mix(in srgb,var(--lime) 42%,transparent); border-radius: var(--radius-lg); background: color-mix(in srgb,var(--lime) 7%,transparent); }
.an-prio h3 { font-size: var(--t-xl); margin-bottom: 1.2rem; }
.an-prio ol { display: grid; gap: 1.1rem; }
.an-prio li { display: flex; gap: 0.9rem; align-items: flex-start; }
.an-prio-n { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); color: var(--graf); font-family: var(--f-display); font-size: 0.85rem; font-weight: 700; }
.an-prio h4 { font-size: var(--t-base); display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.an-prio-tag { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lime-deep); }
.an-prio p { margin-top: 0.25rem; font-size: var(--t-sm); color: var(--fg-soft); }
.an-close { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); align-items: center; margin-top: 2.8rem; padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb,var(--lime) 40%,transparent); background: color-mix(in srgb,var(--lime) 8%,transparent); }
.an-close.is-medio, .an-close.is-bajo { border-color: color-mix(in srgb,var(--amber) 45%,transparent); background: color-mix(in srgb,var(--amber) 8%,transparent); }
@media (max-width: 700px) {
  .an-close { grid-template-columns: 1fr; }
}
.an-close-score { display: grid; place-items: center; text-align: center; min-width: 132px; padding: 1.1rem 1.3rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.an-close-score b { font-family: var(--f-display); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--lime-deep); }
.an-close.is-medio .an-close-score b, .an-close.is-bajo .an-close-score b { color: var(--amber); }
.an-close-score span { font-size: 0.8rem; color: var(--fg-mute); margin-top: 0.1rem; }
.an-close-score em { display: block; margin-top: 0.6rem; font-style: normal; font-size: var(--t-xs); font-weight: 600; line-height: 1.35; color: var(--fg-soft); max-width: 15ch; }
.an-close-txt h3 { font-size: var(--t-xl); }
.an-close-txt p { margin-top: 0.6rem; color: var(--fg-soft); }
.an-close-lead { font-weight: 600; color: var(--fg) !important; margin-top: 1.2rem !important; }
.an-close-prio { display: grid; gap: 0.7rem; margin-top: 0.7rem; counter-reset: p 0; }
.an-close-prio li { position: relative; padding-left: 1.5rem; font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.5; }
.an-close-prio li::before { content: ""; position: absolute; left: 0px; top: 0.55em; width: 8px; height: 8px; background: var(--lime); clip-path: polygon(0px 0px, 100% 0px, 100% 100%); }
.an-close.is-medio .an-close-prio li::before, .an-close.is-bajo .an-close-prio li::before { background: var(--amber); }
.an-close-prio b { color: var(--fg); font-weight: 600; }
.an-close-prio .an-prio-tag { display: block; margin-bottom: 0.1rem; }
.an-group { margin-top: 2.4rem; }
.an-group-title { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); font-family: var(--f-body); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.an-grid-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
@media (max-width: 760px) {
  .an-grid-in { grid-template-columns: 1fr; }
}
.an-summary-tag { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-deep); margin-bottom: 0.6rem; }
.an-verdict { max-width: none; }
.an-counts { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.2rem; }
.an-counts li { display: flex; align-items: baseline; gap: 0.4rem; font-size: var(--t-sm); color: var(--fg-mute); }
.an-counts b { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; }
.an-counts .is-ok b { color: var(--lime); }
.an-counts .is-mej b { color: var(--amber); }
.an-counts .is-unk b { color: var(--fg-mute); }
.an-measured { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--fg-mute); }
.an-summary { margin-top: 1.8rem; padding: 1.4rem 1.6rem; max-width: 70ch; border-left: 2px solid var(--lime); background: var(--graf-07); border-radius: 0 var(--radius) var(--radius) 0; }
.an-summary p { color: var(--fg-soft); }
.an-summary p + p { margin-top: 0.8rem; }
.an-grid { margin-top: 0.6rem; }
.an-check { display: flex; gap: 0.95rem; align-items: flex-start; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.an-check-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; }
.an-check-ico svg { width: 17px; height: 17px; }
.an-check.is-ok .an-check-ico { background: color-mix(in srgb,var(--lime) 20%,transparent); color: var(--lime-deep); }
.an-check.is-mejorable .an-check-ico { background: rgba(224, 163, 46, 0.18); color: var(--amber); }
.an-check.is-desconocido .an-check-ico { background: var(--graf-07); color: var(--fg-mute); }
.an-check h4 { font-size: var(--t-base); display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.an-check-tag { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-mute); }
.an-check.is-ok .an-check-tag { color: var(--lime-deep); }
.an-check.is-mejorable .an-check-tag { color: var(--amber); }
.an-check p { margin-top: 0.35rem; font-size: var(--t-sm); color: var(--fg-soft); }
.an-lead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 1rem + 2.4vw, 3rem); margin-top: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--graf-07); }
@media (max-width: 820px) {
  .an-lead { grid-template-columns: 1fr; }
}
.an-lead-copy p { margin-top: 0.7rem; color: var(--fg-soft); font-size: var(--t-sm); }
.an-lead-form { display: grid; gap: 0.9rem; align-content: start; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-sm); font-weight: 500; color: var(--fg-soft); }
.field .opt { color: var(--fg-mute); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; padding: 0.82rem 1rem; min-height: 48px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; outline: none; transition: border-color .25s var(--ease),box-shadow .25s var(--ease); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb,var(--lime) 22%,transparent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--amber); }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--fg-soft); }
.consent input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 0.18em; accent-color: var(--lime-deep); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.an-lead-msg { font-size: var(--t-sm); min-height: 1.2em; }
.an-lead-msg.is-error { color: var(--amber); }
.an-lead-done { display: flex; gap: 0.85rem; align-items: flex-start; }
.an-lead-done svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--lime-deep); margin-top: 0.15em; }
.an-lead-done p { font-size: var(--t-sm); color: var(--fg-soft); }
.contact-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-form { display: grid; gap: 1.1rem; align-content: start; }
.contact-aside { display: grid; gap: 1rem; align-content: start; }
.contact-aside .card p { font-size: var(--t-sm); }
.contact-num { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.01em; color: var(--fg); }
.legal { max-width: 70ch; }
.legal-updated { font-size: var(--t-sm); color: var(--fg-mute); margin-bottom: 2.4rem; }
.legal h2 { font-size: var(--t-xl); margin-top: 2.6rem; margin-bottom: 0.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.legal h2:first-of-type { margin-top: 0px; padding-top: 0px; border-top: 0px; }
.legal h3 { font-size: var(--t-lg); margin-top: 1.7rem; margin-bottom: 0.5rem; }
.legal p { color: var(--fg-soft); margin-bottom: 0.9rem; }
.legal a { color: var(--fg); text-decoration-line: underline; text-decoration-thickness: initial; text-decoration-style: initial; text-underline-offset: 3px; text-decoration-color: var(--lime); transition: color .25s var(--ease); }
.legal a:hover { color: var(--lime); }
.legal-data { display: grid; gap: 0.6rem; margin: 1rem 0px 1.4rem; padding-left: 0px; }
.legal-data li { padding-left: 1.3rem; position: relative; font-size: var(--t-sm); color: var(--fg-soft); }
.legal-data li::before { content: ""; position: absolute; left: 0px; top: 0.6em; width: 7px; height: 7px; background: var(--lime); clip-path: polygon(0px 0px, 100% 0px, 100% 100%); }
.legal-data strong { color: var(--fg); }
.legal-more { padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-mute); }
.as { --as-edge: clamp(1rem,.6rem + 1vw,1.6rem); }
.as-launch { position: fixed; right: var(--as-edge); bottom: var(--as-edge); z-index: 95; display: grid; place-items: center; width: 58px; height: 58px; padding: 0px; background: var(--lime); color: var(--graf); border: 0px; border-radius: 50%; cursor: pointer; box-shadow: rgba(163, 217, 43, 0.55) 0px 14px 34px -10px, rgba(163, 217, 43, 0.45) 0px 0px 0px 0px; transition: transform .3s var(--ease),background-color .3s var(--ease),
             box-shadow .4s var(--ease); }
.as-launch:hover { transform: translateY(-2px) scale(1.05); background: var(--lime-deep); box-shadow: rgba(163, 217, 43, 0.7) 0px 18px 40px -10px; }
.as-launch-ico svg { width: 26px; height: 26px; display: block; }
@keyframes asRing { 
  0% { box-shadow: rgba(163, 217, 43, 0.55) 0px 14px 34px -10px, rgba(163, 217, 43, 0.5) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(163, 217, 43, 0.55) 0px 14px 34px -10px, rgba(163, 217, 43, 0) 0px 0px 0px 14px; }
  100% { box-shadow: rgba(163, 217, 43, 0.55) 0px 14px 34px -10px, rgba(163, 217, 43, 0) 0px 0px 0px 0px; }
}
.as-launch { animation: 3.6s ease-out 2s infinite normal none running asRing; }
.as-launch:hover { animation: auto ease 0s 1 normal none running none; }
.as-launch-dot { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--graf); border: 2px solid var(--lime); animation: asPulse 2.4s var(--ease) infinite; }
@keyframes asPulse { 
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.65; }
}
.as.is-open .as-launch { transform: scale(0.9); opacity: 0; pointer-events: none; }
.as-panel { position: fixed; right: var(--as-edge); bottom: var(--as-edge); z-index: 120; display: flex; flex-direction: column; width: min(380px,calc(100vw - 2 * var(--as-edge))); height: min(560px,calc(100dvh - 2 * var(--as-edge))); background: var(--bone); color: var(--graf); border: 1px solid var(--graf-12); border-radius: 18px; box-shadow: rgba(15, 22, 24, 0.45) 0px 30px 70px -24px; overflow: hidden; animation: asIn .28s var(--ease-out); }
.as-panel[hidden] { display: none; }
@keyframes asIn { 
  0% { opacity: 0; transform: translateY(14px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.as-head { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1rem; background: var(--graf); color: var(--bone); flex: 0 0 auto; }
.as-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; background: rgba(247, 248, 246, 0.1); border-radius: 9px; color: var(--bone); }
.as-avatar svg { width: 14px; height: 17px; }
.as-head-txt { flex: 1 1 0%; min-width: 0px; }
.as-head-txt h2 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; font-family: var(--f-body); }
.as-head-txt p { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgba(247, 248, 246, 0.6); margin-top: 0.15rem; }
.as-live { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: 0 0 auto; box-shadow: rgba(163, 217, 43, 0.2) 0px 0px 0px 3px; }
.as-close { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; background: none; border: 0px; color: rgba(247, 248, 246, 0.6); cursor: pointer; border-radius: 8px; transition: color .2s var(--ease),background-color .2s var(--ease); }
.as-close:hover { color: var(--bone); background: rgba(247, 248, 246, 0.1); }
.as-close svg { width: 17px; height: 17px; }
.as-log { flex: 1 1 0%; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; scrollbar-width: thin; }
.as-msg { max-width: 86%; padding: 0.7rem 0.95rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.55; }
.as-msg p + p { margin-top: 0.55rem; }
.as-msg a { color: inherit; text-decoration-line: underline; text-decoration-thickness: initial; text-decoration-style: initial; text-underline-offset: 2px; text-decoration-color: var(--lime-deep); }
.as-msg.is-bot { align-self: flex-start; background: rgb(237, 239, 234); color: var(--graf); border-bottom-left-radius: 5px; }
.as-msg.is-me { align-self: flex-end; background: var(--graf); color: var(--bone); border-bottom-right-radius: 5px; }
.as-msg.is-me a { text-decoration-color: var(--lime); }
.as-typing { display: flex; gap: 5px; align-items: center; padding: 0.85rem 0.95rem; }
.as-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--graf-55); animation: 1.3s ease-in-out 0s infinite normal none running asDot; }
.as-typing span:nth-child(2) { animation-delay: 0.16s; }
.as-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes asDot { 
  0%, 60%, 100% { transform: translateY(0px); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.as-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.as-chips button { padding: 0.45rem 0.8rem; border-radius: 100px; cursor: pointer; background: transparent; border: 1px solid var(--graf-12); color: var(--graf-70); font-size: 0.8rem; text-align: left; transition: border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease); }
.as-chips button:hover { border-color: var(--lime-deep); color: var(--graf); background: rgba(163, 217, 43, 0.1); }
.as-form { display: flex; align-items: flex-end; gap: 0.5rem; flex: 0 0 auto; padding: 0.7rem; border-top: 1px solid var(--graf-12); background: var(--bone); }
.as-form textarea { flex: 1 1 0%; min-height: 42px; max-height: 110px; resize: none; padding: 0.62rem 0.85rem; border: 1px solid var(--graf-12); border-radius: 12px; background: rgb(255, 255, 255); color: var(--graf); font-size: 0.9rem; line-height: 1.45; outline: none; transition: border-color .2s var(--ease); }
.as-form textarea:focus { border-color: var(--lime-deep); }
.as-form button { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; background: var(--lime); color: var(--graf); border: 0px; border-radius: 12px; cursor: pointer; transition: background-color .25s var(--ease),opacity .25s var(--ease); }
.as-form button:hover { background: var(--lime-deep); }
.as-form button:disabled { opacity: 0.45; cursor: default; }
.as-form button svg { width: 19px; height: 19px; }
.as-foot { flex: 0 0 auto; padding: 0.55rem 1rem 0.8rem; font-size: 0.72rem; color: var(--graf-55); text-align: center; background: var(--bone); }
.as-foot a { color: var(--graf-70); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .as-panel { right: 0px; bottom: 0px; left: 0px; width: 100%; height: min(88dvh, 640px); border-radius: 18px 18px 0px 0px; border-bottom: 0px; }
}
.wa-float { --wa-edge: clamp(1rem,.6rem + 1vw,1.6rem); position: fixed; left: var(--wa-edge); bottom: var(--wa-edge); z-index: 95; display: grid; place-items: center; width: 54px; height: 54px; background: var(--graf); color: var(--bone); border-radius: 50%; box-shadow: rgba(15,22,24,.35) 0px 14px 34px -10px, rgba(163,217,43,.45) 0px 0px 0px 0px; transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .4s var(--ease); }
.wa-float:hover { transform: translateY(-2px) scale(1.05); background: var(--carbon); box-shadow: rgba(15,22,24,.5) 0px 18px 40px -10px; }
.wa-float-ico svg { width: 23px; height: 23px; display: block; }
.wa-float-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--graf); border: 2px solid var(--lime); animation: asPulse 2.4s var(--ease) infinite; animation-delay: 1.1s; }
@keyframes waRing {
  0% { box-shadow: rgba(15,22,24,.35) 0px 14px 34px -10px, rgba(163,217,43,.5) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(15,22,24,.35) 0px 14px 34px -10px, rgba(163,217,43,0) 0px 0px 0px 13px; }
  100% { box-shadow: rgba(15,22,24,.35) 0px 14px 34px -10px, rgba(163,217,43,0) 0px 0px 0px 0px; }
}
.wa-float { animation: 3.6s ease-out 3.6s infinite normal none running waRing; }
.wa-float:hover { animation: none; }
.as.is-open ~ .wa-float { transform: translateY(6px); opacity: 0; pointer-events: none; }
@keyframes kDraw { 
  0% { clip-path: inset(0px 100% 0px 0px); }
  100% { clip-path: inset(0px); }
}
.head-logo .logo-k .arm { animation: kDraw .7s var(--ease-out) .15s both; }
h1.by-lines .ln { display: block; overflow: hidden; padding-top: 0.08em; margin-top: -0.08em; }
h1.by-lines .ln-i { display: block; transform: translateY(105%); animation-duration: 0.85s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: lnUp; animation-timeline: auto; animation-range: normal; animation-delay: calc(.12s + var(--i) * .09s); }
@keyframes lnUp { 
  100% { transform: none; }
}
@keyframes breathe { 
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.hero::before { animation: 11s ease-in-out 0s infinite normal none running breathe; }
.card { box-shadow: rgba(163, 217, 43, 0) 0px 0px 0px 0px; }
.card:hover { box-shadow: rgba(15, 22, 24, 0.5) 0px 18px 40px -28px; }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%); transform: translateX(-120%); }
.btn-primary:hover::before { transform: translateX(120%); transition: transform .75s var(--ease-out); }
@keyframes popIn { 
  0% { opacity: 0; transform: scale(0.86); }
  100% { opacity: 1; transform: none; }
}
.process li.in .process-n { animation: popIn .5s var(--ease-out) both; }
.process li:nth-child(2).in .process-n { animation-delay: 0.1s; }
.process li:nth-child(3).in .process-n { animation-delay: 0.2s; }
.process li:nth-child(4).in .process-n { animation-delay: 0.3s; }
.process li:nth-child(5).in .process-n { animation-delay: 0.4s; }
@keyframes loop360 { 
  0% { transform: rotate(-360deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.process-loop.in svg { animation: 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s 1 normal both running loop360; }
.page-hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 0px; right: 0px; width: min(46%, 520px); height: 100%; background-image: linear-gradient(135deg, transparent 46%, rgba(163, 217, 43, 0.16) 46%, rgba(163, 217, 43, 0.16) 48%, transparent 48%); background-size: 34px 34px; mask-image: radial-gradient(72% 82% at 100% 22%, rgb(0, 0, 0) 8%, transparent 76%); opacity: 0; animation: motifIn 1.4s var(--ease-out) .3s forwards; }
@keyframes motifIn { 
  100% { opacity: 1; }
}
.page-hero:has(.svc-visual)::after { display: none; }
@media (max-width: 900px) {
  .page-hero::after { display: none; }
}
.btn .ico { transition: transform .35s var(--ease-out); }
.btn:hover .ico { transform: translateX(4px); }
.reveal .ticks li, .reveal.ticks li { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease-out),transform .5s var(--ease-out); }
.reveal.in .ticks li, .reveal.in.ticks li { opacity: 1; transform: none; }
.ticks li:nth-child(1) { transition-delay: 0.05s; }
.ticks li:nth-child(2) { transition-delay: 0.1s; }
.ticks li:nth-child(3) { transition-delay: 0.15s; }
.ticks li:nth-child(4) { transition-delay: 0.2s; }
.ticks li:nth-child(5) { transition-delay: 0.25s; }
.ticks li:nth-child(6) { transition-delay: 0.3s; }
.ticks li:nth-child(7) { transition-delay: 0.35s; }
.ticks li:nth-child(8) { transition-delay: 0.4s; }
.ticks li:nth-child(n+9) { transition-delay: 0.45s; }
.problems li { transition: color .3s var(--ease),padding-left .3s var(--ease),
              opacity .55s var(--ease-out),transform .55s var(--ease-out); }
@keyframes tagPop { 
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.06); }
  100% { transform: none; opacity: 1; }
}
.reveal.in .plan-tag { animation: tagPop .55s var(--ease-out) .25s both; }
.sectors.in li { animation: popIn .45s var(--ease-out) both; }
.sectors.in li:nth-child(1) { animation-delay: 0.02s; }
.sectors.in li:nth-child(2) { animation-delay: 0.06s; }
.sectors.in li:nth-child(3) { animation-delay: 0.1s; }
.sectors.in li:nth-child(4) { animation-delay: 0.14s; }
.sectors.in li:nth-child(5) { animation-delay: 0.18s; }
.sectors.in li:nth-child(6) { animation-delay: 0.22s; }
.sectors.in li:nth-child(7) { animation-delay: 0.26s; }
.sectors.in li:nth-child(8) { animation-delay: 0.3s; }
.section-head .eyebrow::before { transform-origin: left center; transition: transform .6s var(--ease-out); }
.section-head.reveal .eyebrow::before { transform: scaleX(0); }
.section-head.reveal.in .eyebrow::before { transform: scaleX(1); }
.demo { margin: 0px; position: relative; display: grid; place-items: center; padding: 1rem 0px; }
.demo-phone { position: relative; width: min(250px, 80vw); aspect-ratio: 9 / 17.5; background: var(--carbon); border: 1px solid var(--bone-14); border-radius: 34px; padding: 9px; box-shadow: rgba(0, 0, 0, 0.7) 0px 30px 70px -30px, rgba(163, 217, 43, 0.14) 0px 0px 0px 1px; }
.demo-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 78px; height: 17px; background: var(--carbon); border-radius: 12px; z-index: 3; }
.demo-screen { height: 100%; background: var(--graf); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.demo-head { display: flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; padding: 1.9rem 0.8rem 0.7rem; border-bottom: 1px solid var(--bone-08); }
.demo-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; background: rgba(247, 248, 246, 0.1); border-radius: 7px; color: var(--bone); }
.demo-avatar svg { width: 10px; height: 13px; }
.demo-head-txt { display: flex; flex-direction: column; line-height: 1.25; }
.demo-head-txt b { font-size: 0.74rem; color: var(--bone); font-weight: 600; }
.demo-head-txt i { display: flex; align-items: center; gap: 0.3rem; font-style: normal; font-size: 0.62rem; color: var(--bone-50); }
.demo-live { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.demo-log { flex: 1 1 0%; display: flex; flex-direction: column; gap: 0.42rem; padding: 0.8rem 0.7rem; overflow: hidden; }
.demo-msg { max-width: 82%; padding: 0.5rem 0.7rem; border-radius: 12px; font-size: 0.7rem; line-height: 1.45; opacity: 0; transform: translateY(9px); }
.demo-msg.is-me { align-self: flex-end; background: var(--lime); color: var(--graf); border-bottom-right-radius: 4px; font-weight: 500; }
.demo-msg.is-bot { align-self: flex-start; background: rgba(247, 248, 246, 0.1); color: var(--bone); border-bottom-left-radius: 4px; }
.demo-msg.is-dots { align-self: flex-start; display: flex; gap: 3.5px; align-items: center; background: rgba(247, 248, 246, 0.1); padding: 0.6rem 0.7rem; border-bottom-left-radius: 4px; }
.demo-msg.is-dots span { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--bone-50); }
.demo-bar { flex: 0 0 auto; margin: 0.2rem 0.7rem 0.8rem; height: 26px; border-radius: 13px; background: rgba(247, 248, 246, 0.07); display: flex; align-items: center; padding: 0px 0.6rem; }
.demo-bar span { width: 52%; height: 4px; border-radius: 4px; background: var(--bone-14); }
.demo-toast { position: absolute; right: -6px; bottom: 16%; display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.5rem 0.8rem; border-radius: 100px; background: var(--lime); color: var(--graf); font-size: 0.68rem; font-weight: 600; white-space: nowrap; box-shadow: rgba(15, 22, 24, 0.6) 0px 12px 28px -12px; opacity: 0; transform: translateY(8px) scale(0.94); }
.demo-toast svg { width: 13px; height: 13px; }
.demo-note { margin-top: 1.1rem; text-align: center; font-size: var(--t-xs); color: var(--fg-mute); }
@keyframes demoIn { 
  100% { opacity: 1; transform: none; }
}
@keyframes demoDots { 
  0%, 60%, 100% { transform: translateY(0px); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.demo.go .demo-msg { animation: demoIn .45s var(--ease-out) var(--d) both; }
.demo.go .demo-msg.is-dots span { animation: 1.2s ease-in-out 0s infinite normal none running demoDots; }
.demo.go .demo-msg.is-dots span:nth-child(2) { animation-delay: 0.15s; }
.demo.go .demo-msg.is-dots span:nth-child(3) { animation-delay: 0.3s; }
.demo.go .demo-toast { animation: demoIn .5s var(--ease-out) var(--d) both; }
.demo.go .demo-msg.is-dots { animation: demoIn .4s var(--ease-out) var(--d) both, demoOut .3s var(--ease) calc(var(--d) + 1.1s) forwards; }
@keyframes demoOut { 
  100% { opacity: 0; transform: scale(0.9); max-height: 0px; padding: 0px; margin: 0px; }
}

/* ── Movimiento reducido ──────────────────────────────────── */
/* Solo desactivamos lo intrusivo. Los hover y fades se mantienen:
   Windows envía esta preferencia activada por defecto y apagarlo
   todo dejaría la web muerta para mucha gente. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
  /* Las animaciones continuas sí son intrusivas: fuera */
  .hero-visual img,.svc-visual img{animation:none}
  .as-launch-dot{animation:none}
  .as-panel{animation:none}
  .as-launch:hover{transform:none}
  .wa-float{animation:none}
  .wa-float:hover{transform:none}
  .wa-float-dot{animation:none}
  .hero::before{animation:none}
  .head-logo .logo-k .arm{animation:none}
  .process li.in .process-n{animation:none}
  .btn-primary::before{display:none}
  .section-head.reveal .eyebrow::before,
  .section-head.reveal.in .eyebrow::before{transform:scaleX(1);transition:none}
  /* La demo se muestra entera y quieta, sin escribirse sola */
  .demo .demo-msg,.demo .demo-toast{opacity:1;transform:none;animation:none}
  .demo .demo-msg.is-dots{display:none}
  /* Titulares completos desde el principio, sin subir por líneas */
  h1.by-lines .ln-i{transform:none;animation:none}
  .process-loop.in svg{animation:none}
  .page-hero::after{animation:none;opacity:1}
  .svc-card:hover .svc-thumb{transform:none}
  .as-launch{animation:none}
  .btn:hover .ico{transform:none}
  .reveal .ticks li,.reveal.ticks li{opacity:1;transform:none;transition:none}
  .reveal.in .plan-tag,.sectors.in li{animation:none}
  .foot-top-link:hover,.foot-top-link:hover .foot-top-ico{transform:none}
}