/* ============================================================
   NeuroPsique — Design tokens & base styles
   ============================================================ */

:root {
  /* Brand palette (extracted from logo) */
  --teal: #1F8A99;
  --teal-600: #1B7986;
  --teal-700: #156878;
  --teal-200: #B7DDE2;
  --teal-50: #EBF5F7;

  --petrol: #0E3B4A;      /* dark navy from puzzle pieces */
  --petrol-700: #102E3A;
  --petrol-900: #07212B;

  /* Neutrals — warm-cool balanced */
  --ink: #0F1A20;
  --ink-2: #2A3B45;
  --ink-3: #5A6770;
  --mute: #8A949B;
  --line: #E4E8EA;
  --line-2: #EFF2F3;
  --paper: #FAFAF9;
  --paper-2: #F4F5F4;
  --white: #FFFFFF;

  /* Accent for status / pulse */
  --pulse: #4FD1C5;

  /* Typography (default = Direction A) */
  --font-display: "Mulish", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

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

  /* Radii */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Surfaces */
  --bg: var(--paper);
  --surface: var(--white);
  --on-bg: var(--ink);
  --on-surface: var(--ink);

  --shadow-1: 0 1px 2px rgba(14, 59, 74, .04), 0 1px 1px rgba(14, 59, 74, .04);
  --shadow-2: 0 4px 12px rgba(14, 59, 74, .06), 0 2px 4px rgba(14, 59, 74, .04);
  --shadow-3: 0 18px 48px rgba(14, 59, 74, .10), 0 4px 12px rgba(14, 59, 74, .05);

  /* Container */
  --container: 1240px;
  --gutter: 32px;
}

/* Direction B preset — Editorial / Premium (dark dominant) */
[data-direction="B"] {
  --bg: #F2F0EB; /* warm sand */
  --paper: #F2F0EB;
  --paper-2: #EAE6DD;
  --on-bg: var(--petrol-900);
  --line: #DDD7CB;
  --line-2: #E6E1D5;
  --font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

/* Palette dominante: dark (apply on top of any direction) */
[data-palette="dark"] {
  --bg: var(--petrol-900);
  --paper: var(--petrol-900);
  --paper-2: var(--petrol-700);
  --surface: var(--petrol-700);
  --on-bg: #E8F0F1;
  --on-surface: #E8F0F1;
  --ink: #E8F0F1;
  --ink-2: #B5C5CB;
  --ink-3: #8FA2A9;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.05);
}

/* Typography knob */
[data-type="A"] { --font-display: "Mulish", system-ui, sans-serif; --font-body: "Mulish", system-ui, sans-serif; }
[data-type="B"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Manrope", system-ui, sans-serif; }
[data-type="C"] { --font-display: "Nunito", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, sans-serif; }

/* ----- reset & base ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--on-bg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.55;
  transition: background-color .35s ease, color .35s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----- typography ----- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--teal-600);
}
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
[data-direction="B"] .h-display { font-weight: 500; letter-spacing: -.015em; }

.h-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
[data-direction="B"] .h-1 { font-weight: 500; }
.h-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.18;
  letter-spacing: -.01em;
}
[data-direction="B"] .h-2 { font-weight: 500; }
.h-3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
}
.lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ----- layout ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding: clamp(64px, 8vw, 120px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.grid { display: grid; gap: var(--s-4); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

/* ----- navbar ----- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px) saturate(1.2);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s ease;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--teal-700);
  letter-spacing: -.01em;
}
[data-palette="dark"] .nav-logo { color: var(--teal-200); }
.nav-logo img { height: 44px; width: auto; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.nav-logo-text span:first-child { font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; text-transform: uppercase; }
.nav-logo-text span:last-child { font-weight: 800; color: inherit; font-size: 17px; }
[data-palette="dark"] .nav-logo-text span:first-child { color: var(--ink-3); }

.nav-links { display: flex; gap: var(--s-5); align-items: center; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--teal-600); }
.nav-links a.active { color: var(--teal-600); }
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--teal);
  border-radius: 2px;
}

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  letter-spacing: -.005em;
}
.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 6px 20px rgba(31, 138, 153, .25);
}
.btn-primary:hover { background: var(--teal-600); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(31, 138, 153, .32); }
.btn-dark {
  background: var(--petrol);
  color: #fff;
}
.btn-dark:hover { background: var(--petrol-700); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-600); }
[data-palette="dark"] .btn-ghost { color: var(--ink); border-color: rgba(255,255,255,.15); }
[data-palette="dark"] .btn-ghost:hover { border-color: var(--teal-200); color: var(--teal-200); }

/* ----- hero ----- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(620px, 88vh, 880px);
  display: flex;
  align-items: center;
  background: var(--bg);
}
.hero-canvas {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  display: block;
}
.hero-canvas::before {
  /* soft fade from bg into canvas to avoid harsh seam */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: linear-gradient(to right, var(--bg), transparent);
  z-index: 1;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-block: clamp(80px, 10vw, 140px);
}
.hero-content > div { max-width: 540px; }
.hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero-canvas {
    width: 100%;
    opacity: .45;
  }
  .hero-canvas::before {
    background: linear-gradient(to bottom, var(--bg), transparent 30%, transparent 70%, var(--bg));
    width: 100%;
  }
}

/* eyebrow chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: color-mix(in oklab, var(--teal) 14%, transparent);
  color: var(--teal-700);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  border: 1px solid color-mix(in oklab, var(--teal) 22%, transparent);
}
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--teal) 18%, transparent);
}
[data-palette="dark"] .chip {
  background: color-mix(in oklab, var(--teal) 22%, transparent);
  color: var(--teal-200);
  border-color: color-mix(in oklab, var(--teal) 35%, transparent);
}

/* ----- cards & surfaces ----- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: var(--s-5);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover {
  border-color: color-mix(in oklab, var(--teal) 35%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
[data-palette="dark"] .card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }

/* placeholder mockup */
.mock {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--teal) 8%, var(--paper-2)) 0 14px,
      color-mix(in oklab, var(--teal) 4%, var(--paper-2)) 14px 28px
    );
  border: 1px dashed color-mix(in oklab, var(--teal) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-700);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mock::after {
  content: attr(data-label);
  background: var(--paper);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
[data-palette="dark"] .mock { background: repeating-linear-gradient(135deg, rgba(31,138,153,.10) 0 14px, rgba(31,138,153,.05) 14px 28px); border-color: rgba(31,138,153,.25); }
[data-palette="dark"] .mock::after { background: var(--surface); border-color: rgba(255,255,255,.08); color: var(--teal-200); }

/* Dark mockup variant for use inside section--petrol / section--teal regardless of global palette */
.mock--dark {
  background: repeating-linear-gradient(
    135deg,
    rgba(127, 203, 214, .14) 0 14px,
    rgba(127, 203, 214, .06) 14px 28px
  );
  border-color: rgba(127, 203, 214, .25);
  color: var(--teal-200);
}
.mock--dark::after {
  background: var(--petrol-700);
  border-color: rgba(255,255,255,.10);
  color: var(--teal-200);
}

/* ----- footer ----- */
.footer {
  background: var(--petrol-900);
  color: #C7D5DA;
  padding: 80px 0 32px;
}
.footer a { color: #C7D5DA; }
.footer a:hover { color: var(--teal-200); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-6);
}
.footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #8FA2A9;
}

/* utility */
.text-teal { color: var(--teal); }
.text-petrol { color: var(--petrol); }
.text-mute { color: var(--ink-3); }
.divider { height: 1px; background: var(--line); border: none; margin: 0; }

/* fade-up scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-links.mobile-open { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: var(--bg); padding: 24px; border-bottom: 1px solid var(--line); gap: 16px; }
}

/* ----- theme toggle (sun/moon icon button) ----- */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-2);
  transition: all .2s ease;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--teal);
  color: var(--teal-600);
  transform: rotate(15deg);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-palette="dark"] .theme-toggle {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: var(--teal-200);
}
[data-palette="dark"] .theme-toggle:hover {
  border-color: var(--teal-200);
  color: #fff;
}
[data-palette="dark"] .theme-toggle .icon-sun { display: none; }
[data-palette="dark"] .theme-toggle .icon-moon { display: block; }

/* ============================================================
   THEMED SECTIONS — section-level color rhythm
   ============================================================ */

/* Section: petróleo escuro (dark navy) */
.section--petrol {
  background: var(--petrol);
  color: #E8F0F1;
  position: relative;
  overflow: hidden;
}
.section--petrol h1, .section--petrol h2, .section--petrol h3, .section--petrol .h-1, .section--petrol .h-2, .section--petrol .h-3 { color: #fff; }
.section--petrol .eyebrow { color: var(--teal-200); }
.section--petrol .text-teal { color: var(--teal-200); }
.section--petrol .lead { color: #B5C5CB; }
.section--petrol p { color: #C7D5DA; }
.section--petrol .btn-ghost { color: #fff; border-color: rgba(255,255,255,.18); }
.section--petrol .btn-ghost:hover { border-color: var(--teal-200); color: var(--teal-200); }

/* Section: teal médio (mid-teal hero block) */
.section--teal {
  background: var(--teal-600);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section--teal h1, .section--teal h2, .section--teal h3, .section--teal .h-1, .section--teal .h-2, .section--teal .h-3 { color: #fff; }
.section--teal .eyebrow { color: rgba(255,255,255,.7); }
.section--teal .text-teal { color: #FFE9A8; }
.section--teal .lead { color: rgba(255,255,255,.85); }

/* Section: cream / sand (warm light) */
.section--sand {
  background: #F2EFE8;
  color: var(--ink);
  position: relative;
}

/* Section: teal-50 (very light teal) */
.section--mist {
  background: var(--teal-50);
  color: var(--ink);
  position: relative;
}

/* ---- DARK MODE OVERRIDES for the light themed sections ---- */
/* When palette=dark, light bg sections (mist, sand) flip to dark surfaces
   so text stays readable. */
[data-palette="dark"] .section--mist,
[data-palette="dark"] .section--sand {
  background: var(--petrol-700);
  color: #E8F0F1;
}
[data-palette="dark"] .section--mist h1,
[data-palette="dark"] .section--mist h2,
[data-palette="dark"] .section--mist h3,
[data-palette="dark"] .section--mist .h-1,
[data-palette="dark"] .section--mist .h-2,
[data-palette="dark"] .section--mist .h-3,
[data-palette="dark"] .section--sand h1,
[data-palette="dark"] .section--sand h2,
[data-palette="dark"] .section--sand h3,
[data-palette="dark"] .section--sand .h-1,
[data-palette="dark"] .section--sand .h-2,
[data-palette="dark"] .section--sand .h-3 { color: #fff; }
[data-palette="dark"] .section--mist .eyebrow,
[data-palette="dark"] .section--sand .eyebrow { color: var(--teal-200); }
[data-palette="dark"] .section--mist .lead,
[data-palette="dark"] .section--sand .lead { color: #B5C5CB; }
[data-palette="dark"] .section--mist p,
[data-palette="dark"] .section--sand p { color: #C7D5DA; }
[data-palette="dark"] .section--mist .text-teal,
[data-palette="dark"] .section--sand .text-teal { color: var(--teal-200); }
[data-palette="dark"] .section--mist .text-mute,
[data-palette="dark"] .section--sand .text-mute { color: #8FA2A9; }
[data-palette="dark"] .section--mist .btn-ghost,
[data-palette="dark"] .section--sand .btn-ghost {
  color: #E8F0F1;
  border-color: rgba(255,255,255,.18);
}
[data-palette="dark"] .section--mist .btn-ghost:hover,
[data-palette="dark"] .section--sand .btn-ghost:hover {
  border-color: var(--teal-200);
  color: var(--teal-200);
}
/* tratamentos page paper-2 bg also needs treatment */
[data-palette="dark"] .section[style*="paper-2"] {
  background: var(--petrol-700) !important;
}
/* Cards inside the now-dark themed sections */
[data-palette="dark"] .section--mist .card,
[data-palette="dark"] .section--sand .card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: #E8F0F1;
}
[data-palette="dark"] .section--mist .card h3,
[data-palette="dark"] .section--sand .card h3 { color: #fff; }
[data-palette="dark"] .section--mist .card p,
[data-palette="dark"] .section--sand .card p { color: #B5C5CB; }
/* contato icon boxes (teal-50 small surfaces) */
[data-palette="dark"] .section--mist [style*="--teal-50"],
[data-palette="dark"] .section--mist [style*="teal-50"] {
  background: rgba(127, 203, 214, .14) !important;
}
/* Form fields */
[data-palette="dark"] .section--mist input,
[data-palette="dark"] .section--mist textarea,
[data-palette="dark"] .section--mist select,
[data-palette="dark"] .section--sand input,
[data-palette="dark"] .section--sand textarea,
[data-palette="dark"] .section--sand select {
  background: rgba(255,255,255,.04);
  color: #E8F0F1;
  border-color: rgba(255,255,255,.12);
}
[data-palette="dark"] .section--mist .field-label,
[data-palette="dark"] .section--sand .field-label { color: #B5C5CB; }
[data-palette="dark"] .section--mist .chip-choice label,
[data-palette="dark"] .section--sand .chip-choice label {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: #E8F0F1;
}
[data-palette="dark"] .section--mist .chip-choice input:checked + label,
[data-palette="dark"] .section--sand .chip-choice input:checked + label {
  background: rgba(127, 203, 214, .18);
  border-color: var(--teal-200);
  color: var(--teal-200);
}
[data-palette="dark"] .section--mist .faq-item,
[data-palette="dark"] .section--sand .faq-item {
  border-color: rgba(255,255,255,.10);
}
[data-palette="dark"] .section--mist .faq-item summary,
[data-palette="dark"] .section--sand .faq-item summary { color: #fff; }
[data-palette="dark"] .section--mist .faq-item p,
[data-palette="dark"] .section--sand .faq-item p { color: #B5C5CB; }
/* Step cards in Como funciona (section--teal) need readable text */
[data-palette="dark"] .steps-board .step-card {
  background: var(--petrol-700);
}
[data-palette="dark"] .steps-board .step-card h3 { color: #fff; }
[data-palette="dark"] .steps-board .step-card p { color: #B5C5CB; }
[data-palette="dark"] .steps-board .step-num { color: var(--teal-200); }

/* Silhueta decorativa (faded brand watermark) */
.brand-silhouette {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.brand-silhouette img { width: 100%; height: 100%; object-fit: contain; }
.section--petrol .brand-silhouette { opacity: .12; }
.section--teal .brand-silhouette { opacity: .14; }
.section--sand .brand-silhouette { opacity: .08; }

/* Section content above watermark */
.section .container { position: relative; z-index: 2; }

/* Puzzle piece - SVG class */
.puzzle-piece {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  position: relative;
}

/* 2x2 "board" of step cards — visually a puzzle */
.steps-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  background: rgba(255,255,255,.15);
  padding: 4px;
  border-radius: 24px;
}
.steps-board .step-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  position: relative;
}
.steps-board .step-card:nth-child(1) { border-radius: 22px 4px 4px 4px; }
.steps-board .step-card:nth-child(2) { border-radius: 4px 22px 4px 4px; }
.steps-board .step-card:nth-child(3) { border-radius: 4px 4px 4px 22px; }
.steps-board .step-card:nth-child(4) { border-radius: 4px 4px 22px 4px; }
.steps-board .step-card h3 { color: var(--petrol); }
.steps-board .step-card p { color: var(--ink-3); margin: 0; }
.steps-board .step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--teal-600);
  display: flex;
  align-items: center;
  gap: 12px;
}
.steps-board .step-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
  max-width: 60px;
}

@media (max-width: 760px) {
  .steps-board { grid-template-columns: 1fr; }
  .steps-board .step-card { border-radius: 20px !important; }
}