/* ═══════════════════════════════════════════════════════════
   DELGON Panificados — design tokens + base
   ─────────────────────────────────────────────────────────
   Paleta cálida pero CALMA: crema suave, marrón horneado sobrio.
   Minimalista: poco ruido, sombras tenues, mucho aire.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Color ─── */
  --bg:        #FAF8F3;   /* crema muy suave (fondo) */
  --bg-2:      #F2EEE6;   /* crema apenas más profundo */
  --paper:     #FFFFFF;   /* tarjetas */
  --ink:       #23201B;   /* texto principal */
  --ink-2:     #5C564D;   /* texto secundario */
  --muted:     #9A9388;   /* texto silenciado */
  --crust:     #7A5230;   /* marrón horneado (acento, uso medido) */
  --crust-d:   #5E3E22;   /* marrón oscuro (hover) */
  --gold:      #B07A3F;   /* caramelo (detalles puntuales) */
  --gold-l:    rgba(176,122,63,0.10);
  --border:    #ECE7DD;   /* línea muy suave */
  --shadow:    rgba(35,32,27,0.05);
  --shadow-lg: rgba(35,32,27,0.10);
  --wa:        #25D366;   /* verde WhatsApp */
  --wa-d:      #1ebe5a;
  --out:       #A8463B;   /* error / agotado */

  /* ─── Tipografía ─── */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, Arial, sans-serif;

  /* ─── Medidas ─── */
  --maxw: 1120px;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: clamp(16px, 2.6vw, 26px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  width: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.14; margin: 0; letter-spacing: -0.01em; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.container--narrow { max-width: 760px; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ─── Botones (flat, sin ruido) ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }

.btn--solid { background: var(--crust); color: #fff; }
.btn--solid:hover { background: var(--crust-d); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--crust); color: var(--crust); }

.btn--wa { background: var(--wa); color: #fff; width: 100%; }
.btn--wa:hover { background: var(--wa-d); }

.btn--lg { padding: 15px 28px; font-size: 16px; }

/* ─── Reveal on scroll ─── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}