/* =========================================================================================
   SANTO PECADO SMASHBURGER · legal.css · páginas legales + aviso de cookies (F8-T05)
   -----------------------------------------------------------------------------------------
   Dos cosas, en un solo fichero:
     · las páginas legales (`/aviso-legal`, `/privacidad`, `/cookies`), que sirve el propio
       servidor renderizadas desde la config (`server/legales.js`);
     · el aviso informativo de cookies (`web/js/aviso-cookies.js`), que va en la portada, en
       /pedir y en /club.
   Vista LIGERA sobre tokens.css/componentes.css: sobre negro, tinta blanca o mostaza; el
   granate no es color de texto (MARCA §2). Sin HEX sueltos (todo tokens) y con el anillo de
   foco de la casa para cualquier control.
   ========================================================================================= */

/* ------------------------------------------------------------------ el aviso (banner) --- */
/* Solo almacenamiento técnico necesario en el sistema (ver la política de cookies): el aviso
   INFORMA y se apaga con un toque. Vive por encima de las barras fijas de las vistas
   (la barra del carrito de /pedir va a z-index 40 y los modales a 60) y por debajo del
   «saltar al contenido» (80). En móvil se aparta de la banda inferior para no tapar ni el
   chip de «La comanda» ni la barra del carrito. */
.lg-aviso {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(var(--alto-tactil-min) + 2rem);
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: color-mix(in srgb, var(--sp-negro) 92%, transparent);
  border: var(--borde-tenue);
  border-radius: var(--radio-tarjeta);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-alta);
}
@media (min-width: 901px) {
  .lg-aviso {
    right: auto;
    bottom: 1rem;
    left: 1rem;
    max-width: 30rem;
  }
}
.lg-aviso__texto {
  flex: 1 1 14rem;
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sp-blanco-hueso);
}
.lg-aviso__texto a {
  color: var(--sp-mostaza);
}
.lg-aviso__btn {
  min-height: var(--alto-tactil-min);
  margin-left: auto;
}

/* --------------------------------------------------------------- páginas legales -------- */
body.lg {
  margin: 0;
  background: var(--sp-negro);
  color: var(--sp-blanco-hueso);
  font-family: var(--fuente-texto);
  line-height: 1.65;
}

.lg-cab {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-4);
  min-height: 3.75rem;
  padding: 0.5rem var(--esp-4);
  background: color-mix(in srgb, var(--sp-negro) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--borde-tenue);
}
.lg-cab__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--sp-blanco-hueso);
  text-decoration: none;
}
.lg-cab__logo {
  height: 2.25rem;
  width: auto;
  display: block;
}
.lg-cab__nombre {
  font-family: var(--fuente-rotulo);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin-left: auto;
}
.lg-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;             /* 44 px: blanco táctil cómodo */
  color: var(--sp-blanco-hueso);
  text-decoration: none;
  font-size: 0.9rem;
}
.lg-nav a[aria-current='page'] {
  color: var(--sp-mostaza);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.lg-nav a:hover {
  color: var(--sp-mostaza);
}

.lg-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-4) var(--esp-7);
}
.lg-main__titulo {
  margin: 0 0 var(--esp-5);
  font-family: var(--fuente-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: var(--sp-blanco);
}
.lg-bloque {
  margin: 0 0 var(--esp-6);
}
.lg-bloque h2 {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-rotulo);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-mostaza);
}
.lg-bloque p {
  margin: 0 0 var(--esp-3);
}
.lg-bloque .lg-sub {
  margin: var(--esp-3) 0 var(--esp-2);
  font-family: var(--fuente-rotulo);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--sp-blanco);
}
.lg-bloque ul {
  margin: 0 0 var(--esp-3);
  padding-left: 1.25rem;
}
.lg-bloque li {
  margin-bottom: var(--esp-2);
}
.lg-bloque a {
  color: var(--sp-mostaza);
  overflow-wrap: anywhere;         /* las URLs largas de los navegadores no desbordan a 390 */
}

.lg-pie {
  border-top: var(--borde-tenue);
  padding: var(--esp-5) var(--esp-4) var(--esp-6);
  text-align: center;
  font-size: 0.85rem;
}
.lg-pie p {
  margin: 0.25rem 0;
}
.lg-pie a {
  color: var(--sp-mostaza);
}