/* ==================================================================
   PÁGINAS LEGALES · AVISO DE COOKIES
   Archivo aparte: no toca ni una regla del diseño existente.
   ================================================================== */

/* ---------------------------------------------- estructura ------- */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- índice ----------- */
.legal__indice {
  position: sticky;
  top: 7rem;
  border-left: 1px solid var(--border);
  padding-left: var(--sp-5);
}

@media (max-width: 900px) {
  .legal__indice {
    position: static;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 var(--sp-5);
  }
}

.legal__indice .etiqueta { display: block; margin-bottom: var(--sp-4); }

.legal__indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.legal__indice a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--text-suave);
  text-decoration: none;
  border: 0;
  transition: color var(--dur-rapida) var(--ease-suave);
}

.legal__indice a span {
  font-family: var(--font-serif);
  font-size: var(--t-micro);
  color: var(--tinta-30);
  letter-spacing: .06em;
}

.legal__indice a:hover { color: var(--acento); }

.legal__indice a[aria-current='true'] { color: var(--acento); }
.legal__indice a[aria-current='true'] span { color: var(--acento); }

/* ---------------------------------------------- cuerpo ----------- */
.legal__cuerpo { max-width: 72ch; }

.legal__seccion { scroll-margin-top: 7rem; }

.legal__seccion + .legal__seccion {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}

.legal__seccion h2 {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--t-h3);
  font-weight: 400;
  margin: 0 0 var(--sp-4);
}

.legal__num {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  color: var(--agua-500);
  flex: none;
  transform: translateY(-.35em);
}

.legal__cuerpo p {
  color: var(--text-suave);
  line-height: var(--leading-texto);
  margin: 0 0 var(--sp-4);
}

.legal__cuerpo ul,
.legal__cuerpo ol {
  color: var(--text-suave);
  line-height: var(--leading-texto);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.legal__cuerpo li::marker { color: var(--madera-300); }

.legal__cuerpo strong { color: var(--text); font-weight: 500; }

.legal__cuerpo code {
  font-size: .82em;
  background: var(--crema-100);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: .1em .4em;
}

.legal__cuerpo a { color: var(--acento); }

/* ---------------------------------------------- tablas ----------- */
/* Las tablas del RGPD son anchas: se desplazan solas, la página no. */
.tabla-envuelta {
  overflow-x: auto;
  margin: 0 0 var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: var(--surface);
}

.tabla-envuelta table {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  font-size: var(--t-small);
}

.tabla-envuelta th,
.tabla-envuelta td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}

.tabla-envuelta thead th {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
  background: var(--crema-100);
  white-space: nowrap;
}

.tabla-envuelta td { color: var(--text-suave); }
.tabla-envuelta tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------- pendientes ------- */
/* Dato fiscal sin rellenar. Tiene que doler a la vista. */
.legal__pendiente {
  background: var(--rosa-100);
  color: var(--burdeos-700);
  border: 1px dashed var(--burdeos-500);
  border-radius: var(--r-s);
  padding: .05em .45em;
  font-size: .9em;
  font-weight: 500;
}

/* ---------------------------------------------- pie del doc ------ */
.legal__fecha {
  font-size: var(--t-micro) !important;
  letter-spacing: .04em;
  color: var(--text-tenue) !important;
  margin-top: var(--sp-7) !important;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.legal__otros {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--crema-100);
  border-radius: var(--r-m);
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}

.legal__otros .etiqueta { margin-bottom: var(--sp-2); }

/* ==================================================================
   AVISO DE COOKIES — dormido mientras no haya analítica
   ================================================================== */
.aviso-cookies {
  position: fixed;
  z-index: 90;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  margin-inline: auto;
  max-width: 44rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-flotante);
  animation: aviso-cookies-entra var(--dur-media) var(--ease-salida) both;
}

@keyframes aviso-cookies-entra {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-cookies { animation: none; }
}

.aviso-cookies__texto { flex: 1 1 20rem; }

.aviso-cookies__texto p {
  margin: 0 0 var(--sp-1);
  font-size: var(--t-small);
  color: var(--text-suave);
  line-height: 1.55;
}

.aviso-cookies__texto a { font-size: var(--t-micro); color: var(--acento); }

.aviso-cookies__botones {
  display: flex;
  gap: var(--sp-2);
  flex: none;
}