/* ==========================================================================
   Carlos Armas — documentos legales (aviso legal, privacidad y cookies)
   Solo para estas 3 páginas; la base (tokens, cabecera, pie, .lista-indice,
   botones…) está en sitio.css. «Aura» editorial: lienzo blanco, tinta negra,
   lectura en Cormorant Garamond, rótulos en sans diminuta y mayúsculas,
   filetes de 1px. Índice lateral numerado y fijo, columna de lectura de
   ~700px y apartados numerados. El resumen «en pocas palabras» es el panel
   negro de sistema (monoespaciada) que da el contraste informático.
   ========================================================================== */

/* ---------- Cabecera del documento ---------- */

.legal-cabecera {
  padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 80px);
}

.legal-cabecera .rotulo {
  display: flex;
  margin-bottom: 22px;
}

.legal-cabecera .titulo-pagina {
  font-size: clamp(46px, 6vw, 80px);
}

.legal-cabecera .inferior {
  gap: 32px;
  margin-top: 28px;
}

.legal-cabecera .inferior .texto {
  max-width: 620px;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.5;
}

.legal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.legal-fecha {
  display: block;
  margin: 0;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Guion fino antes de la fecha (sin color: el verde es solo para «en línea») */
.legal-fecha::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-right: 12px;
  background: var(--borde-fuerte);
  vertical-align: middle;
}

.legal-fecha time {
  color: var(--tinta);
  white-space: nowrap;
}

/* Selector de documentos: rótulos diminutos; el actual, en negro macizo */

.legal-documentos {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 0;
  background: var(--fondo);
  list-style: none;
}

.legal-documentos li + li {
  border-left: 1px solid var(--borde-fuerte);
}

.legal-documentos a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.25s, color 0.25s;
}

.legal-documentos a:hover {
  background: var(--superficie-2);
}

.legal-documentos a[aria-current="page"] {
  background: var(--tinta);
  color: #fff;
}

.legal-documentos a:focus-visible {
  outline-offset: 2px;
  z-index: 1;
}

/* ---------- Rejilla: índice fijo + columna de lectura ---------- */

.legal {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: clamp(48px, 7vw, 112px);
  padding-block: clamp(56px, 7vw, 96px) var(--seccion);
  counter-reset: apartado;
}

.legal-indice {
  position: sticky;
  top: calc(var(--cabecera) + 32px);
  align-self: start;
}

.legal-indice nav {
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--tinta);
  border-radius: 0;
  background: none;
}

.legal-indice .etiqueta {
  margin: 0 0 14px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.legal-indice .etiqueta::before {
  content: "// ";
  color: var(--tinta-3);
}

.legal-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: indice;
}

.legal-indice li {
  counter-increment: indice;
  border-bottom: 1px solid var(--borde);
}

.legal-indice a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0 9px 14px;
  color: var(--tinta-2);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.2s, padding-left 0.3s var(--curva);
}

.legal-indice a::before {
  content: counter(indice, decimal-leading-zero);
  flex: none;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.legal-indice a:hover {
  color: var(--tinta);
}

.legal-indice a[aria-current="true"] {
  padding-left: 20px;
  color: var(--tinta);
  font-style: italic;
}

.legal-indice a[aria-current="true"]::before {
  color: var(--tinta);
  font-style: normal;
}

/* Filete vertical de tinta junto al apartado actual */
.legal-indice a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--tinta);
}

.legal-indice .boton {
  width: 100%;
  margin-top: 28px;
  min-height: 48px;
  padding: 0 18px;
}

/* ---------- Columna de lectura ---------- */

.legal-cuerpo {
  min-width: 0;
  color: var(--tinta-2);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
}

.legal-cuerpo > :not(section),
.legal-cuerpo > section > :not(.legal-ancho) {
  max-width: 700px;
}

.legal-cuerpo > section {
  margin-top: 72px;
  padding-top: 48px;
  /* Filete superior del ancho de la columna de lectura */
  background: linear-gradient(var(--borde), var(--borde)) 0 0 / min(700px, 100%) 1px no-repeat;
  counter-increment: apartado;
}

.legal-resumen + section {
  margin-top: 64px;
}

.legal-cuerpo h2 {
  margin: 0 0 22px;
  color: var(--tinta);
  font-family: var(--display);
  font-size: clamp(32px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* Número de apartado en monoespaciada: «01 ——» */
.legal-cuerpo > section > h2::before {
  content: counter(apartado, decimal-leading-zero);
  display: block;
  width: fit-content;
  margin-bottom: 16px;
  padding-right: 44px;
  background: linear-gradient(var(--borde-fuerte), var(--borde-fuerte)) right center / 32px 1px no-repeat;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.legal-cuerpo h3 {
  margin: 36px 0 8px;
  color: var(--tinta);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.legal-cuerpo h2 + h3 {
  margin-top: 0;
}

/* Estado junto al título («Siempre activas»…): rótulo con filete */
.legal-cuerpo h3 .etiqueta {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 9px 4px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 0.3em;
}

.legal-cuerpo p {
  margin: 0 0 18px;
}

.legal-cuerpo > section > :last-child {
  margin-bottom: 0;
}

/* Sin palabras huérfanas al final de los párrafos */
.legal-cuerpo p,
.legal-cuerpo li,
.legal-cuerpo dd,
.legal-cuerpo td {
  text-wrap: pretty;
}

.legal-cuerpo section ul {
  margin: 0 0 18px;
  padding-left: 30px;
  list-style: none;
}

.legal-cuerpo section ul li {
  position: relative;
  margin-bottom: 10px;
}

/* Viñeta: guion fino de tinta */
.legal-cuerpo section ul li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0.85em;
  width: 14px;
  height: 1px;
  background: var(--tinta);
}

.legal-cuerpo strong {
  color: var(--tinta);
  font-weight: 600;
}

/* Enlaces del texto y el botón «Configurar cookies» en línea */
.legal-cuerpo a:not(.boton),
.enlace-boton {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--borde-fuerte);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}

.enlace-boton {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
}

.legal-cuerpo a:not(.boton):hover,
.enlace-boton:hover {
  color: var(--tinta);
  text-decoration-color: currentColor;
}

.legal-cuerpo code {
  padding: 2px 6px;
  border: 1px solid var(--borde);
  border-radius: 2px;
  background: var(--superficie-2);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 0.74em;
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ---------- En pocas palabras: panel negro de sistema ---------- */

.legal-resumen {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--negro-panel);
  border-radius: var(--radio-grande);
  background: var(--negro-panel);
  color: var(--panel-tinta-2);
}

/* Barra de ventana con tres puntos grises */
.legal-resumen::before {
  content: "";
  display: block;
  height: 42px;
  border-bottom: 1px solid var(--panel-borde);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.42) 4.5px, transparent 5px) 16px 50% / 10px 10px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.28) 4.5px, transparent 5px) 33px 50% / 10px 10px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 4.5px, transparent 5px) 50px 50% / 10px 10px no-repeat;
}

.legal-resumen .etiqueta {
  margin: 0;
  padding: 22px 28px 6px;
  color: var(--panel-tinta-3);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.legal-resumen .etiqueta::before {
  content: "$ ";
}

.legal-resumen ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 10px 28px 28px;
  list-style: none;
}

.legal-resumen li {
  position: relative;
  padding-left: 30px;
  color: var(--panel-tinta);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

.legal-resumen li::before {
  content: "✓";
  position: absolute;
  top: 0.2em;
  left: 2px;
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- Fichas de datos (titular, responsable…) ---------- */

.ficha {
  margin: 0 0 22px;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: none;
}

.ficha > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}

.ficha > div:last-child {
  border-bottom: 0;
}

.ficha dt {
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ficha dd {
  margin: 0;
  color: var(--tinta);
  font-size: 19px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.ficha-nota {
  display: block;
  margin-top: 4px;
  color: var(--tinta-2);
  font-size: 17px;
  line-height: 1.5;
}

.sin-corte {
  white-space: nowrap;
}

/* ---------- Tablas (cookies, proveedores) ---------- */

.tabla-legal {
  width: 100%;
  margin: 28px 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: none;
  font-size: 17px;
  line-height: 1.5;
}

.tabla-legal th {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.tabla-legal td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-2);
  vertical-align: top;
}

.tabla-legal tr:last-child td {
  border-bottom: 0;
}

.tabla-legal td:first-child {
  color: var(--tinta);
  font-weight: 600;
}

.tabla-legal td:first-child code,
.tabla-legal td:first-child .suave {
  font-weight: 400;
}

.tabla-legal td code {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Subdato («Cookie», «Propia»…): rótulo diminuto en sans */
.tabla-legal .suave {
  display: block;
  margin-top: 4px;
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tabla-legal .fila-vacia td {
  color: var(--tinta-2);
  font-weight: 500;
}

@media (min-width: 1081px) {
  .tabla-legal .ancho-nombre { width: 232px; }
  .tabla-legal .ancho-tipo { width: 124px; }
  .tabla-legal .ancho-proveedor { width: 164px; }
  .tabla-legal .ancho-duracion { width: 96px; }
}

/* ---------- Sigue leyendo ---------- */

.legal-mas .encabezado {
  margin-bottom: 32px;
}

.legal-mas .fila-indice {
  padding-inline: 0;
  transition: padding-left 0.35s var(--curva), background-color 0.25s;
}

.legal-mas .fila-indice:hover {
  padding-left: 12px;
  background: none;
}

.legal-mas .fila-indice p {
  text-wrap: pretty;
}

/* ---------- Tabletas ---------- */

@media (max-width: 1080px) {
  /* La tabla pasa a fichas apiladas con su etiqueta a la izquierda */
  .tabla-legal thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabla-legal,
  .tabla-legal tbody,
  .tabla-legal tr,
  .tabla-legal td {
    display: block;
  }

  .tabla-legal tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--borde);
  }

  .tabla-legal tr:last-child {
    border-bottom: 0;
  }

  .tabla-legal td {
    position: relative;
    min-height: 30px;
    padding: 4px 0 4px 128px;
    border: 0;
  }

  .tabla-legal td code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tabla-legal td::before {
    content: attr(data-etiqueta);
    position: absolute;
    top: 9px;
    left: 0;
    width: 116px;
    color: var(--tinta-3);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}

/* ---------- Una sola columna ---------- */

@media (max-width: 900px) {
  .legal {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .legal-indice {
    position: static;
  }

  .legal-indice ol {
    columns: 2;
    column-gap: 32px;
  }

  .legal-indice li {
    break-inside: avoid;
  }

  .legal-indice a {
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }

  .legal-cuerpo > :not(section),
  .legal-cuerpo > section > :not(.legal-ancho) {
    max-width: none;
  }

  .legal-cuerpo > section {
    background-size: 100% 1px;
  }
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
  .legal-cabecera .titulo-pagina {
    line-height: 1.02;
  }

  .legal-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .legal-meta nav {
    width: 100%;
  }

  .legal-documentos {
    display: flex;
    width: 100%;
  }

  .legal-documentos li {
    flex: 1 1 0;
  }

  .legal-documentos a {
    justify-content: center;
    width: 100%;
    padding: 0 8px;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .legal {
    padding-top: 40px;
  }

  .legal-cuerpo {
    font-size: 18.5px;
  }

  .legal-cuerpo > section {
    margin-top: 52px;
    padding-top: 36px;
  }

  .legal-resumen + section {
    margin-top: 48px;
  }

  .legal-cuerpo h3 {
    margin-top: 30px;
    font-size: 22px;
  }

  .legal-cuerpo h3 .etiqueta {
    margin-left: 6px;
  }

  .legal-resumen .etiqueta {
    padding: 18px 20px 4px;
  }

  .legal-resumen ul {
    padding: 8px 20px 22px;
  }

  .legal-resumen li {
    font-size: 18px;
  }

  .ficha > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 0;
  }

  .ficha dd {
    font-size: 18.5px;
  }

  .legal-cuerpo section ul {
    padding-left: 24px;
  }

  .legal-cuerpo section ul li::before {
    left: -24px;
    width: 12px;
  }
}

@media (max-width: 480px) {
  /* En pantallas estrechas, la etiqueta de cada dato va encima */
  .tabla-legal td {
    padding: 4px 0;
  }

  .tabla-legal td::before {
    position: static;
    display: block;
    width: auto;
    margin-top: 6px;
  }

  .legal-indice ol {
    columns: 1;
  }
}

@media (max-width: 400px) {
  .legal-documentos a {
    padding: 0 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-indice a,
  .legal-mas .fila-indice {
    transition: none;
  }
}

@media print {
  .legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-indice,
  .legal-mas {
    display: none;
  }

  .legal-resumen {
    border-color: #000;
    background: none;
    color: #000;
  }

  .legal-resumen li,
  .legal-resumen li::before {
    color: #000;
  }
}