/* NAXIA Legal (/naxia-legal/): estilos propios de la página (rediseño del 29-10-2026).

   Composición con las reglas de Nutlope/hallmark: nada de una tarjeta redondeada tras otra.
   Cada sección tiene su forma (índice con filas, pestañas, explorador de fases, tubería,
   banda oscura, tabla) y los widgets enseñan el trabajo con los datos de ejemplo de la página.

   Movimiento con la escala de transitions.dev: entrar 250 ms, salir 350 ms, paneles 400 ms,
   apariciones 500 ms, siempre con la misma curva. Sin movimiento con
   prefers-reduced-motion, y todo visible sin JavaScript: .nl-js la pone el script del <head> (pestañas y fases;
   sin él se ven como listas) y .nl-revela la pone /js/naxia-legal.js al arrancar (lo que
   aparece al hacer scroll; si el script falla, se ve todo). */

:root {
  --nl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nl-rapido: 150ms;
  --nl-entra: 250ms;
  --nl-sale: 350ms;
  --nl-panel: 400ms;
  --nl-aparece: 500ms;
  /* Naranja de NAXIA Legal: el claro sobre fondo oscuro, el oscuro sobre blanco. */
  --nl-acento: 251 146 60;
  --nl-tinta: rgb(var(--c-white));
  --nl-suave: rgb(var(--c-gray-400));
  --nl-tenue: rgb(var(--c-gray-500));
  --nl-linea: rgb(var(--c-white) / 0.1);
  --nl-linea-fuerte: rgb(var(--c-white) / 0.2);
  --nl-papel: rgb(var(--c-black));
  --nl-papel-2: rgb(var(--c-superficie-1));
  --nl-papel-3: rgb(var(--c-superficie-2));
  --nl-display: 'Outfit', 'Inter', system-ui, sans-serif;
  /* Sombra y banda oscura: la banda va oscura en los dos temas, por eso no lee --c-*. */
  --nl-sombra: 0 0 0;
  --nl-blanco: 255 255 255;
  --nl-banda: 11 11 12;
  --nl-banda-tinta: 245 245 244;
  --nl-banda-texto: 214 211 209;
  --nl-banda-suave: 168 162 158;
  --nl-texto: 'Inter', system-ui, sans-serif;
}
:root[data-theme="light"] { --nl-acento: 194 65 12; }

/* ---------- Base ----------
   Escala de letra del sitio (pulido del 29-10-2026): H1 hasta 3.25rem, H2 hasta 2.25rem,
   títulos de bloque 1.125 a 1.5rem, texto 0.9375rem y lo secundario 0.8125 a 0.875rem. */
.nl { font-family: var(--nl-texto); color: var(--nl-tinta); font-size: 0.9375rem; }
.nl-contenedor { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .nl-contenedor { padding-inline: 1.5rem; } }

.nl-seccion { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); background: var(--nl-papel); border-top: 1px solid var(--nl-linea); }
.nl-seccion--2 { background: var(--nl-papel-2); }

.nl-h1, .nl-h2, .nl-h3g { font-family: var(--nl-display); font-weight: 300; letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
/* 2.25rem en móvil y 3.25rem de máximo: "automatización" cabe entera en su columna de 360 a 1920 px. */
.nl-h1 { font-size: clamp(2.25rem, 1.55rem + 1.9vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; }
.nl-h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.15; }
.nl-h3g { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.25; letter-spacing: -0.02em; }

/* Cabecera de sección: título a la izquierda, una frase a la derecha, en la misma base. */
.nl-cabeza { display: grid; gap: 1rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.nl-cabeza .nl-h2 { max-width: 20em; }
.nl-cabeza p { color: var(--nl-suave); line-height: 1.65; max-width: 34rem; }
@media (min-width: 1024px) {
  /* La última línea del título y la de la frase, en la misma línea base. */
  .nl-cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; align-items: last baseline; }
  .nl-cabeza--mitad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.nl-enlace { color: rgb(var(--nl-acento)); text-decoration: underline; text-decoration-color: rgb(var(--nl-acento) / 0.35); text-underline-offset: 4px; transition: text-decoration-color var(--nl-sale) var(--nl-ease); }
.nl-enlace:hover { text-decoration-color: rgb(var(--nl-acento)); transition-duration: var(--nl-entra); }
.nl a:focus-visible, .nl button:focus-visible, .nl summary:focus-visible { outline: 2px solid rgb(var(--nl-acento)); outline-offset: 3px; border-radius: 2px; }

/* Flecha de "ver más" (receta Learn more hover): el asta crece y la punta avanza. */
.nl-mas { display: inline-flex; align-items: center; gap: 0.45rem; color: rgb(var(--nl-acento)); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.nl-mas svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.nl-mas path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nl-punta { transition: transform var(--nl-sale) var(--nl-ease); }
.nl-asta { transform-origin: 10px 8px; transform: scaleX(0); transition: transform var(--nl-sale) var(--nl-ease); }
.nl-mas:hover .nl-punta, .nl-fila:hover .nl-punta, .nl-lectura:hover .nl-punta { transform: translateX(3px); transition-duration: var(--nl-entra); }
.nl-mas:hover .nl-asta, .nl-fila:hover .nl-asta, .nl-lectura:hover .nl-asta { transform: translateX(3px) scaleX(1); transition-duration: var(--nl-entra); }

/* Botón principal (el de la portada, sin flecha pegada) */
.nl-boton { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 999px; padding: 0.85rem 1.6rem; font-weight: 500; font-size: 0.9375rem; line-height: 1.25; background: rgb(var(--c-white)); color: rgb(var(--c-black)); border: 1px solid rgb(var(--c-white) / 0.2); transition: transform var(--nl-sale) var(--nl-ease), background-color var(--nl-sale) var(--nl-ease); }
.nl-boton:hover { transform: translateY(-1px); background: rgb(var(--c-white) / 0.88); transition-duration: var(--nl-entra); }
.nl-boton:active { transform: translateY(0) scale(0.98); transition-duration: var(--nl-rapido); }

/* ---------- Aparición al hacer scroll (receta Texts reveal) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nl-revela [data-revela] { opacity: 0; transform: translateY(12px); filter: blur(3px); transition: opacity var(--nl-aparece) var(--nl-ease), transform var(--nl-aparece) var(--nl-ease), filter var(--nl-aparece) var(--nl-ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .nl-revela [data-revela].is-in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Cabecera de la página ---------- */
.nl-hero { position: relative; overflow: hidden; background: var(--nl-papel); padding-top: clamp(7rem, 12vw, 9.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.nl-hero-rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
  .nl-hero { min-height: 100svh; display: flex; align-items: center; }
  .nl-hero-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
}
.nl-migas { font-size: 0.8125rem; color: var(--nl-suave); margin-bottom: 1.75rem; }
.nl-migas ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nl-migas a { transition: color var(--nl-sale) var(--nl-ease); }
.nl-migas a:hover { color: var(--nl-tinta); transition-duration: var(--nl-entra); }
.nl-entrada { margin-top: 1.5rem; font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); line-height: 1.65; color: rgb(var(--c-gray-300)); max-width: 32rem; font-weight: 300; }
.nl-acciones { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.nl-acciones a:not(.nl-boton):not(.nl-boton-ablalo) { font-size: 0.875rem; color: rgb(var(--c-gray-300)); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--nl-linea-fuerte); transition: color var(--nl-sale) var(--nl-ease), text-decoration-color var(--nl-sale) var(--nl-ease); }
.nl-acciones a:not(.nl-boton):not(.nl-boton-ablalo):hover { color: var(--nl-tinta); text-decoration-color: currentColor; transition-duration: var(--nl-entra); }
.nl-fecha { margin-top: 2rem; font-size: 0.8125rem; color: var(--nl-tenue); }

/* Entrada de la cabecera: el título primero, luego el resto (80 ms entre cada bloque).
   Los textos parten de opacidad 0,1 y no de 0: Chrome no cuenta como pintado (LCP) lo que
   está a 0, y el párrafo de entrada, que es el elemento más grande, salía tarde. */
@media (prefers-reduced-motion: no-preference) {
  .nl-js .nl-hero-texto > * { animation: nl-sube-texto var(--nl-aparece) var(--nl-ease) backwards; }
  .nl-js .nl-hero-texto > :nth-child(2) { animation-delay: 80ms; }
  .nl-js .nl-hero-texto > :nth-child(3) { animation-delay: 160ms; }
  .nl-js .nl-hero-texto > :nth-child(n+4) { animation-delay: 240ms; }
  .nl-js .nl-buzon { animation: nl-sube 700ms var(--nl-ease) 200ms backwards; }
}
@keyframes nl-sube { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
@keyframes nl-sube-texto { from { opacity: 0.1; transform: translateY(12px); filter: blur(3px); } }

/* ---------- Widget: el buzón del despacho clasificándose ---------- */
.nl-buzon { min-width: 0; }
.nl-buzon-marco { border: 1px solid var(--nl-linea); border-radius: 10px; background: var(--nl-papel-3); overflow: hidden; font-size: 0.8125rem; box-shadow: 0 1px 2px rgb(var(--nl-sombra) / 0.06), 0 8px 24px -12px rgb(var(--nl-sombra) / 0.12); }
.nl-buzon-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--nl-linea); }
.nl-buzon-cabeza p:first-child { font-weight: 500; }
.nl-buzon-estado { font-size: 0.75rem; color: var(--nl-tenue); font-variant-numeric: tabular-nums; }
.nl-buzon-columnas, .nl-buzon li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 0.8rem 1.25rem; }
.nl-buzon-columnas { display: none; padding-block: 0.7rem 0.3rem; font-size: 0.72rem; color: var(--nl-tenue); }
@media (min-width: 640px) {
  .nl-buzon-columnas, .nl-buzon li { grid-template-columns: minmax(0, 1.35fr) 4.6rem 6.2rem minmax(0, 1.45fr); gap: 0.25rem 0.85rem; }
  .nl-buzon-columnas { display: grid; }
}
.nl-buzon li { border-top: 1px solid rgb(var(--c-white) / 0.05); align-items: baseline; transition: background-color var(--nl-sale) var(--nl-ease); }
.nl-buzon li:first-child { border-top: 0; }
.nl-buzon-de { min-width: 0; }
.nl-buzon-de p:first-child { color: var(--nl-tinta); }
.nl-buzon-de p + p { color: var(--nl-tenue); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-buzon-exp { display: none; color: var(--nl-suave); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .nl-buzon-exp { display: block; } }
.nl-buzon-tipo { color: var(--nl-suave); text-align: right; display: inline-grid; justify-items: end; }
@media (min-width: 640px) { .nl-buzon-tipo { text-align: left; justify-items: start; } }
.nl-buzon-tipo > span { grid-area: 1 / 1; white-space: nowrap; }
.nl-buzon-destino { grid-column: 1 / -1; color: rgb(var(--c-gray-300)); font-size: 0.8rem; }
@media (min-width: 640px) { .nl-buzon-destino { grid-column: auto; font-size: 0.8125rem; } }
.nl-buzon-revision { color: rgb(var(--nl-acento)); }
.nl-buzon figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.85rem; font-size: 0.75rem; color: var(--nl-tenue); }
.nl-repetir { display: none; border: 0; background: none; padding: 0; color: rgb(var(--nl-acento)); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nl-js .nl-buzon.is-listo .nl-repetir { display: inline; }

/* Estados de cada correo: en cola, leyendo (texto con brillo) y clasificado (el tipo se
   cruza con "Leyendo…" y el destino aparece). Sin JavaScript, todos clasificados. */
.nl-leyendo { opacity: 0; }
.nl-buzon li[data-estado="cola"] .nl-tipo-final,
.nl-buzon li[data-estado="cola"] .nl-buzon-destino,
.nl-buzon li[data-estado="leyendo"] .nl-tipo-final,
.nl-buzon li[data-estado="leyendo"] .nl-buzon-destino { opacity: 0; filter: blur(2px); }
.nl-buzon li[data-estado="cola"] .nl-buzon-exp { opacity: 0.35; }
.nl-buzon li[data-estado="leyendo"] { background: rgb(var(--nl-acento) / 0.06); }
.nl-buzon li[data-estado="leyendo"] .nl-leyendo { opacity: 1; }
.nl-tipo-final, .nl-buzon-destino, .nl-leyendo, .nl-buzon-exp { transition: opacity 200ms ease-in-out, filter 200ms ease-in-out; }
.nl-buzon-destino { transition-delay: 120ms; }
/* Texto con brillo (receta Shimmer text) */
.nl-leyendo { position: relative; color: var(--nl-tenue); }
@media (prefers-reduced-motion: no-preference) {
  .nl-leyendo::before { content: attr(data-texto); position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgb(var(--c-white)) 50%, transparent 60%, transparent 100%); background-size: 400% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: nl-brillo 1400ms linear infinite; }
}
@keyframes nl-brillo { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* Si el script no llega a arrancar, a los 5 s se ve todo clasificado igualmente. */
@media (prefers-reduced-motion: no-preference) {
  .nl-js .nl-buzon:not(.is-activo) li:not([data-estado]) .nl-tipo-final,
  .nl-js .nl-buzon:not(.is-activo) li:not([data-estado]) .nl-buzon-destino { animation: nl-aparece-tarde 0s 5s backwards; }
}
@keyframes nl-aparece-tarde { from { opacity: 0; } }

/* ---------- Índice de servicios (filas, no tarjetas) ---------- */
.nl-indice { border-bottom: 1px solid var(--nl-linea); }
.nl-fila { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.4rem 1rem; padding: 1.5rem 0.25rem; border-top: 1px solid var(--nl-linea); transition: background-color var(--nl-sale) var(--nl-ease); }
.nl-fila:hover { background: rgb(var(--nl-acento) / 0.045); transition-duration: var(--nl-entra); }
.nl-fila-num { color: var(--nl-tenue); font-size: 0.8125rem; font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.nl-fila-titulo { font-family: var(--nl-display); font-weight: 400; font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); letter-spacing: -0.015em; line-height: 1.3; transition: transform var(--nl-sale) var(--nl-ease); }
.nl-fila-texto { grid-column: 2; color: var(--nl-suave); line-height: 1.65; }
.nl-fila .nl-mas { grid-column: 2; justify-self: start; margin-top: 0.35rem; }
.nl-fila .nl-mas::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 900px) {
  .nl-fila { grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 6fr) 13rem; align-items: baseline; gap: 1.5rem; padding: 1.85rem 1rem; }
  .nl-fila-num { padding-top: 0; }
  .nl-fila-texto { grid-column: 3; }
  .nl-fila .nl-mas { grid-column: 4; justify-self: end; margin-top: 0; white-space: normal; text-align: right; text-wrap: balance; }
}
@media (prefers-reduced-motion: no-preference) {
  .nl-fila:hover .nl-fila-titulo { transform: translateX(6px); transition-duration: var(--nl-entra); }
}
.nl-nota { margin-top: 2rem; color: var(--nl-suave); }

/* ---------- Pestañas (receta Tabs sliding) ---------- */
.nl-pestanas { display: none; position: relative; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgb(var(--c-white) / 0.05); border: 1px solid var(--nl-linea); margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 30rem; }
.nl-js .nl-pestanas { display: grid; }
.nl-pestana { position: relative; z-index: 1; border: 0; background: transparent; min-height: 2.5rem; padding: 0.5rem 1rem; border-radius: 999px; color: var(--nl-suave); font: 500 0.875rem/1.2 var(--nl-texto); cursor: pointer; transition: color var(--nl-entra) var(--nl-ease); }
.nl-pestana:hover, .nl-pestana[aria-selected="true"] { color: var(--nl-tinta); }
.nl-pastilla { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - (var(--n, 2) - 1) * 4px) / var(--n, 2)); border-radius: 999px; background: var(--nl-papel); box-shadow: 0 1px 3px rgb(var(--nl-sombra) / 0.12), 0 0 0 1px var(--nl-linea); transform: translateX(calc(var(--activa, 0) * (100% + 4px))); transition: transform var(--nl-entra) var(--nl-ease); }
.nl-js [role="tabpanel"][hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nl-panel-entra { animation: nl-panel var(--nl-panel) var(--nl-ease) backwards; }
}
@keyframes nl-panel { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
/* Sin JavaScript los dos encargos se ven uno debajo del otro. */
.nl-encargo + .nl-encargo { margin-top: 4rem; }
.nl-js .nl-encargo + .nl-encargo { margin-top: 0; }

.nl-encargo { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .nl-encargo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
.nl-encargo p.nl-intro { margin-top: 1rem; color: rgb(var(--c-gray-300)); line-height: 1.65; }
.nl-encargo .nl-guia { margin-top: 1.5rem; font-size: 0.875rem; color: var(--nl-suave); line-height: 1.6; }

/* Pasos con raíl: la línea se rellena de arriba abajo y cada nodo se enciende. */
.nl-pasos { position: relative; counter-reset: paso; }
.nl-pasos::before, .nl-pasos::after { content: ""; position: absolute; left: 0.8rem; top: 0.9rem; bottom: 0.9rem; width: 1px; background: var(--nl-linea-fuerte); }
.nl-pasos::after { background: rgb(var(--nl-acento)); transform-origin: top; transform: scaleY(var(--relleno, 1)); transition: transform 1200ms var(--nl-ease); }
.nl-pasos li { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 1.1rem; padding-block: 0.7rem; color: rgb(var(--c-gray-300)); line-height: 1.55; }
.nl-pasos li::before { counter-increment: paso; content: counter(paso); position: relative; z-index: 1; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nl-papel-2); border: 1px solid rgb(var(--nl-acento) / 0.6); color: rgb(var(--nl-acento)); font-size: 0.75rem; font-variant-numeric: tabular-nums; transition: background-color var(--nl-sale) var(--nl-ease), color var(--nl-sale) var(--nl-ease), border-color var(--nl-sale) var(--nl-ease); transition-delay: calc(var(--i, 0) * 160ms); }
@media (prefers-reduced-motion: no-preference) {
  .nl-revela .nl-pasos:not(.is-in) { --relleno: 0; }
  .nl-revela .nl-pasos:not(.is-in) li::before { border-color: var(--nl-linea-fuerte); color: var(--nl-tenue); }
}
.nl-pasos--compacto li { padding-block: 0.45rem; font-size: 0.875rem; }

/* Widget del lote de reclamaciones */
.nl-lote { border: 1px solid var(--nl-linea); border-radius: 10px; background: var(--nl-papel-3); overflow: hidden; font-size: 0.875rem; box-shadow: 0 1px 2px rgb(var(--nl-sombra) / 0.06), 0 8px 24px -12px rgb(var(--nl-sombra) / 0.12); }
.nl-lote-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--nl-linea); }
.nl-lote-cabeza p:first-child { font-weight: 500; }
.nl-lote-cabeza p + p { font-size: 0.75rem; color: var(--nl-tenue); }
.nl-lote-columnas, .nl-lote li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 0.8rem 1.25rem; }
.nl-lote-columnas { display: none; padding-block: 0.7rem 0.3rem; font-size: 0.72rem; color: var(--nl-tenue); }
@media (min-width: 640px) {
  .nl-lote-columnas, .nl-lote li { grid-template-columns: minmax(0, 1.4fr) 7.5rem 6rem minmax(0, 1.4fr); }
  .nl-lote-columnas { display: grid; }
}
.nl-lote li { border-top: 1px solid rgb(var(--c-white) / 0.05); align-items: baseline; color: var(--nl-suave); }
.nl-lote li:first-child { border-top: 0; }
.nl-lote li > :first-child { color: var(--nl-tinta); font-variant-numeric: tabular-nums; }
.nl-lote-req { display: none; }
@media (min-width: 640px) { .nl-lote-req { display: block; } }
.nl-lote-escrito { grid-column: 1 / -1; color: rgb(var(--c-gray-300)); font-size: 0.8rem; }
@media (min-width: 640px) { .nl-lote-escrito { grid-column: auto; font-size: 0.875rem; } }
.nl-lote small { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--nl-tenue); }
.nl-figura-nota { margin-top: 0.85rem; font-size: 0.75rem; color: var(--nl-tenue); }

/* ---------- Explorador de fases del expediente ---------- */
.nl-fases { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .nl-js .nl-fases { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; } }
.nl-fases-lista { display: none; position: relative; }
.nl-js .nl-fases-lista { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--nl-linea); scroll-snap-type: x proximity; }
.nl-js .nl-fases-lista::-webkit-scrollbar { display: none; }
.nl-fase-boton { flex: none; display: flex; align-items: baseline; gap: 0.7rem; padding: 0.75rem 0.9rem; border: 0; background: none; color: var(--nl-suave); font: 400 0.875rem/1.4 var(--nl-texto); text-align: left; white-space: nowrap; scroll-snap-align: start; cursor: pointer; transition: color var(--nl-entra) var(--nl-ease); }
.nl-fase-boton span { color: var(--nl-tenue); font-size: 0.75rem; font-variant-numeric: tabular-nums; min-width: 1.2rem; }
.nl-fase-boton:hover, .nl-fase-boton[aria-selected="true"] { color: var(--nl-tinta); }
.nl-fase-boton[aria-selected="true"] span { color: rgb(var(--nl-acento)); }
.nl-fase-marca { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: rgb(var(--nl-acento)); transform-origin: 0 0; transition: transform var(--nl-entra) var(--nl-ease); pointer-events: none; }
@media (min-width: 1024px) {
  .nl-js .nl-fases-lista { flex-direction: column; gap: 0; overflow: visible; border-bottom: 0; border-left: 1px solid var(--nl-linea); position: sticky; top: 7rem; }
  .nl-fase-boton { white-space: normal; padding: 0.7rem 1.25rem; }
  .nl-fase-marca { left: -1px; top: 0; bottom: auto; width: 2px; height: 1px; }
}
.nl-fase { min-width: 0; }
.nl-fase + .nl-fase { margin-top: 3rem; }
.nl-js .nl-fase + .nl-fase { margin-top: 0; }
.nl-fase h3 { font-family: var(--nl-display); font-weight: 300; font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 1.25rem; }
.nl-fase ul { border-bottom: 1px solid var(--nl-linea); }
.nl-fase li { padding: 0.95rem 0 0.95rem 1.75rem; border-top: 1px solid var(--nl-linea); color: rgb(var(--c-gray-300)); line-height: 1.65; position: relative; }
.nl-fase li::before { content: ""; position: absolute; left: 0.25rem; top: 1.7rem; width: 0.65rem; height: 1px; background: rgb(var(--nl-acento)); }
.nl-siguiente { margin-top: 1.5rem; border: 0; background: none; padding: 0; cursor: pointer; }
.nl-fases-pie { margin-top: 2.5rem; color: var(--nl-suave); max-width: 40rem; line-height: 1.65; }

/* ---------- Tubería de los pleitos masa ---------- */
.nl-tuberia { display: grid; gap: 2.75rem 2rem; counter-reset: etapa; }
@media (min-width: 640px) { .nl-tuberia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nl-tuberia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nl-etapa { position: relative; padding-top: 2.6rem; }
.nl-etapa::before { content: ""; position: absolute; top: 0.8rem; left: 2.1rem; right: 0; height: 1px; background: var(--nl-linea-fuerte); transform-origin: left; transition: transform 900ms var(--nl-ease); transition-delay: calc(var(--i, 0) * 120ms); }
.nl-etapa::after { counter-increment: etapa; content: counter(etapa); position: absolute; top: 0; left: 0; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(var(--nl-acento) / 0.6); color: rgb(var(--nl-acento)); font-size: 0.75rem; font-variant-numeric: tabular-nums; background: var(--nl-papel-2); transition: border-color var(--nl-sale) var(--nl-ease), color var(--nl-sale) var(--nl-ease); transition-delay: calc(var(--i, 0) * 120ms); }
.nl-etapa h3 { font-family: var(--nl-display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3; }
.nl-etapa p { margin-top: 0.55rem; color: var(--nl-suave); line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .nl-revela .nl-tuberia:not(.is-in) .nl-etapa::before { transform: scaleX(0); }
  .nl-revela .nl-tuberia:not(.is-in) .nl-etapa::after { border-color: var(--nl-linea-fuerte); color: var(--nl-tenue); }
}

/* ---------- Acordeón (receta Accordion, sobre <details>) ---------- */
.nl-acordeones { border-bottom: 1px solid var(--nl-linea); }
.nl-acordeon { border-top: 1px solid var(--nl-linea); }
.nl-acordeon > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.25rem 0; cursor: pointer; font-weight: 500; line-height: 1.5; color: var(--nl-tinta); transition: color var(--nl-entra) var(--nl-ease); }
.nl-acordeon > summary::-webkit-details-marker { display: none; }
.nl-acordeon > summary:hover { color: rgb(var(--nl-acento)); }
.nl-chevron { flex: none; width: 16px; height: 16px; color: var(--nl-suave); transition: transform var(--nl-entra) var(--nl-ease); }
.nl-chevron path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nl-acordeon[open] > summary .nl-chevron { transform: scaleY(-1); }
.nl-acordeon-cuerpo { padding-bottom: 1.5rem; color: var(--nl-suave); line-height: 1.7; max-width: 44rem; }
@supports selector(::details-content) {
  .nl-acordeon::details-content { opacity: 0; transform: translateY(-4px); filter: blur(2px); transition: opacity var(--nl-entra) var(--nl-ease), transform var(--nl-entra) var(--nl-ease), filter var(--nl-entra) var(--nl-ease), content-visibility var(--nl-entra) allow-discrete; }
  .nl-acordeon[open]::details-content { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-acordeon::details-content { transition: none !important; }
}
/* "Leer más" de las columnas: el resumen es un enlace pequeño. */
.nl-acordeon--breve { border: 0; }
.nl-acordeon--breve > summary { justify-content: flex-start; gap: 0.35rem; padding: 0.6rem 0 0; font-size: 0.875rem; color: rgb(var(--nl-acento)); }
.nl-acordeon--breve > summary .nl-chevron { color: currentColor; }
.nl-acordeon--breve .nl-acordeon-cuerpo { padding: 0.75rem 0 0; }
.nl-acordeon--breve:not([open]) .nl-menos, .nl-acordeon--breve[open] .nl-mas-texto { display: none; }

/* ---------- Rejilla con líneas finas (gestión, confidencialidad) ---------- */
.nl-rejilla { display: grid; border-top: 1px solid var(--nl-linea); }
.nl-rejilla > * { display: flex; flex-direction: column; padding: 2rem 0; border-bottom: 1px solid var(--nl-linea); min-width: 0; }
.nl-rejilla .nl-acordeon--breve { margin-top: auto; }
.nl-rejilla h3 { font-family: var(--nl-display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3; }
.nl-rejilla p { margin-top: 0.7rem; color: var(--nl-suave); line-height: 1.65; }
.nl-rejilla .nl-guia { font-size: 0.875rem; }
@media (min-width: 768px) {
  .nl-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-rejilla--2 > :nth-child(odd) { padding-right: 2.5rem; border-right: 1px solid var(--nl-linea); }
  .nl-rejilla--2 > :nth-child(even) { padding-left: 2.5rem; }
}
@media (min-width: 1024px) {
  .nl-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--nl-linea); }
  .nl-rejilla--3 > * { border-bottom: 0; padding: 2rem 2rem 2rem 0; }
  .nl-rejilla--3 > * + * { padding-left: 2rem; border-left: 1px solid var(--nl-linea); }
}

/* ---------- Atención telefónica: qué hace y qué no ---------- */
.nl-dividido { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .nl-dividido { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; } }
.nl-dividido p.nl-intro { margin-top: 1rem; color: rgb(var(--c-gray-300)); line-height: 1.65; }
.nl-dividido p.nl-guia { margin-top: 1rem; color: var(--nl-suave); line-height: 1.65; }
.nl-hace { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .nl-hace { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.nl-hace h3 { font-size: 0.875rem; font-weight: 500; padding-bottom: 0.8rem; border-bottom: 1px solid var(--nl-linea-fuerte); }
.nl-hace li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--nl-linea); color: rgb(var(--c-gray-300)); line-height: 1.55; }
.nl-hace svg { width: 16px; height: 16px; margin-top: 0.2rem; }
.nl-hace svg path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nl-si path { stroke: rgb(var(--nl-acento)); }
.nl-no path { stroke: var(--nl-tenue); }

/* ---------- Tabla: mercado o a medida ---------- */
.nl-tabla-envoltura { overflow-x: auto; }
.nl-tabla { width: 100%; table-layout: fixed; text-align: left; border-collapse: collapse; }
.nl-tabla th, .nl-tabla td { padding: 1.05rem 1.25rem 1.05rem 0; vertical-align: top; overflow-wrap: break-word; }
.nl-tabla thead th { font-size: 0.8125rem; font-weight: 400; color: var(--nl-tenue); padding-top: 0; border-bottom: 1px solid var(--nl-linea-fuerte); }
.nl-tabla tbody tr { border-bottom: 1px solid var(--nl-linea); transition: background-color var(--nl-sale) var(--nl-ease); }
.nl-tabla tbody tr:hover { background: rgb(var(--nl-acento) / 0.04); transition-duration: var(--nl-entra); }
.nl-tabla tbody th { font-weight: 500; color: var(--nl-tinta); width: 42%; padding-left: 0.5rem; }
.nl-tabla tbody th { line-height: 1.55; }
.nl-tabla tbody td { color: var(--nl-suave); line-height: 1.65; }

/* ---------- Banda oscura: control de errores ----------
   Va oscura en los dos temas (cambio de "papel" a mitad de página), por eso usa colores
   fijos y no las variables del tema. */
.nl-banda { position: relative; overflow: hidden; background: rgb(var(--nl-banda)); color: rgb(var(--nl-banda-tinta)); padding-block: clamp(5rem, 10vw, 8.5rem); }
/* El vídeo de la balanza, en grises: su luz cálida se veía marrón (nada de marrones). */
.nl-banda video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.26; filter: grayscale(1) contrast(1.05); pointer-events: none; }
.nl-banda-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--nl-banda) / 0.55) 0%, rgb(var(--nl-banda) / 0.75) 55%, rgb(var(--nl-banda) / 0.95) 100%); }
.nl-banda .nl-contenedor { position: relative; }
.nl-banda .nl-h2 { color: rgb(var(--nl-banda-tinta)); max-width: 36rem; }
.nl-declaracion { margin-top: 1.5rem; max-width: 40rem; font-family: var(--nl-display); font-weight: 300; font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; color: rgb(var(--nl-banda-texto)); text-wrap: pretty; }
.nl-controles { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 0; border-top: 1px solid rgb(var(--nl-blanco) / 0.16); }
@media (min-width: 640px) { .nl-controles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nl-controles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nl-controles > div { padding: 1.6rem 1.5rem 1.6rem 0; border-bottom: 1px solid rgb(var(--nl-blanco) / 0.1); }
@media (min-width: 1024px) { .nl-controles > div { border-bottom: 0; } .nl-controles > div + div { padding-left: 1.5rem; border-left: 1px solid rgb(var(--nl-blanco) / 0.1); } }
.nl-controles h3 { color: rgb(var(--nl-banda-tinta)); font-size: 1rem; font-weight: 500; }
.nl-controles p { margin-top: 0.5rem; color: rgb(var(--nl-banda-suave)); line-height: 1.65; font-size: 0.875rem; }

/* ---------- ablalo ---------- */
.nl-ablalo { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .nl-ablalo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; } }
.nl-ablalo p.nl-intro { margin-top: 1rem; color: var(--nl-suave); line-height: 1.65; }
.nl-ablalo ul { margin-top: 1.5rem; border-top: 1px solid var(--nl-linea); }
.nl-ablalo li { padding: 0.9rem 0; border-bottom: 1px solid var(--nl-linea); color: rgb(var(--c-gray-300)); line-height: 1.55; }
.nl-ablalo video { width: 100%; border-radius: 10px; border: 1px solid var(--nl-linea); }
.nl-boton-ablalo { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 0.8rem 1.5rem; font-weight: 500; font-size: 0.875rem; line-height: 1.25; color: rgb(var(--nl-blanco)); background: var(--naranja-ablalo); transition: opacity var(--nl-sale) var(--nl-ease), transform var(--nl-sale) var(--nl-ease); }
.nl-boton-ablalo:hover { opacity: 0.9; transform: translateY(-1px); transition-duration: var(--nl-entra); }

/* ---------- Cómo trabajamos ---------- */
.nl-fases-trabajo { display: grid; gap: 2rem; counter-reset: fase; }
@media (min-width: 640px) { .nl-fases-trabajo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nl-fases-trabajo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } }
.nl-fases-trabajo li { border-top: 1px solid var(--nl-linea-fuerte); padding-top: 1.25rem; }
.nl-fases-trabajo li::before { counter-increment: fase; content: counter(fase); display: block; font-family: var(--nl-display); font-weight: 300; font-size: 1.75rem; line-height: 1; color: rgb(var(--nl-acento)); margin-bottom: 0.9rem; font-variant-numeric: tabular-nums; }
.nl-fases-trabajo h3 { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.nl-fases-trabajo p { margin-top: 0.5rem; color: var(--nl-suave); line-height: 1.65; font-size: 0.875rem; }

/* ---------- Preguntas y lecturas ---------- */
.nl-dos { display: grid; gap: 2rem 4rem; }
@media (min-width: 1024px) { .nl-dos { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.nl-lecturas { display: grid; border-top: 1px solid var(--nl-linea); }
@media (min-width: 768px) { .nl-lecturas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.nl-lectura { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: 1.05rem 0; border-bottom: 1px solid var(--nl-linea); color: rgb(var(--c-gray-300)); transition: color var(--nl-sale) var(--nl-ease); }
.nl-lectura:hover { color: var(--nl-tinta); transition-duration: var(--nl-entra); }
.nl-lectura .nl-mas { flex: none; }

/* ---------- Contacto ---------- */
.nl-contacto { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .nl-contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; } }
/* La llamada final de /naxia-legal/ va sobre la seda (lienzo .seda-lienzo de css/tailwind.src.css).
   Un velo del color de la sección, más denso bajo el formulario, deja leer la letra pequeña
   en los dos temas sin tapar la tela. Va en ::after para pintarse encima del lienzo (z-index -1). */
.nl-contacto-seda { padding-block: clamp(5rem, 10vw, 8.5rem); }
.nl-contacto-seda::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(var(--c-superficie-1) / 0.2) 0%, rgb(var(--c-superficie-1) / 0.55) 100%); }
@media (min-width: 1024px) {
  .nl-contacto-seda::after { background: linear-gradient(90deg, rgb(var(--c-superficie-1) / 0.1) 0%, rgb(var(--c-superficie-1) / 0.25) 40%, rgb(var(--c-superficie-1) / 0.6) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .nl *, .nl *::before, .nl *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* Enlaces a guías con flecha, en fila cuando caben (recorte de texto del 29-10). */
.nl-enlaces { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.nl-guia .nl-mas { white-space: normal; }

/* ---------- Agente de voz: la ficha que se rellena durante la llamada ---------- */
.nl-ficha dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 1.25rem; border-top: 1px solid rgb(var(--c-white) / 0.05); transition: background-color var(--nl-sale) var(--nl-ease); }
@media (min-width: 640px) { .nl-ficha dl > div { grid-template-columns: 8rem minmax(0, 1fr); } }
.nl-ficha dl > div:first-child { border-top: 0; }
.nl-ficha dt { color: var(--nl-tenue); }
.nl-ficha dd { display: grid; color: rgb(var(--c-gray-300)); }
.nl-ficha dd > span { grid-area: 1 / 1; }
.nl-ficha .nl-aviso { color: rgb(var(--nl-acento)); }
.nl-valor { transition: opacity 200ms ease-in-out, filter 200ms ease-in-out; }
.nl-ficha [data-estado="cola"] .nl-valor, .nl-ficha [data-estado="leyendo"] .nl-valor { opacity: 0; filter: blur(2px); }
.nl-ficha [data-estado="leyendo"] { background: rgb(var(--nl-acento) / 0.06); }
.nl-ficha [data-estado="leyendo"] .nl-leyendo { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nl-js .nl-ficha:not(.is-activo) dl > div:not([data-estado]) .nl-valor { animation: nl-aparece-tarde 0s 5s backwards; }
}

/* ---------- Agente de voz: normas en filas (la configuración a la vista, la cita dentro) ---------- */
.nl-norma > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 0.4rem 1.5rem; align-items: start; }
.nl-norma > summary .nl-chevron { grid-column: 2; grid-row: 1; margin-top: 0.35rem; }
.nl-norma-nombre { grid-column: 1; font-family: var(--nl-display); font-weight: 400; font-size: 1.0625rem; letter-spacing: -0.005em; line-height: 1.4; }
.nl-norma-config { grid-column: 1; font-weight: 400; color: rgb(var(--c-gray-300)); line-height: 1.65; }
.nl-norma-cuerpo { padding-bottom: 1.5rem; color: var(--nl-suave); line-height: 1.7; }
.nl-norma-cuerpo strong { color: var(--nl-tinta); font-weight: 500; }
@media (min-width: 900px) {
  .nl-norma > summary { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 16px; }
  .nl-norma > summary .nl-chevron { grid-column: 3; }
  .nl-norma-config { grid-column: 2; grid-row: 1; }
  .nl-norma-cuerpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 16px; column-gap: 1.5rem; }
  .nl-norma-cuerpo > * { grid-column: 2; }
}

/* ---------- Agente de voz: el dato con su fuente, en la banda oscura ---------- */
.nl-banda { --nl-acento: 251 146 60; }
.nl-dato { display: grid; gap: 2.5rem; align-items: end; margin-top: 2rem; }
@media (min-width: 1024px) { .nl-dato { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.nl-dato .nl-declaracion { margin-top: 0; }
.nl-banda-nota { margin-top: 1.25rem; color: rgb(var(--nl-banda-suave)); line-height: 1.65; max-width: 36rem; font-size: 0.875rem; }
.nl-cifra { font-family: var(--nl-display); font-weight: 300; font-size: clamp(2.75rem, 2rem + 2.6vw, 4.25rem); line-height: 1; letter-spacing: -0.035em; color: rgb(var(--nl-acento)); font-variant-numeric: tabular-nums; }
.nl-cifra-nota { margin-top: 0.9rem; color: rgb(var(--nl-banda-suave)); line-height: 1.65; font-size: 0.875rem; max-width: 26rem; }

/* ---------- Cierre con una acción (la demo de ablalo) ---------- */
.nl-cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.nl-cierre p { color: var(--nl-suave); max-width: 36rem; margin-top: 0.75rem; line-height: 1.6; }

/* ---------- Efecto seda (js/naxia-legal.js) ----------
   El sombreador está en js/seda.js y los colores (--seda-a, -b, -c) en css/tailwind.src.css:
   grafito y plata en oscuro, perla en claro. La banda oscura usa siempre los oscuros. */
.nl-banda { --seda-a: 8 9 11; --seda-b: 34 37 44; --seda-c: 112 119 134; }
.nl-escenario { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; padding: clamp(0.85rem, 2.4vw, 1.9rem); background: linear-gradient(140deg, rgb(var(--seda-b)) 0%, rgb(var(--seda-a)) 100%); }
.nl-escenario > canvas, .nl-seda-fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--nl-ease); }
.nl-escenario > canvas.is-lista, .nl-seda-fondo.is-lista { opacity: 1; }
.nl-escenario > canvas { z-index: 0; }
.nl-escenario > .nl-buzon-marco { position: relative; z-index: 1; }
.nl-banda .nl-seda-fondo + .nl-banda-velo { background: linear-gradient(180deg, rgb(var(--nl-banda) / 0.1) 0%, rgb(var(--nl-banda) / 0.3) 60%, rgb(var(--nl-banda) / 0.7) 100%); }

/* ---------- Artículos de NAXIA Legal: guías en filas y llamada final sobre seda ---------- */
.nl-escenario > :not(canvas) { position: relative; z-index: 1; }
.nl-lecturas.nl-lecturas--una { grid-template-columns: minmax(0, 1fr); }
.nl-cta { padding: clamp(2rem, 5vw, 3.25rem); }
.nl-cta .nl-h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.nl-cta-texto { margin-top: 0.9rem; max-width: 32rem; color: rgb(var(--c-gray-300)); line-height: 1.65; }
.nl-cta .nl-acciones { margin-top: 1.75rem; }

/* ---------- Artículos: tabla con filtros y cronología ([data-filtro-tabla], js/naxia-legal.js) ----------
   Botones en una fila encima de lo que filtran, un punto por fila de la tabla en la línea de
   tiempo y el detalle al pasar por encima. La tabla de debajo es la vista completa. */
.nl-filtro { display: flex; flex-wrap: wrap; gap: 0.25rem 0.125rem; margin: 1.75rem 0 1.5rem; }
.nl-filtro button { font: inherit; font-size: 0.8125rem; line-height: 1.2; color: var(--nl-suave); padding: 0.4rem 0.7rem; border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer; transition: color var(--nl-sale) var(--nl-ease), border-color var(--nl-sale) var(--nl-ease), background-color var(--nl-sale) var(--nl-ease); }
.nl-filtro button span { margin-left: 0.15rem; color: var(--nl-tenue); font-variant-numeric: tabular-nums; }
.nl-filtro button:hover { color: var(--nl-tinta); transition-duration: var(--nl-entra); }
.nl-filtro button[aria-pressed="true"] { color: var(--nl-tinta); border-color: var(--nl-linea-fuerte); background: rgb(var(--c-white) / 0.04); }
.nl-filtro button:focus-visible { outline: 2px solid rgb(var(--nl-acento)); outline-offset: 2px; }
/* En escritorio el texto del primer botón se alinea con la columna; en móvil, una sola fila que se desliza. */
@media (min-width: 640px) { .nl-filtro { margin-left: -0.7rem; } }
/* En escritorio, el filtro y la línea de tiempo van al ancho de la tabla que filtran, no al de la columna de texto. */
@media (min-width: 1024px) { .article-body > [data-filtro-tabla] { max-width: none; } }
@media (max-width: 639px) {
  .nl-filtro { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, black calc(100% - 2rem), transparent); }
  .nl-filtro::-webkit-scrollbar { display: none; }
  .nl-filtro button { flex: none; }
}
.nl-crono { position: relative; margin: 0; }
.nl-crono svg { display: block; width: 100%; overflow: visible; }
.nl-crono-eje { stroke: var(--nl-linea-fuerte); stroke-width: 1; }
.nl-crono-ano { fill: var(--nl-tenue); font-size: 11px; font-variant-numeric: tabular-nums; }
.nl-crono-punto { fill: rgb(var(--nl-acento)); stroke: rgb(var(--c-black)); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform var(--nl-sale) var(--nl-ease), fill var(--nl-sale) var(--nl-ease), stroke var(--nl-sale) var(--nl-ease); }
.nl-crono-punto.es-fuera { fill: rgb(var(--c-black)); stroke: var(--nl-linea-fuerte); stroke-width: 1.5; }
.nl-crono-punto.es-foco { transform: scale(1.4); transition-duration: var(--nl-entra); }
.nl-crono-toque { fill: transparent; cursor: pointer; }
.nl-crono-globo { position: absolute; z-index: 2; left: 0; top: 0; width: max-content; max-width: min(16rem, 100%); padding: 0.6rem 0.8rem; border: 1px solid var(--nl-linea-fuerte); border-radius: 8px; background: var(--nl-papel); box-shadow: 0 10px 30px rgb(var(--nl-sombra) / 0.18); font-size: 0.8125rem; line-height: 1.45; color: var(--nl-suave); pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity var(--nl-sale) var(--nl-ease); }
.nl-crono-globo.is-visible { opacity: 1; transition-duration: var(--nl-rapido); }
.nl-crono-globo strong { display: block; margin-bottom: 0.2rem; color: var(--nl-tinta); font-weight: 500; }
.nl-crono-nota { margin: 0.6rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--nl-tenue); }
.article-body tr.es-foco td { background: rgb(var(--c-white) / 0.045); }
.nl-tabla-fechas td:first-child { white-space: nowrap; }
.article-body tbody td { transition: background-color var(--nl-sale) var(--nl-ease); }
@keyframes nl-fila { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .nl-fila-entra td { animation: nl-fila var(--nl-entra) var(--nl-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-filtro button, .nl-crono-punto, .nl-crono-globo, .article-body tbody td { transition: none; }
}