/* =========================================================
   TNT Educação — Landing Page
   Paleta, tipografia e regras de contraste: ver DESIGN.md
   ========================================================= */

/* ---------- Fontes ----------
   Sora 400/600: css/fontes.css (carregado de forma assíncrona). */
/* Fallback ajustado por métrica: evita deslocamento quando a Sora carrega */
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400;
  size-adjust: 113.5%;
  ascent-override: 85.5%;
  descent-override: 25.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 600;
  size-adjust: 107.1%;
  ascent-override: 90.5%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta oficial (exclusiva) */
  --grafite: #201825;
  --azul: #768BF8;
  --indigo: #444679;
  --lavanda: #ACBAFB;
  --nevoa: #E5E7FE;
  --branco: #FFFFFF;
  --aco: #78757C;          /* só sobre Branco */
  --cinza-claro: #D2D2D4;  /* só bordas/divisores */
  --gradiente: linear-gradient(48deg, var(--indigo) 0%, var(--azul) 48%, var(--lavanda) 78%, var(--nevoa) 100%);

  --fonte: "Sora", "Sora Fallback", system-ui, sans-serif;

  /* Tipografia fluida */
  --fs-h1: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-corpo: 1rem;
  --fs-peq: .875rem;

  /* Espaços */
  --gutter: 1.25rem;
  --secao: clamp(4rem, 2.75rem + 5.5vw, 8rem);
  --chanfro: 14px;           /* canto do botão */
  --corte: clamp(28px, 4vw, 56px); /* corte diagonal das fotos */

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --foco: var(--grafite);
}
@media (min-width: 768px)  { :root { --gutter: 2rem; } }
@media (min-width: 1024px) { :root { --gutter: 2.5rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--fonte);
  font-weight: 400;
  font-size: var(--fs-corpo);
  line-height: 1.5;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
/* textos longos (e-mails, palavras grandes com zoom) quebram em vez de vazar */
h1, h2, h3, p, li, figcaption { overflow-wrap: anywhere; }
strong { font-weight: 600; }

::selection { background: var(--lavanda); color: var(--grafite); }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

a, button { touch-action: manipulation; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px)), 75rem);
  margin-inline: auto;
}

/* ---------- Elementos de texto recorrentes ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--fs-peq);
  line-height: 1.4;
  color: var(--indigo);
  letter-spacing: .01em;
}
/* marcador: pequeno chanfro com o gradiente oficial (decorativo) */
.eyebrow::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  background: var(--gradiente);
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px);
}

.cabeca { display: grid; gap: 1rem; max-width: 40rem; }
.cabeca h2 {
  font-size: min(var(--fs-h2), 8.4vw);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.cabeca__texto { font-size: var(--fs-lead); line-height: 1.55; }

.secao { padding-block: var(--secao); }
.secao--nevoa { background: var(--nevoa); }

/* ---------- Botão (chanfro no canto superior esquerdo) ----------
   O fundo azul fica num pseudo-elemento recortado; o <a> em si não
   tem clip-path, então o anel de foco aparece inteiro. */
.botao {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  min-height: 56px;
  padding: .875rem 1.375rem;
  color: var(--grafite);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 140ms var(--ease-out);
}
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--azul);
  clip-path: polygon(var(--chanfro) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chanfro));
  transition: background-color 160ms ease;
}
.botao__seta { flex: none; transition: transform 160ms var(--ease-out); }
.botao:active { transform: scale(.97); }
.botao:active::before { background: var(--lavanda); }
@media (hover: hover) and (pointer: fine) {
  .botao:hover::before { background: var(--lavanda); }
  .botao:hover .botao__seta { transform: translate(2px, -2px); }
}

.cta { display: grid; gap: .875rem; justify-items: start; }
.cta__micro { font-size: var(--fs-peq); color: var(--aco); }

/* ---------- Topo + menu ---------- */
.pular {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--grafite);
  color: var(--branco);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: max(.75rem, env(safe-area-inset-top, 0px)); --foco: var(--azul); }
main:focus { outline: none; }

.topo { padding-top: max(.75rem, env(safe-area-inset-top, 0px)); }
.topo__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  min-height: 64px;
}
.topo__marca { display: inline-flex; padding-block: .5rem; }
.topo__logo { width: auto; height: 30px; }

.menu ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.menu a {
  display: inline-block;
  padding-block: .75rem;
  color: var(--grafite);
  font-size: .9375rem;
  text-decoration: none;
  text-underline-offset: .5em;
  text-decoration-thickness: 2px;
}
.menu a[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--azul);
  text-decoration-thickness: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .menu a:hover { text-decoration: underline; text-decoration-color: var(--lavanda); }
  .menu a[aria-current="page"]:hover { text-decoration-color: var(--azul); }
}

.menu-botao {
  display: none;
  align-items: center;
  gap: .625rem;
  min-height: 44px;
  margin-right: -.5rem;
  padding: 0 .5rem;
  border: 0;
  background: none;
  color: var(--grafite);
  font: 600 .9375rem/1 var(--fonte);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.menu-botao__icone,
.menu-botao__icone::before,
.menu-botao__icone::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease-out), opacity 150ms ease;
}
.menu-botao__icone { position: relative; }
.menu-botao__icone::before,
.menu-botao__icone::after { content: ""; position: absolute; left: 0; }
.menu-botao__icone::before { top: -6px; }
.menu-botao__icone::after { top: 6px; }
.menu-botao[aria-expanded="true"] .menu-botao__icone { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__icone::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__icone::after { transform: translateY(-6px) rotate(-45deg); }

/* Celular: sem JavaScript o menu aparece em linha; com JavaScript vira painel */
@media (max-width: 767.98px) {
  .menu { flex-basis: 100%; }
  .js .menu-botao { display: inline-flex; }
  .js .menu { display: none; }
  .js .menu.menu--aberto { display: block; padding-bottom: 1rem; }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu li + li { border-top: 1px solid var(--cinza-claro); }
  .js .menu a { display: block; padding-block: .875rem; font-size: 1.125rem; }
}
@media (min-width: 768px) {
  .topo { padding-top: 1.25rem; }
  .topo__logo { height: 36px; }
}

/* ---------- Seção 1 — Hero ---------- */
.hero { padding-block: 2.5rem var(--secao); overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.hero__texto { display: grid; gap: 1.5rem; align-content: start; }
.hero__titulo {
  /* min(): com texto ampliado em tela estreita, o título não parte palavras */
  font-size: min(var(--fs-h1), 9.4vw);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 17ch;
}
.hero__titulo span { display: block; }
.hero__titulo-2 { color: var(--indigo); margin-top: .12em; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.5; max-width: 34rem; }
.hero__perfil {
  display: grid;
  gap: .875rem;
  max-width: 34rem;
}
.hero__regiao { font-weight: 600; }
.hero__texto .cta { margin-top: .5rem; }

/* Fotos dos sócios — moldura com corte diagonal */
.hero__fotos {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-items: start;
}
/* faixa de gradiente decorativa, atrás das fotos */
.hero__fotos::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: calc(-1 * var(--gutter));
  top: 1.5rem;
  width: 58%;
  height: 34%;
  background: var(--gradiente);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corte));
}
.socio { display: grid; gap: .625rem; }
.socio--2 { margin-top: 2.5rem; }
.socio__moldura {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--grafite);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corte));
}
.socio__moldura img { width: 100%; height: 100%; object-fit: cover; }
.socio figcaption {
  display: grid;
  font-size: var(--fs-peq);
  line-height: 1.4;
  color: var(--aco);
}
.socio figcaption strong { color: var(--grafite); }

@media (min-width: 640px) {
  .hero__fotos { max-width: 36rem; gap: 1.25rem; }
}

/* Tablet: texto + coluna de fotos empilhadas */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .hero__fotos { grid-template-columns: 1fr; gap: 1.5rem; padding-top: .5rem; }
  .socio--2 { margin-top: 0; margin-left: 18%; }
  .hero__fotos::before { display: none; }
}

/* Desktop: texto à esquerda, fotos lado a lado e escalonadas */
@media (min-width: 1024px) {
  .hero { padding-top: 4rem; }
  .hero__grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
  }
  .hero__texto { gap: 1.75rem; }
  .hero__fotos { gap: 1.25rem; }
  .socio--2 { margin-top: 5rem; }
  .hero__fotos::before { right: -2.25rem; top: 2.5rem; width: 56%; height: 30%; }
}

/* ---------- Seção 2 — Como funciona ---------- */
.como__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.etapas { display: grid; }
.etapa {
  display: grid;
  gap: .625rem;
  padding-block: 1.5rem;
}
.etapa:first-child { padding-top: 0; }
.etapa:last-child { padding-bottom: 0; }
.etapa__marca { display: flex; margin-bottom: .375rem; }
.icone {
  box-sizing: content-box;
  padding: 12px;
  color: var(--grafite);
  background: var(--branco);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.etapa h3 { font-size: var(--fs-h3); line-height: 1.25; }
.etapa p { max-width: 36rem; }

@media (min-width: 768px) and (max-width: 1023.98px) {
  .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .etapa { align-content: start; padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .como__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .como__cabeca { position: sticky; top: 3rem; }
  .etapa {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.75rem;
    padding-block: 2rem;
  }
  .etapa:first-child { padding-top: 0; }
  .etapa__marca { grid-row: span 2; align-self: start; margin: 0; }
}

/* ---------- Quem faz o quê ---------- */
.papeis__lista { display: grid; margin-top: 2.5rem; }
.papel {
  position: relative;
  display: grid;
  gap: .625rem;
  padding-block: 1.5rem;
}
.papel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cinza-claro);
}
.papel--tnt::before { background: var(--gradiente); }
.papel__nome {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.papel__simbolo { width: .85em; height: auto; flex: none; margin-top: .14em; }
.papel p { max-width: 30rem; }

@media (min-width: 768px) {
  .papeis__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; }
  .papel { align-content: start; padding-top: 1.875rem; }
}
@media (min-width: 1024px) {
  .papeis__lista { gap: clamp(2rem, 4vw, 4rem); margin-top: 3.5rem; }
}

/* ---------- Frentes de atuação ---------- */
.papeis { padding-bottom: calc(var(--secao) * .7); }
.frentes { padding-top: 0; }
.frentes__grid { display: grid; gap: 2.5rem; padding-top: calc(var(--secao) * .7); }
.frentes__lista { display: grid; }
.frente {
  display: grid;
  gap: .375rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--cinza-claro);
}
.frente:first-child { border-top: 1px solid var(--grafite); }
.frente h3 { font-size: var(--fs-h3); line-height: 1.25; }

@media (min-width: 768px) {
  .frente {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2rem;
    align-items: baseline;
    padding-block: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .frentes__cabeca {
    max-width: none;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: end;
  }
  .frentes__cabeca .eyebrow { grid-column: 1 / -1; }
  .frente h3 { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.625rem); letter-spacing: -.01em; }
}

/* Faixa de plataformas (fundo branco: alguns logos oficiais têm fundo branco) */
.plataformas {
  display: grid;
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.plataformas__titulo {
  font-size: var(--fs-peq);
  font-weight: 400;
  color: var(--aco);
}
.plataformas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
}
.plataformas__lista img { height: var(--h, 28px); width: auto; }

@media (min-width: 1024px) {
  .plataformas {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .plataformas__lista { gap: 1.25rem 3rem; }
}

/* ---------- Seção 3 — Clientes ---------- */
.clientes__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 2.5rem;
}
@media (max-width: 479.98px) {
  .clientes__grade li:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3.1 / 1; }
  .clientes__grade li:last-child:nth-child(odd) img { width: calc(var(--w, 70%) / 2); }
}
.clientes__grade li {
  position: relative;
  aspect-ratio: 3 / 2;
  padding: .5rem;
  background: var(--branco);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
/* o logo fica numa caixa fixa dentro do quadro: proporções extremas
   (muito largo, muito alto) ou arquivo ausente nunca esticam o quadro */
.clientes__grade img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--w, 70%);
  height: 72%;
  object-fit: contain;
  overflow: hidden;
  font-size: var(--fs-peq);
  color: var(--grafite);
}
@media (min-width: 480px) and (max-width: 1023.98px) {
  .clientes__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .clientes__grade { gap: .75rem; margin-top: 3rem; }
  .clientes__grade li { padding: .75rem; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
}
@media (min-width: 1024px) {
  .clientes__cabeca {
    max-width: none;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: end;
  }
  .clientes__grade { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
}

/* ---------- Seção 4 — Orçamento (Grafite) ---------- */
.orcamento {
  --foco: var(--nevoa);
  position: relative;
  overflow: hidden;
  background: var(--grafite);
  color: var(--branco);
}
/* acento: corte diagonal com o gradiente oficial, sem texto por cima */
.orcamento::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(88px, 22vw, 320px);
  height: clamp(10px, 1.6vw, 18px);
  background: var(--gradiente);
  clip-path: polygon(clamp(10px, 1.6vw, 18px) 0, 100% 0, 100% 100%, 0 100%);
}
.orcamento__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.orcamento__titulo {
  font-size: min(var(--fs-h2), 8.4vw);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.orcamento__corpo { display: grid; gap: 1rem; color: var(--nevoa); max-width: 34rem; }
.orcamento__texto { font-size: var(--fs-lead); color: var(--branco); }
.orcamento .cta { margin-top: 1rem; }
.orcamento .cta__micro { color: var(--lavanda); }

@media (min-width: 1024px) {
  .orcamento__titulo { font-size: clamp(2.5rem, 1.5rem + 2.4vw, 3.5rem); }
  .orcamento__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}

/* ---------- Rodapé ---------- */
.rodape {
  padding-block: 3.5rem max(3rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
  font-size: var(--fs-peq);
  line-height: 1.5;
  color: var(--aco);
}
.rodape__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.rodape__marca { display: grid; gap: 1rem; justify-items: start; }
.rodape__simbolo { width: 36px; height: auto; }
.rodape__regiao { color: var(--grafite); font-weight: 600; font-size: var(--fs-corpo); }
.rodape__dados { display: grid; gap: .25rem; }
.rodape a { color: var(--grafite); }
.rodape__dados a {
  display: inline-block;
  padding-block: .375rem;
  margin-block: -.375rem;
}
.rodape__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.rodape__titulo { margin-bottom: .5rem; font-size: var(--fs-peq); color: var(--grafite); }
.rodape__nav ul { display: grid; gap: 0; }
.rodape__nav a { display: inline-block; padding-block: .4375rem; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .rodape a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}
@media (min-width: 768px) {
  .rodape__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 3rem; }
  .rodape__copy { grid-column: 1 / -1; }
}

/* =========================================================
   Páginas internas (Sobre, Serviços, Contato, Blog, políticas)
   ========================================================= */
.wrap--texto { width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px)), 46rem); }

.pagina-topo { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2.5rem, 1.75rem + 3vw, 4.5rem); }
.pagina-topo .wrap { display: grid; gap: 1.25rem; }
.pagina-topo__titulo {
  font-size: min(var(--fs-h1), 9.4vw);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 22ch;
}
.pagina-topo__lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 42rem; }
.pagina-topo--legal .pagina-topo__titulo,
.pagina-topo--post .pagina-topo__titulo {
  font-size: min(clamp(2rem, 1.5rem + 2vw, 3rem), 8.4vw);
  line-height: 1.1;
  letter-spacing: -.025em;
  max-width: none;
}
.legal__data, .post__meta { font-size: var(--fs-peq); color: var(--aco); }

.trilha { font-size: var(--fs-peq); }
.trilha a { color: var(--indigo); text-underline-offset: .25em; }

/* Link de texto com seta (ícone desenhado, não caractere) */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .5rem;
  color: var(--grafite);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lavanda);
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}
.link-seta::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--ease-out);
}
.link-seta--voltar { flex-direction: row-reverse; }
.link-seta--voltar::after { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .link-seta:hover { text-decoration-color: var(--azul); }
  .link-seta:hover::after { transform: translateX(3px); }
  .link-seta--voltar:hover::after { transform: scaleX(-1) translateX(3px); }
}
.frentes__mais { margin-top: .5rem; }

/* Texto corrido */
.prosa > * + * { margin-top: 1rem; }
.prosa h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.prosa h3 { margin-top: 2rem; font-size: 1.125rem; line-height: 1.3; }
.prosa h2 + *, .prosa h3 + * { margin-top: .75rem; }
.prosa ul, .prosa ol { padding-left: 1.25rem; display: grid; gap: .5rem; }
.prosa ul { list-style: square; }
.prosa ol { list-style: decimal; }
.prosa li::marker { color: var(--indigo); }
.prosa a { color: var(--grafite); text-decoration-color: var(--azul); text-decoration-thickness: 2px; }
.legal { padding-bottom: var(--secao); }
.legal > h2:first-child { margin-top: 0; }

/* Serviços */
.indice ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .5rem; }
.indice a {
  display: inline-block;
  padding-block: .5rem;
  color: var(--grafite);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: underline;
  text-decoration-color: var(--lavanda);
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}
@media (hover: hover) and (pointer: fine) { .indice a:hover { text-decoration-color: var(--azul); } }

.servico { padding-block: calc(var(--secao) * .8); scroll-margin-top: 1rem; }
.servico--nevoa { background: var(--nevoa); }
.servico__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 4rem; }
.servico__cabeca { display: grid; gap: .875rem; align-content: start; }
.servico__nome {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--fs-peq);
  font-weight: 600;
  color: var(--indigo);
}
.servico__cabeca h2 {
  font-size: var(--fs-h2);
  font-size: min(var(--fs-h2), 8.4vw);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.servico__corpo { max-width: 40rem; }
.icone--solto { padding: 0; background: none; clip-path: none; color: var(--indigo); }
@media (min-width: 1024px) {
  .servico__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .servico__cabeca { position: sticky; top: 2rem; }
}

.faq { margin-top: 2rem; border-bottom: 1px solid var(--cinza-claro); }
.servico--nevoa .faq, .servico--nevoa .faq details { border-color: var(--lavanda); }
.faq details { border-top: 1px solid var(--cinza-claro); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  margin-top: .3em;
  background:
    linear-gradient(var(--grafite), var(--grafite)) center / 14px 2px no-repeat,
    linear-gradient(var(--grafite), var(--grafite)) center / 2px 14px no-repeat;
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1rem; }

/* Sobre */
.sobre-socios__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
.sobre-socios__texto { display: grid; gap: 1.5rem; }
.sobre-socios__texto .prosa { max-width: 36rem; }
.sobre-nome { display: grid; gap: 1.5rem 4rem; }
.sobre-nome .prosa { max-width: 40rem; font-size: var(--fs-lead); }
.principios { margin-top: 3rem; }
.sobre-regiao { display: grid; gap: 2.5rem; }
.estados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.estados li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  letter-spacing: -.01em;
}
.estados li::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background: var(--gradiente);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
@media (min-width: 768px) {
  .estados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Essência: missão, visão, promessa, público */
.posicionamento { display: grid; gap: 2.5rem; }
.posicionamento__lista { display: grid; }
.posicionamento__item {
  display: grid;
  gap: .375rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--cinza-claro);
}
.posicionamento__item dt { font-weight: 600; color: var(--indigo); }
.posicionamento__item dd { margin: 0; font-size: var(--fs-lead); line-height: 1.5; max-width: 38rem; }

/* A marca (Grafite: o território da marca) */
.marca-conceito { --foco: var(--nevoa); background: var(--grafite); color: var(--nevoa); }
.marca-conceito .eyebrow { color: var(--lavanda); }
.marca-conceito h2 { color: var(--branco); }
.marca-conceito__grid { display: grid; gap: 3rem; align-items: center; }
.marca-conceito__texto { display: grid; gap: 1.5rem; }
.marca-conceito .prosa { max-width: 36rem; font-size: var(--fs-lead); }
.marca-conceito__logo img { width: min(100%, 26rem); height: auto; }

/* Valores */
.valores { display: grid; margin-top: 2.5rem; }
.valor {
  display: grid;
  gap: .375rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--cinza-claro);
}
.valor__nome {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
}
.valor__nome::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  background: var(--gradiente);
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px);
}
.valor p { font-size: var(--fs-lead); }

@media (min-width: 768px) {
  .posicionamento__item,
  .valor { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; align-items: baseline; }
}
@media (min-width: 1024px) {
  .posicionamento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .posicionamento__item { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .marca-conceito__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; }
  .marca-conceito__logo { justify-self: end; }
  .valores { margin-top: 3.5rem; }
}
@media (min-width: 1024px) {
  .sobre-socios__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; }
  .sobre-nome { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sobre-regiao { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; }
  .estados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contato */
.pagina-topo--contato { padding-bottom: var(--secao); }
.contato__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.contato__texto { display: grid; gap: 1.25rem; align-content: start; }
.contato__regiao { font-weight: 600; }
.contato__canais { display: grid; gap: 2rem; align-content: start; }
.canal {
  position: relative;
  display: grid;
  gap: .75rem;
  justify-items: start;
  padding-top: 1.75rem;
}
.canal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cinza-claro);
}
.canal:first-child::before { background: var(--gradiente); }
.canal__titulo { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); letter-spacing: -.015em; }
.canal__numero { font-weight: 600; white-space: nowrap; }
.contato__outros { display: grid; gap: .75rem; }
.contato__outros li { display: grid; gap: .125rem; }
.contato__rotulo { font-size: var(--fs-peq); color: var(--aco); }
.contato__outros a { color: var(--grafite); justify-self: start; padding-block: .25rem; }
@media (min-width: 1024px) {
  .contato__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; }
}

.passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }
.passo { display: grid; gap: .5rem; align-content: start; padding-top: 1.5rem; position: relative; }
.passo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--lavanda); }
.passo:first-child::before { background: var(--gradiente); }
.passo h3 { font-size: var(--fs-h3); line-height: 1.25; }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } }

/* Botão secundário: mesma forma, preenchimento Névoa */
.botao--secundario::before { background: var(--nevoa); }
.botao--secundario:active::before { background: var(--lavanda); }
@media (hover: hover) and (pointer: fine) {
  .botao--secundario:hover::before { background: var(--lavanda); }
}

/* Blog */
.secao--lista-blog { padding-top: 0; }
.blog-lista { display: grid; border-top: 1px solid var(--grafite); }
.blog-item {
  display: grid;
  gap: .5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--cinza-claro);
}
.blog-item__meta { font-size: var(--fs-peq); color: var(--aco); }
.blog-item__titulo { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.015em; max-width: 40ch; }
.blog-item__titulo a { color: var(--grafite); text-decoration: none; }
.blog-item__resumo { max-width: 46rem; }
@media (hover: hover) and (pointer: fine) {
  .blog-item__titulo a:hover { text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 2px; text-underline-offset: .2em; }
}
@media (min-width: 1024px) {
  .blog-item { grid-template-columns: 12rem minmax(0, 1fr); column-gap: 3rem; }
  .blog-item__meta { grid-row: span 2; padding-top: .4rem; }
}
.blog-vazio { padding-block: 2rem; color: var(--aco); }

.post .prosa { font-size: 1.0625rem; line-height: 1.65; }
/* Imagens do post (geradas pelo Nano Banana): mesmo corte diagonal das fotos do site */
.post__capa { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.post__capa img, .prosa img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--nevoa);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corte));
}
.prosa img { margin-block: 2rem; }
.post__fontes { margin-top: 3rem; font-size: var(--fs-peq); }
.post__fontes h2 { font-size: var(--fs-peq); margin-bottom: .5rem; }
.post__fontes ul { display: grid; gap: .375rem; }
.post__fontes a { color: var(--grafite); }
.chamada {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.chamada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nevoa);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corte));
}
.chamada__titulo { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.015em; }
.chamada .cta { margin-top: .5rem; }
.post__voltar { margin-block: 2rem var(--secao); }

/* ---------- Mobile: botão ocupa a largura ---------- */
@media (max-width: 479.98px) {
  .cta { justify-items: stretch; }
  .botao { width: 100%; }
}

/* =========================================================
   Movimento (só CSS)
   - Botão: pressionar 140ms / hover 160ms (já definidos acima).
   - Única entrada da página: as fotos dos sócios se revelam a partir
     do canto chanfrado, ecoando o corte diagonal da marca.
     O estado final é o estilo normal; sem animação, tudo já aparece.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .socio__moldura {
    animation: moldura-revela 760ms var(--ease-out) both;
  }
  .socio__moldura img {
    animation: foto-assenta 1100ms var(--ease-out) both;
  }
  .socio--2 .socio__moldura,
  .socio--2 .socio__moldura img { animation-delay: 90ms; }
  .hero__fotos::before {
    animation: acento-entra 700ms var(--ease-out) 180ms both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .socio__moldura { animation: so-opacidade 240ms ease both; }
  /* sem deslocamento: o botão responde só com a troca de cor */
  .botao:active { transform: none; }
  .botao__seta { transition: none; }
  .botao:hover .botao__seta { transform: none; }
}
@keyframes moldura-revela {
  from { clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0); }
  to   { clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corte)); }
}
@keyframes foto-assenta {
  from { transform: scale(1.06); }
  to   { transform: none; }
}
@keyframes acento-entra {
  from { opacity: 0; transform: translate(-14px, 14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes so-opacidade {
  from { opacity: 0; }
  to   { opacity: 1; }
}