/* =========================================================
   PROAGILE · RESPONSIVE GLOBAL
   Se carga después de styles.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; }
body { overflow-x: clip; }
img, video, iframe, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; font: inherit; }

/* Los hijos de flex/grid no deben forzar el ancho del viewport. */
:where(
  .nav-inner, .footer-grid, .footer-bottom, .hero-grid, .split,
  .two-col, .two-col-3-2, .products-primary, .products-grid,
  .card-grid, .cycle-row, .spine-layout, .combine-grid, .biz-grid,
  .support-grid, .feature-grid, .feature-grid-2, .ed-grid,
  .pkg-pricing-grid, .free-tier, .free-items, .ct-grid, .ct-row,
  .q-grid, .why-grid, .pillar3, .stats-grid, .stat-row, .eap-stats,
  .eap-support, .eap-caps, .ed-row, .bl-grid, .bl-feat,
  .ns-stats, .ns-beats, .ns-princ, .ns-ant, .lg-grid,
  .training-capsulas, .cap-custom, .cap-custom-form
) > * { min-width: 0; }

/* Evita cortes en contenido largo sin afectar logos, badges o botones. */
:where(p, li, .ed-desc, .page-hero-sub, .section-sub, .faq-a, .acc-a-inner) {
  overflow-wrap: anywhere;
}

/* =========================================================
   MENÚ MÓVIL
   ========================================================= */
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-submenu-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(12, 31, 25, .14);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink, #111110);
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible,
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  border-color: var(--green, #93d433);
  outline: none;
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(5, 17, 13, .52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility 0s linear .24s;
  backdrop-filter: blur(2px);
}
.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .24s ease;
}

.mobile-menu {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  width: min(90vw, 410px);
  height: 100vh;
  height: 100dvh;
  background: var(--white, #fff);
  box-shadow: -18px 0 48px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path .28s ease, visibility 0s linear .28s;
}
.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path .28s ease;
}
.mobile-menu-header {
  min-height: 68px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border, #e3e3dc);
}
.mobile-menu-header .nav-logo { padding: 0; }
.mobile-menu-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  border: 1px solid rgba(12, 31, 25, .14);
  font-size: 27px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 18px 26px;
}
.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.mobile-nav-links > li {
  position: relative;
  border-bottom: 1px solid var(--border, #e3e3dc);
}
.mobile-menu-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mobile-nav-links > li > a,
.mobile-menu-item-row > a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  color: var(--ink, #111110) !important;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.3;
  padding: 16px 2px !important;
  text-decoration: none;
}
.mobile-nav-links .caret { display: none; }
.mobile-submenu-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  color: var(--ink-50, #888780);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.mobile-submenu-toggle::before { content: '⌄'; transform: translateY(-2px); }
.mobile-submenu-toggle:hover,
.mobile-submenu-toggle:focus-visible {
  background: var(--green-pale, #f4fae8);
  outline: none;
}
.mobile-nav-links > li.mobile-open .mobile-submenu-toggle { transform: rotate(180deg); }

.mobile-nav-links .mega {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: none !important;
  margin: 0 0 14px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border, #e3e3dc) !important;
  background: var(--ink-04, #f6f6f3) !important;
  box-shadow: none !important;
}
.mobile-nav-links > li.mobile-open > .mega { display: block !important; }
.mobile-nav-links .mega-cols,
.mobile-nav-links .mega-secondary,
.mobile-nav-links .mega-sec-items {
  display: block !important;
  width: 100% !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.mobile-nav-links .mega-section-label,
.mobile-nav-links .mega-sec-label {
  display: block;
  margin: 0 0 10px;
  color: var(--ink-50, #888780) !important;
  font-size: 10px !important;
  letter-spacing: .08em;
  line-height: 1.35;
}
.mobile-nav-links .mega-col {
  width: 100% !important;
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border, #e3e3dc) !important;
  background: transparent !important;
}
.mobile-nav-links .mega-col:last-child { margin-bottom: 0 !important; }
.mobile-nav-links .mega-col-head {
  display: block !important;
  padding: 0 0 7px !important;
  text-decoration: none;
}
.mobile-nav-links .mega-col-head h5 {
  color: var(--ink, #111110) !important;
  font-size: 14px !important;
  line-height: 1.35;
  margin: 0 0 3px !important;
}
.mobile-nav-links .mega-col-head p {
  color: var(--ink-50, #888780) !important;
  font-size: 12px !important;
  line-height: 1.45;
  margin: 0 !important;
}
.mobile-nav-links .mega-sub {
  display: block !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.mobile-nav-links .mega-sub li { margin: 0 !important; }
.mobile-nav-links .mega-sub a,
.mobile-nav-links .mega-sec-items a {
  display: block !important;
  padding: 8px !important;
  margin: 1px 0 !important;
  border-radius: 8px;
  color: var(--ink-50, #888780) !important;
  font-size: 13px !important;
  line-height: 1.35;
  text-decoration: none;
  white-space: normal !important;
}
.mobile-nav-links .mega-sub a:hover,
.mobile-nav-links .mega-sec-items a:hover {
  background: var(--green-pale, #f4fae8);
  color: var(--ink, #111110) !important;
}
.mobile-menu-cta {
  display: flex !important;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 12px 18px !important;
  border-radius: 999px;
  background: var(--green, #93d433);
  color: var(--ink, #111110) !important;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}
body.mobile-menu-open { overflow: hidden !important; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {
  nav .nav-inner {
    width: 100%;
    max-width: 100%;
    min-height: 66px;
    padding-left: 22px !important;
    padding-right: 22px !important;
    gap: 14px;
  }

  /* Fallback: el menú desktop sigue disponible si JS falla. */
  html:not(.mobile-menu-ready) nav .nav-links {
    display: flex !important;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  html.mobile-menu-ready nav .nav-links { display: none !important; }
  html.mobile-menu-ready .mobile-menu-toggle { display: inline-flex; }
  nav .nav-cta { margin-left: auto; white-space: nowrap; }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  section { padding-top: 56px; padding-bottom: 56px; }

  .subnav { width: 100%; max-width: 100vw; overflow: hidden; }
  .subnav-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 24px !important;
    padding-right: 24px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .two-col,
  .two-col-3-2,
  .split,
  .spine-layout,
  .free-tier,
  .ct-grid,
  .ct-row,
  .addin-feature,
  .lg-grid { grid-template-columns: 1fr !important; }

  .card-grid,
  .cycle-row,
  .feature-grid,
  .feature-grid-2,
  .q-grid,
  .why-grid,
  .pillar3,
  .biz-grid,
  .bl-grid,
  .bl-feat,
  .ns-stats,
  .ns-beats,
  .ns-princ { grid-template-columns: 1fr !important; }

  .combine-grid,
  .support-grid,
  .highlights,
  .footer-grid,
  .ed-grid,
  .ed-row,
  .eap-stats,
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .pkg-pricing-grid { grid-template-columns: 1fr !important; }
  .free-items { grid-template-columns: 1fr !important; }
  .eap-caps,
  .eap-support,
  .ld-criteria { grid-template-columns: 1fr !important; }

  .ns-ant { grid-template-columns: 1fr !important; text-align: center; }
  .ns-ant-badge { margin-left: auto; margin-right: auto; }
  .lg-nav { position: static !important; flex-direction: row; flex-wrap: wrap; }

  .cap-custom { align-items: stretch !important; }
  .cap-custom-text,
  .cap-custom-form { width: 100%; min-width: 0 !important; }
  .cap-custom-form { flex-wrap: wrap; }
  .cap-input { min-width: 0 !important; }

  .cmp-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cta-strip-inner { flex-direction: column !important; align-items: flex-start !important; }
  .footer-bottom { gap: 18px; }
}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 700px) {
  nav .nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px;
  }
  nav .nav-logo { font-size: 23px !important; flex: 0 1 auto; }
  nav .nav-cta { display: none !important; }
  .mobile-menu-toggle { margin-left: auto; }

  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section { max-width: 100%; padding-top: 48px; padding-bottom: 48px; }

  .page-hero h1,
  .hero h1,
  h1 { hyphens: auto; }

  .products-primary,
  .products-grid,
  .card-grid,
  .cycle-row,
  .combine-grid,
  .support-grid,
  .highlights,
  .feature-grid,
  .feature-grid-2,
  .ed-grid,
  .ed-row,
  .eap-stats,
  .stat-row,
  .pkg-pricing-grid,
  .free-items,
  .footer-grid { grid-template-columns: 1fr !important; }

  .pkg-price-card {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }
  .pkg-price-tag { text-align: left !important; white-space: normal !important; }

  .custom-cta,
  .free-tier,
  .cta-inner,
  .cta-strip-inner,
  .footer-bottom,
  .bl-news,
  .cap-custom {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .custom-cta > a,
  .cta-strip-actions,
  .cta-strip-actions a { width: 100%; text-align: center; }

  .training-capsulas { width: 100%; }
  .training-capsulas > * { min-width: 0 !important; }
  .cap-item { flex-wrap: wrap; }
  .cap-item .cap-req { margin-left: 0 !important; width: 100%; }

  .bl-news-text,
  .bl-news-form { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; }
  .bl-news-form { flex-direction: column !important; gap: 10px !important; }
  .bl-news-form > input[type="email"],
  .bl-news-form > .btn-primary { width: 100% !important; min-width: 0 !important; }
  .bl-news-form .privacy-consent { display: flex !important; width: 100% !important; align-items: flex-start !important; }
  .bl-news-form .privacy-consent input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 3px 0 0 !important;
  }
  .bl-news-form .privacy-consent .privacy-link {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start !important; }
  .footer-socials a { width: 44px !important; height: 44px !important; }

  .wa-float {
    width: 48px !important;
    height: 48px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
  .wa-float svg { width: 25px !important; height: 25px !important; }

  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-outline-green,
  button:not(.mobile-submenu-toggle):not(.mobile-menu-close):not(.mobile-menu-toggle) {
    min-height: 44px;
  }

  .dx-ladder { flex-wrap: wrap; }
  .dx-rung { min-width: 44%; }
  .cs-body { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cmp-scroll-hint::before { content: '↔ '; }
}

@media (max-width: 640px) {
  .support-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .support-inner .support-card { width: 100% !important; min-width: 0 !important; }
  .cap-custom { padding: 22px 18px !important; gap: 18px !important; }
  .cap-custom-form { flex-direction: column !important; }
  .cap-custom-form .btn-primary,
  .cap-custom-form button,
  .cap-custom-form input { width: 100% !important; }
  .subnav-inner { padding-left: 18px !important; padding-right: 18px !important; }
  .dx-quiz { padding: 24px 18px !important; }
}

@media (max-width: 520px) {
  .stats-grid,
  .stat-row,
  .eap-stats { grid-template-columns: 1fr !important; }
  .stat-item { padding: 30px 22px !important; }
}

@media (max-width: 420px) {
  .mobile-menu { width: 94vw; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .free-items,
  .combine-grid { grid-template-columns: 1fr !important; }
  .footer-col a { display: inline-block; padding: 4px 0; }
}

@media (min-width: 721px) {
  .cmp-scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-overlay,
  .mobile-menu-toggle span { transition: none !important; }
}

/* Ajustes de componentes con contenido dinámico o tablas anchas. */
/* El detalle de cada nivel debe fluir verticalmente. En el CSS base se
   presenta como flex, lo que comprime el contenido cuando hay varios
   criterios. Esta regla conserva el encabezado interno en fila y deja
   que descripción, criterios y mensaje MICRO ocupen todo el ancho. */
.ladder-detail {
  display: block !important;
}
.ladder-detail > * { min-width: 0; }

@media (max-width: 700px) {
  .cmp-prod-title { flex-wrap: wrap; }
  .ladder-detail {
    flex-direction: column !important;
    padding: 22px 18px !important;
  }
  .ld-head { flex-direction: column; gap: 10px; }
  .ld-criteria li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ld-crit-min {
    white-space: normal !important;
    text-align: left !important;
  }
  .ld-micro { overflow-wrap: anywhere; }
}

.ladder-detail .ld-head { margin-bottom: 14px; }

@media (max-width: 700px) {
  .version-grid { grid-template-columns: 1fr !important; }
}

/* Metodología · escalera de madurez
   Se amplía la visual sin alterar su proporción ni su comportamiento móvil. */
.compact-maturity .ladder-svg {
  width: min(100%, 840px) !important;
  max-height: none !important;
  margin: 0 auto 18px !important;
}

@media (max-width: 700px) {
  .compact-maturity .ladder-svg {
    width: 100% !important;
    margin-bottom: 14px !important;
  }
}


@media (max-width: 900px) {
  .page-comparar-ediciones .cmp-note-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-comparar-ediciones .cmp-note {
    padding: 16px;
  }
  .page-comparar-ediciones .cmp-note-item {
    padding: 11px 12px;
  }
}