/* Las tres politicas: /devoluciones, /envios, /terminos.
   Las genera tools-legal.py leyendo POLITICAS.md. No se editan a mano.

   Cargan styles.css y ficha.css antes que esto: de ahi salen los colores, las
   tipografias, `body.pag`, la barra `.pag__bar` y el pie `.pag__pie`. Aqui va
   solo el cuerpo del texto.

   Una pagina legal se lee de arriba abajo y no se ojea, asi que manda la
   medida de linea -- 68ch -- y no la retícula de doce del resto del sitio.
   Con el ancho completo de la portada estas lineas saldrian de 140 caracteres
   y el ojo pierde el renglon al volver. */

.leg{
  flex:1;
  width:100%; max-width:44rem; margin:0 auto;
  padding:0 var(--edge) clamp(3rem, 7vw, 5rem);
}

.leg__miga{ font-size:.82rem; letter-spacing:.04em; opacity:.72; margin-bottom:1rem; }
.leg__miga a{ color:inherit; text-decoration:none; }
.leg__miga a:hover{ text-decoration:underline; }

.leg__t{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2rem, 5.4vw, 3.4rem); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 2rem;
}

.leg__txt{ font-size:1.0625rem; line-height:1.6; max-width:68ch; }
.leg__txt p{ margin:0 0 1.1rem; text-wrap:pretty; }
.leg__txt a{ color:inherit; text-underline-offset:.18em; }

/* Los subtitulos llegan EN MAYUSCULAS desde POLITICAS.md y se quedan asi: el
   texto fuente ya decidio el enfasis. En mono y espaciados para que se lean
   como rotulo y no como alguien gritando. */
.leg__h{
  font-family:var(--mono); font-weight:600;
  font-size:.8125rem; letter-spacing:.09em;
  margin:2.4rem 0 .9rem; opacity:.85;
}

.leg__pasos{ margin:0 0 1.1rem; padding-left:1.3rem; }
.leg__pasos li{ margin-bottom:.4rem; }

/* Los plazos de envio. Dos columnas que no se rompen aunque la etiqueta sea
   larga, y en mono para que los numeros se alineen entre filas. */
.leg__plazos{
  display:grid; grid-template-columns:auto 1fr;
  gap:.5rem 1.4rem; margin:0 0 1.4rem;
  padding:1rem 1.2rem; border:1px solid var(--hair); border-radius:4px;
  font-family:var(--mono); font-size:.9375rem;
}
.leg__plazos dt{ font-weight:600; }
.leg__plazos dd{ margin:0; opacity:.85; }

.leg__contacto{ list-style:none; margin:0 0 1.1rem; padding:0; }
.leg__contacto li{ margin-bottom:.35rem; }

.leg__otras{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--hair);
  font-size:.9rem; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem;
  align-items:baseline;
}
.leg__otras span{ opacity:.7; }
.leg__otras a{ color:inherit; text-underline-offset:.18em; }

@media (max-width:600px){
  .leg__plazos{ grid-template-columns:1fr; gap:.15rem; }
  .leg__plazos dd{ margin-bottom:.5rem; }
}