/* ===========================================================================
   Passos Costa Advogados — Landing Page
   Estilos principais · desktop-first (1440)
   =========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-primary);
  display: inline-block;
}
.eyebrow--on-dark { color: var(--color-accent-secondary); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}
.section { padding-block: var(--spacing-4xl); scroll-margin-top: 90px; }
.section--tight { padding-block: var(--spacing-3xl); }

.section-head { max-width: 760px; margin-bottom: var(--spacing-2xl); }
.section-head .eyebrow { margin-bottom: var(--spacing-md); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: var(--spacing-md); color: var(--color-text-secondary); font-size: var(--fs-body-lg); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-weight: 600; font-size: 15px;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent-primary); color: var(--color-text-on-emphasis); }
.btn--primary:hover { background: var(--color-bg-emphasis); }
.btn--on-dark { border: 1.5px solid var(--color-accent-secondary); color: var(--color-text-on-emphasis); }
.btn--on-dark:hover { background: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  border: 1.5px solid currentColor; font-size: 13px; line-height: 1;
}

/* ===========================================================================
   HEADER / NAV
   =========================================================================== */
/* estado inicial (desktop): menu numa barra clara ancorada na base do hero */
.site-header {
  position: absolute; left: 0; right: 0; z-index: 50;
  background: transparent;
}
.nav {
  display: flex; align-items: stretch; justify-content: flex-start;
  height: 76px;
}
/* a barra clara que envolve logo + links */
.nav__bar {
  position: relative;
  display: flex; align-items: center; gap: clamp(28px, 4vw, 64px);
  height: 100%;
  margin-left: auto;
  padding-inline: clamp(28px, 4vw, 72px) 0;
  background: var(--color-bg-base);
}
/* o fundo claro sangra do fim da barra até a borda direita da tela */
.nav__bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw;
  background: var(--color-bg-base);
}
/* estado fixo: estaciona no topo, barra clara full-width */
.site-header.is-stuck {
  position: fixed; top: 0; bottom: auto;
  background: rgba(232, 234, 230, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border-hairline);
  animation: slideDown var(--dur-fade) var(--ease);
}
.site-header.is-stuck .nav { justify-content: stretch; }
.site-header.is-stuck .nav__bar {
  margin-left: 0; flex: 1; justify-content: space-between;
  padding-inline: 0; background: transparent;
}
.site-header.is-stuck .nav__bar::after { display: none; }
/* no desktop a barra do menu começa exatamente na ponta direita do box (--hero-cut-w) */
@media (min-width: 1200px) {
  .site-header:not(.is-stuck) .nav__bar { margin-left: var(--hero-cut-w); }
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* logo: no desktop a barra é clara → sempre o logo colorido (o branco é só p/ mobile) */
.nav__logo { display: flex; align-items: center; }
.nav__logo-img { height: 38.5px; width: auto; }
.nav__logo-img--light { display: none; }
.nav__links { display: flex; gap: clamp(22px, 2.6vw, 44px); }
.nav__links a {
  font-size: 15px; font-weight: 600; color: var(--color-accent-primary);
  white-space: nowrap;
  position: relative; padding-block: 4px;
  transition: color var(--dur-micro) var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--color-accent-primary); transition: width var(--dur-micro) var(--ease);
}
.nav__links a:hover { color: var(--color-bg-emphasis); }
.nav__links a:hover::after { width: 100%; background: var(--color-bg-emphasis); }
.nav__toggle { display: none; color: var(--color-accent-primary); }

/* ===========================================================================
   HERO
   =========================================================================== */
/* largura do box do texto = ponto onde a barra do menu começa (mantém alinhamento) */
:root { --hero-cut-w: 480px; }
.hero { position: relative; min-height: 100vh; background: var(--color-bg-emphasis); overflow: hidden; }

/* fundo por banner: 3 imagens sobrepostas, só a ativa aparece (fade sincronizado à aba) */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
  opacity: 0; transition: opacity var(--dur-section) var(--ease);
  will-change: opacity;
}
.hero__bg.is-active { opacity: 1; }
/* imagem por banner (desktop = paisagem). Definidas no CSS p/ trocar por art direction
   no mobile — o navegador baixa só a versão que casa com o media query ativo. */
.hero__bg[data-index="0"] { background-image: url("../assets/img/stock/hero-holding.webp"); }
.hero__bg[data-index="1"] { background-image: url("../assets/img/stock/hero-estrangeiros.webp"); }
.hero__bg[data-index="2"] { background-image: url("../assets/img/stock/hero-consultoria.webp"); }
/* scrim verde: escurece esquerda + base para o texto creme ter contraste sobre a foto */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,88,61,.94) 0%, rgba(6,88,61,.80) 28%, rgba(6,88,61,.34) 58%, rgba(6,88,61,.06) 100%),
    linear-gradient(0deg, rgba(6,88,61,.72) 0%, rgba(6,88,61,0) 42%);
}
@media (prefers-reduced-motion: reduce) { .hero__bg { transition: none; } }

/* recorte: box vazado (só borda) sobre o banner, alinhado à base do menu */
.hero__inner { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 76px; }
.hero__panel { width: var(--hero-cut-w); max-width: 100%; }

/* menu de banners: rótulo empilhado + linha (a linha ativa também é o timer de troca) */
.hero__tabs { display: flex; flex-direction: column; margin-bottom: var(--spacing-lg); }
.hero__tab {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: var(--spacing-xs) 0 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  color: var(--color-text-on-emphasis);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease);
}
.hero__tab:hover { opacity: .85; }
.hero__tab.is-active { opacity: 1; font-weight: 700; }
.hero__tab-bar {
  position: relative; display: block; margin-top: var(--spacing-xs);
  height: 1px; background: var(--color-border-on-emphasis); overflow: hidden;
}
.hero__tab-progress { position: absolute; inset: 0; width: 0%; background: var(--color-accent-secondary); }
.hero__tab.is-active .hero__tab-bar { height: 2px; }

.hero__cut {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px;
  /* min-height (e não height) para o box crescer se a frase de algum banner
     for mais alta que o previsto, em vez de cortar o texto no overflow */
  min-height: 460px;
  width: 100%;
  padding: 29px;
  border: 1px solid var(--color-bg-base);
  position: relative;
  overflow: hidden;
}
/* título + apoio trocam juntos a cada banner → o fade é do bloco, não de cada texto */
.hero__copy {
  display: flex; flex-direction: column; gap: var(--spacing-sm);
  transition: opacity 260ms var(--ease);
}
.hero__copy.is-fading { opacity: 0; }
.hero__title {
  font-family: var(--font-display);
  font-size: 39px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.44px;
  color: var(--color-text-on-emphasis);
}
.hero__title b { font-weight: 700; }
.hero__lead {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(244, 245, 242, .82);
}
.hero__actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.hero__actions .btn--on-dark { color: var(--color-accent-secondary); }

/* ===========================================================================
   DORES
   =========================================================================== */
/* head centralizado (conforme Figma) */
.dores .section-head { max-width: 760px; margin-inline: auto; text-align: center; }
.dores .section-head p { margin-inline: auto; max-width: 640px; }

.dores__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
  align-items: stretch;
}

.dor {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-fade) var(--ease), transform var(--dur-fade) var(--ease);
}
.dor:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }

/* área de imagem — cross-fade entre dois estados no hover */
.dor__media {
  position: relative;
  aspect-ratio: 291 / 222;
  background: #d9d9d9;
  overflow: hidden;
}
.dor__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-section) var(--ease),
              transform var(--dur-section) var(--ease);
}
/* estado 1 (padrão): visível */
.dor__img--a { opacity: 1; }
/* estado 2 (hover): oculto até o hover */
.dor__img--b { opacity: 0; }

.dor:hover .dor__img,
.dor:focus-within .dor__img { transform: scale(1.05); }
.dor:hover .dor__img--a,
.dor:focus-within .dor__img--a { opacity: 0; }
.dor:hover .dor__img--b,
.dor:focus-within .dor__img--b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dor__img { transition: opacity 0.2s linear; }
  .dor:hover .dor__img,
  .dor:focus-within .dor__img { transform: none; }
}

.dor__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 35px 20px 16px;
}
.dor__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--color-text-primary);
}
.dor__text { color: var(--color-text-secondary); }

/* stagger da entrada (reveal) */
.dores__grid .dor:nth-child(1) { transition-delay: 0ms; }
.dores__grid .dor:nth-child(2) { transition-delay: 80ms; }
.dores__grid .dor:nth-child(3) { transition-delay: 160ms; }
.dores__grid .dor:nth-child(4) { transition-delay: 240ms; }

/* ===========================================================================
   SOLUÇÃO (scroll-stacking)
   =========================================================================== */
.solucao { background: var(--color-bg-emphasis); color: var(--color-text-on-emphasis); }
.solucao .section-head h2 { color: var(--color-text-on-emphasis); }
.solucao .section-head p { color: rgba(244,245,242,.7); }
/* cabeçalho da seção fixa (pausa) logo abaixo do menu enquanto os cards rolam.
   SEM z-index: os cards (que vêm depois no HTML) passam POR CIMA do cabeçalho. */
.solucao .container { position: relative; }
.solucao .section-head {
  position: sticky;
  top: var(--sol-head-top, 88px);
  max-width: 760px; margin-inline: auto;
  text-align: center;
}
.solucao .section-head p { margin-inline: auto; max-width: 640px; }
.stack {
  position: relative;
  --stack-top: 300px;   /* recalculado no JS: base do cabeçalho fixo + folga */
  --stack-peek: 84px;   /* altura da faixa visível = linha nº + título */
  --deck-h: 380px;      /* altura de cada âncora (igual p/ todos → saem juntos) */
}
/* ÂNCORA: todos os itens têm o MESMO top e a MESMA altura. Isso faz com que
   entrem escalonados (um de cada vez, pela posição no fluxo) mas se soltem no
   mesmo instante → o bloco inteiro sobe junto, sem desempilhar. */
.stack__item {
  --p: 0;               /* progresso de "ser coberto" (0→1), setado via JS */
  position: sticky; top: var(--stack-top);
  height: var(--deck-h);
}
/* CARD visível: deslocado para baixo pelo peek, deixando à mostra o nº + título
   do card anterior. Todos alinham a base (bottom: 0). */
.stack__card {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: 0;
  background: var(--color-bg-emphasis);
  border-top: 1px solid var(--color-border-on-emphasis);
  border-radius: 16px 16px 0 0;
  padding: 0 var(--spacing-lg) var(--spacing-xl);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: var(--stack-peek) auto;
  column-gap: var(--gutter);
  filter: brightness(calc(1 - 0.28 * var(--p)));
  box-shadow: 0 -16px 34px -16px rgba(0, 0, 0, 0.5);
  transition: filter 120ms linear;
  will-change: filter;
}
.stack__item:nth-child(2) .stack__card { top: var(--stack-peek); }
.stack__item:nth-child(3) .stack__card { top: calc(var(--stack-peek) * 2); }
/* o primeiro não tem card atrás para projetar a sombra de costura */
.stack__item:first-child .stack__card { box-shadow: none; }
.stack__num {
  grid-column: 1; grid-row: 1; align-self: center;
  font-family: var(--font-display); font-size: clamp(48px, 5vw, 64px); font-weight: 700;
  line-height: 1; color: var(--color-accent-secondary); opacity: .9;
}
.stack__title {
  grid-column: 2; grid-row: 1; align-self: center;
  font-family: var(--font-display); font-size: var(--fs-h2); color: var(--color-text-on-emphasis);
}
.stack__desc {
  grid-column: 2; grid-row: 2;
  color: rgba(244,245,242,.78); font-size: var(--fs-body-lg); max-width: 46ch;
}

/* ===========================================================================
   ÁREAS DE ATUAÇÃO (grid assimétrico + acordeão de detalhe)
   =========================================================================== */
.areas__layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--spacing-2xl); align-items: start; }
.areas__sticky { position: sticky; top: 120px; }
.areas__sticky h2 { font-size: var(--fs-h1); }
.areas__sticky p { margin-top: var(--spacing-md); color: var(--color-text-secondary); font-size: var(--fs-body-lg); }
.areas__list { border-top: 1px solid var(--color-border-hairline); }
.area {
  border-bottom: 1px solid var(--color-border-hairline);
}
.area__head {
  width: 100%; text-align: left; display: flex; align-items: center; gap: var(--spacing-md);
  padding-block: var(--spacing-md);
}
.area__num { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em; color: var(--color-accent-primary); width: 32px; flex-shrink: 0; }
.area__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.01em; flex: 1; transition: color var(--dur-micro) var(--ease); }
.area__plus { width: 24px; height: 24px; position: relative; flex-shrink: 0; }
.area__plus::before, .area__plus::after { content: ""; position: absolute; background: var(--color-accent-primary); transition: transform var(--dur-micro) var(--ease); }
.area__plus::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.area__plus::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.area.is-open .area__plus::after { transform: translateX(-50%) scaleY(0); }
.area.is-open .area__title { color: var(--color-accent-primary); }
.area__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-fade) var(--ease); }
.area__panel-inner { padding: 0 0 var(--spacing-md) calc(32px + var(--spacing-md)); color: var(--color-text-secondary); max-width: 60ch; }
.area:hover .area__title { color: var(--color-accent-primary); }

/* lista de serviços dentro do acordeão (só em algumas áreas) */
.area__services { margin-top: var(--spacing-md); }
.area__services-label {
  display: block; margin-bottom: var(--spacing-2xs);
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-accent-primary);
}
.area__services-list { display: grid; gap: var(--spacing-3xs); }
.area__services-list li { position: relative; padding-left: 18px; line-height: 1.5; }
.area__services-list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 8px; height: 1px; background: var(--color-accent-primary);
}

/* Peek no hover: entreabre o card revelando a primeira frase para induzir o clique */
.area:not(.is-open):hover .area__panel { max-height: 2.4em; }
.area:not(.is-open) .area__panel-inner {
  padding-top: var(--spacing-2xs);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fade) var(--ease), transform var(--dur-fade) var(--ease);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
          mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.area:not(.is-open):hover .area__panel-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .area:not(.is-open):hover .area__panel { max-height: 0; }
  .area:not(.is-open) .area__panel-inner { transition: none; }
}

/* ===========================================================================
   DIFERENCIAIS (bloco escuro full-bleed sobre imagem)
   =========================================================================== */
.diferenciais { position: relative; isolation: isolate; }
/* frame recuado 10px das bordas, cantos arredondados */
.diferenciais__bg {
  position: absolute; inset: 20px; z-index: -1;
  border-radius: 17px; overflow: hidden;
  background: url("../assets/img/stock/diferenciais.webp") center / cover no-repeat;
}
/* filtro verde de marca sobre a foto colorida */
.diferenciais__bg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #06583D; mix-blend-mode: multiply;
}
/* scrim sutil p/ garantir leitura do texto sobre a estátua (lado direito mais claro) */
.diferenciais__bg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(6, 40, 30, 0.55) 0%, rgba(6, 40, 30, 0.15) 55%, rgba(6, 40, 30, 0.35) 100%);
}
/* o título em uma linha é mais largo que os 760px padrão da section-head; sem
   soltar a largura, a linha estoura a caixa e vaza toda para a direita (texto
   que não cabe não é centralizado pelo text-align) */
.diferenciais .section-head { max-width: none; margin-inline: auto; text-align: center; }
.diferenciais .section-head h2 { color: var(--color-text-on-emphasis); text-wrap: balance; }
/* o título só cabe em uma linha nas telas largas; abaixo disso quebra em duas (balanceadas) */
@media (min-width: 1000px) { .diferenciais .section-head h2 { white-space: nowrap; } }

.dif__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.dif { border-top: 1px solid rgba(244, 245, 242, 0.28); padding-top: var(--spacing-md); }
.dif h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); letter-spacing: 0; margin-bottom: var(--spacing-2xs); color: var(--color-text-on-emphasis); }
.dif p { color: rgba(244, 245, 242, 0.72); font-size: var(--fs-small); }

/* ===========================================================================
   EQUIPE (editorial: nome display + foto P&B)
   =========================================================================== */
.equipe .section-head { max-width: 760px; margin-inline: auto; text-align: center; }
.equipe__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 397px)); justify-content: center; gap: clamp(48px, 10vw, 160px); margin-top: var(--spacing-2xl); }
.equipe__person { display: flex; flex-direction: column; }
.equipe__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; background: var(--color-bg-soft); margin-bottom: var(--spacing-xs); }
.equipe__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--dur-fade) var(--ease), transform 1.2s var(--ease); }
.equipe__media:hover img { filter: grayscale(0); transform: scale(1.03); }
.equipe__name { font-size: var(--fs-h1); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.equipe__name .nowrap { white-space: nowrap; }
.equipe__role { color: var(--color-accent-primary); font-weight: 600; margin-top: var(--spacing-lg); }
.equipe__creds { margin-top: var(--spacing-sm); border-top: 1px solid var(--color-border-hairline); }
.equipe__creds li { color: var(--color-text-secondary); font-size: var(--fs-small); line-height: 1.5; padding: var(--spacing-2xs) 0; border-bottom: 1px solid var(--color-border-hairline); }
.equipe__langs { margin-top: var(--spacing-sm); font-size: var(--fs-small); color: var(--color-text-primary); }

/* ===========================================================================
   CTA WHATSAPP
   =========================================================================== */
.cta-wa { background: var(--color-bg-emphasis); color: var(--color-text-on-emphasis); }
.cta-wa__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--spacing-2xl); align-items: center; }
.cta-wa h2 { color: var(--color-text-on-emphasis); font-size: var(--fs-h2); }
.cta-wa p { color: rgba(244,245,242,.75); margin-top: var(--spacing-md); font-size: var(--fs-body-lg); }
.cta-wa__action { display: flex; justify-content: flex-end; }

/* ===========================================================================
   CONTATO
   =========================================================================== */
.contato__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.field { display: flex; flex-direction: column; gap: var(--spacing-2xs); margin-bottom: var(--spacing-md); }
.field label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--fs-body);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  color: var(--color-text-primary);
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(8, 121, 85, 0.12);
}
/* campos travados durante o envio — mantêm o visual normal, só bloqueiam a edição */
.field input:disabled, .field textarea:disabled, .field select:disabled {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  -webkit-text-fill-color: var(--color-text-primary);
  opacity: 1; cursor: progress;
}

/* Modal flutuante de feedback do formulário */
.form-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--spacing-lg) var(--spacing-sm);
  pointer-events: none;
}
.form-modal__box {
  position: relative; pointer-events: auto;
  width: min(420px, 100%);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-top: 4px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-md);
  animation: formModalIn var(--dur-fade) var(--ease);
}
.form-modal--error .form-modal__box { border-top-color: #b00020; }
.form-modal__msg { font-size: var(--fs-body); color: var(--color-text-primary); margin: 0; }
.form-modal__close {
  position: absolute; top: var(--spacing-2xs); right: var(--spacing-2xs);
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-full);
  color: var(--color-text-secondary); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.form-modal__close:hover { color: var(--color-text-primary); background: var(--color-bg-base); }
@keyframes formModalIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-modal__box { animation: none; } }

.contato__info { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.info-item { display: flex; gap: var(--spacing-md); align-items: flex-start; }
.info-item__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-bg-soft); display: grid; place-items: center; color: var(--color-accent-primary); }
.info-item__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-secondary); }
.info-item__value { font-size: var(--fs-body); margin-top: 2px; }
.contato__map { margin-top: var(--spacing-2xl); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border-hairline); }
.contato__map iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(0.3); }
.socials { display: flex; gap: var(--spacing-sm); }
.socials a { width: 40px; height: 40px; border: 1px solid var(--color-border-hairline); border-radius: var(--radius-full); display: grid; place-items: center; color: var(--color-text-primary); transition: all var(--dur-micro) var(--ease); }
.socials a:hover { background: var(--color-accent-primary); color: var(--color-text-on-emphasis); border-color: var(--color-accent-primary); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.footer { background: var(--color-bg-emphasis); color: var(--color-text-on-emphasis); padding-block: var(--spacing-3xl) var(--spacing-xl); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); border-bottom: 1px solid var(--color-border-on-emphasis); }
.footer__logo img { height: 36px; }
.footer__tagline { color: rgba(244,245,242,.7); margin-top: var(--spacing-md); max-width: 38ch; }
.footer__col h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-secondary); margin-bottom: var(--spacing-md); font-weight: 600; }
.footer__col a, .footer__col p { color: rgba(244,245,242,.8); display: block; margin-bottom: var(--spacing-2xs); font-size: var(--fs-small); transition: color var(--dur-micro); }
.footer__col a:hover { color: var(--color-text-on-emphasis); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-lg); font-size: var(--fs-small); color: rgba(244,245,242,.72); }
.footer__dev { display: inline-flex; align-items: center; gap: var(--spacing-2xs); color: rgba(244,245,242,.72); transition: opacity var(--dur-micro) var(--ease); }
.footer__dev:hover { opacity: .8; }
.footer__dev-logo { height: 13px; width: auto; display: block; }

/* ===========================================================================
   WHATSAPP FLUTUANTE
   =========================================================================== */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 60px; height: 60px; border-radius: var(--radius-full);
  background: var(--color-accent-primary); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-micro) var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; }

/* ===========================================================================
   REVEAL (scroll)
   =========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-section) var(--ease), transform var(--dur-section) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   RESPONSIVO (ajuste final mobile — desktop-first)
   =========================================================================== */
@media (max-width: 1024px) {
  :root { --margin-x: 48px; }
  .dores__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
  .dif__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
  .areas__layout { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .areas__sticky { position: static; }
  /* mesma animação de scroll-stacking do desktop, só com colunas mais estreitas
     (cabeçalho e cards herdam position: sticky + peek + escurecimento do bloco base) */
  .stack__card {
    grid-template-columns: 72px 1fr;
    column-gap: var(--spacing-sm);
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }
  .cta-wa__inner, .contato__layout, .equipe__grid { grid-template-columns: 1fr; }
  .cta-wa__action { justify-content: flex-start; }
  .equipe__grid { gap: var(--spacing-3xl); }
}

@media (max-width: 768px) {
  /* MENU MOBILE (só aqui): header tradicional fixo no topo, transparente sobre o
     hero e sólido ao rolar. No desktop o menu segue o desenho original (barra clara
     ancorada na base do hero). */
  .site-header {
    position: fixed; top: 0; bottom: auto;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background var(--dur-fade) var(--ease),
                border-color var(--dur-fade) var(--ease),
                box-shadow var(--dur-fade) var(--ease);
    animation: none;
  }
  .nav__bar { margin-left: 0; flex: 1; justify-content: space-between; padding-inline: 0; background: transparent; }
  .nav__bar::after { display: none; }
  .site-header.is-scrolled {
    background: rgba(232, 234, 230, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--color-border-hairline);
    box-shadow: var(--shadow-subtle);
  }
  /* logo: branco sobre o hero → colorido ao rolar (cross-fade) */
  .nav__logo { position: relative; }
  .nav__logo-img { transition: opacity var(--dur-fade) var(--ease); }
  .nav__logo-img--light { display: block; }
  .nav__logo-img--solid { position: absolute; left: 0; top: 0; opacity: 0; }
  .site-header.is-scrolled .nav__logo-img--light { opacity: 0; }
  .site-header.is-scrolled .nav__logo-img--solid { opacity: 1; }
  /* hambúrguer: creme sobre o hero → verde ao rolar */
  .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-text-on-emphasis); }
  .site-header.is-scrolled .nav__toggle { color: var(--color-accent-primary); }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--color-bg-base);
    border-bottom: 1px solid var(--color-border-hairline);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-sm) var(--spacing-md);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  /* dropdown mobile é sempre claro → links escuros nos dois estados do header */
  .site-header .nav__links a,
  .site-header.is-scrolled .nav__links a { color: var(--color-text-primary); padding-block: var(--spacing-sm); }
  .site-header .nav__links a:hover { color: var(--color-accent-primary); }
  .dores__grid, .dif__grid, .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  /* rodapé: crédito longo + OAB empilham (evita aperto lado a lado) */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--spacing-2xs); }
  .hero__inner { padding-bottom: 80px; }
  .hero__panel { width: 100%; }
  /* art direction: no celular usa a versão vertical (retrato) de cada banner, centralizada */
  .hero__bg { background-position: center center; }
  .hero__bg[data-index="0"] { background-image: url("../assets/img/stock/hero-holding-mobile.webp"); }
  .hero__bg[data-index="1"] { background-image: url("../assets/img/stock/hero-estrangeiros-mobile.webp"); }
  .hero__bg[data-index="2"] { background-image: url("../assets/img/stock/hero-consultoria-mobile.webp"); }
  /* box vazado do hero: altura elástica (não corta a frase mais longa nem sobra vão nas curtas) */
  .hero__cut { height: auto; min-height: 360px; gap: 28px; padding: var(--spacing-xl) var(--spacing-md); }
  .hero__title { font-size: 23px; }
  .hero__lead { font-size: 15px; }
  /* Diferenciais: no celular usa o recorte vertical do banner (mostra a estatueta inteira) */
  .diferenciais__bg { background-image: url("../assets/img/stock/diferenciais-mobile.webp"); }
  /* Diferenciais: mais respiro entre o texto e a borda do card (frame recua 20px, container só tinha 24px) */
  .diferenciais .container { padding-inline: var(--spacing-xl); }
  /* Equipe: aproxima os dois sócios (96px de vão é demais no celular) */
  .equipe__grid { gap: var(--spacing-2xl); }
  /* Equipe: no celular a cor da foto é controlada pelo scroll via JS (main.js),
     não pelo hover do desktop — remove a transição do filter para acompanhar
     o dedo sem atraso (mantém a transição do zoom, que não usamos aqui). */
  .equipe__media img { transition: transform 1.2s var(--ease); }
  /* ritmo vertical mais compacto no mobile */
  .section { padding-block: var(--spacing-2xl); }
  .section--tight { padding-block: var(--spacing-xl); }
  .section-head { margin-bottom: var(--spacing-xl); }
  .br-desktop { display: none; }
  /* Áreas de atuação: o título nunca tinha cor própria (só herdava do <button>);
     no Safari iOS o botão sem cor explícita cai no azul padrão do sistema.
     Fixamos a cor de repouso e removemos o peek de hover (meio termo do desktop):
     no toque, o acordeão deve ter só dois estados, fechado e aberto. */
  .area__title { color: var(--color-text-primary); }
  .area:hover .area__title { color: var(--color-text-primary); }
  .area.is-open .area__title { color: var(--color-accent-primary); }
  .area:not(.is-open):hover .area__panel { max-height: 0; }
  .area:not(.is-open) .area__panel-inner { transition: none; }
  /* Dores: no celular não há hover, então a troca de imagem (a → b) é
     controlada pelo scroll via JS (main.js), reaproveitando a mesma
     transição de cross-fade que o desktop usa no :hover. */
  .dor.is-swapped .dor__img {
    transform: scale(1.05);
  }
  .dor.is-swapped .dor__img--a { opacity: 0; }
  .dor.is-swapped .dor__img--b { opacity: 1; }
}