/*
 * style-pages.css — seções das landing pages e das páginas internas.
 *
 * Tokens, componentes globais (.botao, .rotulo…), Home e chrome (cabeçalhos e
 * rodapés) ficam no style.css. Aqui entram só as seções das outras páginas,
 * em blocos comentados por página e sempre com o escopo da página
 * (`.lp--<slug>`), porque os blocks BEM se repetem entre páginas com
 * desenhos diferentes (hero, cta, areas…). Só tokens do :root (spec 2).
 * Carregado fora da Home (functions.php › creact_assets).
 */

/* ==========================================================================
   LPs — COMUM
   Rótulo de seção: nas LPs o Figma desenha o texto com a linha inteira (18
   em 12/150%), sem o corte de altura que o componente global usa na Home.
   ========================================================================== */
/* Quanto o card do CTA final sobe sobre a caixa do FAQ (usado pelas duas
   seções — ver "LPs — CTA FINAL"). */
.lp { --lp-cta-sobe: 235px; }
@media (max-width: 768px) {
  .lp { --lp-cta-sobe: 397px; }
  .lp--direito-civil { --lp-cta-sobe: 416px; } /* card com o título em 5 linhas */
  .lp--assessoria-empresarial { --lp-cta-sobe: 385px; } /* Figma da Assessoria */
}

.lp .rotulo__texto {
  line-height: var(--lh-text);
  text-box: normal;
}
/* Exceção: nas seções compartilhadas com a Home (Depoimentos) o Figma das LPs
   mantém o rótulo aparado, igual ao componente global */
.lp .depoimentos .rotulo__texto {
  line-height: inherit;
  text-box: trim-both cap alphabetic;
}

/* ==========================================================================
   DIREITO TRABALHISTA — 01 HERO (foto à esquerda + texto)
   Figma 2699:38744 (desktop) / 2699:42258 (mobile)
   Desktop: 955 de altura; texto de 629 centralizado entre o fim do cabeçalho
   (+92) e o fundo (120). A foto fornecida já traz os 2 gradientes do Figma.
   Mobile: recorte próprio da foto no topo (390×633) e o texto no fim, a 64
   do fundo, começando a 350/633 da altura da foto; gradientes por CSS.
   Tablet (sem desenho): foto de fundo com o advogado à direita e o texto
   embaixo, sobre um gradiente como o do mobile.
   Entrada: fade up escalonado (rótulo → h1 → subtítulo → botão → selos).
   ========================================================================== */
.lp--direito-trabalhista .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 955px;
  display: flex;
  align-items: center;
  padding-top: calc(var(--cabecalho-lp-topo) + var(--cabecalho-lp-altura) + var(--space-80) + var(--space-12));
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Foto ------------------------------------------------------------------- */
.lp--direito-trabalhista .hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.lp--direito-trabalhista .hero__image-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 50%; /* o preto do gradiente fica atrás do texto */
}

/* --- Texto -------------------------------------------------------------------- */
.lp--direito-trabalhista .hero__texto {
  width: 629px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.lp--direito-trabalhista .hero__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-trabalhista .hero__rotulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-16);
  line-height: 1.3; /* Figma: altura automática da IBM Plex (21 em 16) */
  line-height: round(1.3em, 1px);
  color: var(--color-texto-secundario-escuro);
}
.lp--direito-trabalhista .hero__rotulo-barra {
  flex: none;
  width: var(--space-24);
  height: 2px;
  background: var(--color-dourado-01);
}
.lp--direito-trabalhista .hero__h1 {
  margin: 0;
  font-size: var(--fs-64);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-trabalhista .hero__subtitulo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-creme);
}

/* Botão + selos: na mesma linha se couber; no Figma (629) o selo vai para a
   linha de baixo, 40 abaixo do botão */
.lp--direito-trabalhista .hero__texto-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-40);
}
.lp--direito-trabalhista .hero__cta .botao__icone { width: 20px; height: 20px; }

.lp--direito-trabalhista .hero__confianca {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
}
.lp--direito-trabalhista .hero__confianca-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.lp--direito-trabalhista .hero__item-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}
.lp--direito-trabalhista .hero__icone-grupo { width: 15.708px; height: 16.073px; }
.lp--direito-trabalhista .hero__icone-pin { color: var(--color-branco); }
.lp--direito-trabalhista .hero__item-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* respiro título → subtítulo (pedido do responsável; Figma 2–10) */
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  white-space: nowrap;
}
.lp--direito-trabalhista .hero__item-titulo {
  font-weight: 500;
  color: var(--color-branco);
}
.lp--direito-trabalhista .hero__item-subtitulo {
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}

/* --- Entrada: fade up escalonado (keyframes hero-fade-up no style.css) ------- */
.lp--direito-trabalhista .hero__rotulo,
.lp--direito-trabalhista .hero__h1,
.lp--direito-trabalhista .hero__subtitulo,
.lp--direito-trabalhista .hero__cta,
.lp--direito-trabalhista .hero__confianca-item {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.lp--direito-trabalhista .hero__rotulo                       { animation-delay: .15s; }
.lp--direito-trabalhista .hero__h1                           { animation-delay: .3s; }
.lp--direito-trabalhista .hero__subtitulo                    { animation-delay: .45s; }
.lp--direito-trabalhista .hero__cta                          { animation-delay: .6s; }
.lp--direito-trabalhista .hero__confianca-item               { animation-delay: .72s; }
.lp--direito-trabalhista .hero__confianca-item:nth-child(2)  { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
  .lp--direito-trabalhista .hero__rotulo,
  .lp--direito-trabalhista .hero__h1,
  .lp--direito-trabalhista .hero__subtitulo,
  .lp--direito-trabalhista .hero__cta,
  .lp--direito-trabalhista .hero__confianca-item { animation: none; }
}

/* --- Entre 1101 e 1919 (sem desenho) -------------------------------------------
   A foto de 1920 é cortada nas laterais para cobrir os 955 de altura: o corte
   anda para a direita para o advogado não sair do quadro, e o gradiente do
   Figma é reaplicado por CSS para o texto manter o contraste. */
@media (min-width: 1101px) and (max-width: 1919px) {
  .lp--direito-trabalhista .hero__image-foto { object-position: 60% 50%; }
  .lp--direito-trabalhista .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--color-preto-01) 15%, transparent 52%);
  }
}

/* --- Tablet (769–1100, sem desenho) --------------------------------------------
   Foto de fundo com o advogado à direita e o texto no fim, a 80 do fundo,
   sobre o gradiente do mobile. */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--direito-trabalhista .hero {
    min-height: 1000px;
    align-items: flex-end;
    padding-bottom: var(--space-80);
  }
  .lp--direito-trabalhista .hero__image-foto { object-position: 72% 50%; }
  .lp--direito-trabalhista .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, transparent 31.387%, color-mix(in srgb, var(--color-preto-01) 92%, transparent) 74.509%),
      linear-gradient(180deg, var(--color-preto-01) 6.0116%, transparent 25.483%);
  }
}

/* --- Mobile — Figma 2699:42258 ----------------------------------------------------
   Foto 390×633 no topo (limitada em telas maiores); os gradientes cobrem a
   seção inteira (865 no frame), como no Figma. */
@media (max-width: 768px) {
  .lp--direito-trabalhista .hero {
    --hero-foto-altura: min(calc(100vw * 633 / 390), 820px);
    min-height: 0;
    align-items: flex-end;
    padding-top: calc(var(--hero-foto-altura) * 350 / 633);
    padding-bottom: var(--space-64);
  }
  .lp--direito-trabalhista .hero__image-foto {
    height: var(--hero-foto-altura);
    object-position: 50% 0;
  }
  .lp--direito-trabalhista .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, transparent 31.387%, color-mix(in srgb, var(--color-preto-01) 92%, transparent) 74.509%),
      linear-gradient(180deg, var(--color-preto-01) 6.0116%, transparent 25.483%);
  }

  .lp--direito-trabalhista .hero__texto {
    width: 100%;
    gap: var(--space-28);
  }
  .lp--direito-trabalhista .hero__rotulo {
    font-size: var(--fs-16); /* 16 a pedido do responsável (Figma mobile 12) */
    line-height: var(--lh-text);
  }
  .lp--direito-trabalhista .hero__h1 {
    max-width: 313px; /* Figma: quebra em 3 linhas */
    font-size: var(--fs-h1);
  }
  .lp--direito-trabalhista .hero__texto-conteudo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .lp--direito-trabalhista .hero__cta { width: 100%; }
  .lp--direito-trabalhista .hero__confianca { gap: var(--space-12) var(--space-20); }
  .lp--direito-trabalhista .hero__item-texto { gap: var(--space-6); }
  .lp--direito-trabalhista .hero__item-subtitulo {
    font-size: var(--fs-12);
    text-box: normal;
  }
}

/* ==========================================================================
   DIREITO TRABALHISTA — 02 COMO PODEMOS AJUDAR · Variação C (grade centralizada)
   Figma 2699:38786 (desktop) / 2699:42304 (mobile)
   Desktop: 888 de altura (120 + cabeçalho 96 + 60 + grade 376 + 60 + CTA 56
   + 120). Cabeçalho em 3 colunas espalhadas em 1280 (rótulo · H2 434 ·
   texto 402); grade de 2 linhas × 3 itens de 416 (gap 16, linhas com a altura
   do maior item); CTA com texto à esquerda e botão à direita.
   Itens sem link (decisão do responsável); hover não desenhado.
   Tablet (sem desenho): ≤ 1200 o rótulo sobe para a linha de cima; ≤ 1100
   grade em 2 colunas; ≤ 900 cabeçalho empilhado e CTA quebrando.
   ========================================================================== */
.lp--direito-trabalhista .ajuda {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-56) + var(--space-4)); /* 60 */
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}

/* --- Cabeçalho -------------------------------------------------------------- */
.lp--direito-trabalhista .ajuda__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20) var(--space-40);
}
/* desktop: como no Figma, centrado com 141 entre as colunas (1282 em 1280) */
@media (min-width: 1201px) {
  .lp--direito-trabalhista .ajuda__cabecalho {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 141px;
  }
}
.lp--direito-trabalhista .ajuda__lateral-rotulo { flex: none; }
.lp--direito-trabalhista .ajuda__lateral-h2 {
  flex: 0 1 434px;
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-trabalhista .ajuda__lateral-texto {
  flex: 0 1 402px;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.lp--direito-trabalhista .ajuda__lateral-texto p { margin: 0; }
@media (min-width: 1323px) {
  /* com o vão de 141 o conjunto tem 1282: não encolhe, transborda 1 de cada lado (Figma).
     Só a partir de 1323 (1282 + 2 × 20) — abaixo disso encolhe (em 1280 dava rolagem lateral) */
  .lp--direito-trabalhista .ajuda__lateral-h2,
  .lp--direito-trabalhista .ajuda__lateral-texto { flex-shrink: 0; }
}
.lp--direito-trabalhista .ajuda__lateral-texto-destaque { font-weight: 500; }

/* --- Grade -------------------------------------------------------------------- */
.lp--direito-trabalhista .ajuda__grade {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.lp--direito-trabalhista .ajuda__grade-linha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}
.lp--direito-trabalhista .ajuda__linha-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-32);
  background: var(--color-creme);
  border-radius: var(--radius-md);
  color: inherit;
}
.lp--direito-trabalhista .ajuda__item-icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-12);
  color: var(--color-preto-02);
}
.lp--direito-trabalhista .ajuda__item-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--direito-trabalhista .ajuda__item-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-trabalhista .ajuda__item-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- CTA ----------------------------------------------------------------------- */
.lp--direito-trabalhista .ajuda__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20) var(--space-40);
}
.lp--direito-trabalhista .ajuda__cta-texto {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.lp--direito-trabalhista .ajuda__cta-texto strong {
  font-weight: 500;
  color: var(--color-texto);
}
.lp--direito-trabalhista .ajuda__cta-botao .botao__icone { width: 18px; height: 18px; }

/* --- Tablet (sem desenho) ------------------------------------------------------- */
@media (max-width: 1200px) {
  .lp--direito-trabalhista .ajuda__lateral-rotulo { flex-basis: 100%; }
}
@media (max-width: 1100px) {
  /* as duas linhas viram uma grade só, de 2 colunas */
  .lp--direito-trabalhista .ajuda__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp--direito-trabalhista .ajuda__grade-linha { display: contents; }
}
@media (max-width: 900px) {
  .lp--direito-trabalhista .ajuda__cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp--direito-trabalhista .ajuda__lateral-h2,
  .lp--direito-trabalhista .ajuda__lateral-texto { flex: none; }
}

/* --- Mobile — Figma 2699:42304 ---------------------------------------------------
   Itens em coluna (ícone sobre o texto), padding 24, gap 12; H2 32 em peso 400
   (o do desktop); CTA empilhado com o botão na largura. */
@media (max-width: 768px) {
  .lp--direito-trabalhista .ajuda { gap: var(--space-40); }
  .lp--direito-trabalhista .ajuda__grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .lp--direito-trabalhista .ajuda__linha-item {
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24);
  }
  .lp--direito-trabalhista .ajuda__item-texto {
    flex: none;
    width: 100%;
    gap: var(--space-8);
  }
  .lp--direito-trabalhista .ajuda__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .lp--direito-trabalhista .ajuda__cta-botao { width: 100%; }
}

/* ==========================================================================
   DIREITO TRABALHISTA — 06 PRAZOS QUE NÃO ESPERAM (lista de prazos)
   Figma 2699:38835 (desktop) / 2699:42353 (mobile)
   Caixa Preto 01 (radius 32) com 24 de respiro branco em volta; conteúdo em
   1280: texto de 440 + botão à esquerda (centrado na altura) e, a 120, a
   lista de prazos (valor de 200 em dourado + texto; linhas Preto 03).
   Tablet (sem desenho, ≤ 1100): texto em cima e a lista embaixo, na largura.
   Mobile: o botão desce para depois da lista e a caixa não tem respiro em cima.
   ========================================================================== */
.lp--direito-trabalhista .prazos {
  padding: var(--space-24);
  background: var(--color-branco);
}
.lp--direito-trabalhista .prazos__container {
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  border-radius: var(--radius-32);
  color: var(--color-branco);
}
.lp--direito-trabalhista .prazos__grade {
  display: flex;
  align-items: center;
  gap: var(--space-120);
}

/* --- Texto + botão ------------------------------------------------------------- */
.lp--direito-trabalhista .prazos__conteudo {
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
}
.lp--direito-trabalhista .prazos__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--direito-trabalhista .prazos__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-trabalhista .prazos__cabecalho-subtitulo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
/* botão no escuro: ícone de 21 (tamanho do arquivo) */

/* --- Lista ----------------------------------------------------------------------- */
.lp--direito-trabalhista .prazos__lista {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp--direito-trabalhista .prazos__lista-prazo {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  padding-block: calc(var(--space-32) + var(--space-4)); /* 36 */
  border-bottom: 1px solid var(--color-preto-03);
}
.lp--direito-trabalhista .prazos__lista-prazo:first-child { border-top: 1px solid var(--color-preto-03); }
.lp--direito-trabalhista .prazos__prazo-valor {
  flex: 0 0 200px;
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-dourado-01);
}
.lp--direito-trabalhista .prazos__prazo-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.lp--direito-trabalhista .prazos__prazo-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-trabalhista .prazos__prazo-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Tablet (sem desenho) ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .lp--direito-trabalhista .prazos__grade {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-56);
  }
  .lp--direito-trabalhista .prazos__conteudo {
    flex: none;
    max-width: 640px;
  }
  .lp--direito-trabalhista .prazos__lista { flex: none; }
}

/* --- Mobile — Figma 2699:42353 ------------------------------------------------------- */
@media (max-width: 768px) {
  .lp--direito-trabalhista .prazos { padding: 0 var(--space-12) var(--space-24); }
  .lp--direito-trabalhista .prazos__grade { gap: var(--space-40); }
  /* cabeçalho, lista e botão viram irmãos: o botão vai para o fim */
  .lp--direito-trabalhista .prazos__conteudo { display: contents; }
  .lp--direito-trabalhista .prazos__cta {
    order: 1;
    width: 100%;
  }
  .lp--direito-trabalhista .prazos__lista-prazo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-block: var(--space-24);
  }
  .lp--direito-trabalhista .prazos__prazo-valor {
    flex: none;
    font-size: var(--fs-40);
  }
  .lp--direito-trabalhista .prazos__prazo-texto {
    flex: none;
    width: 100%;
  }
}

/* ==========================================================================
   DIREITO TRABALHISTA — 03 COMO FUNCIONA · Variação ilustrada (etapas + foto)
   Figma 2699:38862 (desktop) / 2699:42380 (mobile)
   Desktop: 880 de altura; linha do tempo (600) e, a 120, a foto 560×640 com
   o cartão "Atendimento sigiloso" saindo 56 para a esquerda, a 48 do fundo.
   Cada etapa: trilho (marcador de 56 + linha de 1 até a próxima) e texto
   com 4/24/40 de respiro; a última não tem linha nem respiro embaixo.
   Tablet (sem desenho): ≤ 1200 foto menor (480, mesma proporção); ≤ 900 a
   foto desce para baixo das etapas, na largura, com o cartão por dentro.
   Mobile: marcador de 48 e as cores do desktop (o frame mobile varia o tom
   de cada marcador e põe borda — vale o desktop).
   ========================================================================== */
.lp--direito-trabalhista .funciona {
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-creme);
}
.lp--direito-trabalhista .funciona__grade {
  display: flex;
  align-items: center;
  gap: var(--space-120);
}

/* --- Cabeçalho + etapas ------------------------------------------------------------ */
.lp--direito-trabalhista .funciona__conteudo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}
.lp--direito-trabalhista .funciona__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}
.lp--direito-trabalhista .funciona__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-trabalhista .funciona__etapas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.lp--direito-trabalhista .funciona__etapa {
  display: flex;
  gap: var(--space-24);
}
.lp--direito-trabalhista .funciona__etapa-trilho {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp--direito-trabalhista .funciona__etapa-marcador {
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-pill);
  color: var(--color-texto);
}
.lp--direito-trabalhista .funciona__marcador-icone-whatsapp { color: var(--color-preto-02); }
.lp--direito-trabalhista .funciona__trilho-linha {
  flex: 1 1 auto;
  width: 1px;
  background: var(--color-borda-clara);
}
.lp--direito-trabalhista .funciona__etapa:last-child .funciona__trilho-linha { display: none; }
.lp--direito-trabalhista .funciona__etapa-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-4) var(--space-24) var(--space-40);
}
.lp--direito-trabalhista .funciona__etapa:last-child .funciona__etapa-texto { padding-bottom: 0; }
.lp--direito-trabalhista .funciona__etapa-rotulo {
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
.lp--direito-trabalhista .funciona__etapa-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-trabalhista .funciona__etapa-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Foto + cartão --------------------------------------------------------------------- */
.lp--direito-trabalhista .funciona__midia {
  position: relative;
  flex: 0 0 560px;
  height: 640px;
}
.lp--direito-trabalhista .funciona__midia-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.lp--direito-trabalhista .funciona__midia-cartao {
  position: absolute;
  left: calc(-1 * var(--space-56));
  bottom: var(--space-48);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-28) var(--space-20) var(--space-20);
  background: var(--color-branco);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-dark);
}
.lp--direito-trabalhista .funciona__cartao-icone {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-12);
  color: var(--color-texto);
}
.lp--direito-trabalhista .funciona__cartao-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--lh-text);
  white-space: nowrap;
}
.lp--direito-trabalhista .funciona__cartao-titulo {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-texto);
}
.lp--direito-trabalhista .funciona__cartao-descricao {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}

/* --- Tablet (sem desenho) ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .lp--direito-trabalhista .funciona__grade { gap: var(--space-80); }
  .lp--direito-trabalhista .funciona__midia {
    flex: 0 1 480px;
    height: auto;
    aspect-ratio: 560 / 640;
  }
}
@media (max-width: 900px) {
  .lp--direito-trabalhista .funciona__grade {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-56);
  }
  .lp--direito-trabalhista .funciona__conteudo { flex: none; }
  .lp--direito-trabalhista .funciona__midia {
    flex: none;
    aspect-ratio: auto;
    height: 520px;
  }
  .lp--direito-trabalhista .funciona__midia-cartao {
    left: var(--space-24);
    bottom: var(--space-24);
  }
}

/* --- Mobile — Figma 2699:42380 ------------------------------------------------------------ */
@media (max-width: 768px) {
  .lp--direito-trabalhista .funciona__grade,
  .lp--direito-trabalhista .funciona__conteudo { gap: var(--space-40); }
  .lp--direito-trabalhista .funciona__etapa-marcador {
    width: 48px;
    height: 48px;
  }
  .lp--direito-trabalhista .funciona__etapa-texto { padding-bottom: var(--space-32); }
  .lp--direito-trabalhista .funciona__midia { height: 440px; }
  .lp--direito-trabalhista .funciona__midia-cartao {
    left: var(--space-12);
    bottom: var(--space-12);
    max-width: calc(100% - 2 * var(--space-12)); /* telas < 350: não passa da foto */
  }
  .lp--direito-trabalhista .funciona__cartao-texto { white-space: normal; }
}

/* ==========================================================================
   LPs — 04 QUEM CONDUZ O SEU CASO (pele compartilhada: template-parts/advogado.php)
   Figma Trabalhista 2699:38905 (desktop) / 2699:42423 (mobile)
   Desktop: 800 de altura; retrato 521,7×560 (radius 24) e, a 20, o texto com
   108 de recuo: rótulo + H2, descrição (ACF) e as credenciais em linhas
   (ícone 40 + rótulo de 120 + valor), separadas por Borda clara.
   Tablet (sem desenho): ≤ 1200 retrato menor e recuo 56; ≤ 900 empilhado.
   ========================================================================== */
.lp .advogado {
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.lp .advogado__grid {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}
.lp .advogado__retrato {
  flex: 0 0 521.7px;
  height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lp .advogado__retrato-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Texto ------------------------------------------------------------------------ */
.lp .advogado__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-32) + var(--space-4)); /* 36 */
  padding-left: calc(var(--space-96) + var(--space-12)); /* 108 */
}
.lp .advogado__titulos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.lp .advogado__h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp .advogado__texto-descricao {
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.lp .advogado__texto-descricao p { margin: 0; }
.lp .advogado__texto-descricao p + p { margin-top: var(--space-12); }

/* --- Credenciais -------------------------------------------------------------------- */
.lp .advogado__credenciais { margin: 0; }
.lp .advogado__credencial {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: 18px;
  border-top: 1px solid var(--color-borda-clara);
}
.lp .advogado__credencial:last-child { border-bottom: 1px solid var(--color-borda-clara); }
.lp .advogado__credencial-rotulo {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.lp .advogado__credencial-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-sm);
  color: var(--color-preto-03);
}
.lp .advogado__credencial-rotulo-texto {
  width: 120px;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}
.lp .advogado__credencial-valor {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}

/* --- Tablet (sem desenho) --------------------------------------------------------------- */
@media (max-width: 1200px) {
  .lp .advogado__retrato {
    flex: 0 1 440px;
    height: auto;
    aspect-ratio: 521.7 / 560;
  }
  .lp .advogado__texto { padding-left: var(--space-56); }
}
@media (max-width: 900px) {
  .lp .advogado__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }
  .lp .advogado__retrato {
    flex: none;
    aspect-ratio: auto;
    height: 480px;
  }
  .lp .advogado__texto {
    flex: none;
    padding-left: 0;
  }
}

/* --- Mobile — Figma 2699:42423 -------------------------------------------------------------- */
/* 561–900 (tablet, sem desenho): retrato na proporção da foto (até 520 de largura) —
   na largura toda com 480/360 de altura ele cortava o rosto (pedido do responsável).
   ≤ 560: proporção do frame mobile (350 × 360). */
@media (min-width: 561px) and (max-width: 900px) {
  .lp .advogado__retrato {
    align-self: flex-start;
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: 521.7 / 560;
  }
}
@media (max-width: 560px) {
  /* proporção do frame mobile (350 × 360): em 390 dá os 360 do Figma e, até 560,
     cresce junto com a largura em vez de virar faixa */
  .lp .advogado__retrato {
    height: auto;
    aspect-ratio: 350 / 360;
  }
}

/* ==========================================================================
   LPs — 07 PERGUNTAS FREQUENTES (FAQPage) — pele compartilhada com a Home
   (template-parts/faq.php + faq-item.php; comportamento no style.css/main.js)
   Figma Trabalhista 2699:39297 (desktop) / 2699:42815 (mobile)
   Diferente da Home: caixa creme arredondada (`faq__container`) com 24 de
   respiro branco; lateral 413,3 e lista 738,4 (vão 128,3); card escuro com
   padding 32 e botão do tamanho do texto; item fechado de 78 (22/22/22/28);
   aberto: toggle Dourado 01 e o "+" gira e vira "×", como na Home (pedido).
   Embaixo da caixa ficam 120 (64 no mobile) + --lp-cta-sobe: o card do CTA
   final sobe sobre esse espaço (355 / 461 na Trabalhista; 355 / 480 na Civil).
   Os layers do item no Figma da LP se chamam faq__lista-pergunta/
   pergunta-linha/pergunta-toggle/pergunta-resposta; a pele (da Home) usa
   faq__lista-item/item-pergunta/item-toggle/item-resposta — mesma estrutura.
   ========================================================================== */
.lp .faq {
  padding: var(--space-24) var(--space-24) 0;
  background: var(--color-branco);
}
.lp .faq__container {
  padding: var(--section-y) max(var(--gutter), (100% - var(--container)) / 2) calc(var(--space-120) + var(--lp-cta-sobe));
  background: var(--color-creme);
  border-radius: var(--radius-32);
}
.lp .faq__grid {
  width: auto;
  grid-template-columns: minmax(0, 413.3px) minmax(0, 738.4px);
}

/* --- Lateral ------------------------------------------------------------------ */
.lp .faq__lateral { padding-right: 0; }
.lp .faq__titulos { gap: var(--space-24); }
.lp .faq__h2 {
  max-width: 378px;
  font-size: var(--fs-h2);
}
.lp .faq__lateral-card-ainda-com-duvidas {
  gap: var(--space-24);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
}
.lp .faq__icone-chat { width: 22px; height: 22px; }
.lp .faq__card-texto {
  align-self: stretch;
  gap: var(--space-10);
}
.lp .faq__card-descricao {
  max-width: 316px;
  font-size: var(--fs-16);
  color: var(--color-texto-secundario-escuro);
}
.lp .faq__card-ainda-com-duvidas-botao-primario-inverso { width: auto; }

/* --- Lista ----------------------------------------------------------------------- */
.lp .faq__item-pergunta { padding: 22px 22px 22px var(--space-28); }
.lp .faq__item-toggle { color: var(--color-texto); }
.lp .faq__lista-item--aberto .faq__item-toggle {
  background: var(--color-dourado-01);
  border-color: var(--color-dourado-01);
  color: var(--color-preto-02);
}
/* Ícone: mesmo efeito da Home ("+" gira 45° e vira "×" — style.css); o Figma
   da LP desenha "−", mas o responsável pediu o padrão da Home (2026-10-03). */
/* 16 entre a pergunta e a resposta; a resposta para a 56 do toggle */
.lp .faq__resposta-texto {
  margin-top: calc(var(--space-16) - 22px);
  padding: 0 calc(var(--space-56) + 22px) 22px var(--space-28);
}

/* --- Tablet (sem desenho) — a base da Home empilha em ≤ 1100 --------------------- */
@media (max-width: 1100px) {
  .lp .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .lp .faq__lateral-card-ainda-com-duvidas { max-width: none; } /* na largura da seção (era 738,4 — pedido do responsável) */
}
/* caixa do FAQ com 40 em cima e 80 antes do CTA no tablet (os 120 do desktop sobravam — pedido do responsável) */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp .faq__container {
    padding-top: var(--space-40); /* perto do canto da caixa, como as laterais (era 80) */
    padding-bottom: calc(var(--space-80) + var(--lp-cta-sobe));
  }
}

/* --- Mobile — Figma 2699:42815 ------------------------------------------------------ */
@media (max-width: 768px) {
  .lp .faq { padding: var(--space-24) var(--space-12) 0; }
  .lp .faq__container { padding: var(--section-y) var(--gutter) calc(var(--space-64) + var(--lp-cta-sobe)); }
  .lp .faq__titulos { gap: var(--space-20); }
  .lp .faq__h2 { max-width: none; }
  .lp .faq__lateral-card-ainda-com-duvidas { padding: var(--space-32) var(--space-24); }
  .lp .faq__card-descricao { max-width: none; }
  .lp .faq__card-ainda-com-duvidas-botao-primario-inverso { width: 100%; }
  .lp .faq__item-pergunta { padding: 22px var(--space-24); }
  .lp .faq__resposta-texto { padding: 0 var(--space-24) 22px; }
}

/* ==========================================================================
   LPs — CTA FINAL (pele compartilhada: template-parts/cta-lp.php)
   Figma Trabalhista 2699:39370 / 2699:42888 · Civil 2699:40079 / 2699:43601
   Card Preto 02 (radius 32, padding 72) que sobe sobre o fim da caixa do FAQ
   (--lp-cta-sobe, no bloco comum do topo: 235 no desktop; no mobile 397 na
   Trabalhista e 416 na Civil, cujo card é mais alto). O FAQ deixa embaixo
   120 (64 no mobile) + esse valor; o CTA deixa 154 (98 no mobile) até o
   rodapé.
   A seção é flex: a margem negativa do card não "vaza" para a seção (sem
   colapso de margem), então o fundo branco não cobre a caixa do FAQ.
   Tablet (sem desenho, ≤ 1100): texto em cima e os dados embaixo.
   ========================================================================== */
.lp .cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 max(var(--gutter), (100% - var(--container)) / 2) calc(var(--space-120) + var(--space-32) + 2px); /* 154 */
  background: var(--color-branco);
}
.lp .cta__card {
  margin-top: calc(-1 * var(--lp-cta-sobe));
  display: flex;
  align-items: center;
  gap: var(--space-80);
  padding: calc(var(--space-64) + var(--space-8)); /* 72 */
  background: var(--color-preto-02);
  border-radius: var(--radius-32);
  color: var(--color-branco);
}

/* --- Texto + botão --------------------------------------------------------------- */
.lp .cta__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}
.lp .cta__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp .cta__h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp .cta__texto-descricao {
  max-width: 483px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp .cta__botao .botao__icone { width: 20px; height: 20px; }

/* --- Dados locais ------------------------------------------------------------------ */
.lp .cta__dados-locais {
  flex: 0 0 413px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp .cta__dados-locais-dado {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  padding-block: var(--space-20);
  border-top: 1px solid var(--color-preto-03);
}
.lp .cta__dados-locais-dado:last-child { border-bottom: 1px solid var(--color-preto-03); }
.lp .cta__dados-locais-dado .ico { color: var(--color-dourado-01); }
.lp .cta__dado-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  line-height: var(--lh-text);
}
.lp .cta__dado-rotulo {
  font-size: var(--fs-14);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}
.lp .cta__dado-valor {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-branco);
}

/* --- Tablet (sem desenho) ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .lp .cta__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
    padding: var(--space-56);
  }
  .lp .cta__texto,
  .lp .cta__dados-locais { flex: none; }
}

/* --- Mobile — Figma 2699:42888 ------------------------------------------------------------ */
@media (max-width: 768px) {
  .lp .cta { padding-bottom: calc(var(--space-96) + 2px); /* 98 */ }
  .lp .cta__card {
    margin-top: calc(-1 * var(--lp-cta-sobe));
    gap: var(--space-32);
    padding: var(--space-40) var(--space-24);
  }
  .lp .cta__texto-descricao { max-width: none; }
  .lp .cta__botao { width: 100%; }
}

/* ==========================================================================
   LPs — 09 OUTRAS ÁREAS (links internos) — pele template-parts/outras-areas.php
   Figma Trabalhista 2699:39393 (desktop) / 2699:42911 (mobile)
   Sem respiro em cima (vem logo após o CTA, que já deixa 154); 120 embaixo.
   3 cards de 228: moldura creme (radius 24, padding 8) com o painel branco
   (radius 18, padding 28) — ícone 52 + seta 40 no topo, título e descrição
   no pé. O card inteiro é o link; hover não desenhado.
   Tablet (sem desenho): 3 colunas até 769; mobile = coluna (Figma).
   ========================================================================== */
.lp .outras-areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: 0 max(var(--gutter), (100% - var(--container)) / 2) var(--section-y);
  background: var(--color-branco);
}
.lp .outras-areas__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}
.lp .outras-areas__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}

/* --- Cards ----------------------------------------------------------------------- */
.lp .outras-areas__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}
.lp .outras-areas__cards-card-area {
  display: flex;
  min-height: 228px;
  padding: var(--space-8);
  background: var(--color-creme);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-lg);
}
.lp .outras-areas__card-conteudo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-28);
  padding: var(--space-28);
  background: var(--color-branco);
  border-radius: var(--radius-18);
  box-shadow: var(--shadow-card-area);
  color: inherit;
}
.lp .outras-areas__card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp .outras-areas__card-icone {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-14);
  color: var(--color-preto-02);
}
.lp .outras-areas__card-seta {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  color: var(--color-texto);
  overflow: hidden;
}
/* Hover do card (pedido do responsável — só movimento, sem mudar cor): a seta
   sai pelo canto de cima à direita e volta entrando por baixo à esquerda (↗). */
@keyframes outras-seta-voo {
  0%    { transform: translate(0, 0); }
  45%   { transform: translate(140%, -140%); }
  45.1% { transform: translate(-140%, 140%); }
  100%  { transform: translate(0, 0); }
}
@media (hover: hover) {
  .lp .outras-areas__card-conteudo:hover .outras-areas__card-seta svg {
    animation: outras-seta-voo .5s cubic-bezier(.65, 0, .35, 1);
  }
}
.lp .outras-areas__card-conteudo:focus-visible .outras-areas__card-seta svg {
  animation: outras-seta-voo .5s cubic-bezier(.65, 0, .35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .lp .outras-areas__card-seta svg { animation: none !important; }
}
.lp .outras-areas__card-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.lp .outras-areas__card-titulo {
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp .outras-areas__card-descricao {
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}

/* --- Mobile — Figma 2699:42911 ---------------------------------------------------------- */
@media (max-width: 768px) {
  .lp .outras-areas { gap: var(--space-28); }
  .lp .outras-areas__cabecalho-h2 { font-size: var(--fs-24); }
  .lp .outras-areas__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }
  .lp .outras-areas__cards-card-area { min-height: 0; }
  .lp .outras-areas__card-conteudo { padding: var(--space-28) var(--space-24); }
}

/* ==========================================================================
   DIREITO CIVIL — 01 HERO (meio a meio, foto sangrada)
   Figma 2699:39432 (desktop) / 2699:42950 (mobile)
   Desktop: 892 de altura; texto (601) na metade esquerda, centralizado entre
   o fim do cabeçalho (+92) e o fundo (120) — 269,5 do topo, como no Figma. A
   foto fornecida já traz os 2 gradientes do Figma (topo e lateral esquerda).
   Mobile: recorte do frame mobile no topo (390×684) e o texto no fim, a 84 do
   fundo, começando a 379/684 da altura da foto; gradientes por CSS.
   Tablet (sem desenho): foto de 820 no topo com a advogada à direita e o
   texto embaixo do rosto, sobre os gradientes do mobile.
   Entrada: fade up escalonado (rótulo → h1 → subtítulo → botão → selos).
   ========================================================================== */
.lp--direito-civil .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 892px;
  display: flex;
  align-items: center;
  padding-top: calc(var(--cabecalho-lp-topo) + var(--cabecalho-lp-altura) + var(--space-80) + var(--space-12));
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Foto ------------------------------------------------------------------- */
.lp--direito-civil .hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.lp--direito-civil .hero__image-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%; /* abaixo de 1920 o corte preserva a advogada */
}

/* --- Texto -------------------------------------------------------------------- */
.lp--direito-civil .hero__texto {
  width: 601px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.lp--direito-civil .hero__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-civil .hero__rotulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-16); /* 16 a pedido do responsável (Figma 12) */
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp--direito-civil .hero__rotulo-barra {
  flex: none;
  width: var(--space-24);
  height: 2px;
  background: var(--color-dourado-01);
}
.lp--direito-civil .hero__h1 {
  max-width: 552px; /* Figma: "Advogado civil em / Belo Horizonte" */
  margin: 0;
  font-size: var(--fs-64);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-civil .hero__subtitulo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-creme);
}

/* Botão + selos: no Figma (560) os selos vão para a linha de baixo, 40
   abaixo do botão */
.lp--direito-civil .hero__texto-conteudo {
  max-width: 560px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-40);
}
.lp--direito-civil .hero__cta .botao__icone { width: 20px; height: 20px; }

.lp--direito-civil .hero__confianca {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
}
.lp--direito-civil .hero__confianca-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.lp--direito-civil .hero__item-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}
.lp--direito-civil .hero__icone-grupo { width: 15.708px; height: 16.073px; }
.lp--direito-civil .hero__icone-pin { color: var(--color-branco); }
.lp--direito-civil .hero__item-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* respiro título → subtítulo (pedido do responsável; Figma 2–10) */
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  white-space: nowrap;
}
.lp--direito-civil .hero__item-titulo {
  font-weight: 500;
  color: var(--color-branco);
}
.lp--direito-civil .hero__item-subtitulo {
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}

/* --- Entrada: fade up escalonado (keyframes hero-fade-up no style.css) ------- */
.lp--direito-civil .hero__rotulo,
.lp--direito-civil .hero__h1,
.lp--direito-civil .hero__subtitulo,
.lp--direito-civil .hero__cta,
.lp--direito-civil .hero__confianca-item {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.lp--direito-civil .hero__rotulo                       { animation-delay: .15s; }
.lp--direito-civil .hero__h1                           { animation-delay: .3s; }
.lp--direito-civil .hero__subtitulo                    { animation-delay: .45s; }
.lp--direito-civil .hero__cta                          { animation-delay: .6s; }
.lp--direito-civil .hero__confianca-item               { animation-delay: .72s; }
.lp--direito-civil .hero__confianca-item:nth-child(2)  { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
  .lp--direito-civil .hero__rotulo,
  .lp--direito-civil .hero__h1,
  .lp--direito-civil .hero__subtitulo,
  .lp--direito-civil .hero__cta,
  .lp--direito-civil .hero__confianca-item { animation: none; }
}

/* --- Entre 1101 e 1919 (sem desenho) -------------------------------------------
   A foto de 1920 é cortada nas laterais para cobrir os 892 de altura e o
   gradiente lateral que vem nela anda junto; o gradiente do Figma é
   reaplicado por CSS, preso à tela, para o texto manter o contraste. */
@media (min-width: 1101px) and (max-width: 1919px) {
  .lp--direito-civil .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-preto-01) 60%, transparent) 23.385%, transparent 57.422%);
  }
}

/* --- Tablet (769–1100, sem desenho) --------------------------------------------
   Foto de 820 no topo com a advogada à direita (o rosto fica acima do texto)
   e o texto no fim, a 80 do fundo, sobre os gradientes do mobile. */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--direito-civil .hero {
    min-height: 1080px;
    align-items: flex-end;
    padding-bottom: var(--space-80);
  }
  .lp--direito-civil .hero__image-foto {
    height: 820px;
    object-position: 68% 0;
  }
  .lp--direito-civil .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--color-preto-80) 86.25%, transparent) 6.0116%, transparent 31.04%),
      linear-gradient(180deg, transparent 38.322%, var(--color-preto-01) 74.827%);
  }
}

/* --- Mobile — Figma 2699:42950 ----------------------------------------------------
   Foto 390×684 no topo (limitada em telas maiores); os gradientes cobrem a
   seção inteira (866 no frame), como no Figma: preto a 69% no topo (atrás do
   cabeçalho) e Preto 01 opaco a partir de 74,8% (antes do fim da foto). */
@media (max-width: 768px) {
  .lp--direito-civil .hero {
    --hero-foto-altura: min(calc(100vw * 684 / 390), 820px);
    min-height: 0;
    align-items: flex-end;
    padding-top: calc(var(--hero-foto-altura) * 379 / 684);
    padding-bottom: calc(var(--space-80) + var(--space-4)); /* Figma: 84 */
  }
  .lp--direito-civil .hero__image-foto {
    height: var(--hero-foto-altura);
    object-position: 50% 0;
  }
  .lp--direito-civil .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--color-preto-80) 86.25%, transparent) 6.0116%, transparent 31.04%),
      linear-gradient(180deg, transparent 38.322%, var(--color-preto-01) 74.827%);
  }

  .lp--direito-civil .hero__texto {
    width: 100%;
    gap: var(--space-28);
  }
  .lp--direito-civil .hero__h1 {
    max-width: none;
    font-size: var(--fs-h1);
  }
  .lp--direito-civil .hero__texto-conteudo {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .lp--direito-civil .hero__cta { width: 100%; }
  .lp--direito-civil .hero__confianca { gap: var(--space-12) var(--space-20); }
  .lp--direito-civil .hero__item-texto { gap: var(--space-6); }
  .lp--direito-civil .hero__item-subtitulo {
    font-size: var(--fs-12);
    text-box: normal;
  }
}

/* ==========================================================================
   DIREITO CIVIL — 02 ÁREAS DE ATUAÇÃO (bento)
   Figma 2699:39474 (desktop) / 2699:42996 (mobile)
   Desktop: 768 de altura (120 + cabeçalho 90 + 56 + bento 382 + 120), fundo
   #FAFAFA. Cabeçalho com título (738) à esquerda e subtítulo (413) à direita,
   alinhados embaixo. Bento: card de destaque escuro (413 × 382, CTA no fim)
   e grade de 2 linhas × 2 cards creme (413,5 × 181). Cards sem link.
   Mobile: tudo em uma coluna (gap 12), cards com a altura do conteúdo.
   Tablet (sem desenho, ≤ 1100): cabeçalho empilhado, destaque na largura em
   cima (botão do tamanho do texto) e a grade 2 × 2 embaixo.
   ========================================================================== */
.lp--direito-civil .areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-fundo-alternativo);
}

/* --- Cabeçalho -------------------------------------------------------------- */
.lp--direito-civil .areas__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20) var(--space-40);
}
.lp--direito-civil .areas__cabecalho-titulo {
  flex: 0 1 738.3px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-civil .areas__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-civil .areas__cabecalho-subtitulo {
  flex: 0 1 413px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Bento -------------------------------------------------------------------- */
.lp--direito-civil .areas__bento {
  display: flex;
  gap: var(--space-20);
}

/* Destaque: 1/3 da largura (413 em 1280), conteúdo em cima e CTA no fim */
.lp--direito-civil .areas__bento-card-destaque {
  flex: 0 0 calc((100% - 2 * var(--space-20)) / 3);
  min-height: 382px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-32);
  padding: var(--space-40);
  background: var(--color-preto-02);
  border-radius: var(--radius-lg);
}
.lp--direito-civil .areas__destaque-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-civil .areas__destaque-icone {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-preto-03);
  border-radius: var(--radius-14);
  color: var(--color-dourado-01);
}
.lp--direito-civil .areas__destaque-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.lp--direito-civil .areas__destaque-titulo {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-civil .areas__destaque-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp--direito-civil .areas__hero-cta { width: 100%; }
.lp--direito-civil .areas__hero-cta .botao__icone { width: 20px; height: 20px; }

/* Grade: 2 linhas que dividem a altura do destaque (181 + 20 + 181) */
.lp--direito-civil .areas__grade {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--direito-civil .areas__grade-linha {
  flex: 1 1 auto;
  display: flex;
  gap: var(--space-20);
}
.lp--direito-civil .areas__linha-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 181px;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-32) var(--space-32) var(--space-28);
  background: var(--color-creme);
  border-radius: var(--radius-lg);
}
.lp--direito-civil .areas__card-topo {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.lp--direito-civil .areas__card-icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-12);
  color: var(--color-preto-02);
}
.lp--direito-civil .areas__card-titulo {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-civil .areas__card-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Tablet (sem desenho, ≤ 1100) ------------------------------------------------- */
@media (max-width: 1100px) {
  .lp--direito-civil .areas__cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp--direito-civil .areas__cabecalho-titulo,
  .lp--direito-civil .areas__cabecalho-subtitulo { flex: none; }
  .lp--direito-civil .areas__cabecalho-subtitulo { max-width: 600px; }
  .lp--direito-civil .areas__bento { flex-direction: column; }
  .lp--direito-civil .areas__bento-card-destaque {
    flex: none;
    min-height: 0;
  }
  .lp--direito-civil .areas__destaque-texto { max-width: 600px; }
  .lp--direito-civil .areas__hero-cta {
    width: auto;
    align-self: flex-start;
  }
}

/* --- Mobile — Figma 2699:42996 ------------------------------------------------------- */
@media (max-width: 768px) {
  .lp--direito-civil .areas {
    gap: var(--space-40);
    padding-block: var(--space-64);
  }
  .lp--direito-civil .areas__cabecalho-subtitulo { max-width: none; }
  .lp--direito-civil .areas__bento,
  .lp--direito-civil .areas__grade { gap: var(--space-12); }
  .lp--direito-civil .areas__bento-card-destaque { padding: var(--space-32) var(--space-24); }
  .lp--direito-civil .areas__destaque-texto { max-width: none; }
  .lp--direito-civil .areas__hero-cta {
    width: 100%;
    align-self: stretch;
  }
  .lp--direito-civil .areas__grade-linha {
    flex-direction: column;
    gap: var(--space-12);
  }
  .lp--direito-civil .areas__linha-card {
    flex: none;
    min-height: 0;
    padding: var(--space-24);
  }
}

/* ==========================================================================
   DIREITO CIVIL — 03 ADVOGADO NÃO É PROCESSO (faixa editorial)
   Figma 2699:39518 (desktop) / 2699:43040 (mobile)
   Desktop: 484 de altura (120 + 244 + 120), fundo branco. Título (738,3:
   rótulo, H2 48 em 2 linhas, parágrafo 656) e texto (413,4: parágrafo +
   lista) lado a lado, vão 128,3, centralizados na vertical.
   Os dois parágrafos têm o mesmo nome no Figma (`editorial__paragrafo`): o
   tamanho sai da coluna em que estão.
   Tablet (sem desenho): colunas encolhem com vão mínimo de 64; ≤ 900
   empilhado como no mobile.
   ========================================================================== */
.lp--direito-civil .editorial {
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.lp--direito-civil .editorial__grid {
  display: flex;
  align-items: center;
  justify-content: space-between; /* em 1280 o vão fica 128,3, como no Figma */
  gap: var(--space-64);
}

/* --- Título ----------------------------------------------------------------- */
.lp--direito-civil .editorial__titulo {
  flex: 0 1 738.3px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
.lp--direito-civil .editorial__h2 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-civil .editorial__titulo .editorial__paragrafo {
  max-width: 656px;
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto);
}

/* --- Texto + lista ------------------------------------------------------------- */
.lp--direito-civil .editorial__texto {
  flex: 0 1 413.4px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-civil .editorial__texto .editorial__paragrafo {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.lp--direito-civil .editorial__lista {
  margin: 0;
  padding: var(--space-8) 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.lp--direito-civil .editorial__lista-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.lp--direito-civil .editorial__item-icone {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-pill);
  color: var(--color-preto-02);
}
.lp--direito-civil .editorial__item-texto {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}

/* --- Tablet (sem desenho) ------------------------------------------------------- */
@media (max-width: 900px) {
  .lp--direito-civil .editorial__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }
  .lp--direito-civil .editorial__titulo,
  .lp--direito-civil .editorial__texto { flex: none; }
}

/* --- Mobile — Figma 2699:43040 ---------------------------------------------------- */
@media (max-width: 768px) {
  .lp--direito-civil .editorial { padding-block: var(--space-64); }
  .lp--direito-civil .editorial__h2 { font-size: var(--fs-32); }
  .lp--direito-civil .editorial__titulo .editorial__paragrafo { max-width: none; }
}

/* ==========================================================================
   DIREITO CIVIL — 04 QUEM CONDUZ O SEU CASO
   Figma 2699:39541 (desktop) / 2699:43063 (mobile)
   Mesma pele e mesmo desenho do bloco comum "LPs — 04" (800 de altura no
   desktop), com 4 diferenças do Figma desta LP:
   fundo Creme; ícones com traço 1,25 em Preto 02 (arquivos advogado-civil-*,
   passados pelo template); no mobile, rótulo das credenciais com 99 (não 120)
   e a foto mais aproximada que no desktop — mesma janela do frame mobile:
   a foto (recorte do desktop) ampliada 1,2714× a partir de 52,47% / 52,71%.
   ========================================================================== */
.lp--direito-civil .advogado { background: var(--color-creme); }
.lp--direito-civil .advogado__credencial-icone { color: var(--color-preto-02); }

/* --- Mobile — Figma 2699:43063 ---------------------------------------------------- */
@media (max-width: 560px) {
  .lp--direito-civil .advogado__retrato-foto {
    object-position: 50% 0;
    transform: scale(1.2714);
    transform-origin: 52.47% 52.71%;
  }
  .lp--direito-civil .advogado__credencial-rotulo-texto { width: 99px; }
}

/* ==========================================================================
   DIREITO CIVIL — 05 COMO FUNCIONA + PRIMEIRA ANÁLISE
   Figma 2699:39567 (desktop) / 2699:43089 (mobile)
   Desktop: 760 de altura (120 + 520 + 120), fundo branco. Passos (738,3 com
   88 de respiro à direita: rótulo + H2 e 3 linhas numeradas entre bordas
   claras) e, a 20, o card escuro (521,7, altura dos passos) com o título,
   a lista com check e a nota de sigilo no fim.
   No Figma a descrição do 1º passo tem largura fixa de 388 (quebra em 2
   linhas); reproduzido só no desktop — no mobile ela ocupa a largura.
   Tablet (sem desenho): até 1101 o card não fica com menos de 380; ≤ 1100
   empilhado como no mobile.
   ========================================================================== */
.lp--direito-civil .funciona {
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.lp--direito-civil .funciona__grid {
  display: flex;
  gap: var(--space-20);
}

/* --- Passos -------------------------------------------------------------------- */
.lp--direito-civil .funciona__passos {
  flex: 0 1 738.3px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-right: calc(var(--space-80) + var(--space-8)); /* 88 */
}
.lp--direito-civil .funciona__passos-titulos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.lp--direito-civil .funciona__passos-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-civil .funciona__passos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp--direito-civil .funciona__lista-passo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
  padding-block: var(--space-28);
  border-top: 1px solid var(--color-borda-clara);
}
.lp--direito-civil .funciona__lista-passo:last-child { border-bottom: 1px solid var(--color-borda-clara); }
.lp--direito-civil .funciona__passo-numero {
  flex: none;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-dourado-escuro);
}
.lp--direito-civil .funciona__passo-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.lp--direito-civil .funciona__passo-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-civil .funciona__passo-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.lp--direito-civil .funciona__lista-passo-1 .funciona__passo-descricao { max-width: 388px; }

/* --- Card "primeira análise" ------------------------------------------------------ */
.lp--direito-civil .funciona__grid-card-primeira-analise {
  flex: 1 1 0;
  min-width: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-28);
  padding: var(--space-40);
  background: var(--color-preto-02);
  border-radius: var(--radius-28);
}
.lp--direito-civil .funciona__analise-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
.lp--direito-civil .funciona__analise-titulo {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-civil .funciona__analise-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px; /* Figma: 30 (fora da escala de espaçamento) */
}
.lp--direito-civil .funciona__analise-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.lp--direito-civil .funciona__item-icone {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dourado-01);
  border-radius: var(--radius-pill);
  color: var(--color-preto-03);
}
.lp--direito-civil .funciona__item-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp--direito-civil .funciona__analise-sigilo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin: 0;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-preto-03);
}
.lp--direito-civil .funciona__sigilo-icone-lock {
  flex: none;
  color: var(--color-branco);
}
.lp--direito-civil .funciona__sigilo-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* Figma: bloco aparado (31 em 2 linhas) */
}

/* --- Tablet (sem desenho, ≤ 1100) e mobile — Figma 2699:43089 ------------------------ */
@media (max-width: 1100px) {
  .lp--direito-civil .funciona__grid {
    flex-direction: column;
    gap: var(--space-40);
  }
  .lp--direito-civil .funciona__passos {
    flex: none;
    padding-right: 0;
  }
  .lp--direito-civil .funciona__grid-card-primeira-analise {
    flex: none;
    min-width: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .lp--direito-civil .funciona { padding-block: var(--space-64); }
  .lp--direito-civil .funciona__passos { gap: var(--space-28); }
  .lp--direito-civil .funciona__passo-numero { font-size: var(--fs-32); }
  .lp--direito-civil .funciona__lista-passo-1 .funciona__passo-descricao { max-width: none; }
  .lp--direito-civil .funciona__grid-card-primeira-analise { padding: var(--space-40) var(--space-24); }
  .lp--direito-civil .funciona__analise-titulo { font-size: var(--fs-20); }
}

/* ==========================================================================
   DIREITO CIVIL — 06 PRAZOS QUE VALEM SABER (tabela)
   Figma 2699:39614 (desktop) / 2699:43136 (mobile)
   Desktop: 772 de altura — caixa Preto 01 (radius 32) com 24 de respiro
   branco nas laterais e embaixo (sem respiro em cima), 120 por dentro.
   Cabeçalho (rótulo escuro + H2) e, a 48, a tabela: 3 linhas de 123 entre
   linhas Preto 03 — prazo (305) · título (305) · descrição (630), vão 20,
   centralizados na vertical.
   Mobile: cada linha vira coluna (prazo, título, descrição; vão 20).
   Tablet (sem desenho, ≤ 1100): prazo e título empilhados à esquerda (260) e
   a descrição à direita.
   ========================================================================== */
.lp--direito-civil .prazos {
  padding: 0 var(--space-24) var(--space-24);
  background: var(--color-branco);
}
.lp--direito-civil .prazos__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  border-radius: var(--radius-32);
}
.lp--direito-civil .prazos__container-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.lp--direito-civil .prazos__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}

/* --- Tabela --------------------------------------------------------------------- */
.lp--direito-civil .prazos__tabela {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp--direito-civil .prazos__tabela-linha {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding-block: var(--space-32);
  border-top: 1px solid var(--color-preto-03);
}
.lp--direito-civil .prazos__tabela-linha:last-child { border-bottom: 1px solid var(--color-preto-03); }
.lp--direito-civil .prazos__linha-valor,
.lp--direito-civil .prazos__linha-titulo {
  flex: 0 1 305px;
  min-width: 0;
}
.lp--direito-civil .prazos__valor-texto {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-dourado-01);
  white-space: nowrap;
}
.lp--direito-civil .prazos__titulo-texto {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-civil .prazos__linha-descricao {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Tablet (sem desenho, ≤ 1100) ------------------------------------------------- */
@media (max-width: 1100px) {
  /* caixa com 40 em cima e embaixo (120 do desktop sobrava no tablet — pedido do responsável) */
  .lp--direito-civil .prazos__container { padding-block: var(--space-40); }
  .lp--direito-civil .prazos__tabela-linha {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    grid-template-areas:
      "valor  descricao"
      "titulo descricao";
    align-items: center;
    gap: var(--space-8) var(--space-40);
  }
  .lp--direito-civil .prazos__linha-valor { grid-area: valor; align-self: end; }
  .lp--direito-civil .prazos__linha-titulo { grid-area: titulo; align-self: start; }
  .lp--direito-civil .prazos__linha-descricao { grid-area: descricao; }
}

/* --- Mobile — Figma 2699:43136 ---------------------------------------------------- */
@media (max-width: 768px) {
  .lp--direito-civil .prazos { padding: 0 var(--space-12) var(--space-24); }
  .lp--direito-civil .prazos__container {
    gap: var(--space-32);
    padding-block: var(--space-64);
  }
  .lp--direito-civil .prazos__container-cabecalho { gap: var(--space-20); }
  .lp--direito-civil .prazos__tabela-linha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  /* em coluna a base de 305 viraria altura; o alinhamento do tablet sai */
  .lp--direito-civil .prazos__linha-valor,
  .lp--direito-civil .prazos__linha-titulo,
  .lp--direito-civil .prazos__linha-descricao {
    flex: none;
    align-self: auto;
  }
  .lp--direito-civil .prazos__valor-texto { font-size: var(--fs-32); }
}

/* ==========================================================================
   DIREITO CIVIL — 08 PERGUNTAS FREQUENTES (FAQPage)
   Figma 2699:40006 (desktop) / 2699:43528 (mobile)
   Mesmo desenho do bloco comum "LPs — 07 PERGUNTAS FREQUENTES" (pele
   template-parts/faq.php), com 2 diferenças do Figma desta LP: a caixa creme
   começa colada nos Depoimentos (sem os 24 de respiro em cima) e a descrição
   do card tem 271 de largura (quebra em 3 linhas, desktop e mobile).
   ========================================================================== */
.lp--direito-civil .faq { padding-top: 0; }
.lp--direito-civil .faq__card-descricao { max-width: 271px; }

/* ==========================================================================
   DIREITO CIVIL — 10 OUTRAS ÁREAS (links internos)
   Figma 2699:40102 (desktop) / 2699:43624 (mobile)
   Mesmo desenho do bloco comum "LPs — 09 OUTRAS ÁREAS" (pele
   template-parts/outras-areas.php). Única diferença do Figma desta LP: no
   mobile o título e a descrição do card ficam a 20 (8 na Trabalhista), o que
   dá cards de 208 (196 na Trabalhista).
   ========================================================================== */
@media (max-width: 768px) {
  .lp--direito-civil .outras-areas__card-texto { gap: var(--space-20); }
}

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 01 HERO (texto + foto do advogado)
   Figma 2699:45105 (desktop) / 2699:45790 (mobile)
   Desktop: 938 de altura; texto de 630 centralizado entre o fim do cabeçalho
   e o fundo (120) — 303,5 do topo, como no Figma. A foto fornecida já traz os
   2 gradientes do Figma (topo e lateral esquerda). Cabeçalho a 41 do topo
   (42 nas outras LPs).
   Mobile: recorte do frame mobile no topo (390×623) sobre fundo preto e o
   texto no fim, a 64 do fundo, começando a 350/623 da altura da foto;
   gradientes por CSS.
   Tablet (sem desenho): foto de fundo com o advogado à direita e o texto
   embaixo, sobre os gradientes do mobile.
   Entrada: fade up escalonado (rótulo → h1 → subtítulo → botão → selos).
   ========================================================================== */
@media (min-width: 769px) {
  .page-template-template-landing-page-direito-imobiliario { --cabecalho-lp-topo: 41px; }
}

.lp--direito-imobiliario .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 938px;
  display: flex;
  align-items: center;
  /* 41 + 84 + 93 = 218 (Figma) */
  padding-top: calc(var(--cabecalho-lp-topo) + var(--cabecalho-lp-altura) + var(--space-80) + var(--space-12) + 1px);
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Foto ------------------------------------------------------------------- */
.lp--direito-imobiliario .hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.lp--direito-imobiliario .hero__image-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%; /* abaixo de 1920 o corte preserva o advogado */
}

/* --- Texto -------------------------------------------------------------------- */
.lp--direito-imobiliario .hero__texto {
  width: 630px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.lp--direito-imobiliario .hero__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-imobiliario .hero__rotulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-16);
  line-height: 1.3; /* Figma: altura automática da IBM Plex (21 em 16) */
  line-height: round(1.3em, 1px);
  color: var(--color-dourado-01);
}
.lp--direito-imobiliario .hero__rotulo-barra {
  flex: none;
  width: var(--space-24);
  height: 2px;
  background: var(--color-dourado-01);
}
.lp--direito-imobiliario .hero__h1 {
  max-width: 546px; /* Figma: "Advogado imobiliário / em Belo Horizonte" */
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-imobiliario .hero__subtitulo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* Botão e selos um embaixo do outro, a 40 (no Figma desktop são filhos
   diretos do hero__texto; o wrapper vem do frame mobile) */
.lp--direito-imobiliario .hero__texto-conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
}
/* Figma desktop: texto do botão aparado — o ícone de 20 define a altura (52) */
.lp--direito-imobiliario .hero__cta .botao__icone { width: 20px; height: 20px; }
.lp--direito-imobiliario .hero__cta .botao__texto { text-box: trim-both cap alphabetic; }

.lp--direito-imobiliario .hero__confianca {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
}
.lp--direito-imobiliario .hero__confianca-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.lp--direito-imobiliario .hero__item-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}
.lp--direito-imobiliario .hero__icone-grupo { width: 15.708px; height: 16.073px; }
.lp--direito-imobiliario .hero__icone-pin { color: var(--color-branco); }
.lp--direito-imobiliario .hero__item-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* respiro título → subtítulo (pedido do responsável; Figma 2–10) */
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  white-space: nowrap;
}
.lp--direito-imobiliario .hero__item-titulo {
  font-weight: 500;
  color: var(--color-branco);
}
.lp--direito-imobiliario .hero__item-subtitulo {
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}

/* --- Entrada: fade up escalonado (keyframes hero-fade-up no style.css) ------- */
.lp--direito-imobiliario .hero__rotulo,
.lp--direito-imobiliario .hero__h1,
.lp--direito-imobiliario .hero__subtitulo,
.lp--direito-imobiliario .hero__cta,
.lp--direito-imobiliario .hero__confianca-item {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.lp--direito-imobiliario .hero__rotulo                       { animation-delay: .15s; }
.lp--direito-imobiliario .hero__h1                           { animation-delay: .3s; }
.lp--direito-imobiliario .hero__subtitulo                    { animation-delay: .45s; }
.lp--direito-imobiliario .hero__cta                          { animation-delay: .6s; }
.lp--direito-imobiliario .hero__confianca-item               { animation-delay: .72s; }
.lp--direito-imobiliario .hero__confianca-item:nth-child(2)  { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
  .lp--direito-imobiliario .hero__rotulo,
  .lp--direito-imobiliario .hero__h1,
  .lp--direito-imobiliario .hero__subtitulo,
  .lp--direito-imobiliario .hero__cta,
  .lp--direito-imobiliario .hero__confianca-item { animation: none; }
}

/* --- Entre 1101 e 1919 (sem desenho) -------------------------------------------
   A foto de 1920 é cortada nas laterais para cobrir os 938 de altura: o
   gradiente lateral do Figma é reaplicado por CSS para o texto manter o
   contraste sobre a parte da foto que entra atrás dele. */
@media (min-width: 1101px) and (max-width: 1919px) {
  .lp--direito-imobiliario .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--color-preto-80) 5.8%, transparent 57.6%);
  }
}

/* --- Tablet (769–1100, sem desenho) --------------------------------------------
   Foto de fundo com o advogado à direita e o texto no fim, a 80 do fundo,
   sobre os gradientes do mobile. */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--direito-imobiliario .hero {
    min-height: 1000px;
    align-items: flex-end;
    padding-bottom: var(--space-80);
  }
  .lp--direito-imobiliario .hero__image-foto { object-position: 72% 50%; }
  .lp--direito-imobiliario .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, transparent 31.387%, color-mix(in srgb, var(--color-preto-01) 92%, transparent) 74.509%),
      linear-gradient(180deg, var(--color-preto-puro) 6.0116%, transparent 25.483%);
  }
}

/* --- Mobile — Figma 2699:45790 ----------------------------------------------------
   Foto 390×623 no topo (limitada em telas maiores); os gradientes cobrem a
   seção inteira (865 no frame), como no Figma. */
@media (max-width: 768px) {
  .lp--direito-imobiliario .hero {
    --hero-foto-altura: min(calc(100vw * 623 / 390), 820px);
    min-height: 0;
    align-items: flex-end;
    padding-top: calc(var(--hero-foto-altura) * 350 / 623);
    padding-bottom: var(--space-64);
    background: var(--color-preto-puro);
  }
  .lp--direito-imobiliario .hero__image-foto {
    height: var(--hero-foto-altura);
    object-position: 50% 0;
  }
  .lp--direito-imobiliario .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, transparent 31.387%, color-mix(in srgb, var(--color-preto-01) 92%, transparent) 74.509%),
      linear-gradient(180deg, var(--color-preto-puro) 6.0116%, transparent 25.483%);
  }

  .lp--direito-imobiliario .hero__texto {
    width: 100%;
    gap: var(--space-28);
  }
  .lp--direito-imobiliario .hero__rotulo {
    font-size: var(--fs-16); /* 16 a pedido do responsável (Figma mobile 12) */
    line-height: var(--lh-text);
  }
  .lp--direito-imobiliario .hero__h1 { max-width: 313px; } /* Figma: 3 linhas */
  .lp--direito-imobiliario .hero__texto-conteudo {
    align-items: stretch;
    gap: var(--space-20);
  }
  .lp--direito-imobiliario .hero__cta { width: 100%; }
  .lp--direito-imobiliario .hero__cta .botao__texto { text-box: normal; } /* Figma mobile: 56 */
  .lp--direito-imobiliario .hero__confianca { gap: var(--space-12) var(--space-20); }
  .lp--direito-imobiliario .hero__item-texto { gap: var(--space-6); }
  .lp--direito-imobiliario .hero__item-subtitulo {
    font-size: var(--fs-12);
    text-box: normal;
  }
}

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 02 COMO PODEMOS AJUDAR (6 problemas)
   Figma 2699:45147 (desktop) / 2699:45836 (mobile)
   Desktop: 934 de altura — cabeçalho (rótulo + H2 à esquerda, botão
   alinhado embaixo à direita), 56 abaixo a grade com 2 linhas de 3 cards de
   240 (borda clara, radius 20). Pele do card: template-parts/ajuda-card.php.
   Mobile: cards empilhados (12 entre os cards da mesma linha do Figma, 20
   entre as linhas) e o botão na largura no fim da seção.
   Tablet (sem desenho, ≤ 1100): grade de 2 colunas.
   ========================================================================== */
.lp--direito-imobiliario .ajuda {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}

/* --- Cabeçalho ------------------------------------------------------------------ */
.lp--direito-imobiliario .ajuda__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}
.lp--direito-imobiliario .ajuda__cabecalho-titulo {
  width: 758px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-imobiliario .ajuda__cabecalho-h2 {
  max-width: 482px; /* Figma: "Como o escritório pode / ajudar no seu caso" */
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-imobiliario .ajuda__cabecalho-cta { flex: none; }
.lp--direito-imobiliario .ajuda__cabecalho-cta .botao__icone { width: 20px; height: 20px; }

/* --- Grade de cards ---------------------------------------------------------------- */
.lp--direito-imobiliario .ajuda__problemas-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--direito-imobiliario .ajuda__grid-linha {
  display: flex;
  gap: var(--space-20);
}
.lp--direito-imobiliario .ajuda__linha-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 240px;
  padding: var(--space-32) var(--space-32) var(--space-28);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-20);
  background: var(--color-branco);
}
.lp--direito-imobiliario .ajuda__card-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--direito-imobiliario .ajuda__card-icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-dourado-01);
  color: var(--color-texto);
}
.lp--direito-imobiliario .ajuda__card-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.lp--direito-imobiliario .ajuda__card-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-imobiliario .ajuda__card-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Tablet (769–1100, sem desenho): 2 colunas ------------------------------------- */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--direito-imobiliario .ajuda__problemas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp--direito-imobiliario .ajuda__grid-linha { display: contents; }
  .lp--direito-imobiliario .ajuda__linha-card { min-height: 0; }
}

/* --- Mobile — Figma 2699:45836 ------------------------------------------------------ */
@media (max-width: 768px) {
  .lp--direito-imobiliario .ajuda {
    gap: var(--space-40);
    padding-block: var(--space-64);
  }
  /* o botão sai do cabeçalho e vai para depois da grade */
  .lp--direito-imobiliario .ajuda__cabecalho { display: contents; }
  .lp--direito-imobiliario .ajuda__cabecalho-titulo { width: 100%; }
  .lp--direito-imobiliario .ajuda__cabecalho-h2 { max-width: none; }
  .lp--direito-imobiliario .ajuda__cabecalho-cta {
    order: 1;
    width: 100%;
  }
  .lp--direito-imobiliario .ajuda__grid-linha {
    flex-direction: column;
    gap: var(--space-12);
  }
  .lp--direito-imobiliario .ajuda__linha-card {
    flex: none;
    min-height: 0;
    padding: var(--space-24) var(--space-24) var(--space-28);
  }
}

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 03 COMO FUNCIONA O ATENDIMENTO
   Figma 2699:45200 (desktop) / 2699:45889 (mobile)
   Caixa creme (radius 32) com 24 de respiro branco nas laterais e embaixo
   (12 / 24 no mobile), sem respiro em cima. Desktop: cabeçalho com o selo
   "Retorno em até 30 minutos úteis" alinhado embaixo à direita e 3 passos
   em cards brancos de mesma altura (246 no Figma, pelo passo mais alto).
   Tablet (sem desenho): até 901 como o desktop; ≤ 900 empilhado como o mobile.
   ========================================================================== */
.lp--direito-imobiliario .funciona {
  padding: 0 var(--space-24) var(--space-24);
  background: var(--color-branco);
}
.lp--direito-imobiliario .funciona__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  border-radius: var(--radius-32);
  background: var(--color-creme);
}

/* --- Cabeçalho ------------------------------------------------------------------ */
.lp--direito-imobiliario .funciona__container-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}
.lp--direito-imobiliario .funciona__cabecalho-titulo {
  width: 758px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--direito-imobiliario .funciona__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-imobiliario .funciona__cabecalho-retorno {
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) 18px var(--space-10) var(--space-14);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  background: var(--color-branco);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}
.lp--direito-imobiliario .funciona__retorno-icone-clock { flex: none; }

/* --- Passos ------------------------------------------------------------------------ */
.lp--direito-imobiliario .funciona__container-passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-20);
}
.lp--direito-imobiliario .funciona__passo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
  padding: var(--space-32);
  border-radius: var(--radius-20);
  background: var(--color-branco);
}
.lp--direito-imobiliario .funciona__passo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.lp--direito-imobiliario .funciona__passo-icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-creme);
  color: var(--color-texto);
}
/* 1º passo em destaque (quadro dourado), como no Figma */
.lp--direito-imobiliario .funciona__passo-1 .funciona__passo-icone { background: var(--color-dourado-01); }
.lp--direito-imobiliario .funciona__passo-numero {
  font-size: var(--fs-40);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-dourado-escuro);
}
.lp--direito-imobiliario .funciona__passo-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.lp--direito-imobiliario .funciona__passo-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--direito-imobiliario .funciona__passo-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Tablet (769–900, sem desenho): empilhado, com os respiros do desktop ---------- */
@media (max-width: 900px) {
  .lp--direito-imobiliario .funciona__container-cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp--direito-imobiliario .funciona__cabecalho-titulo { width: 100%; }
  .lp--direito-imobiliario .funciona__container-passos { flex-direction: column; }
  .lp--direito-imobiliario .funciona__passo { flex: none; }
}

/* --- Mobile — Figma 2699:45889 ------------------------------------------------------ */
@media (max-width: 768px) {
  .lp--direito-imobiliario .funciona { padding: 0 var(--space-12) var(--space-24); }
  .lp--direito-imobiliario .funciona__container {
    gap: var(--space-40);
    padding-block: var(--space-64);
  }
  .lp--direito-imobiliario .funciona__container-passos { gap: var(--space-12); }
  .lp--direito-imobiliario .funciona__passo { padding: var(--space-24); }
  .lp--direito-imobiliario .funciona__passo-numero { font-size: var(--fs-32); }
}

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 04 QUEM CONDUZ O SEU CASO
   Figma 2699:45236 (desktop) / 2699:45925 (mobile)
   Mesma pele e mesmo desenho do bloco comum "LPs — 04" (fundo branco, 800 de
   altura no desktop). Única diferença do Figma desta LP: ícones com traço
   1,25 em Preto 02 (arquivos advogado-imobiliario-*, passados pelo template).
   No frame mobile a foto está esticada na horizontal (erro do arquivo) — o
   site usa o recorte do desktop sem distorção.
   ========================================================================== */
.lp--direito-imobiliario .advogado__credencial-icone { color: var(--color-preto-02); }

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 06 PRAZOS QUE NÃO ESPERAM
   Figma 2699:45262 (desktop) / 2699:45951 (mobile)
   Terceiro desenho do Prazos (Trabalhista: lista + botão; Civil: tabela).
   Caixa Preto 01 (radius 32) com 24 de respiro branco nas laterais e embaixo
   (12 / 24 no mobile), sem respiro em cima. 3 cards Preto 02 de mesma altura
   (301 no Figma, pelo mais alto) e a frase de fechamento sob uma linha
   Preto 03: 1ª parte em 400, 2ª em 500 (`strong`).
   Tablet (sem desenho): até 901 como o desktop; ≤ 900 cards empilhados.
   ========================================================================== */
.lp--direito-imobiliario .prazos {
  padding: 0 var(--space-24) var(--space-24);
  background: var(--color-branco);
}
.lp--direito-imobiliario .prazos__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  border-radius: var(--radius-32);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Cabeçalho ------------------------------------------------------------------ */
.lp--direito-imobiliario .prazos__container-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.lp--direito-imobiliario .prazos__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}

/* --- Cards ---------------------------------------------------------------------- */
.lp--direito-imobiliario .prazos__container-prazos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-20);
}
.lp--direito-imobiliario .prazos__prazo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  border-radius: var(--radius-20);
  background: var(--color-preto-02);
}
.lp--direito-imobiliario .prazos__prazo-valor {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-dourado-01);
}
.lp--direito-imobiliario .prazos__prazo-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-preto-03);
}
.lp--direito-imobiliario .prazos__prazo-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-imobiliario .prazos__prazo-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Fechamento ------------------------------------------------------------------ */
.lp--direito-imobiliario .prazos__container-fechamento {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-preto-03);
}
.lp--direito-imobiliario .prazos__fechamento-icone-clock {
  flex: none;
  color: var(--color-dourado-01);
}
.lp--direito-imobiliario .prazos__fechamento-texto {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--direito-imobiliario .prazos__fechamento-texto strong { font-weight: 500; }

/* --- Tablet (769–900, sem desenho): cards empilhados ------------------------------ */
@media (max-width: 900px) {
  .lp--direito-imobiliario .prazos__container-prazos { flex-direction: column; }
  .lp--direito-imobiliario .prazos__prazo { flex: none; }
}

/* --- Mobile — Figma 2699:45951 ---------------------------------------------------- */
@media (max-width: 768px) {
  .lp--direito-imobiliario .prazos { padding: 0 var(--space-12) var(--space-24); }
  .lp--direito-imobiliario .prazos__container {
    gap: var(--space-40);
    padding-block: var(--space-64);
  }
  .lp--direito-imobiliario .prazos__container-prazos { gap: var(--space-12); }
  .lp--direito-imobiliario .prazos__prazo { padding: var(--space-24); }
  .lp--direito-imobiliario .prazos__prazo-valor { font-size: var(--fs-40); }
  .lp--direito-imobiliario .prazos__container-fechamento { padding-top: var(--space-24); }
  .lp--direito-imobiliario .prazos__fechamento-texto { font-size: var(--fs-20); }
}

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 07 PERGUNTAS FREQUENTES (FAQPage)
   Figma 2699:45654 (desktop) / 2699:46343 (mobile)
   Mesmo desenho do bloco comum "LPs — 07 PERGUNTAS FREQUENTES" (pele
   template-parts/faq.php), com 2 diferenças do Figma desta LP: no desktop a
   caixa creme começa colada nos Depoimentos (no mobile mantém os 24 de
   respiro em cima) e a descrição do card ocupa a largura toda (349,3).
   ========================================================================== */
@media (min-width: 769px) {
  .lp--direito-imobiliario .faq { padding-top: 0; }
}
.lp--direito-imobiliario .faq__card-descricao { max-width: none; }

/* ==========================================================================
   DIREITO IMOBILIÁRIO — 08 CTA FINAL
   Figma 2699:45727 (desktop) / 2699:46416 (mobile)
   Mesmo desenho do bloco comum "LPs — CTA FINAL" (pele template-parts/cta-lp.php;
   sobe 235 / 397 sobre o FAQ). Única diferença do Figma desta LP: no mobile o
   card fica a 85 das Outras áreas (98 na Trabalhista e na Civil).
   ========================================================================== */
@media (max-width: 768px) {
  .lp--direito-imobiliario .cta { padding-bottom: calc(var(--space-80) + 5px); /* 85 */ }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 01 HERO (foto de fundo à direita)
   Figma 2699:40141 (desktop) / 2699:43663 (mobile)
   Desktop: 937 de altura; texto de 738,3 centralizado entre 291 (cabeçalho a
   42 + 84 + 165) e 160 do fundo — 319 do topo, como no Figma. A foto
   fornecida já traz os 2 gradientes do Figma (base e lateral esquerda). H1 em
   400 (Headline/56 desta LP; 500 nas outras).
   Mobile: recorte do frame mobile no topo (390×632) sobre fundo preto e o
   texto no fim, a 64 do fundo, começando a 406/632 da altura da foto; os 3
   gradientes do Figma por CSS.
   Tablet (sem desenho): foto de fundo com o advogado à direita e o texto
   embaixo, sobre os gradientes do mobile.
   Entrada: fade up escalonado (rótulo → h1 → subtítulo → botão → selos).
   ========================================================================== */
.lp--assessoria-empresarial .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 937px;
  display: flex;
  align-items: center;
  padding-top: calc(var(--cabecalho-lp-topo) + var(--cabecalho-lp-altura) + var(--space-120) + var(--space-40) + 5px); /* 291 */
  padding-bottom: calc(var(--space-120) + var(--space-40)); /* 160 */
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Foto ------------------------------------------------------------------- */
.lp--assessoria-empresarial .hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.lp--assessoria-empresarial .hero__image-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%; /* abaixo de 1920 o corte preserva o advogado */
}

/* --- Texto -------------------------------------------------------------------- */
.lp--assessoria-empresarial .hero__texto {
  width: 738.3px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.lp--assessoria-empresarial .hero__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .hero__rotulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-16); /* 16 a pedido do responsável (Figma 12) */
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp--assessoria-empresarial .hero__rotulo-barra {
  flex: none;
  width: var(--space-24);
  height: 2px;
  background: var(--color-dourado-01);
}
.lp--assessoria-empresarial .hero__h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--assessoria-empresarial .hero__subtitulo {
  max-width: 608px; /* Figma: quebra em 2 linhas */
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-creme);
}

/* Botão e selos um embaixo do outro, a 40 */
.lp--assessoria-empresarial .hero__texto-conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
}
.lp--assessoria-empresarial .hero__cta .botao__icone { width: 20px; height: 20px; }

.lp--assessoria-empresarial .hero__confianca {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
}
.lp--assessoria-empresarial .hero__confianca-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.lp--assessoria-empresarial .hero__item-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}
.lp--assessoria-empresarial .hero__icone-grupo { width: 15.708px; height: 16.073px; }
.lp--assessoria-empresarial .hero__icone-pin { color: var(--color-branco); }
.lp--assessoria-empresarial .hero__item-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* respiro título → subtítulo (pedido do responsável; Figma 2–10) */
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  white-space: nowrap;
}
.lp--assessoria-empresarial .hero__item-titulo {
  font-weight: 500;
  color: var(--color-branco);
}
.lp--assessoria-empresarial .hero__item-subtitulo {
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* Figma: bloco de 10 */
}

/* --- Entrada: fade up escalonado (keyframes hero-fade-up no style.css) ------- */
.lp--assessoria-empresarial .hero__rotulo,
.lp--assessoria-empresarial .hero__h1,
.lp--assessoria-empresarial .hero__subtitulo,
.lp--assessoria-empresarial .hero__cta,
.lp--assessoria-empresarial .hero__confianca-item {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.lp--assessoria-empresarial .hero__rotulo                       { animation-delay: .15s; }
.lp--assessoria-empresarial .hero__h1                           { animation-delay: .3s; }
.lp--assessoria-empresarial .hero__subtitulo                    { animation-delay: .45s; }
.lp--assessoria-empresarial .hero__cta                          { animation-delay: .6s; }
.lp--assessoria-empresarial .hero__confianca-item               { animation-delay: .72s; }
.lp--assessoria-empresarial .hero__confianca-item:nth-child(2)  { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
  .lp--assessoria-empresarial .hero__rotulo,
  .lp--assessoria-empresarial .hero__h1,
  .lp--assessoria-empresarial .hero__subtitulo,
  .lp--assessoria-empresarial .hero__cta,
  .lp--assessoria-empresarial .hero__confianca-item { animation: none; }
}

/* --- Entre 1101 e 1919 (sem desenho) -------------------------------------------
   A foto de 1920 é cortada nas laterais para cobrir os 937 de altura: o
   gradiente lateral do Figma é reaplicado por CSS para o texto manter o
   contraste sobre a parte da foto que entra atrás dele. */
@media (min-width: 1101px) and (max-width: 1919px) {
  .lp--assessoria-empresarial .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--color-preto-puro) 5.8%, transparent 57.6%);
  }
}

/* --- Tablet (769–1100, sem desenho) --------------------------------------------
   Foto de fundo com o advogado à direita e o texto no fim, a 80 do fundo,
   sobre os gradientes do mobile. */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--assessoria-empresarial .hero {
    min-height: 1000px;
    align-items: flex-end;
    padding-bottom: var(--space-80);
  }
  .lp--assessoria-empresarial .hero__image-foto { object-position: 72% 50%; }
  .lp--assessoria-empresarial .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, transparent 38.322%, var(--color-preto-01) 83.568%),
      linear-gradient(0deg, var(--color-preto-puro) 16.549%, transparent 56.514%);
  }
}

/* --- Mobile — Figma 2699:43663 ----------------------------------------------------
   Foto 390×632 no topo (limitada em telas maiores) sobre fundo preto; os 3
   gradientes cobrem a seção inteira (905 no frame), como no Figma. */
@media (max-width: 768px) {
  .lp--assessoria-empresarial .hero {
    --hero-foto-altura: min(calc(100vw * 632 / 390), 820px);
    min-height: 0;
    align-items: flex-end;
    padding-top: calc(var(--hero-foto-altura) * 406 / 632);
    padding-bottom: var(--space-64);
    background: var(--color-preto-puro);
  }
  .lp--assessoria-empresarial .hero__image-foto {
    height: var(--hero-foto-altura);
    object-position: 50% 0;
  }
  .lp--assessoria-empresarial .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(165deg, color-mix(in srgb, var(--color-preto-puro) 69%, transparent) 0.26%, transparent 17.558%),
      linear-gradient(180deg, transparent 38.322%, var(--color-preto-01) 83.568%),
      linear-gradient(0deg, var(--color-preto-puro) 16.549%, transparent 56.514%);
  }

  .lp--assessoria-empresarial .hero__texto {
    width: 100%;
    gap: var(--space-28);
  }
  .lp--assessoria-empresarial .hero__subtitulo { max-width: none; }
  .lp--assessoria-empresarial .hero__texto-conteudo {
    align-items: stretch;
    gap: var(--space-28);
  }
  .lp--assessoria-empresarial .hero__cta { width: 100%; }
  .lp--assessoria-empresarial .hero__confianca { gap: var(--space-12) var(--space-20); }
  .lp--assessoria-empresarial .hero__item-texto { gap: var(--space-6); }
  .lp--assessoria-empresarial .hero__item-subtitulo {
    font-size: var(--fs-12);
    text-box: normal;
  }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 02 SINAIS · Variação 1 (texto + lista limpa)
   Figma 2699:40183 (desktop) / 2699:43709 (mobile)
   Desktop: 727 de altura; grade com o texto (540) e a lista (644) a 96. O
   texto + botão ficam centralizados na altura da lista (487): grid com uma
   linha flexível em cima e outra embaixo. 56 entre o parágrafo e o botão
   (24 + espaço de 8 + 24 no Figma). Linhas da lista com Borda clara.
   Mobile: texto, lista e o botão na largura no fim (ordem do HTML).
   Tablet (sem desenho, ≤ 1100): empilhado como o mobile, com os tamanhos do
   desktop e o botão do tamanho do texto.
   ========================================================================== */
.lp--assessoria-empresarial .sinais {
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.lp--assessoria-empresarial .sinais__grade {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--space-96);
}
.lp--assessoria-empresarial .sinais__texto {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .sinais__lista {
  grid-column: 2;
  grid-row: 1 / -1;
}
.lp--assessoria-empresarial .sinais__grade-btn-primary-whats {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: var(--space-56);
}
.lp--assessoria-empresarial .sinais__grade-btn-primary-whats .botao__icone { width: 20px; height: 20px; }

/* --- Texto ------------------------------------------------------------------- */
.lp--assessoria-empresarial .sinais__h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--assessoria-empresarial .sinais__paragrafo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Lista ------------------------------------------------------------------- */
.lp--assessoria-empresarial .sinais__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-borda-clara);
}
.lp--assessoria-empresarial .sinais__lista-situacao {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-borda-clara);
}
.lp--assessoria-empresarial .sinais__situacao-icone {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.lp--assessoria-empresarial .sinais__situacao-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}

/* --- Tablet (≤ 1100, sem desenho) e mobile: empilhado ------------------------- */
@media (max-width: 1100px) {
  .lp--assessoria-empresarial .sinais__grade {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }
  /* título na largura toda (pedido do responsável); o parágrafo segue até 640 */
  .lp--assessoria-empresarial .sinais__paragrafo { max-width: 640px; }
  .lp--assessoria-empresarial .sinais__grade-btn-primary-whats {
    align-self: flex-start;
    margin-top: 0;
  }
}

/* --- Mobile — Figma 2699:43709 ------------------------------------------------- */
@media (max-width: 768px) {
  .lp--assessoria-empresarial .sinais { padding-block: var(--space-64); }
  .lp--assessoria-empresarial .sinais__texto { max-width: none; }
  .lp--assessoria-empresarial .sinais__situacao-texto { font-size: var(--fs-16); }
  .lp--assessoria-empresarial .sinais__grade-btn-primary-whats { align-self: stretch; }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 03 O QUE A ASSESSORIA COBRE (4 pilares)
   Figma 2699:40218 (desktop) / 2699:43743 (mobile)
   Caixa Preto 01 (radius 32) com 24 de respiro branco nas laterais e embaixo
   (12 / 24 no mobile), sem respiro em cima. Desktop: cabeçalho com o
   subtítulo (413) alinhado embaixo à direita; 4 pilares lado a lado com o
   conteúdo de mesma largura (263,25 — `content-box`), separados por linhas
   Preto 03 da altura de cada pilar. Serviços com check 14 Dourado 01 e o
   texto aparado (bloco de 10), centralizados no check.
   Mobile: pilares empilhados; do 2º ao 4º, linha em cima e 24 em cima e
   embaixo (o 1º sem respiro), como no Figma.
   Tablet (sem desenho, ≤ 1100): 2 × 2.
   ========================================================================== */
.lp--assessoria-empresarial .pilares {
  padding: 0 var(--space-24) var(--space-24);
  background: var(--color-branco);
}
.lp--assessoria-empresarial .pilares__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  border-radius: var(--radius-32);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Cabeçalho ------------------------------------------------------------------ */
.lp--assessoria-empresarial .pilares__container-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .pilares__cabecalho-titulo {
  width: 738.3px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .pilares__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--assessoria-empresarial .pilares__cabecalho-subtitulo {
  flex: 0 1 413px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Pilares ------------------------------------------------------------------------ */
.lp--assessoria-empresarial .pilares__container-pilares {
  display: flex;
  align-items: flex-start;
}
.lp--assessoria-empresarial .pilares__pilar {
  box-sizing: content-box; /* largura igual de conteúdo nos 4 (Figma) */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 0 var(--space-32);
  border-left: 1px solid var(--color-preto-03);
}
.lp--assessoria-empresarial .pilares__pilar:first-child {
  padding-left: 0;
  border-left: 0;
}
.lp--assessoria-empresarial .pilares__pilar-icone {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-14);
  background: var(--color-preto-03);
  color: var(--color-dourado-01);
}
.lp--assessoria-empresarial .pilares__pilar-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.lp--assessoria-empresarial .pilares__pilar-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--assessoria-empresarial .pilares__pilar-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp--assessoria-empresarial .pilares__pilar-servicos {
  margin: 0;
  padding: var(--space-20) 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  border-top: 1px solid var(--color-preto-03);
}
.lp--assessoria-empresarial .pilares__servico {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.lp--assessoria-empresarial .pilares__servico-icone-check {
  flex: none;
  color: var(--color-dourado-01);
}
.lp--assessoria-empresarial .pilares__servico-nome {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
}

/* --- Tablet (561–1100, sem desenho): 2 × 2 ------------------------------------------ */
@media (min-width: 561px) and (max-width: 1100px) {
  .lp--assessoria-empresarial .pilares__container-cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp--assessoria-empresarial .pilares__cabecalho-titulo { width: 100%; }
  .lp--assessoria-empresarial .pilares__cabecalho-subtitulo { flex: none; max-width: 413px; }
  .lp--assessoria-empresarial .pilares__container-pilares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-48);
  }
  .lp--assessoria-empresarial .pilares__pilar {
    box-sizing: border-box;
    padding: 0 var(--space-32);
  }
  .lp--assessoria-empresarial .pilares__pilar:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .lp--assessoria-empresarial .pilares__pilar:nth-child(even) { padding-right: 0; }
}

/* --- Mobile — Figma 2699:43743 ------------------------------------------------------ */
@media (max-width: 768px) {
  .lp--assessoria-empresarial .pilares { padding: 0 var(--space-12) var(--space-24); }
  .lp--assessoria-empresarial .pilares__container {
    gap: var(--space-40);
    padding-block: var(--space-64);
  }
  .lp--assessoria-empresarial .pilares__container-cabecalho {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .lp--assessoria-empresarial .pilares__cabecalho-titulo { width: auto; }
  .lp--assessoria-empresarial .pilares__cabecalho-subtitulo { flex: none; }
}
/* Celular (≤ 560): pilares empilhados com linha entre eles. Sem o recuo de 32 à
   direita (a linha dos serviços ficava mais curta que a divisória — "linha
   quebrada") e com 24 embaixo do 1º (a divisória encostava no último serviço). */
@media (max-width: 560px) {
  .lp--assessoria-empresarial .pilares__container-pilares { flex-direction: column; align-items: stretch; }
  .lp--assessoria-empresarial .pilares__pilar,
  .lp--assessoria-empresarial .pilares__pilar:first-child {
    box-sizing: border-box;
    flex: none;
    padding: var(--space-24) 0;
    border-left: 0;
    border-top: 1px solid var(--color-preto-03);
  }
  .lp--assessoria-empresarial .pilares__pilar:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .lp--assessoria-empresarial .pilares__pilar:last-child { padding-bottom: 0; }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 04 SETORES ATENDIDOS
   Figma 2699:40292 (desktop) / 2699:43817 (mobile)
   Fundo Creme. Desktop: 1169 de altura — cabeçalho (subtítulo de 413 à
   direita, embaixo) e grade de 2 linhas com as alturas fixas do Figma (383 e
   380). Cards brancos (padding 10, radius 24) com foto 180 (radius 16) e
   texto (22/18/14); o card escuro "outros" tem padding 36. Como no Figma, o
   conteúdo dos cards da mesma linha tem a mesma largura (`content-box`):
   393,3 na 1ª linha, 376 na 2ª (o card escuro fica com 448).
   Serviços com marcador de 5 (Preto 02) e o texto aparado (bloco de 10),
   centralizados no marcador; 20 entre eles (10 no mobile).
   Tablet (sem desenho, ≤ 1100): grade de 2 colunas.
   ========================================================================== */
.lp--assessoria-empresarial .setores {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-creme);
}

/* --- Cabeçalho ------------------------------------------------------------------ */
.lp--assessoria-empresarial .setores__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .setores__cabecalho-titulo {
  width: 738.3px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .setores__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--assessoria-empresarial .setores__cabecalho-subtitulo {
  flex: 0 1 413px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Grade ---------------------------------------------------------------------- */
.lp--assessoria-empresarial .setores__grade {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--assessoria-empresarial .setores__grade-linha {
  display: flex;
  gap: var(--space-20);
  min-height: 383px; /* Figma: alturas fixas das linhas */
}
.lp--assessoria-empresarial .setores__grade-linha + .setores__grade-linha { min-height: 380px; }

.lp--assessoria-empresarial .setores__linha-setor {
  box-sizing: content-box; /* conteúdo de mesma largura na linha (Figma) */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-branco);
}
.lp--assessoria-empresarial .setores__setor-imagem {
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lp--assessoria-empresarial .setores__setor-imagem-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp--assessoria-empresarial .setores__setor-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 22px 18px var(--space-14);
}
.lp--assessoria-empresarial .setores__setor-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--assessoria-empresarial .setores__setor-servicos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.lp--assessoria-empresarial .setores__servico {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.lp--assessoria-empresarial .setores__servico-marcador {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-preto-02);
}
.lp--assessoria-empresarial .setores__servico-nome {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto);
  text-box: trim-both cap alphabetic;
}

/* --- Card escuro "O seu setor não está aqui?" ------------------------------------- */
.lp--assessoria-empresarial .setores__linha-setor-outros {
  justify-content: space-between;
  gap: var(--space-24);
  padding: calc(var(--space-32) + var(--space-4));
  background: var(--color-preto-02);
}
.lp--assessoria-empresarial .setores__outros-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.lp--assessoria-empresarial .setores__outros-titulo {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.lp--assessoria-empresarial .setores__outros-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.lp--assessoria-empresarial .setores__outros-cta { align-self: flex-start; }
.lp--assessoria-empresarial .setores__outros-cta .botao__icone { width: 20px; height: 20px; }

/* --- Tablet (769–1100, sem desenho): 2 colunas ------------------------------------ */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--assessoria-empresarial .setores__cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp--assessoria-empresarial .setores__cabecalho-titulo { width: 100%; }
  .lp--assessoria-empresarial .setores__cabecalho-subtitulo { flex: none; max-width: 413px; }
  .lp--assessoria-empresarial .setores__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp--assessoria-empresarial .setores__grade-linha,
  .lp--assessoria-empresarial .setores__grade-linha + .setores__grade-linha { display: contents; }
  .lp--assessoria-empresarial .setores__linha-setor { box-sizing: border-box; }
}

/* --- Mobile — Figma 2699:43817 ------------------------------------------------------ */
@media (max-width: 768px) {
  .lp--assessoria-empresarial .setores {
    gap: var(--space-40);
    padding-block: var(--space-64);
  }
  .lp--assessoria-empresarial .setores__cabecalho {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .lp--assessoria-empresarial .setores__cabecalho-titulo { width: auto; }
  .lp--assessoria-empresarial .setores__cabecalho-subtitulo { flex: none; }
  .lp--assessoria-empresarial .setores__grade-linha,
  .lp--assessoria-empresarial .setores__grade-linha + .setores__grade-linha {
    flex-direction: column;
    min-height: 0;
  }
  .lp--assessoria-empresarial .setores__linha-setor {
    box-sizing: border-box;
    flex: none;
  }
  .lp--assessoria-empresarial .setores__setor-servicos { gap: var(--space-10); }
  .lp--assessoria-empresarial .setores__linha-setor-outros { padding: calc(var(--space-32) + var(--space-4)) var(--space-24); }
  .lp--assessoria-empresarial .setores__outros-titulo { font-size: var(--fs-20); }
  .lp--assessoria-empresarial .setores__outros-cta { align-self: stretch; }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 05 COMO COMEÇA A ASSESSORIA
   Figma 2699:40378 (desktop) / 2699:43903 (mobile)
   Desktop: 1012 de altura — cabeçalho, 48 abaixo as 3 etapas numa caixa com
   Borda clara (radius 28) e 48 abaixo o bloco creme da primeira conversa
   (padding 60, radius 24). Etapas com padding 40 e o conteúdo de mesma
   largura (345,3 — `content-box`, como no Figma); a 1ª em Preto 02 com o
   quadro do ícone Preto 03; divisórias à direita (Texto principal na 1ª,
   Borda clara na 2ª). Itens da primeira conversa em 4 colunas, com as
   larguras de texto do Figma (quebras em 2 linhas).
   Mobile: etapas empilhadas (40/24, linha em cima do 2º e 3º passo); bloco
   creme com padding 32/24, itens em linha (ícone + texto).
   Tablet (sem desenho, ≤ 1100): etapas empilhadas e itens 2 × 2.
   ========================================================================== */
.lp--assessoria-empresarial .inicio {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}

/* --- Cabeçalho ------------------------------------------------------------------ */
.lp--assessoria-empresarial .inicio__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
.lp--assessoria-empresarial .inicio__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}

/* --- Etapas ---------------------------------------------------------------------- */
.lp--assessoria-empresarial .inicio__etapas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  height: 262px; /* Figma: altura fixa (o conteúdo das etapas passa 2 e é cortado) */
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-28);
  overflow: hidden;
}
.lp--assessoria-empresarial .inicio__etapa {
  box-sizing: content-box; /* conteúdo de mesma largura nas 3 (Figma) */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
  padding: var(--space-40);
  background: var(--color-branco);
}
.lp--assessoria-empresarial .inicio__etapa-1 {
  border-right: 1px solid var(--color-texto);
  background: var(--color-preto-02);
}
.lp--assessoria-empresarial .inicio__etapa-2 { border-right: 1px solid var(--color-borda-clara); }
.lp--assessoria-empresarial .inicio__etapa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.lp--assessoria-empresarial .inicio__etapa-icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.lp--assessoria-empresarial .inicio__etapa-1 .inicio__etapa-icone {
  background: var(--color-preto-03);
  color: var(--color-dourado-01);
}
.lp--assessoria-empresarial .inicio__etapa-rotulo {
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
.lp--assessoria-empresarial .inicio__etapa-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.lp--assessoria-empresarial .inicio__etapa-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--assessoria-empresarial .inicio__etapa-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.lp--assessoria-empresarial .inicio__etapa-1 .inicio__etapa-rotulo,
.lp--assessoria-empresarial .inicio__etapa-1 .inicio__etapa-descricao { color: var(--color-texto-secundario-escuro); }
.lp--assessoria-empresarial .inicio__etapa-1 .inicio__etapa-titulo { color: var(--color-branco); }

/* --- Primeira conversa ------------------------------------------------------------- */
.lp--assessoria-empresarial .inicio__primeira-conversa {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: calc(var(--space-56) + var(--space-4)); /* 60 */
  border-radius: var(--radius-lg);
  background: var(--color-creme);
}
.lp--assessoria-empresarial .inicio__primeira-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.lp--assessoria-empresarial .inicio__primeira-itens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-20);
}
.lp--assessoria-empresarial .inicio__itens-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
}
.lp--assessoria-empresarial .inicio__item-icone {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.lp--assessoria-empresarial .inicio__item-texto {
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto);
  text-box: trim-both cap alphabetic;
}
/* Larguras do Figma (quebra em 2 linhas) */
.lp--assessoria-empresarial .inicio__itens-item:nth-child(1) .inicio__item-texto { max-width: 188px; }
.lp--assessoria-empresarial .inicio__itens-item:nth-child(2) .inicio__item-texto { max-width: 197px; }
.lp--assessoria-empresarial .inicio__itens-item:nth-child(3) .inicio__item-texto { max-width: 160px; }
.lp--assessoria-empresarial .inicio__itens-item:nth-child(4) .inicio__item-texto { max-width: 191px; }
.lp--assessoria-empresarial .inicio__primeira-sigilo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-borda-clara);
  color: var(--color-texto-secundario);
}
.lp--assessoria-empresarial .inicio__sigilo-icone-lock { flex: none; }
.lp--assessoria-empresarial .inicio__sigilo-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  text-box: trim-both cap alphabetic;
}

/* --- Tablet (≤ 1100, sem desenho) e mobile: etapas empilhadas ------------------------ */
@media (max-width: 1100px) {
  .lp--assessoria-empresarial .inicio__etapas {
    flex-direction: column;
    height: auto;
  }
  .lp--assessoria-empresarial .inicio__etapa {
    box-sizing: border-box;
    flex: none;
  }
  .lp--assessoria-empresarial .inicio__etapa-1,
  .lp--assessoria-empresarial .inicio__etapa-2 { border-right: 0; }
  .lp--assessoria-empresarial .inicio__etapa-2,
  .lp--assessoria-empresarial .inicio__etapa-3 { border-top: 1px solid var(--color-borda-clara); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--assessoria-empresarial .inicio__primeira-itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-28);
  }
}

/* --- Mobile — Figma 2699:43903 ------------------------------------------------------ */
@media (max-width: 768px) {
  .lp--assessoria-empresarial .inicio {
    gap: var(--space-32);
    padding-block: var(--space-64);
  }
  .lp--assessoria-empresarial .inicio__cabecalho { gap: var(--space-20); }
  .lp--assessoria-empresarial .inicio__etapa { padding: var(--space-40) var(--space-24); }
  .lp--assessoria-empresarial .inicio__primeira-conversa {
    gap: var(--space-28);
    padding: var(--space-32) var(--space-24);
  }
  .lp--assessoria-empresarial .inicio__primeira-itens {
    flex-direction: column;
    gap: var(--space-20);
  }
  .lp--assessoria-empresarial .inicio__itens-item {
    flex: none;
    flex-direction: row;
    gap: var(--space-12);
  }
  .lp--assessoria-empresarial .inicio__itens-item:nth-child(n) .inicio__item-texto {
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 07 QUEM CONDUZ A ASSESSORIA
   Figma 2699:40431 (desktop) / 2699:43956 (mobile)
   Mesma pele e mesmo desenho do bloco comum "LPs — 04" (retrato 521,7×560,
   texto com 108 de recuo, credenciais), com a grade dentro de uma caixa
   Creme (`advogado__container`, radius 32) com 24 de respiro branco em volta
   (12 / 24 no mobile). Ícones com traço 1,25 em Preto 02 (arquivos
   advogado-assessoria-*, passados pelo template).
   ========================================================================== */
.lp--assessoria-empresarial .advogado { padding: var(--space-24); }
.lp--assessoria-empresarial .advogado__container {
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  border-radius: var(--radius-32);
  background: var(--color-creme);
  overflow: hidden;
}
.lp--assessoria-empresarial .advogado__credencial-icone { color: var(--color-preto-02); }

@media (max-width: 768px) {
  .lp--assessoria-empresarial .advogado { padding: var(--space-24) var(--space-12); }
  .lp--assessoria-empresarial .advogado__container { padding-block: var(--space-64); }
}

/* ==========================================================================
   ASSESSORIA EMPRESARIAL — 08 PERGUNTAS FREQUENTES (FAQPage)
   Figma 2699:40824 (desktop) / 2699:44349 (mobile)
   Mesmo desenho do bloco comum "LPs — 07 PERGUNTAS FREQUENTES" (pele
   template-parts/faq.php), com 4 diferenças do Figma desta LP: a caixa creme
   começa colada nos Depoimentos (desktop e mobile); o título do card com 250
   (quebra "Quer entender o risco / da sua empresa?"); a descrição do card na
   largura toda; a pergunta aberta com borda Dourado 02. Embaixo, 120 (64) +
   --lp-cta-sobe (235 / 385 no mobile — no topo do arquivo).
   ========================================================================== */
.lp--assessoria-empresarial .faq { padding-top: 0; }
.lp--assessoria-empresarial .faq__card-titulo { max-width: 250px; }
.lp--assessoria-empresarial .faq__card-descricao { max-width: none; }
.lp--assessoria-empresarial .faq__lista-item--aberto { border-color: var(--color-dourado-02); }

/* ==========================================================================
   CONTATO — 01 HERO DE CONTATO (breadcrumb + informações)
   Figma 2699:40959 (desktop) / 2699:44484 (mobile)
   Desktop: 536 de altura — 218 em cima (44 + 86 do cabeçalho flutuante + 88),
   breadcrumb, 32, a grade (texto à esquerda, informações de 380 alinhadas
   ao fim) e 120 embaixo. Mobile: 175 em cima (16 + 86 + 73), tudo empilhado
   (20 entre o texto e as informações) e 64 embaixo.
   Tablet (sem desenho, ≤ 1100): informações embaixo do texto.
   Entrada: fade up escalonado (breadcrumb → h1 → subtítulo → informações).
   ========================================================================== */
.pagina--contato .hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  padding-top: calc(var(--cabecalho-topo) + var(--cabecalho-altura) + var(--space-80) + var(--space-8));
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Breadcrumb ----------------------------------------------------------------- */
.pagina--contato .hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}
.pagina--contato .hero__breadcrumb-item {
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
  transition: color .2s ease;
}
.pagina--contato .hero__breadcrumb-item:hover { color: var(--color-branco); }
.pagina--contato .hero__breadcrumb-icone-chevronright { color: var(--color-dourado-01); }
.pagina--contato .hero__breadcrumb-atual {
  font-weight: 500;
  color: var(--color-branco);
}

/* --- Grade ------------------------------------------------------------------------ */
.pagina--contato .hero__grid {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
}
.pagina--contato .hero__texto {
  flex: 0 1 630px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.pagina--contato .hero__h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.pagina--contato .hero__subtitulo {
  max-width: 529px;
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Informações ---------------------------------------------------------------- */
.pagina--contato .hero__informacoes {
  flex: none;
  width: 380px;
  margin: 0;
}
.pagina--contato .hero__informacao {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-12);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}
.pagina--contato .hero__informacao + .hero__informacao { border-top: 1px solid var(--color-preto-03); }
.pagina--contato .hero__informacao .ico { color: var(--color-dourado-01); }
.pagina--contato .hero__informacao-rotulo {
  flex: none;
  width: 96px;
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
}
.pagina--contato .hero__informacao-valor {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-weight: 500;
  color: var(--color-branco);
}

/* --- Entrada: fade up escalonado (keyframes hero-fade-up no style.css) ------- */
.pagina--contato .hero__breadcrumb,
.pagina--contato .hero__h1,
.pagina--contato .hero__subtitulo,
.pagina--contato .hero__informacao {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.pagina--contato .hero__breadcrumb                     { animation-delay: .15s; }
.pagina--contato .hero__h1                             { animation-delay: .3s; }
.pagina--contato .hero__subtitulo                      { animation-delay: .45s; }
.pagina--contato .hero__informacao                     { animation-delay: .6s; }
.pagina--contato .hero__informacao:nth-child(2)        { animation-delay: .72s; }
.pagina--contato .hero__informacao:nth-child(3)        { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
  .pagina--contato .hero__breadcrumb,
  .pagina--contato .hero__h1,
  .pagina--contato .hero__subtitulo,
  .pagina--contato .hero__informacao { animation: none; }
}

/* --- Tablet (sem desenho) ------------------------------------------------------- */
@media (max-width: 1100px) {
  .pagina--contato .hero__grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .pagina--contato .hero__texto { flex: none; max-width: 630px; }
  .pagina--contato .hero__informacoes { width: min(100%, 480px); }
}

/* --- Mobile — Figma 2699:44484 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--contato .hero {
    padding-top: calc(var(--cabecalho-topo) + var(--cabecalho-altura) + var(--space-64) + var(--space-8) + 1px); /* 175 */
    padding-bottom: var(--space-64);
  }
  .pagina--contato .hero__grid { gap: var(--space-20); }
  .pagina--contato .hero__texto { max-width: none; width: 100%; }
  .pagina--contato .hero__subtitulo { max-width: none; }
  .pagina--contato .hero__informacoes { width: 100%; }
}

/* ==========================================================================
   CONTATO — 02 FORMULÁRIO E CANAIS
   Figma 2699:40982 (desktop) / 2699:44519 (mobile)
   Caixa creme (radius 32, 24 de respiro branco; 8 nas laterais no mobile)
   com a grade formulário (738) + canais (522) e o painel "Depois do envio".
   Desktop: o card do formulário tem 54 entre os blocos (796 de altura, como
   no Figma) e a coluna dos canais estica até ele — o card das redes ocupa
   o que sobra. Mobile: tudo empilhado.
   Tablet (sem desenho, ≤ 1100): formulário e canais na largura, um embaixo
   do outro; redes ainda em linha; passos empilhados.
   ========================================================================== */
.pagina--contato .formulario {
  padding: var(--space-24);
  background: var(--color-branco);
}
.pagina--contato .formulario__container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-48) - 1px); /* 47, Figma */
  padding-block: var(--space-96);
  padding-inline: max(var(--space-40), (100% - var(--container)) / 2);
  border-radius: var(--radius-32);
  background: var(--color-creme);
}
.pagina--contato .formulario__painel-grid {
  display: grid;
  grid-template-columns: minmax(0, 738fr) minmax(0, 522fr);
  gap: var(--space-20);
}

/* --- Formulário ------------------------------------------------------------------ */
.pagina--contato .formulario__grid-formulario {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-48) + var(--space-6)); /* 54: 796 de altura, como no Figma */
  padding: calc(var(--space-40) + var(--space-4)); /* 44 */
  border-radius: var(--radius-lg);
  background: var(--color-branco);
  box-shadow: var(--shadow-soft);
}
.pagina--contato .formulario__form { display: contents; } /* os blocos do form seguem o vão do card */
.pagina--contato .formulario__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-borda-clara);
}
.pagina--contato .formulario__titulo {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--contato .formulario__subtitulo {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--contato .formulario__aviso {
  margin: 0;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-dourado-01);
  border-radius: var(--radius-sm);
  background: var(--color-creme);
  font-size: var(--fs-14);
  color: var(--color-texto);
}

.pagina--contato .formulario__linha-identificacao,
.pagina--contato .formulario__linha-contato-e-area {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}
.pagina--contato .formulario__linha-identificacao > div,
.pagina--contato .formulario__linha-contato-e-area > div,
.pagina--contato .formulario__campo-mensagem {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.pagina--contato .formulario__campo-rotulo {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}
/* Campo com só a linha de baixo (51 de altura: 12 + 24 + 14 + 1) */
.pagina--contato .formulario__campo-input {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--space-12) 0 var(--space-14);
  border: 0;
  border-bottom: 1px solid var(--color-borda-clara);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto);
  transition: border-color .2s ease;
}
.pagina--contato .formulario__campo-input::placeholder {
  color: var(--color-texto-placeholder);
  opacity: 1;
}
.pagina--contato .formulario__campo-input:focus {
  outline: none;
  border-bottom-color: var(--color-dourado-01);
}
.pagina--contato .formulario__campo-input:focus-visible { box-shadow: 0 1px 0 var(--color-dourado-01); }
/* Mensagem: cresce com o texto (começa numa linha, como no Figma) */
.pagina--contato textarea.formulario__campo-input {
  field-sizing: content;
  max-height: 240px;
  resize: none;
}
@supports not (field-sizing: content) {
  .pagina--contato textarea.formulario__campo-input { resize: vertical; }
}
/* Select: seta própria (formulario__input-icone-chevrondown, 18) */
.pagina--contato .formulario__campo-select { position: relative; }
.pagina--contato select.formulario__campo-input {
  height: 51px;
  padding-right: calc(18px + var(--space-8));
  appearance: none;
  cursor: pointer;
}
.pagina--contato .formulario__campo-select:has(option[value=""]:checked) select { color: var(--color-texto-placeholder); }
.pagina--contato select.formulario__campo-input option { color: var(--color-texto); }
.pagina--contato .formulario__input-icone-chevrondown {
  position: absolute;
  top: 15px;
  right: 0;
  color: var(--color-texto-secundario);
  pointer-events: none;
}

.pagina--contato .formulario__enviar {
  width: 100%;
  border: 0;
  cursor: pointer;
}
.pagina--contato .formulario__rodape { padding-top: var(--space-8); }
.pagina--contato .formulario__lgpd {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--contato .formulario__lgpd-texto {
  flex: 1 1 0;
  min-width: 0;
  text-box: trim-both cap alphabetic;
}
.pagina--contato .formulario__lgpd-frase { display: block; }
.pagina--contato .formulario__lgpd a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.pagina--contato .formulario__lgpd a:hover { color: var(--color-texto); }

/* --- Canais -------------------------------------------------------------------- */
.pagina--contato .formulario__painel-canais {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* WhatsApp */
.pagina--contato .formulario__canais-card-whatsapp {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-preto-02);
}
.pagina--contato .formulario__whatsapp-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
}
.pagina--contato .formulario__whatsapp-icone {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-preto-03);
  color: var(--color-dourado-01);
}
.pagina--contato .formulario__whatsapp-tag {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}
.pagina--contato .formulario__tag-ponto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-dourado-01);
}
.pagina--contato .formulario__tag-texto {
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-dourado-01);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.pagina--contato .formulario__whatsapp-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}
.pagina--contato .formulario__whatsapp-rotulo {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.pagina--contato .formulario__whatsapp-numero {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: -0.01em; /* -0,32 do Figma */
  color: var(--color-branco);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.pagina--contato .formulario__whatsapp-cta { width: 100%; }
.pagina--contato .formulario__whatsapp-cta .botao__icone { width: 20px; height: 20px; }

/* Contatos */
.pagina--contato .formulario__canais-card-contatos {
  margin: 0;
  padding: var(--space-8) var(--space-28);
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-branco);
}
.pagina--contato .formulario__card-contatos-contato {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding-block: var(--space-20);
}
.pagina--contato .formulario__card-contatos-contato + .formulario__card-contatos-contato { border-top: 1px solid var(--color-borda-clara); }
.pagina--contato .formulario__card-contatos-contato--endereco { align-items: flex-start; }
.pagina--contato .formulario__contato-icone,
.pagina--contato .formulario__passo-icone {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.pagina--contato .formulario__contato-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  line-height: var(--lh-text);
}
.pagina--contato .formulario__contato-rotulo {
  font-size: var(--fs-14);
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic;
}
.pagina--contato .formulario__contato-valor {
  max-width: 100%;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-texto);
  overflow-wrap: anywhere;
  text-box: trim-both cap alphabetic;
  transition: color .2s ease;
}
.pagina--contato .formulario__card-contatos-contato--endereco .formulario__contato-valor { text-box: normal; }
.pagina--contato a.formulario__contato-valor:hover { color: var(--color-dourado-escuro); }

/* Redes */
.pagina--contato .formulario__canais-card-redes-sociais {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-20) + 1px); /* 21, Figma */
  padding: var(--space-24) var(--space-28);
  border-radius: var(--radius-lg);
  background: var(--color-branco);
}
.pagina--contato .formulario__redes-titulo {
  flex: none;
  width: 134px;
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}
.pagina--contato .formulario__redes-lista {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--contato .formulario__redes-lista > li { flex: 1 1 0; min-width: 0; }
.pagina--contato .formulario__rede-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-12) var(--space-14);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-14);
  color: var(--color-texto);
  transition: border-color .2s ease;
}
.pagina--contato .formulario__rede-link:hover { border-color: var(--color-dourado-01); }
.pagina--contato .formulario__rede-nome {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
}

/* --- Depois do envio ------------------------------------------------------------- */
.pagina--contato .formulario__painel-proximos-passos {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-28) var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-branco);
}
.pagina--contato .formulario__passos-rotulo {
  flex: none;
  width: 130px;
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic;
}
/* Passos na largura do conteúdo, com o mesmo vão entre eles: a lista ocupa o
   resto da linha e reparte o espaço (pedido do responsável — as larguras
   fixas do Figma, 281 / 387 / 308, deixavam vãos diferentes). A seta fica a
   12 do texto. */
.pagina--contato .formulario__passos-lista {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--contato .formulario__passos-lista > li {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.pagina--contato .formulario__passo-texto {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
  white-space: nowrap;
}
.pagina--contato .formulario__passo-1-icone-arrow,
.pagina--contato .formulario__passo-2-icone-arrow { color: var(--color-texto-secundario); }
/* seta de 12 com o desenho de 10,5 (o vetor do Figma): 0,75 de margem no SVG */
.pagina--contato .formulario__passo-1-icone-arrow,
.pagina--contato .formulario__passo-2-icone-arrow { margin-left: -0.75px; }

/* --- Tablet (sem desenho) ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pagina--contato .formulario__container { padding-block: var(--space-80); }
  .pagina--contato .formulario__painel-grid { grid-template-columns: minmax(0, 1fr); }
  .pagina--contato .formulario__canais-card-redes-sociais { justify-content: flex-start; }
  .pagina--contato .formulario__redes-lista { max-width: 420px; }
  .pagina--contato .formulario__painel-proximos-passos,
  .pagina--contato .formulario__passos-lista {
    flex-direction: column;
    align-items: stretch;
  }
  .pagina--contato .formulario__passos-rotulo { width: auto; }
  .pagina--contato .formulario__passos-lista > li { width: auto; }
  .pagina--contato .formulario__passos-lista .formulario__passo-texto {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
  }
  .pagina--contato .formulario__passo-1-icone-arrow,
  .pagina--contato .formulario__passo-2-icone-arrow { display: none; }
}

/* --- Mobile — Figma 2699:44519 -------------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--contato .formulario { padding: var(--space-24) var(--space-8); }
  .pagina--contato .formulario__container {
    gap: var(--space-28);
    padding: var(--space-56) var(--space-12);
  }
  .pagina--contato .formulario__grid-formulario {
    gap: var(--space-28);
    padding: calc(var(--space-40) + var(--space-4)) var(--space-24); /* 44 24 */
  }
  .pagina--contato .formulario__titulo { font-size: var(--fs-24); }
  .pagina--contato .formulario__linha-identificacao,
  .pagina--contato .formulario__linha-contato-e-area {
    flex-direction: column;
    align-items: stretch;
  }
  .pagina--contato .formulario__linha-identificacao > div,
  .pagina--contato .formulario__linha-contato-e-area > div { flex: none; }
  .pagina--contato .formulario__lgpd {
    flex-direction: column;
    gap: var(--space-8);
  }
  .pagina--contato .formulario__lgpd-texto { flex: none; }
  .pagina--contato .formulario__lgpd-frase { display: inline; }

  .pagina--contato .formulario__canais-card-whatsapp { padding: var(--space-32) var(--space-24); }
  .pagina--contato .formulario__canais-card-contatos { padding: var(--space-8) var(--space-16); }
  .pagina--contato .formulario__card-contatos-contato { gap: var(--space-12); }
  .pagina--contato .formulario__card-contatos-contato--endereco { align-items: center; }
  .pagina--contato .formulario__contato-valor { text-box: normal; }
  .pagina--contato .formulario__card-contatos-contato:first-child .formulario__contato-valor { font-size: var(--fs-14); }

  .pagina--contato .formulario__canais-card-redes-sociais {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    padding: var(--space-24);
  }
  .pagina--contato .formulario__redes-titulo {
    width: auto;
    font-size: var(--fs-16);
  }
  .pagina--contato .formulario__redes-lista {
    flex-direction: column;
    gap: var(--space-12);
    max-width: none;
  }
  .pagina--contato .formulario__rede-link {
    flex-direction: row;
    gap: var(--space-12);
    padding: var(--space-14) var(--space-16);
    border-radius: var(--radius-12);
  }

  .pagina--contato .formulario__painel-proximos-passos { padding: var(--space-28) var(--space-24); }
}
/* telas estreitas: o número (nowrap) não cabe no card em 32 */
@media (max-width: 360px) {
  .pagina--contato .formulario__whatsapp-numero { font-size: calc(var(--fs-24) + var(--space-4)); } /* 28 */
}

/* ==========================================================================
   CONTATO — 03 LOCALIZAÇÃO E CANAIS
   Figma 2699:41076 (desktop) / 2699:44613 (mobile)
   Desktop: 96 em cima e 120 embaixo; informações (521,7, com 48 à direita)
   + mapa no resto da linha, na altura das informações (445).
   Mapa: o Figma desenha só o placeholder (borda tracejada + pino). Ele fica
   como estado de carregamento, por baixo do iframe.
   Tablet (sem desenho): lado a lado até 901; ≤ 900 mapa embaixo (400).
   Mobile: empilhado; ícone de cada informação em cima do texto; botão na
   largura; mapa de 300.
   ========================================================================== */
.pagina--contato .localizacao {
  padding-top: var(--space-96);
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.pagina--contato .localizacao__grid {
  display: grid;
  grid-template-columns: minmax(0, 521.7fr) minmax(0, 738.3fr);
  gap: var(--space-20);
}

/* --- Informações -------------------------------------------------------------- */
.pagina--contato .localizacao__informacoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding-right: var(--space-48);
}
.pagina--contato .localizacao__h2 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--contato .localizacao__lista {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--contato .localizacao__lista-informacao {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding-block: 22px;
  border-top: 1px solid var(--color-borda-clara);
}
.pagina--contato .localizacao__informacao-icone {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.pagina--contato .localizacao__informacao-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  line-height: var(--lh-text);
}
.pagina--contato .localizacao__informacao-rotulo {
  font-size: var(--fs-14);
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic;
}
.pagina--contato .localizacao__informacao-valor {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-texto);
}

/* --- Mapa ------------------------------------------------------------------------- */
.pagina--contato .localizacao__mapa {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-branco);
  overflow: hidden;
}
/* borda tracejada do placeholder: por baixo do iframe (some quando ele carrega) */
.pagina--contato .localizacao__mapa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px dashed var(--color-borda-clara);
  border-radius: inherit;
}
.pagina--contato .localizacao__mapa-icone-pin { color: var(--color-texto-secundario); }
.pagina--contato .localizacao__mapa-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Tablet (sem desenho) ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pagina--contato .localizacao__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }
  .pagina--contato .localizacao__informacoes { padding-right: 0; }
  .pagina--contato .localizacao__mapa { height: 400px; }
}

/* --- Mobile — Figma 2699:44613 -------------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--contato .localizacao {
    padding-top: var(--space-56);
    padding-bottom: var(--space-64);
  }
  .pagina--contato .localizacao__grid { gap: var(--space-32); }
  .pagina--contato .localizacao__informacoes {
    align-items: stretch;
    gap: var(--space-28);
  }
  .pagina--contato .localizacao__rotulo { align-self: flex-start; }
  .pagina--contato .localizacao__h2 { font-size: var(--fs-32); }
  .pagina--contato .localizacao__lista-informacao { flex-direction: column; }
  .pagina--contato .localizacao__informacao-texto { flex: none; width: 100%; }
  .pagina--contato .localizacao__como-chegar { width: 100%; }
  .pagina--contato .localizacao__mapa { height: 300px; }
}

/* ==========================================================================
   BLOG — 01 HERO (breadcrumb + H1 centralizados)
   Figma 2699:41102 (desktop) / 2699:44639 (mobile)
   Desktop: 490 de altura (ajuste do responsável — era 412,3), conteúdo
   centralizado entre 200 em cima (44 + 86 do cabeçalho flutuante + 70) e 112
   embaixo: breadcrumb, 20, H1. Mobile: 385 de altura, conteúdo
   centralizado entre 120 em cima e 72 embaixo (16 entre breadcrumb e H1).
   Ícone da casa: o do desktop (12 × 13,3, traço 1) nos dois tamanhos — o
   frame mobile usa outro (14, traço 0,875); o texto fica a 20 da borda nos dois.
   ========================================================================== */
.pagina--blog .hero {
  min-height: 490px; /* altura nova do responsável (2026-10-05); conteúdo centralizado */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  padding-top: calc(var(--cabecalho-topo) + var(--cabecalho-altura) + var(--space-64) + var(--space-6)); /* 200 */
  padding-bottom: calc(var(--space-120) - var(--space-8)); /* 112 */
  padding-inline: var(--gutter);
  background: var(--color-preto-01);
  color: var(--color-branco);
  text-align: center;
}
.pagina--blog .hero__breadcrumb { display: flex; }
.pagina--blog .hero__breadcrumb-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  transition: color .2s ease;
}
.pagina--blog .hero__breadcrumb-link:hover { color: var(--color-branco); }
/* SVG de 13,5 × 14,8 (traço 1,5: 0,75 de cada lado do desenho de 12 × 13,3) */
.pagina--blog .hero__breadcrumb-icone-home { margin: -0.75px; }
/* busca: "Início › Blog › Busca" — chevron Dourado 01 de 19 com traço 1,5
   (breadcrumb-chevron.svg — padrão dos breadcrumbs, Figma 2026-10-05), página atual em branco */
.pagina--blog .hero__breadcrumb {
  align-items: center;
  gap: var(--space-8);
}
.pagina--blog .hero__breadcrumb-icone-chevronright { color: var(--color-dourado-01); }
.pagina--blog .hero__breadcrumb-atual {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-branco);
}
.pagina--blog .hero__breadcrumb-item { text-box: trim-both cap alphabetic; }
.pagina--blog .hero__h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
  text-wrap: balance;
}

/* --- Mobile — Figma 2699:44639 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--busca .hero__h1 { font-size: var(--fs-32); } /* frame mobile da busca: 32 (o do blog: 40) */
  .pagina--blog.pagina--busca-vazia .hero { min-height: 401px; } /* frame mobile da busca sem resultado (2699:44902) */
  .pagina--blog .hero {
    min-height: 385px;
    justify-content: center;
    gap: var(--space-16);
    padding-top: var(--space-120);
    padding-bottom: calc(var(--space-64) + var(--space-8)); /* 72 */
  }
}

/* ==========================================================================
   BLOG — 02 LISTA DE ARTIGOS (busca + abas + grade + paginação)
   Figma 2699:41107 (desktop) / 2699:44644 (mobile)
   Desktop: fundo creme; a busca (630 × 60) fica metade sobre o hero (30
   acima); 102 até as abas, 40 entre abas, grade e paginação, 120 embaixo.
   Grade 3 × 3 (vão 24); cards da mesma linha com a mesma altura, rodapé no
   fim. Mobile: busca na largura (56), abas com rolagem lateral, cards em
   coluna (16), paginação com vão 4.
   Tablet (sem desenho, ≤ 1100): grade de 2 colunas.
   Ícones do relógio e da seta do card: os do 1º card do Figma.
   ========================================================================== */
.pagina--blog .artigos {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding-top: calc(var(--space-96) + var(--space-6)); /* 102 */
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-creme);
}

/* --- Busca --------------------------------------------------------------------- */
.pagina--blog .artigos__busca {
  position: absolute;
  z-index: 5;
  top: -30px;
  left: 50%;
  width: min(630px, 100% - 2 * var(--gutter));
  transform: translateX(-50%);
}
.pagina--blog .artigos__busca-campo-busca {
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-left: var(--space-28);
  padding-right: var(--space-24);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  background: var(--color-branco);
  transition: border-color .2s ease;
}
.pagina--blog .artigos__busca-campo-busca:focus-within { border-color: var(--color-dourado-01); }
.pagina--blog .artigos__busca-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto);
  appearance: none;
}
.pagina--blog .artigos__busca-input::placeholder { color: var(--color-texto-secundario); opacity: 1; }
.pagina--blog .artigos__busca-input:focus { outline: none; }
.pagina--blog .artigos__busca-input::-webkit-search-cancel-button { appearance: none; }
.pagina--blog .artigos__busca-botao {
  flex: none;
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-texto);
  cursor: pointer;
}
/* SVG de 16,5 (traço de 1,5 em volta do desenho de 15 do Figma) */
.pagina--blog .artigos__busca-icone-search { margin: -0.75px; }
/* sugestões ao vivo (live-search.js) logo abaixo do campo */
.pagina--blog .artigos__busca-sugestoes {
  top: calc(100% + var(--space-6));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pagina--blog .artigos__busca-sugestoes .search-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-16);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}
.pagina--blog .artigos__busca-sugestoes .search-item__thumb {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-borda-clara);
  object-fit: cover;
}
.pagina--blog .artigos__busca-sugestoes .search-item__body { flex: 1 1 auto; min-width: 0; }
.pagina--blog .artigos__busca-sugestoes .search-item__title { font-weight: 500; color: var(--color-texto); }
.pagina--blog .artigos__busca-sugestoes .search-item__more { flex: none; color: var(--color-texto-secundario); }
.pagina--blog .artigos__busca-sugestoes p {
  margin: 0;
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-14);
  color: var(--color-texto-secundario);
}

/* --- Abas (links de categoria) ------------------------------------------------- */
.pagina--blog .artigos__abas {
  position: relative; /* contém os textos de leitor de tela (absolutos) na faixa rolável */
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.pagina--blog .artigos__abas-lista {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6);
  list-style: none;
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  background: var(--color-branco);
}
.pagina--blog .artigos__abas-lista a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.pagina--blog .artigos__abas-lista a:hover { color: var(--color-texto); }
.pagina--blog .artigos__aba-contagem {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-creme);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  transition: background-color .2s ease;
}
.pagina--blog .artigos__abas-lista .artigos__abas-aba--ativa {
  background: var(--color-preto-02);
  color: var(--color-branco);
}
.pagina--blog .artigos__abas-aba--ativa .artigos__aba-contagem { background: var(--color-preto-03); }

/* --- Grade e card ------------------------------------------------------------------ */
.pagina--blog .artigos__grade-de-artigos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}
.pagina--blog .artigos__linha-card-artigo,
.pagina--artigo .relacionados__card-artigo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-lg);
  background: var(--color-branco);
  transition: border-color .2s ease;
}
.pagina--blog .artigos__linha-card-artigo:hover,
.pagina--artigo .relacionados__card-artigo:hover { border-color: var(--color-dourado-01); }
.pagina--blog .artigos__linha-card-artigo:has(.artigos__card-link:focus-visible),
.pagina--artigo .relacionados__card-artigo:has(.relacionados__card-link:focus-visible) {
  outline: 2px solid var(--color-dourado-01);
  outline-offset: 2px;
}
.pagina--blog .artigos__card-capa,
.pagina--artigo .relacionados__card-capa {
  position: relative;
  height: 236px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-borda-clara);
  overflow: hidden;
}
.pagina--blog .artigos__capa-imagem,
.pagina--artigo .relacionados__capa-imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pagina--blog .artigos__capa-icone-image,
.pagina--artigo .relacionados__capa-icone-image { color: var(--color-texto-secundario); }
.pagina--blog .artigos__capa-categoria,
.pagina--artigo .relacionados__capa-categoria {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-branco);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}
.pagina--blog .artigos__card-texto,
.pagina--artigo .relacionados__card-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-16) var(--space-12);
}
.pagina--blog .artigos__card-titulo,
.pagina--artigo .relacionados__card-titulo {
  margin: 0;
  padding-bottom: var(--space-24);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--blog .artigos__card-link,
.pagina--artigo .relacionados__card-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.pagina--blog .artigos__card-link:focus-visible,
.pagina--artigo .relacionados__card-link:focus-visible { outline: none; }
/* o link do título cobre o card inteiro */
.pagina--blog .artigos__card-link::after,
.pagina--artigo .relacionados__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.pagina--blog .artigos__card-rodape,
.pagina--artigo .relacionados__card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: var(--space-24);
}
.pagina--blog .artigos__rodape-leitura,
.pagina--artigo .relacionados__rodape-leitura {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
/* SVG de 20,5: o relógio de 19 do Figma + 0,75 de traço (1,5) de cada lado */
.pagina--blog .artigos__leitura-icone-clock,
.pagina--artigo .relacionados__leitura-icone-clock { margin: -0.75px; }
.pagina--blog .artigos__leitura-texto,
.pagina--artigo .relacionados__leitura-texto { text-box: trim-both cap alphabetic; }
.pagina--blog .artigos__rodape-ler-artigo,
.pagina--artigo .relacionados__rodape-ler-artigo {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
  white-space: nowrap;
}
/* seta.svg de 12: o desenho de 10,5 do Figma + 0,75 de traço (1,5) de cada lado */
.pagina--blog .artigos__ler-artigo-icone-arrow,
.pagina--artigo .relacionados__ler-artigo-icone-arrow { margin: -0.75px; }

.pagina--blog .artigos__vazio {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--color-texto-secundario);
  text-align: center;
}

/* --- Paginação ---------------------------------------------------------------------- */
.pagina--blog .artigos__paginacao {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.pagina--blog .artigos__paginacao-item,
.pagina--blog .artigos__paginacao-pagina--atual {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  transition: background-color .2s ease, color .2s ease;
}
.pagina--blog a.artigos__paginacao-item:hover { background: var(--color-branco); color: var(--color-texto); }
.pagina--blog .artigos__paginacao-pagina--atual {
  background: var(--color-preto-02);
  color: var(--color-branco);
}
.pagina--blog .artigos__item-icone-arrow { color: var(--color-texto); }
.pagina--blog .artigos__paginacao-item--desativado { opacity: .4; }

/* --- Tablet (sem desenho) ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pagina--blog .artigos__grade-de-artigos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20);
  }
}

/* --- Mobile — Figma 2699:44644 -------------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--blog .artigos {
    gap: var(--space-24);
    padding-top: var(--space-64);
    padding-bottom: calc(var(--space-64) + var(--space-8)); /* 72 */
  }
  .pagina--blog .artigos__busca { top: -28px; }
  .pagina--blog .artigos__busca-campo-busca {
    height: 56px;
    padding-left: var(--space-24);
    padding-right: var(--space-20);
  }

  /* abas: a faixa rola de lado (no Figma passa da largura e é cortada) */
  .pagina--blog .artigos__abas {
    align-self: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pagina--blog .artigos__abas::-webkit-scrollbar { display: none; }
  .pagina--blog .artigos__abas-lista { padding: 5px; }
  .pagina--blog .artigos__abas-lista a {
    gap: var(--space-6);
    padding: 9px var(--space-14);
  }
  .pagina--blog .artigos__aba-contagem { padding-inline: var(--space-6); }

  .pagina--blog .artigos__grade-de-artigos { gap: var(--space-16); }
  .pagina--blog .artigos__linha-card-artigo,
  .pagina--artigo .relacionados__card-artigo { border-radius: var(--radius-20); }
  .pagina--blog .artigos__card-capa,
  .pagina--artigo .relacionados__card-capa {
    height: 196px;
    border-radius: var(--radius-14);
  }
  .pagina--blog .artigos__card-texto,
  .pagina--artigo .relacionados__card-texto {
    justify-content: flex-start;
    gap: var(--space-20);
    padding: var(--space-16) var(--space-12) var(--space-8);
  }
  .pagina--blog .artigos__card-titulo,
  .pagina--artigo .relacionados__card-titulo { padding-bottom: 0; }

  .pagina--blog .artigos__paginacao {
    gap: var(--space-4);
    padding-top: var(--space-8);
  }
}

/* ==========================================================================
   ARTIGO — 01 HERO DO ARTIGO (breadcrumb + categoria + H1 + resumo + autoria)
   Figma 2699:41281 (desktop) / 2699:44948 (mobile)
   Desktop: 698 com o resumo em 2 linhas — 218 em cima (44 + 86 do cabeçalho
   + 88), coluna de 738,3 centralizada, 96 embaixo. Autoria numa linha com
   divisores (autor | data | leitura).
   Mobile: 704 de altura, conteúdo centralizado entre 120 e 48, 20 entre os
   blocos; autoria em 2 linhas (autor; data + leitura), sem divisores.
   Breadcrumb: o do desktop (sem a casa que o frame mobile acrescenta).
   Entrada: fade up escalonado (breadcrumb → categoria → H1 → resumo → autoria).
   ========================================================================== */
.pagina--artigo .hero {
  padding-top: calc(var(--cabecalho-topo) + var(--cabecalho-altura) + var(--space-80) + var(--space-8)); /* 218 */
  padding-bottom: var(--space-96);
  padding-inline: var(--gutter);
  background: var(--color-preto-01);
  color: var(--color-branco);
}
.pagina--artigo .hero__coluna {
  width: min(738.3px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-28);
}

/* --- Breadcrumb ----------------------------------------------------------------- */
.pagina--artigo .hero__coluna-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}
.pagina--artigo .hero__breadcrumb-item {
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
  transition: color .2s ease;
}
.pagina--artigo .hero__breadcrumb-atual {
  font-weight: 500;
  color: var(--color-branco);
  transition: color .2s ease;
}
.pagina--artigo .hero__breadcrumb-item:hover,
.pagina--artigo .hero__breadcrumb-atual:hover { color: var(--color-dourado-01); }
/* breadcrumb-chevron.svg: 19 com traço 1,5 (padrão dos breadcrumbs, Figma 2026-10-05) */
.pagina--artigo .hero__breadcrumb-icone-chevronright { color: var(--color-dourado-01); }

/* --- Títulos ---------------------------------------------------------------------- */
.pagina--artigo .hero__titulos {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}
.pagina--artigo .hero__post-categoria {
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-branco);
}
.pagina--artigo .hero__artigo-h1 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.pagina--artigo .hero__artigo-resumo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Autoria ---------------------------------------------------------------------- */
.pagina--artigo .hero__artigo-autoria {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-preto-03);
}
.pagina--artigo .hero__autoria-autor {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.pagina--artigo .hero__autor-foto {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--color-preto-02);
  object-fit: cover;
}
.pagina--artigo .hero__autor-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--lh-text);
}
.pagina--artigo .hero__autor-nome {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--color-branco);
}
.pagina--artigo .hero__autor-registro {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--color-texto-secundario-escuro);
}
.pagina--artigo .hero__autoria-divisor {
  width: 1px;
  height: 44px; /* altura do autor (Figma, 2026-10-05) */
  flex: none;
  background: var(--color-preto-03);
}
/* data e leitura: no desktop seguem a linha do autor (o grupo é do mobile) */
.pagina--artigo .hero__autoria-meta { display: contents; }
.pagina--artigo .hero__autoria-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  white-space: nowrap;
}
/* SVGs de 13 × 14,3 e 14,3: o desenho do Figma + 0,5 de traço de cada lado */
.pagina--artigo .hero__item-icone-calendar,
.pagina--artigo .hero__item-icone-clock { margin: -0.5px; }
.pagina--artigo .hero__item-texto { text-box: trim-both cap alphabetic; }

/* --- Entrada: fade up escalonado (keyframes hero-fade-up no style.css) ------- */
.pagina--artigo .hero__coluna-breadcrumb,
.pagina--artigo .hero__post-categoria,
.pagina--artigo .hero__artigo-h1,
.pagina--artigo .hero__artigo-resumo,
.pagina--artigo .hero__artigo-autoria {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.pagina--artigo .hero__coluna-breadcrumb { animation-delay: .15s; }
.pagina--artigo .hero__post-categoria    { animation-delay: .3s; }
.pagina--artigo .hero__artigo-h1         { animation-delay: .45s; }
.pagina--artigo .hero__artigo-resumo     { animation-delay: .6s; }
.pagina--artigo .hero__artigo-autoria    { animation-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  .pagina--artigo .hero__coluna-breadcrumb,
  .pagina--artigo .hero__post-categoria,
  .pagina--artigo .hero__artigo-h1,
  .pagina--artigo .hero__artigo-resumo,
  .pagina--artigo .hero__artigo-autoria { animation: none; }
}

/* --- Mobile — Figma 2699:44948 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--artigo .hero {
    min-height: 704px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--space-120);
    padding-bottom: var(--space-48);
  }
  .pagina--artigo .hero__coluna { gap: var(--space-20); }
  .pagina--artigo .hero__artigo-h1 { font-size: var(--fs-32); }
  .pagina--artigo .hero__artigo-autoria {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-14);
    padding-top: var(--space-20);
  }
  .pagina--artigo .hero__autor-foto {
    width: 40px;
    height: 40px;
  }
  .pagina--artigo .hero__artigo-autoria > .hero__autoria-divisor,
  .pagina--artigo .hero__autoria-meta .hero__autoria-divisor { display: none; }
  .pagina--artigo .hero__autoria-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-16);
  }
}

/* ==========================================================================
   ARTIGO — 02 ARTIGO (capa + corpo do editor + autor + compartilhar)
   Figma 2699:41308 (desktop) / 2699:44973 (mobile)
   Desktop: 80 em cima, capa de 1280 (16:7 = 560, radius 24), 64, coluna de
   738,3 com 40 entre os blocos finais (texto, divisor, autor — que tem mais
   40 de respiro em cima —, compartilhar), 96 embaixo.
   Corpo (the_content): no Figma cada intertítulo abre uma "seção" — 40 entre
   blocos + 16 de respiro = 56 antes do H2; 20 do H2 ao bloco seguinte e 24
   entre os outros blocos. Lista com marcador redondo (Preto 02); "Citação"
   do editor = destaque com traço Dourado 01 à esquerda; [cta_whatsapp] =
   CTA intermediário (template-parts/cta-artigo.php).
   Mobile: capa de 220 (radius 16), H2 24, texto 16, vãos 36 / 16 / 16,
   CTA em coluna (botão na largura), autor com foto de 56.
   ========================================================================== */
.pagina--artigo .artigo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
  padding-top: var(--space-80);
  padding-bottom: var(--space-96);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.pagina--artigo .artigo__capa {
  width: 100%;
  aspect-ratio: 16 / 7;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--color-creme);
  overflow: hidden;
}
.pagina--artigo .artigo__capa-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pagina--artigo .artigo__conteudo {
  width: min(738.3px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* --- Corpo do editor --------------------------------------------------------------- */
.pagina--artigo .artigo__conteudo-texto {
  font-size: var(--fs-18);
  line-height: var(--lh-text);
  color: var(--color-texto);
}
.pagina--artigo .artigo__conteudo-texto > * { margin: 0; }
.pagina--artigo .artigo__conteudo-texto > * + * { margin-top: var(--space-24); }
.pagina--artigo .artigo__conteudo-texto > h2,
.pagina--artigo .artigo__conteudo-texto > h3 { margin-top: var(--space-56); } /* 40 entre blocos + 16 da "seção" */
.pagina--artigo .artigo__conteudo-texto > h2 + *,
.pagina--artigo .artigo__conteudo-texto > h3 + * { margin-top: var(--space-20); }
.pagina--artigo .artigo__conteudo-texto > :first-child { margin-top: 0; }
.pagina--artigo .artigo__conteudo-texto h2 {
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
}
.pagina--artigo .artigo__conteudo-texto h3 {
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
}
.pagina--artigo .artigo__conteudo-texto strong,
.pagina--artigo .artigo__conteudo-texto b { font-weight: 500; }
.pagina--artigo .artigo__conteudo-texto a:not(.botao) {
  color: var(--color-dourado-escuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pagina--artigo .artigo__conteudo-texto a:not(.botao):hover { color: var(--color-texto); }

/* listas: marcador redondo de 6 (Preto 02), texto a 20; numeradas em Texto secundário */
.pagina--artigo .artigo__conteudo-texto ul,
.pagina--artigo .artigo__conteudo-texto ol {
  padding: 0;
  list-style: none;
}
.pagina--artigo .artigo__conteudo-texto ol { counter-reset: artigo-lista; }
.pagina--artigo .artigo__conteudo-texto li {
  position: relative;
  padding-left: var(--space-20);
}
.pagina--artigo .artigo__conteudo-texto li + li { margin-top: var(--space-16); }
.pagina--artigo .artigo__conteudo-texto ul > li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-preto-02);
}
.pagina--artigo .artigo__conteudo-texto ol > li { counter-increment: artigo-lista; padding-left: var(--space-28); }
.pagina--artigo .artigo__conteudo-texto ol > li::before {
  content: counter(artigo-lista) ".";
  position: absolute;
  left: 0;
  font-weight: 500;
  color: var(--color-texto-secundario);
}

/* "Citação" do editor = destaque com traço dourado */
.pagina--artigo .artigo__conteudo-texto blockquote {
  padding: var(--space-4) 0 var(--space-4) var(--space-28);
  border-left: 3px solid var(--color-dourado-01);
}
.pagina--artigo .artigo__conteudo-texto blockquote p {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
}
.pagina--artigo .artigo__conteudo-texto blockquote p + p { margin-top: var(--space-12); }
.pagina--artigo .artigo__conteudo-texto blockquote cite {
  display: block;
  margin-top: var(--space-12);
  font-size: var(--fs-14);
  font-style: normal;
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* imagens do editor */
.pagina--artigo .artigo__conteudo-texto figure img,
.pagina--artigo .artigo__conteudo-texto > img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.pagina--artigo .artigo__conteudo-texto figcaption {
  margin-top: var(--space-8);
  font-size: var(--fs-14);
  color: var(--color-texto-secundario);
}

/* --- CTA intermediário ([cta_whatsapp]) ----------------------------------------- */
.pagina--artigo .artigo__cta-intermediario {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-24);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-md);
}
.pagina--artigo .artigo__cta-topo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}
.pagina--artigo .artigo__cta-icone {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.pagina--artigo .artigo__cta-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  line-height: var(--lh-text);
}
.pagina--artigo .artigo__cta-titulo {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-texto);
}
.pagina--artigo .artigo__cta-descricao {
  max-width: 257px;
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic;
}
.pagina--artigo .artigo__cta-botao { flex: none; }
.pagina--artigo .artigo__cta-botao .botao__icone { width: 20px; height: 20px; }

/* Tablet em linha (641–768): texto em 50% da largura do card e o botão encostado
   à direita (pedido do responsável). */
@media (min-width: 641px) and (max-width: 768px) {
  .pagina--artigo .artigo__cta-intermediario { justify-content: space-between; }
  .pagina--artigo .artigo__cta-topo { flex: 0 1 50%; }
}

/* CTA em coluna com o botão na largura só no celular (≤ 640 — frame mobile). De 641
   a 768 (tablet, sem desenho) fica em linha como no desktop, com o botão do tamanho
   do texto — na largura toda ele ficava enorme (pedido do responsável). */
@media (max-width: 640px) {
  .pagina--artigo .artigo__cta-intermediario {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }
  .pagina--artigo .artigo__cta-botao { width: 100%; }
}

/* --- Autor ---------------------------------------------------------------------- */
.pagina--artigo .artigo__conteudo-divisor {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-borda-clara);
}
.pagina--artigo .artigo__autor {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  padding-top: var(--space-40);
}
.pagina--artigo .artigo__autor-foto {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.pagina--artigo .artigo__autor-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.pagina--artigo .artigo__autor-rotulo {
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
.pagina--artigo .artigo__autor-nome {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--artigo .artigo__autor-bio {
  max-width: 388px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Compartilhar ------------------------------------------------------------------ */
.pagina--artigo .artigo__compartilhar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.pagina--artigo .artigo__compartilhar-rotulo {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}
.pagina--artigo .artigo__compartilhar-whatsapp,
.pagina--artigo .artigo__compartilhar-arrowupright {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color .2s ease;
}
.pagina--artigo .artigo__compartilhar-whatsapp:hover,
.pagina--artigo .artigo__compartilhar-arrowupright:hover { border-color: var(--color-dourado-01); }
.pagina--artigo .artigo__compartilhar-aviso {
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Mobile — Figma 2699:44973 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--artigo .artigo {
    gap: var(--space-32);
    padding-top: var(--space-32);
    padding-bottom: var(--space-56);
  }
  .pagina--artigo .artigo__capa {
    aspect-ratio: auto;
    height: 220px;
    border-radius: var(--radius-md);
  }
  .pagina--artigo .artigo__conteudo { gap: var(--space-28); }
  .pagina--artigo .artigo__autor { padding-top: 0; }
  .pagina--artigo .artigo__conteudo-texto { font-size: var(--fs-16); }
  .pagina--artigo .artigo__conteudo-texto > * + * { margin-top: var(--space-16); }
  .pagina--artigo .artigo__conteudo-texto > h2,
  .pagina--artigo .artigo__conteudo-texto > h3 { margin-top: calc(var(--space-28) + var(--space-8)); } /* 36 */
  .pagina--artigo .artigo__conteudo-texto > h2 + *,
  .pagina--artigo .artigo__conteudo-texto > h3 + * { margin-top: var(--space-16); }
  .pagina--artigo .artigo__conteudo-texto h2 { font-size: var(--fs-24); }
  .pagina--artigo .artigo__conteudo-texto h3 { font-size: var(--fs-20); }
  .pagina--artigo .artigo__conteudo-texto li { padding-left: 18px; }
  .pagina--artigo .artigo__conteudo-texto li + li { margin-top: var(--space-14); }
  .pagina--artigo .artigo__conteudo-texto ul > li::before { top: 10px; }
  .pagina--artigo .artigo__conteudo-texto blockquote { padding: 2px 0 2px var(--space-20); }
  .pagina--artigo .artigo__conteudo-texto blockquote p { font-size: var(--fs-20); }

  .pagina--artigo .artigo__cta-intermediario {
    gap: var(--space-32); /* texto ↔ botão em linha (tablet); 16 em coluna (≤ 640) */
    padding: var(--space-20);
  }
  .pagina--artigo .artigo__cta-topo {
    display: flex;
    align-items: flex-start;
    gap: var(--space-14);
  }
  .pagina--artigo .artigo__cta-texto { gap: var(--space-8); } /* Figma mobile 4 — respiro maior a pedido do responsável */
  .pagina--artigo .artigo__cta-icone {
    width: 44px;
    height: 44px;
  }
  .pagina--artigo .artigo__cta-descricao { max-width: none; }

  .pagina--artigo .artigo__autor { gap: var(--space-16); }
  .pagina--artigo .artigo__autor-foto {
    width: 56px;
    height: 56px;
  }
  .pagina--artigo .artigo__autor-texto { gap: var(--space-4); }
  .pagina--artigo .artigo__autor-bio {
    max-width: none;
    font-size: var(--fs-14);
    text-box: trim-both cap alphabetic;
  }
}

/* ==========================================================================
   ARTIGO — 03 LEIA TAMBÉM (relacionados)
   Figma 2699:41376 (desktop) / 2699:44973 (mobile)
   Desktop: divisor de 1280, 40, cabeçalho (H2 24 + link "Ver todos os
   artigos" com seta), 40, 3 cards de 410,7 × 394 (vão 24), 96 embaixo.
   Os cards são os da lista do blog (card-post.php com o block
   "relacionados" — CSS no bloco "BLOG — 02", seletores compartilhados).
   Mobile: cards em coluna (16) e o link vira o botão de contorno no fim
   (relacionados__ver-todos). O divisor do desktop é mantido (o frame mobile
   não tem — vale o desktop); fundo branco (o frame mobile usa creme).
   Tablet (sem desenho, ≤ 1100): 2 colunas.
   ========================================================================== */
.pagina--artigo .relacionados {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-bottom: var(--space-96);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.pagina--artigo .relacionados__divisor {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-borda-clara);
}
.pagina--artigo .relacionados__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.pagina--artigo .relacionados__cabecalho-titulo {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--artigo .relacionados__cabecalho-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
  white-space: nowrap;
  transition: color .2s ease;
}
.pagina--artigo .relacionados__cabecalho-link:hover { color: var(--color-dourado-escuro); }
/* seta.svg de 12: o desenho de 10,5 do Figma + 0,75 de traço de cada lado */
.pagina--artigo .relacionados__link-icone-arrow { margin: -0.75px; }
.pagina--artigo .relacionados__relacionados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}
.pagina--artigo .relacionados__ver-todos { display: none; }

/* --- Tablet (sem desenho) ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pagina--artigo .relacionados__relacionados {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20);
  }
}

/* --- Mobile — Figma 2699:45042 -------------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--artigo .relacionados {
    gap: var(--space-24);
    padding-bottom: var(--space-56);
  }
  .pagina--artigo .relacionados__relacionados { gap: var(--space-16); }
}

/* Cards do blog (lista, categoria, busca e Leia também) em 1 coluna só no celular
   (≤ 560). De 561 a 768 ficam em 2 colunas — em 1 coluna eles esticavam demais
   (pedido do responsável). */
@media (max-width: 560px) {
  .pagina--blog .artigos__grade-de-artigos,
  .pagina--artigo .relacionados__relacionados { grid-template-columns: minmax(0, 1fr); }
  /* Leia também: o link "Ver todos os artigos" sai do cabeçalho e vira o botão
     de contorno na largura, embaixo (frame mobile). Até 561 fica no cabeçalho,
     na linha do título, como no desktop. */
  .pagina--artigo .relacionados__cabecalho-link { display: none; }
  .pagina--artigo .relacionados__ver-todos {
    display: flex;
    width: 100%;
  }
}
/* em 2 colunas o rodapé do card (leitura + Ler artigo) fica no fim, alinhado entre
   cards de títulos com alturas diferentes */
@media (min-width: 561px) and (max-width: 768px) {
  .pagina--blog .artigos__card-texto,
  .pagina--artigo .relacionados__card-texto { justify-content: space-between; }
}

/* ==========================================================================
   ARTIGO — 04 CTA DO BLOG
   Figma 2699:41424 (desktop) / 2699:45085 (mobile)
   Desktop: faixa creme de 1280 (radius 24, 48 / 56), texto à esquerda e o
   botão à direita (vão 40); colado no Leia também (que já tem 96 embaixo)
   e 120 embaixo. Mobile: faixa em coluna (16, 28 / 24, radius 20),
   título 24, botão na largura; 48 acima e 56 embaixo.
   ========================================================================== */
.pagina--artigo .cta {
  padding-top: 0; /* encostado no Leia também (Figma, 2026-10-05; eram 62) */
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.pagina--artigo .cta__faixa {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-48) var(--space-56);
  border-radius: var(--radius-lg);
  background: var(--color-creme);
}
.pagina--artigo .cta__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.pagina--artigo .cta__titulo {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--artigo .cta__descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--artigo .cta__botao { flex: none; }
.pagina--artigo .cta__botao .botao__icone { width: 20px; height: 20px; }

/* --- Mobile — Figma 2699:45085 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--artigo .cta {
    padding-top: var(--space-48);
    padding-bottom: var(--space-56);
  }
  .pagina--artigo .cta__faixa {
    gap: var(--space-24);
    padding: var(--space-28) var(--space-24);
    border-radius: var(--radius-20);
  }
  .pagina--artigo .cta__titulo { font-size: var(--fs-24); }
}
/* Coluna com o botão na largura só no celular (≤ 560); de 561 a 768 (tablet, sem
   desenho) texto e botão ficam em linha, o botão no tamanho do texto — na largura
   toda ele ficava enorme (pedido do responsável). */
@media (max-width: 560px) {
  .pagina--artigo .cta__faixa {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }
  .pagina--artigo .cta__texto { display: contents; }
  .pagina--artigo .cta__botao { width: 100%; }
}

/* ==========================================================================
   BLOG · BUSCA — 02 LISTA DE ARTIGOS (modo busca de template-parts/artigos.php)
   Figma 2699:41442 (desktop) / 2699:44827 (mobile)
   Mesma seção da lista do blog (busca sobre o hero, grade, card), sem as
   abas: resumo "N artigos encontrados" (Texto secundário 16), 64 até a grade,
   64 até o botão de contorno "Ver todos os artigos" (centralizado) e 120
   embaixo. Mobile: resumo 14 aparado, vãos de 24, botão na largura, 72
   embaixo.
   ========================================================================== */
.pagina--busca .artigos--busca { gap: var(--space-64); }
.pagina--busca .artigos__resultado-resumo { width: 100%; }
.pagina--busca .artigos__resumo-texto {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Mobile — Figma 2699:44827 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--busca .artigos--busca { gap: var(--space-24); }
  .pagina--busca .artigos__resumo-texto {
    font-size: var(--fs-14);
    text-box: trim-both cap alphabetic;
  }
  .pagina--busca .artigos__ver-todos { width: 100%; }
}

/* ==========================================================================
   BLOG · BUSCA SEM RESULTADO — 02 ESTADO VAZIO
   Figma 2699:41521 (desktop) / 2699:44911 (mobile)
   Desktop: 102 em cima (campo de busca metade sobre o hero), bloco de 620
   centralizado com 24 de respiro, ícone em círculo Dourado 01 de 64 (lupa 24),
   40 até o texto (título 24, 20, descrição de 526) e 40 até os botões
   (WhatsApp + "Ver todos os artigos", vão 12, 8 de respiro); 160 embaixo.
   Mobile: 76 em cima, 72 embaixo, vãos 20, ícone 56 (lupa 22), título 20 com 8
   até a descrição, botões empilhados na largura. As etiquetas de categoria do
   frame mobile não existem no desktop — ficam de fora (vale o desktop).
   ========================================================================== */
.pagina--busca-vazia .artigos--busca { padding-bottom: calc(var(--space-120) + var(--space-40)); } /* 160 */
.pagina--busca .artigos__estado-vazio {
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding-top: var(--space-24);
  text-align: center;
}
.pagina--busca .artigos__vazio-icone {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-dourado-01);
  color: var(--color-preto-02);
}
.pagina--busca .artigos__vazio-texto {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
}
.pagina--busca .artigos__vazio-titulo {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--busca .artigos__vazio-descricao {
  max-width: 526px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--busca .artigos__vazio-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  padding-top: var(--space-8);
}
.pagina--busca .artigos__vazio-acoes .botao__icone { width: 20px; height: 20px; }

/* --- Mobile — Figma 2699:44911 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--busca-vazia .artigos--busca {
    padding-top: calc(var(--space-64) + var(--space-12)); /* 76 */
    padding-bottom: calc(var(--space-64) + var(--space-8)); /* 72 */
  }
  .pagina--busca .artigos__estado-vazio {
    width: 100%;
    gap: var(--space-20);
    padding-top: 0;
  }
  .pagina--busca .artigos__vazio-icone {
    width: 56px;
    height: 56px;
  }
  .pagina--busca .artigos__icone-search { width: 22px; height: 22px; }
  .pagina--busca .artigos__vazio-texto { gap: var(--space-8); }
  .pagina--busca .artigos__vazio-titulo { font-size: var(--fs-20); }
  .pagina--busca .artigos__vazio-descricao { max-width: none; }
  .pagina--busca .artigos__vazio-acoes {
    width: 100%;
    flex-direction: column;
  }
  .pagina--busca .artigos__vazio-acoes .botao { width: 100%; }
}

/* ==========================================================================
   POLÍTICA — 01 HERO (título + resumo da política)
   Figma 2699:46478 (desktop) / 2699:46806 (mobile)
   Whitepage (sem menu e sem rodapé). Desktop: 514 de altura — 218 em cima,
   H1, subtítulo de 720, as 2 pílulas de meta (vão 24) e 96 embaixo. Mobile:
   centralizado, 70 em cima, 64 embaixo, vão 20, pílulas empilhadas (8).
   Mobile com as cores do desktop (o frame usa fundo Preto 02 e subtítulo
   em Texto secundário no escuro) e os ícones do desktop (frame mobile: 16).
   Tablet (sem desenho): como o desktop, com o gutter.
   ========================================================================== */
.pagina--politica .hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-top: calc(var(--space-120) + var(--space-96) + 2px); /* 218, Figma */
  padding-bottom: var(--space-96);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-01);
  color: var(--color-branco);
}
.pagina--politica .hero__h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.pagina--politica .hero__subtitulo {
  max-width: 720px;
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-creme);
}

/* --- Meta (pílulas) ------------------------------------------------------------- */
.pagina--politica .hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--politica .hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-14);
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}
/* Os SVGs (14 × 15 / 15 × 15) têm a folga do traço; a margem negativa deixa
   no lugar o vetor do Figma (12 × 13,33 / 13,33 × 13,33). */
.pagina--politica .hero__meta-item .ico {
  flex: none;
  color: var(--color-dourado-01);
}
.pagina--politica .hero__item-icone-calendar { margin: -.833px -1px; }
.pagina--politica .hero__item-icone-clock    { margin: -.833px; }
.pagina--politica .hero__meta-texto {
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

/* --- Mobile — Figma 2699:46806 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--politica .hero {
    align-items: center;
    gap: var(--space-20);
    padding-top: calc(var(--space-64) + var(--space-6)); /* 70 */
    padding-bottom: var(--space-64);
    text-align: center;
  }
  .pagina--politica .hero__subtitulo { max-width: none; }
  .pagina--politica .hero__meta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }
}

/* ==========================================================================
   POLÍTICA — 02 EM RESUMO (o essencial em 30 segundos)
   Figma 2699:46492 (desktop) / 2699:46820 (mobile)
   Desktop: 96 em cima e nada embaixo (o conteúdo da seção 03 segue), cabeçalho
   (rótulo com linha de 18 + H2 32/500), 40, e 4 cards creme na mesma linha
   (vão 20, altura do mais alto — 276 no Figma). Mobile: 64 em cima, 32,
   cards empilhados (12) com padding 24.
   Tablet (sem desenho, ≤ 1100): cards 2 × 2.
   ========================================================================== */
.pagina--politica .resumo {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-top: var(--space-96);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.pagina--politica .resumo__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}
/* Rótulo desta seção sem espaçamento entre letras (Texto/12 do Figma) e com
   linha de 18 (sem o text-box do componente global) */
.pagina--politica .resumo__rotulo { letter-spacing: 0; }
.pagina--politica .resumo__rotulo-texto {
  line-height: var(--lh-text);
  text-box: normal;
}
.pagina--politica .resumo__h2 {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}

/* --- Cards ---------------------------------------------------------------------- */
.pagina--politica .resumo__grade {
  display: flex;
  gap: var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--politica .resumo__grade > li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-28);
  border-radius: var(--radius-md);
  background: var(--color-creme);
}
.pagina--politica .resumo__card-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-12);
  background: var(--color-dourado-01);
  color: var(--color-texto);
}
.pagina--politica .resumo__card-titulo {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--politica .resumo__card-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Tablet (sem desenho) ------------------------------------------------------- */
@media (max-width: 1100px) {
  .pagina--politica .resumo__grade { flex-wrap: wrap; }
  .pagina--politica .resumo__grade > li { flex: 1 1 calc(50% - var(--space-20) / 2); }
}

/* --- Mobile — Figma 2699:46820 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--politica .resumo {
    gap: var(--space-32);
    padding-top: var(--space-64);
  }
  .pagina--politica .resumo__grade {
    flex-direction: column;
    gap: var(--space-12);
  }
  .pagina--politica .resumo__grade > li {
    flex: none;
    padding: var(--space-24);
  }
}

/* ==========================================================================
   POLÍTICA — 03 CONTEÚDO (sumário fixo + artigo)
   Figma 2699:46519 (desktop) / 2699:46847 (mobile)
   Desktop: 96 em cima, 120 embaixo; sumário de 320 fixo à esquerda (sticky)
   + 96 + artigo (864). O item do sumário da seção que está na tela fica
   --ativo (main.js). Seções do artigo: 48 entre elas, da 2ª em diante com
   linha Borda clara em cima e 48 de respiro.
   Mobile: o sumário vira uma caixa recolhível (Nesta página · 13 tópicos),
   64 em cima, 80 embaixo, 40 entre as seções.
   Tablet (sem desenho, ≤ 1100): artigo na largura e o sumário recolhível
   do mobile em cima (o de 320 espremia o texto); tipografia do desktop.
   ========================================================================== */
.pagina--politica .conteudo {
  padding-top: var(--space-96);
  padding-bottom: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-branco);
}
.pagina--politica .conteudo__grade {
  display: flex;
  align-items: flex-start;
  gap: var(--space-96);
}

/* --- Sumário ------------------------------------------------------------------- */
.pagina--politica .conteudo__grade-sumario {
  position: sticky;
  top: var(--space-40);
  flex: none;
  width: 320px;
  max-height: calc(100vh - 2 * var(--space-40));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.pagina--politica .conteudo__sumario-titulo {
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  text-transform: uppercase;
  color: var(--color-dourado-escuro);
}
.pagina--politica .conteudo__sumario-topo { display: none; }
.pagina--politica .conteudo__sumario-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--politica .conteudo__sumario-item {
  display: flex;
  padding: 9px 0 9px var(--space-16);
  border-left: 2px solid var(--color-borda-clara);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  transition: color .2s ease, border-color .2s ease;
}
.pagina--politica .conteudo__sumario-item:hover { color: var(--color-texto); }
.pagina--politica .conteudo__sumario-item--ativo {
  border-left-color: var(--color-dourado-01);
  font-weight: 500;
  color: var(--color-texto);
}

/* --- Artigo -------------------------------------------------------------------- */
.pagina--politica .conteudo__grade-artigo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}
.pagina--politica .conteudo__grade-artigo > section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  scroll-margin-top: var(--space-20);
}
.pagina--politica .conteudo__grade-artigo > section + section {
  padding-top: var(--space-48);
  border-top: 1px solid var(--color-borda-clara);
}
.pagina--politica .conteudo__grade-artigo > section > * { width: 100%; }

.pagina--politica .conteudo__secao-cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.pagina--politica .conteudo__secao-numero {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-dourado-escuro);
}
.pagina--politica .conteudo__secao-h2 {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.pagina--politica .conteudo__secao-paragrafo {
  margin: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--politica .conteudo__artigo-secao-13-contato-canal > .conteudo__secao-paragrafo { max-width: 707px; }
.pagina--politica .conteudo__secao-subtitulo {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}

/* Dados (seção 01) */
.pagina--politica .conteudo__secao-dados { margin: 0; }
.pagina--politica .conteudo__dados-dado {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-14);
  border-bottom: 1px solid var(--color-borda-clara);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
}
.pagina--politica .conteudo__dado-rotulo {
  flex: none;
  width: 140px;
  color: var(--color-texto-secundario);
}
.pagina--politica .conteudo__dado-valor {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-weight: 500;
  color: var(--color-texto);
  overflow-wrap: anywhere;
}

/* Listas com marcador dourado (artigo: 6 e 14 de vão; cards: 5 e 10) */
.pagina--politica .conteudo__secao-lista,
.pagina--politica .conteudo__card-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--politica .conteudo__card-lista { width: 100%; gap: var(--space-8); }
.pagina--politica .conteudo__lista-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
}
.pagina--politica .conteudo__item-marcador {
  flex: none;
  display: flex;
  align-items: flex-end;
  width: 6px;
  height: 17px;
}
.pagina--politica .conteudo__item-marcador::before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-dourado-01);
}
.pagina--politica .conteudo__lista-item .conteudo__item-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--politica .conteudo__item-texto strong {
  font-weight: 500;
  color: var(--color-texto);
}
.pagina--politica .conteudo__card-lista .conteudo__lista-item { gap: var(--space-10); }
.pagina--politica .conteudo__card-lista .conteudo__item-marcador { width: 5px; height: 14px; }
.pagina--politica .conteudo__card-lista .conteudo__item-texto { font-size: var(--fs-16); }

/* Cards creme (seções 02, 05 e 08) */
.pagina--politica .conteudo__secao-cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
}
.pagina--politica .conteudo__secao-cards > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-24);
  border-radius: var(--radius-12);
  background: var(--color-creme);
}
.pagina--politica .conteudo__card-titulo {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}
.pagina--politica .conteudo__card-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.pagina--politica .conteudo__card-tag {
  display: inline-flex;
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  background: var(--color-branco);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  white-space: nowrap;
}

/* Destaque com traço dourado (seções 04, 06 e 08) */
.pagina--politica .conteudo__secao-destaque {
  margin: 0;
  padding: var(--space-20) var(--space-24);
  border-left: 3px solid var(--color-dourado-01);
  border-radius: var(--radius-12);
  background: var(--color-creme);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
}

/* Prazo (seção 07) */
.pagina--politica .conteudo__secao-prazo {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-28);
  border-radius: var(--radius-12);
  background: var(--color-creme);
}
.pagina--politica .conteudo__prazo-valor {
  flex: none;
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-dourado-escuro);
  white-space: nowrap;
}
.pagina--politica .conteudo__prazo-texto {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* Como exercer (seção 09) */
.pagina--politica .conteudo__direitos-como-exercer {
  padding: var(--space-32);
  border-radius: var(--radius-md);
  background: var(--color-preto-02);
}
.pagina--politica .conteudo__como-exercer-topo {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.pagina--politica .conteudo__como-exercer-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.pagina--politica .conteudo__como-exercer-chamada {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.pagina--politica .conteudo__como-exercer-email {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
  overflow-wrap: anywhere;
}
.pagina--politica .conteudo__como-exercer-prazo {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
}
.pagina--politica .conteudo__como-exercer-cta { flex: none; }
/* Envelope (19 × 15 com a folga do traço) no lugar do vetor de 16,67 × 13,33 */
.pagina--politica .conteudo__como-exercer-cta .ico { margin: -.833px -1.167px; }

/* Cartão de contato (seção 13) */
.pagina--politica .conteudo__contato-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-32);
  border-radius: var(--radius-md);
  background: var(--color-preto-02);
}
.pagina--politica .conteudo__contato-nome {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.pagina--politica .conteudo__contato-canais {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagina--politica .conteudo__contato-canais > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
}
.pagina--politica .conteudo__contato-canais .ico {
  flex: none;
  color: var(--color-dourado-01);
}
/* Folga do traço: o vetor fica no lugar do Figma (16,67 × 13,33 / 13,33 × 16,67) */
.pagina--politica .conteudo__canal-e-mail-icone-mail { margin: -.833px -1.167px; }
.pagina--politica .conteudo__canal-endereco-icone-pin { margin: -1.167px -.833px; }
.pagina--politica .conteudo__canal-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  line-height: var(--lh-text);
}
.pagina--politica .conteudo__canal-rotulo {
  font-size: var(--fs-14);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
}
.pagina--politica .conteudo__canal-valor {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-branco);
  overflow-wrap: anywhere;
}
.pagina--politica .conteudo__dado-valor a:hover,
.pagina--politica a.conteudo__canal-valor:hover { color: var(--color-dourado-01); }

/* --- Tablet (sem desenho) e mobile: sumário recolhível ----------------------------- */
@media (max-width: 1100px) {
  .pagina--politica .conteudo__grade {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }
  .pagina--politica .conteudo__grade-sumario {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    gap: 0;
    padding: var(--space-16) var(--space-20);
    border: 1px solid var(--color-borda-clara);
    border-radius: var(--radius-12);
  }
  .pagina--politica .conteudo__sumario-titulo { display: none; }
  .pagina--politica .conteudo__sumario-topo {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
  }
  .pagina--politica .conteudo__topo-nesta-pagina {
    flex: 1 1 0;
    font-size: var(--fs-16);
    font-weight: 500;
    line-height: var(--lh-text);
  }
  .pagina--politica .conteudo__topo-13-topicos {
    font-size: var(--fs-14);
    line-height: var(--lh-text);
    color: var(--color-texto-secundario);
    text-box: trim-both cap alphabetic;
    white-space: nowrap;
  }
  .pagina--politica .conteudo__topo-icone-chevrondown { flex: none; transition: transform .2s ease; }
  .pagina--politica .conteudo__grade-sumario--aberto .conteudo__topo-icone-chevrondown { transform: rotate(180deg); }
  .pagina--politica .conteudo__sumario-lista { display: none; margin-top: var(--space-16); }
  .pagina--politica .conteudo__grade-sumario--aberto .conteudo__sumario-lista { display: block; }
}

/* --- Mobile — Figma 2699:46847 ---------------------------------------------------- */
@media (max-width: 768px) {
  .pagina--politica .conteudo {
    padding-top: var(--space-64);
    padding-bottom: var(--space-80);
  }
  .pagina--politica .conteudo__grade-artigo { gap: var(--space-40); }
  .pagina--politica .conteudo__grade-artigo > section + section { padding-top: var(--space-40); }
  .pagina--politica .conteudo__secao-h2 { font-size: var(--fs-20); }
  .pagina--politica .conteudo__secao-paragrafo,
  .pagina--politica .conteudo__secao-subtitulo,
  .pagina--politica .conteudo__lista-item .conteudo__item-texto,
  .pagina--politica .conteudo__card-titulo { font-size: var(--fs-16); }
  .pagina--politica .conteudo__artigo-secao-13-contato-canal > .conteudo__secao-paragrafo { max-width: none; }

  .pagina--politica .conteudo__dados-dado {
    flex-direction: column;
    gap: var(--space-4);
  }
  .pagina--politica .conteudo__dado-rotulo { width: auto; }
  .pagina--politica .conteudo__dado-valor { flex: none; }

  .pagina--politica .conteudo__secao-cards {
    flex-direction: column;
    gap: var(--space-12);
  }
  .pagina--politica .conteudo__secao-cards > div {
    flex: none;
    padding: var(--space-20);
  }

  .pagina--politica .conteudo__secao-prazo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-20);
  }
  .pagina--politica .conteudo__prazo-texto { flex: none; }

  .pagina--politica .conteudo__direitos-como-exercer { padding: var(--space-24); }
  .pagina--politica .conteudo__como-exercer-topo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .pagina--politica .conteudo__como-exercer-texto { flex: none; gap: var(--space-8); }
  .pagina--politica .conteudo__como-exercer-email {
    font-size: var(--fs-16);
    line-height: var(--lh-text);
  }

  .pagina--politica .conteudo__contato-cartao { padding: var(--space-24); }
  .pagina--politica .conteudo__canais-canal-e-mail .conteudo__canal-valor { font-size: var(--fs-14); }
}

/* ==========================================================================
   LPs — HERO NO TABLET (769–1100) — pedido do responsável, 2026-10-06
   Botão e selos ("5,0 no Google", "BH ou online") lado a lado: no desktop do
   Figma ficam em coluna (Civil, Imobiliário, Assessoria), o que no tablet
   deixava um vazio à direita. Quebra para baixo se não couber.
   ========================================================================== */
@media (min-width: 561px) and (max-width: 1100px) {
  .lp .hero__texto-conteudo {
    /* pode passar da coluna do texto (601 na Civil) para os selos caberem ao lado */
    width: max-content;
    max-width: calc(100vw - 2 * var(--gutter));
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-24) var(--space-40);
  }
}

/* ==========================================================================
   ASSESSORIA — AJUSTES DO TABLET (769–1100) — pedido do responsável, 2026-10-06
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  /* 03 Pilares: caixa com 80 em cima e embaixo (120 do desktop sobrava) */
  .lp--assessoria-empresarial .pilares__container { padding-block: var(--space-40); }
  /* 07 Advogado: caixa creme com 40 em cima e embaixo — retrato perto do canto da caixa */
  .lp--assessoria-empresarial .advogado__container { padding-block: var(--space-40); }
  /* 05 Primeira conversa: textos dos itens na largura da coluna (sem as larguras
     do Figma desktop, que quebravam em 2 linhas curtas) */
  .lp--assessoria-empresarial .inicio__itens-item:nth-child(n) .inicio__item-texto { max-width: none; }
}

/* ==========================================================================
   IMOBILIÁRIO — AJUSTES DO TABLET (769–1100) — pedido do responsável, 2026-10-06
   Caixas (Como funciona, Prazos) com 40 em cima e embaixo: os 120 do desktop
   sobravam e o conteúdo ficava longe do canto da caixa.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--direito-imobiliario .funciona__container,
  .lp--direito-imobiliario .prazos__container { padding-block: var(--space-40); }
}

/* ==========================================================================
   LPs — RESPIRO LATERAL DAS CAIXAS NO TABLET (769–1100) — pedido do
   responsável, 2026-10-06. As caixas arredondadas usavam o gutter (20) nas
   laterais, menor que o respiro de cima (40): agora 40 nos quatro lados.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  .lp--direito-trabalhista .prazos__container,
  .lp--direito-civil .prazos__container,
  .lp--assessoria-empresarial .pilares__container,
  .lp--direito-imobiliario .funciona__container,
  .lp--direito-imobiliario .prazos__container,
  .lp--assessoria-empresarial .advogado__container,
  .lp .faq__container { padding-inline: var(--space-40); }
  .lp--direito-trabalhista .prazos__container { padding-block: var(--space-40); }
}

/* ==========================================================================
   LPs — CREDENCIAIS DO ADVOGADO NO CELULAR (≤ 560) — pedido do responsável,
   2026-10-06. Rótulo e valor lado a lado espremiam o valor (até 4 linhas em
   360): o valor desce para baixo do rótulo, ao lado do ícone.
   ========================================================================== */
@media (max-width: 560px) {
  .lp .advogado__credencial {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "icone rotulo"
      "icone valor";
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--space-8) var(--space-16);
  }
  .lp .advogado__credencial-rotulo { display: contents; }
  .lp .advogado__credencial-icone { grid-area: icone; align-self: start; } /* topo do ícone alinhado ao rótulo */
  .lp .advogado__credencial-rotulo-texto,
  .lp--direito-civil .advogado__credencial-rotulo-texto { grid-area: rotulo; width: auto; align-self: start; }
  .lp .advogado__credencial-valor { grid-area: valor; align-self: start; }
}

/* LPs — hero no tablet estreito (561–768): H1 na largura da seção e botão no
   tamanho do texto, com os selos ao lado (pedido do responsável, 2026-10-06) */
@media (min-width: 561px) and (max-width: 768px) {
  .lp .hero__h1 { max-width: none; }
  .lp .hero__cta { width: auto; }
}

/* LPs — "Belo Horizonte" do H1 não se separa (pedido do responsável, 2026-10-06):
   em vez de "…em Belo / Horizonte", desce inteiro para a linha seguinte */
.lp .hero__h1-cidade { white-space: nowrap; }

/* ==========================================================================
   LPs — TABLET: ADVOGADO, TÍTULO DO FAQ E QUEBRA DOS H2 — pedido do
   responsável, 2026-10-06
   ========================================================================== */
/* Advogado (901–1200, lado a lado): vão central de 40 (eram 20 + 56) e o
   retrato na altura do bloco de texto (cover), em vez da proporção fixa */
@media (min-width: 901px) and (max-width: 1200px) {
  .lp .advogado__grid {
    align-items: stretch;
    gap: var(--space-40);
  }
  .lp .advogado__texto { padding-left: 0; }
  .lp .advogado__retrato {
    flex: 0 1 400px;
    height: auto;
    aspect-ratio: auto;
    min-height: 420px;
  }
}
@media (max-width: 1100px) {
  /* FAQ: título na largura toda (378 do desktop deixava 3 linhas) */
  .lp .faq__h2 { max-width: none; }
  /* títulos das seções com quebra equilibrada (ex.: CTA final) */
  .lp h2 { text-wrap: balance; }
}

/* FAQ, card "Ainda com dúvidas?" no tablet (561–1100): título em cima; descrição e
   botão na mesma linha (pedido do responsável, 2026-10-06) */
@media (min-width: 561px) and (max-width: 1100px) {
  .lp .faq__lateral-card-ainda-com-duvidas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "icone  icone"
      "titulo titulo"
      "texto  botao";
    align-items: center;
    gap: var(--space-16) var(--space-40);
  }
  .lp .faq__card-icone { grid-area: icone; margin-bottom: var(--space-12); }
  .lp .faq__card-texto { display: contents; }
  .lp .faq__card-titulo { grid-area: titulo; }
  .lp .faq__card-descricao { grid-area: texto; max-width: 520px; }
  .lp .faq__card-ainda-com-duvidas-botao-primario-inverso { grid-area: botao; width: auto; }
}

/* CTA final das LPs no tablet (561–1100): título em cima; descrição e botão na
   mesma linha (pedido do responsável, 2026-10-06) */
@media (min-width: 561px) and (max-width: 1100px) {
  .lp .cta__texto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titulo titulo"
      "texto  botao";
    align-items: center;
    gap: var(--space-20) var(--space-40);
    width: 100%;
  }
  .lp .cta__titulos { display: contents; }
  .lp .cta__h2 { grid-area: titulo; }
  .lp .cta__texto-descricao { grid-area: texto; }
  .lp .cta__botao { grid-area: botao; width: auto; }
}

/* Trabalhista › Ajuda, CTA (≤ 1100): pergunta em negrito numa linha e o convite
   embaixo (pedido do responsável, 2026-10-06) */
@media (max-width: 1100px) {
  .lp--direito-trabalhista .ajuda__cta-texto strong {
    display: block;
    margin-bottom: var(--space-4);
  }
}

/* ==========================================================================
   LPs — CAIXAS ARREDONDADAS EM DESKTOP MENOR (1101–1600) — pedido do
   responsável, 2026-10-06. Com 120 em cima/embaixo e só o gutter (20) nas
   laterais, a caixa ficava "alta" e o conteúdo colado nas bordas (ex.: 1280).
   Aqui: 80 em cima e embaixo e no mínimo 56 nas laterais. ≥ 1601 = Figma.
   ========================================================================== */
@media (min-width: 1101px) and (max-width: 1600px) {
  .lp--direito-trabalhista .prazos__container,
  .lp--direito-civil .prazos__container,
  .lp--direito-imobiliario .funciona__container,
  .lp--direito-imobiliario .prazos__container,
  .lp--assessoria-empresarial .pilares__container,
  .lp--assessoria-empresarial .advogado__container {
    padding-block: var(--space-80);
    padding-inline: max(var(--space-56), (100% - var(--container)) / 2);
  }
  .lp .faq__container {
    padding-top: var(--space-80);
    padding-inline: max(var(--space-56), (100% - var(--container)) / 2);
  }
}

/* Civil › Áreas, card de destaque no tablet (561–1100): ícone e título em cima;
   descrição e botão na mesma linha (pedido do responsável, 2026-10-06) */
@media (min-width: 561px) and (max-width: 1100px) {
  .lp--direito-civil .areas__bento-card-destaque {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "icone  icone"
      "titulo titulo"
      "texto  botao";
    align-items: center;
    gap: var(--space-12) var(--space-40);
  }
  .lp--direito-civil .areas__destaque-conteudo,
  .lp--direito-civil .areas__destaque-texto { display: contents; }
  .lp--direito-civil .areas__destaque-icone { grid-area: icone; margin-bottom: var(--space-12); }
  .lp--direito-civil .areas__destaque-titulo { grid-area: titulo; }
  .lp--direito-civil .areas__destaque-descricao { grid-area: texto; max-width: 600px; }
  .lp--direito-civil .areas__hero-cta {
    grid-area: botao;
    width: auto;
    align-self: center;
  }
}

/* ==========================================================================
   LPs — HERO NO TABLET COM FOTO PRÓPRIA (561–1100) — imagens do responsável
   (hero-tablet.webp, 820 de largura, 2026-10-06). A foto aparece inteira no
   topo, na proporção dela (o fundo escuro já vem na base da imagem), e o
   texto fica sobre a parte de baixo, a 64 do fim.
   ========================================================================== */
@media (min-width: 561px) and (max-width: 1100px) {
  .lp--direito-trabalhista    { --hero-tablet-proporcao: 955 / 820; }
  .lp--direito-civil          { --hero-tablet-proporcao: 974 / 820; }
  .lp--direito-imobiliario    { --hero-tablet-proporcao: 998 / 820; }
  .lp--assessoria-empresarial { --hero-tablet-proporcao: 987 / 820; }
  .lp .hero {
    --hero-tablet-altura: calc(100vw * var(--hero-tablet-proporcao));
    min-height: var(--hero-tablet-altura);
    align-items: flex-end;
    padding-top: calc(var(--hero-tablet-altura) * .45);
    padding-bottom: var(--space-64);
  }
  .lp .hero__image { bottom: auto; height: var(--hero-tablet-altura); }
  .lp .hero__image-foto {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    transform: none;
  }
  /* só uma transição suave para o fundo da seção (a base escura já vem na foto) */
  .lp .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, transparent 70%, var(--color-preto-01) 100%);
  }
}

/* ==========================================================================
   LPs — HERO NO CELULAR COM FOTO PRÓPRIA (≤ 560) — imagens do responsável
   (hero-mobile-430.webp, 430 de largura, com o fundo da seção inteira e o
   escurecimento já aplicados, 2026-10-06). A foto cobre a seção na proporção
   dela; os gradientes por CSS do frame mobile saem (já vêm na imagem).
   ========================================================================== */
@media (max-width: 560px) {
  .lp--direito-trabalhista    { --hero-mobile-proporcao: 865 / 430; }
  .lp--direito-civil          { --hero-mobile-proporcao: 866 / 430; }
  .lp--direito-imobiliario    { --hero-mobile-proporcao: 865 / 430; }
  .lp--assessoria-empresarial { --hero-mobile-proporcao: 905 / 430; }
  .lp .hero {
    --hero-mobile-altura: calc(100vw * var(--hero-mobile-proporcao));
    min-height: var(--hero-mobile-altura);
  }
  .lp .hero__image { bottom: auto; height: var(--hero-mobile-altura); }
  .lp .hero__image-foto {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    transform: none;
  }
  .lp .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, transparent 85%, var(--color-preto-01) 100%);
  }
}