/* ========================================================== 
   NEXT INNOVA — Programa 2: Plan Estratégico Transformacional
   Archivo: planificacion.css (scope: .plan-page)
   Objetivo: NO contaminar otras páginas + mantener consistencia
   ========================================================== */

.plan-page{
  --ni-navy: #0b2339;
  --ni-navy-2: #071a2b;
  --ni-emerald: #00b388;
  --ni-ink: #0b1220;
  --ni-muted: rgba(11,18,32,.72);
  --ni-border: rgba(11,35,57,.14);
  --ni-card: rgba(255,255,255,.92);
  --ni-card-2: rgba(255,255,255,.96);
  --ni-shadow: 0 16px 40px rgba(7,26,43,.16);
  --ni-radius: 18px;      /* UI redondeada */
  --ni-frame-radius: 0px; /* Frames rectos */
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ni-ink);
  background: #fff;
}

/* ---------- HERO / FRAMES ---------- */
.plan-page .frame-section{
  position: relative;
  border-radius: var(--ni-frame-radius); /* RECTO solo para FRAMES */
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(0,179,136,.18), transparent 55%),
    radial-gradient(900px 500px at 85% 20%, rgba(0,179,136,.10), transparent 50%),
    linear-gradient(180deg, var(--ni-navy), var(--ni-navy-2));
}

/* Imagen de fondo del frame */
.plan-page .frame-section::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--frame-image);
  background-size: cover;
  background-position: center;
  opacity: .35;
  filter: saturate(1.05) contrast(1.05);
  pointer-events:none;
}

/* Overlay: controlar visibilidad del fondo (más suave para que se vea la imagen) */
.plan-page .frame-section::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(7,26,43,.55) 0%,
    rgba(7,26,43,.40) 45%,
    rgba(7,26,43,.55) 100%);
  pointer-events:none;
}

/* Contenido sobre el frame */
.plan-page .frame-inner{
  position: relative;
  z-index: 1;
  padding: 56px 0;
}

/* Ajuste de “frame-tight” cuando quieres menos alto */
.plan-page .frame-tight .frame-inner{ padding: 44px 0; }

/* HERO */
.plan-page .plan-hero{
  padding: 56px 0 40px;
}
.plan-page .plan-hero .container{ position: relative; z-index: 1; }

.plan-page .plan-eyebrow{
  color: rgba(255,255,255,.78);
  letter-spacing: .18em;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.plan-page .plan-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  margin: 0 0 14px;
}
.plan-page .plan-subtitle{
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 860px;
}
.plan-page .plan-subtitle-2{
  color: rgba(255,255,255,.78);
}

/* CTAs */
.plan-page .plan-ctas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

/* Botones: blindaje para que hover no “apague” texto */
.plan-page .btn{
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ===========================
   FIX ÚNICO: BTN PRIMARY (Agendar 20 minutos)
   - Antes estaba FORZADO a blanco con !important (imposible cambiar)
   - Ahora: hover/active/focus texto NAVY
   =========================== */
.plan-page .btn-primary{
  background: var(--ni-emerald);
  border: 1px solid rgba(0,0,0,0);
  color: #fff; /* <- quitamos !important para permitir estados */
}
.plan-page .btn-primary:hover,
.plan-page .btn-primary:active,
.plan-page .btn-primary:focus,
.plan-page .btn-primary:focus-visible{
  filter: brightness(.98);
  box-shadow: 0 10px 24px rgba(0,179,136,.22);
  color: var(--ni-navy) !important;  /* <- texto NAVY en estado activo */
}

/* Outline queda INTACTO (no tocar) */
.plan-page .btn-outline{
  background: transparent;
  border: 1px solid rgba(0,179,136,.65);
  color: rgba(255,255,255,.92) !important;
}
.plan-page .btn-outline:hover{
  border-color: rgba(255,255,255,.75);
  color: #fff !important;
}

/* Si style.css aplica hover raro al link, lo blindamos (SOLO primary) */
.plan-page a.btn-primary:hover,
.plan-page a.btn-primary:focus{
  color: var(--ni-navy) !important; /* <- antes #fff, impedía el cambio */
}

/* Snapshot */
.plan-page .plan-snapshot{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .plan-page .plan-snapshot{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .plan-page .plan-snapshot{ grid-template-columns: 1fr; }
}

.plan-page .snapshot-item{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--ni-radius); /* redondeado */
  padding: 14px 14px;
  box-shadow: 0 12px 30px rgba(7,26,43,.18);
}
.plan-page .snapshot-k{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11,18,32,.62);
  margin-bottom: 6px;
}
.plan-page .snapshot-v{
  font-size: 16px;
  font-weight: 800;
  color: var(--ni-ink);
}

/* ---------- SUBNAV (pills verdes visibles) ---------- */
.plan-page .plan-subnav{
  position: sticky;
  top: 72px; /* bajo navbar */
  z-index: 20;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,35,57,.08);
}
.plan-page .plan-subnav .container{
  padding: 14px 0;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.plan-page .subnav-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,179,136,.96);
  color: var(--ni-navy) !important; /* texto azul oscuro */
  font-weight: 900;
  border: 1px solid rgba(0,179,136,.34);
  box-shadow: 0 10px 22px rgba(7,26,43,.12);
  text-decoration:none;
}
.plan-page .subnav-pill:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  color: var(--ni-navy) !important;
}

/* ---------- BODY / BLOCKS ---------- */
.plan-page .plan-body{ padding: 34px 0 0; }

.plan-page .block{
  padding: 44px 0;
}
.plan-page h2{
  font-size: 30px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.plan-page .muted{ color: var(--ni-muted); }

.plan-page .grid-two{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .plan-page .grid-two{ grid-template-columns: 1fr; }
}

/* List */
.plan-page .list{
  margin: 14px 0 0;
  padding-left: 20px;
}
.plan-page .list li{ margin: 8px 0; }

/* Callout */
.plan-page .callout{
  background: var(--ni-card-2);
  border: 1px solid var(--ni-border);
  border-radius: var(--ni-radius);
  padding: 18px;
  box-shadow: var(--ni-shadow);
}
.plan-page .callout h3{ margin: 0 0 8px; }
.plan-page .kpi-chip{
  margin-top: 12px;
  background: rgba(0,179,136,.10);
  border: 1px solid rgba(0,179,136,.18);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--ni-ink);
}

/* Cards grid */
.plan-page .cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .plan-page .cards-grid{ grid-template-columns: 1fr; }
}
.plan-page .card{
  background: var(--ni-card-2);
  border: 1px solid var(--ni-border);
  border-radius: var(--ni-radius); /* redondeado */
  padding: 18px;
  box-shadow: var(--ni-shadow);
}
.plan-page .card h3{ margin: 0 0 8px; }

/* ---------- Frame titles (en blanco) ---------- */
.plan-page .frame-title{
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  text-align: center;
}
.plan-page .frame-subtitle{
  color: rgba(255,255,255,.86);
  text-align: center;
  max-width: 980px;
  margin: 0 auto 18px;
  line-height: 1.55;
}

/* ---------- Metodología grid ---------- */
.plan-page .method-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 1100px){
  .plan-page .method-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .plan-page .method-grid{ grid-template-columns: 1fr; }
}

.plan-page .method-card{
  position: relative;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.52);
  border-radius: var(--ni-radius); /* redondeado */
  padding: 18px 18px 18px 18px;
  box-shadow: 0 16px 36px rgba(7,26,43,.18);
  min-height: 170px; /* más altura como pediste */
}
.plan-page .method-card h3{
  margin: 8px 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ni-ink);
}
.plan-page .method-card p{
  margin: 0;
  color: rgba(11,18,32,.75);
  line-height: 1.45;
}

/* Número como imagen (SIN recuadro detrás) */
.plan-page .method-num{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display:block;
}

/* ---------- Alcance (stack) ---------- */
.plan-page .scope-stack{
  display:flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.plan-page .scope-item{
  display:grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: start;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--ni-radius); /* redondeado */
  padding: 18px;
  box-shadow: 0 16px 36px rgba(7,26,43,.18);
}
.plan-page .scope-icon img{
  width: 62px;
  height: 62px;
  object-fit: contain;
  display:block;
}
.plan-page .scope-content h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ni-ink);
}
.plan-page .scope-content p{
  margin: 0;
  color: rgba(11,18,32,.76);
  line-height: 1.52;
}

/* ---------- Aseguramiento (accordion) ---------- */
.plan-page .assurance-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .plan-page .assurance-grid{ grid-template-columns: 1fr; }
}

.plan-page .assurance-item{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--ni-radius); /* redondeado */
  box-shadow: 0 16px 36px rgba(7,26,43,.18);
  padding: 0;
  overflow: hidden;
}
.plan-page .assurance-item summary{
  cursor: pointer;
  padding: 16px 16px;
  font-weight: 900;
  color: var(--ni-ink);
  list-style: none;
}
.plan-page .assurance-item summary::-webkit-details-marker{ display:none; }
.plan-page .assurance-item summary::after{
  content: "▾";
  float: right;
  color: rgba(11,18,32,.55);
}
.plan-page .assurance-item[open] summary::after{ content:"▴"; }

.plan-page .assurance-body{
  padding: 0 16px 16px 16px;
  color: rgba(11,18,32,.78);
  line-height: 1.55;
}

.plan-page .assurance-cta{
  margin-top: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--ni-radius);
  box-shadow: 0 16px 36px rgba(7,26,43,.18);
  padding: 20px;
  text-align: center;
}
.plan-page .assurance-cta h3{ margin: 0 0 8px; }

/* ---------- Ajustes de hover del sitio (evitar texto verde inesperado) ---------- */
.plan-page a:hover{
  color: inherit;
}
.plan-page .btn:hover{
  text-decoration: none;
}

/* Si el tema global cambia color de links en hover, lo “blinda” en botones */
.plan-page a.btn,
.plan-page a.btn:hover,
.plan-page a.btn:focus{
  text-decoration:none !important;
}

/* ==========================================================
   ✅ ÚNICO FIX PEDIDO: FRAMES FULL-WIDTH (sin tocar el HERO)
   Problema: frames dentro de .container quedaban recortados.
   Solución: hacemos “full-bleed” SOLO a los frame-sections
   que están dentro del flujo del body (no el HERO).
   ========================================================== */

/* 1) Los frames del body se vuelven 100vw aunque estén dentro de .container */
.plan-page .plan-body .frame-section{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 2) Pero el contenido interno sigue alineado como .container */
.plan-page .plan-body .frame-section .frame-inner{
  max-width: 1160px;        /* ajusta si tu .container usa otro ancho */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;       /* “gutter” consistente */
  padding-right: 20px;
}

/* ===============================
   FIX – Metodología Ejecutiva
   Permitir gradiente azul profundo
   =============================== */

.plan-page .metodologia-ejecutiva {
  position: relative;
  background: radial-gradient(
      1200px 600px at 50% -200px,
      rgba(0, 180, 136, 0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #061a26 0%,
      #082637 45%,
      #04131d 100%
    ) !important;
}

.plan-page .metodologia-ejecutiva::before {
  content: none !important;
}
/* ==========================================================
   HOTFIX MVP — Profundidad real en frames (Metodología)
   Pegar AL FINAL de planificacion.css
   ========================================================== */

/* 1) Asegura que el frame tenga un gradiente visible (no plano) */
.plan-page #metodologia.frame-section{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,179,136,.14), transparent 60%),
    radial-gradient(820px 520px at 82% 28%, rgba(0,179,136,.10), transparent 62%),
    linear-gradient(180deg, #0b2339 0%, #071a2b 100%) !important;
}

/* 2) Baja el “tapado” de la imagen y evita azul sólido */
.plan-page #metodologia.frame-section::before{
  opacity: .22 !important;        /* antes estaba muy alto */
  filter: saturate(1.15) contrast(1.12) !important;
}

/* 3) Overlay más inteligente: deja ver el degradado + textura */
.plan-page #metodologia.frame-section::after{
  background: linear-gradient(90deg,
    rgba(7,26,43,.38) 0%,
    rgba(7,26,43,.18) 50%,
    rgba(7,26,43,.38) 100%) !important;
}
/* ==========================================================
   HOTFIX MVP — Textos en blanco dentro de FRAMES
   ========================================================== */

/* Cualquier subtítulo dentro de un frame */
.plan-page .frame-section .section-subtitle{
  color: rgba(255,255,255,.88) !important;
  max-width: 980px;
  margin: 0 auto 10px;
  text-align: center;
  line-height: 1.55;
}

/* “muted” pero en frame debe ser blanco (no gris oscuro) */
.plan-page .frame-section .muted{
  color: rgba(255,255,255,.78) !important;
  text-align: center;
}

/* Por si algún estilo global pisa enlaces/hover dentro del frame */
.plan-page .frame-section a{
  color: rgba(255,255,255,.92);
}

/* CTA soporte – cierre ejecutivo (bloque Alcance) */
.cta-support {
  color: #0b2a3a;          /* azul oscuro ejecutivo */
  font-weight: 600;
  margin-top: 18px;
  text-align: center;
}

/* Si el bloque está sobre frame oscuro, garantizamos contraste */
.frame-section .cta-support {
  color: #e9f3f8;          /* blanco azulado, elegante */
}

/* enero 08 2026 */

/* ==========================================================
   CTA FINAL — ALCANCE (CONTRASTE EJECUTIVO GARANTIZADO)
   ========================================================== */

.plan-page .scope-cta{
  margin-top: 32px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(11,35,57,.14);
  border-radius: var(--ni-radius);
  padding: 28px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(7,26,43,.18);
}

.plan-page .scope-cta h3{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  color: var(--ni-ink);
}

.plan-page .scope-cta-text{
  max-width: 880px;
  margin: 0 auto 18px;
  color: rgba(11,18,32,.82);
  line-height: 1.55;
  font-size: 16px;
}

.plan-page .scope-cta-support{
  margin-top: 14px;
  font-size: 15px;
  font-weight: 800;
  color: #0b2339 !important;   /* azul oscuro ejecutivo */
  opacity: 1 !important;
}
/* Aseguramiento – CTA support text legible sobre fondo claro */
.assurance-cta .cta-support{
  color: rgba(10, 22, 36, .88);  /* azul/gris oscuro */
}
.assurance-cta .cta-support strong{
  color: rgba(10, 22, 36, .95);
}
/* ==========================================================
   ASEGURAMIENTO — versión WOW (cards con texto visible SIEMPRE)
   Pegar al final de planificacion.css
   ========================================================== */

.plan-page .assurance-grid-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .plan-page .assurance-grid-cards{ grid-template-columns: 1fr; }
}

.plan-page .assurance-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(11,35,57,.14);
  border-radius: var(--ni-radius);
  box-shadow: 0 16px 36px rgba(7,26,43,.18);
  padding: 16px 16px 14px;
}

.plan-page .assurance-card h3{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(11,18,32,.92);
  line-height: 1.25;
}

.plan-page .assurance-card p{
  margin: 0 0 10px;
  color: rgba(11,18,32,.78);
  line-height: 1.55;
}

.plan-page .assurance-card .assurance-rule{
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(11,35,57,.10);
  color: rgba(11,18,32,.86);
  font-weight: 700;
}

/* Blindaje por si style.css toca estilos de details/summary o links */
.plan-page .assurance-card *{
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================
   ASEGURAMIENTO EJECUTIVO — FRAME AZUL (WOW C-SUITE)
   ========================================================== */

.plan-page .aseguramiento-ejecutivo{
  position: relative;
  background:
    radial-gradient(1000px 520px at 18% 18%, rgba(0,179,136,.14), transparent 60%),
    radial-gradient(900px 520px at 82% 28%, rgba(0,179,136,.10), transparent 62%),
    linear-gradient(180deg, #0b2339 0%, #071a2b 100%) !important;
}

/* Imagen opcional si luego quieres textura */
.plan-page .aseguramiento-ejecutivo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--frame-image);
  background-size: cover;
  background-position: center;
  opacity: .18;
  filter: saturate(1.1) contrast(1.1);
  pointer-events:none;
}

/* Overlay elegante (no tapa el degradado) */
.plan-page .aseguramiento-ejecutivo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(7,26,43,.38) 0%,
    rgba(7,26,43,.18) 50%,
    rgba(7,26,43,.38) 100%);
  pointer-events:none;
}

/* Asegura que el contenido quede encima */
.plan-page .aseguramiento-ejecutivo .frame-inner{
  position: relative;
  z-index: 1;
}

/* Títulos y subtítulos en blanco */
.plan-page .aseguramiento-ejecutivo .section-title{
  color: #fff;
  text-align: center;
}

.plan-page .aseguramiento-ejecutivo .section-subtitle{
  color: rgba(255,255,255,.86);
  text-align: center;
  max-width: 980px;
  margin: 0 auto 18px;
}
/* ==========================================================
   PATCH — Aseguramiento con fondo azul + imagen (gobernanza)
   (pegar AL FINAL del archivo)
   ========================================================== */

/* Asegurar que Aseguramiento se comporte como FRAME (azul + imagen) */
.plan-page #aseguramiento.frame-section{
  /* Mantiene el look “azul profundo” */
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,179,136,.14), transparent 60%),
    radial-gradient(820px 520px at 82% 28%, rgba(0,179,136,.10), transparent 62%),
    linear-gradient(180deg, #0b2339 0%, #071a2b 100%) !important;
}

/* Imagen del frame (usa tu --frame-image inline) */
.plan-page #aseguramiento.frame-section::before{
  opacity: .28 !important;
  filter: saturate(1.12) contrast(1.10) !important;
}

/* Overlay para legibilidad sin “matar” la foto */
.plan-page #aseguramiento.frame-section::after{
  background: linear-gradient(90deg,
    rgba(7,26,43,.44) 0%,
    rgba(7,26,43,.20) 50%,
    rgba(7,26,43,.44) 100%) !important;
}

/* Asegurar textos del encabezado en blanco dentro del frame */
.plan-page #aseguramiento .section-title{
  color:#fff;
  text-align:center;
}
.plan-page #aseguramiento .section-subtitle{
  color: rgba(255,255,255,.86) !important;
  text-align:center;
  max-width: 980px;
  margin: 0 auto 10px;
}

/* Footer de cierre (nuevo, distinto al CTA del Alcance) */
.plan-page .assurance-footer{
  margin-top: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(11,35,57,.14);
  border-radius: var(--ni-radius);
  box-shadow: 0 18px 40px rgba(7,26,43,.18);
  padding: 22px;
  text-align: center;
}
.plan-page .assurance-footer h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ni-ink);
}
.plan-page .assurance-footer-text{
  max-width: 920px;
  margin: 0 auto 14px;
  color: rgba(11,18,32,.82);
  line-height: 1.55;
  font-size: 15.5px;
}
.plan-page .assurance-footer-support{
  margin-top: 12px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0b2339 !important;
}
/* ==========================================================
   ACCORDION — UX: flecha con IMAGEN + default cerrado
   ========================================================== */

.plan-page .assurance-item summary{
  position: relative;
  padding: 16px 52px 16px 16px; /* espacio para icono a la derecha */
}

/* quitar cualquier flecha por texto */
.plan-page .assurance-item summary::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;

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

  opacity: .92;
  filter: drop-shadow(0 2px 6px rgba(7,26,43,.18));
  transition: transform .18s ease, opacity .18s ease;
}

/* al abrir, rotamos la misma imagen */
.plan-page .assurance-item[open] summary::after{
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}
/* ==========================================================
   BOTÓN DEMO — legible + hover correcto
   Hover: fondo emerald + texto navy
   ========================================================== */

.plan-page .btn-demo{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,179,136,.55);
  color: var(--ni-navy) !important;
  font-weight: 900;
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: 0 12px 26px rgba(7,26,43,.10);
}

.plan-page .btn-demo:hover,
.plan-page .btn-demo:focus{
  background: var(--ni-emerald);
  border-color: var(--ni-emerald);
  color: var(--ni-navy) !important;   /* texto azul oscuro */
  box-shadow: 0 18px 40px rgba(0,179,136,.22);
  text-decoration: none !important;
  transform: translateY(-1px);
}
/* ==========================================================
   FIX DEFINITIVO — eliminar flecha nativa de <summary>
   (Chrome / Safari / Firefox)
   ========================================================== */

/* Quitar marcador nativo en TODOS los estados */
.plan-page .assurance-item summary{
  list-style: none;
}

/* Chrome / Edge / Safari */
.plan-page .assurance-item summary::-webkit-details-marker{
  display: none;
}

/* Firefox */
.plan-page .assurance-item summary::marker{
  content: "";
}

/* Asegurar que NO reaparezca al estar abierto */
.plan-page .assurance-item[open] summary::marker{
  content: "";
}
/* ==========================================================
   FIX DEFINITIVO — Aseguramiento:
   - Quita el marker nativo (gris) del <summary> (Chrome/Edge/Safari/Firefox)
   - Dibuja nuestra flecha con imagen (visible) y la rota al abrir
   - Sin alterar otros estilos del sitio
   ========================================================== */

/* 1) Mata el marker nativo del summary (gris tenue) */
.plan-page #aseguramiento details > summary {
  list-style: none !important;
}

/* WebKit: Chrome / Edge / Safari */
.plan-page #aseguramiento details > summary::-webkit-details-marker {
  display: none !important;
}

/* Firefox */
.plan-page #aseguramiento details > summary::marker {
  content: "" !important;
}

/* 2) Nuestra flecha (imagen) — REEMPLAZO CONTROLADO */
.plan-page #aseguramiento .assurance-item summary{
  position: relative;
  padding-right: 54px; /* espacio para el icono a la derecha */
}

/* Flecha visible como imagen */
.plan-page #aseguramiento .assurance-item summary::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .18s ease;
  background-image: url("assets/img/flecha-abajo-lista3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .98;
}

/* Al expandir: rota la flecha */
.plan-page #aseguramiento .assurance-item[open] summary::after{
  transform: translateY(-50%) rotate(180deg);
}

.plan-page .nav-links a:hover,
.plan-page .nav-links a.active {
  color: var(--ni-emerald);
}

/* (Dejamos tus hotfixes de outline/ctas intactos; el primary ya quedó resuelto arriba) */
.plan-page .btn-outline:hover,
.plan-page .btn-outline:active {
  background-color: var(--ni-emerald);
  color: var(--ni-navy);
  border-color: var(--ni-emerald);
}

/* ==========================================================
   PLAN HERO – CTA STATES (match DEV behavior)
   (Se mantiene; el primary ya está corregido arriba)
   ========================================================== */

.plan-page .plan-ctas .btn {
  color: #fff;
}

.plan-page .plan-ctas .btn.btn-outline:hover,
.plan-page .plan-ctas .btn.btn-outline:active,
.plan-page .plan-ctas .btn.btn-outline:focus-visible {
  background-color: var(--ni-emerald);
  border-color: var(--ni-emerald);
  color: var(--ni-navy);
}


/* =========================================================
   PLAN SUBNAV — MOBILE SCROLL FIX (CORRECTO)
   ========================================================= */
@media (max-width: 768px){

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

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

  .plan-page .plan-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;
  }

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

/* FIX REAL — botón verde "Conversemos" del navbar en Eficiencia */
.navbar .nav-links a.btn,
.navbar .nav-links a.btn-sm,
.navbar .nav-links a.btn.btn-sm,
.navbar .nav-links a[href="index.html#contacto"]{
  color: #ffffff !important;
}

.navbar .nav-links a.btn:hover,
.navbar .nav-links a.btn:focus,
.navbar .nav-links a.btn:active,
.navbar .nav-links a.btn-sm:hover,
.navbar .nav-links a.btn-sm:focus,
.navbar .nav-links a.btn-sm:active,
.navbar .nav-links a.btn.btn-sm:hover,
.navbar .nav-links a.btn.btn-sm:focus,
.navbar .nav-links a.btn.btn-sm:active,
.navbar .nav-links a[href="index.html#contacto"]:hover,
.navbar .nav-links a[href="index.html#contacto"]:focus,
.navbar .nav-links a[href="index.html#contacto"]:active{
  color: #071a2b !important;
}



/* =========================================================
   FIX SUBNAV — Planificación
   ========================================================= */

.plan-page .plan-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;
}

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