/* Superficie editorial compartida para los documentos legales de Caleido. */
:root {
  --legal-tinta: #103F42;
  --legal-acento: #D9654E;
  --legal-linea: #D4E2E0;
  --legal-fondo: #F7FAFA;
  /* Ancho de los dos bloques del preámbulo. En px y no en `ch`: el recuadro de
     estado y el aviso de idioma usan tamaños de letra distintos, así que el
     mismo valor en `ch` los dejaba escalonados (640 contra 759). */
  --legal-preambulo: 640px;
}

/* Las cuatro versiones del documento viven en la misma página y solo una se
   muestra. La regla necesita las dos clases porque más abajo, dentro de la
   consulta de 980 px, `.doc-legal.legal-layout` declara `display: grid`: un
   `[hidden]` suelto perdería por especificidad y se verían los cuatro idiomas
   uno tras otro. */
.doc-legal.legal-layout[hidden] { display: none; }

.doc-legal.legal-layout {
  max-width: 1180px;
  padding: 56px 28px 96px;
}

.legal-layout > h1 {
  grid-column: 1 / -1;
  max-width: 17ch;
  margin: 0;
  color: var(--legal-tinta);
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(2.45rem, 6vw, 4.75rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.legal-layout > .fecha {
  grid-column: 1 / -1;
  margin: 18px 0 34px;
  color: #416467;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.legal-layout > .aviso-estado:first-of-type {
  grid-column: 1 / -1;
  max-width: var(--legal-preambulo);
  margin: 0 0 46px;
  padding: 18px 22px;
  border: 1px solid var(--legal-linea);
  border-radius: 0;
  background: #E8F3F2;
  color: #17494B;
  box-shadow: 8px 8px 0 #D7EAE8;
}

.legal-layout > .aviso-estado:first-of-type strong { color: var(--legal-tinta); }

/* El aviso de idioma es lo primero que lee quien llega con el sitio en otro
   idioma: explica por qué el documento sigue en español. Mismo ancho de lectura
   que el recuadro de estado para que el preámbulo no se vea escalonado. */
.legal-layout > .aviso-idioma {
  max-width: var(--legal-preambulo);
  margin: 0 0 38px;
}

.legal-layout .indice {
  margin: 0 0 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.legal-layout .indice p {
  margin: 0 0 12px;
  color: var(--legal-acento);
  font-family: "Baloo 2", sans-serif;
  font-size: .95rem;
}

.legal-layout .indice ol {
  display: grid;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  columns: auto;
  list-style-position: inside;
}

.legal-layout .indice li { margin: 0; font-size: .9rem; }
.legal-layout .indice a { color: #235B5D; text-underline-offset: .2em; }
.legal-layout .indice a:hover { color: var(--legal-acento); }

.legal-layout h2 {
  margin: 54px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--legal-linea);
  color: var(--legal-tinta);
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.legal-layout h3 {
  margin: 30px 0 8px;
  color: #235B5D;
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.legal-layout p,
.legal-layout li {
  max-width: 72ch;
  color: #29494C;
  font-size: 1rem;
  line-height: 1.78;
  text-wrap: pretty;
}

.legal-layout p { margin: 0 0 18px; }
.legal-layout ul, .legal-layout ol { margin: 0 0 20px; padding-left: 1.3rem; }
.legal-layout li { margin-bottom: 8px; }
.legal-layout a { color: #0C7778; font-weight: 600; }
.legal-layout a:focus-visible { outline: 3px solid var(--legal-acento); outline-offset: 3px; }

.legal-layout table {
  width: 100%;
  max-width: 76ch;
  margin: 20px 0 28px;
  border: 1px solid var(--legal-linea);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  box-shadow: 5px 5px 0 #E3EFED;
}

.legal-layout th,
.legal-layout td { padding: 14px 16px; border-bottom: 1px solid var(--legal-linea); }
.legal-layout th { color: var(--legal-tinta); background: var(--legal-fondo); font-size: .75rem; }
.legal-layout tr:last-child td { border-bottom: 0; }

@media (min-width: 980px) {
  .doc-legal.legal-layout {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 760px);
    column-gap: clamp(48px, 8vw, 112px);
  }

  /* El preámbulo ocupa el ancho entero: título, fecha, el recuadro de estado y
     el aviso de idioma. Todo lo demás vive en la columna de lectura. */
  .legal-layout > h1,
  .legal-layout > .fecha,
  .legal-layout > .aviso-idioma,
  .legal-layout > .aviso-estado:first-of-type { grid-column: 1 / -1; }

  /* LA FILA DEL ÍNDICE NO SE FIJA A MANO (corregido 2026-09-07).

     Aquí decía `grid-row: 4 / span 999`, y ese 4 era el número de bloques de
     ancho completo que había encima el día que se escribió. Al añadir el aviso
     de idioma el preámbulo creció una fila, el índice se quedó clavado en la 4
     y acabó **dibujado encima del recuadro de estado**: los dos textos
     superpuestos y el documento ilegible.

     Sin línea de inicio, la colocación automática pone el índice en la primera
     fila donde la columna 1 está libre — o sea, justo debajo del preámbulo,
     mida lo que mida. Ni terminos.html ni privacidad.html tienen el mismo
     número de bloques arriba (privacidad no lleva kicker), así que ningún
     número fijo podía servirles a las dos. No volver a poner uno. */
  .legal-layout > .indice {
    grid-column: 1;
    grid-row: span 999;
    align-self: start;
    position: sticky;
    top: 112px;
  }
  .legal-layout > :not(h1):not(.fecha):not(.indice):not(.aviso-idioma):not(.aviso-estado:first-of-type) { grid-column: 2; }
  .legal-layout .indice ol { display: block; }
}

@media (max-width: 680px) {
  .doc-legal.legal-layout { padding: 36px 20px 68px; }
  .legal-layout > .aviso-estado:first-of-type { box-shadow: 5px 5px 0 #D7EAE8; }
  .legal-layout table { display: block; overflow-x: auto; }
  .legal-layout th, .legal-layout td { min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-layout *, .legal-layout *::before, .legal-layout *::after { scroll-behavior: auto !important; }
}