/*==================================================
  TRANSBAHIA — BASE
  Variáveis de marca, reset e tipografia.
  Paleta herdada do site institucional histórico
  (old TTL): teal + laranja, ligada ao logo real.
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  /* ---- Cor institucional ----
     Extraída por amostragem de pixel da logo oficial (assets/logo/logo-3.svg):
     verde #0a6837, laranja #f7961d. Não são aproximações de tela. */
  --color-primary: #0a6837;
  --color-primary-dark: #073f21;
  --color-primary-light: #17914a;
  --color-accent: #f7961d;
  --color-accent-dark: #d97b0a;
  --color-canvas: #f6f2ea;
  --color-canvas-alt: #eef1e8;
  --color-surface: #ffffff;
  --color-ink: #17241c;
  --color-ink-soft: #47564c;
  --color-ink-faint: #7c8b7f;
  --color-line: #d9dccb;
  --color-line-dark: rgba(255, 255, 255, 0.14);
  --color-ok: #0a6837;
  --color-validate: #b23b2e;
  --color-validate-bg: #fbe9e6;

  /* ---- Tipografia ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.75vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.75vw, 3.6rem);
  --step-5: clamp(3rem, 2.1rem + 4.5vw, 5rem);

  /* ---- Layout ---- */
  --container-w: 1220px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --header-h: 84px;
  --shadow-soft: 0 12px 32px -18px rgba(33, 48, 47, 0.35);
  --shadow-card: 0 2px 0 rgba(33, 48, 47, 0.06), 0 18px 40px -28px rgba(33, 48, 47, 0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--color-primary-dark);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 640px) {
  .container { padding-inline: 1.15rem; }
}

.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;
}

.section {
  padding-block: clamp(3.5rem, 3rem + 2.5vw, 6.5rem);
}
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem); }
.section--dark {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.92);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section--alt { background: var(--color-canvas-alt); }
.section--surface { background: var(--color-surface); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.section--dark .eyebrow { color: var(--color-accent); }

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
}

.section__head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3.25rem);
}
.section__head--center { max-width: 680px; margin-inline: auto; text-align: center; }
.section__title {
  font-size: var(--step-3);
  margin-top: 0.6rem;
}
.section__lede {
  margin-top: 1rem;
  font-size: var(--step-1);
  color: var(--color-ink-soft);
  line-height: 1.55;
}
.section--dark .section__lede { color: rgba(255,255,255,0.72); }

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--color-accent);
  color: #221200;
  box-shadow: 0 14px 28px -14px rgba(250, 148, 23, 0.65);
}
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline {
  border: 1.5px solid currentColor;
  color: var(--color-primary);
}
.section--dark .btn-outline { color: #fff; }
.btn-outline:hover { background: rgba(47, 79, 79, 0.08); }
.section--dark .btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-ghost {
  color: var(--color-primary);
  padding-inline: 0.2rem;
  border-bottom: 2px solid var(--color-accent);
  border-radius: 0;
}
.section--dark .btn-ghost { color: #fff; }

/* ---- Badge de validação ---- */
.validate {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-validate);
  background: var(--color-validate-bg);
  padding: 0.15em 0.55em;
  border-radius: 5px;
  vertical-align: middle;
  text-transform: none;
  font-family: var(--font-body);
}
.validate::before { content: '⚠'; font-size: 0.9em; }