/* ============================================================
   JurisOne — SISTEMA A′ · «MARCA» · Navegación por secciones (ronda 5)

   Archivo nuevo y exclusivo de marca.html.

   QUÉ ES ESTE NAV
   El bloque «El descenso» que vivía en el hero era la arquitectura interna
   del producto (cinco capas por las que viaja una operación), no la agenda
   de la página. El cliente lo leyó como agenda, y tenía razón en el fondo:
   a la página le faltaba agenda. Así que el bloque sale del hero y el
   header recibe la agenda de verdad — las siete paradas del guion de
   docs/arquitectura-contenido.md, escritas como las preguntas que hace un
   comprador, en el orden en que las hace.

   POR QUÉ SIN LÍNEAS NI ICONOS
   El nav no lleva subrayado, ni separadores entre entradas, ni filete bajo
   la barra: en esta ronda la página deja de articularse con líneas. La
   entrada en curso se distingue por COLOR DE MARCA y peso, que es el único
   trabajo que el violeta hace en todo el sitio — señalar lo accionable y lo
   seleccionado. El disparador de móvil es una palabra, no una hamburguesa.

   Consume EXCLUSIVAMENTE tokens semánticos.
   ============================================================ */

.nav-secciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-corto);
  min-width: 0;
}

/* ---------- La lista ---------- */
.nav-secciones__panel { min-width: 0; }

.nav-secciones__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espacio-corto) var(--espacio-elemento);
}

.nav-secciones__fila { display: flex; }

/* Una entrada es palabra, no etiqueta: va en la letra de los titulares
   —Archivo— y en caja baja. Añadir otra fila de mono en versales sería
   ruido de metadato encima de lo único que aquí se pulsa. */
.nav-secciones__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  font-family: var(--fuente-display);
  font-weight: var(--peso-cuerpo);
  font-size: var(--tamano-cuerpo-menor);
  font-variation-settings: "wdth" var(--ancho-placa);
  line-height: var(--interlinea-placa);
  letter-spacing: var(--tracking-placa);
  text-decoration: none;
  color: var(--color-texto-principal);
  transition: color var(--duracion-hover) var(--curva-salida);
}

/* Sección del guion todavía sin maquetar: no es enlace, y se dice con el
   tono del texto secundario (7,6:1 sobre el campo), no con un badge ni con
   una opacidad que la deje por debajo del mínimo de contraste. */
.nav-secciones__enlace[data-pendiente] {
  color: var(--color-texto-secundario);
  cursor: default;
}

/* Sección en curso: el violeta del logotipo, que en toda la página quiere
   decir «esto está seleccionado». Sin subrayado y sin placa: la barra ya
   tiene una placa violeta —el CTA— y dos serían dos CTA. */
.nav-secciones__enlace[aria-current] {
  color: var(--color-marca);
  font-weight: var(--peso-cuerpo-fuerte);
}

@media (hover: hover) and (pointer: fine) {
  .nav-secciones__enlace[href]:hover { color: var(--color-marca); }
}

/* ---------- Disparador de pantallas estrechas ----------
   Texto, nunca icono. Cuando está desplegado toma la misma placa de marca
   que el CTA, el idioma activo y la familia filtrada: en esta página
   «esto está abierto/seleccionado» tiene un solo aspecto. */
.nav-secciones__disparador {
  display: none;
  align-items: center;
  min-height: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  background-color: transparent;
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  color: var(--color-texto-principal);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--duracion-presion) var(--curva-salida),
    background-color var(--duracion-hover) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida);
}
.nav-secciones__disparador:active { transform: scale(var(--escala-presion)); }
.nav-secciones__disparador[aria-expanded="true"] {
  background-color: var(--color-superficie-inversa);
  border-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
}
@media (hover: hover) and (pointer: fine) {
  .nav-secciones__disparador[aria-expanded="false"]:hover { border-color: var(--color-marca); }
}

@media (max-width: 68rem) {
  /* La agenda baja a su propia fila; arriba quedan marca y acciones. */
  .nav-secciones {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-secciones__disparador { display: inline-flex; justify-content: space-between; }

  /* A la derecha, la palabra que dice qué va a pasar — el mismo signo
     tipográfico que usa el detalle de las placas. Sin él, un recuadro a todo
     el ancho con una sola palabra a la izquierda se lee como un campo de
     formulario vacío, no como un control. */
  .nav-secciones__disparador::after {
    content: attr(data-etiqueta-abrir);
    color: inherit;
  }
  .nav-secciones__disparador[aria-expanded="true"]::after {
    content: attr(data-etiqueta-cerrar);
  }

  /* Mismo mecanismo de plegado que .detalle__panel: la fila de rejilla pasa
     de 0fr a 1fr. Anima altura sin animar height, y sin un solo píxel
     literal. Va en el PANEL y no en la lista: 0fr colapsa la primera fila
     de la rejilla, así que el elemento plegado tiene que tener un hijo
     único — la lista tiene siete. */
  .nav-secciones__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows var(--duracion-detalle-cierra) var(--curva-salida),
      opacity var(--duracion-detalle-cierra) var(--curva-salida);
  }
  .nav-secciones__panel > * { overflow: hidden; }

  .nav-secciones__disparador[aria-expanded="true"] + .nav-secciones__panel {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-duration: var(--duracion-detalle-abre);
  }

  /* Desplegada, la agenda es una columna. Sin filetes entre renglones: las
     separa el blanco de toque de cada entrada. */
  .nav-secciones__lista {
    display: block;
    padding-block: var(--espacio-corto);
  }
  .nav-secciones__fila {
    display: block;
    padding-inline: var(--espacio-texto);
  }

  .nav-secciones__enlace {
    width: 100%;
    font-size: var(--tamano-placa);
  }
}

/* Plegada, la lista sigue en el DOM pero no debe alcanzarse con el tabulador
   ni anunciarse: `overflow: hidden` no lo impide. Lo resuelve el atributo
   `inert`, que pone nav-secciones.js cuando el desplegable está en juego —
   así no hace falta ni un `visibility` ni una duración literal en el CSS. */

/* El destino de un ancla no debe quedar pegado al borde superior. */
:target { scroll-margin-block-start: var(--espacio-bloque); }