/* ═══════════════════════════════════════════════════════════════════════════
   CONEXIA · cx-brand.css — capa de marca
   ───────────────────────────────────────────────────────────────────────────
   Paleta derivada del manual corporativo en OKLCH. Anclas exactas:
     Cyan   Pantone P 124-6 C  #1CA4AF   OKLCH(65,7% 0,107 203,7)
     Azul   Pantone P 99-16 C  #1C3768   OKLCH(34,4% 0,092 261,2)
     Negro  Pantone 296 C      #021521   OKLCH(18,6% 0,036 237,2)

   Los literales de todo el sitio ya se migraron a esta paleta (barrido del
   2026-08-19). Este fichero hace lo que el barrido no puede hacer:
     · define la escala completa para usarla de aquí en adelante
     · corrige el gradiente del CTA, que si no falla AA en su extremo claro
     · levanta el acento en modo oscuro, que si no se queda en 4,04:1
     · separa lienzo / sección / tarjeta para que las tarjetas tengan relieve
     · arregla dos bugs de contraste heredados (títulos invisibles)

   CARGA EN ÚLTIMO LUGAR, después de cx-dm.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Escala primaria · cyan de marca (H 203,7°) ── */
  --cx-primary-50:  #edf7f8;
  --cx-primary-100: #d8eff1;
  --cx-primary-200: #b3dde2;
  --cx-primary-300: #85cad0;
  --cx-primary-400: #54b7c1;
  --cx-primary-500: #1ca4af;   /* ANCLA manual · 3,01:1 vs #fff → nunca texto */
  --cx-primary-600: #00828c;   /* 4,59:1 vs #fff · acento e interacción       */
  --cx-primary-700: #006f78;   /* 5,92:1 vs #fff · seguro sobre cualquier claro */
  --cx-primary-800: #00575f;
  --cx-primary-900: #004248;
  --cx-primary-950: #002529;
  --cx-primary-rgb: 28 164 175;

  /* ── Escala secundaria · azul de marca (H 261,2°) ── */
  --cx-secondary-50:  #f1f5fc;
  --cx-secondary-100: #e1eaf9;
  --cx-secondary-200: #c5d5f1;
  --cx-secondary-300: #a4bde8;
  --cx-secondary-400: #87a7de;
  --cx-secondary-500: #6e91d0;
  --cx-secondary-600: #5171aa;
  --cx-secondary-700: #436093;
  --cx-secondary-800: #314b79;
  --cx-secondary-900: #1c3768;   /* ANCLA manual · 11,69:1 vs #fff */
  --cx-secondary-950: #0c1e3f;
  --cx-secondary-rgb: 28 55 104;

  /* ── Neutros · tintados con el negro de marca (H ~237°), no grises ── */
  --cx-neutral-50:  #f9fbfc;
  --cx-neutral-100: #f1f4f6;
  --cx-neutral-200: #e0e5e9;
  --cx-neutral-300: #c8cfd3;
  --cx-neutral-400: #aab2b8;
  --cx-neutral-500: #879197;
  --cx-neutral-600: #657078;   /* 5,07:1 vs #fff */
  --cx-neutral-700: #47555d;   /* 7,71:1 */
  --cx-neutral-800: #2d3d47;
  --cx-neutral-900: #172934;
  --cx-neutral-950: #021521;   /* ANCLA manual · 18,55:1 vs #fff */
  --cx-neutral-rgb: 2 21 33;

  /* ── Superficies: lienzo ≠ sección ≠ tarjeta ──
     Antes el lienzo era #fff y las tarjetas también: sin relieve posible.
     Ahora las tarjetas (que siguen siendo #fff) destacan sobre el lienzo. */
  --cx-bg:        var(--cx-neutral-50);    /* lienzo                    */
  --cx-bg-soft:   var(--cx-neutral-100);   /* secciones alternas        */
  --cx-bg-mute:   var(--cx-neutral-200);   /* bloques de más contraste  */
  --cx-bg-dark:   var(--cx-neutral-950);   /* secciones oscuras, footer */
  --cx-line:      var(--cx-neutral-200);
  --cx-line-soft: var(--cx-neutral-100);

  /* ── Jerarquía de texto: 17,9 / 7,4 / 4,9 sobre el lienzo ── */
  --cx-ink:       var(--cx-neutral-950);
  --cx-ink-soft:  var(--cx-neutral-800);
  --cx-mute:      var(--cx-neutral-700);
  --cx-mute-soft: var(--cx-neutral-600);   /* antes #8892b0 → 3,09:1, fallaba */

  /* ── Acento ──
     --cx-blue apunta al peldaño 700, no al 600. Motivo medido: el 600
     (#00828c) da 4,59:1 sobre blanco pero solo 4,16:1 sobre las secciones
     soft, donde viven la mitad de los eyebrows y enlaces. El 700 cumple AA
     sobre blanco, sobre el lienzo y sobre las secciones soft (5,9 / 5,7 / 5,4)
     y además da 5,92:1 con texto blanco encima, así que sirve igual para
     fondo de botón. Un único valor seguro en los dos sentidos. */
  --cx-blue:      var(--cx-primary-700);
  --cx-blue-dark: var(--cx-primary-800);
  /* --cx-cyan y --cx-purple se usan 94 veces como `color:` y solo 5 como
     fondo o borde. Por eso apuntan al peldaño de texto, no al cyan puro:
     #1CA4AF sobre sus propios tintes claros se queda en 2,7:1.
     Para identidad (fondos, gráficos) está --cx-primary-500. */
  --cx-cyan:      var(--cx-primary-700);
  --cx-purple:    var(--cx-primary-700);   /* el nombre miente desde v2 */

  /* El dorado no está en el manual: es un acento heredado. Se conserva,
     pero con contraste. El #d4a541 original daba 2,27:1 sobre blanco;
     este da 6,34:1, y 5,49:1 sobre su propio tinte al 14%, que es donde
     realmente se usa (chips de "Oro", "Add-on", tags de comparativa). */
  --cx-gold:      #825700;
  --cx-green:     #0e742f;   /* 5,90:1 vs blanco, 5,07:1 sobre su tinte 12% */
  --cx-red:       #9f3a33;   /* 5,44:1 vs blanco */

  /* ── Gradientes ──
     El de interfaz cumple AA con texto blanco en TODO su recorrido
     (peor punto #007b86 → 5,03:1). El de identidad reproduce la "X" del
     logo y NO debe llevar texto encima: su extremo claro da 3,01:1. */
  --cx-gradient: linear-gradient(135deg,
      #007b86 0%, #106a7f 25%, #175977 50%, #1a4870 75%, #1c3768 100%);
  --cx-gradient-brand: linear-gradient(135deg,
      #1ca4af 0%, #1f889d 25%, #206c8c 50%, #1f517a 75%, #1c3768 100%);
  --cx-gradient-soft: linear-gradient(135deg,
      rgb(var(--cx-primary-rgb) / 9%) 0%, rgb(var(--cx-secondary-rgb) / 7%) 100%);
  --cx-glow-blue: 0 0 30px rgb(var(--cx-primary-rgb) / 25%);

  /* ── Puente con el sistema v3, que iba por su cuenta ── */
  --cx3-accent:      var(--cx-primary-600);
  --cx3-accent-2:    var(--cx-secondary-800);
  --cx3-accent-soft: var(--cx-primary-50);
  --cx3-accent-glow: rgb(var(--cx-primary-rgb) / 20%);
  --cx3-bg:          var(--cx-bg);
  --cx3-surface:     #ffffff;
  --cx3-ink-1:       var(--cx-ink);
}

/* ═══════════════ MODO OSCURO ═══════════════
   cx-dm.css ya trae las superficies tintadas con el negro de marca, pero no
   redefine el acento: sin esto los enlaces quedan en #00828c sobre #021521,
   que da 4,04:1 y no llega a AA. Se sube dos peldaños de la escala. */
html[data-theme="dark"] {
  --cx-blue:      var(--cx-primary-400);   /* 7,88:1 sobre #021521 */
  --cx-blue-dark: var(--cx-primary-300);   /* 10,03:1 */
  --cx-cyan:      var(--cx-primary-300);
  --cx-purple:    var(--cx-primary-300);

  --cx-gradient: linear-gradient(135deg,
      var(--cx-primary-500) 0%, var(--cx-secondary-700) 100%);
  --cx-gradient-brand: linear-gradient(135deg,
      var(--cx-primary-400) 0%, var(--cx-secondary-500) 100%);
  --cx-gradient-soft: linear-gradient(135deg,
      rgb(var(--cx-primary-rgb) / 14%) 0%, rgb(var(--cx-secondary-rgb) / 12%) 100%);
  --cx-glow-blue: 0 0 40px rgb(var(--cx-primary-rgb) / 18%);

  --cx3-accent:      var(--cx-primary-400);
  --cx3-accent-2:    var(--cx-secondary-400);
  --cx3-accent-soft: var(--cx-primary-950);
  --cx3-accent-glow: rgb(var(--cx-primary-rgb) / 18%);
}

/* Con texto blanco encima, el botón primario necesita el gradiente de interfaz. */
.cx-btn--primary,
.cx-nav__cta,
.cx-rnav__cta {
  background-image: var(--cx-gradient);
}

/* ═══════════════ BUGS DE CONTRASTE HEREDADOS ═══════════════
   Los dos son el mismo error: el CSS apunta a h4 y el markup escribe h3. */

/* cx-v2.css:460 define .cx-foot__col h4, pero el footer usa <h3>.
   Resultado: la tinta sobre el fondo oscuro del footer daba 1,00:1. */
.cx-foot__col h3 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 16px;
}

/* Mismo error en la sección oscura de portada: .cx-garantia h4 vs <h3>.
   Ganaba .cx3-card-up h3 de cx-design-v3.css por orden de carga → 1,05:1. */
.cx-section--dark .cx3-card-up h3,
.cx-section--dark .cx3-card-up h4,
.cx-garantia h3 {
  color: #fff;
}

/* Chips, badges y eyebrows van sobre un tinte del primario al 8-12%.
   A 11-12 px, #00828c sobre ese tinte se queda en 3,7:1 y no llega a AA.
   Se baja un peldaño: 4,8-5,4:1. */
.cx-hero__pretag,
.cx3-pill,
.cx-mock-pill--blue,
.cx-testim__badge,
.cx-eyebrow--blue {
  color: var(--cx-primary-700);
}
html[data-theme="dark"] .cx-hero__pretag,
html[data-theme="dark"] .cx3-pill,
html[data-theme="dark"] .cx-mock-pill--blue,
html[data-theme="dark"] .cx-testim__badge,
html[data-theme="dark"] .cx-eyebrow--blue {
  color: var(--cx-primary-300);
}

/* Botones de WhatsApp: se conserva el verde de marca de WhatsApp, pero en
   blanco el texto daba 1,98:1. Con la tinta corporativa da 9,36:1. */
.cx-cta-wa,
.cx-cta-wa__label,
a.cx-btn.cx-btn--wa,
a.cx-btn.cx-btn--wa:hover,
button.cx-btn.cx-btn--wa,
button.cx-btn.cx-btn--wa:hover {
  color: var(--cx-neutral-950);
}
.cx-btn--wa svg { color: inherit; }

/* Dorado en modo oscuro: #825700 sobre fondo oscuro es ilegible. */
html[data-theme="dark"] {
  --cx-gold:  #d9a441;
  --cx-green: #5cc47a;
  --cx-red:   #e88b83;
}

/* Foco visible en todo el sitio: hasta ahora solo había cuatro reglas
   :focus-visible, y los controles del carrusel del hero eran tabulables
   sin ningún indicador. */
:focus-visible {
  outline: 2px solid var(--cx-primary-600);
  outline-offset: 2px;
  border-radius: 3px;
}
html[data-theme="dark"] :focus-visible {
  outline-color: var(--cx-primary-400);
}

/* cx-v2 declara scroll-behavior:smooth sin guarda. Para quien pide reducir
   el movimiento, un salto de ancla de 8.000 px animado marea. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ═══════════════ Barrido de brillo al pasar el ratón ═══════════════
   Adaptado de GlareHover — React Bits, MIT + Commons Clause,
   (c) 2026 David Haz · https://github.com/DavidHDev/react-bits

   El componente original no tiene lógica: es un <div> que traduce props a
   variables CSS, y el efecto vive entero en su hoja de estilos. Aquí va
   montado como una capa de `background-image` sobre clases que ya existen
   en el HTML, así que no hace falta tocar ni una página.

   Dos decisiones que no son cosméticas:
   · No usa ::before ni ::after porque los dos ya están ocupados por el
     spotlight de cx-design-v3, que sigue al puntero.
   · Usa `animation` y no `transition` porque estas tarjetas declaran su
     transition en tres sitios distintos (cx-design-v3, cx-anim y los
     <style> de página) y redeclararla aquí las rompería. Ninguna tiene
     animación propia, así que este hueco está libre. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cx3-card-up {
    background-image: linear-gradient(-48deg,
      transparent 42%,
      rgb(var(--cx-primary-rgb) / 13%) 50%,
      transparent 58%);
    background-repeat: no-repeat;
    background-size: 210% 210%;
    background-position: -50% -50%;      /* en reposo, fuera de plano */
  }

  /* Sobre fondo oscuro el tinte cyan no se lee: ahí el brillo va en blanco. */
  .cx-garantia,
  .cx-section--dark .cx3-card-up,
  html[data-theme="dark"] .cx3-card-up {
    background-image: linear-gradient(-48deg,
      transparent 42%,
      rgb(255 255 255 / 10%) 50%,
      transparent 58%);
    background-repeat: no-repeat;
    background-size: 210% 210%;
    background-position: -50% -50%;
  }

  .cx3-card-up:hover,
  .cx-garantia:hover {
    animation-name: cx-glare;
    animation-duration: .85s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }

  @keyframes cx-glare {
    from { background-position: -50% -50%; }
    to   { background-position: 150% 150%; }
  }
}