/* ===========================================================
   Instituto A Priori — Site estático (HTML/CSS puro)
   Sistema de marca: content/01-mapa-e-narrativa.md, secao 2.
   Construido 2026-08-28 — mesma logica visual do site WordPress,
   sem as limitacoes do Elementor (grid sempre com max-width,
   abas com JS proprio testado, sem bug de clique).
   =========================================================== */

:root {
  /* Medido nos 10 mockups do Canva em 2026-09-03: a cor escura da marca
     e #001B2E, e a mesma para texto e para fundo de secao. O site usava
     #0C1928 (que le como preto) e #18273A. */
  --ink: #001B2E;
  --ink-fundo: #001B2E;
  --teal: #468497;
  --teal-claro: #88B3C1;
  --amarelo: #BEB27A;
  --paper: #EFF2F6;
  --paper-esc: #E3E8EF;
  --paper-quente: #EAE8E2;
  --bege: #E8E2D5;
  --apostila: #FCFBE7;
  /* era #515963, um cinza puro que nao existe em nenhum mockup; depois
     #2A4459, que Renato leu como "fonte preta" (2026-09-04). Medido nos
     mockups: em fundo claro TODO texto e #001B2E, corpo e negrito — a
     hierarquia e por PESO, nunca por cor. Nenhum texto do site e preto. */
  --txt-sec: #001B2E;
  /* a borda pontilhada dos cards mantem o tom medio anterior: ela e um
     tracado, nao texto, e escurecer junto pesava demais o cartao. */
  --borda-pontilhada: #2A4459;
  --txt-claro: #C8D2DE;
  --borda-clara: #CBD5E1;
  --branco: #FFFFFF;

  --font-titulo: 'Manrope', sans-serif;
  --font-corpo: 'Inter', sans-serif;

  --container: 1240px;
  --radius: 15px;
}

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-corpo);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, blockquote { overflow-wrap: break-word; word-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, blockquote { font-family: var(--font-titulo); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Tipografia ---------- */
.eyebrow {
  font-family: var(--font-corpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow.claro { color: var(--teal-claro); }
/* 2026-09-04: Renato — "o titulo Como trabalhamos esta azul claro, precisa ser
   azul escuro". Pedido de UMA secao (Home), entao nasce em classe propria e
   nao no .eyebrow base — os outros 7 eyebrows do site seguem em teal ate ele
   dizer o contrario (regra 22). */
.eyebrow.eyebrow-escuro { color: var(--ink); }

h1.h1, .h1 {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.15;
  color: var(--branco);
  max-width: 760px;
}
/* Titulo/bloco de destaque em duas cores: regra travada por Renato, 2026-08-28 —
   a primeira frase vem no dourado institucional, o resto em branco. Nunca uma
   cor so num titulo ou bloco de abertura de secao. */
.destaque { color: var(--amarelo); }
.h2 {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
  color: var(--ink);
  max-width: 720px;
}
.h2.claro { color: var(--branco); }
.h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
}
.h3.claro { color: var(--branco); }
.corpo {
  font-family: var(--font-corpo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-sec);
  max-width: 720px;
}
.corpo.claro { color: var(--txt-claro); }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-corpo);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 8px;
  border: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primario { background: var(--teal); color: var(--branco); }
.btn-primario:hover { background: var(--amarelo); color: var(--ink); }
.btn-secundario {
  background: transparent;
  color: var(--teal-claro);
  border: 1px solid var(--teal);
  padding: 14px 28px;
}
.btn-secundario.sobre-claro { color: var(--teal); background: var(--branco); }
.btn-secundario:hover { background: var(--amarelo); color: var(--ink); border-color: var(--amarelo); }

/* ---------- Cabecalho ---------- */
.site-header {
  background: var(--ink);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--branco);
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .02em;
}
.brand img { width: 30px; height: 30px; }

nav.nav-principal { display: flex; align-items: center; gap: 28px; }
nav.nav-principal > ul { display: flex; align-items: center; gap: 28px; }
nav.nav-principal a.link {
  color: var(--txt-claro);
  font-size: 14px;
  font-weight: 500;
  transition: color .15s ease;
}
nav.nav-principal a.link:hover,
nav.nav-principal .ativo > a.link { color: var(--amarelo); }

.tem-dropdown { position: relative; }
.tem-dropdown > a.link { display: inline-flex; align-items: center; gap: 4px; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ink-fundo);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 190px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.tem-dropdown:hover .dropdown,
.tem-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 18px; color: var(--txt-claro); font-size: 14px; }
.dropdown a:hover { color: var(--amarelo); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  height: 2px;
  background: var(--branco);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { top: 15px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle.aberto span { background: transparent; }
.nav-toggle.aberto span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle.aberto span::after { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Secoes ---------- */
.secao { padding: 88px 0; }
.secao.pequena { padding: 64px 0; }
.secao.ink { background: var(--ink); }
.secao.ink-fundo { background: var(--ink-fundo); }
.secao.paper { background: var(--paper); }
.secao.paper-esc { background: var(--paper-esc); }

/* Fundo bege + textura granulada: terceiro tom de fundo do site (regra nova,
   2026-08-28 — ver logica-de-design.md). Fotos fonte: Bege Academia.png +
   Textura.png, MKT 2026/Site Claude/Fotos Site/. Blend multiply para a
   textura mosquear a cor solida, nao ficar como camada separada. */
.secao.bege {
  background-color: var(--bege);
  background-image: url('../img/textura.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}
/* Mesma textura, sobre o azul institucional — regra nova 2026-08-28.
   screen (nao soft-light) pra textura ficar visivel, nao quase apagada. */
/* Fundo azul: usa o asset dedicado "Fundo Azul.png" (Fotos Site), nao mais o
   grao generico compartilhado com o bege. Regra de Renato, 2026-09-01: todo
   fundo azul do site deve usar esta imagem. */
/* 2026-09-03: Renato — "a secao toda perdeu a textura em cima do azul".
   Quando o fundo passou a usar o asset dedicado (2026-09-01), a textura saiu
   junto. As duas voltam empilhadas: a textura por cima, em `screen` (mesma
   escolha de 2026-08-28: soft-light deixava quase apagada), e o Fundo Azul
   por baixo, em modo normal. */
.secao.textura-azul {
  background-color: var(--ink-fundo);
  /* 2026-09-03 (2a rodada): `screen` com uma textura quase branca (media
     245) sobre azul escuro devolvia quase branco — foi o que apagou a Home
     e o Primeiro Voo. Trocado por um asset ja composto e medido
     (fundo-azul-textura.jpg): cor media #001B2E, identica ao mockup, com o
     grao preservado. Sem blend, sem risco de lavar. */
  background-image: url('../img/fundo-azul-textura.jpg');
  background-size: cover;
  background-position: center;
}

/* Marca d'agua da asa atras de bloco de texto de abertura — regra nova,
   2026-08-28. Nunca fundo escuro liso atras de bloco de destaque. */
.secao-marca-dagua { position: relative; overflow: hidden; isolation: isolate; }
/* Regra travada, 2026-08-28: toda arte/foto de fundo e "tela cheia" — encosta
   na borda real, mesmo que corte um pedaço. Nunca com respiro de seguranca. */
.secao-marca-dagua .marca-dagua {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 480px;
  height: auto;
  object-fit: contain;
  /* .45 e' o valor aprovado. A rodada anterior baixou para .20 aqui, na
     regra GLOBAL, por um pedido que era so da Consultoria — e apagou o
     simbolo da Home ("foi para atras da textura"). O ajuste da Consultoria
     mora agora em .secao-marca-dagua.marca-suave. */
  opacity: .45;
  pointer-events: none;
  z-index: 1;
}
.secao-cabecalho { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 720px; }
.secao-cabecalho.centro { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

/* Titulo de secao com barra de destaque embaixo — regra nova, 2026-08-28,
   "Como trabalhamos" e "Nossa metodologia" no Canva tem esse tracinho, nao
   so o titulo solto. */
.secao-cabecalho.com-barra .h2 { font-size: 42px; line-height: 1.15; }
/* Uniformidade sitewide, 2026-09-03: eyebrow era 13px aqui (.com-barra) e
   12px em todo o resto do site (base .eyebrow) — divergencia real que
   Renato apontou ("preciso que tenha uniformidade... um unico tamanho de
   fonte"). Igualado ao token base, 12px, em todo lugar. */
.secao-cabecalho.com-barra .eyebrow { font-size: 12px; }
.secao-cabecalho.com-barra::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--teal);
  border-radius: 2px;
  margin-top: 4px;
}
.secao-cabecalho.com-barra.claro-barra::after { background: var(--teal-claro); }

/* ---------- Hero ---------- */
/* position:relative + overflow:hidden no .hero: a .hero-foto-wrap vira sangria
   total (position:absolute), encostando na borda REAL da tela, nao na borda
   do .container (regra travada por Renato, 2026-08-28: foto de hero e' tela
   cheia, nunca cartao centralizado com respiro ao redor). */
.hero { background: var(--ink); padding: 88px 0 96px; position: relative; overflow: hidden; }
/* min-height explicito, 2026-08-31: .hero-foto-wrap e' absolute (bottom:0/
   top:0) dentro deste container — sem estar em fluxo, a foto nao contribui
   pra altura da secao, so a coluna de texto contribui. Em paginas com texto
   curto (ex.: Consultoria, sem eyebrow) a caixa da foto ficava baixa demais
   e o object-fit:cover cortava a foto de forma agressiva ("totalmente
   cortada", apontado por Renato). min-height da' um piso confiavel pra
   foto cobrir, independente do tamanho do texto ao lado. */
.hero .container.grade {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
  min-height: 520px;
}
.hero-texto { display: flex; flex-direction: column; gap: 20px; max-width: 540px; }
.hero-qualificador {
  display: inline-block;
  background: var(--teal-claro);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 8px;
  width: fit-content;
}
.hero-botoes { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--teal-claro); }
.hero-tag img { width: 20px; height: 20px; object-fit: contain; }
/* 2026-09-04: o selo nasceu para fundo escuro (--teal-claro). Sobre secao clara
   ele quase desaparecia — Renato pediu "mais nitidos". */
/* 2026-09-04, 2a rodada. Renato: "o simbolo e o texto estao com cores
   diferentes... acredito que o simbolo esta embaixo da textura". A textura
   EXISTE mesmo (o override `.academia-certificado-secao{background-image:none}`
   tem 1 classe e perde para `.secao.bege`, que tem 2 — regra 23), mas nao era
   ela que sumia com o simbolo: o arquivo
   certificado-icone.png e um cinza #A6A6A6 com alfa MAXIMO de 135 — ou seja,
   cinza a 53% de opacidade, que sobre fundo claro resolve para ~#CACDD2 e some.
   Nas outras 7 ocorrencias o fundo e escuro e ele funciona, entao o arquivo
   original nao pode ser alterado (regra 22). Criado
   certificado-icone-escuro.png: mesma silhueta, alfa normalizado para opaco e
   pintado em #001B2E — a MESMA cor do texto ao lado. */
.hero-tag.selo-sobre-claro { color: var(--ink); font-weight: 600; position: relative; z-index: 2; }

/* Fotos do carrossel (Metodologia/Academia) reduzidas dentro da caixa,
   inteiras visiveis — nao mais sangria/cover cortando a cena. Diretriz
   numerica de Renato, ajustada em rodadas (2026-08-31): comecou 70%/60%,
   Metodologia parou em 75% (aprovado, nao mexer). Academia: +20 (80%),
   extrema-direita + colada no fim do bloco (igual Consultoria, sem cortar —
   foto de proporcao diferente), +10 (90%), depois +4 (94%) puxando so o
   canto superior-esquerdo pra fora — o ancoramento bottom-right (flex-end/
   flex-end) ja fixa o canto oposto, entao so aumentar o max-width/height
   cresce assimetrico do jeito pedido, sem recentralizar. Mais um nudge de
   3% pra esquerda (padding-right), o braco do personagem estava quase
   encostando na borda direita real da tela. */
.hero-foto-wrap.foto-contida {
  display: flex;
  justify-content: center;
  overflow: visible;
}
.hero-foto-wrap.foto-contida .foto-principal {
  width: auto; height: auto; object-fit: contain; position: static;
}
.hero-foto-wrap.foto-contida.reduz-30 { align-items: center; }
.hero-foto-wrap.foto-contida.reduz-30 .foto-principal { max-width: 75%; max-height: 75%; }
/* Academia: historico de ajuste (2026-08-31) — padding-right 3% -> 1.5% ->
   0.75% (mais pra direita a cada rodada); max-width/height 94% -> 96%
   (+2%, mesmo canto superior-esquerdo puxado pra fora). Fase 2 (Consultoria
   reduzida) ja aprovada, nao mexer nela junto. */
.hero-foto-wrap.foto-contida.reduz-40 { align-items: flex-end; justify-content: flex-end; padding-right: 0.75%; }
.hero-foto-wrap.foto-contida.reduz-40 .foto-principal { max-width: 96%; max-height: 96%; }

/* Consultoria no carrossel (Home/Contato), aprovada 2026-08-31: reduzida 2%,
   puxando o canto superior-esquerdo em direcao ao inferior-direito.
   transform-origin:bottom right mantem esse canto ancorado na borda real
   da tela (sangria), sem recolocar a foto. */
.hero-foto-wrap.foto-recuada-2 .foto-principal {
  transform-origin: bottom right;
  transform: scale(0.98);
}

/* Consultoria, pedido de Renato 2026-09-03: aumentar a foto puxando o
   canto SUPERIOR ESQUERDO pra fora — ancora no canto oposto (inferior
   direito), mesma tecnica de .foto-recuada-2, so que crescendo em vez de
   reduzindo. Ajustado de 2% para 1% no mesmo dia — 2% forcava o upscale
   o suficiente pra perder nitidez perceptivel; posicao (colada no fundo
   da secao e na barra de navegacao) ja estava correta e nao foi tocada. */
/* Pedido de Renato 2026-09-03: ainda grande em 1.01 — reduzir mais 2%,
   puxando o canto superior esquerdo em direcao ao inferior direito
   (transform-origin ja fixo em bottom right, so o valor de escala muda). */
/* 2026-09-03 (3a rodada): Renato pediu -2% de novo. 0.99 -> 0.97.
   Canto inferior direito segue ancorado; a foto nao sai do lugar. */
/* 2026-09-03 (4a rodada, pedido de Renato): "diminuir na proporcao solicitada
   anteriormente, SEM perder o contato com a barra de navegacao e a parte de
   baixo da secao". O scale() era justamente o que quebrava esse contato — ele
   encolhe nas DUAS dimensoes e descola a foto do topo. Mecanica trocada:
   a altura volta a ser 100% (top:0/bottom:0 do wrapper) e a reducao passa a
   ser so de LARGURA. Equivalencia medida: 48% x 0.97 = 46,56% de largura
   visual antes; -2% => 45,6%. */
.hero-foto-wrap.hero-consultoria {
  /* 2026-09-04. Renato, pela 3a vez: "a foto da hero ainda esta grande".
     A largura ja estava MENOR que a do mockup (44,4% contra 46,2% medidos) —
     nunca foi area, era ZOOM (regra 20). A caixa tinha proporcao 0,892 e o
     arquivo tem 0,986: o `cover` ampliava 10,5% e cortava as laterais, o que
     tambem viola "nao corte nenhuma foto". Corrigido travando a caixa na
     proporcao EXATA do arquivo — zoom 1,000, corte zero — e devolvendo a
     largura do mockup. Resultado: 631x640, os mesmos px medidos no protótipo,
     com os 16px de respiro em cima e embaixo. */
  /* A LARGURA e consequencia da altura, nao o contrario: com top e bottom
     fixos, a altura fica presa a secao e o aspect-ratio devolve a largura
     exata do arquivo. E o unico jeito de ter, ao mesmo tempo, contato em
     cima e embaixo (o que ele repete desde a 1a rodada) e zoom 1,000. */
  top: 16px; bottom: 16px;
  width: auto; right: 0;
  aspect-ratio: 1262 / 1280;
  border-radius: var(--radius) 0 0 var(--radius);
}
/* a secao acompanha a foto: 640px de foto + 16px de respiro de cada lado.
   184px sao o padding do hero, entao o container fica com 488px. */
.hero:has(.hero-foto-wrap.hero-consultoria) .container.grade { min-height: 488px; }
.foto-ampliada-2 {
  transform: none;
}

/* Testado e abandonado 2026-08-31: brilho atras da foto (resgate do modelo
   inicial, arquivos de Renato). Consultoria nao mostrou nada (foto cobre a
   caixa inteira); Metodologia/Academia mostraram, mas Renato reprovou —
   "nao ficou legal". Removido de proposito, nao reaplicar sem novo pedido
   dele. Se ele quiser refazer manualmente, os arquivos originais continuam
   em Site Claude/Fotos Carrosseis/*-Brilho.png. */

/* Selo "Formacao com Certificado", tamanho grande (icone 28px, cinza): usado
   em "Nossa metodologia" e replicado no hero da Academia por pedido de
   Renato 2026-08-31 (mesmo tamanho e cor nos dois blocos). */
.hero-tag-grande { color: #9aa3b0; }
.hero-tag-grande img { width: 28px; height: 28px; }
.metodologia-topo .hero-tag { color: #9aa3b0; align-self: flex-start; margin-top: 4px; }
.metodologia-topo .hero-tag img { width: 28px; height: 28px; }

/* Foto real (pessoa/cena): sangria total na borda direita real do viewport,
   sem moldura. Correcao 2026-09-03 (medida contra o mockup matriz da
   Consultoria): a borda DIREITA (que encosta no viewport) fica quadrada, mas
   a borda ESQUERDA (interna, onde a foto encontra o painel escuro) tem o
   raio travado do site (--radius, 15px) — nao e "sem canto arredondado" nos
   dois lados como a nota antiga dizia. */
.hero-foto-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48%;
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
}
.hero-foto-wrap img.foto-principal { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; z-index: 2; }
/* .sem-filtro: algumas fotos de hero (Consultoria, medido contra o mockup
   matriz 2026-09-03) sao nitidas, sem duotone — o overlay abaixo nao serve
   pra todo hero de pagina interna, so quando o mockup confirmar o duotone. */
.hero-foto-wrap.sem-filtro::after { display: none; }
.hero-foto-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(11,25,42,.55), rgba(70,132,151,.35));
  z-index: 3;
}
/* Fotos do carrossel da Home (abas): teaser vivo, nao retrato editorial —
   sem overlay duotone, regra nova 2026-08-28. O duotone continua valendo
   pro hero de pagina interna (Consultoria, DEC/LAD/TAG).
   Camadas, na ordem que Renato descreveu no Canva (2026-08-28): foto
   principal na frente, logo no meio, sombra esfumaçada atras, so pra
   dar clima — nunca sombra dura/forte, nunca cortada em caixa. */
.aba-painel .hero-foto-wrap { width: 46%; }
.aba-painel .hero-foto-wrap::after { display: none; }
.hero-foto-wrap .foto-marca-dagua {
  position: absolute;
  top: 6%; right: 6%;
  width: 60%;
  height: auto;
  opacity: .22;
  z-index: 1;
  pointer-events: none;
}

/* Selo/crachá (arte, nao foto de pessoa): continua contido, centralizado,
   dentro do grid normal — nao e sangria. */
.hero-selo-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.hero-selo-wrap img { width: 100%; height: 420px; object-fit: contain; }
.hero-sem-foto .container { max-width: var(--container); }

/* ---------- Grids e cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.card.escuro { background: var(--ink-fundo); }
/* Item sem cartao: numero + titulo + corpo direto no fundo da secao, sem
   caixa branca. Regra nova 2026-08-28 — "Como trabalhamos" nao tem cartao
   no Canva, so o texto solto. */
.item-simples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.item-simples .num {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 22px;
  color: var(--teal);
}

.card .num {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 22px;
  color: var(--teal);
}

/* TAG, "Tres condicoes" — correcao 2026-09-03: a foto tinha uma margem do
   fundo do card visivel ao redor dela (a foto nao ia ate a borda). Medido
   contra o mockup matriz: a foto preenche o card inteiro por baixo, raio
   so nos cantos de baixo (os de cima encostam direto na faixa de titulo,
   sem transicao). Cores das faixas de titulo alternam claro/escuro/claro,
   medidas por pixel no mockup (#B1C4DD claro, --ink escuro). */
.card-foto-cheia {
  background: #B1C4DD;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.card-foto-cheia-escuro { background: var(--ink); }
.card-foto-cheia-topo { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
/* flex:1 (nao height fixa) — o grid-3 estica os 3 cards pra mesma altura
   (align-items:stretch padrao do CSS Grid, bom aqui: os 3 ficam com a
   mesma altura mesmo com texto de tamanho diferente). Com height fixa a
   foto nao acompanhava esse esticamento e sobrava espaco vazio embaixo
   dela dentro do card — bug real encontrado 2026-09-03 por medicao. */
.card-foto-cheia-img { width: 100%; flex: 1; min-height: 160px; object-fit: cover; display: block; }

/* TAG, "Como o TAG organiza" — setas curvas antes de cada paragrafo,
   medidas no mockup matriz (accent decorativo, nao existia na pagina).
   "(time)" no titulo em peso mais leve, tambem medido do mockup. */
.ugb-parentese { font-weight: 400; color: var(--txt-sec); }
.ugb-paragrafo { display: flex; gap: 14px; align-items: flex-start; }
.seta-curva { width: 22px; height: 22px; min-width: 22px; margin-top: 4px; color: var(--ink); }
.card.escuro .num { color: var(--teal-claro); }

/* "Como trabalhamos": foto ao lado do grid de cards, mesma altura — nao foto
   empilhada abaixo. Regra nova, 2026-08-28. */
.como-trabalhamos-grade {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 28px;
  align-items: stretch;
}
.como-trabalhamos-foto {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* "Nossa metodologia": titulo maior, selo de certificado no canto, selos
   DEC/LAD/TAG soltos sem cartao/borda. Regra nova, 2026-08-28. */
.metodologia-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.metodologia-titulo { font-size: 40px; }
/* Recentralizado 2026-08-31: medido por centroide de pixel do selo LAD
   (o corte diagonal do card puxa a massa visual pra esquerda do que a
   caixa geometrica sugere) — desvio real medido ~6-8px em 1240px de
   container. Desloca o bloco inteiro (selo+texto+botao dos 3) mantendo o
   gap atual entre eles, LAD passa a cair no centro real da pagina. */
.metodologia-selos { align-items: start; margin-left: 8px; }
.metodologia-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
}
.metodologia-selo { width: 100%; max-width: 220px; height: auto; margin: 0 auto 6px; }

.selo-quadrado {
  width: 44px; height: 44px; min-width: 44px;
  background: var(--ink);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--branco);
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 15px;
}
.selo-circular {
  width: 104px; height: 104px; min-width: 104px;
  border: 2px dashed var(--borda-clara);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.selo-circular .interno {
  width: 68px; height: 68px;
  background: var(--branco);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 30px;
  color: var(--teal);
}
.lista-selo-circular { display: flex; flex-direction: column; gap: 32px; max-width: 900px; }
.lista-selo-circular .linha { display: flex; gap: 28px; align-items: center; }
.lista-selo-circular .linha p { font-size: 16px; line-height: 1.65; color: var(--txt-sec); max-width: 640px; }

.o-que-muda-com-foto { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.o-que-muda-com-foto img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius); }
.o-que-muda-com-foto .lista { display: flex; flex-direction: column; gap: 20px; }
.o-que-muda-com-foto .card-item { background: var(--branco); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.o-que-muda-com-foto .card-item .linha-topo { display: flex; gap: 14px; align-items: center; }
.o-que-muda-com-foto .card-item p.corpo-item { font-size: 14px; color: var(--txt-sec); line-height: 1.6; }

/* Pagina LAD, 2026-09-03 — foto "coluna cheia": estica a altura toda da
   coluna ao lado do texto (grid align-items:stretch no pai), nao uma altura
   fixa arbitraria. Usada em "O Problema", onde a foto vai do titulo da
   secao ate o fim dela — medido contra o mockup matriz do LAD. */
.foto-coluna-cheia { width: 100%; height: 100%; min-height: 480px; object-fit: cover; border-radius: var(--radius); }
/* Correcao no mesmo dia: mesmo esticada (stretch) pra igualar a altura da
   coluna de texto, a foto parava onde o CONTEUDO acaba — a secao ainda
   tinha o padding-bottom padrao (88px, `.secao{padding:88px 0}`) depois
   disso, e sobrava um vao ate a borda real ("nao colada ao fundo",
   apontado por Renato). margin-bottom negativo NAO funciona aqui — Grid
   stretch ignora margem negativa pra crescer alem da row (testado e
   descartado). Fix real: a secao perde o padding-bottom (0 em vez de
   88px) e esse mesmo valor volta como padding-bottom só na coluna de
   texto — a foto, esticada a 100% da row, passa a ir ate a borda real da
   secao (que agora nao tem padding la), e o texto mantem o respiro de
   sempre por conta propria. */
.secao-problema { padding-bottom: 0; }
.secao-problema-texto { padding-bottom: 88px; }

/* Frase de destaque em caixa (nao e a citacao de fim de secao, e uma caixa
   arredondada dentro do bloco de texto, com aspas decorativas grandes) —
   medido contra o mockup matriz do LAD, "O Problema". */
.frase-destaque {
  background: var(--ink);
  color: var(--branco);
  border-radius: var(--radius);
  padding: 24px 28px;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  position: relative;
}
.frase-aspas { font-size: 28px; font-weight: 800; color: var(--teal-claro); line-height: 0; vertical-align: -6px; }
.frase-aspas-fecha { margin-left: 4px; }

/* Sistema A7 — "Sete elementos": secao clara, citacao centralizada, caixa
   azul escuro contendo os 7 itens em linhas de 3, separadas por linha
   pontilhada (nao cada card com borda propria — a linha e da fileira
   inteira). "SISTEMA A7" fixado no canto inferior direito da caixa, marca
   d'agua grande. Medido contra o mockup matriz do LAD, 2026-09-03. */
.citacao-central {
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.a7-caixa {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 44px 48px;
  overflow: hidden;
}
.a7-linha {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 2px dotted rgba(255,255,255,.28);
}
.a7-linha:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.a7-linha-final { grid-template-columns: 1fr; }
.a7-item { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.a7-item .num { font-family: var(--font-titulo); font-weight: 800; font-size: 22px; color: #9aa3b0; }
/* Pedido de Renato 2026-09-03: fonte pequena demais pra caixa grande do
   Sistema A7. Titulo de 18px (h3 base) para 21px, corpo de 14px para 16px. */
.a7-item h3 { margin-top: 2px; font-size: 21px; }
.a7-item p { font-size: 16px; }
.a7-marca {
  position: absolute;
  right: 40px; bottom: 28px;
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 46px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.16);
  z-index: 0;
  pointer-events: none;
}

/* Diagnostico LAD — cartao escuro pontilhado + bolinha de status antes da
   pontuacao (verde/amarelo/vermelho), cores medidas por pixel no mockup
   matriz. Substitui os cartoes brancos genericos. */
.diagnostico-lista { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.diagnostico-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--ink-fundo);
  border: 2px dashed rgba(255,255,255,.3);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.diagnostico-item .bolinha { width: 16px; height: 16px; min-width: 16px; border-radius: 999px; margin-top: 7px; }
.bolinha-verde { background: #AAEB8E; }
.bolinha-amarela { background: #F9E181; }
.bolinha-vermelha { background: #FF5757; }

/* LAD "O que muda", revertido 2026-09-03: sangria total foi a correcao
   errada aqui — a foto (lad-reuniao.jpg) e um RECORTE com fundo branco
   solido (pessoas isoladas, sem cena ao redor), nao uma foto de ambiente.
   object-fit:cover numa caixa alta so mostrava um vao branco gigante em
   volta do grupo pequeno de pessoas ("totalmente descalibrada", "fundo
   branco", apontado por Renato). Fundo removido de verdade (recorte por
   cor, PNG com alfa: lad-reuniao-recortada.png) e a secao voltou a usar
   o padrao `.o-que-muda-com-foto` (contido, menor) — nao e regressao da
   regra geral de sangria, e excecao justificada pelo tipo real do asset:
   tratamento de recorte (arte isolada) e tratamento de foto de ambiente
   nao sao intercambiaveis (mesma licao ja registrada em 2026-08-28 pro
   selo do DEC/LAD/TAG). Ver `logica-de-design.md`. */

/* TAG "O que muda", revertido 2026-09-03 (mesma licao do LAD): sangria era
   o tratamento errado — tag-o-que-muda-nova.png e um detalhe (mao+tablet,
   fundo transparente ja correto), nao uma cena de ambiente. Forcado dentro
   de uma caixa alta via sangria, ficava grande demais e a caixa de texto
   (z-index acima) sentava por cima da parte de baixo da foto — lia como
   "foto atras do titulo". Voltou ao padrao `.o-que-muda-com-foto`
   (contido, com os cartoes brancos 01/02/03 — que a versao sangria tinha
   perdido, apontado por Renato). */

/* LAD "Duas portas" — foto sangria pela direita (espelha o padrao da
   Consultoria), texto com largura travada pra nunca encostar na foto,
   qualquer que seja o viewport. */
.duas-portas-secao { position: relative; overflow: hidden; min-height: 620px; }
/* Bug real 2026-09-03, achado por Renato ("texto atrás da foto", "erro
   gigante"): .duas-portas-texto herdava margin:0 auto do .container,
   centralizando o BLOCO DE TEXTO na largura inteira da secao. A foto e
   position:absolute (pinta sempre por cima de conteudo estatico,
   independente da ordem no DOM) — em telas largas, a metade direita do
   texto centralizado caia embaixo da area da foto e ficava escondida.
   Fix: tirar a centralizacao, o texto encosta perto da borda real
   esquerda (mesmo padding usado no resto do site) e so cresce ate
   max-width — nunca mais entra na faixa da foto, qualquer que seja a
   largura da tela. Mesma causa raiz no LAD e no TAG (classe compartilhada). */
.duas-portas-texto {
  max-width: 620px;
  margin-left: 0;
  padding-left: max(24px, calc((100% - 1240px) / 2 + 24px));
}
/* Mesma correcao do .tag-omq-foto-wrap: absoluto no wrapper, nao na img.
   Largura 44%->46% ("maior 2%", pedido de Renato) — com o texto agora
   preso a esquerda (fix acima), sobra distancia de sobra sem overlap. */
/* 2026-09-03 (4a rodada), pedido igual no TAG e no LAD: "a foto nao precisa
   encostar na parte de baixo da secao, apenas na lateral" — e, no TAG, "se a
   foto ficar centralizada com o meio da pagina neste canto, ja esta ok".
   Ancoragem vertical passa de bottom:0 para o centro; right:0 fica. */
.duas-portas-foto-wrap {
  position: absolute; right: 0;
  bottom: auto; top: 50%; transform: translateY(-50%);
  width: 34.5%; max-width: 435px;
  z-index: 0;
}
.duas-portas-foto { width: 100%; height: auto; display: block; }

/* ---------- Citacao ---------- */
.citacao { padding: 64px 0; }
.citacao blockquote {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--branco);
}
.citacao.claro blockquote { color: var(--ink); }

/* Pagina Consultoria: lista com numero grande + linha pontilhada separando
   cada item — diferente do selo circular usado noutras paginas. Construida
   2026-08-31 a partir do mockup anexado por Renato (referencia visual, sem
   Canva/CSS de origem — valores de tamanho/opacidade sao ponto de partida,
   nao medicao exata; ajustar se Renato apontar divergencia). */
/* Correcao 2026-09-03, medida contra o mockup matriz da Consultoria: nao e
   uma linha solta embaixo do bloco (que esticava ate a marca d'agua, sem
   relacao com o texto) — e um contorno pontilhado fechado em volta de cada
   numero+texto, com largura do proprio conteudo (fit-content), nunca do
   container inteiro. Cor trocada pra --txt-sec (mais escura que
   --borda-clara) porque a antiga nao aparecia sobre o fundo bege. */
.lista-numeros-grandes { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.lista-numeros-grandes .linha-num {
  display: flex; gap: 32px; align-items: flex-start;
  padding: 24px 28px;
  border: 2px dashed var(--borda-pontilhada);
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}
.lista-numeros-grandes .num-grande {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  opacity: .18;
  min-width: 64px;
}
.lista-numeros-grandes p { font-size: 16px; line-height: 1.65; color: var(--txt-sec); max-width: 640px; padding-top: 6px; }
.lista-numeros-grandes p strong { color: var(--ink); }

/* Pagina Consultoria: "Como aplicamos" em 2 colunas — intro solta a
   esquerda, card com os 3 paragrafos de lead em negrito a direita. */
/* 2026-09-04, apontamento de Renato: "na secao como aplicamos o fundo e
   branco e aqui esta azul mesclando com o fundo da secao tecnologia sem
   estrutura (que e azul)". Medido no mockup da Consultoria: fundo #F1F3F4,
   texto da coluna esquerda #001B2E, e os 3 paragrafos numa caixa azul de
   cantos arredondados a direita (a caixa ja existia — invisivel porque a
   secao inteira era azul). */
.como-aplicamos-secao { background: #F1F3F4; }
.como-aplicamos-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.como-aplicamos-intro { display: flex; flex-direction: column; gap: 16px; }
.como-aplicamos-card {
  background: var(--ink-fundo);
  border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.como-aplicamos-card p { font-size: 14px; line-height: 1.65; }
/* Pedido de Renato 2026-09-03: negrito sem destaque de cor no fundo escuro
   (branco bold sobre branco bold nao le como destaque, so como peso). Usa
   --teal-claro, o mesmo tom ja usado em numeros/selos sobre fundo escuro
   no resto do site. */
.como-aplicamos-card p strong { color: var(--teal-claro); }

/* Pagina Consultoria: "chao de fabrica" — foto e o FUNDO INTEIRO da secao
   (unico caso no site, confirmado no mockup matriz 2026-09-03), texto
   sobreposto em cima, nunca foto empilhada abaixo do texto num bloco a
   parte. */
.chao-fabrica-secao { position: relative; overflow: hidden; }
.chao-fabrica-secao .chao-fabrica-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.chao-fabrica-secao::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,25,42,.88) 0%, rgba(11,25,42,.6) 40%, rgba(70,132,151,.25) 100%);
  z-index: 1;
}
.chao-fabrica-secao {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.chao-fabrica-secao .container {
  position: relative;
  z-index: 2;
  /* Pedido de Renato 2026-09-03: o container padrao (max-width 1240px,
     centralizado) deixava o texto "no centro da pagina" em telas largas,
     porque a foto de fundo cobre o viewport inteiro mas o texto ficava
     preso na faixa central de 1240px. Container proprio desta secao,
     colado perto da borda real (nao centralizado), pra ler como
     "texto sobre a foto", nao "bloco de conteudo no meio da tela". */
  max-width: none;
  margin-left: 0;
  padding-left: max(24px, 6%);
}
.chao-fabrica-topo { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 640px; }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; display: flex; flex-direction: column; gap: 28px; align-items: center; }
.cta-final h2 { max-width: 720px; }
.cta-final .botoes { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- Rodape ---------- */
footer.site-footer { background: var(--paper); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-identidade { display: flex; gap: 14px; align-items: flex-start; }
.footer-identidade img { width: 34px; height: 34px; object-fit: contain; }
.footer-identidade h3 { font-family: var(--font-titulo); font-size: 17px; font-weight: 800; letter-spacing: .4px; color: var(--ink); }
.footer-identidade .sub { font-size: 11px; font-weight: 300; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink); margin-top: 4px; }
.footer-identidade p.desc { font-size: 14px; color: var(--txt-sec); max-width: 340px; margin-top: 10px; }
.footer-col h3 { font-family: var(--font-titulo); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.footer-col a { display: block; font-size: 14px; color: var(--teal); padding: 4px 0; }
.footer-divisor { height: 1px; background: #D7DEE8; margin: 32px 0; }
.footer-contato { font-size: 13px; color: var(--txt-sec); }

/* ---------- Abas (Home) ---------- */
.abas-menu { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.aba-btn {
  background: var(--ink-fundo);
  color: var(--txt-claro);
  border: 0;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.aba-btn:hover { color: var(--branco); }
.aba-btn.ativa { background: var(--teal); color: var(--branco); }
.aba-painel { display: none; }
.aba-painel.ativa { display: block; }
.aba-painel .grade {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--container);
}
.aba-painel .foto-wrap { border-radius: var(--radius); overflow: hidden; }
.aba-painel .foto-wrap img { width: 100%; height: 420px; object-fit: cover; }

/* ---------- Formulario ---------- */
.form-contato { display: flex; flex-direction: column; gap: 16px; background: var(--branco); border-radius: var(--radius); padding: 32px; }
.form-contato label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.form-contato input, .form-contato textarea {
  font-family: var(--font-corpo);
  font-size: 14px;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--borda-clara);
  border-radius: 8px;
  background: var(--paper);
  resize: vertical;
}
.form-contato input:focus, .form-contato textarea:focus { outline: none; border-color: var(--teal); }
.form-msg { font-size: 13px; color: var(--teal); display: none; }
.form-msg.visivel { display: block; }

/* ---------- Utilitarios ---------- */
.mt-0 { margin-top: 0; }
.texto-centro { text-align: center; }
.max-900 { max-width: 900px; margin: 0 auto; }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .hero .container.grade,
  .o-que-muda-com-foto,
  .aba-painel .grade,
  .como-trabalhamos-grade,
  .como-aplicamos-grade { grid-template-columns: 1fr; }
  .lista-numeros-grandes .num-grande { font-size: 40px; min-width: 44px; }
  .chao-fabrica-secao { min-height: 320px; }
  /* Sangria total so faz sentido lado a lado; em telas estreitas a foto do
     hero volta a empilhar abaixo do texto, como qualquer foto de conteudo. */
  .hero-foto-wrap {
    position: static;
    width: auto;
    margin-top: 32px;
    border-radius: var(--radius);
  }
  .hero-foto-wrap img { height: 280px; }
  .aba-painel .foto-wrap img { height: 320px; }
  .hero-selo-wrap img { height: 260px; }
  .o-que-muda-com-foto img { height: 320px; order: -1; }
  .como-trabalhamos-foto { min-height: 280px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* LAD, 2026-09-03: mesma logica das outras sangrias — em tela estreita,
     foto empilha abaixo do texto em vez de ficar absoluta ao lado. */
  .foto-coluna-cheia { min-height: 320px; margin-top: 24px; }
  .a7-linha, .a7-linha-final { grid-template-columns: 1fr; }
  .a7-marca { position: static; display: block; text-align: right; margin-top: 20px; font-size: 32px; }
  .duas-portas-foto-wrap, .lad-omq-foto-wrap, .tag-omq-foto-wrap, .problema-sangria-foto-wrap {
    position: static; width: 100%; max-width: none; margin-top: 24px;
  }
  .lad-omq-lista, .tag-omq-lista { max-width: none; margin-left: 0; margin-top: 24px; }
  .duas-portas-texto, .problema-sangria-texto { max-width: none; }
}

@media (max-width: 860px) {
  nav.nav-principal > ul { display: none; }
  nav.nav-principal.aberto > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink);
    padding: 16px 24px 24px;
    box-shadow: 0 16px 24px rgba(0,0,0,.3);
  }
  nav.nav-principal.aberto .dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; padding: 0 0 0 16px; margin-top: 4px; box-shadow: none; }
  nav.nav-principal.aberto .tem-dropdown { width: 100%; }
  .nav-toggle { display: block; }
  .site-header .container { flex-wrap: wrap; }
  .h1, .hero .h1 { font-size: 32px; }
  .h2 { font-size: 26px; }
  .secao { padding: 56px 0; }
  .hero { padding: 56px 0 64px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .container { padding: 0 20px; }
}

/* DEC, "A jornada em tres atos" — pedido de Renato 2026-09-03: as letras D/E/C
   antes de Direcao/Estrategica/Clara viravam texto corrido com virgula
   ("D, Direcao"); no site original elas sao destaque — fonte maior, dentro de
   um quadrado com cantos curvos. Mesma linguagem visual do .selo-quadrado
   (numeros 01/02/03), mas cor propria porque aqui o card ja e escuro (--ink
   colidiria com o fundo do card) e o selo fica inline no titulo, nao em bloco. */
.letra-selo-titulo { display: flex; align-items: center; gap: 10px; }
.letra-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px; min-width: 34px;
  background: var(--teal);
  border-radius: 9px;
  color: var(--branco);
  font-size: 20px;
  font-weight: 800;
}

/* LAD, "O Problema" — pedido de Renato 2026-09-03: foto um pouco grande,
   reduzir 2% e puxar levemente para a direita (sem afetar TAG/DEC, que
   tambem usam .foto-coluna-cheia — por isso classe modificadora propria,
   nao mudanca na base compartilhada). transform-origin em "right" faz o
   encolhimento vir do lado esquerdo, entao o conteudo visivel desloca
   levemente pra direita, mantendo o lado direito ancorado. */
.lad-problema-foto {
  width: 72%;
  height: auto;
  align-self: end;
  justify-self: end;
  object-fit: contain;
  transform: none;
}
/* 2026-09-03: Renato pediu a base da secao encostando na foto — foto e
   texto ficam onde estao, so o vao de 56px abaixo sai. */
.secao-problema:has(.lad-problema-foto) { padding-top: 56px; padding-bottom: 0; }

/* LAD "O que muda" — refeito 2026-09-03: o asset usado antes
   (lad-reuniao.jpg/recortada.png) era um recorte de pessoas isoladas, sem
   ambiente, e por isso levou a um tratamento contido/pequeno. Renato indicou
   o asset certo: "metodo LAD 7.png" (Fotos Site), cena de reuniao real com
   fundo ja removido (transparente), sujeito ancorado no canto inferior
   esquerdo do frame. Volta ao padrao geral de sangria (mesma tecnica do
   TAG) — object-position:left bottom faz o cover manter o grupo de pessoas
   em quadro (nao o vazio transparente do resto do frame), o que tambem
   entrega "colado a esquerda e embaixo" na pratica. */
.lad-o-que-muda { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 64px; }
.lad-omq-foto-wrap {
  position: absolute; left: 0; bottom: 0;
  /* 4a rodada: o problema nao era o tamanho — era a FOTO. A do site tinha
     enquadramento diferente do mockup, entao aumentar de 5 em 5% nunca ia
     aproximar (Renato: "continuaram a mesma coisa"). Trocada pelo recorte do
     mockup e dimensionada para nao passar por baixo dos cards (a 880px ela
     invadia 38px da lista da direita). */
  /* 2026-09-04: Renato — "ficou um pouco grande e sem nitidez, ela tambem
     possui um fundo e precisa ficar sem fundo... a foto sem fundo esta na
     pasta Fotos Site e tem o nome metodo LAD 7". Trocado o arquivo (origem
     2147px, contra 1132px do recorte de mockup) e reduzido ~10%: 656 -> 590px,
     o que faz a foto renderizar a 0,5x — sem upscale. */
  width: 41.4%; max-width: 590px;
  z-index: 0;
}
.lad-omq-foto { width: 100%; height: auto; display: block; }
.lad-o-que-muda .container { position: relative; z-index: 1; }
.lad-omq-lista { max-width: 560px; margin-left: auto; display: flex; flex-direction: column; gap: 20px; }

/* TAG, "O Problema" e "A rotina que sustenta" — pedido de Renato 2026-09-03:
   a foto (que estava dentro do grid, so ate a borda do container) precisa
   ir ate a borda REAL do viewport, do lado da barra de navegacao (direita).
   Mesma tecnica da Consultoria (hero movido pra fora do grid): wrapper
   absoluto FORA do .container, secao vira o positioning context. LAD
   mantem o padrao anterior (foto dentro do grid) — nao pediu esse ajuste. */
/* 2026-09-03: foto +5%; a secao sobe de 520 para 586px para a distancia
   do topo continuar a mesma (149px medidos) enquanto a foto cresce. */
/* 2026-09-03 (4a rodada): foto +5% de novo (462 -> 485px). A secao sobe de
   586 para 610px pelo mesmo motivo da rodada anterior — pedido literal:
   "aumentar o tamanho da secao se necessario para nao encostar em cima da
   caixa". Foto h/w~0.99, entao +23px de foto = +24px de secao. */
/* a secao cresce junto com a foto (551px de largura => ~545px de altura),
   para o respiro do topo nao encolher. */
.problema-sangria { position: relative; overflow: hidden; padding-bottom: 0; min-height: 760px; }
.problema-sangria-texto { max-width: 620px; padding-bottom: 88px; }
.problema-sangria-foto-wrap {
  position: absolute; right: 0; bottom: 0;
  /* 4a rodada: Renato pediu maior ainda que o valor do mockup (38,7%).
    551 -> 627px (+14%). A secao acompanha, abaixo. */
 width: 44%; max-width: 627px;
  z-index: 0;
}
.problema-sangria-foto { width: 100%; height: auto; display: block; }

/* LAD "O que muda" — pedido de Renato 2026-09-03: texto escuro (--ink)
   direto sobre o fundo escuro da secao ficava ilegivel ("azul em fundo
   azul"). Padrao pedido: tarjas BRANCAS (fundo da pagina ja e escuro,
   entao a tarja inverte — parecido com .diagnostico-item, que faz o
   oposto numa pagina clara). Numero 01/02/03 vira texto azul solto, sem
   caixa escura (a caixa some, so sobra o numero na cor do destaque). */
.lad-omq-lista .card-item {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.lad-omq-lista .card-item .linha-topo { display: flex; gap: 14px; align-items: center; }
.lad-omq-lista .card-item h3 { color: var(--ink); }
.lad-omq-lista .card-item .corpo-item { color: var(--txt-sec); font-size: 14px; line-height: 1.6; }
.lad-omq-lista .card-item .selo-quadrado {
  background: transparent;
  color: var(--teal);
  width: auto; height: auto; min-width: 0;
  padding: 0;
  font-size: 20px;
}

/* TAG "O que muda" — 2026-09-03, pedido repetido 3x por Renato e nao atendido
   ate aqui: foto colada AO FUNDO da secao e A LATERAL ESQUERDA da pagina.
   Asset correto: "Metodo TAG 14 - o que muda.png" (Fotos Site), que ja vem
   com o conteudo ancorado no canto inferior esquerdo do quadro — por isso
   object-position:left bottom entrega os dois "colados" de uma vez.
   Tarjas brancas 01/02/03 mantidas (pedido explicito dele na rodada do LAD,
   mesmo padrao aplicado aqui). */
.tag-o-que-muda { position: relative; overflow: hidden; }
/* 2026-09-03 (4a rodada): unica foto do TAG que Renato pediu para DIMINUIR
   ("somente diminuir de tamanho sem perder o contato com o canto esquerdo do
   site e o final da secao"). -5%, mesma proporcao usada nas outras desta
   pagina: 540 -> 513px. left:0/bottom:0 mantidos, entao os dois contatos
   pedidos continuam garantidos. */
/* TAG "Como o TAG organiza", pedido de Renato 2026-09-03: o bloco tinha
   max-width:900px direto no .container, e o `margin:0 auto` do container
   centralizava esses 900px na TELA — o texto nascia ~170px a direita da
   borda esquerda das outras secoes. Ele descreveu exatamente isso: "estao
   mais para o centro da secao, eu justificaria mais para a esquerda seguindo
   a mesma linha do titulo da pagina seguinte - A rotina que sustenta".
   Fix: container volta a 1240px (mesma regua do resto do site) e o limite de
   900px passa para um bloco interno alinhado a esquerda. */
.tag-organiza-bloco {
  max-width: 900px;
  margin-right: auto;
  display: flex; flex-direction: column; gap: 20px;
}

.tag-omq-foto-wrap {
  position: absolute; left: 0; bottom: 0;
  width: 39.9%; max-width: 513px;
  z-index: 0;
}
.tag-omq-foto { width: 100%; height: auto; display: block; }
.tag-o-que-muda .container { position: relative; z-index: 1; }
.tag-omq-lista { max-width: 560px; margin-left: auto; display: flex; flex-direction: column; gap: 20px; }
.tag-omq-lista .card-item {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.tag-omq-lista .card-item .linha-topo { display: flex; gap: 14px; align-items: center; }
.tag-omq-lista .card-item h3 { color: var(--ink); }
.tag-omq-lista .card-item .corpo-item { color: var(--txt-sec); font-size: 14px; line-height: 1.6; }
.tag-omq-lista .card-item .selo-quadrado {
  background: transparent;
  color: var(--teal);
  width: auto; height: auto; min-width: 0;
  padding: 0;
  font-size: 20px;
}

/* TAG "As tres condicoes" — 2026-09-03, RECONSTRUCAO contra o mockup matriz
   depois de Renato pedir que eu mesmo comparasse com o modelo. A secao
   estava montada com a base errada desde o inicio (por isso nenhuma rodada
   de ajuste de detalhe convergia):
   - fundo era `--ink` (escuro); no mockup e CLARO, medido #F0F2F3/#F1F3F4,
     com um degrade curto vindo do bege da secao anterior (#DFE1E2 no topo);
   - havia um H2 ("Autonomia responsavel tem tres condicoes...") que NAO
     existe no mockup — veio do documento de copy. Mesmo erro do "Liderar e
     cinco coisas" do LAD, ja corrigido antes: o prototipo manda, nao a copy;
   - eyebrow e centralizado no mockup (nao a esquerda), cinza #9FA0A0
     (nao o teal padrao do site);
   - texto dos cards e centralizado;
   - cards tem sombra suave. */
.secao.tres-condicoes {
  background: linear-gradient(180deg, #DFE1E2 0%, #F1F3F4 20%, #F1F3F4 100%);
}
.tres-condicoes-cabecalho { text-align: center; margin-bottom: 48px; }
.tres-condicoes-cabecalho .eyebrow { color: #9FA0A0; }
.tres-condicoes .card-foto-cheia {
  box-shadow: 0 10px 28px rgba(12, 25, 40, .12);
}
.tres-condicoes .card-foto-cheia-topo { text-align: center; }
/* 2026-09-04: Renato — "a parte superior da primeira foto (um resultado com
   dono) ficou um pouco mais acima do que as outras duas". Causa: o texto do
   card 1 e mais curto, e com `flex:1` a imagem tomava a sobra, comecando mais
   alto. Com altura fixa + margin-top:auto a foto cola na BASE do card, e como
   o grid estica os 3 cards para a mesma altura, os tres topos coincidem. */
.tres-condicoes .card-foto-cheia-img { flex: 0 0 auto; height: 240px; margin-top: auto; }
.tres-condicoes .card-foto-cheia-topo .corpo { max-width: none; }

/* Botao navy — cor exata dos botoes de "Duas Portas" no mockup do TAG
   (#001B2E medido), diferente do teal do .btn-primario. */
.btn-navy { background: #001B2E; color: var(--branco); }
.btn-navy:hover { background: var(--amarelo); color: var(--ink); }

/* LAD "Sistema A7" — 2026-09-03, leitura do mockup matriz a pedido de Renato:
   cada um dos 7 elementos tem, logo abaixo do nome, um subtitulo entre
   parenteses em peso normal ("Proposito (Proposito, sentido, visao)") que
   simplesmente NAO existia no site. Conteudo faltando, nao estilo — a secao
   parecia certa no layout e estava incompleta no conteudo.
   O titulo tambem ocupa uma linha so no mockup (o max-width padrao de 720px
   do .h2 quebrava em duas). */
.a7-sub {
  font-family: var(--font-corpo);
  font-size: 15px;
  font-weight: 400;
  color: var(--txt-claro);
  line-height: 1.35;
  margin-top: -2px;
  margin-bottom: 6px;
  display: block;
}
/* O limite real vinha do .secao-cabecalho.centro (max-width:720px), que e
   compartilhado com o Diagnostico — secao que Renato aprovou como esta.
   Por isso o alargamento e escopado so nesta secao. */
#sistema-a7 .secao-cabecalho.centro { max-width: 940px; }
#sistema-a7 .secao-cabecalho .h2 { max-width: 100%; }

/* ==========================================================================
   DEC — correcoes medidas contra o mockup "Metodo - DEC.png" (2026-09-03)
   Erros que estavam na base e por isso nenhum ajuste fino convergia:
   fundo de secao invertido (escuro onde o mockup e claro) em 3 secoes,
   foto com fundo branco onde o arquivo sem fundo sempre existiu, e a
   secao de modulos montada como grade 2x quando o mockup e lista vertical.
   ========================================================================== */

/* "A Logica da Transformacao" — foto sem fundo, colada a lateral direita da
   pagina e ao fim da secao (regra sitewide de sangria). */
.dec-logica { position: relative; overflow: hidden; }
.dec-logica-foto-wrap {
  position: absolute; right: 6%; bottom: 0;
  width: 30%; max-width: 380px;
  z-index: 0;
}
.dec-logica-foto { width: 100%; height: auto; display: block; }
.dec-logica .container { position: relative; z-index: 1; }
.dec-logica .secao-problema-texto { max-width: 640px; }

/* Citacao inline com aspas grandes (nao e a .frase-destaque, que e a caixa) */
.citacao-inline {
  font-family: var(--font-titulo);
  font-size: 19px; font-weight: 600; line-height: 1.5;
  color: var(--ink); margin: 0;
}
.frase-destaque-centro { text-align: center; font-size: 19px; }

/* LAD "O Problema", pedido de Renato 2026-09-03: a caixa azul ia ate a
   largura inteira da coluna e sobrava um vao a direita das palavras, maior
   que a folga da esquerda. Pedido literal: "justificar a caixa azul do lado
   direito deixando a mesma distancia que tem do lado esquerdo das palavras".
   fit-content faz a caixa parar no texto — a folga passa a ser o proprio
   padding (28px) nos dois lados. */
/* "justificar a caixa azul do lado direito deixando a mesma distancia que
   tem do lado esquerdo das palavras": `fit-content` (tentativa anterior) nao
   faz isso — com texto de varias linhas ele devolve a largura inteira
   disponivel, e nada mudou na tela. O que fecha o vao e' limitar a largura
   da caixa, para as linhas chegarem perto da borda direita. */
/* 4a rodada: 470px encurtou demais e jogou "aprende" sozinha para a terceira
   linha. Renato quer o texto em DUAS linhas. A largura volta a acompanhar a
   coluna, e o corpo baixa um ponto para as duas linhas fecharem sem sobra. */
.frase-destaque.caixa-ajustada {
  width: auto; max-width: 100%;
  font-size: 17px;
  padding: 22px 26px;
}

/* "A Jornada em Tres Atos" — mockup tem fundo CLARO (#F0F2F3 medido) e os
   cards D e C brancos com o E escuro no meio; o site tinha secao inteira
   escura com os 3 cards escuros. */
.jornada-atos .card:not(.escuro) { background: var(--branco); }
.letra-selo-escuro { background: var(--ink) !important; color: var(--branco) !important; }
.letra-selo, .letra-selo-escuro {
  font-size: 20px; width: 38px; height: 38px; min-width: 38px;
  border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center;
}

/* "O que muda" — fundo bege (#D3CDC2 medido), foto sem fundo colada a
   esquerda e ao fim da secao, cards brancos a direita. */
.dec-omq { position: relative; overflow: hidden; }
.dec-omq-foto-wrap {
  position: absolute; left: 0; bottom: 0;
  /* 2026-09-03 (2a rodada), medido: a foto ocupava 53% da altura da secao
     e no mockup ocupa 72%. Os +3% anteriores eram imperceptiveis porque o
     problema era a relacao foto/secao, nao o percentual. 456 -> 600px. */
  width: 42.1%; max-width: 600px;
  z-index: 0;
}
.dec-omq-foto { width: 100%; height: auto; display: block; }
.dec-omq .container { position: relative; z-index: 1; }
.dec-omq-conteudo { display: block; }
.dec-omq-conteudo .lista {
  max-width: 620px; margin-left: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.dec-omq-conteudo .card-item {
  background: var(--branco); border-radius: var(--radius); padding: 20px 22px;
}

/* "Um nucleo e quatro modulos bonus" — lista vertical com icone de presente
   a esquerda e foto a DIREITA; o site tinha grade 2x com a foto a esquerda e
   titulos separados por virgula ("Bonus, empreendedor") que nao existem no
   mockup. */
.dec-nucleo-grade {
  display: grid; grid-template-columns: 1.35fr 0.85fr;
  gap: 40px; align-items: start;
}
.dec-nucleo-lista { display: flex; flex-direction: column; gap: 14px; }
.modulo-item {
  background: var(--branco); border-radius: var(--radius);
  padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.modulo-item .corpo { font-size: 14px; margin: 0; }
.modulo-item strong { color: var(--ink); }
.modulo-icone { color: var(--ink); flex: 0 0 22px; margin-top: 2px; }
.modulo-icone svg { width: 22px; height: 22px; display: block; }
.dec-nucleo-foto-wrap { border-radius: var(--radius); overflow: hidden; }
.dec-nucleo-foto { width: 100%; height: auto; display: block; }

/* Botao escuro com icone (aula gratuita / material de apoio) */
.btn-com-icone { display: inline-flex; align-items: center; gap: 10px; }
.btn-com-icone img { height: 18px; width: auto; display: block; }

@media (max-width: 900px) {
  .dec-logica-foto-wrap, .dec-omq-foto-wrap { position: static; width: 100%; height: 300px; }
  .dec-omq-conteudo .lista, .dec-logica .secao-problema-texto { max-width: none; }
  .dec-nucleo-grade { grid-template-columns: 1fr; }
}

/* CTA do DEC: titulo em 2 linhas como no mockup, e o par de CTAs fecha sem
   vao morto no fim da pagina. */
.dec-cta-final .cta-final .h2, .secao.bege.pequena .cta-final .h2 { max-width: 840px; }
.secao.bege.pequena .cta-final { gap: 22px; }
.dec-cta-final { padding-bottom: 72px; }

/* 2026-09-03 — Renato: o icone do "Material de Apoio" nao aparecia sobre o
   navy (o simbolo do arquivo e escuro). Botao invertido: fundo branco,
   texto e icone azuis. */
.btn-branco-azul {
  background: var(--branco);
  color: var(--ink);
  border: 1px solid rgba(12, 25, 40, .12);
}
.btn-branco-azul:hover { background: var(--amarelo); color: var(--ink); }

/* Duas portas — LAD e TAG usavam a mesma regra, mas as fotos tem proporcao
   muito diferente (LAD h/w=0.56, larga e baixa; TAG h/w=1.21, alta). Com a
   mesma largura a do LAD ficava minuscula. Renato: LAD +20%, TAG +5%.
   2026-09-03. */
/* 2026-09-03 (4a rodada): +20% (510 -> 612px) e, por pedido literal de
   Renato, "nao precisa encostar na parte de baixo da secao, apenas na
   lateral" — o ancoramento vertical sai de bottom:0 para o centro da secao.
   A foto nao muda de lado (right:0 mantido), so cresce e centraliza. */
/* +15% pedido literal de Renato (2026-09-03, 2a rodada), "mantendo no
   mesmo lugar": 612 -> 704px. O ancoramento (direita + centro vertical)
   nao muda. */
/* 4a rodada: a foto usada era HORIZONTAL (h/w 0,56) e no mockup ela e
   VERTICAL (h/w 1,48) — nenhum ajuste de largura ia aproximar do protótipo.
   Trocada pelo recorte do mockup; a largura vem medida de la (45,3%). */
/* 2026-09-04: Renato — "a foto duas portas ficou grande, sugiro que deixe na
   mesma proporcao da foto da pagina do TAG na secao duas portas (essas duas
   secoes sao bem parecidas e precisam seguir a mesma logica)". A LARGURA passa
   a ser a mesma do TAG (34,5% / 435px, herdada da base). A ALTURA da secao,
   nao: a foto do LAD e mais vertical (1,483) que a do TAG, entao a 435px ela
   da 645px de altura e estourava 25px numa secao de 620 — o overflow:hidden
   cortaria a foto. A secao acompanha a foto, nunca o contrario (regra 28). */
.duas-portas-lad { min-height: 745px; }

/* ==========================================================================
   ACADEMIA — "alteracao geral em fotos" (Renato, 2026-09-03).
   Duas causas: (a) os arquivos estavam em 700px de largura (o original em
   Fotos Site tem 4269px) e (b) as fotos ficavam contidas em 420px dentro do
   grid, quando o mockup mostra sangria — colada a direita e ao fundo. A de
   "Primeiro Voo" ainda era .jpg opaco, mostrando um retangulo de fundo.
   ========================================================================== */
.academia-sangria { position: relative; overflow: hidden; }
.academia-foto-wrap {
  position: absolute; right: 0; bottom: 0;
  width: 38%; max-width: 500px;
  z-index: 0;
}
.academia-foto { width: 100%; height: auto; display: block; }
.academia-sangria .container { position: relative; z-index: 1; }
.academia-texto { max-width: 620px; }
/* a secao acompanha a foto — nunca o contrario */
.academia-sangria { min-height: 480px; }

/* Ajustes por secao, pedido de Renato 2026-09-03 (4a rodada).
   ------------------------------------------------------------------
   1) "Quanto do que voce aprende": manter colada no fundo e na lateral,
      aumentando 4% "puxando o quadrado superior esquerdo para fora" — com o
      wrapper ancorado em right:0/bottom:0, isso e' so crescer a largura
      (regra 10 da doutrina). 500 -> 520px, com a secao subindo junto para a
      foto nunca encostar no topo. */
/* 2026-09-03 (2a rodada): 520 -> 620px (+19%). O +4% anterior dava 20px e
   Renato leu como "nao foi mexida". Cresce ancorada em right:0/bottom:0 —
   ou seja, puxando o canto superior esquerdo para fora, como ele pediu — e a
   secao sobe junto para a foto nunca encostar no topo. */
/* 2026-09-04, 2a passada: a 48%/690px a foto seguia com 100px de folga no topo
   — eu tinha crescido a SECAO junto, e a proporcao de preenchimento nao mudou.
   O que Renato chama de "pequena" e a altura: no mockup a foto ocupa a secao
   inteira (788 de 788px), no site ocupava 517 de 620. Com o arquivo em 1,2
   (horizontal) a altura so cresce se a largura crescer, e a largura so cresce
   se o texto ceder — por isso o texto desta secao (so um h2 e um paragrafo
   curto) trava em 540px aqui. Resultado: 720px de foto, 600px de altura numa
   secao de 640 — 94% de preenchimento contra os 83% de antes. */
.academia-quanto .academia-foto-wrap { width: 53.3%; max-width: 720px; }
.academia-quanto { min-height: 640px; }
.academia-quanto .academia-texto { max-width: 540px; }

/* 2) "Um unico lugar": "esta colada na barra de navegacao como deve, porem
      esta foto nao encosta na parte de baixo da secao, ela fica no centro da
      pagina colada na barra de navegacao". */
.academia-plataforma .academia-foto-wrap {
  bottom: auto; top: 50%; transform: translateY(-50%);
}

/* 3) Primeiro Voo (teaser): dois pedidos no mesmo lugar. A foto estava
      "mais para a barra de navegacao do que para os textos" — crescendo a
      largura com right:0 ancorado, ela avanca na direcao do texto (500 ->
      560px). E a sombra do arquivo aparecia cortada em cima: nao era a foto,
      era a secao — 560px de largura dao 595px de altura numa secao de 480px,
      e o overflow:hidden comia o topo. A secao passa a 700px, entao a sombra
      inteira cabe. */
/* "a foto esta mais para a barra de navegacao do que para os textos (...)
   entao a foto ficaria maior": 560 -> 660px, crescendo para o lado do texto
   (ancorada a direita). A secao acompanha, para a sombra do arquivo aparecer
   inteira em cima em vez de ser cortada pelo overflow. */
/* 4a rodada: com a sombra removida do arquivo, a silhueta ficou mais vertical
   (h/w passou de 1,06 para 1,45) — a 660px de largura ela dava 959px de altura
   numa secao de 820px e estourava 139px pelo topo. Largura e secao recalculadas
   para a foto caber inteira, com respiro no topo. */
/* 5a rodada: -10% (530 -> 480px, "esta um pouco grande") e a secao acompanha.
   O simbolo das asas volta ATRAS da foto — sem a sombra, que foi removida do
   arquivo. Mesma camada usada no Primeiro Voo: fundo -> simbolo -> foto. */
/* 2026-09-04: Renato — "nesta secao a foto junto com a logo precisa estar
   centralizada entre a barra de navegacao lateral e as caixas de texto; a foto
   esta mais para a direita". O vao a direita do texto mede 50vw (container de
   1240px, texto travado em 620px), entao o deslocamento e (50vw - 480px)/2.
   Escrito em calc com 100vw — regra 30, valor fixo em px acerta uma largura so. */
.academia-primeiro-voo .academia-foto-wrap {
  width: 33.7%; max-width: 480px;
  transform: translateX(min(0px, calc(240px - 25vw)));
}
.academia-primeiro-voo { min-height: 840px; }
.academia-primeiro-voo .academia-foto-wrap::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 128%; aspect-ratio: 1 / 1;
  background: url('../img/logo-asas.png') center/contain no-repeat;
  opacity: .30;
  z-index: 0;
  pointer-events: none;
}
.academia-primeiro-voo .academia-foto { position: relative; z-index: 1; }

/* Certificado — voltou a ser secao propria de fundo bege (era uma linha solta
   dentro de "A plataforma"). Texto identico ao que ja existia. */
/* 2026-09-04: Renato — "no original eles ficam no lado direito a frente do
   texto". Titulo a esquerda, selo a direita, na mesma linha. */
.academia-certificado-secao .container {
  display: flex; flex-direction: row; gap: 32px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.academia-certificado-secao .hero-tag { flex: 0 0 auto; }
.academia-certificado-secao .h2 { max-width: 880px; }

/* Primeiro Voo (teaser) — os tres textos voltam para caixas bege de canto
   arredondado, com o texto em azul institucional. */
.acad-caixa {
  background: var(--bege);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--font-corpo);
  font-size: 15px;
  line-height: 1.65;
}
.acad-subtitulo { font-size: 20px; line-height: 1.4; }
.hero-tag-duas-linhas { line-height: 1.5; }
/* selo de certificado ao lado do botao, nao embaixo */
.acad-linha-acao { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Precos — cada curso vira um cartao clicavel: no hover ele assume o amarelo
   da casa e o texto inverte para azul (padrao de botao do site). */
.card-curso { display: flex; flex-direction: column; gap: 8px; transition: background .18s ease, transform .18s ease; }
.card-curso .card-curso-cta {
  margin-top: 6px;
  font-family: var(--font-titulo);
  font-size: 13px; font-weight: 700;
  letter-spacing: .4px;
  color: var(--amarelo);
}
.card-curso:hover { background: var(--amarelo); transform: translateY(-2px); }
.card-curso:hover .h3,
.card-curso:hover .corpo,
.card-curso:hover p,
.card-curso:hover span { color: var(--ink) !important; }
.card-curso.card-completo:hover { background: var(--amarelo); }

/* Oferta do ensino medio: fundo amarelo (o "bege" da casa), e entao tudo o
   que fica sobre bege segue a regra do site — letra azul e botao azul. */
.card-oferta-estudante {
  background: var(--amarelo);
  color: var(--ink);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.card-oferta-estudante .h3,
.card-oferta-estudante .corpo { color: var(--ink); }
.card-oferta-estudante .oferta-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink);
}
.card-oferta-estudante .oferta-de { font-size: 14px; text-decoration: line-through; color: var(--ink); opacity: .62; }
.card-oferta-estudante .oferta-por {
  font-family: var(--font-titulo); font-size: 26px; font-weight: 800; color: var(--ink);
}
.card-oferta-estudante .oferta-por span { font-size: 14px; font-weight: 400; color: var(--ink); }

/* Hero da Academia, 2026-09-03 (pedido de Renato): "a foto, a proporcao e o
   local que ela fica na pagina academia e identica ao carrossel da academia".
   Entao o hero deixa de ter tratamento proprio e passa a ser exatamente a
   construcao do carrossel: mesma foto (carrossel-academia-v4.jpg), mesma
   classe .foto-contida.reduz-40, mesma largura (46%) e SEM o overlay duotone
   — era ele o "filtro azul" que ele apontou (o carrossel ja tinha o ::after
   desligado por .aba-painel; aqui isso vem de .sem-filtro no HTML). */
/* Hero da Academia. Duas tentativas anteriores falharam pela mesma razao:
   reaproveitar as classes do carrossel (.foto-contida.reduz-40) traz junto
   `max-width:96%`, `max-height:96%` e `padding-right`, que no contexto do
   hero viram FOLGA — medido: 102px da borda direita e 96px do fundo, que e'
   exatamente o "nao esta encostando no fundo da secao e nao esta colada na
   barra de navegacao". Como aquelas regras tem 4 classes de especificidade,
   sobrescrever com 3 nao adiantava (o CSS anterior nem chegava a valer).
   Solucao: o hero deixa de usar as classes do carrossel e ganha regra
   propria — foto na altura inteira do hero, ancorada no canto inferior
   direito, `contain` para nao cortar nada. */
.hero-foto-wrap.academia-hero {
  width: 46%;
  padding: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  overflow: visible;
  border-radius: 0;
}
.hero-foto-wrap.academia-hero .foto-principal {
  width: auto; max-width: 96%;
  height: 100%; max-height: 96%;
  object-fit: contain; object-position: right bottom;
  position: static;
}

/* ==========================================================================
   PRIMEIRO VOO — reconstruido contra o mockup matriz 2026-09-03.
   Era hero azul + 4 secoes claras empilhadas; o mockup e UMA secao azul,
   com subtitulos brancos e caixas bege, e a foto dos estudantes a direita.
   ========================================================================== */
.pv-regulamento { position: relative; overflow: hidden; padding: 72px 0 64px; }
.pv-grade {
  display: grid; grid-template-columns: 1fr 0.46fr;
  gap: 40px; align-items: stretch;
}
.pv-texto { display: flex; flex-direction: column; gap: 0; max-width: 820px; }
.pv-programa {
  font-family: var(--font-titulo); font-size: 30px; font-weight: 700;
  color: rgba(255,255,255,.55); line-height: 1.2;
}
.pv-titulo {
  font-family: var(--font-titulo); font-size: 38px; font-weight: 800;
  color: var(--branco); line-height: 1.15; margin: 4px 0 0;
}
.pv-barra { display: block; width: 118px; height: 3px; background: var(--teal-claro); margin: 16px 0 26px; }
.pv-intro {
  font-size: 20px; line-height: 1.5; color: var(--branco);
  max-width: 620px; margin: 0 0 30px;
}
.pv-sub {
  font-family: var(--font-titulo); font-size: 20px; font-weight: 700;
  color: var(--branco); margin: 0 0 12px;
}
.pv-caixa {
  background: var(--apostila);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 0 0 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.pv-forte { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.55; margin: 0; }
.pv-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.pv-passos li { color: var(--ink); font-size: 16px; line-height: 1.55; }
.pv-passos strong { font-weight: 700; }
.pv-email { color: var(--ink); font-weight: 700; text-decoration: underline; }
/* 2026-09-03, Renato: "a foto esta muito proxima as caixas de texto, precisa
   estar mais centralizada no espaco entre os textos e a barra de navegacao
   lateral" — o wrapper estava em flex-end (colado na direita). E "a foto
   perdeu a logo que fica atras da foto e a sombra": as duas voltam por CSS,
   sem tocar no arquivo da foto (ele ja aprovou a qualidade dela). */
.pv-foto-wrap {
  position: relative; align-self: stretch;
  display: flex; align-items: flex-end; justify-content: center;
  /* 4a rodada: um deslocamento fixo em px so acerta o centro numa largura de
     tela. Em 1440 ficava equilibrado (78/79), mas em 1366 virava 40/87 e a
     foto colava no texto de novo.
     O vao da esquerda e o gap do grid (40px); o da direita e a margem do
     container mais o padding ((100vw - 1240)/2 + 24). O centro entre os dois
     e a metade da diferenca — que depende da largura da tela:
       deslocamento = (100vw - 1240px)/4 - 8px
     Conferido: em 1425 devolve 38px, exatamente o valor que a medicao dava
     como centro nessa largura. */
  transform: translateX(max(0px, calc((100vw - 1240px) / 4 - 8px)));
}
.pv-foto-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92%; aspect-ratio: 1 / 1;
  background: url('../img/logo-asas.png') center/contain no-repeat;
  /* Ordem de camadas definida por Renato (2026-09-03):
     fundo azul -> textura -> LOGO -> foto.
     Em .16 a logo lia como se estivesse por baixo da textura; em .30 ela fica
     claramente acima dela, e ainda atras da foto (z-index 0 contra 1). */
  opacity: .30;
  z-index: 0;
  pointer-events: none;
}
.pv-foto {
  width: auto; max-width: 100%;
  height: 100%; max-height: 100%;
  object-fit: contain; object-position: center bottom;
  display: block;
  position: relative; z-index: 1;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.5));
}
.pv-selo {
  position: absolute; right: 40px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,.75); z-index: 2;
}
.pv-selo img { width: 22px; height: 22px; opacity: .75; }

@media (max-width: 900px) {
  .academia-foto-wrap { position: static; width: 100%; max-width: none; margin-top: 24px; }
  .academia-texto { max-width: none; }
  .pv-grade { grid-template-columns: 1fr; }
  .pv-selo { position: static; display: flex; margin: 24px auto 32px; justify-content: center; }
}

/* Contato — Renato 2026-09-03: a foto do hero precisa encostar na barra de
   navegacao lateral. O .hero-selo-wrap vive dentro do .container (1240px),
   entao parava na borda do container, nao na do viewport. Margem negativa
   igual a folga lateral real leva a caixa ate a borda, sem reestruturar o
   hero (que ja esta aprovado no resto). :has() evita mexer no HTML. */
.hero:has(img[src*="contato-marca"]) .hero-selo-wrap {
  margin-right: calc(-1 * max(24px, (100vw - 1240px) / 2));
  border-radius: var(--radius) 0 0 var(--radius);
}


/* ==========================================================================
   SOBRE NOS — rodada de 2026-09-03 (apontamentos de Renato).
   ========================================================================== */
/* Logo do hero: 3% maior "mantendo no mesmo lugar" (escala pelo centro, nao
   por um canto), e a sombra que ela tinha e perdeu no caminho. */
.hero-selo-wrap.selo-maior-3 img { transform: scale(1.03); transform-origin: center; }
.hero-selo-wrap.selo-com-sombra img { filter: drop-shadow(0 18px 34px rgba(0,0,0,.45)); }
/* .hero-selo-wrap tinha overflow:hidden — a sombra do drop-shadow era cortada
   na propria caixa antes de chegar a tela. */
.hero-selo-wrap.selo-com-sombra { overflow: visible; }
/* "a caixa desta secao esta com um espaco vazio embaixo, pode diminuir pouca
   coisa (sem encostar na logo)": 96px -> 64px de padding inferior. */
.hero.hero-sobre { padding-bottom: 64px; }

/* Aspas da citacao: azul claro e maiores, para dar o contraste que Renato
   descreveu ("sao maiores de proposito para ganhar destaque"). Mesmo
   tratamento da .frase-aspas usada nas paginas de metodo. */
.citacao blockquote .citacao-aspas {
  color: var(--teal-claro);
  font-size: 1.45em;
  font-weight: 800;
  line-height: 0;
  vertical-align: -8px;
}

/* "Quem somos": titulo a esquerda, caixa azul com todo o texto a direita. */
.quem-somos-grade {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.quem-somos-titulo { display: flex; flex-direction: column; gap: 14px; }

/* Caixa azul de texto — o padrao que Renato descreveu nas duas secoes:
   fundo azul institucional, texto branco, trechos em negrito. */
.caixa-azul-texto {
  background: var(--ink);
  color: var(--branco);
  border-radius: var(--radius);
  padding: 32px 34px;
  display: flex; flex-direction: column; gap: 16px;
}
.caixa-azul-texto .corpo { color: var(--txt-claro); }
.caixa-azul-texto strong { color: var(--branco); font-weight: 700; }
.caixa-azul-direita { max-width: 760px; margin-left: auto; }
.assinatura-caixa {
  font-family: var(--font-titulo); font-size: 15px; font-weight: 700;
  color: var(--teal-claro);
}

/* "Como chegamos ate aqui": a linha de numeros vira bloco estreito,
   justificado e em negrito (quebra em 4 linhas, como no original). */
/* seccao "Como chegamos ate aqui" — gancho de pagina, fundo bege + textura
   vem de .secao.bege; o texto vive na caixa azul a direita. */
.como-chegamos .secao-cabecalho { max-width: 900px; }
/* "o texto mais de 15 anos esta separado demais e esta cinza ao inves de
   azul": o `text-align:justify` numa coluna de 300px esticava os espacos
   entre as palavras (era o "separado demais"), e a cor vinha de --txt-sec,
   que era cinza. Sem justify, em azul da marca, e ainda em 4 linhas. */
.chegamos-linha-fina {
  max-width: 320px;
  font-weight: 700;
  color: var(--ink);
}

/* "o mapa esta em cima da caixa azul ao inves de estar do lado": a secao
   empilhava mapa e caixa. Agora sao duas colunas — mapa a esquerda, caixa
   azul a direita — com o cabecalho ocupando a linha inteira acima. */
.como-chegamos-grade {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
}
.como-chegamos-grade .caixa-azul-direita { max-width: none; margin-left: 0; }
.como-chegamos-mapa { width: 100%; max-width: 460px; height: auto; margin: 0; }

@media (max-width: 900px) {
  .como-chegamos-grade { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 900px) {
  .quem-somos-grade { grid-template-columns: 1fr; gap: 24px; }
  .caixa-azul-direita { max-width: none; }
  .chegamos-linha-fina { max-width: none; }
}


/* ==========================================================================
   CONTATO — 2026-09-03. Renato: "a logo de contato nao esta colada na barra
   de navegacao lateral e perdeu a sombra. Precisa ficar maior tambem.
   Eu aumentaria em 5%".
   Dentro do .container.grade a logo parava na regua de 1240px; para encostar
   na borda REAL da tela ela sai do grid (mesma tecnica ja usada no hero da
   Consultoria). Escala: 1.02 -> 1.071 (+5%), ancorada a direita para crescer
   sem descolar da borda.
   ========================================================================== */
.hero-selo-sangria {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42%;
  display: flex; align-items: center; justify-content: flex-end;
  overflow: visible;
  z-index: 1;
}
.hero-selo-sangria img {
  width: 100%; height: 420px;
  object-fit: contain; object-position: right center;
  transform: scale(1.071);
  transform-origin: right center;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
}
@media (max-width: 900px) {
  .hero-selo-sangria { position: static; width: 100%; }
  .hero-selo-sangria img { height: 260px; transform: none; }
}


/* Consultoria, "O que muda": Renato pediu a logo mais transparente que o
   padrao, mas .20 sumiu contra a textura. .32 mantem o simbolo em cima da
   textura (diretriz antiga: foto/simbolo sempre ACIMA da textura) e ainda
   assim mais leve que o .45 das outras paginas. */
.secao-marca-dagua.marca-suave .marca-dagua { opacity: .32; }


/* "A seçao Um unico lugar esta junta com a seçao Cada curso concluido,
   precisa estar separado": as duas eram bege e ficavam coladas, lendo como
   um bloco unico. A do certificado passa a ter fundo claro proprio e um
   filete de separacao. */
.academia-certificado-secao {
  background-color: var(--paper);
  background-image: none;
  border-top: 1px solid var(--borda-clara);
}


/* ==========================================================================
   Rodada 3 (2026-09-03) — corrigindo o efeito colateral da unificacao de
   --ink / --ink-fundo, e afinando contra os mockups.
   ========================================================================== */

/* Cartoes escuros: com --ink e --ink-fundo agora iguais, um `.card.escuro`
   dentro de uma secao escura ficava invisivel. Ganha um tom proprio, um pouco
   acima do fundo, mais borda sutil — assim continua legivel em qualquer
   secao, clara ou escura. */
.card.escuro { background: #0A2C44; border: 1px solid rgba(255,255,255,.07); }

/* Precos: medido no mockup da Academia, a secao e CLARA (paper com textura) e
   os cartoes e que sao escuros — o site tinha o inverso. */
.secao-precos .card.escuro { background: var(--ink); border: none; }
/* Hover dos cartoes de preco. Historico do bug: a cor do TEXTO mudava para
   escuro mas o FUNDO continuava escuro, e o cartao inteiro sumia (Renato:
   "o texto some porque fica da mesma cor do fundo do quadrado").
   Causa: `.secao-precos .card.escuro` (3 classes) vencia `.card-curso:hover`
   (1 classe + pseudo), entao o FUNDO nunca virava amarelo — mas a regra de
   texto do hover valia e pintava tudo de --ink. Texto escuro sobre fundo
   escuro = cartao invisivel.
   Fix: o hover passa a ter peso maior que a regra da secao. O !important nos
   dois lados (fundo e texto) mantem o par sempre sincronizado — eles tem de
   mudar juntos ou nao mudar.
   Verificado com o cartao em :hover: fundo #BEB27A, contraste 8,22 em todos
   os textos. (Nota para quem for medir isto de novo: com `transition` ativa,
   getComputedStyle em navegador headless devolve o valor INICIAL para sempre,
   porque a transicao nao avanca sem pintura de frames — medir com
   `transition: none` para ver o estado final real.) */
.secao-precos .card.card-curso:hover { background: var(--amarelo) !important; }
.secao-precos .card.card-curso:hover .h3,
.secao-precos .card.card-curso:hover .corpo,
.secao-precos .card.card-curso:hover p,
.secao-precos .card.card-curso:hover span { color: var(--ink) !important; }
.secao-precos .card-curso-cta { color: var(--amarelo); }
/* 2026-09-04: o cartao "Os tres cursos" tem fundo teal (nao o azul escuro dos
   outros tres), e o amarelo da casa sobre teal dava contraste 1,96 — o
   "Adquirir metodo" que Renato pediu ficava ilegivel justamente ali. */
.secao-precos .card-completo .card-curso-cta { color: var(--branco); }

/* Primeiro Voo (teaser da Academia) — medido no mockup:
   - "Programa Primeiro Voo" e a linha MENOR, acima; o titulo grande e a frase
   - filete curto abaixo do titulo
   - as caixas bege tem uma barra dourada na borda esquerda
   - o botao e branco com texto azul */
.pv-programa-linha {
  font-family: var(--font-titulo);
  font-size: 26px; font-weight: 700;
  color: rgba(255,255,255,.62);
  line-height: 1.2;
}
.pv-filete { display: block; width: 108px; height: 3px; background: var(--branco); margin: 6px 0 10px; }
.acad-caixa { border-left: 4px solid var(--amarelo); }
/* 2026-09-04: Renato — "o botao na secao ensino medio precisa ser o azul
   claro". Era branco por override desta secao; volta ao .btn-primario padrao. */