/* =========================================================
   BÚHO · a11y.css — contraste y legibilidad
   Se carga al final, después de kit2.css.

   El problema que resuelve: `.sec--navy` pinta de blanco todo
   el texto de la sección, pero dentro de una sección oscura hay
   componentes con superficie clara (tarjetas, tablas, FAQ,
   calculadoras, formularios). Ahí el texto blanco quedaba sobre
   blanco y no se veía nada.

   La regla del sistema: **el color del texto lo manda la
   superficie, no la sección.** Todo componente de superficie
   clara reclama su color de texto, esté donde esté.
   ========================================================= */

/* ---------------------------------------------------------
   1 · Superficies claras dentro de secciones oscuras
   --------------------------------------------------------- */
.sec--navy .card,
.sec--navy .plan:not(.plan--dark),
.sec--navy .cmp,
.sec--navy .ladder,
.sec--navy .faq details,
.sec--navy .quote,
.sec--navy .track,
.sec--navy .fork > a:not(.fork--dark > a),
.sec--navy .mock:not(.mock--dark),
.sec--navy .trust,
.sec--navy .rubro,
.sec--navy .explore > button:not(.on),
.sec--navy .story-step:not([aria-selected="true"]),
.sec--navy .bento > *:not(.dark):not(.accent),
.sec--navy .fcell--light,
.phband .card,
.phband .plan:not(.plan--dark) {
  color: var(--color-text);
}

/* Y sus hijos, con una sola lista de excepciones: lo que trae su
   propio contraste (botones, badges, la caja de resultado, los
   sub-bloques oscuros) no se repinta nunca. */
.sec--navy :is(.card,.plan:not(.plan--dark),.cmp tbody,.ladder,.faq details,.quote,
               .track,.mock:not(.mock--dark),.trust,.explore > button:not(.on),
               .story-step:not([aria-selected="true"]),.bento > *:not(.dark):not(.accent),
               .fork > a) *:not(.btn):not(.btn *):not(.btn-pink):not(.btn-pink *):not(.btn-outline-l):not(.btn-outline-l *):not(.badge):not(.badge *):not(.anillo):not(.anillo *):not(.eclipse):not(.eclipse *):not(.calc__out):not(.calc__out *):not(.fcard):not(.fcard *):not(.fpill):not(.fpill *):not(.plan__flag):not(.plan__flag *):not(.ph__cap):not(.ph__cap *):not(.ph__tag):not(.ph__tag *):not(.aurora-dark):not(.aurora-dark *):not(.sec--navy):not(.sec--navy *):not(.closer):not(.closer *):not(.phband):not(.phband *):not(.specband):not(.specband *):not(.sfoot):not(.sfoot *):not(.on-dark):not(.on-dark *):not(.on-light):not(.on-light *):not([class*="--dark"]):not([class*="--dark"] *):not(.curseg):not(.curseg *):not(.segs):not(.segs *):not(.bento .dark):not(.bento .dark *):not(.bento .accent):not(.bento .accent *):not(.story-step[aria-selected="true"]):not(.story-step[aria-selected="true"] *):not(.explore > button.on):not(.explore > button.on *):not(.plan--hot .plan__flag):not(.plan--hot .plan__flag *):not(.viz):not(.viz *):not(.mega):not(.mega *):not(.snav):not(.snav *) {
  color: var(--color-text);
}

/* Utilidades explícitas: cuando el fondo de un bloque no lo puede
   deducir el CSS, se declara. Son la salida de emergencia y la
   forma correcta de marcarlo en el HTML. */
.on-light.on-light,
.on-light :where(h1,h2,h3,h4,h5,h6,p,li,td,th,b,strong,em,span,div,small,label,summary,output,figcaption):not(.btn):not(.btn *):not(.btn-pink):not(.btn-pink *):not(.btn-outline-l):not(.btn-outline-l *):not(.badge):not(.badge *):not(.anillo):not(.anillo *):not(.eclipse):not(.eclipse *):not(.calc__out):not(.calc__out *):not(.fcard):not(.fcard *):not(.fpill):not(.fpill *):not(.plan__flag):not(.plan__flag *):not(.ph__cap):not(.ph__cap *):not(.ph__tag):not(.ph__tag *):not(.aurora-dark):not(.aurora-dark *):not(.sec--navy):not(.sec--navy *):not(.closer):not(.closer *):not(.phband):not(.phband *):not(.specband):not(.specband *):not(.sfoot):not(.sfoot *):not(.on-dark):not(.on-dark *):not(.on-light):not(.on-light *):not([class*="--dark"]):not([class*="--dark"] *):not(.curseg):not(.curseg *):not(.segs):not(.segs *):not(.bento .dark):not(.bento .dark *):not(.bento .accent):not(.bento .accent *):not(.story-step[aria-selected="true"]):not(.story-step[aria-selected="true"] *):not(.explore > button.on):not(.explore > button.on *):not(.plan--hot .plan__flag):not(.plan--hot .plan__flag *):not(.viz):not(.viz *):not(.mega):not(.mega *):not(.snav):not(.snav *) {
  color: var(--color-text) !important;
}
.on-light.on-light .text-muted, .on-light.on-light [style*="text-muted"] { color: var(--color-text-muted) !important; }
.on-dark.on-dark,
.on-dark :where(h1,h2,h3,h4,h5,h6,p,li,td,th,b,strong,em,span,div,small,label,summary,output,figcaption):not(.btn):not(.btn *):not(.btn-pink):not(.btn-pink *):not(.btn-outline-l):not(.btn-outline-l *):not(.badge):not(.badge *):not(.anillo):not(.anillo *):not(.eclipse):not(.eclipse *):not(.calc__out):not(.calc__out *):not(.fcard):not(.fcard *):not(.fpill):not(.fpill *):not(.plan__flag):not(.plan__flag *):not(.ph__cap):not(.ph__cap *):not(.ph__tag):not(.ph__tag *):not(.aurora-dark):not(.aurora-dark *):not(.sec--navy):not(.sec--navy *):not(.closer):not(.closer *):not(.phband):not(.phband *):not(.specband):not(.specband *):not(.sfoot):not(.sfoot *):not(.on-dark):not(.on-dark *):not(.on-light):not(.on-light *):not([class*="--dark"]):not([class*="--dark"] *):not(.curseg):not(.curseg *):not(.segs):not(.segs *):not(.bento .dark):not(.bento .dark *):not(.bento .accent):not(.bento .accent *):not(.story-step[aria-selected="true"]):not(.story-step[aria-selected="true"] *):not(.explore > button.on):not(.explore > button.on *):not(.plan--hot .plan__flag):not(.plan--hot .plan__flag *):not(.viz):not(.viz *):not(.mega):not(.mega *):not(.snav):not(.snav *) {
  color: #fff !important;
}
.on-dark.on-dark .text-muted, .on-dark.on-dark [style*="text-muted"] { color: rgba(255,255,255,0.74) !important; }
/* Los botones y badges conservan el color que les da su propia clase */
.on-light .btn--primary, .on-dark .btn--primary,
.on-light .btn--primary *, .on-dark .btn--primary * { color: var(--color-primary-contrast) !important; }
.on-light .btn--secondary, .on-dark .btn--secondary,
.on-light .btn--secondary *, .on-dark .btn--secondary * { color: var(--color-primary) !important; }
.on-light .btn-pink, .on-dark .btn-pink, .on-light .btn-pink *, .on-dark .btn-pink * { color: var(--on-act, #fff) !important; }
.on-light .curseg button.on, .on-dark .curseg button.on,
.on-light .curseg button.on *, .on-dark .curseg button.on *,
.on-light .segs button.on, .on-dark .segs button.on { color: #fff !important; }
.curseg button.on, .curseg button.on * { color: #fff; }

/* El texto secundario dentro de esas superficies vuelve a su gris */
.sec--navy .card .text-muted,      .sec--navy .plan:not(.plan--dark) .text-muted,
.sec--navy .cmp .text-muted,
.sec--navy .faq details .a,        .sec--navy .track p,
.sec--navy .bento > *:not(.dark):not(.accent) p,
.sec--navy .explore > button:not(.on) span,
.sec--navy .story-step:not([aria-selected="true"]) p,
.sec--navy .quote .who span,       .sec--navy .ladder small,
.sec--navy .plan__sub, .sec--navy .plan__usd, .sec--navy .plan:not(.plan--dark) .plan__usd {
  color: var(--color-text-muted);
}

/* Formularios sobre superficie clara dentro de sección oscura */
.sec--navy .card input:not([type=checkbox]):not([type=radio]),
.sec--navy .card select, .sec--navy .card textarea,
.phband .card input, .phband .card select, .phband .card textarea {
  color: var(--color-text); background: #fff;
}

/* ---------------------------------------------------------
   2 · Enlaces sobre fondo oscuro
   El azul resaltador es ilegible sobre navy: usa la variante clara.
   --------------------------------------------------------- */
.sec--navy .link, .phband .link, .closer .link, .sfoot .link,
.sec--navy a.link, .aurora-dark > .wrap .link {
  color: var(--motif-b-light, var(--buho-blue-300));
}
.sec--navy .link:hover, .phband .link:hover { border-bottom-color: var(--motif-a-light, var(--buho-pink-300)); }
/* …salvo si el enlace vive dentro de una superficie clara */
.sec--navy .card .link, .sec--navy .cmp .link, .sec--navy .faq .link,
.sec--navy .bento > *:not(.dark):not(.accent) .link, .sec--navy .plan .link {
  color: var(--motif-b-ink, var(--buho-blue-600));
}

/* ---------------------------------------------------------
   3 · Superficies de acento con texto
   El rosa vivo (#FF006F) con texto blanco da 3.8:1 — insuficiente.
   Para superficies que llevan texto usamos el rosa profundo, que
   da 6.8:1 y sigue en paleta. El vivo se reserva para puntos,
   LED, halos, bordes y el Iris, que no llevan texto encima.
   --------------------------------------------------------- */
.brand { --act-surface: var(--buho-pink-700); }
.brand--fastura { --act-surface: #00BFA5; }   /* teal + navy = 8.1:1 */
.brand--waya    { --act-surface: #8FD400; }   /* lima + navy = 10:1  */

.brand .btn-pink, .brand .calc__pick, .brand .bento .accent,
.brand .plan__flag, .brand .fcard .ic, .brand .sec--navy .fcell .ico,
.brand .explore > button.on .ico, .brand .sec--navy .segs button.on,
.btn--accent {
  background: var(--act-surface, var(--buho-pink-700));
}
.brand .btn-pink:hover, .brand .calc__pick:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--act-surface) 24%, transparent),
              0 16px 36px color-mix(in srgb, var(--act-surface) 36%, transparent);
}
/* Botón rosa del pie y píldoras de WhatsApp */
.sfoot a[href*="wa.me"], .sfoot button { background: var(--buho-pink-700); }

/* ---------------------------------------------------------
   4 · Blancos translúcidos demasiado tenues
   Por debajo de 0.6 sobre navy no llegan a 4.5:1.
   --------------------------------------------------------- */
.sec--navy [style*="rgba(255,255,255,0.4"],
.sec--navy [style*="rgba(255,255,255,.4"],
.sec--navy [style*="rgba(255,255,255,0.3"],
.sec--navy [style*="rgba(255,255,255,.3"],
.sfoot [style*="rgba(255,255,255,0.4"],
.sfoot [style*="rgba(255,255,255,.4"],
.closer [style*="rgba(255,255,255,0.5"] {
  color: rgba(255,255,255,0.68) !important;
}
.sfoot__bar, .sfoot__cols h4 { color: rgba(255,255,255,0.66); }
.closer__fine { color: rgba(255,255,255,0.72); }
.sec--navy .statrow .s, .sec--navy .fcard .lb { color: rgba(255,255,255,0.68); }

/* ---------------------------------------------------------
   5 · Enlace activo de la barra
   El rosa vivo sobre blanco da 3.8:1. El profundo da 6.8:1.
   --------------------------------------------------------- */
.snav__link--on { color: var(--buho-pink-700); }

/* ---------------------------------------------------------
   6 · Texto gris suelto sobre navy
   Solo alcanza al texto que cuelga directamente de la sección:
   dentro de tarjetas manda la superficie, no la sección.
   --------------------------------------------------------- */
.sec--navy > .wrap > [style*="text-muted"],
.sec--navy > .wrap > .shead [style*="text-muted"],
.sec--navy > .wrap > .steps [style*="text-muted"],
.sec--navy > .wrap > .statrow [style*="text-muted"] {
  color: rgba(255,255,255,0.74) !important;
}

/* ---------------------------------------------------------
   7 · Foco visible en todo lo interactivo
   --------------------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--motif-b, var(--buho-blue-600));
  outline-offset: 2px; border-radius: 6px;
}
.sec--navy a:focus-visible, .sec--navy button:focus-visible,
.sfoot a:focus-visible, .sfoot button:focus-visible, .closer a:focus-visible {
  outline-color: #fff;
}


/* ---------------------------------------------------------
   8 · Cierres de las causas que quedaban
   --------------------------------------------------------- */
/* La cabecera de la tabla comparativa es navy con texto blanco: no se toca */
.cmp thead th, .sec--navy .cmp thead th { color: #fff; }

/* Los chips de tecnología fijan su propio color, vivan donde vivan */
.techrow span { color: var(--color-text); }
/* Los chips de tecnología llevan fondo y color en el mismo golpe */
.sec--navy .techrow span, .bento .dark .techrow span, .closer .techrow span,
.phband > .wrap .techrow span {
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.92);
}
.sec--navy .card .techrow span, .sec--navy .bento > *:not(.dark):not(.accent) .techrow span,
.sec--navy .plan .techrow span, .sec--navy .track .techrow span { color: var(--color-text); }

/* Segmentos y toggles: el estado inactivo necesita más peso de color */
/* Segmentos: el inactivo hereda del contenedor, que ya sabe si es claro u oscuro */
/* El inactivo baja de peso con color, nunca con opacidad:
   la opacidad se come el contraste y deja el texto por debajo del mínimo. */
.curseg button:not(.on), .segs button:not(.on), .ptoggle button:not(.on) { color: var(--gray-700); }
.sec--navy > .wrap .curseg button:not(.on):not(.on-light button):not(.card button):not(.mock:not(.mock--dark) button):not(.plan:not(.plan--dark) button):not(.bento > *:not(.dark):not(.accent) button):not(.faq details button):not(.quote button):not(.track button):not(.trust button):not(.cmp tbody button):not(.ladder button):not(.rubro button):not(.fork > a button):not(.explore > button:not(.on) button):not(.story-step:not([aria-selected="true"]) button):not(.calc:not(.sec--navy .calc) button), .sec--navy > .wrap .segs button:not(.on):not(.on-light button):not(.card button):not(.mock:not(.mock--dark) button):not(.plan:not(.plan--dark) button):not(.bento > *:not(.dark):not(.accent) button):not(.faq details button):not(.quote button):not(.track button):not(.trust button):not(.cmp tbody button):not(.ladder button):not(.rubro button):not(.fork > a button):not(.explore > button:not(.on) button):not(.story-step:not([aria-selected="true"]) button):not(.calc:not(.sec--navy .calc) button),
.on-dark .curseg button:not(.on), .on-dark .segs button:not(.on) { color: rgba(255,255,255,0.86); }
/* …y si el selector vive dentro de una tarjeta clara, vuelve a tinta oscura */
.sec--navy .card .curseg button:not(.on), .sec--navy .bento > *:not(.dark) .curseg button:not(.on),
.sec--navy .plan .curseg button:not(.on), .on-light .curseg button:not(.on),
.on-light .segs button:not(.on) { color: var(--gray-700); }
.curseg button:not(.on):hover, .segs button:not(.on):hover { color: var(--buho-navy-950); }
.sec--navy > .wrap .curseg button:not(.on):hover { color: #fff; }

/* Sí/no de las comparativas: los verdes y grises claros no llegan sobre blanco */
.cmp .yes { color: #0B7A4B; } .cmp .no { color: var(--gray-600); }

/* Chips y píldoras claras dentro de cualquier fondo oscuro */
.sec--navy .tagrow span, .phband .tagrow span { color: var(--color-text); }
.sec--navy .fpill, .phband .fpill { color: var(--buho-navy-950); }

/* Cualquier gris de cuerpo que quede sobre navy sube a blanco translúcido */
.sec--navy > .wrap span[style*="57,104"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy > .wrap span[style*="text-muted"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy > .wrap p[style*="text-muted"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy > .wrap div[style*="text-muted"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy .steps p[style*="text-muted"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy .shead p[style*="text-muted"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *) {
  color: rgba(255,255,255,0.74) !important;
}

/* Las maquetas de código sobre navy: el texto claro manda */
.sec--navy .mock--dark, .sec--navy .mock--dark :where(div,span,b,code,pre) { color: rgba(255,255,255,0.86); }


/* ---------------------------------------------------------
   9 · Últimos casos, cada uno por su causa
   --------------------------------------------------------- */

/* La caja de resultado de la calculadora es navy siempre, viva donde viva */
.calc__out { background: var(--buho-navy-950); color: #fff; }
.calc__out :where(span,output,b,div,a) { color: inherit; }
.calc__out .k { color: rgba(255,255,255,0.72); }
.calc__out .s { color: rgba(255,255,255,0.74); }
.calc__out .calc__pick { color: var(--on-act, #fff); }

/* Iniciales de avatar: siguen a su propia superficie */
.avatar, .quote .av, .av { color: var(--buho-navy-950); }
.sec--navy .avatar, .sec--navy .quote .av, .phband .av,
.aurora-dark .av, [style*="rgba(255,255,255,0.1"] > .av { color: #fff; }

/* Badges de estado: los tonos claros necesitan tinta más profunda */
.badge--warning, span.badge--warning { color: #7A4A00; }
.badge--success { color: #06603A; }
.badge--info { color: var(--buho-blue-700); }

/* Unidad y ciclo del precio dentro de tarjetas oscuras */
.sec--navy .plan .plan__price .u, .plan--dark .plan__price .u,
.sec--navy > .wrap .plan__price .u { color: rgba(255,255,255,0.74); }

/* Comentarios dentro de las maquetas de código */
.mock--dark [style*="rgba(255,255,255,0.38"], .mock--dark [style*="rgba(255,255,255,.38"],
[style*="rgba(255,255,255,0.38)"] { color: rgba(255,255,255,0.66) !important; }

/* Botones y píldoras dentro de maquetas: no heredan el color de la sección */
.mock .btn, .mock .btn-pink, .mock .btn-outline-l, .mock .eb--dark,
.sec--navy .mock .btn, .sec--navy .mock .btn-outline-l { color: #fff; }
.mock .btn--secondary, .mock .btn--ghost { color: var(--buho-navy-950); }
.mock .eb--dark { color: var(--motif-a-light, var(--buho-pink-300)); }

/* Grises del sistema que caen sobre navy en texto suelto */
.sec--navy span[style*="rgb(87, 104, 139)"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy span[style*="#57688B"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *),
.sec--navy [style*="color:var(--gray-600)"]:not(.on-light *):not(.card *):not(.mock:not(.mock--dark) *):not(.plan:not(.plan--dark) *):not(.quote *):not(.fcell *):not(.calc__out *) { color: rgba(255,255,255,0.74) !important; }

/* Chips de tecnología dentro de maquetas claras */
.mock .techrow span, .card .techrow span { color: var(--color-text); }


/* La caja de resultado también neutraliza los grises en línea */
.calc__out [style*="text-muted"], .calc__out [style*="57, 104, 139"] { color: rgba(255,255,255,0.74) !important; }


/* Los títulos y el texto de la sección heredan del contenedor.
   Solo se declara el blanco donde la herencia no llega. */
.sec--navy > .wrap, .closer, .phband > .wrap, .specband, .sfoot { color: #fff; }
.sec--navy > .wrap > h1, .sec--navy > .wrap > h2, .sec--navy > .wrap > h3,
.sec--navy > .wrap > .shead h2, .sec--navy > .wrap > .shead h3 { color: #fff; }


/* Blanco translúcido en línea dentro de una superficie clara.
   Acotado a los elementos hoja: si el bloque tiene fondo propio,
   no se toca (por eso el :not sobre los que declaran background). */
:is(.card, .mock:not(.mock--dark), .bento > *:not(.dark):not(.accent), .plan:not(.plan--dark), .on-light)
  :is(p, span, small, li, label, output)[style*="rgba(255,255,255,0."]:not([style*="background"]):not(.on-dark):not(.on-dark *),
:is(.card, .mock:not(.mock--dark), .bento > *:not(.dark):not(.accent), .plan:not(.plan--dark), .on-light)
  :is(p, span, small, li, label, output)[style*="rgba(255, 255, 255, 0."]:not([style*="background"]):not(.on-dark):not(.on-dark *) {
  color: var(--color-text-muted) !important;
}

/* Iniciales de avatar sobre superficie clara */
:is(.card,.mock:not(.mock--dark),.quote,.bento > *:not(.dark):not(.accent),.on-light,.ladder,.cmp) :is(.av,.avatar,.text-mono.av) {
  color: var(--buho-navy-950);
}

/* ---------------------------------------------------------
   11 · Verde de éxito: el #17B26A no alcanza como tinta
   Se reserva para íconos y bordes; el texto usa la tinta.
   --------------------------------------------------------- */
.badge--success, .alert--success, .stat-trend--up,
:is(.card,.mock:not(.mock--dark),.on-light,.plan:not(.plan--dark)) [style*="var(--color-success)"] {
  color: var(--color-success-ink);
}

/* Nota de plan sobre navy */
.sec--navy > .wrap > .plan-note, .sec--navy > .wrap > .plan-note span,
.aurora-dark > .wrap > .plan-note, .aurora-dark > .wrap > .plan-note span {
  color: rgba(255,255,255,0.74);
}
.sec--navy > .wrap > .plan-note i, .aurora-dark > .wrap > .plan-note i { color: var(--buho-blue-300); }