:root {
  /* Color */
  --color-accent: #3f9b51;
  --color-accent-dark: #347f43;
  --color-accent-cyan: #32c5d8;
  --color-accent-lime: #8dc641;
  --color-text: #212121;
  --color-text-soft: #5a5a5a;
  --color-surface: #e2e2e2;
  --color-surface-soft: #f2f2ef;
  --color-white: #ffffff;
  --color-danger: #c23b3b;
  --color-accent-rgb: 63, 155, 81;
  --color-accent-dark-rgb: 52, 127, 67;

  /* Tipografía */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --header-height: 84px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(33, 33, 33, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(33, 33, 33, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(33, 33, 33, 0.22);
}

/* ==========================================================================
   Sistema de breakpoints del sitio (2026-09-16)

   Antes convivían 3 valores de max-width sin relación entre sí (480px,
   640px y 860px) repartidos entre css/home.css y css/styles.css, elegidos
   caso a caso. Consecuencia real: reglas que deberían cambiar de "modo"
   JUNTAS (ej. el <h1> del hero y el isotipo de 3 hojas, o el banner de
   volumen/hero y el resto del layout mobile de Home) lo hacían en anchos
   distintos, dejando franjas de pantalla con una mezcla inconsistente de
   estados "mobile" y "desktop" a la vez (bug real, visto en ~768px de
   ancho — ver comentarios en .volumen-banner y .hero más abajo).

   Sistema único, dos cortes de max-width, usados en TODO el CSS del sitio:
     - mobile:  hasta 640px
     - tablet:  641px – 1024px  →  @media (max-width: 1024px)
     - desktop: desde 1025px    →  estilos base, sin media query

   No se puede declarar esto como custom properties usables dentro de
   @media (max-width: var(--x)) — no hay soporte nativo de navegador para
   eso todavía y el proyecto no tiene paso de build/PostCSS. Este comentario
   ES la fuente de verdad: cualquier @media nuevo o editado tiene que usar
   640px o 1024px, no un valor suelto.

   Única excepción documentada, a propósito NO migrada: el padding de
   `.nivel-card`/`.nivel-steps` en css/styles.css usa 480px. No es un
   breakpoint de "modo" (no cambia layout/columnas — eso ya lo hace el
   corte de 1024px) sino un ajuste fino de espaciado solo para pantallas de
   teléfono muy angostas, anidado DENTRO del rango mobile (nunca genera una
   franja de estados mezclados como los casos de arriba). Subirlo a 640px
   cambiaría cómo se ve esa card en 481-640px, algo que el pedido de
   unificación de breakpoints pidió explícitamente NO tocar. */