/* ============================================================
   TOKENS — El "panel de control" visual de toda la página.
   Todo lo que se ve (colores, tamaños, espacios) se define aquí.
   Cambiar un valor acá lo cambia en TODA la página de una vez.

   PALETA CÁLIDA (26-07-2026). Reemplazó a la anterior de grafito
   y ámbar, que era casi idéntica a la de otros sitios del rubro
   —fondo oscuro azulado más dorado— y por eso se leía genérica.
   Acá el papel es crema, el acento es terracota y las franjas
   son verde salvia. Los tres son colores de tierra: pocas
   empresas de servicios los usan y ninguna competencia local.
   ============================================================ */

:root {

  /* --- COLORES DE MARCA ---
     El logo WEW es blanco y negro, así que no impone color:
     conviven bien tanto la terracota como el verde. */
  --color-primario:        #20211E;  /* tinta: titulares y texto fuerte */
  --color-primario-oscuro: #000000;  /* el mismo al pasar el mouse */
  --color-superficie:      #3E5245;  /* verde salvia oscuro: franjas y pie */
  --color-superficie-alt:  #4E6152;  /* salvia un punto más claro */
  --color-acento:          #B4503A;  /* terracota: botones y detalles */
  --color-acento-oscuro:   #96412E;  /* terracota al pasar el mouse */
  --color-acento-claro:    #E2A98C;  /* terracota sobre fondos oscuros */
  --color-salvia:          #4E6152;  /* verde de apoyo sobre fondo claro */

  /* --- COLORES NEUTROS ---
     El fondo NO es blanco. Un crema muy claro baja el brillo de la
     pantalla, hace que el negro no vibre y le da temperatura a todo
     sin que se note que hay un color puesto. */
  --color-texto:     #20211E;  /* texto principal */
  --color-texto-sec: #6B665E;  /* texto secundario (no aclarar más) */
  --color-fondo:     #FBF7F1;  /* crema: el papel de la página */
  --color-fondo-alt: #F4EDE3;  /* crema un tono más cargado, para alternar */
  --color-tarjeta:   #FFFDFA;  /* casi blanco: cajas que flotan sobre el crema */
  --color-borde:     #E8DFD2;
  --color-exito:     #3E7A52;  /* mensajes de "todo salió bien" */
  --color-error:     #B03A28;  /* mensajes de error */

  /* --- TIPOGRAFÍAS ---
     Los archivos viven en la carpeta fuentes/ y se declaran en
     css/fuentes.css. No se piden a Google en cada visita: así la
     página carga igual de rápido aunque Google falle, y nadie
     fuera de acá se entera de quién te visita.

     La serif se usa SOLO en cursiva y en palabras sueltas dentro
     de un titular. Es el acento de la casa; si se usa para
     párrafos enteros pierde todo el efecto. */
  --fuente-titulos: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --fuente-texto:   'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --fuente-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* --- TAMAÑOS DE TEXTO ---
     Los que dicen clamp() se achican y agrandan solos según la pantalla. */
  --texto-sm:   0.9rem;
  --texto-base: 1rem;      /* texto normal: 16px, nunca menos */
  --texto-lg:   1.125rem;
  --texto-xl:   clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);   /* subtítulos */
  --texto-2xl:  clamp(1.70rem, 1.3rem + 2.0vw, 2.50rem);   /* títulos de sección */
  --texto-3xl:  clamp(2.10rem, 1.5rem + 3.2vw, 3.50rem);   /* título principal */

  /* --- ESPACIOS ---
     Se usan SOLO estos valores, para que todo quede parejo. */
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;

  /* --- ESQUINAS REDONDEADAS ---
     Más generosas que antes: es lo que hace que las cajas se sientan
     amables en vez de recortadas. */
  --radio-sm:   10px;
  --radio-md:   18px;
  --radio-lg:   24px;
  --radio-full: 999px;   /* forma de píldora */

  /* --- SOMBRAS ---
     En marrón, no en negro. Una sombra gris sobre papel crema se ve
     sucia; en el tono del papel parece luz de verdad. */
  --sombra-sm: 0 1px 2px rgba(70, 48, 26, .06);
  --sombra-md: 0 6px 18px -8px rgba(70, 48, 26, .18);
  --sombra-lg: 0 18px 44px -28px rgba(70, 48, 26, .45);

  /* --- LAYOUT --- */
  --ancho-max:   1200px;   /* ancho máximo del contenido */
  --alto-nav:    72px;
  --transicion:  180ms ease;
}