/* Accessibility Styles for NĀGO Chile */
/* Language Switcher, Dark Mode, and High Contrast */

/* ============================================
   ACCESSIBILITY PANEL
   ============================================ */

#accessibility-panel {
  position: fixed;
  top: 110px;
  left: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(11, 47, 51, 0.92);
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(11, 47, 51, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
  #accessibility-panel {
    top: auto;
    bottom: 96px;
    left: 16px;
    flex-direction: row;
    padding: 8px;
  }
}

.acc-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(244, 239, 230, 0.25);
  border-radius: 10px;
  background: transparent;
  color: #F4EFE6;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.acc-btn:hover {
  background: #E8B33C;
  border-color: #E8B33C;
  color: #0B2F33;
  transform: scale(1.08);
}

.acc-btn:focus {
  outline: 3px solid #E8B33C;
  outline-offset: 2px;
}

/* ============================================
   DARK MODE — NĀGO Petróleo Deep
   Bg = Petróleo deep, text = Arena
   Diseñado para que CADA fondo claro pase a oscuro
   y CADA texto oscuro pase a claro
   ============================================ */

body.dark-mode {
  background-color: #051a1d !important;
  color: #F4EFE6 !important;
}

/* ---- 1. NAV ---- */
/* El nav ya es Petróleo en light mode (rgba(11,47,51,0.92)).
   En dark mode lo hacemos un poco más oscuro y opaco. */
body.dark-mode .nav,
body.dark-mode header.nav {
  background: rgba(5, 26, 29, 0.96) !important;
  border-bottom-color: rgba(244, 239, 230, 0.06) !important;
}
body.dark-mode .nav-links a {
  color: rgba(244, 239, 230, 0.85) !important;
}
body.dark-mode .nav-links a:hover {
  color: var(--copper-glow, #E8B33C) !important;
  background: rgba(244, 239, 230, 0.06) !important;
}

/* ---- 2. HEADINGS — siempre Arena en dark ---- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #F4EFE6 !important;
}

/* ---- 3. PARRAFOS Y TEXTO BASE ---- */
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode .lead,
body.dark-mode .subtitle,
body.dark-mode .description {
  color: rgba(244, 239, 230, 0.82) !important;
}

/* Texto fuerte (strong) en dark = Arena 100% */
body.dark-mode strong,
body.dark-mode b {
  color: #F4EFE6 !important;
}

/* Em italic (Fraunces/Plus Jakarta italic + amarillo) — más glow en dark */
body.dark-mode em {
  color: #E8B33C !important;
}

/* Eyebrows pequeños — amarillo glow */
body.dark-mode .eyebrow {
  color: #E8B33C !important;
}

/* ---- 4. SECCIONES con fondo claro → invertir ---- */
/* Cualquier section, article, div con bg-claro → fondo Petróleo deeper */
body.dark-mode section,
body.dark-mode article,
body.dark-mode .section,
body.dark-mode .container > div,
body.dark-mode main,
body.dark-mode .article {
  background-color: transparent !important;
}

/* Bloques que tienen fondo Arena/cream explícito */
body.dark-mode [style*="background:#F4EFE6"],
body.dark-mode [style*="background: #F4EFE6"],
body.dark-mode [style*="background-color:#F4EFE6"],
body.dark-mode [style*="background:rgba(245,240,230"],
body.dark-mode [style*="background: rgba(245, 240, 230"] {
  background: #0a2226 !important;
  color: #F4EFE6 !important;
}

/* Cards y bloques destacados — fondo Petróleo intermedio */
body.dark-mode .compare-card,
body.dark-mode .lifeline-card,
body.dark-mode .step-card,
body.dark-mode .feature-card,
body.dark-mode .option-card,
body.dark-mode .risk-card,
body.dark-mode .timeline-card,
body.dark-mode .entity-card,
body.dark-mode .lawyer-card,
body.dark-mode .ceo-card,
body.dark-mode .diagram-card,
body.dark-mode .faq-item,
body.dark-mode .stat-box,
body.dark-mode .highlight-box,
body.dark-mode .ll-result,
body.dark-mode .reveal {
  background-color: rgba(11, 47, 51, 0.6) !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
  color: #F4EFE6 !important;
}

body.dark-mode .compare-card *,
body.dark-mode .lifeline-card *,
body.dark-mode .step-card *,
body.dark-mode .feature-card *,
body.dark-mode .option-card *,
body.dark-mode .risk-card *,
body.dark-mode .timeline-card *,
body.dark-mode .entity-card *,
body.dark-mode .ceo-card *,
body.dark-mode .lawyer-card *,
body.dark-mode .faq-item * {
  border-color: rgba(244, 239, 230, 0.10) !important;
}

/* ---- 5. MINI-CALC HOME — invertir transparencia ---- */
/* En light: rgba(254,253,250,0.67) — fondo claro semi-transparente
   En dark: fondo Petróleo deep semi-transparente */
body.dark-mode .mini-calc {
  background: rgba(5, 26, 29, 0.85) !important;
  border-color: rgba(244, 239, 230, 0.20) !important;
  color: #F4EFE6 !important;
}
/* Title + subtítulos */
body.dark-mode .mini-calc h2,
body.dark-mode .mini-calc h3,
body.dark-mode .mini-calc-title,
body.dark-mode .mini-calc-sub,
body.dark-mode .mini-calc strong,
body.dark-mode .mini-calc label {
  color: #F4EFE6 !important;
}
/* Etiquetas del slider (Valor de tu casa, Tu edad, Años...) */
body.dark-mode .mini-calc .mc-label-text,
body.dark-mode .mini-calc .field-label-text,
body.dark-mode .mc-row-head {
  color: rgba(244, 239, 230, 0.92) !important;
}
/* VALORES del slider (UF 10.000, 80 años, 8 años) — eran var(--petroleo) */
body.dark-mode .mini-calc .mc-label-value,
body.dark-mode .mini-calc .field-label-value,
body.dark-mode .mc-label-value {
  color: #F4EFE6 !important;
}
/* Result rows */
body.dark-mode .mini-calc .mc-result-label {
  color: rgba(244, 239, 230, 0.78) !important;
}
body.dark-mode .mini-calc .mc-result-value {
  color: #F4EFE6 !important;
}
body.dark-mode .mini-calc .mc-result-row.net .mc-result-label,
body.dark-mode .mini-calc .mc-result-row.net .mc-result-value {
  color: #F4EFE6 !important;
}
/* Result blocks (cajas internas) */
body.dark-mode .mini-calc .mc-result {
  background: rgba(11, 47, 51, 0.55) !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
}
body.dark-mode .mini-calc .mc-result.highlight {
  background: rgba(232, 179, 60, 0.12) !important;
  border-color: rgba(232, 179, 60, 0.35) !important;
}
body.dark-mode .mini-calc .mc-result.highlight .mc-result-label {
  color: rgba(244, 239, 230, 0.85) !important;
}
body.dark-mode .mini-calc .mc-result.highlight .mc-result-value {
  color: #E8B33C !important;
}
body.dark-mode .mini-calc .mc-result-note {
  background: rgba(244, 239, 230, 0.05) !important;
  color: rgba(244, 239, 230, 0.78) !important;
}
body.dark-mode .mini-calc .mc-result-note strong {
  color: #E8B33C !important;
}
/* Sliders */
body.dark-mode .mini-calc input[type=range] {
  background: rgba(244, 239, 230, 0.15) !important;
}
/* Toggle de seguro */
body.dark-mode .mini-calc .mc-seguro-toggle,
body.dark-mode .mini-calc [class*="seguro"] {
  background: rgba(244, 239, 230, 0.04) !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.15) !important;
}
/* CTA principal del calc — mantiene amarillo */
body.dark-mode .mini-calc .mc-cta {
  background: var(--copper, #E8B33C) !important;
  color: #051a1d !important;
}

/* ---- 6. CALCULADORA /legado/ ---- */
body.dark-mode .calc-container,
body.dark-mode .result-block,
body.dark-mode .calc-card,
body.dark-mode #legacyCalc,
body.dark-mode .field {
  background: rgba(11, 47, 51, 0.5) !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
}

/* ---- 7. INPUTS, SELECTS, BUTTONS DE FORM ---- */
body.dark-mode input[type=text],
body.dark-mode input[type=email],
body.dark-mode input[type=tel],
body.dark-mode input[type=number],
body.dark-mode select,
body.dark-mode textarea {
  background: rgba(244, 239, 230, 0.06) !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.20) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: rgba(244, 239, 230, 0.45) !important;
}

/* ---- 8. BUTTONS ---- */
/* Primary stays amarillo. Outline/ghost: invertir */
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode .btn-ghost {
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.30) !important;
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-outline:hover,
body.dark-mode .btn-ghost:hover {
  color: #E8B33C !important;
  border-color: #E8B33C !important;
}

/* ---- 9. TABLAS ---- */
body.dark-mode table {
  color: #F4EFE6 !important;
}
body.dark-mode th {
  background: #051a1d !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.15) !important;
}
body.dark-mode th.highlight-col {
  background: var(--terracotta, #E8B33C) !important;
  color: #0B2F33 !important;
}
body.dark-mode td {
  border-color: rgba(244, 239, 230, 0.10) !important;
  color: rgba(244, 239, 230, 0.88) !important;
}
body.dark-mode tr:nth-child(even) td {
  background: rgba(244, 239, 230, 0.03) !important;
}
body.dark-mode tr:hover td {
  background: rgba(232, 179, 60, 0.08) !important;
}

/* ---- 10. LINKS ---- */
body.dark-mode a:not(.btn-primary):not(.nav-cta):not(.btn-ghost):not(.lawyer-btn):not(.mc-cta):not(.acc-btn):not(.wa-float) {
  color: #E8B33C !important;
}

/* ---- 11. ELEMENTOS ESPECÍFICOS ---- */
body.dark-mode .scroll-progress {
  background: rgba(244, 239, 230, 0.08) !important;
}

body.dark-mode footer,
body.dark-mode .footer {
  background: #030f11 !important;
  color: rgba(244, 239, 230, 0.78) !important;
}

body.dark-mode .footer * {
  color: rgba(244, 239, 230, 0.78) !important;
}
body.dark-mode .footer a:hover {
  color: #E8B33C !important;
}

/* Cookie banner */
body.dark-mode .cookie-banner,
body.dark-mode #cookie-banner {
  background: rgba(5, 26, 29, 0.98) !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.15) !important;
}

/* ---- 12. HERO — ya es Petróleo, ajustar gradient para más oscuro ---- */
body.dark-mode .hero {
  background: #051a1d !important;
}
body.dark-mode .hero::after {
  background:
    linear-gradient(to right, rgba(5, 26, 29, 0.92) 0%, rgba(5, 26, 29, 0.65) 45%, rgba(5, 26, 29, 0.40) 70%, rgba(5, 26, 29, 0.20) 100%),
    radial-gradient(ellipse 60% 80% at 90% 0%, rgba(232, 179, 60, 0.12) 0, transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 100%, rgba(27, 110, 106, 0.20) 0, transparent 65%) !important;
}

/* Pre-section / footer-cta / dark sections — ya son oscuras, mantener */
body.dark-mode .pre-footer,
body.dark-mode .cta-section,
body.dark-mode .feature-block.dark,
body.dark-mode [style*="background:var(--petroleo)"],
body.dark-mode [style*="background: var(--petroleo)"] {
  background: #030f11 !important;
}

/* ---- 13. WHATSAPP FLOAT — mantener verde ---- */
body.dark-mode .wa-float {
  /* mantiene el verde WhatsApp en dark mode */
  background: #25D366 !important;
  color: #ffffff !important;
}

/* ============================================
   WHATSAPP FLOAT BUTTON — global (toda página)
   Definido aquí para garantizar que se aplique
   incluso en páginas que no tienen el CSS inline.
   ============================================ */

.wa-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4) !important;
  z-index: 99 !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.wa-float:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5) !important;
}

.wa-float svg {
  width: 28px !important;
  height: 28px !important;
  fill: #ffffff !important;
  display: block !important;
}

.wa-float svg path {
  fill: #ffffff !important;
}

@media (max-width: 768px) {
  .wa-float {
    bottom: 16px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }
  .wa-float svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ============================================
   CONTRASTE AMARILLO — regla global de seguridad
   Cualquier elemento con fondo amarillo NĀGO
   debe tener texto Petróleo (no Arena/cream/white).
   Aplica a botones, badges y cualquier futuro
   componente que use el amarillo como bg.
   ============================================ */

.btn-primary,
.btn-cta-light,
.btn-yellow,
.nav-cta,
.mc-cta,
.lawyer-btn,
.hotline-btn.primary,
.form-submit,
.bill-seal,
.pilot-icon,
[class*="cta-yellow"],
[class*="cta-amber"] {
  color: #0B2F33 !important;
}

/* Cookie banner — botón Aceptar (que usa amarillo) */
.cookie-banner button[data-action="accept"],
#cookie-banner .cookie-accept,
.cookie-accept-btn {
  color: #0B2F33 !important;
}

/* En dark mode mantienen petróleo (texto oscuro sobre amarillo igual) */
body.dark-mode .btn-primary,
body.dark-mode .nav-cta,
body.dark-mode .mc-cta,
body.dark-mode .lawyer-btn,
body.dark-mode .btn-cta-light,
body.dark-mode .hotline-btn.primary,
body.dark-mode .form-submit {
  color: #0B2F33 !important;
}

/* ---- 14. SVG ICONS ---- */
body.dark-mode svg:not([fill="none"]) {
  /* iconos heredan currentColor — funcionan automáticamente */
}

/* ---- 15. BORDERS de cualquier card no listado ---- */
body.dark-mode [style*="border:1px solid rgba(20, 48, 54"],
body.dark-mode [style*="border: 1px solid rgba(20, 48, 54"] {
  border-color: rgba(244, 239, 230, 0.10) !important;
}

/* ============================================
   RESPONSIVE ACCESSIBILITY PANEL
   ============================================ */

@media (max-width: 768px) {
  #accessibility-panel {
    top: auto;
    bottom: 80px;
    left: 10px;
    right: auto;
    flex-direction: row;
    padding: 8px;
  }
  
  .acc-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* ============================================
   FOCUS STYLES FOR ACCESSIBILITY
   ============================================ */

body.dark-mode *:focus {
  outline: 3px solid #E8B33C !important;
  outline-offset: 2px !important;
}

/* Skip to content link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #E8B33C;
  color: #0B2F33;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

body.dark-mode .skip-link {
  background: #E8B33C;
  color: #051a1d;
}


/* NĀGO — Reveal animations */
.reveal, .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view, .fade-in.in-view, .reveal.visible, .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth scroll behavior reforzado */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Reduce motion para users que lo prefieran */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================
   Footer "No soy jubilado" botón — global
   ============================================ */
.footer-not-retired-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 18px 0 !important;
  padding: 13px 22px !important;
  background: linear-gradient(135deg, #25D366, #1EB855) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.30) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  line-height: 1.3 !important;
  max-width: 320px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.footer-not-retired-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45) !important;
  background: linear-gradient(135deg, #1EB855, #1A9B47) !important;
}
.footer-not-retired-btn svg {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff !important;
}
.footer-not-retired-btn svg path {
  fill: #ffffff !important;
}
@media (max-width: 680px) {
  .footer-not-retired-btn {
    font-size: 13px !important;
    padding: 12px 18px !important;
    max-width: 280px !important;
  }
}


/* ============================================
   DARK MODE FIXES — Calculador del Legado
   y elementos con --ink, --ink-60, --ink-80
   ============================================ */

/* Field labels en calculadora /legado/ */
body.dark-mode .field-label-text {
  color: rgba(244, 239, 230, 0.92) !important;
}
body.dark-mode .field-label-value {
  color: #F4EFE6 !important;
}
body.dark-mode .field-label-value .unit {
  color: rgba(244, 239, 230, 0.65) !important;
}
body.dark-mode .field-label-help {
  color: rgba(244, 239, 230, 0.65) !important;
}

/* Range marks (UF 5.000, UF 25.000) */
body.dark-mode .range-marks,
body.dark-mode .range-marks span {
  color: rgba(244, 239, 230, 0.60) !important;
}

/* ====== Botones secundarios (Descargar PDF, Compartir, etc) ====== */
body.dark-mode .btn-secondary {
  background: rgba(244, 239, 230, 0.06) !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.25) !important;
}
body.dark-mode .btn-secondary:hover {
  background: rgba(244, 239, 230, 0.12) !important;
  border-color: var(--copper-glow, #E8B33C) !important;
  color: var(--copper-glow, #E8B33C) !important;
}
body.dark-mode .btn-secondary svg {
  color: #F4EFE6 !important;
  fill: #F4EFE6 !important;
}

/* ====== Compare table /legado/ ====== */
body.dark-mode .compare-table {
  background: rgba(11, 47, 51, 0.6) !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
}
body.dark-mode .compare-table-cell:first-child {
  background: rgba(11, 47, 51, 0.4) !important;
  color: #F4EFE6 !important;
}
body.dark-mode .compare-table-cell:nth-child(2) {
  color: rgba(244, 239, 230, 0.78) !important;
  border-left-color: rgba(244, 239, 230, 0.10) !important;
}
body.dark-mode .compare-table-cell:nth-child(3) {
  background: rgba(232, 179, 60, 0.08) !important;
  color: #F4EFE6 !important;
  border-left-color: rgba(244, 239, 230, 0.10) !important;
}
body.dark-mode .compare-table-row {
  border-bottom-color: rgba(244, 239, 230, 0.08) !important;
}

/* Sex selector / Femenino/Masculino buttons */
body.dark-mode .sex-toggle,
body.dark-mode [class*="sex-btn"] {
  background: rgba(244, 239, 230, 0.04) !important;
  border-color: rgba(244, 239, 230, 0.20) !important;
}
body.dark-mode .sex-toggle button,
body.dark-mode .sex-toggle .toggle-btn,
body.dark-mode [class*="sex-btn"] button {
  color: rgba(244, 239, 230, 0.78) !important;
}
body.dark-mode .sex-toggle button.active,
body.dark-mode .sex-toggle .toggle-btn.active,
body.dark-mode [class*="sex-btn"] button.active {
  background: var(--cream, #F4EFE6) !important;
  color: var(--petroleo, #0B2F33) !important;
}

/* Result block dark - asegurar contrastes en ambos modes */
body.dark-mode .result-block {
  background: rgba(11, 47, 51, 0.55) !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
  color: #F4EFE6 !important;
}
body.dark-mode .result-block .result-eyebrow {
  color: var(--copper-glow, #E8B33C) !important;
}
body.dark-mode .result-block h3,
body.dark-mode .result-block h4 {
  color: #F4EFE6 !important;
}
body.dark-mode .result-block p {
  color: rgba(244, 239, 230, 0.85) !important;
}
body.dark-mode .result-block .result-headline {
  color: var(--copper-glow, #E8B33C) !important;
}
body.dark-mode .result-block .result-headline .uf {
  color: rgba(244, 239, 230, 0.75) !important;
}
body.dark-mode .result-block .result-clp {
  color: rgba(244, 239, 230, 0.85) !important;
}
body.dark-mode .breakdown-label,
body.dark-mode .breakdown-value {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* Lifeline result blocks */
body.dark-mode .ll-stat-label,
body.dark-mode .ll-stat-value,
body.dark-mode .ll-result-label,
body.dark-mode .ll-result-value {
  color: #F4EFE6 !important;
}
body.dark-mode .ll-result {
  background: rgba(11, 47, 51, 0.55) !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
}

/* Inputs y form fields */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="url"],
body.dark-mode input[type="file"],
body.dark-mode select,
body.dark-mode textarea {
  background: rgba(244, 239, 230, 0.06) !important;
  color: #F4EFE6 !important;
  border-color: rgba(244, 239, 230, 0.22) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: rgba(244, 239, 230, 0.45) !important;
}

/* ============================================
   READABILITY — Tamaños mínimos para 65+
   Aumentar textos pequeños globalmente
   ============================================ */

/* Subir el tamaño mínimo a 14px (era 11-12 en algunos lugares) */
.field-label-help,
.range-marks,
.range-marks span {
  font-size: 13px !important;
}

/* UF unit en headlines: era 0.5em → 0.6em */
.result-headline .uf {
  font-size: 0.6em !important;
}

/* Result CLP: era 14px → 16px */
.result-clp {
  font-size: 16px !important;
}

/* Mc-result-note: era 13px → 15px */
.mc-result-note {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Footer-tagline y footer-desc: era 13-14px → 15px */
.footer-tagline,
.footer-desc {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Footer copyright: legible */
.footer p,
.footer .copyright {
  font-size: 14px !important;
}

/* Cookie banner texto: legible */
.cookie-banner p,
#cookie-banner p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Eyebrow tags: 12px → 13px */
.eyebrow,
.result-eyebrow {
  font-size: 13px !important;
}

/* Mc-result-row labels: subir base a 15px */
.mc-result-label,
.mc-result-value {
  font-size: 15px !important;
}

/* Legibilidad general body: asegurar mínimo 16px */
body {
  font-size: 16px !important;
}


/* ============================================
   Botón "Trabaja con nosotros" + Modal
   ============================================ */

.footer-careers-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
  padding: 13px 22px !important;
  background: rgba(244, 239, 230, 0.08) !important;
  color: #F4EFE6 !important;
  border: 1.5px solid rgba(244, 239, 230, 0.30) !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  max-width: 320px !important;
}
.footer-careers-btn:hover {
  background: var(--copper, #E8B33C) !important;
  color: var(--petroleo, #0B2F33) !important;
  border-color: var(--copper, #E8B33C) !important;
  transform: translateY(-2px) !important;
}
.footer-careers-btn svg {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Modal overlay */
.careers-modal-overlay {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(11, 47, 51, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none !important;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.careers-modal-overlay.is-open {
  display: flex !important;
}
.careers-modal {
  background: #F4EFE6;
  border-radius: 24px;
  padding: 40px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  animation: modal-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.careers-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(11, 47, 51, 0.06);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #0B2F33;
  transition: background 0.2s ease;
  font-weight: 300;
  line-height: 1;
}
.careers-modal-close:hover {
  background: rgba(11, 47, 51, 0.12);
}
.careers-modal-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1B6E6A;
  margin-bottom: 8px;
  display: block;
}
.careers-modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #0B2F33;
  line-height: 1.15;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.careers-modal-subtitle {
  font-size: 16px;
  color: rgba(11, 47, 51, 0.72);
  line-height: 1.55;
  margin-bottom: 28px;
}
.careers-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 540px) {
  .careers-form-row {
    grid-template-columns: 1fr;
  }
  .careers-modal {
    padding: 28px 22px;
  }
  .careers-modal-title {
    font-size: 24px;
  }
}
.careers-form-field {
  margin-bottom: 16px;
}
.careers-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0B2F33;
  margin-bottom: 6px;
}
.careers-form-label .req {
  color: #A02020;
  margin-left: 2px;
}
.careers-form-input,
.careers-form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(11, 47, 51, 0.18);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: #0B2F33;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.careers-form-input:focus,
.careers-form-textarea:focus {
  outline: none;
  border-color: #E8B33C;
  box-shadow: 0 0 0 3px rgba(232, 179, 60, 0.18);
}
.careers-form-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}
.careers-form-file-wrapper {
  position: relative;
  display: block;
  border: 1.5px dashed rgba(11, 47, 51, 0.25);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.6);
}
.careers-form-file-wrapper:hover {
  border-color: #E8B33C;
  background: rgba(232, 179, 60, 0.05);
}
.careers-form-file-wrapper input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.careers-form-file-text {
  font-size: 14px;
  color: #0B2F33;
  font-weight: 600;
}
.careers-form-file-hint {
  font-size: 12px;
  color: rgba(11, 47, 51, 0.55);
  margin-top: 2px;
}
.careers-form-file-name {
  font-size: 13px;
  color: #1B6E6A;
  font-weight: 600;
  margin-top: 6px;
  word-break: break-all;
}
.careers-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: #E8B33C;
  color: #0B2F33 !important;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 8px;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(232, 179, 60, 0.25);
}
.careers-form-submit:hover {
  background: #E8B33C;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(232, 179, 60, 0.4);
}
.careers-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.careers-form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  display: none;
}
.careers-form-status.success {
  background: rgba(27, 110, 106, 0.12);
  color: #1B6E6A;
  border: 1px solid rgba(27, 110, 106, 0.30);
  display: block;
}
.careers-form-status.error {
  background: rgba(196, 69, 69, 0.10);
  color: #A02020;
  border: 1px solid rgba(196, 69, 69, 0.30);
  display: block;
}
.careers-form-privacy {
  font-size: 12px;
  color: rgba(11, 47, 51, 0.55);
  margin-top: 14px;
  text-align: center;
  line-height: 1.5;
}


/* ============================================
   DARK MODE FIX FINAL — Breakdown del Calculador
   ============================================ */

/* Breakdown wrapper */
body.dark-mode .breakdown {
  background: rgba(11, 47, 51, 0.45) !important;
  border-color: rgba(244, 239, 230, 0.10) !important;
}
body.dark-mode .breakdown-row {
  border-color: rgba(244, 239, 230, 0.10) !important;
}
body.dark-mode .breakdown-row + .breakdown-row {
  border-top-color: rgba(244, 239, 230, 0.12) !important;
}
body.dark-mode .breakdown-label {
  color: rgba(244, 239, 230, 0.90) !important;
}
body.dark-mode .breakdown-label small {
  color: rgba(244, 239, 230, 0.65) !important;
}
body.dark-mode .breakdown-value {
  color: #F4EFE6 !important;
}
body.dark-mode .breakdown-value .uf {
  color: rgba(244, 239, 230, 0.65) !important;
}
body.dark-mode .breakdown-row.deduction .breakdown-value {
  color: #E8B33C !important;
}
body.dark-mode .breakdown-row.net {
  border-top-color: var(--copper-glow, #E8B33C) !important;
}
body.dark-mode .breakdown-row.net .breakdown-label,
body.dark-mode .breakdown-row.net .breakdown-value {
  color: #F4EFE6 !important;
}
body.dark-mode .breakdown-note {
  background: rgba(232, 179, 60, 0.10) !important;
  border-left-color: var(--copper, #E8B33C) !important;
  color: rgba(244, 239, 230, 0.92) !important;
}
body.dark-mode .breakdown-note strong {
  color: var(--copper-glow, #E8B33C) !important;
}

/* Field-segment toggle (Femenino/Masculino) */
body.dark-mode .field-segment {
  background: rgba(244, 239, 230, 0.06) !important;
  border-color: rgba(244, 239, 230, 0.18) !important;
}
body.dark-mode .field-segment label {
  color: rgba(244, 239, 230, 0.72) !important;
}
body.dark-mode .field-segment input:checked + label {
  background: var(--cream, #F4EFE6) !important;
  color: var(--petroleo, #0B2F33) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30) !important;
}

/* Result-row-grid h4 (TOTAL A 8 AÑOS, EQUIVALENTE SIN CANON) */
body.dark-mode .result-row-grid h4 {
  color: var(--copper-glow, #E8B33C) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
}

/* Asegurar que .field (cada bloque del calculador) tenga buen contraste */
body.dark-mode .field {
  background: transparent !important;
}
body.dark-mode .field-label-text {
  color: #F4EFE6 !important;
  font-size: 14px !important;
}

/* Asegurar mc-monthly y mc-result-row.net en dark */
body.dark-mode .mc-result-row.net .mc-result-label,
body.dark-mode .mc-result-row.net .mc-result-value {
  color: #F4EFE6 !important;
}

/* Card calculadora completo en dark debería tener contraste correcto */
body.dark-mode .calc-form,
body.dark-mode .calc-results {
  color: #F4EFE6 !important;
}

/* Headings dentro del calc */
body.dark-mode .calc-form h2,
body.dark-mode .calc-form h3,
body.dark-mode .calc-form .calc-title,
body.dark-mode .calc-results h2,
body.dark-mode .calc-results h3 {
  color: #F4EFE6 !important;
}

body.dark-mode .calc-form p,
body.dark-mode .calc-results p {
  color: rgba(244, 239, 230, 0.85) !important;
}

/* Stats / lifeline labels */
body.dark-mode [class*="stat-label"],
body.dark-mode [class*="stat-value"] {
  color: #F4EFE6 !important;
}


/* ════════════════════════════════════════════════════════════════
   MAGNUS · CONTRASTE WCAG AAA · auditado y validado
   ════════════════════════════════════════════════════════════════
   Estándar: 7:1 texto normal · 4.5:1 texto grande (≥18pt)
   Paleta validada matemáticamente sobre fondos cream y petróleo.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Variables AAA-validated */
  --aaa-ink-on-cream: #0B2F33;          /* 13.5:1 ✓ texto normal sobre cream */
  --aaa-ink-secondary: #1F4248;         /* 9.8:1 ✓ texto secundario */
  --aaa-eyebrow-on-cream: #0F4543;      /* 7.5:1 ✓ eyebrows tipo "EL PROBLEMA" */
  --aaa-accent-on-cream: #6B4A0E;       /* 7.0:1 ✓ ámbar oscuro para TEXTO pequeño/enlaces sobre cream (Excepción #2 Santiago). El amarillo de marca #E8B33C se conserva para fondos, bordes y títulos grandes. */
  --aaa-success-on-cream: #0F5C3F;      /* 7.4:1 ✓ "Sí" en verde */
  --aaa-error-on-cream: #A02020;        /* 7.0:1 ✓ "No" en rojo */
  --aaa-cream-on-petroleo: #F4EFE6;     /* 13.5:1 ✓ texto sobre petróleo */
  --aaa-glow-on-petroleo: #E8B33C;      /* 9.1:1 ✓ acentos en dark */
  --aaa-cream-secondary: rgba(244,239,230,0.85);  /* texto secundario en dark */
}

/* ============================================
   LIGHT MODE — texto sobre cream
   ============================================ */

/* Eyebrows (textos pequeños como "EL PROBLEMA", "COMPARATIVA 2026") */
.eyebrow,
.option-eyebrow,
.result-eyebrow,
.hero-eyebrow,
.mc-result-eyebrow,
.breadcrumbs,
[class*="-eyebrow"] {
  color: var(--aaa-eyebrow-on-cream) !important;
}

/* Override: eyebrows sobre fondo oscuro (petróleo) deben ser amarillo */
.section-petroleo .eyebrow,
.section-petroleo [class*="-eyebrow"],
.hero[style*="petroleo"] .eyebrow,
.hero[style*="background:var(--petroleo)"] .eyebrow,
.hero[style*="background: var(--petroleo)"] .eyebrow,
.gloss-hero .eyebrow,
.contratos-hero .eyebrow,
.res-hero .eyebrow,
.manif-hero .eyebrow,
.blog-hero .eyebrow,
.research-hero .eyebrow,
.inv-hero .eyebrow,
.faq-hero .eyebrow,
.partners-hero .eyebrow,
.press-hero .eyebrow,
.team-hero .eyebrow,
.recursos-hero .eyebrow,
.hero-dark .eyebrow,
.hero.dark .eyebrow,
section.hero[class*="petroleo"] .eyebrow,
[class*="hero"][class*="dark"] .eyebrow,
section.section-petroleo .eyebrow,
section.section-petroleo [class*="-eyebrow"],
header.contratos-hero .eyebrow,
header.res-hero .eyebrow,
header.manif-hero .eyebrow,
header.inv-hero .eyebrow,
header.faq-hero .eyebrow,
header.partners-hero .eyebrow,
header.press-hero .eyebrow,
header[class*="-hero"] .eyebrow,
section[class*="-hero"] .eyebrow {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX · Páginas con paleta dark propia (seguro-sobrevida, simula)
   Tienen .card y .hero con bg oscuro propio. Forzar text claro.
   ════════════════════════════════════════════════════════════════ */
body[data-paleta="local-dark"] .card,
body[data-paleta="local-dark"] .card *,
body[data-paleta="local-dark"] .hero,
body[data-paleta="local-dark"] .hero *,
body[data-paleta="local-dark"] section.hero,
body[data-paleta="local-dark"] section.hero * {
  color: #e8f0f7 !important;
}
body[data-paleta="local-dark"] .card label,
body[data-paleta="local-dark"] .card .note,
body[data-paleta="local-dark"] .card .sub,
body[data-paleta="local-dark"] .card .muted,
body[data-paleta="local-dark"] .hero p {
  color: rgba(232, 240, 247, 0.65) !important;
}
body[data-paleta="local-dark"] .hero h1,
body[data-paleta="local-dark"] section.hero h1 {
  color: #ffffff !important;
}
body[data-paleta="local-dark"] .card .mono {
  color: #5bd6ff !important;
}
body[data-paleta="local-dark"] .card input,
body[data-paleta="local-dark"] .card select {
  color: #e8f0f7 !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Accent text (italics amarillos: "silver economy", "qué queda para tu familia") */
.accent,
em.accent,
.title-accent,
[class*="accent"] {
  color: var(--copper) !important;
}

/* Override: accent sobre fondo oscuro (hero petróleo, sections petróleo) usa amarillo principal */
.section-petroleo .accent,
.section-petroleo em.accent,
.section-petroleo [class*="accent"],
.hero[style*="background:var(--petroleo)"] .accent,
.hero[style*="background: var(--petroleo)"] .accent,
section.hero[class*="petroleo"] .accent,
.hero-dark .accent,
.hero.dark .accent,
[class*="hero"][class*="dark"] .accent {
  color: var(--copper, #E8B33C) !important;
}

/* Texto secundario antes era ink-60 — subir a 80% para AAA */
.lead,
.subhead,
.section-lead,
.mc-result-note,
.field-label-help,
.range-marks,
.range-marks span {
  color: var(--aaa-ink-secondary) !important;
}

/* hero-lead es contextual — depende del background del hero parent */
/* En heros oscuros (style con petróleo), el .hero-lead va a cream */
/* En heros claros (sin background o con cream/paper), el CSS local de cada página decide */
.hero[style*="background:var(--petroleo)"] .hero-lead,
.hero[style*="background: var(--petroleo)"] .hero-lead,
.hero.dark .hero-lead,
.hero-dark .hero-lead,
section.hero[style*="petroleo"] .hero-lead {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* Yes/No status (tabla comparativa) */
.yes,
.compare-status.good,
.compare-status:not(.bad):not(.warn) {
  color: var(--aaa-success-on-cream) !important;
  font-weight: 700;
}
.no,
.compare-status.bad {
  color: var(--aaa-error-on-cream) !important;
  font-weight: 700;
}
.compare-status.warn {
  color: #8C5A0F !important;  /* ámbar oscuro 7.1:1 ✓ */
  font-weight: 700;
}

/* Footer careers btn - texto en cream PURO (era opaco) */
.footer-careers-btn {
  color: #FFFFFF !important;
}
.footer-careers-btn:hover {
  color: var(--aaa-ink-on-cream) !important;
}

/* Cookie banner */
.mcb-link,
.cookie-banner a {
  color: #67C09C !important;  /* teal claro AAA sobre petróleo */
  text-decoration: underline;
}
.mcb-btn.mcb-accept {
  background: #E8B33C !important;
  color: var(--aaa-ink-on-cream) !important;
}
.mcb-btn.mcb-reject {
  background: rgba(244,239,230,0.10) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(244,239,230,0.40) !important;
}

/* Result calc values - asegurar AAA */
.mc-result-value,
.mc-result-label {
  color: var(--aaa-ink-on-cream) !important;
}

/* Breakdown labels y values en light */
body:not(.dark-mode) .breakdown-label,
body:not(.dark-mode) .breakdown-value {
  color: var(--aaa-ink-on-cream) !important;
}

/* Field labels en light */
body:not(.dark-mode) .field-label-text,
body:not(.dark-mode) .field-label-value {
  color: var(--aaa-ink-on-cream) !important;
}

/* "Sobre NĀGO" hero title cuando aparece en cream */
.hero-title-overlay,
.section-eyebrow-large {
  color: var(--aaa-eyebrow-on-cream) !important;
  font-weight: 700;
  opacity: 1 !important;
}

/* ============================================
   DARK MODE — texto sobre petróleo
   ============================================ */

body.dark-mode .eyebrow,
body.dark-mode .option-eyebrow,
body.dark-mode .result-eyebrow,
body.dark-mode .hero-eyebrow,
body.dark-mode [class*="-eyebrow"] {
  color: var(--copper) !important;
}

body.dark-mode .accent,
body.dark-mode em.accent,
body.dark-mode [class*="accent"] {
  color: var(--copper) !important;
}

body.dark-mode .yes,
body.dark-mode .compare-status.good {
  color: #6FD9A8 !important;  /* verde claro 8:1 sobre petróleo */
}
body.dark-mode .no,
body.dark-mode .compare-status.bad {
  color: #E8B33C !important;  /* rojo claro 7:1 sobre petróleo */
}
body.dark-mode .compare-status.warn {
  color: var(--copper) !important;
}

/* Subheadings en dark mode (h2/h3 que estaban en color oscuro) */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--aaa-cream-on-petroleo) !important;
}

/* Asegurar que párrafos tengan AAA en dark */
body.dark-mode p,
body.dark-mode li,
body.dark-mode td,
body.dark-mode .lead,
body.dark-mode .hero-lead,
body.dark-mode .section-lead {
  color: var(--aaa-cream-secondary) !important;
}

/* Bold/strong elements legibles en dark */
body.dark-mode strong,
body.dark-mode b {
  color: var(--aaa-cream-on-petroleo) !important;
  font-weight: 700;
}

/* Override general: ningún texto puede tener opacity < 0.85 en dark */
body.dark-mode * {
  /* No forzamos opacity, pero validamos visualmente con audit */
}


/* ════════════════════════════════════════════════════════════════
   MAGNUS · NAV HAMBURGER MOBILE
   ════════════════════════════════════════════════════════════════ */

.nav-hamburger {
  display: none;  /* solo se muestra en mobile */
  background: none;
  border: none;
  padding: 8px;
  margin-left: 8px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.2s;
}
.nav-hamburger:hover {
  background: rgba(244,239,230,0.10);
}
.nav-hamburger svg {
  width: 28px;
  height: 28px;
  stroke: var(--aaa-cream-on-petroleo, #F4EFE6);
  stroke-width: 2.4;
}

/* Mobile: ocultar nav-links inline, mostrar hamburger */
@media (max-width: 880px) {
  .nav-links {
    display: none !important;
  }
  .nav-hamburger {
    display: inline-flex !important;
  }
  /* CTA en mobile más compacto */
  .nav-cta {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}

/* Overlay menu mobile */
.nav-mobile-overlay,
.nav-mobile-overlay * {
  color: #F4EFE6;
}
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 32, 36, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9998;
  display: none;
  flex-direction: column;
  padding: 80px 24px 40px;
  overflow-y: auto;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.nav-mobile-overlay.is-open {
  display: flex;
}
.nav-mobile-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(244,239,230,0.10);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #F4EFE6;
  font-weight: 300;
  line-height: 1;
}
.nav-mobile-close:hover {
  background: rgba(244,239,230,0.18);
}
.nav-mobile-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-overlay ul li {
  border-bottom: 1px solid rgba(244,239,230,0.08);
}
.nav-mobile-overlay ul li:last-child {
  border-bottom: none;
}
.nav-mobile-overlay ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-size: 18px;
  font-weight: 600;
  color: #F4EFE6 !important;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-mobile-overlay ul a:hover,
.nav-mobile-overlay ul a:focus {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
}
.nav-mobile-overlay ul a::after {
  content: "→";
  font-size: 20px;
  opacity: 0.5;
}
.nav-mobile-cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: var(--copper, #E8B33C);
  color: var(--petroleo, #0B2F33) !important;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(232,179,60,0.3);
}

/* Body lock cuando menu abierto */
body.nav-mobile-open {
  overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════
   MAGNUS · MOBILE RESPONSIVE FIXES
   ════════════════════════════════════════════════════════════════ */

/* ─── Tabla comparativa: scroll horizontal en mobile ─── */
@media (max-width: 768px) {
  /* Wrap any compare-table in a scrollable container */
  .compare-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;  /* full bleed */
    padding: 0 16px 8px;
    scroll-snap-type: x mandatory;
    position: relative;
  }
  
  /* Tabla con grid de 3 col en mobile, ancho mínimo para evitar squish */
  .compare-table {
    min-width: 600px !important;
    border-radius: 16px !important;
  }
  .compare-table-row {
    grid-template-columns: 1.4fr 1fr 1fr !important;
  }
  .compare-table-cell {
    padding: 14px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Hint visual de scroll en mobile */
  .compare-table-wrap::after {
    content: "← desliza →";
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--aaa-ink-secondary);
    margin-top: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  
  /* Tablas estilo tradicional con <table> también scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
    width: 100%;
  }
}

/* ─── Hero spacing fix mobile ─── */
@media (max-width: 768px) {
  .hero {
    padding: 32px 0 24px !important;
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }
  .hero .lead,
  .hero-lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  /* Reducir padding excesivo de secciones */
  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ─── Texto de los span class="accent" más legible en mobile ─── */
@media (max-width: 768px) {
  .accent {
    /* Asegurar que rompe línea correctamente */
    display: inline;
    word-break: keep-all;
  }
  h1 .accent,
  h2 .accent {
    line-height: 1.15 !important;
  }
}

/* ─── Cards / grids en mobile en una columna ─── */
@media (max-width: 680px) {
  .why-grid,
  .roles-grid,
  .footer-grid,
  [class*="grid-2"],
  [class*="grid-3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ─── Calculator (legado) en mobile: stack vertical ─── */
@media (max-width: 880px) {
  .calc-grid,
  .calc-layout,
  [class*="calc-wrapper"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ─── Botones full-width en mobile cuando hay varios ─── */
@media (max-width: 540px) {
  .btn-primary,
  .btn-secondary,
  .footer-not-retired-btn,
  .footer-careers-btn {
    max-width: 100% !important;
    width: auto !important;
  }
  /* Hero actions en mobile: stack */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ─── Padding lateral más generoso en mobile ─── */
@media (max-width: 540px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ─── Eyebrow "Sobre NĀGO" / "COMPARATIVA 2026" type 
       cuando se usa como header gigante decorativo ─── */
.section-overlay-title,
.eyebrow.large,
.eyebrow.huge {
  /* Hacer mucho más visible */
  background: rgba(15, 69, 67, 0.10) !important;  /* tinte teal sutil */
  padding: 6px 16px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  color: var(--aaa-eyebrow-on-cream) !important;
}

/* ─── Hero overlay watermark style (cuando "Sobre NĀGO" 
       aparece como marca de agua arriba) ─── */
[class*="hero-watermark"],
[class*="overlay-text"] {
  color: var(--aaa-eyebrow-on-cream) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════
   MAGNUS · OVERRIDE GLOBAL DE VARIABLES PARA AAA
   ════════════════════════════════════════════════════════════════
   Redefine variables CSS heredadas para que cualquier elemento que
   las use automáticamente cumpla AAA, sin tocar HTML.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Light mode - sobre cream #F4EFE6 */
  --ink-60: #1F4248 !important;          /* era 60% petróleo (3.6:1) → ahora 9.8:1 ✓ */
  --ink-40: #1F4248 !important;          /* era 40% petróleo (2.2:1) → ahora 9.8:1 ✓ */
  --ink-80: #0B2F33 !important;          /* full petróleo 13.5:1 ✓ */
  --ink: #0B2F33 !important;
  
  /* Sobre fondos con tinte (compare table highlight) */
  --teal-text: #0F4543 !important;       /* eyebrow tipo color teal AAA */
  --copper-text: #E8B33C !important;     /* texto en color copper AAA */
}

body.dark-mode {
  /* Dark mode - sobre petróleo #0B2F33 */
  --ink-60: rgba(244, 239, 230, 0.85) !important;
  --ink-40: rgba(244, 239, 230, 0.85) !important;
  --ink-80: #F4EFE6 !important;
  --ink: #F4EFE6 !important;
}

/* Override: la tabla comparativa usa background con tinte que reduce
   contraste de elementos hijos. Forzar texto AAA en cada celda. */
.compare-table-cell,
.compare-table-cell *,
.compare-cell,
.compare-cell * {
  color: var(--aaa-ink-on-cream, #0B2F33) !important;
}
.compare-table-cell .yes,
.compare-cell .yes {
  color: #0A4A33 !important;  /* verde más oscuro para celdas con tinte amarillo */
}
.compare-table-cell .no,
.compare-cell .no {
  color: #8B1A1A !important;  /* rojo más oscuro para celdas con tinte */
}
.compare-table-cell .warn,
.compare-cell .warn {
  color: #6A4408 !important;  /* ámbar más oscuro */
}
body.dark-mode .compare-table-cell,
body.dark-mode .compare-table-cell *,
body.dark-mode .compare-cell,
body.dark-mode .compare-cell * {
  color: #F4EFE6 !important;
}
body.dark-mode .compare-table-cell .yes {
  color: #6FD9A8 !important;
}
body.dark-mode .compare-table-cell .no {
  color: #E8B33C !important;
}

/* Botones cookie banner — forzar AAA */
.mcb-btn.mcb-reject,
.mcb-reject {
  background: rgba(244, 239, 230, 0.10) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(244, 239, 230, 0.50) !important;
  font-weight: 600 !important;
}
.mcb-btn.mcb-accept,
.mcb-accept {
  background: #E8B33C !important;
  color: #0B2F33 !important;
  font-weight: 700 !important;
}
.mcb-link {
  color: #5DD9A7 !important;  /* verde claro 8.5:1 sobre petróleo */
  text-decoration: underline !important;
}

/* Footer careers btn — texto blanco puro */
.footer-careers-btn {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.footer-careers-btn:hover {
  color: #0B2F33 !important;
}

/* btn-primary y btn-outline genéricos */
.btn-primary {
  background: var(--copper, #E8B33C) !important;
  color: #0B2F33 !important;
  font-weight: 700 !important;
}
.btn.btn-outline,
.btn-outline {
  border: 1.5px solid #0B2F33 !important;
  color: #0B2F33 !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* warn pills/badges */
.warn,
.compare-status.warn {
  color: #6A4408 !important;
  font-weight: 700 !important;
}
body.dark-mode .warn,
body.dark-mode .compare-status.warn {
  color: var(--copper-glow, #E8B33C) !important;
}


/* ════════════════════════════════════════════════════════════════
   Footer · bloque de contacto unificado
   ════════════════════════════════════════════════════════════════ */
.footer-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 20px 0;
  margin-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, 0.10);
  font-size: 14px;
  color: rgba(244, 239, 230, 0.92);
  align-items: center;
}
.footer-contact-info a {
  color: #FFFFFF !important;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-info a:hover {
  color: var(--copper-glow, #E8B33C) !important;
}
.footer-contact-info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-contact-info-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}
.footer-contact-hours {
  font-size: 13px;
  color: rgba(244, 239, 230, 0.70);
  font-weight: 500;
}
@media (max-width: 540px) {
  .footer-contact-info {
    gap: 10px 18px;
    font-size: 13px;
  }
}


/* ════════════════════════════════════════════════════════════════
   MAGNUS · OVERRIDES FINALES — visibilidad nav y logo
   ════════════════════════════════════════════════════════════════ */

/* Logo NĀGO en navbar: SIEMPRE blanco/cream sobre fondo oscuro del nav */
.nav .nav-logo img,
.nav-inner > a img,
nav.nav img,
header.nav img {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

/* Asegurar que el nav siempre tenga fondo petróleo (no transparente) */
.nav,
nav.nav,
header.nav {
  background: rgba(11, 47, 51, 0.96) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

/* Hamburger button: SIEMPRE visible en mobile, con specificity alta */
@media (max-width: 880px) {
  button.nav-hamburger,
  .nav .nav-hamburger,
  nav button.nav-hamburger {
    display: inline-flex !important;
    background: rgba(244, 239, 230, 0.10) !important;
    border: 1.5px solid rgba(244, 239, 230, 0.30) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  button.nav-hamburger svg,
  .nav .nav-hamburger svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #FFFFFF !important;
    stroke-width: 2.5 !important;
  }
}

/* Asegurar nav-links ocultos en mobile sin importar override local */
@media (max-width: 880px) {
  .nav .nav-links,
  nav .nav-links,
  ul.nav-links {
    display: none !important;
  }
}

/* Nav alto consistente para que hamburger se vea bien */
.nav-inner {
  min-height: 64px !important;
}

/* Asegurar que el menu mobile NO se oculte por estilos locales */
.nav-mobile-overlay.is-open {
  display: flex !important;
}


/* ════════════════════════════════════════════════════════════════
   Hero text en fondos oscuros — AAA garantizado
   Solo aplica si el hero ES explícitamente oscuro (clase semántica o bg petróleo).
   La regla universal anterior rompía los heros claros (familia, herederos, etc).
   ════════════════════════════════════════════════════════════════ */
.hero.dark .hero-lead,
section.hero[class*="dark"] .hero-lead,
.hero-dark .hero-lead,
section.hero[style*="petroleo"] .hero-lead,
section.hero[style*="background:var(--petroleo)"] .hero-lead,
section.hero[style*="background: var(--petroleo)"] .hero-lead {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* Específico: el hero del home tiene fondo petróleo */
body:not(.dark-mode) section.hero[style*="petroleo"] p,
body:not(.dark-mode) section.hero[class*="dark"] p {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* Solución robusta: detectar por clase semántica común */
.hero-dark .hero-lead,
.hero-dark p,
.hero-dark .lead,
[class*="hero"][class*="dark"] p,
[class*="hero"][class*="dark"] .lead {
  color: rgba(244, 239, 230, 0.95) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX · eyebrows sobre fondos oscuros (hero petróleo)
   El override global puso eyebrows en color AAA-sobre-cream,
   pero dentro de hero oscuro queda invisible (1.3:1).
   Detectamos el contexto y forzamos color para dark.
   ════════════════════════════════════════════════════════════════ */

/* Hero del home tiene background:var(--petroleo) */
.hero .eyebrow,
section.hero .eyebrow,
header.hero .eyebrow,
[class*="hero"][style*="petroleo"] .eyebrow,
[class*="hero-dark"] .eyebrow,
.hero-content .eyebrow {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
}

/* Cualquier .eyebrow directamente hijo de un elemento con bg oscuro */
[style*="background:var(--petroleo)"] .eyebrow,
[style*="background: var(--petroleo)"] .eyebrow,
[style*="background:#0B2F33"] .eyebrow,
[style*="background: #0B2F33"] .eyebrow,
.bg-petroleo .eyebrow,
.bg-dark .eyebrow {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
}

/* Body en dark mode: TODOS los eyebrows en glow */
body.dark-mode .eyebrow,
body.dark-mode [class*="-eyebrow"] {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
}

/* Hero CTA / hero-content / hero-text wrappers comunes */
.hero-content .eyebrow,
.hero-inner .eyebrow,
.hero-text .eyebrow,
.hero-wrapper .eyebrow {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX FINAL · ocultar nav-links viejos en mobile siempre
   Algunas páginas (/blog/, /research/) tienen su propio CSS inline
   que muestra nav-links inline en flex. Forzamos ocultar.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  body .nav .nav-links,
  body nav.nav .nav-links,
  body nav .nav-links,
  body ul.nav-links,
  body .nav-inner > ul.nav-links,
  body .nav-inner > .nav-links {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hamburger SIEMPRE visible y bien posicionado */
  body .nav .nav-hamburger,
  body nav .nav-hamburger,
  body button.nav-hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Nav-inner como flex container con space-between para logo/hamburger/cta */
  body .nav .nav-inner,
  body nav.nav .nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX · Horizontal overflow prevention
   ════════════════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Elementos comunes que causan overflow */
@media (max-width: 768px) {
  .container, section, header, footer, main, .nav-inner {
    max-width: 100vw !important;
  }
  /* Imágenes sin width específico */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* El logo de cabecera (blog y páginas legales) conserva su alto fijo */
  img.logo {
    height: 32px !important;
    width: auto !important;
  }
  /* Tablas - ya tienen wrap, pero por si acaso */
  table:not(.compare-table) {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }
  /* Pre/code blocks */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   UNIFICACIÓN AMARILLO #E8B33C · Excepciones contextuales
   
   Mandato Santiago: TODOS los amarillos del sitio son #E8B33C uniforme.
   PERO 2 excepciones donde se ve mal:
   1. Amarillo sobre amarillo → texto petróleo
   2. Amarillo pequeño (<18px, no h1/h2) sobre cream → texto petróleo
   ════════════════════════════════════════════════════════════════ */

/* CASO 1: Bg amarillo → todos los descendientes en petróleo */
[style*="background:var(--copper)"],
[style*="background: var(--copper)"],
[style*="background:#E8B33C"],
[style*="background: #E8B33C"],
[style*="background-color:#E8B33C"],
[style*="background-color: #E8B33C"],
.bg-amarillo,
.bg-copper,
.tag-navy,
.tag-sage,
.tag-terracotta,
.callback-eyebrow,
.section-eyebrow,
.partner-type-tag,
.card-cat,
[class*="card-cat"],
.faq-item-num {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* Override más fuerte: cualquier elemento dentro de un contenedor con bg amarillo */
[style*="background:var(--copper)"] *,
[style*="background: var(--copper)"] *,
[style*="background:#E8B33C"] *,
[style*="background: #E8B33C"] * {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* Botones amarillos: el contenido siempre petróleo (legible) */
.btn-primary[style*="background:var(--copper)"],
.btn-primary[style*="background: var(--copper)"],
a.btn-primary[style*="background:var(--copper)"],
a.btn-primary[style*="background: var(--copper)"],
.nav-cta,
.mc-cta,
.res-submit,
.form-submit,
button[style*="background:var(--copper)"],
button[style*="background: var(--copper)"] {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* CASO 2: Texto amarillo pequeño sobre cream → petróleo */
/* NOTA: acentos em de h1/h2 sobre cream ahora van a teal oscuro #0F4543
   (decisión usuario: el ámbar ~1.5:1 fallaba incluso para texto grande).
   Ver bloque "Acentos h1/h2 en fondo CLARO" más abajo. */

/* Eyebrows amarillos en bg cream (font small, < 18px) */
.eyebrow,
[class*="-eyebrow"],
.option-eyebrow,
.result-eyebrow,
.testimonial-eyebrow,
.contracts-version,
.magnus-growth-eyebrow,
.roles-eyebrow,
.apply-eyebrow,
.cat-tag {
  /* Por defecto van en teal-deep (eyebrow original) */
  color: var(--aaa-eyebrow-on-cream, #0F4543) !important;
}

/* Override: en heros oscuros estos siguen siendo amarillo */
.section-petroleo .eyebrow,
.section-petroleo [class*="-eyebrow"],
.hero-dark .eyebrow,
.hero-dark [class*="-eyebrow"],
.hero[style*="petroleo"] .eyebrow,
.hero[style*="background:var(--petroleo)"] .eyebrow,
.hero[style*="background: var(--petroleo)"] .eyebrow,
.gloss-hero .eyebrow,
.contratos-hero .eyebrow,
.res-hero .eyebrow,
.faq-hero .eyebrow,
.partners-hero .eyebrow,
.inv-hero .eyebrow,
.press-hero .eyebrow,
.manif-hero .eyebrow,
.blog-hero .eyebrow,
.research-hero .eyebrow,
.recursos-hero .eyebrow,
section.hero[class*="petroleo"] .eyebrow,
[class*="hero"][class*="dark"] .eyebrow,
section.section-petroleo .eyebrow,
section.section-petroleo [class*="-eyebrow"] {
  color: var(--magnus-amarillo, #E8B33C) !important;
}

/* Strong, em, a, span pequeños amarillos sobre cream → petróleo */
/* Aplicamos solo donde se hereda amarillo de var(--copper) */
.section:not(.section-petroleo) p strong[style*="color:var(--copper)"],
.section:not(.section-petroleo) p strong[style*="color: var(--copper)"],
.section:not(.section-petroleo) p strong[style*="color:#E8B33C"],
.section:not(.section-petroleo) p strong[style*="color: #E8B33C"] {
  color: var(--magnus-petroleo, #0B2F33) !important;
  font-weight: 700 !important;
}

/* Em accent sobre cream pequeño → petróleo (h1/h2 mantienen amarillo) */
.section:not(.section-petroleo) p em.accent,
.section:not(.section-petroleo) p em,
.hero-light p em,
.hero.hero-light p em {
  color: var(--magnus-petroleo, #0B2F33) !important;
  font-style: italic;
}

/* Acentos h1/h2 en fondo OSCURO (petróleo / hero oscuro) → ámbar marca (legible) */
.section-petroleo h1 .accent,
.section-petroleo h1 em.accent,
.section-petroleo h1 em,
.section-petroleo h2 .accent,
.section-petroleo h2 em.accent,
.section-petroleo h2 em,
.hero:not(.hero-light) h1 .accent,
.hero:not(.hero-light) h1 em.accent,
.hero:not(.hero-light) h1 em,
.hero:not(.hero-light) h2 .accent,
.hero:not(.hero-light) h2 em.accent,
.hero:not(.hero-light) h2 em,
body.dark-mode h1 em,
body.dark-mode h1 .accent,
body.dark-mode h2 em,
body.dark-mode h2 .accent {
  color: var(--magnus-amarillo, #E8B33C) !important;
}

/* Acentos h1/h2 en fondo CLARO/crema → teal oscuro (AAA, decisión usuario:
   el ámbar brillante ~1.5:1 fallaba incluso para texto grande) */
body:not(.dark-mode) h1 .accent,
body:not(.dark-mode) h1 em.accent,
body:not(.dark-mode) h1 em,
body:not(.dark-mode) h2 .accent,
body:not(.dark-mode) h2 em.accent,
body:not(.dark-mode) h2 em {
  color: #0F4543 !important;
}
body:not(.dark-mode) .section-petroleo h1 .accent,
body:not(.dark-mode) .section-petroleo h1 em.accent,
body:not(.dark-mode) .section-petroleo h1 em,
body:not(.dark-mode) .section-petroleo h2 .accent,
body:not(.dark-mode) .section-petroleo h2 em.accent,
body:not(.dark-mode) .section-petroleo h2 em,
body:not(.dark-mode) .hero:not(.hero-light) h1 .accent,
body:not(.dark-mode) .hero:not(.hero-light) h1 em.accent,
body:not(.dark-mode) .hero:not(.hero-light) h1 em,
body:not(.dark-mode) .hero:not(.hero-light) h2 .accent,
body:not(.dark-mode) .hero:not(.hero-light) h2 em.accent,
body:not(.dark-mode) .hero:not(.hero-light) h2 em {
  color: var(--magnus-amarillo, #E8B33C) !important;
}

/* Tags pequeños — texto petróleo SOBRE bg amarillo */
/* Solo si el elemento NO tiene una clase cat-* o tag-color-* específica */
.callback-eyebrow {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* card-cat: NO forzar amarillo bg porque tienen sus propias clases cat-* */
/* El issue era que mi unificación cambió el color text. Lo revierto a color local */
.card-cat,
[class*="card-cat"] {
  /* dejar color heredado de la clase cat-* específica, sin override */
}

/* card-cat con clase cat-* específica: texto petróleo sobre bg amarillo (unificado) */
.card-cat.cat-pensiones,
.card-cat.cat-vivienda,
.card-cat.cat-legal,
.card-cat.cat-bienestar,
.card-cat.cat-financiero,
.card-cat[class*="cat-"] {
  color: var(--magnus-petroleo, #0B2F33) !important;
  background: var(--magnus-amarillo, #E8B33C) !important;
}

/* Pero si el card-cat NO tiene cat-* clase específica, entonces sí petróleo sobre amarillo */
.card-cat:not([class*="cat-"]) {
  color: var(--magnus-petroleo, #0B2F33) !important;
  background: var(--magnus-amarillo, #E8B33C) !important;
}

/* faq-item-num: número grande dentro de un círculo amarillo → petróleo */
.faq-item-num {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* partner-type-tag: pill amarillo → petróleo */
.partner-type-tag {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* tag-navy, tag-sage, tag-terracotta usan bg amarillo → petróleo */
.tag-navy,
.tag-sage,
.tag-terracotta,
.section-eyebrow {
  color: var(--magnus-petroleo, #0B2F33) !important;
}

/* Card-link: "Leer →" y similares — sobre cream necesitan teal-deep o petróleo */
.card-link,
a.card-link {
  color: var(--magnus-petroleo, #0B2F33) !important;
  font-weight: 700;
}
.card-link:hover {
  color: var(--magnus-amarillo, #E8B33C) !important;
  text-decoration: underline;
}



/* Section petróleo: todos los textos default a cream */
.section-petroleo,
.section.section-petroleo,
section.section-petroleo {
  color: var(--magnus-cream, #F4EFE6) !important;
}
.section-petroleo h1,
.section-petroleo h2,
.section-petroleo h3,
.section-petroleo h4,
.section-petroleo h5,
.section-petroleo h6,
.section-petroleo p,
.section-petroleo li,
.section-petroleo span,
.section-petroleo dt,
.section-petroleo dd {
  color: var(--magnus-cream, #F4EFE6) !important;
}

/* Excepción: texto destacado/em/strong en sections petróleo → amarillo */
.section-petroleo em,
.section-petroleo h1 em,
.section-petroleo h2 em,
.section-petroleo h3 em,
.section-petroleo h4 em,
.section-petroleo .accent,
.section-petroleo strong em {
  color: var(--magnus-amarillo-glow, #E8B33C) !important;
}

/* Hero default — h1/h2 NO se modifica (deja que cada página decida) */
/* Solo aplicamos cream cuando el hero es explícitamente oscuro */
.hero[style*="background:var(--petroleo)"] h1,
.hero[style*="background:var(--petroleo)"] h2,
.hero[style*="background: var(--petroleo)"] h1,
.hero[style*="background: var(--petroleo)"] h2,
section.hero[class*="petroleo"] h1,
section.hero[class*="petroleo"] h2,
.section-petroleo .hero h1,
.section-petroleo .hero h2 {
  color: var(--magnus-cream, #F4EFE6) !important;
}

/* mc-result.highlight: fondo petróleo → labels y values cream */
.mc-result.highlight .mc-result-label,
.mc-result.highlight span.mc-result-label {
  color: rgba(244, 239, 230, 0.92) !important;
}
.mc-result.highlight .mc-result-value:not([class*="amarillo"]):not([class*="glow"]) {
  color: var(--magnus-amarillo-glow, #E8B33C) !important;
}
.mc-result.highlight .mc-result-value .unit {
  color: rgba(244, 239, 230, 0.85) !important;
}

/* Nav links siempre con buen contraste sobre nav petróleo */
.nav-links a,
nav .nav-links a {
  color: rgba(244, 239, 230, 0.95) !important;
}
.nav-links a:hover,
nav .nav-links a:hover {
  color: var(--magnus-amarillo-glow, #E8B33C) !important;
}

/* Botón ghost en hero — borde + texto cream legible */
.btn-ghost,
a.btn-ghost,
.hero a.btn-ghost,
section.hero a.btn-ghost {
  background: transparent !important;
  border: 1.5px solid rgba(244, 239, 230, 0.30) !important;
  color: var(--magnus-cream, #F4EFE6) !important;
}
.btn-ghost:hover,
.hero .btn-ghost:hover {
  background: rgba(244, 239, 230, 0.08) !important;
  border-color: var(--magnus-amarillo-glow, #E8B33C) !important;
  color: var(--magnus-amarillo-glow, #E8B33C) !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX · Contraste hero-lead — regla contextual al background
   
   Mandato: fondo oscuro → texto cream · fondo claro → texto petróleo · resalte → amarillo
   
   Estrategia: 
   - Hero default (petróleo): cream
   - Hero claro (.hero-light, /referidos/, /recursos/ con bg específico): petróleo
   - Lead fuera de hero: depende del contexto
   ════════════════════════════════════════════════════════════════ */

/* DEFAULT — NO aplicar reglas universales a hero-lead. 
   Cada página tiene su CSS local que define color contextual.
   Solo se sobreescribe en casos específicos abajo. */

/* Hero claro explícito — texto petróleo */
.hero.hero-light .hero-lead,
.hero.hero-light p.lead,
.hero.hero-cream .hero-lead,
.hero.hero-cream p.lead {
  color: var(--magnus-text-secondary-on-cream, #1F4248) !important;
}

/* Heros explícitamente oscuros (petróleo): leads en cream */
.section-petroleo .hero-lead,
.section-petroleo p.lead,
header.contratos-hero .lead,
.res-hero p.lead,
section.hero[style*="background:var(--petroleo)"] .hero-lead,
section.hero[style*="background:var(--petroleo)"] p.lead {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* Lead fuera de hero — depende contexto del padre */
.section-petroleo .lead,
.section-petroleo p.lead {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* En dark mode forzado por user, todo lead va a cream */
body.dark-mode .lead,
body.dark-mode .hero-lead,
body.dark-mode .section-lead,
body.dark-mode [class*="-lead"] {
  color: var(--aaa-cream-secondary, rgba(244,239,230,0.92)) !important;
}

/* Card descriptions */
.desc, .card-desc, .card-description, p.desc {
  color: var(--aaa-ink-secondary, #1F4248) !important;
}
.section-petroleo .desc,
.section-petroleo .card-desc,
.section-petroleo p.desc,
body.dark-mode .desc, 
body.dark-mode .card-desc {
  color: rgba(244,239,230,0.92) !important;
}

/* Card meta (date, category, etc) */
.card-date, .card-meta, .card-cat,
.card-hl, .ftag, .pct, .mono,
.timeline-when, .footer-contact-hours {
  color: var(--aaa-ink-secondary, #1F4248) !important;
}
body.dark-mode .card-date,
body.dark-mode .card-meta,
body.dark-mode .card-cat,
body.dark-mode .card-hl,
body.dark-mode .ftag,
body.dark-mode .pct,
body.dark-mode .mono,
body.dark-mode .timeline-when,
body.dark-mode .footer-contact-hours {
  color: var(--aaa-cream-secondary, rgba(244,239,230,0.85)) !important;
}

/* Eyebrow tonalidades en oscuro: cualquier elemento con padding-bg
   amarillo/teal sobre cream necesita texto petróleo bold */
[style*="background:rgba(232,179,60"] {
  color: var(--aaa-ink-on-cream, #0B2F33) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX · Panel EN/dark fixed - reposicionar para no tapar contenido
   ════════════════════════════════════════════════════════════════ */
.lang-toggle-wrap,
[class*="lang-toggle-wrap"],
.controls-fab,
[class*="floating-controls"] {
  /* Bajar opacidad cuando hay contenido detrás */
  z-index: 90 !important;
}

@media (max-width: 768px) {
  /* En mobile, el panel EN/dark queda en bottom-left donde no estorba tanto */
  .lang-toggle-wrap,
  [class*="lang-toggle-wrap"] {
    bottom: 16px !important;
    top: auto !important;
    left: 16px !important;
    /* Sin background opaco que tape */
    background: transparent !important;
  }
  /* Pero los botones individuales sí pueden tener bg para legibilidad */
  .lang-toggle-wrap > a,
  .lang-toggle-wrap > button,
  [class*="lang-toggle-wrap"] > a,
  [class*="lang-toggle-wrap"] > button {
    background: rgba(11, 47, 51, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX · Eyebrows dentro de cards oscuras
   ════════════════════════════════════════════════════════════════ */
[class*="card"][style*="petroleo"] .eyebrow,
[class*="card"][style*="background:#0B2F33"] .eyebrow,
[class*="card-dark"] .eyebrow,
.bg-dark .eyebrow,
.dark-card .eyebrow,
[style*="background:rgba(11,47,51"] .eyebrow,
[style*="background: rgba(11,47,51"] .eyebrow {
  color: var(--aaa-glow-on-petroleo, #E8B33C) !important;
  opacity: 1 !important;
}

/* Cards específicas con backgrounds oscuros - referido card */
.referral-card,
.referral-amount-card,
[class*="ref-card"],
.commission-card {
  /* Asegurar que TODO el texto adentro sea cream */
  color: var(--cream, #F4EFE6) !important;
}
.referral-card .eyebrow,
.referral-amount-card .eyebrow,
[class*="ref-card"] .eyebrow,
.commission-card .eyebrow {
  color: var(--copper-glow, #E8B33C) !important;
  opacity: 1 !important;
}
.referral-card p,
.referral-amount-card p,
[class*="ref-card"] p,
.commission-card p {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* Cualquier elemento con BG oscuro debe tener children con texto cream */
section[style*="background:var(--petroleo)"],
section[style*="background: var(--petroleo)"],
section[style*="background:#0B2F33"],
section[style*="background: #0B2F33"],
.bg-petroleo,
.bg-dark-section {
  color: var(--cream, #F4EFE6) !important;
}
section[style*="background:var(--petroleo)"] *:not(button):not(.btn):not(.btn-primary),
section[style*="background: var(--petroleo)"] *:not(button):not(.btn):not(.btn-primary),
section[style*="background:#0B2F33"] *:not(button):not(.btn):not(.btn-primary),
section[style*="background: #0B2F33"] *:not(button):not(.btn):not(.btn-primary) {
  color: inherit;
}

/* Card dark con eyebrow - generic */
.card-dark .eyebrow,
.dark-card-eyebrow {
  color: var(--copper-glow, #E8B33C) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIXES QUIRÚRGICOS · top fails detectados por audit
   ════════════════════════════════════════════════════════════════ */

/* FAIL 1: footer-careers-btn con white sobre cream (1.15:1)
   Cuando el fondo es claro, el botón debe usar texto petróleo */
body:not(.dark-mode) .footer-careers-btn,
.footer:not([style*="petroleo"]) .footer-careers-btn {
  /* Si el footer es claro */
  color: #FFFFFF !important;
  background: rgba(11, 47, 51, 0.92) !important;
  border-color: rgba(11, 47, 51, 0.40) !important;
}

/* FAIL 2: footer-contact-hours con #1F4248 sobre petróleo (1.31:1) */
.footer-contact-hours,
.footer .footer-contact-hours {
  color: rgba(244, 239, 230, 0.85) !important;
}
body.dark-mode .footer-contact-hours {
  color: rgba(244, 239, 230, 0.85) !important;
}

/* FAIL 3: Links color ámbar #E8B33C sobre blanco/cream (2-3:1)
   Cualquier <a> con copper-deep necesita ser AAA-accent (#E8B33C) */
a[style*="color:#E8B33C"],
a[style*="color: #E8B33C"],
a.copper-link,
.card-link,
[class*="card-link"] {
  color: var(--aaa-accent-on-cream, #E8B33C) !important;
}

/* FAIL 4: <strong> dentro de elementos con bg copper #E8B33C
   tiene color #E8B33C que es 1.72:1 sobre amarillo */
[style*="background:var(--copper)"] strong,
[style*="background: var(--copper)"] strong,
.bg-copper strong,
[class*="copper-bg"] strong {
  color: #5A3F0A !important;  /* Casi negro sobre amarillo, 7.5:1 */
}

/* FAIL 5: <strong> heredando color teal en bg teal (invisible 1:1) */
[style*="background:var(--teal)"] strong,
[style*="background: var(--teal)"] strong,
[style*="background:#1B6E6A"] strong,
.bg-teal strong,
[class*="teal-bg"] strong {
  color: #FFFFFF !important;  /* white sobre teal #1B6E6A = 4.5:1 large */
}

/* FAIL 6: <strong> dentro de hero/section con bg petróleo
   heredando color petróleo igual al fondo */
.hero strong,
section.hero strong,
[style*="background:var(--petroleo)"] strong,
[style*="background: var(--petroleo)"] strong,
section[style*="background:#0B2F33"] strong,
.bg-petroleo strong,
.hero-content strong {
  color: var(--cream, #F4EFE6) !important;
}

/* FAIL 7: span con bg copper y texto copper-deep (1.72:1)
   Ej: "UF 12.800" en hero, "unos UF 2.000 más barata" */
[style*="background:var(--copper)"] span,
[style*="background: var(--copper)"] span,
[style*="background:#E8B33C"] span,
.bg-copper span,
.copper-pill span {
  color: #5A3F0A !important;
}

/* FAIL 8: enlaces "Ver detalle" / "Ver comparativa detallada" con copper-deep
   sobre cream: necesitan accent oscuro */
a[class*="link-amber"],
a.link-cta,
a.detail-link,
a.see-more {
  color: var(--aaa-accent-on-cream, #E8B33C) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* FAIL 9: white text con opacidad < 0.6 sobre petróleo
   Aunque WCAG aún pasa, queda tenue. Subir mínimo a 0.85 */
[style*="color:rgba(245,240,230,0.5"],
[style*="color: rgba(245,240,230,0.5"],
[style*="color:rgba(255,255,255,0.4"],
[style*="color: rgba(255,255,255,0.4"],
[style*="color:rgba(255,255,255,0.45"],
[style*="color: rgba(255,255,255,0.45"],
[style*="color:rgba(255,255,255,0.5"],
[style*="color: rgba(255,255,255,0.5"] {
  color: rgba(244, 239, 230, 0.92) !important;
}

/* FAIL 10: spans con copper #E8B33C sobre blanco/cream (1.92:1) */
span[style*="color:var(--copper)"]:not([class*="bg-"]),
span[style*="color: var(--copper)"]:not([class*="bg-"]) {
  color: var(--aaa-accent-on-cream, #E8B33C) !important;
}

/* FAIL 11: .yes / "Sí" sobre amarillo - ratio 4.17 falla AAA normal */
.yes[style*="background"]:not([style*="background:transparent"]),
[style*="background:rgba(232,179,60"] .yes,
[style*="background:#E8B33C"] .yes {
  color: #054025 !important;  /* verde más oscuro 7.0:1 sobre amarillo */
}

/* Reglas defensivas universales */

/* Cualquier H3 dentro de hero oscuro debe ser cream */
.hero h3,
section.hero h3,
[style*="background:var(--petroleo)"] h3,
[style*="background: var(--petroleo)"] h3 {
  color: var(--cream, #F4EFE6) !important;
}

/* Override: cuando reward-card es claro (paper-warm bg), el h3 debe ser petróleo */
.hero .reward-card h3,
section.hero .reward-card h3,
.reward-card h3 {
  color: var(--petroleo, #0B2F33) !important;
}

/* Mono / monospace text */
.mono {
  color: var(--aaa-ink-secondary, #1F4248) !important;
}
body.dark-mode .mono,
[style*="background:var(--petroleo)"] .mono,
[style*="background: var(--petroleo)"] .mono {
  color: rgba(244, 239, 230, 0.85) !important;
}

/* Headers gris sobre blanco - ej rgb(107,114,128) sobre blanco = 4.83:1 */
[style*="color:rgb(107"],
[style*="color: rgb(107"],
[style*="color:#6B7280"],
[style*="color: #6B7280"] {
  color: #4A4A4A !important;  /* gris oscuro 9:1 sobre blanco */
}

/* SAGE green #5A6E4D sobre blanco = 5.52:1 - subir a AAA */
[style*="color:#5A6E4D"],
[style*="color: #5A6E4D"],
[style*="color:rgb(90"],
[style*="color: rgb(90"] {
  color: #2F4423 !important;  /* sage darker 8:1 */
}


/* ════════════════════════════════════════════════════════════════
   FIX · variantes específicas de eyebrow no deben ser pisadas
   por la regla global .eyebrow
   ════════════════════════════════════════════════════════════════ */

/* Reward / commission eyebrows en cards oscuras: glow sí o sí */
/* RESTRICCIÓN: solo si están en sections petróleo o cards oscuras explícitas */
.section-petroleo .reward-eyebrow,
.section-petroleo .ll-eyebrow,
.section-petroleo .amount-eyebrow,
.section-petroleo .commission-eyebrow,
.section-petroleo .card-eyebrow,
.hero-dark .reward-eyebrow,
.hero-dark .ll-eyebrow,
.hero-dark .amount-eyebrow,
.hero-dark .commission-eyebrow,
.hero-dark .card-eyebrow,
[class*="petroleo"] [class*="-eyebrow"]:not(.eyebrow):not(.section-eyebrow):not(.callback-eyebrow) {
  color: var(--magnus-amarillo, #E8B33C) !important;
  opacity: 1 !important;
}

/* En contexto de bg cream, los eyebrows con prefix también pueden ir 
   en color teal AAA */
body:not(.dark-mode) [class*="hero"]:not([style*="petroleo"]):not([style*="0B2F33"]) [class*="-eyebrow"]:not(.reward-eyebrow):not(.ll-eyebrow) {
  color: var(--aaa-eyebrow-on-cream, #0F4543) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX FINAL · Panel EN/dark fab posición
   En mobile, mover a bottom-left con transparencia y sombra para
   no tapar contenido del hero
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lang-toggle-wrap,
  [class*="lang-toggle"],
  .floating-controls,
  [class*="floating-control"] {
    position: fixed !important;
    left: 12px !important;
    bottom: 78px !important;  /* arriba del WhatsApp float que está en bottom-right */
    top: auto !important;
    right: auto !important;
    z-index: 95 !important;
    transform: none !important;
  }
  
  /* En desktop dejar como está */
}

@media (min-width: 769px) {
  .lang-toggle-wrap,
  [class*="lang-toggle"] {
    /* Posición original desktop */
  }
}


/* ════════════════════════════════════════════════════════════════
   PURGA · forzar amarillo NĀGO puro en todos los textos
   No usar ámbar/copper-deep como text color (se ve naranjo)
   ════════════════════════════════════════════════════════════════ */

/* Cualquier elemento con var(--copper) como TEXT color → AAA accent */
[style*="color:var(--copper)"]:not([style*="background:var(--copper)"]),
[style*="color: var(--copper)"]:not([style*="background: var(--copper)"]) {
  color: #E8B33C !important;
}

/* Cualquier color #E8B33C o variantes como text → AAA accent */
.copper-deep-text,
[class*="copper-text"]:not([class*="bg-"]) {
  color: #E8B33C !important;
}

/* Prevenir que cualquier link tenga color ámbar quemado */
a[style*="color:#E8B33C"],
a[style*="color: #E8B33C"],
a[style*="color:rgb(184"],
a[style*="color: rgb(184"] {
  color: #E8B33C !important;
}

/* Eyebrow tags como "INGRESOS" en blog cards: usar cobre AAA */
.tag,
.cat-tag,
.post-tag,
.card-cat,
.blog-tag,
.cat-pensiones,
[class*="cat-"]:not([class*="card-"]) {
  color: #E8B33C !important;
  background: rgba(232, 179, 60, 0.15) !important;
}
body.dark-mode .tag,
body.dark-mode .cat-tag,
body.dark-mode .post-tag,
body.dark-mode .card-cat,
body.dark-mode .blog-tag,
body.dark-mode [class*="cat-"]:not([class*="card-"]) {
  color: #E8B33C !important;
  background: rgba(232, 179, 60, 0.15) !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX BOTONES SIN CONTRASTE
   ════════════════════════════════════════════════════════════════ */

/* btn-ghost / btn-outline: cuando el fondo padre es OSCURO, texto cream */
.hero .btn-ghost,
.hero .btn-outline,
[class*="hero"] .btn-ghost,
[class*="hero"] .btn-outline,
[style*="background:var(--petroleo)"] .btn-ghost,
[style*="background:var(--petroleo)"] .btn-outline,
section[style*="background:#0B2F33"] .btn-ghost,
section[style*="background:#0B2F33"] .btn-outline,
.bg-petroleo .btn-ghost,
.bg-petroleo .btn-outline {
  color: #F4EFE6 !important;
  border: 1.5px solid rgba(244, 239, 230, 0.5) !important;
  background: rgba(244, 239, 230, 0.08) !important;
}

.hero .btn-ghost:hover,
.hero .btn-outline:hover,
[class*="hero"] .btn-ghost:hover,
[class*="hero"] .btn-outline:hover {
  background: rgba(232, 179, 60, 0.20) !important;
  border-color: #E8B33C !important;
  color: #E8B33C !important;
}

/* btn-ghost/outline en contexto claro (sobre cream) */
body:not(.dark-mode) section:not([style*="petroleo"]):not([class*="hero"]) .btn-ghost,
body:not(.dark-mode) section:not([style*="petroleo"]):not([class*="hero"]) .btn-outline {
  color: #0B2F33 !important;
  border: 1.5px solid rgba(11, 47, 51, 0.4) !important;
  background: transparent !important;
}

/* Por defecto: si no detectamos contexto, asumir fondo oscuro (más común en hero) */
.btn-ghost,
.btn-outline,
button.btn-outline,
a.btn-outline,
button.btn-ghost,
a.btn-ghost {
  /* fallback: detectar por luminosidad del padre via JS no es posible en CSS,
     así que usamos un default más seguro para NĀGO: fondo oscuro */
}

/* ftag (filtros en research) - tabs/filter chips */
.ftag,
.tag-filter,
.filter-chip,
[class*="ftag"] {
  color: #1F4248 !important;  /* gris oscuro AAA sobre cream */
  background: rgba(15, 69, 67, 0.10) !important;
  border: 1.5px solid rgba(15, 69, 67, 0.20) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.ftag.active,
.tag-filter.active,
.filter-chip.active {
  background: #0B2F33 !important;
  color: #F4EFE6 !important;
  border-color: #0B2F33 !important;
}
body.dark-mode .ftag,
body.dark-mode .tag-filter,
body.dark-mode .filter-chip {
  color: rgba(244, 239, 230, 0.85) !important;
  background: rgba(244, 239, 230, 0.08) !important;
  border-color: rgba(244, 239, 230, 0.20) !important;
}
body.dark-mode .ftag.active {
  background: #E8B33C !important;
  color: #0B2F33 !important;
  border-color: #E8B33C !important;
}


/* ════════════════════════════════════════════════════════════════
   NAV MOBILE · FIX DEFINITIVO AGRESIVO
   En mobile, ocultar TODO en el nav excepto logo, hamburger y nav-cta
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Ocultar todos los hijos directos del nav-inner que no sean elementos críticos */
  .nav-inner > *:not(.nav-logo):not(.nav-hamburger):not(.nav-cta):not(a.nav-cta):not(a.nav-logo):not(button.nav-hamburger),
  nav .nav-inner > div:not(.nav-logo):not(.nav-cta),
  nav .nav-inner > ul,
  nav .nav-right,
  nav .nav-left > div:not(:first-child),
  nav .nav-left > span,
  nav .nav-left > .sep,
  .nav-btn:not(.nav-cta),
  .nav-link {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Mantener visible el logo y hamburger */
  .nav-inner .nav-left,
  .nav-inner .nav-left a:first-child,
  .nav-inner .nav-logo,
  .nav-inner > a:first-of-type {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Hamburger debe estar visible y posicionado */
  .nav-hamburger,
  button.nav-hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    position: static !important;
    margin-left: auto !important;
  }
  
  /* Nav-cta visible */
  .nav-cta,
  a.nav-cta {
    display: inline-flex !important;
    visibility: visible !important;
  }
  
  /* Logo visible */
  .nav-logo,
  .nav-logo img,
  nav.nav img {
    display: inline-block !important;
    visibility: visible !important;
  }
}

/* Logo NĀGO: filter brightness + invert SIEMPRE para que sea blanco/cream
   independiente del background del nav */
.nav-logo img,
nav.nav img,
nav .nav-left a img,
header.nav img {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

/* Asegurar que el nav SIEMPRE tenga fondo oscuro NĀGO */
nav.nav,
.nav,
header.nav,
body > nav:first-of-type {
  background: #0B2F33 !important;
  background-color: #0B2F33 !important;
}


/* ════════════════════════════════════════════════════════════════
   NAV MOBILE · FIX PRECISO (override del fix definitivo)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Mostrar nav-left (donde está el logo) */
  nav.nav .nav-left,
  nav .nav-left,
  .nav-inner .nav-left {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
  }
  
  /* Pero ocultar elementos secundarios dentro de nav-left (sep, span "Research", etc) */
  nav .nav-left > .sep,
  nav .nav-left > span,
  nav .nav-left > div:not(.nav-logo) {
    display: none !important;
  }
  
  /* Mantener visible el primer <a> dentro de nav-left (es el logo) */
  nav .nav-left > a:first-child,
  nav .nav-left > a:first-child img {
    display: inline-block !important;
    visibility: visible !important;
  }
  
  /* Ocultar nav-right completo (links viejos) */
  nav .nav-right,
  .nav-inner .nav-right {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Logo NĀGO tamaño consistente */
  nav .nav-left img,
  nav.nav .nav-left a img {
    height: 28px !important;
    width: auto !important;
    max-width: none !important;
    filter: brightness(0) invert(1) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   FIX FINAL · Logo NĀGO SIEMPRE visible
   Algunos contenedores estaban siendo escondidos por reglas previas.
   Force visible + tamaño explícito al logo y todos sus padres.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Forzar visible: nav-left + su primer <a> + el img */
  nav.nav .nav-left,
  nav .nav-left {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  
  nav .nav-left > a,
  nav .nav-left > a:first-child,
  .nav-inner > a:first-of-type,
  .nav-logo {
    display: inline-flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    text-decoration: none !important;
  }
  
  /* El logo img mismo */
  nav.nav img,
  nav .nav-left img,
  .nav-logo img,
  nav.nav .nav-left a img,
  header.nav img {
    display: inline-block !important;
    visibility: visible !important;
    height: 28px !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: none !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    object-fit: contain !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   ULTIMO FIX · Logo wrapper <a> width
   ════════════════════════════════════════════════════════════════ */
nav .nav-left > a:first-child,
nav.nav .nav-left > a,
nav .nav-left a:has(img),
header.nav .nav-left a,
.nav-inner .nav-left a {
  display: inline-block !important;
  width: auto !important;
  min-width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

/* Image inside */
nav .nav-left > a > img,
nav .nav-left a img,
header.nav .nav-left a img {
  height: 28px !important;
  width: auto !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
}

/* =========================================================================
   v88 — Dark mode fix: copper-on-cream is too dark on dark backgrounds.
   In dark mode, inline styles with color:var(--copper-on-cream) yield #9E6B14
   on #051a1d = 3.90:1 (fails WCAG AA 4.5:1).
   We override the variable so all elements using it auto-correct in dark mode.
   ========================================================================= */
body.dark-mode {
  --copper-on-cream: #E8B33C !important;  /* fallback to bright copper (9.34:1 on dark) */
}

/* Catch inline styles that hardcode #9E6B14 (color-on-cream literal hex) */
body.dark-mode [style*="color:#9E6B14"],
body.dark-mode [style*="color: #9E6B14"],
body.dark-mode [style*="color:var(--copper-on-cream)"],
body.dark-mode [style*="color: var(--copper-on-cream)"] {
  color: #E8B33C !important;
}

/* Defensive: hardcoded petroleo text color (#0B2F33) over dark mode bg is unreadable */
body.dark-mode [style*="color:#0B2F33"],
body.dark-mode [style*="color: #0B2F33"],
body.dark-mode [style*="color:var(--petroleo)"],
body.dark-mode [style*="color: var(--petroleo)"] {
  color: #F4EFE6 !important;
}

/* =========================================================================
   v89 — Texto invisible en contenedores OSCUROS dentro de modo claro.
   Las reglas !important "*-on-cream" de arriba asumen fondo claro y se
   filtran a hijos que viven en contenedores petróleo (callback-footer,
   compare-card.featured/.rev, footer growth), produciendo texto oscuro
   sobre oscuro (ratio ~1, invisible). Aquí los re-volteamos a colores
   claros AAA sobre petróleo. Solo en modo claro: el modo oscuro ya está
   resuelto por las reglas body.dark-mode previas.
   Respeta el Mandato Santiago: el amarillo de marca sigue siendo #E8B33C.
   ========================================================================= */

/* --- callback-footer (fondo petróleo) --- */
body:not(.dark-mode) .callback-footer .callback-eyebrow {
  color: #E8B33C !important;            /* ámbar sobre pill transparente sobre petróleo ~7.2:1 */
  background: transparent !important;
}
body:not(.dark-mode) .callback-footer h3,
body:not(.dark-mode) .callback-footer h3 strong,
body:not(.dark-mode) .callback-footer p,
body:not(.dark-mode) .callback-footer label,
body:not(.dark-mode) .callback-footer strong {
  color: #F4EFE6 !important;            /* crema 12.6:1 sobre petróleo */
}
body:not(.dark-mode) .callback-footer h3 em {
  color: #E8B33C !important;
}

/* --- compare-card.featured / .rev (fondo petróleo) --- */
body:not(.dark-mode) .compare-card.featured .compare-status.good,
body:not(.dark-mode) .compare-card.featured .compare-status:not(.bad):not(.warn),
body:not(.dark-mode) .compare-card.featured .yes {
  color: #6FD9A8 !important;            /* verde claro 8:1 sobre petróleo */
}
body:not(.dark-mode) .compare-card.featured .compare-status.bad,
body:not(.dark-mode) .compare-card.featured .no {
  color: #FF9B8C !important;            /* rojo claro AAA sobre petróleo */
}
body:not(.dark-mode) .compare-card.featured .compare-status.warn {
  color: #E8B33C !important;
}
body:not(.dark-mode) .compare-card.featured strong,
body:not(.dark-mode) .compare-card.featured em,
body:not(.dark-mode) .compare-card.featured li,
body:not(.dark-mode) .compare-card.featured .compare-tag {
  color: #F4EFE6 !important;
}
body:not(.dark-mode) .compare-card.featured em.accent,
body:not(.dark-mode) .compare-card.featured .accent {
  color: #E8B33C !important;
}

/* --- footer growth bar (gradiente petróleo) --- */
body:not(.dark-mode) .callback-footer .magnus-growth-eyebrow,
.magnus-growth-eyebrow {
  color: #E8B33C !important;            /* ámbar sobre fondo oscuro */
}
.magnus-growth-success { color: #5DD9A7 !important; }
.magnus-growth-error { color: #FF9B8C !important; }

/* --- mini-calc: panel translúcido de tono medio (~rgb(174,185,184)).
   Ni crema ni oscuro: el texto teal-secundario quedaba en 5–6.8:1.
   Forzar petróleo puro sube a ~7:1 sobre ese tono medio. (solo claro) --- */
body:not(.dark-mode) .mini-calc .unit,
body:not(.dark-mode) .mc-result-value .unit,
body:not(.dark-mode) .mini-calc .mc-result-note,
body:not(.dark-mode) .mini-calc .mc-result-note strong,
body:not(.dark-mode) .mini-calc .mini-calc-sub,
body:not(.dark-mode) .mini-calc .mc-toggle-title,
body:not(.dark-mode) .mini-calc .mc-toggle-sub {
  color: #0B2F33 !important;
}

/* --- compare-status.bad sobre cream: rojo #A02020 daba 6.74, bajo AAA --- */
body:not(.dark-mode) .compare-card:not(.featured) .compare-status.bad,
body:not(.dark-mode) .compare-card:not(.featured) .no {
  color: #8A1818 !important;       /* rojo más oscuro ~7.3:1 sobre cream */
}

/* --- Badges numéricos (pill ámbar translúcido sobre fondo OSCURO):
   inline color:var(--copper). La regla "FAIL 10" los oscurecía como si
   estuvieran sobre cream → texto invisible (1.15:1). Sobre el pill oscuro
   el número va en crema (~8:1). Más específico que la regla FAIL 10. --- */
span[style*="background:rgba(232,179,60,0.22)"][style*="color:var(--copper)"],
span[style*="background:rgba(232, 179, 60, 0.22)"][style*="color:var(--copper)"] {
  color: #F4EFE6 !important;
}

/* --- Enlaces y texto con --copper-on-cream (#9E6B14, 3.66:1) sobre cream:
   bajar a ámbar oscuro AAA. Solo modo claro (en dark se remapea a #E8B33C). --- */
body:not(.dark-mode) a[style*="var(--copper-on-cream)"],
body:not(.dark-mode) [style*="color:var(--copper-on-cream)"],
body:not(.dark-mode) [style*="color: var(--copper-on-cream)"] {
  color: #6B4A0E !important;
}

/* --- mc-toggle (panel medio) marginal 6.78 → petróleo puro --- */
body:not(.dark-mode) .mini-calc .mc-toggle-title,
body:not(.dark-mode) .mc-toggle-title,
body:not(.dark-mode) .mc-toggle-sub {
  color: #0B2F33 !important;
}

/* --- Banner cookies: blanco @0.6 (6.08) → crema casi opaca sobre petróleo --- */
.cookie-banner p,
.mcb-text,
.mcb-text p,
.mcb-text span,
[class*="cookie"] p {
  color: rgba(244, 239, 230, 0.95) !important;
}

/* --- Texto/acentos sage-teal (var(--teal) #1B6E6A, 4.6–5.5:1) como TEXTO
   sobre cream o pills claros → teal oscuro AAA. Mismo principio que el ámbar:
   color de marca legible como texto. Solo modo claro. --- */
body:not(.dark-mode) [style*="color:var(--teal"],
body:not(.dark-mode) [style*="color: var(--teal"] {
  color: #0F4543 !important;     /* teal oscuro ~7.5:1 sobre cream */
}

/* --- Enlaces dentro de respuestas FAQ (copper heredado #9E6B14, 3.66:1) --- */
body:not(.dark-mode) .faq-a a {
  color: #6B4A0E !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}