.page-kit-fit {
  --kf-fixed-header-h: 188px;
  --kf-text: #0f172a;
  --kf-muted: #4b6079;
  /* === kit-fit: migración paleta v4 ===
     Reapunta las variables --kf-* a los tokens --ppk-* (styles.css :root).
     Migra de un golpe titulares, superficies, bordes y foco a la paleta v4. */
  --kf-primary-900: var(--ppk-blue-900);
  --kf-primary-800: var(--ppk-blue-800);
  --kf-primary-700: var(--ppk-blue-700);
  --kf-primary-600: var(--ppk-accent);
  --kf-primary-100: var(--ppk-surface-accent);
  --kf-surface: #ffffff;
  --kf-surface-soft: var(--ppk-surface-card);
  --kf-border: var(--ppk-border-card);
  --kf-focus: 3px solid var(--ppk-focus-ring);
  /* === fin migración paleta v4 === */
  --kf-shadow-sm: 0 8px 20px rgba(8, 38, 74, 0.1);
  --kf-shadow-md: 0 12px 26px rgba(8, 38, 74, 0.14);
  --kf-radius-sm: 10px;
  --kf-radius-md: 14px;
  --kf-radius-lg: 20px;

  color: var(--kf-text);
  font-family: "Avenir Next", Montserrat, "Segoe UI", Helvetica, Arial,
    sans-serif;
}

.page-kit-fit :focus-visible {
  outline: var(--kf-focus);
  outline-offset: 3px;
}

.page-kit-fit .btn {
  min-height: 44px;
  font-weight: 600;
}

.page-kit-fit .kf-skip-link {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 2300;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--kf-primary-900);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: top 160ms ease;
}

.page-kit-fit .kf-skip-link:focus-visible {
  top: 12px;
}

body.page-kit-fit #user-banner,
body.page-kit-fit #station-switch-trigger,
body.page-kit-fit .station-chip-item,
body.page-kit-fit .station-chip,
body.page-kit-fit .user-banner {
  display: none !important;
}

body.page-kit-fit .kf-hero.site-header.site-topbar {
  position: fixed;
  inset: 0 0 auto;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2200;
  margin: 0;
  border-bottom: 1px solid rgba(18, 82, 142, 0.2);
  background: var(--ppk-surface-accent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(7, 28, 56, 0.1);
}

/* === kit-fit: la animación page-enter del body (styles.css ~11796, anima transform
   con fill-mode:both) crea un containing block que rompe el header position:fixed — incluso con
   el transform computado en none, porque una animación de transform "aplicada" sigue creando
   containing block. Hay que desactivar la ANIMACIÓN (no solo el transform), scopeado a kit-fit.
   Mismo patrón que el reset de modales en styles.css:11808. Tradeoff: kit-fit pierde la
   animación de entrada (las hermanas la conservan). === */
body.page-kit-fit {
  animation: none !important;
  transform: none !important;
}
/* === fin fix header fixed === */

body.page-kit-fit .kf-hero.site-header.site-topbar::before,
body.page-kit-fit .kf-hero.site-header.site-topbar::after {
  display: none !important;
}

body.page-kit-fit .kf-topbar {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--ppk-surface-accent);
}

body.page-kit-fit .kf-hero .logo-strip,
body.page-kit-fit .kf-hero .partners-bar {
  background: var(--ppk-surface-accent);
}

body.page-kit-fit .kf-hero .logo-strip::before,
body.page-kit-fit .kf-hero .partners-bar::before {
  display: none !important;
}

/* === kit-fit header-hero: headline + shrink-on-scroll === */
/* Fila de título (H1) dentro del header fijo */
body.page-kit-fit .kf-headline {
  background: var(--ppk-surface-accent);
  padding: 10px 0 12px;
  border-top: 1px solid rgba(18, 82, 142, 0.12);
  transition:
    padding 200ms ease,
    background-color 200ms ease;
}

body.page-kit-fit .kf-headline__title {
  margin: 0;
  color: var(--ppk-blue-900);
  font-size: clamp(1.72rem, 3.2vw, 2.18rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.014em;
  text-align: center;
  transition:
    font-size 200ms ease,
    letter-spacing 200ms ease;
}

/* Colapso animado de las filas que se ocultan en condensado */
body.page-kit-fit .kf-topbar,
body.page-kit-fit .kf-hero .logo-strip.partners-bar {
  overflow: hidden;
  transition:
    max-height 200ms ease,
    opacity 200ms ease,
    padding 200ms ease;
}

/* Estado condensado: solo queda la barra delgada con el título */
body.page-kit-fit.kf-header-condensed .kf-topbar,
body.page-kit-fit.kf-header-condensed .kf-hero .logo-strip.partners-bar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body.page-kit-fit.kf-header-condensed .kf-headline {
  padding: 8px 0;
}

body.page-kit-fit.kf-header-condensed .kf-headline__title {
  font-size: clamp(1.02rem, 4.6vw, 1.22rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Sentinel del IntersectionObserver (fluye bajo el header en scroll 0) */
body.page-kit-fit .kf-scroll-sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.page-kit-fit .kf-headline,
  body.page-kit-fit .kf-headline__title,
  body.page-kit-fit .kf-topbar,
  body.page-kit-fit .kf-hero .logo-strip.partners-bar {
    transition: none;
  }
}
/* === /kit-fit header-hero: headline + shrink-on-scroll === */

.page-kit-fit .kf-topbar__title {
  margin: 0;
  font-size: clamp(1.68rem, 1.95vw, 2.18rem);
  letter-spacing: -0.012em;
}

.page-kit-fit .kf-main {
  padding: calc(var(--kf-fixed-header-h) + 12px) 0 40px;
}

.page-kit-fit .kf-main > .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-kit-fit .kf-page-heading {
  margin-bottom: 12px;
}

/* === kit-fit refactor: aire arriba del cuadro ===
   En mobile/tablet el shell no aporta margin-top al cuadro y queda pegado al
   header fijo (solo +12px del padding de .kf-main). Sumamos --space-4 (16px)
   donde el shell no lo pone; en desktop el shell ya da clamp(18px,2vw,30px). === */
@media (max-width: 1023px) {
  .page-kit-fit .kf-page-heading {
    margin-top: var(--space-4);
  }
}
/* === /kit-fit refactor: aire arriba del cuadro === */

.page-kit-fit .kf-page-heading__bar {
  width: 100%;
  /* === kit-fit refactor: jerarquía H2 cuadro ===
     El "cuadro" lo aportan los shells (mobile: tarjeta con gradiente en
     site-mobile-shell.css; desktop: panel de sección en site-desktop-shell.css). Acá alineamos
     el h2 a la izquierda — sin tarjeta propia, para no dejar un borde huérfano en desktop (el
     desktop-shell neutraliza bg/sombra/padding del bar pero no el borde). === */
  display: grid;
  place-items: start;
}

/* === kit-fit refactor: jerarquía H2 cuadro ===
   El H2 del cuadro baja a la escala de .section-title y se alinea a izquierda
   para dejar de competir con el H1 del header. El desktop-shell lo infla a
   clamp(2rem,2.6vw,3rem); se reimpone con mayor especificidad (body.page-kit-fit)
   más abajo, sin tocar el shell. === */
.page-kit-fit .kf-page-heading__title {
  margin: 0;
  color: var(--ppk-blue-900);
  text-align: left;
  font-size: clamp(1.48rem, 1.92vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-weight: 600;
}

/* Reimpone la escala/alineación unificadas sobre el default del desktop-shell.
   El shell usa `body.page-kit-fit .kf-page-heading__title` (0,2,1) dentro de un @media
   desktop y se carga DESPUÉS de kit-fit.css, así que con igual especificidad ganaba él.
   Subimos a (0,3,1) agregando el contenedor .kf-page-heading para reimponer sin tocar el shell. */
body.page-kit-fit .kf-page-heading .kf-page-heading__title {
  font-size: clamp(1.48rem, 1.92vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ppk-blue-900);
  text-align: left;
}
/* === /kit-fit refactor: jerarquía H2 cuadro === */

.page-kit-fit .kf-page-heading__meta {
  margin-top: 14px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--kf-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--kf-shadow-sm);
}

.page-kit-fit .kf-meta-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* === kit-fit: breadcrumb === */
.page-kit-fit .kf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.3;
}
.page-kit-fit .kf-breadcrumb__link {
  color: var(--ppk-blue-700);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.page-kit-fit .kf-breadcrumb__link:hover {
  color: var(--ppk-blue-900);
  text-decoration: underline;
}
.page-kit-fit .kf-breadcrumb__link:focus-visible {
  outline: var(--kf-focus);
  outline-offset: 2px;
}
.page-kit-fit .kf-breadcrumb__sep,
.page-kit-fit .kf-breadcrumb__current {
  color: var(--ppk-ink-soft);
}
/* === fin breadcrumb === */

.page-kit-fit .kf-meta-item {
  margin: 0;
  /* === kit-fit header-hero: meta-item densidad === */
  padding: 12px 14px;
  /* === /kit-fit header-hero: meta-item densidad === */
  /* === kit-fit: meta-item superficie plana v4 === */
  border: 1px solid var(--ppk-border-card);
  border-radius: 12px;
  background: var(--ppk-surface-card);
  /* === fin meta-item === */
  display: grid;
  gap: 4px;
}

.page-kit-fit .kf-meta-item__term {
  margin: 0;
  /* === kit-fit header-hero: dt densidad === */
  font-size: 0.8rem;
  /* === /kit-fit header-hero: dt densidad === */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kf-primary-900);
}

.page-kit-fit .kf-meta-item__desc {
  margin: 0;
  font-size: clamp(0.98rem, 1.02vw, 1.03rem);
  line-height: 1.5;
  /* === kit-fit header-hero: dd al gris AA del sistema === */
  color: var(--ppk-ink-soft);
  /* === /kit-fit header-hero: dd color === */
  overflow-wrap: anywhere;
}

/* === kit-fit refactor: link a Comunicación de resultados desde la NOTA === */
.page-kit-fit .kf-meta-item__link {
  color: var(--ppk-blue-700);
  font-weight: 600;
  text-decoration: underline;
  border-radius: 4px;
}
.page-kit-fit .kf-meta-item__link:hover {
  color: var(--ppk-blue-900);
}
/* === /kit-fit refactor: link NOTA === */

/* === kit-fit operativa: ficha compacta (franja de 4 micro-datos) ===
   Reemplaza el cuadro de 4 tarjetas grandes (.kf-page-heading__meta / .kf-meta-grid)
   por una franja liviana: label chico (uppercase) + valor. Sin tarjeta por ítem. === */
.page-kit-fit .kf-fichabar {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ppk-border-card);
  border-radius: 14px;
  background: var(--ppk-surface-card);
}

.page-kit-fit .kf-fichabar__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.page-kit-fit .kf-fichabar__item {
  margin: 0;
  display: grid;
  gap: 2px;
}

.page-kit-fit .kf-fichabar__term {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ppk-blue-700);
}

.page-kit-fit .kf-fichabar__value {
  margin: 0;
  font-size: clamp(0.95rem, 1vw, 1rem);
  line-height: 1.45;
  color: var(--kf-text);
  overflow-wrap: anywhere;
}

.page-kit-fit .kf-fichabar__link {
  color: var(--ppk-blue-700);
  font-weight: 600;
  text-decoration: underline;
  border-radius: 4px;
}

.page-kit-fit .kf-fichabar__link:hover {
  color: var(--ppk-blue-900);
}
/* === /kit-fit operativa: ficha compacta === */

.page-kit-fit [id] {
  scroll-margin-top: calc(var(--kf-fixed-header-h) + 16px);
}

.page-kit-fit .kf-section {
  margin-bottom: var(--space-4);
}

.page-kit-fit .kf-panel,
.page-kit-fit .kf-card {
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius-lg);
  box-shadow: var(--kf-shadow-sm);
  padding: 22px;
}

.page-kit-fit .kf-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-kit-fit .kf-section-header {
  margin-bottom: 10px;
}

.page-kit-fit .kf-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-kit-fit .kf-section-head__actions {
  display: inline-flex;
  align-items: center;
}

.page-kit-fit .kf-panel__title,
.page-kit-fit .section-title {
  margin: 0;
  color: var(--kf-primary-900);
  font-size: clamp(1.48rem, 1.92vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-weight: 600;
}

.page-kit-fit .kf-card__title {
  margin: 0;
  color: var(--kf-primary-900);
  font-size: clamp(1.32rem, 1.68vw, 1.48rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-weight: 620;
}

.page-kit-fit .kf-panel__subtitle {
  margin: 8px 0 0;
  color: var(--kf-muted);
  font-weight: 500;
}

.page-kit-fit .section-subtitle,
.page-kit-fit .kf-panel > p,
.page-kit-fit .kf-panel__subtitle,
.page-kit-fit .kf-list,
.page-kit-fit .kf-faq p {
  font-size: clamp(0.97rem, 1.02vw, 1.02rem);
  line-height: 1.5;
}

.page-kit-fit .kf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.page-kit-fit .kf-actions--quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-kit-fit .kf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.page-kit-fit .kf-grid--kit {
  grid-template-columns: 1fr;
  align-items: start;
  justify-items: center;
}

.page-kit-fit .kf-grid--kit .kf-card {
  height: auto;
}

.page-kit-fit .kf-kit-merged {
  --kf-kit-column-w: clamp(272px, 43.2vw, 512px);
  --kf-kit-shell-w: calc(var(--kf-kit-column-w) + 44px);
  display: grid;
  gap: 12px;
  inline-size: min(100%, var(--kf-kit-shell-w));
  justify-self: center;
}

.page-kit-fit .kf-figure.kf-kit-merged__media,
.page-kit-fit .kf-kit-merged__components {
  inline-size: min(100%, var(--kf-kit-column-w));
  margin-inline: auto;
}

/* === kit-fit refactor: kit a 2 columnas en ≥768 (foto izq acotada | componentes der) ===
   En tablet/desktop la foto deja de empujar verticalmente: va en la columna
   izquierda acotada y los componentes a la derecha. En mobile colapsa a 1 col
   (reglas base + @media max-width:900px). === */
@media (min-width: 768px) {
  .page-kit-fit .kf-grid--kit {
    justify-items: stretch;
  }

  .page-kit-fit .kf-kit-merged {
    grid-template-columns: minmax(0, clamp(220px, 30vw, 320px)) 1fr;
    align-items: start;
    column-gap: 18px;
    inline-size: 100%;
  }

  .page-kit-fit .kf-card.kf-kit-merged > .kf-card__title {
    grid-column: 1 / -1;
  }

  .page-kit-fit .kf-figure.kf-kit-merged__media,
  .page-kit-fit .kf-kit-merged__components {
    inline-size: 100%;
    margin-inline: 0;
  }
}
/* === /kit-fit refactor: kit 2 columnas === */

.page-kit-fit .kf-kit-merged__frame {
  inline-size: 100%;
  aspect-ratio: auto;
  padding: 0;
  border-radius: var(--kf-radius-md);
  overflow: hidden;
  /* === kit-fit: frame wash turquesa v4 === */
  background: linear-gradient(145deg, var(--ppk-teal-050), #fff);
  /* === fin frame wash === */
}

.page-kit-fit .kf-kit-merged__frame img {
  inline-size: 100%;
  block-size: auto;
  /* === kit-fit refactor: foto acotada (antes max-height:none dejaba ~1 viewport) === */
  max-height: clamp(260px, 38vh, 360px);
  object-fit: contain;
  background: transparent;
}

.page-kit-fit .kf-kit-merged__components {
  padding-top: 4px;
}

.page-kit-fit .kf-kit-merged__components-title {
  margin: 0 0 6px;
  text-align: left;
  font-size: clamp(1.02rem, 1.18vw, 1.12rem);
  font-weight: 650;
  color: var(--kf-primary-900);
}

.page-kit-fit .kf-kit-merged__components .kf-list {
  margin: 0;
  padding-left: 20px;
  gap: 8px;
}

.page-kit-fit .kf-list {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  line-height: 1.5;
}

.page-kit-fit .kf-list li::marker {
  color: var(--kf-primary-600);
}

.page-kit-fit .kf-figure {
  margin: 12px 0 0;
}

.page-kit-fit .kf-figure__link {
  display: block;
  border-radius: var(--kf-radius-md);
  border: 1px solid var(--kf-border);
  box-shadow: 0 8px 16px rgba(8, 38, 74, 0.1);
  overflow: hidden;
  cursor: zoom-in;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.page-kit-fit .kf-figure__link:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 95, 166, 0.32);
  box-shadow: var(--kf-shadow-md);
}

.page-kit-fit .kf-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: linear-gradient(145deg, var(--ppk-teal-050), #fff);
}

.page-kit-fit .kf-figure.kf-kit-merged__media {
  margin: 0;
}

.page-kit-fit .kf-kit-merged__frame > img {
  block-size: auto;
  /* === kit-fit refactor: foto acotada (override de cierre, antes max-height:none) === */
  max-height: clamp(260px, 38vh, 360px);
  object-fit: contain;
  background: transparent;
}

.page-kit-fit .kf-figure__caption {
  margin: 8px 0 0;
  color: var(--kf-muted);
  font-size: 0.93rem;
}

.page-kit-fit .kf-role-legend {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.page-kit-fit .kf-info-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15, 95, 166, 0.32);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.96),
    rgba(232, 244, 255, 0.9)
  );
  color: var(--kf-primary-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(8, 38, 74, 0.14);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.page-kit-fit .kf-info-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 95, 166, 0.46);
  box-shadow: 0 8px 16px rgba(8, 38, 74, 0.2);
}

.page-kit-fit .kf-role-popover {
  position: absolute;
  right: calc(100% + 12px);
  left: auto;
  top: 0;
  z-index: 50;
  width: max-content;
  min-width: 300px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: var(--kf-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(
    160deg,
    var(--kf-primary-700),
    var(--kf-primary-900)
  );
  color: #fff;
  box-shadow: 0 16px 26px rgba(8, 38, 74, 0.3);
}

.page-kit-fit .kf-role-popover[hidden] {
  display: none;
}

.page-kit-fit .kf-role-popover::after {
  content: "";
  position: absolute;
  left: calc(100% - 5px);
  right: auto;
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--kf-primary-800, #0d4a80);
  transform: rotate(45deg);
}

.page-kit-fit .kf-role-popover__title {
  margin: 0 0 8px;
  font-size: 0.96rem;
  line-height: 1.3;
  font-weight: 600;
}

.page-kit-fit .kf-role-popover__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.page-kit-fit .kf-role-popover__list li {
  font-size: 0.9rem;
  line-height: 1.4;
}

.page-kit-fit .kf-steps {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-kit-fit .kf-step {
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius-md);
  background: var(--kf-surface-soft);
  box-shadow: 0 4px 12px rgba(8, 38, 74, 0.08);
  padding: 0;
}

.page-kit-fit .kf-step[open] {
  /* === kit-fit: step abierto borde-izq acento v4 === */
  background: #fff;
  border-color: var(--ppk-border-card);
  border-left: 3px solid var(--ppk-accent);
  box-shadow: var(--kf-shadow-sm);
  /* === fin step abierto === */
}

.page-kit-fit .kf-step > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--kf-primary-900);
  transition: background-color 0.2s ease;
}

.page-kit-fit .kf-step > summary::-webkit-details-marker {
  display: none;
}

.page-kit-fit .kf-step > summary::after {
  content: "";
  margin-left: auto;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(15, 95, 166, 0.24);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.page-kit-fit .kf-step > summary:hover {
  background-color: rgba(15, 95, 166, 0.04);
}

.page-kit-fit .kf-step > summary:focus-visible {
  outline: 2px solid rgba(15, 95, 166, 0.42);
  outline-offset: 2px;
  border-radius: var(--kf-radius-md);
}

.page-kit-fit .kf-step[open] > summary::after {
  transform: rotate(180deg);
  background-color: var(--kf-primary-100);
  border-color: rgba(15, 95, 166, 0.36);
}

.page-kit-fit .kf-step__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--kf-primary-100);
  color: var(--kf-primary-900);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.page-kit-fit .kf-step__title {
  flex: 1;
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 600;
}

.page-kit-fit .kf-step > .kf-list,
.page-kit-fit .kf-step > .kf-role-list {
  margin-left: 14px;
  margin-right: 14px;
}

.page-kit-fit .kf-step > .kf-list {
  margin-top: 0;
  margin-bottom: 0;
}

.page-kit-fit .kf-role-list {
  margin-top: 10px;
  margin-bottom: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.page-kit-fit .kf-role-list abbr {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 95, 166, 0.22);
  background: #fff;
  color: var(--kf-primary-900);
  font-size: 0.83rem;
  font-weight: 600;
}

.page-kit-fit .kf-inline-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.page-kit-fit .kf-inline-hint__trigger {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(15, 95, 166, 0.36);
  background: #fff;
  color: var(--kf-primary-900);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.page-kit-fit .kf-inline-hint__popover {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: min(270px, calc(100% - 24px));
  padding: 10px 12px;
  border-radius: var(--kf-radius-sm);
  background: linear-gradient(
    160deg,
    var(--kf-primary-700),
    var(--kf-primary-900)
  );
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 24px rgba(8, 38, 74, 0.28);
  font-size: 0.86rem;
  line-height: 1.35;
}

.page-kit-fit .kf-inline-hint__popover[hidden] {
  display: none;
}

.page-kit-fit .kf-inline-hint__popover::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  background: var(--kf-primary-900);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* === kit-fit operativa: circuito Test FIT (eje · spine + badges numerados) ===
   Reemplaza el acordeón de 9 pasos por 3 pasos estáticos. Paso 1 = tarjeta
   principal (fondo blanco, spine acento); Pasos 2-3 = tarjetas-resumen con CTA
   (fondo --ppk-surface-card, visualmente distintas). Marcador numerado en
   --ppk-blue-700 (texto blanco 6.4:1, AA holgado; --ppk-accent quedaría al
   límite 4.8:1). Línea conectora vertical entre pasos vía ::before. === */
.page-kit-fit .kf-circuit {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-kit-fit .kf-circuit__item {
  position: relative;
}

/* Línea conectora del spine: une el marcador de un paso con el siguiente */
.page-kit-fit .kf-circuit__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: -14px;
  width: 2px;
  background: var(--ppk-border-card);
  z-index: 0;
}

.page-kit-fit .kf-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 14px;
  border: 1px solid var(--ppk-border-card);
  border-radius: var(--kf-radius-md);
  padding: 16px;
}

.page-kit-fit .kf-stage--main {
  background: var(--kf-surface);
  border-left: 3px solid var(--ppk-accent);
  box-shadow: var(--kf-shadow-sm);
}

.page-kit-fit .kf-stage--summary {
  background: var(--ppk-surface-card);
  box-shadow: 0 4px 12px rgba(8, 38, 74, 0.06);
}

.page-kit-fit .kf-stage__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ppk-blue-700);
  color: #fff;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1;
}

.page-kit-fit .kf-stage--summary .kf-stage__marker {
  background: var(--ppk-blue-900);
}

.page-kit-fit .kf-stage__body {
  min-width: 0;
}

.page-kit-fit .kf-stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.page-kit-fit .kf-stage__title {
  margin: 0;
  color: var(--ppk-blue-900);
  font-size: clamp(1.18rem, 1.5vw, 1.32rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.page-kit-fit .kf-stage__pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ppk-surface-accent);
  color: var(--ppk-blue-900);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-kit-fit .kf-stage .kf-list {
  margin: 0;
}

.page-kit-fit .kf-stage__cta {
  margin: 12px 0 0;
}

.page-kit-fit .kf-stage__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ppk-blue-700);
  font-weight: 600;
  text-decoration: underline;
  border-radius: 4px;
}

.page-kit-fit .kf-stage__link::after {
  content: "›";
  font-weight: 700;
  text-decoration: none;
}

.page-kit-fit .kf-stage__link:hover {
  color: var(--ppk-blue-900);
}
/* === /kit-fit operativa: circuito Test FIT === */

.page-kit-fit .kf-critical-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.page-kit-fit .kf-critical-card {
  /* === kit-fit: critical cards unificadas v4 (severidad por franja+icono+texto, WCAG 1.4.1) === */
  /* === kit-fit operativa: franja superior vía BARRA INTERNA (.kf-critical-card__bar),
     no border-top — evita la esquina cuadrada que deja un border de un solo lado sobre
     border-radius. La card es overflow:hidden y la barra ocupa el ancho completo arriba. === */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ppk-border-card);
  border-radius: var(--kf-radius-md);
  background: var(--ppk-surface-card);
  padding: 12px;
  /* === kit-fit refactor: columna para apilar chip de severidad + título === */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* === fin critical cards base === */
}

/* Barra interna superior (reemplazo del border-top con border-radius) */
.page-kit-fit .kf-critical-card__bar {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--ppk-accent);
}
/* === /kit-fit operativa: barra interna critical === */

.page-kit-fit .kf-critical-card h3 {
  margin: 0;
  color: var(--kf-primary-900);
  font-size: 0.98rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-kit-fit .kf-critical-card p {
  margin: 0;
  color: var(--kf-text);
  line-height: 1.45;
}

/* === kit-fit refactor: iconos de severidad vía mask-image para colorearlos desde el token
   --ppk-blue-700 (var() no se puede interpolar dentro de un url() data-URI). El color del trazo
   ahora sale de background-color; el SVG solo define la forma (alpha de la máscara). === */
.page-kit-fit .kf-critical-card--rotulado h3::before,
.page-kit-fit .kf-critical-card--cold h3::before,
.page-kit-fit .kf-critical-card--time h3::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: var(--ppk-blue-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

.page-kit-fit .kf-critical-card--rotulado h3::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M7.5 9.5h9M7.5 13h6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M7.5 9.5h9M7.5 13h6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-kit-fit .kf-critical-card--cold h3::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 3v18M4.2 7.5 19.8 16.5M19.8 7.5 4.2 16.5M8.5 4.7 12 8.2l3.5-3.5M8.5 19.3 12 15.8l3.5 3.5M4.5 12h5M14.5 12h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 3v18M4.2 7.5 19.8 16.5M19.8 7.5 4.2 16.5M8.5 4.7 12 8.2l3.5-3.5M8.5 19.3 12 15.8l3.5 3.5M4.5 12h5M14.5 12h5'/%3E%3C/svg%3E");
}

.page-kit-fit .kf-critical-card--time h3::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 9.5v4l2.8 1.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.5h8M6 6.5h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 9.5v4l2.8 1.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.5h8M6 6.5h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* === kit-fit refactor: severidad por franja unificada (--ppk-accent en las 3) + icono + rótulo.
   Se eliminan los border-top --info (#1E76A0) y --warn ámbar (#C2740F): la franja superior
   ya es var(--ppk-accent) en la regla base .kf-critical-card. Severidad la comunica el chip
   .kf-critical-card__tag + el icono (WCAG 1.4.1, no solo color). === */
.page-kit-fit .kf-critical-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--kf-primary-100);
  color: var(--kf-primary-900);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* === /kit-fit refactor: critical severidad === */

.page-kit-fit .kf-faq {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.page-kit-fit .kf-faq details {
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius-md);
  background: var(--kf-surface-soft);
  padding: 10px 12px;
}

.page-kit-fit .kf-faq summary {
  cursor: pointer;
  color: var(--kf-primary-900);
  font-weight: 600;
}

.page-kit-fit .kf-faq p {
  margin: 8px 0 0;
  color: var(--kf-text);
  line-height: 1.5;
}

.page-kit-fit .kf-panel__title--faq {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-kit-fit .kf-panel__title--faq::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: no-repeat center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 4 3.8 18.2h16.4L12 4ZM12 9.5v4.5M12 17h.01'/%3E%3C/svg%3E");
}

.page-kit-fit .kf-results {
  margin-top: 14px;
  /* === kit-fit: resultados wash turquesa v4 === */
  border: 1px solid var(--ppk-border-card);
  border-radius: var(--kf-radius-md);
  background: linear-gradient(150deg, var(--ppk-teal-050), #fff);
  /* === fin resultados === */
  padding: 14px;
}

.page-kit-fit .kf-results__title {
  margin: 0;
  color: var(--kf-primary-900);
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  font-weight: 650;
}

.page-kit-fit .kf-results__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.page-kit-fit .kf-results__list li {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ppk-border-card);
  background: #fff;
  color: var(--kf-text);
  line-height: 1.5;
}

.page-kit-fit .kf-results__list strong {
  color: var(--kf-primary-900);
  font-weight: 700;
}

/* === kit-fit refactor: ítems FIT+/FIT− del circuito de resultados === */
.page-kit-fit .kf-results__item {
  border-left: 3px solid var(--ppk-accent);
}

/* === kit-fit operativa: nota dentro de resultados === */
.page-kit-fit .kf-results__note {
  margin: 10px 0 0;
  color: var(--kf-text);
  line-height: 1.5;
}

.page-kit-fit .kf-results__note strong {
  color: var(--ppk-blue-900);
  font-weight: 700;
}
/* === /kit-fit operativa: nota resultados === */

.page-kit-fit .kf-results__actions {
  margin-top: 12px;
}

.page-kit-fit .kf-results__actions .btn[disabled],
.page-kit-fit .kf-results__actions .btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
/* === /kit-fit refactor: ítems resultados === */

/* === kit-fit operativa: Referencia (chips livianos + foto + FAQ compacto) ===
   Condensa lo que antes eran secciones propias (Accesos rápidos, Errores
   frecuentes, Descargas). Chips en fila; debajo, foto del kit (referencia) y
   FAQ compacto en grilla 2col desktop / 1col mobile. === */
.page-kit-fit .kf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.page-kit-fit .kf-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ppk-border-card);
  background: var(--ppk-surface-accent);
  color: var(--ppk-blue-700);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.page-kit-fit .kf-chip:hover {
  border-color: rgba(21, 90, 150, 0.4);
  color: var(--ppk-blue-900);
}

.page-kit-fit .kf-chip:focus-visible {
  outline: var(--kf-focus);
  outline-offset: 2px;
}

.page-kit-fit .kf-ref-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, clamp(220px, 30vw, 320px)) 1fr;
  align-items: start;
  gap: 18px;
}

.page-kit-fit .kf-ref-figure {
  margin: 0;
}

.page-kit-fit .kf-ref-faq__title {
  margin: 0 0 10px;
  color: var(--ppk-blue-900);
  font-size: clamp(1.18rem, 1.5vw, 1.32rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

@media (max-width: 720px) {
  .page-kit-fit .kf-ref-grid {
    grid-template-columns: 1fr;
  }

  .page-kit-fit .kf-stage {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .page-kit-fit .kf-stage__marker {
    width: 36px;
    height: 36px;
    font-size: 1.04rem;
  }

  .page-kit-fit .kf-circuit__item:not(:last-child)::before {
    left: 17px;
    top: 38px;
  }
}
/* === /kit-fit operativa: Referencia === */

.page-kit-fit .kf-section--actions .kf-actions {
  justify-content: center;
}

.page-kit-fit .kf-media-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.page-kit-fit .kf-media-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-kit-fit .kf-media-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 21, 41, 0.54);
}

.page-kit-fit .kf-media-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(15, 95, 166, 0.26);
  border-radius: var(--kf-radius-lg);
  box-shadow: 0 20px 42px rgba(2, 6, 23, 0.28);
  padding: 14px;
}

.page-kit-fit .kf-media-modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(15, 95, 166, 0.28);
  background: #fff;
  color: var(--kf-primary-900);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.page-kit-fit .kf-media-modal__title {
  margin: 4px 42px 10px 2px;
  color: var(--kf-primary-900);
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 600;
}
/* Header del modal SOLO cuando muestra el video: título centrado y un escalón
   más grande. Los usos de PDF/imagen quedan intactos (selector :has, ya usado
   en este archivo). El botón cerrar va absoluto a la derecha, así que se
   simetrizan los márgenes laterales para que el texto centrado no lo tape. */
.page-kit-fit
  .kf-media-modal__dialog:has(.kf-media-modal__videowrap:not([hidden]))
  .kf-media-modal__title {
  margin-right: 42px;
  margin-left: 42px;
  text-align: center;
  font-size: 1.2rem;
}

.page-kit-fit .kf-media-modal img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  border-radius: var(--kf-radius-sm);
  background: linear-gradient(145deg, var(--ppk-teal-050), #fff);
}

.page-kit-fit .kf-media-modal__actions {
  margin: 10px 0 0;
}

.page-kit-fit .kf-media-modal__actions a {
  color: var(--kf-primary-700);
  font-weight: 600;
}

/* "Copiar enlace": botón de texto al estilo del enlace de acciones. */
.page-kit-fit .kf-media-modal__copy {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-left: 18px;
  color: var(--kf-primary-700);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.page-kit-fit .kf-media-modal__copy:hover,
.page-kit-fit .kf-media-modal__copy:focus-visible {
  text-decoration: underline;
}
.page-kit-fit .kf-media-modal__copy.is-copied {
  color: #0f7b52;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .page-kit-fit .kf-critical-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-kit-fit .kf-actions--quick {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .page-kit-fit .kf-meta-grid {
    grid-template-columns: 1fr;
  }

  .page-kit-fit .kf-page-heading__meta {
    padding: 14px 14px 16px;
  }
}

/* === kit-fit: meta-grid 2 cols en tablet === */
@media (min-width: 768px) and (max-width: 980px) {
  .page-kit-fit .kf-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* === fin meta-grid tablet === */

@media (max-width: 900px) {
  .page-kit-fit .kf-grid {
    grid-template-columns: 1fr;
  }

  .page-kit-fit .kf-grid--kit {
    justify-items: stretch;
  }

  .page-kit-fit .kf-kit-merged {
    inline-size: 100%;
  }

  .page-kit-fit .kf-figure.kf-kit-merged__media,
  .page-kit-fit .kf-kit-merged__components {
    inline-size: 100%;
  }

  .page-kit-fit .kf-panel,
  .page-kit-fit .kf-card {
    padding: 18px;
  }
}

@media (max-width: 720px) {
  .page-kit-fit .kf-topbar__title {
    font-size: clamp(1.2rem, 4.8vw, 1.52rem);
  }

  .page-kit-fit .kf-page-heading__bar {
    padding: 0;
    border-radius: 14px;
  }

  /* === kit-fit refactor: H2 cuadro mobile a la escala unificada === */
  .page-kit-fit .kf-page-heading__title {
    font-size: clamp(1.36rem, 4.6vw, 1.6rem);
  }

  .page-kit-fit .kf-figure.kf-kit-merged__media,
  .page-kit-fit .kf-kit-merged__components {
    inline-size: 100%;
  }

  .page-kit-fit .kf-kit-merged__frame {
    aspect-ratio: auto;
  }

  .page-kit-fit .kf-meta-item {
    padding: 12px 13px;
  }

  .page-kit-fit .kf-section-head {
    align-items: flex-start;
  }

  .page-kit-fit .kf-actions .btn,
  .page-kit-fit .kf-actions--quick .btn {
    width: 100%;
  }

  .page-kit-fit .kf-actions--quick {
    grid-template-columns: 1fr;
  }

  .page-kit-fit .kf-critical-grid {
    grid-template-columns: 1fr;
  }

  .page-kit-fit .kf-step > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-kit-fit .kf-role-popover {
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    min-width: 260px;
    max-width: calc(100vw - 24px);
  }

  .page-kit-fit .kf-role-popover::after {
    left: 50%;
    top: -5px;
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-kit-fit .kf-skip-link,
  .page-kit-fit .kf-step,
  .page-kit-fit .kf-figure__link,
  .page-kit-fit .kf-info-btn,
  .page-kit-fit .kf-media-modal {
    transition: none;
  }
}

/* ============================================================================
   === kit-fit micro-tanda espaciado (rama feature/kit-fit-operativa · HOLD) ===
   Diagnóstico medido con devtools (no a ojo). La reserva del header fijo
   (.kf-main padding-top) NO seguía el alto REAL del header compacto de kit-fit:
   se reservaban 200px (≥768) contra un header de 224-236px => la card "Guía de
   procedimientos" quedaba recortada bajo el header; y en ≤1024 el shell reservaba
   el header + un user-banner que kit-fit OCULTA (body.has-user-banner) => hueco.
   Acá la reserva sigue al alto REAL del header vía --app-header-h (auth-gate la
   sincroniza en cada resize) y el gap liviano lo aporta el margin-top de la card.
   El hueco inferior (desktop) salía de
   .site-main padding-bottom (112px, sin dock en desktop) + margin-bottom de la
   última sección + margin-top del footer; se baja al ritmo entre secciones.
   ========================================================================== */

/* TOP desktop ≥1025 · reserva = alto real del header (--app-header-h ~230);
   la card aporta su margin-top (2vw, ~26px) => gap. -4px deja 1280 en ~22px. */
body.page-kit-fit .kf-main {
  padding-top: calc(var(--app-header-h, 224px) - 4px);
}

/* La card recupera margin-top también en el borde exacto de 1024px: entre el
   shell mobile (≤1024) y el desktop (≥1025) quedaba en 0 => recorte en 1024. */
@media (max-width: 1024px) {
  .page-kit-fit .kf-page-heading {
    margin-top: var(--space-4);
  }
}

/* TOP ≤1024 (mobile/tablet) · el shell reserva header + un user-banner OCULTO
   en kit-fit (body.has-user-banner) => hueco. Reservamos solo el header real
   (--app-header-h) + 4px; card mt 16px => gap ~20px, estable en todo el rango.
   Spec (0,3,2) para ganarle a body.page-internal.has-user-banner .site-main
   (0,3,1 !important); la 2ª variante cubre 768-1024 (sin has-user-banner). */
@media (max-width: 1024px) {
  body.page-kit-fit.has-user-banner main.site-main,
  body.page-kit-fit main.site-main {
    padding-top: calc(var(--app-header-h, 172px) + 4px) !important;
  }
}

/* BOTTOM desktop ≥1025 (sin dock) · el hueco antes del footer baja al ritmo
   entre secciones: se neutraliza el margin-bottom redundante de la última
   sección y se recorta el padding-bottom del main (112px) a un paso de escala. */
@media (min-width: 1025px) {
  body.page-kit-fit main.kf-main {
    padding-bottom: var(--space-4);
  }
  body.page-kit-fit .kf-main .kf-section--actions {
    margin-bottom: 0;
  }
}

/* op-ficha-360 · ": " colgando tras "videocolonoscopía" en la ficha. Con
   overflow-wrap:anywhere el renglón parte antes de ":". A ≥360 la columna ya
   admite "videocolonoscopía:" entero => overflow-wrap:normal (sin overflow);
   <360 conserva anywhere (evita overflow del término largo en pantallas chicas). */
@media (min-width: 360px) {
  .page-kit-fit .kf-fichabar__value {
    overflow-wrap: normal;
  }
}
/* === /kit-fit micro-tanda espaciado === */

/* ============================================================================
   === kit-fit apple restyle (rama feature/kit-fit-operativa · HOLD) ===
   Restyle visual a lenguaje Apple/iOS sobre estructura y contenido CONGELADOS.
   Color SIEMPRE desde --ppk-*; solo se agregan tokens ESTRUCTURALES --kf-*.
   Scope al main de kit-fit (NO al header compartido). Cero gradientes; cards
   blancas + sombra suave; hairlines/tints decorativas (nunca texto); ritmo 8px.
   No toca el espaciado de la "micro-tanda" anterior (márgenes/reservas), solo
   superficies. Gana al desktop-shell (.kf-panel/.kf-page-heading 0,2,1) con
   cadenas (0,3,1) que incluyen .kf-main.
   ========================================================================== */

/* --- tokens estructurales --- */
:root {
  --kf-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", system-ui, sans-serif;
  --kf-r-card: 18px;
  --kf-r-ctl: 12px;
  --kf-hairline: rgba(12, 68, 124, 0.1);
  --kf-shadow:
    0 1px 2px rgba(16, 40, 80, 0.05), 0 10px 30px -12px rgba(16, 40, 80, 0.12);
  --kf-tint: rgba(95, 168, 224, 0.12);
  --kf-tint-strong: rgba(95, 168, 224, 0.2);
}

/* --- global: tipografía SF, aplanado de gradientes, card base apple --- */
.page-kit-fit .kf-main {
  font-family: var(--kf-font);
}
.page-kit-fit .kf-main .kf-panel__title,
.page-kit-fit .kf-main .section-title,
.page-kit-fit .kf-page-heading .kf-page-heading__title {
  letter-spacing: -0.015em;
  font-weight: 600;
}
.page-kit-fit .kf-main .section-subtitle,
.page-kit-fit .kf-main .kf-panel__subtitle {
  color: var(--kf-muted);
}
/* aplanar gradientes vivos */
.page-kit-fit .kf-main .kf-figure img,
.page-kit-fit .kf-media-modal img {
  background: #fff;
}
/* secciones = contenedor TRANSPARENTE; las cards son los elementos internos
   (ficha, cajones del circuito, grouped list de resultados, FAQ, foto). Esto
   aplana el "panel" que el desktop-shell pinta como card (gana con 0,3,1). */
.page-kit-fit .kf-main .kf-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 0;
}

/* --- 1 · ficha "Guía de procedimientos": título grande + card agrupada 2×2 --- */
/* aplanar el panel del page-heading (shells) => H2 título + card ficha aparte.
   Conserva margin-top (reserva del header de la micro-tanda); solo superficie. */
body.page-kit-fit .kf-main .kf-page-heading,
body.page-kit-fit .kf-main .kf-page-heading__bar {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
/* ficha = card blanca; cruz de hairlines vía grid gap:1px sobre fondo hairline */
.page-kit-fit .kf-main .kf-fichabar {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: var(--kf-r-card);
  background: #fff;
  box-shadow: var(--kf-shadow);
  overflow: hidden;
}
.page-kit-fit .kf-main .kf-fichabar__grid {
  gap: 1px;
  background: var(--kf-hairline);
}
.page-kit-fit .kf-main .kf-fichabar__item {
  background: #fff;
  padding: 18px 20px;
}
/* el valor "Comunicación de resultados" se ve igual que el resto (mismo peso,
   color, sin underline); sigue siendo enlace ⇒ affordance solo en hover/focus. */
.page-kit-fit .kf-main .kf-fichabar__link {
  color: var(--kf-text);
  font-weight: inherit;
  text-decoration: none;
}
.page-kit-fit .kf-main .kf-fichabar__link:hover {
  color: var(--ppk-blue-700);
  text-decoration: underline;
}

/* --- 2 · circuito del Test FIT (sección estrella): cajones apple --- */
.page-kit-fit .kf-main .kf-circuit {
  gap: 16px; /* aire entre cajones */
}
.page-kit-fit .kf-main .kf-stage {
  border: 0;
  border-radius: var(--kf-r-card);
  box-shadow: var(--kf-shadow);
  background: #fff;
  padding: 22px;
}
/* conector fino y elegante entre badges: hairline en el gap, alineado al centro
   del badge (padding 22 + marker 44/2 = 44 ⇒ left 43; mobile marker 36 ⇒ 39).
   z bajo las cards ⇒ se ve solo el tramo del gap (nodo → nodo). */
.page-kit-fit .kf-main .kf-circuit__item:not(:last-child)::before {
  content: "";
  display: block;
  position: absolute;
  left: 44px; /* centro real del badge @1280 (medido: pad 22 + 44/2) */
  top: 100%;
  width: 2px;
  height: 16px;
  background: var(--kf-hairline);
  z-index: 0;
}
@media (max-width: 720px) {
  .page-kit-fit .kf-main .kf-circuit__item:not(:last-child)::before {
    left: 40px; /* centro real del badge @360 (medido: pad 22 + 36/2) */
  }
}
/* paso principal: realce inset bien sutil (esquina intacta, sin border-left) */
.page-kit-fit .kf-main .kf-stage--main {
  box-shadow: inset 3px 0 0 0 var(--ppk-accent), var(--kf-shadow);
}
/* badge azul con profundidad sutil (sombra suave + highlight superior interno) */
.page-kit-fit .kf-main .kf-stage__marker,
.page-kit-fit .kf-main .kf-stage--summary .kf-stage__marker {
  background: var(--ppk-blue-700);
  font-weight: 600;
  box-shadow:
    0 2px 5px rgba(16, 40, 80, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
/* sin pills ⇒ jerarquía del título reforzada + aire antes de la lista */
.page-kit-fit .kf-main .kf-stage__head {
  margin-bottom: 12px;
}
.page-kit-fit .kf-main .kf-stage__title {
  letter-spacing: -0.015em;
  font-size: clamp(1.22rem, 1.55vw, 1.36rem);
}
/* acciones: filas con check SF azul alineado a la 1ª línea, sin bullets */
.page-kit-fit .kf-main .kf-stage .kf-list {
  list-style: none;
  padding-left: 0;
  gap: 10px;
}
.page-kit-fit .kf-main .kf-stage .kf-list li {
  display: flex;
  gap: 9px;
  padding-left: 0;
  line-height: 1.5;
}
.page-kit-fit .kf-main .kf-stage .kf-list li::marker {
  content: "";
}
.page-kit-fit .kf-main .kf-stage .kf-list li::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 2px; /* centro óptico con la primera línea */
  background: center / 17px 17px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23155A96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
/* "ver detalle": link iOS con chevron, sin subrayado */
.page-kit-fit .kf-main .kf-stage__link,
.page-kit-fit .kf-main .kf-stage__link:hover {
  text-decoration: none;
}
/* ícono temático: tubo de ensayo oblicuo (line-icon) como sello del título.
   Decorativo (pseudo-elemento, fuera del árbol de accesibilidad). */
.page-kit-fit .kf-main #kf-steps-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-kit-fit .kf-main #kf-steps-title::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8.04l-12.122 12.124a2.857 2.857 0 0 1 -4.041 -4.04l12.122 -12.124'/%3E%3Cpath d='M7 13h8'/%3E%3Cpath d='M16 4l4 4'/%3E%3C/svg%3E");
}

/* --- 3 · puntos críticos: 3 cards apple, icono app-icon --- */
.page-kit-fit .kf-main .kf-critical-card {
  border: 0;
  border-radius: var(--kf-r-card);
  box-shadow: var(--kf-shadow);
  background: #fff;
  padding: 18px;
  gap: 10px;
}
.page-kit-fit .kf-main .kf-critical-card__bar {
  display: none; /* fuera la franja superior pesada */
}
.page-kit-fit .kf-main .kf-critical-card p {
  color: var(--kf-muted); /* caption */
}
.page-kit-fit .kf-main .kf-critical-card h3 {
  align-items: center;
  gap: 10px;
}
/* icono dentro de un cuadradito redondeado tint (app-icon iOS) */
.page-kit-fit .kf-main .kf-critical-card--rotulado h3::before,
.page-kit-fit .kf-main .kf-critical-card--cold h3::before,
.page-kit-fit .kf-main .kf-critical-card--time h3::before {
  /* set de íconos unificado con .kf-rlink: círculo tint 32px, glyph 18px, stroke 1.8 */
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 999px;
  background-color: var(--kf-tint);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  -webkit-mask: none;
  mask: none;
}
.page-kit-fit .kf-main .kf-critical-card--rotulado h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' fill='none' stroke='%23155A96' stroke-width='1.8'/%3E%3Cpath d='M7.5 9.5h9M7.5 13h6' fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.page-kit-fit .kf-main .kf-critical-card--cold h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 3v18M4.2 7.5 19.8 16.5M19.8 7.5 4.2 16.5M8.5 4.7 12 8.2l3.5-3.5M8.5 19.3 12 15.8l3.5 3.5M4.5 12h5M14.5 12h5'/%3E%3C/svg%3E");
}
.page-kit-fit .kf-main .kf-critical-card--time h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7' fill='none' stroke='%23155A96' stroke-width='1.8'/%3E%3Cpath d='M12 9.5v4l2.8 1.8' fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.5h8M6 6.5h12' fill='none' stroke='%23155A96' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- 4 · comunicación de resultados: aplanar + grouped list iOS --- */
.page-kit-fit .kf-main .kf-results {
  margin-top: 12px;
  background: none; /* aplanado (era gradiente) */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.page-kit-fit .kf-main .kf-results__list {
  gap: 0;
  border-radius: var(--kf-r-card);
  background: #fff;
  box-shadow: var(--kf-shadow);
  overflow: hidden;
}
.page-kit-fit .kf-main .kf-results__item {
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 16px;
}
.page-kit-fit .kf-main .kf-results__item + .kf-results__item {
  border-top: 1px solid var(--kf-hairline);
}
.page-kit-fit .kf-main .kf-results__list strong {
  color: var(--ppk-blue-700);
}
.page-kit-fit .kf-main .kf-results__note {
  color: var(--kf-muted);
}

/* --- 5 · referencia: chips + disclosure iOS --- */
.page-kit-fit .kf-main .kf-chip {
  border: 0;
  border-radius: var(--kf-r-ctl);
  background: var(--kf-tint);
  color: var(--ppk-blue-700);
}
.page-kit-fit .kf-main .kf-chip:hover {
  background: var(--kf-tint-strong);
  color: var(--ppk-blue-900);
}
/* FAQ disclosure agrupado: una card, filas con divider y chevron › */
.page-kit-fit .kf-main .kf-faq {
  gap: 0;
  border-radius: var(--kf-r-card);
  background: #fff;
  box-shadow: var(--kf-shadow);
  overflow: hidden;
}
.page-kit-fit .kf-main .kf-faq details {
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
}
.page-kit-fit .kf-main .kf-faq details + details {
  border-top: 1px solid var(--kf-hairline);
}
.page-kit-fit .kf-main .kf-faq summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  list-style: none;
}
.page-kit-fit .kf-main .kf-faq summary::-webkit-details-marker {
  display: none;
}
.page-kit-fit .kf-main .kf-faq summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: center / 16px 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23155A96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}
.page-kit-fit .kf-main .kf-faq details[open] summary::after {
  transform: rotate(90deg);
}
.page-kit-fit .kf-main .kf-faq p {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--kf-muted);
}
/* foto: esquinas r-card, aplanada, acotada para matar aire a la derecha */
.page-kit-fit .kf-main .kf-ref-figure .kf-figure__link {
  border: 0;
  border-radius: var(--kf-r-card);
  box-shadow: var(--kf-shadow);
}
.page-kit-fit .kf-main .kf-ref-figure img {
  max-height: 280px;
}

/* --- botones iOS (resultados + CTA) --- */
.page-kit-fit .kf-main .btn {
  border-radius: var(--kf-r-ctl);
  box-shadow: none;
}
/* "Circuito completo en Workflow": relleno azul */
.page-kit-fit .kf-main .kf-results__actions .btn-ghost {
  border: 0;
  background: var(--ppk-blue-700);
  color: #fff;
}
.page-kit-fit .kf-main .kf-results__actions .btn-ghost:hover {
  background: var(--ppk-blue-900);
}
/* "Flyer (próximamente)": deshabilitado plano */
.page-kit-fit .kf-main .kf-results__actions .btn[disabled],
.page-kit-fit .kf-main .kf-results__actions .btn[aria-disabled="true"] {
  border: 1px solid var(--kf-hairline);
  background: var(--ppk-surface-card);
  color: var(--kf-muted);
  opacity: 1;
}

/* --- 6 · CTA "Volver al portal": secundario iOS, centrado --- */
.page-kit-fit .kf-main .kf-section--actions .kf-actions {
  justify-content: center;
}
.page-kit-fit .kf-main .kf-section--actions .btn-secondary {
  border: 0;
  background: var(--kf-tint);
  color: var(--ppk-blue-700);
}
.page-kit-fit .kf-main .kf-section--actions .btn-secondary:hover {
  background: var(--kf-tint-strong);
  color: var(--ppk-blue-900);
}

/* --- 7 · header condensado (scroll>0): título un escalón mayor + banda que lo
   acompaña. Scope EXCLUSIVO a .kf-header-condensed ⇒ el header expandido (scroll 0)
   y su reserva superior (--app-header-h, sincronizada por auth-gate sobre el header
   expandido) quedan intactos. Misma cadena (0,3,1) que el bloque header-hero pero
   más abajo en el fuente ⇒ override por orden. La banda condensada (~50px) sigue
   muy por debajo del scroll-margin de anclas (--kf-fixed-header-h+16 ≈ 216px) ⇒ no
   tapa contenido al navegar a anclas. --- */
body.page-kit-fit.kf-header-condensed .kf-headline {
  padding: 12px 0;
}
body.page-kit-fit.kf-header-condensed .kf-headline__title {
  font-size: clamp(1.2rem, 5vw, 1.42rem);
}

/* --- 8 · circuito · Paso 1: íconos-recurso enlazados al final de cada acción.
   Glyphs idénticos a la etapa 4 del home (recordIconSVG: form / document / avain);
   hrefs reales de RECORD_LINKS. Círculo tint + glyph azul --ppk- (look app-icon iOS,
   coherente con chips/críticos). Enlaces → hover/focus; el flyer aún no existe ⇒
   placeholder deshabilitado (role=img + aria-label "próximamente"). --- */
.page-kit-fit .kf-main .kf-stage .kf-list li:has(.kf-rsrc) {
  align-items: center;
}
.page-kit-fit .kf-main .kf-stage .kf-list .kf-list__text {
  min-width: 0;
}
.page-kit-fit .kf-main .kf-stage .kf-list .kf-rsrc {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px; /* 32px disco + 12px ⇒ centros a 44px: áreas táctiles no se solapan */
}
.page-kit-fit .kf-main .kf-rlink {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--kf-tint);
  color: var(--ppk-blue-700);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}
/* A4 · hover/focus de íconos-ENLACE (sirve a <a> y <button>): glyph intensifica a
   --ppk-blue-900 + círculo tint saturado + leve lift. Excluye placeholders
   deshabilitados (flyer, remito) vía :not(.is-disabled). */
.page-kit-fit .kf-main .kf-rlink:not(.is-disabled):hover,
.page-kit-fit .kf-main .kf-rlink:not(.is-disabled):focus-visible {
  background: var(--ppk-blue-700); /* paridad con el HOME: círculo azul lleno */
  color: #fff; /* glyph blanco */
  transform: translateY(-1px);
}
.page-kit-fit .kf-main .kf-rlink svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-kit-fit .kf-main .kf-rlink.is-disabled {
  background: var(--ppk-surface-card);
  color: var(--kf-muted);
  cursor: not-allowed;
}

/* --- 9 · modal de medios: soporte de PDF embebido (iframe) + toggle img/iframe.
   El shell del modal (overlay, dialog, botón cerrar, foco, scroll-lock) se
   reutiliza desde kit-fit.js; acá solo el panel de contenido. La regla [hidden]
   es necesaria porque .kf-media-modal img trae display:block (gana al UA). --- */
.page-kit-fit .kf-media-modal__frame {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  border: 0;
  border-radius: var(--kf-r-card);
  background: #fff;
}
/* Video instructivo vertical (1080x1920 = 9:16). El wrapper reserva la forma
   alta DESDE EL INICIO (con preload="none" el <video> no tiene alto intrínseco
   hasta cargar metadata; sin esto el cuadro saldría compacto). Acotado por 80vh
   de alto y ~432px de ancho: ni gigante en desktop ni desbordado en mobile. */
.page-kit-fit .kf-media-modal__videowrap {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  width: auto;
  height: auto;
  max-width: min(100%, 432px);
  max-height: 80vh;
}
.page-kit-fit .kf-media-modal__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--kf-r-card);
  background: #000;
}
/* Portada (frame del video) + botón play azul centrado; cubre el reproductor
   hasta que el usuario lo inicia. El background-image solo se descarga cuando
   el wrapper deja de estar [hidden] (al abrir el modal), no en la carga. */
.page-kit-fit .kf-media-modal__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--kf-r-card);
  background-color: #0b2c4d;
  background-image: url("assets/img/test-qfit-poster.webp");
  background-size: cover;
  background-position: center;
}
.page-kit-fit .kf-media-modal__playicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--ppk-blue-700);
  box-shadow: 0 6px 22px rgba(8, 38, 74, 0.45);
  transition:
    background-color 140ms ease,
    transform 140ms ease;
}
.page-kit-fit .kf-media-modal__cover:hover .kf-media-modal__playicon,
.page-kit-fit .kf-media-modal__cover:focus-visible .kf-media-modal__playicon {
  background: var(--ppk-blue-900);
  transform: scale(1.06);
}
.page-kit-fit .kf-media-modal__playicon svg {
  width: 34px;
  height: 34px;
  margin-left: 4px; /* centra ópticamente el triángulo dentro del disco */
  fill: #fff;
}
.page-kit-fit .kf-media-modal img[hidden],
.page-kit-fit .kf-media-modal__frame[hidden],
.page-kit-fit .kf-media-modal__videowrap[hidden],
.page-kit-fit .kf-media-modal__cover[hidden] {
  display: none;
}

/* --- 10 · pulido final: a11y (tap targets, foco, estados) + coherencia --- */
/* Tap targets WCAG 2.5.5 (≥44px) por área ::after, SIN agrandar el disco visual */
.page-kit-fit .kf-main .kf-rlink::after,
.page-kit-fit .kf-media-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
/* el placeholder (flyer) no es interactivo ⇒ sin área táctil que tape vecinos */
.page-kit-fit .kf-main .kf-rlink.is-disabled::after {
  content: none;
}
.page-kit-fit .kf-main .kf-chip {
  position: relative;
}
.page-kit-fit .kf-main .kf-chip::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 44px;
  transform: translateY(-50%);
}
/* Foco institucional propio (#155A96) — que no caiga al foco global translúcido */
.page-kit-fit .kf-main .kf-rlink:focus-visible {
  outline: var(--kf-focus);
  outline-offset: 2px;
}
.page-kit-fit .kf-main .kf-faq summary:focus-visible {
  outline: var(--kf-focus);
  outline-offset: -2px; /* el FAQ es overflow:hidden ⇒ inset para que no se recorte */
}
/* Puntos críticos: estado hover/focus coherente con el resto de la página */
.page-kit-fit .kf-main .kf-critical-card {
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}
.page-kit-fit .kf-main .kf-critical-card:hover,
.page-kit-fit .kf-main .kf-critical-card:focus-within {
  transform: translateY(-1px);
  box-shadow: var(--kf-shadow-md);
}
/* Comunicación: subtítulo unificado a .section-subtitle (mismo gap bajo el título) */
.page-kit-fit .kf-main .kf-panel > .section-subtitle {
  margin: 8px 0 0;
}
/* Resultados: separar el CTA activo de los flyers en preparación (jerarquía) */
.page-kit-fit .kf-main .kf-results__actions {
  flex-direction: column;
  align-items: flex-start;
}
.page-kit-fit .kf-main .kf-results__flyers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
/* Ficha: contenido de celda arriba (valores cortos no flotan centrados) */
.page-kit-fit .kf-main .kf-fichabar__item {
  align-content: start;
}
/* Foto del kit en mobile: matar el letterboxing (tarjeta acotada y centrada) */
@media (max-width: 720px) {
  .page-kit-fit .kf-main .kf-ref-figure .kf-figure__link {
    max-width: 320px;
    margin-inline: auto;
  }
}
/* Ficha a 1 columna en pantallas chicas (evita el quiebre de "Fuera de alcance") */
@media (max-width: 480px) {
  .page-kit-fit .kf-fichabar__grid {
    grid-template-columns: 1fr;
  }
}
/* === /kit-fit apple restyle === */

/* ===== T5 — Acordeón mobile por secciones (PILOTO). El JS initKfMobileAccordion
   construye los wrappers (.kf-acc__*) SOLO ≤720px y los DESARMA en desktop, así que
   el DOM ≥721px queda prístino. Acordeón exclusivo; primera sección abierta. ===== */
@media (max-width: 720px) {
  .page-kit-fit .kf-acc__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .page-kit-fit .kf-acc__trigger:focus-visible {
    outline: var(--kf-focus);
    outline-offset: 3px;
    border-radius: 8px;
  }
  .page-kit-fit .kf-acc__chevron {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--ppk-accent, #1f6eb7);
    transition: transform 0.28s ease;
  }
  .page-kit-fit .kf-acc__chevron::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
      center / 22px 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
      center / 22px 22px no-repeat;
  }
  .page-kit-fit .kf-acc__trigger[aria-expanded="true"] .kf-acc__chevron {
    transform: rotate(180deg);
  }
  /* Panel colapsable: animación por grid-template-rows (sin max-height mágico). */
  .page-kit-fit .kf-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
  }
  .page-kit-fit .kf-acc__panel.is-open {
    grid-template-rows: 1fr;
  }
  .page-kit-fit .kf-acc__panel-inner {
    overflow: hidden;
    min-height: 0;
    padding-inline: 0; /* M2: no desplazar el conector del circuito (left:44px) */
  }
  /* M3: tras abrir, liberar overflow para que expansiones internas (FAQ) no se recorten. */
  .page-kit-fit .kf-acc__panel.is-done .kf-acc__panel-inner {
    overflow: visible;
  }
  /* M1: durante el estado recortado, traer el anillo de foco hacia adentro. */
  .page-kit-fit .kf-acc__panel:not(.is-done) .kf-acc__panel-inner :focus-visible {
    outline-offset: -2px;
  }
  /* El subtítulo de "Comunicación de resultados" (D) entra al panel y deja de ser
     hijo directo de .kf-panel (regla l.2155): se preserva su margen acá. */
  .page-kit-fit .kf-acc__panel .section-subtitle {
    margin: 8px 0 0;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .page-kit-fit .kf-acc__panel,
  .page-kit-fit .kf-acc__chevron {
    transition: none;
  }
}

/* === Infografía Q-FIT — card elevada y prolija. En mobile/tablet va
   apilada y centrada; en desktop se ubica en la columna derecha de la
   sección "Circuito del Test FIT" (ver .kf-circuito-layout). === */
.kf-qfit {
  max-width: 460px;
  margin: 44px auto;
  padding: 16px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-radius-lg);
  box-shadow: var(--kf-shadow-md);
}

.kf-qfit__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kf-radius-md);
}

/* Wrapper del cuadro blanco interno. En mobile/tablet es transparente
   (display:contents): la imagen se comporta como hasta ahora dentro de la card.
   En desktop (>=1024px) pasa a ser un cuadro blanco cuadrado con sombra,
   flotando sobre el panel degradado (ver bloque @media min-width:1024px). */
.kf-qfit__frame {
  display: contents;
}

@media (max-width: 480px) {
  .kf-qfit {
    margin: 30px auto;
    padding: 12px;
  }
}

/* === Layout de "Circuito del Test FIT": en desktop (>=1024px) dos columnas
   [ pasos | infografía Q-FIT ]; el heading/subtítulo quedan full-width arriba
   (fuera de la grilla). En mobile/tablet angosto colapsa a una sola columna
   apilada en orden de origen (infografía -> pasos). El markup .kf-circuito-layout
   existe SOLO en kit-fit.html, por lo que estas reglas son inertes en
   entrega-muestras.html (que también carga este CSS). === */
@media (min-width: 1024px) {
  .page-kit-fit .kf-circuito-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px);
    gap: 40px;
    align-items: start;
  }
  .page-kit-fit .kf-circuito-layout .kf-circuit {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0; /* alinea el top de los pasos con el top del panel (coincidencia exacta) */
    min-width: 0; /* evita que el contenido fuerce ensanchar la columna (anti scroll-x) */
  }
  /* La card derecha pasa a ser un PANEL de altura completa: tan alto como la
     pila de pasos 1-2-3 (top del panel = top del paso 1; bottom = bottom del
     paso 3), con borde azul de marca (--ppk-blue-700, el mismo del nº de los
     pasos) y fondo degradado azul->blanco difuminado (con transparencia). El
     panel centra verticalmente el cuadro blanco interno (.kf-qfit__frame). */
  .page-kit-fit .kf-circuito-layout .kf-qfit {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch; /* estira el panel a la altura de la fila = bloque de pasos */
    margin: 0;
    max-width: none;
    width: 100%;
    display: flex;
    align-items: center; /* centra el cuadro blanco vertical dentro del panel */
    justify-content: center;
    padding: 28px;
    border: 2px solid var(--ppk-blue-700);
    /* Fondo artístico: azul de marca sólido en la esquina superior-izquierda,
       transicionando en oblicuo (135deg) hacia un azul claro/casi blanco en la
       inferior-derecha; un brillo radial suave le agrega dimensión y profundidad. */
    background:
      radial-gradient(
        135% 135% at 16% 14%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0) 46%
      ),
      linear-gradient(
        135deg,
        #0c447c 0%,
        #134f87 24%,
        #1f6ba2 48%,
        #62a6cf 76%,
        #eaf4fb 100%
      );
    box-shadow: var(--kf-shadow-sm); /* elevación suave del panel; el realce fuerte va en el cuadro */
  }
  /* Cuadro blanco cuadrado, bordes redondeados y sombra prolija, "flotando"
     sobre el panel degradado; la infografía 1:1 va centrada encima. */
  .page-kit-fit .kf-circuito-layout .kf-qfit__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 18px;
    background: var(--kf-surface);
    border-radius: var(--kf-radius-lg);
    box-shadow: 0 10px 28px rgba(8, 38, 74, 0.18);
  }
  .page-kit-fit .kf-circuito-layout .kf-qfit picture {
    display: contents; /* promueve la <img> a hija flex directa del cuadro blanco */
  }
  .page-kit-fit .kf-circuito-layout .kf-qfit .kf-qfit__img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain; /* defensivo: nunca deforma, conserva 1:1 */
  }
}