/* Estilo compartido por privacidad, términos, soporte y borrar-cuenta.
   Va en archivo aparte para compartirlo y mantener estas páginas autónomas. La CSP permite
   estilos en línea por compatibilidad con estas páginas, pero no scripts en línea,
   y es autónomo a propósito: estas páginas también las abren Apple, Google y gente que
   todavía no tiene la app, así que no dependen de app.css.
   Los tonos son los del tema "Plumón pastel" (y los de "Noche" si el teléfono está en
   modo oscuro), copiados de app.css. */

@font-face{
  font-family:'Quicksand';
  src:url('fonts/quicksand.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
}

/* Contrastes medidos (WCAG AA 4.5:1) — no aclarar sin re-medir:
   tinta/fondo 9.58 · tinta-suave/fondo 4.89 · liga/fondo 5.16 · liga/globo 4.81 · liga/tarjeta 5.65
   El --primario de la app (#C94570) da 4.19 sobre este fondo: sirve para botones con
   letra blanca, NO para texto corrido. Por eso las ligas usan un tono más hondo. */
:root{
  --fondo:#FFF1F6; --tarjeta:#FFFFFF; --globo:#FDE7F0; --borde:#F5D8E4;
  --tinta:#4A3B44; --tinta-suave:#7A6570;
  --liga:#B5395F; --marca:#C94570;
  --aviso-fondo:#FFF3C4; --aviso-tinta:#6B4A00;
}
@media (prefers-color-scheme: dark){
  /* noche: tinta/fondo 14.88 · tinta-suave/fondo 6.97 · liga/fondo 6.64 */
  :root{
    --fondo:#14161F; --tarjeta:#1E2230; --globo:#282D40; --borde:#2C3146;
    --tinta:#EAE8F2; --tinta-suave:#9BA0B8;
    --liga:#8B95F6; --marca:#8B95F6;
    --aviso-fondo:#3A3010; --aviso-tinta:#FFE08A;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:32px 20px 72px;
  background:var(--fondo);
  color:var(--tinta);
  font-family:'Quicksand',-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  font-weight:500;
  line-height:1.65;
}

main{max-width:66ch; margin:0 auto}

.marca{
  display:inline-block;
  margin-bottom:32px;
  font-size:1.25rem;
  font-weight:700;
  text-decoration:none;
  color:var(--tinta);
}
.marca em{font-style:normal; color:var(--marca)}

h1{
  font-size:clamp(1.8rem, 7vw, 2.4rem);
  line-height:1.15;
  font-weight:700;
  margin:0 0 6px;
}

.fecha{
  color:var(--tinta-suave);
  font-size:.92rem;
  margin:0 0 28px;
}

h2{
  font-size:1.22rem;
  line-height:1.3;
  font-weight:700;
  margin:40px 0 10px;
}
h3{
  font-size:1.02rem;
  font-weight:700;
  margin:24px 0 6px;
}

p, li{margin:0 0 12px}
ul, ol{padding-left:22px; margin:0 0 14px}
li::marker{color:var(--marca); font-weight:700}
strong{font-weight:700}

a{color:var(--liga); text-underline-offset:3px; overflow-wrap:anywhere}
a:focus-visible{outline:3px solid var(--liga); outline-offset:3px; border-radius:4px}

/* El resumen de arriba y las cajas de "qué se borra / qué se conserva" */
.destacado{
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-radius:16px;
  padding:18px 20px;
  margin:22px 0;
}
.destacado > :last-child{margin-bottom:0}
/* el título de una caja es h2 (no se salta nivel tras el h1) pero se ve chico, como h3 */
.destacado h2, .destacado h3:first-child{font-size:1.02rem; margin:0 0 8px}

/* Lo importante que no queremos que se pierda entre párrafos (salud, suscripción) */
.ojo{
  background:var(--globo);
  border-radius:16px;
  padding:18px 20px;
  margin:22px 0;
}
.ojo > :last-child{margin-bottom:0}
.ojo h3:first-child{margin-top:0}

/* Dato que todavía nadie ha confirmado. Se ve a propósito: una página legal con un
   pendiente NO se publica. Antes de subir: grep -n 'class="pendiente"' app/*.html debe salir vacío. */
.pendiente{
  background:var(--aviso-fondo);
  color:var(--aviso-tinta);
  font-weight:700;
  padding:1px 6px;
  border-radius:6px;
}

.chica{font-size:.92rem; color:var(--tinta-suave)}

.pie{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--borde);
  font-size:.95rem;
}
/* ligas del pie con aire: en el teléfono se tocan con el dedo (objetivo >= 44px) */
.pie a{display:inline-block; padding:10px 0; margin-right:18px}