/* ============================================================================================================
   LANDING PÚBLICA DE EFFI ERP (AGENT_UI, 16-oct-2026) — hoja ÚNICA de las vistas de application/views/landing/.
   ------------------------------------------------------------------------------------------------------------
   Reglas de este archivo:
   1. Es INDEPENDIENTE del tema de la app (effierp_2026.css va prefijado con body.tema-2026 sobre Bootstrap 3 / AdminLTE;
      aquí no hay Bootstrap): se COPIAN sus bloques de tokens bajo :root (claro) y html[data-tema="dark"] (oscuro).
      Cuando cambie un token de marca en effierp_2026.css hay que replicarlo aquí (grep "--effi-" en ambos).
   2. Todo color sale de un token: fuera de los bloques "tokens light" / "tokens dark" no hay hex ni rgba() sueltos.
   3. Prefijo de clases propias: .ld-*. Las clases de Bootstrap que sobreviven (.form-control, .btn, .alert, .row, .col-md-*,
      .input-group, .checkbox, .tooltip, .modal) existen SOLO porque ingreso.js / registro.js / validar-inputs.js /
      global.js / bootstrap.min.js las esperan o las manipulan; se re-implementan aquí con los tokens, en un bloque aparte.
   4. Movimiento con --effi-dur / --effi-ease; @media (prefers-reduced-motion: reduce) apaga todo.
   5. Breakpoints: ≤767 móvil, 768–1023 tablet, 1024–1399 escritorio, ≥1400 XL. Gutter 16px en móvil, sin scroll horizontal.
   6. Cada bloque va entre comentarios ancla "INICIO <bloque>" / "FIN <bloque>".
   ============================================================================================================ */


/* ===== INICIO tokens light ===== */
:root {
   /* Marca (manual oficial 15-oct-2026): Azul Oscuro #00164e, Azul Medio #01388c, Azul Claro #00a4dc, Amarillo #ffd146 */
   --effi-navy: #00164e;
   --effi-primary: #01388c;
   --effi-primary-hover: #022f76;
   --effi-primary-active: #012662;
   --effi-primary-strong: #01388c;
   --effi-primary-strong-hover: #022f76;
   --effi-primary-soft: #e6edf8;
   --effi-primary-contrast: #ffffff;
   --effi-accent: #00a4dc;
   --effi-accent-hover: #0090c2;
   --effi-accent-soft: #e5f6fc;
   --effi-yellow: #ffd146;
   --effi-yellow-soft: #fff7d9;
   --effi-on-bright: #00164e;
   --effi-white: #ffffff;
   --effi-on-solid: #ffffff;

   /* Superficies y neutros (DigitalOcean), texto teñido de marino */
   --effi-bg: #f3f5f9;
   --effi-surface: #ffffff;
   --effi-surface-muted: #f6f8fb;
   --effi-surface-hover: #eef2f8;
   --effi-border: #e3e7ee;
   --effi-border-strong: #cfd6e2;
   --effi-text: #0b1a3f;
   --effi-text-secondary: #55627d;
   --effi-text-muted: #8390af;
   --effi-neutral-fill: var(--effi-navy);
   --effi-neutral-fill-hover: var(--effi-primary);

   /* Escala de superficies (regla maestra de Omar, 16-oct-2026): control un escalón sobre su contenedor */
   --effi-control-bg: var(--effi-surface);
   --effi-control-bg-raised: var(--effi-surface);
   --effi-control-bg-disabled: var(--effi-surface-muted);
   --effi-addon-bg: var(--effi-surface-muted);
   --effi-popup-bg: var(--effi-surface);
   --effi-surface-recessed: var(--effi-surface-muted);
   --effi-placeholder: var(--effi-text-muted);

   /* Semánticos */
   --effi-success: #0e7f49;
   --effi-success-strong: #0e7f49;
   --effi-success-soft: #e6f7ee;
   --effi-warning: #a35f00;
   --effi-warning-strong: #e08a00;
   --effi-warning-soft: #fff4dc;
   --effi-danger: #d7373d;
   --effi-danger-strong: #d7373d;
   --effi-danger-hover: #c22f35;
   --effi-danger-soft: #fdecec;
   --effi-info: #007aa8;
   --effi-info-soft: var(--effi-accent-soft);

   /* Geometría y sombras (sombra teñida de azul oscuro) */
   --effi-radius: 8px;
   --effi-radius-sm: 6px;
   --effi-radius-lg: 12px;
   --effi-radius-xl: 20px;
   --effi-shadow-sm: 0 1px 2px rgba(0, 22, 78, .06);
   --effi-shadow: 0 4px 12px rgba(0, 22, 78, .08);
   --effi-shadow-lg: 0 12px 32px rgba(0, 22, 78, .18);
   --effi-shadow-xl: 0 32px 80px rgba(0, 22, 78, .22);

   /* Tipografía fluida */
   --effi-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
   --effi-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
   --effi-fs-base: clamp(15px, .2vw + 14px, 16px);
   --effi-fs-sm: 14px;
   --effi-fs-xs: 12.5px;
   --effi-fs-h1: clamp(34px, 3.4vw + 14px, 60px);
   --effi-fs-h2: clamp(26px, 1.8vw + 14px, 40px);
   --effi-fs-h3: clamp(19px, .5vw + 15px, 22px);
   --effi-fs-lead: clamp(16px, .4vw + 14px, 19px);

   /* Espaciado */
   --effi-sp-1: 4px;
   --effi-sp-2: 8px;
   --effi-sp-3: 12px;
   --effi-sp-4: 16px;
   --effi-sp-5: 24px;
   --effi-sp-6: 32px;
   --effi-sp-7: 48px;
   --effi-sp-8: 64px;
   --effi-sp-seccion: clamp(56px, 7vw, 112px);
   --effi-gutter: 16px;
   --effi-ancho-max: 1200px;
   --effi-header-h: 68px;

   /* Movimiento (iguales en oscuro) */
   --effi-dur-fast: 120ms;
   --effi-dur: 200ms;
   --effi-dur-slow: 320ms;
   --effi-ease: cubic-bezier(.2, .8, .2, 1);
   --effi-ease-out: cubic-bezier(0, 0, .2, 1);
   --effi-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

   /* Varios */
   --effi-focus-ring: 0 0 0 3px rgba(0, 164, 220, .28);
   --effi-tooltip-bg: #00164e;
   --effi-backdrop: rgba(0, 22, 78, .55);
   --effi-header-bg: rgba(243, 245, 249, .82);
   --effi-marco-bg: #e9edf4;         /* barra superior del marco "ventana de navegador" */
   --effi-marco-borde: #d5dbe6;
   --effi-mesh-1: rgba(0, 164, 220, .22);   /* manchas del fondo tipo "mesh" del hero */
   --effi-mesh-2: rgba(1, 56, 140, .16);
   --effi-mesh-3: rgba(255, 209, 70, .18);
   --effi-scrollbar: #c9d0dc;
   --effi-on-navy: #c3cde3;          /* texto secundario sobre azul oscuro (CTA final, footer) */
   --effi-on-navy-border: rgba(255, 255, 255, .12);
   --effi-on-navy-hover: rgba(255, 255, 255, .08);
   --effi-mask-solid: #000000;       /* color opaco de las máscaras (solo cuenta su alfa) */

   /* Impresión: valores seguros que NO se redefinen en oscuro (el modo oscuro imprime negro sobre blanco) */
   --effi-print-bg: #ffffff;
   --effi-print-text: #0b1a3f;
}
/* ===== FIN tokens light ===== */


/* ===== INICIO tokens dark ===== */
/* Solo se redefinen tokens; color-scheme: dark oscurece los controles nativos (select, scrollbars). */
html[data-tema="dark"] {
   color-scheme: dark;
   --effi-navy: #e6ebf5;
   --effi-primary: #4d8df0;
   --effi-primary-hover: #6ba1f5;
   --effi-primary-active: #3b7be0;
   --effi-primary-strong: #2d6ccc;
   --effi-primary-strong-hover: #2a62ba;
   --effi-primary-soft: rgba(77, 141, 240, .16);
   --effi-primary-contrast: #ffffff;
   --effi-accent: #2cb8e8;
   --effi-accent-hover: #4cc6ef;
   --effi-accent-soft: rgba(44, 184, 232, .16);
   --effi-yellow: #ffd146;
   --effi-yellow-soft: rgba(255, 209, 70, .16);

   --effi-bg: #0b1220;
   --effi-surface: #111a2e;
   --effi-surface-muted: #16213a;
   --effi-surface-hover: #1b2744;
   --effi-border: #22304a;
   --effi-border-strong: #2f3f5e;
   --effi-text: #e6ebf5;
   --effi-text-secondary: #a9b5cc;
   --effi-text-muted: #7c8aa6;
   --effi-neutral-fill: #3a4a6b;
   --effi-neutral-fill-hover: #4a5c82;

   --effi-control-bg: var(--effi-surface-muted);
   --effi-control-bg-raised: var(--effi-surface-hover);
   --effi-control-bg-disabled: var(--effi-surface-muted);
   --effi-addon-bg: var(--effi-surface-hover);
   --effi-popup-bg: var(--effi-surface-muted);
   --effi-surface-recessed: var(--effi-bg);
   --effi-placeholder: var(--effi-text-secondary);

   --effi-success: #3ccf7e;
   --effi-success-strong: #0f7f49;
   --effi-success-soft: rgba(60, 207, 126, .16);
   --effi-warning: #ffb547;
   --effi-warning-strong: #ffb547;
   --effi-warning-soft: rgba(255, 181, 71, .16);
   --effi-danger: #f26b6f;
   --effi-danger-strong: #d7373d;
   --effi-danger-hover: #c22f35;
   --effi-danger-soft: rgba(242, 107, 111, .16);
   --effi-info: #2cb8e8;

   --effi-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
   --effi-shadow: 0 4px 12px rgba(0, 0, 0, .5);
   --effi-shadow-lg: 0 12px 32px rgba(0, 0, 0, .65);
   --effi-shadow-xl: 0 32px 80px rgba(0, 0, 0, .7);

   --effi-focus-ring: 0 0 0 3px rgba(44, 184, 232, .35);
   --effi-tooltip-bg: #22304a;
   --effi-backdrop: rgba(0, 0, 0, .65);
   --effi-header-bg: rgba(11, 18, 32, .82);
   --effi-marco-bg: #16213a;
   --effi-marco-borde: #2f3f5e;
   --effi-mesh-1: rgba(44, 184, 232, .16);
   --effi-mesh-2: rgba(77, 141, 240, .18);
   --effi-mesh-3: rgba(255, 209, 70, .08);
   --effi-scrollbar: #2f3f5e;
   --effi-on-navy: #a9b5cc;
   --effi-on-navy-border: rgba(255, 255, 255, .08);
   --effi-on-navy-hover: rgba(255, 255, 255, .06);
}
/* ===== FIN tokens dark ===== */


/* ===== INICIO base ===== */
*, *::before, *::after {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   /* El header es fijo: los anclajes (#precios, #faq) se detienen debajo de él */
   scroll-padding-top: calc(var(--effi-header-h) + 12px);
}

body {
   margin: 0;
   font-family: var(--effi-font);
   font-size: var(--effi-fs-base);
   line-height: 1.6;
   color: var(--effi-text);
   background: var(--effi-bg);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden; /* las manchas del mesh y los marcos con sombra no deben crear scroll horizontal */
   transition: background-color var(--effi-dur-slow) var(--effi-ease), color var(--effi-dur-slow) var(--effi-ease);
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--effi-font-heading);
   color: var(--effi-navy);
   line-height: 1.15;
   margin: 0 0 var(--effi-sp-3);
   letter-spacing: -.01em;
   font-weight: 700;
}

h1 { font-size: var(--effi-fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--effi-fs-h2); }
h3 { font-size: var(--effi-fs-h3); }
h4 { font-size: 17px; }

p {
   margin: 0 0 var(--effi-sp-4);
}

a {
   color: var(--effi-primary);
   text-decoration: none;
   transition: color var(--effi-dur-fast) var(--effi-ease), text-decoration-color var(--effi-dur-fast) var(--effi-ease);
}

a:hover {
   color: var(--effi-primary-hover);
   text-decoration: underline;
   text-decoration-color: var(--effi-accent);
   text-underline-offset: 3px;
}

img, picture, svg {
   max-width: 100%;
   height: auto;
   display: block;
}

ul, ol {
   margin: 0 0 var(--effi-sp-4);
   padding-left: 1.25em;
}

strong, b { font-weight: 600; }

hr {
   border: 0;
   border-top: 1px solid var(--effi-border);
   margin: var(--effi-sp-5) 0;
}

button {
   font: inherit;
   color: inherit;
}

:focus-visible {
   outline: none;
   box-shadow: var(--effi-focus-ring);
   border-radius: var(--effi-radius-sm);
}

::selection {
   background: var(--effi-accent-soft);
   color: var(--effi-on-bright);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--effi-scrollbar); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* Enlace "saltar al contenido" (accesibilidad): invisible hasta que recibe foco con Tab */
.ld-skip {
   position: absolute;
   left: 16px;
   top: -60px;
   z-index: 2000;
   padding: 10px 16px;
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   border-radius: var(--effi-radius-sm);
   font-weight: 600;
   transition: top var(--effi-dur) var(--effi-ease);
}

.ld-skip:focus {
   top: 12px;
   text-decoration: none;
   color: var(--effi-primary-contrast);
}

.ld-sr-only {
   position: absolute !important; /* !important: patrón estándar de texto solo para lectores de pantalla */
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.ld-container {
   width: 100%;
   max-width: var(--effi-ancho-max);
   margin: 0 auto;
   padding: 0 var(--effi-gutter);
}

.ld-container--estrecho {
   max-width: 820px;
}

.ld-seccion {
   padding: var(--effi-sp-seccion) 0;
   position: relative;
}

.ld-seccion--alterna {
   background: var(--effi-surface);
   border-top: 1px solid var(--effi-border);
   border-bottom: 1px solid var(--effi-border);
}

.ld-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--effi-primary);
   margin-bottom: var(--effi-sp-3);
}

.ld-eyebrow::before {
   content: "";
   width: 18px;
   height: 2px;
   border-radius: 2px;
   background: var(--effi-accent);
}

.ld-cabecera {
   max-width: 760px;
   margin: 0 auto var(--effi-sp-7);
   text-align: center;
}

.ld-cabecera .ld-eyebrow {
   justify-content: center;
}

.ld-cabecera .ld-eyebrow::before {
   display: none;
}

.ld-lead {
   font-size: var(--effi-fs-lead);
   color: var(--effi-text-secondary);
   line-height: 1.6;
}

.ld-texto-secundario { color: var(--effi-text-secondary); }
.ld-texto-muted { color: var(--effi-text-muted); font-size: var(--effi-fs-sm); }
.ld-centro { text-align: center; }

/* Mostrar/ocultar según el tema (capturas clara/oscura del software) */
html[data-tema="dark"] .ld-solo-claro { display: none; }
html:not([data-tema="dark"]) .ld-solo-oscuro { display: none; }
/* ===== FIN base ===== */


/* ===== INICIO botones ===== */
.ld-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 44px;
   padding: 0 22px;
   border-radius: var(--effi-radius);
   border: 1px solid transparent;
   font-weight: 600;
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
   text-decoration: none;
   white-space: nowrap;
   touch-action: manipulation;
   /* 16-oct-2026 (Omar): todo botón lleva margen vertical para no pegarse al contenido vecino (p. ej. el "Prueba Effi ERP con IA"
      suelto bajo las tarjetas de IA); donde el espacio ya lo da el contenedor (barra de navegación, grupos con gap, filas de
      formulario) se anula más abajo. */
   margin: var(--effi-sp-3) 0;
   transition: background-color var(--effi-dur-fast) var(--effi-ease), border-color var(--effi-dur-fast) var(--effi-ease),
   color var(--effi-dur-fast) var(--effi-ease), box-shadow var(--effi-dur-fast) var(--effi-ease), transform var(--effi-dur-fast) var(--effi-ease);
}

.ld-btn:hover {
   text-decoration: none;
   transform: translateY(-1px);
}

.ld-btn:active {
   transform: scale(.98);
}

.ld-btn--primario {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   box-shadow: var(--effi-shadow-sm);
}

.ld-btn--primario:hover, .ld-btn--primario:focus-visible {
   background: var(--effi-primary-strong-hover);
   color: var(--effi-primary-contrast);
   box-shadow: var(--effi-shadow);
}

.ld-btn--secundario {
   background: var(--effi-control-bg);
   color: var(--effi-navy);
   border-color: var(--effi-border-strong);
}

.ld-btn--secundario:hover {
   background: var(--effi-primary-soft);
   border-color: var(--effi-primary);
   color: var(--effi-primary);
}

.ld-btn--fantasma {
   background: transparent;
   color: var(--effi-navy);
}

.ld-btn--fantasma:hover {
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
}

/* Botón sobre fondo azul oscuro (CTA final): blanco con texto azul oscuro */
.ld-btn--claro {
   background: var(--effi-white);
   color: var(--effi-on-bright);
}

.ld-btn--claro:hover {
   background: var(--effi-yellow);
   color: var(--effi-on-bright);
}

.ld-btn--contorno-claro {
   background: transparent;
   color: var(--effi-white);
   border-color: var(--effi-on-navy-border);
}

.ld-btn--contorno-claro:hover {
   background: var(--effi-on-navy-hover);
   color: var(--effi-white);
   border-color: var(--effi-white);
}

.ld-btn--grande {
   min-height: 52px;
   padding: 0 28px;
   font-size: 16px;
}

.ld-btn--bloque {
   width: 100%;
}

.ld-btn .fa-solid, .ld-btn .fa-brands, .ld-btn .fa-regular {
   font-size: .95em;
}

.ld-btn-grupo {
   display: flex;
   flex-wrap: wrap;
   gap: var(--effi-sp-3);
}

.ld-btn-grupo .ld-btn {
   margin: 0; /* el espacio entre botones lo da el gap del grupo */
}

/* Botón suelto centrado bajo un bloque de tarjetas/planes (.ld-centro): se despega del bloque anterior. */
.ld-centro > .ld-btn {
   margin-top: var(--effi-sp-6);
}
/* ===== FIN botones ===== */


/* ===== INICIO header ===== */
.ld-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   height: var(--effi-header-h);
   background: var(--effi-header-bg);
   -webkit-backdrop-filter: saturate(160%) blur(14px);
   backdrop-filter: saturate(160%) blur(14px);
   transition: background-color var(--effi-dur) var(--effi-ease);
}

.ld-header .ld-container {
   height: 100%;
   display: flex;
   align-items: center;
   gap: var(--effi-sp-4);
}

.ld-logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   flex: 0 0 auto;
   color: var(--effi-navy);
   font-family: var(--effi-font-heading);
   font-weight: 700;
   font-size: 20px;
   letter-spacing: -.01em;
}

.ld-logo:hover { text-decoration: none; color: var(--effi-navy); }

.ld-logo img {
   height: 40px;
   width: auto;
}

/* Logo PNG de Effi ERP: en oscuro se muestra sobre una tarjeta blanca (regla: NUNCA filtros de color sobre logos) */
html[data-tema="dark"] .ld-logo img {
   background: var(--effi-white);
   border-radius: var(--effi-radius-sm);
   padding: 3px 6px;
}

.ld-nav {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-left: auto;
}

.ld-nav-enlaces {
   display: flex;
   align-items: center;
   gap: 2px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.ld-nav-enlaces a {
   display: inline-flex;
   align-items: center;
   min-height: 40px;
   padding: 0 12px;
   border-radius: var(--effi-radius-sm);
   color: var(--effi-text-secondary);
   font-weight: 500;
   font-size: 14.5px;
   transition: background-color var(--effi-dur-fast) var(--effi-ease), color var(--effi-dur-fast) var(--effi-ease);
}

.ld-nav-enlaces a:hover, .ld-nav-enlaces a.is-activo {
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
   text-decoration: none;
}

.ld-nav-acciones {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: 12px;
}

.ld-nav-acciones .ld-btn {
   min-height: 40px;
   margin: 0; /* en la barra el alto lo fija el header */
   padding: 0 16px;
   font-size: 14.5px;
}

/* Botón sol/luna */
.ld-tema-toggle {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--effi-border-strong);
   background: var(--effi-control-bg);
   color: var(--effi-navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background-color var(--effi-dur-fast) var(--effi-ease), border-color var(--effi-dur-fast) var(--effi-ease), transform var(--effi-dur-slow) var(--effi-ease-spring);
}

.ld-tema-toggle:hover {
   background: var(--effi-primary-soft);
   border-color: var(--effi-primary);
   color: var(--effi-primary);
}

.ld-tema-toggle.is-girando {
   transform: rotate(180deg);
}

.ld-tema-toggle .fa-sun { display: none; }
html[data-tema="dark"] .ld-tema-toggle .fa-sun { display: inline-block; }
html[data-tema="dark"] .ld-tema-toggle .fa-moon { display: none; }

/* Hamburguesa (solo móvil/tablet) */
.ld-hamburguesa {
   display: none;
   width: 44px;
   height: 44px;
   border-radius: var(--effi-radius-sm);
   border: 1px solid var(--effi-border-strong);
   background: var(--effi-control-bg);
   color: var(--effi-navy);
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 18px;
}

.ld-hamburguesa .fa-xmark { display: none; }
.ld-hamburguesa[aria-expanded="true"] .fa-bars { display: none; }
.ld-hamburguesa[aria-expanded="true"] .fa-xmark { display: inline-block; }

/* "Ingresar" dentro del menú desplegable: solo en móvil/tablet (en escritorio va como botón fantasma en .ld-nav-acciones) */
.ld-solo-movil { display: none; }

/* Header compacto de las páginas de autenticación */
.ld-header--auth .ld-nav-enlaces { display: none; }
/* ===== FIN header ===== */


/* ===== INICIO hero ===== */
.ld-main {
   padding-top: var(--effi-header-h);
}

.ld-hero {
   position: relative;
   padding: clamp(48px, 6vw, 96px) 0 clamp(32px, 4vw, 64px);
   overflow: hidden;
}

/* Fondo "mesh": tres manchas radiales muy suaves con los colores de marca; se recortan con el overflow del hero */
.ld-mesh {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background:
      radial-gradient(60% 50% at 15% 10%, var(--effi-mesh-1), transparent 70%),
      radial-gradient(50% 45% at 90% 20%, var(--effi-mesh-2), transparent 70%),
      radial-gradient(45% 40% at 60% 100%, var(--effi-mesh-3), transparent 70%);
   -webkit-mask-image: linear-gradient(to bottom, var(--effi-mask-solid) 60%, transparent);
   mask-image: linear-gradient(to bottom, var(--effi-mask-solid) 60%, transparent);
}

.ld-hero .ld-container {
   position: relative;
   z-index: 1;
}

.ld-hero-texto {
   max-width: 860px;
   margin: 0 auto;
   text-align: center;
}

.ld-hero h1 {
   margin-bottom: var(--effi-sp-4);
}

.ld-hero h1 .ld-resalte {
   background: linear-gradient(90deg, var(--effi-primary), var(--effi-accent));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.ld-hero .ld-lead {
   max-width: 700px;
   margin: 0 auto var(--effi-sp-6);
}

/* Hero sin párrafo de apoyo (index, Omar 17-oct-2026): los botones recuperan el aire que daba el párrafo. */
.ld-hero h1 + .ld-btn-grupo {
   margin-top: var(--effi-sp-6);
}

.ld-hero .ld-btn-grupo {
   justify-content: center;
   margin-bottom: var(--effi-sp-5);
}

.ld-chip-pais-lista {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   list-style: none;
   padding: 0;
   margin: 0 0 var(--effi-sp-7);
}

.ld-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 500;
   color: var(--effi-text-secondary);
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
}

.ld-chip .fa-solid { color: var(--effi-accent); font-size: 11px; }

/* Píldora de confianza encima del h1 */
.ld-pildora {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px 6px 8px;
   border-radius: 999px;
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   box-shadow: var(--effi-shadow-sm);
   font-size: 13.5px;
   font-weight: 500;
   color: var(--effi-text-secondary);
   margin-bottom: var(--effi-sp-5);
}

.ld-pildora span.ld-pildora-marca {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   border-radius: 999px;
   padding: 2px 10px;
   font-size: 12px;
   font-weight: 600;
}

/* Marco "ventana de navegador" para las capturas reales del software */
.ld-marco {
   position: relative;
   border-radius: var(--effi-radius-lg);
   background: var(--effi-surface);
   border: 1px solid var(--effi-marco-borde);
   box-shadow: var(--effi-shadow-xl);
   overflow: hidden;
}

.ld-marco-barra {
   display: flex;
   align-items: center;
   gap: 6px;
   height: 36px;
   padding: 0 14px;
   background: var(--effi-marco-bg);
   border-bottom: 1px solid var(--effi-marco-borde);
}

.ld-marco-barra span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--effi-border-strong);
}

.ld-marco-barra .ld-marco-url {
   flex: 1;
   width: auto;
   height: 20px;
   margin-left: 10px;
   border-radius: 999px;
   background: var(--effi-surface);
   border: 1px solid var(--effi-marco-borde);
   font-size: 11px;
   line-height: 18px;
   color: var(--effi-text-muted);
   text-align: center;
   max-width: 360px;
}

.ld-marco img {
   width: 100%;
   height: auto;
   aspect-ratio: 3448 / 1860;
   object-fit: cover;
   object-position: top left;
}

.ld-hero .ld-marco {
   max-width: 1100px;
   margin: 0 auto;
}

/* El hero entra con un leve ascenso (una vez por carga) */
@keyframes effi-fade-up {
   from { opacity: 0; transform: translateY(14px); }
   to { opacity: 1; transform: translateY(0); }
}

.ld-hero-texto > * {
   animation: effi-fade-up var(--effi-dur-slow) var(--effi-ease-out) backwards;
}

.ld-hero-texto > *:nth-child(2) { animation-delay: 60ms; }
.ld-hero-texto > *:nth-child(3) { animation-delay: 120ms; }
.ld-hero-texto > *:nth-child(4) { animation-delay: 180ms; }
.ld-hero-texto > *:nth-child(5) { animation-delay: 240ms; }
.ld-hero-texto > *:nth-child(6) { animation-delay: 300ms; }

/* Prueba social en tiempo real: "Elegido por 62.543 empresas y contando…" (cifra exacta de Empresam; landing.js la anima).
   La cifra va en números tabulares y landing.js le reserva el ancho final (min-width en ch) para que no "baile" al subir. */
.ld-hero-cifra {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0 0 var(--effi-sp-4);
   font-size: 16px;
   color: var(--effi-text-secondary);
}

.ld-hero-cifra .fa-solid {
   color: var(--effi-accent);
   font-size: 18px;
}

.ld-hero-cifra strong {
   font-family: var(--effi-font-heading);
   font-weight: 700;
   font-size: 22px;
   line-height: 1;
   color: var(--effi-navy);
   font-variant-numeric: tabular-nums;
   letter-spacing: -.01em;
}

.ld-contador {
   display: inline-block;
   text-align: center;
}

.ld-hero .ld-marco {
   animation: effi-fade-up 480ms var(--effi-ease-out) 260ms backwards;
}
/* ===== FIN hero ===== */


/* ===== INICIO reveal ===== */
/* Entrada suave de secciones al hacer scroll (IntersectionObserver en landing.js). Solo se ocultan si el <head> marcó
   html.ld-js (script inline de landing/header.php): sin JS todo se ve desde el principio. */
.ld-reveal {
   transition: opacity var(--effi-dur-slow) var(--effi-ease-out), transform var(--effi-dur-slow) var(--effi-ease-out);
}

html.ld-js .ld-reveal:not(.is-visible) {
   opacity: 0;
   transform: translateY(16px);
}

.ld-reveal[data-retardo="1"] { transition-delay: 60ms; }
.ld-reveal[data-retardo="2"] { transition-delay: 120ms; }
.ld-reveal[data-retardo="3"] { transition-delay: 180ms; }
.ld-reveal[data-retardo="4"] { transition-delay: 240ms; }
.ld-reveal[data-retardo="5"] { transition-delay: 300ms; }
/* ===== FIN reveal ===== */


/* ===== INICIO tarjetas y grillas ===== */
.ld-grid {
   display: grid;
   gap: var(--effi-sp-5);
}

.ld-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ld-tarjeta {
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   padding: var(--effi-sp-5);
   box-shadow: var(--effi-shadow-sm);
   transition: box-shadow var(--effi-dur) var(--effi-ease), transform var(--effi-dur) var(--effi-ease), border-color var(--effi-dur) var(--effi-ease);
}

.ld-tarjeta:hover {
   box-shadow: var(--effi-shadow);
   border-color: var(--effi-border-strong);
}

.ld-tarjeta h3 {
   margin-bottom: 6px;
}

.ld-tarjeta p:last-child {
   margin-bottom: 0;
}

.ld-tarjeta p {
   color: var(--effi-text-secondary);
   font-size: 15px;
}

.ld-icono {
   width: 44px;
   height: 44px;
   border-radius: var(--effi-radius);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
   font-size: 18px;
   margin-bottom: var(--effi-sp-4);
   transition: transform var(--effi-dur) var(--effi-ease);
}

.ld-tarjeta:hover .ld-icono {
   transform: scale(1.06);
}

/* Tarjeta de módulo (grilla de 12 módulos): compacta, ícono a la izquierda */
.ld-modulo {
   display: flex;
   gap: var(--effi-sp-4);
   align-items: flex-start;
   padding: var(--effi-sp-4) var(--effi-sp-4);
}

.ld-modulo .ld-icono {
   flex: 0 0 44px;
   margin-bottom: 0;
}

.ld-modulo h3 {
   font-size: 16px;
   margin-bottom: 4px;
}

.ld-modulo p {
   font-size: 14px;
   margin: 0;
}

/* Lista con chulos */
.ld-lista-check {
   list-style: none;
   padding: 0;
   margin: 0 0 var(--effi-sp-5);
   display: grid;
   gap: 10px;
}

.ld-lista-check li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   color: var(--effi-text-secondary);
   font-size: 15.5px;
}

.ld-lista-check li .fa-solid {
   flex: 0 0 22px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   background: var(--effi-success-soft);
   color: var(--effi-success);
   margin-top: 2px;
}

.ld-lista-check li strong {
   color: var(--effi-text);
}

/* Tarjetas de la sección IA (Consulta / Crea / Modifica / Anula): el "comando" de ejemplo va como cita en azul medio, sobre un
   fondo suave, para que se lea de un vistazo que se habla en lenguaje natural. */
.ld-tarjeta--ia h3 {
   font-size: 20px;
}

.ld-tarjeta--ia .ld-comando {
   margin: 0 0 10px;
   padding: 8px 12px;
   border-radius: var(--effi-radius-sm);
   border-left: 3px solid var(--effi-accent);
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
   font-size: 14px;
   font-weight: 500;
   font-style: italic;
   line-height: 1.45;
}

/* Áreas que responden a la IA: chips centrados bajo las 4 tarjetas + nota de seguridad */
.ld-ia-areas {
   max-width: 860px;
   margin: var(--effi-sp-6) auto 0;
   text-align: center;
}

.ld-ia-areas-titulo {
   margin: 0 0 var(--effi-sp-3);
   font-family: var(--effi-font-heading);
   font-weight: 600;
   font-size: 16px;
   color: var(--effi-navy);
}

.ld-chips--centro {
   justify-content: center;
   margin-bottom: var(--effi-sp-4);
}

.ld-ia-areas-nota {
   margin: 0;
   font-size: 14px;
   color: var(--effi-text-secondary);
}

.ld-ia-areas-nota .fa-solid {
   color: var(--effi-accent);
   margin-right: 4px;
}
/* ===== FIN tarjetas y grillas ===== */


/* ===== INICIO feature (texto + captura) ===== */
.ld-feature {
   display: grid;
   grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
   gap: clamp(32px, 5vw, 72px);
   align-items: center;
}

.ld-feature--invertida .ld-feature-texto {
   order: 2;
}

.ld-feature-texto h2 {
   margin-bottom: var(--effi-sp-4);
}

.ld-feature-texto .ld-lead {
   margin-bottom: var(--effi-sp-5);
}

.ld-feature .ld-marco img {
   aspect-ratio: 3448 / 1860;
}

.ld-feature + .ld-feature {
   margin-top: var(--effi-sp-seccion);
}

/* Chips de transportadoras / integraciones */
.ld-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   list-style: none;
   padding: 0;
   margin: 0 0 var(--effi-sp-5);
}
/* ===== FIN feature ===== */


/* ===== INICIO tabs ===== */
.ld-tabs {
   display: inline-flex;
   gap: 4px;
   padding: 4px;
   border-radius: 999px;
   background: var(--effi-surface-recessed);
   border: 1px solid var(--effi-border);
   margin-bottom: var(--effi-sp-4);
}

.ld-tab {
   border: 0;
   background: transparent;
   color: var(--effi-text-secondary);
   padding: 8px 16px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: background-color var(--effi-dur-fast) var(--effi-ease), color var(--effi-dur-fast) var(--effi-ease);
}

.ld-tab:hover { color: var(--effi-primary); }

.ld-tab[aria-selected="true"] {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   box-shadow: var(--effi-shadow-sm);
}

.ld-tab-panel[hidden] { display: none; }

@keyframes effi-fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}

.ld-tab-panel {
   animation: effi-fade-in var(--effi-dur) var(--effi-ease);
}
/* ===== FIN tabs ===== */


/* ===== INICIO precios ===== */
.ld-precios-barra {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: var(--effi-sp-4) var(--effi-sp-5);
   margin-bottom: var(--effi-sp-5);
}

.ld-campo-inline {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   font-weight: 500;
   color: var(--effi-text-secondary);
}

.ld-select {
   appearance: none;
   -webkit-appearance: none;
   min-height: 44px;
   padding: 0 40px 0 14px;
   border-radius: var(--effi-radius);
   border: 1px solid var(--effi-border-strong);
   background-color: var(--effi-control-bg);
   color: var(--effi-text);
   font: inherit;
   font-weight: 600;
   cursor: pointer;
   /* chevron dibujado con un degradado cónico (sin imágenes) */
   background-image: linear-gradient(45deg, transparent 50%, var(--effi-text-secondary) 50%), linear-gradient(135deg, var(--effi-text-secondary) 50%, transparent 50%);
   background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
   background-size: 5px 5px, 5px 5px;
   background-repeat: no-repeat;
   transition: border-color var(--effi-dur-fast) var(--effi-ease), box-shadow var(--effi-dur-fast) var(--effi-ease);
}

.ld-select:focus-visible {
   border-color: var(--effi-accent);
   box-shadow: var(--effi-focus-ring);
   border-radius: var(--effi-radius);
}

/* Interruptor Mensual / Anual */
.ld-toggle {
   display: inline-flex;
   padding: 4px;
   border-radius: 999px;
   background: var(--effi-surface-recessed);
   border: 1px solid var(--effi-border);
}

.ld-toggle button {
   border: 0;
   background: transparent;
   color: var(--effi-text-secondary);
   padding: 8px 16px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: background-color var(--effi-dur-fast) var(--effi-ease), color var(--effi-dur-fast) var(--effi-ease);
}

.ld-toggle button[aria-pressed="true"] {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   box-shadow: var(--effi-shadow-sm);
}

.ld-toggle .ld-descuento {
   background: var(--effi-yellow);
   color: var(--effi-on-bright);
   border-radius: 999px;
   padding: 1px 8px;
   font-size: 11.5px;
   font-weight: 700;
}

.ld-precios-extras {
   text-align: center;
   color: var(--effi-text-secondary);
   font-size: 14.5px;
   margin-bottom: var(--effi-sp-5);
}

.ld-precios-extras strong { color: var(--effi-text); }

/* Carrusel horizontal de planes: scroll-snap nativo + flechas */
.ld-planes-wrap {
   position: relative;
}

.ld-planes {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 3 * var(--effi-sp-4)) / 4);
   gap: var(--effi-sp-4);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   padding: 8px 4px 20px;
   margin: 0 -4px;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.ld-planes::-webkit-scrollbar { display: none; }

.ld-plan {
   scroll-snap-align: start;
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   padding: var(--effi-sp-5);
   display: flex;
   flex-direction: column;
   gap: var(--effi-sp-3);
   box-shadow: var(--effi-shadow-sm);
   position: relative;
   transition: box-shadow var(--effi-dur) var(--effi-ease), border-color var(--effi-dur) var(--effi-ease);
}

.ld-plan:hover {
   box-shadow: var(--effi-shadow);
   border-color: var(--effi-border-strong);
}

.ld-plan--destacado {
   border-color: var(--effi-primary);
   box-shadow: 0 0 0 1px var(--effi-primary), var(--effi-shadow);
}

.ld-plan-insignia {
   position: absolute;
   top: -12px;
   left: var(--effi-sp-5);
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   border-radius: 999px;
   padding: 3px 10px;
}

.ld-plan-nombre {
   font-family: var(--effi-font-heading);
   font-weight: 700;
   font-size: 13px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--effi-text-secondary);
}

.ld-plan-precio {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-height: 64px;
   justify-content: flex-end;
}

.ld-plan-precio .ld-precio-regular {
   font-size: 13px;
   color: var(--effi-text-muted);
   min-height: 18px;
}

.ld-plan-precio .ld-precio {
   font-family: var(--effi-font-heading);
   font-weight: 700;
   font-size: clamp(20px, 1.4vw + 8px, 26px);
   color: var(--effi-navy);
   line-height: 1.1;
   font-variant-numeric: tabular-nums;
   word-break: break-word;
}

.ld-plan-precio .ld-periodo {
   font-size: 13px;
   color: var(--effi-text-secondary);
}

.ld-plan-specs {
   list-style: none;
   padding: var(--effi-sp-3) 0 0;
   margin: 0;
   border-top: 1px solid var(--effi-border);
   display: grid;
   gap: 8px;
   font-size: 14px;
   color: var(--effi-text-secondary);
}

.ld-plan-specs li {
   display: flex;
   gap: 10px;
   align-items: center;
}

.ld-plan-specs strong {
   color: var(--effi-text);
   font-variant-numeric: tabular-nums;
}

.ld-plan-specs .fa-solid {
   color: var(--effi-accent);
   font-size: 11px;
   width: 16px;
}

.ld-plan .ld-btn {
   margin: auto 0 0; /* pegado al pie de la tarjeta del plan; el padding de la tarjeta ya separa */
}

.ld-flecha {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 1px solid var(--effi-border-strong);
   background: var(--effi-control-bg);
   color: var(--effi-navy);
   box-shadow: var(--effi-shadow);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 2;
   transition: background-color var(--effi-dur-fast) var(--effi-ease), color var(--effi-dur-fast) var(--effi-ease), opacity var(--effi-dur-fast) var(--effi-ease);
}

.ld-flecha:hover {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   border-color: var(--effi-primary-strong);
}

.ld-flecha[disabled] {
   opacity: .35;
   cursor: default;
}

.ld-flecha--izq { left: -22px; }
.ld-flecha--der { right: -22px; }

.ld-precios-nota {
   font-size: 13.5px;
   color: var(--effi-text-muted);
   text-align: center;
   margin-top: var(--effi-sp-3);
}
/* ===== FIN precios ===== */


/* ===== INICIO tabla ===== */
.ld-tabla-wrap {
   overflow-x: auto;
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   background: var(--effi-surface);
}

.ld-tabla {
   width: 100%;
   border-collapse: collapse;
   font-size: 15px;
}

.ld-tabla th, .ld-tabla td {
   padding: 14px 18px;
   text-align: left;
   border-bottom: 1px solid var(--effi-border);
   white-space: nowrap;
}

.ld-tabla th {
   font-size: 12.5px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--effi-text-secondary);
   background: var(--effi-surface-recessed);
   font-weight: 600;
}

.ld-tabla tbody tr:last-child td { border-bottom: 0; }

.ld-tabla td strong {
   color: var(--effi-navy);
   font-variant-numeric: tabular-nums;
}

.ld-tabla--numeros td:not(:first-child), .ld-tabla--numeros th:not(:first-child) {
   text-align: right;
   font-variant-numeric: tabular-nums;
}
/* ===== FIN tabla ===== */


/* ===== INICIO faq ===== */
.ld-faq {
   display: grid;
   gap: var(--effi-sp-3);
   max-width: 860px;
   margin: 0 auto;
}

.ld-faq-item {
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   overflow: hidden;
   transition: border-color var(--effi-dur) var(--effi-ease), box-shadow var(--effi-dur) var(--effi-ease);
}

.ld-faq-item[open] {
   border-color: var(--effi-border-strong);
   box-shadow: var(--effi-shadow-sm);
}

.ld-faq-item summary {
   list-style: none;
   cursor: pointer;
   padding: 18px 22px;
   display: flex;
   align-items: center;
   gap: 16px;
   font-family: var(--effi-font-heading);
   font-weight: 600;
   font-size: 16.5px;
   color: var(--effi-navy);
}

.ld-faq-item summary::-webkit-details-marker { display: none; }

.ld-faq-item summary::after {
   content: "\f078"; /* fa-chevron-down */
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 12px;
   margin-left: auto;
   color: var(--effi-text-muted);
   transition: transform var(--effi-dur-slow) var(--effi-ease);
}

.ld-faq-item[open] summary::after {
   transform: rotate(180deg);
   color: var(--effi-primary);
}

.ld-faq-item summary:hover { color: var(--effi-primary); }

.ld-faq-item .ld-faq-respuesta {
   padding: 0 22px 20px;
   color: var(--effi-text-secondary);
   animation: effi-fade-up var(--effi-dur-slow) var(--effi-ease-out);
}

.ld-faq-item .ld-faq-respuesta p:last-child { margin-bottom: 0; }
/* ===== FIN faq ===== */


/* ===== INICIO contacto ===== */
.ld-contacto-item {
   display: flex;
   gap: var(--effi-sp-4);
   align-items: flex-start;
}

.ld-contacto-item .ld-icono { margin-bottom: 0; flex: 0 0 44px; }

.ld-contacto-item h3 { font-size: 15px; margin-bottom: 4px; color: var(--effi-text-secondary); font-family: var(--effi-font); font-weight: 600; letter-spacing: .02em; }

.ld-contacto-item p { margin: 0; font-size: 15.5px; }

.ld-contacto-item a { font-weight: 500; }

.ld-whatsapp-lista {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 6px;
   font-size: 15px;
}

.ld-whatsapp-lista li { display: flex; gap: 10px; align-items: center; }

.ld-whatsapp-lista .ld-bandera {
   font-size: 12px;
   font-weight: 700;
   color: var(--effi-text-muted);
   width: 26px;
}
/* ===== FIN contacto ===== */


/* ===== INICIO cta final ===== */
.ld-cta {
   background: var(--effi-navy);
   color: var(--effi-white);
   border-radius: var(--effi-radius-xl);
   padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
   position: relative;
   overflow: hidden;
   text-align: center;
}

/* En oscuro --effi-navy pasa a claro: el CTA conserva el relleno azul medio sólido */
html[data-tema="dark"] .ld-cta {
   background: var(--effi-primary-strong);
}

.ld-cta::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(60% 80% at 100% 0%, var(--effi-mesh-1), transparent 70%), radial-gradient(50% 60% at 0% 100%, var(--effi-mesh-3), transparent 70%);
   pointer-events: none;
}

.ld-cta > * { position: relative; }

.ld-cta h2 {
   color: var(--effi-white);
   margin-bottom: var(--effi-sp-3);
}

.ld-cta p {
   color: var(--effi-on-navy);
   font-size: var(--effi-fs-lead);
   max-width: 640px;
   margin: 0 auto var(--effi-sp-5);
}

.ld-cta .ld-btn-grupo { justify-content: center; }
/* ===== FIN cta final ===== */


/* ===== INICIO footer ===== */
.ld-footer {
   background: var(--effi-surface);
   border-top: 1px solid var(--effi-border);
   padding: var(--effi-sp-7) 0 var(--effi-sp-5);
   font-size: 14.5px;
   color: var(--effi-text-secondary);
}

.ld-footer-grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1fr;
   gap: var(--effi-sp-6);
   margin-bottom: var(--effi-sp-6);
}

.ld-footer h4 {
   font-family: var(--effi-font);
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--effi-text-muted);
   margin-bottom: var(--effi-sp-3);
}

.ld-footer ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 8px;
}

.ld-footer a {
   color: var(--effi-text-secondary);
}

.ld-footer a:hover {
   color: var(--effi-primary);
}

.ld-footer-marca p {
   margin-top: var(--effi-sp-3);
   max-width: 360px;
}

.ld-footer-inferior {
   border-top: 1px solid var(--effi-border);
   padding-top: var(--effi-sp-4);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--effi-sp-3);
   font-size: 13.5px;
}

.ld-redes {
   display: flex;
   gap: 8px;
   list-style: none;
   padding: 0;
   margin: 0;
}

.ld-redes a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid var(--effi-border-strong);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--effi-text-secondary);
   background: var(--effi-control-bg);
   transition: background-color var(--effi-dur-fast) var(--effi-ease), color var(--effi-dur-fast) var(--effi-ease), border-color var(--effi-dur-fast) var(--effi-ease);
}

.ld-redes a:hover {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   border-color: var(--effi-primary-strong);
   text-decoration: none;
}

/* Footer compacto de las páginas de autenticación */
.ld-footer--auth {
   padding: var(--effi-sp-4) 0;
}

.ld-footer--auth .ld-footer-inferior {
   border-top: 0;
   padding-top: 0;
   justify-content: center;
   text-align: center;
}

.ld-footer--auth .ld-footer-enlaces-inline {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 18px;
   list-style: none;
   padding: 0;
   margin: 0;
}
/* ===== FIN footer ===== */


/* ===== INICIO autenticacion (ingreso / registro / recuperar) ===== */
.ld-auth {
   min-height: calc(100vh - var(--effi-header-h));
   min-height: calc(100dvh - var(--effi-header-h));
   display: grid;
   grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

.ld-auth--ancha {
   grid-template-columns: minmax(0, 1fr);
}

.ld-auth-formulario {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px);
}

.ld-auth-card {
   width: 100%;
   max-width: 440px;
   margin: 0 auto;
}

.ld-auth--ancha .ld-auth-card {
   max-width: 1080px;
}

.ld-auth-card h1 {
   font-size: clamp(26px, 2vw + 12px, 32px);
   margin-bottom: 6px;
}

.ld-auth-card .ld-lead {
   font-size: 15.5px;
   margin-bottom: var(--effi-sp-5);
}

/* Etiqueta de sección de la tarjeta (sustituye al logo, que ya va en el header; Omar 17-oct-2026): misma pieza que la del panel. */
.ld-auth-card .ld-eyebrow {
   margin-bottom: var(--effi-sp-3);
}

/* Panel visual: captura real del software sobre el mesh, pegado al lado derecho */
.ld-auth-panel {
   position: relative;
   overflow: hidden;
   background: var(--effi-surface-recessed);
   border-left: 1px solid var(--effi-border);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(32px, 4vw, 64px) 0 clamp(32px, 4vw, 64px) clamp(24px, 4vw, 64px);
}

.ld-auth-panel .ld-mesh {
   -webkit-mask-image: none;
   mask-image: none;
}

.ld-auth-panel-texto {
   position: relative;
   max-width: 520px;
   margin-bottom: var(--effi-sp-6);
}

.ld-auth-panel-texto h2 {
   font-size: clamp(22px, 1.4vw + 12px, 30px);
}

.ld-auth-panel-texto p {
   color: var(--effi-text-secondary);
}

.ld-auth-panel .ld-marco {
   position: relative;
   border-right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   width: calc(100% + 1px);
}

.ld-auth-panel .ld-marco img {
   aspect-ratio: 3448 / 1860;
   object-position: top left;
}

.ld-auth-pie {
   margin-top: var(--effi-sp-5);
   text-align: center;
   font-size: 14.5px;
   color: var(--effi-text-secondary);
}

.ld-auth-acciones {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--effi-sp-3);
   align-items: center;
   margin-top: var(--effi-sp-3);
}

.ld-auth-acciones .ld-enlace-centro {
   text-align: center;
   font-size: 14.5px;
}

/* --- Ajuste a pantalla (body.ld-body--ajustada: ingreso y recuperar, Omar 17-oct-2026): header + formulario/panel + pie ocupan
   EXACTAMENTE la altura de la ventana, sin scroll. El body es una columna flex de 100dvh: el main crece y el pie va al fondo;
   dentro del panel el texto conserva su alto y el marco de la captura toma lo que sobra y recorta el dashboard por abajo
   (igual que ya se recorta por la derecha), pegado al borde inferior. Solo en escritorio (el panel se oculta < 1024px) y con alto
   suficiente: en ventanas más bajas se vuelve al scroll normal. Sin overflow hidden: si algo no cabe, se puede desplazar. --- */
@media (min-width: 1024px) and (min-height: 640px) {
   /* Sin rebote elástico (trackpad/mouse en macOS): el scroller raíz se bloquea en html (en body no basta, overscroll-behavior
      solo se propaga a la ventana desde html) y el único scroller interno (la columna del formulario) contiene el gesto. */
   html.ld-html--ajustada {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
   }

   .ld-body--ajustada {
      height: 100dvh;
      overflow: hidden;
      overscroll-behavior: none;
      display: flex;
      flex-direction: column;
   }

   .ld-body--ajustada .ld-main {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
   }

   .ld-body--ajustada .ld-footer {
      flex: 0 0 auto;
   }

   .ld-body--ajustada .ld-auth {
      flex: 1 1 auto;
      min-height: 0;
   }

   .ld-body--ajustada .ld-auth-formulario {
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
   }

   .ld-body--ajustada .ld-auth-panel {
      min-height: 0;
      padding-bottom: 0;
   }

   .ld-body--ajustada .ld-auth-panel-texto {
      flex: 0 0 auto;
   }

   .ld-body--ajustada .ld-auth-panel .ld-marco {
      flex: 1 1 auto;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      border-bottom: 0;
      border-bottom-left-radius: 0;
   }

   .ld-body--ajustada .ld-auth-panel .ld-marco-barra {
      flex: 0 0 auto;
   }

   .ld-body--ajustada .ld-auth-panel .ld-marco picture {
      /* Sin display: el flex lo convierte en bloque y así .ld-solo-claro / .ld-solo-oscuro siguen ocultando la captura del otro tema. */
      flex: 1 1 auto;
      min-height: 0;
   }

   .ld-body--ajustada .ld-auth-panel .ld-marco img {
      height: 100%;
      aspect-ratio: auto;
   }
}

/* Indicador de pasos del registro */
.ld-pasos {
   display: flex;
   gap: var(--effi-sp-3);
   list-style: none;
   padding: 0;
   margin: 0 0 var(--effi-sp-5);
   counter-reset: paso;
}

.ld-pasos li {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border-radius: var(--effi-radius);
   border: 1px solid var(--effi-border);
   background: var(--effi-surface);
   color: var(--effi-text-secondary);
   font-size: 14px;
   font-weight: 500;
   counter-increment: paso;
}

.ld-pasos li::before {
   content: counter(paso);
   width: 26px;
   height: 26px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 12.5px;
   font-weight: 700;
   background: var(--effi-surface-recessed);
   color: var(--effi-text-secondary);
   border: 1px solid var(--effi-border-strong);
}

.ld-pasos li.is-activo {
   border-color: var(--effi-primary);
   color: var(--effi-navy);
}

.ld-pasos li.is-activo::before {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   border-color: var(--effi-primary-strong);
}

.ld-pasos li.is-hecho::before {
   content: "\f00c"; /* fa-check */
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 11px;
   background: var(--effi-success-soft);
   color: var(--effi-success);
   border-color: transparent;
}

/* Secciones del formulario de registro (empresa / usuario) */
.ld-form-seccion {
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   padding: var(--effi-sp-5);
}

.ld-form-seccion h2 {
   font-size: 17px;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: var(--effi-sp-4);
   padding-bottom: var(--effi-sp-3);
   border-bottom: 1px solid var(--effi-border);
}

.ld-form-seccion h2 .fa-solid {
   color: var(--effi-primary);
   font-size: 15px;
}

.ld-form-grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--effi-sp-5);
}

/* Paso 1 del registro: una sola tarjeta centrada */
.ld-form-seccion--centrada {
   max-width: 560px;
   margin: 0 auto;
}

.ld-form-seccion--centrada .ld-centro {
   margin-top: var(--effi-sp-4);
}

.ld-referido {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: var(--effi-sp-3);
   margin-top: var(--effi-sp-4);
   padding: 12px 16px;
   border-radius: var(--effi-radius);
   background: var(--effi-primary-soft);
   color: var(--effi-text);
   font-size: 14.5px;
}

/* ===== FIN autenticacion ===== */


/* ===== INICIO compatibilidad bootstrap (solo lo que esperan ingreso.js / registro.js / validar-inputs.js / global.js) ===== */
/* Grilla mínima: registro.js cambia col-md-6 ↔ col-md-12 y col-md-4 ↔ col-md-6 en #div_nombre_comercial, #div_pais,
   #div_provincia y #div_ciudad, así que estas clases DEBEN existir con el significado de Bootstrap 3 (12 columnas, md ≥ 992).
   Aquí el corte es 768 para que en tablet el formulario no se apile innecesariamente. */
.row {
   display: flex;
   flex-wrap: wrap;
   margin: 0 calc(var(--effi-sp-2) * -1);
}

.row > [class*="col-"] {
   padding: 0 var(--effi-sp-2);
   width: 100%;
   min-width: 0;
}

.col-xs-6 { width: 50%; }

@media (min-width: 768px) {
   .col-md-2 { width: 16.6667%; }
   .col-md-3 { width: 25%; }
   .col-md-4 { width: 33.3333%; }
   .col-md-6 { width: 50%; }
   .col-md-8 { width: 66.6667%; }
   .col-md-12 { width: 100%; }
}

.min-padding {
   padding-left: var(--effi-sp-2);
   padding-right: var(--effi-sp-2);
}

.form-group {
   margin-bottom: var(--effi-sp-4);
}

.form-group > label, .ld-label {
   display: block;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--effi-text-secondary);
   margin-bottom: 6px;
}

.form-control {
   display: block;
   width: 100%;
   min-height: 44px;
   padding: 10px 14px;
   font: inherit;
   font-size: 15px;
   line-height: 1.4;
   color: var(--effi-text);
   background: var(--effi-control-bg);
   border: 1px solid var(--effi-border-strong);
   border-radius: var(--effi-radius);
   transition: border-color var(--effi-dur-fast) var(--effi-ease), box-shadow var(--effi-dur-fast) var(--effi-ease), background-color var(--effi-dur-fast) var(--effi-ease);
}

.form-control:focus {
   outline: none;
   border-color: var(--effi-accent);
   box-shadow: var(--effi-focus-ring);
}

.form-control::placeholder { color: var(--effi-placeholder); opacity: 1; }

.form-control[disabled], .form-control[readonly] {
   background: var(--effi-control-bg-disabled);
   color: var(--effi-text-secondary);
   cursor: not-allowed;
}

/* iOS: con menos de 16px el navegador hace zoom al enfocar */
@supports (-webkit-touch-callout: none) {
   .form-control { font-size: 16px; }
}

.input-group {
   display: flex;
   align-items: stretch;
   width: 100%;
}

.input-group .form-control {
   flex: 1;
   min-width: 0;
   border-radius: 0;
}

.input-group .form-control:first-child { border-radius: var(--effi-radius) 0 0 var(--effi-radius); }
.input-group .form-control:last-child { border-radius: 0 var(--effi-radius) var(--effi-radius) 0; }

.input-group-addon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   padding: 0 12px;
   background: var(--effi-addon-bg);
   border: 1px solid var(--effi-border-strong);
   color: var(--effi-text-secondary);
}

.input-group-addon:first-child { border-right: 0; border-radius: var(--effi-radius) 0 0 var(--effi-radius); }
.input-group-addon:last-child { border-left: 0; border-radius: 0 var(--effi-radius) var(--effi-radius) 0; }

.checkbox label {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-size: 14.5px;
   color: var(--effi-text-secondary);
   cursor: pointer;
   text-align: left;
}

.checkbox input[type="checkbox"] {
   width: 18px;
   height: 18px;
   margin: 2px 0 0;
   accent-color: var(--effi-primary-strong);
   flex: 0 0 18px;
}

.checkbox a { text-decoration: underline; text-decoration-color: var(--effi-accent); text-underline-offset: 2px; }

/* .btn: los botones de ingreso/registro/recuperar conservan las clases Bootstrap que los JS esperan
   (#submit_registro .btn_registro, #submit oculto, .btn-danger "Cancelar", .btn-block). */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 44px;
   padding: 0 22px;
   border-radius: var(--effi-radius);
   border: 1px solid transparent;
   font-weight: 600;
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
   text-decoration: none;
   touch-action: manipulation;
   background: var(--effi-control-bg);
   color: var(--effi-navy);
   border-color: var(--effi-border-strong);
   transition: background-color var(--effi-dur-fast) var(--effi-ease), border-color var(--effi-dur-fast) var(--effi-ease),
   color var(--effi-dur-fast) var(--effi-ease), box-shadow var(--effi-dur-fast) var(--effi-ease), transform var(--effi-dur-fast) var(--effi-ease);
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(.98); }

.btn-primary, .btn_registro {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   border-color: transparent;
   box-shadow: var(--effi-shadow-sm);
}

.btn-primary:hover, .btn-primary:focus, .btn_registro:hover, .btn_registro:focus {
   background: var(--effi-primary-strong-hover);
   color: var(--effi-primary-contrast);
   box-shadow: var(--effi-shadow);
}

.btn-danger {
   background: transparent;
   color: var(--effi-danger);
   border-color: var(--effi-border-strong);
}

.btn-danger:hover {
   background: var(--effi-danger-soft);
   border-color: var(--effi-danger);
   color: var(--effi-danger);
}

.btn-block { width: 100%; }
.btn-lg { min-height: 50px; padding: 0 28px; font-size: 16px; }

/* Alertas que construyen Ingreso.php / Registro.php / Recuperar_password.php / registro.js / tracking (vanilla) */
/* Alertas (ingreso/registro/recuperar): solo barra izquierda de color + icono por tipo (Font Awesome 6, sin HTML nuevo).
   Antes llevaban borde en los cuatro lados y, en ingreso, la alerta azul se confundía con un segundo input (Omar 17-oct-2026). */
.alert {
   position: relative;
   padding: 14px 44px 14px 44px;
   border-radius: var(--effi-radius);
   border: 1px solid transparent;
   border-left-width: 4px;
   margin-bottom: var(--effi-sp-4);
   font-size: 14.5px;
   animation: effi-fade-up var(--effi-dur-slow) var(--effi-ease-out);
}

.alert::before {
   position: absolute;
   left: 16px;
   top: 13px;
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 16px;
   line-height: 1.4;
}

.alert p:last-child, .alert .mb-0 { margin-bottom: 0; }

.alert-danger {
   background: var(--effi-danger-soft);
   border-left-color: var(--effi-danger);
   color: var(--effi-danger);
}

.alert-danger::before { content: "\f071"; }

.alert-success {
   background: var(--effi-success-soft);
   border-left-color: var(--effi-success);
   color: var(--effi-success);
}

.alert-success::before { content: "\f058"; }

.alert-warning {
   background: var(--effi-warning-soft);
   border-left-color: var(--effi-warning-strong);
   color: var(--effi-warning);
}

.alert-warning::before { content: "\f071"; }

.alert-info {
   background: var(--effi-info-soft);
   border-left-color: var(--effi-accent);
   color: var(--effi-info);
}

.alert-info::before { content: "\f05a"; }

.alert .close {
   position: absolute;
   right: 10px;
   top: 8px;
   border: 0;
   background: transparent;
   font-size: 22px;
   line-height: 1;
   color: inherit;
   opacity: .6;
   cursor: pointer;
   padding: 4px 8px;
}

.alert .close:hover { opacity: 1; }

/* Toast del resultado del registro (Ingreso.php: .alert-float .alert-dissmis; global.js lo desvanece a los 5 s) */
.alert-float {
   position: fixed;
   top: calc(var(--effi-header-h) + 12px);
   right: 16px;
   left: 16px;
   max-width: 520px;
   margin: 0 0 0 auto;
   z-index: 1100;
   box-shadow: var(--effi-shadow-lg);
}

/* Tooltip de Bootstrap 3 (capLock de global.js y data-toggle="tooltip" del código de verificación / NIT) */
.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
   font-size: 12.5px;
   line-height: 1.4;
   opacity: 0;
   transition: opacity var(--effi-dur-fast) var(--effi-ease);
}

.tooltip.in { opacity: 1; }
.tooltip.top { margin-top: -3px; padding: 6px 0; }
.tooltip.bottom { margin-top: 3px; padding: 6px 0; }

.tooltip-inner {
   max-width: 240px;
   padding: 6px 10px;
   color: var(--effi-white);
   text-align: center;
   background: var(--effi-tooltip-bg);
   border-radius: var(--effi-radius-sm);
   box-shadow: var(--effi-shadow);
}

.tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
}

.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -6px; border-width: 6px 6px 0; border-top-color: var(--effi-tooltip-bg); }
.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -6px; border-width: 0 6px 6px; border-bottom-color: var(--effi-tooltip-bg); }

/* Modal mínimo (#modal_loading del registro: lo abre global.js solo si existe un .loading; se conserva por compatibilidad) */
.modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 1050;
   overflow: auto;
   outline: 0;
}

.modal.in { display: block; }

.modal-dialog {
   position: relative;
   width: auto;
   max-width: 480px;
   margin: 10vh auto;
}

.modal-content {
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   box-shadow: var(--effi-shadow-lg);
   padding: var(--effi-sp-5);
}

.modal-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1040;
   background: var(--effi-backdrop);
}

.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: 1; }
.fade { transition: opacity var(--effi-dur) var(--effi-ease); }
.modal_loading .text-center { text-align: center; }
.modal_loading img { width: 56px; margin: 0 auto var(--effi-sp-3); }
.modal-title { margin: 0 0 6px; }
.img-responsive { max-width: 100%; height: auto; }
.text-center { text-align: center; }
.pull-left { float: left; }
.pull-right { float: right; }

/* Chosen (select de empresa en ingreso; tipo de cuenta, país, plan, moneda, departamento, ciudad en registro).
   chosen.css se carga antes; aquí se re-estiliza con los tokens (copia del bloque "chosen" de effierp_2026.css).
   width: 100% !important porque chosen fija el ancho inline con el ancho del <select> al iniciarse y, dentro de un
   contenedor oculto (#div_empresa_usuario arranca con display:none), ese ancho es 0px. */
.chosen-container {
   width: 100% !important; /* !important: gana al style="width: Npx" inline que escribe chosen.js */
   font-size: 15px;
   color: var(--effi-text);
}

.chosen-container-single .chosen-single {
   height: 44px;
   line-height: 42px;
   padding: 0 14px;
   background: var(--effi-control-bg);
   color: var(--effi-text);
   border: 1px solid var(--effi-border-strong);
   border-radius: var(--effi-radius);
   box-shadow: none;
   transition: border-color var(--effi-dur-fast) var(--effi-ease), box-shadow var(--effi-dur-fast) var(--effi-ease);
}

.chosen-container-single .chosen-single span { color: var(--effi-text); margin-right: 26px; }
.chosen-container-single .chosen-default span { color: var(--effi-placeholder); }

.chosen-container-active .chosen-single {
   border: 1px solid var(--effi-accent);
   box-shadow: var(--effi-focus-ring);
}

.chosen-container-active.chosen-with-drop .chosen-single {
   border: 1px solid var(--effi-accent);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   background: var(--effi-control-bg);
   box-shadow: var(--effi-focus-ring);
}

.chosen-container-single .chosen-single div {
   width: 30px;
}

.chosen-container-single .chosen-single div b,
.chosen-container-active.chosen-with-drop .chosen-single div b {
   background: none;
   background-image: none !important; /* !important: gana al sprite Retina !important de chosen.css */
   position: relative;
}

.chosen-container-single .chosen-single div b::before {
   content: "";
   position: absolute;
   left: 8px;
   top: 15px;
   width: 8px;
   height: 8px;
   border-right: 2px solid var(--effi-text-muted);
   border-bottom: 2px solid var(--effi-text-muted);
   transform: rotate(45deg);
   transition: transform var(--effi-dur) var(--effi-ease), border-color var(--effi-dur-fast) var(--effi-ease);
}

.chosen-container-active.chosen-with-drop .chosen-single div b::before {
   top: 19px;
   transform: rotate(-135deg);
   border-color: var(--effi-accent);
}

.chosen-disabled .chosen-single {
   border: 1px solid var(--effi-border);
   background: var(--effi-control-bg-disabled);
   color: var(--effi-text-secondary);
   cursor: not-allowed !important; /* !important: iguala el de chosen.css */
}

.chosen-disabled .chosen-single span, .chosen-disabled .chosen-default span { color: var(--effi-text-secondary); }
.chosen-disabled .chosen-single div b::before { opacity: .6; }

.chosen-container .chosen-drop {
   border: 1px solid var(--effi-accent);
   border-top: 0;
   background: var(--effi-popup-bg);
   box-shadow: var(--effi-shadow);
   border-bottom-left-radius: var(--effi-radius);
   border-bottom-right-radius: var(--effi-radius);
}

.chosen-container .chosen-results { color: var(--effi-text); margin: 0 4px 4px 0; padding: 0 0 0 4px; }
.chosen-container .chosen-results li { border-radius: 4px; padding: 8px 10px; line-height: 1.4; }

.chosen-container .chosen-results li.highlighted {
   background-color: var(--effi-primary-strong);
   background-image: none;
   color: var(--effi-primary-contrast);
}

.chosen-container .chosen-results li.no-results {
   background: var(--effi-danger-soft);
   color: var(--effi-danger);
   border-radius: 4px;
}

.chosen-container .chosen-results li.disabled-result { color: var(--effi-text-muted); }

.chosen-container-single .chosen-search { padding: 6px 6px; position: relative; }

.chosen-container-single .chosen-search input[type="text"] {
   border: 1px solid var(--effi-border-strong);
   border-radius: var(--effi-radius-sm);
   background: var(--effi-control-bg-raised);
   background-image: none !important; /* !important: gana al sprite Retina !important de chosen.css */
   color: var(--effi-text);
   padding: 8px 30px 8px 10px;
   font: inherit;
   font-size: 14px;
   width: 100%;
}

.chosen-container-single .chosen-search input[type="text"]:focus {
   outline: none;
   border-color: var(--effi-accent);
   box-shadow: var(--effi-focus-ring);
}

.chosen-container-single .chosen-search::before {
   content: "\f002";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 12px;
   line-height: 1;
   color: var(--effi-text-muted);
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
}

.chosen-container-single .chosen-single abbr {
   background: none;
   background-image: none !important; /* !important: sprite Retina de chosen.css */
}

/* intl-tel-input (celular del registro): el contenedor debe medir el 100 % (regla heredada de registro.css) */
.iti {
   width: 100% !important; /* !important: iguala el de registro.css (el plugin lo pone inline-block) */
}

.iti .form-control { padding-left: 52px; }

.iti__country-list {
   background: var(--effi-popup-bg);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius);
   box-shadow: var(--effi-shadow);
   color: var(--effi-text);
}

.iti__country.iti__highlight { background: var(--effi-surface-hover); }
.iti__dial-code { color: var(--effi-text-secondary); }
.iti__divider { border-bottom-color: var(--effi-border); }
.iti__selected-flag { border-radius: var(--effi-radius) 0 0 var(--effi-radius); }
.iti__flag-container:hover .iti__selected-flag { background: var(--effi-surface-hover); }
.iti__arrow { border-top-color: var(--effi-text-secondary); }
.iti__arrow--up { border-bottom-color: var(--effi-text-secondary); }
/* ===== FIN compatibilidad bootstrap ===== */


/* ===== INICIO tracking (rastreo de guías Efficommerce) ===== */
.ld-tracking-hero {
   padding: clamp(40px, 5vw, 72px) 0;
}

.ld-tracking-busqueda {
   display: flex;
   gap: var(--effi-sp-3);
   max-width: 640px;
   margin: 0 auto;
}

.ld-tracking-busqueda .form-control {
   min-height: 52px;
   font-size: 17px;
   border-radius: var(--effi-radius);
}

.ld-tracking-busqueda .ld-btn { min-height: 52px; margin: 0; } /* va en la misma fila que el input */

.ld-tracking-hero .ld-hero-texto .alert {
   text-align: left;
   margin: var(--effi-sp-4) auto 0;
   max-width: 640px;
}

/* Guía encontrada: la sección arranca pegada al header y el buscador se vuelve compacto, alineado a la izquierda */
.ld-seccion--compacta {
   padding-top: var(--effi-sp-6);
}

.ld-tracking-busqueda--compacta {
   margin: 0 0 var(--effi-sp-5);
   max-width: 520px;
}

.ld-tracking-busqueda--compacta .form-control, .ld-tracking-busqueda--compacta .ld-btn {
   min-height: 44px;
   font-size: 15px;
}

.ld-tracking-card {
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   box-shadow: var(--effi-shadow-sm);
   overflow: hidden;
   margin-bottom: var(--effi-sp-6);
}

.ld-tracking-card-head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--effi-sp-3);
   padding: var(--effi-sp-4) var(--effi-sp-5);
   border-bottom: 1px solid var(--effi-border);
   background: var(--effi-surface-recessed);
}

.ld-tracking-card-head h1 {
   font-size: clamp(18px, 1vw + 12px, 22px);
   margin: 0;
}

.ld-tracking-card-head h1 span { color: var(--effi-primary); }

.ld-estado-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px;
   border-radius: 999px;
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
   font-weight: 600;
   font-size: 14px;
}

.ld-estado-pill::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: currentColor;
}

.ld-tracking-tabs {
   display: flex;
   gap: 0;
   border-bottom: 1px solid var(--effi-border);
   padding: 0 var(--effi-sp-5);
   overflow-x: auto;
}

.ld-tracking-tabs .ld-tab {
   border-radius: 0;
   padding: 14px 18px;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
}

.ld-tracking-tabs .ld-tab[aria-selected="true"] {
   background: transparent;
   color: var(--effi-primary);
   border-bottom-color: var(--effi-primary);
   box-shadow: none;
}

.ld-tracking-body {
   padding: var(--effi-sp-5);
}

.ld-datos-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--effi-sp-5);
   margin-bottom: var(--effi-sp-6);
}

.ld-dato {
   display: grid;
   gap: 2px;
   padding: 10px 0;
   border-bottom: 1px solid var(--effi-border);
   font-size: 15px;
}

.ld-dato:last-child { border-bottom: 0; }

.ld-dato dt {
   font-size: 12px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--effi-text-muted);
   font-weight: 600;
}

.ld-dato dd {
   margin: 0;
   color: var(--effi-text);
   font-weight: 500;
   overflow-wrap: anywhere;
}

.ld-logo-transportadora {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--effi-sp-4);
   border-radius: var(--effi-radius-lg);
   background: var(--effi-white);
   border: 1px solid var(--effi-border);
}

.ld-logo-transportadora img {
   max-height: 72px;
   width: auto;
   object-fit: contain;
}

/* Stepper horizontal de estados globales */
.ld-stepper {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0 0 var(--effi-sp-7);
   gap: 0;
}

.ld-stepper li {
   flex: 1;
   position: relative;
   text-align: center;
   padding: 0 6px;
   color: var(--effi-text-muted);
   font-size: 13.5px;
   font-weight: 600;
}

.ld-stepper li::before, .ld-stepper li::after {
   content: "";
   position: absolute;
   top: 24px;
   height: 2px;
   width: 50%;
   background: var(--effi-border-strong);
}

.ld-stepper li::before { left: 0; }
.ld-stepper li::after { right: 0; }
.ld-stepper li:first-child::before, .ld-stepper li:last-child::after { display: none; }

.ld-stepper .ld-step-icono {
   position: relative;
   z-index: 1;
   width: 48px;
   height: 48px;
   margin: 0 auto 10px;
   border-radius: 50%;
   background: var(--effi-surface);
   border: 2px solid var(--effi-border-strong);
   color: var(--effi-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: transform var(--effi-dur) var(--effi-ease);
}

.ld-stepper li.is-hecho { color: var(--effi-text); }
.ld-stepper li.is-hecho::before, .ld-stepper li.is-hecho::after { background: var(--effi-success); }

.ld-stepper li.is-hecho .ld-step-icono {
   background: var(--effi-success-strong);
   border-color: var(--effi-success-strong);
   color: var(--effi-white);
}

.ld-stepper li.is-novedad .ld-step-icono {
   background: var(--effi-warning-strong);
   border-color: var(--effi-warning-strong);
   color: var(--effi-on-bright);
}

.ld-stepper li.is-alerta .ld-step-icono {
   background: var(--effi-danger-strong);
   border-color: var(--effi-danger-strong);
   color: var(--effi-white);
}

/* Línea de tiempo vertical (histórico de estados y de novedades) */
.ld-timeline-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--effi-sp-5);
}

.ld-timeline-grid--una { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.ld-timeline-card {
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   background: var(--effi-surface);
   overflow: hidden;
}

.ld-timeline-card h3 {
   margin: 0;
   padding: 14px 20px;
   font-size: 14px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--effi-text-secondary);
   background: var(--effi-surface-recessed);
   border-bottom: 1px solid var(--effi-border);
   font-family: var(--effi-font);
   font-weight: 600;
}

.ld-timeline {
   list-style: none;
   margin: 0;
   padding: var(--effi-sp-4) var(--effi-sp-5);
   position: relative;
}

.ld-timeline li {
   position: relative;
   display: grid;
   grid-template-columns: 112px 36px 1fr;
   gap: 12px;
   padding: 10px 0;
   align-items: start;
}

.ld-timeline li::before {
   content: "";
   position: absolute;
   left: 129px;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--effi-border);
}

.ld-timeline li:first-child::before { top: 24px; }
.ld-timeline li:last-child::before { bottom: calc(100% - 24px); }

.ld-timeline-fecha {
   font-size: 13px;
   color: var(--effi-text-secondary);
   font-variant-numeric: tabular-nums;
   padding-top: 8px;
}

.ld-timeline-fecha span {
   display: block;
   font-size: 12px;
   color: var(--effi-text-muted);
}

.ld-timeline-punto {
   position: relative;
   z-index: 1;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}

.ld-timeline li:first-child .ld-timeline-punto {
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
   box-shadow: 0 0 0 4px var(--effi-primary-soft);
}

.ld-timeline-punto--novedad { background: var(--effi-warning-soft); color: var(--effi-warning); }

.ld-timeline-texto {
   padding-top: 6px;
   font-size: 15px;
   font-weight: 600;
   color: var(--effi-text);
}

.ld-timeline-texto span {
   display: block;
   font-weight: 400;
   font-size: 14px;
   color: var(--effi-text-secondary);
   margin-top: 2px;
}

/* Verificación del destinatario (tab "Datos completos") */
.ld-verificar {
   max-width: 760px;
   margin: 0 auto;
}

.ld-verificar > h2 {
   font-size: 20px;
   text-align: center;
   margin-bottom: var(--effi-sp-5);
}

.ld-verificar ol {
   padding-left: 0;
   list-style: none;
   counter-reset: paso;
   display: grid;
   gap: var(--effi-sp-5);
}

.ld-verificar ol > li {
   counter-increment: paso;
   display: grid;
   gap: var(--effi-sp-3);
}

.ld-verificar ol > li > h3 {
   display: flex;
   gap: 12px;
   align-items: center;
   font-size: 16px;
   margin: 0;
}

.ld-verificar ol > li > h3::before {
   content: counter(paso);
   flex: 0 0 28px;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   background: var(--effi-primary-strong);
   color: var(--effi-primary-contrast);
}

.ld-radios {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--effi-sp-3);
}

.ld-radio {
   position: relative;
   display: block;
   padding: 14px 16px 14px 44px;
   border: 1px solid var(--effi-border-strong);
   border-radius: var(--effi-radius);
   background: var(--effi-control-bg);
   cursor: pointer;
   font-size: 14.5px;
   color: var(--effi-text-secondary);
   transition: border-color var(--effi-dur-fast) var(--effi-ease), background-color var(--effi-dur-fast) var(--effi-ease);
}

.ld-radio input {
   position: absolute;
   left: 16px;
   top: 17px;
   width: 18px;
   height: 18px;
   margin: 0;
   accent-color: var(--effi-primary-strong);
}

.ld-radio strong {
   display: block;
   color: var(--effi-text);
   margin-bottom: 2px;
}

.ld-radio:hover { border-color: var(--effi-primary); }
.ld-radio:has(input:checked) { border-color: var(--effi-primary); background: var(--effi-primary-soft); }

.ld-datos-bloque h3 {
   font-size: 14px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--effi-text-secondary);
   font-family: var(--effi-font);
   font-weight: 600;
   margin-bottom: var(--effi-sp-2);
}

.ld-documento {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border-radius: var(--effi-radius);
   border: 1px solid var(--effi-border-strong);
   background: var(--effi-control-bg);
   color: var(--effi-navy);
   font-weight: 600;
   font-size: 14px;
   transition: border-color var(--effi-dur-fast) var(--effi-ease), background-color var(--effi-dur-fast) var(--effi-ease);
}

.ld-documento:hover {
   text-decoration: none;
   border-color: var(--effi-primary);
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
}

.ld-documento .fa-file-pdf { color: var(--effi-danger); }
.ld-documento img { height: 22px; width: auto; }

/* Marca Efficommerce en el header de rastreo (el PNG es horizontal) */
.ld-logo--efficommerce img { height: 44px; }
.ld-logo--efficommerce span { display: none; }
/* ===== FIN tracking ===== */


/* ===== INICIO legal (términos, políticas) ===== */
.ld-legal {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   gap: var(--effi-sp-7);
   align-items: start;
}

.ld-toc {
   position: sticky;
   top: calc(var(--effi-header-h) + 24px);
   background: var(--effi-surface);
   border: 1px solid var(--effi-border);
   border-radius: var(--effi-radius-lg);
   padding: var(--effi-sp-4);
}

.ld-toc h2 {
   font-size: 12.5px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--effi-text-muted);
   font-family: var(--effi-font);
   font-weight: 600;
   margin-bottom: var(--effi-sp-3);
}

.ld-toc ol {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 2px;
}

.ld-toc a {
   display: block;
   padding: 8px 10px;
   border-radius: var(--effi-radius-sm);
   color: var(--effi-text-secondary);
   font-size: 14px;
   border-left: 2px solid transparent;
}

.ld-toc a:hover, .ld-toc a.is-activo {
   background: var(--effi-primary-soft);
   color: var(--effi-primary);
   text-decoration: none;
   border-left-color: var(--effi-primary);
}

.ld-prosa {
   font-size: 16.5px;
   line-height: 1.75;
   color: var(--effi-text-secondary);
}

.ld-prosa h1 { margin-bottom: var(--effi-sp-2); }

.ld-prosa h2 {
   font-size: 22px;
   margin-top: var(--effi-sp-7);
   margin-bottom: var(--effi-sp-3);
   scroll-margin-top: calc(var(--effi-header-h) + 24px);
}

.ld-prosa h2:first-of-type { margin-top: var(--effi-sp-5); }

.ld-prosa p { margin-bottom: var(--effi-sp-4); }

.ld-prosa .ld-fecha {
   font-size: 14px;
   color: var(--effi-text-muted);
   margin-bottom: var(--effi-sp-5);
}

.ld-doc-card {
   display: flex;
   gap: var(--effi-sp-4);
   align-items: flex-start;
}

.ld-doc-card .ld-icono {
   background: var(--effi-danger-soft);
   color: var(--effi-danger);
   margin-bottom: 0;
   flex: 0 0 44px;
}

.ld-doc-card h3 { font-size: 16px; }
.ld-doc-card p { font-size: 14.5px; margin-bottom: var(--effi-sp-3); }
.ld-doc-card .ld-btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
/* ===== FIN legal ===== */


/* ===== INICIO responsive ===== */
@media (max-width: 1199px) {
   .ld-planes { grid-auto-columns: calc((100% - 2 * var(--effi-sp-4)) / 3); }
   .ld-flecha--izq { left: 0; }
   .ld-flecha--der { right: 0; }
}

@media (max-width: 1023px) {
   .ld-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .ld-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .ld-feature { grid-template-columns: minmax(0, 1fr); }
   .ld-feature--invertida .ld-feature-texto { order: 0; }
   .ld-footer-grid { grid-template-columns: 1fr 1fr; }
   .ld-planes { grid-auto-columns: calc((100% - var(--effi-sp-4)) / 2); }
   .ld-auth { grid-template-columns: minmax(0, 1fr); }
   .ld-auth-panel { display: none; }
   .ld-legal { grid-template-columns: minmax(0, 1fr); gap: var(--effi-sp-5); }
   .ld-toc { position: static; }
   .ld-datos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .ld-timeline-grid { grid-template-columns: minmax(0, 1fr); }

   /* Menú móvil: los enlaces pasan a un panel desplegable debajo del header */
   .ld-hamburguesa { display: inline-flex; }

   .ld-nav-enlaces {
      position: fixed;
      top: var(--effi-header-h);
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: var(--effi-sp-3) var(--effi-gutter) var(--effi-sp-4);
      background: var(--effi-surface);
      border-bottom: 1px solid var(--effi-border);
      box-shadow: var(--effi-shadow-lg);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity var(--effi-dur) var(--effi-ease), transform var(--effi-dur) var(--effi-ease);
   }

   .ld-nav.is-abierto .ld-nav-enlaces {
      opacity: 1;
      transform: none;
      pointer-events: auto;
   }

   .ld-nav-enlaces a {
      min-height: 46px;
      font-size: 16px;
   }

   .ld-nav-acciones .ld-btn--fantasma { display: none; }
   .ld-solo-movil { display: block; }
   .ld-solo-movil a .fa-solid { margin-right: 6px; color: var(--effi-primary); }
}

@media (max-width: 767px) {
   :root { --effi-header-h: 60px; }
   .ld-grid--2, .ld-grid--3, .ld-grid--4 { grid-template-columns: minmax(0, 1fr); }
   .ld-footer-grid { grid-template-columns: 1fr; gap: var(--effi-sp-5); }
   .ld-planes { grid-auto-columns: 86%; }
   .ld-flecha { display: none; }
   .ld-logo img { height: 34px; }
   .ld-nav-acciones .ld-btn { padding: 0 12px; font-size: 14px; }
   .ld-hero .ld-btn-grupo .ld-btn { flex: 1 1 100%; }
   .ld-marco-barra .ld-marco-url { display: none; }
   .ld-form-grid-2 { grid-template-columns: minmax(0, 1fr); }
   .ld-auth-acciones { grid-template-columns: minmax(0, 1fr); }
   .ld-pasos { flex-direction: column; }
   .ld-tracking-busqueda { flex-direction: column; }
   .ld-datos-grid { grid-template-columns: minmax(0, 1fr); }
   .ld-radios { grid-template-columns: minmax(0, 1fr); }
   .ld-stepper { flex-wrap: wrap; gap: var(--effi-sp-3) 0; }
   .ld-stepper li { flex: 1 1 33%; }
   .ld-stepper li::before, .ld-stepper li::after { display: none; }
   .ld-timeline li { grid-template-columns: 36px 1fr; }
   .ld-timeline li::before { left: 17px; }
   .ld-timeline-fecha { grid-column: 2; order: 2; padding-top: 0; }
   .ld-timeline-fecha span { display: inline; margin-left: 6px; }
   .ld-timeline-texto { grid-column: 2; padding-top: 6px; }
   .ld-timeline-punto { grid-row: 1 / span 2; }
   .ld-tabla th, .ld-tabla td { padding: 12px 14px; font-size: 14px; }
   .ld-cta { border-radius: var(--effi-radius-lg); }
   .ld-hero-texto { text-align: left; }
   .ld-hero .ld-lead, .ld-hero .ld-btn-grupo, .ld-hero-cifra, .ld-chip-pais-lista { justify-content: flex-start; margin-left: 0; }
}

@media (min-width: 1400px) {
   :root { --effi-ancho-max: 1280px; }
}

@media (hover: none) {
   .ld-btn:hover, .btn:hover { transform: none; }
   .ld-tarjeta:hover { box-shadow: var(--effi-shadow-sm); }
}
/* ===== FIN responsive ===== */


/* ===== INICIO accesibilidad e impresion ===== */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation: none !important; /* !important: accesibilidad, apaga TODO el movimiento */
      transition: none !important;
      scroll-behavior: auto !important;
   }
   html.ld-js .ld-reveal:not(.is-visible) { opacity: 1; transform: none; }
}

@media print {
   .ld-header, .ld-footer, .ld-cta, .ld-tema-toggle, .ld-hamburguesa, .ld-skip { display: none !important; }
   .ld-main { padding-top: 0; }
   body { background: var(--effi-print-bg); color: var(--effi-print-text); }
   .ld-marco { box-shadow: none; }
   html.ld-js .ld-reveal:not(.is-visible) { opacity: 1; transform: none; }
}
/* ===== FIN accesibilidad e impresion ===== */