/* ==========================================================================
   bb2026 — PAGINAS LEGALES (F5)
   Aviso legal, politica de privacidad y politica de cookies.

   PAPEL Y TINTA. Ni una fotografia, ni un degradado, ni una animacion de
   entrada. Un texto legal se lee: lo unico que se le pide al diseno es
   que la lectura sea comoda y que el documento se pueda navegar.

   AQUI *NO* SE ANULA .bb-main--offset, igual que en la pagina de
   productos y al contrario que en sobre-mi y contacto. No hay hero a
   sangre: el hueco de la barra fija se queda, y el logotipo se pinta en
   TINTA sobre el papel. inc/legal-copy.php TAMPOCO engancha el filtro
   'bb_has_bleed_hero', y las dos cosas van juntas: si se toca una sin la
   otra, el logotipo desaparece sobre el blanco.

   MEDIDA DE LECTURA: 68ch. Es la horquilla de 60-75 caracteres por linea
   en la que el ojo no se pierde al saltar de renglon. Con --bb-max
   (1512px) el texto legal saldria a 180 caracteres por linea, ilegible.

   CERO PETICIONES A TERCEROS: no hay @import, ni url() a dominios
   externos, ni tipografias de Google. Las familias son las que ya carga
   el tema.
   ========================================================================== */

.bb-lg {
  --bb-lg-measure: 68ch;
  --bb-lg-rule: #E3DFDA;

  position: relative;
  background: var(--bb-paper);
  color: var(--bb-body);
  padding: var(--bb-s5) var(--bb-gutter) var(--bb-s6);
}

/* --------------------------------------------------------------------------
   PROGRESO DE LECTURA
   Filete de 2px pegado bajo la barra fija. CSS PURO: animation-timeline
   con scroll(), sin una linea de JS y sin ScrollTrigger.

   Es progressive enhancement estricto: donde animation-timeline no existe
   (Safari y Firefox a dia de hoy) el filete se queda al 0% de ancho, o
   sea invisible, y no pasa absolutamente nada — el texto no depende de
   el. Por eso el elemento es aria-hidden en la plantilla.
   -------------------------------------------------------------------------- */
.bb-lg__progress {
  position: fixed;
  top: var(--bb-bar-h);
  left: 0;
  z-index: 5;
  width: 100%;
  height: 2px;
  pointer-events: none;
}
.bb-lg__progress > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--bb-accent);
}

@supports (animation-timeline: scroll()) {
  .bb-lg__progress > i {
    width: 100%;
    transform-origin: 0 50%;
    animation: bb-lg-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes bb-lg-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* Movimiento reducido: ni filete. */
@media (prefers-reduced-motion: reduce) {
  .bb-lg__progress { display: none; }
}

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
.bb-lg__head {
  max-width: var(--bb-lg-measure);
  margin: 0 auto var(--bb-s5);
  padding-bottom: var(--bb-s3);
  border-bottom: 1px solid var(--bb-ink);
}
.bb-lg__kicker {
  margin: 0 0 var(--bb-s2);
  font-family: var(--bb-font-display);
  font-size: var(--bb-size-label);
  font-weight: 500;
  letter-spacing: var(--bb-track-label);
  text-transform: uppercase;
  /* --bb-label NO cumple contraste sobre papel (2.19:1). Ver tokens.css. */
  color: var(--bb-body);
}
.bb-lg__title {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: var(--bb-size-display-l);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}

/* --------------------------------------------------------------------------
   INDICE
   Nadie lee una politica de privacidad de corrido: se entra buscando una
   seccion. El indice es la pieza funcional de esta pagina.
   -------------------------------------------------------------------------- */
.bb-lg__toc {
  max-width: var(--bb-lg-measure);
  margin: 0 auto var(--bb-s5);
  padding: var(--bb-s3) var(--bb-s4);
  background: var(--bb-white);
  border: 1px solid var(--bb-lg-rule);
}
.bb-lg__toc-label {
  margin: 0 0 var(--bb-s2);
  font-family: var(--bb-font-display);
  font-size: var(--bb-size-label);
  font-weight: 500;
  letter-spacing: var(--bb-track-label);
  text-transform: uppercase;
  color: var(--bb-body);
}
.bb-lg__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.bb-lg__toc-list a {
  display: flex;
  gap: var(--bb-s2);
  padding: 6px 0;
  font-family: var(--bb-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bb-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-lg__toc-list a:hover,
.bb-lg__toc-list a:focus-visible {
  color: var(--bb-accent);
  border-bottom-color: var(--bb-accent);
}
.bb-lg__toc-num {
  flex: 0 0 1.5em;
  font-family: var(--bb-font-display);
  font-variant-numeric: tabular-nums;
  color: var(--bb-body);
}

/* --------------------------------------------------------------------------
   CUERPO
   -------------------------------------------------------------------------- */
.bb-lg__body {
  max-width: var(--bb-lg-measure);
  margin: 0 auto;
}

.bb-lg__intro {
  margin-bottom: var(--bb-s5);
  padding-left: var(--bb-s3);
  border-left: 2px solid var(--bb-accent);
}
.bb-lg__intro p { margin: 0; }

.bb-lg__body p,
.bb-lg__body li,
.bb-lg__body dd {
  font-family: var(--bb-font-body);
  font-size: var(--bb-size-body);
  line-height: 1.75;
  color: var(--bb-body);
}
.bb-lg__body p { margin: 0 0 var(--bb-s3); }

.bb-lg__body strong {
  font-weight: 700;
  color: var(--bb-ink);
}

/* Enlaces del texto: subrayado real, que es lo que se espera en un
   documento legal. Sin adornos. */
.bb-lg__body a {
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--bb-dur) var(--bb-ease);
}
.bb-lg__body a:hover,
.bb-lg__body a:focus-visible { color: var(--bb-accent); }

/* --- Secciones y sus filetes --- */
.bb-lg__sec {
  padding-top: var(--bb-s4);
  /* Que el ancla no quede tapada por la barra fija al saltar desde el
     indice. */
  scroll-margin-top: calc(var(--bb-bar-h) + var(--bb-s3));
}
.bb-lg__sec + .bb-lg__sec { border-top: 1px solid var(--bb-lg-rule); }

.bb-lg__sec-title {
  margin: 0 0 var(--bb-s3);
  font-family: var(--bb-font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--bb-ink);
}
.bb-lg__sec-num {
  margin-right: 0.4em;
  font-variant-numeric: tabular-nums;
  color: var(--bb-accent);
}

/* --- Listas --- */
.bb-lg__list {
  margin: 0 0 var(--bb-s3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bb-s2);
}
.bb-lg__list li {
  position: relative;
  padding-left: var(--bb-s3);
}
.bb-lg__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--bb-accent);
}

/* --- Ficha de datos (NIF, domicilio, telefono...) ---
   Rejilla de dos columnas a partir de 640px: la etiqueta a la izquierda y
   el dato a la derecha, alineados. Por debajo se apila, porque una
   direccion completa no cabe en media columna de movil. */
.bb-lg__data {
  margin: 0 0 var(--bb-s3);
  padding: var(--bb-s3);
  background: var(--bb-white);
  border: 1px solid var(--bb-lg-rule);
  display: grid;
  gap: var(--bb-s1) var(--bb-s3);
}
.bb-lg__data dt {
  font-family: var(--bb-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bb-ink);
}
.bb-lg__data dd { margin: 0; }

@media (min-width: 640px) {
  .bb-lg__data {
    grid-template-columns: 12em 1fr;
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   PIE: LAS OTRAS DOS LEGALES
   Quien abre una de las tres suele querer otra. Se enlazan entre si para
   no obligar a volver al pie de la web.
   -------------------------------------------------------------------------- */
.bb-lg__foot {
  max-width: var(--bb-lg-measure);
  margin: var(--bb-s6) auto 0;
  padding-top: var(--bb-s3);
  border-top: 1px solid var(--bb-ink);
}
.bb-lg__foot-label {
  margin: 0 0 var(--bb-s2);
  font-family: var(--bb-font-display);
  font-size: var(--bb-size-label);
  font-weight: 500;
  letter-spacing: var(--bb-track-label);
  text-transform: uppercase;
  color: var(--bb-body);
}
.bb-lg__foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-s3);
}
.bb-lg__foot-list a {
  font-family: var(--bb-font-body);
  font-size: var(--bb-size-body);
  color: var(--bb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--bb-lg-rule);
  padding-bottom: 2px;
  transition: border-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
.bb-lg__foot-list a:hover,
.bb-lg__foot-list a:focus-visible {
  color: var(--bb-accent);
  border-bottom-color: var(--bb-accent);
}

/* --------------------------------------------------------------------------
   ANCHOS GRANDES
   El texto no se ensancha (la medida manda), pero respira mas arriba y
   abajo.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .bb-lg { padding-top: var(--bb-s6); }
}

/* --------------------------------------------------------------------------
   IMPRESION / PDF
   Un texto legal se guarda y se imprime. Fuera la barra, el indice
   navegable, el filete de progreso y el pie de enlaces: en papel no
   sirven. Y las URL de los enlaces se escriben al lado, porque en papel
   un enlace sin su direccion es texto azul y nada mas.
   -------------------------------------------------------------------------- */
@media print {
  .bb-bar,
  .bb-nav-scrim,
  .bb-skip-link,
  .bb-lg__progress,
  .bb-lg__foot { display: none !important; }

  .bb-main--offset { padding-top: 0 !important; }

  .bb-lg {
    padding: 0;
    background: #fff;
    color: #000;
  }
  .bb-lg__body { max-width: none; }
  .bb-lg__sec { page-break-inside: avoid; }
  .bb-lg__body a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}