/* ==========================================================================
   Descanshop — Páginas legales
   Aviso legal · Política de privacidad · Política de cookies · Configuración
   de cookies. Las cuatro comparten plantilla (page-legal.php) y hoja: son la
   misma página con distinto texto.

   No están transcritas del demo —el demo nunca cortó estas páginas—, así que
   todo aquí se construye con los tokens y las medidas que el resto del sitio
   ya usa: la banda repite las proporciones de `.hero` (mismo lavado, mismo
   gutter) y el cuerpo repite la prosa del artículo (Florentia 16/26 al 70%).
   ========================================================================== */

/* --------------------------------------------------------------------------
   BANDA
   Alto por contenido, no los 523px de `.hero`: ese número lo fijaba la
   fotografía del fondo y aquí no hay ninguna, así que un título de dos líneas
   —«Configuración de cookies» a 900px— se saldría de una caja fija.
   Fondo azul plano, sin el <span class="hero__wash"> ni el degradado de
   `--hero-wash`: ese lavado existe para velar una fotografía, y sobre un color
   liso se funde con él — pinta lo mismo y no se ve.
   -------------------------------------------------------------------------- */
/* La columna: una sola medida, centrada, que comparten la banda y el cuerpo.
   El resto del sitio alinea a la izquierda contra `--page` (1600px) porque sus
   páginas son rejillas; aquí no hay más que un texto seguido, y una columna de
   75ch pegada al borde izquierdo de una pantalla ancha deja medio metro de
   nada a la derecha. Centrada, el ojo no tiene que viajar.

   Las líneas SIGUEN alineadas a la izquierda dentro de la columna: lo que se
   centra es la caja. Un texto legal con `text-align:center` pierde el borde
   izquierdo constante que el ojo usa para volver al principio de cada línea. */
.legal{--legal-col:min(75ch,100% - 50px)}

.legal__band{
  background:var(--azul);
  padding:96px 0 72px;
}
.legal__band-inner{
  width:var(--legal-col);
  margin-inline:auto;
}
.legal__title{
  margin:0;
  font-size:60px;font-weight:400;line-height:1.15;
  text-transform:uppercase;color:var(--beige);
  /* «КОНФИДЕНЦИАЛЬНОСТИ» o «DATENSCHUTZERKLÄRUNG» en mayúsculas no caben en un
     teléfono: guion donde el navegador sepa silabear la lengua (<html lang>),
     y corte a secas donde no. */
  hyphens:auto;overflow-wrap:anywhere;
}
.legal__lede{
  margin:22px 0 0;
  font-size:22px;font-weight:400;line-height:26px;color:var(--beige);
}

/* --------------------------------------------------------------------------
   CUERPO
   -------------------------------------------------------------------------- */
.legal__inner{
  width:var(--legal-col);
  margin-inline:auto;
  padding-block:56px 96px;
}
.legal__updated{
  margin:0 0 34px;
  font-size:16px;font-weight:300;line-height:20px;
  color:var(--azul-oscuro);opacity:.6;
}

/* La medida del encargo —~75 caracteres por línea— es `--legal-col`, arriba.
   `ch` es el ancho del «0» de la fuente en curso, que es lo que mide una
   columna de texto —no el ancho medio de un carácter—, así que 75ch da algo
   más de 75 caracteres reales en una serif de ancho variable como Florentia.
   Se queda igualmente dentro del rango de 50-80 que recomienda la tipografía
   para lectura corrida, que es lo que estas páginas son. */

/* .prose (pages/articulo.css) sólo se carga en el artículo, así que la página
   legal trae su propia copia en vez de depender de aquella hoja. */
.legal__body{
  font-size:16px;font-weight:400;line-height:26px;
  color:var(--azul-oscuro);opacity:.85;
  /* Correos y URL largos no tienen dónde partirse y ensanchaban la página en
     el móvil (administracionprocomivin@descanshop.es mide 331px). */
  overflow-wrap:anywhere;
}
.legal__body h2{
  margin:44px 0 14px;
  font-size:24px;font-weight:400;line-height:1.25;
  text-transform:none;color:var(--azul-oscuro);opacity:1;
}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{margin:28px 0 10px;font-size:18px;font-weight:700;line-height:24px}
.legal__body p{margin:0 0 20px}
.legal__body ul,
.legal__body ol{margin:0 0 20px;padding-left:22px}
.legal__body li{margin:0 0 8px}
.legal__body a{color:var(--azul);text-decoration:underline}
.legal__body a:hover{color:var(--azul-oscuro)}
.legal__body table{
  width:100%;margin:0 0 24px;
  border-collapse:collapse;
  font-size:15px;line-height:22px;
}
.legal__body th,
.legal__body td{
  padding:10px 12px;
  border:1px solid var(--field-border);
  text-align:left;vertical-align:top;
}
.legal__body th{font-weight:700;background:var(--card-bg)}
.legal__body > :last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   ≤900 — el mismo corte que usan categoria.css y tiendas.css
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .legal__band{padding:56px 0 44px}
  .legal__title{font-size:30px}
  .legal__lede{margin-top:14px;font-size:16px;line-height:20px}
  .legal__inner{padding-block:34px 60px}
  .legal__body h2{margin:34px 0 12px;font-size:20px}
  /* La tabla hace scroll dentro de su caja en vez de ensanchar la página.
     display:block sobre la propia tabla evita un envoltorio en el marcado,
     que sale del editor; el min-width impide que las columnas se aplasten
     a una palabra por línea antes de que el scroll entre en juego. */
  /* overflow-y explícito: con overflow-x:auto, un visible en y se computa
     como auto y el borde de la última fila bastaba para sacar un scroll vertical. */
  .legal__body table{display:block;overflow-x:auto;overflow-y:hidden}
  .legal__body th,
  .legal__body td{min-width:140px}
}