/* ============================================================
   DOS LOBOS · PROVISIONES — Design Tokens v1.0
   ------------------------------------------------------------
   Dos Lobos Web Design System
   Adaptación digital del manual de marca de Agalla.
   Paleta extraída de "Identidad visual 2 LOBOS.pdf" (pág. 7).

   USO: <link rel="stylesheet" href="design-system/tokens.css">
   Importar en TODAS las páginas de doslobos.cl antes de
   cualquier hoja de estilos propia.

   TIPOGRAFÍA — nota de sustitución:
   La fuente display de marca es "Oaxaca" (propietaria).
   Mientras no estén los archivos .otf/.ttf se sustituye por:
     · Display / titulares -> Montserrat 700–900  [SUSTITUTO]
     · Cuerpo / UI         -> Hanken Grotesque 400–700
   Al recibir Oaxaca: declarar @font-face aquí y cambiar
   --font-display. Nada más se toca.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Hanken+Grotesque:wght@400;500;600;700&display=swap');

:root {
  /* ---------- PALETA DE MARCA (manual Agalla, pág. 7) ---------- */
  --olive:       #535b40;  /* PRINCIPAL — wordmark, botones, fondos hero */
  --olive-700:   #434a34;  /* hover / pressed / tinta sobre crema */
  --olive-300:   #8a9072;  /* tinte suave, iconografía secundaria */
  --navy:        #1a355b;  /* SECUNDARIO papelería — acentos, badges fríos */
  --navy-700:    #142a49;  /* hover navy */
  --mauve:       #9b827d;  /* APOYO merchandising — usar con moderación */
  --purple:      #66509c;  /* SECUNDARIO nuevos productos — solo acento */
  --sage:        #8daab0;  /* TERCIARIO — badges "nuevo", fondos suaves */
  --cream:       #fcead3;  /* crema de marca — fondos cálidos, chips */

  /* ---------- NEUTROS (papel cálido, nunca blanco frío) ---------- */
  --paper:       #fbf6ee;  /* fondo de página por defecto */
  --paper-2:     #f3ead9;  /* superficie alternativa / franjas */
  --card:        #ffffff;  /* superficie de tarjetas */
  --kraft:       #c9a87c;  /* nota rústica ocasional (bolsas kraft) */
  --ink:         #2c3026;  /* texto principal — negro oliva, nunca #000 */
  --ink-2:       #5a6150;  /* texto secundario */
  --ink-3:       #8b9082;  /* texto atenuado / captions */
  --line:        #e4dbca;  /* borde hairline sobre papel */
  --line-2:      #d6cab2;  /* borde hairline más marcado */

  /* ---------- SEMÁNTICOS ---------- */
  --bg:          var(--paper);
  --surface:     var(--card);
  --primary:     var(--olive);
  --primary-ink: #ffffff;
  --accent:      var(--navy);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-2);
  --focus:       #7d8a5a;             /* anillo de foco accesible */
  --focus-ring:  0 0 0 3px rgba(125,138,90,.28);
  --success:     #4a7c46;
  --warning:     #b07c2e;
  --error:       #a8442e;
  --wa:          #25d366;             /* solo para el glifo oficial WhatsApp si se requiere */

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: 'Montserrat', system-ui, sans-serif;       /* sustituto de Oaxaca */
  --font-body:    'Hanken Grotesque', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escala fluida (mobile-first) */
  --t-display:   clamp(2.75rem, 6vw, 5rem);
  --t-h1:        clamp(2rem, 4vw, 3.25rem);
  --t-h2:        clamp(1.5rem, 2.6vw, 2.25rem);
  --t-h3:        1.5rem;
  --t-h4:        1.25rem;
  --t-body:      1.0625rem;  /* 17px */
  --t-small:     0.9375rem;  /* 15px */
  --t-caption:   0.8125rem;  /* 13px */
  --t-eyebrow:   0.75rem;    /* 12px — etiqueta espaciada estilo "PROVISIONES" */

  /* ---------- ESPACIADO (base 8pt) ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- RADIOS ---------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;  /* estadio/píldora — eco del emblema de marca */

  /* ---------- SOMBRAS (cálidas, tinte oliva — nunca gris frío) ---------- */
  --sh-1: 0 1px 2px rgba(44,48,38,.06), 0 1px 3px rgba(44,48,38,.08);
  --sh-2: 0 4px 12px rgba(44,48,38,.08), 0 2px 4px rgba(44,48,38,.06);
  --sh-3: 0 12px 32px rgba(44,48,38,.12), 0 4px 8px rgba(44,48,38,.06);

  /* ---------- MOVIMIENTO (calmo, "pasar la página") ---------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur:  .22s;

  /* ---------- LAYOUT ---------- */
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
}

img, svg { max-width: 100%; display: block; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

::selection { background: var(--olive); color: #fff; }

/* ============================================================
   TIPOGRAFÍA SEMÁNTICA
   ============================================================ */
.ds-display {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--t-display); line-height: .98;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
h1, .ds-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-h1); line-height: 1.04;
  letter-spacing: -.015em; color: var(--ink); margin: 0 0 .5em;
}
h2, .ds-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-h2); line-height: 1.08;
  letter-spacing: -.01em; color: var(--ink); margin: 0 0 .5em;
}
h3, .ds-h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h3); line-height: 1.15; color: var(--ink); margin: 0 0 .4em;
}
h4, .ds-h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.25; color: var(--ink); margin: 0 0 .4em;
}
p { margin: 0 0 1em; }
.ds-small   { font-size: var(--t-small);   line-height: 1.5;  color: var(--ink-2); }
.ds-caption { font-size: var(--t-caption); line-height: 1.45; color: var(--ink-3); }

/* Eyebrow — la firma tipográfica de la marca ("PROVISIONES") */
.ds-eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: .32em;
  text-transform: uppercase; color: var(--olive); margin: 0 0 .75em;
}
.ds-eyebrow--navy  { color: var(--navy); }
.ds-eyebrow--cream { color: var(--cream); }

a { color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   COMPONENTES NÚCLEO
   ============================================================ */

/* ---- Botones ---- */
.btn {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .02em; border-radius: var(--r-pill);
  padding: 13px 24px; border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; line-height: 1;
  transition: all var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary   { background: var(--olive); color: #fff; }
.btn--primary:hover { background: var(--olive-700); color: #fff; }
.btn--secondary { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn--secondary:hover { background: var(--olive); color: #fff; }
.btn--navy      { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }
.btn--wa        { background: var(--olive); color: #fff; }   /* WhatsApp: glifo oficial, pill oliva */
.btn--wa:hover  { background: var(--olive-700); color: #fff; }
.btn--ghost     { background: transparent; color: var(--ink); }
.btn--ghost:hover { color: var(--olive); }
.btn--sm        { padding: 9px 16px; font-size: 13px; }
.btn--lg        { padding: 16px 32px; font-size: 15px; }
.btn--block     { width: 100%; justify-content: center; }
.btn[disabled]  { opacity: .45; pointer-events: none; }

/* ---- Badges / chips ---- */
.tag {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; border-radius: var(--r-pill);
  padding: 7px 14px; display: inline-flex; align-items: center; gap: 7px;
}
.tag--solid { background: var(--olive); color: #fff; }
.tag--navy  { background: var(--navy);  color: #fff; }
.tag--sage  { background: var(--sage);  color: var(--navy-700); }
.tag--out   { background: transparent;  color: var(--olive); border: 1.5px solid var(--olive); }
.tag--cream { background: var(--cream); color: var(--olive-700); border: 1px solid var(--line-2); }
.tag .dot   { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- Formularios ---- */
.field label {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 6px; display: block; letter-spacing: .01em;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: 12px 14px; outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--olive); box-shadow: var(--focus-ring);
}
.field input[aria-invalid="true"] { border-color: var(--error); }
.field .hint  { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.field .error { font-size: 12.5px; color: var(--error); margin-top: 5px; }

/* ---- Tarjetas ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card--hover:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }

/* ---- Banda de olas (motivo de marca) ----
   Uso: divisor de secciones, pie de página, borde de tarjeta.
   Dos tonos: oliva/crema, navy/kraft, blanco/oliva. NUNCA wallpaper. */
.wave-band {
  height: 64px; color: var(--olive);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 15 0 30 10 T 60 10 T 90 10 T 120 10' fill='none' stroke='%23535b40' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 120px 20px; background-repeat: repeat;
}
.wave-band--navy-on-cream {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 15 0 30 10 T 60 10 T 90 10 T 120 10' fill='none' stroke='%231a355b' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-color: var(--cream);
}
.wave-band--white-on-olive {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 15 0 30 10 T 60 10 T 90 10 T 120 10' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-color: var(--olive);
}

/* ---- Contenedor ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Overlay legible sobre fotografía hero ---- */
.hero-wash--olive { background: rgba(67,74,52,.78); }
.hero-wash--navy  { background: rgba(20,42,73,.78); }

/* ---- Utilidades de fondo ---- */
.bg-paper  { background: var(--paper); }
.bg-paper2 { background: var(--paper-2); }
.bg-cream  { background: var(--cream); }
.bg-olive  { background: var(--olive); color: #fff; }
.bg-navy   { background: var(--navy);  color: #fff; }

/* ---- Movimiento de entrada (usar con IntersectionObserver) ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}