/* Documentos legales.

   Se leen de arriba abajo y a veces se citan, así que la medida de línea
   manda sobre el ancho disponible: nada de texto legal a mil píxeles. */

.legal-migas { font-size: 12px; color: var(--tinta-2); margin-bottom: 10px; }
.legal-migas a { color: var(--naranja-hondo); }

.legal-vigencia { margin: -8px 0 18px; font-size: 13px; color: var(--tinta-2); }

/* Aviso de que lo legal solo existe en español. Solo aparece en los otros
   idiomas: en español no hay nada que advertir. */
.legal-idioma {
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--marino-suave);
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--marino);
}

.legal-borrador {
  background: var(--alerta);
  border-left: 3px solid var(--naranja);
  padding: 13px 16px;
  margin-bottom: 22px;
}

.legal-borrador p { margin: 0; font-size: 13.5px; color: var(--marino); }
.legal-borrador p + p { margin-top: 6px; }

/* --- Cuerpo --- */
.legal-marco { display: block; }

/* El índice lateral solo existe cuando hay ancho: en móvil los documentos se
   listan al final, que es donde no estorban. */
.legal-lado { display: none; }

.legal h2 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  margin: 30px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  color: var(--marino);
}

.legal h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0 5px;
  color: var(--marino);
}

.legal p { margin: 0 0 11px; font-size: 15px; line-height: 1.6; }
.legal ul { margin: 0 0 13px; padding-left: 20px; }
.legal li { margin-bottom: 7px; font-size: 15px; line-height: 1.55; }
.legal a { color: var(--naranja-hondo); }

.legal code {
  font-family: var(--dato);
  font-size: 0.9em;
  background: var(--marino-suave);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Lo que no se puede leer en diagonal. */
.legal-clave {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--naranja);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 18px 0;
}

.legal-clave p { margin: 0; font-size: 14.5px; }
.legal-clave p + p { margin-top: 9px; }

/* --- Tablas --- */
.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 16px;
  font-size: 14px;
  background: var(--blanco);
  border: 1px solid var(--borde);
}

.legal-tabla th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}

.legal-tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
  line-height: 1.45;
}

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

/* En pantalla estrecha una tabla de tres columnas queda estrangulada: cada
   celda cae a cuatro caracteres por línea. En vez de encogerla o de obligar a
   arrastrarla de lado, cada fila se apila y cada celda lleva su etiqueta. */
@media (max-width: 759px) {
  .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td { display: block; }
  .legal-tabla thead { display: none; }

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

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

  .legal-tabla td { border: 0; padding: 5px 0; }

  .legal-tabla td::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin-bottom: 1px;
  }
}

/* --- Índice --- */
.legal-indice { list-style: none; margin: 0 0 26px; padding: 0; }

.legal-indice li {
  padding: 13px 0;
  border-bottom: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.legal-indice a { font-size: 16px; font-weight: 600; color: var(--marino); text-decoration: none; }
.legal-indice a:hover { color: var(--naranja-hondo); }
.legal-indice span { font-size: 13.5px; color: var(--tinta-2); }

/* --- Pie del documento --- */
.legal-responsable {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 2px solid var(--marino);
}

.legal-responsable h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--tinta-2); margin: 0 0 8px; }
.legal-responsable p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.legal-responsable a { color: var(--naranja-hondo); }
.legal-nota { color: var(--tinta-2); font-size: 13px; }

.legal-otros { margin-top: 26px; display: flex; flex-direction: column; gap: 6px; }
.legal-otros-titulo { margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-2); }
.legal-otros a { font-size: 14px; color: var(--marino); text-decoration: none; }
.legal-otros a:hover { color: var(--naranja-hondo); text-decoration: underline; }

/* --- Escritorio: índice al costado, documento a medida de lectura ---

   El texto legal no se estira a mil píxeles: pasada cierta anchura el ojo se
   pierde al saltar de renglón, y esto se lee de arriba abajo. El ancho sobrante
   no se rellena con párrafos más largos, se usa para poner el índice a la vista
   y para que las tablas quepan enteras. */
@media (min-width: 1080px) {
  .legal-marco {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

  .legal-lado {
    display: block;
    position: sticky;
    top: 22px;
    padding-right: 20px;
    border-right: 1px solid var(--borde);
  }

  .legal-lado-titulo {
    margin: 0 0 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-2);
  }

  .legal-lado nav { display: flex; flex-direction: column; gap: 2px; }

  .legal-lado a {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--tinta-2);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: var(--r);
  }

  .legal-lado a:hover { background: var(--marino-suave); color: var(--marino); }

  .legal-lado a[aria-current="page"] {
    background: var(--naranja-suave);
    color: var(--naranja-hondo);
    font-weight: 600;
  }

  .legal-lado-nota {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
    font-size: 12px;
    line-height: 1.5;
    color: var(--tinta-2);
  }

  .legal-lado-nota a { color: var(--naranja-hondo); }

  /* Con el índice al lado, repetirlo abajo es ruido. */
  .legal-migas, .legal-otros { display: none; }

  /* El párrafo se detiene donde deja de leerse bien. La tabla no: usa toda la
     columna, que es justo lo que necesita para no romperse. */
  .legal p, .legal li, .legal h2, .legal h3 { max-width: 68ch; }
  .legal .legal-clave { max-width: 68ch; }
  .legal .legal-tabla { max-width: 100%; }

  /* Aviso de que lo legal solo existe en español. Solo aparece en los otros
   idiomas: en español no hay nada que advertir. */
.legal-idioma {
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--marino-suave);
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--marino);
}

.legal-borrador { max-width: 68ch; }
  .legal-responsable { max-width: 68ch; }

  /* El índice general sí reparte el ancho: son seis tarjetas para escoger, no
     un texto que se lea seguido. */
  .legal-indice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 26px;
  }

  .legal-indice li { padding: 15px 0; }
}