/* ============================================================
   sections.css
   US-01 — Hero Banner
   Fonte: SPEC-US-01-hero-banner.md §3 (transcrição fiel)
   ============================================================ */

/* ==========================================================================
   Hero Section Base (Mobile First: < 768px)
   ========================================================================== */
.hero {
  min-height: 100vh;
  /* fallback escuro antes de o fundo rotativo carregar (= base da tela 1) */
  background-color: var(--hero-grad-bottom);
  color: var(--color-white);
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 100px;
  padding-bottom: 60px;
  overflow: hidden;
}

/* ── Fundo rotativo do hero: 3 telas em crossfade (JS alterna .is-active) ── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out; /* crossfade "bem suave" */
}

.hero__slide.is-active {
  opacity: 1;
}

/* Tela 1 — gradiente da marca (idêntico ao hero anterior) */
.hero__slide--brand {
  background: linear-gradient(180deg, var(--hero-grad-top) 0%, var(--hero-grad-bottom) 100%);
}

/* Telas 2 e 3 — fotos (assets/banner_saopaulo.jpg · assets/banner_floripa.jpg
   — JPEG otimizado progressivo, ~140KB cada, ante ~767KB/1,8MB dos PNGs) */
.hero__slide--photo {
  background-size: cover;
  background-position: center;
}

/* Overlay em degradê: leve no topo, escurece em direção à base */
.hero__slide--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.40) 45%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.hero__slide--sp {
  background-image: url('../assets/banner_saopaulo.jpg');
}

.hero__slide--floripa {
  background-image: url('../assets/banner_floripa.jpg');
}

/* Marca d'água decorativa — logo_s_background.png (1634x2102),
   ancorada à direita, sangrando topo/base, conforme layout. Vive dentro
   da tela 1 (.hero__slide--brand), então acompanha o fade dela.
   `max-width: none` anula o `img { max-width: 100% }` do reset — senão
   a largura é limitada à do .hero e o "S" deforma (altura fixa + largura
   comprimida). Com a proporção preservada, o excesso horizontal vaza e
   é recortado pelo `overflow: hidden` do .hero. */
.hero__watermark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  height: 118%;
  width: auto;
  max-width: none;
  opacity: var(--watermark-opacity);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-pad-x);
  width: 100%;
}

/* Conteúdo do hero centralizado horizontalmente + acima da marca d'água */
.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Único conteúdo textual do hero desde a Fase 35 (eyebrow e subtitle removidos) */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 auto;
  max-width: 900px;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hero__scroll-dot {
  width: 4px;
  height: 8px;
  background-color: var(--color-taupe);
  border-radius: 2px;
  animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   States & Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot {
    animation: none;
  }

  /* fundo rotativo do hero: sem crossfade (o JS também congela na tela 1) */
  .hero__slide {
    transition: none;
  }
}


/* ============================================================
   US-02 — Comunicado ao Mercado
   Fonte: SPEC-US-02-comunicado-ao-mercado.md §3 (transcrição fiel)
   ============================================================ */

/* --- Base Styles (Mobile First: < 768px) --- */
.comunicado {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: var(--section-pad-y) var(--section-pad-x);
  position: relative;
  overflow: hidden;
}

.comunicado__container {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  /* fade-in de entrada (JS adiciona .is-visible) */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.comunicado__container.is-visible {
  opacity: 1;
  transform: none;
}

.comunicado__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-lima);
  letter-spacing: var(--eyebrow-tracking);
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Marcador verde à esquerda do texto — assets/marcador_verde.png (15x15) */
.comunicado__eyebrow-mark {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  display: block;
}

/* "Sales Costa Advogados" destacado em Lima no texto da seção */
.comunicado__brand {
  color: var(--color-lima);
}

.comunicado__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comunicado__paragraph {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-light);
  font-weight: 400; /* ajuste: era 300 */
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .comunicado__container {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   US-03 — Sobre o Escritório
   Fonte: SPEC-US-03-sobre-o-escritorio.md §3 (transcrição fiel)
   ============================================================ */

/* --- Base Styles (Mobile-First, < 768px) --- */
.sobre {
  position: relative;
  background-color: var(--color-off-white);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  overflow: hidden; /* contain animations + watermark bleed */
  border-bottom: 2px solid #e9e4d9; /* ajuste: substitui o <hr> .sobre__divider */
}

/* Marca d'água (assets/logo_s_background.png, 1634x2102) — fundo claro:
   filter brightness(0) transforma o "S" claro em cinza-escuro sutil. */
.sobre__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 1100px);
  height: auto;
  opacity: var(--watermark-opacity);
  filter: brightness(0);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.sobre__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: var(--container-max);
  margin-inline: auto;
}

.sobre__col-left {
  position: relative;
  width: 100%;
}

/* Marcador verde grande (assets/marcador_verde_big.png, 74x74) — bloco
   decorativo "L" no canto superior direito da coluna, conforme referência. */
.sobre__badge {
  position: absolute;
  top: -8px;
  right: 0;
  width: 44px;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Eyebrow "SOBRE" com marcador ciano à esquerda */
.sobre__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-cyan);
  letter-spacing: var(--eyebrow-tracking);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.sobre__eyebrow-mark {
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
}

.sobre__headline {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-dark);
  hanging-punctuation: first;
}

.sobre__col-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sobre__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sobre__intro-text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-dark-alt);
}

/* "Sales Costa Advogados" em destaque (peso, sem troca de cor) no texto de intro */
.sobre__brand {
  font-weight: 600;
}

.sobre__pillars {
  display: flex;
  flex-direction: column; /* empilhado no mobile (RN-02) */
  gap: 1rem;              /* gap mínimo de 16px — RN-02 */
  list-style: none;
}

.pillar {
  border-top: 1px solid var(--color-border); /* #D9D3CE */
  padding-top: 1rem;
}

.pillar__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500; /* RN-01 — nome em destaque */
  color: var(--color-text-dark);
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}

.pillar__description {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-style: italic; /* RN-01 — descrição em itálico */
  line-height: 1.6;
  color: var(--color-dark-alt);
}

/* --- Tablet Breakpoint (>= 768px) --- */
@media (min-width: 768px) {
  .sobre__pillars {
    flex-direction: row;
    gap: 1.5rem;
  }

  .pillar {
    flex: 1;
  }
}

/* --- Desktop Breakpoint (>= 1024px) --- */
@media (min-width: 1024px) {
  .sobre__container {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .sobre__col-left {
    flex: 0 0 40%;
    max-width: 40%;
    position: sticky;
    top: calc(80px + 2rem);
  }

  .sobre__badge {
    top: -16px;
    width: 84px;
    height: 84px;
  }

  .sobre__col-right {
    flex: 0 0 60%;
    max-width: 60%;
    gap: 2.5rem;
  }

  .sobre__pillars {
    gap: 2rem;
  }
}

/* --- States & Interactions --- */
.sobre a:focus-visible {
  outline: 2px solid var(--color-taupe);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (hover: hover) {
  .pillar {
    transition: border-top-color 0.25s ease;
  }

  .pillar:hover {
    border-top-color: var(--color-taupe);
  }
}


/* ============================================================
   US-04 — Áreas de Atuação (layout da seção + grid)
   Fonte: SPEC-US-04-areas-de-atuacao.md §3 (transcrição fiel)
   ============================================================ */
.areas {
  background-color: var(--color-white);
  color: var(--color-text-dark);
  padding: var(--section-pad-y) var(--section-pad-x);
}

.areas__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.areas__header {
  margin-bottom: 48px;
}

.areas__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-taupe);
  letter-spacing: var(--eyebrow-tracking);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.areas__eyebrow-mark {
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
}

.areas__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-text-dark);
  max-width: 700px;
}

/* "cobrir todas as dimensões" destacado em Taupe (Fase 30) */
.areas__title-accent {
  color: var(--color-taupe);
}

.areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .areas__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}


/* ============================================================
   Animação genérica de entrada — .animate-fade-up
   (usada pela US-03 em diante; observada por js/animations.js)
   ============================================================ */
.animate-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-up[data-delay="100"] { transition-delay: 100ms; }
.animate-fade-up[data-delay="200"] { transition-delay: 200ms; }
.animate-fade-up[data-delay="300"] { transition-delay: 300ms; }
.animate-fade-up[data-delay="400"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   US-05 — Por Que Sales Costa (Diferenciais)
   Fonte: SPEC-US-05-diferenciais-atendimento.md §3 (transcrição fiel)
   ============================================================ */

/* --- Base styles (mobile-first) --- */
.diferenciais {
  background-color: var(--color-dark);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  width: 100%;
  overflow-x: hidden;
}

.diferenciais__container {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.diferenciais__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.diferenciais__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-lima);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  line-height: 1;
}

.diferenciais__eyebrow-mark {
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
}

.diferenciais__heading {
  position: relative;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.25;
  max-width: 33ch; /* ajuste (Fase 31): era 30ch */
}

/* Marcador verde grande — mesmo padrão do .sobre__badge, ancorado ao título */
.diferenciais__badge {
  position: absolute;
  top: -45px; /* ajuste (Fase 32): era -16px — evita sobrepor o texto no mobile */
  right: 0;
  width: 44px;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1024px) {
  .diferenciais__badge {
    top: -40px; /* ajuste (Fase 31): era -16px */
    width: 84px;
    height: 84px;
  }
}

/* "orquestramos cada detalhe" destacado em Lima (Fase 30) */
.diferenciais__heading-accent {
  color: var(--color-lima);
}

/* --- Grid (mobile: 1 coluna) --- */
.diferenciais__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* --- Card --- */
.diferencial-card {
  position: relative;
  background-color: var(--color-dark-alt);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    border-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .diferencial-card {
    opacity: 1;
    transform: none;
    transition: border-color 0.3s ease;
  }
}

/* Marcador decorativo no canto superior direito — assets/marcador_verde.png (15x15) */
.diferencial-card__corner {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 15px;
  height: 15px;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* Número indicador em destaque (substitui o ícone) */
.diferencial-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-taupe);
}

.diferencial-card__title {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.diferencial-card__desc {
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  margin: 0;
  margin-top: revert; /* ajuste solicitado */
}

/* --- Tablet (>= 768px) --- */
@media (min-width: 768px) {
  .diferenciais__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .diferencial-card {
    padding: 2rem;
  }
}

/* --- Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
  .diferenciais__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .diferencial-card {
    align-self: stretch;
    padding: 2.5rem 2rem;
  }

  .diferencial-card__desc {
    margin-top: auto;
  }
}

/* --- States & interactions --- */
.diferencial-card:hover {
  border-color: rgba(228, 255, 143, 0.35); /* --color-lima @ 35% */
}

.diferencial-card:focus-visible {
  outline: 2px solid var(--color-lima);
  outline-offset: 4px;
}

/* --- Animation (classe injetada pelo IntersectionObserver) --- */
.diferencial-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   US-06 — Em Números (Métricas de Autoridade)
   Fonte: SPEC-US-06-em-numeros.md §3 (transcrição fiel)
   ============================================================ */

/* --- Base (mobile-first, < 768px) --- */
/* Fundo Lima (#E4FF8F) conforme referência do layout sales-costa-layout1.png:
   faixa lima, números quase-pretos, labels quase-pretas, SEM divisores verticais. */
.numeros {
  background-color: var(--color-lima);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
}

.numeros__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2x2 */
  gap: clamp(2rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2rem);
  max-width: var(--container-max);
  margin-inline: auto;
}

.numeros__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem; /* ajuste: era 0.5rem — respiro extra com labels maiores */
  padding-block: 0.75rem;
  border-right: none; /* sem divisor no mobile */
  /* estado inicial para animação de entrada (JS adiciona .is-visible) */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.numeros__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger entre os 4 itens */
.numeros__item:nth-child(1) { transition-delay: 0ms; }
.numeros__item:nth-child(2) { transition-delay: 80ms; }
.numeros__item:nth-child(3) { transition-delay: 160ms; }
.numeros__item:nth-child(4) { transition-delay: 240ms; }

.numeros__value-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}

.numeros__count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--color-text-dark);
  line-height: 1;
  display: inline-block;
  min-width: 2ch;             /* evita layout shift durante a contagem */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.numeros__suffix {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  color: var(--color-text-dark); /* quase-preto sobre a faixa lima (ref. layout1) */
  line-height: 1;
}

/* ajuste: textos passaram de rótulos curtos (2-3 palavras, uppercase) para
   frases descritivas completas — uppercase + tracking largo fica ilegível
   nesse comprimento. Redesenhado para leitura em sentence case, com
   max-width para controlar o comprimento da linha. */
.numeros__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-text-dark); /* quase-preto sobre a faixa lima (ref. layout1) */
  line-height: 1.5;
  max-width: 26ch;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .numeros__item,
  .numeros__item.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Tablet (>= 768px): 4 colunas em linha, SEM divisores (ref. layout1) --- */
@media (min-width: 768px) {
  .numeros__container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .numeros__item {
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
}

/* --- Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
  .numeros__item {
    padding-block: 1.25rem;
    padding-inline: clamp(1.5rem, 3vw, 3rem);
  }

  .numeros__label {
    font-size: 0.875rem; /* ajuste: era 0.75rem (labels agora são frases, não rótulos curtos) */
    max-width: 24ch;
  }
}


/* ============================================================
   US-07 — Associações e Reconhecimentos
   (substitui "Depoimentos" — componente novo; SPEC-US-07 reescrita)
   ============================================================ */

/* --- Base (mobile-first, < 768px) --- */
.associacoes {
  background-color: var(--color-off-white);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
}

.associacoes__container {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Eyebrow — mesmo padrão visual de .areas__eyebrow (marcador areia + Taupe) */
.associacoes__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-taupe);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  margin-bottom: 40px;
}

.associacoes__eyebrow-mark {
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
}

/* Bloco em destaque: logo OAB + lista de comissões (centralizado — Fase 30,
   exceto o eyebrow, que permanece à esquerda) */
.associacoes__featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.associacoes__oab-logo {
  height: 96px;
  width: auto;
}

.associacoes__commissions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.associacoes__commissions li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-dark);
  line-height: 1.5;
  text-align: center;
}

/* Logos de institutos/premiações — centralizados (Fase 30) */
.associacoes__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 3.5rem);
}

.associacoes__logos img {
  height: 100px; /* ajuste (Fase 34): mobile era 140px */
  width: auto;
}

/* --- Tablet (>= 768px) --- */
@media (min-width: 768px) {
  .associacoes__featured {
    flex-direction: row;
    justify-content: center; /* Fase 30: centraliza o par logo+lista na linha */
    align-items: center;
    gap: 48px;
  }

  .associacoes__oab-logo {
    height: 120px;
    flex: 0 0 auto;
  }

  .associacoes__logos img {
    height: 140px; /* tablet/desktop mantêm 140px (Fase 34) */
  }

  .associacoes__commissions {
    align-items: flex-start; /* lista fica alinhada à esquerda ao lado do logo */
  }

  .associacoes__commissions li {
    text-align: left;
  }
}

/* --- Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
  .associacoes__oab-logo {
    height: 125px; /* ajuste (Fase 34): era 130px (Fase 33) / 140px (Fase 31) */
  }

  /* respiro extra entre o bloco OAB+comissões e a linha de logos */
  .associacoes__logos {
    margin-top: 80px; /* ajuste (Fase 33) — só no desktop */
  }
}


/* ============================================================
   US-08 — Nossa Equipe (Sócios Responsáveis)
   Fonte: SPEC-US-08-nossa-equipe-socios.md §3 (transcrição fiel)
   + ajustes: eyebrow ciano com marcador, título weight 600
   ============================================================ */

/* --- Base (mobile-first, < 768px) --- */
.equipe {
  background-color: var(--color-white);
  color: var(--color-text-dark);
  padding: var(--section-pad-y) var(--section-pad-x);
}

.equipe__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.equipe__header {
  margin-bottom: 48px;
}

/* Eyebrow — cor ciano #3DD6D0 + marcador ciano à esquerda */
.equipe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-cyan); /* #3DD6D0 */
  letter-spacing: var(--eyebrow-tracking); /* 3px — token global */
  margin-bottom: 16px;
  text-transform: uppercase;
}

.equipe__eyebrow-mark {
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
}

.equipe__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.25;
  font-weight: 600; /* ajuste — a spec previa 400 */
  color: var(--color-text-dark);
}

/* ── Carrossel (Fase 29): 2 telas — "Líderes" / "Equipe" ── */
.equipe__carousel {
  overflow: hidden;
  position: relative;
}

.equipe__track {
  display: flex;
  width: 200%; /* 2 telas × 100% */
  transition: transform 0.5s ease;
}

.equipe__screen {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.equipe__controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.equipe__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
  .equipe__arrow:hover {
    border-color: var(--color-taupe);
    background-color: var(--color-off-white);
  }
}

.equipe__arrow:focus-visible {
  outline: 2px solid var(--color-taupe);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .equipe__track {
    transition: none;
  }
}

/* --- Tablet/Desktop (>= 768px): 2 cards lado a lado por tela --- */
@media (min-width: 768px) {
  .equipe__screen {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* tela com 1 card só ocupa a 1ª coluna */
    gap: 2.5rem;
    align-items: start;
  }
}


/* ============================================================
   US-09 — Fale Conosco (Formulário de Contato)
   Fonte: SPEC-US-09-fale-conosco-formulario.md §3 (transcrição fiel)
   + ajustes: fundo --color-footer-dark, eyebrow/ícones em Lima com marcador verde
   ============================================================ */

/* --- Base (mobile-first, < 1024px): 1 coluna --- */
.contato {
  /* ajuste: mesmo tom escuro do rodapé (#2B2D30), a pedido — dá continuidade
     visual entre a seção de contato e o <footer>. */
  background-color: var(--color-footer-dark);
  color: var(--color-white);
  padding: var(--section-pad-y) var(--section-pad-x);
}

.contato__container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Eyebrow — marcador verde à esquerda, texto em Lima */
.contato__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-lima); /* ajuste: era --color-taupe */
  letter-spacing: var(--eyebrow-tracking); /* 3px — token global */
  margin-bottom: 16px;
  text-transform: uppercase;
}

.contato__eyebrow-mark {
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
}

.contato__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.25;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 16px;
}

.contato__details {
  margin-top: 36px; /* ajuste: preenche o espaço do .contato__subtitle removido */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contato__detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-light);
  font-size: 0.9375rem;
}

.contato__detail-item svg {
  color: var(--color-lima); /* ajuste: era --color-taupe */
  flex-shrink: 0;
}

/* 2 endereços (SP + Florianópolis) — ícone alinhado ao topo do bloco de 2 linhas */
.contato__detail-item--address {
  align-items: flex-start;
}

.contato__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contato__address-city {
  color: var(--color-white);
  font-weight: 600;
}

.contato__address-street {
  color: var(--color-text-light);
}

.contato__link {
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contato__link:hover {
  color: var(--color-taupe);
}

/* --- Desktop (>= 1024px): 2 colunas assimétricas 45/55 --- */
@media (min-width: 1024px) {
  .contato__container {
    flex-direction: row;
    align-items: flex-start;
  }

  .contato__info {
    flex: 0 0 45%;
  }

  .contato__form-wrapper {
    flex: 0 0 55%;
  }
}


/* ============================================================
   US-10 — Rodapé Institucional & Navegação Global
   Fonte: SPEC-US-10-rodape-institucional.md §3 (transcrição fiel)
   ============================================================ */

/* --- Base (mobile-first, < 768px) --- */
.site-footer {
  background-color: var(--color-footer-dark);   /* #2B2D30 */
  color: var(--color-text-light);               /* #D1D5DB */
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  padding-inline: var(--section-pad-x);

  /* Fade-in trigger (JS adiciona .is-visible) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.site-footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer__inner {
  max-width: var(--container-max);   /* 1200px */
  margin-inline: auto;
}

/* ── TOP ROW ── */
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

/* Wordmark do rodapé — assets/logo_salescosta.png (520x44) */
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 44px;
  transition: opacity 0.2s ease;
}

/* .footer__logo-mark removida (Fase 28) — rodapé usa só o wordmark */

.footer__logo-word {
  display: block;
  height: 18px;
  width: auto;
}

/* Nav list */
.footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Nav links */
.footer__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-body);         /* 1rem */
  font-weight: 400;
  color: var(--color-taupe);           /* #AA9B8F */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                    /* touch target >= 44px */
  padding-inline: 0.5rem;
  transition: color 0.2s ease;
}

/* Divider */
.footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-block: 2rem;
}

/* ── BOTTOM ROW ── */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.footer__copyright,
.footer__credit {
  font-family: var(--font-body);
  font-size: 0.8125rem;   /* 13px */
  font-weight: 400;
  color: rgba(209, 213, 219, 0.6);   /* --color-text-light a 60% */
  line-height: 1.5;
}

/* Crédito de desenvolvimento — lado direito da linha de baixo (>= 768px) */
.footer__credit-link {
  color: var(--color-taupe);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__credit-link:hover {
  color: var(--color-white);
}

.footer__credit-link:focus-visible {
  color: var(--color-white);
  outline: 2px solid var(--color-lima);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- Tablet (>= 768px) --- */
@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .footer__nav-list {
    flex-direction: row;
    gap: 0.25rem;
  }

  .footer__nav-link {
    padding-inline: 0.75rem;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

/* --- Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
  .footer__nav-list {
    gap: 0.5rem;
  }

  .footer__nav-link {
    padding-inline: 1rem;
    font-size: 0.9375rem;   /* 15px */
  }
}

/* --- States & Interactions --- */
.footer__logo:hover,
.footer__logo:focus-visible {
  opacity: 0.8;
}

.footer__nav-link:hover {
  color: var(--color-white);
}

.footer__nav-link:focus-visible {
  color: var(--color-white);
  outline: 2px solid var(--color-lima);   /* #E4FF8F */
  outline-offset: 4px;
  border-radius: 2px;
}

.footer__logo:focus-visible {
  outline: 2px solid var(--color-lima);
  outline-offset: 4px;
  border-radius: 2px;
}

.footer__nav-link:active {
  opacity: 0.7;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .site-footer {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .footer__logo,
  .footer__nav-link,
  .footer__credit-link {
    transition: none;
  }
}