/* ═══════════════════════════════════════════════════════════════════════════
   Páginas legales (términos y privacidad).
   Hoja propia y chica a proposito: estas paginas se abren desde el pie, desde
   el enlace del perfil de TikTok y desde el checkout de pago, muchas veces sin
   haber pasado por la home. No tiene sentido que arrastren los 158 KB de
   luz.css ni el JS de la aplicacion para mostrar texto.
   Misma paleta y mismas tipografias que el sitio, para que se sienta el mismo
   lugar y no una pagina de otro proveedor.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --crema:#F1EBDD; --papel:#FBF7EC; --papel-2:#E8DCC6;
  --oscuro:#272522; --tinta:#4A4238; --tinta-suave:#6B6053;
  --oro:#7F5C1F; --linea:rgba(39,37,34,.16);
  --serif:'Poiret One',Georgia,serif;
  --texto:'EB Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.7;
  /* El mismo grano del sitio: la textura es parte de la identidad. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.26'/%3E%3C/svg%3E");
}

.legal{
  max-width:740px; margin:0 auto; padding:32px 24px 80px;
  background:var(--papel); box-shadow:2px 3px 0 rgba(39,37,34,.06), 6px 12px 26px rgba(39,37,34,.14);
}

.volver{
  display:inline-block; font-family:var(--sans); font-size:13px; letter-spacing:.04em;
  color:var(--oro); text-decoration:none; margin-bottom:26px;
  /* 44px de area tactil sin agrandar el texto: el trafico es de movil. */
  padding:13px 0;
}
.volver:hover{text-decoration:underline; text-underline-offset:3px}

h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(34px,6vw,50px);
  line-height:1.04; letter-spacing:-.02em; color:var(--oscuro); margin:0 0 6px;
}
.fecha{font-family:var(--sans); font-size:13px; color:var(--tinta-suave); margin:0 0 30px}

h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.4vw,28px);
  color:var(--oscuro); margin:38px 0 12px; letter-spacing:-.01em;
}

p{margin:0 0 15px}
ul{margin:0 0 15px; padding-left:22px}
li{margin-bottom:8px}
strong{color:var(--oscuro); font-weight:600}
em{color:var(--tinta-suave)}

a{color:var(--oro)}
a:focus-visible, .volver:focus-visible{
  outline:2px solid var(--oro); outline-offset:3px; border-radius:2px;
}

/* El resumen de arriba: lo unico que mucha gente va a leer de verdad. */
.aviso{
  background:var(--papel-2); padding:18px 22px; margin:0 0 30px;
  border-left:3px solid var(--oro);
}
.aviso p{margin:0}

/* La tabla de datos personales. En movil no cabe: se desplaza sola, sin
   romper el ancho de la pagina. */
.datos{
  width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px;
  display:block; overflow-x:auto; white-space:nowrap;
}
.datos th, .datos td{
  border-bottom:1px solid var(--linea); padding:10px 14px 10px 0; text-align:left;
  vertical-align:top; white-space:normal;
}
.datos th{
  font-family:var(--sans); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--oro); font-weight:600;
}
@media (min-width:640px){ .datos{display:table; white-space:normal} }

.pie{
  margin-top:46px; padding-top:20px; border-top:1px solid var(--linea);
  font-family:var(--sans); font-size:13.5px; color:var(--tinta-suave);
}
.pie a{padding:11px 0; display:inline-block}   /* area tactil */

@media (max-width:560px){
  body{font-size:16.5px}
  .legal{padding:24px 18px 60px}
}

/* Tema oscuro del sistema: estas paginas se abren desde TikTok, que en movil
   suele estar en oscuro. Sin esto, el salto de brillo es violento. */
@media (prefers-color-scheme: dark){
  :root{
    --crema:#17150F; --papel:#1F1C16; --papel-2:#2A251C;
    --oscuro:#F1EBDD; --tinta:#D6CDBB; --tinta-suave:#A79C88;
    --oro:#D2A94F; --linea:rgba(241,235,221,.16);
  }
  .legal{box-shadow:2px 3px 0 rgba(0,0,0,.2), 6px 12px 26px rgba(0,0,0,.4)}
}

@media print{
  body{background:#fff}
  .legal{box-shadow:none; max-width:none}
  .volver{display:none}
}