/* ============================================================================
   PLX-M05 · CÁPSULA SEGMENTADA — cabecera de sitio
   ----------------------------------------------------------------------------
   TRES DECISIONES, Y NINGUNA ES DECORATIVA.

   1 · EL ACTIVO SE VUELVE FÍSICO. Hoy la página actual se marca con un fondo un
   poco más claro: una diferencia de color que en una pantalla al sol, o para un
   ojo que no separa bien matices, no existe. Acá la navegación vive DENTRO de un
   canal fresado y lo activo es una TECLA LEVANTADA en ese canal —sombra abajo a
   la derecha, filo de luz arriba a la izquierda, la ley de 315° del sistema—.
   Se lee por relieve, no por matiz: sobrevive al sol y al daltonismo.

   2 · CUATRO PUERTAS, NO SEIS ATAJOS. La versión anterior mostraba seis destinos
   sueltos y metía las páginas hermanas en el mismo carril detrás de una junta:
   once teclas en fila, sin jerarquía, y el sitio tenía veinte páginas igual.
   Ahora el carril tiene CUATRO TECLAS y cada una ABRE la suya. Las veinte
   entradas están a un clic y ninguna ocupa lugar hasta que la pedís.

   3 · EL PANEL NO CUELGA DE LA TECLA, CUELGA DE LA CÁPSULA. El carril se
   desplaza en horizontal cuando no entra, y un panel absoluto dentro de algo que
   se desplaza queda recortado por ese recorte. Por eso los paneles viven FUERA
   del carril, en una bandeja bajo la cápsula, y el JS los coloca contra el borde
   inferior de la cápsula frenados contra los bordes de la pantalla.

   TRES ZONAS FRESADAS. Marca ‖ navegación ‖ acción, separadas por ranuras reales
   —una línea de sombra y un filo de luz— y no por aire. Es la misma gramática de
   los footers de consola: si algo se toca, es una tecla; si algo contiene, es un
   pozo.

   MÓVIL: EL MISMO CARRIL, Y AHORA ES LITERAL. Nada de cajón con otra lista, y
   tampoco una cápsula doblada en dos filas como en la primera versión. El mismo
   carril, las mismas teclas, la misma junta: se desplaza en horizontal con snap
   —dentro del carril, nunca la página— y los bordes se desvanecen para avisar que
   hay más. El teléfono se suma como última tecla del carril en vez de robarle
   ancho a la línea. Un solo mapa, todos los anchos.
   ========================================================================== */

.m05 {
  position: fixed; inset: var(--hkr6-nav-top) 0 auto 0;
  z-index: var(--hkr6-z-nav);
  padding-inline: var(--hkr6-pad-x);
  pointer-events: none;
}
.m05__caja { position: relative; max-width: var(--hkr6-w-b); margin-inline: auto; pointer-events: auto; }

.m05__capsula {
  display: flex; align-items: center;
  min-height: var(--hkr6-nav-h);
  padding: 7px 9px 7px 7px;
  background: var(--hkr6-nav-bg);
  -webkit-backdrop-filter: var(--hkr6-gl-blur); backdrop-filter: var(--hkr6-gl-blur);
  border: 1px solid var(--hkr6-nav-line);
  border-radius: var(--hkr6-r-pill);
  box-shadow: var(--hkr6-sh-nav);
}

/* ── ZONA 1 · MARCA ───────────────────────────────────────────────────────── */
.m05__marca {
  display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
  min-height: 44px; padding: 0 clamp(12px, 1.2vw, 18px) 0 12px;
  border-radius: var(--hkr6-r-btn); text-decoration: none;
}
.m05__logo { display: block; width: auto; height: 34px; }
/* La ranura: sombra a un lado, luz al otro. Un borde de 1px plano no separa
   materia, solo dibuja una raya. */
.m05__ranura { flex: 0 0 auto; width: 2px; align-self: stretch; margin: 6px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.09)); border-radius: 2px; }

/* ── ZONA 2 · NAVEGACIÓN, dentro de un canal fresado ─────────────────────── */
.m05__canal {
  /* No crece: se ajusta a sus cuatro teclas. Con `flex: 1 1 auto` el pozo se
     estiraba hasta el teléfono y quedaba medio canal fresado vacío a la derecha
     de la última tecla, que se lee como un hueco, no como un carril. */
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto 0 clamp(8px, 1vw, 14px);   /* el aire sobrante va a la DERECHA del carril */
  padding: 3px;
  border-radius: 999px;
  background: rgba(6, 11, 22, .42);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .05);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.m05__canal::-webkit-scrollbar { display: none; }
.m05__tecla {
  scroll-snap-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 clamp(10px, .95vw, 17px);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-size: max(15px, .8125rem); font-weight: var(--hkr6-fw-medium);
  color: var(--hkr6-ink-d-soft);
  transition: color var(--hkr6-t-fast) var(--hkr6-ease), background var(--hkr6-t-fast) var(--hkr6-ease);
}
.m05__tecla:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }
/* LA TECLA LEVANTADA. Relieve, no matiz. */
.m05__tecla[aria-current="page"], .m05__tecla[aria-current="true"] {
  color: #FFFFFF; font-weight: var(--hkr6-fw-semibold);
  background: linear-gradient(180deg, #22314F 0%, #182642 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.42), 0 6px 12px -6px rgba(0,0,0,.55),
              inset 0 1px 0 rgba(255,255,255,.20), inset -1px -1px 0 rgba(0,0,0,.28);
}

/* La tecla de llamar, cuando el teléfono se muda al carril en pantallas chicas.
   Verde en el trazo para que se distinga de un destino de navegación: no lleva
   a una página, abre el marcador del aparato. */
.m05__tecla--tel { gap: 7px; }
.m05__tecla--tel svg { color: #7FD4A8; }

/* La junta entre los destinos principales y las hermanas de la sección. No es un adorno: sin ella las once teclas se leen
   como una lista sola y se pierde de dónde salió cada tramo. */
.m05__junta {
  flex: 0 0 auto; width: 2px; align-self: stretch; margin: 6px 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--hkr6-gold) 22%, var(--hkr6-gold) 78%, transparent);
  opacity: .55;
}

/* ── ZONA 3 · ACCIÓN ──────────────────────────────────────────────────────── */
.m05__accion { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* El teléfono va en su propio pozo, no suelto: un icono sin caja al lado de un
   botón rojo macizo se lee como una mancha, y además un icono de acción debe
   llegar a 3:1 contra su fondo —el gris tenue de los rótulos no alcanza para un
   trazo de 1,9px. */
.m05__tel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  color: var(--hkr6-ink-d);
  background: rgba(6, 11, 22, .42);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .42), inset 0 -1px 0 rgba(255, 255, 255, .05);
  transition: color var(--hkr6-t-fast) var(--hkr6-ease), background var(--hkr6-t-fast) var(--hkr6-ease);
}
.m05__tel:hover { color: #FFFFFF; background: rgba(6, 11, 22, .58); }
.m05__cta { padding: 11px 18px; min-height: 44px; white-space: nowrap; }

/* ── LA BANDEJA · dónde caen los paneles ─────────────────────────
   No pinta nada: es el ancla. Existe para que los cofres queden FUERA del carril
   —que se desplaza y por lo tanto recorta— y sigan colgando de la cápsula. */
.m05__bandeja { position: static; }

/* En pantalla chica el panel deja de colgar de su tecla y toma el ancho entero
   de la cápsula: con 200px de carril, un panel de 366 anclado a la cuarta tecla
   se sale de la pantalla o se apila contra el borde. El `!important` es contra
   el estilo en línea que pone el JS, que es justo lo que hay que anular acá. */
@media (max-width: 899.98px) {
  .m05 .pdd__cofre { left: 0 !important; right: 0; width: auto !important; }
  .m05 .pdd__lista { width: auto !important; grid-template-columns: 1fr; }
}

@media (max-width: 1099.98px) {
  .m05__marca { padding-right: 12px; }
  .m05__cta { display: none; }
  /* Los degradados de borde solo tienen sentido cuando el carril desborda: son la
     única señal de que hay más teclas a la derecha. */
  /* El desvanecido va solo a la DERECHA. A la izquierda se comía el borde de la
     tecla activa, que es la que tiene que verse entera; a la derecha es la señal
     de que el carril sigue. */
  .m05__canal { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); }
}

/* ── MÓVIL · UNA SOLA LÍNEA ───────────────────────────────────────────────
   La versión anterior doblaba la cápsula en dos filas (marca+contacto arriba,
   carril abajo) porque al carril le quedaban unos 180px entre el logo y el
   teléfono. La solución no era doblar: era sacar el teléfono de la línea y
   meterlo DENTRO del carril como una tecla más. El carril recupera ese ancho, el
   contacto no se pierde, y la cabecera vuelve a medir un renglón.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
  .m05__capsula { padding: 7px 7px 7px 10px; }
  .m05__marca { padding-inline: 6px; }
  .m05__ranura { display: none; }
  .m05__accion { display: none; }        /* el teléfono se muda al carril */
}
@media (prefers-reduced-motion: reduce) { .m05__tecla, .m05__tel { transition: none !important; } }