/* ===========================================================================
   Clínica Dental Mª Cristina Sagarzazu — Design tokens & base
   Aesthetic lane: "Familiar Warmth" (adopted 2026-07-26, see docs/DESIGN.md)
   — warm cream ground, white cards, one deep teal for action + a sparing gold
   accent, warm charcoal text. Raleway + Source Sans 3. Hex palette (was OKLCH).
   ========================================================================= */

:root {
  /* ---- Color ---- */
  --bg:           #f0eae0;   /* warm cream — page ground */
  --surface:      #faf6ef;   /* warm near-white — bands, chips, input fills */
  --surface-warm: #efe7db;   /* warm deeper band */
  --surface-deep: #e8e0d3;   /* warmest band / recessed */
  --ink:          #262721;   /* warm charcoal — headings, strong text */
  --ink-soft:     #54514a;   /* body, secondary text */
  --brand:        #006763;   /* deep teal — buttons, links, active, focus */
  --brand-deep:   #004b47;   /* hover fill, deep accents */
  --brand-tint:   #d7e9e6;   /* soft teal — chips, ghost hover, glow */
  --wood:         #d98e2b;   /* GOLD accent — kicker ticks, star fills, underbars */
  --wood-deep:    #b0701d;   /* kicker text, gold hover */
  --mint:         #8dc6ac;   /* semantic only: "abierto ahora", success */
  --mint-deep:    #327860;
  --line:         #e4ddd0;   /* warm hairline */
  --line-soft:    #ece5d8;
  --white:        #ffffff;   /* cards popping on cream */

  /* soft ambient shadows — warm charcoal, low opacity, large blur (B "tactile") */
  --shadow-color: 35 22% 20%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 2px 8px hsl(var(--shadow-color) / 0.04);
  --shadow-md: 0 6px 20px hsl(var(--shadow-color) / 0.07), 0 2px 6px hsl(var(--shadow-color) / 0.05);
  --shadow-lg: 0 20px 54px hsl(var(--shadow-color) / 0.11), 0 6px 16px hsl(var(--shadow-color) / 0.07);
  --shadow-glow: 0 10px 40px oklch(0.70 0.13 65 / 0.22);

  /* ---- Type ---- */
  --font-display: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.8vw, 2rem);
  --step-3:  clamp(1.8rem, 1.55rem + 1.3vw, 2.7rem);
  --step-4:  clamp(2.2rem, 1.8rem + 2vw, 3.6rem);
  --step-5:  clamp(2.6rem, 2rem + 3vw, 5.5rem);

  /* ---- Space (fluid) ---- */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.65rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-s:   clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  --space-m:   clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --space-l:   clamp(2.4rem, 2rem + 2vw, 3.6rem);
  --space-xl:  clamp(3.5rem, 2.8rem + 3.5vw, 6rem);
  --space-2xl: clamp(5rem, 3.8rem + 6vw, 9rem);

  --maxw: 1200px;
  --maxw-narrow: 760px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* quint-ish */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;

  /* ---- Z-scale ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-loader: 500;
  --z-toast: 600;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; max-width: 68ch; }
strong, b { font-weight: 700; }

.font-sans { font-family: var(--font-sans); }
.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; font-weight: 400; }

/* ---- Layout primitives ---- */
.wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, var(--maxw-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.stack > * + * { margin-top: var(--flow, 1.2em); }
.center-text { text-align: center; }

/* eyebrow used sparingly & deliberately (named brand system: the "kicker"),
   NOT on every section — paired with a small wood tick */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wood-deep);
}
.kicker::before {
  content: "";
  width: 1.6em; height: 2px;
  background: var(--wood);
  border-radius: 2px;
}

/* ---- Buttons ---- */
.btn {
  --_bg: var(--brand);
  --_fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  min-height: 48px;
  border-radius: var(--radius-s);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--_fg);
  background: var(--_bg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-deep);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn:hover::before { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--wood); outline-offset: 3px; }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--wood { --_bg: var(--wood); --_fg: oklch(0.22 0.04 60); }
.btn--wood::before { background: var(--wood-deep); }
.btn--ghost {
  --_fg: var(--brand-deep);
  background: transparent;
  border: 1.5px solid var(--brand);
}
.btn--ghost::before { background: var(--brand-tint); }
.btn--ghost:hover { --_fg: var(--brand-deep); }
.btn--lg { padding: 1.05em 1.9em; font-size: var(--step-1); }

/* ---- Accessibility helpers ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  z-index: var(--z-toast);
  background: var(--ink); color: var(--white);
  padding: 0.7em 1.2em; border-radius: var(--radius-s);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Reveal (enhances already-visible content; never gates visibility) ---- */
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); }
}

::selection { background: var(--brand-tint); color: var(--brand-deep); }

/* soft grain overlay for warmth (very subtle, decorative) */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}