/* =========================================================
   VARIABLES (design tokens)
   Cambiá acá colores, tipografías, radios y espacios:
   todo el sitio toma estos valores.
   ========================================================= */
:root {
  /* ---- Colores de marca ---- */
  --c-green:        #5BB947;  /* principal: botones, íconos, destacados */
  --c-green-dark:   #2E7D32;  /* hover y textos verdes chicos (mejor contraste) */
  --c-green-soft:   #EAF6E6;  /* fondos suaves verdes */
  --c-wa:           #25D366;  /* verde oficial de WhatsApp */

  /* ---- Neutros ---- */
  --c-title:   #222222;
  --c-text:    #333333;
  --c-muted:   #6B7280;
  --c-border:  #E2E7DF;
  --c-bg:      #FFFFFF;
  --c-bg-alt:  #F4F6F3;
  --c-bg-deco: #EEF6EA;   /* fondo verde clarito de Productos y Pedido */
  --c-dark:    #1A1E19;
  --c-error:   #D93025;

  /* ---- Tipografía ---- */
  --ff-title: 'Oswald', 'Arial Narrow', sans-serif;
  --ff-body:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:   .8125rem;  /* 13px */
  --fs-sm:   .9375rem;  /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-h3:   1.375rem;
  --fs-h2:   clamp(2rem, 4.2vw, 2.875rem);
  --fs-h1:   clamp(2.5rem, 7vw, 4.75rem);

  /* ---- Formas y sombras ---- */
  --radius:     12px;
  --radius-lg:  20px;
  --radius-pill: 999px;
  --shadow-sm:  0 1px 3px rgba(20, 30, 20, .06), 0 1px 2px rgba(20, 30, 20, .04);
  --shadow:     0 8px 24px rgba(20, 30, 20, .08);
  --shadow-lg:  0 18px 44px rgba(20, 30, 20, .14);

  /* ---- Layout ---- */
  --container:  1160px;
  --gutter:     16px;
  --header-h:   72px;
  --section-y:  clamp(64px, 9vw, 112px);

  /* ---- Movimiento ---- */
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --t-fast:     .2s;
  --t:          .35s;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}