/* ============ NOVIS — THEME ATREVIDA (Dirección C) ============
   Prueba local: paleta alternativa "IA moderna".
   - Paper cálido (#FBFAF7)
   - Texto azul profundo (#08183A), no negro
   - Accent electric blue + aqua + mint green
   - Red como co-protagonista sparing
   - Tipografía Geist / Inter
   Para activar: localStorage.setItem('novis-theme','atrevida') + reload.
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Fondos — warm off-white + paper variants */
  --bg: #FBFAF7 !important;
  --bg2: #F2F3EE !important;
  --surface: rgba(0,87,255,0.04) !important;
  --surface2: rgba(0,87,255,0.07) !important;
  --surface3: rgba(0,87,255,0.10) !important;
  --border: rgba(8,24,58,0.09) !important;
  --border-light: rgba(0,87,255,0.3) !important;

  /* Texto — azul profundo sobre paper */
  --text: #08183A !important;
  --text-dim: #4A5E8A !important;
  --text-faint: #8B9AC0 !important;

  /* Accents — electric blue + aqua + mint green + red */
  --teal: #0057FF !important;
  --teal-soft: #3B7AFF !important;
  --teal-dim: rgba(0,87,255,0.06) !important;
  --teal-glow: rgba(0,87,255,0.18) !important;
  --turquoise: #2FD19A !important;
  --turquoise-soft: #7CE8C2 !important;
  --cyan-electric: #00C3DC !important;
  --cyan-neon: #5AE0EA !important;
  --aqua: #00C3DC !important;
  --brand-electric: #0057FF !important;
  --blue: #003AB3 !important;
  --blue-dim: rgba(0,58,179,0.10) !important;
  --blue-sap: #003AB3 !important;

  /* Gradients */
  --gradient-btn: linear-gradient(135deg, #0057FF 0%, #00C3DC 100%) !important;
  --gradient-brand: linear-gradient(135deg, #0057FF 0%, #2FD19A 100%) !important;

  /* ---- Tokens semánticos (costura de tema para dark) ----
     Defaults = valores actuales del claro → render idéntico. El tema oscuro
     (theme-atrevida-dark.css, scopeado a html[data-theme="dark"]) sólo re-declara
     estos tokens + los neutrales de arriba, sin re-listar reglas de componentes. */
  --card: #ffffff;                              /* superficie de card "pura": sharper cards, cert-badge, inputs, cta-path */
  --card-shadow-hover: 0 20px 48px rgba(8,15,36,0.08), 0 0 0 1px rgba(0,87,255,0.04);
  --nav-glass: rgba(251,250,247,0.85);          /* nav flotante glass */
  --nav-glass-scrolled: rgba(251,250,247,0.96);
  --nav-border: rgba(8,24,58,0.12);
  --nav-shadow: 0 10px 34px rgba(8,15,36,0.10);
  --footer-bg: #0C1E55;                         /* footer royal navy (igual en ambos temas) */
  --hero-paper-grad: linear-gradient(120deg, #FBFAF7 0%, #F0F7FD 40%, #E8F2FF 70%, #DCE6F0 100%);
  --logo-url: url('/noviscorp-text-only.svg');  /* wordmark; en dark → versión blanca */
  --mono-logo-filter: brightness(0);            /* logos monocolor a negro sobre paper; en dark → blanco */
}

body {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 400;
}

h1, h2, h3, h4, .section-title, .hero-title,
.footer-cta h2, .assess-left h2 {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.8px !important;
}

/* Nav — paper background */
.nav {
  background: rgba(251,250,247,0.95) !important;
  border-bottom-color: rgba(8,24,58,0.08) !important;
  backdrop-filter: blur(12px) !important;
}
.nav.scrolled {
  background: rgba(251,250,247,0.98) !important;
}
/* Logo swap to teal version (same as light theme) */
.nav-logo {
  font-size: 0 !important;
  background: url('/noviscorp.svg') no-repeat left center / auto 42px !important;
  -webkit-text-fill-color: transparent !important;
}
.nav-logo .logo-accent { display: none !important; }

/* Mega menus */
.mega-menu, .insights-menu, .submenu {
  background: rgba(251,250,247,0.98) !important;
  box-shadow: 0 24px 80px rgba(8,24,58,0.12) !important;
  border-radius: 16px !important;
}

/* RegionSelector dropdown — rounded Direction C iridescent */
.rs-menu {
  background: #FBFAF7 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(8,24,58,0.18) !important;
}
.rs-item { border-radius: 12px !important; }
.rs-trigger { border-radius: 50% !important; }

/* Buttons — solid + outline variants */
.btn-nav-primary,
.btn-hero.primary,
.btn-ia,
.btn-assess,
.btn-cta-primary {
  background: var(--teal) !important;
  color: #fff !important;
  border: 1px solid var(--teal) !important;
  border-radius: 10px !important;
}
.btn-nav-primary:hover,
.btn-hero.primary:hover,
.btn-ia:hover,
.btn-assess:hover,
.btn-cta-primary:hover {
  background: #003AB3 !important;
  border-color: #003AB3 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0,87,255,0.3) !important;
}

.btn-nav-ghost,
.btn-hero.secondary,
.btn-ghost,
.btn-apps {
  border-radius: 10px !important;
  border: 1px solid rgba(8,24,58,0.35) !important;
  background: transparent !important;
  color: var(--text) !important;
}
.btn-hero.secondary:hover,
.btn-ghost:hover,
.btn-apps:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}
/* Botones del design system .sb-atrevida (service-blocks, partner-aws): son pill
   (100px), no cuadrados como el ghost del nav. Mayor especificidad que la regla
   global .btn-ghost de arriba, así el CTA secundario del hero queda redondo. */
.sb-atrevida .btn { border-radius: 100px !important; }
.sb-atrevida .btn-ghost { border-color: var(--line) !important; color: var(--ink) !important; }
.sb-atrevida .btn-ghost:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

.btn-cta-submit {
  background: var(--teal) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* Cards — sharper + lift on hover */
.need-card,
.via-card,
.case-card,
.insight-card,
.cta-path {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
.need-card:hover,
.via-card:hover,
.case-card:hover,
.insight-card:hover,
.cta-path:hover {
  background: var(--card) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 8px 24px rgba(0,87,255,0.08) !important;
}

/* Sections */
.sap-section,
.assess-section,
.trust-section {
  background: var(--bg2) !important;
}
.unified-section,
.auto-section,
.gov-section {
  background: var(--bg) !important;
}

/* Gradient text (em) — electric blue to aqua */
h1 .em, .em {
  background: linear-gradient(135deg, #0057FF, #00C3DC) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Metrics */
.sap-metric .num,
.tn-value,
.case-result {
  background: linear-gradient(135deg, #0057FF, #00C3DC) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 600 !important;
}

/* Section tags — line accent */
.section-tag {
  color: var(--teal) !important;
}
.section-tag::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--teal);
  margin-right: 10px;
  vertical-align: middle;
}

/* Inputs */
.mini-input {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.mini-input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(0,87,255,0.15) !important;
}

/* Hero gradient backdrop */
body > .hero,
main > .hero,
#mainNav + .hero {
  background: var(--hero-paper-grad) !important;
}

/* Cert badges — fondo paper puro */
.cert-badge {
  background: var(--card) !important;
  border: 1px solid rgba(8,24,58,0.09) !important;
}

/* Footer — royal deep navy con Geist */
footer {
  background: var(--footer-bg) !important;
  color: #F1F4FB !important;
  border-top: none !important;
  position: relative !important;
  overflow: hidden !important;
}
footer::before {
  content: '' !important;
  position: absolute !important;
  top: -140px !important; right: -120px !important;
  width: 460px !important; height: 460px !important;
  background:
    radial-gradient(circle at 30% 40%, rgba(47,209,154,0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(0,195,220,0.16), transparent 60%) !important;
  filter: blur(30px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
footer .footer-top, footer .footer-bottom { position: relative !important; z-index: 1 !important; }
footer .footer-brand-block .footer-brand {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -0.8px !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
}
footer .footer-brand-block .logo-accent { display: none !important; }
footer .footer-brand-block p {
  color: #C5CEE6 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
footer .footer-col-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: #8B97B5 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}
footer .footer-col a { color: #C5CEE6 !important; }
footer .footer-col a:hover { color: #5AE0EA !important; }
footer .footer-bottom {
  border-top: 1px solid #2E54BD !important;
  padding-top: 24px !important;
}
footer .footer-copy {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  color: #8B97B5 !important;
}
footer .region-btn {
  background: transparent !important;
  border-color: #2E54BD !important;
  color: #C5CEE6 !important;
  border-radius: 100px !important;
}
footer .region-btn.active {
  border-color: #5AE0EA !important;
  color: #5AE0EA !important;
  background: rgba(90,224,234,0.1) !important;
}
footer .region-btn:hover { border-color: #5AE0EA !important; color: #FFFFFF !important; }

/* ===== Page heroes (insights, nosotros, servicios, diagnostico, etc) =====
   Keep hero images visible but swap navy overlay → paper overlay so text is
   legible on light theme. Hide pure-decorative navy line patterns. */
.hero-grid,
.hero-diagonal,
.hero-lines,
.hero-lines::before {
  display: none !important;
}
.hero { background: var(--bg) !important; }
/* Blog hero — textura de grid sutil + glow aqua (firma atrevida v2). Más
   específico que `.hero` de arriba, así re-aplica el fondo que ese reset borra. */
body[data-page="blog"] .hero {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(rgba(0,87,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,87,255,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 600px 380px at 90% 30%, rgba(0,195,220,0.12), transparent 65%) !important;
  background-size: 52px 52px, 52px 52px, auto !important;
}
/* Hero image fallback color → paper. Lift brightness/desaturate so the
   image reads as a soft watermark on paper bg instead of a dark slab. */
/* Mild filter para que fotos sigan legibles (nosotros, servicios, etc.) */
.hero-bg {
  background-color: var(--bg) !important;
  filter: saturate(0.85) opacity(0.65) !important;
}
/* Paper-tinted overlay (text-readable on left, image visible on right) */
.hero-bg::after {
  display: block !important;
  background: linear-gradient(
    90deg,
    rgba(251,250,247,0.94) 0%,
    rgba(251,250,247,0.78) 40%,
    rgba(251,250,247,0.40) 70%,
    rgba(251,250,247,0.00) 100%
  ) !important;
}
/* Nosotros: foto del equipo — mostrar MÁS imagen a la derecha. Sube la opacidad
   de la marca de agua y aclara el overlay paper del lado derecho. Los stops 0% y
   40% quedan idénticos al global → la zona del texto (izquierda) no cambia. */
body[data-page="nosotros"] .hero-bg {
  filter: saturate(0.92) opacity(0.82) !important;
}
body[data-page="nosotros"] .hero-bg::after {
  background: linear-gradient(
    90deg,
    rgba(251,250,247,0.94) 0%,
    rgba(251,250,247,0.78) 40%,
    rgba(251,250,247,0.18) 56%,
    rgba(251,250,247,0.00) 100%
  ) !important;
}
/* Insights hero image is navy+cyan composition — too dark to lift via filter.
   Hide it on light themes; nosotros/servicios keep the image. */
body[data-page="insights"] .hero-bg { display: none !important; }

/* Servicios uses .hero::before (image) + .hero::after (overlay) instead of
   .hero-bg pattern — mirror the same treatment. */
body[data-page="servicios"] .hero::before {
  filter: saturate(0.85) !important;
  opacity: 0.55 !important;
}
body[data-page="servicios"] .hero::after {
  background: linear-gradient(
    to bottom,
    rgba(251,250,247,0.2) 0%,
    rgba(251,250,247,0.0) 50%,
    rgba(251,250,247,0.2) 100%
  ) !important;
}
body[data-page="servicios"] .hero h1,
body[data-page="servicios"] .hero-sub { color: var(--text) !important; }
/* Hub servicios — grid sutil de fondo (firma atrevida v2, como el blog). Más
   específico que `.hero{background:var(--bg)!important}` para re-aplicar el fondo. */
body[data-page="servicios"] .hero {
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(rgba(0,87,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,87,255,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 40% 62% at 90% 10%, rgba(47,209,154,0.22), transparent 62%),
    radial-gradient(ellipse 44% 58% at 99% 52%, rgba(0,87,255,0.18), transparent 62%),
    radial-gradient(ellipse 38% 52% at 70% 92%, rgba(0,195,220,0.16), transparent 60%) !important;
  background-size: 52px 52px, 52px 52px, auto, auto, auto !important;
}
/* Acento gradiente del título. El <span class="accent"> entra por set:html →
   Astro NO lo scopea, así que la regla del componente no lo alcanza; se estiliza
   en global acá, y con !important gana al `color:var(--text)` de arriba. */
body[data-page="servicios"] .hero h1 .accent {
  background: linear-gradient(110deg, #0057FF, #00C3DC 50%, #2FD19A) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hero-title { color: var(--text) !important; }
.hero-sub strong { color: var(--text) !important; }
.hero-sonda,
.hero-eyebrow {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.hero-eyebrow span,
.hero-sonda-text { color: var(--text-dim) !important; }
.hero-sonda-text strong { color: var(--text) !important; }
/* El eyebrow NO es un pill (sí lo es en home) — sin caja ni borde, inline, solo
   texto. Si no, sale una franja azul full-width sobre el hero (caso blog/cat y
   servicios). El pill solo tiene sentido en el home. */
body[data-page="servicios"] .hero-eyebrow,
body[data-page="blog"] .hero-eyebrow {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Breadcrumbs SIN la línea teal de acento — esa es firma del eyebrow/section-tag.
   Si el breadcrumb la lleva queda idéntico al eyebrow apilado debajo (se veía
   "raro" en consultoría). El breadcrumb es navegación: texto plano mono uppercase. */
.hero-breadcrumb::before { display: none !important; }

/* Common in-content "white-on-dark" hardcodes */
.section-title,
.section-title em { color: var(--text) !important; }

/* ===== Cards & widgets w/ navy bg hardcoded → surface ===== */
.ac-format-tag,
.arch-node.n1, .arch-node.n2, .arch-node.n3, .arch-node.n4,
.ba-badge.before,
.bridge-bar,
.bridge-side.ia-side, .bridge-side.sap-side,
.bstat,
.case-header,
.channel-card, .channel-card:hover,
.cloud-card,
.cloud-sap-bar,
.combo-result,
.flow-box,
.form-context,
.fw-layer-content, .fw-layer-label,
.fw-layer.layer-sap .fw-pill, .fw-pill,
.fw-positioning,
.hero-visual,
.hv-node, .hv-sys,
.left-panel,
.liftshift-header, .liftshift-inner,
.ls-stat,
.pv-bar-track,
.region-pill,
.sc-sys-tag,
.story-card.full, .story-card.full:hover,
.topic-tab.active,
.via-for {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Sections w/ navy bg → bg2 (page bg variant) */
.certs-section,
.cta-section,
.framework-section,
.gov-section,
.unified-section,
.vias-section,
.why-section {
  background: var(--bg2) !important;
}

/* Thin separators that were navy → use border var */
.bridge-bar-sep,
.bridge-sep,
.filter-sep,
.reach-sep {
  background: var(--border) !important;
}

/* Decorative pseudos that overlay navy → tone down or hide */
.left-panel::before { display: none !important; }
/* Article hero — la imagen es acento lateral derecho (mask en CSS de la
   página). Solo overrideamos colores de texto y meta-cat para paper warm. */
.article-hero h1,
.article-hero .article-hero-text h1 {
  color: var(--text) !important;
}
.article-hero .breadcrumb,
.article-hero .breadcrumb a,
.article-hero .meta-date {
  color: var(--text-faint) !important;
}
.article-hero .meta-cat {
  background: var(--bg) !important;
  border: 1px solid rgba(0,87,255,0.20) !important;
  color: var(--teal) !important;
}
.article-hero .hero-thumb {
  border: 2px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(8,24,58,0.12) !important;
}

/* ===== Titles/labels w/ color:#fff hardcoded (in cards now light) ===== */
.adv-label,
.autodiag-title,
.bridge-side-title,
.case-col-title,
.cert-name,
.channel-label,
.cloud-name,
.combo-result-text,
.cta-card-title,
.flow-box-name,
.format-name,
.fw-layer-title,
.fw-result-text,
.hv-node-name,
.hv-sys-name,
.journey-name,
.liftshift-quote,
.proc-title,
.region-name,
.related-card-title,
.sc-quote,
.sc-title,
.via-title,
.why-title {
  color: var(--text) !important;
}

/* "strong" inside hero-sub already covered, but also other contexts */
.ls-stat-text strong,
.form-promise-text strong,
.hero-sub strong { color: var(--text) !important; }

/* Buttons with bg gradient KEEP white text — explicit so no override mistakes */
.btn-primary, .btn-start, .btn-next,
.btn-cta.p, .btn-hero.p,
.nav-cta,
.r-cta-btn, .r-email-btn,
.form-submit,
.nl-btn { color: #fff !important; }

/* ==================================================================
   HOME-ONLY full identity (Direction C · IA moderna)
   El resto del sitio queda con paleta solamente.
   ================================================================== */

/* Pill floating nav (Direction C signature) — EN TODO EL SITIO (no solo home),
   para experiencia consistente. Glass adaptativo: paper semi-transparente +
   blur + borde y sombra (un poco más marcados que el home original) → se lee
   bien tanto sobre secciones claras como sobre heros con foto. En móvil se
   resetea a barra full-width (ver Nav.astro @media). */
.nav {
  top: 16px !important;
  left: 24px !important;
  right: 24px !important;
  height: 64px !important;
  padding: 0 14px 0 28px !important;
  background: var(--nav-glass) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid var(--nav-border) !important;
  border-radius: 100px !important;
  box-shadow: var(--nav-shadow) !important;
}
.nav.scrolled {
  background: var(--nav-glass-scrolled) !important;
  box-shadow: 0 10px 28px rgba(8,15,36,0.14) !important;
  border-color: rgba(8,24,58,0.14) !important;
}
/* Logo normalizado en todo el sitio: wordmark text-only (sin el isotipo de
   puntos). Antes secciones usaban noviscorp.svg (3 puntos, descentrado). */
.nav-logo {
  width: 84px !important;
  height: 22px !important;
  padding: 0 !important;
  background: var(--logo-url) no-repeat left center / auto 22px !important;
  overflow: visible !important;
}

/* Chat tooltip — bg sólido oscuro definido en shared.css, sin override.
   Razón: la versión glass se veía ilegible sobre zonas oscuras del scroll. */
/* Botón Contacto del nav: estilo atrevida (gradiente + pill) en TODO el sitio,
   no solo en el home. Fuera del home antes quedaba sólido azul radius 10px. */
.btn-nav-primary {
  border-radius: 100px !important;
  background: linear-gradient(100deg, #0057FF 0%, #00C3DC 60%, #2FD19A 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,87,255,0.18) !important;
}
.btn-nav-primary:hover {
  box-shadow: 0 8px 22px rgba(0,195,220,0.32) !important;
  transform: translateY(-1px) !important;
}
.btn-nav-ghost { border-radius: 100px !important; }

/* Push hero content down so pill nav doesn't overlap */
body[data-page="home"] .hero { padding-top: 140px !important; }

/* Hero — Geist tight tracking */
body[data-page="home"] .hero .hero-title {
  font-size: clamp(42px, 6vw, 80px) !important;
  font-weight: 600 !important;
  letter-spacing: -3px !important;
  line-height: 0.96 !important;
  font-family: 'Geist', 'Inter', sans-serif !important;
}
body[data-page="home"] .hero-tag {
  letter-spacing: 1.5px !important;
  color: var(--teal) !important;
  font-weight: 500 !important;
}
body[data-page="home"] .hero-stat .val {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  background: linear-gradient(100deg, #0057FF, #00C3DC 60%, #2FD19A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 44px !important;
  letter-spacing: -1.6px !important;
}

/* Section title — títulos de sección en azul marca (maqueta 08jul: --brand-deep).
   Solo home + claro/híbrido; el override de dark restaura --text (ver dark.css). */
body[data-page="home"] .section-title {
  font-size: clamp(32px, 3.6vw, 56px) !important;
  letter-spacing: -2px !important;
  line-height: 1.04 !important;
  font-weight: 600 !important;
  color: var(--blue) !important;
}

/* Section backgrounds — alternate paper/cream for rhythm (Direction C signature) */
body[data-page="home"] #servicios,
body[data-page="home"] .cases-section,
body[data-page="home"] .insights-section {
  background: var(--bg2) !important;
}
body[data-page="home"] .ia-section,
body[data-page="home"] .trust-section { background: var(--bg) !important; }

/* need-card → eyebrow pattern, rounded modern, paper bg */
body[data-page="home"] .need-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--card) !important;   /* card blanca pura (maqueta 08jul), no paper cálido */
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  transition: all .3s !important;
}
body[data-page="home"] .need-card::before { display: none !important; }
body[data-page="home"] .need-card:hover {
  border-color: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 48px rgba(8,15,36,.08) !important;
}
/* Eyebrow como BANDA de header con fondo tint (maqueta 08jul: componente svc-cat).
   Full-bleed dentro del padding 36/32 de la card + acento por card (azul / aqua). */
body[data-page="home"] .need-card .nc-subtitle {
  order: -1 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--teal) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: -36px -32px 26px !important;
  padding: 13px 32px !important;
  background: var(--teal-dim) !important;
  border-bottom: 1px solid var(--border) !important;
}
/* Card 2 (Operación) → acento aqua, igual que acc-aqua de la maqueta. */
body[data-page="home"] .need-card:nth-child(2) .nc-subtitle {
  background: rgba(0,195,220,0.10) !important;
  color: #0098B0 !important;
}
body[data-page="home"] .need-card h3 {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  letter-spacing: -0.8px !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
}
body[data-page="home"] .need-card .nc-pill,
body[data-page="home"] .need-card .nc-sap-pill {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}
body[data-page="home"] .need-card .need-link {
  margin-top: 24px !important;
  color: var(--teal) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* via-card → numbered with gradient text */
body[data-page="home"] .via-card {
  background: var(--card) !important;   /* card blanca pura (maqueta 08jul), no crema */
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
}
body[data-page="home"] .via-card::before,
body[data-page="home"] .via-card:hover::before { display: none !important; }
body[data-page="home"] .via-card .via-num {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 48px !important;
  background: linear-gradient(100deg, #0057FF, #00C3DC 60%, #2FD19A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
}
body[data-page="home"] .via-card h4 {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 10px !important;
  color: var(--text) !important;
}
body[data-page="home"] .via-card p {
  font-size: 14px !important;
  color: var(--text-dim) !important;
  line-height: 1.6 !important;
}

/* case-card → editorial gradient metric, paper on cream section */
body[data-page="home"] .case-card {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
}
body[data-page="home"] .case-card::before,
body[data-page="home"] .case-card:hover::before { display: none !important; }
body[data-page="home"] .case-card .case-logo {
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  color: var(--text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  margin-bottom: 4px !important;
}
body[data-page="home"] .case-card .case-industry {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--text-faint) !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
}
body[data-page="home"] .case-card .case-result {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  background: linear-gradient(100deg, #0057FF, #00C3DC 60%, #2FD19A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -1.2px !important;
  line-height: 1.05 !important;
  margin-bottom: 12px !important;
}
body[data-page="home"] .case-card .case-result-label {
  font-size: 14px !important;
  color: var(--text-dim) !important;
  line-height: 1.5 !important;
}
body[data-page="home"] .case-card .case-tag {
  font-family: 'Inter', sans-serif !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  padding: 5px 12px !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body[data-page="home"] .case-card .case-tags {
  border-top: 1px solid var(--border) !important;
  padding-top: 20px !important;
  margin-top: auto !important;
}
body[data-page="home"] .case-card .case-link {
  color: var(--teal) !important;
  font-weight: 600 !important;
  margin-top: 12px !important;
}

/* trust-num → gradient stats */
body[data-page="home"] .trust-num .tn-value {
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 56px !important;
  background: linear-gradient(100deg, #0057FF, #00C3DC 60%, #2FD19A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
}
body[data-page="home"] .trust-num .tn-label {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  margin-top: 10px !important;
  font-family: 'Inter', sans-serif !important;
}

/* sap-metric → gradient match */
body[data-page="home"] .sap-metric .num {
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 48px !important;
  background: linear-gradient(100deg, #0057FF, #00C3DC 60%, #2FD19A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -2px !important;
}

/* insight-card → paper on cream section */
body[data-page="home"] .insight-card {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
}
body[data-page="home"] .insight-card .insight-cat {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--teal) !important;
}
body[data-page="home"] .insight-card h4 {
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

/* Buttons in home — pill rounded with gradient */
body[data-page="home"] .btn-hero.primary {
  background: linear-gradient(100deg, #0057FF 0%, #00C3DC 60%, #2FD19A 100%) !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 16px rgba(0,87,255,0.2) !important;
}
body[data-page="home"] .btn-hero.primary:hover {
  box-shadow: 0 10px 28px rgba(0,195,220,0.35) !important;
  transform: translateY(-2px) !important;
}
body[data-page="home"] .btn-hero.secondary,
body[data-page="home"] .btn-ia,
body[data-page="home"] .btn-assess,
body[data-page="home"] .btn-ghost { border-radius: 100px !important; }

/* Hero del home en tema claro: solo fade horizontal (ver theme-conservadora) */
body[data-page="home"] .hero-image {
  mask-image: linear-gradient(90deg, transparent 0%, transparent 4%, rgba(0,0,0,0.18) 14%, rgba(0,0,0,0.45) 24%, rgba(0,0,0,0.78) 34%, rgba(0,0,0,0.95) 42%, black 50%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 4%, rgba(0,0,0,0.18) 14%, rgba(0,0,0,0.45) 24%, rgba(0,0,0,0.78) 34%, rgba(0,0,0,0.95) 42%, black 50%) !important;
  mask-composite: source-over !important;
  -webkit-mask-composite: source-over !important;
}

/* Hero del home: patrón grid sutil electric blue en la zona del texto
   (Direction C) — ver theme-conservadora para racional. */
body[data-page="home"] .hero-grid {
  display: block !important;
  background-image:
    linear-gradient(rgba(0,87,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,87,255,0.06) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  mask-image: radial-gradient(ellipse 50% 70% at 25% 50%, black 0%, rgba(0,0,0,0.6) 50%, transparent 90%) !important;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 25% 50%, black 0%, rgba(0,0,0,0.6) 50%, transparent 90%) !important;
  opacity: 1 !important;
  animation: none !important;
}

/* ==================================================================
   OPERACIÓN AUTOMATIZADA (/servicios/opera) — mismo tratamiento quirúrgico
   que el home bajo atrevida claro/híbrido (maqueta 08jul, sistema de
   referencia): títulos de sección en azul marca (--brand-deep = --blue) y
   cards con fondo blanco puro (--card). Los acentos que ya trae la página
   —barra de gradiente superior en sap-cat/tier/gov, eyebrow teal— SE
   CONSERVAN (son "los acentos de la paleta de referencia"). El bloque
   destacado evo-card y el cta-banner mantienen su gradiente a propósito.
   --card es theme-aware: blanco en claro/híbrido, navy en dark (homologa
   con el resto de las cards dark). El título vuelve a --text en dark.css.
   ================================================================== */
body[data-page="opera"] .section-title { color: var(--blue) !important; }
body[data-page="opera"] :is(
  .uv-block, .outcome-card, .auto-card, .tier-card, .gov-level,
  .proof-box, .cert-pill, .sap-cat-card
) { background: var(--card) !important; }
/* Botones alineados al DS atrevida: pill (--r-pill = 100px) + degradé de marca
   de 3 paradas (grad-bav: azul→cyan→verde). Antes: radius 10-12 (cuadrados) y
   los primarios con --gradient-btn de solo 2 paradas (sin el verde). */
body[data-page="opera"] :is(.btn-hero, .btn-cta, .sap-all-link, .btn-primary, .btn-ghost) {
  border-radius: 100px !important;
}
body[data-page="opera"] :is(.btn-hero.p, .btn-cta.p, .sap-all-link) {
  background: linear-gradient(100deg, #0057FF 0%, #00C3DC 55%, #2FD19A 100%) !important;
  border: none !important;
  color: #fff !important;
}
/* "Evolución continua" (evo-card) → componente bridge-band del DS: navy PLANO
   (--d-bg) con un GLOW radial borroso detrás (azul a la izq, verde a la der,
   blur 22px) y SIN la barra de acento superior. Es la versión limpia de la
   maqueta. El ::before deja de ser la barrita de 3px y pasa a ser el glow;
   el contenido se eleva por encima con z-index. Aplica en los 3 temas. */
body[data-page="opera"] .evo-card {
  background: #0C1E55 !important;
  border: none !important;
  color: #fff !important;
}
body[data-page="opera"] .evo-card::before {
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: auto !important;
  filter: blur(22px) !important;
  background:
    radial-gradient(40% 90% at 12% 50%, rgba(0,87,255,0.40), transparent 60%),
    radial-gradient(40% 90% at 90% 50%, rgba(47,209,154,0.30), transparent 62%) !important;
  z-index: 0 !important;
}
body[data-page="opera"] .evo-card > * { position: relative !important; z-index: 1 !important; }
body[data-page="opera"] .evo-title { color: #fff !important; }
body[data-page="opera"] .evo-desc { color: rgba(255,255,255,0.82) !important; }
body[data-page="opera"] .evo-tag { color: #5AE0EA !important; }
body[data-page="opera"] .evo-bridge {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.90) !important;
}
body[data-page="opera"] .evo-bridge strong { color: #5AE0EA !important; }

/* ==================================================================
   CONSULTORÍA DE PROCESOS (/servicios/consultoria) — ídem: títulos azul
   marca + cards blancas (cap-card, product-card). El panel "Modelos…"
   (proof-card) queda como panel gris claro (--bg2) con cajas internas
   blancas (proof-metric/proof-visual), igual que la maqueta. Los steps
   01-04 (sin fondo, divisores) y los banners con gradiente no se tocan.
   ================================================================== */
body[data-page="consultoria"] .section-title { color: var(--blue) !important; }
/* Títulos de los 4 pasos: el componente no les asignaba color → heredaban el
   navy del texto base; el DS (.step-item h3) los pinta azul marca (--brand-deep).
   Misma tipografía/peso que ya tienen (Geist 600), sólo el color. */
body[data-page="consultoria"] .step h3 { color: var(--blue) !important; }
/* Título del panel "Modelos donde el mismo precio…" (proof-card h3): tampoco
   definía color → navy; en la maqueta es azul marca (heredaba el color de los
   h2 del DS). Mismo criterio que los otros títulos. */
body[data-page="consultoria"] .proof-card h3 { color: var(--blue) !important; }
body[data-page="consultoria"] :is(.cap-card, .product-card) { background: var(--card) !important; }
body[data-page="consultoria"] .proof-card { background: var(--bg2) !important; }
body[data-page="consultoria"] :is(.proof-metric, .proof-visual) { background: var(--card) !important; }
/* Botones: pill + degradé de marca 3 paradas (btn-cta-primary hoy es azul plano). */
body[data-page="consultoria"] :is(.btn, .btn-primary, .btn-ghost, .btn-cta-primary, .btn-cta-secondary) {
  border-radius: 100px !important;
}
body[data-page="consultoria"] :is(.btn-primary, .btn-cta-primary) {
  background: linear-gradient(100deg, #0057FF 0%, #00C3DC 55%, #2FD19A 100%) !important;
  border: none !important;
  color: #fff !important;
}
/* Enfoque "Cuatro pasos": panel blanco (maqueta). Hoy quedaba beige porque los
   steps son transparentes sobre el fondo --bg de la sección. Los divisores
   (border-right por step) siguen dentro del panel. */
body[data-page="consultoria"] .steps-grid {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
/* Eyebrow "Cómo estructuramos proyectos" (proof-tag): estaba en verde
   (turquoise) dentro de una píldora con fondo/borde → azul marca limpio, sin
   contenedor, igual que los demás eyebrows de sección. */
body[data-page="consultoria"] .proof-tag {
  color: var(--teal) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Gráfico "Evolución del modelo" → estilo limpio de la maqueta: barra APILADA
   tipo píldora por año (track redondeado, dos colores SÓLIDOS azul+verde sin
   bordes de acento) y sin divisores entre filas. Antes eran barras translúcidas
   con bordes teal/turquesa y líneas navy → se leía sucio. */
body[data-page="consultoria"] .pv-row { border-bottom: none !important; }
body[data-page="consultoria"] .pv-bar-track {
  background: var(--bg2) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
}
/* Segmentos SIN radius propio (tenían 6px → esquinas internas redondeadas que
   dejaban un "corte" entre azul y verde). El track pill + overflow:hidden ya
   redondea los extremos externos → unión central plana y continua. */
body[data-page="consultoria"] .pv-bar-inc { background: #3B7AFF !important; border-right: none !important; border-radius: 0 !important; }
body[data-page="consultoria"] .pv-bar-evo { background: #2FD19A !important; border-left: none !important; border-radius: 0 !important; }

/* ==================================================================
   BLOG (Direction C · IA moderna · Iridescent)
   Cards rounded 20px, hover con radial glow + lift, pills 100px,
   <em> con gradient blue→aqua→green, Geist tight tracking.
   ================================================================== */

/* Cards — rounded modern, paper bg, hover con glow + lift.
   isolation: isolate contiene el halo (z-index -1) sin que se filtre fuera. */
body[data-page="blog"] .lead-feature-card,
body[data-page="blog"] .featured-card,
body[data-page="blog"] .card,
body[data-page="blog"] .article-card,
body[data-page="blog"] .sidebar-block,
body[data-page="blog"] .article-cta,
body[data-page="blog"] .faq-item {
  background: var(--bg) !important;
  border-radius: 20px !important;
  isolation: isolate !important;
}
body[data-page="blog"] .lead-feature-card:hover,
body[data-page="blog"] .featured-card:hover,
body[data-page="blog"] .card:hover,
body[data-page="blog"] .article-card:hover {
  border-color: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* Radial glow halo on card hover — z-index -1 va atrás de todo el contenido
   sin necesitar tocar la posición de los hijos */
body[data-page="blog"] .card::after,
body[data-page="blog"] .article-card::after,
body[data-page="blog"] .lead-feature-card::after {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 220px !important;
  height: 220px !important;
  background: radial-gradient(circle, rgba(0,87,255,0.10) 0%, rgba(0,195,220,0.06) 40%, transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity .35s ease !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
body[data-page="blog"] .card:hover::after,
body[data-page="blog"] .article-card:hover::after,
body[data-page="blog"] .lead-feature-card:hover::after {
  opacity: 1 !important;
}

/* Lead-feature ribbon — gradient blue → aqua → green (signature) */
body[data-page="blog"] .lead-feature-card::before {
  width: 8px !important;
  background: linear-gradient(180deg, #0057FF 0%, #00C3DC 55%, #2FD19A 100%) !important;
  z-index: 1 !important;
}

/* Editorial-break — rounded, soft halo bg, gradient acento (pseudo ::before
   en lugar de border-image porque border-image NO respeta border-radius). */
body[data-page="blog"] .editorial-break {
  border-radius: 16px !important;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(0,87,255,0.06), transparent 60%),
    var(--bg2) !important;
  border-left: none !important;
  position: relative !important;
  overflow: hidden !important;
}
body[data-page="blog"] .editorial-break::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, #0057FF 0%, #00C3DC 55%, #2FD19A 100%) !important;
  pointer-events: none !important;
}
body[data-page="blog"] .editorial-break:hover {
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(0,87,255,0.10), transparent 60%),
    var(--bg2) !important;
  transform: translateX(2px) !important;
}

/* Titles — Geist tight, em con gradient */
body[data-page="blog"] .lf-title,
body[data-page="blog"] .card h3,
body[data-page="blog"] .article-body h2,
body[data-page="blog"] .article-hero-text h1,
body[data-page="blog"] .eb-title {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.8px !important;
}
body[data-page="blog"] .lf-title em,
body[data-page="blog"] .card h3 em,
body[data-page="blog"] .article-hero-text h1 em,
body[data-page="blog"] .eb-title em {
  background: linear-gradient(100deg, #0057FF 0%, #00C3DC 55%, #2FD19A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Pills / chips / badges → pill 100px */
body[data-page="blog"] .lf-recent-pill,
body[data-page="blog"] .cat-chip,
body[data-page="blog"] .tag-chip,
body[data-page="blog"] .recent-badge,
body[data-page="blog"] .region-switch,
body[data-page="blog"] .region-switch a,
body[data-page="blog"] .article-hero .meta-cat {
  border-radius: 100px !important;
}

/* Cat chips active — gradient soft fill */
body[data-page="blog"] .cat-chip.all,
body[data-page="blog"] .cat-chip.active {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background: rgba(0,87,255,0.06) !important;
}

/* Tag chip hover — brand color + soft bg */
body[data-page="blog"] .tag-chip:hover {
  background: rgba(0,87,255,0.06) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Sidebar items — rounded, hover con bg suave */
body[data-page="blog"] .sidebar-list a {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  border-bottom: none !important;
}
body[data-page="blog"] .sidebar-list a:hover {
  background: rgba(0,87,255,0.06) !important;
  color: var(--teal) !important;
}
body[data-page="blog"] .sidebar-list a.active {
  background: rgba(0,87,255,0.10) !important;
  color: var(--teal) !important;
  font-weight: 600 !important;
}

/* FAQ — rounded + brand color en summary, gradient hint en open */
body[data-page="blog"] .faq-item[open] {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(0,87,255,0.06) !important;
}
body[data-page="blog"] .faq-item summary {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* Article content — body Inter. El <em> del cuerpo = cursiva normal (como WP);
   NO degradado: el gradiente sobre em envolvía citas largas y se veía mal. Los
   acentos de marca los dan los títulos, no el cuerpo. */
body[data-page="blog"] .article-content {
  font-family: 'Inter', sans-serif !important;
}
body[data-page="blog"] .article-content em {
  font-style: italic;
}

/* Recent badge — pill 100px con bg paper + border brand */
body[data-page="blog"] .recent-badge {
  background: var(--bg) !important;
  border-color: rgba(0,87,255,0.25) !important;
  color: var(--teal) !important;
  border-radius: 100px !important;
}

/* Eyebrows — color brand */
body[data-page="blog"] .lf-eyebrow .lf-cat,
body[data-page="blog"] .editorial-break .eb-tag,
body[data-page="blog"] .article-hero .meta-cat {
  color: var(--teal) !important;
}

/* Search input — rounded pill */
body[data-page="blog"] .search-input {
  border-radius: 100px !important;
}

/* Buttons en blog (load-more) — pill */
body[data-page="blog"] .load-more-btn {
  border-radius: 100px !important;
}

/* ==================================================================
   RESTO DEL SITIO (Direction C · IA moderna · Iridescent — global)
   Cards/sections/pills/titles para páginas con clases custom.
   Specificity baja (sin body[data-page]) → home y blog ganan por scope.
   ================================================================== */

/* Cards globales — rounded 20px, paper bg, hover lift con sombra brand */
.path-card,
.way-card,
.area-card,
.team-card,
.cert-card,
.story-card,
.region-card,
.format-card,
.autodiag-card,
.arch-card,
.what-card,
.scenario-card,
.combo-side,
.cloud-card,
.inc-card,
.why-card,
.related-card,
.featured-card,
.article-card,
.wp-card,
.ams-feature,
.srv-card,
.mod-card,
.caso-card,
.ins-card,
.channel-card,
.compare-cell,
.check-item {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
}
.path-card:hover,
.way-card:hover,
.area-card:hover,
.team-card:hover,
.cert-card:hover,
.story-card:hover,
.region-card:hover,
.format-card:hover,
.autodiag-card:hover,
.arch-card:hover,
.what-card:hover,
.scenario-card:hover,
.cloud-card:hover,
.inc-card:hover,
.why-card:hover,
.related-card:hover,
.featured-card:hover,
.article-card:hover,
.wp-card:hover,
.srv-card:hover,
.mod-card:hover,
.caso-card:hover,
.ins-card:hover,
.channel-card:hover {
  border-color: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--card-shadow-hover) !important;
  background: var(--bg) !important;
}

/* Sections — alternancia paper / paper-warm para ritmo iridescente */
.story-section,
.regions-section,
.framework-section,
.bridge-section,
.featured-section,
.formats-section,
.includes-section,
.process-section,
.form-section,
.paths-section,
.case-section,
.checklist-section,
.what-section,
.before-after-section,
.scenarios-section,
.compare-section,
.arch-section,
.ams-block,
.casos-grid,
.insights-grid {
  background: var(--bg2) !important;
}
.team-section,
.advantage-section,
.liftshift-section,
.grid-section,
.autodiag-section,
.combo-section,
.srv-grid,
.mod-grid {
  background: var(--bg) !important;
}

/* Pills/badges/eyebrows — pill 100px */
.path-badge,
.stack-tag,
.case-badge,
.what-tag,
.ba-badge,
.sc-sys-tag,
.combo-logo-badge,
.card-tag,
.fw-pill,
.inc-output,
.proc-time,
.why-cert,
.cloud-cert,
.fc-cat,
.ac-cat,
.ac-format-tag,
.region-tag,
.region-pill,
.topic-tab,
.autodiag-tag,
.autodiag-stat,
.mod-badge,
.mod-proc,
.caso-tag,
.q-option,
.r-pill,
.r-dim-badge,
.intro-dim {
  border-radius: 100px !important;
}

/* Titles — Geist tight, em con gradient iridescente */
.team-name,
.cert-name,
.region-name,
.sc-title,
.ac-title,
.fc-title,
.format-name,
.autodiag-title,
.inc-title,
.proc-title,
.why-title,
.fw-layer-title,
.via-title,
.path-title,
.case-title,
.checklist-title,
.what-title,
.lp-title,
.rp-title,
.mod-cov-title,
.caso-name,
.arch-card h4,
.scenario-card .sc-title,
.combo-logo-name {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.8px !important;
}
.team-name em,
.cert-name em,
.sc-title em,
.fc-title em,
.autodiag-title em,
.inc-title em,
.proc-title em,
.why-title em,
.path-title em,
.case-title em,
.checklist-title em,
.what-title em,
.lp-title em,
.mod-cov-title em,
.caso-name em {
  background: linear-gradient(100deg, #0057FF 0%, #00C3DC 55%, #2FD19A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Buttons custom — pill 100px */
.btn-start,
.btn-next,
.btn-back,
.bot-cta,
.form-submit,
.mod-link,
.caso-link,
.autodiag-btn,
.filter-btn {
  border-radius: 100px !important;
}
.autodiag-btn.btn-opera,
.autodiag-btn.btn-ia {
  background: rgba(0,87,255,0.06) !important;
  border: 1px solid rgba(0,87,255,0.25) !important;
  color: var(--teal) !important;
}
.autodiag-btn.btn-opera:hover,
.autodiag-btn.btn-ia:hover {
  background: rgba(0,87,255,0.10) !important;
  border-color: var(--teal) !important;
  transform: translateY(-1px) !important;
}

/* Form options (assessments) — rounded modern */
.q-option {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.q-option:hover {
  border-color: var(--teal) !important;
  background: rgba(0,87,255,0.04) !important;
}

/* Extensión: cards que no estaban en el inventario inicial */
.svc-card,
.reason,
.partner,
.group {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
}
.svc-card:hover,
.reason:hover,
.partner:hover {
  border-color: var(--teal) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--card-shadow-hover) !important;
  background: var(--bg) !important;
}

/* Hero stats — sin cuadrito (tratamiento editorial iridescente):
   stats sueltos sobre el hero con tipografía Geist, sin cards.
   El número con gradient text (signature C). */
.hero-stat {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 24px 8px 0 !important;
}
.hero-stats {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 0 !important;
  gap: 28px !important;
}

/* Transición suave para hover de cards globales — evita el "salto" brusco */
.path-card, .way-card, .area-card, .team-card, .cert-card, .story-card,
.region-card, .format-card, .autodiag-card, .arch-card, .what-card,
.scenario-card, .combo-side, .cloud-card, .inc-card, .why-card,
.related-card, .featured-card, .article-card, .wp-card, .ams-feature,
.srv-card, .mod-card, .caso-card, .ins-card, .channel-card, .compare-cell,
.check-item, .svc-card, .reason, .partner {
  transition: border-color .6s cubic-bezier(.25,.46,.45,.94),
              background-color .6s cubic-bezier(.25,.46,.45,.94),
              transform .6s cubic-bezier(.25,.46,.45,.94),
              box-shadow .6s cubic-bezier(.25,.46,.45,.94) !important;
}

/* Cert-card: radius rounded Direction C */
.cert-card { border-radius: 20px !important; }
/* Panel certs, story-cards y demás contenedores de nosotros también rounded */
body[data-page="nosotros"] .certs-section { border-radius: 28px !important; }
.story-card,
.region-card,
.cta-inner,
.reach-bar,
.numbers-bar { border-radius: 20px !important; }

/* Logos monocolor en paper warm: invertir a negro. CETIUC sin filter. */
.cert-logo-mono { filter: var(--mono-logo-filter) !important; }
.cert-logo-cetiuc { filter: none !important; opacity: 1 !important; }