/* ═══════════════════════════════════════════════════════════════════════════
   LEGALES — hoja compartida por terminos.html y privacidad.html
   Etapa 6 del rebrand. Ver CLAUDE.md 13.23.

   Existe como archivo aparte, y no como un <style> adentro de cada página,
   porque las dos páginas tienen EXACTAMENTE el mismo marco (encabezado, cuerpo
   del documento y pie). Con dos copias, cualquier arreglo futuro hay que
   hacerlo dos veces y la segunda es la que alguien se olvida.

   NO se toca socorrista.css: esa hoja la cargan las 19 pantallas del proyecto
   y estas reglas sólo le sirven a dos.

   OJO: acá NO hay ninguna regla de links tipo `a:hover { color: … }` suelta.
   El estilo de links ya viene de socorrista.css con `:not(.btn)`, y una regla
   genérica le pintaría de rojo el texto a los botones rojos — la trampa
   documentada en CLAUDE.md 13.6b, que ya reapareció dos veces.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── encabezado ─────────────────────────────────────────────────────────────
   Mismo encabezado pegajoso que la landing, pero sin navegación: desde un
   legal la única acción razonable es volver. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.header-row { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span {
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  letter-spacing: -0.02em; line-height: 1;
}
/* El botón nunca se parte en dos renglones ni se deja apretar por la marca:
   a 375px, marca + botón entero suman ~360px contra 343 de contenedor, y el
   texto se partía en dos. Por eso además la segunda mitad de la etiqueta
   ("al inicio") sólo aparece de 480px para arriba — ver el bloque responsive. */
.header-row .btn { white-space: nowrap; flex-shrink: 0; }
.solo-ancho { display: none; }

/* ── portada del documento ──────────────────────────────────────────────── */
.legal-head { padding-block: clamp(32px, 6vw, 64px) var(--space-6); }
/* accent-700 y NO el acento pleno: `#DC2626` sobre el fondo `#f3f2f2` da
   4,32:1, por debajo del 4,5:1 que exige WCAG AA para texto chico. El tono 700
   da 6,40:1. Es la regla de CLAUDE.md 13.6a, y la auditoría la volvió a
   levantar acá. Vale para cualquier texto en acento que no sea un título. */
.legal-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 var(--space-3);
}
.legal-head h1 {
  /* `wrap` y no `balance`: socorrista.css le pone `balance` a todos los
     encabezados y el título termina ocupando media caja. El valor es `wrap`,
     NO `normal` — `normal` no existe y el navegador descarta la línea sin
     avisar. Ver CLAUDE.md sección 3. */
  text-wrap: wrap;
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
}
.legal-fecha {
  margin: var(--space-4) 0 0;
  font-size: 13px; color: var(--color-text-faint);
  border-top: 2px solid var(--color-divider);
  padding-top: var(--space-3);
}

/* ── cuerpo del documento ───────────────────────────────────────────────────
   Cada artículo es una fila con línea de 2px arriba: la grilla visible es la
   firma del sistema. En pantalla ancha el número y el título quedan en una
   columna fija a la izquierda y el texto en la otra; en el celular se apilan. */
.legal-doc { padding-bottom: clamp(40px, 8vw, 88px); }
.legal-sec {
  border-top: 2px solid var(--color-divider);
  padding-block: var(--space-6);   /* NO usar --space-5: no existe en la escala (1,2,3,4,6,8). Un var() indefinido descarta la linea entera y el padding queda en 0. */
  display: grid; gap: var(--space-3);
}
.legal-sec:last-child { border-bottom: 2px solid var(--color-divider); }
.legal-sec h2 {
  text-wrap: wrap;
  margin: 0;
  font-size: 20px; line-height: 1.2;
}
.legal-num {
  display: block;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--color-accent-700);   /* mismo motivo que .legal-kicker */
  margin-bottom: var(--space-2);
}
.legal-sec p { margin: 0; max-width: 68ch; }
.legal-sec p + p { margin-top: var(--space-3); }
.legal-sec ul {
  margin: 0; padding-left: 0; list-style: none;
  display: grid; gap: var(--space-2); max-width: 68ch;
}
/* Marcador de raya, el mismo de la lista de rasgos de la tarjeta de curso. */
.legal-sec li { padding-left: 22px; position: relative; }
.legal-sec li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  color: var(--color-accent); font-weight: 600;
}

/* ── pie ────────────────────────────────────────────────────────────────────
   Copia del pie de la landing (index.html). Son dos copias a propósito: el pie
   vive en el <style> de index.html, y moverlo a una hoja compartida obligaría
   a tocar la landing, que ya está publicada y verificada. Si algún día se
   rediseña el pie, hay que cambiarlo en los dos lados. */
.site-footer { background: var(--color-text); color: var(--color-bg); }
.site-footer .brand span { color: var(--color-bg); }
.site-footer h3 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 var(--space-3); color: color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--color-bg); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--color-bg); text-decoration: underline; }
.site-footer .sobre { font-size: 14px; max-width: 34ch; opacity: 0.75; margin: var(--space-3) 0 0; }
.footer-grid { display: grid; gap: var(--space-6); }
.footer-legal {
  border-top: 2px solid color-mix(in srgb, var(--color-bg) 25%, transparent);
  margin-top: var(--space-8); padding-top: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: space-between; font-size: 13px; opacity: 0.75;
}
.footer-legal .avisos { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ── responsive ─────────────────────────────────────────────────────────────
   Este bloque va AL FINAL del archivo. Una media query no suma especificidad:
   si estuviera arriba, cualquier regla de abajo con el mismo peso le ganaría.
   Es la trampa de CLAUDE.md 13.21. */
@media (min-width: 480px) {
  .solo-ancho { display: inline; }
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-8); }
}
@media (min-width: 900px) {
  /* Dos columnas: número + título a la izquierda en ancho fijo, texto a la
     derecha. La columna de texto se lleva TODO el resto del contenedor de
     1280px, pero cada párrafo está topeado en 68ch: el renglón queda en un
     largo legible y sobra aire a la derecha, que es como Modernist reparte
     el espacio (todo alineado a la izquierda, el vacío al final). */
  .legal-sec {
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: var(--space-8);
    padding-block: var(--space-6);
  }
  .legal-sec > .legal-cuerpo { grid-column: 2; }
  /* El título de la portada arranca en la misma x que los títulos de los
     artículos, y su ancho es el de la columna angosta más la de texto. */
  .legal-head h1 { max-width: 22ch; }
}