/*
 * Suplemento del sistema visual heredado (assets/css/nexa-ref.css).
 *
 * Dos responsabilidades, y solo esas:
 *   1. Reponer lo que el preflight de Tailwind rompe dentro de WordPress.
 *   2. Definir a mano las utilidades que el theme necesita y que no estan
 *      compiladas en el chunk de referencia (solo trae las que usa el sitio real).
 *
 * Regla: nunca escribir una clase Tailwind nueva en un template esperando que
 * exista. Si no esta en nexa-ref.css, se define aca.
 */

/* ---------------------------------------------------------------- *
 * 1. WordPress vs preflight de Tailwind
 * ---------------------------------------------------------------- */

/* La admin bar depende de margenes, listas y line-height que el preflight resetea. */
#wpadminbar,
#wpadminbar * {
    box-sizing: content-box;
    line-height: normal;
}

#wpadminbar ul,
#wpadminbar ol {
    list-style: none;
}

#wpadminbar img {
    display: inline-block;
    vertical-align: middle;
}

html[class*='wp-toolbar'] {
    padding-top: 32px;
}

@media screen and (max-width: 782px) {
    html[class*='wp-toolbar'] {
        padding-top: 46px;
    }
}

/* Con la admin bar visible, el header sticky tiene que arrancar debajo de ella. */
body.admin-bar .nexa-sticky-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .nexa-sticky-header {
        top: 46px;
    }
}

/* Contenido de Gutenberg / editor clasico: el preflight le saca todo el ritmo. */
.wp-block-image img,
.wp-block-cover img {
    max-width: 100%;
    height: auto;
}

.wp-block-quote {
    border-left: 3px solid var(--brand);
    padding-left: 1rem;
}

.wp-block-separator {
    border-top: 1px solid var(--line);
}

/* Accesibilidad estandar de WP, que el preflight tampoco trae. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 0 2px 2px rgba(15, 23, 42, 0.12);
    clip-path: none;
    color: var(--accent);
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 1rem;
    line-height: normal;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    top: 1rem;
    width: auto;
    z-index: 100000;
}

/* ---------------------------------------------------------------- *
 * 2. Utilidades ausentes del chunk compilado
 *
 * El sitio de referencia no usa estos pasos de la escala, asi que Tailwind
 * nunca los genero. Misma formula que el resto (--spacing: .25rem).
 * ---------------------------------------------------------------- */

.gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
}

.py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
}

.pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
}

.mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
}

.max-h-\[85vh\] {
    max-height: 85vh;
}

.w-\[19rem\] {
    width: 19rem;
}

.min-w-\[19rem\] {
    min-width: 19rem;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.h-64 {
    height: calc(var(--spacing) * 64);
}

@media (min-width: 640px) {
    .sm\:h-80 {
        height: calc(var(--spacing) * 80);
    }
}

/* ---------------------------------------------------------------- *
 * 3. Piezas propias del theme WordPress
 * ---------------------------------------------------------------- */

/*
 * Menu mobile. El sitio de referencia oculta el nav entero bajo 768px y no
 * ofrece alternativa; aca se agrega a proposito. El panel usa los mismos
 * tokens que el resto del sistema.
 */
.nexa-mobile-toggle {
    display: inline-flex;
}

@media (min-width: 768px) {
    .nexa-mobile-toggle {
        display: none;
    }
}

.nexa-mobile-panel {
    display: none;
}

.nexa-mobile-panel.is-open {
    display: block;
}

@media (min-width: 768px) {
    .nexa-mobile-panel,
    .nexa-mobile-panel.is-open {
        display: none;
    }
}

.nexa-burger {
    display: block;
    height: 1.5px;
    width: 1.125rem;
    background: currentColor;
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

[aria-expanded='true'] > .nexa-burger:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

[aria-expanded='true'] > .nexa-burger:nth-child(2) {
    opacity: 0;
}

[aria-expanded='true'] > .nexa-burger:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/*
 * Acordeon de FAQ. La fila pasa de 0fr a 1fr, que es animable y no necesita
 * medir el contenido desde JS: el JS solo alterna la clase.
 */
.nexa-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.nexa-accordion-panel > div {
    overflow: hidden;
}

.nexa-accordion-item.is-open .nexa-accordion-panel {
    grid-template-rows: 1fr;
}

.nexa-accordion-item.is-open .nexa-accordion-icon {
    transform: rotate(180deg);
}

.nexa-accordion-icon {
    transition: transform 0.2s ease;
}

/* Modal de caso de exito. */
.nexa-modal[hidden] {
    display: none;
}

/* El carrusel de casos arrastra con el mouse; sin esto el drag selecciona texto. */
.nexa-carousel.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Respeto por prefers-reduced-motion: los marquees son decorativos. */
@media (prefers-reduced-motion: reduce) {
    .logos-track,
    .segment-track {
        animation: none !important;
    }

    .logos-marquee,
    .segment-marquee {
        overflow-x: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
 * REDISEÑO 2026 — fondo azul institucional + cards blancas
 *
 * Escrito a mano porque el theme no tiene build de Tailwind: una clase
 * nueva en un template no genera CSS (ver CLAUDE.md). Todo lo de este
 * bloque son overrides sobre utilidades que YA existen en nexa-ref.css.
 *
 * Paleta:
 *   #000849  fondo institucional
 *   #1D16D1  títulos dentro de cards blancas
 *   #1A1A1A  cuerpo de texto dentro de cards blancas
 *   #64A3D9  glow neón en hover
 *
 * Para revertir: borrar desde acá hasta el final del archivo.
 * ================================================================ */

:root {
    --nexa-blue: #000849;
    --nexa-card-title: #1D16D1;
    --nexa-card-body: #1A1A1A;
    --nexa-glow: #64A3D9;
    --nexa-subcard: #F2F4FF;
}

/* ---------------------------------------------------------------- *
 * 1. Fondo azul + granulado
 *
 * El granulado es un SVG feTurbulence embebido: no suma request y no
 * necesita imagen. Va como background-image del <body>, detrás de todo.
 * ---------------------------------------------------------------- */

body,
body[data-theme],
body[data-theme=default],
body[data-theme=salud],
body[data-theme=mutuales],
body[data-theme=financieras],
body[data-theme=empresas] {
    background-color: var(--nexa-blue) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.28'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 180px 180px !important;
    background-attachment: fixed !important;
    color: #ffffff;
}

/* ---------------------------------------------------------------- *
 * 2. Texto sobre el azul -> blanco
 * ---------------------------------------------------------------- */

body .text-accent,
body .text-muted,
body .text-foreground,
body .text-brand,
body .text-brand-dark,
body .text-slate-300,
body .text-teal-200 {
    color: #ffffff !important;
}

/* Si más adelante se quiere devolver jerarquía a los eyebrows sobre el azul,
   descomentar esto y quedan en celeste en lugar de blanco:
   #nexa-main .text-brand { color: var(--nexa-glow) !important; } */

/* Las 4 cards de vertical (Salud / Financieras / Mutuales / Empresas) quedan
   sin tocar por pedido expreso. Su fondo es .glass-panel (blanco al 78%), así
   que hay que devolverles el color de texto original: la regla de arriba las
   había pasado a blanco y quedaban ilegibles. */
#nexa-main .glass-panel[style] .text-accent {
    color: #0b1220 !important;
}
#nexa-main .glass-panel[style] .text-muted {
    color: #5b6578 !important;
}

/* Separadores y bordes sueltos sobre el azul */
body .border-line,
body .border-line-strong {
    border-color: rgba(255, 255, 255, .16) !important;
}

/* ---------------------------------------------------------------- *
 * 3. Cards blancas
 *
 * Las 4 cards de vertical (Salud / Financieras / Mutuales / Empresas)
 * llevan style inline con su color propio: el :not([style]) las excluye
 * a propósito para que conserven su identidad.
 * ---------------------------------------------------------------- */

#nexa-main .glass-panel:not([style]),
#nexa-main article[class*="bg-white"],
#nexa-main form.glass-panel,
#nexa-main a[class*="bg-white/7"],
#nexa-main div[class*="bg-white/8"] {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(0, 8, 73, .10) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
    transition: box-shadow .32s ease, border-color .32s ease, transform .32s ease;
}

/* Sub-bloques blancos anidados dentro de una card blanca: si quedan
   blanco sobre blanco desaparecen, así que van en un tinte muy claro. */
#nexa-main .glass-panel:not([style]) [class*="bg-white/8"],
#nexa-main .glass-panel:not([style]) [class*="bg-white/9"] {
    background-color: var(--nexa-subcard) !important;
    border-color: rgba(29, 22, 209, .14) !important;
    box-shadow: none !important;
}

/* Tipografía dentro de las cards blancas.
   :not(button) evita pisar el color del botón de envío (ver "Botón de
   envío de los formularios" más abajo): ese botón trae text-accent en
   su clase pero ya tiene su propio color explícito sobre fondo navy. */
#nexa-main .glass-panel:not([style]) :is(h1, h2, h3, h4, .text-accent, .text-brand, .text-foreground):not(button),
#nexa-main article[class*="bg-white"] :is(h1, h2, h3, h4, .text-accent, .text-brand, .text-foreground),
#nexa-main a[class*="bg-white/7"] :is(h1, h2, h3, h4, .text-accent, .text-brand),
#nexa-main div[class*="bg-white/8"] :is(h1, h2, h3, h4, .text-accent, .text-brand) {
    color: var(--nexa-card-title) !important;
    font-weight: 700;
}

#nexa-main .glass-panel:not([style]) :is(p, li, span, dd, dt, label, .text-muted),
#nexa-main article[class*="bg-white"] :is(p, li, span, dd, dt, label, .text-muted),
#nexa-main a[class*="bg-white/7"] :is(p, span, .text-muted),
#nexa-main div[class*="bg-white/8"] :is(p, li, span, .text-muted) {
    color: var(--nexa-card-body) !important;
}

/* El número de las métricas (+500 / +20 / +4000) también es título */
#nexa-main div[class*="bg-white/8"] .text-3xl,
#nexa-main div[class*="bg-white/8"] .text-4xl {
    color: var(--nexa-card-title) !important;
}

/* Círculos de ícono: eran teal (--brand), pasan al azul de títulos */
#nexa-main .bg-brand\/10 {
    background-color: rgba(29, 22, 209, .10) !important;
}
#nexa-main .glass-panel:not([style]) .text-brand,
#nexa-main article[class*="bg-white"] .text-brand {
    color: var(--nexa-card-title) !important;
}

/* ---------------------------------------------------------------- *
 * 4. Hover glow neón (#64A3D9)
 *
 * Solo en las cards de primer nivel: si se aplica también a los
 * sub-bloques se encienden dos halos a la vez.
 * ---------------------------------------------------------------- */

#nexa-main .glass-panel:not([style]):hover,
#nexa-main article[class*="bg-white"]:hover,
#nexa-main form.glass-panel:hover,
#nexa-main a[class*="bg-white/7"]:hover {
    border-color: rgba(100, 163, 217, .9) !important;
    box-shadow:
        0 0 0 1px rgba(100, 163, 217, .85),
        0 0 16px rgba(100, 163, 217, .55),
        0 0 44px rgba(100, 163, 217, .34),
        0 16px 40px rgba(0, 0, 0, .26);
}

/* ---------------------------------------------------------------- *
 * 5. CTA de cierre: de oscuro a blanco
 * ---------------------------------------------------------------- */

#nexa-main div[class*="rounded-[2rem]"].bg-accent {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 8, 73, .10) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
}

/* El degradado radial teal/ámbar del original no funciona sobre blanco */
#nexa-main div[class*="rounded-[2rem]"].bg-accent > .absolute.inset-0 {
    background-image: none !important;
}

#nexa-main div[class*="rounded-[2rem]"].bg-accent .text-teal-200 {
    color: var(--nexa-glow) !important;
}
#nexa-main div[class*="rounded-[2rem]"].bg-accent > .relative > div > p:not(.text-teal-200):not(.text-slate-300) {
    color: var(--nexa-card-title) !important;
}
#nexa-main div[class*="rounded-[2rem]"].bg-accent .text-slate-300 {
    color: var(--nexa-card-body) !important;
}

/* Botón dentro del CTA blanco: era blanco sobre oscuro, se invierte */
#nexa-main div[class*="rounded-[2rem]"].bg-accent a[class*="bg-white"] {
    background-color: var(--nexa-card-title) !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------------- *
 * 6. Botones sólidos sobre el azul
 *
 * bg-accent es #0b1220: sobre #000849 queda casi invisible.
 * ---------------------------------------------------------------- */

#nexa-main a[class*="rounded-full"].bg-accent,
#nexa-main button[class*="rounded-full"].bg-accent {
    background-color: var(--nexa-card-title) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(29, 22, 209, .35) !important;
}
#nexa-main a[class*="rounded-full"].bg-accent:hover,
#nexa-main button[class*="rounded-full"].bg-accent:hover {
    background-color: #1710a8 !important;
}

/* Botón de envío de los formularios (vive dentro de una card blanca) */
#nexa-main form.glass-panel button[type=submit] {
    background-color: var(--nexa-card-title) !important;
    border-color: var(--nexa-card-title) !important;
    color: #ffffff !important;
}
#nexa-main form.glass-panel button[type=submit]:hover {
    background-color: #1710a8 !important;
}

/* Campos del formulario */
#nexa-main form.glass-panel :is(input, select, textarea) {
    background-color: #ffffff !important;
    border-color: rgba(29, 22, 209, .22) !important;
    color: var(--nexa-card-body) !important;
    box-shadow: none !important;
}
#nexa-main form.glass-panel :is(input, select, textarea):focus {
    border-color: var(--nexa-glow) !important;
    box-shadow: 0 0 0 3px rgba(100, 163, 217, .28) !important;
}

/* ---------------------------------------------------------------- *
 * 7. Header, menú mobile y footer en azul
 * ---------------------------------------------------------------- */

body .nexa-sticky-header {
    background-color: rgba(0, 8, 73, .84) !important;
    border-bottom-color: rgba(255, 255, 255, .14) !important;
}

body .nexa-mobile-panel {
    background-color: rgba(0, 8, 73, .97) !important;
    border-top-color: rgba(255, 255, 255, .14) !important;
}

body .nexa-mobile-toggle {
    background-color: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #ffffff !important;
}

body > .relative > footer,
body footer.border-t {
    background-color: transparent !important;
    border-top-color: rgba(255, 255, 255, .14) !important;
}

/* El SVG del logo es azul oscuro: sobre el header azul se pierde.
   Esto es un parche; lo correcto es exportar una versión blanca. */
.nexa-sticky-header img[alt="Nexa Tech"],
footer img[alt="Nexa Tech"] {
    filter: brightness(0) invert(1);
}

/* Píldoras de vertical del nav: el color propio queda en el punto,
   el texto pasa a blanco para que se lea sobre el azul. */
.nexa-sticky-header nav > a[style],
.nexa-mobile-panel a[style] {
    background-color: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    color: #ffffff !important;
}

/* Dropdown "Accesos" */
.nexa-sticky-header [data-nexa-dropdown-panel] {
    background-color: rgba(0, 8, 73, .98) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}
.nexa-sticky-header [data-nexa-dropdown-panel] a:hover {
    background-color: rgba(100, 163, 217, .16) !important;
    color: #ffffff !important;
}

/* Degradados laterales del marquee de logos: iban a un gris claro */
#nexa-main .from-\[\#f4f7fb\] {
    --tw-gradient-from: rgba(0, 8, 73, .95) !important;
}
#nexa-main .to-\[\#eef3f9\] {
    --tw-gradient-to: rgba(0, 8, 73, .95) !important;
}

/* ---------------------------------------------------------------- *
 * 8. Filtros de /notas/ sobre el azul
 * ---------------------------------------------------------------- */

#nexa-main a[href*="notas"][style] {
    background-color: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    color: #ffffff !important;
}
#nexa-main a[href*="notas"][style][aria-current=page] {
    background-color: #ffffff !important;
    color: var(--nexa-card-title) !important;
}

/* ---------------------------------------------------------------- *
 * 9. Cuerpo de nota (.note-content) dentro de la card blanca
 * ---------------------------------------------------------------- */

#nexa-main article[class*="bg-white"] .note-content,
#nexa-main article[class*="bg-white"] .note-content :is(p, li, td, th, blockquote) {
    color: var(--nexa-card-body) !important;
}
#nexa-main article[class*="bg-white"] .note-content :is(h1, h2, h3, h4) {
    color: var(--nexa-card-title) !important;
}
#nexa-main article[class*="bg-white"] .note-content a {
    color: var(--nexa-card-title) !important;
    text-decoration: underline;
}

/* ============ fin del bloque de rediseño ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 2: verticales
 *
 * 1. Color de neón propio por vertical.
 * 2. Tarjetas que se dan vuelta en la sección de implementación.
 * 3. Los 4 pasos del proceso: entrada escalonada + línea neón.
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * 1. Neón por vertical
 *
 * Todo el glow del bloque anterior lee var(--nexa-glow), así que basta
 * redefinirla por data-theme y el hover de cada landing cambia solo.
 * ---------------------------------------------------------------- */

body[data-theme=salud] {
    --nexa-glow: #F35103;
}
body[data-theme=mutuales] {
    --nexa-glow: #429C26;
}
body[data-theme=financieras] {
    --nexa-glow: #64A3D9;
}
body[data-theme=empresas] {
    --nexa-glow: #FA354A;
}

/* El bloque anterior tenía el celeste hardcodeado en los rgba() del glow.
   Estas reglas lo reemplazan por la variable, para que el color siga a la
   vertical. color-mix da la transparencia sin necesidad de saber el rgb. */
#nexa-main .glass-panel:not([style]):hover,
#nexa-main article[class*="bg-white"]:hover,
#nexa-main form.glass-panel:hover,
#nexa-main a[class*="bg-white/7"]:hover,
#nexa-main .nexa-flip:hover .nexa-flip-face,
#nexa-main .nexa-flip.is-flipped .nexa-flip-face {
    border-color: var(--nexa-glow) !important;
    box-shadow:
        0 0 0 1px var(--nexa-glow),
        0 0 16px rgba(var(--nexa-glow-rgb), .55),
        0 0 44px rgba(var(--nexa-glow-rgb), .34),
        0 16px 40px rgba(0, 0, 0, .26) !important;
}


/* ---------------------------------------------------------------- *
 * 2. Tarjetas que se dan vuelta
 * ---------------------------------------------------------------- */

.nexa-flip {
    perspective: 1400px;
}

.nexa-flip-inner {
    position: relative;
    display: block;
    width: 100%;
    min-height: 15rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.nexa-flip.is-flipped .nexa-flip-inner {
    transform: rotateY(180deg);
}

.nexa-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color .32s ease, box-shadow .32s ease;
}

.nexa-flip-back {
    transform: rotateY(180deg);
}

.nexa-flip-cue {
    margin-top: auto;
}

.nexa-flip-inner:focus-visible {
    outline: 2px solid var(--nexa-glow);
    outline-offset: 4px;
    border-radius: 1.85rem;
}

/* Sin JS: no hay giro posible, así que se apilan frente y dorso. */
.no-js .nexa-flip-inner,
.no-js .nexa-flip-face {
    position: static;
    transform: none;
    min-height: 0;
}
.no-js .nexa-flip-cue {
    display: none;
}

/* ---------------------------------------------------------------- *
 * 3. Pasos del proceso: línea neón + entrada escalonada
 * ---------------------------------------------------------------- */

.nexa-steps {
    position: relative;
}

.nexa-steps-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nexa-step {
    position: relative;
    opacity: 0;
    transform: translateY(42px);
    transition:
        opacity .55s ease var(--nexa-step-delay, 0ms),
        transform .55s cubic-bezier(.22, .61, .36, 1) var(--nexa-step-delay, 0ms);
}

.nexa-steps.is-revealed .nexa-step {
    opacity: 1;
    transform: translateY(0);
}

.nexa-step-dot {
    position: absolute;
    z-index: 2;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--nexa-glow);
    box-shadow: 0 0 12px var(--nexa-glow);
}

/* La línea: un riel tenue del color de la vertical y un relleno que se
   dibuja al revelarse la sección. En mobile es vertical, en desktop
   horizontal, siguiendo el layout de la grilla. */
.nexa-steps-line {
    position: absolute;
    z-index: 0;
    background: rgba(var(--nexa-glow-rgb), .22);
    overflow: hidden;
}

.nexa-steps-line-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--nexa-glow);
    box-shadow: 0 0 10px var(--nexa-glow);
}

/* Mobile: una columna, línea vertical a la izquierda */
.nexa-steps-line {
    top: 1.5rem;
    bottom: 1.5rem;
    left: .35rem;
    width: 2px;
}
.nexa-steps-line-fill {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.5s cubic-bezier(.22, .61, .36, 1) .1s;
}
.nexa-steps.is-revealed .nexa-steps-line-fill {
    transform: scaleY(1);
}

.nexa-steps-grid {
    padding-left: 2rem;
}
.nexa-step-dot {
    left: -1.72rem;
    top: 1.9rem;
}

@media (min-width: 1024px) {
    .nexa-steps-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-left: 0;
        padding-top: 2.25rem;
    }

    .nexa-steps-line {
        top: .85rem;
        bottom: auto;
        left: 12.5%;
        right: 12.5%;
        width: auto;
        height: 2px;
    }

    .nexa-steps-line-fill {
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1.5s cubic-bezier(.22, .61, .36, 1) .1s;
    }
    .nexa-steps.is-revealed .nexa-steps-line-fill {
        transform: scaleX(1);
    }

    .nexa-step-dot {
        left: 50%;
        top: -1.95rem;
        margin-left: -.45rem;
    }
}


@media (prefers-reduced-motion: reduce) {
    .nexa-step,
    .nexa-steps.is-revealed .nexa-step {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .nexa-steps-line-fill,
    .nexa-steps.is-revealed .nexa-steps-line-fill {
        transform: none;
        transition: none;
    }
    .nexa-flip-inner {
        transition: none;
    }
}

/* ============ fin del bloque de verticales ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 3
 *
 * 1. Títulos de card en el color de cada landing.
 * 2. Cards de la misma fila con altura uniforme.
 * 3. Más aire entre secciones.
 * 4. Hero tipo banner (por ahora solo Salud).
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * 1. Títulos sobre fondo blanco, en el color de la landing
 *
 * --nexa-title es solo para títulos. Los botones siguen en #1D16D1
 * (--nexa-card-title) a propósito: texto blanco sobre naranja, verde o
 * celeste no llega al contraste mínimo para texto pequeño.
 * ---------------------------------------------------------------- */

:root {
    --nexa-title: #1D16D1;
}
body[data-theme=salud] {
    --nexa-title: #F35103;
}
body[data-theme=mutuales] {
    --nexa-title: #429C26;
}
body[data-theme=financieras] {
    --nexa-title: #1F6FA8;
}
body[data-theme=empresas] {
    --nexa-title: #FA354A;
}

/* :not(button) evita pisar el color del botón de envío, ver arriba. */
#nexa-main .glass-panel:not([style]) :is(h1, h2, h3, h4, .text-accent, .text-brand, .text-foreground):not(button),
#nexa-main article[class*="bg-white"] :is(h1, h2, h3, h4, .text-accent, .text-brand, .text-foreground),
#nexa-main a[class*="bg-white/7"] :is(h1, h2, h3, h4, .text-accent, .text-brand),
#nexa-main div[class*="bg-white/8"] :is(h1, h2, h3, h4, .text-accent, .text-brand),
#nexa-main div[class*="bg-white/8"] .text-3xl,
#nexa-main div[class*="bg-white/8"] .text-4xl,
#nexa-main article[class*="bg-white"] .note-content :is(h1, h2, h3, h4) {
    color: var(--nexa-title) !important;
}

/* El CTA blanco de cierre acompaña el color de la landing */
#nexa-main div[class*="rounded-[2rem]"].bg-accent > .relative > div > p:not(.text-teal-200):not(.text-slate-300) {
    color: var(--nexa-title) !important;
}

/* ---------------------------------------------------------------- *
 * 2. Altura uniforme entre cards de la misma fila
 *
 * grid-auto-rows: 1fr iguala las filas; el height: 100% hace que la
 * card ocupe la celda completa en lugar de ajustarse a su texto.
 * ---------------------------------------------------------------- */

#nexa-main [data-nexa-flipgrid] {
    grid-auto-rows: 1fr;
}

.nexa-flip {
    display: flex;
    height: 100%;
}

.nexa-flip-inner {
    height: 100%;
    min-height: 17rem;
}

.nexa-steps-grid {
    align-items: stretch;
}

.nexa-step {
    display: flex;
}

.nexa-step-card {
    width: 100%;
    height: 100%;
}

/* Mismo criterio para las grillas de cards del resto del sitio */
#nexa-main .grid > article,
#nexa-main .grid > .glass-panel {
    height: 100%;
}

/* ---------------------------------------------------------------- *
 * 3. Aire entre secciones
 * ---------------------------------------------------------------- */

#nexa-main > section + section {
    margin-top: 2.5rem;
}

@media (max-width: 640px) {
    #nexa-main > section + section {
        margin-top: 1.5rem;
    }
}

/* El banner es lo primero: no lleva separación arriba */
#nexa-main > .nexa-hero-banner + section {
    margin-top: 0;
}

/* ---------------------------------------------------------------- *
 * 4. Hero tipo banner
 *
 * Imagen a sangre, capa negra al 40% y encima solo el H1 y su bajada.
 * ---------------------------------------------------------------- */

.nexa-hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30rem;
    padding: 5rem 0;
    overflow: hidden;
    background-color: var(--nexa-blue);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nexa-hero-banner-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .4);
}

.nexa-hero-banner-content {
    position: relative;
    z-index: 1;
    max-width: 60rem;
}

.nexa-hero-banner-eyebrow {
    margin: 0 0 1rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #ffffff;
}

.nexa-hero-banner-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #ffffff;
    text-wrap: balance;
}

.nexa-hero-banner-lead {
    max-width: 46rem;
    margin: 1.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .nexa-hero-banner {
        min-height: 34rem;
    }
    .nexa-hero-banner-lead {
        font-size: 1.15rem;
    }
}

/* ============ fin de la parte 3 ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 4
 *
 * 1. Paneles "hueco": fondo azul oscuro plano #030322.
 * ================================================================ */

:root {
    --nexa-hollow: #030322;
}

/* ---------------------------------------------------------------- *
 * 1. Paneles hueco
 *
 * El contenedor grande de cada sección pasa a azul oscuro plano para
 * que se lea como un hueco recortado sobre el fondo. Las cards de
 * adentro siguen blancas.
 * ---------------------------------------------------------------- */

.nexa-hollow,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"],
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"].bg-accent {
    background-color: var(--nexa-hollow) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 2px 18px rgba(0, 0, 0, .45) !important;
}

/* Los títulos y bajadas que quedaron sobre el hueco vuelven a blanco:
   la regla de "títulos sobre blanco" los había pasado al color de la
   landing y aquí el fondo ya no es blanco. */
.nexa-hollow > .container-shell :is(h2, h3, .text-accent),
.nexa-hollow :is(h2, h3, .text-accent),
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > div > div > :is(h2, h3, .text-accent),
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > :is(h2, h3, .text-accent) {
    color: #ffffff !important;
}

.nexa-hollow :is(p, li, .text-muted),
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > div > div > p,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > p {
    color: rgba(255, 255, 255, .78) !important;
}

/* El eyebrow mantiene el color de la landing, que sobre el hueco contrasta */
.nexa-hollow .text-brand,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] .text-brand {
    color: var(--nexa-title) !important;
}

/* Las cards de adentro (notas, casos) siguen blancas con su título de color */
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] article :is(h2, h3, .text-accent) {
    color: var(--nexa-title) !important;
}
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] article :is(p, .text-muted) {
    color: var(--nexa-card-body) !important;
}

/* El CTA de cierre en Salud vuelve a ser oscuro: es un hueco más */
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"].bg-accent :is(h2, p, .text-white) {
    color: #ffffff !important;
}
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"].bg-accent .text-slate-300 {
    color: rgba(255, 255, 255, .78) !important;
}
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"].bg-accent .text-teal-200 {
    color: var(--nexa-title) !important;
}
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"].bg-accent a[class*="bg-white"] {
    background-color: #ffffff !important;
    color: var(--nexa-hollow) !important;
}

/* ============ fin de la parte 4 ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 5: corrección
 *
 * Las tarjetas del carrusel de casos de éxito son <button> con
 * bg-white/94, y el panel del modal es un <div> con bg-white a secas.
 * Ninguno de los dos caía en los selectores de las partes anteriores,
 * así que su texto quedaba blanco sobre fondo casi blanco: invisible.
 *
 * Afecta a las cuatro verticales y a /casos-de-exito/.
 * ================================================================ */

#nexa-main button[class*="bg-white"],
#nexa-main [data-nexa-modal] div[class*="bg-white"] {
    background-color: #ffffff !important;
    border-color: rgba(0, 8, 73, .10) !important;
    transition: box-shadow .32s ease, border-color .32s ease, transform .32s ease;
}

#nexa-main button[class*="bg-white"] :is(h1, h2, h3, h4, .text-accent, .text-brand),
#nexa-main [data-nexa-modal] div[class*="bg-white"] :is(h1, h2, h3, h4, .text-accent, .text-brand) {
    color: var(--nexa-title) !important;
}

#nexa-main button[class*="bg-white"] :is(p, span, li, .text-muted),
#nexa-main [data-nexa-modal] div[class*="bg-white"] :is(p, span, li, .text-muted) {
    color: var(--nexa-card-body) !important;
}

/* El botón "Visitar sitio" del modal es un enlace sólido, no texto suelto */
#nexa-main [data-nexa-modal] a[class*="bg-white"] {
    background-color: var(--nexa-card-title) !important;
    color: #ffffff !important;
}

/* Glow en hover, igual que el resto de las cards */
#nexa-main button[data-case-card]:hover {
    border-color: var(--nexa-glow) !important;
    box-shadow:
        0 0 0 1px var(--nexa-glow),
        0 0 16px rgba(var(--nexa-glow-rgb), .55),
        0 16px 40px rgba(0, 0, 0, .26) !important;
}

/* El backdrop del modal no existe en el CSS compilado (bug previo al
   rediseño): sin esto el overlay es transparente. */
.bg-\[rgba\(11\,18\,32\,0\.55\)\] {
    background-color: rgba(3, 3, 34, .62);
}

/* ============ fin de la parte 5 ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 6: correcciones
 *
 * 1. Hueco: sombra interior real + cards flotando.
 * 2. Botones y píldoras blancas que llevaban el color en sí mismas.
 * 3. Acordeón: los paneles no cerraban del todo.
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * 1. Hueco con profundidad
 *
 * Sombra interior marcada arriba y a los lados para que el panel se
 * lea hundido, y sombra proyectada en las cards de adentro para que
 * floten sobre él.
 * ---------------------------------------------------------------- */

.nexa-hollow,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"],
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"].bg-accent {
    border: 1px solid rgba(0, 0, 0, .55) !important;
    box-shadow:
        inset 0 14px 28px rgba(0, 0, 0, .55),
        inset 0 -6px 18px rgba(0, 0, 0, .35),
        inset 14px 0 24px rgba(0, 0, 0, .3),
        inset -14px 0 24px rgba(0, 0, 0, .3),
        0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* Cards dentro del hueco: flotan */
.nexa-hollow article,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] article,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] button[data-case-card] {
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .45),
        0 4px 10px rgba(0, 0, 0, .3) !important;
}

/* ---------------------------------------------------------------- *
 * 2. Botones y píldoras blancas
 *
 * Estos elementos llevan bg-white y text-accent en el MISMO elemento,
 * así que la regla general de "texto sobre azul en blanco" los dejaba
 * blanco sobre blanco. El color va acá de forma explícita.
 * ---------------------------------------------------------------- */

#nexa-main a[class*="bg-white"].text-accent,
#nexa-main button[class*="bg-white"].text-accent,
#nexa-main a[class*="bg-white"][class*="rounded-full"],
#nexa-main button[class*="bg-white"][class*="rounded-full"] {
    background-color: #ffffff !important;
    color: var(--nexa-title) !important;
    border-color: rgba(0, 8, 73, .12) !important;
}

/* Los <svg> de esos botones heredan currentColor */
#nexa-main a[class*="bg-white"].text-accent svg,
#nexa-main button[class*="bg-white"].text-accent svg {
    color: inherit;
    stroke: currentColor;
}

/* El contador del carrusel (01 / 03) queda sobre el hueco */
.nexa-hollow [data-nexa-carousel-counter],
body:not([data-theme=default]) #nexa-main [data-nexa-carousel-counter] {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------- *
 * 3. Acordeón
 *
 * grid-template-rows: 0fr no colapsa si el hijo conserva su tamaño
 * mínimo automático: hace falta min-height 0. Sin esto se veía la
 * primera línea de la respuesta asomando en cada item cerrado.
 * ---------------------------------------------------------------- */

.nexa-accordion-panel > div {
    overflow: hidden;
    min-height: 0;
}

.nexa-accordion-item .nexa-accordion-panel > div > :first-child {
    padding-top: 0;
}

/* El chevron y su círculo, sobre card blanca */
#nexa-main .nexa-accordion-icon {
    background-color: rgba(var(--nexa-title-rgb), .12) !important;
    color: var(--nexa-title) !important;
}


/* ============ fin de la parte 6 ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 7
 *
 * 1. Variables --*-rgb para el glow (reemplazan a color-mix).
 * 2. Textos ilegibles sobre el hueco.
 * 3. Pasos: en mobile los puntos se salían de la línea.
 * 4. Carrusel de implementación con foto.
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * 1. Glow
 *
 * color-mix() no está soportado en todos los navegadores y, cuando
 * falla, invalida la declaración box-shadow ENTERA. Por eso el hover
 * se veía solo como una línea: el borde cambiaba de color pero las
 * tres sombras del glow se descartaban juntas. rgba() sobre una
 * variable con los canales sueltos funciona en todos lados.
 * ---------------------------------------------------------------- */

:root {
    --nexa-glow-rgb: 100, 163, 217;
    --nexa-title-rgb: 29, 22, 209;
}
body[data-theme=salud] {
    --nexa-glow-rgb: 243, 81, 3;
    --nexa-title-rgb: 243, 81, 3;
}
body[data-theme=mutuales] {
    --nexa-glow-rgb: 66, 156, 38;
    --nexa-title-rgb: 66, 156, 38;
}
body[data-theme=financieras] {
    --nexa-glow-rgb: 100, 163, 217;
    --nexa-title-rgb: 31, 111, 168;
}
body[data-theme=empresas] {
    --nexa-glow-rgb: 250, 53, 74;
    --nexa-title-rgb: 250, 53, 74;
}

/* Glow más presente: halo ancho además del anillo fino */
#nexa-main .glass-panel:not([style]):hover,
#nexa-main article[class*="bg-white"]:hover,
#nexa-main form.glass-panel:hover,
#nexa-main a[class*="bg-white/7"]:hover,
#nexa-main button[data-case-card]:hover,
#nexa-main .nexa-flip:hover .nexa-flip-face,
#nexa-main .nexa-flip.is-flipped .nexa-flip-face {
    border-color: var(--nexa-glow) !important;
    box-shadow:
        0 0 0 2px var(--nexa-glow),
        0 0 12px rgba(var(--nexa-glow-rgb), .95),
        0 0 30px rgba(var(--nexa-glow-rgb), .65),
        0 0 64px rgba(var(--nexa-glow-rgb), .40),
        0 18px 38px rgba(0, 0, 0, .45) !important;
}

/* ---------------------------------------------------------------- *
 * 2. Textos sobre el hueco
 *
 * La bajada de "Últimas notas de salud" y equivalentes quedaban en un
 * gris que sobre #030322 no se lee.
 * ---------------------------------------------------------------- */

body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > :is(p, div) > p,
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > div p:not(article p):not(button p),
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > p {
    color: rgba(255, 255, 255, .82) !important;
}

body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > div > :is(h2, h3),
body:not([data-theme=default]) #nexa-main div[class*="rounded-[2rem]"][class*="bg-white/82"] > div > div > :is(h2, h3) {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------- *
 * 3. Pasos del proceso en mobile
 *
 * El riel y los puntos se calculaban con valores sueltos y no
 * coincidían. Ahora ambos salen de --nexa-rail, así que quedan
 * siempre alineados, y el riel cubre todo el alto para que ningún
 * punto pueda caer fuera.
 * ---------------------------------------------------------------- */

.nexa-steps {
    --nexa-rail: .5rem;
    --nexa-dot: .9rem;
}

.nexa-steps-grid {
    padding-left: 2.25rem;
}

.nexa-steps-line {
    top: 0;
    bottom: 0;
    left: calc(var(--nexa-rail) - 1px);
    width: 2px;
}

.nexa-step-dot {
    left: calc(var(--nexa-rail) - 2.25rem - (var(--nexa-dot) / 2));
    top: 2rem;
    width: var(--nexa-dot);
    height: var(--nexa-dot);
}

@media (min-width: 1024px) {
    .nexa-steps-grid {
        padding-left: 0;
        padding-top: 2.25rem;
    }

    .nexa-steps-line {
        top: calc(.85rem - 1px);
        bottom: auto;
        left: 12.5%;
        right: 12.5%;
        width: auto;
        height: 2px;
    }

    .nexa-step-dot {
        left: 50%;
        top: calc(-2.25rem + .85rem - (var(--nexa-dot) / 2));
        margin-left: calc(var(--nexa-dot) / -2);
    }
}

/* ---------------------------------------------------------------- *
 * 4. Carrusel de implementación
 * ---------------------------------------------------------------- */

.nexa-impl-carousel {
    position: relative;
}

.nexa-impl-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.nexa-impl-track::-webkit-scrollbar {
    display: none;
}

.nexa-impl-slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .nexa-impl-slide {
        flex-basis: calc((100% - 1.25rem) / 2);
        min-width: calc((100% - 1.25rem) / 2);
    }
}

@media (min-width: 1280px) {
    .nexa-impl-slide {
        flex-basis: calc((100% - 2.5rem) / 3);
        min-width: calc((100% - 2.5rem) / 3);
    }
}

.nexa-impl-slide .nexa-flip-inner {
    min-height: 21rem;
}

.nexa-impl-slide .nexa-flip-face {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.nexa-impl-media {
    display: block;
    width: 100%;
    height: 9rem;
    flex: 0 0 9rem;
    background-color: rgba(var(--nexa-title-rgb), .12);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nexa-impl-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.5rem 1.5rem 1.65rem;
    overflow: auto;
}

.nexa-impl-slide .nexa-flip-cue {
    margin-top: auto;
}

/* En pantallas anchas la foto pasa a la izquierda, como se pidió */
@media (min-width: 640px) {
    .nexa-impl-slide .nexa-flip-front {
        flex-direction: row;
    }

    .nexa-impl-front-media,
    .nexa-impl-slide .nexa-flip-front .nexa-impl-media {
        width: 38%;
        height: auto;
        flex: 0 0 38%;
    }
}

.no-js .nexa-impl-track {
    overflow-x: visible;
    flex-wrap: wrap;
}

/* ============ fin de la parte 7 ============ */

/* ================================================================
 * REDISEÑO 2026 — parte 8: configurador de soluciones
 *
 * Organizacion -> familias de modulos -> lista de modulos, reconstruido de
 * nexa-selector-modulos.html (sin su conmutador de vertical: cada pagina ya
 * esta fijada a la suya, y sin su paleta/tipografia propias):
 *   paso 1  → grilla de tipos de organización (cards blancas), solo si la
 *             vertical tiene organizaciones (salud, empresas).
 *   paso 2  → "Volver" + nombre de la organización + nota, y un explorador
 *             de dos columnas: menú de familias (con badge core/complementario)
 *             + panel con la lista completa de módulos de la familia activa.
 *             Mutuales y financieras no tienen paso 1: van directo al
 *             explorador con orden fijo, sin badges de tier.
 *
 * El fondo del sitio ya es azul institucional (--nexa-blue), así que el
 * módulo no lleva panel propio: las cards y paneles blancos flotan sobre el
 * fondo. El acento sale de --nexa-title (cambia por vertical) y los títulos
 * usan --font-display, ambos ya definidos en el theme — no se importa la
 * tipografía ni la paleta del archivo de referencia.
 *
 * Progresivo: sin JS (o < 900px) el root no recibe .is-ready y todo queda
 * apilado y visible — los dos pasos, cada organización y, dentro de cada
 * una, cada familia con su lista de módulos completa.
 * ================================================================ */

.nexa-config {
    width: 100%;
}

.nexa-config-heading {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.nexa-config-heading > span {
    display: block;
    margin-bottom: 16px;
    color: var(--nexa-title);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.5;
    text-transform: uppercase;
}

.nexa-config-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}

.nexa-config-lede {
    font-size: clamp(0.9375rem, 1.4vw, 1.03125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 62ch;
}

.nexa-config-heading .nexa-config-lede {
    margin: 14px auto 0;
    text-align: center;
}

.nexa-config-panel > .nexa-config-lede {
    margin: 0 0 28px;
    text-align: left;
    max-width: 60ch;
}

/* ---- Paso 1: grilla de tipos de organización ---- */

.nexa-config-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.nexa-config-org {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 22px 20px;
    border: 2px solid transparent;
    border-radius: 22px;
    background-color: #ffffff;
    color: var(--nexa-blue);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.nexa-config-org:hover,
.nexa-config-org:focus-visible {
    border-color: var(--nexa-title);
    outline: none;
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
}

.nexa-config-org-icon {
    width: 1.875rem;
    height: 1.875rem;
    margin-bottom: 2px;
    color: var(--nexa-title);
    flex-shrink: 0;
}

.nexa-config-org-name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.nexa-config-org-desc {
    font-size: 0.84375rem;
    line-height: 1.5;
    color: rgba(0, 8, 73, 0.62);
}

.nexa-config-org-go {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nexa-title);
}

.nexa-config-org-go svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/* ---- Paso 2: "Volver" + explorador de familias ---- */

.nexa-config-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.nexa-config-back:hover,
.nexa-config-back:focus-visible {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    outline: none;
}

.nexa-config-back svg {
    width: 1rem;
    height: 1rem;
}

.nexa-config-current {
    margin: 0 0 6px;
    color: var(--nexa-title);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.nexa-config-step-title {
    max-width: 32ch;
    margin: 0 0 10px;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.nexa-config-explorer {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* ---- Menú de familias ---- */

.nexa-config-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background-color: rgba(255, 255, 255, 0.055);
}

.nexa-config-menu-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nexa-config-menu-head span:first-child {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
}

.nexa-config-menu-head span:last-child {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78125rem;
}

.nexa-config-fam {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.90625rem;
    text-align: left;
    cursor: pointer;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.nexa-config-fam:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.nexa-config-fam.active {
    background-color: #ffffff;
    color: var(--nexa-blue);
    font-weight: 600;
}

.nexa-config-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1.5px solid var(--nexa-title);
    border-radius: 50%;
}

.nexa-config-dot[data-tier="core"],
.nexa-config-dot[data-tier="flat"] {
    background-color: var(--nexa-title);
}

.nexa-config-fam-label {
    flex: 1;
    line-height: 1.3;
}

.nexa-config-fam-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: 0.5;
}

.nexa-config-fam.active .nexa-config-fam-chevron {
    color: var(--nexa-title);
    opacity: 1;
}

/* ---- Panel de módulos de la familia activa ---- */

.nexa-config-fampanel {
    padding: clamp(26px, 3.4vw, 44px);
    border: 1px solid rgba(0, 8, 73, 0.1);
    border-radius: 28px;
    background-color: #ffffff;
    color: var(--nexa-blue);
    min-height: 360px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.nexa-config-fampanel + .nexa-config-fampanel {
    margin-top: 18px;
}

.nexa-config-tier {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.78125rem;
    font-weight: 600;
}

.nexa-config-tier[data-tier="core"] {
    background-color: rgba(var(--nexa-title-rgb), 0.14);
    color: var(--nexa-title);
}

.nexa-config-tier[data-tier="comp"] {
    background-color: rgba(0, 8, 73, 0.06);
    color: rgba(0, 8, 73, 0.65);
}

.nexa-config-fam-title {
    max-width: 34ch;
    margin: 0 0 8px;
    color: var(--nexa-blue);
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.nexa-config-panel-lede {
    max-width: 60ch;
    margin: 0 0 26px;
    color: rgba(0, 8, 73, 0.66);
    font-size: 1rem;
    line-height: 1.6;
}

.nexa-config-mods {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nexa-config-mods li {
    padding: 16px 0;
    border-top: 1px solid #e7e8f1;
}

.nexa-config-mods li:last-child {
    border-bottom: 1px solid #e7e8f1;
}

.nexa-config-mod-n {
    margin-bottom: 3px;
    color: var(--nexa-blue);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.nexa-config-mod-d {
    max-width: 64ch;
    color: rgba(0, 8, 73, 0.62);
    font-size: 0.90625rem;
    line-height: 1.55;
}

/* ---- Leyenda de tier ---- */

.nexa-config-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8125rem;
}

.nexa-config-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nexa-config-legend-dot {
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--nexa-title);
    border-radius: 50%;
}

.nexa-config-legend-dot[data-tier="core"] {
    background-color: var(--nexa-title);
}

/* ---- Modo stepper: activo solo con JS (.is-ready) ----
 * El markup NO trae [hidden]: los pasos, las organizaciones y las familias
 * se sirven apilados y el JS, al enhancer, agrega .is-ready y pone [hidden]
 * por propiedad en lo que corresponde ocultar. Ese [hidden] lo apaga la
 * preflight de Tailwind (nexa-ref.css) desde una capa @layer, que le gana a
 * cualquier override sin capa aunque lleve !important; por eso el ocultado
 * va siempre por atributo desde JS y nunca por CSS propio. */

.nexa-config.is-ready .nexa-config-screen,
.nexa-config.is-ready .nexa-config-panel,
.nexa-config.is-ready .nexa-config-fampanel {
    animation: nexaConfigReveal 0.24s ease both;
}

@keyframes nexaConfigReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Fallback sin JS: todo apilado y visible ----
 * Sin .is-ready no hay [hidden] en el markup, así que organizaciones y
 * familias se ven todas seguidas; acá sólo se ajusta el ritmo y se
 * neutralizan los detalles que sólo tienen sentido en modo interactivo. */

.nexa-config:not(.is-ready) [data-config-screen="modules"] {
    margin-top: 40px;
}

.nexa-config:not(.is-ready) .nexa-config-back {
    display: none;
}

.nexa-config:not(.is-ready) .nexa-config-panel + .nexa-config-panel {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.nexa-config:not(.is-ready) .nexa-config-fam {
    cursor: default;
}

.nexa-config:not(.is-ready) .nexa-config-fam.active {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
}

.nexa-config:not(.is-ready) .nexa-config-fam-chevron {
    display: none;
}

/* ---- Responsive ---- */

@media (max-width: 899px) {
    .nexa-config-groups {
        grid-template-columns: 1fr;
    }

    .nexa-config-explorer {
        grid-template-columns: 1fr;
    }

    .nexa-config-fampanel {
        min-height: 0;
        padding: 34px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nexa-config.is-ready .nexa-config-screen,
    .nexa-config.is-ready .nexa-config-panel,
    .nexa-config.is-ready .nexa-config-fampanel,
    .nexa-config-org,
    .nexa-config-fam,
    .nexa-config-back {
        animation: none;
        transition: none;
    }
}

/* ============ fin de la parte 8 ============ */