/* ============================================================
   ENCADERMAT CARIMBOS — Landing Page
   ------------------------------------------------------------
   1.  Design tokens (cores, tipografia, espaçamento)
   2.  Reset e base
   3.  Utilitários (container, botões, badges, reveal)
   4.  Header
   5.  Hero
   6.  Faixa de públicos
   7.  Seções genéricas
   8.  Benefícios
   9.  Aplicações (cards)
   10. Processo (passos)
   11. Praticidade (checklist)
   12. Diferenciais
   13. Informações incluídas (chips)
   14. FAQ
   15. CTA final
   16. Rodapé
   17. Botão flutuante WhatsApp
   18. Responsivo
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Cores — navy profissional + verde de ação (WhatsApp) */
  --ink: #0f172a;            /* texto principal */
  --ink-soft: #475569;       /* texto secundário */
  --ink-muted: #64748b;      /* texto de apoio */
  --brand: #0f2e52;          /* navy da marca */
  --brand-strong: #0a2140;   /* navy escuro (hero, rodapé) */
  --accent: #0369a1;         /* azul de destaque */
  --cta: #15803d;            /* verde CTA (AA sobre branco) */
  --cta-hover: #166534;      /* verde CTA hover */
  --wa: #25d366;             /* verde ícone WhatsApp */
  --surface: #ffffff;
  --surface-alt: #f6f8fb;
  --surface-card: #ffffff;
  --border: #e2e8f0;
  --hero-text: #eef4fb;

  /* Tipografia */
  --font-heading: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;

  /* Escala de espaçamento (base 8) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Outros */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-cta: 0 6px 18px rgba(21, 128, 61, 0.32);
  --container: 72rem;
  --header-h: 4.25rem;
}

/* ---------- 2. Reset e base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

p {
  max-width: 65ch;
}

a {
  color: inherit;
}

ul {
  list-style: none;
}

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

::selection {
  background: var(--brand);
  color: #fff;
}

/* ---------- 3. Utilitários ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-8);
}

.section--alt {
  background: var(--surface-alt);
}

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.section__title {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.35rem);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

.section__center {
  text-align: center;
}

.section__center p,
.section__center .section__lead {
  margin-inline: auto;
}

/* Botões — alvo mínimo 48px, feedback de toque */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--cta {
  background: var(--cta);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn--cta:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
}

.btn--cta .btn__icon {
  flex-shrink: 0;
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--sm {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  font-size: 0.9375rem;
  box-shadow: none;
}

.btn__note {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* Revelar ao rolar — o conteúdo é visível por padrão; o estado oculto
   (.reveal--init) só é aplicado via JavaScript, garantindo que nada
   fique invisível se a animação não puder rodar. */
.reveal {
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.reveal--init {
  opacity: 0;
  transform: translateY(22px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal--init {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .card,
  .fab {
    transition: none;
  }
}

/* ---------- 4. Header / Navbar ----------
   Não é fixa: fica só no topo e rola junto com a página. */
.header {
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--brand);
  text-decoration: none;
  flex-shrink: 0;
}

.header__brand-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
}

.header__brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Navegação (desktop) */
.header__nav {
  margin-inline-start: auto;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header__nav-list a {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.header__nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.header__nav-list a:hover {
  color: var(--brand);
}

.header__nav-list a:hover::after {
  transform: scaleX(1);
}

/* Botão hambúrguer (só no mobile) */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.header__toggle span {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Vira "X" quando aberto */
.header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Painel do menu mobile */
.header__mobile {
  display: none;
  border-top: 1px solid var(--border);
  background: #fff;
}

.header__mobile.is-open {
  display: block;
}

.header__mobile-list a {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.header__mobile .btn {
  display: flex;
  margin: var(--space-4) var(--space-5);
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  /* Fundo todo navy, com um brilho azul sutil para dar profundidade */
  background:
    radial-gradient(52rem 32rem at 78% -12%, rgba(3, 105, 161, 0.35), transparent 60%),
    var(--brand-strong);
  color: var(--hero-text);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  /* Coluna do vídeo um pouco maior para dar mais presença à mídia */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-9) var(--space-8);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.hero__badge svg {
  color: var(--wa);
}

.hero__title {
  /* Título longo: tamanho e entrelinha equilibrados, com quebra
     balanceada, para leitura mais harmônica ao lado do vídeo. */
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #fff;
  margin-bottom: var(--space-4);
}

/* Trecho de destaque em dourado */
.hero__title-gold {
  color: #e9c46a;
}

.hero__subtitle {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.2rem);
  color: rgba(238, 244, 251, 0.85);
  margin-bottom: var(--space-6);
}

.hero__audience {
  font-size: 0.9rem;
  color: rgba(238, 244, 251, 0.7);
  font-style: italic;
}

/* ---------- Mídia do hero (vídeo de abertura das caixas) ----------
   Quando o vídeo existir, ele é exibido em loop; enquanto não houver,
   o placeholder ocupa o mesmo espaço reservado, mantendo o layout. */
.hero__visual {
  width: 100%;
}

.hero__media {
  position: relative;
  width: min(100%, 36rem);
  margin-inline: auto;
  /* Proporção do vídeo (1412x1464 ≈ quadrado) para exibir sem corte */
  aspect-ratio: 353 / 366;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Espaço reservado para o vídeo (trocar pelo <video> quando pronto) */
.hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-6);
  color: rgba(238, 244, 251, 0.9);
  background:
    radial-gradient(24rem 18rem at 50% 30%, rgba(3, 105, 161, 0.35), transparent 70%),
    linear-gradient(160deg, #123456, #0a2140);
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
}

.hero__placeholder-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__placeholder-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  max-width: 22rem;
}

.hero__placeholder-hint {
  font-size: 0.8125rem;
  color: rgba(238, 244, 251, 0.6);
}

/* ---------- 6. Faixa de públicos ---------- */
.audience-strip {
  background: var(--brand);
  color: rgba(255, 255, 255, 0.92);
  padding-block: var(--space-4);
}

.audience-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  font-size: 0.9rem;
  font-weight: 600;
}

.audience-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.audience-strip__item svg {
  color: var(--wa);
  flex-shrink: 0;
}

/* ---------- 7. Seções genéricas ---------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

/* ---------- 8. Benefícios ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
  font-weight: 600;
  font-size: 0.95rem;
}

.benefit svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cta);
}

/* ---------- 9. Aplicações (cards) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.1);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: #e8f1f8;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
}

.card__text {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------- 9.1 Modelos (carrossel infinito) ---------- */
.models {
  background: var(--brand-strong);
  color: var(--hero-text);
  overflow: hidden;
}

.models .section__title {
  color: #fff;
}

.models .section__lead {
  color: rgba(238, 244, 251, 0.8);
}

.models .section__eyebrow {
  color: #7dd3fc;
}

.carousel {
  position: relative;
  margin-top: var(--space-6);
  /* Esmaece as bordas laterais da faixa */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* Arrasto horizontal controlado por JS; pan-y preserva a
     rolagem vertical da página ao deslizar sobre a faixa */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carousel:active {
  cursor: grabbing;
}

/* Movimento controlado por JS (main.js, seção 7): rolagem
   automática + arrasto por toque/mouse com inércia */
.carousel__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.carousel__group {
  display: flex;
  gap: var(--space-4);
  padding-right: var(--space-4);
}

.carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 12rem;
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--ink);
}

.carousel__item img {
  display: block;
  width: 100%;
  /* height auto faz o aspect-ratio 1/1 valer (senão o atributo
     height="300" do HTML força um retângulo) → tile quadrado. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  /* O arrasto é do carrossel, não da imagem */
  pointer-events: none;
}

/* Tile placeholder (enquanto não há foto real do projeto).
   Trocar por <img> em .carousel__item quando as fotos existirem. */
.carousel__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #eef4fb, #d7e6f5);
  color: var(--accent);
  pointer-events: none;
}

.carousel__item span {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  /* Reserva espaço de 2 linhas para todos os cards ficarem com a
     mesma altura, independente do tamanho do rótulo. */
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.models__note {
  display: block;
  margin-top: var(--space-5);
  font-size: 0.875rem;
  color: rgba(238, 244, 251, 0.6);
}

/* ---------- 10. Processo (passos) ---------- */
.process {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-7);
  align-items: center;
  margin-block: var(--space-6);
}

.process__media {
  margin: 0;
}

.process__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.process__media figcaption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
}

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
}

/* Processo em grade (usado quando não há imagem ao lado) */
.steps--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Espaço acima e, principalmente, abaixo para o botão do WhatsApp
     não ficar grudado nos cards. */
  margin: var(--space-6) 0 var(--space-7);
}

@media (max-width: 64rem) {
  .steps--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .steps--grid {
    grid-template-columns: 1fr;
  }
}

/* Dentro do processo, o número fica ao lado do texto */
.process .step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: start;
}

.process .step__number {
  margin-bottom: 0;
}

.process .step__title {
  grid-column: 2;
}

.process .step__text {
  grid-column: 2;
}

.process .step__number {
  grid-row: 1 / span 2;
}

.step {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.step__number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.step__title {
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.step__text {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- 11. Praticidade (checklist) ---------- */
.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 1rem;
}

.checklist svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--cta);
}

/* ---------- 12. Diferenciais ---------- */
.local-panel {
  background: var(--brand-strong);
  border-radius: var(--radius-lg);
  color: var(--hero-text);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.local-panel .section__title {
  color: #fff;
}

.local-panel .section__eyebrow {
  color: #7dd3fc;
}

.local-panel p {
  color: rgba(238, 244, 251, 0.82);
}

.local-panel .checklist {
  grid-template-columns: 1fr;
}

.local-panel .checklist svg {
  color: var(--wa);
}

/* ---------- 13. Informações incluídas (chips) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-5);
  max-width: 46rem;
  margin-inline: auto;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
}

.chips svg {
  color: var(--accent);
  flex-shrink: 0;
}

.info-note {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

/* ---------- 14. FAQ ---------- */
.faq {
  max-width: 46rem;
  margin-inline: auto;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq__item[open] {
  border-color: var(--accent);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  min-height: 3rem;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "";
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__question::after {
  transform: rotate(-135deg);
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- 14.1 Faixa de urgência (fim de ano) ---------- */
.urgency {
  --urgency-accent: #b45309;
  background:
    radial-gradient(40rem 24rem at 85% -30%, rgba(245, 158, 11, 0.18), transparent 60%),
    #fff8ef;
  border-block: 1px solid #f3ddbf;
}

.urgency__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.urgency__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--urgency-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}

.urgency__content {
  flex: 1 1 30rem;
}

.urgency__title {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  color: #7c2d12;
  margin-bottom: var(--space-3);
}

.urgency__text {
  color: #92400e;
  font-size: 1.0625rem;
}

.urgency__action {
  flex: 0 0 auto;
}

/* ---------- 15. Rodapé único (fechamento + CTA + info + crédito) ---------- */
.footer {
  background:
    radial-gradient(48rem 30rem at 50% -10%, rgba(3, 105, 161, 0.4), transparent 60%),
    var(--brand-strong);
  color: rgba(238, 244, 251, 0.75);
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.9rem;
}

.footer__inner {
  display: grid;
  gap: var(--space-4);
  text-align: center;
  justify-items: center;
}

.footer__cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.25rem + 1.9vw, 2.4rem);
  line-height: 1.2;
  text-wrap: balance;
  color: #fff;
}

.footer__lead {
  max-width: 46rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  color: rgba(238, 244, 251, 0.82);
  margin-bottom: var(--space-2);
}

.footer .btn--cta {
  margin-top: var(--space-2);
}

.footer__note {
  font-size: 0.875rem;
  color: rgba(238, 244, 251, 0.6);
}

.footer__meta {
  display: grid;
  gap: var(--space-3);
  max-width: 48rem;
  margin-top: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand-line {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  width: 100%;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: rgba(238, 244, 251, 0.5);
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(238, 244, 251, 0.85);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__credit a:hover {
  color: #fff;
}

/* ---------- 17. Botão flutuante WhatsApp (mobile) ---------- */
.fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  transition: transform 0.18s ease;
}

.fab:hover {
  transform: scale(1.07);
}

.fab:active {
  transform: scale(0.95);
}

/* ---------- 18. Responsivo ---------- */
@media (max-width: 64rem) {
  .benefits,
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .process__media {
    max-width: 34rem;
    margin-inline: auto;
  }

  .local-panel {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 48rem) {
  .section {
    padding-block: var(--space-7);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-block: var(--space-7);
    gap: var(--space-6);
    text-align: center;
  }

  .hero__inner .btn--cta {
    width: 100%;
  }

  /* No mobile a mídia do hero fica abaixo do texto (ordem natural) */
  .hero__media {
    width: min(100%, 22rem);
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .benefits,
  .cards,
  .steps,
  .checklist {
    grid-template-columns: 1fr;
  }

  /* Mobile: esconde a navbar desktop e mostra o hambúrguer */
  .header__cta,
  .header__nav {
    display: none;
  }

  .header__toggle {
    display: flex;
  }

  .local-panel {
    padding: var(--space-5);
  }

  /* Espaço para o botão flutuante não cobrir o rodapé */
  .footer {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 48.0625rem) {
  /* Botão flutuante apenas no mobile */
  .fab {
    display: none;
  }

  /* Hambúrguer e painel mobile só existem no mobile.
     Inclui .is-open para vencer a regra de abertura por especificidade. */
  .header__toggle,
  .header__mobile,
  .header__mobile.is-open {
    display: none;
  }
}