/* ============================================================
   La Caravedo — tokens (Capa 1 FIJA). Reescrito para hablar el
   lenguaje visual real del sitio: duotono espresso/crema, Montserrat
   en pesos ligeros con tracking amplio, Baskervville serif para
   titulares de campaña, esquinas rectas, paneles planos, ornamentos
   de grabado. Sin pills, sin sombras suaves, sin look de plantilla IA.
   ============================================================ */

/* ---- Tipografías locales (offline) ---- */
@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap; src: url("fonts/montserrat-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Baskervville"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/baskervville-400.woff2") format("woff2"); }
@font-face { font-family: "Baskervville"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/baskervville-400-italic.woff2") format("woff2"); }

:root {
  /* Color de marca (fijo) */
  --espresso: #24211e;
  --ink: #24211e;
  --cream: #f7f2ec;          /* crema cálida (como el fondo real del sitio) */
  --cream-2: #fbf9f7;
  --beige: #efe9e2;
  --panel: #f1ece4;          /* panel plano de producto, como "NUESTRAS MARCAS" */
  --sand: #dcd5ce;
  --sand-2: #cabfb2;         /* taupe para hairlines */
  --accent: #ff732f;         /* naranja: hairline / marca puntual, NO botones grandes */
  --white: #ffffff;
  --gray-600: #6c655d;
  --gray-700: #4a443d;

  /* Acento de campaña (Capa 2: lo pisa el config) */
  --accent-2: #1f5d52;       /* Día del Padre 2026 = verde botella */
  --accent-2-soft: rgba(31, 93, 82, 0.10);

  /* Tipografía */
  --serif: "Baskervville", "Georgia", "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: var(--sans);
  --fs-display: clamp(2.6rem, 5vw, 4.4rem);   /* hero serif */
  --fs-h1: clamp(2.1rem, 4vw, 3.2rem);
  --fs-h2: clamp(1.4rem, 2.4vw, 2rem);
  --fs-h3: 1.15rem;
  --fs-body: 1.05rem;
  --fs-small: 0.85rem;
  --fs-overline: 0.72rem;
  --lh-tight: 1.04;
  --lh-normal: 1.6;
  --ls-overline: 0.32em;     /* tracking MUY amplio, firma de la marca */
  --ls-label: 0.22em;
  --ls-display: 0.005em;

  /* Espaciado */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 104px; --space-10: 140px;
  --section-y: clamp(64px, 9vw, 120px);
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Formas: rectas. Sin pills, sin cards redondeadas. */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --hair: 1px solid var(--sand-2);

  /* Motion */
  --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift: 22px;

  /* Foco por superficie */
  --focus-ring: var(--accent-2);
  --focus-ring-on-dark: #e8b48a;

  /* Legales por superficie */
  --legal-fg: var(--gray-600);
  --legal-bg: var(--beige);

  /* Tinte de ornamentos (recolor por filtro). Por defecto espresso. */
  --deco-filter: none;
}

:root[data-theme="c"] {
  --legal-fg: #cbbfae;
  --legal-bg: #2b2723;
  --focus-ring: var(--focus-ring-on-dark);
  --deco-filter: brightness(0) invert(0.88) sepia(0.18);
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titulares de campaña: serif elegante */
h1, .display { font-family: var(--serif); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0; }
h1 em, .display em { font-style: italic; }

/* Títulos de sección: Montserrat en mayúsculas, tracking amplio */
h2, h3 { font-family: var(--sans); margin: 0; }

/* Overline / etiqueta: la firma tipográfica del sitio */
.overline {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gray-600);
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Botones: outline, mayúsculas, tracking. Nada de pills naranjas. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: var(--ls-label);
  padding: 17px 36px; border: 1px solid var(--espresso); border-radius: 0;
  background: transparent; color: var(--espresso); cursor: pointer; text-decoration: none; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--espresso); color: var(--cream); }
.btn-solid { background: var(--espresso); color: var(--cream); }
.btn-solid:hover { background: transparent; color: var(--espresso); }
.btn-lg { padding: 19px 44px; font-size: 0.82rem; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px;
}

.legal-text { font-size: var(--fs-small); color: var(--legal-fg); letter-spacing: 0.02em; }

/* Ornamentos de grabado reales (recoloreables por --deco-filter) */
.deco-diamond { width: 16px; height: auto; filter: var(--deco-filter); opacity: 0.85; }
.deco-filigree { height: 14px; width: auto; filter: var(--deco-filter); opacity: 0.8; }

/* Reveal de entrada */
[data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transition: opacity var(--dur-base) linear; transform: none; }
}