/* Lo común de la política de privacidad y de la página para borrar datos, en
   los tres idiomas: la tipografía de la web, la barra con el logo que vuelve al
   inicio, y los colores en claro y en oscuro. Lo propio de cada página sigue
   en su <style>. */
:root {
  color-scheme: light dark;
  --noche: #1E293B;
  --ambar: #FBBF24;
  --fondo: #FFFFFF;
  --texto: #1A1A1A;
  --texto-2: #6B7280;
  --enlace: #3D5C8F;
  --borde: #6B7280;   /* el borde de un campo necesita 3:1 contra el fondo */
  --foco: #0F172A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181C;
    --texto: #E8E8E8;
    --texto-2: #9CA3AF;
    --enlace: #9DB4DB;
    --borde: #8B93A1;
    --foco: var(--ambar);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1.25rem 4rem;
  font: 400 1.0625rem/1.65 "Atkinson Hyperlegible", system-ui, sans-serif;
  color: var(--texto); background: var(--fondo);
}
body > :not(.barra) { max-width: 46rem; margin-inline: auto; }
a { color: var(--enlace); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

/* La barra va de borde a borde, en noche como la portada de la web, y el logo
   se alinea con el texto. El % del padding es sobre el ancho del body sin su
   padding, por eso se le suman los 2.5rem. */
.barra {
  margin: 0 -1.25rem 2rem; background: var(--noche); --foco: var(--ambar);
  padding: 10px max(1.25rem, calc((100% + 2.5rem - 46rem) / 2));
}
.barra a { display: inline-block; }
.barra img { display: block; height: 36px; width: auto; }

h1 { font: 600 clamp(1.6rem, 5vw, 2rem)/1.15 "Fredoka", system-ui, sans-serif; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin-top: 2.25rem; border-bottom: 1px solid rgba(128,128,128,.25); padding-bottom: .35rem; }
ul { padding-left: 1.25rem; }
li { margin: .35rem 0; }
.callout {
  border-left: 3px solid var(--ambar); padding: .75rem 1rem; margin: 1.5rem 0;
  background: rgba(251,191,36,.10); border-radius: 0 6px 6px 0;
}
.idiomas { font-size: .9rem; margin-bottom: 1.25rem; }
.idiomas a, .idiomas strong { display: inline-block; padding: 8px 2px; } /* toque de más de 24px de alto */