/* Generado por herramientas/convertir_front.py — NO editar.
   Nucleo compartido por las 178 paginas: tokens + base + sections.
   Los cambios van en las hojas fuente de css/. */

/* ===== tokens.css ===== */
/* ==========================================================================
   Securex — Design tokens
   Fuente de verdad de la marca: color, sombra, radio, tipografía y motion.
   Todo lo demás (base.css, sections.css) consume estas variables con
   var(--sx-*). Regla: nunca hardcodees un hex fuera de este archivo.
   ========================================================================== */
:root{
  /* Marca — azul Securex */
  --sx-blue:#1077FD;
  /* SOLO para texto chico. El azul de marca sobre blanco da 4.13:1 y AA pide
     4.5 en texto normal, asi que en una etiqueta de 12px o un enlace de 14px
     este azul un paso mas oscuro (5.60:1) se lee mejor y casi no se distingue.

     NO va en botones, fondos, bordes, degradados ni titulares. Ahi manda
     --sx-blue: es el color que la gente reconoce como el de Securex, y en
     titulares grandes AA pide 3:1, que el #1077FD cumple de sobra.
     (Edson lo pidio explicitamente el 23-ago-2026 al ver el boton primary con
     este azul: en reposo se veia como el estado hover.) */
  --sx-blue-texto:#0060E0;
  --sx-blue-dark:#004CAE;
  --sx-blue-mid:#93C2FF;
  --sx-blue-light:#DFEDFF;
  --sx-blue-hover:#0060E0;
  --sx-cyan:#46E9FE;      /* acento del degradado Securex */
  --sx-cyan-medio:#22B9F2;/* cyan del ícono de cerrar de los popups en producción */
  --sx-fondo-celeste:#EAF4FE;
  --sx-fondo-card-azul:#EFF6FF;

  /* Seculukas — morado, solo para fidelidad */
  --sx-purple:#5543FF;
  --sx-purple-light:#C2A7FF;
  --sx-purple-bg:#F1EBFF;

  /* Neutrales y texto */
  --sx-text:#373737;
  /* Sobre blanco #6B7280 pasaba (4.83:1), pero este gris tambien cae sobre las
     tarjetas tintadas del sitio (#EFF6FF, #F5F0FF, #F3F4F6) y ahi bajaba a
     4.33-4.44, debajo del 4.5. Un punto mas oscuro pasa en todas: 5.35:1 en la
     peor y 6.03:1 sobre blanco. Sigue siendo el gris secundario, no el de
     texto principal. */
  --sx-text-muted:#5B6472;
  /* Rampa de grises de apoyo. Este archivo declara "nunca hardcodees un hex
     fuera de aca", pero como no habia rampa cada hoja invento la suya: 110
     declaraciones locales que son alias del mismo valor, con #F9FAFB bajo 12
     nombres distintos y #9CA3AF bajo otros 12. Los nombres locales siguen
     valiendo, pero ahora apuntan aca. */
  --sx-gris-fondo:#F9FAFB;   /* fondo de tarjeta y de fila alterna */
  --sx-gris-linea:#E8ECF1;   /* bordes y separadores suaves */
  --sx-gris-sobre:#9CA3AF;   /* texto secundario sobre fondo oscuro */
  --sx-azul-fondo:#DBEAFE;   /* relleno azul muy claro */
  --sx-rojo:#DC2626;         /* rojo de accion (borrar, error de formulario) */
  --sx-gris-plus:#7F879B;
  --sx-gris-0:#B8BECC;
  --sx-gris-minus:#D9DCE2;
  --sx-white:#FFFFFF;
  --sx-border:#E8EDF5;
  --sx-input-border:#E5E7EB;

  /* Estado — color de acento + fondo de la variante */
  --sx-success:#0F7839;   --sx-success-bg:#CCF8DE;
  /* auth.css escribia var(--sx-ok) y var(--sx-ok-text): ninguno
     de los dos existia, asi que caia siempre al fallback y se leia como si
     estuviera tokenizado. Ahora existen y son los verdes que ya usaba. */
  --sx-ok:#16A34A;        --sx-ok-text:#15803D;
  --sx-warning:#7D6A00;   --sx-warning-bg:#FFEFCB;
  --sx-error:#960821;     --sx-error-bg:#FFE2E2;
  /* #E85252 sobre su propio fondo #FDECEA daba 3.19:1. El punto que late se
     queda con este rojo; lo que se oscurece es la palabra VIVO, que es texto.
     4.76:1. */
  --sx-vivo:#E85252;
  --sx-vivo-texto:#C0392B;

  /* Canales del azul y del cian, para las sombras y los fondos translucidos.
     Sin esto el azul se escribia como rgba(var(--sx-blue-rgb),...) 78 veces y el cian
     66: si el tono se mueve, quedan 144 sombras en el color viejo. El patron ya
     existia pero local y duplicado (--secu-blue-rgb y --comp-blue-rgb, el mismo
     valor, declarados con 1364 lineas de distancia dentro de home.css). */
  --sx-blue-rgb:16,119,253;
  --sx-cyan-rgb:70,233,254;

  /* Escala tipografica. Antes no habia ninguna y quedaron 34 valores px
     distintos sueltos, con medios pixeles que nadie eligio (13.5px en 6
     archivos, 12.5px, 16.5px). Sin escala no hay forma de migrar a rem de una
     pasada, que es lo que hace falta para que el cuerpo responda al tamano de
     fuente del navegador. */
  --sx-fs-xs:12px;
  --sx-fs-sm:14px;
  --sx-fs-base:16px;
  --sx-fs-md:18px;
  --sx-fs-lg:20px;
  --sx-fs-xl:24px;

  /* Gradientes */
  --sx-grad-securex:linear-gradient(135deg,#1077FD,#46E9FE);
  /* Mismo degradado de marca en las direcciones que piden las barras:
     -h para barras horizontales (progreso de lectura), -v para rieles verticales
     (tabla de contenido). Un solo par de colores, tres orientaciones. */
  --sx-grad-securex-h:linear-gradient(90deg,#1077FD,#46E9FE);
  --sx-grad-securex-v:linear-gradient(180deg,#1077FD,#46E9FE);
  --sx-grad-seculukas:linear-gradient(135deg,#1077FD,#6F2EFF);

  /* Sombras */
  --sx-shadow-card:0 4px 24px rgba(15,23,41,.06),0 1px 4px rgba(15,23,41,.04);
  --sx-shadow-hover:0 10px 30px rgba(var(--sx-blue-rgb),.18);
  /* El glow del CTA va en dos capas con spread NEGATIVO: la capa ancha se
     encoge antes de difuminarse, asi el halo sigue la forma de la pildora en
     vez de florecer en un rectangulo alrededor. Antes era una sola sombra de
     32px de blur sin spread, que en botones anchos leia como un bloque. */
  --sx-shadow-cta:0 3px 8px rgba(var(--sx-blue-rgb),.26), 0 12px 26px -10px rgba(var(--sx-blue-rgb),.5);
  --sx-shadow-cta-rest:0 2px 6px rgba(var(--sx-blue-rgb),.18), 0 8px 18px -8px rgba(var(--sx-blue-rgb),.32);

  /* Radios */
  --sx-r-btn:8px;      /* botones del app */
  --sx-r-input:14px;
  --sx-r-card:20px;
  --sx-r-pill:999px;

  /* Tipografía */
  --sx-font-title:'Stratos','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --sx-font-body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* Motion — curvas de easing compartidas */
  --sx-ease:cubic-bezier(0.16,1,0.3,1);
  --sx-ease-smooth:cubic-bezier(0.165,0.84,0.44,1);
}


/* ===== base.css ===== */
/* ==========================================================================
   Securex Home (estática) — base
   Capa compartida por todas las páginas: reset, layout (contenedor/sección),
   componentes reutilizables (botón, card, badge en vivo) y las animaciones de
   entrada. Consume los tokens de tokens.css; no hardcodea hex propios.
   ========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sx-font-body);
  color:var(--sx-text);
  background:var(--sx-white);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--sx-font-title);color:var(--sx-text);line-height:1.1;letter-spacing:-0.02em}

/* ── Layout — contenedor y sección ─────────────────────────────────────── */
.sx-container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.sx-section{padding:80px 0}
@media (max-width:767.98px){.sx-section{padding:56px 0}}

/* ── Botones ───────────────────────────────────────────────────────────── */
/* Línea gráfica: Roboto 700 uppercase, tracking .08em, forma pill. */
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sx-font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;border-radius:var(--sx-r-pill);white-space:nowrap;
  transition:transform .18s var(--sx-ease),box-shadow .3s var(--sx-ease);
}
.sx-btn:active{transform:scale(.96)}
/* El login usa aria-disabled en vez de disabled para seguir siendo enfocable y
   anunciable (un boton disabled no lo es). El estilo tiene que cubrir las dos
   formas o el boton se ve activo cuando no lo esta. */
.sx-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.sx-btn[aria-disabled="true"]:active{transform:none}
/* El nowrap de arriba esta bien en pantallas normales, pero en un grid de
   columnas 1fr el min-content del boton se vuelve el piso de TODA la columna:
   "Calcular gratificacion" mide 294px y hacia desbordar la pagina 84px a 280px.
   Debajo de 480 el texto puede partirse. */
@media (max-width:479.98px){
  .sx-btn{white-space:normal;text-align:center;line-height:1.25;min-width:0}
  .sx-btn--sm,.sx-btn--md,.sx-btn--lg{height:auto;min-height:44px;padding-top:10px;padding-bottom:10px}
}
.sx-btn--sm{height:40px;padding:0 18px;font-size:13px}
.sx-btn--md{height:52px;padding:0 24px;font-size:15px}
.sx-btn--lg{height:60px;padding:0 32px;font-size:16px}
/* Primary: reveal circular del azul oscuro desde el centro al hover (sin Framer). */
.sx-btn--primary{
  color:#fff;background-color:var(--sx-blue);
  background-image:radial-gradient(circle,var(--sx-blue-hover) 0,var(--sx-blue-hover) 100%);
  background-repeat:no-repeat;background-position:center;background-size:0 0;
  box-shadow:var(--sx-shadow-cta-rest);
  transition:background-size .38s var(--sx-ease-smooth),box-shadow .3s var(--sx-ease),transform .18s var(--sx-ease);
}
.sx-btn--primary:hover{background-size:250% 250%;box-shadow:var(--sx-shadow-cta);transform:translateY(-1px)}
/* El :active ya baja la escala; se re-declara para que gane al translate del hover. */
.sx-btn--primary:active{transform:translateY(0) scale(.96)}
.sx-btn--secondary{color:var(--sx-blue-texto);background:transparent;border:2px solid var(--sx-blue)}
.sx-btn--secondary:hover{background:var(--sx-blue-light)}
.sx-btn--tertiary{color:var(--sx-blue-texto);background:var(--sx-fondo-card-azul)}
.sx-btn--tertiary:hover{background:var(--sx-blue-light)}


/* ── Badge "en vivo" (tasa del día) ────────────────────────────────────── */
.sx-vivo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sx-text)}
.sx-vivo::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sx-vivo);animation:sx-pulse 1.6s ease-out infinite}
@keyframes sx-pulse{0%{box-shadow:0 0 0 0 rgba(232,82,82,.5)}70%{box-shadow:0 0 0 8px rgba(232,82,82,0)}100%{box-shadow:0 0 0 0 rgba(232,82,82,0)}}

/* ── Reveal on scroll (js/base.js añade .is-visible vía IntersectionObserver) */
.sx-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--sx-ease),transform .7s var(--sx-ease)}
.sx-reveal.is-visible{opacity:1;transform:none}
.sx-reveal[data-delay="1"]{transition-delay:.08s}
.sx-reveal[data-delay="2"]{transition-delay:.16s}
.sx-reveal[data-delay="3"]{transition-delay:.24s}
.sx-reveal[data-delay="4"]{transition-delay:.32s}
.sx-reveal[data-delay="5"]{transition-delay:.40s}

/* ── Foco de teclado (accesibilidad) ───────────────────────────────────── */
/* :focus-visible solo se dispara al navegar con teclado, no con el mouse. */
:focus-visible{ outline:2px solid var(--sx-blue); outline-offset:2px; }
/* Los campos ya marcan el foco con su propio borde azul; sumarles el anillo
   producía un doble contorno duro. Acá se refuerza ese halo —visible pero
   suave— y el outline transparente conserva el indicador en modo de alto
   contraste del sistema, donde las sombras no se pintan. */
/* El !important es a propósito: base.css se carga ANTES que los CSS de página,
   así que sin él cualquier `.x input` con la misma especificidad lo pisaría y el
   campo quedaría sin indicador de foco. Solo se fuerza el halo — el color del
   borde lo sigue decidiendo la página, para no tapar el estado de error. */
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid transparent; outline-offset:2px;
  box-shadow:0 0 0 3px rgba(var(--sx-blue-rgb),.26) !important;
}

/* ── Skip-link (saltar al contenido) ───────────────────────────────────── */
/* Fondo azul oscuro (no el azul de marca): blanco sobre --sx-blue da 4.13:1 y
   no llega al mínimo AA de 4.5:1; --sx-blue-dark lo pasa con holgura. */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--sx-blue-dark); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-family:var(--sx-font-body); font-weight:600; text-decoration:none; }
.skip-link:focus{ left:0; }

/* ── Accesibilidad — respeta "reducir movimiento" del sistema ──────────── */
/* !important justificado: anula cualquier animación/transición declarada aguas abajo. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* ::before/::after explícitos: '*' NO matchea pseudo-elementos, y ahí viven
     animaciones como el punto pulsante de .sx-vivo (presente en todo el sitio). */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sx-reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Modal "¿cómo crear tu cuenta?" — se abre al tocar cualquier enlace de
   registro (navbar, empresas, login, herramientas). El markup lo crea js/base.js
   la primera vez, así no se repite en las 175 páginas. Prefijo: .regc-
   ========================================================================== */
.regc{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.regc[hidden]{display:none}

/* El unico [hidden] global del proyecto. Vivia en auth.css y llegaba al bundle
   de rebote: cualquier pagina que no cargara auth.css se quedaba sin el, y una
   clase de autor con display:flex le ganaba al [hidden] del user-agent. Paso
   que .lupa2-form-ok mostrara el mensaje de exito antes de enviar el formulario.
   Aca es intencional y sobrevive al reparto del CSS por pagina. */
[hidden]{ display:none !important; }

/* Todo lo que pinta datos que vienen de afuera (correos, CCI de 20 digitos,
   codigos de cupon, razones sociales de SUNAT) puede traer una cadena sin
   espacios. Una de 68 caracteres llevaba el scrollWidth de /consulta-ruc de
   320 a 634px. */
body{overflow-wrap:break-word}

/* Texto solo para lectores de pantalla. Estaba declarado dos veces con prefijos
   distintos (.hero-sr-only en home.css, .emp-sr-only en page-empresas.css) y
   ninguno llegaba al registro. Una sola definicion, en el nucleo. */
.sx-sr-only,.hero-sr-only,.emp-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;
}
.regc-backdrop{position:absolute;inset:0;background:rgba(8,17,33,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .28s var(--sx-ease)}
.regc.is-open .regc-backdrop{opacity:1}
.regc-dialog{
  position:relative;width:100%;max-width:460px;background:var(--sx-white);
  border-radius:24px;padding:clamp(26px,4vw,34px);
  box-shadow:0 24px 70px rgba(8,17,33,.28);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .3s var(--sx-ease),transform .3s var(--sx-ease);
}
.regc.is-open .regc-dialog{opacity:1;transform:none}
.regc-close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* #6B7280 sobre #F3F4F6 da 4.39:1, justo debajo del 4.5. Es la X de cerrar
     el modal: si no se ve, la persona queda encerrada en el dialogo. */
  background:#F3F4F6;border:none;color:#4B5563;cursor:pointer;
  transition:background .18s var(--sx-ease),transform .18s var(--sx-ease);
}
.regc-close:hover{background:#E5E7EB;transform:scale(1.02)}
.regc-close:active{transform:scale(.94)}
.regc-title{font-family:var(--sx-font-title);font-weight:800;font-size:clamp(21px,2.6vw,26px);line-height:1.2;color:var(--sx-text);margin:0 0 6px;padding-right:34px}
.regc-sub{font-family:var(--sx-font-body);font-size:14px;line-height:1.5;color:var(--sx-text-muted);margin:0 0 22px}
.regc-opts{display:flex;flex-direction:column;gap:12px}
.regc-opt{
  display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;
  border:1.5px solid var(--sx-border);background:var(--sx-white);text-decoration:none;
  transition:border-color .18s var(--sx-ease),box-shadow .18s var(--sx-ease),transform .18s var(--sx-ease);
}
.regc-opt:hover{transform:translateY(-2px)}
.regc-opt--wa:hover{border-color:#25D366;box-shadow:0 10px 26px rgba(37,211,102,.16)}
.regc-opt--web:hover{border-color:var(--sx-blue);box-shadow:0 10px 26px rgba(var(--sx-blue-rgb),.14)}
.regc-ico{width:48px;height:48px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.regc-opt--wa .regc-ico{background:#25D366}
.regc-opt--web .regc-ico{background:var(--sx-fondo-card-azul)}
.regc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.regc-txt strong{font-family:var(--sx-font-body);font-weight:700;font-size:16px;color:var(--sx-text);line-height:1.25}
.regc-txt span{font-family:var(--sx-font-body);font-size:13px;color:var(--sx-text-muted);line-height:1.4}
.regc-chev{color:#C4C9D2;flex-shrink:0}
.regc-foot{font-family:var(--sx-font-body);font-size:12px;color:var(--sx-text-muted);text-align:center;margin:18px 0 0}
@media (max-width:480px){
  .regc-dialog{max-width:100%;border-radius:20px}
  .regc-opt{padding:14px}
}


/* ===== sections.css ===== */
/* ===== navbar ===== */
/* ==========================================================================
   Securex Home — Navbar (barra de navegación)  ·  prefijo: .nav-
   Fuente: components/layout/Navbar.tsx (variante Home / Personas).
   Reusa tokens de tokens.css y el sistema de botones .sx-btn de base.css.
   Colapsa a hamburguesa < 1280px (breakpoint xl del original).
   ========================================================================== */

/* ── Header fijo (sticky) ─────────────────────────────────────────────── */
.nav-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--sx-white);
  border-bottom:1px solid var(--sx-border);
  box-shadow:none;
  transition:transform .45s var(--sx-ease), opacity .45s var(--sx-ease),
             box-shadow .35s ease, background .5s ease, border-color .5s ease;
  animation:nav-slide-in .5s cubic-bezier(.65,.05,0,1);
}
/* Al hacer scroll: fondo translúcido + blur + sombra */
.nav-header.is-scrolled{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 4px 20px rgba(0,0,0,.07);
}
/* Oculta al bajar / muestra al subir */
.nav-header.is-hidden{ transform:translateY(-100%); opacity:0; }

.nav-bar{
  display:flex; align-items:stretch;
  width:100%; max-width:1400px; margin:0 auto;
  height:68px; padding:0 16px;
  transition:height .35s var(--sx-ease);
}

/* ── Logo + Tabs ──────────────────────────────────────────────────────── */
.nav-left{ display:flex; align-items:center; flex-shrink:0; }
.nav-logo{
  display:flex; align-items:center; flex-shrink:0;
  transition:transform .3s var(--sx-ease);
}
.nav-logo:hover{ transform:scale(1.06); }
.nav-logo:active{ transform:scale(.92); }
.nav-logo-img{
  height:26px; width:auto;
  animation:nav-in-x-left .55s var(--sx-ease) .05s both;
}

.nav-tabs{ display:none; }

.nav-tab{
  position:relative; display:flex; align-items:center;
  padding:0 16px;
  font-family:var(--sx-font-body); font-weight:500; font-size:16px; line-height:20px;
  text-transform:uppercase; color:var(--sx-text);
  transition:color .3s ease;
}
.nav-tab:hover{ color:var(--sx-blue-texto); }
.nav-tab.is-active{ color:var(--sx-blue-texto); }
/* Subrayado del tab activo: pegado al borde inferior del navbar (no al texto),
   solapando el border-bottom del header. */
.nav-tab.is-active::after{
  content:""; position:absolute; bottom:-1px; left:16px; right:16px;
  height:2.5px; border-radius:99px;
  background:linear-gradient(90deg, var(--sx-blue), var(--sx-purple));
}

/* ── Center links + Herramientas ──────────────────────────────────────── */
.nav-center{ display:none; }

.nav-link,
.nav-tools-btn{
  position:relative; display:flex; align-items:center; gap:4px;
  padding:8px 20px; margin-bottom:-1px;
  font-family:var(--sx-font-body); font-weight:400; font-size:16px;
  color:var(--sx-text); background:none; border:none; cursor:pointer;
  border-radius:var(--sx-r-pill);
  transition:color .25s ease, background .25s ease;
}
.nav-link:hover,
.nav-tools:hover .nav-tools-btn,
.nav-tools.is-open .nav-tools-btn{
  color:var(--sx-blue-texto); background:var(--sx-fondo-card-azul);
}
.nav-link.is-active,
.nav-tools-btn.is-active{ color:var(--sx-blue-texto); font-weight:500; background:none; }
.nav-link.is-active::after,
.nav-tools-btn.is-active::after{
  content:""; position:absolute; bottom:-1px; left:6px; right:6px;
  height:2.5px; border-radius:99px; background:var(--sx-grad-securex);
}

/* Dropdown Herramientas */
.nav-tools{ position:relative; }
.nav-tools-caret{ display:flex; margin-top:1px; transition:transform .25s var(--sx-ease); }
.nav-tools:hover .nav-tools-caret,
.nav-tools.is-open .nav-tools-caret{ transform:rotate(180deg); }

.nav-tools-menu{
  position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.96);
  transform-origin:top center;
  min-width:220px; padding:6px;
  background:var(--sx-white);
  border:1px solid var(--sx-border); border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  opacity:0; visibility:hidden; pointer-events:none; z-index:100;
  transition:opacity .2s var(--sx-ease), transform .2s var(--sx-ease), visibility .2s;
}
/* Puente invisible que cubre el gap de 6px entre el botón y el menú: así, al
   mover el cursor del botón al menú, sigue sobre .nav-tools (:hover) y el
   dropdown no se cierra a medio camino. */
.nav-tools-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}
.nav-tools:hover .nav-tools-menu,
.nav-tools.is-open .nav-tools-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav-tools-item{
  display:flex; align-items:center;
  padding:11px 14px; border-radius:10px;
  font-family:var(--sx-font-body); font-weight:400; font-size:15px;
  color:var(--sx-text); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.nav-tools-item:hover{ background:var(--sx-fondo-card-azul); color:var(--sx-blue-texto); }

/* ── CTA (desktop) ────────────────────────────────────────────────────── */
.nav-cta{ display:none; align-items:center; gap:12px; flex-shrink:0; }
/* Mismo ancho en los dos: el largo del texto los dejaba disparejos
   ("Iniciar sesión" 178px vs "Regístrate" 148px). */
.nav-cta-btn{ text-decoration:none; min-width:178px; justify-content:center; }

/* ── Hamburguesa ──────────────────────────────────────────────────────── */
.nav-burger{
  display:flex; align-items:center; justify-content:center;
  align-self:center; flex-shrink:0; margin-left:auto;
  width:44px; height:44px;
  color:var(--sx-blue-texto); background:none; border:none; cursor:pointer;
  transition:transform .18s var(--sx-ease);
}
.nav-burger:active{ transform:scale(.85); }
.nav-burger-icon{ display:flex; align-items:center; justify-content:center;
  transition:opacity .22s var(--sx-ease), transform .22s var(--sx-ease); }
.nav-burger-icon--close{ position:absolute; opacity:0; transform:rotate(90deg) scale(.6); }
.nav-burger.is-active .nav-burger-icon--menu{ opacity:0; transform:rotate(-90deg) scale(.6); }
.nav-burger.is-active .nav-burger-icon--close{ opacity:1; transform:rotate(0) scale(1); }

/* ── Menú móvil (overlay) ─────────────────────────────────────────────── */
.nav-mobile{
  position:fixed; top:0; left:0; right:0; z-index:40;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:20px 24px 32px;
  background:var(--sx-white);
  box-shadow:0 16px 48px rgba(var(--sx-blue-rgb),.10), 0 4px 16px rgba(0,0,0,.06);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-16px) scale(.98);
  transition:opacity .28s var(--sx-ease), transform .28s var(--sx-ease), visibility .28s;
}
.nav-mobile.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }

/* El cajon movil ocupa todo el ancho, y el nav de escritorio recien entra a los
   1280: entre medio (una tablet apaisada, una ventana de portatil, el navegador
   con las devtools abiertas al costado) los CTA se estiraban a 1231px y quedaba
   una pastilla azul de lado a lado. Nunca tuvo tope; se nota ahora porque el
   corte del nav esta alto.
   Debajo de 640 no cambia nada: en un telefono la columna ya es mas angosta que
   el tope. De ahi para arriba el contenido se centra y el panel sigue full
   bleed, que es lo que hace que se lea como un menu y no como una pagina. */
@media (min-width:640px){
  .nav-mobile > *{ width:100%; max-width:520px; margin-left:auto; margin-right:auto; }
}

.nav-mobile-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.nav-mobile-close{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  color:var(--sx-blue-texto); background:none; border:none; cursor:pointer;
  transition:transform .18s var(--sx-ease);
}
.nav-mobile-close:active{ transform:scale(.85); }

.nav-mobile-cta{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.nav-mobile-cta-btn{ width:100%; text-decoration:none; }

.nav-mobile-tabs{ display:flex; gap:0; margin-bottom:8px; border-bottom:1px solid var(--sx-border); }
.nav-mobile-tab{
  padding:10px 20px; margin-bottom:-1px;
  font-family:var(--sx-font-body); font-weight:700; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  color:var(--sx-gris-plus); border-bottom:2.5px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav-mobile-tab.is-active{ color:var(--sx-blue-texto); border-bottom-color:var(--sx-blue); }

.nav-mobile-link{
  display:block; padding:14px 0;
  font-family:var(--sx-font-body); font-weight:500; font-size:16px;
  letter-spacing:.01em; color:var(--sx-text); text-decoration:none;
  border-bottom:1px solid var(--sx-border);
  transition:color .18s ease, transform .18s ease;
}
.nav-mobile-link:hover{ color:var(--sx-blue-texto); transform:translateX(4px); }

/* Herramientas colapsable (móvil) */
.nav-mtools-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:left; padding:14px 0;
  font-family:var(--sx-font-body); font-weight:500; font-size:16px;
  color:var(--sx-text); background:none; border:none; cursor:pointer;
  border-bottom:1px solid var(--sx-border);
}
.nav-mtools-caret{ display:flex; color:var(--sx-blue-texto); transition:transform .25s var(--sx-ease); }
.nav-mtools.is-open .nav-mtools-caret{ transform:rotate(180deg); }
.nav-mtools-panel{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .28s var(--sx-ease);
}
.nav-mtools.is-open .nav-mtools-panel{ grid-template-rows:1fr; }
.nav-mtools-inner{ min-height:0; overflow:hidden; }
.nav-mtools-item{
  display:flex; align-items:center; gap:8px;
  padding:11px 0 11px 16px;
  font-family:var(--sx-font-body); font-weight:400; font-size:15px;
  color:var(--sx-blue-texto); text-decoration:none;
  border-bottom:1px solid var(--sx-fondo-card-azul);
  transition:color .18s ease, transform .18s ease;
}
.nav-mtools-item:hover{ color:var(--sx-blue-dark); transform:translateX(4px); }
.nav-mtools-dot{ width:4px; height:4px; border-radius:50%; background:var(--sx-blue); flex-shrink:0; }

/* Bloqueo de scroll del body cuando el menú móvil está abierto */
body.nav-lock{ overflow:hidden; }

/* ── Desktop ≥ 1280px (xl) ────────────────────────────────────────────── */
@media (min-width:1024px){ .nav-bar{ padding:0 24px; } }

@media (min-width:1280px){
  .nav-bar{ height:72px; padding:0 40px; }
  .nav-header.is-scrolled .nav-bar{ height:62px; }

  .nav-logo{ margin-right:32px; }
  /* Tabs a todo el alto del navbar: así el subrayado activo cae al borde inferior. */
  .nav-tabs{ display:flex; align-items:stretch; align-self:stretch; }
  .nav-center{
    display:flex; flex:1 1 auto; align-items:center; justify-content:center; gap:4px;
  }
  .nav-cta{ display:flex; }
  .nav-burger{ display:none; }

  /* Entradas escalonadas (solo desktop, donde estos grupos son visibles) */
  .nav-tabs{  animation:nav-in-y .5s var(--sx-ease) .14s both; }
  .nav-center{animation:nav-in-y .5s var(--sx-ease) .22s both; }
  .nav-cta{   animation:nav-in-x-right .55s var(--sx-ease) .18s both; }
}

/* Rango angosto 1280–1439: paddings más compactos (isNarrow del original) */
@media (min-width:1280px) and (max-width:1439px){
  .nav-logo{ margin-right:16px; }
  .nav-tab{ padding:0 12px; }
  .nav-link, .nav-tools-btn{ padding:8px 12px; }
  .nav-center{ gap:0; }
  .nav-cta{ gap:8px; }
}

/* ── Keyframes ────────────────────────────────────────────────────────── */
@keyframes nav-slide-in{ from{ opacity:0; transform:translateY(-90px); } to{ opacity:1; transform:translateY(0); } }
@keyframes nav-in-x-left{  from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:translateX(0); } }
@keyframes nav-in-x-right{ from{ opacity:0; transform:translateX(24px); }  to{ opacity:1; transform:translateX(0); } }
@keyframes nav-in-y{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion:reduce){
  .nav-header,
  .nav-logo-img,
  .nav-tabs,
  .nav-center,
  .nav-cta{ animation:none; }
  .nav-header.is-hidden{ transform:none; opacity:1; }
}

/* ===== footer ===== */
/* ==========================================================================
   Securex Home — FOOTER
   Sección oscura del pie. Prefijo de clases: foot-
   Los neutrales oscuros del footer NO existen en tokens.css, así que se
   declaran una sola vez como variables locales scopeadas a .foot.
   Todo lo demás usa var(--sx-*).
   ========================================================================== */
.foot{
  /* Paleta local (dark) — declarada una vez, no se hardcodea suelta */
  --foot-bg:#171717;
  --foot-heading:#FFFFFF;
  /* Era --sx-text-muted (#6B7280): 4.83:1 sobre blanco, pero 3.71:1 sobre el
     negro del pie, y de aca cuelga la linea del ISO en las 177 paginas. El
     mismo gris que ya usa --foot-muted da 7.06:1. */
  --foot-icon:var(--sx-gris-sobre);      /* íconos de contacto e ISO subtítulo */
  --foot-muted:var(--sx-gris-sobre);     /* texto de contacto y enlaces (reposo) */
  /* #4B5563 daba 2.35:1 contra el fondo del footer: es el color del RUC, la
     razon social y el copyright en las 177 paginas. El --foot-muted de aca al
     lado ya da 6.99:1, asi que se corrige sin tocar identidad. */
  --foot-dim:var(--sx-gris-sobre);       /* datos legales y copyright */
  --foot-border:#2A2A2A;    /* bordes y divisores */
  --foot-chip:#252525;      /* botones de tienda */
  --foot-chip-hover:#303030;

  background:var(--foot-bg);
  color:var(--sx-white);
  font-family:var(--sx-font-body);
}

.foot-inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:48px 20px 32px;      /* mobile */
}

/* --- Grid principal --- */
.foot-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-bottom:40px;
}

.foot-col{min-width:0}

/* --- Col 1: Contacto --- */
.foot-logo{margin-bottom:28px}
.foot-logo img{height:28px;width:auto}

.foot-contact-list{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.foot-contact-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.foot-contact-ico{
  color:var(--foot-icon);
  margin-top:3px;
  flex-shrink:0;
}
.foot-contact-text{
  font-weight:300;
  font-size:14px;
  color:var(--foot-muted);
  line-height:1.4;
}

/* --- Íconos monolínea (Feather, stroke 2) --- */
.foot-ico{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* --- Encabezados de columna --- */
.foot-heading{
  font-weight:700;
  font-size:15px;
  color:var(--foot-heading);
  margin-bottom:16px;
}
.foot-heading--app{margin-bottom:14px}

/* --- Col 2: Redes sociales --- */
.foot-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.foot-social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  flex-shrink:0;
  opacity:.6;
  transition:transform .2s var(--sx-ease),opacity .2s var(--sx-ease);
}
/* Área táctil >=44px sin cambiar el tamaño visible (36px). El gap es 10px,
   así que expandir 4px por lado no solapa con los íconos vecinos. */
.foot-social-link::before{
  content:"";
  position:absolute;
  inset:-4px;
}
.foot-social-link:hover{
  transform:scale(1.18);
  opacity:1;
}
.foot-social-link:active{transform:scale(.9);opacity:1}
.foot-social-svg{
  width:20px;
  height:20px;
  fill:var(--sx-white);
}

/* --- Col 2: Botones de tienda --- */
.foot-apps{
  display:flex;
  gap:10px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.foot-app-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;                 /* mobile */
  background:var(--foot-chip);
  border:1px solid var(--foot-border);
  border-radius:10px;
  transition:transform .18s var(--sx-ease),background-color .18s var(--sx-ease);
}
.foot-app-btn:hover{
  transform:scale(1.04);
  background:var(--foot-chip-hover);
}
.foot-app-btn:active{transform:scale(.96)}
.foot-app-svg{width:20px;height:20px;fill:var(--sx-white);flex-shrink:0}
.foot-app-svg--play{width:18px;height:18px}
.foot-app-label{
  font-weight:500;
  font-size:13px;
  color:var(--sx-white);
}

/* --- Col 2: Datos legales --- */
.foot-legal{
  font-weight:400;
  font-size:13px;
  color:var(--foot-dim);
  line-height:1.5;
}

/* --- Cols 3 y 4: Enlaces / Herramientas --- */
.foot-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.foot-link{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;                /* fila táctil >=44px; el texto sigue en 14px */
  font-weight:300;
  font-size:14px;
  color:var(--foot-muted);
  transition:transform .22s var(--sx-ease),color .22s var(--sx-ease);
}
.foot-link:hover{
  transform:translateX(5px);
  color:var(--sx-white);
}
.foot-link-ico{
  width:14px;
  height:14px;
  flex-shrink:0;
  color:inherit;      /* stroke sigue el color del texto (muted -> blanco al hover) */
}
.foot-link-label{color:inherit}

/* --- Fila ISO --- */
.foot-iso{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:20px 0;                   /* mobile */
  border-top:1px solid var(--foot-border);
  border-bottom:1px solid var(--foot-border);
  margin-bottom:24px;
}
.foot-iso-img{height:72px;width:auto;flex-shrink:0}
.foot-iso-divider{
  width:1px;
  height:56px;
  background:var(--foot-border);
  flex-shrink:0;
}
.foot-iso-title{
  font-weight:700;
  font-size:14px;
  color:var(--foot-heading);
  letter-spacing:-0.01em;
  margin:0 0 4px;
}
.foot-iso-sub{
  font-weight:300;
  font-size:12px;
  color:var(--foot-icon);
  margin:0;
}

/* --- Bottom bar --- */
.foot-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
}
.foot-copy{
  font-weight:300;
  font-size:13px;
  color:var(--foot-dim);
  margin:0;
  text-align:center;
}

/* ==========================================================================
   Tablet (>=768px) — 2 columnas; Enlaces y Herramientas ocupan fila completa
   ========================================================================== */
@media (min-width:768px){
  .foot-inner{padding:56px 32px 36px}
  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
  .foot-col--links,
  .foot-col--tools{grid-column:span 2}

  .foot-social-link{width:44px;height:44px}
  .foot-app-btn{padding:12px 18px}
  .foot-iso{padding:24px 0}
  .foot-iso-title{font-size:15px}
  .foot-iso-sub{font-size:13px}
}

/* ==========================================================================
   Desktop (>=1280px) — 4 columnas
   ========================================================================== */
@media (min-width:1280px){
  .foot-inner{padding:64px 40px 40px}
  .foot-grid{
    grid-template-columns:repeat(4,1fr);
    gap:40px;
  }
  .foot-col--links{grid-column:3 / span 1}
  .foot-col--tools{grid-column:4 / span 1}

  .foot-iso-title{font-size:16px}
}

/* ===== floatctas ===== */
/* ==========================================================================
   Securex Home — CTAs FLOTANTES (FloatingCTA + WhatsAppCTA)
   Prefijo: fab-  ·  Usa tokens de tokens.css. Los pocos valores literales
   (verde WhatsApp, gradiente cyan bespoke del pill, estado en línea) son
   colores de marca EXTERNA sin token equivalente — centralizados aquí como
   variables locales y marcados como intencionales (igual que el <FloatingCTA>
   original, "intencionalmente fuera del sistema oficial").
   ========================================================================== */
.fab-cta,
.fab-wa,
.fab-wa__overlay{
  --fab-cyan-a:#BAF7FF;         /* gradiente bespoke del pill */
  --fab-cyan-b:var(--sx-cyan);
  --fab-wa-green:#25D366;       /* verde WhatsApp */
  --fab-online:#22C55E;         /* estado "en línea" */
  --fab-online-text:#15803D;
  --fab-online-ring:rgba(34,197,94,.18);
  --fab-offline:#94A3B8;        /* estado "fuera de horario" */
  --fab-offline-text:#64748B;
}

/* ==========================================================================
   1) FLOATING CTA  "Cambiar Ahora"
   ========================================================================== */
.fab-cta{
  position:fixed;
  top:72vh;                     /* estado expandido (cerca del hero) */
  left:50%;
  transform:translate(-50%,-50%);
  z-index:50;
  opacity:1;pointer-events:none;                       /* wrapper no intercepta; el pill sí */
  transition:opacity .3s var(--sx-ease), top .3s cubic-bezier(.4,0,.2,1);
}
/* Al hacer scroll: abajo-centro. El centro del pill se ancla al borde inferior
   del cotizador (la línea azul), para que el isotipo quede centrado SOBRE esa
   línea y no corrido hacia abajo (302 = mitad-alto del cotizador pineado). */
/* El 302px era "la mitad del alto del cotizador", medido a mano una vez. Pero
   la tarjeta cambia de alto al abrir el cupon, al mostrar el error o al
   aplicar un cupon: con el numero fijo el pill quedaba POR ENCIMA del borde
   y tapaba la linea de SBS / ISO. home.js mide la tarjeta y escribe
   --fab-anclaje; el 302 queda solo de respaldo si el JS no corrio. */
.fab-cta.is-collapsed{ top:calc(50vh + var(--fab-anclaje, 302px)); }

/* Subpáginas (sin hero): acoplado abajo-izquierda, sin anclaje al cotizador.
   Especificidad (0,2,0) + orden posterior → gana sobre .is-collapsed. */
.fab-cta.fab-cta--docked{ top:auto; bottom:26px; left:26px; transform:none; }

/* Wrapper animado (entrada elástica + blur) */
.fab-cta__scope{
  display:inline-flex;
  position:relative;
  opacity:0;                    /* oculto hasta que corre la entrada */
}
.fab-cta__scope.is-in{ animation:fab-entrance .85s ease-out forwards; }

/* Pill (el botón) */
.fab-cta__pill{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:118px;                  /* colapsado: solo isotipo */
  height:66px;
  border-radius:var(--sx-r-pill);
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  cursor:pointer;
  pointer-events:auto;
  transition:width .55s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.fab-cta__pill.is-expanded{ width:300px; }
.fab-cta__pill.is-navigating{ cursor:wait; }

/* Sombras por estado (data-shadow lo fija el JS). Son ESTÁTICAS: el box-shadow
   se pinta una vez y no vuelve a tocarse. En reposo el aro cyan de 5px lo
   dibuja el halo (ver abajo), para no duplicar la opacidad: acá queda solo el
   glow proyectado. */
.fab-cta__pill[data-shadow="pulse"],
.fab-cta__pill[data-shadow="collapsed"]{
  box-shadow:0 5px 20px rgba(var(--sx-cyan-rgb),.30);
}
.fab-cta__pill[data-shadow="hover"]{ box-shadow:0 6px 28px rgba(var(--sx-blue-rgb),.45); }
.fab-cta__pill[data-shadow="nav"]{ box-shadow:0 4px 20px rgba(var(--sx-blue-rgb),.35); }

/* Halo LATIDO en reposo (expandido en el hero y colapsado al hacer scroll):
   el aro cyan se expande y se apaga en ritmo, como un latido.
   Antes esto animaba box-shadow en un elemento position:fixed que vive en el
   bundle compartido → repintaba permanentemente en todas las páginas. Ahora es
   un pseudo-elemento animado con transform + opacity (composited, sin repaint),
   el mismo patrón de .fab-wa__halo. Cuelga del SCOPE y no del pill porque el
   pill tiene overflow:hidden y recortaría el halo; el JS espeja data-shadow. */
.fab-cta__scope[data-shadow="pulse"]::after,
.fab-cta__scope[data-shadow="collapsed"]::after{
  content:"";
  position:absolute; inset:-5px; z-index:-1;
  border-radius:var(--sx-r-pill);
  background:rgba(var(--sx-cyan-rgb),.26);
  pointer-events:none;
  animation:fab-heartbeat 1.9s ease-in-out infinite;
}

/* Capa base: gradiente cyan */
.fab-cta__base{
  position:absolute; inset:0;
  border-radius:var(--sx-r-pill);
  background:linear-gradient(135deg, var(--fab-cyan-a) 0%, var(--fab-cyan-b) 100%);
}
/* Relleno hover: círculo azul que revela desde el centro */
.fab-cta__hover{
  position:absolute; inset:0;
  border-radius:var(--sx-r-pill);
  background:var(--sx-blue);
  transform:scale(.05);
  opacity:0;
  z-index:1;
  transition:transform .42s var(--sx-ease-smooth), opacity .42s var(--sx-ease-smooth);
}
.fab-cta__pill.is-hover .fab-cta__hover{ transform:scale(1); opacity:1; }

/* Contenido */
.fab-cta__content{
  position:relative; z-index:2;
  display:flex; align-items:center;
}
.fab-cta__logo{
  width:32px; height:32px; flex-shrink:0;
  transition:filter .3s var(--sx-ease-smooth);
}
.fab-cta__pill.is-hover .fab-cta__logo{ filter:brightness(0) invert(1); }
/* Wiggle del isotipo al entrar */
.fab-cta__scope.is-in .fab-cta__logo{ animation:fab-logo-wiggle .9s ease-out .55s both; }

/* Spinner (navegando) */
.fab-cta__spinner{ display:none; width:32px; height:32px; flex-shrink:0; }
.fab-cta__spinner-track{ stroke:rgba(0,76,174,.2); }
.fab-cta__spinner-arc{ stroke:var(--sx-blue-dark); }
.fab-cta__pill.is-navigating .fab-cta__logo{ display:none; }
.fab-cta__pill.is-navigating .fab-cta__spinner{ display:block; animation:fab-spin .7s linear infinite; }

/* Texto */
.fab-cta__textwrap{
  width:0; margin-left:0; opacity:0;
  overflow:hidden; flex-shrink:0;
  transition:width .25s var(--sx-ease-smooth),
             margin-left .25s var(--sx-ease-smooth),
             opacity .25s var(--sx-ease-smooth);
}
.fab-cta__pill.is-expanded .fab-cta__textwrap{ width:190px; margin-left:14px; opacity:1; }

.fab-cta__label{ position:relative; display:block; height:27px; overflow:hidden; }
.fab-cta__label-rest,
.fab-cta__label-hover,
.fab-cta__label-loading{
  font-family:var(--sx-font-body);
  font-weight:700; font-size:18px; line-height:27px;
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
}
.fab-cta__label-rest,
.fab-cta__label-hover{
  position:absolute; inset:0;
  transition:transform .35s var(--sx-ease-smooth);
}
.fab-cta__label-rest{ color:var(--sx-blue-dark); transform:translateY(0); }
.fab-cta__label-hover{ color:var(--sx-white); transform:translateY(100%); }
.fab-cta__pill.is-hover .fab-cta__label-rest{ transform:translateY(-100%); }
.fab-cta__pill.is-hover .fab-cta__label-hover{ transform:translateY(0); }

.fab-cta__label-loading{ display:none; color:var(--sx-blue-dark); }
.fab-cta__pill.is-navigating .fab-cta__label{ display:none; }
.fab-cta__pill.is-navigating .fab-cta__label-loading{ display:block; }

/* El FloatingCTA solo existe en desktop (el hero estático ya trae el cotizador) */
/* 1280px es EL corte responsive del sitio entero: ahi colapsa la navbar a
   hamburguesa, el hero deja de pinearse y el CTA pasa a estar DENTRO del
   cotizador (.hero-cot-cta). El pill flotante sigue ese mismo corte: debajo
   no aparece, o habria dos "Cambiar ahora" a la vez.
   El alto cuenta igual que el ancho, PERO SOLO EN LA HOME: ahi la escena es
   100vh con overflow:clip y por debajo de 620px de alto tampoco se pinea, asi
   que aparece .hero-cot-cta dentro de la tarjeta y el pill sobraria.
   ESTE CORTE DE ALTO VIVE EN TRES LUGARES Y TIENEN QUE DECIR LO MISMO:
     · aca, .page-home .fab-cta
     · .hero-cot-cta en css/home.css
     · wantScrolly() en js/home.js
   Cambiar uno solo deja la tarjeta sin boton con el pill flotando encima.
   El corte de ANCHO si es global: el pill es el CTA de escritorio y en movil
   manda la barra inferior. Ojo con mezclarlos: las otras 171 paginas llevan el
   pill pero NO tienen hero ni .hero-cot-cta, asi que si el alto las apagara se
   quedarian sin ningun "Cambiar ahora" (paso el 2026-08-22 en /lupa y
   /conoce-tu-cci a 1440x600). */
@media (max-width:1279.98px){ .fab-cta{ display:none; } }
@media (max-height:619.98px){ .page-home .fab-cta{ display:none; } }

/* ==========================================================================
   2) WHATSAPP CTA — burbuja + modal
   ========================================================================== */
.fab-wa{
  position:fixed;
  right:20px; bottom:20px;
  z-index:49;
  opacity:0; transform:scale(.6);
  animation:fab-wa-in .5s var(--sx-ease-smooth) .8s both;   /* entrada retardada */
}
.fab-wa__btn{
  position:relative;
  width:58px; height:58px;
  border-radius:var(--sx-r-pill);
  background:var(--fab-wa-green);
  box-shadow:0 8px 24px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer;
  transition:transform .2s var(--sx-ease-smooth);
}
.fab-wa__btn:hover{ transform:scale(1.08); }
.fab-wa__btn:active{ transform:scale(.94); }
/* Halo pulsante */
.fab-wa__halo{
  position:absolute; inset:0;
  border-radius:var(--sx-r-pill);
  background:var(--fab-wa-green);
  z-index:-1;
  animation:fab-wa-halo 2.2s ease-out infinite;
}

/* Overlay del modal */
.fab-wa__overlay{
  position:fixed; inset:0;
  background:rgba(8,16,32,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  padding:16px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.fab-wa__overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.fab-wa__card{
  position:relative;
  width:100%; max-width:400px;
  background:var(--sx-white);
  border-radius:var(--sx-r-card);
  padding:22px 22px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  margin-bottom:min(10vh,80px);
  transform:translateY(24px) scale(.98); opacity:0;
  transition:transform .28s var(--sx-ease-smooth), opacity .28s var(--sx-ease-smooth);
}
.fab-wa__overlay.is-open .fab-wa__card{ transform:translateY(0) scale(1); opacity:1; }

.fab-wa__close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  border-radius:var(--sx-r-pill);
  background:rgba(0,0,0,.04);
  color:var(--sx-text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

.fab-wa__header{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.fab-wa__avatar{
  width:48px; height:48px; flex-shrink:0;
  border-radius:var(--sx-r-pill);
  background:var(--fab-wa-green);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(37,211,102,.28);
}
.fab-wa__heading{ min-width:0; }
.fab-wa__title{
  font-family:var(--sx-font-title);
  font-weight:700; font-size:18px; line-height:1.2;
  color:var(--sx-text); margin:0;
}
.fab-wa__status{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.fab-wa__dot{ width:7px; height:7px; border-radius:var(--sx-r-pill); flex-shrink:0; }
.fab-wa__status-label{
  font-family:var(--sx-font-body);
  font-weight:500; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em;
}
.fab-wa__status.is-live .fab-wa__dot{ background:var(--fab-online); box-shadow:0 0 0 3px var(--fab-online-ring); }
.fab-wa__status.is-live .fab-wa__status-label{ color:var(--fab-online-text); }
.fab-wa__status.is-offline .fab-wa__dot{ background:var(--fab-offline); }
.fab-wa__status.is-offline .fab-wa__status-label{ color:var(--fab-offline-text); }

.fab-wa__lead{
  font-family:var(--sx-font-title);
  font-weight:400; font-size:14.5px; line-height:1.55;
  color:rgba(55,55,55,.78);
  margin:6px 0 16px;
}

.fab-wa__cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:var(--fab-wa-green);
  color:var(--sx-white);
  padding:13px 18px;
  border-radius:12px;
  text-decoration:none;
  font-family:var(--sx-font-body);
  font-weight:600; font-size:15px; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(37,211,102,.35);
  transition:transform .15s ease, box-shadow .2s ease;
}
.fab-wa__cta:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,211,102,.45); }

.fab-wa__meta{
  font-family:var(--sx-font-body);
  font-weight:500; font-size:11.5px; letter-spacing:.01em;
  color:rgba(55,55,55,.55);
  text-align:center;
  margin:14px 0 0;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
/* Entrada elástica del pill (scale/blur/translate) */
@keyframes fab-entrance{
  0%  { opacity:0; transform:translateY(28px) scale(0);    filter:blur(14px); }
  20% { opacity:1; transform:translateY(-10px) scale(1.32); filter:blur(0);   }
  40% {            transform:translateY(6px) scale(.80);   }
  60% {            transform:translateY(-3px) scale(1.14); }
  80% {            transform:translateY(0) scale(.93);     }
  100%{ opacity:1; transform:translateY(0) scale(1);       filter:blur(0);    }
}
/* Wiggle del isotipo al entrar */
@keyframes fab-logo-wiggle{
  0%  { transform:rotate(0); }
  25% { transform:rotate(-18deg); }
  50% { transform:rotate(12deg); }
  75% { transform:rotate(-6deg); }
  100%{ transform:rotate(0); }
}
/* Latido del halo cyan: aro que se expande y se apaga en ritmo de latido.
   Solo transform + opacity → lo resuelve el compositor, sin repintar. */
@keyframes fab-heartbeat{
  0%,100%{ transform:scale(1);   opacity:1;   }
  45%    { transform:scale(1.1); opacity:.28; }
}
/* Spinner "Abriendo..." */
@keyframes fab-spin{ to{ transform:rotate(360deg); } }
/* Entrada de la burbuja de WhatsApp */
@keyframes fab-wa-in{
  0%  { opacity:0; transform:scale(.6); }
  100%{ opacity:1; transform:scale(1); }
}
/* Halo pulsante de la burbuja */
@keyframes fab-wa-halo{
  0%  { transform:scale(1);    opacity:.55; }
  50% { transform:scale(1.35); opacity:0;   }
  100%{ transform:scale(1);    opacity:.55; }
}

/* ── Empresas: la burbuja de WhatsApp deja elegir Secutrader ──────────────
   Se togglea con la clase .page-empresas del <body> (ver herramientas/convertir_front.py).
   Por defecto (personas) la variante biz está oculta. */
.fab-wa__title--biz,
.fab-wa__lead--biz,
.fab-wa__biz{ display:none; }
.page-empresas .fab-wa__title--personas,
.page-empresas .fab-wa__lead--personas,
.page-empresas .fab-wa__cta{ display:none; }
.page-empresas .fab-wa__title--biz{ display:block; }
.page-empresas .fab-wa__lead--biz{ display:block; }
.page-empresas .fab-wa__biz{ display:flex; flex-direction:column; gap:10px; }

.fab-wa__trader{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:14px;
  border:1.5px solid #EDF0F4; background:#fff;
  text-decoration:none; cursor:pointer;
  transition:border-color .18s var(--sx-ease), box-shadow .18s var(--sx-ease), transform .18s var(--sx-ease);
}
.fab-wa__trader:hover{ border-color:var(--sx-blue); box-shadow:0 8px 22px rgba(var(--sx-blue-rgb),.12); transform:translateY(-1px); }
.fab-wa__trader-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#CCF8DE; color:#0F7839;
  font-family:var(--sx-font-title); font-weight:700; font-size:19px;
}
.fab-wa__trader-info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.fab-wa__trader-info strong{ font-family:var(--sx-font-body); font-weight:700; font-size:16px; color:#111827; line-height:1.3; }
.fab-wa__trader-info span{ font-family:var(--sx-font-body); font-size:13px; color:var(--sx-text-muted); line-height:1.3; }
.fab-wa__trader-chevron{ color:#C4C9D2; flex-shrink:0; }

/* ===== faq ===== */
/* ==========================================================================
   Securex Home estática — Preguntas frecuentes (FAQ) — acordeón accesible
   Clases prefijadas con faq-. Usa las variables de css/tokens.css.
   Breakpoints (idénticos al original useBreakpoint):
     mobile  < 768px  (base)   ·  tablet 768–1279px  ·  desktop ≥ 1280px
   ========================================================================== */

.faq-section{
  /* Grises Tailwind (gray-50/300/500) que NO existen en el set global de
     tokens; se declaran locales al componente para no hardcodear hex en las
     reglas y mantener la fidelidad 1:1 con el original. */
  --faq-bg:var(--sx-gris-fondo);
  --faq-border-closed:#D1D5DB;
  --faq-icon-closed:var(--sx-text-muted);

  background:var(--faq-bg);
  padding:60px 0 80px;                 /* mobile */
}
@media (min-width:768px){  .faq-section{ padding:80px 0 100px; } }   /* tablet  */
@media (min-width:1280px){ .faq-section{ padding:100px 0 120px; } }  /* desktop */

.faq-container{ width:100%; max-width:1240px; margin:0 auto; padding:0 16px; }
@media (min-width:768px){  .faq-container{ padding:0 32px; } }
@media (min-width:1280px){ .faq-container{ padding:0 40px; } }

/* Título ---------------------------------------------------------------- */
.faq-title{
  font-family:var(--sx-font-title);
  font-weight:700;
  color:var(--sx-text);
  line-height:.95;
  letter-spacing:-0.03em;
  font-size:clamp(2.2rem, 10vw, 3.5rem);   /* mobile */
  margin:0 0 36px;
}
@media (min-width:768px){  .faq-title{ font-size:clamp(2.8rem, 6vw, 4.5rem); margin:0 0 48px; } }
@media (min-width:1280px){ .faq-title{ font-size:clamp(2.6rem, 4.5vw, 64px); margin:0 0 64px; } }

/* Lista ----------------------------------------------------------------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }

/* Item: borde gradiente (gris cerrado → azul/cyan abierto) via padding 3px */
.faq-item{
  background:linear-gradient(135deg, var(--faq-border-closed), var(--faq-border-closed));
  padding:3px;
  border-radius:24px;
}
.faq-item.is-open{ background:var(--sx-grad-securex); }

.faq-item__inner{
  background:var(--sx-white);
  border-radius:21px;
  overflow:hidden;
}

/* Trigger (botón de la pregunta) ---------------------------------------- */
.faq-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  text-align:left;
  background:none; border:none; cursor:pointer;
  gap:16px;                            /* mobile */
  padding:20px 16px 10px 20px;         /* mobile */
}
@media (min-width:768px){  .faq-trigger{ gap:20px; padding:24px 24px 12px 28px; } }
@media (min-width:1280px){ .faq-trigger{ gap:32px; padding:28px 28px 12px 36px; } }

.faq-question{
  font-family:var(--sx-font-title);
  font-weight:500;
  color:var(--sx-text);
  line-height:1.35;
  font-size:16px;                      /* mobile */
}
@media (min-width:768px){  .faq-question{ font-size:19px; } }
@media (min-width:1280px){ .faq-question{ font-size:22px; } }

/* Ícono +/× en círculo de 52px ------------------------------------------ */
.faq-icon{
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  border:2px solid var(--faq-border-closed);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  transition:border-color .3s ease;
}
.faq-trigger:hover .faq-icon,
.faq-item.is-open .faq-icon{ border:none; }

/* Relleno azul que crece desde el centro (hover / abierto) */
.faq-icon__fill{
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--sx-blue);
  transform:scale(.2); opacity:0;
  transition:transform .4s var(--sx-ease-smooth), opacity .4s var(--sx-ease-smooth);
}
.faq-trigger:hover .faq-icon__fill,
.faq-item.is-open .faq-icon__fill{ transform:scale(1); opacity:1; }

/* Signo +: rota 45° (se vuelve ×) solo al abrir */
.faq-icon__svg{
  position:relative; z-index:1;
  transition:transform .35s var(--sx-ease-smooth);
}
.faq-item.is-open .faq-icon__svg{ transform:rotate(45deg); }

.faq-icon__svg line{
  stroke:var(--faq-icon-closed);
  transition:stroke .3s ease;
}
.faq-trigger:hover .faq-icon__svg line,
.faq-item.is-open .faq-icon__svg line{ stroke:var(--sx-white); }

/* Panel de respuesta: altura animada por JS con easing suave ------------- */
/* La mecanica de colapso la comparten los SEIS acordeones del sitio: el de la
   home y preguntas-frecuentes (.faq-*) y los cinco clonados en las paginas de
   herramientas, que solo cambian el prefijo. Estaba copiada cinco veces, y se
   noto: el arreglo de accesibilidad de esta misma tanda (sacar los paneles
   cerrados del arbol AX) se aplico aca y los otros cinco se quedaron sin el.
   Una definicion, seis nombres. Lo que sigue siendo local de cada pagina es la
   tipografia y el espaciado, no como se abre y se cierra. */
.faq-panel,
.grat-faq-panel,
.cal-faq-panel,
.clas-faq-panel,
.ruc-faq-panel,
.conv-faq-panel{
  height:0; overflow:hidden; opacity:0;
  /* visibility:hidden es lo que de verdad saca el panel del arbol de
     accesibilidad. Con height:0 + overflow:hidden + opacity:0 el lector seguia
     leyendo las 18 respuestas cerradas, contradiciendo el aria-expanded="false"
     del propio boton. Va con delay para no cortar la transicion de cierre. */
  visibility:hidden;
  transition:height .4s var(--sx-ease-smooth), opacity .4s var(--sx-ease-smooth),
             visibility 0s linear .4s;
}
.faq-item.is-open .faq-panel,
.grat-faq-item.is-open .grat-faq-panel,
.cal-faq-item.is-open .cal-faq-panel,
.clas-faq-item.is-open .clas-faq-panel,
.ruc-faq-item.is-open .ruc-faq-panel,
.conv-faq-item.is-open .conv-faq-panel{ opacity:1; visibility:visible; transition-delay:0s,0s,0s; }

.faq-answer{
  font-family:var(--sx-font-title);
  font-weight:300;
  color:var(--sx-text);
  line-height:1.65;
  max-width:720px;
  margin:0;
  font-size:15px;                      /* mobile */
  padding:0 20px 24px 20px;            /* mobile */
}
@media (min-width:768px){  .faq-answer{ font-size:17px; padding:0 28px 28px 28px; } }
@media (min-width:1280px){ .faq-answer{ font-size:18px; padding:0 36px 32px 36px; } }

/* Motion reducido: sin animación de apertura (base.css ya neutraliza sx-reveal) */
@media (prefers-reduced-motion:reduce){
  .faq-icon__fill, .faq-icon__svg, .faq-panel{ transition-duration:.001ms; }
}

/* ── Captcha de Cloudflare ────────────────────────────────────────────────
   Vive aca y no en la hoja de una pagina porque lo usan el canal de
   denuncias y el libro de reclamaciones. Estaba solo en
   page-canal-denuncias.css y el widget del libro salia sin estilo; lo
   encontro la guarda de reparto del generador. */
/* Widget de Turnstile: Cloudflare lo renderiza en un iframe de 300px fijos y
   ninguna hoja lo dimensionaba. A 320px de viewport el hueco disponible son
   238px y a 280px son 198: el captcha desbordaba y bloqueaba el envio de la
   denuncia, que es justo lo que la pagina existe para recibir.
   El escalado es la salida que documenta Cloudflare: el iframe no es fluido. */
.cf-turnstile{ max-width:100%; overflow:hidden; }
@media (max-width:359.98px){
  .cf-turnstile{
    transform:scale(.78);
    transform-origin:left top;
    height:52px;              /* 65px de alto real x .78, para no dejar hueco */
  }
}
@media (min-width:360px) and (max-width:400px){
  .cf-turnstile{ transform:scale(.9); transform-origin:left top; height:59px; }
}