/* ==========================================================================
   Trazos Creativos — variables del tema
   Cambiando solo estos valores el sitio toma otra personalidad.
   Paleta tomada del diseño de Readdy (OKLCH convertida a hex).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Manrope:wght@300..800&display=swap');

:root{
  /* --- Paleta Trazos --- */
  --tz-fondo:        #fcfcf9;   /* crema de fondo */
  --tz-fondo-100:    #f7f6f1;
  --tz-fondo-200:    #eeede7;   /* bordes suaves */
  --tz-verde:        #7bb140;   /* verde principal */
  --tz-verde-claro:  #96ca62;
  --tz-verde-300:    #b1dc88;
  --tz-verde-osc:    #639030;
  --tz-verde-700:    #4c7024;
  --tz-verde-900:    #25380e;
  --tz-verde-950:    #132005;   /* fondo del pie */
  --tz-dorado:       #e6aa39;   /* acento dorado */
  --tz-dorado-claro: #f1b84d;
  --tz-dorado-osc:   #c88d24;
  --tz-tinta:        #0b0a07;   /* fondo de la cabecera (casi negro) */
  --tz-tinta-900:    #171612;   /* texto principal */
  --tz-tinta-800:    #292823;
  --tz-gris:         #7b7974;   /* texto suave */

  /* --- Alias que usan el núcleo y los plugins del sistema --- */
  --color-principal:       var(--tz-verde);
  --color-principal-claro: var(--tz-verde-claro);
  --color-acento:          var(--tz-dorado);
  --color-texto:           var(--tz-tinta-900);
  --color-texto-suave:     var(--tz-gris);
  --color-fondo:           var(--tz-fondo);
  --color-fondo-suave:     var(--tz-fondo-100);
  --color-borde:           var(--tz-fondo-200);
  --color-enlace:          var(--tz-verde-osc);

  /* --- Tipografía --- */
  --fuente-texto:   'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;

  --texto-base: 17px;
  --alto-linea: 1.7;

  /* --- Medidas --- */
  --ancho-maximo:    1240px;
  --espacio:         20px;
  --espacio-seccion: 64px;
  --radio:           8px;
  --radio-grande:    14px;
  --sombra:          0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --sombra-media:    0 10px 30px rgba(16,24,40,.10);

  /* --- Altura de la cabecera fija (la usan plugins y plantillas) --- */
  --alto-cabecera: 76px;
}

@media (min-width: 768px){
  :root{ --alto-cabecera: 88px; }
}