/* ==========================================================================
   HELPY — páginas legales (Términos y Condiciones, Política de Privacidad)
   Lectura cómoda: fondo claro, columna angosta, letra grande.
   ========================================================================== */

:root {
  color-scheme: light;
  --ink: #111;
  --muted: #555;
  --bg: #f4f4f0;
  --line: #ddd;
  --brand: #D4FF00;
  --todo-bg: #fff1a8;
  --todo-line: #e0b400;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }

.topbar {
  background: #000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.brand { color: var(--brand); font-weight: 900; letter-spacing: 3px; text-decoration: none; }
.topbar nav { display: flex; gap: 16px; }
.topbar nav a { color: #fff; font-size: 14px; text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--brand); }

.wrap { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }

h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.2; margin-bottom: 8px; }
.version { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.intro {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 28px;
}

ol.clauses { padding-left: 0; list-style: none; counter-reset: clause; }
ol.clauses > li { counter-increment: clause; margin-bottom: 20px; }
ol.clauses > li > h2 { font-size: 19px; margin-bottom: 4px; }
ol.clauses > li > h2::before { content: counter(clause) ". "; }
ol.clauses ol { padding-left: 22px; margin-top: 6px; list-style: lower-alpha; }
ol.clauses ol li + li { margin-top: 4px; }

a { color: #1d4ed8; }

/* Datos que el equipo todavía tiene que completar */
mark.todo {
  background: var(--todo-bg);
  border-bottom: 2px solid var(--todo-line);
  padding: 0 3px;
  color: var(--ink);
}

.foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

@media print {
  .topbar { display: none; }
  body { background: #fff; }
}