/* Eenvoudige pagina's van El Inglés Claro (gracias, descargar, aviso legal, privacidad, condiciones).
   Zelfde kleuren als de verkooppagina (index.html): schrift met ruitjes, blauwe inkt, rode pen; donker = schoolbord. */
:root {
  --paper: #FFFFFF; --grid: #E2EAF5; --ink: #1C2E78; --text: #1F2638; --pencil: #5C6375; --rule: #C8D2E2;
  --pen: #D3242C; --mk: #FFE14D; --btn-bg: #1C2E78; --btn-fg: #FFFFFF; --card: #FFFFFF;
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif; --font-body: "Literata", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1E2B25; --grid: rgba(255, 255, 255, .055); --ink: #F2F5EE; --text: #E2E8DF; --pencil: #A9B4AB;
    --rule: rgba(255, 255, 255, .18); --pen: #FF8A80; --mk: #FFE066; --btn-bg: #F2F5EE; --btn-fg: #1E2B25; --card: #22312A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1E2B25; --grid: rgba(255, 255, 255, .055); --ink: #F2F5EE; --text: #E2E8DF; --pencil: #A9B4AB;
  --rule: rgba(255, 255, 255, .18); --pen: #FF8A80; --mk: #FFE066; --btn-bg: #F2F5EE; --btn-fg: #1E2B25; --card: #22312A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 28px 16px 56px; color: var(--text); font: 17px/1.6 var(--font-body);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
a { color: var(--ink); text-underline-offset: 3px; }
.k { max-width: 680px; margin: 0 auto; background: var(--card); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.t { background: var(--ink); color: var(--paper); padding: 22px 26px; }
.t small { display: block; font: 700 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.t h1 { margin: 8px 0 0; font: 850 28px/1.12 var(--font-display); font-stretch: 85%; }
.b { padding: 22px 26px 26px; }
.b h2 { font: 800 20px/1.25 var(--font-display); font-stretch: 90%; color: var(--ink); margin: 28px 0 8px; }
.b p, .b li { margin: 0 0 12px; }
.b ul { padding-left: 20px; }
.g { color: var(--pencil); font-size: 14px; }
.att { background: color-mix(in srgb, var(--mk) 38%, transparent); border-radius: 6px; padding: 12px 14px; }
.cta { display: inline-block; background: var(--btn-bg); color: var(--btn-fg); font: 800 17px/1 var(--font-display); padding: 15px 22px; border-radius: 6px; text-decoration: none; box-shadow: 4px 4px 0 var(--mk); }
.cta:focus-visible, a.f:focus-visible { outline: 3px solid var(--mk); outline-offset: 2px; }
a.f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--rule); border-radius: 6px; margin: 10px 0; text-decoration: none; color: var(--text); font-weight: 600; }
a.f:hover { border-color: var(--ink); }
a.f span { flex: none; font: 800 14px/1 var(--font-display); background: var(--mk); color: #14204F; padding: 8px 12px; border-radius: 4px; }
.volver { display: inline-block; max-width: 680px; margin: 0 auto 16px; color: var(--pencil); text-decoration: none; font: 700 15px/1 var(--font-display); }
.top { max-width: 680px; margin: 0 auto; }
@media (max-width: 480px) { .t, .b { padding-left: 18px; padding-right: 18px; } .t h1 { font-size: 24px; } }

button.cta { border: 0; cursor: pointer; margin: 0 8px 8px 0; }