/* ═══════════════════════════════════════════════════════════════
   SEÇÕES — estilos específicos de cada bloco da página.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ HEADER ═══════════════════════════════════════════════ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) ease,
    border-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease;
}

/* Ganha borda e sombra só depois que a pessoa rola */
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 100%;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-muted);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    color: var(--text);
    background: var(--gray-100);
  }
}

/* Seção atualmente visível na tela */
.nav__link.is-active { color: var(--text); font-weight: 650; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease;
}
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(11, 13, 16, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav-scrim.is-open { opacity: 1; }

/* ── Header: mobile ────────────────────────────────────────── */
/* 1024px e não 900: entre ~900 e ~1020 o menu horizontal cabe na
   régua, mas fica espremido e os itens quebram em duas linhas. */
@media (max-width: 1024px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-header);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--container-x) var(--sp-6);
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);

    /* Escondido pela própria altura: funciona com qualquer tamanho */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: var(--sp-4) var(--sp-2);
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    font-size: var(--fs-md);
  }
  .nav__link.is-active::after { display: none; }

  .nav__cta { width: 100%; }

  .header.is-nav-open .nav-toggle__open { display: none; }
  .header.is-nav-open .nav-toggle__close { display: block; }
}

@media (max-width: 420px) {
  .brand__text small { display: none; }
}

/* ═══ 1. HERO ══════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem));
  padding-bottom: var(--section-y);
  overflow: hidden;
}

/* Brilho de fundo bem discreto */
.hero__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(37, 99, 235, 0.09) 0%,
    rgba(37, 99, 235, 0.03) 38%,
    transparent 66%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4.5rem);
}

.hero__content { max-width: 36rem; }

.hero__title {
  margin: var(--sp-5) 0 var(--sp-5);
}

/* Destaque com traço desenhado atrás do texto */
.hero__title .hl {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.hero__title .hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.28em;
  background: rgba(37, 99, 235, 0.14);
  border-radius: 2px;
  z-index: -1;
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin-bottom: var(--sp-8);
}
.hero__sub strong { color: var(--text); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.hero__trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.hero__trust .icon {
  width: 15px;
  height: 15px;
  color: var(--wa);
}

/* ── Mockup decorativo ─────────────────────────────────────── */
.hero__visual {
  position: relative;
  perspective: 1200px;
}

.mockup {
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: rotateY(-7deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero__visual:hover .mockup { transform: rotateY(-2deg) rotateX(0deg); }
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-100);
  border-bottom: 1px solid var(--border);
}
.mockup__bar > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray-300);
}
.mockup__url {
  flex: 1;
  margin-left: var(--sp-3);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--paper);
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
}

.mockup__screen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

/* Blocos "esqueleto" que sugerem o layout de uma página */
.sk { border-radius: var(--r-sm); background: var(--gray-100); }
.sk--title { height: 22px; width: 72%; background: var(--gray-200); }
.sk--line  { height: 10px; width: 100%; }
.sk--short { width: 58%; }

.sk--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  align-self: flex-start;
  margin-top: var(--sp-2);
  padding: 0.6rem 1rem;
  border-radius: var(--r-full);
  background: var(--wa);
  color: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.sk--cta .icon { width: 14px; height: 14px; }

.sk--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  background: none;
}
.sk--grid > div {
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--gray-100);
}

/* Notificação flutuante */
.ping {
  position: absolute;
  right: -8px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  animation: float 5s var(--ease-in-out) infinite;
}
.ping strong { color: var(--text); }
.ping__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wa);
  box-shadow: 0 0 0 3px rgba(14, 128, 116, 0.2);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { max-width: none; }
  .hero__visual { display: none; }
}

/* ═══ 2. SOBRE ═════════════════════════════════════════════ */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}

.about__media {
  /* sticky também serve de referência para o selo posicionado
     por cima — segura o `.about__badge` no lugar. */
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
}

.about__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--gray-100);
  box-shadow: var(--shadow-lg);
}

/* ── Cartão no lugar da foto ───────────────────────────────── */
/* Mesmo espaço quadrado da foto: trocar um pelo outro não mexe
   no layout. Escuro de propósito — ecoa o card de contato e dá
   um ponto de peso visual numa página quase toda branca. */
.id-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--ink-900);
  color: var(--text-invert);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.id-card__glow {
  position: absolute;
  top: -45%;
  right: -25%;
  width: 115%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(37, 99, 235, 0.42) 0%,
    rgba(37, 99, 235, 0.1) 42%,
    transparent 68%
  );
  pointer-events: none;
}

.id-card__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.id-card__body {
  position: relative;
  margin-top: auto;
  padding-top: var(--sp-6);
}

.id-card__name {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.id-card__role {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--gray-400);
}

.id-card__facts {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.id-card__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--gray-400);
}
.id-card__facts .icon {
  width: 13px;
  height: 13px;
  margin-top: 0.25em;
  color: var(--wa);
}

.about__badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.about__badge .icon { width: 14px; height: 14px; color: var(--wa); }

.pillars {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
.pillars li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent);
}
.pillars strong { font-size: var(--fs-base); }
.pillars span { font-size: var(--fs-sm); color: var(--text-muted); }

@media (min-width: 700px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__media {
    /* `relative` e NÃO `static`: aqui só queremos desligar o sticky.
       Com `static` o elemento deixa de ser referência de posição e o
       selo `.about__badge` (que é absolute) escapa e vai ancorar na
       <section>, parando lá embaixo no meio do texto.

       O `top: auto` é obrigatório: a regra base define `top` para o
       sticky, e em `relative` esse valor volta a valer — empurrando
       o cartão 104px para baixo (por cima do título) sem mexer no
       espaço que ele reservou. `static` ignorava o `top`; `relative`
       não. Mexeu num, mexa no outro. */
    position: relative;
    top: auto;
    max-width: 340px;
    margin-bottom: var(--sp-8);
  }
}

/* ═══ 4. PROJETOS ══════════════════════════════════════════ */
.projects {
  display: grid;
  gap: var(--sp-8);
}

.project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .project:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-300);
  }
}

/* Alterna o lado da imagem a cada projeto */
.project:nth-child(even) .project__media { order: 2; }

.project__media {
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--gray-100);
  overflow: hidden;
}
.project__media img {
  width: 100%;
  /* 16/9 = a proporção real dos prints. Precisa bater com o
     width/height do HTML, senão o `cover` corta o print em cima e
     embaixo e o espaço reservado fica errado (salto de layout). */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .project:hover .project__media img { transform: scale(1.03); }
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.project__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.project__title a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--dur-fast) ease;
}
.project__title .icon {
  width: 0.75em;
  height: 0.75em;
  color: var(--gray-400);
  transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .project__title a:hover { color: var(--accent); }
  .project__title a:hover .icon {
    color: var(--accent);
    transform: translate(2px, -2px);
  }
}

.project__specs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.project__specs dt {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--sp-2);
}
.project__specs dd {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .project { grid-template-columns: 1fr; gap: var(--sp-6); }
  .project:nth-child(even) .project__media { order: 0; }
}

/* ═══ 5. COMO FUNCIONA ═════════════════════════════════════ */
.steps {
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Os dois últimos passos ocupam metade cada, centralizados */
  .step:nth-child(4) { grid-column: 1 / 2; }
  .step:nth-child(5) { grid-column: 2 / 4; }
}

@media (min-width: 1040px) {
  .steps { grid-template-columns: repeat(5, 1fr); }
  .step:nth-child(4),
  .step:nth-child(5) { grid-column: auto; }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .step:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

.step__num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--gray-200);
  margin-bottom: var(--sp-2);
}

.step__title { font-size: var(--fs-base); font-weight: 700; }

.step__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ═══ 6. PROVA SOCIAL ══════════════════════════════════════ */
.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--gray-50);
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}
.result__num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
  line-height: 1;
}
.result__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.logos { margin-top: var(--sp-10); }

.logos__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--sp-6);
}

.logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.logos__list li {
  display: grid;
  place-items: center;
  min-width: 130px;
  height: 60px;
  padding: 0 var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
.logos__list span {
  font-size: var(--fs-xs);
  color: var(--gray-400);
}
/* Quando trocar o <span> por <img>, o logo entra em cinza e ganha
   cor no hover — truque clássico para uniformizar logos diferentes. */
.logos__list img {
  max-height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .logos__list img:hover { filter: grayscale(0); opacity: 1; }
}

/* ═══ 7. CONTATO ═══════════════════════════════════════════ */
.contact__card {
  position: relative;
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--ink-900);
  color: var(--text-invert);
  overflow: hidden;
}

.contact__glow {
  position: absolute;
  top: -60%;
  right: -10%;
  width: 620px;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(37, 99, 235, 0.5) 0%,
    rgba(37, 99, 235, 0.12) 40%,
    transparent 68%
  );
  pointer-events: none;
}

.contact__content {
  position: relative;
  max-width: 40rem;
}

.contact__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-4);
}

.contact__text {
  font-size: var(--fs-md);
  color: var(--gray-400);
  margin-bottom: var(--sp-8);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.contact__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--gray-400);
}
.contact__list .icon { width: 16px; height: 16px; }
.contact__list a {
  /* Mesmo motivo do rodapé: alvo de toque de no mínimo 24px. */
  display: inline-block;
  padding-block: 4px;
  transition: color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .contact__list a:hover { color: var(--paper); }
}

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding-top: var(--sp-16);
  /* Espaço para o botão flutuante não cobrir o conteúdo */
  padding-bottom: var(--sp-8);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-10);
}

.footer__tagline {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 24rem;
}

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--sp-4);
}

.footer__nav ul,
.footer__contact ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.footer__nav a,
.footer__contact a {
  /* inline-block + padding para o alvo de toque passar de 24px
     (WCAG 2.5.8). Só o texto dava 19px — dedo não acerta. */
  display: inline-block;
  padding-block: 5px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover,
  .footer__contact a:hover { color: var(--accent); }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.footer__bottom p {
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  /* Não deixa o rodapé ficar embaixo do botão flutuante */
  .footer { padding-bottom: 5.5rem; }
}

/* ═══ BOTÃO FLUTUANTE DE WHATSAPP ══════════════════════════ */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 56px;
  padding: 0 1.1rem;
  border-radius: var(--r-full);
  background: var(--wa);
  color: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(14, 128, 116, 0.36), var(--shadow-md);
  transition:
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.fab .icon { width: 26px; height: 26px; }

/* Escondido enquanto o hero ou a seção de contato estão na tela:
   nos dois lugares já existe um botão grande de WhatsApp, e no
   rodapé ele cobria o texto. Nunca sai do scale(0) — nada no mundo
   real some virando nada. */
.fab.is-hidden {
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.fab__label {
  max-width: 12rem;
  overflow: hidden;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .fab:hover {
    background: var(--wa-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(14, 128, 116, 0.44), var(--shadow-lg);
  }
}

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

.fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--wa-ring);
}

/* No celular vira só o ícone, para não cobrir o conteúdo */
@media (max-width: 640px) {
  .fab {
    width: 56px;
    padding: 0;
    justify-content: center;
  }
  .fab__label {
    /* Some sem sumir para leitores de tela */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}