/* ==========================================================
   tokens.css — Sistema de diseño de Cauce
   Fuente de verdad: DESIGN.md. No escribir valores sueltos
   en los mockups: usar siempre estas variables.
   Fuentes (añadir en <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Atkinson+Hyperlegible:wght@400;700&display=swap" rel="stylesheet">
   ========================================================== */

:root {
  /* ---------- Color base ---------- */
  --cal: #FBFAF5;
  --piedra: #ECE8DC;
  --blanco: #FFFFFF;
  --tinta: #0E0F0D;
  --tinta-suave: #4B524F;
  --linea: #D9D5C8;
  --oscuro: #1C1E1B;
  --gris-claro: #B9B5A8;
  --hueco-borde: #9AA39F;

  /* ---------- Marca ---------- */
  --anil: #0F5C55;
  --anil-hondo: #0A413C;
  --albero: #2DD4BF;
  --albero-claro: #EDF8F6;
  --menta: #C8F2EC;
  --anil-linea: #2A7A72;           /* separadores dentro de bloques --anil */

  /* ---------- Productos: acento (bordes, iconos, texto >= 24px) ---------- */
  --p-webs: #0E8F80;
  --p-reviews: #C98A00;
  --p-social: #D9553F;
  --p-team: #2B6CB0;

  /* ---------- Productos: texto (cualquier tamaño, AA sobre claro) ---------- */
  --p-webs-texto: #0B7166;
  --p-reviews-texto: #8A5F00;
  --p-social-texto: #B23A26;
  --p-team-texto: #2B6CB0;

  /* ---------- Estado ---------- */
  --error: #B42318;                 /* texto, borde e icono de error */
  --error-claro: #FDECEA;           /* fondo del campo con error */
  --aviso: #8C4100;                 /* teja: plazo que se acerca (texto, icono, raya); siempre con icono y texto */
  --aviso-claro: #FAEDD2;           /* fondo del chip de aviso */
  --hecho: #4E6B13;                 /* aceituna: lo resuelto (texto, icono) */
  --hecho-claro: #EAF0D6;           /* fondo del chip de hecho */
  --velo: color-mix(in srgb, var(--tinta) 50%, transparent);  /* detrás de hojas y diálogos */

  /* ---------- Tipografía ---------- */
  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --t-display: clamp(2.4rem, 5vw, 3.75rem);
  --t-h2: clamp(2rem, 3.6vw, 2.75rem);
  --t-h3-grande: 1.6rem;
  --t-h3: 1.35rem;
  --t-cifra: 3.5rem;
  --t-cifra-media: 2.1rem;
  --t-lead: 1.25rem;
  --t-sub: 1.12rem;
  --t-base: 1.0625rem;
  --t-peq: 0.9rem;
  --t-micro: 0.8125rem; /* 13px: mínimo absoluto */

  --lh-titulo: 1.05;
  --lh-texto: 1.55;
  --ls-titulo: -0.02em;
  --ls-marca: -0.03em;
  --ls-mayus: 0.04em;

  --medida-titulo: 22ch;
  --medida-texto: 56ch;

  /* ---------- Espaciado (base 4px) ---------- */
  --e-1: 0.25rem;   /* 4 */
  --e-2: 0.5rem;    /* 8 */
  --e-3: 0.75rem;   /* 12 */
  --e-4: 1rem;      /* 16 */
  --e-5: 1.25rem;   /* 20 */
  --e-6: 1.5rem;    /* 24 */
  --e-8: 2rem;      /* 32 */
  --e-10: 2.5rem;   /* 40 */
  --e-12: 3rem;     /* 48 */
  --e-16: 4rem;     /* 64 */
  --e-18: 4.5rem;   /* 72 */
  --e-20: 5rem;     /* 80 */

  /* ---------- Layout ---------- */
  --ancho: 1120px;
  --margen: var(--e-5);
  --seccion: var(--e-18);
  --seccion-movil: var(--e-12);
  --hueco-rejilla: var(--e-6);

  /* ---------- Forma ---------- */
  --r-chip: 8px;
  --r-hueco: 12px;
  --r-tarjeta: 16px;
  --r-bloque: 20px;
  --r-plan: 24px;
  --r-pill: 999px;

  --borde: 1px solid var(--linea);
  --borde-fuerte: 2px solid var(--tinta);

  /* ---------- Interacción ---------- */
  --foco: 3px solid var(--anil);            /* fondos claros */
  --foco-oscuro: 3px solid var(--albero);   /* fondos --tinta, --anil, --oscuro */
  --foco-sep: 3px;
  --toque-min: 44px;
  --transicion: 150ms ease;
}

/* ---------- Base mínima (opcional en cada mockup) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  text-wrap: balance;
  font-family: var(--f-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: 800;
  margin: 0;
}
p { margin: 0; }
a { color: var(--anil); }
a:hover { color: var(--anil-hondo); }
:focus-visible { outline: var(--foco); outline-offset: var(--foco-sep); }
/* Secciones y bloques de fondo oscuro: marcar el contenedor con data-fondo="oscuro" */
[data-fondo="oscuro"] :focus-visible { outline: var(--foco-oscuro); }
/* Táctil: sin retraso de doble toque ni resaltado azul; a cambio, estado :active visible */
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:active, .btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button:active, .btn:active { transform: none; opacity: 0.8; }
}