/* ==========================================================================
   Seal Medtech — folha de estilo única
   Tokens e regras seguem specs/design.md. Não alterar sem atualizar a spec.
   ========================================================================== */

/* --- Fontes ------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-700-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 {
  --roxo: #5947b7;
  --roxo-escuro: #4a3b9a;
  --roxo-12: rgba(89, 71, 183, 0.12);
  --ciano: #00adcf;
  /* O ciano da marca dá 2,7:1 sobre branco e reprova em AA. Esta variante mais
     escura mantém a família e passa: 5,5:1 sobre branco, 4,9:1 sobre --fundo-2.
     Use --ciano para grafismo e --ciano-texto para texto em fundo claro. */
  --ciano-texto: #00738c;
  --preto: #111111;
  --tinta: #1a1a1e;
  --tinta-2: #55555e;
  --linha: #e2e2e7;
  --fundo-2: #f2f2f4;
  --fundo: #ffffff;
  --branco: #ffffff;

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 16px;
  --esp-4: 24px;
  --esp-5: 32px;
  --esp-6: 48px;
  --esp-7: 64px;
  --esp-8: 96px;
  --esp-9: 128px;

  --raio: 4px;
  --largura: 1200px;
  --borda-lateral: 24px;
  --altura-cabecalho: 64px;

  /* O hero é de duas colunas, então o display para em 56px e não em 72px:
     a 72px a headline passava de cinco linhas e estourava o palco fixo. */
  --t-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --t-display-2: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  --t-h1: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --t-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --t-corpo-g: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --t-corpo: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --t-peq: 0.875rem;
  --t-eyebrow: 0.75rem;

  --transicao: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --borda-lateral: 40px;
    --altura-cabecalho: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --borda-lateral: 64px;
  }
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv05';
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg, canvas, video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: var(--roxo);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--roxo-escuro);
}

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
}

/* Números sempre tabulares: prazos, telefone, CEP. */
time, .numero, .tabular {
  font-variant-numeric: tabular-nums;
}

/* Evita que uma quebra de linha deixe só 1 ou 2 caracteres sozinhos no fim
   de uma palavra longa (o "br" de "contato@sealmedtech.com.br", por
   exemplo) — não existe uma regra de CSS que faça isso sozinha para
   qualquer texto; aqui é aplicada à mão no pedacinho final que não pode
   quebrar. Ver @memoria.md. */
.nao-quebra {
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--esp-3) var(--esp-4);
  background: var(--preto);
  color: var(--branco);
  font-weight: 600;
}

.pular-para-conteudo:focus {
  left: 0;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Layout ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--largura) + var(--borda-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--borda-lateral);
}

.secao {
  padding-block: var(--esp-7);
}

/* O cabeçalho é fixo: âncoras precisam parar abaixo dele. */
[id] {
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--esp-4));
}

@media (min-width: 1024px) {
  .secao {
    padding-block: var(--esp-8);
  }
}

.secao--clara {
  background: var(--fundo-2);
}

/* Abertura das páginas internas. O cabeçalho é fixo, então o topo é somado. */
.topo-pagina {
  padding-top: calc(var(--altura-cabecalho) + var(--esp-6));
  padding-bottom: var(--esp-6);
  border-bottom: 1px solid var(--linha);
}

@media (min-width: 1024px) {
  .topo-pagina {
    padding-top: calc(var(--altura-cabecalho) + var(--esp-7));
    padding-bottom: var(--esp-7);
  }
}

.topo-pagina__interno {
  max-width: 48rem;
}

.topo-pagina__interno > * + * {
  margin-top: var(--esp-3);
}

.topo-pagina__foto {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
}

/* Planos lado a lado. */
.planos {
  display: grid;
  gap: var(--esp-4);
}

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

/* Planos: cartões sólidos, um em ciano e outro em roxo, a partir do post de
   Instagram da cliente (19/09/2026). O texto continua o do site — o post traz
   descontos, valores e itens que a especificação proíbe publicar.
   Essencial: ciano com texto PRETO (branco sobre ciano dá 2,7:1 e reprova, ao
   contrário do post). Plena: roxo com texto branco (7,0:1). O glow roxo do
   Plena, pedido em 18/09, continua. O vidro fosco saiu: não faz sentido em
   fundo sólido. */
.plano {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-4);
  border-radius: var(--raio);
  transition: transform 260ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.plano--essencial {
  background: var(--fundo);
  color: var(--tinta);
  border: 1px solid var(--linha);
  --plano-linha: var(--linha);
}

.plano--essencial .plano__rotulo {
  color: var(--tinta-2);
}

.plano--essencial .card__lista li::before {
  background: var(--roxo);
}

/* Itens que o Essencial não tem (só o Plena): cinza, com traço no lugar do
   check — a diferença aparece sem precisar comparar as duas colunas. */
.plano .card__lista li.plano__falta {
  color: var(--tinta-2);
  opacity: 0.75;
}

.plano .card__lista li.plano__falta::before {
  top: 1.15em;
  width: 10px;
  height: 2px;
  background: var(--tinta-2);
  -webkit-mask: none;
  mask: none;
}

.plano--completo {
  position: relative;
  overflow: hidden;
  background: var(--roxo);
  color: var(--branco);
  box-shadow: 0 0 60px 4px rgba(89, 71, 183, 0.4);
  --plano-linha: rgba(255, 255, 255, 0.4);
  animation: plano-pulso 3.6s ease-in-out infinite;
}

/* Efeito de luz do Plena (pedido em 19/09/2026): o glow pulsa devagar e uma
   faixa de luz cruza o card de tempos em tempos. Conteúdo fica acima da faixa. */
.plano--completo::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-12deg);
  animation: plano-brilho 5.5s ease-in-out infinite;
  pointer-events: none;
}

.plano--completo > * {
  position: relative;
  z-index: 1;
}

@keyframes plano-pulso {
  0%, 100% { box-shadow: 0 0 40px 2px rgba(89, 71, 183, 0.35); }
  50% { box-shadow: 0 0 80px 10px rgba(120, 100, 230, 0.6); }
}

@keyframes plano-brilho {
  0% { transform: translateX(-160%) skewX(-12deg); }
  45%, 100% { transform: translateX(380%) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .plano--completo,
  .plano--completo::after {
    animation: none;
  }
}

/* Zoom leve ao passar o cursor — pedido da cliente. */
.plano:hover {
  transform: scale(1.025);
}

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

  .plano:hover {
    transform: none;
  }
}

@media (min-width: 1024px) {
  .plano {
    padding: var(--esp-6) var(--esp-5);
  }
}

/* Selo do Plena: estilo discreto (lilás translúcido, sem brilho nem
   movimento, como o da Hostinger), na posição e no tamanho da versão anterior
   — centralizado no topo do card, acima de "Planos". */
.plano__selo {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 8px 18px;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e4dfff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--raio);
}

/* Espaço reservado no Essencial com a altura do selo, só para os dois
   cabeçalhos ficarem alinhados. */
.plano__selo--vazio {
  visibility: hidden;
}
/* Palavras-chave do Plena em ciano claro e negrito. O ciano da marca
   (#00ADCF) sobre o roxo dá 2,6:1 e reprova; este tom, da mesma família, dá 4,7:1. */
.plano__destaque {
  font-weight: 700;
  color: #6be4ff;
}


.plano__cabeca {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  text-align: center;
}

.plano__rotulo {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  padding-left: 0.6em;
}

.plano__logo {
  display: block;
  width: 150px;
  height: 43px;
  background: currentColor;
  -webkit-mask: url('../assets/marca/seal.svg') center / contain no-repeat;
  mask: url('../assets/marca/seal.svg') center / contain no-repeat;
}

/* Logotipo Seal (só a palavra): no Essencial em ciano, cor da marca; no Plena
   em branco. O arquivo é branco, então entra como máscara e ganha a cor daqui. */
.plano--essencial .plano__logo {
  color: var(--ciano);
}

.plano--completo .plano__logo {
  color: var(--branco);
}

.plano__nome {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

.plano .card__lista {
  gap: 0;
}

.plano .card__lista li {
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-5);
  border-bottom: 1px solid var(--plano-linha);
}

/* Pixel de check no lugar do quadrado: máscara, então herda a cor do texto. */
.plano .card__lista li:last-child {
  border-bottom: 0;
}

.plano .card__lista li::before {
  top: 0.95em;
  width: 14px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1z'/%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 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plano .botao {
  margin-top: auto;
  align-self: center;
}


.plano--completo .botao {
  background: var(--branco);
  color: var(--roxo);
}

/* Sobre fundo roxo, no hover o branco vira ciano — não o roxo-escuro do
   `.botao--primario` padrão, que ficaria sem contraste suficiente aqui.
   Texto preto, não branco: branco sobre ciano reprova em AA (design.md
   seção 3.3), a mesma regra de qualquer outro bloco de fundo ciano. */
.plano--completo .botao:hover {
  background: var(--ciano);
  color: var(--preto);
}

/* Prazos contratuais de cada plano, dentro do card (a cliente pediu para
   trazer para dentro de cada plano; a seção "Prazos" separada saiu). */
.plano__prazos {
  display: grid;
  gap: var(--esp-1);
  padding-block: var(--esp-3);
  border-block: 1px solid var(--plano-linha);
  font-size: var(--t-peq);
}

.plano__prazos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
}

.plano__prazos strong {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.secao__cabecalho {
  max-width: 44rem;
  margin-bottom: var(--esp-5);
}

.secao__cabecalho > * + * {
  margin-top: var(--esp-3);
}

/* --- Tipografia --------------------------------------------------------- */

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.titulo-pagina {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.titulo-secao {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.titulo-card {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
}

.texto-guia {
  font-size: var(--t-corpo-g);
  line-height: 1.6;
  max-width: 44rem;
}

.texto {
  max-width: 38rem;
}

.texto + .texto {
  margin-top: var(--esp-3);
}

.nota {
  font-size: var(--t-peq);
  color: var(--tinta-2);
  line-height: 1.5;
}

.eyebrow {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--roxo);
}

/* Eyebrow de seção em ciano e de card em roxo, como no manual:
   o ciano assina o capítulo, o roxo marca o item. */
.secao__cabecalho > .eyebrow,
.topo-pagina__interno > .eyebrow,
.faq .secao__cabecalho > .eyebrow {
  color: var(--ciano-texto);
}

.eyebrow--escuro {
  color: var(--ciano);
}

.eyebrow--hero {
  color: var(--branco);
}

/* --- Pixels decorativos ------------------------------------------------- */

.pixels {
  display: flex;
  gap: var(--esp-1);
}

.pixels span {
  width: 8px;
  height: 8px;
  background: var(--roxo);
}

.pixels span:last-child {
  background: var(--ciano);
}

.pixels--claro span {
  background: var(--branco);
}

.pixels--claro span:last-child {
  background: var(--ciano);
}

/* --- Botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: 0 var(--esp-4);
  border: 2px solid transparent;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao);
}

@media (min-width: 1024px) {
  .botao {
    min-height: 52px;
  }
}

.botao--primario {
  background: var(--roxo);
  color: var(--branco);
}

.botao--primario:hover {
  background: var(--roxo-escuro);
  color: var(--branco);
}

.botao--secundario {
  background: transparent;
  color: var(--roxo);
  border-color: var(--roxo);
}

.botao--secundario:hover {
  background: var(--roxo);
  color: var(--branco);
}

/* Sobre fundo escuro: ciano com texto preto. Branco sobre ciano reprova em AA. */
.botao--ciano {
  background: var(--ciano);
  color: var(--preto);
}

.botao--ciano:hover {
  background: #0294b1;
  color: var(--preto);
}

/* Sobre o hero roxo: branco com texto roxo. */
.botao--branco {
  background: var(--branco);
  color: var(--roxo);
}

.botao--branco:hover {
  background: #ece9f7;
  color: var(--roxo-escuro);
}

.botao--contorno-claro {
  background: transparent;
  color: var(--branco);
  border-color: var(--branco);
}

.botao--contorno-claro:hover {
  background: var(--branco);
  color: var(--roxo);
}

.botao__icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* --- Cabeçalho ---------------------------------------------------------- */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.cabecalho--roxo {
  background: var(--roxo);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--altura-cabecalho);
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  flex: none;
  padding: var(--esp-2) 0;
}

/* O lockup entregue põe "medtech" em duas linhas pequenas ao lado de "seal",
   então a assinatura precisa de mais altura para continuar legível. */
.cabecalho__marca img {
  height: 34px;
  width: auto;
}

@media (min-width: 768px) {
  .cabecalho__marca img {
    height: 40px;
  }
}

.cabecalho__logo--claro {
  display: none;
}

.cabecalho--roxo .cabecalho__logo--escuro {
  display: none;
}

.cabecalho--roxo .cabecalho__logo--claro {
  display: block;
}

.cabecalho__abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  color: var(--tinta);
}

.cabecalho--roxo .cabecalho__abrir {
  color: var(--branco);
}

.cabecalho__abrir svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Navegação: painel de tela cheia no celular. */
.nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  padding: var(--esp-4);
  background: var(--fundo);
  box-shadow: 0 0 0 100vmax rgba(17, 17, 17, 0.4);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--transicao), visibility var(--transicao);
}

.nav[data-aberto='true'] {
  transform: translateY(0);
  visibility: visible;
}

.nav__topo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--altura-cabecalho);
  margin-bottom: var(--esp-4);
}

.nav__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  color: var(--tinta);
}

.nav__fechar svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.nav__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.nav__link {
  display: block;
  padding: var(--esp-3) 0;
  color: var(--tinta);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
}

.nav__link:hover {
  color: var(--roxo);
}

.nav__link[aria-current='page'] {
  color: var(--roxo);
}

.nav__acao {
  margin-top: var(--esp-5);
}

.nav__acao .botao {
  width: 100%;
}

@media (min-width: 900px) {
  .cabecalho__abrir,
  .nav__topo {
    display: none;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--esp-5);
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
  }

  .nav__lista {
    flex-direction: row;
    gap: var(--esp-5);
  }

  .nav__link {
    padding: var(--esp-2) 0;
    font-size: 1rem;
    border-bottom: 2px solid transparent;
  }

  .cabecalho--roxo .nav__link {
    color: var(--branco);
  }

  .cabecalho--roxo .nav__link:hover {
    color: var(--branco);
    border-bottom-color: rgba(255, 255, 255, 0.5);
  }

  /* Página ativa: sublinhado, nunca cor sozinha. */
  .nav__link[aria-current='page'] {
    border-bottom-color: var(--roxo);
  }

  .cabecalho--roxo .nav__link[aria-current='page'] {
    border-bottom-color: var(--branco);
  }

  .nav__acao {
    margin-top: 0;
  }

  .nav__acao .botao {
    width: auto;
  }
}

/* --- Hero da Home ------------------------------------------------------- */

/* Sem overflow aqui: qualquer `overflow` diferente de `visible` num ancestral
   cancela o `position: sticky` do palco. A marca d'água fica contida por
   posicionamento, não por recorte. */
.hero {
  position: relative;
  background: var(--roxo);
  color: var(--branco);
  padding-top: var(--altura-cabecalho);
}

.hero__marca-dagua {
  position: absolute;
  top: calc(var(--altura-cabecalho) + var(--esp-5));
  right: var(--esp-4);
  width: min(38vw, 300px);
  opacity: 0.12;
  pointer-events: none;
}

/* Cresce conforme a rolagem desce. O JavaScript escreve --marca-escala. */
.hero {
  --marca-escala: 1;
}

@media (min-width: 900px) {
  .hero__marca-dagua {
    top: 12%;
    right: 3%;
    width: min(26vw, 340px);
  }
}

.hero__palco {
  position: relative;
}

.hero__fixo {
  padding-block: var(--esp-7);
}

.hero__conteudo {
  position: relative;
}

.hero__canto > * + * {
  margin-top: var(--esp-4);
}

.hero__canto + .hero__canto {
  margin-top: var(--esp-6);
}

.hero__frase {
  display: block;
  margin: 0;
  font-size: var(--t-display-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hero__frase--sub {
  font-size: var(--t-corpo-g);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
}

/* Título em dois pesos: o nome do serviço e o que ele qualifica. */
.hero__titulo {
  display: grid;
  gap: var(--esp-2);
}

.hero__titulo b {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__titulo span {
  font-size: var(--t-display-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}


/* No celular o equipamento é um bloco comum, depois do texto.
   No desktop ele vira a camada de trás do hero inteiro.
   As imagens já vêm com fundo transparente, então não há moldura, véu nem
   `mix-blend-mode`: o equipamento assenta direto sobre o roxo. */
.hero__fundo {
  position: relative;
  margin-top: var(--esp-6);
  aspect-ratio: 16 / 9;
}

.hero__fundo canvas,
.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__canvas {
  display: none;
}

.hero__rolar {
  display: none;
}

/* Desktop e tablet: o equipamento ocupa o fundo do hero inteiro, em `screen`
   sobre o roxo. Sem véu e sem gradiente. O equipamento se desloca para o lado
   oposto ao texto ativo, então os dois nunca se cruzam e o texto branco fica
   sempre sobre roxo cheio. */
/* Rolagem controlada em qualquer largura de tela — pedido da cliente em
   17/09/2026, ciente do risco: o `<canvas>` redesenha a cada quadro de
   rolagem, e isso pesa mais em aparelho fraco do que um quadro estático.
   Essas regras eram exclusivas de telas ≥900px; agora valem sempre. A faixa
   de texto em duas colunas fica estreita em celular — ver o ajuste de fonte
   e largura logo abaixo, em @media (max-width: 479px). */

/* Símbolo atrás de tudo, no centro, crescendo com a rolagem. */
.hero__marca-dagua {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(30vw, 420px);
  opacity: 0.1;
  transform: translate(-50%, -50%) scale(var(--marca-escala));
  transform-origin: center;
  will-change: transform;
}

.hero__palco {
  height: 160vh;
}

.hero__fixo {
  position: sticky;
  top: var(--altura-cabecalho);
  height: calc(100vh - var(--altura-cabecalho));
  padding-block: 0;
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  aspect-ratio: auto;
}

.hero__canvas {
  display: block;
}

.hero__estatico {
  display: none;
}

/* Três cantos de texto e o equipamento na faixa do meio. O JavaScript mede
   essa faixa e encaixa o equipamento nela, então nenhum texto é coberto. */
.hero__conteudo {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--esp-4);
  height: 100%;
  /* O primeiro texto fica longe do topo, a pedido da cliente. */
  padding-block: var(--esp-7) var(--esp-4);
}

/* Um bloco de cada vez. `visibility` entra junto para que o bloco oculto saia
   também da ordem de tabulação, não só da vista. */
.hero__canto {
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 420ms cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 420ms cubic-bezier(0.2, 0.6, 0.2, 1),
    visibility 0s linear 420ms;
  pointer-events: none;
}

.hero__canto[data-visivel='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 420ms cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 420ms cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s;
}

/* Os blocos são posicionados pela grade, não empilhados — a regra de
   empilhamento simples definida lá em cima precisa ser desfeita aqui, e as
   regras de posição abaixo levam `.hero__conteudo` só para empatar em
   especificidade. */
.hero__canto + .hero__canto {
  margin-top: 0;
}

.hero__conteudo .hero__canto--topo-esq {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  /* Desce do topo, a pedido da cliente. Proporcional à altura da janela: em
     tela baixa um empurrão fixo de 144px não deixaria espaço para o
     equipamento. O bloco 2 fica preso ao topo da mesma linha e não desce. */
  margin-top: clamp(0px, calc(100vh - 940px), 144px);
  max-width: 30rem;
}

.hero__canto--topo-esq .hero__titulo b {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 2.75rem);
}

.hero__conteudo .hero__canto--topo-dir {
  grid-area: 1 / 2;
  justify-self: end;
  align-self: start;
  /* Desce mais que o bloco 1, a pedido da cliente. Mesma trava por altura de
     janela: em tela baixa não desce, senão encosta no equipamento. */
  margin-top: clamp(0px, calc(100vh - 940px), 216px);
  max-width: 24rem;
  text-align: right;
}

.hero__conteudo .hero__canto--base-dir {
  grid-area: 3 / 2;
  justify-self: end;
  align-self: end;
  /* Sobe do rodapé do hero, a pedido da cliente. Proporcional à altura da
     janela, com piso de 48px para não colar no rodapé em tela baixa. */
  margin-bottom: clamp(48px, calc(100vh - 780px), 500px);
  /* Um pouco mais estreito que os outros: puxa a borda esquerda para a direita
     e tira o texto de cima da tampa do equipamento quando ele está aberto. */
  max-width: 22rem;
  text-align: right;
}

.hero__rolar {
  display: block;
  grid-area: 3 / 1;
  align-self: end;
  justify-self: start;
  margin: 0;
  font-size: var(--t-peq);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 900px) {
  .hero__conteudo {
    column-gap: var(--esp-6);
  }
}

@media (min-width: 1024px) {
  .hero__palco {
    height: 200vh;
  }
}

/* Celular e tablet estreito (< 900px): a mesma câmera fixa do desktop —
   palco `sticky`, foto em tela cheia atrás do texto, equipamento grande,
   nunca embaixo do texto nem pequeno — só a coluna de texto muda: no
   desktop os três blocos ficam em cantos diferentes (grade de duas
   colunas); aqui, sem largura para isso, os três ocupam o mesmo lugar (o
   topo) e se revezam, um de cada vez.
   Histórico do mesmo dia (18/09/2026): a cliente pediu primeiro que a
   máquina virasse um bloco comum abaixo do texto (diagramação empilhada,
   sem `sticky`); depois de ver o resultado, pediu exatamente o contrário —
   a máquina fixa no lugar, grande, com o texto some/aparece por cima dela
   enquanto ela abre. Esta regra substitui a versão empilhada; nada dela
   sobrou. */
@media (max-width: 899px) {
  .hero__conteudo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Os três textos ocupam a mesma célula da grade (o topo) e se revezam por
     `data-visivel`, igual ao desktop — só não ficam espalhados em cantos
     diferentes, porque não cabem lado a lado numa tela estreita. */
  .hero__conteudo .hero__canto--topo-esq,
  .hero__conteudo .hero__canto--topo-dir,
  .hero__conteudo .hero__canto--base-dir {
    grid-area: 1 / 1;
    justify-self: stretch;
    align-self: start;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
    text-align: left;
  }

  /* Textos 2 e 3: menores que o título do bloco 1 (a igualdade total ficou
     grande demais, a cliente pediu para reduzir), mas ainda de peso maior
     que a frase de apoio original. E descem para o meio da tela reservada,
     por cima do símbolo d'água — a cliente marcou essa posição, mesmo
     sabendo que vai sobrepor o símbolo. */
  .hero__canto--topo-dir .hero__frase,
  .hero__canto--base-dir .hero__frase {
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .hero__conteudo .hero__canto--topo-dir,
  .hero__conteudo .hero__canto--base-dir {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__palco {
    height: auto;
  }

  .hero__fixo {
    position: static;
    height: auto;
    padding-block: var(--esp-7);
  }

  .hero__conteudo {
    display: block;
    height: auto;
    padding-block: 0;
  }

  .hero__canto {
    grid-area: auto;
    max-width: none;
    text-align: left;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .hero__canto + .hero__canto {
    margin-top: var(--esp-6);
  }

  .hero__marca-dagua {
    transform: none;
  }

  .hero__fundo {
    position: relative;
    inset: auto;
    margin-top: var(--esp-6);
    aspect-ratio: 16 / 9;
  }

  .hero__canvas {
    display: none;
  }

  .hero__estatico {
    display: block;
  }

  .hero__rolar {
    display: none;
  }
}

/* --- Faixa de prova ----------------------------------------------------- */

.provas {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}

.prova {
  padding: var(--esp-5) var(--esp-4);
  background: var(--fundo);
}

.prova__valor {
  display: block;
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--roxo);
  font-variant-numeric: tabular-nums;
}

.prova__rotulo {
  margin-top: var(--esp-2);
  font-weight: 600;
}

.prova__ressalva {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--t-peq);
  font-weight: 400;
  color: var(--tinta-2);
}

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

/* --- Grades e cards ----------------------------------------------------- */

.grade {
  display: grid;
  gap: var(--esp-4);
}

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

  .grade--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.card {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: border-color var(--transicao);
}

@media (min-width: 1024px) {
  .card {
    padding: var(--esp-5);
  }
}

.card:hover {
  border-color: var(--roxo);
}

.card--destaque {
  border-color: var(--roxo);
  border-width: 2px;
}

.card__link {
  margin-top: auto;
  padding-top: var(--esp-2);
  font-weight: 600;
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
}

.card__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.card__lista li {
  position: relative;
  padding-left: var(--esp-4);
}

.card__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--ciano);
}

/* --- Passos numerados --------------------------------------------------- */

.passos {
  display: grid;
  gap: 0;
  counter-reset: passo;
}

.passo {
  display: grid;
  gap: var(--esp-2);
  padding-block: var(--esp-4);
  border-top: 1px solid var(--linha);
}

.passo:last-child {
  border-bottom: 1px solid var(--linha);
}

.passo__numero {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--roxo);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .passo {
    grid-template-columns: 64px minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--esp-4);
    align-items: start;
  }
}

/* --- Seção de fundo roxo cheio (uso pontual) ----------------------------- */
/* Terceira área roxa do site — exceção liberada pela cliente em 18/09/2026
   para a seção "Do início ao fim", de Serviços. A regra geral do design.md
   seção 2.0 segue valendo para qualquer outra seção: no máximo as já
   registradas (hero da Home, imersiva de Serviços na Home, e esta). */
.secao--roxa {
  position: relative;
  /* Prende o multiply da foto de fundo (.secao__foto) a esta seção. */
  isolation: isolate;
  overflow: hidden;
  background: var(--roxo);
  color: var(--branco);
}

/* Cartões de trás do carrossel: em vez de escurecer para cinza, ganham uma
   camada roxa proporcional à profundidade (--tingir, definido pelo JS). */
.carrossel-passos__cartao::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--roxo);
  opacity: var(--tingir, 0);
  pointer-events: none;
}

/* --- Carrossel de profundidade (cards claros sobre fundo roxo) ----------- */
/* "Do início ao fim", em Serviços. Terceira versão da interação, mesmo dia
   das duas anteriores (lista com galeria horizontal, depois lista vertical
   em escala). A cliente pediu para tentar de novo com base no
   `DepthCarousel` do React Bits: pilha de cartões em profundidade, um na
   frente nítido e legível, os outros atrás, girados e borrados. Diferente
   das duas tentativas anteriores, aqui só o passo da frente fica legível —
   os outros seis exigem navegação (arrastar, setas ou clicar no cartão)
   antes de poderem ser lidos. Decisão explícita da cliente depois de eu
   avisar dessa troca de modelo; ver @memoria.md.
   Sem framework — a referência usa GSAP, portado em JS puro
   (`js/carrossel-processo.js`) com um laço de `requestAnimationFrame` e
   interpolação com facilitação, no lugar do tween do GSAP. Os cards
   continuam claros — o roxo fica só no fundo da seção. */
.carrossel-passos {
  position: relative;
  min-height: 360px;
  margin-top: var(--esp-4);
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;
  outline: none;
  cursor: grab;
}

.carrossel-passos:active {
  cursor: grabbing;
}

.carrossel-passos:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 4px;
}

@media (min-width: 900px) {
  .carrossel-passos {
    min-height: 460px;
  }
}

.carrossel-passos__palco {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.carrossel-passos__cartao {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(440px, 84%);
  padding: var(--esp-5);
  background: var(--fundo);
  color: var(--tinta);
  border-radius: var(--raio);
  /* Sombra funcional, não decorativa: é o que faz os cartões de trás lerem
     como "atrás" em vez de só borrados. Mesmo raciocínio de exceção do
     glow dos planos (design.md seção 11) — vale só aqui. */
  box-shadow: 0 24px 48px -20px rgba(17, 17, 17, 0.4);
  will-change: transform, opacity, filter;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.carrossel-passos__pixel {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-bottom: var(--esp-3);
  background: var(--roxo);
}

.carrossel-passos__num {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.carrossel-passos__rotulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

.carrossel-passos__texto {
  margin: 0;
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta-2);
}

.carrossel-passos__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Os cartões chegam a z-index ~2000 (7 passos, 20 de intervalo cada) —
     os controles precisam ficar acima de todos eles, sempre. */
  z-index: 3000;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  /* Fundo cheio, não contorno: a seta passa boa parte do tempo sobreposta
     ao cartão claro da frente, e um contorno sobre fundo branco fica
     apagado ali — só apareceria na faixa roxa da seção. Ciano com ícone
     preto: branco sobre ciano reprova em AA (design.md seção 3.3), mesma
     regra já aplicada em qualquer outro bloco de fundo ciano do site. */
  background: var(--ciano);
  color: var(--preto);
  border: none;
  border-radius: var(--raio);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.25);
  transition: background-color var(--transicao);
}

.carrossel-passos__seta:hover {
  background: #0294b1;
}

.carrossel-passos__seta svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Posição presa à borda do próprio cartão (não à borda da seção), com um
   respiro fixo — `min(220px, 42%)` repete a metade da largura do cartão
   (`width: min(440px, 84%)`, ver `.carrossel-passos__cartao`). Respiro
   menor no celular (a tela já é estreita, um respiro grande empurraria a
   seta pra fora); a partir de 900px o respiro dobra — a primeira versão
   (mesmo respiro nas duas larguras) deixou as setas coladas demais no
   cartão em tela larga, e a cliente pediu mais distância.
   `max(8px, ...)` é o piso: em tela estreita a conta pode dar negativo
   (cartão quase do tamanho da seção, sem sobra pro respiro de 48px) — sem
   o piso a seta saía cortada pela borda do `.carrossel-passos`
   (`overflow: hidden`), exatamente o que a cliente reportou no celular. */
.carrossel-passos__seta--anterior {
  left: max(8px, calc(50% - min(220px, 42%) - var(--esp-6)));
}

.carrossel-passos__seta--proxima {
  right: max(8px, calc(50% - min(220px, 42%) - var(--esp-6)));
}

@media (min-width: 900px) {
  .carrossel-passos__seta--anterior {
    left: max(8px, calc(50% - min(220px, 42%) - (var(--esp-6) * 2)));
  }

  .carrossel-passos__seta--proxima {
    right: max(8px, calc(50% - min(220px, 42%) - (var(--esp-6) * 2)));
  }
}

.carrossel-passos__pontos {
  position: absolute;
  bottom: var(--esp-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  gap: 8px;
}

.carrossel-passos__ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color var(--transicao), width var(--transicao);
}

.carrossel-passos__ponto.is-ativo {
  width: 22px;
  background: var(--branco);
}

/* Sem JS ou com movimento reduzido: nada de pilha 3D — os sete passos
   voltam a ser uma lista vertical simples, todos legíveis de uma vez.
   Conteúdo primeiro, efeito depois. */
.sem-js .carrossel-passos,
[data-carrossel][data-reduzido='true'] {
  position: static;
  min-height: 0;
  overflow: visible;
  perspective: none;
  cursor: auto;
}

.sem-js .carrossel-passos__palco,
[data-carrossel][data-reduzido='true'] .carrossel-passos__palco {
  position: static;
  display: grid;
  gap: var(--esp-3);
}

.sem-js .carrossel-passos__cartao,
[data-carrossel][data-reduzido='true'] .carrossel-passos__cartao {
  position: static;
  width: 100%;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.sem-js .carrossel-passos__seta,
.sem-js .carrossel-passos__pontos,
[data-carrossel][data-reduzido='true'] .carrossel-passos__seta,
[data-carrossel][data-reduzido='true'] .carrossel-passos__pontos {
  display: none;
}

/* --- Bloco alternado texto + imagem ------------------------------------- */

.alternado {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}

@media (min-width: 900px) {
  .alternado {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-7);
  }

  .alternado--invertido .alternado__texto {
    order: 2;
  }
}

.alternado__texto > * + * {
  margin-top: var(--esp-3);
}

/* Variante enxuta: texto ao lado do selo — a coluna da imagem encolhe para o
   tamanho dela, em vez de dividir a largura meio a meio. Usada na seção
   Essência, de Sobre. O selo entrou grande a pedido da cliente ("ocupar toda
   essa parte"), então no desktop ele domina a célula, esticado (`stretch`)
   para acompanhar a altura de todo o texto ao lado — título, intro e o bloco
   "Seal é selo" —, não só do bloco menor de baixo, para ficar mais para
   cima, como a cliente marcou num print. */
.alternado--selo {
  align-items: center;
  justify-items: start;
}

@media (min-width: 900px) {
  .alternado--selo {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--esp-6);
    align-items: stretch;
  }
}

/* O selo é inline (não <img>) só para poder animar o anel de texto separado
   do símbolo no centro — um <img> trata o SVG como bitmap fechado, sem
   acesso aos grupos internos. */
.selo-seal {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}

@media (min-width: 900px) {
  .selo-seal {
    max-width: 440px;
    align-self: center;
  }
}

/* O texto gira devagar ao redor do símbolo, que fica parado — como um selo
   girando sobre o centro fixo. Origem no centro exato do viewBox
   (595,28 / 2), não em porcentagem: a caixa do texto é um anel, não um
   círculo cheio, e centralizar pela própria caixa (fill-box) giraria fora
   de eixo. */
.selo-seal__texto {
  transform-origin: 297.64px 297.64px;
  animation: selo-girar 40s linear infinite;
}

@keyframes selo-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .selo-seal__texto {
    animation: none;
  }
}

/* --- Placeholder de imagem ---------------------------------------------- */

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  aspect-ratio: 3 / 2;
  text-align: center;
}

.placeholder--retrato {
  aspect-ratio: 4 / 5;
}

.placeholder__marca {
  width: 72px;
  height: auto;
  opacity: 0.2;
}

/* Ilustração maior do próprio Handymet (em vez do mascote genérico), usada
   no placeholder do aparelho reserva, em Serviços. */
.placeholder__marca--handymet {
  width: 200px;
  opacity: 0.3;
}

.placeholder__texto {
  font-size: var(--t-peq);
  color: var(--tinta-2);
  max-width: 22rem;
}

/* --- Página de erro (404) ------------------------------------------------ */
/* Página inteira em roxo, sem cabeçalho nem rodapé — pedido explícito da
   cliente em 02/10/2026. Nova exceção de área roxa cheia (design.md §2.0),
   restrita a esta página utilitária. Segue o mesmo tratamento de texto e
   botão do hero sobre fundo roxo: título e eyebrow em branco, texto de
   apoio em branco a 78% (a mesma regra de contraste da seção imersiva),
   botão primário branco com texto roxo, secundário com contorno claro. */
.erro-tela {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--esp-4);
  background: var(--roxo);
  color: var(--branco);
}

.erro__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--esp-4);
  max-width: 36rem;
}

.erro__interno .texto-guia {
  color: rgba(255, 255, 255, 0.78);
  max-width: 28rem;
}

.erro__gif {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-block: var(--esp-2);
}

.erro-tela .acoes {
  justify-content: center;
}

/* --- Faixa escura ------------------------------------------------------- */

.faixa-escura {
  background: var(--preto);
  color: var(--branco);
}

.faixa-escura a:not(.botao) {
  color: var(--ciano);
}

.faixa-escura .texto-guia,
.faixa-escura .texto {
  color: rgba(255, 255, 255, 0.88);
}

.faixa-escura .nota {
  color: rgba(255, 255, 255, 0.7);
}

.tagline {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.chamada-final {
  display: grid;
  gap: var(--esp-5);
  text-align: center;
  justify-items: center;
}

.chamada-final .acoes {
  justify-content: center;
}

/* --- Contato ------------------------------------------------------------ */

/* Grade da página de Contato: três colunas separadas por filete (info,
   mapa, área de atendimento), no espírito da referência da cliente. Sem
   fundo colorido cheio — a referência usa um painel amarelo, aqui o painel
   fica em --fundo-2 para não abrir uma quarta área de cor cheia. */
.contato-grade {
  display: grid;
  gap: 1px;
  background: var(--linha);
}

.contato-area {
  display: grid;
  gap: 1px;
  align-content: start;
  background: var(--linha);
}

.contato-area {
  display: block;
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}

/* Formulário: duas colunas (texto à esquerda, campos à direita), cantos
   retos como o resto do site. */
.contato-formulario {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--borda-lateral);
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}

.contato-formulario__intro {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
}

.form-contato {
  display: grid;
  gap: var(--esp-3);
}

.form-contato__par {
  display: grid;
  gap: var(--esp-3);
}

.form-contato__campo {
  display: grid;
  gap: var(--esp-1);
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--tinta);
}

.form-contato input,
.form-contato select,
.form-contato textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 0;
}

.form-contato textarea {
  resize: vertical;
}

.form-contato input:focus-visible,
.form-contato select:focus-visible,
.form-contato textarea:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
  border-color: var(--roxo);
}

.form-contato__armadilha {
  position: absolute;
  left: -9999px;
}

.form-contato .botao {
  justify-self: start;
}

.form-contato__status {
  min-height: 1.5em;
  font-size: var(--t-peq);
  font-weight: 600;
}

.form-contato__status[data-estado='ok'] {
  color: var(--roxo);
}

.form-contato__status[data-estado='erro'] {
  color: #b3261e;
}

@media (min-width: 900px) {
  .contato-formulario {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--esp-6);
    padding: var(--esp-6) var(--esp-5);
  }

  .form-contato__par {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Linha de contatos em forma de botão (WhatsApp, LinkedIn, Instagram), no
   espírito da referência: cartões brancos sobre uma faixa cinza. Cantos com
   o raio da marca, não redondos. */
.contato-botoes {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--borda-lateral);
  background: var(--fundo);
}

.contato-botao {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

/* Glow roxo no hover — pedido da cliente; exceção à regra de sem sombra difusa
   (design.md seção 11), restrita a estes botões. */
.contato-botao:hover,
.contato-botao:focus-visible {
  border-color: var(--roxo);
  box-shadow: 0 0 22px 2px rgba(89, 71, 183, 0.4);
  color: var(--tinta);
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .contato-botao:hover,
  .contato-botao:focus-visible {
    transform: none;
  }
}

.contato-botao .contato-icone {
  flex: none;
  margin-bottom: 0;
}

.contato-botao__rotulo {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--roxo);
}

.contato-botao__valor {
  display: block;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .contato-botoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--esp-6) var(--esp-4);
  }
}

/* Layout atual: WhatsApp em cima; mapa com o endereço embaixo à esquerda e o
   formulário à direita; fotos em banner duplo; área de atendimento. */
.contato-principal {
  display: grid;
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}

.contato-mapa-coluna {
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--linha);
  gap: 1px;
}

.contato-endereco {
  background: var(--fundo-2);
}

.contato-principal .contato-formulario {
  border-top: 0;
}

.contato-banner-duplo {
  border-top: 1px solid var(--linha);
}

.contato-banner-duplo .contato-fotos {
  grid-template-columns: 1fr;
}

.contato-banner-duplo .contato-foto {
  min-height: 260px;
}

/* Célula do WhatsApp: ícone ao lado do texto, não em cima. */
.contato-area__titulo .contato-bloco__valor {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.contato-area__logo {
  width: 200px;
  height: auto;
  margin-bottom: var(--esp-3);
}

@media (min-width: 900px) {
  .contato-principal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .contato-principal .mapa.mapa--alto {
    min-height: 380px;
  }

  .contato-principal .contato-formulario {
    grid-template-columns: 1fr;
    gap: var(--esp-4);
    border-left: 1px solid var(--linha);
    align-content: start;
  }

  .contato-banner-duplo .contato-fotos {
    grid-template-columns: 1fr 1fr;
  }

  .contato-banner-duplo .contato-foto {
    min-height: 340px;
  }
}

.contato-area__titulo {
  display: grid;
  gap: var(--esp-2);
  justify-items: center;
  padding: var(--esp-5) var(--borda-lateral);
  text-align: center;
}

.contato-area__linha {
  display: grid;
  gap: 0;
  background: var(--fundo);
}

.contato-fotos {
  display: grid;
  gap: 1px;
  background: var(--linha);
}

.contato-foto {
  margin: 0;
  min-height: 200px;
  background: var(--fundo-2);
  overflow: hidden;
}

.contato-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-servicos--contato {
  min-height: 280px;
}

/* Página de política de privacidade: texto corrido com medida de leitura. */
.politica {
  display: grid;
  gap: var(--esp-3);
  max-width: 44rem;
}

.politica .titulo-card {
  margin-top: var(--esp-4);
}

.politica a {
  color: var(--roxo);
}

.politica__tabela {
  overflow-x: auto;
  border: 1px solid var(--linha);
}

.politica__tabela table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-peq);
}

.politica__tabela th,
.politica__tabela td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
}

.politica__tabela th {
  font-weight: 600;
  background: var(--fundo-2);
}

/* Aviso de cookies, no espírito do da Hostinger: título, texto e três ações
   (aceitar, rejeitar, configurar). Cantos retos, sem sombra difusa. */
.cookies {
  position: fixed;
  left: var(--esp-3);
  right: var(--esp-3);
  bottom: var(--esp-3);
  z-index: 300;
  display: grid;
  gap: var(--esp-3);
  max-width: 46rem;
  padding: var(--esp-4);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--roxo);
  border-radius: var(--raio);
}

.cookies__titulo {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
}

.cookies__texto {
  margin: 0;
  font-size: var(--t-peq);
  line-height: 1.55;
}

.cookies__texto a {
  color: var(--roxo);
  font-weight: 600;
}

.cookies__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}

.cookies__config {
  padding: 8px 4px;
  font: inherit;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--roxo);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.cookies__opcao {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-peq);
}

.cookies__desc {
  display: block;
  margin-top: 2px;
  color: var(--tinta-2);
  line-height: 1.5;
}

.cookies__opcao input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--roxo);
}

@media (max-height: 640px) {
  .cookies {
    max-height: calc(100vh - 2 * var(--esp-3));
    overflow-y: auto;
  }
}

/* Celular: caixa mais compacta — a versão de desktop ocupava tela demais. */
@media (max-width: 767px) {
  .cookies {
    left: var(--esp-2);
    right: var(--esp-2);
    bottom: var(--esp-2);
    gap: var(--esp-2);
    padding: var(--esp-3);
    max-height: calc(100vh - 2 * var(--esp-2));
    overflow-y: auto;
  }

  .cookies__titulo {
    font-size: var(--t-corpo-g);
  }

  .cookies__texto {
    font-size: 13px;
    line-height: 1.45;
  }

  .cookies__acoes {
    gap: var(--esp-1) var(--esp-2);
  }

  .cookies__acoes .botao {
    height: 44px;
    padding-inline: var(--esp-3);
    font-size: var(--t-peq);
  }

  .cookies__config {
    padding: 4px;
  }

  .cookies__opcao {
    padding-block: var(--esp-1);
  }
}
/* Mapa ainda bloqueado (sem consentimento): mensagem e botão. */
.mapa__bloqueado {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  text-align: center;
  font-size: var(--t-peq);
  background: var(--fundo-2);
}

[data-mapa][data-carregado='true'] .mapa__bloqueado {
  display: none;
}

.rodape__link {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Foto dos sócios (Sobre) ocupando toda a largura da grade, sem respiro. */
.secao--foto-cheia {
  padding-block: 0;
}

.secao--foto-cheia > .container {
  max-width: none;
  padding-inline: 0;
}

.secao--foto-cheia .placeholder,
.secao--foto-cheia img:not(.placeholder__marca) {
  width: 100%;
  border: 0;
  border-radius: 0;
}

/* Banner de "Nossos serviços" colado na grade: encosta nos trilhos e na
   seção de planos acima, e na grade de serviços abaixo. */
#tipos {
  padding-top: 0;
}

#tipos > .container {
  max-width: none;
  padding-inline: 0;
}

#tipos .banner-servicos {
  border-radius: 0;
}

.banner-servicos__texto {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--esp-3);
  max-width: 34rem;
  color: var(--branco);
}

.banner-servicos__texto .eyebrow,
.banner-servicos__texto .texto-guia {
  color: var(--branco);
}

/* Banner colado na grade: sem respiro em volta, encosta nos trilhos, no
   cabeçalho e na faixa de contatos logo abaixo. */
.topo-pagina--banner {
  padding-top: var(--altura-cabecalho);
  padding-bottom: 0;
  border-bottom: 0;
}

.topo-pagina--banner > .container {
  max-width: none;
  padding-inline: 0;
}

.topo-pagina--banner .banner-servicos {
  border-radius: 0;
}

@media (min-width: 900px) {
  .banner-servicos--contato {
    min-height: 380px;
  }

  .contato-area__linha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contato-bloco__valor--email {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.secao--contato {
  padding-block: 0;
}

.contato-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--borda-lateral);
  background: var(--fundo);
}

/* Ícones em pixel art, desenhados na grade do símbolo da marca (não uma
   biblioteca de ícones de linha). Bloco quadrado roxo, ícone branco. */
.contato-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--esp-2);
  background: var(--roxo);
  color: var(--branco);
}

.contato-icone__svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.contato-bloco__titulo {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--roxo);
}

.contato-bloco__valor {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.contato-bloco__valor a {
  text-decoration: none;
}

.contato-bloco__valor a:hover {
  text-decoration: underline;
}

.contato-bloco .acoes {
  margin-top: var(--esp-2);
}

.mapa.mapa--alto {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
}

/* O cartão que o Google desenha no canto do mapa diz "Vila Carrão" para
   este endereço (é o bairro que o Google atribui à rua, não dá para editar).
   O iframe sobe 120px e o excesso fica cortado pelo .mapa, escondendo o
   cartão; a base (créditos do mapa) continua visível. */
.mapa.mapa--alto iframe {
  position: absolute;
  top: -120px;
  left: 0;
  height: calc(100% + 120px);
}

@media (min-width: 900px) {
  .contato-grade {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .contato-bloco {
    padding: var(--esp-5);
  }

  .mapa.mapa--alto {
    aspect-ratio: auto;
    min-height: 480px;
  }
}
/* --- Acordeão ----------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 1024px) {
  .faq {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--esp-7);
    align-items: start;
  }
}

.acordeao {
  border-top: 1px solid var(--linha);
}

.acordeao__item {
  border-bottom: 1px solid var(--linha);
}

.acordeao__titulo {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.acordeao__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  width: 100%;
  min-height: 56px;
  padding: var(--esp-3) 0;
  text-align: left;
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  transition: color var(--transicao);
}

.acordeao__botao:hover {
  color: var(--roxo);
}

.acordeao__icone {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.acordeao__icone::before,
.acordeao__icone::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--roxo);
  transform: translate(-50%, -50%);
  transition: transform var(--transicao), opacity var(--transicao);
}

.acordeao__icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acordeao__botao[aria-expanded='true'] .acordeao__icone::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.acordeao__painel[data-aberto='true'] {
  grid-template-rows: 1fr;
}

.acordeao__conteudo {
  overflow: hidden;
}

.acordeao__conteudo > div {
  padding-bottom: var(--esp-4);
  max-width: 44rem;
}

.acordeao__conteudo p + p {
  margin-top: var(--esp-3);
}

/* --- Pessoas ------------------------------------------------------------ */

.pessoas {
  display: grid;
  gap: var(--esp-6);
}

.pessoa {
  display: grid;
  gap: var(--esp-4);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--linha);
}

@media (min-width: 900px) {
  .pessoa {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--esp-6);
  }

  /* Quebra no meio com filete vertical, como o resto da grade técnica —
     só a foto na coluna da esquerda; nome, função e texto na da direita. */
  .pessoa > div + div {
    padding-left: var(--esp-6);
    border-left: 1px solid var(--linha);
  }
}

.pessoa__nome {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
}

.pessoa__cargo {
  margin-top: var(--esp-1);
  color: var(--tinta-2);
  font-weight: 600;
}

.pessoa__retrato {
  max-width: 220px;
}

/* Fecho centralizado da seção, depois dos três cards — mesma lógica de
   centralização da .chamada-final, mas sem faixa escura em volta. */
.pessoas__fecho {
  margin-top: var(--esp-7);
  display: grid;
  justify-items: center;
  gap: var(--esp-5);
  text-align: center;
}

.pessoas__fecho .citacao {
  border-left: 0;
  padding-left: 0;
}

.pessoas__fecho .acoes {
  justify-content: center;
}

/* --- Citação ------------------------------------------------------------ */

.citacao {
  padding-left: var(--esp-4);
  border-left: 3px solid var(--roxo);
  font-size: var(--t-corpo-g);
  line-height: 1.5;
  font-weight: 600;
  max-width: 34rem;
}

.faixa-escura .citacao {
  border-left-color: var(--ciano);
  color: var(--branco);
}

/* --- Lista simples de checagem ------------------------------------------ */

.lista-marcada {
  display: grid;
  gap: var(--esp-2);
  max-width: 44rem;
}

.lista-marcada li {
  position: relative;
  padding-left: var(--esp-4);
}

.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--roxo);
}

/* --- Tabela de prazos --------------------------------------------------- */

.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.tabela {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tabela th,
.tabela td {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  border-bottom: 1px solid var(--linha);
}

.tabela thead th {
  background: var(--preto);
  color: var(--branco);
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody th {
  font-weight: 600;
}

/* --- Rodapé ------------------------------------------------------------- */

.rodape {
  background: var(--preto);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--esp-7) var(--esp-5);
}

.rodape a {
  color: var(--branco);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--ciano);
  text-decoration: underline;
}

.rodape__grade {
  display: grid;
  gap: var(--esp-6);
}

.rodape__grade > * {
  min-width: 0;
}

.rodape__lista a,
.rodape__lista address {
  overflow-wrap: anywhere;
}

/* Tablet: a assinatura ocupa a linha de cima e Páginas/Contato dividem a de
   baixo — em três colunas o e-mail estourava a coluna de Contato. */
@media (min-width: 768px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--esp-5);
  }

  .rodape__grade > :first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .rodape__grade > :first-child {
    grid-column: auto;
  }
}

.rodape__marca img {
  height: 36px;
  width: auto;
}

.rodape__assinatura {
  margin-top: var(--esp-3);
  max-width: 24rem;
  font-size: var(--t-peq);
  line-height: 1.5;
}

.rodape__titulo {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ciano);
  margin-bottom: var(--esp-3);
}

.rodape__lista {
  display: grid;
  gap: var(--esp-2);
}

/* ==========================================================================
   GRADE TÉCNICA — só desktop
   Trilhos verticais, filetes horizontais e linhas numeradas.
   Direção aprovada a partir de referencias/sstr-print2.png.
   No celular nada disso entra: lá o empilhamento simples já foi aprovado.
   ========================================================================== */

/* Seções da grade não têm padding próprio: cada célula paga o seu. */
.secao--grade {
  padding-block: 0;
}

.par-tec__lado {
  padding: var(--esp-6) var(--borda-lateral);
}

/* Empilhado no celular, as duas células não somam padding entre si. */
@media (max-width: 899px) {
  .par-tec__lado + .par-tec__lado {
    padding-top: 0;
  }
}

.par-tec__lado > * + * {
  margin-top: var(--esp-3);
}

.par-tec__lado .acoes,
.par-tec__lado .lista-tec {
  margin-top: var(--esp-5);
}

/* Declaração: uma seção inteira ocupada por uma frase centralizada. */
.declaracao {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  padding-block: var(--esp-7);
  text-align: center;
}

@media (min-width: 1024px) {
  .declaracao {
    padding-block: var(--esp-8);
  }
}

.declaracao__titulo {
  max-width: 20ch;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.declaracao__texto {
  max-width: 34rem;
  font-size: var(--t-corpo-g);
  color: var(--tinta-2);
}

.lista-tec {
  border-top: 1px solid var(--linha);
}

.lista-tec__item {
  display: grid;
  grid-template-columns: 8px 2.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-3);
  padding-block: var(--esp-4);
  border-bottom: 1px solid var(--linha);
  transition: background-color var(--transicao);
}

.lista-tec__pixel {
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  background: var(--roxo);
  transition: background-color var(--transicao);
}

.lista-tec__num {
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  padding-top: 0.15em;
}

.lista-tec__rotulo {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lista-tec__nota {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--t-peq);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-2);
}

a.lista-tec__item {
  color: inherit;
  text-decoration: none;
}

a.lista-tec__item:hover {
  background: var(--fundo-2);
}

a.lista-tec__item:hover .lista-tec__pixel {
  background: var(--ciano);
}

/* Painel de mídia com cantos chanfrados: o corte é vocabulário de pixel,
   e substitui o raio, que a marca não usa. */
.painel-tec {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--esp-5);
  background: var(--fundo-2);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
}

.painel-tec img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Os quadros do equipamento são sobre preto, então o painel que os recebe
   também é preto. Sobre cinza claro sobraria um retângulo preto solto. */
.painel-tec--escuro {
  background: var(--preto);
  padding: var(--esp-4);
}

.painel-tec__legenda {
  position: absolute;
  left: var(--esp-4);
  bottom: var(--esp-4);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.painel-tec--escuro .painel-tec__legenda {
  color: var(--ciano);
}

/* --- Grade de casos (Serviços · "O que exatamente é feito") ------------- */
/* Referência: um site de cases técnicos que a cliente enviou (CCTP) —
   células grandes, rótulo pequeno no topo, um nome enorme no meio, duas
   linhas de metadado com quadrado colorido embaixo, e um link discreto no
   canto inferior direito. Mesma técnica de "grade sem caixa" das outras
   seções (`.provas`): gap de 1px com fundo `--linha` faz as próprias
   células desenharem o filete entre elas. */
.grade-casos {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}

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

.caso {
  background: var(--fundo);
}

.caso--destaque {
  background: var(--fundo-2);
}

.caso__link {
  position: relative;
  display: block;
  height: 100%;
  min-height: 280px;
  color: inherit;
  overflow: hidden;
  transition: background-color var(--transicao), color var(--transicao);
}

@media (min-width: 1024px) {
  .caso__link {
    min-height: 380px;
  }
}

/* Hover/foco (mouse e teclado) ou toque (classe `.is-aberto`, aplicada por
   js/grade-casos.js): o card "vira" — a descrição completa do serviço
   substitui o nome grande, o fundo passa a ciano. `focus-within` no lugar de
   `focus-visible` porque o card virou um `<div>`: quem recebe foco de
   verdade é o link "Pedir orçamento" lá dentro, não o card. O texto vira
   `--preto`, não branco: branco sobre ciano dá 2,7:1 e reprova
   (design.md seção 3.3) — a mesma regra que já vale em qualquer outro
   bloco de fundo ciano do site. */
.caso__link:hover,
.caso__link:focus-within,
.caso__link.is-aberto {
  background: var(--ciano);
  color: var(--preto);
}

.caso__padrao,
.caso__descricao {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--esp-5) var(--borda-lateral);
  transition: opacity var(--transicao);
}

@media (min-width: 1024px) {
  .caso__padrao,
  .caso__descricao {
    padding: var(--esp-6);
  }
}

/* O card "Troca de célula de O2" tem a descrição mais longa da grade. No
   celular, com a altura mínima padrão (280px), o texto centralizado não
   sobrava espaço suficiente pro link "Pedir orçamento" embaixo — dar mais
   respiro só embaixo (tentativa anterior) empurrava o título pra cima,
   colado na borda. A correção certa é dar mais altura ao card, não
   desequilibrar o preenchimento: mesma altura que os cards já usam a
   partir de 1024px (380px), aplicada mais cedo só neste card. */
.caso--destaque .caso__link {
  min-height: 380px;
}

.caso__link:hover .caso__padrao,
.caso__link:focus-within .caso__padrao,
.caso__link.is-aberto .caso__padrao {
  opacity: 0;
}

.caso__descricao {
  opacity: 0;
  justify-content: center;
  gap: var(--esp-3);
}

.caso__link:hover .caso__descricao,
.caso__link:focus-within .caso__descricao,
.caso__link.is-aberto .caso__descricao {
  opacity: 1;
}

.caso__descricao-titulo {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
}

.caso__descricao p {
  font-size: var(--t-corpo);
  line-height: 1.6;
}

.caso__rotulo {
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* Título + metadado ficam juntos, centralizados no espaço que sobra entre
   o rótulo (fixo no topo) e o link (fixo embaixo) — é o que dá a sensação
   de um nome grande "flutuando" no meio da célula, como na referência. */
.caso__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-3);
}

.caso__titulo {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.caso__meta {
  display: grid;
  gap: var(--esp-1);
  font-size: var(--t-peq);
  color: var(--tinta-2);
}

.caso__meta span {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.caso__pixel {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--roxo);
}

.caso__pixel--neutro {
  background: var(--fundo);
  border: 1px solid var(--tinta-2);
}

/* Fica FORA de `.caso__padrao` e de `.caso__descricao` — como os dois se
   revezam por opacidade (um vai a 0 quando o outro aparece), o link
   precisa ser um terceiro elemento, sempre visível, ou some junto com o
   painel padrão assim que o card vira. É o único ponto do card que
   continua levando ao WhatsApp; o resto só alterna a leitura. */
.caso__ver {
  position: absolute;
  right: var(--borda-lateral);
  bottom: var(--esp-5);
  z-index: 2;
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--transicao), color var(--transicao);
}

@media (min-width: 1024px) {
  .caso__ver {
    right: var(--esp-6);
    bottom: var(--esp-6);
  }
}

.caso__link:hover .caso__ver,
.caso__link:focus-within .caso__ver,
.caso__link.is-aberto .caso__ver {
  opacity: 1;
  color: var(--roxo);
}

/* ==========================================================================
   SEÇÃO IMERSIVA — roxo de ponta a ponta com a foto da bancada em multiply.
   Fica FORA de .trilhos: os trilhos param aqui e recomeçam depois, porque a
   seção sangra até as bordas da janela.
   Atenção: a §2.0 do design.md reserva o roxo cheio ao hero. Esta seção é uma
   segunda exceção, aprovada em caráter de teste. Ver @memoria.md.
   ========================================================================== */

.secao--imersiva {
  position: relative;
  /* Prende o multiply da foto a esta seção: sem isto ele tentaria enxergar o
     fundo branco da página e a foto voltaria a aparecer em cor cheia. */
  isolation: isolate;
  overflow: hidden;
  background: var(--roxo);
  color: var(--branco);
}

/* Câmara do pin: dá 50vh de rolagem sobrando para a seção travar no topo
   antes de destravar. Diferente da tentativa com a prova objetiva (que
   deixava vão vazio): aqui o conteúdo já preenche a tela sozinho — foto,
   título e as seis linhas —, então travar não expõe fundo nenhum. Só a
   partir de 900px; no celular a seção segue no fluxo normal. */
@media (min-width: 900px) {
  .imersiva-pin {
    position: relative;
    height: calc(100vh + 50vh);
  }

  .imersiva-pin .secao--imersiva {
    position: sticky;
    top: 0;
  }
}

/* multiply só escurece: onde a foto é clara, sobra o roxo puro. Por isso todo
   o contraste calculado sobre #5947B7 continua valendo — é o pior caso. */
.secao__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O cinza tira o azul da máscara e o vermelho das cintas, que brigavam com
     a paleta. Sobra uma duotonia roxa. */
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
  opacity: 0.62;
}

/* Banner roxo com foto em duotonia, contido na grade — não sangra até a
   borda como a seção imersiva da Home. Abre "Nossos serviços", em Serviços.
   Mesma técnica de fundo (`.secao__foto`, multiply + grayscale sobre roxo),
   só num bloco menor, dentro do `.container`. */
.banner-servicos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 200px;
  padding: var(--esp-5);
  border-radius: var(--raio);
  background: var(--roxo);
}

@media (min-width: 900px) {
  .banner-servicos {
    min-height: 320px;
    padding: var(--esp-6);
  }
}

.banner-servicos__titulo {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--branco);
  font-size: clamp(1.75rem, 1.35rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.secao--imersiva .par-tec {
  max-width: calc(var(--largura) + var(--borda-lateral) * 2);
  width: 100%;
  margin-inline: auto;
}

.secao--imersiva .titulo-secao {
  color: var(--branco);
}

.texto-claro {
  max-width: 30rem;
  font-size: var(--t-corpo-g);
  /* Branco a 78% sobre o roxo dá 4,9:1 — passa em AA. Cinza de verdade
     (--tinta-2) reprovaria: sobre roxo ele fica ilegível. */
  color: rgba(255, 255, 255, 0.78);
}

.secao--imersiva .lista-tec {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.secao--imersiva .lista-tec__item {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

/* O quadrado de pixel entra em ciano, como a cliente pediu. Ciano sobre roxo
   reprova como texto (2,6:1), mas aqui é grafismo — é o uso que a §2.0 permite. */
.secao--imersiva .lista-tec__pixel {
  background: var(--ciano);
}

.secao--imersiva .lista-tec__num,
.secao--imersiva .lista-tec__nota {
  color: rgba(255, 255, 255, 0.78);
}

.secao--imersiva a.lista-tec__item {
  color: var(--branco);
}

.secao--imersiva a.lista-tec__item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.secao--imersiva a.lista-tec__item:hover .lista-tec__pixel {
  background: var(--branco);
}

@media (min-width: 900px) {
  /* Trilhos: a coluna de conteúdo ganha borda dos dois lados, de ponta a ponta. */
  .trilhos {
    max-width: calc(var(--largura) + var(--borda-lateral) * 2);
    margin-inline: auto;
    border-inline: 1px solid var(--linha);
  }

  .trilhos > .secao {
    border-bottom: 1px solid var(--linha);
  }

  .trilhos > .secao:last-child {
    border-bottom: 0;
  }

  /* Duas colunas separadas por um filete vertical. */
  .par-tec {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .par-tec__lado {
    padding: var(--esp-7) var(--esp-6);
  }

  .par-tec__lado + .par-tec__lado {
    border-left: 1px solid var(--linha);
  }

  /* "Ocupar a tela toda": a seção imersiva vale uma janela inteira, com o
     conteúdo centrado na vertical. */
  .secao--imersiva {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-block: var(--esp-6);
  }

  /* A lista fica mais densa aqui do que nas demais seções: são seis linhas, e
     no ritmo normal a seção passava de uma janela em notebook de 800px. */
  .secao--imersiva .par-tec__lado {
    padding-block: var(--esp-6);
  }

  .secao--imersiva .lista-tec__item {
    padding-block: var(--esp-4);
  }

  /* O texto da esquerda é bem mais curto que a lista: sem isto ele encostava no
     topo da célula. Centrado, ele fica na altura do meio da lista. */
  .secao--imersiva .par-tec {
    align-items: center;
  }

  /* Sem filete vertical aqui: a foto de fundo já separa as duas colunas, e a
     linha cortando a imagem pesava. */
  .secao--imersiva .par-tec__lado + .par-tec__lado {
    border-left: 0;
  }

  .lista-tec__item {
    grid-template-columns: 8px 3rem minmax(0, 1fr);
    gap: var(--esp-4);
    padding-block: var(--esp-5);
  }

  .lista-tec__rotulo {
    font-size: 1.0625rem;
  }

  /* Faixa de prova como células da grade, sem caixa. */
  .provas {
    gap: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--linha);
  }

  .prova {
    padding: var(--esp-6) var(--esp-5);
    border-left: 1px solid var(--linha);
  }

  .prova:first-child {
    border-left: 0;
  }
}

/* --- Cabeçalho em células (desktop) ------------------------------------- */

@media (min-width: 900px) {
  /* As células do cabeçalho precisam cair em cima dos trilhos do conteúdo.
     O .container recuava o interno em --borda-lateral de cada lado, então o
     filete do logotipo ficava 64px para dentro do trilho da esquerda e o botão
     de WhatsApp parava 64px antes do trilho da direita. Sem esse recuo, o
     interno ocupa a mesma caixa de 1328px que o .trilhos e as linhas se
     encontram. O respiro volta pelo padding de cada célula. */
  .cabecalho--celulas > .container {
    padding-inline: 0;
  }

  .cabecalho--celulas .cabecalho__interno {
    gap: 0;
    align-items: stretch;
  }

  .cabecalho--celulas .cabecalho__marca {
    padding-inline: var(--esp-4);
    border-inline: 1px solid var(--linha);
  }

  .cabecalho--celulas .nav {
    gap: 0;
    margin-left: auto;
    align-items: stretch;
  }

  .cabecalho--celulas .nav__lista {
    gap: 0;
    align-items: stretch;
  }

  .cabecalho--celulas .nav__lista li {
    display: flex;
  }

  .cabecalho--celulas .nav__link {
    display: flex;
    align-items: center;
    padding: 0 var(--esp-4);
    border-bottom: 0;
    border-right: 1px solid var(--linha);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cabecalho--celulas .nav__lista li:first-child .nav__link {
    border-left: 1px solid var(--linha);
  }

  /* Página ativa: filete inferior interno, sem trocar a cor. */
  .cabecalho--celulas .nav__link[aria-current='page'] {
    box-shadow: inset 0 -2px 0 currentColor;
  }

  .cabecalho--celulas .nav__acao {
    display: flex;
  }

  .cabecalho--celulas .nav__acao .botao {
    min-height: 100%;
    border-radius: 0;
    font-size: var(--t-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Sobre o hero roxo os filetes ficam brancos translúcidos. */
  .cabecalho--roxo.cabecalho--celulas .cabecalho__marca,
  .cabecalho--roxo.cabecalho--celulas .nav__link,
  .cabecalho--roxo.cabecalho--celulas .nav__lista li:first-child .nav__link {
    border-color: rgba(255, 255, 255, 0.22);
  }

  /* Cada bloco do menu "abre": uma cortina branca sobe no hover e o texto
     inverte para roxo sobre ela — a mesma combinação já aprovada nos botões
     brancos do hero (7,0:1 de contraste). Só o menu; o logotipo fica de fora
     porque inverter a cor exigiria trocar o SVG claro pelo escuro no meio do
     movimento, e isso pesa mais do que ajuda. */
  .cabecalho--celulas .nav__link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .cabecalho--celulas .nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--branco);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .cabecalho--roxo.cabecalho--celulas .nav__link:hover,
  .cabecalho--roxo.cabecalho--celulas .nav__link:focus-visible {
    color: var(--roxo);
  }

  .cabecalho--roxo.cabecalho--celulas .nav__link:hover::before,
  .cabecalho--roxo.cabecalho--celulas .nav__link:focus-visible::before {
    transform: scaleY(1);
  }

  /* Cabeçalho claro (páginas internas, sem o hero roxo por trás): a mesma
     célula, mas invertida — a cortina que sobe é roxa, e o texto vira
     branco por cima dela, em vez do branco/roxo do cabeçalho sobre o hero.
     Pedido da cliente ao levar a grade técnica para a Sobre. */
  .cabecalho--celulas:not(.cabecalho--roxo) .nav__link::before {
    background: var(--roxo);
  }

  .cabecalho--celulas:not(.cabecalho--roxo) .nav__link:hover,
  .cabecalho--celulas:not(.cabecalho--roxo) .nav__link:focus-visible {
    color: var(--branco);
  }

  .cabecalho--celulas:not(.cabecalho--roxo) .nav__link:hover::before,
  .cabecalho--celulas:not(.cabecalho--roxo) .nav__link:focus-visible::before {
    transform: scaleY(1);
  }
}

/* --- Entrada escalonada -------------------------------------------------- */

.escalonar > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.escalonar[data-visivel='true'] > * {
  opacity: 1;
  transform: none;
}

.escalonar > *:nth-child(1) { transition-delay: 0ms; }
.escalonar > *:nth-child(2) { transition-delay: 150ms; }
.escalonar > *:nth-child(3) { transition-delay: 300ms; }
.escalonar > *:nth-child(4) { transition-delay: 450ms; }
.escalonar > *:nth-child(5) { transition-delay: 600ms; }
.escalonar > *:nth-child(6) { transition-delay: 750ms; }
.escalonar > *:nth-child(7) { transition-delay: 900ms; }
.escalonar > *:nth-child(8) { transition-delay: 1050ms; }
.escalonar > *:nth-child(9) { transition-delay: 1200ms; }
.escalonar > *:nth-child(10) { transition-delay: 1350ms; }
.escalonar > *:nth-child(11) { transition-delay: 1500ms; }

/* Variante slide-in-from-left: cada linha entra deslizando da esquerda em
   vez de subir, com um ritmo levemente mais lento entre uma linha e a
   próxima. Usada nas linhas numeradas da seção imersiva de Serviços. */
.escalonar--esquerda > * {
  transform: translateX(-44px);
  transition-duration: 950ms;
}

.escalonar--esquerda[data-visivel='true'] > * {
  transform: none;
}

.escalonar--esquerda > *:nth-child(1) { transition-delay: 0ms; }
.escalonar--esquerda > *:nth-child(2) { transition-delay: 180ms; }
.escalonar--esquerda > *:nth-child(3) { transition-delay: 360ms; }
.escalonar--esquerda > *:nth-child(4) { transition-delay: 540ms; }
.escalonar--esquerda > *:nth-child(5) { transition-delay: 720ms; }
.escalonar--esquerda > *:nth-child(6) { transition-delay: 900ms; }

/* Filete que se desenha da esquerda para a direita ao entrar. */
.linha-anima {
  position: relative;
}

.linha-anima::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--roxo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.linha-anima[data-visivel='true']::after,
.revelar[data-visivel='true'] .linha-anima::after {
  transform: scaleX(1);
}

/* As seis linhas divisórias da lista de Serviços (seção imersiva) se
   desenham da esquerda pra direita, uma depois da outra, de cima pra baixo —
   pedido da cliente em 17/09/2026. Substitui a borda estática por essa
   versão animada, presa ao mesmo gatilho do bloco em volta (.revelar), não
   travada no próprio item (que nunca ganha data-visivel individual). */
.secao--imersiva .lista-tec__item {
  border-bottom-color: transparent;
}

/* Mesma cor da primeira linha (borda superior da lista, branco a 28%): em
   branco cheio as seis divisórias pareciam mais grossas que ela. */
.secao--imersiva .linha-anima::after {
  background: rgba(255, 255, 255, 0.28);
}

.secao--imersiva li:nth-child(1) .linha-anima::after { transition-delay: 0ms; }
.secao--imersiva li:nth-child(2) .linha-anima::after { transition-delay: 180ms; }
.secao--imersiva li:nth-child(3) .linha-anima::after { transition-delay: 360ms; }
.secao--imersiva li:nth-child(4) .linha-anima::after { transition-delay: 540ms; }
.secao--imersiva li:nth-child(5) .linha-anima::after { transition-delay: 720ms; }
.secao--imersiva li:nth-child(6) .linha-anima::after { transition-delay: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .escalonar > *,
  .escalonar--esquerda > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .linha-anima::after {
    transform: scaleX(1);
    transition: none;
  }

  [data-titulo-revela] .palavra-surge {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .imersiva-pin {
    height: auto;
  }

  .imersiva-pin .secao--imersiva {
    position: static;
  }
}

.sem-js .escalonar > *,
.sem-js .escalonar--esquerda > * {
  opacity: 1;
  transform: none;
}

.sem-js [data-titulo-revela] .palavra-surge {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- Cursor em mira ------------------------------------------------------ */

/* `mix-blend-mode: difference` garante que a mira apareça sobre qualquer fundo:
   roxo, branco ou preto. É o mesmo recurso da referência. */
.mira {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 500;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 160ms ease;
}

.mira__ponto {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #ffffff;
  border-radius: 50%;
}

.mira__canto {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border: 3px solid #ffffff;
}

.mira__canto--se {
  border-right: 0;
  border-bottom: 0;
}

.mira__canto--sd {
  border-left: 0;
  border-bottom: 0;
}

.mira__canto--id {
  border-left: 0;
  border-top: 0;
}

.mira__canto--ie {
  border-right: 0;
  border-top: 0;
}

/* O cursor do sistema só some quando a mira existe de verdade. */
.tem-mira,
.tem-mira a,
.tem-mira button,
.tem-mira [role='button'] {
  cursor: none;
}

/* --- Mapa incorporado --------------------------------------------------- */

.mapa {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo-2);
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Rodapé (continuação) ----------------------------------------------- */

.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--t-peq);
}

/* --- Entrada ao rolar --------------------------------------------------- */

.revelar {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

.revelar[data-visivel='true'] {
  opacity: 1;
  transform: none;
}

/* Text reveal on scroll: cada palavra do título sobe, ganha opacidade e
   perde o desfoque, uma depois da outra (js/principal.js define o atraso).
   Referência aprovada pela cliente em 17/09/2026. O bloco em volta
   (`.revelar`) não tem blur próprio — só a palavra tem —, então os dois
   movimentos não se somam e embaçam: o bloco sobe e funde normalmente
   enquanto cada palavra, dentro dele, sobe e desembaça na sua vez. */
[data-titulo-revela] .palavra-surge {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.65em);
  filter: blur(10px);
  transition: opacity 850ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 850ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 850ms cubic-bezier(0.19, 1, 0.22, 1);
}

.revelar[data-visivel='true'] [data-titulo-revela] .palavra-surge,
[data-titulo-revela][data-titulo-pronto='true'] .palavra-surge {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .acordeao__painel {
    transition: none;
  }

  .nav {
    transition: none;
  }
}

/* Sem JavaScript os blocos precisam aparecer mesmo assim. */
.sem-js .revelar {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   GRADE TÉCNICA NO CELULAR (até 899px)
   Pedido da cliente em 19/09/2026, a partir de uma referência (site CCTP):
   trilhos verticais um pouco para dentro da tela, cabeçalho em células
   (logotipo | MENU) e filetes horizontais entre as seções. Reverte a decisão
   de 15/09 de que a grade só valia no desktop.
   ========================================================================== */
@media (max-width: 899px) {
  .trilhos {
    margin-inline: var(--esp-2);
    border-inline: 1px solid var(--linha);
  }

  .trilhos > .secao {
    border-bottom: 1px solid var(--linha);
  }

  .trilhos > .secao:last-child {
    border-bottom: 0;
  }

  .cabecalho > .container {
    width: calc(100% - 2 * var(--esp-2));
    max-width: none;
    margin-inline: var(--esp-2);
    padding-inline: 0;
    border-inline: 1px solid var(--linha);
  }

  .cabecalho--roxo > .container,
  .cabecalho--roxo .cabecalho__marca,
  .cabecalho--roxo .cabecalho__abrir {
    border-color: rgba(255, 255, 255, 0.18);
  }

  .cabecalho__interno {
    gap: 0;
    align-items: stretch;
  }

  .cabecalho__marca {
    padding: var(--esp-2) var(--esp-3);
    border-right: 1px solid var(--linha);
  }

  .cabecalho__abrir {
    width: auto;
    height: auto;
    margin: 0;
    padding-inline: var(--esp-4);
    border-left: 1px solid var(--linha);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cabecalho__abrir svg {
    display: none;
  }

  .cabecalho__abrir::after {
    content: 'Menu';
  }
}