/*
Theme Name: Creact
Theme URI:
Author: Creact
Description: Tema base para projetos WordPress da Creact — foco em performance, segurança e conteúdo gerenciável via ACF.
Version: 1.0.0
Text Domain: creact
*/

/* ==========================================================================
   FONTES — IBM Plex Sans (400/500), hospedada localmente
   (assets/fonts/, subset latin). Sem Google Fonts via <link>/@import.
   Única família do site (Heebo do Figma descartada). font-display: swap.
   Caminhos relativos ao style.css (resolvem a partir da raiz do tema).
   Arquivos SEM hinting (fontTools --no-hinting): o hinting do Fontsource
   deformava as letras no Windows a 100% (Figma não usa hinting). ?v= no
   src e no preload do functions.php — mudar os dois juntos.
   ========================================================================== */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400.woff2?v=2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-500.woff2?v=2') format('woff2');
}

/* ==========================================================================
   TOKENS — spec.md, seção 2. O CSS das seções usa SEMPRE var(--token),
   nunca valor hardcoded. Breakpoints (spec 3): 900 · 768 · 600 · 480.
   ========================================================================== */
:root {
  /* Cores do projeto — Color Styles do Figma */
  --color-preto-01:                 #0D0D0D; /* Preto 01 · fundo escuro */
  --color-preto-02:                 #1A1A1A; /* Preto 02 · card escuro */
  --color-preto-03:                 #2E2B27; /* Preto 03 · linha no escuro */
  --color-dourado-01:               #B8986A; /* Dourado 01 · botão e destaque */
  --color-dourado-02:               #A6865A; /* Dourado 02 · hover */
  --color-dourado-escuro:           #7D6238; /* Dourado escuro · texto em fundo claro */
  --color-creme:                    #FAF9F6; /* Creme · seção clara */
  --color-branco:                   #FFFFFF; /* Branco · card e destaque */
  --color-texto:                    #161616; /* Texto principal */
  --color-texto-secundario:         #5E5A54; /* Texto secundário */
  --color-texto-secundario-escuro:  #A8A29A; /* Texto secundário no escuro */
  --color-borda-clara:              #DDD5C8; /* Borda clara */
  --color-texto-placeholder:        #77716A; /* placeholder e select vazio em fundo claro — 4,8:1 no branco (AA) */

  /* Cores usadas no Dev sem Color Style — seguem o Figma como está */
  --color-estrela:                  #FFCF32; /* estrelas de avaliação */
  --color-fundo-alternativo:        #FAFAFA; /* fundo de Home › Sobre e Civil › Áreas (bento) */
  --color-borda-cabecalho:          rgba(227, 228, 231, .25); /* linha inferior dos cabeçalhos sobre o hero */
  --color-preto-80:                 rgba(0, 0, 0, .8);        /* gradientes sobre as fotos dos heros */
  --color-preto-puro:               #000;    /* fundo e gradientes do hero mobile do Imobiliário */
  --color-borda-suave:              #EAEAE8; /* borda dos cards de depoimento */
  --color-selo-nota:                #2E3238; /* selo Google: "5,0" */
  --color-selo-escala:              #6A7381; /* selo Google: "/5" */

  /* Escala de cinza — fixa no modelo. NÃO usada pelo design deste projeto. */
  --white:        #FFFFFF;
  --grayscale-01: #1C1C1C;
  --grayscale-02: #3D3D3D;
  --grayscale-03: #454545;
  --grayscale-04: #6D6D6D;
  --grayscale-05: #B0B0B0;
  --grayscale-06: #E7E7E7;

  /* Tipografia */
  --font-primary:   'IBM Plex Sans', system-ui, sans-serif;

  /* Escala (Text Styles do Figma) */
  --fs-64: 64px; --fs-56: 56px; --fs-48: 48px; --fs-40: 40px; --fs-32: 32px;
  --fs-24: 24px; --fs-20: 20px; --fs-18: 18px; --fs-16: 16px; --fs-14: 14px; --fs-12: 12px;

  /* Papéis — Desktop */
  --fs-h1:     var(--fs-56);
  --fs-h2:     var(--fs-40);
  --fs-h3:     var(--fs-24);
  --fs-text-1: var(--fs-18);
  --fs-text-2: var(--fs-16);

  --lh-title: 1.2;   /* Headline/* = 120% (arredondado ao pixel abaixo, como o Figma) */
  --lh-text:  1.5;   /* Texto/*    = 150% */
  --ls-label: 0.1em;     /* rótulos UPPER = 10% */
  --ls-label-12: 0.12em; /* rótulos UPPER = 12% (títulos das colunas do rodapé) */

  /* Espaçamento */
  --space-4: 4px;   --space-6: 6px;   --space-8: 8px;   --space-10: 10px;
  --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px;
  --space-96: 96px; --space-120: 120px;

  /* Aliases do modelo */
  --space-xs: var(--space-8);
  --space-sm: var(--space-12);
  --space-md: var(--space-16);
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-2xl: var(--space-40);

  --container: 1280px;
  --gutter: var(--space-20);            /* padding lateral mobile */
  --section-y: var(--space-120);        /* desktop */
  --cabecalho-topo: 44px;               /* cabeçalho flutuante: distância do topo do hero */
  --cabecalho-altura: 86px;             /* altura do cabeçalho do site (desktop e mobile) */
  --cabecalho-lp-topo: 42px;            /* cabeçalho da LP: distância do topo do hero (Trabalhista 42) */
  --cabecalho-lp-altura: 84px;          /* altura do cabeçalho da LP (desktop e mobile) */

  /* Radius */
  --radius-sm:   10px;  /* botões */
  --radius-12:   12px;
  --radius-14:   14px;
  --radius-md:   16px;  /* FAQ, cards */
  --radius-18:   18px;
  --radius-20:   20px;
  --radius-lg:   24px;  /* cards grandes, imagens */
  --radius-28:   28px;
  --radius-32:   32px;
  --radius-pill: 999px; /* abas, tags, toggles, paginação, busca */

  /* Sombras */
  --shadow-sm:        0 2px 6px rgba(43, 46, 48, .04);
  --shadow-md:        0 12px 32px rgba(43, 46, 48, .08);
  --shadow-lg:        0 24px 48px rgba(43, 46, 48, .12);
  --shadow-dark:      0 24px 48px rgba(0, 0, 0, .35);
  --shadow-card-dark: 0 16px 40px rgba(13, 13, 13, .14);
  --shadow-soft:      0 4px 106px rgba(0, 0, 0, .15);
  --shadow-cabecalho: 0 12px 16px rgba(43, 46, 48, .08); /* drop-shadow dos cabeçalhos */
  --shadow-card-tem-pressa: 0 24px 24px rgba(0, 0, 0, .35); /* Home › Processo, card sobre a foto */
  --shadow-card-credencial: 0 24px 24px rgba(43, 46, 48, .12); /* Home › Fundador, card sobre o retrato */
  --shadow-card-area: 0 2px 3px rgba(43, 46, 48, .04); /* LPs › Outras áreas, painel branco do card */
}

/* O Figma arredonda a altura de cada linha ao pixel inteiro (48 × 120% = 58,
   não 57,6; 32 × 120% = 38; 64 × 120% = 77). round() reproduz isso; o em
   resolve no elemento que usa o token. Sem suporte, fica o 1.2. */
@supports (line-height: round(1.2em, 1px)) {
  :root { --lh-title: round(1.2em, 1px); }
}

@media (max-width: 768px) {
  :root {
    /* Papéis — Mobile */
    --fs-h1:     var(--fs-40);
    --fs-h2:     var(--fs-32);
    --fs-h3:     var(--fs-20);
    --fs-text-1: var(--fs-16);
    --fs-text-2: var(--fs-16);

    --section-y: var(--space-64);
    --cabecalho-topo: var(--space-16);
    --cabecalho-lp-topo: var(--space-16);
  }
}

/* ==========================================================================
   SCROLL CUSTOMIZADO + SELEÇÃO DE TEXTO — templates/scroll-selecao.md
   [cor primária] = --color-dourado-01 (#B8986A). JS em assets/js/main.js.
   ========================================================================== */

/* Scroll customizado */
:root {
  --sbw: 8px;
  --sbc: var(--color-dourado-01);
}
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
#sb {
  position: fixed;
  top: 0;
  right: 2px;
  width: var(--sbw);
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}
#sb i {
  position: absolute;
  right: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--sbc);
  opacity: 0;
  transition: opacity .35s ease;
}
html.scrolling #sb i { opacity: 1; }
@media (max-width: 1024px) { #sb { display: none; } }

/* Seleção de texto */
::selection      { color: #fff; background-color: var(--color-dourado-01); }
::-moz-selection { color: #fff; background-color: var(--color-dourado-01); }

/* ==========================================================================
   RESET BÁSICO
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Smooth scroll (templates/smooth-scroll.md): o nativo fica como fallback;
   o main.js só o desliga quando o Lenis assume de fato. */
html { scroll-behavior: smooth; }

/* `clip` (não `hidden`): corta o vazamento lateral sem transformar o body em
   container de rolagem — mantém o position: sticky e o scroll da janela
   (Lenis, barra customizada) funcionando. */
body { overflow-x: clip; }
body {
  font-family: var(--font-primary);
  color: var(--color-texto);
  background: var(--color-branco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* Foco visível (spec 2.5 — proposta, não desenhada no Figma) */
:focus-visible {
  outline: 2px solid var(--color-dourado-01);
  outline-offset: 2px;
}

/* Depois do html { scroll-behavior: smooth } — senão perde a cascata */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Rede de segurança: transições e animações que não têm regra própria */
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   DESIGN DO PROJETO — a partir daqui é seu.
   Home, header e footer moram neste arquivo (ver integracao.md, seção 2.1).
   Demais páginas: style-pages.css (sem CSS isolado por landing — spec 13.3).
   ========================================================================== */

/* ==========================================================================
   BASE NEUTRA DO SITE BASE — já nos tokens do projeto, só para nada parecer
   quebrado enquanto as seções do Figma não entram. Cada bloco sai quando o
   componente correspondente for reescrito (header, footer, blog, contato).
   ========================================================================== */

/* --- Ritmo de leitura ---------------------------------------------------- */
body { line-height: var(--lh-text); font-size: var(--fs-text-2); }
h1, h2, h3 { line-height: var(--lh-title); margin-bottom: .5em; font-weight: 400; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
p, ul, ol { margin-bottom: 1em; }

/* --- Container ----------------------------------------------------------- */
/* só nas rotas ainda sem o design do Figma (Home, LPs e páginas com
   `.pagina` no <main> — Contato… — já têm seções próprias) */
body:not(.home):not([class*="page-template-template-landing-page"]) .site-main:not(.pagina) > * {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Conteúdo ------------------------------------------------------------ */
body:not(.home):not([class*="page-template-template-landing-page"]) .site-main:not(.pagina) > section { padding-block: var(--space-40); }
.page-title { padding-bottom: var(--space-8); }
.breadcrumb { font-size: var(--fs-14); color: var(--color-texto-secundario); margin-bottom: var(--space-8); }
.empty-state { color: var(--color-texto-secundario); }

/* --- Grades genéricas ---------------------------------------------------- */
.products-grid,
.clients-grid,
.blog-grid,
.dep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-24);
}

/* --- Filtro do blog: busca e categoria lado a lado ---------------------- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-40);  /* respiro até a listagem de posts */
}
.blog-filter .blog-pill {
  position: relative;               /* âncora do dropdown da busca ao vivo */
  flex: 1 1 260px;
  display: flex;
  gap: var(--space-8);
  margin: 0;
}
.blog-filter input[type="search"] { flex: 1; }
.blog-filter button[type="submit"] {
  flex: none;
  padding: var(--space-10) var(--space-20);
  border-radius: var(--radius-sm);
  background: var(--color-texto);
  color: var(--color-branco);
  font-size: var(--fs-14);
}
.blog-filter select { width: 100%; }

/* Pré-visualização ao vivo da busca (live-search.js alterna o atributo hidden) */
.search-dropdown {
  position: absolute;
  top: calc(100% + var(--space-6));
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-branco);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.search-dropdown a { display: block; padding: var(--space-10) var(--space-12); color: var(--color-texto); font-size: var(--fs-14); }
.search-dropdown a:hover,
.search-dropdown .is-active { background: var(--color-creme); }

/* --- Formulários --------------------------------------------------------- */
.field { margin-bottom: var(--space-16); }
.field label { display: block; margin-bottom: var(--space-6); font-size: var(--fs-14); font-weight: 500; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-borda-clara);
  border-radius: 0;
  font: inherit;
  font-size: var(--fs-16);
  background: var(--color-branco);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-dourado-01); }
.btn-enviar,
.btn-saiba {
  display: inline-block;
  padding: var(--space-16) var(--space-28);
  border-radius: var(--radius-sm);
  background: var(--color-dourado-01);
  color: var(--color-texto);
  font-weight: 500;
}
.btn-enviar:hover { background: var(--color-dourado-02); color: var(--color-texto); }
.aviso { padding: var(--space-10) var(--space-14); border-radius: var(--radius-sm); background: var(--color-creme); font-size: var(--fs-14); }
.aviso.erro { color: var(--color-texto); border: 1px solid var(--color-dourado-01); }

/* --- Página de contato: formulário centralizado -------------------------- */
.contato-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  max-width: 560px;
  margin-inline: auto;
}
.contato-form-card {
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-md);
  padding: var(--space-28);
  background: var(--color-branco);
}
.contato-info { display: grid; gap: var(--space-14); }
.info-item { font-size: var(--fs-16); }
.info-text .addr { display: block; }
.maps { font-size: var(--fs-14); }

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */

/* Texto só para leitor de tela (padrão do WordPress) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Pular para o conteúdo" — oculto até receber o foco do teclado */
.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100001;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip-path: none;
  background: var(--color-preto-02);
  color: var(--color-branco);
  font-size: var(--fs-16);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* Ícones SVG inline (theme_icon) — cor via currentColor */
.ico { display: block; flex: none; }

/* Listas e parágrafos do chrome sem o ritmo da base neutra */
.menu ul,
.menu__menu-mobile ul,
.rodape ul,
.rodape p,
.rodape-lp p {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   BOTÃO — componente "Botão" (Figma › Components), tipo Primário
   bg Dourado 01, texto 16/500, padding 16×28, radius 10, gap do ícone 10.
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-28);
  border-radius: var(--radius-sm);
  background: var(--color-dourado-01);
  color: var(--color-texto);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  white-space: nowrap;
  transition: background-color .2s ease;
}
.botao:hover { background: var(--color-dourado-02); }

/* Secundário: contorno na cor do texto (no escuro, branco — o contexto define
   `color`). 56 de altura: padding 15 + borda 1. Hover não desenhado. */
.botao--secundario,
.botao--secundario:hover {
  background: transparent;
  color: inherit;
}
.botao--secundario {
  padding-block: calc(var(--space-16) - 1px);
  border: 1px solid currentColor;
}

/* Link com seta: componente "Botão" Tipo=Link (texto 16/500, seta 12, gap 8).
   Hover não desenhado. */
.botao--link,
.botao--link:hover {
  padding: 0;
  background: none;
  color: inherit;
}
.botao--link { gap: var(--space-8); }

/* ==========================================================================
   RÓTULO DE SEÇÃO — componente "Rótulo de seção" (Figma › Components)
   Barra dourada 24×2 + texto 12 em caixa alta, 10% de espaçamento.
   Fundo claro: texto Dourado escuro (contraste AA).
   ========================================================================== */
.rotulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-dourado-escuro);
}
.rotulo__barra {
  flex: none;
  width: var(--space-24);
  height: 2px;
  background: var(--color-dourado-01);
}
.rotulo__texto { text-box: trim-both cap alphabetic; }
/* Fundo escuro: texto Dourado 01 (variante Fundo=Escuro) */
.rotulo--escuro { color: var(--color-dourado-01); }

/* ==========================================================================
   CABEÇALHOS — site (block `menu`) e landing page (block `cabecalho-lp`)
   Figma 2576:217 / 2576:260 (desktop) e 2576:298 (mobile).
   Flutuam sobre o hero escuro de cada página: sem fundo próprio.
   Desktop: 1280 de largura, 86 (site) / 84 (LP) de altura, conteúdo numa
   faixa de 56 no topo e a linha inferior no fim.
   ========================================================================== */
.menu,
.cabecalho-lp {
  position: absolute;
  z-index: 50;
  top: var(--cabecalho-topo);
  left: 0;
  right: 0;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  border-bottom: 1px solid var(--color-borda-cabecalho);
  filter: drop-shadow(var(--shadow-cabecalho));
}
.menu { height: 86px; }
.cabecalho-lp {
  top: var(--cabecalho-lp-topo);
  height: var(--cabecalho-lp-altura);
}

.menu__cabecalho-logo,
.menu__nav,
.menu__acoes,
.cabecalho-lp__logo,
.cabecalho-lp__menu-acoes {
  height: 56px;
  display: flex;
  align-items: center;
}
.menu__cabecalho-logo img,
.cabecalho-lp__logo img { width: 144px; height: auto; }

/* --- Links (desktop) ----------------------------------------------------- */
.menu__links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.menu__links-texto,
.menu__dropdown-botao {
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-text);
  color: var(--color-creme);
  white-space: nowrap;
}
/* Página atual: dourado (variantes "Página=…" do componente) */
.menu__links-texto--atual,
.menu__link--atual .menu__dropdown-texto { color: var(--color-dourado-01); }

/* Traço dourado só no hover/foco (pedido do responsável — no Figma ele fica
   fixo sob a página atual): cresce da esquerda, 4 abaixo da linha do texto. */
.menu__links-texto,
.menu__dropdown-texto { position: relative; }
.menu__links-texto::after,
.menu__dropdown-texto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--space-4));
  height: 1px;
  background: var(--color-dourado-01);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.menu__links-texto:hover::after,
.menu__links-texto:focus-visible::after,
.menu__dropdown-botao:hover .menu__dropdown-texto::after,
.menu__dropdown-botao:focus-visible .menu__dropdown-texto::after { transform: scaleX(1); }

/* --- Dropdown "Atuações" -------------------------------------------------
   O Figma desenha só o gatilho (texto + chevron). O painel aberto não está
   desenhado: aplica os tokens do chrome escuro (Preto 02 + linha Preto 03). */
.menu__link--dropdown { position: relative; }
.menu__dropdown-botao {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.menu__dropdown-icone-chevrondown {
  color: var(--color-branco);
  transition: transform .2s ease;
}
.menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-12));
  left: calc(-1 * var(--space-16));
  min-width: 240px;
  padding: var(--space-8);
  background: var(--color-preto-02);
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--space-4)));
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* ponte invisível: o mouse atravessa o vão sem fechar o painel */
.menu__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--space-12);
}
.menu__link--dropdown:hover .menu__dropdown,
.menu__dropdown:focus-within,
.menu__dropdown-botao[aria-expanded="true"] + .menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu__link--dropdown:hover .menu__dropdown-icone-chevrondown,
.menu__link--dropdown:has(.menu__dropdown:focus-within) .menu__dropdown-icone-chevrondown,
.menu__dropdown-botao[aria-expanded="true"] .menu__dropdown-icone-chevrondown {
  transform: rotate(180deg);
}
.menu__dropdown-link {
  display: block;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-sm);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-creme);
  white-space: nowrap;
  transition: color .2s ease;
}
.menu__dropdown-link:hover,
.menu__dropdown-link--atual { color: var(--color-dourado-01); }

/* --- Ações: telefone + CTA (site e LP) ---------------------------------- */
.menu__acoes,
.cabecalho-lp__menu-acoes { gap: var(--space-24); }

.menu__telefone,
.cabecalho-lp__menu-telefone {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-branco);
  white-space: nowrap;
}
.menu__telefone-icone-phone,
.cabecalho-lp__menu-telefone-icone-phone { color: var(--color-dourado-01); }

.menu__cta,
.cabecalho-lp__menu-cta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* 56 de altura: 15 + 24 + 15 + borda 1+1 */
  padding: calc(var(--space-16) - 1px) var(--space-20);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-sm);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-borda-clara);
  white-space: nowrap;
}
.menu__cta-icone-whatsapp,
.cabecalho-lp__menu-cta-icone-whatsapp {
  width: 18px; /* slot de 18 do Figma (o arquivo do ícone é 21) */
  height: 18px;
  color: var(--color-dourado-02);
}

/* --- Botão hambúrguer → X (só no celular) --------------------------------
   As 3 linhas do vetor do Figma (29.33 × 1.25, a 9.17 uma da outra). Aberto:
   a do meio some e as outras giram até o X de 20 do "Menu mobile aberto". */
.cabecalho-mobile__icone-menu {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  color: var(--color-branco);
}
.cabecalho-mobile__menu-linha {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 29.33px;
  height: 1.25px;
  margin: -0.625px 0 0 -14.665px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), opacity .25s ease;
}
.cabecalho-mobile__menu-linha:nth-child(1) { transform: translateY(-9.17px); }
.cabecalho-mobile__menu-linha:nth-child(3) { transform: translateY(9.17px); }
.cabecalho-mobile__icone-menu[aria-expanded="true"] .cabecalho-mobile__menu-linha:nth-child(1) { transform: rotate(45deg); }
.cabecalho-mobile__icone-menu[aria-expanded="true"] .cabecalho-mobile__menu-linha:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.cabecalho-mobile__icone-menu[aria-expanded="true"] .cabecalho-mobile__menu-linha:nth-child(3) { transform: rotate(-45deg); }

/* --- Cabeçalho do site — mobile (Figma 2576:285) -------------------------
   86 de altura, padding 10/16, logo 140, ícone de menu 44. */
@media (max-width: 900px) {
  .menu {
    align-items: center;
    padding-block: var(--space-10) var(--space-16);
  }
  .menu__nav,
  .menu__acoes { display: none; }
  .menu__cabecalho-logo { height: auto; }
  .menu__cabecalho-logo img { width: 140px; }
  .cabecalho-mobile__icone-menu { display: block; }

  /* Menu aberto: o cabeçalho (logo + X) vira o topo do painel — fica fixo por
     cima dele, na mesma posição (o JS fixa o `top`), e a linha inferior assume
     a cor do divisor do Figma (Preto 03). */
  .menu { transition: border-color .4s ease; }
  html.menu-aberto .menu {
    position: fixed;
    z-index: 110;
    border-bottom-color: var(--color-preto-03);
  }
}

/* --- Cabeçalho da LP — mobile (Figma 2699:42299) -------------------------
   84 de altura, padding 12/16, logo 125, sem telefone, CTA de 45 de altura
   com o rótulo curto "Contato" (como no frame mobile — o texto longo do
   desktop espremia o logo; pedido do responsável). */
.cabecalho-lp__menu-cta-texto--mobile { display: none; }
@media (max-width: 768px) {
  .cabecalho-lp {
    align-items: center;
    padding-block: var(--space-12) var(--space-16);
  }
  .cabecalho-lp__logo,
  .cabecalho-lp__menu-acoes { height: auto; }
  .cabecalho-lp__logo { min-width: 0; flex: 0 1 125px; }
  .cabecalho-lp__logo img { width: 100%; max-width: 125px; }
  .cabecalho-lp__menu-telefone { display: none; }
  .cabecalho-lp__menu-cta {
    height: 45px;
    padding: 0 var(--space-20);
    border-width: 0.8px; /* Figma 2699:42301 */
    font-size: var(--fs-14);
    font-weight: 400;
  }
  .cabecalho-lp__menu-cta-texto--desktop { display: none; }
  .cabecalho-lp__menu-cta-texto--mobile {
    display: inline;
    text-box: trim-both cap alphabetic; /* Figma: texto aparado, centrado no ícone */
  }
}

/* ==========================================================================
   MENU MOBILE ABERTO — Figma 2577:227 (`menu__menu-mobile`)
   Tela cheia sobre a página; "Atuações" expande as 4 áreas; o item da
   página atual fica em dourado (24/500, os demais 20/500).
   O topo (logo + X + divisor) é o próprio cabeçalho, fixo por cima; o painel
   começa abaixo dele e só o conteúdo rola.
   Entrada: fade do painel + itens subindo em sequência. Fechado: invisível
   e `inert` (o JS alterna a classe --aberto).
   ========================================================================== */
.menu__menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--cabecalho-topo) + var(--cabecalho-altura));
  background: var(--color-preto-01);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.menu__menu-mobile--aberto {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
html.menu-aberto { overflow: hidden; }

.menu__menu-mobile-conteudo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-20) var(--space-32);
}

/* Itens entrando em sequência (fechar não tem atraso: o painel some junto) */
.menu__navegacao-item,
.menu__rodape > * {
  opacity: 0;
  transform: translateY(var(--space-12));
  transition: opacity .3s ease, transform .3s ease;
}
.menu__menu-mobile--aberto .menu__navegacao-item,
.menu__menu-mobile--aberto .menu__rodape > * {
  opacity: 1;
  transform: none;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}
.menu__menu-mobile--aberto .menu__navegacao-item:nth-child(1) { transition-delay: .08s; }
.menu__menu-mobile--aberto .menu__navegacao-item:nth-child(2) { transition-delay: .13s; }
.menu__menu-mobile--aberto .menu__navegacao-item:nth-child(3) { transition-delay: .18s; }
.menu__menu-mobile--aberto .menu__navegacao-item:nth-child(4) { transition-delay: .23s; }
.menu__menu-mobile--aberto .menu__navegacao-item:nth-child(5) { transition-delay: .28s; }
.menu__menu-mobile--aberto .menu__navegacao-item:nth-child(6) { transition-delay: .33s; }
.menu__menu-mobile--aberto .menu__rodape > :nth-child(1) { transition-delay: .3s; }
.menu__menu-mobile--aberto .menu__rodape > :nth-child(2) { transition-delay: .36s; }
.menu__menu-mobile--aberto .menu__rodape > :nth-child(3) { transition-delay: .42s; }

.menu__navegacao-nav { padding-block: var(--space-16) var(--space-32); }
.menu__navegacao-item { border-bottom: 1px solid var(--color-preto-03); }
.menu__navegacao-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: calc(var(--space-10) + var(--space-8));
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
  text-align: left;
}
.menu__navegacao-link--atual {
  font-size: var(--fs-24);
  color: var(--color-dourado-01);
}
.menu__atuacoes-icone-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-branco);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s ease;
}
.menu__navegacao-botao[aria-expanded="true"] .menu__atuacoes-icone-chevron {
  transform: rotate(180deg);
  color: var(--color-dourado-01);
}

/* Submenu "Atuações": altura 0 → conteúdo (grid 0fr → 1fr) e subitens
   descendo em sequência. */
.menu__navegacao-item-atuacoes-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}
.menu__navegacao-item-atuacoes-submenu--aberto { grid-template-rows: 1fr; }
/* dentro do painel: vence o reset de listas do chrome (.menu__menu-mobile ul) */
.menu__menu-mobile .menu__submenu-lista {
  min-height: 0;
  overflow: hidden;
  padding-left: var(--space-16);
}
.menu__submenu-subitem:last-child { padding-bottom: var(--space-12); }
.menu__submenu-subitem {
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-8)));
  transition: opacity .2s ease, transform .2s ease;
}
.menu__navegacao-item-atuacoes-submenu--aberto .menu__submenu-subitem {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.menu__navegacao-item-atuacoes-submenu--aberto .menu__submenu-subitem:nth-child(1) { transition-delay: .06s; }
.menu__navegacao-item-atuacoes-submenu--aberto .menu__submenu-subitem:nth-child(2) { transition-delay: .11s; }
.menu__navegacao-item-atuacoes-submenu--aberto .menu__submenu-subitem:nth-child(3) { transition-delay: .16s; }
.menu__navegacao-item-atuacoes-submenu--aberto .menu__submenu-subitem:nth-child(4) { transition-delay: .21s; }
.menu__submenu-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-12);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.menu__submenu-link--atual { color: var(--color-dourado-01); }
.menu__submenu-marcador {
  flex: none;
  width: 12px;
  height: 1px;
  background: var(--color-dourado-01);
}

.menu__rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.menu__rodape-botao { width: 100%; }
.menu__contato {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.menu__contato-item,
.menu__contato-item a {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.menu__contato-icone-phone,
.menu__contato-icone-clock {
  width: 16px;
  height: 16px;
  color: var(--color-dourado-01);
}

@media (prefers-reduced-motion: reduce) {
  .cabecalho-mobile__menu-linha,
  .menu__menu-mobile,
  .menu__navegacao-item,
  .menu__rodape > *,
  .menu__atuacoes-icone-chevron,
  .menu__navegacao-item-atuacoes-submenu,
  .menu__submenu-subitem,
  .menu__links-texto::after,
  .menu__dropdown-texto::after { transition: none; }
  .menu__navegacao-item,
  .menu__rodape > *,
  .menu__submenu-subitem { transform: none; }
}

/* Redes: círculos de 40 com linha Preto 03 (menu mobile e rodapé) */
.menu__redes,
.rodape__marca-redes { display: flex; }
.menu__redes { gap: var(--space-8); }
.rodape__marca-redes { gap: var(--space-10); }
.menu__redes-rede,
.rodape__marca-redes-rede {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
  color: var(--color-branco);
}

/* ==========================================================================
   RODAPÉ DO SITE — Figma 2576:567 (desktop) / 2576:708 (mobile), block `rodape`
   Desktop: marca + 3 colunas, copyright/LGPD, divisor, base.
   Mobile: copyright/LGPD descem para depois do divisor (order) e o
   "Voltar ao topo" sobe para o lado do logo.
   ========================================================================== */
.rodape {
  background: var(--color-preto-01);
  padding-block: var(--space-96) var(--space-40);
}
.rodape__conteudo {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.rodape__topo {
  display: grid;
  /* larguras das colunas do Figma; a sobra vira os vãos (~17) */
  /* marca ocupa a sobra; as 3 colunas de links na largura do conteúdo, com o
     mesmo vão entre elas (pedido do responsável — com as larguras fixas do
     Figma, Atuações ficava colada em Atendimento) */
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  column-gap: var(--space-80);
  align-items: start;
}
/* Tablet (sem desenho): ≤ 1200 a marca ocupa a linha de cima (ao lado das 3
   colunas ela ficava espremida) e as colunas de links seguem embaixo, com o
   mesmo vão entre elas. ≤ 900 vale o arranjo do mobile (abaixo). */
@media (max-width: 1200px) {
  .rodape__topo {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: var(--space-48) var(--space-80);
  }
  .rodape__marca { grid-column: 1 / -1; }
}
.rodape__topo-colunas-links { display: contents; }

/* Marca */
.rodape__marca {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.rodape__marca-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.rodape__marca-logo img { width: 144px; height: auto; }
.rodape__marca-descricao {
  max-width: 370px;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* Colunas */
.rodape__topo-coluna-navegacao,
.rodape__topo-coluna-atuacoes,
.rodape__topo-coluna-atendimento {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.rodape__coluna-titulo {
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-label-12);
  text-transform: uppercase;
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
}
.rodape__coluna-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.rodape__coluna-link {
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-branco);
}

/* Atendimento */
.rodape__coluna-lista--atendimento { gap: var(--space-24); }
.rodape__atendimento-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.rodape__atendimento-item-icone { color: var(--color-dourado-01); }
.rodape__atendimento-texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.rodape__atendimento-rotulo {
  font-size: var(--fs-14);
  line-height: 1;
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic;
}
.rodape__atendimento-valor {
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-branco);
  overflow-wrap: anywhere;
}

/* Copyright + LGPD */
.rodape__topo-texto {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

.rodape__divisor {
  margin-top: calc(var(--space-12) + var(--space-10));
  height: 1px;
  background: var(--color-texto-secundario);
  opacity: .5;
}

/* Base */
.rodape__base {
  margin-top: calc(var(--space-12) + var(--space-10));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}
.rodape__base-link {
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-branco);
}
.rodape__base-conteudo {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}
.rodape__conteudo-base-assinatura,
.rodape-lp__base-assinatura {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-texto-secundario-escuro);
  white-space: nowrap;
}
.rodape__assinatura-texto {
  font-size: var(--fs-14);
  line-height: var(--lh-text);
}
.rodape__base-voltar-topo {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-branco);
  white-space: nowrap;
}
.rodape__base-voltar-topo--marca { display: none; }
.rodape__voltar-icone {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-preto-03);
  border-radius: var(--radius-pill);
}

@media (max-width: 900px) {
  .rodape { padding-block: var(--space-56) var(--space-40); }

  .rodape__topo {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }
  .rodape__marca-descricao { max-width: none; }
  .rodape__base-voltar-topo--marca { display: flex; }

  .rodape__topo-colunas-links {
    display: flex;
    gap: var(--space-20);
  }
  .rodape__topo-coluna-navegacao { flex: 0 0 150px; }
  .rodape__topo-coluna-atuacoes { flex: 1 1 0; min-width: 0; }

  /* ordem do mobile: topo · divisor · copyright/LGPD · base */
  .rodape__divisor { order: 1; margin-top: var(--space-32); }
  .rodape__topo-texto {
    order: 2;
    margin-top: var(--space-32);
    gap: var(--space-20);
    text-align: center;
  }
  .rodape__base {
    order: 3;
    margin-top: var(--space-20);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
  }
  .rodape__base-conteudo { display: contents; }
  .rodape__base-conteudo .rodape__base-voltar-topo { display: none; }
  .rodape__base-link {
    font-size: var(--fs-12);
    color: var(--color-creme);
  }
  .rodape__conteudo-base-assinatura { color: var(--color-branco); }
  .rodape__assinatura-texto {
    font-size: var(--fs-12);
    color: var(--color-texto-secundario-escuro);
  }
  .rodape__assinatura-logo-creact { width: 51.6px; height: 12px; }
}

/* ==========================================================================
   RODAPÉ DA LANDING PAGE — Figma 2576:630 (desktop) / 2576:740 (mobile),
   block `rodape-lp`. Sem "Termos de uso" (spec 13.3).
   ========================================================================== */
.rodape-lp {
  background: var(--color-preto-01);
  padding-block: calc(var(--space-64) + var(--space-8)) var(--space-40);
}
.rodape-lp__conteudo {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}
.rodape-lp__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 197px 305px 305px;
  column-gap: var(--space-20);
  align-items: start;
}
.rodape-lp__marca {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.rodape-lp__marca-logo { width: 144px; height: auto; }
.rodape-lp__marca-razao {
  max-width: 324px;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
  text-box: trim-both cap alphabetic; /* como no Figma: bloco de 31, não 42 */
}
.rodape-lp__contato {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.rodape-lp__contato-icone { color: var(--color-dourado-01); }
.rodape-lp__contato-texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  line-height: var(--lh-text);
}
.rodape-lp__contato-rotulo {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-texto-secundario-escuro);
}
.rodape-lp__contato-valor {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--color-branco);
  overflow-wrap: anywhere;
}
.rodape-lp__divisor {
  height: 1px;
  background: var(--color-preto-03);
}
.rodape-lp__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  font-size: var(--fs-14); /* 14 a pedido do responsável (Figma 12) */
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.rodape-lp__base-links {
  display: flex;
  gap: var(--space-24);
}
.rodape-lp__base-link { color: var(--color-texto-secundario-escuro); }
/* "Feito por" cinza e o logo da Creact branco (o SVG usa currentColor) */
.rodape-lp__base-assinatura {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-branco);
}
.rodape-lp__assinatura-texto { color: var(--color-texto-secundario-escuro); }
.rodape-lp__assinatura-logo-creact { width: 51.6px; height: 12px; }

/* --- Hover dos links dos rodapés (site e LP): texto Dourado 01, como o menu */
.rodape__coluna-link,
a.rodape__atendimento-valor,
.rodape__base-link,
.rodape__assinatura-texto,
.rodape__base-voltar-topo,
.rodape__voltar-icone,
.rodape__marca-redes-rede,
a.rodape-lp__contato-valor,
.rodape-lp__base-link,
.rodape-lp__assinatura-texto {
  transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .rodape__coluna-link:hover,
  a.rodape__atendimento-valor:hover,
  .rodape__base-link:hover,
  .rodape__conteudo-base-assinatura:hover .rodape__assinatura-texto,
  .rodape__base-voltar-topo:hover,
  .rodape__marca-redes-rede:hover,
  a.rodape-lp__contato-valor:hover,
  .rodape-lp__base-link:hover,
  .rodape-lp__base-assinatura:hover .rodape-lp__assinatura-texto { color: var(--color-dourado-01); }
  .rodape__base-voltar-topo:hover .rodape__voltar-icone,
  .rodape__marca-redes-rede:hover { border-color: var(--color-dourado-01); }
}
.rodape__coluna-link:focus-visible,
a.rodape__atendimento-valor:focus-visible,
.rodape__base-link:focus-visible,
.rodape__base-voltar-topo:focus-visible,
a.rodape-lp__contato-valor:focus-visible,
.rodape-lp__base-link:focus-visible { color: var(--color-dourado-01); }

/* --- Tablet (sem desenho no Figma) -------------------------------------------
   ≤ 1200: a marca ocupa a linha de cima e os 3 contatos ficam em colunas
   embaixo (no desktop a marca tem 413 — abaixo de 1200 sobraria pouco para
   ela). ≤ 900: contatos em 2 colunas e a base no arranjo do mobile. */
@media (max-width: 1200px) {
  /* WhatsApp, Endereço e E-mail numa linha; o endereço quebra em mais linhas
     para o e-mail caber e, sem espaço, o item seguinte desce (pedido do
     responsável, 2026-10-06) */
  .rodape-lp__topo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-40) var(--space-40);
  }
  .rodape-lp__marca { flex: 1 1 100%; }
  .rodape-lp__contato { flex: 0 0 auto; }
  .rodape-lp__contato--endereco { flex: 1 1 220px; max-width: 340px; }
}
@media (max-width: 900px) {

  /* base: LGPD numa linha e, abaixo, Política + assinatura lado a lado */
  .rodape-lp__base {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-20) var(--space-24);
  }
  .rodape-lp__base-texto {
    flex-basis: 100%;
    text-align: center;
  }
}

/* --- Mobile — Figma 2699:42948 ------------------------------------------------- */
@media (max-width: 768px) {
  .rodape-lp { padding-block: var(--space-40); }
  .rodape-lp__conteudo { gap: var(--space-32); }
  .rodape-lp__topo {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }
  .rodape-lp__marca-razao { max-width: none; }
  .rodape-lp__contato--endereco { max-width: none; }
  .rodape-lp__base-texto {
    max-width: 290px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   HOME — 01 HERO  (Figma 2699:38048 desktop / 2699:41547 mobile)
   Desktop: 948 de altura, conteúdo centralizado entre o fim do cabeçalho
   (+88) e o fundo (120). Foto com dois gradientes pretos (já na imagem).
   Mobile: foto de 390×634 no topo (recorte próprio — hero-mobile.webp) e o
   texto no fim, sobrepondo a base da foto.
   Entrada: fade up escalonado (rótulo → h1 → subtítulo → botões).
   Escopo .home: as LPs também têm o block `hero` (style-pages.css).
   ========================================================================== */
.home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 948px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--cabecalho-topo) + var(--cabecalho-altura) + var(--space-80) + var(--space-8));
  padding-bottom: var(--space-120);
  background: var(--color-preto-01);
  color: var(--color-branco);
}

/* --- Foto + gradientes ---------------------------------------------------- */
.home .hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* o código do Figma traz blur 3.65 na camada, mas o render do frame mostra a
     foto nítida (efeito desligado) — segue o render */
}
.home .hero__image-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%; /* mantém o advogado no quadro fora de 1920 */
}
/* Desktop: os dois gradientes do Figma já vêm aplicados na imagem fornecida
   (hero.webp / hero-1920.webp). Só o recorte mobile, tirado da foto original,
   recebe os gradientes por CSS (abaixo). */

/* --- Texto ------------------------------------------------------------------ */
.home .hero__grid {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.home .hero__texto {
  width: 630px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.home .hero__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.home .hero__rotulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-16); /* Figma 12 — aumentado a pedido do responsável (14 → 16) */
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.home .hero__rotulo-barra {
  flex: none;
  width: var(--space-24);
  height: 1px;
  background: var(--color-dourado-01);
}
.home .hero__h1 {
  max-width: 561px;
  margin: 0;
  font-size: var(--fs-64);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.home .hero__subtitulo {
  max-width: 571px;
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-creme);
}
.home .hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}
.home .hero__botoes .botao__icone { width: 20px; height: 20px; }

/* --- Entrada: fade up escalonado ------------------------------------------ */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--space-24));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.home .hero__rotulo,
.home .hero__h1,
.home .hero__subtitulo,
.home .hero__botoes-botao-primario,
.home .hero__botoes-botao-secundario {
  animation: hero-fade-up .9s cubic-bezier(.22, 1, .36, 1) both;
}
.home .hero__rotulo                  { animation-delay: .15s; }
.home .hero__h1                      { animation-delay: .3s; }
.home .hero__subtitulo               { animation-delay: .45s; }
.home .hero__botoes-botao-primario   { animation-delay: .6s; }
.home .hero__botoes-botao-secundario { animation-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  .home .hero__rotulo,
  .home .hero__h1,
  .home .hero__subtitulo,
  .home .hero__botoes-botao-primario,
  .home .hero__botoes-botao-secundario { animation: none; }
}

/* Abaixo de 1280 a foto é cortada nas laterais para cobrir os 948 de altura e
   o gradiente que vem na imagem sai do quadro: reaplica os dois gradientes do
   Figma por CSS para o texto manter o contraste (sem desenho nessa faixa). */
@media (min-width: 769px) and (max-width: 1280px) {
  .home .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(178.89deg, var(--color-preto-80) 4.75%, transparent 22.36%),
      linear-gradient(65.33deg, var(--color-preto-80) 26.69%, transparent 62.05%);
  }
}

/* --- Mobile (Figma 2699:41547) --------------------------------------------
   Foto com a proporção do frame (390×634, limitada em telas maiores); o
   texto começa 192 acima do fim da foto e termina a 64 do fundo. */
@media (max-width: 768px) {
  .home .hero {
    --hero-foto-altura: min(calc(100vw * 634 / 390), 820px);
    min-height: 0;
    justify-content: flex-end;
    padding-top: calc(var(--hero-foto-altura) - var(--space-96) * 2);
    padding-bottom: var(--space-64);
  }
  .home .hero__image {
    bottom: auto;
    height: var(--hero-foto-altura);
  }
  .home .hero__image-foto { object-position: 50% 50%; }
  .home .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(-3.63deg, var(--color-preto-80) 16.66%, transparent 47.85%),
      linear-gradient(176.37deg, var(--color-preto-80) 4.75%, transparent 22.36%);
  }

  .home .hero__texto,
  .home .hero__titulos { gap: var(--space-28); }
  .home .hero__h1 {
    max-width: none;
    font-size: var(--fs-h1);
  }
  .home .hero__subtitulo { max-width: none; }
  .home .hero__botoes { flex-direction: column; }
  .home .hero__botoes .botao { width: 100%; }
}

/* ==========================================================================
   HOME — 02 ÁREAS DE ATUAÇÃO · Variante E (cards empilhados)
   Figma 2699:38062 (desktop) / 2699:41573 (mobile)
   Caixa creme (radius 32) com 24 de respiro branco em volta; conteúdo em
   1280. Pilha (só desktop): cada card é sticky em 120 + 24 × posição
   (spec 7.6) — o de cima cobre o anterior e deixa 24 dele à mostra; o
   main.js recua (escala) os que vão ficando por baixo. Tablet e mobile:
   cards em lista comum, sem empilhamento (pedido do responsável).
   Layout do card pela largura da pilha (container query):
     > 1100 linha (desktop) · 641–1100 grade (tablet) · ≤ 640 coluna (mobile)
   ========================================================================== */
.home .areas { padding: var(--space-24); }

.home .areas__container {
  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);
  border-radius: var(--radius-32);
}

/* --- Cabeçalho -------------------------------------------------------------- */
.home .areas__container-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20) var(--space-40);
}
.home .areas__cabecalho-titulo {
  max-width: 758px;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.home .areas__cabecalho-h2 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.home .areas__cabecalho-texto {
  max-width: 413px;
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}

/* --- Pilha ------------------------------------------------------------------ */
.home .areas__pilha {
  --pilha-topo: var(--space-120);
  --pilha-passo: var(--space-24);
  container: areas-pilha / inline-size;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.home .areas__pilha-card-area {
  --pilha-i: 0;
  position: sticky;
  top: calc(var(--pilha-topo) + var(--pilha-passo) * var(--pilha-i));
  transform-origin: center top;
  display: flex;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-24) var(--space-48) var(--space-24) var(--space-24);
  background: var(--color-branco);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-20);
}
.home .areas__pilha-card-area:nth-child(2) { --pilha-i: 1; }
.home .areas__pilha-card-area:nth-child(3) { --pilha-i: 2; }
.home .areas__pilha-card-area:nth-child(4) { --pilha-i: 3; }

/* Imagem 340×260 (o arquivo já traz os cantos arredondados; o radius do
   slot garante o recorte quando a proporção muda) */
.home .areas__card-imagem {
  flex: 0 0 340px;
  height: 260px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.home .areas__card-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto */
.home .areas__card-texto {
  flex: 0 1 319px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}
.home .areas__card-icone {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  color: var(--color-texto);
}
.home .areas__card-titulo {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.home .areas__card-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
/* no Figma só a descrição do Trabalhista tem largura própria (288), o que
   define as quebras de linha dela */
.home .areas__pilha-card-area-direito-trabalhista .home .areas__card-descricao { max-width: 288px; }

/* Lateral: palavras-chave (2 × 2) + "Saber mais" */
.home .areas__card-lateral {
  flex: 0 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}
.home .areas__card-palavras-chave {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* 1ª coluna com metade da largura, ou mais se a palavra pedir (Civil: 217) */
  grid-template-columns: minmax(calc((100% - var(--space-24)) / 2), max-content) minmax(0, 1fr);
  gap: var(--space-16) var(--space-24);
}
.home .areas__linha-palavra-chave {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto);
  white-space: nowrap; /* como no Figma: a palavra não quebra */
}
.home .areas__palavra-marcador {
  flex: none;
  width: 5px;
  height: 5px;
  /* centrado na 1ª linha (a palavra pode quebrar no tablet) */
  margin-top: calc((var(--fs-16) * var(--lh-text) - 5px) / 2);
  border-radius: var(--radius-pill);
  background: var(--color-preto-01);
}

/* --- Nota ---------------------------------------------------------------------- */
.home .areas__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  color: var(--color-texto);
}
.home .areas__nota-icone {
  flex: none;
  display: flex;
}
.home .areas__nota-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}
.home .areas__nota-frase {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
}

/* --- Card: tablet (pilha entre 641 e 1100) ------------------------------------
   Sem desenho no Figma: imagem à esquerda ocupando a altura; texto e lateral
   empilhados à direita. */
@container areas-pilha (max-width: 1100px) {
  .home .areas__pilha-card-area {
    position: static; /* empilhamento só no desktop */
    display: grid;
    grid-template-columns: minmax(200px, 34%) minmax(0, 1fr);
    grid-template-areas:
      "imagem texto"
      "imagem lateral";
    align-items: start;
    gap: var(--space-24) var(--space-32);
    padding: var(--space-24);
  }
  .home .areas__card-imagem {
    grid-area: imagem;
    align-self: stretch;
    height: auto;
    min-height: 260px;
  }
  .home .areas__card-texto { grid-area: texto; }
  .home .areas__card-lateral {
    grid-area: lateral;
    width: 100%;
  }
  .home .areas__linha-palavra-chave { white-space: normal; }
}

/* --- Card: mobile (pilha ≤ 640) — Figma 2699:41583 ----------------------------
   Coluna: imagem 260 de altura, texto, palavras em lista, CTA na largura. */
@container areas-pilha (max-width: 640px) {
  .home .areas__pilha-card-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
    padding: var(--space-16);
  }
  /* em coluna o flex-basis do desktop (319 / 400) viraria altura */
  .home .areas__card-imagem,
  .home .areas__card-texto,
  .home .areas__card-lateral { flex: none; }
  .home .areas__card-imagem {
    height: 260px;
    min-height: 0;
  }
  .home .areas__card-palavras-chave { grid-template-columns: minmax(0, 1fr); }
  .home .areas__card-cta { width: 100%; }
}

/* --- Seção: mobile — Figma 2699:41573 ---------------------------------------------- */
@media (max-width: 768px) {
  .home .areas { padding: var(--space-24) var(--space-12); }
  .home .areas__container {
    gap: var(--space-40);
    padding: var(--space-64) var(--space-20);
  }
  .home .areas__container-cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .home .areas__cabecalho-h2 { font-size: var(--fs-32); }
  .home .areas__cabecalho-texto { max-width: none; }

  /* Nota vira card: ícone em quadro dourado + texto e link empilhados */
  .home .areas__nota {
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-14);
    padding: var(--space-20);
    background: var(--color-branco);
    border: 1px solid var(--color-borda-clara);
    border-radius: var(--radius-md);
  }
  .home .areas__nota-icone {
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--color-dourado-01);
    border-radius: var(--radius-sm);
    color: var(--color-preto-02);
  }
  .home .areas__nota-texto {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   HOME — 03 SOBRE O ESCRITÓRIO
   Figma 2699:38172 (desktop) / 2699:41685 (mobile)
   Fundo #FAFAFA; título + texto lado a lado; 3 indicadores com divisória.
   Tablet (sem desenho): texto empilha em ≤ 900 e o número fica sobre a
   legenda nos indicadores (3 colunas) em ≤ 1100.
   ========================================================================== */
.sobre {
  padding-block: var(--space-120);
  background: var(--color-fundo-alternativo);
}
.sobre__conteudo {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-64) + var(--space-8));
}

/* --- Texto ------------------------------------------------------------------ */
.sobre__texto {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}
.sobre__titulos {
  flex: 0 1 630px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.sobre__h2 {
  max-width: 497px;
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.sobre__coluna-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-28);
  padding-top: var(--space-48);
}
.sobre__descricao {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.sobre__link { color: var(--color-texto); }

/* --- Indicadores ------------------------------------------------------------ */
.sobre__indicadores {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}
.sobre__indicador {
  min-height: 157px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  padding: var(--space-8);
}
.sobre__indicador + .sobre__indicador { border-left: 1px solid var(--color-borda-clara); }
/* 1º indicador alinhado à esquerda, a 76 da borda: no Figma ele começa com uma
   camada "estrela" de 28 vazia (sem desenho) + 28 de gap */
.sobre__indicador--avaliacao {
  justify-content: flex-start;
  padding-left: calc(var(--space-20) + var(--space-56));
  gap: var(--space-28);
}
.sobre__indicador-numero {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  font-size: var(--fs-56);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-dourado-02);
  white-space: nowrap;
}
.sobre__indicador-sinal { color: var(--color-texto-secundario); }
.sobre__indicador-texto {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
  white-space: nowrap;
}

/* --- Tablet: indicadores com número sobre a legenda ------------------------ */
@media (max-width: 1100px) {
  .sobre__indicador,
  .sobre__indicador--avaliacao {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* números alinhados entre si */
    gap: var(--space-16);
    padding: var(--space-20) var(--space-24);
  }
  .sobre__quebra { display: none; }
  .sobre__indicador-texto { white-space: normal; }
}

/* --- Tablet: texto empilhado ------------------------------------------------ */
@media (max-width: 900px) {
  .sobre__texto { flex-direction: column; }
  .sobre__titulos { flex: none; width: 100%; }
  .sobre__h2 { max-width: none; }
  .sobre__coluna-texto {
    flex: none;
    width: 100%;
    padding-top: var(--space-32);
  }
}

/* --- Mobile — Figma 2699:41685 --------------------------------------------
   Indicadores em lista: linha no topo de cada um, número 40, legenda em 1 linha. */
@media (max-width: 768px) {
  .sobre { padding-block: var(--space-64); }
  .sobre__conteudo { gap: var(--space-40); }
  .sobre__h2 { font-size: var(--fs-32); }
  .sobre__indicadores {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .sobre__indicador,
  .sobre__indicador--avaliacao {
    min-height: 0;
    padding: var(--space-20) 0;
    border-top: 1px solid var(--color-borda-clara);
  }
  .sobre__indicador + .sobre__indicador { border-left: 0; }
  .sobre__indicador-numero {
    gap: var(--space-6);
    font-size: var(--fs-40);
  }
}

/* ==========================================================================
   HOME — 04 PROCESSO · Variante B escura (lista + imagem)
   Figma 2699:38196 (desktop) / 2699:41710 (mobile)
   Caixa Preto 02 (radius 32, 24 de respiro branco); linha do tempo de 4
   etapas à esquerda e composição (foto + card "Tem pressa?") à direita.
   Etapa ativa (Figma: processo__etapa-icone--ativa): quadro branco e ícone
   Dourado escuro. A 1ª já vem ativa (como no Figma); ao rolar, o main.js
   preenche o trilho de dourado (--progresso 0 → 1) e ativa cada etapa quando
   o preenchimento chega nela.
   ========================================================================== */
.processo { padding: var(--space-24); }

.processo__container {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding-block: var(--space-120);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  background: var(--color-preto-02);
  border-radius: var(--radius-32);
}

/* --- Conteúdo --------------------------------------------------------------- */
.processo__conteudo {
  flex: 0 1 630px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding-right: calc(var(--space-48) + 2px);
}
.processo__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
.processo__h2 {
  max-width: 442px;
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.processo__subtitulo {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Linha do tempo --------------------------------------------------------- */
.processo__linha-do-tempo {
  margin: 0;
  padding: 0;
  list-style: none;
}
.processo__linha-do-tempo-etapa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}
.processo__etapa-trilho {
  flex: none;
  width: 48px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.processo__etapa-icone {
  flex: none;
  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);
  transition: background-color .4s ease, color .4s ease;
}
.processo__etapa-icone--ativa {
  background: var(--color-branco);
  color: var(--color-dourado-escuro);
}
/* Trilho: linha Preto 03 com o preenchimento dourado por cima */
.processo__trilho-linha {
  --progresso: 0;
  position: relative;
  flex: 1 1 auto;
  width: 1px;
  min-height: 1px;
  background: var(--color-preto-03);
}
.processo__trilho-linha::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-dourado-01);
  transform: scaleY(var(--progresso));
  transform-origin: center top;
}

.processo__etapa-texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: 2px 0 var(--space-40);
}
.processo__linha-do-tempo-etapa:last-child .processo__etapa-texto { padding-bottom: 0; }
.processo__etapa-rotulo {
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--ls-label-12);
  text-transform: uppercase;
  color: var(--color-dourado-02);
  text-box: trim-both cap alphabetic;
}
.processo__etapa-titulo {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.processo__etapa-descricao {
  max-width: 451px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}

/* --- Composição: foto + card "Tem pressa?" ---------------------------------- */
.processo__composicao {
  position: relative;
  flex: 0 1 630px;
  min-width: 0;
  height: 760px;
}
.processo__imagem {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(var(--space-28) + 2px); /* foto 600 a 30 da borda; o card sobrepõe */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.processo__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.processo__composicao-card-tem-pressa {
  position: absolute;
  left: 0;
  top: 489px;
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-28);
  background: var(--color-branco);
  border-radius: var(--radius-20);
  box-shadow: var(--shadow-card-tem-pressa);
}
.processo__card-topo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.processo__card-icone {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-preto-03);
  color: var(--color-dourado-01);
}
.processo__icone-clock { width: 22px; height: 22px; }
.processo__card-titulo {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.processo__card-texto {
  max-width: 254px;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.processo__card-cta { width: 100%; }
.processo__card-cta .botao__icone { width: 20px; height: 20px; }

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

/* --- Tablet (sem desenho): conteúdo em cima, composição embaixo ------------- */
@media (max-width: 1100px) {
  .processo__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-56);
  }
  .processo__conteudo {
    flex: none;
    padding-right: 0;
  }
  .processo__composicao {
    flex: none;
    width: 100%;
    max-width: 760px;
    height: 640px;
    margin-inline: auto;
  }
  .processo__composicao-card-tem-pressa {
    top: auto;
    bottom: var(--space-40);
  }
}

/* --- Mobile — Figma 2699:41710 ----------------------------------------------
   Coluna: foto de 300 de altura e o card embaixo dela (sem sobreposição). */
@media (max-width: 768px) {
  .processo { padding: var(--space-24) var(--space-12); }
  .processo__container {
    gap: var(--space-40);
    padding: var(--space-64) var(--space-20) var(--space-20);
  }
  .processo__conteudo { gap: var(--space-32); }
  .processo__h2 {
    max-width: none;
    font-size: var(--fs-32);
  }
  .processo__etapa-descricao { max-width: none; }
}

/* ≤ 768: foto e o card embaixo (frame mobile). No celular (≤ 560) a foto tem 300
   de altura; de 561 a 768 ela fica em 4:3 — a faixa de 300 esticada cortava a
   foto (pedido do responsável). */
@media (max-width: 768px) {
  .processo__composicao {
    height: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
  }
  .processo__imagem {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .processo__imagem img { object-position: 50% 62%; }
  .processo__composicao-card-tem-pressa {
    position: static;
    width: auto;
    padding: var(--space-28) var(--space-24);
    box-shadow: none;
  }
}
@media (max-width: 560px) {
  .processo__imagem {
    height: 300px;
    aspect-ratio: auto;
  }
  .processo__imagem img { object-position: 50% 55%; }
}
/* Tablet estreito: título em cima; descrição e botão (no tamanho do texto) lado a lado */
@media (min-width: 561px) and (max-width: 768px) {
  .processo__composicao-card-tem-pressa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "topo topo"
      "texto cta";
    align-items: center;
    gap: var(--space-20) var(--space-32);
  }
  .processo__card-topo { grid-area: topo; }
  .processo__card-texto { grid-area: texto; }
  .processo__card-cta {
    grid-area: cta;
    width: auto;
  }
}

/* ==========================================================================
   HOME — 05 FUNDADOR · Variante enxuta
   Figma 2699:38250 (desktop) / 2699:41764 (mobile)
   Retrato 560×640 com o card de credencial sobreposto (295, 502); texto à
   direita com 70 de recuo. Tablet (sem desenho): composição em cima, texto
   embaixo. Mobile: retrato de 300 e o card abaixo dele (sem sobreposição).
   ========================================================================== */
.fundador {
  padding-block: var(--space-120);
  background: var(--color-branco);
}
.fundador__grid {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

/* --- Composição -------------------------------------------------------------- */
.fundador__composicao {
  position: relative;
  flex: 0 1 630px;
  min-width: 0;
  height: 640px;
}
.fundador__retrato {
  position: absolute;
  top: 0;
  left: 0;
  width: min(560px, 100%);
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fundador__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fundador__composicao-card-credencial {
  position: absolute;
  top: 502px;
  left: 295px;
  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: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-20);
  box-shadow: var(--shadow-card-credencial);
}
.fundador__credencial-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);
}
.fundador__icone-shield { width: 24px; height: 24px; }
.fundador__credencial-texto {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  white-space: nowrap;
}
.fundador__credencial-nome {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
  color: var(--color-texto);
  text-box: trim-both cap alphabetic;
}
.fundador__credencial-cargo {
  font-size: var(--fs-14);
  line-height: 1;
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic;
}

/* --- Conteúdo ------------------------------------------------------------------ */
.fundador__conteudo {
  flex: 0 1 630px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding-left: calc(var(--space-64) + var(--space-6));
}
.fundador__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.fundador__h2 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.fundador__texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.fundador__texto p { margin: 0; }
.fundador__texto-final { max-width: 467px; }

/* Secundário claro: contorno Texto principal, fundo branco, 58 de altura */
.fundador__link-sobre {
  padding-block: var(--space-16);
  background: var(--color-branco);
  color: var(--color-texto);
}
.fundador__link-sobre:hover { background: var(--color-branco); }

/* --- Tablet (sem desenho): composição em cima, texto embaixo --------------- */
@media (max-width: 1100px) {
  .fundador__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-56);
  }
  .fundador__composicao {
    flex: none;
    width: 100%;
    max-width: 630px;
    margin-inline: auto;
  }
  .fundador__composicao-card-credencial {
    top: auto;
    left: auto;
    right: 0;
    bottom: var(--space-40);
  }
  .fundador__conteudo {
    flex: none;
    padding-left: 0;
  }
}

/* --- Mobile — Figma 2699:41764 ------------------------------------------------ */
@media (max-width: 768px) {
  .fundador { padding-block: var(--space-64); }
  .fundador__grid { gap: var(--space-40); }
  .fundador__conteudo { gap: var(--space-28); }
  .fundador__h2 { font-size: var(--fs-32); }
  .fundador__texto-final { max-width: none; }
}

/* Celular (≤ 560): retrato de 300 e o card abaixo (frame mobile). De 561 a 768
   segue a composição do tablet (retrato inteiro + card sobreposto). */
@media (max-width: 560px) {
  .fundador__composicao {
    height: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
  }
  .fundador__retrato {
    position: static;
    width: 100%;
    height: 300px;
  }
  .fundador__retrato img { object-position: 50% 34%; }
  .fundador__composicao-card-credencial {
    position: static;
    padding: var(--space-20) var(--space-24);
    box-shadow: none;
  }
  /* em 320 "Sócio fundador · OAB/MG 230.323" passava da tela: pode quebrar */
  .fundador__credencial-texto {
    min-width: 0;
    white-space: normal;
  }
  .fundador__link-sobre { width: 100%; }
}

/* ==========================================================================
   HOME — 06 POR QUE NOS ESCOLHER (cards com imagem central)
   Figma 2699:38270 (desktop) / 2699:41784 (mobile)
   Caixa creme (radius 32, 24 de respiro branco); cabeçalho centralizado;
   grade de 580: 2 cards | imagem 413 | 2 cards (cada card com metade da
   altura, ícone no topo e texto no pé).
   Tablet (sem desenho): imagem em faixa no topo e os dois pares de cards
   lado a lado. Mobile: tudo empilhado (imagem de 360 entre os pares).
   ========================================================================== */
.diferenciais { padding: var(--space-24); }

.diferenciais__container {
  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);
  border-radius: var(--radius-32);
}

.diferenciais__container-cabecalho--centralizado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  text-align: center;
}
.diferenciais__h2 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}

/* --- Grade ------------------------------------------------------------------ */
.diferenciais__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 413px minmax(0, 1fr);
  grid-template-areas: "esquerda imagem direita";
  gap: var(--space-20);
  height: 580px;
}
.diferenciais__grid-coluna-esquerda { grid-area: esquerda; }
.diferenciais__grid-coluna-direita { grid-area: direita; }
.diferenciais__grid-coluna-imagem { grid-area: imagem; }
.diferenciais__grid-coluna-esquerda,
.diferenciais__grid-coluna-direita {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-height: 0;
}

.diferenciais__imagem {
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.diferenciais__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Card -------------------------------------------------------------------- */
.diferenciais__card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-32);
  background: var(--color-branco);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-20);
}
/* Quadro do ícone: o Figma usa #B59668 (fora dos Color Styles); aplicado o
   token mais próximo, Dourado 01 (#B8986A) */
.diferenciais__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-preto-02);
}
.diferenciais__card-icone .ico { width: 24px; height: 24px; }
.diferenciais__card-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.diferenciais__card-titulo {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.diferenciais__card-descricao {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
/* larguras de texto dos cards da esquerda no Figma (definem as quebras) */
.diferenciais__coluna-esquerda-card-atendimento .diferenciais__card-descricao { max-width: 322px; }
.diferenciais__coluna-esquerda-card-linguagem-clara .diferenciais__card-descricao { max-width: 308px; }

/* --- Tablet (sem desenho) ---------------------------------------------------- */
@media (max-width: 1100px) {
  /* as colunas somem da grade (contents) para os 4 cards ficarem em linhas
     de mesma altura: imagem na 1ª linha, cards 2 × 2 abaixo */
  .diferenciais__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
    height: auto;
  }
  .diferenciais__grid-coluna-esquerda,
  .diferenciais__grid-coluna-direita { display: contents; }
  .diferenciais__grid-coluna-imagem { grid-area: 1 / 1 / 2 / 3; }
  .diferenciais__grid-coluna-esquerda > :nth-child(1) { grid-area: 2 / 1; }
  .diferenciais__grid-coluna-esquerda > :nth-child(2) { grid-area: 3 / 1; }
  .diferenciais__grid-coluna-direita > :nth-child(1) { grid-area: 2 / 2; }
  .diferenciais__grid-coluna-direita > :nth-child(2) { grid-area: 3 / 2; }
  .diferenciais__imagem { height: 360px; }
  .diferenciais__imagem img { object-position: 50% 22%; } /* faixa larga: rostos no quadro */
  .diferenciais__card { flex: none; }
}

/* --- Mobile — Figma 2699:41784 ------------------------------------------------- */
@media (max-width: 768px) {
  .diferenciais { padding: var(--space-24) var(--space-12); }
  .diferenciais__container {
    gap: var(--space-40);
    padding: var(--space-64) var(--space-20);
  }
  .diferenciais__h2 { font-size: var(--fs-32); }
  .diferenciais__card {
    flex: none;
    justify-content: flex-start;
    padding: var(--space-32) var(--space-24);
  }
  .diferenciais__card-descricao { max-width: none; }
  .diferenciais__coluna-esquerda-card-atendimento .diferenciais__card-descricao,
  .diferenciais__coluna-esquerda-card-linguagem-clara .diferenciais__card-descricao { max-width: none; }
}

/* Celular (≤ 560): tudo empilhado com a imagem entre os pares (frame mobile).
   De 561 a 768 segue o tablet: imagem em faixa no topo e cards 2 × 2. */
@media (max-width: 560px) {
  .diferenciais__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "esquerda"
      "imagem"
      "direita";
  }
  .diferenciais__grid-coluna-esquerda,
  .diferenciais__grid-coluna-direita { display: flex; }
  .diferenciais__grid-coluna-imagem { grid-area: imagem; }
  .diferenciais__imagem img { object-position: 50% 50%; }
  /* imagem com 16 de recuo nas laterais, como no frame */
  .diferenciais__grid-coluna-imagem { padding-inline: var(--space-16); }
}

/* ==========================================================================
   DEPOIMENTOS (carrossel) — Home › 07 e LPs
   Figma 2699:38306 (desktop) / 2699:41820 (mobile)
   Cabeçalho com selo Google; faixa horizontal de cards (413 × 330, gap 20)
   que sangra até a borda direita da tela — o 4º card fica "vazando" (spec
   7.1). Deslocamento por scroll-snap; setas e barra de progresso no main.js.
   ========================================================================== */
.depoimentos {
  padding-block: var(--space-120);
  background: var(--color-branco);
}
.depoimentos__conteudo {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

/* --- Cabeçalho --------------------------------------------------------------- */
.depoimentos__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20) var(--space-40);
}
.depoimentos__cabecalho-titulo {
  max-width: 758px;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.depoimentos__h2 {
  max-width: 557px;
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}

/* Selo de avaliação Google */
.depoimentos__container-01 {
  width: 234px; /* largura fixa no Figma (2699:38313) */
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) 7px;
  background: var(--color-creme);
  border-radius: var(--radius-pill);
}
.depoimentos__container-01-badge {
  width: 68px; /* Figma 2699:38314 */
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 3px var(--space-4);
  background: var(--color-branco);
  border-radius: var(--radius-pill);
}
.depoimentos__badge-container { width: 17px; height: 17.363px; }
.depoimentos__badge-label {
  font-size: var(--fs-14);
  line-height: 1;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.depoimentos__badge-nota { color: var(--color-selo-nota); }
.depoimentos__badge-escala { color: var(--color-selo-escala); }
.depoimentos__text {
  font-size: var(--fs-12);
  line-height: 1;
  color: var(--color-texto);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

/* --- Faixa do carrossel ------------------------------------------------------ */
/* janela sangra até a borda direita da viewport */
.depoimentos__carrossel-janela { margin-right: calc(50% - 50vw); }
.depoimentos__carrossel {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-20);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.depoimentos__carrossel::-webkit-scrollbar { display: none; }
.depoimentos__carrossel:focus-visible { outline-offset: var(--space-4); }

/* --- Card ----------------------------------------------------------------------- */
.depoimentos__carrossel-card-depoimento {
  flex: 0 0 413px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-32) var(--space-32) var(--space-28);
  background: var(--color-branco);
  border: 1px solid var(--color-borda-suave);
  border-radius: var(--radius-20);
  scroll-snap-align: start;
}
.depoimentos__depoimento-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
}
.depoimentos__depoimento-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.depoimentos__topo-estrelas {
  display: flex;
  gap: var(--space-4);
  color: var(--color-estrela);
}
.depoimentos__topo-fonte-google { width: 24px; height: 24px; }
.depoimentos__depoimento-texto {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-preto-02);
}
.depoimentos__depoimento-texto p { margin: 0; }

.depoimentos__depoimento-autor {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-borda-suave);
}
.depoimentos__autor-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-creme);
  overflow: hidden;
}
.depoimentos__autor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.depoimentos__avatar-iniciais {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
}
.depoimentos__autor-texto {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.depoimentos__autor-nome {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-text); /* linha inteira (24) — Figma: 7 dos 9 cards da Home e todos da LP */
  color: var(--color-texto);
}
.depoimentos__autor-origem {
  font-size: var(--fs-14);
  line-height: 1;
  color: var(--color-texto-secundario);
  text-box: trim-both cap alphabetic;
}

/* --- Controles: barra de progresso + setas ------------------------------------- */
.depoimentos__controles {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.depoimentos__controles-progresso {
  position: relative;
  flex: 1 1 0;
  height: 2px;
  background: color-mix(in srgb, var(--color-borda-clara) 50%, transparent);
}
.depoimentos__progresso-atual {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progresso, 33.333%);
  background: var(--color-dourado-01);
  transition: width .3s ease;
}
.depoimentos__controles-navegacao {
  display: flex;
  gap: var(--space-12);
}
.depoimentos__navegacao-anterior,
.depoimentos__navegacao-proximo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}
.depoimentos__navegacao-anterior {
  background: var(--color-branco);
  border: 1px solid var(--color-borda-clara);
  color: var(--color-dourado-escuro);
}
.depoimentos__navegacao-proximo {
  background: var(--color-dourado-01);
  color: var(--color-preto-03);
}
.depoimentos__navegacao-proximo-icone-arrow { width: 18px; height: 18px; }

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

/* --- Mobile — Figma 2699:41820 ---------------------------------------------------
   Cards de 300 × 426 com 12 de vão (o seguinte aparece na borda). */
@media (max-width: 768px) {
  .depoimentos { padding-block: var(--space-64); }
  .depoimentos__conteudo { gap: var(--space-32); }
  .depoimentos__cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  .depoimentos__h2 {
    max-width: none;
    font-size: var(--fs-32);
  }
  .depoimentos__carrossel { gap: var(--space-12); }
  .depoimentos__carrossel-card-depoimento {
    flex-basis: 300px;
    min-height: 426px;
    padding: var(--space-32) var(--space-24) var(--space-40);
  }
}

/* ==========================================================================
   PERGUNTAS FREQUENTES — Home › 08 e LPs
   Figma 2699:38672 (desktop) / 2699:42186 (mobile)
   Fundo creme; lateral 413 (título + card "Ainda com dúvidas?") e lista
   634, nas bordas do container. Pergunta aberta: borda Dourado 01, toggle
   Dourado 02 com o "+" girado 45° (vira "×").
   Abrir (main.js, um por vez): a altura cresce (grid 0fr → 1fr) e o texto
   da resposta sobe de 16 enquanto aparece.
   ========================================================================== */
.faq {
  /* embaixo: 170 até o card do CTA, que sobe sobre o fim desta seção (Figma) */
  padding-block: var(--space-80) calc(var(--space-120) + var(--space-48) + 2px);
  background: var(--color-creme);
}
.faq__grid {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 413px) minmax(0, 634px);
  justify-content: space-between;
  align-items: start;
  gap: var(--space-40);
}

/* --- Lateral ------------------------------------------------------------------ */
.faq__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-right: var(--space-40);
}
.faq__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.faq__h2 {
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-texto);
}
.faq__lateral-card-ainda-com-duvidas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-28) + 2px);
  padding: var(--space-28);
  background: var(--color-preto-02);
  border-radius: var(--radius-20);
}
.faq__card-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);
}
.faq__icone-chat { width: 24px; height: 24px; }
.faq__card-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.faq__card-titulo {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.faq__card-descricao {
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-creme);
}
.faq__card-ainda-com-duvidas-botao-primario-inverso { width: 100%; }
.faq__card-ainda-com-duvidas-botao-primario-inverso .botao__icone { width: 20px; height: 20px; }

/* --- Lista ----------------------------------------------------------------------- */
.faq__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.faq__lista-item {
  background: var(--color-branco);
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-md);
  transition: border-color .35s ease;
}
.faq__lista-item--aberto { border-color: var(--color-dourado-01); }

.faq__item-titulo { margin: 0; }
.faq__item-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-24) var(--space-24) var(--space-28);
  text-align: left;
  font-size: var(--fs-text-1);
  font-weight: 500;
  line-height: var(--lh-text);
  color: var(--color-texto);
  border-radius: var(--radius-md);
}
.faq__item-texto { flex: 1 1 0; min-width: 0; }
.faq__item-toggle {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-borda-clara);
  border-radius: var(--radius-pill);
  color: var(--color-preto-03);
  transition: background-color .35s ease, border-color .35s ease;
}
.faq__toggle-icone-plus { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.faq__lista-item--aberto .faq__item-toggle {
  background: var(--color-dourado-02);
  border-color: var(--color-dourado-02);
}
.faq__lista-item--aberto .faq__toggle-icone-plus { transform: rotate(45deg); }

/* Resposta: altura 0 → conteúdo; o texto sobe enquanto aparece */
.faq__item-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}
.faq__lista-item--aberto .faq__item-resposta { grid-template-rows: 1fr; }
.faq__resposta-conteudo {
  min-height: 0;
  overflow: hidden;
}
.faq__resposta-texto {
  /* 20 entre a pergunta e a resposta (o padding de baixo da pergunta vira o vão) */
  margin-top: calc(-1 * var(--space-4));
  padding: 0 calc(var(--space-56) + var(--space-24)) var(--space-24) var(--space-28);
  font-size: var(--fs-16);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario);
  opacity: 0;
  transform: translateY(var(--space-16));
  transition: opacity .25s ease, transform .25s ease;
}
.faq__lista-item--aberto .faq__resposta-texto {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .12s, transform .55s cubic-bezier(.22, 1, .36, 1) .12s;
}
.faq__resposta-texto p { margin: 0; }
.faq__resposta-texto p + p { margin-top: var(--space-12); }

@media (prefers-reduced-motion: reduce) {
  .faq__lista-item,
  .faq__item-toggle,
  .faq__toggle-icone-plus,
  .faq__item-resposta,
  .faq__resposta-texto { transition: none; }
  .faq__resposta-texto { transform: none; }
}

/* --- Tablet (sem desenho): lateral em cima, lista embaixo ------------------- */
@media (max-width: 1100px) {
  .faq__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }
  .faq__lateral { padding-right: 0; }
  .faq__lateral-card-ainda-com-duvidas { max-width: 634px; }
}

/* --- Mobile — Figma 2699:42186 ------------------------------------------------------ */
@media (max-width: 768px) {
  .faq { padding-block: var(--space-40) var(--space-64); }
  .faq__lateral { gap: var(--space-28); }
  .faq__titulos { gap: var(--space-20); }
  .faq__h2 { font-size: var(--fs-32); }
  .faq__lateral-card-ainda-com-duvidas { padding: var(--space-28) var(--space-24); }
  .faq__card-titulo { font-size: var(--fs-20); }
  .faq__card-descricao { font-size: var(--fs-16); }
  .faq__item-pergunta {
    padding: var(--space-24);
    font-size: var(--fs-16);
  }
  .faq__resposta-texto { padding: 0 var(--space-24) var(--space-24); }
}

/* ==========================================================================
   HOME — 09 CTA FINAL  (escopo .home: as LPs têm o próprio block `cta` — style-pages.css)
   Figma 2699:38720 (desktop) / 2699:42234 (mobile)
   Card Preto 02 (1280 × 584, radius 32, padding 72) que sobe sobre o fim do
   FAQ: o fundo da seção é creme nos primeiros 400 (489 no mobile) e branco
   depois — o mesmo corte do Figma. Texto à esquerda; mapa do Google
   (480 × 440) à direita, com o pino de fundo enquanto o mapa carrega.
   ========================================================================== */
.home .cta {
  --cta-faixa: 400px;
  padding-bottom: var(--space-120);
  background: linear-gradient(to bottom, var(--color-creme) var(--cta-faixa), var(--color-branco) var(--cta-faixa));
}
.home .cta__card {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-80);
  padding: calc(var(--space-64) + var(--space-8));
  background: var(--color-preto-02);
  border-radius: var(--radius-32);
}

/* --- Texto ------------------------------------------------------------------- */
.home .cta__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.home .cta__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.home .cta__h2 {
  max-width: 514px;
  margin: 0;
  font-size: var(--fs-48);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-branco);
}
.home .cta__subtitulo {
  max-width: 401px;
  margin: 0;
  font-size: var(--fs-text-1);
  line-height: var(--lh-text);
  color: var(--color-texto-secundario-escuro);
}
.home .cta__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}
.home .cta__botoes-botao-primario-inverso .botao__icone { width: 20px; height: 20px; }
/* Secundário no escuro: contorno Dourado 01, texto branco, 58 de altura */
.home .cta__botoes-botao-secundario-inverso {
  padding-block: var(--space-16);
  border-color: var(--color-dourado-01);
  color: var(--color-branco);
}

.home .cta__meta {
  margin: 0;
  padding: var(--space-28) 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  border-top: 1px solid var(--color-preto-03);
}
.home .cta__meta-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  color: var(--color-branco);
}
.home .cta__meta-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-text);
  color: var(--color-branco);
  /* alinha a 1ª linha (21) ao ícone (18), como o text-box-trim do Figma */
  margin-top: calc((18px - var(--fs-14) * var(--lh-text)) / 2);
}

/* --- Mapa ---------------------------------------------------------------------- */
.home .cta__mapa {
  position: relative;
  flex: 0 0 480px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-branco);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.home .cta__mapa-icone-pin {
  width: 40px;
  height: 40px;
  color: var(--color-borda-clara);
}
.home .cta__mapa-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Desktop: no Figma o bloco de endereço/e-mail tem altura fixa de 50 e o
   e-mail transborda — é o mapa (440) que define a altura do card (584) */
@media (min-width: 1101px) {
  .home .cta__meta { height: 50px; }
}

/* --- Tablet (sem desenho): mapa embaixo do texto ---------------------------- */
@media (max-width: 1100px) {
  .home .cta__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
    padding: var(--space-56) var(--space-48);
  }
  .home .cta__mapa {
    flex: none;
    height: 360px;
  }
}

/* --- Mobile — Figma 2699:42234 ---------------------------------------------------- */
@media (max-width: 768px) {
  .home .cta {
    --cta-faixa: 489px;
    padding-bottom: var(--space-64);
  }
  .home .cta__card {
    gap: var(--space-32);
    padding: var(--space-40) var(--space-24);
  }
  .home .cta__texto { gap: var(--space-28); }
  .home .cta__h2 {
    max-width: none;
    font-size: var(--fs-32);
  }
  .home .cta__subtitulo { max-width: none; }
  .home .cta__meta { gap: var(--space-32); }
  .home .cta__mapa { height: 300px; }
}

/* ==========================================================================
   HOME — TABLET ESTREITO (561–768) — pedido do responsável, 2026-10-06
   O frame mobile (390) esticado até 768 deixava botões na largura toda e
   fotos cortadas. Nesta faixa: botões no tamanho do texto, fotos com a
   composição do tablet, títulos com quebra equilibrada.
   ========================================================================== */
@media (max-width: 1100px) {
  .home h2 { text-wrap: balance; }
  .faq__lateral-card-ainda-com-duvidas { max-width: none; }
}
@media (min-width: 561px) and (max-width: 768px) {
  /* Hero: os dois botões lado a lado, no tamanho do texto */
  .home .hero__botoes {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home .hero__botoes .botao { width: auto; }

}
/* FAQ: card "Ainda com dúvidas?" na largura, botão no tamanho do texto (561–1100) */
@media (min-width: 561px) and (max-width: 1100px) {
  .faq__card-ainda-com-duvidas-botao-primario-inverso { width: auto; }
}

/* Áreas: pilha estreita (641–900) — imagem inteira em cima, texto e palavras
   embaixo (ao lado do texto a imagem virava uma faixa vertical cortada) */
@container areas-pilha (min-width: 641px) and (max-width: 900px) {
  .home .areas__pilha-card-area {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "imagem"
      "texto"
      "lateral";
  }
  .home .areas__card-imagem {
    align-self: auto;
    min-height: 0;
    height: auto;
    width: 100%;
    aspect-ratio: 680 / 520;
    max-height: 400px;
  }
}

/* CTA final: botões empilhados na largura só no celular (≤ 560); de 561 a 768
   lado a lado, no tamanho do texto */
@media (max-width: 560px) {
  .home .cta__botoes { flex-direction: column; }
  .home .cta__botoes .botao { width: 100%; }
}

/* Rodapé do site: de 701 a 900 as 3 colunas (Navegação, Atuações, Atendimento)
   lado a lado; ≤ 700 o Atendimento desce (arranjo do mobile). */
@media (min-width: 701px) and (max-width: 900px) {
  .rodape__topo-colunas-links { display: contents; }
  .rodape__topo {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: var(--space-40) var(--space-32);
  }
  .rodape__marca { grid-column: 1 / -1; }
  .rodape__topo-coluna-navegacao,
  .rodape__topo-coluna-atuacoes { flex: none; }
}

/* Rodapé das LPs, 561–768: contatos seguem em linha com quebra (como no tablet);
   coluna (frame mobile) só ≤ 560 */
@media (min-width: 561px) and (max-width: 768px) {
  .rodape-lp__topo {
    flex-direction: row;
    gap: var(--space-32);
  }
  .rodape-lp__contato--endereco { max-width: 340px; }
  /* LGPD numa linha própria (com 290 a Política subia para o lado dela) */
  .rodape-lp__base-texto { max-width: none; }
}
@media (max-width: 560px) {
  .rodape-lp__contato--endereco { flex: none; } /* em coluna a base de 220 viraria altura */
}

/* FAQ da Home, 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) {
  .home .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);
  }
  .home .faq__card-icone { grid-area: icone; margin-bottom: var(--space-12); }
  .home .faq__card-texto { display: contents; }
  .home .faq__card-titulo { grid-area: titulo; }
  .home .faq__card-descricao { grid-area: texto; max-width: 520px; }
  .home .faq__card-ainda-com-duvidas-botao-primario-inverso { grid-area: botao; width: auto; }
}

/* Home — hero no tablet com foto própria (561–1100, hero-tablet.webp 820 × 873,
   2026-10-06): foto inteira no topo e o texto sobre a parte de baixo */
@media (min-width: 561px) and (max-width: 1100px) {
  .home .hero {
    --hero-tablet-altura: calc(100vw * 873 / 820);
    min-height: var(--hero-tablet-altura);
    justify-content: flex-end;
    padding-top: calc(var(--hero-tablet-altura) * .45);
    padding-bottom: var(--space-64);
  }
  .home .hero__image { bottom: auto; height: var(--hero-tablet-altura); }
  .home .hero__image-foto { height: 100%; object-position: 50% 0; }
  .home .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, transparent 70%, var(--color-preto-01) 100%);
  }
}
/* H1 da Home no tablet em 56 (o das LPs), como no frame do responsável: 2 linhas em 820 */
@media (min-width: 769px) and (max-width: 1100px) {
  .home .hero__texto { width: 100%; }
  .home .hero__h1 { font-size: var(--fs-56); max-width: 680px; }
}

/* Home — hero no celular com foto própria (≤ 560, hero-mobile-430.webp 430 × 948,
   fundo e escurecimento já na imagem, 2026-10-06) */
@media (max-width: 560px) {
  .home .hero {
    --hero-mobile-altura: calc(100vw * 948 / 430);
    min-height: var(--hero-mobile-altura);
  }
  .home .hero__image { bottom: auto; height: var(--hero-mobile-altura); }
  .home .hero__image-foto { height: 100%; object-position: 50% 0; }
  .home .hero__image::after {
    background-image: linear-gradient(180deg, transparent 85%, var(--color-preto-01) 100%);
  }
}