/* Outfit y Figtree AUTOALOJADAS (licencia SIL Open Font License 1.1).
   No se cargan desde el CDN de Google a propósito: eso enviaria la IP de cada
   visitante a Google y la web atiende Espana, donde eso es un problema de RGPD.
   Fuentes variables: un solo archivo cubre todos los pesos de la familia. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/fonts/figtree-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: 500;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/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: 700;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/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: 800;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/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: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://alion24.pages.dev/assets/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;
}

/* ==========================================================================
   ALION24 — TOKENS
   Colores EXTRAÍDOS del logo original (no estimados): se segmentó la garra del
   JPEG, se detectó el eje del gradiente por correlación tono/posición (150°,
   r=0.977) y se muestrearon 5 paradas a lo largo de ese eje.

   Todo en HEX a propósito. Se descartó oklch() porque si el navegador no lo
   soporta la variable queda inválida, `color` HEREDA del tema de Bitrix (que
   fuerza texto oscuro) y el resultado es texto negro sobre fondo negro — justo
   lo que el dueño prohibió. Con hex eso no puede pasar en ningún navegador.

   Contrastes verificados por cálculo, no a ojo. Ver la tabla al final.
   ========================================================================== */

:root {
  /* ---------- superficies ---------------------------------------------- */
  --paper:        #000000;   /* negro de marca (el del logo) */
  --paper-2:      #0D0B10;   /* tarjetas */
  --paper-3:      #16131C;   /* tarjeta en hover, bloques de código */
  --paper-4:      #1E1926;   /* elevación máxima */
  --rule:         #2A2533;   /* bordes */
  --rule-soft:    #1B1722;

  /* ---------- tinta ------------------------------------------------------ */
  --ink:          #FBFBFB;   /* el blanco exacto del wordmark · 20.3:1 sobre negro */
  --ink-2:        #C9C4D2;   /* secundario · 12.4:1 */
  --muted:        #A8A1AE;   /* apagado · 8.4:1 sobre negro, 7.8:1 sobre paper-2 */

  /* ---------- la garra: 5 paradas reales del gradiente ------------------- */
  --claw-1:       #E4A929;   /* ámbar   · extremo abajo-izquierda */
  --claw-2:       #F0975E;   /* naranja */
  --claw-3:       #F172B9;   /* rosa */
  --claw-4:       #D560EB;   /* magenta */
  --claw-5:       #9E5DE5;   /* violeta · extremo arriba-derecha */

  /* alias semánticos (los 3 que rotan por servicio) */
  --brand-amber:   var(--claw-1);
  --brand-pink:    var(--claw-3);
  --brand-violet:  var(--claw-5);

  /* ---------- funcionales ------------------------------------------------ */
  --accent:        var(--claw-1);
  --on-accent:     #000000;  /* SIEMPRE negro puro sobre gradiente/acento: 5.15:1 en el peor tramo */
  --focus:         #FFC658;  /* anillo de foco · 12.1:1 sobre negro */
  --ok:            #4ADE93;
  --warn:          #FFB84D;
  --danger:        #FF6B6B;

  /* ---------- gradientes ------------------------------------------------- */
  /* 150° = el eje real medido en el logo (ámbar abajo-izq → violeta arriba-der) */
  --grad-claw: linear-gradient(60deg,
      var(--claw-1) 0%, var(--claw-2) 25%, var(--claw-3) 50%,
      var(--claw-4) 75%, var(--claw-5) 100%);
  --grad-claw-soft: linear-gradient(60deg,
      #E4A92926 0%, #F172B926 50%, #9E5DE526 100%);
  --grad-line: linear-gradient(90deg,
      transparent, var(--claw-3) 35%, var(--claw-5) 70%, transparent);

  /* ---------- halos (sobre negro las sombras grises no existen) ---------- */
  --halo-amber:   0 14px 44px -16px #E4A92999;
  --halo-pink:    0 14px 44px -16px #F172B999;
  --halo-violet:  0 14px 44px -16px #9E5DE599;
  --shadow-card:  0 12px 34px -14px #000000CC;
  --shadow-pop:   0 24px 70px -20px #000000E6;

  /* ---------- tipografía -------------------------------------------------- */
  --font-display: "Outfit", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  clamp(1.95rem, 1.2rem + 2.7vw, 3.1rem);
  --t-hero: clamp(2.5rem, 1.3rem + 5.2vw, 5.4rem);

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.62;
  --track-tight: -0.025em;
  --measure: 62ch;

  /* ---------- espaciado (escala 4pt) ------------------------------------- */
  --s-2xs: .25rem;  --s-xs: .5rem;   --s-sm: .75rem;  --s-md: 1rem;
  --s-lg: 1.5rem;   --s-xl: 2.5rem;  --s-2xl: 4rem;   --s-3xl: 6.5rem;
  --s-4xl: 9rem;

  /* ---------- radios ------------------------------------------------------ */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* ---------- movimiento --------------------------------------------------- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 160ms; --d-med: 320ms; --d-slow: 620ms;

  /* ---------- layout ------------------------------------------------------ */
  --wrap: 76rem;
  --wrap-narrow: 54rem;
  --nav-h: 72px;
}

/* Nadie se marea por nuestra culpa. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   CONTRASTE VERIFICADO (WCAG 2.1) — calculado, no estimado.
   Piso exigido: AA (4.5:1 texto normal · 3:1 texto grande y componentes).

     ink      #FBFBFB / paper #000000 ......... 20.29:1   AAA
     ink      #FBFBFB / paper-2 #0D0B10 ....... 19.02:1   AAA
     ink-2    #C9C4D2 / paper ................. 12.43:1   AAA
     muted    #A8A1AE / paper ................. 8.41:1    AA
     muted    #A8A1AE / paper-2 ............... 7.88:1    AA
     focus    #FFC658 / paper ................. 12.13:1   AA (mínimo 3:1)

   La garra como TEXTO o TRAZO sobre negro:
     claw-1   #E4A929 ......................... 10.01:1   AA
     claw-2   #F0975E ......................... 9.29:1    AA
     claw-3   #F172B9 ......................... 7.85:1    AA
     claw-4   #D560EB ......................... 6.70:1    AA
     claw-5   #9E5DE5 ......................... 5.15:1    AA

   Texto NEGRO PURO sobre el gradiente (botón primario), peor tramo:
     #000000 / claw-5 #9E5DE5 ................. 5.15:1    AA  <- el caso crítico

   Por eso --on-accent es #000000 y no un "casi negro": con #0A090C el peor
   tramo cae a 4.38:1 y FALLA. Se midió, no se supuso.

   Blanco sobre el gradiente daría 2.01:1 en el ámbar: PROHIBIDO.
   ========================================================================== */

/* ==========================================================================
   ALION24 — HOJA PRINCIPAL
   Todo va scopeado bajo #a24 para no pelearse con el tema de Bitrix.
   Sin frameworks, sin dependencias. Un solo archivo.
   ========================================================================== */

/* ---------- reset acotado -------------------------------------------------- */
#a24 *, #a24 *::before, #a24 *::after { box-sizing: border-box; }
#a24 { margin: 0; }
#a24 img, #a24 svg, #a24 video { display: block; max-width: 100%; }
#a24 img { height: auto; }
#a24 button, #a24 input, #a24 textarea, #a24 select { font: inherit; color: inherit; }
#a24 ul, #a24 ol { list-style: none; margin: 0; padding: 0; }

/* ---------- base ----------------------------------------------------------- */
#a24 {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}

#a24 h1, #a24 h2, #a24 h3, #a24 h4, #a24 h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--track-tight);
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
#a24 p { margin: 0; text-wrap: pretty; }
#a24 a { color: inherit; text-decoration: none; }

/* Foco visible SIEMPRE. Nunca outline:none sin reemplazo. */
#a24 :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenido (teclado y lectores de pantalla) */
#a24 .skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--claw-1); color: #000; padding: .8rem 1.3rem;
  border-radius: 0 0 var(--r-md) 0; font-weight: 700;
}
#a24 .skip:focus { left: 0; }

/* ---------- utilidades ----------------------------------------------------- */
#a24 .wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
#a24 .wrap-n { width: min(100% - 2.4rem, var(--wrap-narrow)); margin-inline: auto; }
#a24 .sec { padding-block: var(--s-3xl); position: relative; }
#a24 .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;
}

#a24 .eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--claw-3);
}
#a24 .eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-claw);
}

#a24 .lead {
  font-size: var(--t-md); color: var(--ink-2);
  max-width: var(--measure);
}
#a24 .muted { color: var(--muted); }

/* Texto con el gradiente de la garra.
   Va SIEMPRE en un <span> dentro del titular, nunca en el h1/h2 directo:
   el blindaje anti-tema de Bitrix aplica color !important a los headings y
   dejaría el gradiente invisible. */
#a24 .claw-text {
  background: var(--grad-claw);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent;
}
/* Failsafe: si el navegador no soporta background-clip:text, texto legible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #a24 .claw-text {
    -webkit-text-fill-color: var(--claw-2) !important;
    color: var(--claw-2); background: none;
  }
}

#a24 .h-rule {
  width: 64px; height: 3px; border-radius: 3px;
  background: var(--grad-claw); margin-top: var(--s-md);
}

/* ---------- ambiente: resplandores de fondo -------------------------------- */
#a24 .glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(90px); opacity: .5; z-index: 0;
}
#a24 .glow--amber  { background: #E4A92955; }
#a24 .glow--pink   { background: #F172B955; }
#a24 .glow--violet { background: #9E5DE555; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
#a24 .btn {
  --btn-bg: var(--grad-claw);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-base); line-height: 1;
  padding: 1rem 1.7rem;
  border: 0; border-radius: var(--r-pill);
  cursor: pointer; position: relative; overflow: hidden;
  text-align: center;
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-med) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
  will-change: transform;
}

/* Primario: gradiente de marca + texto NEGRO PURO.
   Medido: el peor tramo (violeta #9E5DE5) da 5.15:1 contra #000. Pasa AA.
   Con un "casi negro" tipo #0A090C caería a 4.38:1 y fallaría. */
#a24 .btn--primary {
  background: var(--btn-bg);
  color: var(--on-accent);
  box-shadow: var(--halo-pink), inset 0 1px 0 #FFFFFF66, inset 0 -2px 0 #00000033;
}
#a24 .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--halo-violet), inset 0 1px 0 #FFFFFF80; }
#a24 .btn--primary:active { transform: translateY(0); box-shadow: inset 0 2px 6px #00000059; }

/* Barrido de brillo — decorativo, se apaga con reduced-motion */
#a24 .btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, #FFFFFF59 48%, transparent 58%);
  transform: translateX(-130%);
  transition: transform var(--d-slow) var(--ease-out);
}
#a24 .btn--primary:hover::after { transform: translateX(130%); }

#a24 .btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
}
#a24 .btn--ghost:hover {
  border-color: var(--claw-3); color: var(--ink);
  background: #F172B914; transform: translateY(-2px);
}

#a24 .btn--wa { background: var(--grad-claw); color: var(--on-accent); }

#a24 .btn--sm { padding: .68rem 1.15rem; font-size: var(--t-sm); }
#a24 .btn--lg { padding: 1.15rem 2.1rem; font-size: var(--t-md); }
#a24 .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

#a24 .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

/* Enlace con flecha que se desplaza */
#a24 .link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--claw-2);
  border-bottom: 1px solid transparent;
  transition: gap var(--d-fast) var(--ease-out), border-color var(--d-fast);
}
#a24 .link-arrow:hover { gap: .8rem; border-bottom-color: var(--claw-2); }

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
#a24 .nav-outer {
  position: sticky; top: 0; z-index: 100;
  padding: var(--s-sm) 0 .55rem;
  transition: background var(--d-med), backdrop-filter var(--d-med), border-color var(--d-med);
  border-bottom: 1px solid transparent;
}
#a24 .nav-outer.is-stuck {
  background: #000000E6;
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--rule-soft);
}
#a24 .nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md);
}
#a24 .brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
#a24 .brand__claw { height: 38px; width: auto; }
#a24 .brand__word { height: 21px; width: auto; }

/* ---- FRANJA DE MARCA (sello · Alion24 · sello), arriba del menú --------------
   Con el scroll la franja se pliega y queda solo la barra del menú con la marca
   compacta: así el sticky no se come media pantalla. */
#a24 .brandbar {
  /* Proporción de la referencia (es24): el NOMBRE es el gigante y los sellos van
     chicos y PEGADOS a él, no lejos en las esquinas. Por eso auto·auto·auto centrado
     con gap corto, en vez de 1fr·auto·1fr que los mandaba a los bordes. */
  display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center;
  gap: 2.2rem; padding: .4rem 0 .8rem;
  transform-origin: top center;
  transition: opacity .2s ease, transform .28s ease;
}
/* PLEGADO EN DOS TIEMPOS, para que no haya lazo Y la barra sticky quede chica:
   1) La franja se DESVANECE y sube (transform/opacity, .25 s): no toca el layout.
   2) Recién cuando terminó, se le quita el sitio de un solo golpe (display:none con
      retraso vía visibility+max-height sin transición): el salto de altura ocurre en
      UN frame, no en 300 frames. Antes se encogía animada 130 px durante 300 ms y
      cada píxel movía scrollY, que re-disparaba el scroll a mitad de camino y
      cruzaba los umbrales — «se abre y se cierra a cada rato si bajo un poquito».
   Un salto seco de ~130 px lo absorbe la histéresis del JS (pliega a 90 → salto →
   queda muy por encima de 30, no se despliega). */
#a24 .nav-outer.is-stuck .brandbar {
  opacity: 0; transform: translateY(-14px) scale(.96);
  pointer-events: none;
  /* max-height sin transición: se aplica de golpe, tras el desvanecido (.26 s) */
  max-height: 0; overflow: hidden; padding: 0; margin: 0;
  transition: opacity .2s ease, transform .26s ease, max-height 0s linear .26s, padding 0s linear .26s;
}
#a24 .brandbar { max-height: 200px; }
/* La marca compacta va SIEMPRE a la izquierda de la barra (referencia del dueño:
   garra + Alion24 · enlaces · idioma), plegada o no la franja de sellos. */
#a24 .brand--mini { opacity: 1; }

#a24 .brand--hero { justify-self: center; gap: 1rem; }
#a24 .brand__txt { display: flex; flex-direction: column; gap: .35rem; }
#a24 .brand__word--hero { height: 64px; width: auto; }
#a24 .brand__tag {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* La garra en 3D: dos copias apiladas. La de atrás, oscura y desplazada, hace de
   grosor; la de adelante lleva el color. El conjunto gira sobre su eje vertical con
   perspectiva y respira luz con el gradiente de marca. */
#a24 .brand__claw3d {
  position: relative; width: 100px; height: 100px; flex-shrink: 0;
  perspective: 420px;
}
#a24 .brand__claw3d .brand__claw {
  position: absolute; inset: 0; width: 100px; height: 100px;
  transform-style: preserve-3d;
  animation: clawGira 9s ease-in-out infinite;
}
#a24 .brand__claw--sombra {
  filter: brightness(.22) saturate(.6);
  transform: translateZ(-6px) translate(3px, 3px);
  animation-name: clawGiraSombra;
}
#a24 .brand__claw--frente {
  filter: drop-shadow(0 6px 14px #F172B966);
  animation-name: clawGira, clawAura;
  animation-duration: 9s, 6s;
}
@keyframes clawGira {
  0%, 100% { transform: rotateY(-22deg) rotateX(6deg); }
  50%      { transform: rotateY(22deg)  rotateX(-6deg); }
}
@keyframes clawGiraSombra {
  0%, 100% { transform: translateZ(-6px) translate(4px, 4px) rotateY(-22deg) rotateX(6deg); }
  50%      { transform: translateZ(-6px) translate(-4px, 4px) rotateY(22deg) rotateX(-6deg); }
}
@keyframes clawAura {
  0%, 100% { filter: drop-shadow(0 6px 14px #E4A92980); }
  33%      { filter: drop-shadow(0 6px 16px #F172B999); }
  66%      { filter: drop-shadow(0 6px 15px #9E5DE599); }
}

/* Los SELLOS. Marco con las esquinas en gradiente de marca (evoca un sello sin
   copiar el de Bitrix), texto en Outfit. */
#a24 .seal {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  padding: .55rem 1.1rem .5rem; min-width: 150px;
  font-family: var(--font-display); text-align: center; line-height: 1.05;
  color: var(--ink);
}
#a24 .seal--gold { justify-self: end; }
#a24 .seal--trainer { justify-self: start; }
/* esquinas: dos pseudo-elementos con bordes en L, teñidos con el gradiente */
#a24 .seal::before, #a24 .seal::after {
  content: ""; position: absolute; width: 22px; height: 100%; top: 0;
  border: 2px solid transparent;
  border-image: var(--grad-claw) 1;
}
#a24 .seal::before { left: 0;  border-right: 0; }
#a24 .seal::after  { right: 0; border-left: 0; }
/* Misma jerarquía que el sello original: la MARCA arriba en negrita (Alaio),
   la línea grande en dorado (OFFICIAL GOLD / CERTIFIED TRAINER) y «partner» en
   itálica abajo. Marco en L a los costados, como el original. */
#a24 .seal__l1 { font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
#a24 .seal__l2 {
  font-size: 19px; font-weight: 800; letter-spacing: .03em; line-height: 1; margin: .1rem 0 .05rem;
  text-transform: uppercase; color: var(--claw-1);
}
#a24 .seal__by { font-size: 13px; font-weight: 500; color: var(--ink-2); font-style: italic; }
/* Doble línea si el texto grande es largo (CERTIFIED TRAINER): que quiebre bien */
#a24 .seal__l2 { max-width: 130px; white-space: normal; }
#a24 .seal { min-width: 172px; }
#a24 .seal::before, #a24 .seal::after { border-color: var(--claw-1); border-image: none; }

/* ---- VERSIÓN 2 del sello: PLACA DORADA de Higgsfield con el texto GRABADO encima.
   Se activa con .brandbar--3d en la franja. Una sola imagen (5 KB) para los dos
   sellos: la placa es genérica y vacía; el texto (traducible, nítido) va arriba,
   oscuro sobre el oro y con un relieve claro debajo, como grabado de verdad. La
   placa mide 720x362 (≈2:1); el sello se fuerza a esa proporción para que el
   texto caiga siempre dentro del área plana, entre los tornillos. */
#a24 .brandbar--3d .seal {
  /* 140 px, no 200: las placas competían con el nombre. Alion24 tiene que
     sobresalir; los sellos acompañan. */
  min-width: 0; width: 140px; aspect-ratio: 720 / 362;
  padding: 0 16px; justify-content: center;
  background: url("https://alion24.pages.dev/assets/img/sello-placa.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px #00000099);
  border-radius: 6px;
}
#a24 .brandbar--3d .seal::before, #a24 .brandbar--3d .seal::after { display: none; }
/* Grabado: tinta oscura + filo claro 1px abajo (luz que pega en el borde del surco). */
#a24 .brandbar--3d .seal__l1 { color: #2A1E08; font-size: 10px; text-shadow: 0 1px 0 #FFE9B0AA; }
#a24 .brandbar--3d .seal__l2 { color: #140E03; font-size: 12px; font-weight: 900; letter-spacing: .02em; max-width: 110px; line-height: 1.05; text-shadow: 0 1px 0 #FFE9B0AA; }
#a24 .brandbar--3d .seal__by { color: #3A2A0C; font-size: 9px; text-shadow: 0 1px 0 #FFE9B0AA; }
@media (max-width: 900px) { #a24 .brandbar--3d .seal { width: 100%; max-width: 170px; padding: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  #a24 .brand__claw3d .brand__claw { animation: none; }
}
@media (max-width: 900px) {
  /* En móvil no hay lugar para tres columnas: se apila marca arriba y sellos abajo,
     más chicos, y la franja se pliega igual con el scroll. */
  /* minmax(0,1fr) y no 1fr: con 1fr a secas la columna no puede achicarse por debajo
     del contenido y el sello derecho se salía de la pantalla. */
  #a24 .brandbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem var(--s-sm); max-height: 200px; }
  /* Orden en móvil: la MARCA arriba a todo el ancho, los dos sellos DEBAJO uno al
     lado del otro. Sin `order`, el DOM (sello, marca, sello) los apilaba con la
     marca en el medio. */
  #a24 .brand--hero { grid-column: 1 / -1; grid-row: 1; justify-self: center; gap: .6rem; }
  #a24 .seal { display: flex; min-width: 0 !important; width: 100%; box-sizing: border-box; overflow: hidden; }
  #a24 .seal--gold, #a24 .seal--trainer { grid-row: 2; justify-self: stretch; padding: .4rem .5rem .35rem; }
  #a24 .seal__l1, #a24 .seal__l2, #a24 .seal__by { max-width: 100%; white-space: nowrap; }
  #a24 .seal__l1 { font-size: 9px; }
  #a24 .seal__l2 { font-size: 15px; }
  #a24 .seal__by { font-size: 9px; }
  #a24 .brand__word--hero { height: 28px; }
  /* El tagline se cortaba («…AUTOMATIZACIÓN DE EM»): en móvil se deja envolver y
     se centra bajo el wordmark. */
  #a24 .brand__txt { align-items: center; text-align: center; }
  #a24 .brand__tag { font-size: 9px; letter-spacing: .1em; white-space: normal; max-width: 220px; }
  #a24 .brand__claw3d, #a24 .brand__claw3d .brand__claw { width: 44px; height: 44px; }
}

#a24 .nav__links { display: flex; align-items: center; gap: .2rem; }
/* MENÚ: la barra sobria de siempre — fondo negro liso, marca a la izquierda, los
   enlaces como botones sencillos. Se probó una barra de color tipo es24 (caja violeta,
   mayúsculas, línea de gradiente) y el dueño la descartó: «usá los mismos botones».
   La franja de sellos va ENCIMA de esta barra; la barra en sí no cambia. */
#a24 .nav__links { flex-wrap: nowrap; min-width: 0; }
#a24 .nav__links a {
  padding: .55rem .85rem; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: color var(--d-fast), background var(--d-fast);
}
#a24 .nav__links a:hover { color: var(--ink); background: #FFFFFF0F; }
#a24 .nav__links a[aria-current="page"] { color: var(--claw-3); }

#a24 .nav__end { display: flex; align-items: center; gap: .5rem; }

/* ---- selector de idioma ----
   Son enlaces a URLs reales, no un cambio de texto por JavaScript: cada idioma
   tiene su propia página para que los buscadores y los asistentes de IA la vean. */
#a24 .lang {
  display: flex; align-items: center; gap: .12rem;
  padding: .18rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--paper-2);
}
#a24 .lang__cur, #a24 .lang a {
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  letter-spacing: .05em; line-height: 1;
  padding: .38rem .5rem; border-radius: var(--r-pill);
}
#a24 .lang__cur { background: var(--grad-claw); color: var(--on-accent); }
#a24 .lang a { color: var(--muted); transition: color var(--d-fast), background var(--d-fast); }
#a24 .lang a:hover { color: var(--ink); background: #FFFFFF14; }

#a24 .lang--mob { display: none; }
@media (max-width: 860px) {
  #a24 .nav__end .lang { display: none; }
  #a24 .lang--mob {
    display: flex; gap: .5rem; margin-top: var(--s-lg);
    border: 0; background: none; padding: 0;
  }
  #a24 .lang--mob a {
    flex: 1; text-align: center; font-size: var(--t-sm); padding: .8rem .5rem;
    border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2);
    color: var(--ink-2);
  }
}

#a24 .burger {
  display: none; background: transparent; border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: .55rem .65rem; cursor: pointer;
}
#a24 .burger span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform var(--d-fast), opacity var(--d-fast);
}
#a24 .burger span + span { margin-top: 5px; }
#a24 .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#a24 .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#a24 .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#a24 .mobile-menu {
  /* --nav-real la mide el JS: la cabecera ya no tiene altura fija (la franja de
     marca se pliega con el scroll). Con --nav-h fijo el menú quedaba tapado. */
  display: none; position: fixed; inset: var(--nav-real, var(--nav-h)) 0 0; z-index: 99;
  background: #000000F5; backdrop-filter: blur(20px);
  padding: var(--s-xl) var(--s-lg); overflow-y: auto;
}
#a24 .mobile-menu.is-open { display: block; }
#a24 .mobile-menu a {
  display: block; padding: var(--s-md) 0; font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 600;
  border-bottom: 1px solid var(--rule-soft);
}

/* Barra fija de WhatsApp en móvil — el CTA nunca se pierde de vista */
#a24 .sticky-cta { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
#a24 .hero {
  /* Arriba va apretado (s-lg, no s-3xl): la cabecera ya trae la franja de marca y
     con el padding grande quedaba un HUECO enorme entre el menú y el título. */
  position: relative; padding-block: var(--s-lg) var(--s-3xl);
  overflow: clip;
}
#a24 .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 72% 18%;
  opacity: .34;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 92%);
}
/* Velo oscuro justo detrás de la red neuronal: sin esto las líneas finas y las
   etiquetas de los nodos se pierden contra las zarpadas de luz del fondo. */
#a24 .hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(46% 52% at 74% 46%, #000000E0 0%, #000000A6 42%, transparent 72%),
    linear-gradient(100deg, #000 18%, #000000B3 42%, transparent 74%);
}
#a24 .hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s-2xl); align-items: center;
}
#a24 .hero h1 {
  font-size: var(--t-hero); font-weight: 800;
  line-height: var(--lh-tight);
  margin-block: var(--s-md) var(--s-lg);
}
#a24 .hero .lead { font-size: var(--t-md); margin-bottom: var(--s-xl); }
#a24 .hero .btn-row { margin-bottom: var(--s-lg); }

#a24 .hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md);
  font-size: var(--t-sm); color: var(--muted);
}
#a24 .hero__trust strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   RED NEURONAL — el núcleo es la garra, los 7 nodos son los 7 servicios
   El <svg> lo inyecta el JS (el sanitizer de Bitrix borra SVG inline).
   ========================================================================== */
#a24 .orb {
  position: relative; width: min(100%, 460px); margin-inline: auto;
  aspect-ratio: 1 / 1;   /* reserva el espacio: la inyección no mueve el layout (CLS) */
}
/* El video 3D es el cuerpo del orbe. La máscara radial lo corta en forma de orbe con
   el borde difuminado: sin ella se ve el rectángulo del video y arruina el efecto.
   `screen` hace desaparecer el negro del video y deja solo los filamentos de luz,
   que es lo que permite que las líneas y las etiquetas se sigan leyendo encima. */
#a24 .orb__vid {
  position: absolute; left: -8%; top: -8%; width: 116%; height: 116%;
  object-fit: cover; z-index: 0;
  /* Opacidad .62 y un desenfoque mínimo: las esferas del video son MÁS GRANDES que
     los nodos clicables, y a plena nitidez competían — alguien podría intentar
     clickear una esfera del video. Desenfocado apenas, queda claro qué está atrás
     (el cuerpo del orbe) y qué adelante (los 7 botones, nítidos). */
  /* .34 y blur 3px: ahora las esferas de los SERVICIOS son las protagonistas de la
     red. Si el video queda nítido y opaco aparecen dos juegos de esferas del mismo
     tamaño y vuelve el problema de «dos redes». Así queda como campo de luz. */
  opacity: .34; filter: blur(3px);
  mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
}
@media (prefers-reduced-motion: reduce) { #a24 .orb__vid { display: none; } }

#a24 .orb__net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
#a24 .orb__net line { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Bajaron de 4D (30%) a 1F/17 (~12%/9%) porque el video 3D ya trae la malla: con la
   opacidad de antes se veían DOS redes superpuestas. Quedan lo justo para que se
   entienda que los nodos están conectados entre sí.
   Los radios (.nn-spoke) NO se tocan: son los que unen la garra con cada servicio,
   y eso es lo único que el video no puede decir. */
/* Lenguaje de circuito, no de telaraña: trazos FINOS y precisos en vez de gruesos y
   apagados. La cuerda va punteada y regular, que es lo que lo hace leer como esquema
   técnico; el anillo exterior va continuo para que la figura se cierre. */
/* OJO con el grosor: `.orb__net line` lleva `vector-effect: non-scaling-stroke`, así
   que estos valores son PÍXELES DE PANTALLA, no unidades del viewBox. A .75 quedaban
   por debajo del píxel y directamente no se veían. */
/* Anillo y cuerdas: ahora también son ONDAS de fuego (paths), más finas y tenues que
   las del núcleo. Ya no son `line`, así que estos grosores están en unidades del
   viewBox, no en píxeles. Sin punteado: el fuego no se puntea. */
#a24 .nn-web   { stroke: url(#nnFuego); stroke-width: .55; opacity: .78; filter: url(#nnGlow); }
/* ONDAS DE FUEGO núcleo → servicio (reemplazan a los radios rectos punteados).
   Tres capas por onda, todas sobre el MISMO path:
     · halo  — gruesa y difusa, es el resplandor
     · onda  — el hilo brillante, con el gradiente radial de fuego (defs del SVG)
     · pulso — un tramo corto de la propia onda que la recorre: la llama que viaja
   El gradiente y el filtro de brillo viven en <defs> del SVG (nnFuego / nnGlow).
   Los paths NO llevan non-scaling-stroke (solo `line` lo tiene), así que estos
   grosores están en unidades del viewBox (0-100), no en píxeles. */
#a24 .orb__net path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#a24 .nn-onda-halo {
  stroke: url(#nnFuego); stroke-width: 1.7; opacity: .28;
  filter: url(#nnGlow);
}
#a24 .nn-onda {
  stroke: url(#nnFuego); stroke-width: .55; opacity: .95;
  filter: url(#nnGlow);
}
/* El pulso: dasharray con un hueco mayor que cualquier largo posible de la onda,
   así solo se ve UNA llama por vez. Se anima el offset para que recorra el trazo
   del núcleo hacia el nodo. `--d` desfasa cada servicio. */
#a24 .nn-onda-pulso {
  stroke: #FFF3D6; stroke-width: 1.05; opacity: .95;
  stroke-dasharray: 3.2 200;
  animation: nnLlama 2.6s cubic-bezier(.4, 0, .6, 1) infinite;
  animation-delay: var(--d, 0s);
  filter: url(#nnGlow);
}
@keyframes nnLlama {
  from { stroke-dashoffset: 40; }
  to   { stroke-dashoffset: -30; }
}
/* La onda ENTERA respira: la amplitud la mueve el JS cuando el orbe gira; acá solo
   late suave la opacidad del hilo, para que sin JS también se vea viva. */
#a24 .nn-onda { animation: nnRespira 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes nnRespira { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #a24 .nn-onda-pulso { display: none; }
  #a24 .nn-onda { animation: none; }
}


/* Núcleo: la garra */
/* La garra flota y además respira luz: el aura recorre las tres paradas reales del
   gradiente de marca (ámbar → rosa → violeta). Son dos animaciones sobre propiedades
   distintas —transform y filter—, así que conviven sin pisarse. */
#a24 .orb__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 27%; z-index: 3;
  animation: coreFloat 7s ease-in-out infinite, coreAura 9s ease-in-out infinite;
}
@keyframes coreFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -52%) scale(1.035); }
}
@keyframes coreAura {
  0%, 100% { filter: drop-shadow(0 0 22px #E4A92973) drop-shadow(0 0 48px #F172B933); }
  33%      { filter: drop-shadow(0 0 30px #F172B98C) drop-shadow(0 0 58px #D560EB3D); }
  66%      { filter: drop-shadow(0 0 26px #9E5DE594) drop-shadow(0 0 54px #9E5DE540); }
}
@media (prefers-reduced-motion: reduce) {
  #a24 .orb__core { animation: none; filter: drop-shadow(0 0 26px #F172B966); }
}

/* Los 7 nodos son enlaces reales, no adorno */
#a24 .orb__item {
  position: absolute; z-index: 4;
  left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 96px; text-align: center;
}
/* Cada servicio ES una esfera de la red, no un botón plano encima del video.
   Se construye con gradientes en vez de una imagen generada porque así CADA esfera
   es un enlace de verdad, se tiñe con el color de su servicio, escala nítida a
   cualquier pantalla y pesa cero. */
#a24 .orb__dot {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    /* brillo especular arriba a la izquierda: es lo que la lee como esfera */
    radial-gradient(circle at 33% 27%, #FFFFFF5C 0%, transparent 44%),
    /* corona de energía caliente: ámbar encendido en el ANILLO, no en el centro.
       En el centro va el icono, y sobre un núcleo blanco no se leería. */
    radial-gradient(circle at 50% 52%,
      color-mix(in srgb, var(--c, var(--claw-1)) 30%, #000) 0%,
      color-mix(in srgb, var(--c, var(--claw-1)) 34%, #000) 38%,
      color-mix(in srgb, var(--c, var(--claw-1)) 86%, #FFAE2E) 62%,
      color-mix(in srgb, var(--c, var(--claw-1)) 40%, #000) 84%,
      #0A0810 100%);
  border: 1px solid color-mix(in srgb, var(--c, var(--claw-1)) 60%, #FFAE2E);
  box-shadow:
    0 0 26px -2px color-mix(in srgb, var(--c, var(--claw-1)) 60%, transparent),
    0 0 46px -6px #FF9E1C4D,              /* el resplandor naranja de fondo */
    inset 0 -9px 20px -7px #000000D9,
    inset 0 7px 16px -7px #FFFFFF3D;
  transition: transform var(--d-med) var(--ease-back), box-shadow var(--d-med);
}
/* La radiación que gira: una cuña de energía naranja recorriendo el borde. Va
   enmascarada a un anillo para que no invada el centro, donde está el icono.
   `--d` la desfasa por nodo: las 7 girando en fase se ven como un engranaje. */
#a24 .orb__dot::before {
  content: ""; position: absolute; inset: -7%;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--c, var(--claw-1)) 55%, #FF9E1C) 34deg,
    #FFD79A 66deg,
    color-mix(in srgb, var(--c, var(--claw-1)) 55%, #FF9E1C) 98deg,
    transparent 148deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 54%, #000 66%, #000 86%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 54%, #000 66%, #000 86%, transparent 100%);
  opacity: .9;
  animation: dotRadia 6s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes dotRadia { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #a24 .orb__dot::before { animation: none; } }
/* Halo que late. `--d` lo escalona por nodo: al unísono parece un cartel de neón. */
#a24 .orb__dot::after {
  content: ""; position: absolute; inset: -30%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c, var(--claw-1)) 32%, transparent) 0%, transparent 66%);
  animation: dotLate 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes dotLate {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.14); }
}
/* El icono va casi blanco: sobre una esfera del color del servicio, un icono del
   mismo color no se ve. */
#a24 .orb__dot svg {
  width: 26px; height: 26px; position: relative; z-index: 1;
  color: #FFFFFF; filter: drop-shadow(0 1px 3px #000000B3);
}
@media (prefers-reduced-motion: reduce) { #a24 .orb__dot::after { animation: none; } }
#a24 .orb__item:hover .orb__dot,
#a24 .orb__item:focus-visible .orb__dot {
  transform: scale(1.16);
  border-color: var(--c, var(--claw-3));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--claw-3)) 18%, transparent);
}
#a24 .orb__label {
  font-size: 10.5px; font-weight: 700; line-height: 1.25;
  color: var(--ink-2); letter-spacing: .01em;
  /* la etiqueta flota sobre el fondo: se le da su propia base oscura */
  background: #000000B8; border-radius: var(--r-sm);
  padding: 2px 6px; backdrop-filter: blur(3px);
  transition: color var(--d-fast), background var(--d-fast);
}
#a24 .orb__item:hover .orb__label { color: var(--ink); background: #000000E6; }

/* --- Orbe en 360° -------------------------------------------------------
   Lo enciende el JS con .is-3d: los 7 nodos pasan a recorrer un anillo en
   perspectiva, gira solo, y se puede arrastrar. Sin JS queda EXACTAMENTE el
   círculo plano de antes, con sus 7 enlaces intactos — el contenido nunca
   depende del script.
   `touch-action: pan-y` es lo que permite que en el celular el arrastre
   horizontal gire el orbe y el vertical siga scroleando la página. */
#a24 .orb.is-3d { cursor: grab; touch-action: pan-y; }
#a24 .orb.is-3d.is-drag { cursor: grabbing; }
/* La garra se pone en el MEDIO de la pila de profundidad (0-20) para que los nodos
   del fondo pasen POR DETRÁS de ella y los del frente por delante. Sin esto los 7
   nodos flotan siempre encima y se ve un anillo que gira, no un objeto 3D.
   Solo dentro de .is-3d: sin JS `--z` no existe y todo volvería a quedar detrás. */
#a24 .orb.is-3d .orb__core { z-index: 10; }
#a24 .orb.is-3d .orb__item {
  transform: translate(-50%, -50%) scale(var(--s, 1));
  opacity: var(--o, 1);
  z-index: var(--z, 20);
}
/* El nodo que está adelante manda: su etiqueta se lee entera. */
#a24 .orb.is-3d .orb__item[data-front] .orb__label { color: var(--ink); background: #000000E6; }
/* Al arrastrar no debe quedar texto seleccionado a media rotación. */
#a24 .orb.is-drag, #a24 .orb.is-drag * { user-select: none; }

/* --- El robot que vive sobre la garra ------------------------------------
   `pointer-events: none` es obligatorio: el robot se para ENCIMA de los nodos,
   y sin esto se comería el clic del servicio que está saludando. */
#a24 .orbot {
  position: absolute; z-index: 21; pointer-events: none;
  left: calc(50% + var(--bx, 0) * 1%);
  top: calc(50% + var(--by, -19) * 1%);
  transform: translate(-50%, -100%);
  width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
#a24 .orbot__cuerpo {
  position: relative; display: block; width: 100%;
  animation: orbotFlota 4.5s ease-in-out infinite;
}
#a24 .orbot__img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 20px #000000B3);
  transition: opacity .18s ease;
}
/* Las dos poses se apilan alineadas por los PIES (`bottom: 0`): tienen alturas
   distintas —la sentada saca las piernas— y alineadas arriba el robot pegaba un
   salto de tamaño al cambiar de pose. */
#a24 .orbot__img--saluda {
  position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0;
}
/* La pose de saludo entra con `.is-saluda`, que el JS pone al TERMINAR el salto:
   el trampolín cierra saludando, no arranca saludando. El globo va aparte
   (`.is-hi`) y sale enseguida, para que el clic tenga respuesta inmediata. */
#a24 .orbot.is-saluda .orbot__img--quieto { opacity: 0; }
#a24 .orbot.is-saluda .orbot__img--saluda { opacity: 1; }

/* La garra impresa en el cuerpo. Va en el pecho y no en la cara: a 86 px de robot,
   sobre la cara mediría 6 px y sería una mancha — y taparía los ojos, que son lo
   que le da carácter. En el pecho mide ~20 px y se lee. */
#a24 .orbot__marca {
  position: absolute; left: 50%; top: 63%;
  width: 26%; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px #00000099);
  opacity: .95; pointer-events: none;
}
/* La amplitud del flotar también es variable: sentado en la barra, un vaivén de 5 px
   lo sacaba del borde de la pantalla en el pico — y en un robot chico y apoyado, un
   bamboleo grande se ve mal igual. */
@keyframes orbotFlota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--flota, 5px) * -1)); }
}
/* Salto de trampolín: se hunde en la lona, despega estirado, flota en la cumbre,
   aterriza aplastado, pega un rebote chico y se asienta. Las proporciones importan:
   el aplastado y el estirado son lo que hace que se lea como elástico y no como una
   imagen que sube y baja. */
/* Pirueta completa: 360° y no 180°. Con 180 aterrizaría DE CABEZA — el salto mortal
   que cae parado da la vuelta entera. Gira hacia el lado del servicio: el JS elige
   `--der` o `--izq` según de qué lado esté el nodo, que es lo que lo hace ver
   intencional y no un giro al azar. */
#a24 .orbot.is-hop .orbot__cuerpo { animation: orbotPiruetaIzq 1.05s ease-in-out; }
#a24 .orbot.is-hop--der .orbot__cuerpo { animation-name: orbotPiruetaDer; }

/* La altura del salto es una variable porque en la barra de navegación NO hay 82 px
   arriba: el robot salía volando fuera de la pantalla. En el orbe salta alto; sentado
   en el botón, la misma pirueta pero corta. */
#a24 .orbot { --salto: 82px; --flota: 5px; }
#a24 .orbot.is-fija { --salto: 22px; --flota: 2px; }

@keyframes orbotPiruetaIzq {
  0%   { transform: translateY(0)                              scale(1, 1)      rotate(0deg); }
  10%  { transform: translateY(calc(var(--salto) * .11))       scale(1.28, .70) rotate(0deg); }    /* se hunde */
  25%  { transform: translateY(calc(var(--salto) * -.68))      scale(.80, 1.26) rotate(-45deg); }  /* despega */
  40%  { transform: translateY(calc(var(--salto) * -1))        scale(1, 1)      rotate(-155deg); } /* cumbre */
  56%  { transform: translateY(calc(var(--salto) * -.68))      scale(1, 1)      rotate(-268deg); } /* cae girando */
  70%  { transform: translateY(calc(var(--salto) * .06))       scale(1.24, .74) rotate(-360deg); } /* aterriza */
  84%  { transform: translateY(calc(var(--salto) * -.21))      scale(.93, 1.10) rotate(-360deg); } /* rebote */
  100% { transform: translateY(0)                              scale(1, 1)      rotate(-360deg); }
}
@keyframes orbotPiruetaDer {
  0%   { transform: translateY(0)                              scale(1, 1)      rotate(0deg); }
  10%  { transform: translateY(calc(var(--salto) * .11))       scale(1.28, .70) rotate(0deg); }
  25%  { transform: translateY(calc(var(--salto) * -.68))      scale(.80, 1.26) rotate(45deg); }
  40%  { transform: translateY(calc(var(--salto) * -1))        scale(1, 1)      rotate(155deg); }
  56%  { transform: translateY(calc(var(--salto) * -.68))      scale(1, 1)      rotate(268deg); }
  70%  { transform: translateY(calc(var(--salto) * .06))       scale(1.24, .74) rotate(360deg); }
  84%  { transform: translateY(calc(var(--salto) * -.21))      scale(.93, 1.10) rotate(360deg); }
  100% { transform: translateY(0)                              scale(1, 1)      rotate(360deg); }
}

/* Esfera del núcleo: el nodo central de la red, con la garra adentro. */
#a24 .orb__nucleo {
  position: absolute; left: 50%; top: 50%;
  width: 42%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 34% 27%, #FFFFFF3D 0%, transparent 46%),
    /* mismo lenguaje que las esferas de servicio: el anillo caliente, el centro
       oscuro para que la garra se recorte encima */
    radial-gradient(circle at 50% 52%,
      #241733 0%, #2E1F42 44%, #6B3A2E 70%, #2A1B2E 86%, #06040B 100%);
  box-shadow:
    0 0 64px -8px #F172B980,
    0 0 90px -14px #FF9E1C59,
    inset 0 -16px 38px -14px #000000E6,
    inset 0 12px 30px -14px #FFFFFF2E;
  animation: nucleoLate 9s ease-in-out infinite;
}
/* La animación reemplaza el box-shadow COMPLETO, así que el resplandor naranja tiene
   que ir dentro de cada keyframe: puesto solo en la regla base, la animación lo pisaba
   y el núcleo quedaba sin energía mientras las esferas sí la tenían. */
@keyframes nucleoLate {
  0%, 100% { box-shadow: 0 0 56px -8px #E4A92973, 0 0 96px -14px #FF9E1C66, inset 0 -16px 38px -14px #000000E6, inset 0 12px 30px -14px #FFFFFF2E; }
  33%      { box-shadow: 0 0 72px -8px #F172B98C, 0 0 110px -14px #FF9E1C80, inset 0 -16px 38px -14px #000000E6, inset 0 12px 30px -14px #FFFFFF2E; }
  66%      { box-shadow: 0 0 64px -8px #9E5DE594, 0 0 100px -14px #FF9E1C59, inset 0 -16px 38px -14px #000000E6, inset 0 12px 30px -14px #FFFFFF2E; }
}
/* En 3D va justo detrás de la garra (10): los nodos del fondo pasan por atrás. */
/* La RED va por encima de la esfera del núcleo (9) y debajo de la garra (10) y de
   los botones (11-20). Sin esto, las ondas de los nodos de ADELANTE y ATRÁS del orbe
   —que en 3D quedan casi en línea con el centro y son cortas— pasaban enteras por
   DEBAJO del núcleo y no se veían: «Reportería» y «Licencias» parecían sueltos. */
#a24 .orb.is-3d .orb__nucleo { z-index: 8; }   /* núcleo abajo de la red */
#a24 .orb.is-3d .orb__net    { z-index: 9; }   /* red encima del núcleo */
/* (garra sigue en 10 y los botones en 11-20: la red queda debajo de ambos) */
@media (prefers-reduced-motion: reduce) { #a24 .orb__nucleo { animation: none; } }
#a24 .orbot__hi {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; line-height: 1;
  color: var(--on-accent); background: var(--grad-claw);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  opacity: 0; transform: translateY(7px) scale(.75);
  transition: opacity .22s ease, transform .32s var(--ease-back);
}
#a24 .orbot.is-hi .orbot__hi { opacity: 1; transform: none; }

/* Menos movimiento: el robot se queda quieto sobre la garra. Sigue apareciendo
   el saludo, que es información, no movimiento. */
/* Viaje al botón «Hablar con un experto». El botón vive en la barra pegajosa, fuera
   del orbe, así que el robot pasa a `fixed` y se posiciona en coordenadas de pantalla.
   Al llegar se achica: el botón es chico y un robot a tamaño completo lo taparía. */
/* 34 px y no 48: arriba del botón hay 26 px, y a 48 el cuerpo mide 42 — no entra
   entero por encima y quedaba sentado SOBRE la cara del botón. A 34 el cuerpo mide
   30 y se sienta en el borde de arriba, entero y sin cortarse contra la pantalla. */
/* z-index 140: la barra pegajosa está en 100 y el menú móvil en 99. El JS además
   cuelga el robot de la raíz mientras viaja, porque desde adentro de .hero__grid
   (que está en z-index 2) ningún valor alcanzaría. */
#a24 .orbot.is-fija {
  position: fixed; left: var(--fx, 50%); top: var(--fy, 0);
  z-index: 140; width: 34px;
}
/* El globo sale del flujo y se va al COSTADO. Arriba del botón hay 26 px: con el
   globo apilado encima, el robot medía 78 px y no había forma de sentarlo — el tope
   lo bajaba hasta taparlo. Al costado, lo único que cuenta para la altura es el
   cuerpo, y ahí sí entra sentado en el borde. */
#a24 .orbot.is-fija .orbot__hi {
  position: absolute; right: 100%; top: 0; margin-right: 7px;
  font-size: 10px; padding: 3px 8px;
}

@media (prefers-reduced-motion: reduce) {
  #a24 .orbot__cuerpo { animation: none; }
  #a24 .orbot.is-hop .orbot__cuerpo { animation: none; }
}
@media (max-width: 700px) { #a24 .orbot { width: 62px; } }

/* ==========================================================================
   BARRA DE CREDENCIALES
   ========================================================================== */
#a24 .creds {
  border-block: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, #FFFFFF05, transparent);
}
#a24 .creds__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--s-lg); padding-block: var(--s-xl);
}
#a24 .cred { text-align: center; }
#a24 .cred__n {
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800;
  line-height: 1; margin-bottom: .4rem;
}
#a24 .cred__l { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
#a24 .sec-head { margin-bottom: var(--s-2xl); }
#a24 .sec-head h2 { font-size: var(--t-3xl); margin-block: var(--s-sm) var(--s-md); }

#a24 .svc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: var(--s-lg);
}
#a24 .svc {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-xl) var(--s-lg) var(--s-lg);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--d-med) var(--ease-out),
              border-color var(--d-med), box-shadow var(--d-med), background var(--d-med);
}
/* Filo superior del color del servicio; en hover pasa al gradiente completo */
#a24 .svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c, var(--claw-1));
  transition: background var(--d-med);
}
#a24 .svc:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--claw-1)) 45%, var(--rule));
  background: var(--paper-3);
  box-shadow: 0 18px 46px -20px color-mix(in srgb, var(--c, var(--claw-1)) 55%, transparent);
}
#a24 .svc:hover::before { background: var(--grad-claw); }

#a24 .svc__ico {
  width: 50px; height: 50px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--s-md);
  background: color-mix(in srgb, var(--c, var(--claw-1)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--claw-1)) 30%, transparent);
  color: var(--c, var(--claw-1));
}
#a24 .svc__ico svg { width: 24px; height: 24px; }
#a24 .svc h3 { font-size: var(--t-lg); margin-bottom: .55rem; }
#a24 .svc p { color: var(--muted); font-size: var(--t-sm); flex: 1; }
#a24 .svc__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-sm); margin-top: var(--s-lg);
  padding-top: var(--s-md); border-top: 1px solid var(--rule-soft);
}
#a24 .svc__from { font-size: var(--t-xs); color: var(--muted); }
#a24 .svc__from b { display: block; color: var(--ink); font-size: var(--t-base); font-weight: 700; }

/* ==========================================================================
   CABECERA DE PÁGINA INTERNA
   ========================================================================== */
#a24 .page-hero {
  position: relative; overflow: clip;
  padding-block: var(--s-lg) var(--s-xl);   /* pegado al menú, misma razón que .hero */
  border-bottom: 1px solid var(--rule-soft);
}
/* Constelación tenue de fondo. Va detrás de todo y con un velo encima: el texto
   blanco tiene que seguir leyéndose igual de bien que sobre negro puro. */
#a24 .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(https://alion24.pages.dev/assets/img/inner.webp) center right / cover no-repeat;
  opacity: .85;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}
#a24 .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, #000 26%, #000000B3 52%, transparent 86%);
}
#a24 .page-hero > .wrap { position: relative; z-index: 2; }
#a24 .page-hero h1 {
  font-size: var(--t-3xl); margin-block: var(--s-sm) var(--s-md);
  max-width: 20ch;
}
#a24 .page-hero .lead { position: relative; z-index: 2; }
#a24 .sec--tight { padding-block: var(--s-xl); }

/* ==========================================================================
   FICHA LARGA DE SERVICIO (/servicios/)
   ========================================================================== */
#a24 .svcfull {
  position: relative; scroll-margin-top: 90px;
  padding: var(--s-xl); margin-bottom: var(--s-lg);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--d-med), background var(--d-med);
}
#a24 .svcfull::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c, var(--claw-1));
}
#a24 .svcfull:hover {
  border-color: color-mix(in srgb, var(--c, var(--claw-1)) 42%, var(--rule));
  background: var(--paper-3);
}
#a24 .svcfull__head {
  display: flex; gap: var(--s-lg); align-items: flex-start;
  padding-bottom: var(--s-lg); margin-bottom: var(--s-lg);
  border-bottom: 1px solid var(--rule-soft);
}
#a24 .svcfull__head h2 { font-size: var(--t-xl); margin-bottom: .5rem; }
#a24 .svcfull__pitch { color: var(--ink-2); max-width: 62ch; }
#a24 .svcfull__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg);
}
#a24 .svcfull__cols h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--c, var(--claw-1)); margin-bottom: .55rem;
}
#a24 .svcfull__cols p { color: var(--muted); font-size: var(--t-sm); }
#a24 .svcfull__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md);
  margin-top: var(--s-lg); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-soft);
}
#a24 .svcfull__meta { font-size: var(--t-sm); color: var(--muted); }
#a24 .svcfull__meta b {
  color: var(--ink-2); font-weight: 700; margin-right: .35rem;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
}
#a24 .svcfull__foot .btn { margin-left: auto; }

@media (max-width: 860px) {
  #a24 .svcfull { padding: var(--s-lg); }
  #a24 .svcfull__cols { grid-template-columns: 1fr; gap: var(--s-md); }
  #a24 .svcfull__head { flex-direction: column; gap: var(--s-md); }
  #a24 .svcfull__foot .btn { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   CÓMO TRABAJAMOS
   ========================================================================== */
#a24 .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); }
#a24 .step { position: relative; padding-top: var(--s-lg); }
#a24 .step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--rule);
}
#a24 .step::after {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--grad-claw); transition: width var(--d-slow) var(--ease-out);
}
#a24 .step.is-in::after { width: 100%; }
#a24 .step__n {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 800;
  color: var(--claw-3); letter-spacing: .1em; margin-bottom: .5rem;
}
#a24 .step h3 { font-size: var(--t-md); margin-bottom: .4rem; }
#a24 .step p { font-size: var(--t-sm); color: var(--muted); }
#a24 .step__t { font-size: var(--t-xs); color: var(--claw-2); margin-top: .5rem; font-weight: 600; }

/* ==========================================================================
   PAÍSES
   ========================================================================== */
#a24 .countries {
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
  margin-bottom: var(--s-2xl);
}
#a24 .country {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast),
              background var(--d-fast), color var(--d-fast);
}
#a24 .country:hover {
  transform: translateY(-3px); color: var(--ink);
  border-color: var(--claw-3); background: #F172B914;
}
/* Bandera del país, en SVG dibujado por nosotros.
   NO se usan banderas emoji: Windows no dibuja los indicadores regionales y las
   muestra como dos letras sueltas, así que en la mitad de los equipos de nuestros
   clientes el emoji se vería roto. El SVG se ve igual en todas las plataformas.
   El borde claro es necesario: sobre fondo negro, una bandera con blanco en el
   borde (Perú, Argentina, Costa Rica) se derrite contra el fondo sin él. */
#a24 .flag {
  width: 22px; height: auto; aspect-ratio: 3 / 2; flex-shrink: 0;
  border-radius: 3px; box-shadow: 0 0 0 1px #FFFFFF2E;
  display: block;
}
#a24 .cli .flag, #a24 .tel .flag { width: 20px; }

/* Insignia con el código ISO. Se conserva para los lugares donde no entra la
   bandera; la regla de arriba explica por qué nunca fue un emoji. */
#a24 .country__code {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  padding: .3rem .34rem; border-radius: 5px;
  background: var(--grad-claw); color: var(--on-accent);
  flex-shrink: 0;
}

#a24 .cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-lg); }
#a24 .case {
  padding: var(--s-lg); border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
#a24 .case__metric {
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800;
  line-height: 1; margin-bottom: .5rem;
}
#a24 .case__desc { font-size: var(--t-sm); color: var(--muted); flex: 1; }
#a24 .case__who {
  margin-top: var(--s-md); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-soft); font-size: var(--t-xs); color: var(--muted);
}
#a24 .case__who b { display: block; color: var(--ink); font-size: var(--t-sm); }

/* ==========================================================================
   INTEGRACIONES
   ========================================================================== */
#a24 .integrations { display: flex; flex-wrap: wrap; gap: var(--s-sm); justify-content: center; }
#a24 .integration {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.25rem; border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: var(--t-sm); font-weight: 600;
  transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out);
}
#a24 .integration:hover { border-color: var(--claw-4); transform: translateY(-3px); }
#a24 .integration svg { width: 19px; height: 19px; color: var(--claw-3); flex-shrink: 0; }

/* ==========================================================================
   FAQ — <details> nativo: funciona sin JS y trae el teclado gratis
   ========================================================================== */
#a24 .faq { display: grid; gap: var(--s-sm); }
#a24 .faq details {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--d-fast);
}
#a24 .faq details[open] { border-color: var(--claw-4); }
#a24 .faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s-md) var(--s-lg);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
}
#a24 .faq summary::-webkit-details-marker { display: none; }
#a24 .faq summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2px solid var(--claw-3); border-bottom: 2px solid var(--claw-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--d-med) var(--ease-out);
}
#a24 .faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
#a24 .faq .faq__a {
  padding: 0 var(--s-lg) var(--s-lg);
  color: var(--muted); font-size: var(--t-base); max-width: 66ch;
}

/* ==========================================================================
   BANDA CTA FINAL — único lugar donde el gradiente es fondo, con texto negro grande
   ========================================================================== */
#a24 .cta-band {
  background: var(--grad-claw);
  color: var(--on-accent);
  border-radius: var(--r-xl);
  padding: var(--s-2xl) var(--s-xl);
  text-align: center; position: relative; overflow: hidden;
}
#a24 .cta-band h2 {
  color: var(--on-accent); font-size: var(--t-3xl); font-weight: 800;
  max-width: 20ch; margin-inline: auto;
}
#a24 .cta-band p {
  color: #000000C7; margin-block: var(--s-md) var(--s-xl);
  font-weight: 500; max-width: 52ch; margin-inline: auto;
}
#a24 .cta-band .btn-row { justify-content: center; }
#a24 .cta-band .btn--dark {
  background: #000; color: #FBFBFB;
  box-shadow: 0 10px 30px -12px #00000080;
}
#a24 .cta-band .btn--dark:hover { transform: translateY(-2px); background: #16131C; }
#a24 .cta-band .btn--outline {
  background: transparent; color: #000; border: 2px solid #00000059; font-weight: 700;
}
#a24 .cta-band .btn--outline:hover { border-color: #000; background: #0000000F; }

/* ==========================================================================
   PLANES (/planes/)
   ========================================================================== */
#a24 .plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s-md); align-items: stretch;
}
#a24 .plan {
  display: flex; flex-direction: column; gap: var(--s-md);
  padding: var(--s-lg); border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: transform var(--d-med) var(--ease-out), border-color var(--d-med);
}
#a24 .plan:hover { transform: translateY(-5px); border-color: var(--claw-3); }
#a24 .plan--hi { border-color: var(--claw-4); box-shadow: var(--halo-violet); }
#a24 .plan__n {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800;
}
#a24 .plan__price {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700;
  color: var(--claw-2);
  padding-bottom: var(--s-md); border-bottom: 1px solid var(--rule-soft);
}
#a24 .plan__row h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--claw-3); margin-bottom: .35rem;
}
#a24 .plan__row p { font-size: var(--t-sm); color: var(--muted); }
#a24 .plan .btn { margin-top: auto; }

/* La nota de la tienda va en su propia sección pegada a las tarjetas. */
#a24 .sec--nota { padding-top: 0; }
#a24 .sec--nota .note { margin-top: 0; }
#a24 .note {
  margin-top: var(--s-lg); padding: var(--s-md) var(--s-lg);
  border-left: 3px solid var(--claw-1); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--paper-2); color: var(--muted);
  font-size: var(--t-sm); max-width: 76ch;
}

/* ==========================================================================
   /nosotros/ — la meta y el equipo
   ========================================================================== */
#a24 .goal {
  text-align: center; padding: var(--s-2xl) var(--s-lg);
  border: 1px solid var(--rule); border-radius: var(--r-xl);
  background: linear-gradient(180deg, #FFFFFF08, transparent), var(--paper-2);
}
#a24 .goal__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 1.5rem + 7vw, 6.5rem); line-height: 1;
  letter-spacing: -.04em;
}
#a24 .goal__t {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600;
  margin-top: var(--s-sm); color: var(--ink);
}
#a24 .goal__p {
  color: var(--muted); max-width: 56ch; margin: var(--s-md) auto 0;
}

#a24 .team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--s-lg);
}
#a24 .member {
  padding: var(--s-lg); border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: border-color var(--d-med), transform var(--d-med) var(--ease-out);
}
#a24 .member:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c, var(--claw-1)) 45%, var(--rule));
}
/* Se conserva por si alguna vez falta la foto de un miembro nuevo. */
#a24 .member__ini {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--s-md);
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800;
  color: var(--on-accent); background: var(--grad-claw);
}
/* Foto real del miembro. El anillo degradado hace de marco con los colores de
   marca; el fondo oscuro de la tarjeta ya viene en la propia foto. */
#a24 .member__foto {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; margin-bottom: var(--s-md);
  border: 2px solid transparent;
  background: linear-gradient(var(--paper-3), var(--paper-3)) padding-box,
              var(--grad-claw) border-box;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--c, var(--claw-1)) 45%, transparent);
}
#a24 .member h3 { font-size: var(--t-md); }
#a24 .member__r {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .11em;
  color: var(--c, var(--claw-1)); margin-block: .3rem var(--s-md); font-weight: 700;
}
#a24 .member blockquote {
  margin: 0; padding-top: var(--s-md); border-top: 1px solid var(--rule-soft);
  color: var(--muted); font-size: var(--t-sm); font-style: italic;
}

/* ==========================================================================
   DIRECTORIO DE CLIENTES filtrable (/casos/)
   ========================================================================== */
#a24 .cfils {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-lg);
}
/* Dos filas de filtro: países arriba, rubros abajo, pegadas entre sí.
   Las etiquetas de rubro van más chicas para leerse como segundo nivel. */
#a24 .cfils--paises { margin-bottom: .6rem; }
#a24 .cfils--cat .cfil { padding: .35rem .75rem; font-size: var(--t-xs); }
#a24 .cfil {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--rule);
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
#a24 .cfil b { color: var(--muted); font-weight: 700; font-size: var(--t-xs); }
#a24 .cfil:hover { border-color: var(--claw-3); color: var(--ink); }
#a24 .cfil.is-on {
  background: var(--grad-claw); color: var(--on-accent); border-color: transparent;
}
#a24 .cfil.is-on b { color: #00000099; }
#a24 .cfil.is-on .country__code { background: #00000026; color: var(--on-accent); }

#a24 .clis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  gap: .5rem;
}
#a24 .cli {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  font-size: var(--t-sm); color: var(--ink-2);
  transition: border-color var(--d-fast), background var(--d-fast);
}
#a24 .cli:hover { border-color: var(--rule); background: var(--paper-3); color: var(--ink); }
/* Logo real del socio. Pastilla BLANCA fija: los logos vienen pensados para fondo
   claro y sobre nuestro negro muchos desaparecerían; la caja fija (62×30) alinea
   la grilla aunque cada logo tenga otra proporción. object-fit los encaja sin
   deformar. La bandera queda solo como respaldo del que no tiene logo. */
#a24 .cli__logo {
  flex: none; width: 62px; height: 30px; object-fit: contain;
  background: #FFFFFF; border-radius: 6px; padding: 2px 5px;
}
/* Nombre + rubro en dos líneas. El rubro va en <small> y NO en un ::before con
   content: es contenido real (lo lee un buscador y un lector de pantalla). */
#a24 .cli__nom { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
#a24 .cli__cat {
  color: var(--muted); font-size: var(--t-xs); font-weight: 500; line-height: 1.25;
}
#a24 .cli[hidden] { display: none; }
#a24 .clis[hidden], #a24 .clis-empty[hidden] { display: none; }

/* País elegido desde la fila de arriba */
#a24 .country.is-on {
  background: var(--grad-claw); color: var(--on-accent); border-color: transparent;
}
#a24 .country.is-on .country__code { background: #00000026; color: var(--on-accent); }

/* País sin listado publicado: se dice, no se deja la pantalla vacía */
#a24 .clis-empty {
  text-align: center; padding: var(--s-2xl) var(--s-lg);
  border: 1px dashed var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2);
}
#a24 .clis-empty p {
  color: var(--muted); max-width: 54ch; margin: 0 auto var(--s-lg);
}

/* ==========================================================================
   TIENDA — con precio publicado, que es el hueco que dejan los competidores
   ========================================================================== */
#a24 .prods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--s-lg);
}
#a24 .prod {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  padding: var(--s-lg); border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: transform var(--d-med) var(--ease-out), border-color var(--d-med), box-shadow var(--d-med);
}
#a24 .prod::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c, var(--claw-1));
}
#a24 .prod:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--claw-1)) 45%, var(--rule));
  box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--c, var(--claw-1)) 60%, transparent);
}
#a24 .prod__cat {
  align-self: flex-start; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .3rem .6rem; border-radius: var(--r-sm);
  color: var(--c, var(--claw-1));
  background: color-mix(in srgb, var(--c, var(--claw-1)) 14%, transparent);
  margin-bottom: var(--s-md);
}
#a24 .prod h3 { font-size: var(--t-md); margin-bottom: .5rem; }
#a24 .prod p { color: var(--muted); font-size: var(--t-sm); flex: 1; }
#a24 .prod__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  margin-top: var(--s-lg); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-soft);
}
#a24 .prod__p {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800;
  line-height: 1.1; display: flex; flex-direction: column;
}
#a24 .prod__p small {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .15rem;
}

/* ==========================================================================
   ESTADO VACÍO — honesto: decimos que todavía no hay, no inventamos
   ========================================================================== */
#a24 .empty-state {
  text-align: center; padding: var(--s-2xl) var(--s-lg);
  border: 1px dashed var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2); margin-top: var(--s-xl);
}
#a24 .empty-state h2 { font-size: var(--t-xl); margin-bottom: var(--s-md); }
#a24 .empty-state p {
  color: var(--muted); max-width: 58ch; margin: 0 auto var(--s-lg);
}

/* ==========================================================================
   VÍAS DE CONTACTO (/contacto/)
   ========================================================================== */
#a24 .ways {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--s-lg);
}
#a24 .way {
  padding: var(--s-lg); border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: border-color var(--d-med), transform var(--d-med) var(--ease-out);
}
#a24 .way:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c, var(--claw-1)) 45%, var(--rule));
}
#a24 .way h3 { font-size: var(--t-md); margin-bottom: .4rem; }
#a24 .way p { color: var(--muted); font-size: var(--t-sm); }
#a24 .way__val {
  margin-top: var(--s-md); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-soft);
  color: var(--ink) !important; font-weight: 700;
  font-family: var(--font-display);
}
/* Directorio de teléfonos: en móvil cada uno marca directo */
#a24 .tels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-sm);
}
#a24 .tel {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out), background var(--d-fast);
}
#a24 .tel:hover {
  border-color: var(--claw-3); background: var(--paper-3); transform: translateY(-2px);
}
#a24 .tel__c { font-size: var(--t-sm); color: var(--muted); flex: 1; }
#a24 .tel__n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  color: var(--ink); white-space: nowrap;
}

/* ==========================================================================
   AGENDADOR — los horarios salen del calendario real del equipo
   ========================================================================== */
#a24 .agenda {
  margin-top: var(--s-xl); padding: var(--s-xl);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2);
}
#a24 .agenda > h2 { font-size: var(--t-xl); margin-bottom: var(--s-sm); }
#a24 .agenda__step { margin-top: var(--s-xl); }
#a24 .agenda__step h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .13em;
  color: var(--claw-3); margin-bottom: var(--s-md);
}

#a24 .agenda__dias {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr);
  gap: .5rem; overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: thin;
}
#a24 .agenda__dia {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .7rem .4rem; border-radius: var(--r-md); cursor: pointer;
  background: var(--paper-3); border: 1px solid var(--rule);
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 600;
  transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
#a24 .agenda__dia-d {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
#a24 .agenda__dia:hover { border-color: var(--claw-3); color: var(--ink); }
#a24 .agenda__dia.is-on {
  background: var(--grad-claw); color: var(--on-accent); border-color: transparent;
}
#a24 .agenda__dia.is-on .agenda__dia-d { color: #00000099; }

#a24 .agenda__horas { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 2.6rem; }
#a24 .agenda__hora {
  padding: .65rem 1.05rem; border-radius: var(--r-pill); cursor: pointer;
  background: var(--paper-3); border: 1px solid var(--rule);
  color: var(--ink); font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 700;
  transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast);
}
#a24 .agenda__hora:hover { border-color: var(--claw-3); transform: translateY(-2px); }
#a24 .agenda__hora.is-on {
  background: var(--grad-claw); color: var(--on-accent); border-color: transparent;
}

/* Siempre se dice en qué zona horaria están los horarios que se muestran.
   Un «09:00» pelado no significa lo mismo en Quito, en México o en Madrid. */
#a24 .agenda__zona {
  flex-basis: 100%; margin: .35rem 0 0;
  font-size: var(--t-xs); color: var(--muted);
}
#a24 .agenda__zona::before { content: "🕒 "; }

#a24 .agenda__aviso {
  margin: 0; padding: .8rem 1rem; border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 600;
}
#a24 .agenda__aviso.is-mal { background: #FF6B6B1F; color: #FFB3B3; border: 1px solid #FF6B6B4D; }
#a24 .agenda__aviso.is-bien { background: var(--paper-3); color: var(--ink-2); }

#a24 .agenda__ok {
  text-align: center; padding: var(--s-xl) var(--s-lg);
  border: 1px solid var(--ok); border-radius: var(--r-lg);
  background: #4ADE931A; margin-top: var(--s-lg);
}
#a24 .agenda__ok h3 { font-size: var(--t-lg); color: var(--ok); margin-bottom: var(--s-sm); }
#a24 .agenda__ok [data-ok-detalle] {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800;
  margin-bottom: var(--s-sm);
}

@media (max-width: 640px) {
  #a24 .agenda { padding: var(--s-lg); }
  #a24 .agenda__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

#a24 .formslot {
  margin-top: var(--s-xl); padding: var(--s-xl);
  border: 1px dashed var(--rule); border-radius: var(--r-lg);
  background: var(--paper-2);
}
#a24 .formslot h2 { font-size: var(--t-lg); margin-bottom: var(--s-md); }

/* ==========================================================================
   PÁGINAS LEGALES — texto largo, prioridad absoluta a la legibilidad
   ========================================================================== */
#a24 .legal { max-width: 74ch; }
#a24 .legal h2 {
  font-size: var(--t-lg); margin-top: var(--s-xl); margin-bottom: var(--s-sm);
  padding-top: var(--s-md); border-top: 1px solid var(--rule-soft);
}
#a24 .legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-md); }
#a24 .legal p { color: var(--ink-2); margin-bottom: var(--s-md); }
#a24 .legal ul { margin: 0 0 var(--s-md) 0; }
#a24 .legal li {
  color: var(--ink-2); padding-left: 1.3rem; position: relative; margin-bottom: .5rem;
}
#a24 .legal li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--claw-3);
}
#a24 .legal a { color: var(--claw-2); text-decoration: underline; text-underline-offset: 3px; }
#a24 .legal .updated {
  font-size: var(--t-sm); color: var(--muted);
  padding: var(--s-sm) var(--s-md); background: var(--paper-2);
  border-radius: var(--r-md); display: inline-block;
}

/* ==========================================================================
   FORMULARIO
   ========================================================================== */
#a24 .form { display: grid; gap: var(--s-md); }
#a24 .field { display: grid; gap: .4rem; }
#a24 .field label { font-size: var(--t-sm); font-weight: 600; }
#a24 .field .req { color: var(--claw-3); }
#a24 .field input, #a24 .field textarea, #a24 .field select {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: .85rem 1rem; color: var(--ink);
  transition: border-color var(--d-fast), background var(--d-fast);
}
#a24 .field input::placeholder, #a24 .field textarea::placeholder { color: var(--muted); }
#a24 .field input:focus, #a24 .field textarea:focus, #a24 .field select:focus {
  border-color: var(--claw-3); background: var(--paper-3);
}
#a24 .field textarea { resize: vertical; min-height: 120px; }
#a24 .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--muted); }
#a24 .consent input { margin-top: .25rem; accent-color: var(--claw-4); width: 17px; height: 17px; flex-shrink: 0; }
#a24 .consent a { color: var(--claw-2); text-decoration: underline; text-underline-offset: 3px; }
/* Honeypot antispam: invisible para personas, tentador para bots */
#a24 .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#a24 .footer { border-top: 1px solid var(--rule-soft); padding-block: var(--s-2xl) var(--s-lg); }
#a24 .footer__top {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-xl); margin-bottom: var(--s-2xl);
}
#a24 .footer__brand p { color: var(--muted); font-size: var(--t-sm); max-width: 34ch; margin-top: var(--s-md); }
#a24 .footer h4 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .13em;
  color: var(--claw-3); margin-bottom: var(--s-md);
}
#a24 .footer li + li { margin-top: .55rem; }
#a24 .footer li a { font-size: var(--t-sm); color: var(--muted); transition: color var(--d-fast); }
#a24 .footer li a:hover { color: var(--ink); }
#a24 .socials { display: flex; gap: .5rem; margin-top: var(--s-lg); }
#a24 .socials a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--rule); color: var(--muted);
  transition: color var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
}
#a24 .socials a:hover { color: var(--ink); border-color: var(--claw-3); transform: translateY(-2px); }
#a24 .socials svg { width: 16px; height: 16px; }
#a24 .footer__bot {
  display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: space-between;
  align-items: center; padding-top: var(--s-lg); border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs); color: var(--muted);
}
#a24 .badge-partner {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--paper-2);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
#a24 .badge-partner::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 10px var(--ok);
}

/* ==========================================================================
   APARICIÓN AL HACER SCROLL
   Regla: sin JS el contenido SIEMPRE se ve. Nunca parte de opacity:0 a secas.
   ========================================================================== */
#a24 .reveal { opacity: 1; }
#a24.js-on .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
#a24.js-on .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #a24.js-on .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  #a24 .hero__grid { grid-template-columns: 1fr; }
  #a24 .orb { order: -1; width: min(88vw, 400px); }
  #a24 .footer__top { grid-template-columns: 1fr 1fr; }
  #a24 .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  #a24 .nav__links { display: none; }
  #a24 .nav__end .btn { display: none; }
  #a24 .burger { display: block; }
  /* Ojo: NO fijar el número de columnas acá. La regla base usa auto-fit con
     minmax(min(100%,190px),1fr), que ya baja sola a 1 columna en pantallas
     angostas. Forzar repeat(2,1fr) desbordaba y cortaba las cifras. */
  #a24 .creds__grid { gap: var(--s-md); }
  #a24 .cred__n { font-size: var(--t-xl); }
  #a24 .sec { padding-block: var(--s-2xl); }

  /* En touch no hay hover: las etiquetas de los nodos se ven siempre */
  #a24 .orb__label { color: var(--ink-2); }
  #a24 .orb__item { width: 78px; }
  #a24 .orb__dot { width: 36px; height: 36px; }

  #a24 .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: #000000F0; backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule-soft);
  }
  #a24 .sticky-cta .btn { width: 100%; }
  #a24 .footer { padding-bottom: 5.5rem; }
}

@media (max-width: 560px) {
  #a24 .footer__top { grid-template-columns: 1fr; gap: var(--s-lg); }
  #a24 .steps { grid-template-columns: 1fr; }
  #a24 .cta-band { padding: var(--s-xl) var(--s-md); }
  #a24 .btn-row .btn { width: 100%; }
  #a24 .orb__label { font-size: 9.5px; }
}

/* ==========================================================================
   CARRUSEL DE SERVICIOS POR SCROLL (home)

   Por defecto esto es una GRILLA normal, igual que .svc-grid. El JS agrega
   .is-on y recién ahí la pantalla se ancla y los 7 servicios pasan de a uno.
   Si el JS no corre, si el visitante pidió menos movimiento o si la pantalla
   es angosta, queda la grilla: NUNCA un hueco de 7 pantallas en blanco.
   ========================================================================== */
#a24 .reel__fondos,
#a24 .reel__velo,
#a24 .reel__puntos,
#a24 .reel__n { display: none; }

#a24 .reel__marco {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: var(--s-lg);
}
#a24 .reel__panel {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--s-xl) var(--s-lg) var(--s-lg);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
#a24 .reel__panel h3 { font-size: var(--t-lg); margin-bottom: .55rem; }
#a24 .reel__panel p {
  color: var(--muted); font-size: var(--t-sm);
  flex: 1; margin-bottom: var(--s-lg);
}

/* --- Modo anclado. Solo lo enciende el JS, y solo en pantalla ancha. ------ */
@media (min-width: 900px) {
  /* var(--n) llega por style inline; el 7 de respaldo es por si se pierde. */
  #a24 .reel.is-on { height: calc(var(--n, 7) * 100vh); }
  #a24 .reel.is-on .reel__pin {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: grid; place-items: center;
  }

  #a24 .reel.is-on .reel__fondos { display: block; position: absolute; inset: 0; }
  #a24 .reel.is-on .reel__fondo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.08);
    transition: opacity .7s ease, transform 1.4s ease;
  }
  #a24 .reel.is-on .reel__fondo.is-on { opacity: 1; transform: scale(1); }

  /* El velo es lo que garantiza que el texto se lea sobre CUALQUIERA de los 7
     fondos. Sin él el contraste dependería de qué imagen tocó — y con fondos
     generados eso no se puede garantizar de antemano. */
  #a24 .reel.is-on .reel__velo {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(90deg, #000000F2 0%, #000000E0 44%, #00000099 100%);
  }

  /* Los 7 paneles se APILAN en la misma celda de grid, no en position:absolute.
     Con absolute, `left:0` se mide contra la caja de padding del .wrap y el texto
     terminaba pegado al borde de la pantalla; apilando, el padding del wrap manda. */
  /* Sin `width`: el .wrap ya trae `min(100% - 2.4rem, var(--wrap))`. Ponerle
     width:100% acá le comía el margen lateral y el texto quedaba contra el borde. */
  #a24 .reel.is-on .reel__marco { display: grid; position: relative; }
  #a24 .reel.is-on .reel__panel {
    grid-area: 1 / 1; align-self: center; justify-self: start;
    max-width: 32rem; background: none; border: 0; padding: 0;
    opacity: 0; transform: translateY(26px);
    /* visibility además de opacity: un panel invisible NO debe poder recibir
       el foco con Tab. Se retrasa para que la salida siga viéndose. */
    visibility: hidden; pointer-events: none;
    transition: opacity .5s ease, transform .6s ease, visibility 0s linear .5s;
  }
  #a24 .reel.is-on .reel__panel.is-on {
    opacity: 1; transform: none;
    visibility: visible; pointer-events: auto;
    transition: opacity .5s ease, transform .6s ease, visibility 0s;
  }
  #a24 .reel.is-on .reel__n {
    display: block; font-family: var(--font-display); font-size: var(--t-sm);
    color: var(--c, var(--claw-1)); letter-spacing: .12em; margin-bottom: var(--s-md);
  }
  #a24 .reel.is-on .reel__panel h3 { font-size: var(--t-2xl); }
  #a24 .reel.is-on .reel__panel p { font-size: var(--t-md); max-width: 30rem; }

  #a24 .reel.is-on .reel__puntos {
    display: flex; flex-direction: column; gap: .65rem;
    position: absolute; top: 50%; transform: translateY(-50%);
    right: max(2rem, calc((100vw - 1200px) / 2));
  }
  #a24 .reel.is-on .reel__punto {
    width: 10px; height: 10px; padding: 0; border-radius: 50%;
    background: #FFFFFF33; border: 1px solid #FFFFFF4D; cursor: pointer;
    transition: background .25s ease, transform .25s ease;
  }
  #a24 .reel.is-on .reel__punto.is-on { background: var(--claw-1); transform: scale(1.5); }
  #a24 .reel.is-on .reel__punto:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 3px;
  }
}

/* ==========================================================================
   BANDA DE VIDEO DE CIERRE DE SERVICIOS (home)

   El video es fondo y nada más: aria-hidden y tabindex="-1" para que no
   aparezca en el lector de pantalla ni en el recorrido con Tab. Todo el
   contenido real es texto HTML encima.
   ========================================================================== */
/* Icono 3D de la ficha larga de servicio. El fondo del render es negro puro, el
   mismo del sitio, así que no hace falta recortarlo: se funde solo. */
#a24 .svcfull__ico3d {
  width: 112px; height: 112px; flex-shrink: 0;
  border-radius: var(--r-md);
  filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--c, var(--claw-1)) 30%, transparent));
}
@media (max-width: 700px) { #a24 .svcfull__ico3d { width: 78px; height: 78px; } }

/* Mismo criterio en las 3 tarjetas de contacto: son grandes y son solo tres. */
#a24 .way__ico3d,
#a24 .way__wa {
  width: 88px; height: 88px; display: block; margin-bottom: var(--s-md);
  border-radius: var(--r-md);
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--c, var(--claw-1)) 30%, transparent));
}
/* El halo del logo de WhatsApp va en SU verde, no en el rosa de la tarjeta. */
#a24 .way__wa { filter: drop-shadow(0 10px 24px #25D36659); }

/* ---- Formulario CRM (prueba de 30 días en la home, inscripción en webinars) ------
   Texto + robot a la izquierda, el formulario de Bitrix a la derecha en una tarjeta.
   El formulario lo pinta el loader de Bitrix con SU tema; acá solo la tarjeta que
   lo contiene y los colores de sus campos, para que no quede blanco sobre negro. */
#a24 .trial {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-2xl); align-items: center;
}
#a24 .trial__txt { position: relative; }
#a24 .trial__robot {
  width: 190px; height: auto; display: block; margin: var(--s-lg) 0 var(--s-md);
  filter: drop-shadow(0 12px 28px #F172B94D);
  animation: orbotFlota 4.5s ease-in-out infinite;
}
#a24 .trial__note { font-size: var(--t-sm); color: var(--muted); }
#a24 .trial__form {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-lg); min-height: 380px;
  box-shadow: var(--shadow-card);
}
/* el form de Bitrix se inyecta adentro: campos oscuros con borde de marca */
#a24 .crmform .b24-form-wrapper { background: transparent !important; }
#a24 .crmform .b24-form-control,
#a24 .crmform input, #a24 .crmform textarea, #a24 .crmform select {
  background: var(--paper-3) !important; color: var(--ink) !important;
  border-color: var(--rule) !important;
}
#a24 .crmform .b24-form-btn {
  background: var(--grad-claw) !important; color: var(--on-accent) !important;
  border: 0 !important; border-radius: 999px !important; font-weight: 700 !important;
}
#a24 .crmform .b24-form-header-title, #a24 .crmform .b24-form-header-description,
#a24 .crmform label, #a24 .crmform .b24-form-control-label { color: var(--ink-2) !important; }
/* En la HOME (prueba de 30 días) se ocultan el título y la descripción internos del
   webform 1859 («Formulario de Registro» / «MasterClass»): son de es24 y nuestros
   textos de 30 días ya están arriba. Cuando el dueño cree el webform propio con su
   propio título, se puede quitar esta regla. Los campos y el botón quedan. */
#a24 .trial--30d .crmform .b24-form-header { display: none !important; }
/* El botón dice «¡Registrarme a la MasterClass!» (texto del webform, no editable
   desde acá): se tapa con el nuestro por CSS hasta que exista el webform propio. */
#a24 .trial--30d .crmform .b24-form-btn { font-size: 0 !important; }
#a24 .trial--30d .crmform .b24-form-btn::after {
  content: attr(data-a24-cta); font-size: 15px !important;
}
@media (max-width: 900px) {
  #a24 .trial { grid-template-columns: 1fr; }
  #a24 .trial__robot { width: 140px; }
}

#a24 .vband { margin-top: var(--s-3xl); border-top: 1px solid var(--rule-soft); }
#a24 .vband__txt { padding-block: var(--s-3xl) var(--s-xl); }

/* El video a MITAD de ancho, centrado. Ya no va de fondo con el texto encima:
   así no hace falta velo, el video se ve entero y el texto se lee sobre negro,
   que es contraste garantizado y no "el que toque en ese cuadro". */
#a24 .vband__marco {
  width: min(50%, 720px); margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-pop);
  margin-bottom: var(--s-3xl);
}
#a24 .vband__v { display: block; width: 100%; height: auto; }
/* En móvil la mitad de ancho es ilegible: pasa a ancho completo. */
@media (max-width: 760px) { #a24 .vband__marco { width: 100%; } }
#a24 .vband__txt h2 { margin-block: var(--s-sm) var(--s-lg); }

#a24 .vband__lista {
  display: flex; flex-wrap: wrap; gap: var(--s-sm) var(--s-md);
  list-style: none; padding: 0; margin-bottom: var(--s-xl);
}
#a24 .vband__it {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem .45rem .5rem;
  font-size: var(--t-sm); color: var(--ink);
  background: #FFFFFF0F; border: 1px solid #FFFFFF1F;
  border-radius: 999px; backdrop-filter: blur(6px);
}
#a24 .vband__ico {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--c, var(--claw-1));
  background: color-mix(in srgb, var(--c, var(--claw-1)) 18%, transparent);
}
#a24 .vband__ico svg { width: 15px; height: 15px; }

/* Menos movimiento: el video no arranca (lo decide el JS) y queda el póster. */
@media (prefers-reduced-motion: reduce) {
  #a24 .vband__v { display: none; }
  #a24 .vband { background: var(--paper-2); }
}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print {
  #a24 { background: #fff; color: #000; }
  #a24 .nav-outer, #a24 .sticky-cta, #a24 .orb, #a24 .glow { display: none; }
  #a24 h1, #a24 h2, #a24 h3 { color: #000; }
  #a24 .claw-text { -webkit-text-fill-color: #000 !important; color: #000; background: none; }
}


/* ===== BLINDAJE anti-tema Bitrix (NO QUITAR) =====
   El tema de Bitrix fuerza los headings a un color oscuro. Sobre nuestro fondo negro
   eso daría texto negro sobre negro, que es exactamente lo que el dueño prohibió.
   Se reafirma el color claro. El titular con gradiente usa un <span class="claw-text">
   DENTRO del h1 (nunca el h1 mismo), así el !important de abajo no lo borra. */
.landing-block #a24 { color: var(--ink); background: transparent; }
.landing-block #a24 h1, .landing-block #a24 h2, .landing-block #a24 h3,
.landing-block #a24 h4, .landing-block #a24 h5 { color: var(--ink) !important; }
.landing-block #a24 .claw-text { -webkit-text-fill-color: transparent !important; }
.landing-block #a24 .cta-band h2 { color: var(--on-accent) !important; }

/* ==========================================================================
   TIENDA: el bloque NATIVO de tarjetas (44.7) vestido con la marca.
   El bloque viene con el tema por defecto de Bitrix — cabecera celeste #34BCF2,
   cuerpo gris #F7F7F7, título blanco (INVISIBLE sobre el gris), Open Sans — en
   medio de nuestra página negra. Todo esto está FUERA de #a24, así que no lo
   alcanza styles.css: se viste acá, con !important porque Bitrix también lo usa.
   Solo se tocan colores, fuentes y espaciado: la ESTRUCTURA del bloque queda
   intacta, que es lo que el editor visual necesita para seguir editando con clics.
   ========================================================================== */
.block-44-7-three-columns-with-img-and-price {
  background: #000 !important;
  font-family: var(--font-body) !important;
  padding: 0 0 8px !important;
  overflow-x: clip;                                /* nada de scroll horizontal */
}
/* LA GRILLA. El bloque trae `container > row > col-md-6 col-lg-4` de Bootstrap, pero
   dentro de nuestra página esa grilla NO aplica (el .container queda sin max-width y
   las columnas caen a display:block): las 5 tarjetas se apilaban en UNA columna, cada
   una de 986 px de alto, y el bloque medía 5.148 px. Se reemplaza por CSS Grid propio,
   que no depende de Bootstrap: 3 columnas, 2 en tablet, 1 en móvil. Y se anulan los
   márgenes negativos del .row, que eran el desborde horizontal. */
.block-44-7-three-columns-with-img-and-price .container {
  width: min(100% - 2.4rem, 1200px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important; padding: 0 !important;
}
.block-44-7-three-columns-with-img-and-price .row.landing-block-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card {
  display: block !important;
  width: auto !important; max-width: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important;
}
@media (max-width: 1024px) {
  .block-44-7-three-columns-with-img-and-price .row.landing-block-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .block-44-7-three-columns-with-img-and-price .row.landing-block-inner {
    grid-template-columns: 1fr !important;
  }
}
/* La animación de entrada de Bitrix (js-animation fadeInLeft) deja las tarjetas en
   opacity:0 si su script no dispara dentro de nuestra página. Se fuerzan visibles. */
.block-44-7-three-columns-with-img-and-price .js-animation {
  opacity: 1 !important; visibility: visible !important; animation: none !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card article {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  color: var(--ink-2) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card article:hover {
  transform: translateY(-4px);
  border-color: var(--claw-3) !important;
  box-shadow: var(--halo-pink) !important;
}
/* Cabecera: de celeste a negro con una línea del gradiente de marca abajo. */
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-container-top {
  background: var(--paper-3) !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--grad-claw) 1 !important;
  padding: 18px 20px 14px !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-subtitle {
  color: var(--claw-1) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-title {
  color: var(--ink) !important;                /* era blanco sobre gris claro */
  font-family: var(--font-display) !important;
  font-style: normal !important;               /* fuera la itálica de Bitrix */
  font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important;
  margin-top: 6px !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-img {
  height: 180px !important;                    /* 230 dejaba tarjetas de 700 px */
  object-fit: cover !important;
  filter: saturate(.9) brightness(.85);
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-container-bottom {
  padding: 22px 22px 24px !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-price {
  color: var(--ink) !important;                /* era el celeste de Bitrix */
  font-family: var(--font-display) !important;
  font-size: 26px !important; font-weight: 800 !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-price-subtitle {
  color: var(--muted) !important; font-size: 12px !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-text {
  color: var(--muted) !important; font-size: 14px !important; line-height: 1.55 !important;
  margin-bottom: 20px !important;
}
/* Botón: el mismo btn--primary del resto del sitio, no el celeste de Bitrix. */
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-button {
  background: var(--grad-claw) !important;
  color: var(--on-accent) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 12px 22px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.block-44-7-three-columns-with-img-and-price .landing-block-node-card-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--halo-amber) !important;
}