/* ==========================================================================
   ELEFONT · Design tokens
   --------------------------------------------------------------------------
   Fuente de verdad visual del sitio. Basado en el manual "Propuesta
   Rediseño Marca Elefont 2026":
     · Blanco 60% (base)  · Negro 30% (contraste)  · Naranjo 10% (acento)
     · Naranjo corporativo: Pantone 7579 C · #DC582A
     · Tipografía: Google Sans
   Cambia aquí un valor y se propaga a todo el sitio.
   ========================================================================== */

:root {
  /* ---- Color: marca ---------------------------------------------------- */
  --c-orange:        #dc582a;   /* Pantone 7579 C — acento (10%) */
  --c-orange-600:    #c24a20;   /* hover / pressed */
  --c-orange-100:    #fbe7df;   /* fondos suaves de acento */
  --c-ink:           #1f2023;   /* negro de marca (30%) */
  --c-ink-900:       #121315;   /* negro profundo para hero/footer */
  --c-white:         #ffffff;   /* blanco (60%) */
  --c-paper:         #f3f3f1;   /* gris papel del manual */

  /* ---- Color: neutros funcionales ------------------------------------- */
  --c-text:          var(--c-ink);
  --c-text-muted:    #5d6066;
  --c-text-invert:   #f5f5f3;
  --c-text-invert-muted: #a7a9ad;
  --c-line:          #e2e2df;
  --c-line-strong:   #c9c9c5;
  --c-line-dark:     #2e3034;

  /* ---- Color: estados ------------------------------------------------- */
  --c-success:       #1f8a4c;
  --c-error:         #c0392b;
  --c-whatsapp:      #25d366;
  --c-whatsapp-600:  #1ebe5a;

  /* ---- Tipografía ----------------------------------------------------- */
  --font-sans: "Google Sans", "Google Sans Text", "Product Sans", "Outfit",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida (min @360px → max @1280px) */
  --fs-xs:   0.8125rem;                                   /* 13px */
  --fs-sm:   0.9375rem;                                   /* 15px */
  --fs-base: 1.0625rem;                                   /* 17px */
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
  --fs-hero: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem);

  --lh-tight: 1.04;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---- Espaciado (escala 4px) ----------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);   /* padding vertical secciones */
  --gutter:    clamp(1rem, 0.5rem + 2.2vw, 2.5rem); /* padding lateral */
  --container: 1240px;
  --container-narrow: 820px;

  /* ---- Forma ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Elevación ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgb(18 19 21 / 0.06), 0 1px 1px rgb(18 19 21 / 0.04);
  --shadow:    0 10px 30px -12px rgb(18 19 21 / 0.18);
  --shadow-lg: 0 30px 60px -20px rgb(18 19 21 / 0.28);

  /* ---- Movimiento ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 700ms;

  /* ---- Capas ---------------------------------------------------------- */
  --z-header: 50;
  --z-float:  60;
  --z-modal:  100;

  --header-h: 72px;
}