/* 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; }
}