/* ══ Netebu · paginas legales ══════════════════════════════════ */
.sec.editor.nb-legal{
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-grad-suave:linear-gradient(135deg,rgba(74,144,217,0.10) 0%,rgba(123,92,246,0.10) 50%,rgba(232,64,152,0.10) 100%);
  --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85;
  --nb-line:#E9E4F3; --nb-line-2:#D8D0EC;
  --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE;
  --nb-violet:#7B5CF6; --nb-violet-aa:#6B48F2;
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
  background:var(--nb-paper);
  padding:50px 0 76px !important;
}

/* ── el ancho de lectura ──────────────────────────────────── */
/* LOS 760 PX NO DABAN 65 CARACTERES: DABAN 98. Medido en el
   navegador con `canvas.measureText` sobre la fuente computada, no
   estimado: el parrafo mide 730 px utiles y el caracter medio de
   Figtree a 16,72 px ocupa 7,45. 730 / 7,45 = 98 caracteres por
   linea, cuando lo comodo son 65-75.

   Se corrigen las dos cosas a la vez, que van juntas: la caja baja a
   620 px y la letra sube a 18. El caracter medio pasa a 8,02 px y la
   linea queda en 590 / 8,02 = 73 caracteres.

   Las paginas salen mas largas. Es el precio de que se lean.       */
.sec.editor.nb-legal > .container{
  max-width:620px !important;
}

/* ── cuerpo de texto ──────────────────────────────────────── */
/* Los `style=` en linea traen color y tamano propios: `!important`
   es la unica forma de pisarlos sin editar el contenido.        */
.sec.editor.nb-legal p,
.sec.editor.nb-legal li,
.sec.editor.nb-legal span,
.sec.editor.nb-legal div:not(.container){
  font-family:var(--nb-ff-b) !important;
  font-size:1.125rem !important;
  line-height:1.72 !important;
  color:var(--nb-ink-2) !important;
  letter-spacing:0 !important;
}
.sec.editor.nb-legal p{margin:0 0 18px !important}
.sec.editor.nb-legal p:empty{display:none}
.sec.editor.nb-legal b,
.sec.editor.nb-legal strong{
  color:var(--nb-ink) !important; font-weight:600 !important;
}
.sec.editor.nb-legal a{
  color:var(--nb-violet-aa) !important;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(118,86,246,0.35);
  transition:text-decoration-color 0.2s ease;
  word-break:break-word;
}
.sec.editor.nb-legal a:hover{text-decoration-color:var(--nb-violet) !important}

/* ── titulos de apartado, que el script marca ─────────────── */
/* En el HTML son `<b>1. Objeto</b>`, no encabezados. */
.sec.editor.nb-legal .nb-h{
  display:block; font-family:var(--nb-ff-d) !important;
  font-size:1.32rem !important; font-weight:700 !important;
  color:var(--nb-ink) !important; letter-spacing:-0.022em;
  line-height:1.3; margin:46px 0 16px !important;
  padding-top:22px; border-top:1px solid var(--nb-line);
  scroll-margin-top:110px;
}
.sec.editor.nb-legal .nb-h:first-of-type,
.sec.editor.nb-legal .nb-h-1{border-top:0; padding-top:0; margin-top:0 !important}

/* ── las vinetas escritas a mano ──────────────────────────────
   En la politica de cookies las listas son parrafos que empiezan
   por el caracter «•». No se convierten en <li> ni se les quita
   nada: se les da SANGRIA COLGANTE, asi que el «•» sale al margen
   y hace de vineta de verdad. Ni una palabra tocada.            */
.sec.editor.nb-legal p.nb-punto{
  padding-left:26px; text-indent:-26px;
  margin:0 0 11px !important;
}
.sec.editor.nb-legal p.nb-punto + p:not(.nb-punto){margin-top:18px !important}

/* Parrafos que Word dejo vacios: traen un <o:p> dentro, asi que
   tienen hijo y `p:empty` no los alcanza. En el anexo del RGPD son
   la mitad de los 137, y cada uno dejaba 18 px de aire muerto. */
.sec.editor.nb-legal p.nb-vacio{display:none}
.sec.editor.nb-legal .nb-h .nb-n{
  display:inline-block; min-width:1.9em;
  background:var(--nb-grad); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  font-weight:800;
}
/* subapartados: «1.1 …» */
.sec.editor.nb-legal .nb-h2{
  display:block; font-family:var(--nb-ff-d) !important;
  font-size:1.06rem !important; font-weight:700 !important;
  color:var(--nb-ink) !important;
  margin:28px 0 10px !important;
}

/* ── listas ───────────────────────────────────────────────── */
.sec.editor.nb-legal ul{list-style:none; padding-left:0; margin:0 0 20px}
.sec.editor.nb-legal ul > li{
  position:relative; padding-left:24px; margin-bottom:9px;
}
.sec.editor.nb-legal ul > li::before{
  content:""; position:absolute; left:3px; top:0.72em;
  width:6px; height:6px; border-radius:50%; background:var(--nb-grad);
}
.sec.editor.nb-legal ol{padding-left:22px; margin:0 0 20px}
.sec.editor.nb-legal ol > li{margin-bottom:9px; padding-left:4px}
.sec.editor.nb-legal ol > li::marker{
  color:var(--nb-violet) !important; font-family:var(--nb-ff-d); font-weight:600;
}

/* ── el bloque de identificacion, que el script destaca ───── */
.sec.editor.nb-legal .nb-ficha{
  background:var(--nb-paper-2) !important;
  border:1px solid var(--nb-line) !important;
  border-left:3px solid transparent !important;
  border-image:var(--nb-grad) 1;
  border-radius:0 14px 14px 0 !important;
  padding:22px 26px !important; margin:0 0 30px !important;
}
.sec.editor.nb-legal .nb-ficha p{margin-bottom:7px !important}
.sec.editor.nb-legal .nb-ficha p:last-child{margin-bottom:0 !important}

/* ── indice, que el script construye ──────────────────────── */
.sec.editor.nb-legal .nb-indice{
  background:var(--nb-paper-2); border:1px solid var(--nb-line);
  border-radius:16px; padding:24px 26px; margin:0 0 44px;
}
.sec.editor.nb-legal .nb-indice-t{
  display:block; font-family:var(--nb-ff-d); font-weight:600;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--nb-ink-3); margin-bottom:14px;
}
.sec.editor.nb-legal .nb-indice ol{
  margin:0; padding-left:0; list-style:none;
  columns:2; column-gap:26px;
}
.sec.editor.nb-legal .nb-indice li{
  margin-bottom:7px; break-inside:avoid;
}
.sec.editor.nb-legal .nb-indice a{
  font-family:var(--nb-ff-b) !important; font-size:0.95rem !important;
  color:var(--nb-ink-2) !important; text-decoration:none !important;
  transition:color 0.2s ease, padding-left 0.2s ease;
  display:inline-block;
}
.sec.editor.nb-legal .nb-indice a:hover{
  color:var(--nb-violet-aa) !important; padding-left:4px;
}
.sec.editor.nb-legal .nb-indice a .nb-n{
  color:var(--nb-violet) !important; font-family:var(--nb-ff-d);
  font-weight:700; margin-right:7px;
}

/* ── los <br> sueltos del texto pegado ────────────────────── */
.sec.editor.nb-legal br + br{display:none}

/* ── tablas, si las hubiera ───────────────────────────────── */
.sec.editor.nb-legal table{
  width:100%; border-collapse:collapse; margin:0 0 24px;
  font-size:0.95rem;
}
.sec.editor.nb-legal table td,
.sec.editor.nb-legal table th{
  border:1px solid var(--nb-line) !important;
  padding:11px 14px !important; vertical-align:top;
}
.sec.editor.nb-legal table th{
  background:var(--nb-paper-2) !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink) !important; text-align:left;
}

/* ── LO QUE NO CABE EN UN MOVIL ──────────────────────────────
   Medido a 390 px: dos paginas desbordaban, y por motivos
   distintos. Ninguno es texto corriente.

   · El anexo trae una tabla de proveedores de 624 px pegada desde
     Word. Se le da scroll PROPIO: encogerla a 360 la dejaria
     ilegible, y dejarla desbordar mueve la pagina entera de lado.
   · La politica de cookies lista las direcciones de ayuda de cada
     navegador —`https://support.google.com/accounts/answer/...`—
     como TEXTO PLANO, no como enlaces, asi que el `word-break` que
     ya habia para los `a` no las alcanzaba.

   `break-word` y no `anywhere`: solo parte la palabra cuando de
   verdad no cabe, y deja el resto del parrafo intacto.          */
.sec.editor.nb-legal p,
.sec.editor.nb-legal li,
.sec.editor.nb-legal td,
.sec.editor.nb-legal th{overflow-wrap:break-word}
@media (max-width:767px){
  .sec.editor.nb-legal table{
    display:block; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:767px){
  .sec.editor.nb-legal{padding:34px 0 54px !important}
  .sec.editor.nb-legal p,
  .sec.editor.nb-legal li,
  .sec.editor.nb-legal span{font-size:1rem !important; line-height:1.75 !important}
  .sec.editor.nb-legal .nb-h{font-size:1.18rem !important; margin-top:34px !important}
  .sec.editor.nb-legal .nb-indice ol{columns:1}
}
@media (prefers-reduced-motion:reduce){
  .sec.editor.nb-legal *{transition:none !important}
}
@media print{
  .sec.editor.nb-legal .nb-indice{display:none}
  .sec.editor.nb-legal > .container{max-width:none !important}
}

/* ══════════════════════════════════════════════════════════════
   NAVEGACION: EL INDICE AL MARGEN, Y LA SECCION ARRIBA
   ══════════════════════════════════════════════════════════════
   El indice era un bloque al principio de la pagina: util para
   empezar, inutil a partir del apartado 3, que es justo cuando hace
   falta. En documentos de 5.500 y 7.000 palabras, lo que se necesita
   es saber DONDE SE ESTA y poder saltar sin volver arriba.

   Pasa al margen izquierdo, pegajoso, y se resalta el apartado que
   se esta leyendo. La caja de lectura no se toca: sigue midiendo los
   620 px medidos para dar 73 caracteres por linea.                */

/* CINCO COLUMNAS, NO DOS, y las de los extremos elasticas.
   Con `grid-template-columns:246px 620px` mas `justify-content:center`
   la rejilla entera medía 920 px, y la barra de documentos —que ocupa
   de la primera a la ultima— quedaba encerrada en esos 920: las siete
   pestanas no cabian y se veian CORTADAS por los dos lados, «…Legal»
   a la izquierda y «Encargado del Tratam…» a la derecha.
   Con los `1fr` de los extremos el contenido sigue centrado igual,
   pero la barra puede ir de borde a borde. */
.sec.editor.nb-legal.nb-con-lateral{
  display:grid;
  grid-template-columns:
    minmax(20px, 1fr) 246px 54px minmax(0, 620px) minmax(20px, 1fr);
  align-items:start;
}
.sec.editor.nb-legal.nb-con-lateral > .container{
  grid-column:4; margin:0 !important; padding:0 !important;
  max-width:620px !important;
}
.sec.editor.nb-legal.nb-con-lateral > .nb-lateral{grid-column:2}
.sec.editor.nb-legal.nb-con-lateral > .nb-seccion{grid-column:1 / -1}

/* ── la cabecera, mas baja ────────────────────────────────── */
/* El hero mide 400 px en escritorio y 280 en movil, con 238 y 148 de
   relleno superior. En una pagina de producto ese aire vende; en un
   contrato de cinco mil palabras es espacio muerto delante de lo
   unico que se ha venido a leer: en un movil de 844 px, el texto no
   empezaba hasta el pixel 443.
   Se recorta sin tocar el relleno de arriba, que es el que deja sitio
   a la barra de navegacion fija y no se puede reducir sin que el
   titulo se meta debajo.
   Estas reglas NO llevan `.nb-legal` delante a proposito: el hero es
   hermano de esa seccion, no descendiente. Solo alcanzan a las siete
   paginas legales porque este hook solo se carga ahi. */
.hero-bg-wrap.small-header .page-title{
  min-height:300px !important;
  padding-bottom:54px !important;
}
@media (max-width:767px){
  .hero-bg-wrap.small-header .page-title{
    min-height:210px !important;
    padding-top:124px !important;
    padding-bottom:34px !important;
  }
  .hero-bg-wrap.small-header .page-title .h1{font-size:1.95rem !important}
}

/* ── la barra de documentos ───────────────────────────────── */
/* MISMO PATRON QUE LA PAGINA DE CERTIFICADOS SSL, medido alli:
   pestanas en Outfit 600 a 15,2 px, `padding:18px 2px 16px`, 34 px de
   separacion, centradas, sin caja ninguna, y la activa marcada con un
   filo de 2,5 px con el degradado de marca.
   La primera version usaba pildoras con borde y fondo. En movil
   salian en CUATRO FILAS con anchos de 169, 237, 128 y 193 px, y el
   texto del documento no empezaba hasta el pixel 586 de una pantalla
   de 844. Una barra que ocupa media pantalla antes de la primera
   palabra no es navegacion: es un obstaculo. */
.sec.editor.nb-legal .nb-seccion{
  display:flex; justify-content:center; gap:0 34px;
  margin:0 0 44px; padding:0;
  border-bottom:1px solid var(--nb-line);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.sec.editor.nb-legal .nb-seccion::-webkit-scrollbar{display:none}
.sec.editor.nb-legal .nb-seccion a{
  position:relative; flex:0 0 auto;
  font-family:var(--nb-ff-d) !important;
  font-size:0.95rem !important; font-weight:600; line-height:1.5;
  color:var(--nb-ink-3) !important;
  padding:18px 2px 16px; margin:0;
  text-decoration:none !important; white-space:nowrap;
  border:0; background:none; border-radius:0;
  transition:color 0.2s ease;
}
.sec.editor.nb-legal .nb-seccion a:hover{color:var(--nb-ink) !important}
.sec.editor.nb-legal .nb-seccion a:focus-visible{
  outline:2px solid var(--nb-violet); outline-offset:-4px; border-radius:6px;
}
.sec.editor.nb-legal .nb-seccion a[aria-current="page"]{color:var(--nb-ink) !important}
.sec.editor.nb-legal .nb-seccion a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px;
  background:var(--nb-grad); border-radius:2px 2px 0 0;
}

/* ── el indice, ya al margen ──────────────────────────────── */
.sec.editor.nb-legal .nb-lateral{
  position:sticky; top:96px;
  max-height:calc(100vh - 130px);
  display:flex; flex-direction:column;
}
.sec.editor.nb-legal.nb-con-lateral .nb-indice{
  background:none; border:0; border-radius:0;
  padding:0; margin:0; min-height:0;
  display:flex; flex-direction:column;
}
.sec.editor.nb-legal.nb-con-lateral .nb-indice ol{
  columns:1; overflow-y:auto; padding:2px 4px 2px 0; margin:0;
  scrollbar-width:thin;
}
.sec.editor.nb-legal.nb-con-lateral .nb-indice li{margin-bottom:1px}
/* FLEX, NO GRID, Y ESTO COSTO UN DESTROZO.
 *
 * Con `grid-template-columns:30px 1fr` el numero va en la primera
 * columna y el titulo en la segunda. Funciona… mientras haya numero.
 * Pero tres de estas paginas —cookies, privacidad y el aviso legal—
 * tienen los apartados SIN numerar («¿Que es una cookie?»), asi que
 * el script no crea el `<span class="nb-n">` y el titulo caia en la
 * columna de 30 px. Resultado, medido en produccion: el indice de
 * cookies salia partido LETRA A LETRA en vertical.
 *
 * Con flex el problema no existe: si no hay numero, el titulo ocupa
 * todo el ancho; si lo hay, se reserva su hueco y no se parte.
 * REGLA: un grid de columnas fijas asume que todos los hijos estan
 * siempre; en cuanto uno puede faltar, flex es lo correcto. */
.sec.editor.nb-legal.nb-con-lateral .nb-indice a{
  display:flex; gap:8px; align-items:baseline;
  font-size:0.875rem !important; line-height:1.4;
  padding:7px 10px; border-radius:9px;
  border-left:2px solid transparent;
}
.sec.editor.nb-legal.nb-con-lateral .nb-indice a .nb-n{
  flex:0 0 auto; min-width:21px; white-space:nowrap;
}
.sec.editor.nb-legal.nb-con-lateral .nb-indice a:hover{
  padding-left:10px; background:var(--nb-paper-2);
  color:var(--nb-ink) !important;
}
.sec.editor.nb-legal.nb-con-lateral .nb-indice a .nb-n{
  font-size:0.78rem; margin-right:0;
  color:var(--nb-ink-3) !important; font-variant-numeric:tabular-nums;
}
/* el apartado que se esta leyendo */
.sec.editor.nb-legal .nb-indice a.nb-aqui{
  background:var(--nb-paper-2); color:var(--nb-ink) !important;
  font-weight:600; border-left-color:var(--nb-violet);
  box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 12px 32px -14px rgba(123,92,246,0.26);
}
.sec.editor.nb-legal .nb-indice a.nb-aqui .nb-n{color:var(--nb-violet-aa) !important}
.sec.editor.nb-legal .nb-indice li.nb-fuera{display:none}

/* ── buscar dentro del documento ──────────────────────────── */
/* Nadie lee entero un contrato de siete mil palabras: se viene a
   buscar UNA cosa. «desistimiento», «copias», «baja». */
.sec.editor.nb-legal .nb-buscar{
  width:100%; margin:0 0 12px;
  font-family:var(--nb-ff-b) !important; font-size:0.875rem !important;
  color:var(--nb-ink) !important; background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:10px;
  padding:9px 12px;
}
.sec.editor.nb-legal .nb-buscar::placeholder{color:var(--nb-ink-3)}
.sec.editor.nb-legal .nb-buscar:focus{
  outline:2px solid var(--nb-violet); outline-offset:1px;
  border-color:transparent;
}
.sec.editor.nb-legal .nb-nada{
  font-size:0.85rem !important; color:var(--nb-ink-3) !important;
  padding:6px 10px; margin:0;
}

/* el ancla no puede quedar debajo de la barra fija */
.sec.editor.nb-legal .nb-h{scroll-margin-top:96px}

/* En ancho el indice esta siempre desplegado y el resorte sobra. */
.sec.editor.nb-legal .nb-plegable > summary{display:none}

/* ── ESTRECHO: el indice se pliega, no desaparece ─────────── */
/* Cuando no caben las dos columnas el indice vuelve arriba, pero
   dentro de un <details> cerrado: en un movil, dieciocho apartados
   abiertos son dos pantallas de indice antes de llegar al texto. */
@media (max-width:1059px){
  .sec.editor.nb-legal.nb-con-lateral{
    display:block; padding-left:16px !important; padding-right:16px !important;
  }
  .sec.editor.nb-legal.nb-con-lateral > .container{
    margin:0 auto !important; max-width:620px !important;
  }
  .sec.editor.nb-legal .nb-lateral{
    position:static; max-height:none; max-width:620px; margin:0 auto 26px;
  }
  .sec.editor.nb-legal.nb-con-lateral .nb-indice{
    background:var(--nb-paper-2); border:1px solid var(--nb-line);
    border-radius:14px; padding:14px 16px;
  }
  .sec.editor.nb-legal.nb-con-lateral .nb-indice ol{max-height:46vh}
  /* LA BARRA SE DESLIZA, NO SE PARTE EN CUATRO FILAS.
     Y `justify-content` pasa a `flex-start`: con `center` y desborde,
     el primer elemento se corta por la izquierda y NO HAY FORMA DE
     LLEGAR A EL, porque el scroll no puede ir a negativo. Es la
     trampa clasica de centrar un carrusel flex.
     LOS MARGENES NEGATIVOS SE FUERON, Y ERAN UN FALLO. Estaban en
     `margin:0 -16px` para sacar la linea inferior hasta el borde,
     dando por hecho que el contenedor tenia 16 px de relleno que
     compensar. NO LOS TIENE: en movil `.sec` va a cero, asi que los
     -16 por lado sobresalian de verdad. Medido: la barra ocupaba
     422 px dentro de 390, y el documento arrastraba 16 px de scroll
     lateral. En movil eso es peor de lo que suena, porque el viewport
     se ensancha al contenido —de 390 a 406— y ENCOGE LA PAGINA ENTERA.

     Es la misma trampa que el `width:100vw` de la seccion oscura: dar
     por supuesto un relleno del padre que nadie ha declarado.

     Sin ellos la barra ocupa 0..390, la linea inferior sigue llegando
     de borde a borde, y el primer enlace pasa de la posicion 0 a la 15,
     que es justo donde empieza el texto del documento. Queda alineado,
     que antes no lo estaba. */
  .sec.editor.nb-legal .nb-seccion{
    justify-content:flex-start; gap:0 22px;
    margin:0 0 26px; padding:0 15px;
    max-width:none;
  }
  .sec.editor.nb-legal .nb-seccion a{
    font-size:0.9rem !important; padding:15px 2px 13px;
  }
  /* EL RESORTE TIENE QUE PARECER UN BOTON.
     Con `justify-content:space-between` el «+» se iba al otro extremo
     de la pantalla y quedaba un rotulo gris a un lado y un signo
     suelto al otro: nada decia que aquello se pudiera pulsar. Ahora
     es una fila con fondo, el icono pegado al texto y una flecha que
     gira, que es el gesto que todo el mundo reconoce. */
  .sec.editor.nb-legal .nb-plegable > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:9px;
    padding:11px 14px; margin:0;
    background:var(--nb-paper); border:1px solid var(--nb-line);
    border-radius:11px;
    font-family:var(--nb-ff-d); font-weight:600;
    font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--nb-ink-2);
  }
  .sec.editor.nb-legal .nb-plegable > summary::-webkit-details-marker{display:none}
  .sec.editor.nb-legal .nb-plegable > summary::before{
    content:""; width:9px; height:9px; flex:0 0 auto;
    border-right:2px solid var(--nb-violet-aa);
    border-bottom:2px solid var(--nb-violet-aa);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform 0.25s ease;
  }
  .sec.editor.nb-legal .nb-plegable[open] > summary::before{
    transform:rotate(225deg) translate(-2px,-2px);
  }
  .sec.editor.nb-legal .nb-plegable > summary:hover{border-color:var(--nb-violet)}
  .sec.editor.nb-legal .nb-plegable > summary:focus-visible{
    outline:2px solid var(--nb-violet); outline-offset:2px;
  }
  /* el numero de apartados, para saber a que se entra */
  .sec.editor.nb-legal .nb-plegable > summary::after{
    content:attr(data-n); margin-left:auto;
    font-size:0.78rem; letter-spacing:0; text-transform:none;
    color:var(--nb-ink-3); font-weight:500;
  }
  .sec.editor.nb-legal .nb-plegable[open] > summary{margin-bottom:12px}
  .sec.editor.nb-legal.nb-con-lateral .nb-indice{background:none; border:0; padding:0}
  .sec.editor.nb-legal.nb-con-lateral .nb-indice ol{
    max-height:46vh; border:1px solid var(--nb-line); border-radius:11px;
    background:var(--nb-paper-2); padding:8px;
  }
  .sec.editor.nb-legal .nb-indice-t{display:none}
}

/* ══════════════════════════════════════════════════════════════
   ACCESIBILIDAD Y LECTURA: LO QUE FALTABA
   ══════════════════════════════════════════════════════════════
   Auditadas las cuatro paginas publicadas en 390, 768 y 1500 px, esto
   ya estaba bien: siete titulos con `role="heading"` y su `aria-level`,
   el indice pegajoso a 96 px, contraste 9,02 en el cuerpo y 8,56 en los
   enlaces, anclas reparadas y cero scroll lateral.

   Lo que faltaba, y es lo que hay aqui. */

/* ── 1 · EL FOCO, QUE NO SE VEIA ──────────────────────────────
   `outline:none` sin nada que lo sustituya, medido en los cuatro
   documentos y los tres anchos: quien navega con el tabulador no sabia
   donde estaba. Es un fallo de la WCAG 2.4.7, nivel AA, y en un
   documento de sesenta parrafos con indice lateral se nota mucho.

   Se usa `:focus-visible` y no `:focus` para que el aro no salte al
   hacer clic con el raton, solo cuando de verdad se esta tabulando. */
.sec.editor.nb-legal a:focus-visible,
.sec.editor.nb-legal button:focus-visible,
.sec.editor.nb-legal summary:focus-visible,
.sec.editor.nb-legal [tabindex]:focus-visible{
  outline:3px solid var(--nb-violet, #6D4AE8) !important;
  outline-offset:3px; border-radius:4px;
}
.sec.editor.nb-legal .nb-indice a:focus-visible{outline-offset:2px}

/* ── 2 · DONDE ESTAS, EN EL INDICE ────────────────────────────
   El indice acompañaba al scroll pero no decia por donde vas. En un
   texto de 5.500 palabras eso es la mitad de su utilidad: sirve para
   saltar, pero no para orientarse.

   El apartado en el que estas se marca con una barra a la izquierda y
   el texto en tinta fuerte. Lo pone el JS con `aria-current`, asi que
   un lector de pantalla tambien lo anuncia; no es solo color. */
.sec.editor.nb-legal .nb-indice a{
  position:relative; transition:color 0.18s ease;
}
.sec.editor.nb-legal .nb-indice a::before{
  content:""; position:absolute; left:-13px; top:50%;
  width:3px; height:0; border-radius:2px;
  background:var(--nb-grad, linear-gradient(135deg,#5B7CF7,#C44FC4));
  transform:translateY(-50%);
  transition:height 0.22s ease;
}
.sec.editor.nb-legal .nb-indice a[aria-current="location"]{
  color:var(--nb-ink, #1A1726) !important; font-weight:600;
}
.sec.editor.nb-legal .nb-indice a[aria-current="location"]::before{height:74%}
@media (prefers-reduced-motion:reduce){
  .sec.editor.nb-legal .nb-indice a::before{transition:none}
}

/* ── 3 · CUANTO QUEDA ─────────────────────────────────────────
   La barra de progreso nacio aqui y se porto tan bien que subio a toda
   la web publica: vive ahora en `netebu_progreso.php`, con la clase
   `.nb-progreso`. Aqui no queda nada, y a proposito: dos barras
   midiendo lo mismo con dos referencias distintas —el contenedor del
   documento y el documento entero— se pisarian y darian porcentajes
   que no coinciden. */

/* ── 4 · EL INDICE DE MOVIL, QUE YA EXISTIA ───────────────────
   Aqui llegue a añadir un desplegable propio y era DUPLICADO: el hook
   ya montaba un `<details class="nb-plegable">` para anchos pequeños.
   Lo que se ocultaba por debajo de 992 px era el indice lateral de
   escritorio, no la navegacion entera. Se retiro el mio y se mejora el
   que habia, que es lo que habria que haber hecho de entrada.

   Sus enlaces median entre 34 y 53 px de alto: cumplen los 24 de la
   WCAG 2.5.8, pero seis de los siete se quedaban por debajo de los 44
   que recomienda Apple, y en una lista densa que se recorre con el
   pulgar eso son toques fallados. Se suben a 44 sin tocar el texto ni
   el tamaño de letra: solo el relleno. */
@media (max-width:991px){
  .sec.editor.nb-legal .nb-plegable a{
    min-height:44px; display:flex; align-items:center;
    padding-top:9px; padding-bottom:9px;
  }
  .sec.editor.nb-legal .nb-plegable > summary{min-height:48px}
}