/* Hoja de las dos páginas legales (terminos.html, privacidad.html).
   Subconjunto de los tokens de index.html: solo lo que un documento de texto
   necesita. No se importa desde index.html — esa página tiene su <style> propio
   y duplicarlo acá sería peor que las 90 líneas que siguen. */
:root {
  --ground:      #F6F4F0;
  --surface:     #FFFFFF;
  --ink:         #111B21;
  --ink-soft:    #54656F;
  --deep:        #075E54;
  --deep-ink:    #043D37;
  --teal:        #0F7A6E;
  --green:       #25D366;
  --line:        #E3DED6;
  --on-deep:     #EAF4F2;
  --on-deep-soft:#B0D0CA;

  --radius: 12px;
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-3:  clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }

h1, h2, h3 {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-3); max-width: 20ch; }
h2 { font-size: var(--step-1); margin-top: var(--s5); }
h3 { font-size: var(--step-0); margin-top: var(--s3); font-weight: 600; }
p, li { max-width: 62ch; }
p { margin: var(--s2) 0 0; }
ul { margin: var(--s2) 0 0; padding-left: 1.25rem; }
li { margin-top: 0.4rem; }
a { color: var(--teal); }
a:focus-visible, .legal__volver:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }

/* Encabezado: verde sólido, igual que el hero y el cierre de la landing. */
.legal__masthead { background: var(--deep); color: var(--on-deep); padding-block: var(--s4) var(--s5); }
.legal__masthead a { color: var(--on-deep); }
.legal__masthead h1 { color: var(--surface); margin-top: var(--s3); }
.legal__volver {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; text-decoration: none; color: var(--on-deep-soft);
  font-size: var(--step--1);
}
.legal__volver:hover { color: var(--surface); }
.legal__meta { color: var(--on-deep-soft); font-size: var(--step--1); margin-top: var(--s2); }

.legal__cuerpo { padding-block: var(--s5) var(--s5); }

/* Los bloques que un abogado todavía tiene que escribir o validar. No se
   disfrazan de texto normal: si alguien publica esto sin revisar, tiene que
   verlo desde el otro lado del cuarto. */
.pendiente {
  display: block;
  margin: var(--s2) 0 0;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.pendiente strong { color: var(--ink); font-family: Archivo, sans-serif; }

/* Aviso de estado del documento, arriba del cuerpo. */
.aviso {
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.aviso p:first-child { margin-top: 0; }

.legal__pie {
  background: var(--deep-ink); color: var(--on-deep-soft);
  padding-block: var(--s4); font-size: var(--step--1);
}
.legal__pie a { color: var(--on-deep-soft); }
.legal__pie a:hover { color: var(--surface); }
.legal__pie ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.legal__pie li { margin-top: 0; }