/* ==========================================================================
   Fisiomt — Clínica de Fisioterapia
   Brand foundations: colors, typography, spacing
   --------------------------------------------------------------------------
   Palette derived from the brand symbol (caduceus on green cross with
   orange lightning bolt). Primary identity = clinical green; orange is
   reserved as a high-energy accent (movement, recovery, vitality).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&display=swap');

/* Poppins — local brand files (uploaded by client). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

:root {
  /* --------------------------------------------------------------------
     COLORS · Brand
     -------------------------------------------------------------------- */

  /* Primary green — the dominant brand color (cross + ring) */
  --fm-green-50:  #EAF6EC;
  --fm-green-100: #CFE9D4;
  --fm-green-200: #9CD2A6;
  --fm-green-300: #5FB672;
  --fm-green-400: #2EA34A;
  --fm-green-500: #189838;  /* PRIMARY — used in logo body */
  --fm-green-600: #137A2D;
  --fm-green-700: #0E5C22;
  --fm-green-800: #085828;  /* deep — outline / type on light bg */
  --fm-green-900: #053918;
  --fm-green-950: #021A0B;

  /* Accent orange — the lightning bolt; energy, movement, recovery */
  --fm-orange-50:  #FFF4E5;
  --fm-orange-100: #FFE3BD;
  --fm-orange-200: #FFC477;
  --fm-orange-300: #FFA73E;
  --fm-orange-400: #F89808;  /* PRIMARY accent */
  --fm-orange-500: #DF8606;
  --fm-orange-600: #B66B04;
  --fm-orange-700: #884F02;

  /* Neutrals — warm-leaning grays for clinical-but-human feel */
  --fm-ink-950: #0E1410;  /* near-black, slight green */
  --fm-ink-900: #1A211C;
  --fm-ink-800: #2A332D;
  --fm-ink-700: #424B45;
  --fm-ink-600: #5C655F;
  --fm-ink-500: #7B8480;
  --fm-ink-400: #A4ACA6;
  --fm-ink-300: #C9CFCB;
  --fm-ink-200: #E3E7E4;
  --fm-ink-100: #F0F3F0;
  --fm-ink-50:  #F8FAF8;
  --fm-white:   #FFFFFF;

  /* Semantic — feedback */
  --fm-success: var(--fm-green-500);
  --fm-warning: var(--fm-orange-400);
  --fm-danger:  #C8392E;
  --fm-info:    #2D6FB3;

  /* --------------------------------------------------------------------
     COLORS · Semantic tokens (preferred for application use)
     -------------------------------------------------------------------- */
  --color-bg:           var(--fm-white);
  --color-bg-subtle:    var(--fm-ink-50);
  --color-bg-muted:     var(--fm-ink-100);
  --color-bg-inverse:   var(--fm-green-800);
  --color-bg-brand:     var(--fm-green-500);
  --color-bg-brand-soft: var(--fm-green-50);

  --color-fg:           var(--fm-ink-900);     /* primary text */
  --color-fg-2:         var(--fm-ink-700);     /* secondary text */
  --color-fg-3:         var(--fm-ink-500);     /* tertiary, captions */
  --color-fg-muted:     var(--fm-ink-400);
  --color-fg-on-brand:  var(--fm-white);
  --color-fg-brand:     var(--fm-green-700);   /* brand text on light */
  --color-fg-accent:    var(--fm-orange-500);

  --color-border:       var(--fm-ink-200);
  --color-border-strong: var(--fm-ink-300);
  --color-border-brand: var(--fm-green-200);

  --color-link:         var(--fm-green-700);
  --color-link-hover:   var(--fm-green-800);
  --color-focus-ring:   color-mix(in oklch, var(--fm-green-500) 50%, transparent);

  /* --------------------------------------------------------------------
     TYPOGRAPHY · Families
     --------------------------------------------------------------------
     — Poppins:  OFFICIAL brand display family (provided as TTFs in fonts/).
                 FISIOMT logo wordmark = Poppins Black; tagline = Poppins Regular.
                 Use weights 800/900 for hero, 600/700 for section heads.
     — Mulish:   humanist sans for body & UI (Google Fonts — substitution
                 pending client confirmation; pairs naturally with Poppins).
     -------------------------------------------------------------------- */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Poppins', 'Mulish', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --------------------------------------------------------------------
     TYPOGRAPHY · Scale (1.250 — major third, light editorial rhythm)
     -------------------------------------------------------------------- */
  --fs-12: 0.75rem;   /* 12 — captions, micro labels */
  --fs-14: 0.875rem;  /* 14 — UI small */
  --fs-16: 1rem;      /* 16 — body */
  --fs-18: 1.125rem;  /* 18 — body-lg / lead */
  --fs-20: 1.25rem;   /* 20 — h5 */
  --fs-24: 1.5rem;    /* 24 — h4 */
  --fs-30: 1.875rem;  /* 30 — h3 */
  --fs-36: 2.25rem;   /* 36 — h2 */
  --fs-48: 3rem;      /* 48 — h1 */
  --fs-64: 4rem;      /* 64 — display */
  --fs-80: 5rem;      /* 80 — hero */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;   /* eyebrows, all-caps labels */

  /* --------------------------------------------------------------------
     SPACING · 4-pt grid
     -------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --------------------------------------------------------------------
     RADII — soft, clinical (never pill-shaped except for tags & buttons)
     -------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     SHADOWS — restrained, warm, low-spread
     -------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(8, 88, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 88, 40, 0.07), 0 1px 2px rgba(8, 88, 40, 0.04);
  --shadow-md: 0 6px 20px rgba(8, 88, 40, 0.10), 0 2px 6px rgba(8, 88, 40, 0.05);
  --shadow-lg: 0 18px 40px rgba(8, 88, 40, 0.14), 0 6px 14px rgba(8, 88, 40, 0.06);
  --shadow-glow: 0 0 0 6px color-mix(in oklch, var(--fm-green-500) 18%, transparent);
  --shadow-inset: inset 0 1px 2px rgba(8, 88, 40, 0.08);

  /* --------------------------------------------------------------------
     MOTION — fast, calm, no bounce
     -------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ==========================================================================
   Element-level defaults (semantic mapping)
   ========================================================================== */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-36), 5vw, var(--fs-64));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-30), 3.5vw, var(--fs-48));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p { font-size: var(--fs-16); line-height: var(--lh-relaxed); text-wrap: pretty; }
.lead { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--color-fg-2); }
small, .small { font-size: var(--fs-14); }
.caption { font-size: var(--fs-12); color: var(--color-fg-3); }

.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-fg-brand);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--fm-green-100); color: var(--fm-green-900); }

:focus-visible {
  outline: 2px solid var(--fm-green-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}