/* ============================================================
   Baía da Babitonga Store — design system
   Paleta extraída da logo real (@baiadababitonga) e do casco
   azul da Focker 330 fotografada; sem cor inventada.
   ============================================================ */

:root {
  /* cores base — navy quase preto (tom "Black Edition") */
  --navy-950: #060b12;
  --navy-900: #0a1420;
  --navy-800: #101f30;
  --navy-700: #17293d;
  --navy-600: #1e3550;

  /* azuis da marca (logo + casco) */
  --blue-600: #1373b0;
  --blue-500: #2f8bc4;
  --blue-400: #4a9fd8;
  --blue-300: #7bc3db;

  /* neutros */
  --ice-100: #f6f9fb;
  --ice-200: #e7edf2;
  --sand-100: #e8dfcd;
  --sand-300: #b99b6b;
  --graphite-600: #2a323b;
  --graphite-500: #414c57;

  --ink: #060b12;
  --paper: #f6f9fb;

  /* tipografia */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .3s;
  --dur-base: .6s;
  --dur-slow: .9s;

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--ice-100);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

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

.section {
  padding-block: clamp(4rem, 9vw, 8rem);
  position: relative;
}

.section--light {
  background: var(--paper);
  color: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 1.2rem;
}
.section--light .eyebrow { color: var(--blue-600); }

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 5rem);
  text-transform: uppercase;
}

.h-section {
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  color: var(--ice-200);
  max-width: 46ch;
}
.section--light .lede { color: var(--graphite-500); }

/* ---------- botões / CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 1.9em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ice-100);
  color: var(--navy-950);
  box-shadow: 0 8px 30px -8px rgba(0,0,0,.5);
}
.btn--primary:hover { box-shadow: 0 14px 34px -10px rgba(0,0,0,.6); }

.btn--whats {
  background: #22c35e;
  color: #06210f;
}
.btn--whats:hover { box-shadow: 0 14px 34px -10px rgba(34,195,94,.45); }

.btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(246,249,251,.35);
  color: var(--ice-100);
}
.btn--ghost:hover { border-color: var(--ice-100); }
.section--light .btn--ghost { border-color: rgba(6,11,18,.25); color: var(--ink); }
.section--light .btn--ghost:hover { border-color: var(--ink); }

.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: clamp(1rem, 2.4vw, 1.6rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(-14px);
  transition: background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.nav.is-intro-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .nav { opacity: 1; transform: none; }
}
.nav.is-scrolled {
  background: rgba(6,11,18,.92);
  padding-block: .8rem;
  box-shadow: 0 1px 0 rgba(246,249,251,.08);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.nav__brand img { height: 34px; width: 34px; border-radius: 50%; object-fit: cover; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  font-weight: 600;
  font-size: .92rem;
}
.nav__links a { opacity: .85; transition: opacity var(--dur-fast); }
.nav__links a:hover { opacity: 1; }
.nav__links .btn { font-size: .85rem; padding: .8em 1.4em; }

@media (max-width: 820px) {
  .nav__links a:not(.btn) { display: none; }
}

/* ---------- hero cinematográfico (estilo Oryzo: profundidade por scroll) ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  display: flex;
  align-items: flex-end;
  background: var(--navy-950);
}

.hero__stage {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 42%;
  will-change: transform, filter;
  opacity: 0;
  transition: opacity .5s linear;
}
.hero__img.is-ready { opacity: 1; }

.hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 3;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  color: var(--navy-950);
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Reforçado (30/07): a faixa clara no meio (antes 32%-60% quase sem escurecer)
     deixava o texto ilegível sobre foto clara (água, mata) bem onde o conteúdo
     fica ancorado (hero__content é flex-end). Agora escurece cedo e mantém
     forte até o fim, sem depender de qual foto entra no hero. */
  background:
    linear-gradient(180deg, rgba(6,11,18,.55) 0%, rgba(6,11,18,.1) 26%, rgba(6,11,18,.5) 48%, rgba(6,11,18,.88) 70%, rgba(6,11,18,.96) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 5.5rem);
}

/* ---------- abertura: a cena aparece sozinha por um instante, sem interface,
   antes do resto do site "chegar" — sem tela preta, sem spinner de marca ---------- */
.hero__kicker, .hero__title, .hero__sub, .hero__actions, .hero__scrolldown {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero.is-intro-in .hero__kicker    { opacity: 1; transform: none; transition-delay: .15s; }
.hero.is-intro-in .hero__title     { opacity: 1; transform: none; transition-delay: .28s; }
.hero.is-intro-in .hero__sub       { opacity: 1; transform: none; transition-delay: .42s; }
.hero.is-intro-in .hero__actions   { opacity: 1; transform: none; transition-delay: .56s; }
.hero.is-intro-in .hero__scrolldown{ opacity: 1; transform: none; transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
  .hero__kicker, .hero__title, .hero__sub, .hero__actions, .hero__scrolldown {
    opacity: 1; transform: none;
  }
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 1.4rem;
}
.hero__kicker::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue-300);
  box-shadow: 0 0 0 5px rgba(123,195,219,.18);
}

.hero__title {
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  font-weight: 900;
  text-transform: uppercase;
  max-width: 20ch;
}

.hero__sub {
  margin-top: 1.4rem;
  max-width: 42ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ice-200);
}

.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__scrolldown {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.6rem, 4vw, 3rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246,249,251,.65);
  writing-mode: vertical-rl;
}
.hero__scrolldown::after {
  content: '';
  width: 1px; height: 40px;
  background: linear-gradient(rgba(246,249,251,.7), transparent);
  writing-mode: horizontal-tb;
}
@media (max-width: 720px) { .hero__scrolldown { display: none; } }

/* ---------- reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal-group.in > * { opacity: 1; transform: translateY(0); }
.reveal-group.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-group.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-group.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-group.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-group.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-group.in > *:nth-child(6) { transition-delay: .4s; }

/* ---------- catálogo / frota ---------- */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
}

.boat-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--navy-900);
  border: 1px solid rgba(246,249,251,.08);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.boat-card:hover { transform: translateY(-6px); border-color: rgba(123,195,219,.4); }

.boat-card__media { position: relative; aspect-ratio: 4/3; overflow: clip; }
.boat-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.boat-card:hover .boat-card__media img { transform: scale(1.06); }

.boat-card__tag {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(6,11,18,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(246,249,251,.2);
  padding: .4em 1em;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.boat-card__body { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.boat-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; }
.boat-card__specs { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .82rem; color: var(--ice-200); }
.boat-card__specs b { color: var(--ice-100); font-weight: 700; }
.boat-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; }
.boat-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ice-100); }
.boat-card__price small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .68rem; color: var(--blue-300); text-transform: uppercase; letter-spacing: .08em; }

.boat-card--soon {
  align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(246,249,251,.02) 0 14px, rgba(246,249,251,.045) 14px 28px);
  border-style: dashed; border-color: rgba(246,249,251,.18);
  min-height: 100%;
  padding: 3rem 2rem;
  gap: 1rem;
}
.boat-card--soon .h-section { font-size: 1.4rem; }

/* ---------- galeria ----------
   Masonry por CSS columns: cada foto mantém a proporção real dela (nunca
   forçamos altura de linha fixa), então retrato e paisagem convivem sem
   nenhum corte estranho, em qualquer largura de tela. Substitui a tentativa
   anterior por CSS grid com spans fixos, que só acertava a proporção em
   larguras específicas testadas e voltava a espremer foto em outras. */
.gallery {
  columns: 4;
  column-gap: .9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gallery__item {
  position: relative;
  overflow: clip;
  border-radius: 16px;
  break-inside: avoid;
  margin-bottom: .9rem;
  clip-path: inset(6% round 16px);
  opacity: 0;
  transition: clip-path 1s var(--ease-out), opacity .7s var(--ease-out);
}
.gallery__item.in { opacity: 1; clip-path: inset(0% round 16px); }
.gallery__item img {
  width: 100%; height: auto; display: block;
  transition: transform 1.2s var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.06); }

@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }

/* ---------- specs / ficha técnica ---------- */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(6,11,18,.1);
  border: 1px solid rgba(6,11,18,.1);
  border-radius: 18px;
  overflow: clip;
  margin-top: 2rem;
}
/* cartão sempre escuro de propósito (como uma placa técnica), então o texto
   dele é sempre claro — independente da seção ao redor ser clara ou escura */
.specs__item { background: var(--navy-900); color: var(--ice-100); padding: 1.6rem 1.8rem; }
.specs__item span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-300); margin-bottom: .5rem; }
.specs__item strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ice-100); }
.specs__note { margin-top: 1rem; font-size: .85rem; color: currentColor; opacity: .62; }

/* ---------- vídeo ---------- */
.video-block {
  position: relative;
  border-radius: 24px;
  overflow: clip;
  max-width: 420px;
  aspect-ratio: 9/16;
  margin-inline: auto;
  background: var(--navy-900);
  cursor: pointer;
}
.video-block img, .video-block video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.video-block video { display: none; }
.video-block.is-playing img { display: none; }
.video-block.is-playing video { display: block; }
.video-block__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(6,11,18,.1), rgba(6,11,18,.55));
  transition: opacity var(--dur-base) var(--ease-out);
}
.video-block.is-playing .video-block__play { opacity: 0; pointer-events: none; }
.video-block__play span {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(246,249,251,.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform var(--dur-fast) var(--ease-out);
}
.video-block:hover .video-block__play span { transform: scale(1.08); }
.video-block__play svg { width: 26px; height: 26px; margin-left: 4px; color: var(--navy-950); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-top: 2rem; }
.faq__item { border-top: 1px solid rgba(246,249,251,.12); }
.faq__item:last-child { border-bottom: 1px solid rgba(246,249,251,.12); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; color: inherit;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  padding: 1.4rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
}
.faq__q .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq__q .plus::before, .faq__q .plus::after {
  content: ''; position: absolute; background: currentColor; border-radius: 2px;
}
.faq__q .plus::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.faq__q .plus::after { height: 100%; width: 2px; left: 50%; top: 0; transform: translateX(-50%); transition: transform var(--dur-fast) var(--ease-out); }
.faq__item.is-open .plus::after { transform: translateX(-50%) rotate(90deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out); }
.faq__a p { padding-bottom: 1.4rem; color: var(--ice-200); max-width: 62ch; }
/* Seção de FAQ é sempre .section--light (fundo --paper, quase branco) — sem esta
   regra o texto da resposta ficava --ice-200 (quase branco) sobre fundo quase
   branco, ilegível. .faq__q não tinha esse problema por já usar color:inherit. */
.section--light .faq__a p { color: var(--graphite-500); }

/* ---------- footer ---------- */
.footer {
  background: var(--navy-950);
  border-top: 1px solid rgba(246,249,251,.08);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; }
.footer__brand img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }
.footer__cols { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.footer__col h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-300); margin-bottom: 1rem; font-family: var(--font-body); }
.footer__col a, .footer__col p { display: block; color: var(--ice-200); font-size: .92rem; margin-bottom: .55rem; }
.footer__col a:hover { color: var(--ice-100); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(246,249,251,.08);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: rgba(246,249,251,.5);
}

/* ---------- whatsapp flutuante ---------- */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #22c35e;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; color: #06210f; }

/* ---------- utilitários ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.stat-row { display: flex; gap: clamp(1.6rem, 5vw, 3.6rem); flex-wrap: wrap; margin-top: 2.6rem; }
.stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-variant-numeric: tabular-nums; }
[data-count-to] { font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ice-200); opacity: .75; }

/* ---------- transição de cena: a seção logo após o hero "emerge" em vez de só aparecer ---------- */
.section--surface {
  position: relative;
  background: var(--navy-950);
}
.section--surface .reveal,
.section--surface .reveal-group {
  clip-path: inset(0 0 100% 0);
  transform: none;
  opacity: 1;
  transition: clip-path 1.1s var(--ease-out);
}
.section--surface .reveal.in,
.section--surface .reveal-group.in {
  clip-path: inset(0 0 0% 0);
}
@media (prefers-reduced-motion: reduce) {
  .section--surface .reveal, .section--surface .reveal-group { clip-path: none; }
}

.tag-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.tag { padding: .5em 1.1em; border-radius: 999px; border: 1px solid rgba(246,249,251,.2); font-size: .8rem; font-weight: 600; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ice-100); color: var(--ink); padding: 1em 1.4em; border-radius: 8px;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   Páginas internas de conteúdo (região, sobre, FAQ, blog), 12/09/2026.
   Sem vídeo pesado no topo: cabeçalho leve reaproveitando os mesmos
   tokens de cor/tipografia do resto do site.
   ============================================================ */
.page-hero {
  background: var(--navy-950);
  padding: clamp(7.5rem, 14vw, 10.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
/* título de página interna é frase de artigo, não tagline curta: fonte menor,
   largura maior e sem caixa alta, senão título de blog estoura 3 linhas
   (achado rodando scripts/checar-h1.py contra as 14 páginas novas) */
.page-hero .h-display {
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  max-width: 34ch;
  text-transform: none;
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .5em;
  font-size: .8rem; color: var(--ice-200); opacity: .8;
  margin-bottom: 1.4rem;
}
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb span[aria-hidden] { opacity: .5; }
.section--light .breadcrumb { color: var(--graphite-500); }

.page-hero .lede { margin-top: 1.2rem; max-width: 56ch; }

/* ---------- artigo de blog: prosa legível ---------- */
.article { max-width: 68ch; }
.article > * + * { margin-top: 1.3rem; }
.article h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  text-transform: uppercase;
  margin-top: 2.4rem !important;
}
.article h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  margin-top: 1.8rem !important;
}
.article p, .article li { font-size: 1.02rem; color: var(--graphite-500); line-height: 1.75; }
.article ul, .article ol { padding-left: 1.3rem; }
.article li + li { margin-top: .5rem; }
.article a { text-decoration: underline; text-underline-offset: 3px; color: var(--blue-600); }
.article strong { color: var(--ink); }
.article__meta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--graphite-500); opacity: .8;
  margin-bottom: .6rem;
}
.article__source {
  margin-top: 2rem; padding: 1.1rem 1.3rem; border-radius: 14px;
  background: rgba(6,11,18,.05); border: 1px solid rgba(6,11,18,.1);
  font-size: .88rem; color: var(--graphite-500);
}
.article__source a { color: var(--blue-600); }

/* ---------- grade de posts do blog ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.post-card {
  display: flex; flex-direction: column; gap: .8rem;
  border-radius: 20px; overflow: clip;
  background: var(--navy-900); border: 1px solid rgba(246,249,251,.08);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.post-card:hover { transform: translateY(-5px); border-color: rgba(123,195,219,.4); }
.post-card__media { aspect-ratio: 16/10; overflow: clip; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__body { padding: 0 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card__tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-300); }
.post-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.post-card__excerpt { font-size: .9rem; color: var(--ice-200); opacity: .85; }
.section--light .post-card { background: var(--ice-100); border-color: rgba(6,11,18,.08); }
.section--light .post-card__excerpt { color: var(--graphite-500); }

/* ---------- lista de região / bairros atendidos ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.area-list .tag { font-size: .82rem; }