/* ============================================================
   variables.css — Sistema de diseño (colores, tipografía, etc.)
   Cambiá los valores acá para modificar toda la apariencia
   ============================================================ */

:root {
  /* — Paleta principal — */
  --primary:       #4F9DA6;
  --primary-dark:  #2F6F7A;
  --primary-light: #E8F4F6;

  /* — Fondos y superficies — */
  --bg:      #F8FAFB;
  --surface: #FFFFFF;

  /* — Textos — */
  --text:   #1F2D2F;
  --text-2: #5F6F73;
  --text-3: #9BABAD;

  /* — Bordes — */
  --border: #D6E2E5;

  /* — Acento (botones de acción) — */
  --accent:       #F4A261;
  --accent-hover: #E76F51;

  /* — Precio — */
  --price-color: #1F5C63;

  /* — Radios — */
  --radius-card: 16px;
  --radius-btn:  50px;

  /* — Sombras — */
  --shadow-sm:     0 1px 3px rgba(47,111,122,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card:   0 2px 8px rgba(47,111,122,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-hover:  0 12px 32px rgba(47,111,122,.14), 0 4px 8px rgba(0,0,0,.06);
  --shadow-accent: 0 4px 14px rgba(244,162,97,.45);

  /* — Tipografías — */
  --font-head: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* — Transición global — */
  --transition: .2s cubic-bezier(.4,0,.2,1);
}