/*
 * ISO Soluções — site público.
 *
 * A página inteira é uma moldura do tamanho da janela: cabeçalho em cima,
 * rodapé embaixo, e só o miolo rola, pela roda, pelo dedo ou pelo teclado.
 * A barra de rolagem não aparece; quem diz onde se está é a linha sob o
 * cabeçalho e, na home, as etapas da apresentação.
 *
 * As nove cores são as do logo e servem a gráficos: o texto usa as versões
 * "forte" de cada uma, medidas para passar no AA nos dois temas.
 *
 * Cantos retos em tudo — botão, cartão, etiqueta, campo, foco (pedido do dono
 * em 2026-10-06, na régua do render.com). Todo canto passa por --raio, que é 0;
 * o harness reprova qualquer canto arredondado que voltar.
 */

@font-face {
  font-family: "Onest";
  src: url("./assets/fontes/onest-variavel-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --fonte: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fundo: #ffffff;
  --superficie: #f3f5f7;
  --superficie-forte: #e7ebef;
  --texto: #1b2229;
  --texto-suave: #4d5864;
  --linha: #dde2e7;
  --linha-forte: #7d8792;
  --foco: #0b5cad;
  --primario: #1b2229;
  --primario-hover: #34404c;
  --primario-texto: #ffffff;
  --sombra-cartao: 0 1px 0 rgb(27 34 41 / 0.04);

  --verde: #5fbb51; --oliva: #9bb53e; --ambar: #f9a331; --laranja: #f48234; --vermelho: #ef4f42;
  --magenta: #8d378b; --indigo: #593f95; --azul: #138dc9; --turquesa: #12b9ab;
  --verde-forte: #2c7a22; --laranja-forte: #ad4a0c; --magenta-forte: #8d378b;
  --azul-forte: #0a6494; --ambar-forte: #8f5208; --vermelho-forte: #bf2a1d;
  --indigo-forte: #593f95;

  --area: var(--azul);
  --area-forte: var(--azul-forte);

  --corpo: 1.0625rem;
  --alvo: 44px;
  --raio: 0;
  --margem: clamp(16px, 4vw, 48px);
  --altura-cabecalho: 68px;
  --duracao: 0.2s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12161a;
    --superficie: #1a2026;
    --superficie-forte: #232a31;
    --texto: #eef1f4;
    --texto-suave: #b3bcc6;
    --linha: #2c343c;
    --linha-forte: #66717c;
    --foco: #7cc1ff;
    --primario: #eef1f4;
    --primario-hover: #c9d1d9;
    --primario-texto: #12161a;
    --verde-forte: #7fd072; --laranja-forte: #ffa266; --magenta-forte: #dd95da;
    --azul-forte: #62c0f2; --ambar-forte: #ffc062; --vermelho-forte: #ff8c80;
    --indigo-forte: #bfaaf0;
  }
}

[data-cor="verde"] { --cor: var(--verde); --cor-forte: var(--verde-forte); }
[data-cor="laranja"] { --cor: var(--laranja); --cor-forte: var(--laranja-forte); }
[data-cor="magenta"] { --cor: var(--magenta); --cor-forte: var(--magenta-forte); }
[data-cor="azul"] { --cor: var(--azul); --cor-forte: var(--azul-forte); }
[data-cor="ambar"] { --cor: var(--ambar); --cor-forte: var(--ambar-forte); }
[data-cor="vermelho"] { --cor: var(--vermelho); --cor-forte: var(--vermelho-forte); }
[data-cor="indigo"] { --cor: var(--indigo); --cor-forte: var(--indigo-forte); }
body[data-area="indigo"] { --area: var(--indigo); --area-forte: var(--indigo-forte); }
body[data-area="verde"] { --area: var(--verde); --area-forte: var(--verde-forte); }
body[data-area="laranja"] { --area: var(--laranja); --area-forte: var(--laranja-forte); }
body[data-area="magenta"] { --area: var(--magenta); --area-forte: var(--magenta-forte); }
body[data-area="azul"] { --area: var(--azul); --area-forte: var(--azul-forte); }
body[data-area="ambar"] { --area: var(--ambar); --area-forte: var(--ambar-forte); }
body[data-area="vermelho"] { --area: var(--vermelho); --area-forte: var(--vermelho-forte); }

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--corpo);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.018em; font-weight: 720; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--area) 35%, transparent); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
h1:focus, main:focus { outline: none; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icone { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pular {
  position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 18px; border-radius: var(--raio);
  background: var(--primario); color: var(--primario-texto); font-weight: 650; text-decoration: none;
  transform: translateY(-160%);
}
.pular:focus { transform: none; }

/* ------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px; border-radius: var(--raio);
  border: 1.5px solid var(--linha-forte); background: var(--fundo); color: var(--texto);
  font-size: 1rem; font-weight: 620; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--duracao), border-color var(--duracao), color var(--duracao);
}
.botao:hover { border-color: var(--texto); background: var(--superficie); }
.botao-primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.botao-primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: var(--primario-texto); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.link-botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); min-width: var(--alvo); padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 1rem; font-weight: 620; color: var(--area-forte); text-decoration: underline; text-underline-offset: 4px;
}
.so-estreito { display: none; }

.marca-area { width: 1.25rem; height: 0.56rem; flex: none; fill: var(--cor, var(--area)); stroke: var(--fundo); stroke-width: 1.1px; overflow: visible; }
.marca-area path:nth-child(2) { fill-opacity: 0.72; }
.marca-area path:nth-child(3) { fill-opacity: 0.48; }

/* ---------------------------------------------------------- cabeçalho */

.cabecalho {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: clamp(8px, 1.6vw, 28px);
  min-height: var(--altura-cabecalho);
  padding: 8px var(--margem);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: 10px; min-height: var(--alvo); margin-right: auto; color: var(--texto); text-decoration: none; border-radius: var(--raio); }
.marca-simbolo { display: block; width: 46px; height: 46px; flex: none; }
.marca-simbolo .logo-iso { width: 100%; height: 100%; }
body[data-rota="inicio"] .marca-simbolo, body[data-rota="carregando"] .marca-simbolo { display: none; }
.marca-nome { display: flex; flex-direction: column; font-size: 1.1875rem; font-weight: 760; line-height: 1.05; letter-spacing: -0.01em; }
.marca-sub { font-size: 0.9375rem; font-weight: 500; color: var(--texto-suave); letter-spacing: 0.01em; }
/* O selo dourado dos anos, com laço, ao lado do nome, como no logo do site antigo (sai de site/gerar_selo.py). */
.marca-selo { display: block; width: auto; height: 51px; flex: none; }

.navegacao ul { display: flex; gap: 2px; list-style: none; }
.navegacao a {
  position: relative; display: flex; align-items: center; min-height: var(--alvo); padding: 0 12px;
  border-radius: var(--raio); color: var(--texto); font-size: 1rem; font-weight: 560; text-decoration: none;
}
.navegacao a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: var(--raio);
  background: var(--cor-forte, var(--texto)); transform: scaleX(0); transform-origin: left; transition: transform var(--duracao);
}
.navegacao a:hover::after, .navegacao a[aria-current="page"]::after { transform: scaleX(1); }
.navegacao a[aria-current="page"] { font-weight: 680; }

.menu-botao {
  display: none; align-items: center; gap: 10px; min-height: var(--alvo); min-width: var(--alvo); padding: 0 14px;
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio); background: var(--fundo);
  font-size: 1rem; font-weight: 620; cursor: pointer;
}
.menu-icone { position: relative; width: 18px; height: 12px; }
.menu-icone::before, .menu-icone::after, .menu-icone span { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: var(--raio); background: currentColor; transition: transform var(--duracao), opacity var(--duracao); }
.menu-icone::before { top: 0; }
.menu-icone span { top: 5px; }
.menu-icone::after { bottom: 0; }
.menu-botao[aria-expanded="true"] .menu-icone::before { transform: translateY(5px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-icone::after { transform: translateY(-5px) rotate(-45deg); }
.menu-botao[aria-expanded="true"] .menu-icone span { opacity: 0; }

.indicador-rolagem { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; opacity: 0; transition: opacity var(--duracao); }
.indicador-rolagem span { display: block; height: 100%; background: var(--area); transform-origin: left; transform: scaleX(0); }
body.miolo-rola .indicador-rolagem { opacity: 1; }

.menu {
  position: fixed; z-index: 19; inset: var(--altura-cabecalho) 0 0 0;
  padding: 16px var(--margem) 24px; overflow-y: auto; scrollbar-width: none;
  background: var(--fundo); border-top: 1px solid var(--linha);
}
.menu::-webkit-scrollbar { display: none; }
.menu ul { list-style: none; display: grid; gap: 2px; max-width: 32rem; }
.menu a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: var(--raio);
  font-size: 1.375rem; font-weight: 650; text-decoration: none;
}
.menu a::before { content: ""; width: 10px; height: 10px; border-radius: var(--raio); background: var(--cor, var(--linha-forte)); transform: rotate(45deg); flex: none; }
.menu a[aria-current="page"] { background: var(--superficie); }

/* Área do aluno congelada (2026-10-07): o botão fica no lugar, sem ação, e diz por escrito que está
   indisponível. A segunda linha não alarga o item: o cabeçalho só tem espaço exato a partir de 1240 px, e o selo
   (15 px, o piso de um controle) é mais estreito que o rótulo (88 px contra 105 px, medido a 1240 px). */
.indisponivel {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: var(--alvo); padding: 0 12px;
  border: 0; border-radius: var(--raio); background: none; color: var(--texto-suave); font: inherit; font-size: 1rem; font-weight: 560;
  line-height: 1.15; text-align: left; cursor: not-allowed;
}
.indisponivel-selo { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.menu .indisponivel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; min-height: 52px; font-size: 1.375rem; font-weight: 650; }
.menu .indisponivel::before { content: ""; width: 10px; height: 10px; border-radius: var(--raio); border: 1.5px solid var(--linha-forte); transform: rotate(45deg); flex: none; }
.botao:disabled, .botao:disabled:hover { border-color: var(--linha); background: var(--fundo); color: var(--texto-suave); cursor: not-allowed; }

/* --------------------------------------------------------------- miolo */

main {
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  container-type: size;
  outline: none;
}
main::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.ha-mais:not([data-rota="inicio"]) main {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
}

/* --------------------------------------------------------------- rodapé */

.rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  padding: 4px var(--margem);
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: var(--superficie);
}
.rodape-assinatura { font-size: 0.875rem; color: var(--texto-suave); }
.rodape-contatos { display: flex; gap: 4px 6px; list-style: none; flex-wrap: wrap; }
.rodape-contatos a {
  display: flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 10px; border-radius: var(--raio);
  font-size: 0.9375rem; font-weight: 560; text-decoration: none; color: var(--texto);
}
.rodape-contatos a:hover { background: var(--superficie-forte); }
.rodape-detalhe { font-weight: 450; color: var(--texto-suave); }
.rodape .icone { width: 1.25rem; height: 1.25rem; }
/* Entrada discreta do backlog da equipe; abaixo de 1240 px ela mora no menu. */
.rodape-equipe { margin-right: auto; }
.rodape-equipe a {
  display: flex; align-items: center; min-height: var(--alvo); padding: 0 10px;
  font-size: 0.9375rem; font-weight: 560; color: var(--texto-suave); text-decoration: none;
}
.rodape-equipe a:hover, .rodape-equipe a[aria-current="page"] { color: var(--texto); text-decoration: underline; text-underline-offset: 4px; }

/* ----------------------------------------------------- o logo e o palco */

.logo-iso { display: block; touch-action: pan-y; view-transition-name: logo-iso; }
.marca-nome { view-transition-name: marca-nome; }
::view-transition-group(logo-iso) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

/* Cinco cenas: a primeira ocupa a tela, cada troca pede 70% dela de rolagem (PASSO_CENA no app.js). */
.palco { position: relative; height: calc(100cqh + 4 * 70cqh); }
/* Uma parada por cena, no ponto em que a rolagem a mostra inteira. */
.palco-paradas { position: absolute; inset: 0; pointer-events: none; }
.palco-parada { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.palco-parada:nth-child(2) { top: 70cqh; }
.palco-parada:nth-child(3) { top: 140cqh; }
.palco-parada:nth-child(4) { top: 210cqh; }
.palco-parada:nth-child(5) { top: 280cqh; }
/* No toque, cada deslize para numa cena e a próxima pede outro deslize (pedido do dono, 2026-10-06):
   sem a trava, um peteleco atravessava duas ou três cenas. scroll-snap-stop impede um gesto, por mais
   longo ou rápido, de pular a parada seguinte. Roda e trackpad seguem livres: lá o ímã prendia quem
   rola devagar (ISOSOLUCOES-AUDITORIA.md, achado 1). */
@media (hover: none) and (pointer: coarse) {
  body[data-rota="inicio"] main { scroll-snap-type: y mandatory; }
  .palco-parada { scroll-snap-align: start; scroll-snap-stop: always; }
}
.palco-fixo {
  position: sticky; top: 0; height: 100cqh;
  display: grid;
  grid-template-areas: "marca" "cenas" "etapas";
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(6px, 1.6cqh, 16px);
  padding: clamp(8px, 2.4cqh, 28px) var(--margem) clamp(6px, 1.6cqh, 18px);
  max-width: 1440px; margin: 0 auto;
}
.palco-cenas { grid-area: cenas; display: grid; grid-template-areas: "cena"; align-items: center; min-width: 0; }
.cena { grid-area: cena; display: grid; gap: clamp(8px, 1.8cqh, 20px); align-content: center; min-width: 0; will-change: opacity, translate; }
.cena:not(.cena-visivel) { pointer-events: none; }
.cena h1 { font-size: clamp(2rem, min(8.4cqw, 7.4cqh), 4.75rem); line-height: 1.02; letter-spacing: -0.028em; font-weight: 760; }
.cena h2 { font-size: clamp(1.875rem, min(7.4cqw, 6.8cqh), 4rem); line-height: 1.04; letter-spacing: -0.025em; font-weight: 740; }
.cena-sobre { font-size: 1rem; font-weight: 560; color: var(--texto-suave); }
.cena-texto { font-size: clamp(1rem, 0.9rem + 0.45cqw, 1.3125rem); line-height: 1.5; max-width: 36rem; }
.cena-numeros { font-size: clamp(1rem, 0.9rem + 0.45cqw, 1.3125rem); line-height: 1.5; max-width: 36rem; color: var(--texto-suave); }
.cena-numeros strong { color: var(--texto); }
.cena-numeros strong { font-weight: 720; }
.clientes-mini { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.clientes-mini li { display: grid; place-items: center; width: 92px; height: 48px; padding: 6px 10px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); overflow: hidden; }
.clientes-mini img { width: 100%; height: 34px; object-fit: contain; }

.palco-marca { grid-area: marca; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-items: center; gap: clamp(4px, 1.2cqh, 14px); min-height: 0; min-width: 0; }
.palco-logo { width: 100%; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center; }
.palco-logo .logo-iso { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
/* Altura fixa em todo layout em que o cartão ocupa espaço: o que muda dentro dele nunca empurra o logo. */
.palco-cartao { width: min(100%, 30rem); height: 9rem; display: grid; align-items: center; }
.cartao-dica { font-size: 1rem; color: var(--texto-suave); text-align: center; line-height: 1.45; padding: 0 8px; align-self: center; }
.cartao-destino {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
  padding: 12px 16px; border-radius: var(--raio); text-decoration: none; color: var(--texto);
  background: var(--superficie);
}
/* Título em cima, "Abrir" embaixo, descrição no meio: trocar de destino não move nada de lugar. */
.palco-cartao .cartao-destino { height: 100%; grid-template-rows: auto 1fr auto; align-content: stretch; }
.palco-cartao .cartao-descricao { align-self: start; }
.cartao-destino strong { font-size: 1.1875rem; line-height: 1.25; }
.cartao-destino > span:not(.cartao-abrir) { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.45; color: var(--texto-suave); }
.cartao-abrir { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 650; color: var(--cor-forte); margin-top: 2px; }
.cartao-abrir .icone { width: 1.125rem; height: 1.125rem; }

.palco-legenda ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 2px 4px; list-style: none; }
.palco-legenda a {
  display: flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 10px; border-radius: var(--raio);
  font-size: 0.9375rem; font-weight: 580; text-decoration: none; color: var(--texto);
  transition: background-color var(--duracao);
}
.palco-legenda a:hover, .palco-legenda a.ativa { background: var(--superficie); }
.palco-legenda a.ativa { box-shadow: inset 0 -3px 0 var(--cor-forte); }

.palco-etapas { grid-area: etapas; }
.palco-etapas ol { display: flex; gap: 2px; list-style: none; }
.etapa-rotulo { white-space: nowrap; }
.pausa {
  position: absolute; top: 0; right: 0; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--alvo); padding: 0 12px 0 8px; border: 1.5px solid transparent; border-radius: var(--raio);
  background: var(--fundo); color: var(--texto-suave); font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.pausa:hover { border-color: var(--linha-forte); color: var(--texto); }
.pausa .icone { width: 1.25rem; height: 1.25rem; }
.pausa .icone-retomar, .pausa[aria-pressed="true"] .icone-pausa { display: none; }
.pausa[aria-pressed="true"] .icone-retomar { display: inline; fill: currentColor; stroke: none; }
.palco-etapas button {
  display: flex; align-items: center; gap: 8px; min-height: var(--alvo); min-width: var(--alvo); padding: 0 10px 0 6px;
  border: 0; border-radius: var(--raio); background: none; color: var(--texto-suave); font-size: 0.9375rem; font-weight: 560; cursor: pointer;
}
.palco-etapas button:hover { background: var(--superficie); color: var(--texto); }
.etapa-marca { width: 14px; height: 12px; flex: none; background: var(--linha-forte); clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: background-color var(--duracao), transform var(--duracao); }
.palco-etapas [aria-current="step"] { color: var(--texto); font-weight: 680; }
.palco-etapas [aria-current="step"] .etapa-marca { background: var(--texto); transform: scale(1.25); }

/* Retrato estreito: logo em cima, texto embaixo, etapas só com o triângulo. */
@container (max-width: 719px) {
  .etapa-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pausa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pausa { padding: 0; width: var(--alvo); justify-content: center; }
  .palco-etapas button { padding: 0; justify-content: center; }
  .palco-etapas ol { justify-content: center; }
  .palco-cartao { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0 auto; height: auto; }
  .palco-cartao:has(.cartao-dica), .palco-cartao[data-origem="foco"], .palco-cartao[data-origem="legenda"] { display: none; }
  .palco-marca:has(.palco-cartao[data-origem="toque"] .cartao-destino) .palco-legenda,
  .palco-marca:has(.palco-cartao[data-origem="ponteiro"] .cartao-destino) .palco-legenda { visibility: hidden; }
  /* O cartão sobreposto fica do lado oposto ao setor apontado e não rouba o ponteiro do logo. */
  .palco-cartao[data-lado="topo"] { top: 0; bottom: auto; }
  .palco-cartao[data-origem="ponteiro"] { pointer-events: none; }
  .cena-final .clientes-mini { display: none; }
}
@container (max-width: 719px) and (max-height: 620px) {
  .cena-sobre { display: none; }
  .cena-final .clientes-mini { display: none; }
  .cena-final .acoes .botao:not(.botao-primario) { display: none; }
}
/* Retrato baixo: o logo fica com a altura que sobrar; quem leva às páginas é o menu. */
@container (max-width: 719px) and (max-height: 700px) {
  .palco-legenda { display: none; }
}
@container (max-width: 459px) {
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .cena .acoes .botao { flex: 1 1 auto; padding-inline: 14px; }
  /* Sem o trapézio, o sublinhado na cor do setor liga o nome ao pedaço do logo. */
  .palco-legenda ul { grid-template-columns: repeat(3, auto); gap: 2px; }
  .palco-legenda .marca-area { display: none; }
  .palco-legenda a { padding: 0 6px; box-shadow: inset 0 -3px 0 var(--cor); }
  .palco-legenda a.ativa { box-shadow: inset 0 -5px 0 var(--cor-forte); }
}
@container (max-height: 470px), (max-width: 719px) and (max-height: 560px) {
  .palco-etapas { display: none; }
}

/* Paisagem: texto à esquerda, logo à direita. */
@container (min-width: 720px) and (aspect-ratio > 23 / 20) {
  .palco-fixo {
    grid-template-areas: "cenas marca" "etapas marca";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(24px, 4cqw, 72px);
  }
  .cena h1 { font-size: clamp(2rem, min(5.6cqw, 9.6cqh), 5rem); }
  .cena h2 { font-size: clamp(1.75rem, min(4.8cqw, 8.4cqh), 4.25rem); }
}
@container (min-width: 720px) and (aspect-ratio > 23 / 20) and (max-height: 520px) {
  .palco-cartao { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0 auto; height: auto; }
  .palco-cartao:has(.cartao-dica), .palco-cartao[data-origem="foco"], .palco-cartao[data-origem="legenda"] { display: none; }
  .palco-marca:has(.palco-cartao[data-origem="toque"] .cartao-destino) .palco-legenda,
  .palco-marca:has(.palco-cartao[data-origem="ponteiro"] .cartao-destino) .palco-legenda { visibility: hidden; }
  .palco-cartao[data-lado="topo"] { top: 0; bottom: auto; }
  .palco-cartao[data-origem="ponteiro"] { pointer-events: none; }
  .cena-sobre { display: none; }
  .cena-final .clientes-mini, .botao-email { display: none; }
}
/* Celular deitado: duas linhas de título, texto curto, logo sem legenda (o menu leva às páginas). */
@container (min-width: 720px) and (aspect-ratio > 23 / 20) and (max-height: 420px) {
  .palco-legenda, .so-largo { display: none; }
  .so-estreito { display: inline; }
  .cena h1 { font-size: clamp(1.625rem, min(5.2cqw, 11.5cqh), 2.5rem); }
  .cena h2 { font-size: clamp(1.5rem, min(4.6cqw, 10.5cqh), 2.25rem); }
  .cena-texto { font-size: 1rem; line-height: 1.45; }
}
/* Na coluna do texto as cinco etapas com nome só cabem a partir de 1300 px: abaixo, só a atual diz o nome. */
@container (min-width: 720px) and (max-width: 1299px) and (aspect-ratio > 23 / 20) {
  .palco-etapas button:not([aria-current]) .etapa-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .palco-etapas button:not([aria-current]) { padding: 0; justify-content: center; }
}
/* Tablet em pé e telas quase quadradas: o logo divide a altura com o texto. */
@container (min-width: 720px) and (aspect-ratio <= 23 / 20) {
  .palco-fixo { grid-template-rows: minmax(0, 1fr) auto auto; }
  .cena { justify-items: start; }
}

/* -------------------------------------------------------- páginas internas */

.pagina {
  display: grid; gap: clamp(36px, 5vw, 64px);
  max-width: 1120px; margin: 0 auto;
  padding: clamp(20px, 4cqh, 48px) var(--margem) 64px;
}
.pagina > section, .pagina > aside, .pagina > div { min-width: 0; }
.pagina-cabeca { display: grid; gap: 14px; max-width: 48rem; }
.pagina-cabeca > .marca-area { width: 3rem; height: 1.3rem; stroke-width: 0.7px; margin-bottom: -2px; }
.pagina-resumo { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; color: var(--texto-suave); max-width: 44rem; }
.trilha a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--area-forte); }
.trilha a:hover { text-decoration: underline; text-underline-offset: 4px; }

.texto-corrido { display: grid; gap: 16px; max-width: 46rem; }
.texto-corrido p { line-height: 1.7; }
.texto-corrido h2 + p, .texto-corrido h2 + ul { margin-top: -4px; }
.lista { display: grid; gap: 10px; list-style: none; }
.lista li { position: relative; padding-left: 26px; line-height: 1.6; }
.lista li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 11px; height: 9px; background: var(--area); clip-path: polygon(0 0, 100% 50%, 0 100%); }

.dupla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.retrato { margin: 0; display: grid; gap: 10px; }
.retrato img { width: 100%; aspect-ratio: 12 / 13; object-fit: cover; object-position: 50% 25%; border-radius: var(--raio); background: var(--superficie); }
.retrato figcaption { font-size: 0.9375rem; color: var(--texto-suave); }

.em-numeros { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.6; max-width: 52rem; color: var(--texto-suave); }
.em-numeros strong { color: var(--texto); }
.em-numeros strong { font-weight: 720; }

.identidade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; }
.identidade div { padding: 20px 22px; border-radius: var(--raio); background: var(--superficie); }
.identidade dt { font-size: 1.1875rem; font-weight: 720; margin-bottom: 6px; }
.identidade dd { margin: 0; line-height: 1.6; }
.identidade .lista { gap: 6px; }
section > h2 + .identidade, section > h2 + .normas, section > h2 + p { margin-top: 18px; }

.atalhos ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.atalhos a {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 16px; border-radius: var(--raio);
  border: 1.5px solid var(--linha); font-size: 1rem; font-weight: 580; text-decoration: none;
}
.atalhos a:hover { border-color: var(--area-forte); }

.servico { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px clamp(24px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--linha); scroll-margin-top: 16px; }
.servico > div { display: grid; gap: 16px; justify-items: start; }
.servico p { font-size: 1.125rem; line-height: 1.6; }
.normas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; }
.normas li { display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--raio); background: var(--superficie); }
.normas strong { font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.normas span { font-size: 0.9375rem; color: var(--texto-suave); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  min-height: var(--alvo); padding: 0 16px; border-radius: var(--raio); border: 1.5px solid var(--linha-forte);
  background: var(--fundo); font-size: 1rem; font-weight: 560; cursor: pointer;
}
.filtro:hover { background: var(--superficie); }
.filtro[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.busca { display: grid; gap: 6px; max-width: 30rem; margin-top: 18px; }
.busca-rotulo { font-size: 0.9375rem; font-weight: 600; }
.busca-campo { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); background: var(--fundo); }
.busca-campo:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.busca input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: none; font-size: 1rem; outline: none; }
.resultado-busca { margin: 14px 0 12px; font-size: 1rem; color: var(--texto-suave); }
.cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 12px; list-style: none; }
.curso { position: relative; display: grid; align-content: start; gap: 8px; padding: 18px 20px 20px; border-radius: var(--raio); background: var(--superficie); }
.curso:hover { background: var(--superficie-forte); }
.curso h3 a { display: block; min-height: var(--alvo); text-decoration: none; }
.curso h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
.curso h3 a:focus-visible { outline: none; }
.curso:has(a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.curso-area, .curso-carga { font-size: 0.9375rem; color: var(--texto-suave); }
.curso-area { font-weight: 600; color: var(--area-forte); }
.vazio { padding: 20px; border-radius: var(--raio); background: var(--superficie); }

.curso-pagina { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.curso-pagina .texto-corrido { grid-row: 1; grid-column: 1; }
.curso-pagina .texto-corrido section { display: grid; gap: 12px; }
.curso-pagina .texto-corrido h2 { font-size: 1.5rem; }
.curso-resumo { grid-column: 2; position: sticky; top: 16px; display: grid; gap: 16px; padding: 20px 22px; border-radius: var(--raio); background: var(--superficie); }
.curso-resumo dl { display: grid; gap: 12px; margin: 0; }
.curso-resumo dt { font-size: 0.9375rem; color: var(--texto-suave); }
.curso-resumo dd { margin: 0; font-weight: 650; }

.clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: 12px; list-style: none; }
.cliente > a, .cliente > div {
  display: grid; grid-template-rows: 88px auto auto; gap: 4px; height: 100%; padding: 14px 16px 16px;
  border-radius: var(--raio); background: var(--superficie); text-decoration: none; color: var(--texto);
}
.cliente > a:hover { background: var(--superficie-forte); }
.cliente img { width: 100%; height: 88px; object-fit: contain; padding: 10px; border-radius: var(--raio); background: #fff; }
/* Razão social comprida ("Aerolevantamentos") não cabe no cartão estreito: quebra com hífen, e sem ele se preciso. */
.cliente-nome, .cliente-setor { hyphens: auto; overflow-wrap: anywhere; }
.cliente-nome { font-weight: 650; font-size: 1rem; margin-top: 6px; }
.cliente-setor { font-size: 0.9375rem; color: var(--texto-suave); }

.depoimentos { columns: 2 22rem; column-gap: 20px; list-style: none; }
.depoimentos li { break-inside: avoid; margin-bottom: 20px; }
.depoimento { margin: 0; display: grid; gap: 14px; padding: 22px 24px; border-radius: var(--raio); background: var(--superficie); }
.depoimento blockquote { margin: 0; }
.depoimento blockquote p { line-height: 1.65; white-space: pre-line; }
.depoimento.longo:not(.aberto) blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.ler-tudo {
  justify-self: start; min-height: var(--alvo); padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 1rem; font-weight: 650; color: var(--area-forte); text-decoration: underline; text-underline-offset: 4px;
}
.depoimento figcaption { display: flex; align-items: center; gap: 12px; }
.depoimento figcaption img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--raio); background: #fff; padding: 4px; flex: none; }
.depoimento figcaption > span { display: grid; font-size: 0.9375rem; line-height: 1.4; }
.depoimento figcaption > span > span { color: var(--texto-suave); }

.contato { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.canais { display: grid; gap: 8px; list-style: none; }
.canais a, .canais div { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-radius: var(--raio); background: var(--superficie); text-decoration: none; color: var(--texto); }
.canais a:hover { background: var(--superficie-forte); }
.canais .icone { width: 1.625rem; height: 1.625rem; color: var(--area-forte); }
.canais span { display: grid; line-height: 1.35; }
.canais strong { font-size: 1rem; }
.canais span span { font-size: 1rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.formulario { display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); border-radius: var(--raio); border: 1px solid var(--linha); }
.formulario h2 { font-size: 1.5rem; }
.formulario > p { color: var(--texto-suave); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.campo { display: grid; gap: 6px; font-size: 0.9375rem; font-weight: 600; }
.campo.inteiro { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--fundo); font-size: 1rem; font-weight: 400;
}
.campo textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.campo [aria-invalid="true"] { border-color: var(--vermelho-forte); box-shadow: inset 0 0 0 1px var(--vermelho-forte); }
.form-erros { padding: 12px 14px; border-radius: var(--raio); background: color-mix(in srgb, var(--vermelho) 14%, var(--fundo)); color: var(--texto); font-weight: 560; }
.form-resultado { padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); }
.form-resultado a { color: var(--area-forte); font-weight: 650; }

.convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px clamp(18px, 3vw, 32px); border-radius: var(--raio); background: var(--superficie); }
.convite p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 650; line-height: 1.35; max-width: 34rem; }
.convite-coruja { width: 64px; height: auto; flex: none; }
.convite-coruja + p { flex: 1 1 18rem; }

.sem-js { padding: 24px var(--margem); }

/* -------------------------------------------------------------- tamanhos */

/* Seis itens e o botão só cabem a partir de 1240 px; abaixo disso, o menu. */
@media (max-width: 1239px) {
  .navegacao, .rodape-equipe { display: none; }
  .menu-botao { display: inline-flex; }
}
@media (max-width: 1099px) {
  .rodape-longo { display: none; }
}
@media (max-width: 599px) {
  :root { --altura-cabecalho: 60px; --corpo: 1rem; }
  .cabecalho { gap: 8px; min-height: var(--altura-cabecalho); padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .contato-topo { display: none; }
  .marca-simbolo { width: 42px; height: 42px; }
  .marca-nome { font-size: 1.0625rem; }
  .marca-selo { height: 46px; }
  .rodape { justify-content: center; padding-top: 2px; padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  .rodape-assinatura, .rodape-detalhe { display: none; }
  .rodape-contatos { justify-content: center; gap: 0; }
  .rodape-contatos a { padding: 0 9px; font-size: 0.9375rem; }
}
@media (max-width: 399px) {
  .rodape .icone { display: none; }
  .rodape-contatos a { padding: 0 10px; }
}
/* Com o selo ao lado do nome, "Menu" escrito não cabe em 320 px: fica o ícone, e o nome segue para o leitor de tela. */
@media (max-width: 359px) {
  .menu-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-botao { padding: 0 12px; }
}
@media (max-width: 1099px) and (min-width: 600px) {
  .rodape-detalhe { display: none; }
  .rodape { flex-wrap: nowrap; }
}
@media (max-height: 480px) {
  :root { --altura-cabecalho: 56px; }
  .cabecalho { min-height: var(--altura-cabecalho); padding-top: 4px; padding-bottom: 4px; }
  .marca-sub { display: none; }
  .marca-selo { height: 44px; }
  .rodape { padding-top: 0; padding-bottom: 0; }
  .rodape-assinatura, .rodape-detalhe { display: none; }
}
@container (max-width: 820px) {
  .dupla, .contato, .curso-pagina, .servico { grid-template-columns: minmax(0, 1fr); }
  .curso-resumo { grid-column: 1; grid-row: auto; position: static; }
  .retrato { max-width: 24rem; }
  .normas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .identidade, .campos { grid-template-columns: minmax(0, 1fr); }
  .cliente > a, .cliente > div { grid-template-rows: 64px auto auto; padding: 10px 12px 12px; }
  .cliente img { height: 64px; padding: 8px; }
  .normas { grid-template-columns: minmax(0, 1fr); }
  .pagina { padding-bottom: 48px; }
  .convite .acoes, .convite .botao { width: 100%; }
}

/* Zoom de 400% (1280 px viram 320×200): a moldura comeria metade da tela.
   Abaixo de 340 px de altura a página volta a rolar inteira, como um documento. */
@media (max-height: 340px) {
  html, body { height: auto; overflow: visible; }
  body { display: block; min-height: 100%; }
  main { overflow: visible; container-type: inline-size; height: auto; }
  body.ha-mais:not([data-rota="inicio"]) main { -webkit-mask-image: none; mask-image: none; }
  .palco { height: auto; }
  .palco-paradas { display: none; }
  .palco-fixo { position: static; height: auto; display: block; }
  .palco-marca { height: 70vh; }
  .palco-etapas, .pausa { display: none; }
  .cena { opacity: 1 !important; translate: none !important; pointer-events: auto; margin: 24px 0; }
  .menu { position: absolute; }
}

@media print {
  html, body { height: auto; overflow: visible; background: #fff; color: #000; }
  body { display: block; }
  main { overflow: visible; container-type: inline-size; height: auto; -webkit-mask-image: none !important; mask-image: none !important; }
  .navegacao, .menu-botao, .menu, .contato-topo, .indicador-rolagem, .pular, .palco-etapas, .pausa, .palco-cartao, .formulario, .palco-paradas { display: none !important; }
  .palco { height: auto; }
  .palco-fixo { position: static; height: auto; display: block; }
  .palco-marca { height: 9cm; }
  .cena { opacity: 1 !important; translate: none !important; margin: 0 0 1cm; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .cena { will-change: auto; }
}
@media (forced-colors: active) {
  .marca-area, .pagina-cabeca h1::before, .lista li::before { forced-color-adjust: none; }
  .cartao-destino, .curso, .depoimento, .identidade div, .normas li, .canais a, .convite { border: 1px solid CanvasText; }
}