/* ============================================
   FERRETERÍA EL BUEN VECINO — base.css
   Identidad visual propia de esta demo
   ============================================ */

:root {
  --color-carbon: #1a1a1a;
  --color-carbon-light: #2b2b2b;
  --color-acero: #5b6472;
  --color-amarillo: #f5c400;
  --color-amarillo-dark: #d9ac00;
  --color-bg-claro: #f5f6f7;
  --color-white: #ffffff;
  --color-text: #2b2e33;
  --color-text-light: #6b7280;
  --color-border: #e3e5e8;

  --font-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(1.9rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --radius: 10px;
  --shadow: 0 6px 20px rgba(35, 38, 43, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  color: var(--color-carbon);
  line-height: 1.2;
  margin: 0 0 var(--space-sm) 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

p { margin: 0 0 var(--space-sm) 0; }

section {
  padding: var(--space-lg) var(--space-md);
  max-width: 1180px;
  margin: 0 auto;
}