/* ============================================================
   VIVERO MI JARDÍN — main.css
   Variables, reset, tipografía base, contenedor, utilidades
   Estilo: Natural Luxury / Organic Refined
   Fuentes: Playfair Display (display) + DM Sans (body)
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ── */
:root {
  --verde-oscuro:   #1a3a2a;
  --verde-medio:    #2d5a3d;
  --verde-claro:    #4a7c59;
  --verde-suave:    #7aad87;
  --verde-menta:    #b8d9c0;
  --crema:          #f5f0e8;
  --crema-oscura:   #ede5d4;
  --tierra:         #8b6f47;
  --tierra-claro:   #c4a882;
  --blanco:         #ffffff;
  --negro:          #0d1a10;
  --gris-texto:     #4a5568;
  --gris-claro:     #f7f4ef;

  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'DM Sans', sans-serif;

  --sombra-suave:   0 4px 24px rgba(26,58,42,0.08);
  --sombra-media:   0 8px 40px rgba(26,58,42,0.14);
  --sombra-fuerte:  0 16px 64px rgba(26,58,42,0.20);

  --radio:          4px;
  --radio-lg:       12px;
  --transicion:     0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--negro);
  background: var(--blanco);
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Tipografía base ── */
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p  { font-size: 1rem; color: var(--gris-texto); }

/* ── Contenedor ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container--wide { max-width: 1400px; }
.container--narrow { max-width: 860px; }

/* ── Utilidades ── */
.bg-crema { background: var(--crema); }
.bg-gris  { background: var(--gris-claro); }
.text-center { text-align: center; }
.mt-8 { margin-top: 32px; }
.mb-8 { margin-bottom: 32px; }

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
}