/* =========================================================
   contenido.css — NEXT INNOVA (Insights/Capítulos)
   Versión: 1.0.4 (corrección tipografía + marca + hero + footer + números)
   ========================================================= */

:root{
  /* Marca */
  --ni-blue:  #0A2846;     /* AZUL PROFUNDO (estándar de marca) */
  --ni-blue-2:#0f2a3a;
  --ni-emerald:#18c29c;

  /* UI */
  --ink:#0b1220;
  --muted:#5b6776;
  --paper:#ffffff;
  --surface:#f6f8fb;
  --border: rgba(15, 23, 42, .10);

  --radius: 18px;
  --shadow: 0 14px 36px rgba(2, 8, 20, .12);
  --shadow-soft: 0 10px 24px rgba(2, 8, 20, .08);

  /* Tipografía (solo Inter) */
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --container: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.65;
}

.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

/* Topbar (simple, por si no hereda estilos del sitio) */
.site-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,40,70,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(24,194,156,.14);
  border: 1px solid rgba(24,194,156,.35);
  color:#eafff9;font-weight:800;
}
.brand-name{letter-spacing:.08em;font-weight:700;font-size:.92rem;opacity:.95}
.topbar-nav{display:flex;gap:18px;align-items:center}
.topbar-nav a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:.95rem}
.topbar-nav a:hover{color:rgba(140, 244, 221, 0.55);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 10px 14px;border-radius: 999px;
  text-decoration:none;font-weight:800;
  border: 1px solid rgba(255,255,255,.14);
}
.btn-primary{
  background: linear-gradient(135deg, rgba(24,194,156,1), rgba(24,194,156,.82));
  color: #ebf2f0;
  border-color: rgba(24,194,156,.55);
  box-shadow: 0 10px 24px rgba(24,194,156,.16);
}
.btn-primary:hover,
.btn-primary:focus {filter:brightness(1.02);  color: var(--ni-navy) !important;}

/* =========================================================
   HERO — corrección: imagen visible y sobria (sin duplicar hero-image)
   ========================================================= */
.page-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background-color: var(--ni-blue);
}

.insight-hero{
  min-height: 520px;
  display:flex;
  align-items:flex-end;

  /* Imagen + overlays (controlados) */
  background-image:
    linear-gradient(180deg, rgba(10,40,70,.20) 0%, rgba(10,40,70,.62) 60%, rgba(10,40,70,.86) 100%),
    radial-gradient(1200px 520px at 18% 28%, rgba(24,194,156,.16), rgba(24,194,156,0) 58%),
    radial-gradient(1000px 520px at 86% 18%, rgba(255,255,255,.09), rgba(255,255,255,0) 62%),
    var(--hero-image);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Capa extra: viñeta + micro-textura (sin volver a colocar la imagen) */
.page-hero.insight-hero::before{
  content:"";
  position:absolute;
  inset:0;

  /* Viñeta suave + grano leve */
  background:
    radial-gradient(1200px 520px at 50% 30%, rgba(0,0,0,.18), rgba(0,0,0,.55) 78%),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);

  background-size:
    auto,
    34px 34px,
    34px 34px;

  opacity: .55; /* permite ver el detalle de la imagen */
  pointer-events:none;
  z-index:0;
}

/* “Levanta” detalle de la imagen sin volverla chillona */
.page-hero.insight-hero{
  filter: saturate(1.06) contrast(1.06) brightness(1.06);
}

.hero-inner{
  position:relative;
  padding: 72px 0 44px;
  color:#fff;
  z-index:1;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,40,70,.30);
  backdrop-filter: blur(10px);
  margin-bottom: 14px;
}
.hero-badge .badge{font-weight:900;letter-spacing:.12em;font-size:.78rem}
.hero-badge .badge-ghost{opacity:.86;font-weight:800;letter-spacing:.10em;font-size:.78rem}
.hero-badge .dot{opacity:.65}

/* Tipografía HERO: Inter (consistencia de marca) */
.hero-title{
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(2.3rem, 4.2vw, 4.0rem);
  margin: 0 0 8px;
}
.hero-subtitle{
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 2.0vw, 1.9rem);
  margin: 0 0 14px;
  opacity: .96;
}
.hero-lead{
  max-width: 78ch;
  font-size: 1.05rem;
  color: rgba(255,255,255,.88);
  margin: 0 0 22px;
}

.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.metric{
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,40,70,.22);
  backdrop-filter: blur(10px);
}
.metric-k{
  font-size:.78rem;
  letter-spacing:.10em;
  font-weight:900;
  opacity:.78;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.metric-v{font-weight:700;line-height:1.25;color: rgba(255,255,255,.92)}

/* Layout */
.insight-main{padding: 34px 0 64px}
.insight-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items:start;
}
@media (max-width: 980px){
  .hero-metrics{grid-template-columns: 1fr}
  .insight-grid{grid-template-columns: 1fr}
  .insight-aside{order:-1}
}

/* Article surface */
.insight-article{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 34px 34px;
}
@media (max-width: 700px){
  .insight-article{padding: 22px 18px}
}

/* Sections / typography rhythm */
.insight-section{padding: 10px 0 20px}
.insight-section + .insight-section{
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 24px;
}

/* Titulares: Inter (igual portal) */
.insight-article h2{
  font-family: var(--font-sans);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: rgba(11,18,32,.96);
}
.insight-article h3{
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.insight-article p{margin: 0 0 12px;color: rgba(11,18,32,.92)}
.muted{color: var(--muted)}
.kicker{
  font-size: 1.08rem;
  font-weight: 700;
  color: rgba(11,18,32,.86);
}

/* Pull quote */
.pull-quote{
  margin: 18px 0 18px;
  padding: 16px 18px;
  border-left: 4px solid rgba(24,194,156,.85);
  border-radius: 12px;
  background: rgba(24,194,156,.06);
  color: rgba(11,18,32,.92);
  font-weight: 650;
}

/* Cards */
.card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 780px){
  .card-grid{grid-template-columns: 1fr}
}
.card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px 16px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 10px 18px rgba(2,8,20,.05);
}
.card h3{font-weight:850}
.card p{margin:0;color: rgba(11,18,32,.82)}

/* Callouts */
.callout{
  margin-top: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #f7fafc;
}
.callout-brand{
  /* Más sobrio y premium */
  background: linear-gradient(180deg, rgba(24,194,156,.09), rgba(24,194,156,.03));
  border-color: rgba(24,194,156,.22);
}
.callout h4{margin:0 0 6px;font-weight:900;letter-spacing:-.01em}
.callout p{margin:0;color: rgba(11,18,32,.84)}

/* Lists */
.numbered{padding-left: 18px;margin: 0}
.numbered li{margin: 10px 0;color: rgba(11,18,32,.88)}
.numbered strong{color: rgba(11,18,32,.98)}

.two-col{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 720px){
  .two-col{grid-template-columns: 1fr}
}
.mini-card{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  padding: 14px 14px;
  background: #fff;
}

/* =========================================================
   NÚMEROS (pilares y steps) — unificados para que no “parezcan otra web”
   ========================================================= */
/* ===========================
   FIX: Pilares (números) consistentes
   =========================== */
.pillar{
  display:flex;
  gap: 14px;
  padding: 14px 0;
  align-items: flex-start;
}

.pillar-tag{
  /* Fuerza geometría */
  width: 48px;
  height: 48px;
  min-width: 48px;          /* evita que se “encoja” */
  flex: 0 0 48px;           /* bloquea shrink/grow */
  display: grid;
  place-items: center;

  /* Tipografía numérica consistente */
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums; /* “1” ocupa el mismo ancho visual que “4” */
  font-feature-settings: "tnum" 1;

  /* Estética (como el 4, cuadrado redondeado premium) */
  border-radius: 16px;
  color: rgba(255,255,255,.96);
  background: linear-gradient(180deg, rgba(10,40,70,.96), rgba(10,40,70,.76));
  border: 1px solid rgba(24,194,156,.28);
  box-shadow: 0 10px 22px rgba(10,40,70,.14);
}

.pillar-body h3{
  margin: 2px 0 6px;
  font-size: 1.18rem;
}

.pillar-body p{
  margin: 0;
  color: rgba(11,18,32,.84);
}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap: 12px;margin-top: 10px}
.step{
  display:flex;gap: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
.step-badge{
  width: 48px;height: 48px;
  border-radius: 16px;
  display:grid;place-items:center;
  font-weight: 950;
  color: rgba(255,255,255,.96);

  background: linear-gradient(180deg, rgba(10,40,70,.96), rgba(10,40,70,.76));
  border: 1px solid rgba(24,194,156,.20);
  box-shadow: 0 10px 22px rgba(5, 30, 55, 0.14);
}
.step-content h3{margin: 2px 0 6px}
.step-content ul{margin: 8px 0 0;padding-left: 18px}
.step-content li{margin: 6px 0;color: rgba(11,18,32,.84)}

/* KPIs */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 780px){
  .kpi-grid{grid-template-columns: 1fr}
}
.kpi{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  padding: 14px 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}
.kpi-label{
  font-size:.78rem;letter-spacing:.12em;
  font-weight: 950;text-transform:uppercase;
  color: rgba(10,40,70,.72);
}
.kpi-value{font-size: 1.05rem;font-weight: 900;margin: 6px 0 2px}
.kpi-note{color: rgba(5, 14, 32, 0.78);font-size:.95rem}

/* Offer band */
.offer-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(24,194,156,.22);
  background: linear-gradient(90deg, rgba(24,194,156,.09), rgba(255,255,255,1));
}
.offer-band h3{margin:0 0 4px;font-size: 1.15rem}
.offer-band p{margin:0}

/* Aside / TOC */
.insight-aside{position: sticky; top: 86px}
.toc{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px;
}
.toc-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.toc a{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(11,18,32,.80);
  text-decoration:none;
  font-weight: 700;
}
.toc a:hover{
  background: rgba(24,194,156,.08);
  color: rgba(11,18,32,.96);
}

.aside-card{
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px;
}
.aside-card h4{margin:0 0 6px;font-weight:950}

/* =========================================================
   FOOTER — marca (oscuro), no blanco
   ========================================================= */
.site-footer{
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--ni-blue);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  color: rgba(255,255,255,.78);
}
.site-footer .muted{color: rgba(255,255,255,.74)}
@media (max-width: 720px){
  .footer-inner{flex-direction:column}
}
/* ===========================
   PATCH BRAND + TYPO (Inter-only, logo real)
   Pegar al FINAL de contenido.css
   =========================== */

/* 1) Tipografía: Inter en TODO el capítulo (sin serif) */
:root{
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* fuerza consistencia */
}

body.insight-body{
  font-family: var(--font-sans);
}

/* Fuerza Inter también en títulos (evita “Fraunces” heredado) */
.hero-title,
.hero-subtitle,
.insight-article h2,
.insight-article h3{
  font-family: var(--font-sans) !important;
}

/* Ajuste C-level: menos “editorial”, más ejecutivo */
.hero-title{ letter-spacing: -0.03em; }
.insight-article h2{ letter-spacing: -0.02em; }

/* 2) Logo real en topbar */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.brand-logo{
  height: 34px;
  width: auto;
  display:block;
}

/* Si por algún motivo quedó el antiguo brand-mark, lo ocultamos sin romper */
.brand-mark{ display:none !important; }
.brand-name{ display:none !important; }

/* 3) Color de marca (azul profundo oficial) */
:root{
  --ni-blue: #0A2846; /* tu instrucción */
  --ni-blue-2:#0f2a3a;
}

/* Topbar alineada al azul profundo */
.site-topbar{
  background: rgba(10,40,70,.86) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Footer coherente con marca (evita fondo blanco “cortado”) */
.site-footer{
  background: rgba(10,40,70,.96) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.site-footer .muted{
  color: rgba(255,255,255,.72) !important;
}

/* ---------- FOOTER: integrado con el cierre dark ---------- */
.footer{
  background: #071627;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 18px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.70);
  font-weight: 800;
}

.footer-brand img{
  width: 34px;
  height: auto;
  opacity: .95;
}

.footer-links{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links a{
  color: rgba(255,255,255,.70);
  text-decoration:none;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}

.footer-links a:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}






/* ===========================
   PATCH LOGO TOPBAR (FIX)
   Pegar al FINAL de contenido.css
   =========================== */

/* Topbar: altura y alineación más “portal” */
.site-topbar{
  /* mantiene tu estilo, solo asegura presencia */
  min-height: 64px;
}

.topbar-inner{
  /* más aire y centrado perfecto */
  padding: 14px 0 !important;
  align-items: center !important;
}

/* Logo: tamaño real y legible */
.brand{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
}

.brand-logo{
  height: 30px !important;   /* <-- este es el cambio clave */
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
  /* micro realce en fondos oscuros, muy sutil */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}

/* Si tu PNG tiene mucho “aire” interno, esto ayuda a que no se vea perdido */
@media (max-width: 720px){
  .brand-logo{ height: 36px !important; }
}

/* =========================================================
   ADD-ON (Capítulos 2–4) — componentes nuevos (copy/paste)
   Pegar al FINAL de contenido.css
   ========================================================= */

/* Scorecard (bloque ejecutivo, muy C-Suite) */
.scorecard{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 980px){
  .scorecard{ grid-template-columns: 1fr; }
}

.scorecard-item{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  padding: 14px 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  box-shadow: 0 10px 18px rgba(2,8,20,.05);
}

.score-k{
  font-size: .76rem;
  letter-spacing: .14em;
  font-weight: 950;
  text-transform: uppercase;
  color: rgba(10,40,70,.68);
  margin-bottom: 8px;
}

.score-v{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(11,18,32,.94);
  margin-bottom: 6px;
}

.score-note{
  color: rgba(11,18,32,.78);
  font-size: .95rem;
}

/* (Opcional) Matiz por capítulo: solo cambia el “ghost” del badge para lectura rápida */
.chapter-2 .hero-badge .badge-ghost{ opacity: .88; }
.chapter-3 .hero-badge .badge-ghost{ opacity: .88; }
.chapter-4 .hero-badge .badge-ghost{ opacity: .88; }

/* Asegura consistencia tipográfica en “h4” dentro de mini-cards/callouts/asides */
.mini-card h4,
.aside-card h4,
.callout h4{
  font-family: var(--font-sans) !important;
  letter-spacing: -0.01em;
}

/* =========================================================
   PATCH CHAPTERS (2–4) + COMPONENTES C-LEVEL
   Pegar al FINAL de contenido.css
   ========================================================= */

/* 1) Variantes sutiles por capítulo (sin cambiar la marca) */
body.chapter-2 .hero-badge .badge-ghost { opacity: .92; }
body.chapter-3 .hero-badge .badge-ghost { opacity: .92; }
body.chapter-4 .hero-badge .badge-ghost { opacity: .92; }

/* Micro-acento por capítulo (muy sobrio) */
body.chapter-2 .pull-quote { border-left-color: rgba(24,194,156,.78); }
body.chapter-3 .pull-quote { border-left-color: rgba(24,194,156,.78); }
body.chapter-4 .pull-quote { border-left-color: rgba(24,194,156,.78); }

/* 2) Grid de “señales” (bloques ejecutivos) */
.signal-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 780px){
  .signal-grid{ grid-template-columns: 1fr; }
}
.signal{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  padding: 14px 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  box-shadow: 0 10px 18px rgba(2,8,20,.04);
}
.signal h3{
  margin: 0 0 6px;
  font-weight: 850;
  color: rgba(11,18,32,.96);
}
.signal p{
  margin: 0;
  color: rgba(11,18,32,.82);
}

/* 3) Tabla ejecutiva (comparativo rápido, C-level) */
.exec-table{
  margin: 14px 0 10px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 18px rgba(2,8,20,.04);
}
.exec-row{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  border-top: 1px solid rgba(15,23,42,.08);
}
.exec-row:first-child{ border-top: 0; }
.exec-row > div{
  padding: 12px 14px;
  color: rgba(11,18,32,.86);
}
.exec-row > div:first-child{
  background: rgba(10,40,70,.03);
  font-weight: 800;
  color: rgba(11,18,32,.90);
}
.exec-head > div{
  background: rgba(10,40,70,.86);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: -.01em;
}
.exec-head > div:first-child{
  background: rgba(10,40,70,.96);
}
@media (max-width: 720px){
  .exec-row{ grid-template-columns: 1fr; }
  .exec-row > div:first-child{ background: rgba(10,40,70,.03); }
}

/* 4) Afinado de lectura (más “C-level”) */
.insight-article p{
  font-size: 1.02rem;
}
.insight-article .kicker{
  font-size: 1.10rem;
}

/* =========================================================
   PATCH Capítulos 5–6 (micro-acento + bloques especiales)
   Pegar al FINAL de contenido.css
   ========================================================= */

/* Acentos muy sutiles por capítulo (sin cambiar marca) */
body.chapter-5 .hero-badge .badge-ghost{ opacity: .92; }
body.chapter-6 .hero-badge .badge-ghost{ opacity: .92; }

body.chapter-5 .callout-brand{ border-color: rgba(24,194,156,.26); }
body.chapter-6 .callout-brand{ border-color: rgba(24,194,156,.26); }

/* Bloque “Mensaje para mandos medios” más notorio (premium, sobrio) */
body.chapter-5 .callout{
  box-shadow: 0 10px 18px rgba(2,8,20,.04);
}

/* Ajuste de listas: más aire (lectura ejecutiva) */
.insight-article ol.numbered li{
  margin: 10px 0;
}

/* KPI: un poquito más “board-ready” */
.kpi-value{
  letter-spacing: -0.01em;
}

/* Títulos H2: consistencia y presencia */
.insight-article h2{
  font-size: 1.62rem;
}
/* =========================================================
   FIX ACCESIBILIDAD: Texto blanco en headers de tablas (Cap. 5 y 6)
   Pegar al FINAL de contenido.css
   ========================================================= */

/* Encabezados de tabla (thead th) siempre legibles sobre fondo oscuro */
.insight-article table thead th,
.insight-article table thead th *{
  color: rgba(255,255,255,.96) !important;
}

/* Si tu tabla usa fondo oscuro en thead, refuérzalo (opcional pero recomendado) */
.insight-article table thead th{
  background: rgba(10,40,70,.92) !important;  /* azul profundo */
  border-color: rgba(255,255,255,.10) !important;
}

/* (Opcional) si tienes filas/headers tipo "fila título" fuera de thead */
.insight-article .table-head,
.insight-article .table-head *{
  color: rgba(255,255,255,.96) !important;
}

/* =========================================================
   FIX: Header blanco legible para "tablas" tipo exec-table (Cap. 6)
   Pegar AL FINAL de capitulos/contenido.css
   ========================================================= */

.exec-table .exec-row.exec-head,
.exec-table .exec-row.exec-head > div{
  color: rgba(255,255,255,.96) !important;
}

/* Refuerza el fondo oscuro del header para contraste consistente */
.exec-table .exec-row.exec-head{
  background: rgba(10,40,70,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Si algún estilo heredado oscurece el texto dentro */
.exec-table .exec-row.exec-head *{
  color: rgba(255,255,255,.96) !important;
}

/* =========================================================
   CAPÍTULOS / INSIGHTS — MOBILE: ocultar columna derecha
   ========================================================= */
@media (max-width: 768px){
  .insight-aside{
    display: none !important;
  }
}

/* =========================================================
   CAPÍTULOS / INSIGHTS — MOBILE: ocultar columna derecha
   ========================================================= */
@media (max-width: 768px){
  .insight-aside{
    display: none !important;
  }
}

/* =========================================================
   CAPÍTULOS / INSIGHTS — MOBILE FIX DEFINITIVO
   Protege el layout móvil de capítulos 5 y 6
   ========================================================= */
@media (max-width: 980px){

  .insight-grid{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .insight-article{
    min-width: 0 !important;
    width: 100% !important;
  }

  .insight-aside{
    display: none !important;
  }

  .insight-main .container{
    width: min(100%, calc(100% - 24px)) !important;
  }

  .hero-metrics{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   CAPÍTULOS / INSIGHTS — MOBILE
   Decisión práctica: ocultar columna derecha y proteger layout
   ========================================================= */
@media (max-width: 768px){
  .insight-aside{
    display: none !important;
  }

  .insight-grid{
    grid-template-columns: 1fr !important;
  }

  .insight-article{
    min-width: 0 !important;
  }

  .insight-main{
    overflow-x: hidden !important;
  }
}
/* =========================================================
   FIX HERO CAPÍTULOS vs style.css global
   Fuerza colores y jerarquía del hero editorial
   ========================================================= */

.page-hero.insight-hero .hero-inner{
  color: #ffffff !important;
}

.page-hero.insight-hero .hero-title{
  color: #ffffff !important;
}

.page-hero.insight-hero .hero-subtitle{
  color: rgba(255,255,255,.96) !important;
}

.page-hero.insight-hero .hero-lead{
  color: rgba(255,255,255,.88) !important;
}

.page-hero.insight-hero .hero-badge,
.page-hero.insight-hero .hero-badge .badge,
.page-hero.insight-hero .hero-badge .badge-ghost,
.page-hero.insight-hero .hero-badge .dot{
  color: rgba(255,255,255,.92) !important;
}

.page-hero.insight-hero .metric-k{
  color: rgba(255,255,255,.78) !important;
}

.page-hero.insight-hero .metric-v{
  color: rgba(255,255,255,.94) !important;
}

/* ======================================================
   AJUSTE DE ESPACIADO CAPÍTULOS (reduce márgenes grandes)
   ====================================================== */

.page-hero.insight-hero{
  padding-top: 110px;
  padding-bottom: 70px;
}

/* reduce espacio entre hero y contenido */

.chapter-body{
  margin-top: 40px;
}

/* reduce espacio entre bloques de contenido */

.chapter-body section{
  margin-top: 40px;
  margin-bottom: 40px;
}

/* reduce padding interno de contenedores */

.chapter-body .container{
  padding-top: 0;
  padding-bottom: 0;
}

/* ======================================================
   FIX REAL: reducir altura excesiva del hero en capítulos
   ====================================================== */

.insight-hero{
  min-height: 320px !important;
}

.hero-inner{
  padding: 28px 0 18px !important;
}

@media (max-width: 980px){
  .insight-hero{
    min-height: 300px !important;
  }

  .hero-inner{
    padding: 28px 0 18px !important;
  }
}

/* =========================================
   FIX UX CAPÍTULOS
   Reduce distancia hero → contenido
   ========================================= */

.insight-main{
  padding-top: 12px !important;
  padding-bottom: 48px !important;
}