/* ============================================================
   Meta Análise — Biospectra · Landing de aquisição
   Tokens espelhados de biospectra/src/app/globals.css (Warm Botanical).
   Qualquer divergência aqui é bug: a fonte da verdade é o app.
   ============================================================ */
:root {
  /* ── Verde (primária) ───────────────────────────────────── */
  --green-50:  #F1F7F3;
  --green-100: #E5EFE8;
  --green-200: #C7DCCF;
  --green-300: #9DC2AC;
  --green-400: #6FA081;
  --green-500: #4E8466;
  --green-600: #3A6B4F;
  --green-700: #2A5A3F;
  --green-800: #1F4733;
  --green-900: #16301F;

  /* ── Terracota (acento único) ───────────────────────────── */
  --clay-50:  #FBF1EB;
  --clay-100: #F6DFD3;
  --clay-200: #EFC9BA;
  --clay-300: #E0A88F;
  --clay-400: #D5836A;
  --clay-500: #C5694A;
  --clay-600: #B85638;
  --clay-700: #98452C;
  --clay-800: #7A3723;

  /* ── Areia / creme (superfícies) ────────────────────────── */
  --sand-50:  #FAF6EE;
  --sand-100: #F1EADB;
  --sand-200: #E7DCC8;
  --sand-300: #D8CAB0;
  --sand-400: #C6B594;

  /* ── Ink (texto & linhas) ───────────────────────────────── */
  --ink-100: #ECE5D9;
  --ink-200: #D8CFBF;
  --ink-300: #B9AC97;
  --ink-400: #9A8B76;
  --ink-500: #7A6B57;
  --ink-600: #5E4F3D;
  --ink-700: #45382A;
  --ink-800: #2E2619;
  --ink-900: #211B12;

  /* ── Estados semânticos ─────────────────────────────────── */
  --success-100: #E4F0E6; --success-500: #4E9460; --success-600: #3F7A4E;
  --warning-100: #FBF0D8; --warning-500: #D99A24; --warning-600: #B9821C;
  --danger-100:  #F8E0DB; --danger-500:  #CE4A37; --danger-600:  #B23B2B;
  --info-100:    #DCEDEE; --info-500:    #3C8B90; --info-600:    #2D6E72;

  /* ── Ramp espectral (data viz) ──────────────────────────── */
  --spectra-1: #1F4733; --spectra-2: #4E9460; --spectra-3: #C9A227;
  --spectra-4: #C5694A; --spectra-5: #9E4A6E; --spectra-6: #2D6E72;

  /* ── Aliases semânticos ─────────────────────────────────── */
  --color-bg:              var(--sand-50);
  --color-surface:         #FFFFFF;
  --color-surface-raised:  var(--sand-50);
  --color-surface-sunken:  var(--sand-100);
  --color-surface-inverse: var(--green-900);
  --text-primary:   var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-brand:     var(--green-700);
  --brand-primary:  var(--green-800);
  --brand-accent:   var(--clay-500);
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-display: 'Spectral', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px; --text-lg: 20px;
  /* Títulos fluidos: encolhem no mobile, tamanho cheio no desktop. */
  --text-xl: clamp(20px, 3.5vw, 25px);  --text-2xl: clamp(23px, 4.5vw, 31px);
  --text-3xl: clamp(27px, 6vw, 39px);   --text-4xl: clamp(31px, 7vw, 49px);
  --text-5xl: clamp(38px, 8vw, 61px);   --text-6xl: clamp(44px, 9vw, 76px);

  /* ── Espaçamento (grade 8px) ────────────────────────────── */
  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px;
  --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px;

  --container-sm: 640px; --container-md: 820px; --container-lg: 1080px; --container-xl: 1280px;

  /* ── Raios ──────────────────────────────────────────────── */
  --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px;

  /* ── Sombras (tinte quente) ─────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(33,27,18,.06);
  --shadow-sm: 0 1px 3px rgba(33,27,18,.08), 0 1px 2px rgba(33,27,18,.06);
  --shadow-md: 0 4px 12px rgba(33,27,18,.10);
  --shadow-lg: 0 10px 24px rgba(33,27,18,.12);
  --shadow-xl: 0 20px 40px rgba(33,27,18,.16);
  --shadow-accent: 0 6px 16px rgba(197,105,74,.28);
  --shadow-brand:  0 6px 16px rgba(31,71,51,.22);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22,0.61,0.36,1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;

  /* Altura da barra fixa mobile — usada para folgar o fim da página. */
  --stickybar-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A barra fixa mobile é overlay: sem esta folga ela cobre o fim do rodapé. */
  padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--clay-200); color: var(--ink-900); }

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

/* ── Layout ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: max(var(--space-5), env(safe-area-inset-left));
}
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

.section { padding-block: var(--space-12); }
@media (min-width: 768px) { .section { padding-block: var(--space-13); } }
.section--sand    { background: var(--sand-100); }
.section--surface { background: var(--color-surface); }
.section--dark    { background: var(--green-900); color: var(--sand-50); }

/* ── Tipografia ───────────────────────────────────────────── */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.section--dark .kicker { color: var(--clay-300); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.h1 { font-size: var(--text-5xl); }
.h2 { font-size: var(--text-3xl); }
.h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }

.lede { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; }
@media (min-width: 768px) { .lede { font-size: 18px; } }
.section--dark .lede { color: rgba(250,246,238,.76); }

.section-head { max-width: 640px; margin-bottom: var(--space-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-block: var(--space-4) var(--space-4); }

/* ── Botões (min-height 44px = alvo de toque) ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; text-align: center;
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--green-800); color: var(--sand-50); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-900); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--clay-500); color: #fff; box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--clay-600); }
.btn-secondary { background: var(--color-surface); color: var(--green-800); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--sand-100); }
/* Sobre fundo escuro: contorno claro, sem "cartão branco" no meio do verde. */
.btn-ghost-light { background: rgba(250,246,238,.06); color: var(--sand-50); border-color: rgba(250,246,238,.34); }
.btn-ghost-light:hover { background: rgba(250,246,238,.14); }
.btn-block { width: 100%; }

/* ── Cartões ──────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7);
}
.card--flat { box-shadow: none; }
.section--surface .card { background: var(--sand-50); }

.icon-badge {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--clay-50); color: var(--clay-600);
  margin-bottom: var(--space-5);
}
.icon-badge--green { background: var(--green-100); color: var(--green-700); }
.section--dark .icon-badge { background: rgba(250,246,238,.09); color: var(--clay-300); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
/* Ordem importa: o breakpoint maior precisa vir depois para vencer o menor. */
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250,246,238,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: 60px;
}
/* O logo é um link: precisa dos 44px de alvo, não só da altura da imagem. */
.site-header__brand {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
  border-radius: var(--radius-sm);
}
.header-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding-inline: 10px;
  font-size: var(--text-sm); font-weight: 600; color: var(--green-800);
  border-radius: var(--radius-sm);
}
.header-link:hover { background: var(--sand-100); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: var(--green-900);
  color: var(--sand-50);
  padding-block: var(--space-12) var(--space-13);
}
@media (min-width: 768px) { .hero { padding-block: var(--space-13); } }
/* Lavagem radial: dá profundidade sem foto. */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(78,132,102,.34) 0%, transparent 62%),
    radial-gradient(90% 70% at 85% 100%, rgba(197,105,74,.20) 0%, transparent 60%);
  pointer-events: none;
}
.hero__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .5; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero .h1 { margin-block: var(--space-6) var(--space-6); }
.hero__accent { color: var(--clay-300); font-style: italic; }
.hero__lede { max-width: 620px; margin-inline: auto; color: rgba(250,246,238,.78); font-size: var(--text-base); }
@media (min-width: 768px) { .hero__lede { font-size: 18px; } }
.hero__claim {
  font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--sand-50); max-width: 640px; margin-inline: auto;
}
.hero__actions {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-block: var(--space-9) var(--space-6);
}
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; justify-content: center; }
  .hero__actions .btn { min-width: 232px; }
}
.hero__note { font-size: var(--text-sm); color: rgba(250,246,238,.62); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: rgba(250,246,238,.10);
  border: 1px solid rgba(250,246,238,.20);
}

/* ── Lista de sintomas ────────────────────────────────────── */
.symptom {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}
.symptom__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--clay-50); color: var(--clay-600);
}
.symptom p { font-size: 15px; font-weight: 500; line-height: 1.4; }

.callout {
  border-left: 3px solid var(--clay-500);
  background: var(--clay-50);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-700);
}
.callout strong { color: var(--ink-900); font-weight: 600; }

/* ── Mockup do relatório (HTML real, não foto) ────────────── */
.report {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.report__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--green-900); color: var(--sand-50);
}
.report__bar span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.report__bar span:last-child { color: rgba(250,246,238,.6); }
.report__body { padding: var(--space-6); }
.axis {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.axis:last-child { border-bottom: 0; }
.axis__name { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 500; }
.axis__track { display: block; width: 82px; flex: none; height: 6px; border-radius: 999px; background: var(--sand-200); overflow: hidden; }
@media (min-width: 480px) { .axis__track { width: 120px; } }
/* display:block é obrigatório — o track não é flex, então um span inline
   ignoraria width/height e a barra sairia sem cor. */
.axis__fill { display: block; height: 100%; border-radius: 999px; }
.badge {
  display: inline-flex; align-items: center; flex: none;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.badge-normal  { background: var(--success-100); color: var(--success-600); }
.badge-atencao { background: var(--warning-100); color: var(--warning-600); }
.badge-grave   { background: var(--danger-100);  color: var(--danger-600); }
.report__foot {
  padding: var(--space-5) var(--space-6);
  background: var(--sand-100);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.report-caption { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-5); text-align: center; }

/* ── Passos ───────────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); } }
.step { display: flex; gap: var(--space-5); align-items: flex-start; }
@media (min-width: 900px) { .step { flex-direction: column; gap: var(--space-4); } }
.step__num {
  flex: none;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(250,246,238,.09); color: var(--clay-300);
  border: 1px solid rgba(250,246,238,.18);
}
.step h3 { margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: 600; font-family: var(--font-sans); }
.step p { font-size: var(--text-sm); color: rgba(250,246,238,.72); line-height: 1.55; }

/* ── Lista de exames ──────────────────────────────────────── */
.checklist { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .checklist { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.checklist li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  list-style: none;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.checklist svg { flex: none; margin-top: 2px; color: var(--green-600); }

/* ── Selos de serviço ─────────────────────────────────────── */
.trust { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust__item { display: flex; gap: var(--space-5); align-items: flex-start; }
.trust__item svg { flex: none; color: var(--clay-500); margin-top: 2px; }
.trust__item h3 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; }
.trust__item p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }

/* ── Oferta ───────────────────────────────────────────────── */
.offer {
  max-width: 460px; margin-inline: auto;
  background: rgba(250,246,238,.06);
  border: 1px solid rgba(250,246,238,.20);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-7);
  text-align: center;
}
.offer h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.offer__sub { font-size: var(--text-sm); color: rgba(250,246,238,.66); margin-top: var(--space-2); }
.offer__price {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600;
  margin-block: var(--space-6) var(--space-2); line-height: 1;
}
.offer__unit { font-size: var(--text-sm); color: rgba(250,246,238,.6); margin-bottom: var(--space-7); }
.offer__list { text-align: left; display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.offer__list li { display: flex; gap: var(--space-4); align-items: flex-start; list-style: none; font-size: var(--text-sm); color: rgba(250,246,238,.88); }
.offer__list svg { flex: none; margin-top: 2px; color: var(--clay-300); }
.offer__after { font-size: var(--text-sm); color: rgba(250,246,238,.62); margin-top: var(--space-6); }

/* ── FAQ (native details — acessível, sem JS) ─────────────── */
.faq { display: grid; gap: var(--space-4); }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: 60px; padding: var(--space-5) var(--space-6);
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--clay-500); border-bottom: 2px solid var(--clay-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq p { padding: 0 var(--space-6) var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* ── Rodapé ───────────────────────────────────────────────── */
.site-footer { background: var(--green-900); color: var(--sand-50); padding-block: var(--space-11) var(--space-9); }
.site-footer__top { display: flex; flex-direction: column; gap: var(--space-7); align-items: flex-start; }
@media (min-width: 768px) { .site-footer__top { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-links a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500;
  color: rgba(250,246,238,.9);
  border: 1px solid rgba(250,246,238,.18);
}
.footer-links a:hover { background: rgba(250,246,238,.10); }
.site-footer hr { border: 0; border-top: 1px solid rgba(250,246,238,.14); margin-block: var(--space-8); }
.legal { display: grid; gap: var(--space-4); font-size: var(--text-sm); color: rgba(250,246,238,.58); line-height: 1.55; max-width: 760px; }
/* Links legais também são alvo de toque: 44px, não a altura da linha. */
.legal__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline: -10px; }
.legal__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 10px;
  border-radius: var(--radius-sm);
  color: rgba(250,246,238,.78);
  text-decoration: underline; text-underline-offset: 3px;
}
.legal__links a:hover { color: var(--sand-50); background: rgba(250,246,238,.08); }

/* ── Barra fixa mobile ────────────────────────────────────── */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: var(--space-3);
  padding: var(--space-4) max(var(--space-4), env(safe-area-inset-left)) calc(var(--space-4) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-right));
  background: rgba(250,246,238,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
}
.stickybar .btn { flex: 1; min-width: 0; padding-inline: 12px; font-size: var(--text-sm); }
@media (min-width: 768px) { .stickybar { display: none; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Revelação no scroll — puramente decorativa.
   O estado escondido só existe quando o JS confirmou que roda (.js no <html>),
   senão a página inteira ficaria invisível para crawler e para quem bloqueia JS. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }