/* ============================================================================
   PLX · DESPLEGABLES DE CABECERA  ·  motor compartido de las 18 piezas
   ----------------------------------------------------------------------------
   POR QUÉ EXISTE ESTE ARCHIVO.

   El catálogo tenía dieciocho cabeceras y UNA sola con desplegables. Las otras
   diecisiete abrían un panel único: un mapa del sitio entero detrás de un botón.
   Eso no es un menú, es un índice con tapa. Un menú de sitio se navega por
   categorías, y cada categoría tiene que abrir la suya sin llevarte a ningún
   lado hasta que elijas.

   Acá vive el mecanismo —abrir, cerrar, teclado, foco, colocación— y el
   MATERIAL: el canal fresado y las teclas en relieve. Cada pieza conserva su
   identidad (reloj, buscador, brújula, compuerta...) y hereda de acá lo que
   tiene que ser idéntico en las dieciocho: cómo se despliega y de qué está
   hecho lo que se despliega.

   LA GRAMÁTICA, EN UNA LÍNEA: si algo se toca, es una TECLA (sale hacia vos);
   si algo contiene, es un POZO (se hunde). Ley de luz a 315°: filo claro arriba
   a la izquierda, sombra abajo a la derecha. La misma de los footers de consola.

   DOS MODOS, UN SOLO MARCADO.
   · flotante  — escritorio: el panel cuelga del borde inferior de la cápsula.
   · acordeón  — teléfono:   el mismo panel crece dentro del cajón, en el flujo.
   Lo decide el JS por ancho (`data-pdd-corte`) y lo publica en `data-pdd-modo`.
   No hay dos listas que mantener ni dos estados que sincronizar.
   ========================================================================== */

/* ── EL CANAL FRESADO ─────────────────────────────────────────────────────
   El pozo donde viven las teclas. No es un fondo más oscuro: es una sombra
   interior real, que es lo que hace que la tecla de encima parezca salir. */
.pdd-canal {
  display: flex; align-items: center; gap: 2px;
  min-width: 0; padding: 3px;
  border-radius: var(--hkr6-r-pill);
  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);
}

/* ── LA PUERTA ────────────────────────────────────────────────────────────
   Contenedor de tecla + panel. Es el ancla de la colocación, así que necesita
   `position: relative` sí o sí. */
.pdd { position: relative; flex: 0 0 auto; }

/* ── LA TECLA ─────────────────────────────────────────────────────────────
   Un <button>, no un <a>: no lleva a ninguna página, abre una lista. Que sea un
   enlace es la mentira más común de los menús desplegables y la que rompe el
   teclado. */
.pdd__llave {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 clamp(11px, 1vw, 17px);
  border: 0; border-radius: var(--hkr6-r-pill);
  background: transparent; cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  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),
              box-shadow var(--hkr6-t-fast) var(--hkr6-ease);
}
.pdd__llave:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }

/* LA TECLA LEVANTADA. Se usa en dos casos y por la misma razón —«acá estás»—:
   cuando la puerta está abierta y cuando la página actual vive dentro de ella.
   Relieve, no matiz: se lee al sol y sin distinguir colores. */
.pdd__llave[aria-expanded="true"],
.pdd[data-pdd-actual] > .pdd__llave {
  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);
}
/* Abierta manda sobre «acá estás»: si estás en Sociedades y abrís Recursos,
   la que tiene que verse hundida hacia adelante es la que estás mirando. */
.pdd[data-pdd-actual] > .pdd__llave[aria-expanded="true"] { background: linear-gradient(180deg, #26365A 0%, #1B2A49 100%); }

/* El galón: sin él, una tecla que abre y una que navega se ven iguales. */
.pdd__chev {
  flex: 0 0 auto; width: 7px; height: 7px; margin-left: -1px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hkr6-t) var(--hkr6-ease);
}
.pdd__llave[aria-expanded="true"] .pdd__chev { transform: translateY(1px) rotate(-135deg); }

/* ── EL COFRE · colocación ────────────────────────────────────────────────
   Cerrado NO se saca del DOM ni se le pone `display:none`: se apaga con
   visibilidad para que la entrada pueda animarse y para poder MEDIRLO antes de
   abrirlo (un elemento en display:none no tiene ancho, y sin ancho no se puede
   calcular si se sale de la pantalla). El foco lo bloquea `inert`, que pone el
   JS: sin eso quedarían veinte enlaces invisibles en el orden de tabulación. */
.pdd__cofre {
  position: absolute; top: 100%; left: 0; z-index: 5;
  width: max-content;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--hkr6-t) var(--hkr6-ease),
              transform var(--hkr6-t) var(--hkr6-ease),
              visibility 0s linear var(--hkr6-t);
}
.pdd__cofre[data-abierto] {
  visibility: visible; opacity: 1; transform: none;
  pointer-events: auto; transition-delay: 0s;
}

/* ── EL PANEL · material ──────────────────────────────────────────────────
   Opaco. El vidrio esmerilado se gana: sobre cielo claro, un panel translúcido
   deja leer el titular del hero entre los rótulos y el menú se vuelve ruido. */
.pdd__panel {
  overflow: hidden;
  background: #0B1221;
  border: 1px solid var(--hkr6-nav-line);
  border-radius: var(--hkr6-r-card);
  box-shadow: 0 30px 70px -22px rgba(4, 9, 20, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.pdd__lista {
  display: grid; gap: 2px; padding: 10px;
  width: min(var(--pdd-w, 366px), calc(100vw - 28px));
  /* Un panel más alto que la pantalla deja destinos fuera de alcance sin avisar.
     Se topa contra el alto real —dvh, no vh, o en un teléfono la barra del
     navegador se come las dos últimas filas— y el desplazamiento se queda
     adentro. */
  max-height: calc(100dvh - var(--hkr6-nav-top) - var(--hkr6-nav-h) - 48px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Puertas de seis destinos: dos columnas antes que una lista de scroll. */
.pdd__lista--2c { --pdd-w: 640px; grid-template-columns: 1fr 1fr; }

/* El rótulo de la puerta. En escritorio es redundante con la tecla; en acordeón
   la tecla queda arriba y lejos, así que se conserva y se apaga por modo. */
.pdd__rot {
  grid-column: 1 / -1; margin: 2px 0 4px; padding-inline: 11px;
  font-size: max(15px, .6875rem); letter-spacing: .13em; text-transform: uppercase;
  font-weight: var(--hkr6-fw-semibold); color: var(--hkr6-gold);
}

.pdd__item {
  display: grid; gap: 1px; align-content: center;
  min-height: 44px; padding: 8px 11px;
  border-radius: var(--hkr6-r-pozo-sm);
  text-decoration: none;
  transition: background var(--hkr6-t-fast) var(--hkr6-ease);
}
.pdd__item:hover { background: rgba(255, 255, 255, .07); }
.pdd__item[aria-current="page"] {
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.pdd__it { font-size: max(15px, .9375rem); font-weight: var(--hkr6-fw-medium); color: var(--hkr6-ink-d); line-height: 1.25; }
/* El descriptor es texto de apoyo, no el rótulo del destino: por eso baja de los
   15px del piso —el piso protege lo que hay que poder TOCAR y leer de un
   vistazo, y acá lo tocable es el título de arriba—. Con seis palabras se decide
   desde el panel sin entrar a la página. Salen del sitio, no se inventan. */
.pdd__id { font-size: .8125rem; color: var(--hkr6-ink-d-soft); line-height: 1.35; }

/* Pie de panel: el remate de la puerta. Un destino de cierre, no una lista más. */
.pdd__pie {
  grid-column: 1 / -1; margin-top: 6px; padding: 9px 11px 3px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pdd__pieTxt { font-size: .8125rem; color: var(--hkr6-ink-d-soft); }
.pdd__pieLink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 12px; border-radius: var(--hkr6-r-pill); text-decoration: none;
  font-size: max(15px, .8125rem); font-weight: var(--hkr6-fw-semibold);
  color: var(--hkr6-ink-d);
  background: linear-gradient(180deg, #22314F 0%, #182642 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .20);
}
.pdd__pieLink:hover { filter: brightness(1.12); }

/* ── ENLACE SUELTO EN EL CANAL ────────────────────────────────────────────
   No todo destino merece puerta. Blog y Contacto son uno solo cada uno: van
   como tecla plana, con el mismo tamaño y el mismo relieve al estar activos. */
.pdd-tecla {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 clamp(11px, 1vw, 17px);
  border-radius: var(--hkr6-r-pill); 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);
}
.pdd-tecla:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }
.pdd-tecla[aria-current="page"] {
  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);
}

/* ── EL CTA DE LA CÁPSULA ─────────────────────────────────────────────────
   ARREGLO PEDIDO POR DIEGO. El botón rojo usaba el radio de formulario del
   sistema —14px— dentro de una cápsula de radio 999. Dos curvas distintas a
   nueve píxeles una de otra: el ojo lee el desajuste aunque no sepa nombrarlo.
   Dentro de un contenedor redondeado, el radio del hijo tiene que ser el del
   padre menos el aire que los separa; con un padre en píldora, el hijo es
   píldora. Y se va el borde claro heredado, que dibujaba un segundo contorno
   que tampoco seguía al de la cápsula. */
.pdd-cta {
  border-radius: var(--hkr6-r-pill) !important;
  border-color: transparent !important;
  min-height: 44px; padding: 11px 20px; white-space: nowrap;
}
/* Y LA SEGUNDA MITAD DEL MISMO PROBLEMA. La sombra del CTA del sistema es un par
   neumórfico pensado para superficie CLARA: sombra oscura abajo a la derecha y
   sombra CLARA arriba a la izquierda. Sobre la cápsula de vidrio oscuro esa
   segunda sombra no se lee como luz rasante sino como un halo blanco alrededor
   del botón —el contorno que no coincidía con nada—. Acá el rojo pasa a ser una
   tecla levantada del mismo idioma que las otras: sombra propia hacia abajo,
   filo de luz arriba, y el resplandor rojo justo para separarlo del vidrio. */
.hkr6-btn.pdd-cta {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .42), 0 10px 20px -10px rgba(202, 17, 24, .70),
              inset 0 1px 0 rgba(255, 255, 255, .26), inset -1px -1px 0 rgba(0, 0, 0, .20);
}
.hkr6-btn.pdd-cta:active { box-shadow: inset 3px 3px 9px rgba(88, 8, 12, .80); }

/* ── MODO ACORDEÓN · teléfono ─────────────────────────────────────────────
   El mismo panel, ahora en el flujo del cajón. La altura se anima con filas de
   grid (0fr → 1fr) porque es la única forma de animar un alto automático sin
   medirlo en JS; el hijo necesita `min-height:0` y recorte, y el relleno tiene
   que vivir en la lista de adentro o se vería 20px de aire con la puerta
   cerrada. */
[data-pdd-modo="acordeon"] .pdd { display: block; }
[data-pdd-modo="acordeon"] .pdd__llave { width: 100%; justify-content: space-between; border-radius: var(--hkr6-r-btn); }
[data-pdd-modo="acordeon"] .pdd__cofre {
  position: static; width: auto;
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--hkr6-t) var(--hkr6-ease);
}
[data-pdd-modo="acordeon"] .pdd__cofre[data-abierto] { grid-template-rows: 1fr; }
[data-pdd-modo="acordeon"] .pdd__panel {
  min-height: 0; overflow: hidden;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
[data-pdd-modo="acordeon"] .pdd__lista { width: auto; padding: 4px 0 8px 10px; grid-template-columns: 1fr;
  max-height: none; overflow: visible; }
[data-pdd-modo="acordeon"] .pdd__lista--2c { --pdd-w: auto; }
[data-pdd-modo="acordeon"] .pdd__rot { display: none; }
[data-pdd-modo="acordeon"] .pdd__item { padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .10); border-radius: 0 var(--hkr6-r-pozo-sm) var(--hkr6-r-pozo-sm) 0; }
[data-pdd-modo="acordeon"] .pdd__item[aria-current="page"] { border-left-color: var(--hkr6-gold); }

/* ── ACORDEÓN DE UNA SOLA PUERTA ──────────────────────────────────────────
   El modo lo fija la raíz por ancho, pero hay una pieza —la de prioridad— donde
   conviven los dos: las puertas que entran en la barra despliegan flotando y las
   que no entraron se pliegan dentro del panel, donde flotar no tiene sentido.
   Esta clase le da a UNA puerta el comportamiento de acordeón sin tocar a las
   demás. Es la misma hoja de reglas, con el interruptor en otro lugar. */
/* ── MODO ACORDEÓN · teléfono ─────────────────────────────────────────────
   El mismo panel, ahora en el flujo del cajón. La altura se anima con filas de
   grid (0fr → 1fr) porque es la única forma de animar un alto automático sin
   medirlo en JS; el hijo necesita `min-height:0` y recorte, y el relleno tiene
   que vivir en la lista de adentro o se vería 20px de aire con la puerta
   cerrada. */
.pdd--acordeon { display: block; }
.pdd--acordeon .pdd__llave { width: 100%; justify-content: space-between; border-radius: var(--hkr6-r-btn); }
.pdd--acordeon .pdd__cofre {
  position: static; width: auto;
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--hkr6-t) var(--hkr6-ease);
}
.pdd--acordeon .pdd__cofre[data-abierto] { grid-template-rows: 1fr; }
.pdd--acordeon .pdd__panel {
  min-height: 0; overflow: hidden;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.pdd--acordeon .pdd__lista { width: auto; padding: 4px 0 8px 10px; grid-template-columns: 1fr;
  max-height: none; overflow: visible; }
.pdd--acordeon .pdd__lista--2c { --pdd-w: auto; }
.pdd--acordeon .pdd__rot { display: none; }
.pdd--acordeon .pdd__item { padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .10); border-radius: 0 var(--hkr6-r-pozo-sm) var(--hkr6-r-pozo-sm) 0; }
.pdd--acordeon .pdd__item[aria-current="page"] { border-left-color: var(--hkr6-gold); }


/* ── SIN JAVASCRIPT ───────────────────────────────────────────────────────
   Un menú desplegable es un mecanismo, y un mecanismo sin JS no abre. En vez de
   dejar la cabecera muda, las cuatro puertas se muestran abiertas y apiladas: el
   sitio sigue siendo navegable. Solo lo ven los navegadores sin JS —el script en
   línea de cada página quita `no-js` en cuanto corre—. */
html.no-js .pdd__cofre { position: static; visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
html.no-js .pdd__chev { display: none; }
html.no-js .pdd-canal { flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .pdd__cofre, .pdd__chev, .pdd__llave, .pdd__item, .pdd-tecla { transition: none !important; }
}