/**
 * Las cinco páginas legales: /aviso-de-privacidad, /terminos-y-condiciones,
 * /envios, /cambios-y-devoluciones y /cookies.
 *
 * MISMA LÓGICA QUE /expo Y LA MITAD DEL CSS COMPARTIDO: la paleta, las
 * tipografías y las reparaciones están en hoja.css; aquí solo va lo que
 * distingue a una página de TEXTO LARGO de una de aterrizaje. Todo cuelga de
 * `.legal-raiz`, así que nada de esto puede alcanzar al resto del sitio.
 *
 * LA DIFERENCIA CON LA EXPO NO ES DE COLOR, ES DE LECTURA. La expo tiene cuatro
 * frases y un boleto; estas tienen entre 700 y 1 500 palabras que alguien va a
 * leer de arriba abajo, y a veces buscando un dato concreto —cuánto tarda un
 * envío, qué pasa si el producto llega dañado—. De ahí las tres decisiones que
 * gobiernan este archivo:
 *
 *   1. ANCHO DE LÍNEA DE 68ch. Con los 960 px de la expo, a 1440 px de ventana
 *      salían renglones de unos 150 caracteres: el ojo pierde el principio de la
 *      línea siguiente. 68ch son unos 700 px y unos 80 caracteres por renglón.
 *   2. JERARQUÍA DE VERDAD. El h1 en Anton y grande; el h2 de cada sección en
 *      Anton, más chico, con una línea de separación encima que hace de corte
 *      visual; el h3 en Archivo en negrita, que se lee como un subtítulo dentro
 *      de la sección y no compite con el h2.
 *   3. ÍNDICE ARRIBA en las páginas de siete secciones o más. Lo pinta
 *      page-legal.php leyendo los <h2> del contenido, así que no hay ninguna
 *      lista que mantener a mano.
 */

.legal-raiz{
  /* El contenedor pinta su propio fondo y NO el del documento, al revés que la
     expo: estas páginas sí llevan el pie del sitio, que es quien llena el hueco
     de abajo con su propio color. */
  padding:0 0 64px;
}

.legal-cuerpo{
  max-width:68ch;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- cabecera de la página ---------- */
.legal-cab{
  max-width:68ch;
  margin:0 auto;
  padding:48px 24px 0;
}
.legal-raiz h1{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  font-size:clamp(32px,5.4vw,50px);
  line-height:1.02;
  margin:0 0 10px;
}
.legal-fecha{
  color:var(--humo);
  font-size:14px;
  margin:0;
}
.legal-fecha strong{color:var(--papel);font-weight:600;}

/* ---------- índice ---------- */
.legal-indice{
  margin:28px 0 0;
  padding:18px 20px;
  background:var(--tinta-2);
  border:1px solid var(--linea);
  border-radius:5px;
}
/* CON .legal-raiz DELANTE, y no es manía de orden: `.legal-indice h2` y
   `.legal-raiz h2` pesan lo mismo —una clase y un elemento— y la de sección va
   después en este archivo, así que ganaba ella y el índice salía con la línea de
   separación y los 26 px de relleno de un título de sección. Se veía en la
   captura: una raya dentro del recuadro, encima de "EN ESTA PÁGINA". */
.legal-raiz .legal-indice h2{
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--humo);
  margin:0 0 10px;
  /* El índice NO lleva la línea de separación de los h2 de sección: no es una
     sección del documento, es un mapa de él. */
  border-top:0;
  padding-top:0;
}
.legal-indice ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:s;
  /* Dos columnas donde caben, que con diez entradas ahorra media pantalla en
     escritorio. En el teléfono la media query de abajo lo deja en una. */
  columns:2;
  column-gap:28px;
}
.legal-indice li{
  counter-increment:s;
  break-inside:avoid;
  margin:0 0 6px;
  font-size:15px;
  line-height:1.4;
}
.legal-indice a{color:var(--papel);text-decoration:none;}
/* EL NÚMERO LO PONE EL ÍNDICE SOLO CUANDO EL TÍTULO NO LO TRAE YA. Los
   Términos y Condiciones numeran sus diez cláusulas en el propio título —"1.
   Identidad del proveedor"—, y con el contador encima salía "1. 1. Identidad
   del proveedor". page-legal.php marca ese caso con .is-numerado. */
.legal-indice a::before{
  content:counter(s) ". ";
  color:var(--neon);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
}
.legal-indice.is-numerado a::before{content:none;}
.legal-indice a:hover{color:var(--neon);text-decoration:underline;}

/* ---------- el texto ---------- */
.legal-raiz h2{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  font-size:clamp(23px,3.2vw,30px);
  line-height:1.15;
  margin:44px 0 12px;
  padding-top:26px;
  border-top:1px solid var(--linea);
  /* scroll-margin y no scroll-padding: la barra del sitio es sticky y sin esto
     un salto desde el índice deja el título DEBAJO de la barra. El tema ya pone
     scroll-padding-top en <html>, pero aquí se suma el relleno propio del h2. */
  scroll-margin-top:calc(var(--header-alto,95px) + 24px);
}
.legal-raiz h2:first-of-type{margin-top:34px;}
.legal-raiz h3{
  font-family:'Archivo',sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  margin:26px 0 6px;
  color:var(--papel);
}
.legal-raiz p{color:#C8CAD2;}
.legal-raiz strong{color:var(--papel);}
.legal-raiz ul{margin:12px 0;padding:0;list-style:none;}
.legal-raiz ul li{
  position:relative;
  padding-left:20px;
  margin:0 0 8px;
  color:#C8CAD2;
}
/* El punto de la lista se dibuja a mano porque list-style desaparece con el
   `*{padding:0}` del tema y porque así lleva el amarillo de la marca. */
.legal-raiz ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--neon);
}
.legal-raiz a{color:var(--papel);text-decoration:underline;text-underline-offset:3px;}
.legal-raiz a:hover{color:var(--neon);}
.legal-raiz a:focus-visible{outline:3px solid var(--neon);outline-offset:3px;}

/* El bloque de cierre: contacto para ejercer derechos, o lo que cada documento
   ponga al final. Lo marca la clase en el contenido. */
.legal-raiz .legal-nota{
  background:var(--tinta-2);
  border:1px solid var(--linea);
  border-radius:5px;
  padding:20px 22px;
  margin:34px 0 0;
}
.legal-raiz .legal-nota p{margin:0;}

/* ---------- teléfono ---------- */
@media (max-width:720px){
  .legal-cab{padding:30px 18px 0;}
  .legal-cuerpo{padding:0 18px;}
  .legal-raiz{padding-bottom:44px;}
  .legal-raiz h2{margin:34px 0 10px;padding-top:20px;}
  .legal-indice{padding:16px 16px;margin-top:22px;}
  /* UNA COLUMNA. Con dos, a 390 px cada una medía 155 px y "Compra, venta y
     cambio de colecciones" salía en cuatro renglones. */
  .legal-indice ol{columns:1;}
  .legal-raiz .legal-nota{padding:16px 18px;}
}