/* Estilo compartilhado por todas as páginas do site.
 *
 * TEMA CLARO, a pedido do dono (23/09/2026: "o fundo ficou feio escuro,
 * vamos mudar para branco"), com as cores do TEMA CLARO do portal InvestDock
 * (globals.css, [data-theme="light"]): fundo #f8fafc, texto slate-900, cartão
 * branco com borda e sombra leves, título em degradê grafite -> cinza.
 * A tipografia (Inter, tamanhos, pesos, espaçamento) é a MEDIDA no portal e
 * não mudou com o tema.
 *
 * As duas faixas que o wireframe pede "com fundo escuro" (destaque do
 * diagnóstico e chamada final) usam a classe .escuro, que REDEFINE as
 * variáveis abaixo -- os componentes só leem variável, nunca cor fixa, e por
 * isso funcionam igual nos dois fundos.
 *
 * Cores: paleta do Tailwind v4 (a do portal), convertida do oklch para hex.
 * Não são os hexadecimais clássicos do v3 (o indigo-600 do v4 é #4f39f6).
 */

/* Inter servida pelo próprio site (fontes/inter-latin.woff2, licença SIL OFL
   1.1): nenhuma visita dispara pedido ao Google. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══ Tokens ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --fundo: #f8fafc;              /* slate-50: fundo do tema claro do portal */
  --faixa-suave: #f1f5f9;        /* slate-100: barra de credibilidade */
  --texto: #0f172b;              /* slate-900 */
  --titulo: #0f172b;             /* slate-900 */
  --titulo-card: #1d293d;        /* slate-800 */
  --link: #45556c;               /* slate-600: links do topo */
  --link-forte: #0f172b;
  --apoio: #45556c;              /* slate-600: parágrafos */
  --rotulo: #62748e;             /* slate-500: rótulos e ícones em repouso */
  --destaque: #4f39f6;           /* indigo-600: ícone de seção, números-índice */
  --borda: rgba(15, 23, 42, 0.08);
  --borda-forte: rgba(15, 23, 42, 0.14);
  --card: #ffffff;
  --sombra-card: 0 8px 32px 0 rgba(15, 23, 42, 0.06);
  --campo: #ffffff;
  --etiqueta: #f8fafc;
  --degrade: linear-gradient(135deg, #0f172a 0%, #475569 100%);   /* .premium-gradient-text, claro */
  --topo: rgba(255, 255, 255, 0.85);
  --submenu: #ffffff;
  --secundario-fundo: #ffffff;
  --secundario-borda: #e2e8f0;   /* slate-200 */
  --secundario-texto: #314158;   /* slate-700 */
  --brilho: rgba(79, 57, 246, 0.07);
  --indigo: #4f39f6;             /* indigo-600 */
  --indigo-claro: #615fff;       /* indigo-500 */
  --foco: rgba(97, 95, 255, 0.5);
  --ok: #009966;                 /* emerald-600 */
  --erro: #ec003f;               /* rose-600 */
  --raio-card: 6px;              /* o canto "quase quadrado" do portal */
  --raio-controle: 8px;          /* rounded-lg dos botões e campos */
}

/* Faixa escura: o fundo do portal (slate-900 -> slate-950 + brilho índigo) */
.escuro {
  color-scheme: dark;
  --fundo: #020618;
  --texto: #f8fafc;
  --titulo: #ffffff;
  --titulo-card: #f1f5f9;
  --link: #cad5e2;
  --link-forte: #ffffff;
  --apoio: #90a1b9;
  --rotulo: #62748e;
  --destaque: #7c86ff;           /* indigo-400 */
  --borda: rgba(255, 255, 255, 0.08);
  --borda-forte: rgba(255, 255, 255, 0.12);
  --card: rgba(15, 23, 42, 0.6);
  --sombra-card: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --campo: rgba(2, 6, 24, 0.6);
  --etiqueta: rgba(255, 255, 255, 0.03);
  --degrade: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  --secundario-fundo: rgba(255, 255, 255, 0.04);
  --secundario-borda: rgba(255, 255, 255, 0.12);
  --secundario-texto: #cad5e2;
  --brilho: rgba(79, 57, 246, 0.12);
  --ok: #00d492;
  --erro: #ff637e;
  color: var(--texto);
}

/* ══ Base ═════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.conteudo { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .conteudo { padding: 0 20px; } }

/* ══ Topo (portal: 65px, fundo translúcido, desfoque de 24px) ═════════════ */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 65px;
  background: var(--topo);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--borda);
}
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.marca-topo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-controle);
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);   /* .accent-gradient do portal */
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
}
.marca-textos { display: flex; flex-direction: column; gap: 5px; }
.marca-nome { font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; color: var(--titulo); }
.marca-sub { font-size: 8px; font-weight: 500; line-height: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rotulo); }

.menu { display: flex; align-items: center; gap: 4px; }
.menu a {
  padding: 8px 12px;
  border-radius: var(--raio-controle);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.menu a:hover { color: var(--link-forte); background: rgba(15, 23, 42, 0.04); }
.menu a[aria-current="page"] { color: var(--link-forte); }
.menu .item { position: relative; }
.menu .entrada { display: flex; align-items: center; gap: 4px; }
.menu .entrada svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.menu .item:hover .entrada svg, .menu .item:focus-within .entrada svg { transform: rotate(180deg); }
/* A caixa começa colada no item (padding-top em vez de margem): sem vão, o
   mouse não "cai" do menu no caminho entre o item e as opções. */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 260px;
  padding-top: 8px;
}
.submenu::before {
  content: "";
  position: absolute;
  inset: 8px 0 0 0;
  z-index: -1;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-card);
  background: var(--submenu);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.menu .item:hover .submenu, .menu .item:focus-within .submenu { display: flex; }
.menu .submenu a { margin: 0 6px; padding: 9px 12px; font-size: 13px; white-space: nowrap; }
.menu .submenu a:first-child { margin-top: 6px; }
.menu .submenu a:last-child { margin-bottom: 6px; }
.submenu .divisor { display: block; height: 1px; margin: 6px 12px; background: var(--borda); }

.acoes-topo { display: flex; align-items: center; gap: 14px; }
.idiomas { display: flex; align-items: center; gap: 4px; }
.idiomas a { display: block; padding: 5px; border-radius: 4px; line-height: 0; opacity: 0.45; transition: opacity 0.15s ease; }
.idiomas a:hover, .idiomas a[aria-current="page"] { opacity: 1; }
.idiomas svg { display: block; width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); }

.menu-movel { position: relative; display: none; }
.menu-movel > summary {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--raio-controle);
  color: var(--link);
  cursor: pointer;
  list-style: none;
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel > summary:hover { background: rgba(15, 23, 42, 0.05); color: var(--link-forte); }
.menu-movel nav {
  position: absolute;
  right: 0;
  top: 44px;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-card);
  background: var(--submenu);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}
.menu-movel nav a { padding: 10px 12px; border-radius: var(--raio-controle); font-size: 14px; font-weight: 500; color: var(--link); text-decoration: none; }
.menu-movel nav a:hover { background: rgba(15, 23, 42, 0.04); color: var(--link-forte); }
.menu-movel nav a.sub { padding-left: 26px; font-size: 13px; color: var(--rotulo); }
@media (max-width: 1100px) { .menu { display: none; } .menu-movel { display: block; } }
@media (max-width: 480px) { .acoes-topo .botao.pequeno { display: none; } }
@media (max-width: 400px) { .marca-sub { display: none; } .acoes-topo { gap: 8px; } }

/* ══ Faixas de fundo ══════════════════════════════════════════════════════ */
/* Topo de página: a malha clara do portal (.mesh-background, tema claro) */
.heroi {
  position: relative;
  overflow: hidden;
  background-color: var(--fundo);
  background-image:
    radial-gradient(at 0% 0%, hsla(0, 0%, 100%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(225, 60%, 93%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(339, 60%, 95%, 1) 0, transparent 50%);
  border-bottom: 1px solid var(--borda);
}
.heroi::before {
  content: "";
  position: absolute;
  top: -128px;
  left: 50%;
  width: 700px;
  max-width: 100%;
  height: 288px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: var(--brilho);
  filter: blur(120px);
  pointer-events: none;
}
.heroi.escuro {
  background-color: #020618;
  background-image: linear-gradient(to bottom, #0f172b, #020618);
  border-top: 1px solid var(--borda);
  border-bottom: 0;
}
.heroi.cheia { flex: 1; display: flex; border-bottom: 0; }
.heroi.faixa { margin-top: 72px; padding: 72px 0; }
.heroi.final { margin-top: 72px; padding: 96px 0; }

.abertura {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px 0 96px;
}
@media (max-width: 640px) { .abertura { padding: 56px 0 64px; } }
.heroi-duplo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding: 80px 32px 88px;
}
@media (max-width: 1000px) { .heroi-duplo { grid-template-columns: 1fr; gap: 36px; padding: 56px 20px 64px; } }
.heroi-texto h1 { margin-bottom: 18px; }
.heroi-texto .apoio { max-width: 38rem; }
.heroi-texto .botoes { justify-content: flex-start; }
.heroi-numeros .numero { padding: 22px; }
.heroi-numeros .numero .valor { font-size: 26px; }
.heroi-numeros .numero .rotulo { margin-top: 6px; }
.heroi-numeros .nota { margin-top: 16px; }

.estreito {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 64px;
}
.estreito.largo { max-width: 960px; }
.estreito.centro { align-items: center; text-align: center; }

.credibilidade {
  padding: 28px 0;
  border-bottom: 1px solid var(--borda);
  background: var(--faixa-suave);
  text-align: center;
}
.rotulo-faixa { margin: 0 0 10px; font-size: 9px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--rotulo); }
.empresas { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; color: var(--titulo-card); }
.empresas span { margin: 0 18px; color: var(--rotulo); font-weight: 400; }
.paises { margin: 8px 0 0; font-size: 13px; letter-spacing: 0.05em; color: var(--apoio); }

/* ══ Tipografia (a do título do painel do portal) ═════════════════════════ */
h1 {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--titulo);
}
@media (min-width: 768px)  { h1 { font-size: 44px; } }
@media (min-width: 1280px) { h1 { font-size: 54px; } }
.abertura h1 { max-width: 1000px; }
.degrade {
  background-image: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtitulo { margin: 0 0 12px; max-width: 48rem; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--secundario-texto); }
@media (min-width: 768px) { .subtitulo { font-size: 18px; } }
.apoio { margin: 0 0 24px; max-width: 42rem; font-size: 14px; line-height: 1.625; color: var(--apoio); }
.intro { margin: 0 0 20px; max-width: 52rem; font-size: 15px; line-height: 1.7; color: var(--apoio); }
.destaque-texto { margin-top: 18px; font-weight: 600; color: var(--titulo-card); }
.mantra { margin: 8px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--destaque); }
.selo { display: inline-block; margin: 0 0 14px; font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--destaque); }
.nota { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--rotulo); }
.titulo-grande { margin: 0 0 16px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--titulo); }
@media (min-width: 1100px) { .titulo-grande { font-size: 34px; } }
.titulo-secao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--titulo);
}
.titulo-secao svg { flex: none; color: var(--destaque); }
.subtitulo-secao { margin: 22px 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rotulo); }
.espaco-acima { margin-top: 48px; }
.indice { display: block; margin-bottom: 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--destaque); font-variant-numeric: tabular-nums; }
.link-seta { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--destaque); text-decoration: none; }
.link-seta:hover { text-decoration: underline; }

/* ══ Botões (o "PESQUISAR" e o "CRIAR CONTA" do portal) ═══════════════════ */
.botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.botao, button {
  display: inline-block;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--raio-controle);
  background: var(--indigo);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(79, 57, 246, 0.3), 0 4px 6px -4px rgba(79, 57, 246, 0.3);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.botao:hover, button:hover { background: var(--indigo-claro); }
.botao:active, button:active { transform: scale(0.97); }
button:disabled { opacity: 0.6; cursor: wait; transform: none; }
.botao.pequeno { padding: 8px 16px; font-size: 11px; line-height: 16.5px; font-weight: 500; }
.botao.secundario {
  background: var(--secundario-fundo);
  box-shadow: inset 0 0 0 1px var(--secundario-borda);
  color: var(--secundario-texto);
}
.botao.secundario:hover { color: var(--titulo); box-shadow: inset 0 0 0 1px var(--borda-forte); }

/* ══ Seções e grades ══════════════════════════════════════════════════════ */
.secao { padding: 72px 0 8px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; gap: 24px; } }

/* Foto larga entre a proposta e os serviços. Recorte 21:9 no computador e
   4:3 no celular (onde a faixa larga ficaria baixa demais). */
.foto-faixa { display: block; width: 100%; height: auto; margin-top: 56px; aspect-ratio: 21 / 9;
  object-fit: cover; object-position: 50% 42%; border-radius: var(--raio-card); background: var(--borda, #e2e8f0); }
@media (max-width: 640px) { .foto-faixa { margin-top: 32px; aspect-ratio: 4 / 3; } }
.grade { display: grid; gap: 20px; }
.grade.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grade.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grade.g3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .grade.g2 { grid-template-columns: 1fr; } }
@media (max-width: 420px)  { .grade.g4 { grid-template-columns: 1fr; } }

/* ══ Card (o .glass-card do portal, tema claro) ═══════════════════════════ */
.card {
  width: 100%;
  padding: 28px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--card);
  box-shadow: var(--sombra-card);
}
.escuro .card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (max-width: 560px) { .card { padding: 20px; } }
/* Título de cartão: o padrão ÚNICO do portal -- ícone 20px que herda a cor
   de rótulo do pai, título 16px peso 500. */
.titulo-card { display: flex; align-items: center; gap: 12px; color: var(--rotulo); }
.titulo-card h3, .passo h3, .titulo-case { margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.02em; color: var(--titulo-card); }
.titulo-card h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.02em; color: var(--titulo-card); }
.titulo-card svg { flex: none; }
.card p { margin: 14px 0 0; font-size: 14px; line-height: 1.625; color: var(--apoio); }
.card p.promessa { font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--titulo-card); }
.card .selo { margin: 0; }
.card .rodape-card { margin-top: auto; padding-top: 18px; }
.card .rodape-card a:not(.botao) { font-size: 13px; font-weight: 600; color: var(--destaque); text-decoration: none; }
.card .rodape-card a:not(.botao):hover { text-decoration: underline; }
.servico { display: flex; flex-direction: column; }

/* Números */
.numero .valor { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--titulo); font-variant-numeric: tabular-nums; }
.numero .rotulo { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--apoio); }
.numero.compacto { padding: 18px; }
.numero.compacto .valor { font-size: 22px; }
.numero.compacto .rotulo { margin-top: 6px; font-size: 12px; }

/* Listas */
.lista { margin: 14px 0 0; padding: 0; list-style: none; }
.lista li { position: relative; padding: 5px 0 5px 16px; font-size: 15px; line-height: 1.55; color: var(--apoio); }
.lista li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 5px; height: 5px; border-radius: 1px; background: var(--destaque); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.etiquetas li {
  padding: 5px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 4px;
  background: var(--etiqueta);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--apoio);
}

/* Diagnóstico */
.entrega-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border-color: rgba(97, 95, 255, 0.35); }
.entrega-card .selo { margin-bottom: 4px; }
.card p.entrega-texto { margin: 0 0 18px; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--titulo); }
.entrega-linha { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; }
.entrega-linha p.entrega-texto { margin: 0; }
.escuro .lista li { color: var(--link); }

/* Passos */
.passos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .passos { grid-template-columns: 1fr; } }
.passo { position: relative; }
.passo p { margin-top: 10px; }
@media (min-width: 1101px) {
  .passo:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 30px; font-size: 14px; color: var(--rotulo); }
}

/* Para quem */
.frases { gap: 16px; }
.frase {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--destaque);
  border-radius: 0 var(--raio-card) var(--raio-card) 0;
  background: var(--card);
  box-shadow: var(--sombra-card);
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: var(--titulo-card);
}
.chamada-quem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.chamada-quem p { margin: 0; font-size: 16px; font-weight: 500; color: var(--titulo-card); }

/* Cases */
.case { scroll-margin-top: 90px; }
.case .contexto { margin: 6px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--rotulo); }
.titulo-case { margin-top: 6px; font-size: 18px; font-weight: 600; }
.case dl { margin: 18px 0 0; }
.case dt { margin-top: 14px; font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rotulo); }
.case dd { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--apoio); }
.case .resultado { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.case .resultado b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--titulo); }
.case .resultado span { font-size: 13px; color: var(--apoio); }

/* Sobre */
.sobre-bloco { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 36px; align-items: start; padding: 36px; }
@media (max-width: 700px) { .sobre-bloco { grid-template-columns: 1fr; gap: 20px; padding: 24px; } }
.sobre-bloco p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--apoio); }
.sobre-bloco .selo { margin-bottom: 10px; }
.monograma {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  box-shadow: 0 12px 32px rgba(79, 57, 246, 0.25);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}
@media (max-width: 700px) { .monograma { width: 96px; height: 96px; font-size: 30px; } }
.monograma.grande { width: 120px; height: 120px; margin-bottom: 20px; font-size: 38px; }
.texto p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--apoio); }
.texto p:last-child { margin-bottom: 0; }
.numeros-sobre { margin: 20px 0 8px; }
.trajetoria { margin: 0; padding: 0; list-style: none; }
.trajetoria li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--borda); }
.trajetoria li:first-child { border-top: 0; padding-top: 0; }
.trajetoria .periodo { font-size: 12px; font-weight: 600; line-height: 22px; letter-spacing: 0.05em; color: var(--destaque); font-variant-numeric: tabular-nums; }
.trajetoria strong { display: block; font-size: 15px; font-weight: 600; color: var(--titulo-card); }
.trajetoria .papel { display: block; margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--apoio); }
@media (max-width: 560px) { .trajetoria li { grid-template-columns: 1fr; gap: 4px; } }
.formacao { margin: 18px 0 0; padding: 0; list-style: none; }
.formacao li { padding: 10px 0; border-top: 1px solid var(--borda); font-size: 13px; line-height: 1.5; color: var(--apoio); }

/* Serviços (página) */
.detalhes-servicos { display: flex; flex-direction: column; gap: 20px; }
.servico-detalhe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; scroll-margin-top: 90px; }
@media (max-width: 900px) { .servico-detalhe { grid-template-columns: 1fr; gap: 20px; } }
.cabeca-servico { display: flex; flex-direction: column; }
.servico-detalhe .rodape-card { padding-top: 20px; }

/* Chamada final (faixa escura) */
.chamada-final { position: relative; text-align: center; }
.chamada-final h2 { margin: 0 0 8px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--titulo); }
@media (min-width: 1100px) { .chamada-final h2 { font-size: 40px; } }
.chamada-final .subtitulo { margin: 0 auto 10px; }
.chamada-final p { max-width: 44rem; margin: 0 auto 22px; font-size: 15px; line-height: 1.65; color: var(--apoio); }
.chamada-final .botoes { justify-content: center; }
.heroi.faixa .conteudo { position: relative; }

/* ══ Formulário (os campos do login do portal, tema claro) ════════════════ */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo.inteiro { grid-column: 1 / -1; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
label { margin-left: 2px; font-size: 9px; line-height: 1.5; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rotulo); }
label .opcional { text-transform: none; letter-spacing: 0; }
input, textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-controle);
  background: var(--campo);
  color: var(--titulo);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: inset 0 2px 4px 0 rgba(15, 23, 42, 0.03);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus { border-color: var(--foco); box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.12); }
/* Campo-isca: fora da tela para gente, presente para robô. Não use
   display:none -- alguns robôs pulam campos escondidos assim. */
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset.sem-borda { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.rotulo-legenda { margin: 0 0 8px 2px; padding: 0; font-size: 9px; font-weight: 500; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rotulo); }
.preferencia { display: flex; flex-wrap: wrap; gap: 10px; }
.preferencia label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-controle);
  background: var(--campo);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--secundario-texto);
  cursor: pointer;
}
.preferencia input { width: auto; margin: 0; padding: 0; box-shadow: none; accent-color: var(--indigo); }
.preferencia label:has(input:checked) { border-color: var(--foco); color: var(--titulo); background: #eef2ff; }
.assunto { margin: 0 0 18px; font-size: 13px; color: var(--apoio); }
.assunto strong { font-weight: 600; color: var(--titulo); }
.rodape-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.privacidade { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--rotulo); }
#contato-status { margin: 0; font-size: 14px; }
#contato-status[data-tipo="ok"] { color: var(--ok); }
#contato-status[data-tipo="erro"] { color: var(--erro); }

/* ══ Rodapé ═══════════════════════════════════════════════════════════════ */
footer { width: 100%; padding: 36px 0 24px; border-top: 1px solid var(--borda); background: #ffffff; font-size: 12px; color: var(--rotulo); }
footer .conteudo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 24px; }
footer a { color: var(--apoio); text-decoration: none; font-weight: 500; }
footer a:hover { color: var(--titulo); }
.rodape-marca { display: flex; flex-direction: column; gap: 6px; }
.rodape-marca strong { font-size: 13px; letter-spacing: 0.08em; color: var(--titulo-card); }
.rodape-marca span { font-size: 12px; color: var(--rotulo); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; }
.rodape-legal { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--borda); font-size: 11px; color: var(--rotulo); }
/* "Cookies" do rodapé: é botão (reabre o aviso), mas com a cara dos links ao lado */
.link-cookies { padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--apoio);
  font-size: inherit; line-height: inherit; font-weight: 500; text-transform: none; letter-spacing: normal; }
.link-cookies:hover { background: none; color: var(--titulo); }
.link-cookies:active { transform: none; }

/* Aviso de cookies (site/medicao.js): o Analytics só carrega depois do "Aceitar" */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px 24px; padding: 16px 20px; background: var(--card);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-card); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16); }
.aviso-cookies p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--apoio); }
.aviso-cookies-botoes { display: flex; flex-shrink: 0; gap: 10px; }
@media (max-width: 640px) {
  .aviso-cookies { flex-direction: column; align-items: stretch; }
  .aviso-cookies-botoes { justify-content: flex-end; }
}

/* Endereço (rodapé e contato) */
address.endereco { font-style: normal; font-size: 12px; line-height: 1.6; color: var(--rotulo); }
.card.local { margin-top: 20px; }
.card.local address.endereco { margin-top: 12px; font-size: 14px; color: var(--apoio); }
.card.local .link-seta { margin-top: 12px; }
/* Dentro do cartão, ".card p" (14px) vencia estas duas pela especificidade. */
.card p.privacidade { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--rotulo); }
.card p.assunto { margin: 0 0 18px; font-size: 13px; }

/* Quem conduz os projetos (home) */
.pessoa { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 480px) { .pessoa { grid-template-columns: 1fr; gap: 16px; } }
.monograma.medio { width: 88px; height: 88px; font-size: 28px; }
/* Foto dos sócios, no tamanho do monograma. O arquivo é PEQUENO de propósito
   (ver ferramentas/gerar_imagens.py), e aqui a imagem não se arrasta, não
   tem "salvar imagem" no clique direito nem o menu do toque longo no celular. */
.retrato { display: block; width: 160px; height: 160px; border-radius: 9999px; object-fit: cover;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); pointer-events: none; user-select: none;
  -webkit-user-drag: none; -webkit-touch-callout: none; }
@media (max-width: 700px) { .retrato { width: 96px; height: 96px; } }
.retrato.grande { width: 120px; height: 120px; margin-bottom: 20px; }
.retrato.medio { width: 88px; height: 88px; }
.nome-pessoa { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--titulo); }
.pessoa p:not(.selo) { margin-top: 10px; }
.pessoa .link-seta { margin-top: 12px; }
.empresas { line-height: 1.9; }
.empresas span { margin: 0 14px; }
/* Nomes das empresas quebram linha no celular (flex em vez de texto corrido). */
.empresas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 4px; }
/* O html já desconta o topo fixo (scroll-padding-top); margem aqui somava 2x. */
.servico-detalhe, .case { scroll-margin-top: 0; }
/* Barra de empresas: itens soltos com espaço, sem separador (que sobrava no
   começo da linha quando quebra no celular). */
ul.empresas { margin: 0; padding: 0; list-style: none; gap: 6px 36px; }
ul.empresas li { white-space: nowrap; }
@media (max-width: 560px) { ul.empresas { gap: 6px 22px; font-size: 15px; } }
/* Bandeira de idioma sem página equivalente ainda (tradução pendente) */
.idiomas .indisponivel { display: block; padding: 5px; line-height: 0; opacity: 0.25; filter: grayscale(1); cursor: not-allowed; }

/* ══ Logos das empresas (em cinza, discretos — decisão do dono, 23/09/2026) ══
   Marcas registradas das empresas, usadas só para identificar onde os sócios
   trabalharam; o rótulo da faixa diz isso. Cada logo tem altura própria para
   o PESO visual ficar parecido (o da Ipsos é quase quadrado, o da TIVIT é
   largo e baixo). */
ul.empresas.logos { gap: 20px 48px; padding: 4px 0; }
ul.empresas.logos img {
  display: block;
  width: auto;
  height: 24px;
  max-width: 150px;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
ul.empresas.logos li:hover img { opacity: 0.85; }
ul.empresas.logos .logo-samsung { height: 18px; }
ul.empresas.logos .logo-claro   { height: 26px; }
ul.empresas.logos .logo-nec     { height: 22px; }
ul.empresas.logos .logo-sky     { height: 30px; }
ul.empresas.logos .logo-comgas  { height: 24px; }
ul.empresas.logos .logo-ipsos   { height: 38px; }
ul.empresas.logos .logo-tivit   { height: 15px; }
ul.empresas.logos .logo-atento  { height: 24px; }
@media (max-width: 560px) {
  ul.empresas.logos { gap: 16px 28px; }
  ul.empresas.logos img { transform: scale(0.85); }
}

/* Borda dos campos com contraste de 3,12:1 sobre o cartão branco (WCAG 1.4.11
   pede 3:1 para o contorno de controles; a borda anterior dava 1,5:1). */
input, textarea, .preferencia label { border-color: #8593a8; }
input:focus, textarea:focus { border-color: var(--indigo); }

/* Bandeiras: as DUAS em cor cheia. A do outro idioma meio apagada parecia
   botão desativado (dono, 23/09/2026). O idioma atual ganha o contorno índigo. */
.idiomas a { opacity: 1; }
.idiomas a:hover svg { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12), 0 0 0 3px rgba(79, 57, 246, 0.25); }
.idiomas a[aria-current="page"] svg { box-shadow: 0 0 0 2px var(--indigo); }

/* Símbolo do logo no topo (site/marca/simbolo.png, gerado de dados/logo.png
   por ferramentas/gerar_marca.py). Substitui o "C" em degradê provisório. */
.marca-simbolo { display: block; width: 38px; height: 38px; flex: none; }