/* RODAPP — páginas de compliance (borrado de cuenta + privacidad).
   Sitio estático (GitHub Pages). Sin JS. Tokens = paleta de la app nativa. */

:root {
  --coal:   #101113;   /* fondo */
  --card:   #1a1c1f;   /* superficie / callout */
  --line:   #33373c;   /* bordes */
  --txt:    #f2f0eb;   /* texto principal */
  --mut:    #8b9095;   /* texto secundario / meta */
  --orange: #fc4c02;   /* acento */
  --maxw:   680px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--coal);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;          /* ~17px */
  line-height: 1.65;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px;
}

/* ── Header / footer de marca ─────────────────────────────── */
.brand {
  padding: 8px 0 4px;
}
.brand__name {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--orange);
  letter-spacing: 0.5px;
}
.brand__sub {
  color: var(--mut);
  font-size: 0.85rem;
  margin-top: 2px;
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

.foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 0.9rem;
}
.foot a { font-weight: 600; }
.foot__copy { margin-top: 8px; font-size: 0.8rem; }

/* ── Tipografía ───────────────────────────────────────────── */
h1 {
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 24px 0 8px;
}
h2 {
  font-size: 1.2rem;
  margin: 32px 0 8px;
  scroll-margin-top: 16px;       /* al saltar por anchor no queda pegado arriba */
}
.meta { color: var(--mut); font-size: 0.9rem; margin: 0 0 8px; }
p, li { margin: 8px 0; }
ul { padding-left: 22px; }

a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Índice interno (privacidad) ──────────────────────────── */
.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
}
.toc strong { display: block; margin-bottom: 6px; }
.toc ul { margin: 0; padding-left: 20px; }

/* ── Callout (Importante / excepciones) ───────────────────── */
.callout {
  background: var(--card);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 20px 0;
}
.callout__title {
  font-weight: 700;
  color: var(--orange);
  display: block;
  margin-bottom: 4px;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary {
  background: var(--orange);
  color: var(--coal);            /* oscuro sobre naranja = AA (blanco falla) */
  border: 2px solid var(--orange);
}
.btn--secondary {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
}
.cta-block { margin: 18px 0; }
.cta-note {
  color: var(--mut);
  font-size: 0.9rem;
  margin-top: 8px;
}

/* full-width en mobile, auto en desktop */
@media (max-width: 599px) {
  .btn { display: flex; width: 100%; }
}
@media (min-width: 600px) {
  body { font-size: 1.125rem; }  /* ~18px en desktop */
  h1 { font-size: 2rem; }
}