/* Aliox v2 — generado desde el sistema de diseño (tokens.json + components/bundle.css) más el CSS propio de la landing.
   Tokens: no edites valores acá; cambialos en el sistema de diseño y regenerá. */


@font-face{font-family:"Unbounded";src:url("/landing/fonts/Unbounded-Variable.woff2") format("woff2");font-weight:200 900;font-display:swap}

@font-face{font-family:"Figtree";src:url("/landing/fonts/Figtree-Variable.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  color-scheme:light;
  --fondo:var(--tinta-0);
  --fondo-suave:var(--tinta-25);
  --superficie:var(--tinta-0);
  --superficie-hundida:var(--tinta-50);
  --texto:var(--tinta-950);
  --texto-2:var(--tinta-600);
  --texto-3:var(--tinta-500);
  --borde:var(--tinta-100);
  --borde-fuerte:var(--tinta-400);
  --acento:var(--magenta-600);
  --acento-hover:var(--magenta-700);
  --sobre-acento:var(--tinta-0);
  --acento-suave:var(--magenta-100);
  --acento-texto:var(--magenta-600);
  --foco:var(--magenta-600);
  --banda:var(--tinta-950);
  --sobre-banda:var(--tinta-0);
  --acento-banda:var(--magenta-400);
  --exito:var(--verde-600);
  --exito-suave:var(--verde-100);
  --aviso:var(--ambar-600);
  --aviso-suave:var(--ambar-100);
  --error:var(--rojo-600);
  --error-suave:var(--rojo-100);
  --info:var(--azul-600);
  --info-suave:var(--azul-100);
  --magenta-50:#fdf2f7;
  --magenta-100:#fce4ef;
  --magenta-200:#f9c7dd;
  --magenta-300:#f497c0;
  --magenta-400:#ff5ca8;
  --magenta-500:#e0247c;
  --magenta-600:#cc1269;
  --magenta-700:#a80f56;
  --magenta-800:#800c42;
  --magenta-900:#4d0a29;
  --tinta-0:#ffffff;
  --tinta-25:#fbf8fa;
  --tinta-50:#f6f1f4;
  --tinta-100:#efe2e9;
  --tinta-200:#e2d6dd;
  --tinta-300:#c4bac1;
  --tinta-400:#8f8791;
  --tinta-500:#6e6873;
  --tinta-600:#5c5660;
  --tinta-700:#3d383f;
  --tinta-800:#2a252d;
  --tinta-850:#211d24;
  --tinta-900:#1a171c;
  --tinta-950:#141216;
  --verde-100:#dcf2e5;
  --verde-600:#1d7a4b;
  --verde-300:#5fcf95;
  --verde-900:#0f2a1d;
  --ambar-100:#fbecd2;
  --ambar-600:#9a5b00;
  --ambar-300:#f2b75b;
  --ambar-900:#2e1f05;
  --rojo-100:#fbe0dd;
  --rojo-600:#b3261e;
  --rojo-300:#ff8a80;
  --rojo-900:#3a0f0c;
  --azul-100:#dfeafb;
  --azul-600:#1d5fa8;
  --azul-300:#8ab8f5;
  --azul-900:#0d2038;
  --sombra-1:0 1px 2px rgba(20,18,22,0.06);
  --sombra-2:0 14px 32px -14px rgba(204,18,105,0.30);
  --sombra-3:0 24px 48px -12px rgba(20,18,22,0.28);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:32px;
  --radius-pill:999px;
  --ancho:1200px;
  --sidebar:264px;
  --topbar:64px;
  --control:40px;
  --control-l:48px;
  --icono-disco:40px;
  --font-display:Unbounded, "Arial Black", system-ui, sans-serif;
  --font-sans:Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Tema oscuro: sigue al sistema operativo salvo que la página fije data-theme="light" */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  --fondo:var(--tinta-950);
  --fondo-suave:var(--tinta-900);
  --superficie:var(--tinta-850);
  --superficie-hundida:var(--tinta-800);
  --texto:var(--tinta-50);
  --texto-2:var(--tinta-300);
  --texto-3:var(--tinta-400);
  --borde:var(--tinta-800);
  --borde-fuerte:var(--tinta-500);
  --acento:var(--magenta-400);
  --acento-hover:var(--magenta-300);
  --sobre-acento:var(--tinta-950);
  --acento-suave:var(--magenta-900);
  --acento-texto:var(--magenta-300);
  --foco:var(--magenta-400);
  --banda:var(--magenta-900);
  --sobre-banda:var(--tinta-0);
  --acento-banda:var(--magenta-300);
  --exito:var(--verde-300);
  --exito-suave:var(--verde-900);
  --aviso:var(--ambar-300);
  --aviso-suave:var(--ambar-900);
  --error:var(--rojo-300);
  --error-suave:var(--rojo-900);
  --info:var(--azul-300);
  --info-suave:var(--azul-900);
  --sombra-1:0 1px 2px rgba(0,0,0,0.4);
  --sombra-2:0 14px 32px -14px rgba(0,0,0,0.6);
  --sombra-3:0 24px 48px -12px rgba(0,0,0,0.7);
}
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:var(--tinta-950);
  --fondo-suave:var(--tinta-900);
  --superficie:var(--tinta-850);
  --superficie-hundida:var(--tinta-800);
  --texto:var(--tinta-50);
  --texto-2:var(--tinta-300);
  --texto-3:var(--tinta-400);
  --borde:var(--tinta-800);
  --borde-fuerte:var(--tinta-500);
  --acento:var(--magenta-400);
  --acento-hover:var(--magenta-300);
  --sobre-acento:var(--tinta-950);
  --acento-suave:var(--magenta-900);
  --acento-texto:var(--magenta-300);
  --foco:var(--magenta-400);
  --banda:var(--magenta-900);
  --sobre-banda:var(--tinta-0);
  --acento-banda:var(--magenta-300);
  --exito:var(--verde-300);
  --exito-suave:var(--verde-900);
  --aviso:var(--ambar-300);
  --aviso-suave:var(--ambar-900);
  --error:var(--rojo-300);
  --error-suave:var(--rojo-900);
  --info:var(--azul-300);
  --info-suave:var(--azul-900);
  --sombra-1:0 1px 2px rgba(0,0,0,0.4);
  --sombra-2:0 14px 32px -14px rgba(0,0,0,0.6);
  --sombra-3:0 24px 48px -12px rgba(0,0,0,0.7);
}

/* Aliox v2 — componentes (prefijo ax-). Tokens y @font-face vienen de tokens.css.
   Todo color sale de tokens semánticos, salvo las plantillas de Instagram, que usan primitivos
   para no cambiar con el tema. */

/* ── Base ─────────────────────────────────────────────── */
.ax-root,.ax-root *{box-sizing:border-box}
.ax-root{font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}
.ax-root :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:var(--radius-sm)}
.ax-root svg{flex:none}
.ax-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Marca ────────────────────────────────────────────── */
.ax-wordmark{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.03em;color:var(--texto);text-decoration:none;white-space:nowrap}
.ax-wordmark b{font-weight:700;color:var(--acento-texto)}
.ax-wordmark--banda{color:var(--sobre-banda)}
.ax-wordmark--banda b{color:var(--acento-banda)}

.ax-hub{position:relative;width:280px;height:280px;display:grid;place-items:center}
.ax-hub__anillo{position:absolute;inset:0;width:100%;height:100%}
.ax-hub__anillo .a1{stroke:var(--acento)}
.ax-hub__anillo .a2{stroke:var(--texto)}
.ax-hub__disco{position:absolute;inset:36px;border-radius:50%;background:var(--banda);color:var(--sobre-banda);display:grid;place-content:center;justify-items:center;text-align:center;padding:0 30px}
.ax-hub__disco .ax-wordmark{font-size:30px}
.ax-hub__disco p{margin:12px 0 0;font:600 15px/1.35 var(--font-sans)}

/* Motivo de arcos (del símbolo): decorativo, detrás del contenido */
.ax-arcos{position:absolute;pointer-events:none}
.ax-arcos .a1{fill:none;stroke:var(--acento);stroke-width:16}
.ax-arcos .a2{fill:none;stroke:var(--texto);stroke-width:16}
.ax-arcos--suave .a1,.ax-arcos--suave .a2{stroke:var(--acento-suave)}

/* ── Botones ──────────────────────────────────────────── */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control);padding:0 18px;border-radius:var(--radius-md);border:1.5px solid var(--acento);background:var(--acento);color:var(--sobre-acento);font:700 15px/1.2 var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .15s}
.ax-btn:hover{background:var(--acento-hover);border-color:var(--acento-hover)}
.ax-btn:active{transform:translateY(1px)}
.ax-btn svg{width:18px;height:18px}
.ax-btn--secundario{background:transparent;color:var(--texto);border-color:var(--borde-fuerte)}
.ax-btn--secundario:hover{background:var(--superficie-hundida);border-color:var(--texto)}
.ax-btn--fantasma{background:transparent;border-color:transparent;color:var(--acento-texto);padding:0 8px}
.ax-btn--fantasma:hover{background:var(--acento-suave);border-color:transparent}
.ax-btn--peligro{background:var(--error);border-color:var(--error);color:var(--sobre-acento)}
.ax-btn--peligro:hover{background:var(--error);border-color:var(--error);filter:brightness(.9)}
.ax-btn--banda{background:var(--acento-banda);border-color:var(--acento-banda);color:var(--banda)}
.ax-btn--banda:hover{background:var(--sobre-banda);border-color:var(--sobre-banda)}
.ax-btn--s{min-height:32px;padding:0 12px;font-size:14px;border-radius:var(--radius-sm)}
.ax-btn--l{min-height:var(--control-l);padding:0 24px;font-size:16px}
.ax-btn--icono{width:var(--control);padding:0}
.ax-btn--icono.ax-btn--s{width:32px}
.ax-btn[disabled],.ax-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ── Textos de sección ───────────────────────────────── */
.ax-etiqueta{display:block;font:700 12px/1.4 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acento-texto)}
.ax-etiqueta--neutra{color:var(--texto-2)}
.ax-titulo{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.12;letter-spacing:-.025em;margin:10px 0 0;color:var(--texto)}
.ax-titulo i,.ax-display i{font-style:normal;color:var(--acento-texto)}
.ax-bajada{font-size:22px;line-height:1.45;color:var(--texto-2);max-width:46ch;margin:14px 0 0}
.ax-encabezado--centro{text-align:center}
.ax-encabezado--centro .ax-bajada{margin-left:auto;margin-right:auto}
.ax-display{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.035em;margin:0;color:var(--texto)}

/* ── Pill, badge, ícono ──────────────────────────────── */
.ax-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:var(--radius-pill);background:var(--acento);color:var(--sobre-acento);font:700 12px/1.2 var(--font-sans);letter-spacing:.2em;text-transform:uppercase}
.ax-pill--suave{background:var(--acento-suave);color:var(--acento-texto);padding:5px 12px;letter-spacing:.08em}

.ax-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--superficie-hundida);color:var(--texto-2);font:600 12px/1 var(--font-sans);white-space:nowrap}
.ax-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ax-badge--exito{background:var(--exito-suave);color:var(--exito)}
.ax-badge--aviso{background:var(--aviso-suave);color:var(--aviso)}
.ax-badge--error{background:var(--error-suave);color:var(--error)}
.ax-badge--info{background:var(--info-suave);color:var(--info)}
.ax-badge--acento{background:var(--acento-suave);color:var(--acento-texto)}
.ax-badge--sin-punto::before{display:none}

.ax-icono{display:inline-grid;place-items:center;width:var(--icono-disco);height:var(--icono-disco);border-radius:var(--radius-pill);background:var(--acento-suave);color:var(--acento-texto);flex:none}
.ax-icono svg{width:20px;height:20px}
.ax-icono--solido{background:var(--acento);color:var(--sobre-acento)}
.ax-icono--neutro{background:var(--superficie-hundida);color:var(--texto)}
.ax-icono--s{width:32px;height:32px}
.ax-icono--s svg{width:16px;height:16px}

.ax-avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--superficie-hundida);color:var(--texto);font:700 13px/1 var(--font-sans);flex:none}
.ax-avatar--agente{background:var(--acento);color:var(--sobre-acento)}
.ax-avatar svg{width:16px;height:16px}

/* ── Tarjeta (única, con variantes) ──────────────────── */
.ax-card{display:flex;flex-direction:column;gap:12px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--sombra-1);color:var(--texto)}
.ax-card h3,.ax-card h4{margin:0;font:700 16px/1.3 var(--font-sans)}
.ax-card p{margin:0;font-size:14px;line-height:1.45;color:var(--texto-2)}
.ax-card--compacta{padding:16px;border-radius:var(--radius-md);gap:10px}
.ax-card--fila{flex-direction:row;align-items:center;gap:14px}
.ax-card--fila > div{min-width:0}
.ax-card--interactiva{transition:box-shadow .2s,transform .2s;cursor:pointer}
.ax-card--interactiva:hover{box-shadow:var(--sombra-2);transform:translateY(-2px)}
.ax-card--destacada{border:2px solid var(--acento);box-shadow:var(--sombra-2)}
.ax-card--plan h3{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.015em}
.ax-card--plan .ax-btn{margin-top:auto}
.ax-grilla{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ax-lista-check{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.45}
.ax-lista-check li{display:flex;gap:10px;align-items:flex-start}
.ax-lista-check svg{width:18px;height:18px;margin-top:2px;color:var(--exito)}
.ax-card ul.ax-detalle{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5;color:var(--texto-2)}

/* ── Panel y dimensión ───────────────────────────────── */
.ax-panel{position:relative;overflow:hidden;background:var(--fondo-suave);border:1px solid var(--borde);border-radius:var(--radius-xl);padding:32px}
.ax-dimension{text-align:center}
.ax-dimension h3{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1.06;letter-spacing:-.03em;margin:0;color:var(--texto)}
.ax-dimension h3 i{font-style:normal;color:var(--acento-texto)}
.ax-dimension strong{display:block;margin-top:6px;font:700 12px/1.4 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acento-texto)}
.ax-dimension p{margin:6px 0 0;font-size:18px;color:var(--texto-2)}

/* ── Resultados ──────────────────────────────────────── */
.ax-resultados{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));text-align:center}
.ax-resultado{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 12px;border-left:1px solid var(--borde);font-size:15px;line-height:1.35}
.ax-resultado:first-child{border-left:0}
.ax-resultado strong{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.015em}

/* ── Banda de cierre ─────────────────────────────────── */
.ax-banda{position:relative;overflow:hidden;background:var(--banda);color:var(--sobre-banda);border-radius:var(--radius-xl);padding:48px;display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center}
.ax-banda h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1.06;letter-spacing:-.03em}
.ax-banda h2 i{font-style:normal;color:var(--acento-banda)}
.ax-banda p{margin:14px 0 0;font-size:18px;opacity:.85;max-width:44ch}
.ax-banda .ax-arcos{right:-60px;bottom:-80px;opacity:.9}
.ax-banda .ax-arcos .a1{stroke:var(--acento-banda)}
.ax-banda .ax-arcos .a2{stroke:var(--sobre-banda);opacity:.25}

/* ── Formularios ─────────────────────────────────────── */
.ax-campo{display:grid;gap:6px}
.ax-campo > label,.ax-campo__label{font:600 14px/1.3 var(--font-sans);color:var(--texto)}
.ax-campo__ayuda{font-size:13px;line-height:1.4;color:var(--texto-3)}
.ax-campo__error{display:flex;gap:6px;align-items:center;font:600 13px/1.4 var(--font-sans);color:var(--error)}
.ax-campo__error svg{width:16px;height:16px}
.ax-input,.ax-select,.ax-textarea{width:100%;min-height:var(--control);padding:0 12px;border:1px solid var(--borde-fuerte);border-radius:var(--radius-sm);background:var(--superficie);color:var(--texto);font:400 15px/1.4 var(--font-sans)}
.ax-textarea{padding:10px 12px;min-height:88px;resize:vertical}
.ax-input::placeholder,.ax-textarea::placeholder{color:var(--texto-3)}
.ax-input:hover,.ax-select:hover{border-color:var(--texto-2)}
.ax-input:focus,.ax-select:focus,.ax-textarea:focus{outline:none;border-color:var(--foco);box-shadow:0 0 0 3px var(--acento-suave)}
.ax-input[aria-invalid="true"]{border-color:var(--error)}
.ax-input:disabled{background:var(--superficie-hundida);color:var(--texto-3)}
.ax-select{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--texto-2) 50%),linear-gradient(135deg,var(--texto-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.ax-input-icono{position:relative}
.ax-input-icono svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--texto-3)}
.ax-input-icono .ax-input{padding-left:36px}

.ax-check{display:inline-flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.4;color:var(--texto);cursor:pointer}
.ax-check input{appearance:none;margin:1px 0 0;width:20px;height:20px;flex:none;border:1.5px solid var(--borde-fuerte);border-radius:var(--radius-xs);background:var(--superficie);display:grid;place-content:center;cursor:pointer}
.ax-check input[type=radio]{border-radius:50%}
.ax-check input:checked{background:var(--acento);border-color:var(--acento)}
.ax-check input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid var(--sobre-acento);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ax-check input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sobre-acento)}

.ax-switch{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--texto);cursor:pointer}
.ax-switch input{appearance:none;margin:0;width:40px;height:24px;border-radius:var(--radius-pill);background:var(--borde-fuerte);position:relative;cursor:pointer;transition:background .15s}
.ax-switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--superficie);transition:transform .15s}
.ax-switch input:checked{background:var(--acento)}
.ax-switch input:checked::after{transform:translateX(16px)}

/* ── Alertas y toasts ────────────────────────────────── */
.ax-alerta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md);background:var(--info-suave);color:var(--texto);font-size:14px;line-height:1.45}
.ax-alerta > svg{width:20px;height:20px;color:var(--info)}
.ax-alerta b{display:block;font-size:15px;margin-bottom:2px}
.ax-alerta--exito{background:var(--exito-suave)}.ax-alerta--exito > svg{color:var(--exito)}
.ax-alerta--aviso{background:var(--aviso-suave)}.ax-alerta--aviso > svg{color:var(--aviso)}
.ax-alerta--error{background:var(--error-suave)}.ax-alerta--error > svg{color:var(--error)}
.ax-toast{display:flex;gap:12px;align-items:center;max-width:420px;padding:12px 12px 12px 16px;border-radius:var(--radius-md);background:var(--banda);color:var(--sobre-banda);box-shadow:var(--sombra-3);font-size:14px;line-height:1.4}
.ax-toast > svg{width:20px;height:20px;color:var(--acento-banda)}
.ax-toast .ax-btn{margin-left:auto;color:var(--acento-banda)}
.ax-toast .ax-btn:hover{background:transparent;text-decoration:underline}

/* ── Tabla ───────────────────────────────────────────── */
.ax-tabla-marco{border:1px solid var(--borde);border-radius:var(--radius-lg);overflow:auto;background:var(--superficie)}
.ax-tabla{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4}
.ax-tabla th{position:sticky;top:0;text-align:left;padding:10px 16px;background:var(--superficie-hundida);color:var(--texto-2);font:600 12px/1.3 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ax-tabla td{padding:12px 16px;border-top:1px solid var(--borde);color:var(--texto);vertical-align:middle}
.ax-tabla tbody tr:hover td{background:var(--fondo-suave)}
.ax-tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.ax-tabla small{display:block;color:var(--texto-3);font-size:12px}

/* ── Tabs ────────────────────────────────────────────── */
.ax-tabs{display:flex;gap:4px;border-bottom:1px solid var(--borde)}
.ax-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--texto-2);font:600 14px/1.2 var(--font-sans);cursor:pointer}
.ax-tab:hover{color:var(--texto)}
.ax-tab[aria-selected="true"]{color:var(--texto);border-bottom-color:var(--acento)}
.ax-tab .ax-badge{height:20px;padding:0 7px}

/* ── Shell de la plataforma ──────────────────────────── */
.ax-app{display:grid;grid-template-columns:var(--sidebar) 1fr;grid-template-rows:var(--topbar) 1fr;min-height:100%;background:var(--fondo-suave)}
.ax-sidebar{grid-row:1/-1;display:flex;flex-direction:column;gap:4px;padding:16px 12px;background:var(--superficie);border-right:1px solid var(--borde)}
.ax-sidebar .ax-wordmark{font-size:22px;padding:6px 10px 18px}
.ax-sidebar__grupo{margin:14px 10px 6px;font:700 11px/1.4 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.ax-nav{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:var(--radius-sm);color:var(--texto-2);font:600 14px/1.2 var(--font-sans);text-decoration:none}
.ax-nav svg{width:18px;height:18px}
.ax-nav:hover{background:var(--superficie-hundida);color:var(--texto)}
.ax-nav[aria-current="page"]{background:var(--acento-suave);color:var(--acento-texto)}
.ax-nav .ax-badge{margin-left:auto;height:20px;padding:0 7px}
.ax-topbar{display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--superficie);border-bottom:1px solid var(--borde)}
.ax-topbar h1{margin:0;font:700 18px/1.2 var(--font-sans)}
.ax-topbar .ax-input-icono{margin-left:auto;width:280px}
.ax-contenido{padding:24px;display:grid;gap:16px;align-content:start}

/* ── KPI ─────────────────────────────────────────────── */
.ax-kpi{display:grid;gap:6px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radius-lg);padding:20px}
.ax-kpi__label{display:flex;align-items:center;gap:8px;font:600 13px/1.3 var(--font-sans);color:var(--texto-2)}
.ax-kpi__label svg{width:16px;height:16px;color:var(--acento-texto)}
.ax-kpi__valor{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ax-kpi__delta{font:600 13px/1.3 var(--font-sans);color:var(--exito)}
.ax-kpi__delta--baja{color:var(--error)}
.ax-kpi__nota{font-size:13px;color:var(--texto-3)}

/* ── Feed de actividad ───────────────────────────────── */
.ax-actividad{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radius-lg);overflow:hidden}
.ax-actividad__cabecera{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--borde);font-weight:700}
.ax-actividad ul{list-style:none;margin:0;padding:4px 0}
.ax-actividad li{display:flex;gap:12px;align-items:flex-start;padding:12px 18px}
.ax-actividad li + li{border-top:1px solid var(--borde)}
.ax-actividad .mod{display:block;font:700 11px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acento-texto)}
.ax-actividad b{display:block;font-size:15px;line-height:1.35}
.ax-actividad small{font-size:13px;color:var(--texto-3)}
.ax-actividad time{margin-left:auto;font-size:12px;color:var(--texto-3);white-space:nowrap}

/* ── Chat ────────────────────────────────────────────── */
.ax-chat{display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radius-lg);box-shadow:var(--sombra-2);overflow:hidden}
.ax-chat__cabecera{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--borde)}
.ax-chat__cabecera b{display:block;font-size:15px;line-height:1.2}
.ax-chat__cabecera small{font-size:12px;color:var(--exito);font-weight:600}
.ax-chat__cuerpo{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--fondo-suave)}
.ax-burbuja{max-width:82%;padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.45}
.ax-burbuja--cliente{align-self:flex-end;background:var(--acento-suave);color:var(--texto);border-bottom-right-radius:4px}
.ax-burbuja--agente{align-self:flex-start;background:var(--superficie);color:var(--texto);border:1px solid var(--borde);border-bottom-left-radius:4px}
.ax-burbuja--accion{align-self:center;display:inline-flex;gap:6px;align-items:center;background:var(--exito-suave);color:var(--exito);font:600 12px/1.3 var(--font-sans);padding:5px 12px;border-radius:var(--radius-pill)}
.ax-burbuja--accion svg{width:14px;height:14px}
.ax-burbuja time{display:block;margin-top:2px;font-size:11px;color:var(--texto-3);text-align:right}
.ax-chat__compositor{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--borde)}
.ax-chat__compositor .ax-input{border-radius:var(--radius-pill)}

/* ── Modal ───────────────────────────────────────────── */
.ax-velo{position:relative;display:grid;place-items:center;padding:24px;background:rgba(20,18,22,.45)}
.ax-modal{width:100%;max-width:440px;background:var(--superficie);border-radius:var(--radius-lg);box-shadow:var(--sombra-3);overflow:hidden}
.ax-modal__cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 0}
.ax-modal__cabecera h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.015em}
.ax-modal__cuerpo{padding:12px 20px 20px;font-size:15px;line-height:1.5;color:var(--texto-2)}
.ax-modal__pie{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;background:var(--fondo-suave);border-top:1px solid var(--borde)}

/* ── Estado vacío ────────────────────────────────────── */
.ax-vacio{position:relative;overflow:hidden;display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 24px;border:1px dashed var(--borde-fuerte);border-radius:var(--radius-lg);background:var(--superficie)}
.ax-vacio h3{margin:6px 0 0;font:700 18px/1.3 var(--font-sans)}
.ax-vacio p{margin:0;max-width:40ch;font-size:15px;color:var(--texto-2)}
.ax-vacio .ax-btn{margin-top:8px}

/* ── Agy (botón flotante) ────────────────────────────── */
.ax-agy{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;align-items:center;gap:12px;text-decoration:none}
.ax-agy__burbuja{padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);font:600 14px/1.3 var(--font-sans);color:var(--texto);white-space:nowrap}
.ax-agy__boton{width:64px;height:64px;border-radius:50%;background:var(--acento);display:grid;place-items:center;box-shadow:var(--sombra-2);transition:transform .15s}
.ax-agy__boton img{display:block;width:50px;height:auto}
.ax-agy:hover .ax-agy__boton{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){.ax-btn,.ax-card--interactiva,.ax-agy__boton,.ax-switch input,.ax-switch input::after{transition:none}.ax-card--interactiva:hover{transform:none}}
@media (max-width:640px){.ax-agy{right:16px;bottom:16px}.ax-agy__burbuja{display:none}.ax-banda{grid-template-columns:1fr;padding:32px 24px}.ax-banda h2{font-size:36px}.ax-dimension h3{font-size:36px}.ax-titulo{font-size:24px}.ax-resultados{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}.ax-resultado{border-left:0}}


/* ── Página (landing) ─────────────────────────────────── */
html{scroll-behavior:smooth}
body{margin:0}
body.ax-root{font-size:18px;line-height:1.6}
h1,h2,h3,h4,p,ul,ol{margin:0}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--space-6)}
section{padding:var(--space-9) 0}
.saltar{position:absolute;left:-999px;top:8px;background:var(--acento);color:var(--sobre-acento);padding:8px 14px;border-radius:var(--radius-sm);z-index:10}
.saltar:focus{left:8px}

/* Ritmo: las secciones alternas van sobre fondo-suave */
.plataforma,.ventajas,.capacidades,.demo,.planes,.modulos,.control{background:var(--fondo-suave)}
.sobre + .planes{background:var(--fondo-suave)}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--borde)}
.cabecera .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.cabecera nav{display:flex;align-items:center;gap:28px}
.cabecera nav a:not(.ax-btn){color:var(--texto-2);text-decoration:none;font-weight:600;font-size:15px}
.cabecera nav a:not(.ax-btn):hover,.cabecera nav a[aria-current="page"]{color:var(--acento-texto)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:var(--space-8) 0 var(--space-9);background:var(--fondo)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:center}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.035em;margin-top:16px}
.hero h1 i{font-style:normal;color:var(--acento-texto)}
.hero .ax-bajada{margin-top:24px}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.nota{margin-top:16px;font-size:14px;color:var(--texto-3)}
.hero .ax-chat,.hero .ax-actividad{max-width:440px;margin-left:auto;width:100%}
.hero .ax-chat{transform:rotate(1.2deg)}
.hero-arcos{position:absolute;right:-140px;top:-160px;width:560px;height:560px;pointer-events:none}
.hero-arcos .a1,.hero-arcos .a2{fill:none;stroke:var(--acento-suave);stroke-width:56}

/* Plataforma: mapa con hub y dos paneles */
.mapa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-7);align-items:stretch}
.mapa .ax-panel{display:flex;flex-direction:column;background:var(--superficie)}
.centro{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-6);text-align:center}
.centro .arriba,.centro .abajo{grid-column:1/-1}
.lado{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);line-height:1.6}
.lado--izq{justify-content:flex-end;text-align:right}
.lado--der{justify-content:flex-start;text-align:left}
.lado i{display:block;width:clamp(40px,8vw,120px);height:3px;background:var(--acento);border-radius:3px;position:relative}
.lado--izq i::before,.lado--der i::after{content:"";position:absolute;top:-6px;border:7.5px solid transparent}
.lado--izq i::before{left:-12px;border-right:10px solid var(--acento);border-left:0}
.lado--der i::after{right:-12px;border-left:10px solid var(--acento);border-right:0}
.en-accion{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2)}
.ax-hub{margin:0 auto}
.modulos-grilla{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.modulo{flex-direction:row;align-items:flex-start;gap:12px}
.modulo h4{margin:2px 0 4px}
.modulo ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5;color:var(--texto-2)}
.capacidades-lista{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;gap:10px}
.capacidades-lista .ax-card h4{font-size:16px}
.mas{margin:20px 0 0;font-size:15px;line-height:1.55;color:var(--texto-2)}
.salida{margin-top:auto;align-self:flex-start;position:relative;top:16px;margin-bottom:16px}

/* Resultados */
.resultados{padding-top:0;background:var(--fondo-suave)}
.resultados-bloque{text-align:center;border-top:1px solid var(--borde)}
.resultados-bloque .ax-pill{transform:translateY(-50%)}
.resultados-bloque .ax-resultados{margin-top:8px;font-size:16px}

/* Rubros y ventajas */
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--space-7)}
.ventajas .rejilla,.rejilla4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:var(--space-7)}
.rubro{flex-direction:row;align-items:flex-start;gap:16px}
.rubro h3,.ventaja h3{font:700 18px/1.3 var(--font-sans)}
.rubro p,.ventaja p{margin-top:6px;font-size:16px;line-height:1.5}
.ventaja{gap:0}
.ventaja h3{margin-top:18px}
.nota-rubro{margin-top:24px;text-align:center;color:var(--texto-2)}

/* FAQ */
.faq .lista{max-width:820px;margin:var(--space-7) auto 0;border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font:700 18px/1.35 var(--font-sans);color:var(--texto)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--acento-texto);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq summary:hover{color:var(--acento-texto)}
.faq details p{padding:0 4px 22px;font-size:17px;line-height:1.6;color:var(--texto-2);max-width:68ch}

/* Demo de chats */
.chats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:960px;margin:var(--space-7) auto 0;align-items:start}
.aclaracion{margin-top:20px;font-size:14px;color:var(--texto-3);text-align:center}

/* Planes */
.planes-grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--space-7)}
.creditos{display:flex;gap:16px;align-items:center;margin-top:24px;padding:20px 24px;border:1px dashed var(--borde-fuerte);border-radius:var(--radius-lg);background:var(--superficie)}
.creditos p{color:var(--texto-2);font-size:16px}
.creditos b{color:var(--texto)}

/* Cierre */
.cierre{padding:var(--space-8) 0}
.ax-banda > div{position:relative}
.cierre-arcos{width:360px;height:360px}
.cierre .acciones{flex-direction:column;align-items:flex-start;gap:14px;margin-top:0}
.cierre .ax-btn--wa{background:transparent;border-color:color-mix(in srgb,var(--sobre-banda) 55%,transparent);color:var(--sobre-banda)}
.cierre .ax-btn--wa:hover{background:color-mix(in srgb,var(--sobre-banda) 8%,transparent);border-color:var(--sobre-banda)}
.contacto{font-size:15px;opacity:.85}
.contacto a{color:var(--sobre-banda)}

/* Marca: símbolo + wordmark (cabecera y pie) */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marca__simbolo{width:30px;height:30px;display:block;flex:none}
.marca__simbolo .a1{stroke:#cc1269}
.marca__simbolo .a2{stroke:var(--texto)}
.marca--pie{gap:8px}
.marca--pie .marca__simbolo{width:24px;height:24px}

/* Pie */
.pie{padding:40px 0 56px;border-top:1px solid var(--borde);font-size:15px;color:var(--texto-2)}
.pie .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pie a{color:var(--texto-2);text-decoration:none}
.pie a:hover{color:var(--acento-texto)}
.pie .ax-wordmark{font-size:20px}
.pie nav{display:flex;gap:20px;flex-wrap:wrap}

/* Páginas legales (/terminos, /privacidad, /borrado-de-datos) */
.legal{padding:var(--space-8) 0 var(--space-9)}
.legal .wrap{max-width:820px}
.legal .actualizado{margin:12px 0 0;color:var(--texto-3);font-size:15px}
.legal .indice{margin:var(--space-6) 0 0;padding:var(--space-5);background:var(--fondo-suave);border:1px solid var(--borde);border-radius:var(--radius-md)}
.legal .indice ol{margin:8px 0 0;padding-left:20px;columns:2;column-gap:32px}
.legal .indice a{color:var(--texto-2)}
.legal h2{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:var(--space-7) 0 0;scroll-margin-top:96px}
.legal h3{font-size:17px;margin:var(--space-5) 0 0}
.legal p,.legal li{color:var(--texto-2);line-height:1.65}
.legal p{margin:12px 0 0}
.legal ul,.legal ol{margin:12px 0 0;padding-left:22px}
.legal li+li{margin-top:6px}
.legal a{color:var(--acento-texto)}
.legal strong{color:var(--texto)}
.legal .destacado{margin:var(--space-5) 0 0;padding:var(--space-4) var(--space-5);border-left:4px solid var(--acento);background:var(--acento-suave);border-radius:var(--radius-sm)}
.legal .destacado p{color:var(--texto)}
.legal .destacado p:first-child{margin-top:0}
@media (max-width:560px){.legal .indice ol{columns:1}.legal h2{font-size:20px}}

/* /agentes */
.canales{padding:0 0 var(--space-8)}
.canales .wrap{display:flex;align-items:center;justify-content:center;gap:24px 40px;flex-wrap:wrap}
.canales p{font:700 12px/1.4 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3)}
.canales ul{list-style:none;padding:0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.canales li{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--borde);border-radius:var(--radius-pill);font-weight:600;font-size:16px;color:var(--texto);background:var(--superficie)}
.canales li svg{width:18px;height:18px;color:var(--acento-texto)}
.dos-col{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-7)}
.pasos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:var(--space-7)}
.pasos li{position:relative;overflow:hidden;padding:28px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radius-lg)}
.pasos .num{display:block;font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1;color:var(--acento-texto)}
.pasos h3{margin-top:16px;font:700 18px/1.3 var(--font-sans)}
.pasos p{margin-top:8px;color:var(--texto-2);font-size:16px;line-height:1.55}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--space-7)}
.opcion{padding:32px;gap:0}
.opcion h3{margin-top:20px;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.015em}
.opcion p{margin-top:10px;font-size:16px;line-height:1.55}
.opcion .ax-btn{margin-top:16px;align-self:flex-start}

/* /sistema */
.ax-actividad .ax-icono{margin-top:2px}
.grupo{margin-top:var(--space-7)}
.grupo h3{font:700 12px/1.4 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2);padding-bottom:12px;border-bottom:1px solid var(--borde)}
.grupo .modulos-grilla{margin-top:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.base3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--space-7);padding:24px;background:var(--acento-suave);border-radius:var(--radius-lg)}
.base3 > div{display:flex;gap:14px;align-items:flex-start}
.base3 b{font-size:16px}
.base3 p{font-size:15px;line-height:1.5;color:var(--texto-2);margin-top:2px}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.split .capacidades-lista{margin:0}
.split .ax-btn{margin-top:28px}

/* Responsive */
@media (max-width:1100px){
  .mapa{grid-template-columns:1fr}
  .ventajas .rejilla,.rejilla,.rejilla4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chats{grid-template-columns:1fr;max-width:460px}
  .dos-col{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero .wrap,.split .wrap{grid-template-columns:1fr}
  .hero .ax-chat,.hero .ax-actividad{margin:0 auto;transform:none}
  .cabecera nav a:not(.ax-btn){display:none}
  section{padding:var(--space-8) 0}
  .planes-grilla,.pasos,.dos,.base3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 var(--space-5)}
  .ax-bajada{font-size:18px}
  body.ax-root{font-size:17px}
  .ventajas .rejilla,.rejilla,.rejilla4{grid-template-columns:1fr}
  .centro{grid-template-columns:1fr;gap:16px}
  .lado{justify-content:center}
  .lado i{display:none}
  .ax-hub{width:250px;height:250px}
  .ax-hub__disco{inset:30px}
  .ax-panel{padding:20px 14px}
  .cabecera .ax-btn{padding:0 14px;min-height:40px;font-size:14px}
  .cabecera .ax-wordmark{font-size:20px}
  .cabecera .marca__simbolo{width:24px;height:24px}
  .cabecera .marca{gap:8px}
  .modulos-grilla,.grupo .modulos-grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .modulo{flex-direction:column;gap:8px;padding:12px}
  .hero-arcos{width:360px;height:360px;right:-160px;top:-120px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.faq summary svg{transition:none}}