/* Estilos de las tres páginas legales — about, terms, privacy.
 *
 * Reemplazan al compilador de Tailwind que estas páginas cargaban desde un CDN
 * y configuraban en línea con la paleta vieja (#16323F petróleo, #D4923B
 * ámbar). Son 64 clases distintas en total, así que escribirlas a mano cuesta
 * menos que arrastrar un compilador de CSS al navegador de cada visitante — y
 * de paso saca la última dependencia de terceros del sitio.
 *
 * Los NOMBRES de clase se conservan tal cual para no tocar 481 usos repartidos
 * en tres documentos aprobados por Meta: el contenido de estas páginas no se
 * modifica, solo su capa de marca. Lo que cambia es a qué color apunta cada
 * nombre. La equivalencia queda abajo, porque «petroleo» ya no es petróleo.
 *
 *   bg-paper        → hueso    #F4F1EA   (era #FAF8F5)
 *   text-ink        → navy     #1C3255   (era #1C1A17)
 *   text-petroleo   → navy     #1C3255   (era #16323F)
 *   text-sand-*     → grises con tinte navy, la rampa apagada
 *   border-sand-200 → #DCD9D0
 *
 * Tipografía: Nunito Sans en los dos roles. La marca no tiene familia de
 * titulares aparte —una sola familia, los títulos se diferencian por peso
 * (`frontend/src/app/layout.tsx`)— así que `font-display` y `font-sans`
 * apuntan a la misma y `font-display` queda solo para no tocar el marcado.
 */

:root {
  --hueso: #f4f1ea;
  --navy: #1c3255;
  --navy-hover: #122544;
  --rule: #dcd9d0;
  --muted-400: #8a93a0;
  --muted-500: #616978;
  --muted-600: #5a6476;
  --muted-700: #3e4c63;
  --fuente: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html { font-family: var(--fuente); }

body {
  margin: 0;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

/* ── color y tipografía ─────────────────────────────────────────────────── */
.bg-paper       { background: var(--hueso); }
.text-ink       { color: var(--navy); }
.text-petroleo  { color: var(--navy); }
.text-sand-400  { color: var(--muted-400); }
.text-sand-500  { color: var(--muted-500); }
.text-sand-600  { color: var(--muted-600); }
.text-sand-700  { color: var(--muted-700); }
.antialiased    { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-sans,
.font-display   { font-family: var(--fuente); }
.font-medium    { font-weight: 600; }
/* 725 es el peso de titulares fijado en la etapa 5 del change `landing-rebuild`:
   Nunito Sans es variable de 200 a 1000, así que no hay que redondear a 700. */
.font-semibold  { font-weight: 725; }

.text-sm    { font-size: .875rem; line-height: 1.5; }
.text-base  { font-size: 1rem; }
.text-xl    { font-size: 1.25rem; line-height: 1.35; }
.text-3xl   { font-size: 1.875rem; line-height: 1.18; }
.leading-relaxed { line-height: 1.75; }
.tracking-\[-0\.01em\] { letter-spacing: -.01em; }
.tracking-\[-0\.02em\] { letter-spacing: -.02em; }

/* ── enlaces ────────────────────────────────────────────────────────────── */
a { color: inherit; }
.underline           { text-decoration: underline; }
.underline-offset-2  { text-underline-offset: 2px; }
.transition-colors   { transition: color .15s ease, background-color .15s ease; }
.hover\:no-underline:hover        { text-decoration: none; }
.hover\:text-ink:hover            { color: var(--navy); }
.hover\:text-petroleo-700:hover   { color: var(--navy-hover); }

/* Foco visible: la página vieja no lo declaraba y el contorno por defecto se
   pierde sobre hueso. Mismo verde que usa la landing. */
a:focus-visible { outline: 3px solid #00695b; outline-offset: 3px; border-radius: 4px; }

/* ── maquetación ────────────────────────────────────────────────────────── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.hidden       { display: none; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-7   { gap: 1.75rem; }
.gap-x-2 { column-gap: .5rem; }
.gap-y-1 { row-gap: .25rem; }

.mx-auto    { margin-left: auto; margin-right: auto; }
.max-w-3xl  { max-width: 48rem; }
.w-auto     { width: auto; }
.h-6        { height: 1.5rem; }

.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-8  { padding-top: 2rem; }

.mt-3  { margin-top: .75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-5  { margin-bottom: 1.25rem; }

.space-y-2  > * + * { margin-top: .5rem; }
.space-y-8  > * + * { margin-top: 2rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }

.border-b { border-bottom: 1px solid transparent; }
.border-t { border-top: 1px solid transparent; }
.border-sand-200 { border-color: var(--rule); }

.list-disc   { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* h1/h2 traen margen propio del navegador y acá el espaciado lo dan las
   utilidades `mt-*`; sin esto el ritmo se descuadra. */
h1, h2, h3, p, ul { margin: 0; }
ul { padding-left: 0; }

/* ── a partir de 640px ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:h-7      { height: 1.75rem; }
  .sm\:inline   { display: inline; }
  .sm\:py-20    { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:text-lg  { font-size: 1.125rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 1.3; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 1.14; }
}

/* ── Aviso de cookies (CS-619) ─────────────────────────────────────────────
   Bloque DUPLICADO a propósito en site.css y legal.css. Las dos hojas no
   comparten vocabulario —--bone vs --hueso, --ink-3 vs --muted-500— y el aviso
   tiene que verse igual en las cinco páginas. Si tocás uno, tocá el otro.
   El `var(--x, valor)` de cada línea existe para eso: toma el token de la hoja
   que lo tenga y cae al literal en la que no.

   Fondo BLANCO y no hueso, y no es estética: sobre blanco las dos tintas
   despejan 4,5:1 (#5F6776 → 5,69 · #616978 → 5,53), y esquiva la trampa de
   --bone-2, donde #616978 cae a 4,48. Medido el 2026-09-24 aplicando la
   fórmula de WCAG sobre los hex — no con getComputedStyle, que devuelve los
   colores como lab() y da ratios basura.

   404.html no lo lleva: no carga ninguna hoja, y quedó fuera del alcance del
   píxel (sin cookie no hay nada que avisar). El markup lo genera pixel.js. */
.aviso{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 18px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1px solid var(--border,var(--rule,#DCD9D0));
  box-shadow:0 -4px 16px rgba(28,50,85,.08)}
.aviso-txt{margin:0;max-width:74ch;font-size:.9rem;line-height:1.5;
  color:var(--ink-3,#616978)}
.aviso-txt a{color:var(--navy,#1C3255);text-decoration:underline;
  text-underline-offset:2px}
.aviso-btn{flex-shrink:0;font:inherit;font-size:.9rem;font-weight:600;
  padding:9px 20px;border:0;border-radius:10px;cursor:pointer;
  background:var(--navy,#1C3255);color:#F4F1EA}
.aviso-btn:hover{background:var(--navy-deep,var(--navy-hover,#132340))}
/* El foco visible es obligatorio y acá el navy sobre blanco mide 12,83:1,
   muy por encima del 3:1 que pide un indicador de foco. */
.aviso-btn:focus-visible,.aviso-txt a:focus-visible{
  outline:2px solid var(--navy,#1C3255);outline-offset:2px}

@media (prefers-reduced-motion:no-preference){
  .aviso{animation:aviso-in .28s cubic-bezier(.22,.68,.28,1) both}
  @keyframes aviso-in{from{transform:translateY(100%)}to{transform:none}}
}