/* ==========================================================================
   NOVIS — THEME ATREVIDA · HÍBRIDO  (Dirección C · "Dark top / Light body")
   --------------------------------------------------------------------------
   Overlay sobre theme-atrevida.css. Se activa con html[data-theme="hybrid"].

   Concepto: el BLOQUE SUPERIOR de cada vista (NAVBAR + HERO) va en clave navy
   (royal deep navy, nunca negro), y de ahí hacia abajo el CUERPO conserva el
   tema claro (paper). Es la combinación de lo mejor del claro y el oscuro:
   entrada con impacto + lectura larga cómoda.

   Estrategia (sin tocar el claro ni el oscuro → cero regresión):
   - Re-declaramos los TOKENS navy SÓLO en los contenedores del bloque superior
     (:is(.nav, .hero, .article-hero)). Como las custom properties heredan, los
     descendientes de esos contenedores toman la paleta oscura y el resto de la
     página (secciones hermanas) sigue con la paleta clara de :root.
   - Los service-blocks (.sb-atrevida) tienen tokens LOCALES (--paper/--ink/…):
     flipeamos esos tokens sólo en su primer bloque `> .hero`.
   - Portamos el puñado de reglas del tema oscuro que traen color HARDCODEADO en
     el hero/nav (overlay de imagen, grids, gradientes de texto, paneles del nav,
     drawer móvil), re-scopeadas al bloque superior.
   Cargado DESPUÉS de theme-atrevida[-dark].css → gana por orden + prefijo.

   Paleta navy reutilizada 1:1 de theme-atrevida-dark.css (misma identidad).
   ========================================================================== */

/* ===== 0) TOKENS navy — SÓLO en los contenedores del bloque superior =====
   Igual que en dark, llevan !important porque el claro declara la paleta con
   !important en :root. Como acá el selector apunta directo al contenedor (no a
   :root/html), el valor propio del elemento gana al heredado por :root, y los
   descendientes heredan navy. */
html[data-theme="hybrid"] :is(.nav, .hero, .article-hero, .page-hero) {
  /* Fondos royal navy */
  --bg:        #0C1E55 !important;
  --bg2:       #14297A !important;
  --surface:   rgba(255,255,255,0.06) !important;
  --surface2:  rgba(255,255,255,0.09) !important;
  --surface3:  rgba(255,255,255,0.13) !important;
  --border:        rgba(255,255,255,0.14) !important;
  --border-light:  #5AE0EA !important;

  /* Texto claro sobre navy */
  --text:       #F1F4FB !important;
  --text-dim:   #C5CEE6 !important;
  --text-faint: #AEB8D6 !important;

  /* Acentos suavizados para contraste sobre navy */
  --teal:        #5BA7FF !important;
  --teal-soft:   #7FBEFF !important;
  --teal-dim:    rgba(91,167,255,0.16) !important;
  --teal-glow:   rgba(0,195,220,0.40) !important;
  --turquoise:   #2FD19A !important;
  --turquoise-soft: #7CE8C2 !important;
  --cyan-electric: #5AE0EA !important;
  --cyan-neon:   #7CE8C2 !important;
  --aqua:        #5AE0EA !important;
  --brand-electric: #6BA8FF !important;
  --blue:        #5BA7FF !important;
  --blue-dim:    rgba(91,167,255,0.12) !important;
  --blue-sap:    #5BA7FF !important;

  /* Semánticos del nav (la regla ganadora de .nav usa var(--nav-glass) → basta
     redeclararlos acá para volcar la barra a navy en todos los estados). */
  --card: #17306B !important;
  /* Opacidad alta a propósito: el nav es navy en TODOS los estados. Con 0.72 la
     barra translúcida dejaba ver el cuerpo claro en páginas sin hero oscuro
     (assessment, boletines, contacto) y se veía slate/lavada. Casi-opaca lee
     navy consistente sobre hero oscuro y sobre cuerpo claro por igual. */
  --nav-glass: rgba(12,30,85,0.94) !important;
  --nav-glass-scrolled: rgba(9,22,66,0.96) !important;
  --nav-border: rgba(255,255,255,0.13) !important;
  --nav-shadow: 0 10px 34px rgba(0,0,0,0.45) !important;
  --hero-paper-grad: linear-gradient(120deg, #0C1E55 0%, #102463 42%, #14297A 100%) !important;

  /* `color` base del bloque claro se computa en body/.sp-* con el --text de
     :root (oscuro) ANTES de este flip, así que los hijos del hero que NO
     re-declaran color (h1 de opera/assessment, sufijos +/%/< de los stats)
     heredarían tinta oscura → invisible sobre navy. Re-fijamos color aquí:
     con --text ya volcado a claro, todo lo que herede queda legible; los
     gradientes conservan su -webkit-text-fill-color: transparent. */
  color: var(--text) !important;
}

/* ==========================================================================
   1) NAV — barra navy + paneles/dropdowns/drawer en clave oscura
   ========================================================================== */
/* Logo: blanquear el wordmark azul (text-only) por filtro. */
html[data-theme="hybrid"] .nav-logo { filter: brightness(0) invert(1); }
/* Botón ghost del nav (Diagnóstico): borde claro sobre navy. */
html[data-theme="hybrid"] .btn-nav-ghost { border-color: rgba(255,255,255,0.28) !important; }
html[data-theme="hybrid"] .btn-nav-ghost:hover { border-color: #5AE0EA !important; color: #F1F4FB !important; }

/* Dropdowns / mega-menu / region selector → paneles navy.
   Heredan --text claro de .nav, así que sólo hace falta el fondo/borde/sombra. */
html[data-theme="hybrid"] :is(.mega-menu, .insights-menu, .submenu) {
  background: rgba(15,32,92,0.98) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5) !important;
}
html[data-theme="hybrid"] .rs-menu {
  background: #12266B !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
}
/* Chips de alianzas + mega-link rich + iconos (Nav.astro). */
html[data-theme="hybrid"] .al-chip { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: #C5CEE6 !important; }
html[data-theme="hybrid"] .al-chip:hover { background: rgba(91,167,255,0.16) !important; border-color: #5BA7FF !important; color: #F1F4FB !important; }
html[data-theme="hybrid"] .mega-link-rich:hover { background: rgba(255,255,255,0.05) !important; }
html[data-theme="hybrid"] .mega-link-rich .ml-ico { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.14) !important; }
html[data-theme="hybrid"] .mega-link-rich:hover .ml-ico { background: rgba(91,167,255,0.16) !important; border-color: #5BA7FF !important; }

/* Drawer móvil (sibling del nav → no hereda los tokens del nav): navy explícito. */
html[data-theme="hybrid"] .nav-mobile {
  background: rgba(9,22,66,0.98) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="hybrid"] .nav-mobile .nav-mobile-link {
  color: #C5CEE6 !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
html[data-theme="hybrid"] .nav-mobile .nav-mobile-link:hover { color: #F1F4FB !important; }
html[data-theme="hybrid"] .nav-mobile .nav-mobile-sub { color: #AEB8D6 !important; border-left-color: rgba(91,167,255,0.35) !important; }
html[data-theme="hybrid"] .nav-mobile .nav-mobile-cta { color: #F1F4FB !important; border-color: rgba(255,255,255,0.3) !important; }
/* "N" del logo móvil: azul → claro. */
html[data-theme="hybrid"] .nav-logo::before { color: #7FBEFF !important; -webkit-text-fill-color: #7FBEFF !important; }

/* Móvil: la barra full-width fuerza fondo paper con `html body .nav` (alta
   especificidad). Reafirmamos navy para hybrid en ese breakpoint. */
@media (max-width: 768px) {
  html[data-theme="hybrid"] .nav,
  html[data-theme="hybrid"] .nav.scrolled { background: rgba(9,22,66,0.98) !important; }
}

/* ==========================================================================
   2) HERO — clave navy (imagen/overlay/grids/gradientes de texto)
   ========================================================================== */
/* Overlay de imagen paper → navy (texto legible a la izquierda, imagen a la
   derecha). Mismos stops que el tema oscuro. */
html[data-theme="hybrid"] .hero-bg {
  filter: saturate(0.95) opacity(0.55) brightness(0.85) !important;
}
html[data-theme="hybrid"] .hero-bg::after {
  background: linear-gradient(90deg,
    rgba(12,30,85,0.95) 0%,
    rgba(12,30,85,0.80) 40%,
    rgba(12,30,85,0.42) 70%,
    rgba(12,30,85,0.00) 100%) !important;
}
html[data-theme="hybrid"] body[data-page="nosotros"] .hero-bg {
  filter: saturate(1) opacity(0.72) brightness(0.9) !important;
}
html[data-theme="hybrid"] body[data-page="nosotros"] .hero-bg::after {
  background: linear-gradient(90deg,
    rgba(12,30,85,0.95) 0%,
    rgba(12,30,85,0.80) 40%,
    rgba(12,30,85,0.20) 56%,
    rgba(12,30,85,0.00) 100%) !important;
}
/* Grid del home: líneas claras sobre navy. */
html[data-theme="hybrid"] body[data-page="home"] .hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
}
/* Blog hero: grid claro + glow aqua. */
html[data-theme="hybrid"] body[data-page="blog"] .hero {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 600px 380px at 90% 30%, rgba(0,195,220,0.22), transparent 65%) !important;
}
/* Hub servicios: grid claro + radiales de acento + overlay ::before/::after. */
html[data-theme="hybrid"] body[data-page="servicios"] .hero {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 40% 62% at 90% 10%, rgba(47,209,154,0.30), transparent 62%),
    radial-gradient(ellipse 44% 58% at 99% 52%, rgba(59,122,255,0.28), transparent 62%),
    radial-gradient(ellipse 38% 52% at 70% 92%, rgba(0,195,220,0.24), transparent 60%) !important;
}
html[data-theme="hybrid"] body[data-page="servicios"] .hero::before { opacity: 0.35 !important; }
html[data-theme="hybrid"] body[data-page="servicios"] .hero::after {
  background: linear-gradient(to bottom,
    rgba(12,30,85,0.25) 0%, rgba(12,30,85,0.0) 50%, rgba(12,30,85,0.25) 100%) !important;
}
/* Acento gradiente del título del hub servicios (span.accent entra por set:html). */
html[data-theme="hybrid"] body[data-page="servicios"] .hero h1 .accent {
  background: linear-gradient(110deg, #5BA7FF, #5AE0EA 50%, #7CE8C2) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Gradientes de texto del hero (.em del home, .val de stats, em del título de
   artículo) → versión clara legible sobre navy. */
html[data-theme="hybrid"] :is(.hero, .article-hero) :is(em, .em, h1 em, .accent),
html[data-theme="hybrid"] body[data-page="home"] .hero-stat .val {
  background: linear-gradient(100deg, #5BA7FF 0%, #5AE0EA 55%, #7CE8C2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ==========================================================================
   3) SERVICE-BLOCK HERO — sólo el primer bloque `.sb-atrevida > .hero`
   Flip de los tokens LOCALES del componente (los demás bloques quedan claros).
   ========================================================================== */
html[data-theme="hybrid"] .sb-atrevida > .hero {
  --ink:        #F1F4FB;
  --ink-2:      #C5CEE6;
  --ink-3:      #A9B6D6;
  --ink-4:      #8B97B5;
  --line:       #2E54BD;
  --line-soft:  rgba(255,255,255,0.10);
  --paper:      #0C1E55;
  --paper-2:    #14297A;
  --white:      #17306B;            /* "tarjeta blanca" (hero-side-card) → surface navy */
  --brand:      #5BA7FF;
  --brand-deep: #7FBEFF;
  --brand-soft: #A9CCFF;
  --accent-grad: var(--grad-bav-soft);
}
/* Título sólido (has-accent) → texto claro; el <em> conserva gradiente (via --accent-grad). */
html[data-theme="hybrid"] .sb-atrevida > .hero h1,
html[data-theme="hybrid"] .sb-atrevida > .hero h1.has-accent {
  color: #F1F4FB !important;
  -webkit-text-fill-color: #F1F4FB !important;
}
html[data-theme="hybrid"] .sb-atrevida > .hero h1.has-accent em {
  -webkit-text-fill-color: transparent !important;
}
/* Kicker con gradiente dentro del hero. */
html[data-theme="hybrid"] .sb-atrevida > .hero :is(.grad, .grad-text, .accent-grad-text) {
  background: var(--grad-bav-soft) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   4) ARTICLE HERO — extras que en claro traen color hardcodeado
   ========================================================================== */
html[data-theme="hybrid"] .article-hero .meta-cat {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(91,167,255,0.35) !important;
}

/* ==========================================================================
   5) ALIANZAS — su hero usa grid propio (.al-hero-grid) con líneas oscuras
   que desaparecen sobre navy → líneas claras. (El resto de .sp-alianzas queda
   claro: es cuerpo.) El contenedor del hero de alianzas es .al-hero.
   ========================================================================== */
html[data-theme="hybrid"] .sp-alianzas .al-hero {
  --al-ink:   #F1F4FB;
  --al-ink2:  #AFC2EA;
  --al-body:  #C5CEE6;
  --al-muted: #AEB8D6;
  --al-line:  rgba(255,255,255,0.14);
  --al-elec:  #5BA7FF;
  --al-teal:  #5AE0EA;
  --al-grad:  linear-gradient(135deg,#5BA7FF,#5AE0EA);
  /* El fondo del hero usa var(--al-paper): volcarlo a navy o el texto claro
     de arriba queda invisible sobre paper. */
  --al-paper: #0C1E55 !important;
  --al-paper2:#14297A !important;
}
html[data-theme="hybrid"] .sp-alianzas .al-hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important;
}

/* ==========================================================================
   6) WIZARDS (assessment / autodiagnóstico) — NO llevan hero navy.
   Su "hero" es un bloque angosto centrado dentro de un .container (max-width),
   sin fondo full-bleed. La regla base `.hero{background:var(--bg)}` + el flip
   lo pintaría como un recuadro navy suelto. Estas vistas son flujos-herramienta:
   se dejan en clave clara (como el tema claro) y basta el nav oscuro arriba.
   Revertimos el .hero a paper: fondo transparente + tinta oscura.
   ========================================================================== */
html[data-theme="hybrid"] .sp-assessment-madurez-ia .hero {
  background: transparent !important;
  --text:     #08183A !important;
  --text-dim: #4A5E8A !important;
  color: var(--text) !important;
}

/* ==========================================================================
   7) BOTONES SECUNDARIOS / GHOST sobre hero navy
   El borde tomaba --border (rgba blanco 0.14): casi invisible en reposo sobre
   el navy → sólo aparecía en hover (border-light aqua). Les damos un estado de
   reposo visible: relleno translúcido + borde blanco 0.32 + texto blanco. En
   híbrido el navy vive sólo en nav+hero, así que basta scopearlo al hero y
   cubre todas las páginas. Los heros claros de wizard (assessment) sólo usan
   botones primary → no se tocan. Los primarios (gradiente) quedan intactos.
   ========================================================================== */
html[data-theme="hybrid"] :is(.hero, .page-hero, .article-hero) :is(
  .btn-ghost, .btn-secondary, .btn-hero.s, .btn-hero.secondary, .btn-cta.s, .btn-cta-secondary
) {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.32) !important;
  color: #fff !important;
}
html[data-theme="hybrid"] :is(.hero, .page-hero, .article-hero) :is(
  .btn-ghost, .btn-secondary, .btn-hero.s, .btn-hero.secondary, .btn-cta.s, .btn-cta-secondary
):hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: #5AE0EA !important;
  color: #fff !important;
}