/* Las dos páginas legales. Se ven solas, sin la app: las abre alguien desde
   la pantalla de consentimiento de Google, muchas veces en el teléfono y
   antes de decidir si nos deja entrar a su Drive. Que se lean bien no es un
   detalle de diseño: es parte de que la decisión sea informada. */

:root {
  color-scheme: light dark;
  --papel: #ffffff;
  --tinta: #16120f;
  --tinta-2: #4a423c;
  --tinta-3: #7a6f66;
  --cinta: #d4501e;
  --borde: #e6e0d8;
  --hondo: #faf7f2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14110f;
    --tinta: #f2ede4;
    --tinta-2: #c4bab0;
    --tinta-3: #8c8178;
    --cinta: #ea5b23;
    --borde: #2b2521;
    --hondo: #1c1815;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px 22px 90px;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

main { max-width: 46rem; margin: 0 auto; }

.marca {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.02em; margin-bottom: 34px;
}
.marca span { font-size: 18px; }
.claqueta {
  width: 30px; height: 24px; border-radius: 4px;
  background: var(--tinta); position: relative; flex: none;
}
.claqueta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(115deg, var(--cinta) 0 7px, var(--papel) 7px 13px);
}

h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; }
.fecha { color: var(--tinta-3); font-size: 13.5px; margin: 0 0 34px; }

h2 {
  font-size: 18px; margin: 38px 0 10px; letter-spacing: -0.01em;
  padding-top: 22px; border-top: 1px solid var(--borde);
}
h2:first-of-type { border-top: 0; padding-top: 0; }

/* Sin raya arriba y con menos aire: un h3 tiene que leerse como parte del h2
   que lo contiene, no como una sección nueva. */
h3 { font-size: 15px; margin: 24px 0 8px; letter-spacing: -0.01em; }

p, li { color: var(--tinta-2); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 7px; }
strong { color: var(--tinta); font-weight: 600; }
a { color: var(--cinta); }

/* Lo que más importa que se lea: qué se toca y qué no. */
.caja {
  background: var(--hondo); border: 1px solid var(--borde);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 18px;
}
.caja p:last-child { margin-bottom: 0; }
.si::before { content: "✓ "; color: #16897a; font-weight: 700; }
.no::before { content: "✕ "; color: #d13f6c; font-weight: 700; }

footer {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--borde);
  color: var(--tinta-3); font-size: 13.5px;
}