/* ==========================================================================
   spmo.css — NEXT INNOVA | Programa 3 · SPMO
   Estable y “publicable” (sin parches que se pisan)
   Compatible con tu HTML actual (clases spmo-hero-grid / spmo-hero-panel / etc.)
   ========================================================================== */

/* =========================
   0) Variables base
   ========================= */
:root{
  --ni-navy:#061a2b;
  --ni-navy-2:#08233a;
  --ni-emerald:#13b48e;
  --ni-white:#ffffff;
  --ni-ink:#0b1a2a;

  --w-text: rgba(255,255,255,.92);
  --w-soft: rgba(255,255,255,.78);
  --w-dim:  rgba(255,255,255,.64);

  --b-text: #0c1b2b;
  --b-soft: rgba(12,27,43,.72);

  --radius-xl: 22px;
  --radius-lg: 18px;

  --shadow-hero: 0 18px 50px rgba(0,0,0,.35);
  --shadow-card: 0 14px 28px rgba(0,0,0,.18);

  --border-w: rgba(255,255,255,.12);
  --border-b: rgba(11,26,42,.10);
}

/* Aislar estilos a body.spmo */
body.spmo{
  background:#fff;
  color: var(--b-text);
}

/* =========================
   1) HERO
   ========================= */
.spmo-hero{
  position:relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(26px, 5vw, 52px);
  color: var(--w-text);
  background-image: url("assets/img/frame-master-next-innova-SPMO.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
}

/* Overlay con contraste (sin “aplanar”) */
.spmo-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 650px at 88% 35%, rgba(19,180,142,.18), transparent 62%),
    linear-gradient(90deg, rgba(2,12,21,.86) 0%, rgba(2,12,21,.64) 52%, rgba(2,12,21,.46) 100%);
  pointer-events:none;
}

/* Textura sutil */
.spmo-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.16;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.spmo-hero .container{
  position:relative;
  z-index:2;
}

/* Grid 2 columnas */
.spmo-hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(14px, 2.6vw, 28px);
  align-items:start;
}

/* Copy */
.spmo-hero-copy .spmo-kicker{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
  font-size:12px;
  color: rgba(255,255,255,.70);
}

.spmo-hero-copy h1{
  margin: 10px 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(42px, 4.8vw, 54px); /* punto medio: titulo CEO-grade */
  max-width: 980px;
}

.spmo-hero-copy p{
  margin: 12px 0 16px;
  max-width: 880px;
  color: var(--w-soft);
  line-height: 1.45;
  font-size: clamp(16px, 1.5vw, 20px);
}

.spmo-hero-bullets{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px; /* un poco más de aire C-Level */
}

.spmo-hero-bullets li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--w-soft);
  line-height: 1.45;
}

/* === VIÑETA EJECUTIVA (estándar CEO) === */
.spmo-hero-bullets li::before{
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px; /* alineación óptica con texto */
  background: url("/assets/img/viñeta.png") no-repeat center / contain;
}

/* CTAs: asegurar hover legible (tu problema del texto que desaparece) */
.spmo-hero-ctas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Forzar contraste sin depender de style.css */
.spmo-hero-ctas .btn{
  color:#062233 !important;
  background: var(--ni-emerald) !important;
  border: 1px solid rgba(19,180,142,.65) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}
.spmo-hero-ctas .btn{
  color:#062233 !important;
  background: var(--ni-emerald) !important;
  border: 1px solid rgba(19,180,142,.65) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.spmo-hero-ctas .btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
  color:#062233 !important;
}


.spmo-hero-ctas .btn.btn-outline{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(19,180,142,.70) !important;
}
.spmo-hero-ctas .btn.btn-outline:hover{
  background: rgba(19,180,142,.12) !important;
  color: rgba(255,255,255,.96) !important;
}

/* Chips bajo CTAs: aire (tu texto pegado a botones) */
.spmo-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.spmo-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  font-size: 13px;
}

/* Panel derecha: padding real + no textos pegados */
.spmo-hero-panel{
  position:relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-w);
  background: linear-gradient(180deg, rgba(8,35,58,.62), rgba(6,26,43,.48));
  box-shadow: var(--shadow-hero);
  padding: 20px 20px 18px; /* aire real */
  backdrop-filter: blur(7px);
}

.spmo-ribbon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius:999px;
  border: 1px solid rgba(19,180,142,.22);
  background: rgba(19,180,142,.10);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.spmo-panel-top h3{
  margin: 12px 0 6px;
  font-size: 18px;
  letter-spacing:-.01em;
  color: var(--w-text);
}

.spmo-panel-top p{
  margin: 0 0 14px;
  color: var(--w-soft);
  line-height:1.45;
}

/* “metrics” del panel */
.spmo-panel-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

.spmo-metric{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 12px 12px 10px;
  min-height: 64px;
}

.spmo-metric .k{
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 4px;
}

.spmo-metric strong{
  display:block;
  font-size:15px;
  color: rgba(255,255,255,.94);
}

/* Responsive HERO */
@media (max-width: 980px){
  .spmo-hero-grid{ grid-template-columns: 1fr; }
  .spmo-panel-metrics{ grid-template-columns: 1fr; }
}

/* =========================
   2) Secciones: fondos y legibilidad
   ========================= */

/* Por defecto, NO forces texto blanco en secciones “light” */
.spmo-section.section.light{
  color: var(--b-text);
}

/* ENTREGABLES: fondo con frama visible + cards blancas legibles */
#entrega.spmo-section{
  position:relative;
  background-image: url("assets/img/frama-spmo-SOE.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
}

#entrega.spmo-section::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,12,21,.68) 0%, rgba(2,12,21,.60) 100%);
  pointer-events:none;
}
#entrega.spmo-section .container{ position:relative; z-index:2; }

/* Kicker / títulos en #entrega van en blanco (sobre fondo oscuro) */
#entrega .spmo-kicker,
#entrega .section-title,
#entrega .section-subtitle{
  color: var(--w-text);
}
#entrega .section-subtitle{ color: var(--w-soft); }

/* Cards dentro de #entrega: SIEMPRE texto oscuro (tu problema de blanco) */
#entrega .card{
  background: rgba(255,255,255,.92) !important;
  color: var(--b-text) !important;
  border: 1px solid rgba(11,26,42,.10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
#entrega .card h3{ color: var(--b-text) !important; }
#entrega .card p,
#entrega .card li,
#entrega .card .muted{
  color: rgba(12,27,43,.78) !important;
}
#entrega .card .list{ margin-top: 10px; }

/* =========================
   3) MODELO: Flujo robusto + cards legibles
   ========================= */

/* Títulos modelo en modo “claro” (fondo blanco) */
#modelo .section-title,
#modelo .section-subtitle,
#modelo .spmo-kicker{
  color: var(--b-text);
}

/* Flujo (tu TEMA 4): estable en desktop, elegante en mobile */
.spmo-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 12px;
}

.spmo-flow-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(6,52,82,.06);
  border: 1px solid rgba(6,52,82,.12);
  color: var(--b-text);
  font-weight: 800;
  white-space: nowrap;
}

.spmo-arrow{
  color: rgba(12,27,43,.55);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

/* Mobile: apilar para CEOs (lectura inmediata) */
@media (max-width: 640px){
  .spmo-flow{
    flex-direction: column;
    align-items: stretch;
  }
  .spmo-arrow{
    transform: rotate(90deg);
    align-self: center;
  }
  .spmo-flow-item{
    justify-content: flex-start;
  }
}

/* Cards del modelo: forzar legibilidad si algún estilo global las “blanquea” */
#modelo .card{
  background: rgba(255,255,255,.96) !important;
  color: var(--b-text) !important;
  border: 1px solid rgba(11,26,42,.10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
#modelo .card h3{ color: var(--b-text) !important; }
#modelo .card p,
#modelo .card li,
#modelo .card .muted{ color: rgba(12,27,43,.78) !important; }

/* Statement */
.spmo-statement{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,26,42,.10);
  background: linear-gradient(180deg, rgba(6,52,82,.06), rgba(19,180,142,.06));
  padding: 18px 18px;
  box-shadow: var(--shadow-card);
}
.spmo-statement h3{ margin:0 0 6px; }
.spmo-statement p{ margin:0; color: rgba(12,27,43,.78); }

/* =========================
   4) “Qué cambia…” (tu TEMA 2): callout y mini-cards
   ========================= */
.spmo-callout{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,26,42,.10);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-card);
  padding: 18px 18px;
  color: var(--b-text);
}

.spmo-callout h3{ margin:0 0 8px; color: var(--b-text); }
.spmo-callout p{ margin:0; color: rgba(12,27,43,.78); }

/* El “cuadro dañado” lo convierto en 3 mini-cards claras */
.spmo-mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.spmo-mini-item{
  border-radius: 16px;
  border: 1px solid rgba(6,52,82,.12);
  background: rgba(6,52,82,.05);
  padding: 12px 12px;
}

.spmo-mini-item .t{
  display:block;
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(12,27,43,.60);
  margin-bottom: 4px;
  font-weight: 800;
}

.spmo-mini-item strong{
  display:block;
  font-size: 15px;
  color: var(--b-text);
}

@media (max-width: 980px){
  .spmo-mini{ grid-template-columns: 1fr; }
}

/* =========================
   5) OPERACIÓN REAL: fondo + ritmos con badge marca
   ========================= */
#operacion.spmo-section{
  position:relative;
  background-image: url("assets/img/cadencia-ejecutiva.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
  color: var(--w-text);
}

#operacion.spmo-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 28%, rgba(19,180,142,.18), transparent 62%),
    linear-gradient(180deg, rgba(2,12,21,.76) 0%, rgba(2,12,21,.66) 100%);
  pointer-events:none;
}

#operacion .container{ position:relative; z-index:2; }

#operacion .spmo-kicker,
#operacion .section-title,
#operacion .section-subtitle{
  color: var(--w-text);
}
#operacion .section-subtitle{ color: var(--w-soft); }

/* Cards de rituales (1–3) */
.spmo-rituales{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 22px;
}

.spmo-ritual{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: var(--shadow-hero);
  padding: 18px 18px 16px;
  backdrop-filter: blur(6px);
}

/* Badge marca (tu 1–3) usando tu div.n */
.spmo-ritual .n{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  background: #063452;
  position: relative;
  box-shadow: 0 10px 18px rgba(0,0,0,.28);
  margin-bottom: 10px;
}
.spmo-ritual .n::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: 999px;
  border: 6px solid rgba(19,180,142,.92);
  opacity:.92;
  pointer-events:none;
}

.spmo-ritual h3{
  margin: 0 0 6px;
  color: rgba(255,255,255,.95);
  letter-spacing:-.01em;
}
.spmo-ritual p{
  margin: 0;
  color: rgba(255,255,255,.80);
  line-height: 1.35;
}

@media (max-width: 980px){
  .spmo-rituales{ grid-template-columns: 1fr; }
  .spmo-ritual .n{ width:48px; height:48px; font-size:20px; }
}

/* =========================
   6) KPIs: asegurar texto legible (evitar blanco)
   ========================= */
#kpis .card{
  background: rgba(255,255,255,.96) !important;
  color: var(--b-text) !important;
  border: 1px solid rgba(11,26,42,.10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
#kpis .card h3{ color: var(--b-text) !important; }
#kpis .card p,
#kpis .card li,
#kpis .card .muted{ color: rgba(12,27,43,.78) !important; }

/* =========================
   7) Gobernanza SPMO: mantener look & feel
   ========================= */
.spmo-govern{
  position:relative;
  background-image: url("assets/img/gobernanza.jpg");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  overflow:hidden;
  color: var(--w-text);
}

.spmo-govern::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(3,14,24,.66) 0%, rgba(3,14,24,.58) 100%);
  pointer-events:none;
}
.spmo-govern .container{ position:relative; z-index:2; }

.spmo-govern .section-title,
.spmo-govern .section-subtitle{
  color: var(--w-text);
}
.spmo-govern .section-subtitle{ color: var(--w-soft); }

/* =========================
   8) Micro-ajustes de separación (evita “pegado”)
   ========================= */
.spmo-hero-panel,
.spmo-callout,
#entrega .card,
#modelo .card,
#kpis .card{
  overflow: hidden; /* evita que sombras/bordes “corten” texto */
}

/* Listas genéricas dentro de cards */
.card .list{
  padding-left: 18px;
}
.card .list li{
  margin: 8px 0;
}

/* Ajustes móviles generales */
@media (max-width: 640px){
  .spmo-hero-copy h1{ font-size: clamp(34px, 9vw, 44px); }
}
/* =========================================================
   SPMO — FIX LIMPIO v1 (AISLADO)
   Pegar AL FINAL de spmo.css
   No afecta otras páginas (scope: body.spmo)
   ========================================================= */

/* 1) HERO — H1 en punto medio (CEO-grade) */
body.spmo .spmo-hero .spmo-hero-copy h1{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.03;
  max-width: 980px;

  /* Punto medio real */
  font-size: clamp(42px, 4.2vw, 64px);
  margin: 10px 0 12px;
}

/* 2) CTA principal (verde) — SOLO el botón que NO es outline */
body.spmo .spmo-hero .spmo-hero-ctas .btn:not(.btn-outline){
  color: #061a2b; /* texto oscuro siempre legible */
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

body.spmo .spmo-hero .spmo-hero-ctas .btn:not(.btn-outline):hover,
body.spmo .spmo-hero .spmo-hero-ctas .btn:not(.btn-outline):focus-visible{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  color: #061a2b; /* no desaparece */
}
/* =========================================================
   SPMO — FIX DEFINITIVO v3 (H1 + botones + “Qué cambia…”)
   Scope: SOLO body.spmo (no afecta otras páginas)
   Pegar AL FINAL de spmo.css
   ========================================================= */

/* ---------------------------
   1) HERO — H1 “punto medio” real
   - Gana por especificidad y !important
   - Similar jerarquía visual a eficiencia, sin exagerar
   --------------------------- */
body.spmo .spmo-hero .spmo-hero-copy h1,
body.spmo .spmo-hero h1{
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.03 !important;

  /* Punto medio: ni pequeño ni gigante */
  font-size: clamp(42px, 4.2vw, 64px) !important;

  max-width: 980px !important;
  margin: 10px 0 12px !important;
}

/* En pantallas muy grandes, evitamos que “escale de más” */
@media (min-width: 1400px){
  body.spmo .spmo-hero .spmo-hero-copy h1,
  body.spmo .spmo-hero h1{
    font-size: 64px !important;
  }
}

/* ---------------------------
   2) BOTONES — Hover visible, sin “texto que desaparece”
   - Preserva btn-outline (Ver el modelo SPMO)
   - Arregla Conversemos SOLO en SPMO
   --------------------------- */

/* Asegura transiciones suaves en CTAs del hero */
body.spmo .spmo-hero .spmo-hero-ctas .btn{
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}

/* (A) Botón primario del hero: Agendar 20 minutos */
body.spmo .spmo-hero .spmo-hero-ctas .btn:not(.btn-outline){
  color: #061a2b !important;                 /* texto oscuro SIEMPRE */
  font-weight: 800 !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

body.spmo .spmo-hero .spmo-hero-ctas .btn:not(.btn-outline):hover,
body.spmo .spmo-hero .spmo-hero-ctas .btn:not(.btn-outline):focus-visible{
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.24) !important;
  color: #061a2b !important;                 /* nunca desaparece */
}

/* (B) Botón outline del hero: Ver el modelo SPMO (NO lo rompemos) */
body.spmo .spmo-hero .spmo-hero-ctas .btn.btn-outline{
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  border-color: rgba(19,180,142,.70) !important;
}

body.spmo .spmo-hero .spmo-hero-ctas .btn.btn-outline:hover,
body.spmo .spmo-hero .spmo-hero-ctas .btn.btn-outline:focus-visible{
  background: rgba(19,180,142,.12) !important;
  color: rgba(255,255,255,.96) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
}

/* (C) Navbar: Conversemos — en SPMO, el texto NO puede volverse verde */
body.spmo .navbar .btn.btn-sm{
  color: #f4f7f9 !important;
  font-weight: 800 !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

body.spmo .navbar .btn.btn-sm:hover,
body.spmo .navbar .btn.btn-sm:focus-visible{
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  color: #061a2b !important;                 /* FIX desaparición definitiva */
}

/* ---------------------------
   3) “Qué cambia con una SPMO bien operada”
   - Callout con look premium (marca visible)
   - Mini-cards con contraste (sin perderse)
   - Compatible con distintas clases (por si tu HTML varía)
   --------------------------- */

/* Caja principal */
body.spmo .spmo-callout{
  border-radius: 22px !important;
  border: 1px solid rgba(11,26,42,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.10) !important;
  padding: 22px !important;
}

/* Tipografías internas */
body.spmo .spmo-callout h3{
  margin: 0 0 8px !important;
  color: #0c1b2b !important;
  letter-spacing: -0.01em !important;
}

body.spmo .spmo-callout p{
  margin: 0 0 14px !important;
  color: rgba(12,27,43,.80) !important;
}

/* Grid mini — soporta .spmo-mini o contenedores alternativos */
body.spmo .spmo-callout .spmo-mini,
body.spmo .spmo-callout .mini,
body.spmo .spmo-callout .mini-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

/* Si tu HTML no usa clases en items, estiliza hijos directos como fallback */
body.spmo .spmo-callout .spmo-mini > *,
body.spmo .spmo-callout .mini > *,
body.spmo .spmo-callout .mini-grid > *,
body.spmo .spmo-callout .spmo-mini-item,
body.spmo .spmo-callout .mini-item{
  position: relative !important;
  border-radius: 16px !important;
  border: 1px solid rgba(6,52,82,.12) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;
  padding: 14px 14px 12px !important;
  overflow: hidden !important;
}

/* Acento marca (línea superior sutil) */
body.spmo .spmo-callout .spmo-mini > *::before,
body.spmo .spmo-callout .mini > *::before,
body.spmo .spmo-callout .mini-grid > *::before,
body.spmo .spmo-callout .spmo-mini-item::before,
body.spmo .spmo-callout .mini-item::before{
  content:"" !important;
  position:absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important;
  height: 4px !important;
  background: rgba(19,180,142,.90) !important;
  opacity: .85 !important;
}

/* Título pequeño (SEÑAL / RIESGO / BENEFICIOS) — soporta .t o primer texto */
body.spmo .spmo-callout .spmo-mini-item .t,
body.spmo .spmo-callout .mini-item .t,
body.spmo .spmo-callout .spmo-mini .t,
body.spmo .spmo-callout .mini .t{
  display:block !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(6,52,82,.62) !important;
  margin-bottom: 6px !important;
  font-weight: 900 !important;
}

/* Valor (Avance real / Temprano / Trazables) — soporta strong */
body.spmo .spmo-callout .spmo-mini-item strong,
body.spmo .spmo-callout .mini-item strong,
body.spmo .spmo-callout .spmo-mini strong,
body.spmo .spmo-callout .mini strong{
  display:block !important;
  font-size: 16px !important;
  color: rgba(12,27,43,.92) !important;
  font-weight: 900 !important;
}

/* Responsive */
@media (max-width: 980px){
  body.spmo .spmo-callout .spmo-mini,
  body.spmo .spmo-callout .mini,
  body.spmo .spmo-callout .mini-grid{
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   MODELO SPMO — Icono en títulos + Control Tower transversal
   (acotado a #modelo para no romper nada más)
   ===================================================== */

/* 1) Icono (uno.jpg) en el título de cada card */
#modelo .spmo-pilares .card h3{
  position: relative;
  padding-left: 44px;
}

#modelo .spmo-pilares .card h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  background-image: url("assets/img/uno.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}


/* =====================================================
   MODELO SPMO — ICONOS (BLOQUE ÚNICO FINAL)
   ===================================================== */

#modelo .spmo-pilares .card h3{
  position: relative;
  padding-left: 46px;
}

#modelo .spmo-pilares .card h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 30px;
  height: 30px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;              /* evita “cuadrito” raro */
  background-color: transparent; /* por si algún estilo lo ensucia */
}

/* Rutas ABSOLUTAS + cache-buster (si el browser se quedó con una versión vieja) */
#modelo .spmo-pilares .card:nth-child(1) h3::before{ background-image: url("/assets/img/uno.png?v=1"); }
#modelo .spmo-pilares .card:nth-child(2) h3::before{ background-image: url("/assets/img/dos.png?v=1"); }
#modelo .spmo-pilares .card:nth-child(3) h3::before{ background-image: url("/assets/img/tres.png?v=1"); }
#modelo .spmo-pilares .card:nth-child(4) h3::before{ background-image: url("/assets/img/cuatro.png?v=1"); }


/* Base del icono en títulos */
#modelo .spmo-pilares .card h3{
  position: relative;
  padding-left: 46px;
}

#modelo .spmo-pilares .card h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 34px;
  height: 34px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;

  border-radius: 50% !important;
}

/* Números por etapa */
#modelo .spmo-pilares .card:nth-child(1) h3::before{ background-image: url("/assets/img/uno.png"); }
#modelo .spmo-pilares .card:nth-child(2) h3::before{ background-image: url("/assets/img/dos.png"); }
#modelo .spmo-pilares .card:nth-child(3) h3::before{ background-image: url("/assets/img/tres.png"); }
#modelo .spmo-pilares .card:nth-child(4) h3::before{ background-image: url("/assets/img/cuatro.png"); }

/* ✅ Torre: por CLASE (no depende del orden) */
#modelo .spmo-pilares .card.spmo-tower{
  border-left: 6px solid var(--ni-emerald);
  background: linear-gradient(180deg, rgba(19,180,142,.08), rgba(255,255,255,.97));
}

#modelo .spmo-pilares .card.spmo-tower h3::before{
  background-image: url("/assets/img/torre-de-control.png") !important;
}
/* =====================================================
   SPMO FLOW — CHIPS OSCUROS (4 ETAPAS)
   Se pega AL FINAL del CSS
   ===================================================== */

/* Contenedor del flujo */
#modelo .spmo-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Chips (Estratégia, Portafolio, Delivery, Beneficios) */
#modelo .spmo-flow-item{
  background: var(--ni-navy);   /* azul oscuro de marca */
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Flechas entre chips */
#modelo .spmo-arrow{
  color: rgba(11, 35, 57, .55);
  font-weight: 900;
}


/* =====================================================
   GOBERNANZA SPMO — FIXES (FONDO + LETRAS + COLOR TEXTO)
   Pegar al FINAL de spmo.css
   ===================================================== */

/* 1) Fondo (recupera gobernanza.jpg) */
#obernanza,
#gobernanza{
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(6, 18, 32, .82), rgba(6, 18, 32, .82)),
    url("/assets/img/gobernanza.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Asegura padding/aire si algún bloque lo dejó “plano” */
#gobernanza{
  padding-top: 64px;
  padding-bottom: 64px;
}

/* 2) Cards: texto interno en navy / gris oscuro */
#gobernanza .card{
  background: rgba(255,255,255,.96);
  color: #0b1f33;              /* navy */
}

#gobernanza .card p,
#gobernanza .card li,
#gobernanza .card .muted{
  color: #2b3440;              /* gris oscuro */
}

#gobernanza .card strong{
  color: #0b1f33;              /* navy */
}

/* Si tienes algún estilo global que “blanquea” listas en secciones dark */
#gobernanza .list li{
  color: #2b3440;
}

/* 3) Letras A/B/C/D en títulos de cards */
#gobernanza .cards-grid .card h3{
  position: relative;
  padding-left: 54px;          /* espacio para la letra */
}

#gobernanza .cards-grid .card h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;                    /* <- aquí puedes subir/bajar */
  width: 38px;
  height: 38px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Asignación por orden (solo a las 4 cards; no afecta al statement) */
#gobernanza .cards-grid .card:nth-of-type(1) h3::before{ background-image: url("/assets/img/letraA.png?v=1"); }
#gobernanza .cards-grid .card:nth-of-type(2) h3::before{ background-image: url("/assets/img/letraB.png?v=1"); }
#gobernanza .cards-grid .card:nth-of-type(3) h3::before{ background-image: url("/assets/img/letraC.png?v=1"); }
#gobernanza .cards-grid .card:nth-of-type(4) h3::before{ background-image: url("/assets/img/letraD.png?v=1"); }

/* Ajuste fino: separa un poco el texto del título para que no “toque” la lista */
#gobernanza .card h3{
  margin-bottom: 12px;
}

/* Si el bloque statement está dentro del mismo grid, asegúralo legible */
#gobernanza .spmo-statement{
  background: rgba(6, 18, 32, .55);
  border: 1px solid rgba(255,255,255,.14);
}

#gobernanza .spmo-statement h3,
#gobernanza .spmo-statement p{
  color: #ffffff;
}
/* =====================================================
   SPMO — SUBNAV (estándar Omni-IA-Sprint)
   ===================================================== */

.spmo .svc-subnav{
  position: sticky;
  top: 72px;              /* ajusta si tu navbar tiene otro alto */
  z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,35,57,.08);
}

.spmo .svc-subnav .container{
  padding: 14px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Píldoras */
.spmo .subnav-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,179,136,.96);
  color: #0b2339 !important;              /* navy */
  font-weight: 900;
  border: 1px solid rgba(0,179,136,.34);
  box-shadow: 0 10px 22px rgba(7,26,43,.12);
  text-decoration: none;
}

.spmo .subnav-pill:hover,
.spmo .subnav-pill:focus{
  transform: translateY(-1px);
  filter: brightness(.98);
  color: #0b2339 !important;
  text-decoration: none;
}

/* Accesibilidad: foco visible */
.spmo .subnav-pill:focus-visible{
  outline: 3px solid rgba(0,179,136,.35);
  outline-offset: 2px;
}

/* =====================================================
   SPMO · CIERRE FAQs + CTA
   Usa viñeta.png (estándar del sitio)
   ===================================================== */

.spmo-faqs{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* FAQ item */
.spmo-faq{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(11,35,57,.14);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(7,26,43,.14);
  overflow: hidden;
}

/* Header */
.spmo-faq summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 20px 18px 52px;
  position: relative;
  font-weight: 900;
  color: var(--ni-ink);
}

/* Quitar marcador nativo */
.spmo-faq summary::-webkit-details-marker{
  display: none;
}

/* chevron-down.png como ícono */
.spmo-faq summary::before{
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 18px;
  height: 18px;

  background-image: url("assets/img/chevron-down.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: transform .25s ease; /* 👈 CLAVE */
  transform: rotate(0deg);
}


/* Texto pregunta */
.spmo-faq .faq-q{
  display: block;
  line-height: 1.3;
}

/* Respuesta */
.spmo-faq .faq-a{
  padding: 0 20px 18px 52px;
  color: rgba(11,18,32,.78);
  line-height: 1.6;
}

/* CTA final */
.spmo-final-cta{
  margin-top: 28px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(11,35,57,.14);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(7,26,43,.18);
  padding: 26px;
  text-align: center;
}

.spmo-final-cta h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ni-ink);
}

.spmo-cta-support{
  margin-top: 12px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ni-navy);
}

/* 🔄 Giro 180° cuando el FAQ está abierto */
.spmo-faq[open] > summary::before{
  transform: rotate(180deg);
}


/* =========================================================
   SPMO — BOTONES (DEFINITIVO)
   Estándar acordado:
   1) .btn (primario): texto blanco + fondo esmeralda
      hover/focus: SOLO texto navy (fondo se mantiene esmeralda)
   2) .btn-outline: texto blanco + fondo transparente
      hover/focus: fondo esmeralda + texto navy
   3) Subnavbar (pills): hover/focus fondo navy + texto blanco
   Scope: SOLO body.spmo
   ========================================================= */

body.spmo{
  --spmo-navy: #0b2339;
  --spmo-emerald: #00b388;
}

/* ---------- 0) Base (solo links con clase .btn) ---------- */
body.spmo a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .16s ease, box-shadow .16s ease;
}

/* ---------- 1) PRIMARIO: .btn (no outline) ---------- */
body.spmo a.btn:not(.btn-outline){
  background-color: var(--spmo-emerald) !important;
  border: 1px solid rgba(0,179,136,.55) !important;
  color: #ffffff !important; /* BEFORE: blanco */
}

body.spmo a.btn:not(.btn-outline):hover,
body.spmo a.btn:not(.btn-outline):focus,
body.spmo a.btn:not(.btn-outline):focus-visible{
  background-color: var(--spmo-emerald) !important; /* se mantiene */
  border-color: rgba(0,179,136,.85) !important;
  color: var(--spmo-navy) !important;               /* AFTER: navy */
}

/* ---------- 2) OUTLINE: .btn.btn-outline ---------- */
body.spmo a.btn.btn-outline{
  background-color: transparent !important;         /* BEFORE: transparente */
  border: 1px solid rgba(0,179,136,.70) !important;
  color: rgba(255,255,255,.92) !important;          /* BEFORE: blanco */
}

body.spmo a.btn.btn-outline:hover,
body.spmo a.btn.btn-outline:focus,
body.spmo a.btn.btn-outline:focus-visible{
  background-color: var(--spmo-emerald) !important; /* AFTER: esmeralda */
  border-color: rgba(0,179,136,.90) !important;
  color: var(--spmo-navy) !important;               /* AFTER: navy */
}

/* ---------- 3) Accesibilidad (solo cuando es teclado) ---------- */
body.spmo a.btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}

/* =========================================================
   SUBNAVBAR (píldoras)
   Requisito: hover/focus => fondo navy + texto blanco
   Ajusta el selector al contenedor REAL de tu subnavbar.
   Aquí cubro 3 opciones típicas: .subnav, .chip-nav, .spmo-subnav
   ========================================================= */

body.spmo .subnav a,
body.spmo .chip-nav a,
body.spmo .spmo-subnav a{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

body.spmo .subnav a:hover,
body.spmo .subnav a:focus,
body.spmo .subnav a:focus-visible,
body.spmo .chip-nav a:hover,
body.spmo .chip-nav a:focus,
body.spmo .chip-nav a:focus-visible,
body.spmo .spmo-subnav a:hover,
body.spmo .spmo-subnav a:focus,
body.spmo .spmo-subnav a:focus-visible{
  background-color: var(--spmo-navy) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* =========================================================
   FIX SOLO HERO CTAs — SPMO (match DEV.css)
   Corrige ÚNICAMENTE:
   - "Agendar 20 minutos" (btn primario)
   - "Ver el modelo SPMO" (btn-outline)
   Pegar AL FINAL de spmo.css
   ========================================================= */

body.spmo .spmo-hero .spmo-hero-ctas a.btn{
  border-radius: 999px;
  text-decoration: none !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

/* 1) PRIMARIO: Agendar 20 minutos */
body.spmo .spmo-hero .spmo-hero-ctas a.btn:not(.btn-outline){
  background-color: var(--ni-emerald) !important;
  border: 1px solid rgba(19,180,142,.65) !important;
  color: #ffffff !important;              /* base: BLANCO */
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

body.spmo .spmo-hero .spmo-hero-ctas a.btn:not(.btn-outline):hover,
body.spmo .spmo-hero .spmo-hero-ctas a.btn:not(.btn-outline):focus,
body.spmo .spmo-hero .spmo-hero-ctas a.btn:not(.btn-outline):focus-visible,
body.spmo .spmo-hero .spmo-hero-ctas a.btn:not(.btn-outline):active{
  background-color: var(--ni-emerald) !important; /* se mantiene verde */
  border-color: rgba(19,180,142,.85) !important;
  color: var(--ni-navy) !important;              /* hover: NAVY */
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}

/* 2) OUTLINE: Ver el modelo SPMO */
body.spmo .spmo-hero .spmo-hero-ctas a.btn.btn-outline{
  background-color: transparent !important;
  border: 1px solid rgba(19,180,142,.70) !important;
  color: rgba(255,255,255,.92) !important;       /* base: BLANCO */
}

body.spmo .spmo-hero .spmo-hero-ctas a.btn.btn-outline:hover,
body.spmo .spmo-hero .spmo-hero-ctas a.btn.btn-outline:focus,
body.spmo .spmo-hero .spmo-hero-ctas a.btn.btn-outline:focus-visible,
body.spmo .spmo-hero .spmo-hero-ctas a.btn.btn-outline:active{
  background-color: var(--ni-emerald) !important; /* hover: VERDE */
  border-color: rgba(19,180,142,.90) !important;
  color: var(--ni-navy) !important;               /* hover: NAVY */
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* Foco accesible sin romper estética */
body.spmo .spmo-hero .spmo-hero-ctas a.btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}

/* =========================================================
   SPMO SUBNAV — MOBILE SCROLL FIX
   ========================================================= */

@media (max-width: 768px){

  .spmo-page .spmo-subnav{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .spmo-page .spmo-subnav::-webkit-scrollbar{
    display: none;
  }

  .spmo-page .spmo-subnav .container{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    width: max-content;
    min-width: 100%;
    padding: 12px 16px 8px;
  }

  .spmo-page .spmo-subnav .subnav-pill{
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

}
/* =========================================================
   SPMO SUBNAV — MOBILE SCROLL FIX
   Ajustado al body real: <body class="spmo">
   ========================================================= */
@media (max-width: 768px){

  body.spmo .spmo-subnav{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.spmo .spmo-subnav::-webkit-scrollbar{
    display: none;
  }

  body.spmo .spmo-subnav .container{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    width: max-content;
    min-width: 100%;
    padding: 12px 16px 8px;
  }

  body.spmo .spmo-subnav .subnav-pill{
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}


/* FIX SUBNAV — Eficiencia (más específico) */
.svc-subnav .container .subnav-pill{
  background: #10c4a0 !important;
  color: #071a2b !important;
  border: 1px solid #10c4a0 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.svc-subnav .container .subnav-pill:hover,
.svc-subnav .container .subnav-pill:focus,
.svc-subnav .container .subnav-pill:active,
.svc-subnav .container .subnav-pill.is-active,
.svc-subnav .container .subnav-pill[aria-current="true"]{
  background: #071a2b !important;
  color: #ffffff !important;
  border-color: #071a2b !important;
}