/* ===========================================================
   Instituto A Priori — v2 GLASS · camada sobreposta
   -----------------------------------------------------------
   Carregada DEPOIS de style.css e escopada em `body.v2`.
   Só a Home tem a classe: as outras 8 páginas continuam v1.
   Reversão = remover o <link> e a classe `v2` do <body>.

   Decisões travadas por Renato, 2026-09-04:
   1. Base CLARA. Vidro concentrado em seção escura e sobre foto.
   2. Peso de título 350.
   3. Disciplina de acento: teal = clicável · amarelo = destaque
      de título. Todo o resto vai para ink / txt-claro.
   4. Home primeiro.
   5. Identidade existente preservada — sem foto nova, sem texto novo.

   Doutrina aplicada: regras 45 a 49 (logica-de-design.md).
   =========================================================== */

.v2 {
  /* --- vidro (regra 46: só existe sobre foto, textura, grade ou halo) --- */
  --v2-vidro:        rgba(200, 210, 222, .07);
  --v2-vidro-forte:  rgba(200, 210, 222, .10);
  --v2-borda:        rgba(200, 210, 222, .16);
  --v2-brilho:       rgba(255, 255, 255, .14);
  --v2-blur:         20px;

  /* altura do palco do carrossel — as setas se centram nela, nao no
     bloco inteiro (que inclui a fileira de pontos) */
  /* 2026-09-08 (2a rodada). Renato: "voce aumentou a secao e o texto ficou do
     mesmo tamanho e a foto tambem". Estava certo: 820px de cartao com a foto
     ocupando 46% da altura. A altura agora sai da PROPORCAO da foto, nao da
     tela: em 520px as tres preenchem 86%, 89% e 100% do painel. */
  --v2-palco-h:      clamp(460px, 58vh, 520px);

  /* --- camada ambiente: grade de planta baixa + halo (regra 48) --- */
  --v2-grade:        rgba(200, 210, 222, .055);
  --v2-grade-passo:  80px;
  --v2-halo:         rgba(70, 132, 151, .20);

  /* --- halo externo: substitui box-shadow convencional (regra 45.1) --- */
  --v2-halo-externo: 0 28px 56px rgba(0, 12, 22, .34);

  /* --- família de raios (o v1 tinha um valor só para tudo) --- */
  --r-btn:     999px;
  --r-badge:   8px;
  --r-card:    16px;
  --r-card-lg: 28px;
  /* --radius (15px) segue intocado: é o raio de FOTO, travado na Fase 6 */

  /* INATIVA desde 2026-09-08: a segunda voz mono foi revertida a pedido de
     Renato e a familia deixou de ser carregada no <head>. */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===========================================================
   BLOCO A — TIPOGRAFIA
   O título deixa de gritar (800) e passa a sustentar (350).
   Peso leve exige tracking negativo: os dois andam juntos.
   =========================================================== */

/* 48px/350 com line-height 1.10 deixava o hero 13px mais alto que o v1.
   Como a .hero-foto-wrap e' absolute (top:0/bottom:0) contra o .hero, hero
   mais alto = caixa mais alta = MAIS corte na foto da Consultoria do
   carrossel, que usa `cover` desde o v1 (16,1% -> 17,7% medidos em 1440px).
   line-height 1.05 devolve o bloco do titulo a' altura exata do v1 (202px, 4
   linhas), entao a geometria da foto fica identica a' aprovada na Fase 6.
   1.05 tambem esta' dentro da faixa das referencias (Apple 1.07, Seed 1.10,
   Oryzo 0.90) — nao e' concessao, e' o valor certo. */
/* 2026-09-08 — Renato: "preciso que as fontes fiquem identicas ao modelo
   aprovado, incluindo as fontes do carrossel".
   O BLOCO A da v2 (titulo leve + tracking negativo, da intersecao das 4 style
   references) foi REVERTIDO POR INTEIRO. Os titulos voltam a herdar o v1
   travado na Fase 6: Manrope 800, .h1 44px/1.15, .h2 34px/1.25, .h3 19px/1.35,
   letter-spacing normal. Nada de tipografia e' redefinido aqui — a camada v2
   passa a ser SO superficie (vidro, raio, fundo, carrossel).
   Registrado como regra 65 em logica-de-design.md. */

/* --- segunda voz tipográfica: mono trackada (regra 45.6) ---
   Aplicada só a rótulo, marcador e cabeçalho de coluna. NÃO cria
   nenhum texto novo — apenas muda a forma do texto que já existe. */
/* 2026-09-08: eyebrow revertido ao v1 (Inter 600, 12px, ls 1.7px, teal).
   A mono em --ink era a origem do "as fontes ficaram pretas": #001B2E sobre
   bege/branco le como preto. */

/* linha lateral esmaecida do AuthKit, adaptada ao nosso eyebrow alinhado
   à esquerda. currentColor: serve claro e escuro sem regra duplicada. */
.v2 .secao-cabecalho .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.v2 .secao-cabecalho .eyebrow::after {
  content: '';
  height: 1px;
  width: 96px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: .45;
}

/* 2026-09-08: marcador de etapa (Manrope 800/22px teal), cabecalho de coluna
   do rodape (Manrope 700/15px) e a barra sob o titulo de secao (teal) voltam
   ao v1. A barra nao e' fonte, mas mudou junto com o eyebrow na mesma decisao
   ("teal so em clicavel") — revertida junto para o conjunto ficar coerente. */
.v2 .secao-cabecalho.com-barra.claro-barra::after { background: var(--txt-claro); }

/* ===========================================================
   BLOCO B — GEOMETRIA
   Pílula nos elementos interativos; família de raios no resto.
   Foto continua em 15px (valor travado na Fase 6).
   =========================================================== */

.v2 .btn {
  border-radius: var(--r-btn);   /* pilula: geometria, nao tipografia */
}
.v2 .card     { border-radius: var(--r-card); }
.v2 .dropdown { border-radius: 14px; }

/* respiro entre seções: 88px estava no piso da faixa das referências.
   O .hero NÃO é tocado — a foto de sangria é absolute contra ele
   (top:0/bottom:0) e mexer no padding remede as fotos já aprovadas. */
.v2 .secao         { padding: 104px 0; }
.v2 .secao.pequena { padding: 72px 0; }

/* ===========================================================
   BLOCO C — SISTEMA DE VIDRO
   Regra 46: vidro precisa de algo atrás para embaçar. Por isso a
   camada ambiente (grade + halo) vem ANTES do primeiro cartão.
   Aplicada como background-image do próprio elemento — não como
   pseudo-elemento — para não criar contexto de empilhamento nem
   containing-block novo (o bug de sangria de 2026-09-03).
   =========================================================== */

/* --- hero: fundo autoral de Renato (Canva, 2026-09-08) ---
   `Fundo Carrossel TEC..png`, 4269x2219 -> fundo-hero-tec.jpg 1920x998, 67 KB.
   Medido antes de aplicar: padrao de circuito a' esquerda, brilho radial com
   pico a ~75% da largura / ~37% da altura, amplitude de luz 80,4.
   Substitui a grade+halo que eu tinha improvisado em CSS — mesma funcao,
   mas autoral.
   ATENCAO ao `url()`: e' relativo A ESTA FOLHA (assets/css/), nao ao HTML.
   Escrever 'assets/img/...' aqui resolveria para assets/css/assets/img/ — o
   bug que deixou as 3 texturas do site sem carregar (2026-09-03). */
.v2 .hero {
  background-color: var(--ink);
  /* o degrade de baixo costura a emenda com a secao azul seguinte: as bordas
     do arquivo NAO casam com #001B2E (a direita esta a 97 de distancia), e
     sem isso a transicao vira bloco duro (regra 4 da skill) */
  background-image:
    linear-gradient(to bottom, rgba(0,27,46,0) 62%, rgba(0,27,46,.72) 88%, var(--ink) 100%),
    /* TESTE 2026-09-08, pedido de Renato: trocar o Fundo Carrossel TEC pelo
       `Fundo Hero 2`. Medido antes de aplicar — proporcao 1,9238 nos DOIS
       arquivos (4269x2219) e mesma faixa de luz (L 21 a 112): troca drop-in,
       nenhuma linha de enquadramento tocada, NADA do carrossel alterado
       (fronteira que ele declarou no pedido).
       Trocada SO esta ocorrencia, a do hero da Home — o hero da Consultoria
       tem regra propria mais abaixo e segue no TEC, porque o pedido nomeou "o
       hero dos carrosseis".
       Reverter = voltar para `fundo-hero-tec.jpg` nesta linha. */
    url('../img/fundo-hero-2.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;

  /* `overflow: hidden` (herdado do v1) ESCONDE mas continua sendo caixa de
     rolagem: ao focar a seta do carrossel, o navegador rolou o hero em
     325px para "revelar" o botao e desalinhou a secao inteira — medido em
     2026-09-08. `overflow: clip` recorta sem criar caixa rolavel, entao o
     foco nao tem para onde rolar. O `hidden` fica antes, como fallback. */
  overflow: hidden;
  overflow: clip;
}

/* --- camada ambiente: seções escuras ---
   `.secao.ink` (Home, "Nossa metodologia") e `.secao.ink-fundo` (Consultoria,
   citação) sao a MESMA cor no style.css travado (#001B2E, linhas 230-231):
   duas classes, um fundo so. Aplicar a camada ambiente as duas nao e
   generalizar um pedido de uma pagina (regra 22) — e cobrir a mesma
   superficie com o mesmo tratamento. Verificado: a Home nao usa `ink-fundo`
   em nenhuma secao, entao nada aprovado muda. */
.v2 .secao.ink,
.v2 .secao.ink-fundo {
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 24%, var(--v2-halo) 0%, transparent 66%),
    linear-gradient(to right,  var(--v2-grade) 1px, transparent 1px),
    linear-gradient(to bottom, var(--v2-grade) 1px, transparent 1px);
  background-size: 100% 100%, var(--v2-grade-passo) var(--v2-grade-passo), var(--v2-grade-passo) var(--v2-grade-passo);
  background-repeat: no-repeat, repeat, repeat;
  background-position: center center, center top, center top;
}

/* --- cabeçalho fixo em vidro: sobrepõe conteúdo rolando, o uso
       canônico do backdrop-filter --- */
.v2 .site-header {
  background: rgba(0, 27, 46, .72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--v2-borda);
}

/* --- dropdown: sombra dura substituída por hairline + halo --- */
.v2 .dropdown {
  background: rgba(0, 27, 46, .82);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
}

/* ===========================================================
   CARROSSEL DE PALCO CENTRAL — hero da Home
   -----------------------------------------------------------
   Pedido de Renato, 2026-09-08: "o formato do carrossel não me
   agrada. Depender de botões não deixa nenhum pouco estético."
   Referência: uxwest.com/.../carousel-2.gif — cartão ativo ao
   centro, vizinhos escalados e esmaecidos sangrando pelas bordas,
   setas sobrepostas nas laterais, pontos embaixo.

   As abas de texto do v1 saíram por completo (markup e CSS).
   =========================================================== */

.v2 .v2-carrossel { position: relative; outline: none; }
.v2 .v2-carrossel:focus-visible { outline: 2px solid var(--teal-claro); outline-offset: 10px; border-radius: var(--r-card-lg); }

/* 2026-09-08, pedido de Renato: "o tamanho do carrossel ficou pequeno... ele
   precisa preencher todo o espaço encostando em cima e embaixo da seção.
   Sobrando somente nas laterais para manter o contraste."
   O hero perde o padding vertical (era 88/96 no v1) e o palco passa a ocupar
   a tela inteira abaixo do cabeçalho. Sobra só a folga lateral, que é o que
   deixa os vizinhos espiarem e sustenta a leitura de cartão. */
/* 2026-09-08 (Consultoria): ESCOPADO. Escrito como `.v2 .hero` global, este
   `padding:0` derrubou o hero da Consultoria de 672px para 488px e encolheu a
   foto travada de 631x640 para 449,6x456 — 28,7% menor. Era um pedido de UMA
   pagina virando regra do site (regra 22), e a segunda pagina a receber a
   camada foi a primeira a pagar. `:has()` limita ao hero que de fato tem
   carrossel; a Home nao muda um pixel, e todo hero de pagina interna volta ao
   padding 88/96 travado na Fase 6. */
.v2 .hero:has(.v2-carrossel) { padding: 0; }

.v2 .v2-palco {
  position: relative;
  height: var(--v2-palco-h);
  touch-action: pan-y;          /* deixa a rolagem vertical passar; horizontal é do carrossel */
}

/* Cada cartão é absoluto e centrado no palco. O deslocamento dos vizinhos
   é feito por transform — seguro aqui, porque a foto agora vive DENTRO do
   cartão e não é mais `absolute` contra o `.hero` (o containing-block que
   quebrava a sangria em 2026-09-03 deixou de existir neste hero). */
.v2 .v2-slide {
  position: absolute;
  top: 0;
  left: 50%;
  /* 1100 (era 1000) e coluna da foto MAIOR que a do texto (1.06 contra 1):
     as duas mudancas juntas sao o que faz a foto encher o painel. */
  width: min(1100px, 100%);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  overflow: hidden;
  border-radius: var(--r-card-lg);
  background: var(--v2-vidro);
  -webkit-backdrop-filter: blur(var(--v2-blur)) saturate(130%);
          backdrop-filter: blur(var(--v2-blur)) saturate(130%);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
  transform: translateX(-50%);
  transition: transform .52s cubic-bezier(.22, .61, .36, 1),
              opacity   .52s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}

.v2 .v2-slide.esta-ativo  { transform: translateX(-50%) scale(1);   opacity: 1;   z-index: 3; }
.v2 .v2-slide.esta-antes  { transform: translateX(-112%) scale(.86); opacity: .32; z-index: 2; cursor: pointer; }
.v2 .v2-slide.esta-depois { transform: translateX(12%)   scale(.86); opacity: .32; z-index: 2; cursor: pointer; }
.v2 .v2-slide.esta-fora   { transform: translateX(-50%)  scale(.72); opacity: 0;   z-index: 1; pointer-events: none; }

/* Desfoque leve nos vizinhos — o tratamento clássico de coverflow.
   Sem ele, o que espia nas bordas são FRAGMENTOS DE TEXTO cortados
   ("...ca", "n Certificado"), que leem como ruído. Com ele, o vizinho
   vira superfície: sinaliza que há mais conteúdo sem competir com o
   cartão ativo. Na referência os vizinhos também são superfícies
   limpas, sem texto legível. */
.v2 .v2-slide.esta-antes,
.v2 .v2-slide.esta-depois { filter: blur(2.5px); }
.v2 .v2-slide.esta-antes:hover,
.v2 .v2-slide.esta-depois:hover { opacity: .5; filter: blur(1.5px); }
.v2 .v2-slide { transition: transform .52s cubic-bezier(.22,.61,.36,1),
                            opacity   .52s cubic-bezier(.22,.61,.36,1),
                            filter    .52s cubic-bezier(.22,.61,.36,1); }

.v2 .v2-slide-texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 44px;
  min-width: 0;
}
/* o corpo tambem cresce junto — o erro da rodada anterior foi crescer a caixa
   e deixar TODO o conteudo no tamanho antigo */
.v2 .v2-slide-texto .corpo { font-size: 16px; }   /* 16px = v1 travado */
/* 38px (não os 48px do .h1 base): dentro do cartão a coluna de texto tem
   ~520px, e 48px empurrava o título para 5-6 linhas e estourava a altura
   fixa que os três cartões precisam compartilhar. */
/* 2026-09-08, 2a rodada — Renato: "as estruturas das linhas de texto dos
   carrosseis estao diferentes dos exemplos".
   Medido nos 3 mockups (4269px de largura, escala 1100/4269 = 0,2577):
   a linha mais longa, "ou cada decisao ainda passa", ocupa 47,1% da largura
   do cartao = 518px. A coluna de texto tinha 446px uteis — por isso o titulo
   quebrava em 4 linhas em vez de 3, e nenhum <br> resolveria sozinho.
   Duas medidas, as duas tiradas do mockup:
   - padding direito de 44px -> 20px (o esquerdo, 44px, JA e' o do mockup:
     170/4269 = 3,98% = 43,8px). Util passa a 470px.
   - titulo em 33px: a linha mais longa mede 458px em Manrope 800 (folga 12px).
     O mockup usa ~36,4px, que exigiria 500px — so alargando a coluna, o que
     encolheria a foto da Consultoria em 6,4%. A foto esta' aprovada: fica.
   Peso (800), familia e cor seguem do v1 travado. */
.v2 .v2-slide .h1 { font-size: 33px; max-width: none; }
.v2 .v2-slide-texto { padding: 40px 20px 40px 44px; }

/* quebras de linha copiadas do mockup: so no desktop, onde a coluna tem
   largura para elas. Em <=768px o texto reflui sozinho. */
.v2 br.qm { display: inline; }

/* "DEC, LAD e TAG," aparece em branco forte no mockup do slide Metodologia,
   contra o cinza claro do resto do paragrafo */
.v2 .v2-slide-texto .corpo strong { color: var(--branco); font-weight: 600; }

/* 2026-09-08, pedido de Renato: "onde ficam as fotos, o fundo está totalmente
   escuro... preciso que o novo fundo também seja usado ali, como no print".
   O painel deixa de ser #001B2E chapado e passa a usar o mesmo Fundo TEC.
   Isso só é possível porque as 3 fotos foram RECORTADAS (webp com alfa):
   enquanto tinham o fundo pintado, qualquer coisa atrás delas era coberta.
   `cover` aqui é seguro — o que pode ser cortado é TEXTURA, nunca assunto.
   Posição em 72% traz o brilho do arquivo para trás do personagem, que é de
   onde vem a sensação de profundidade. */
/* Sem fundo proprio: o painel fica TRANSPARENTE e quem aparece atras da foto
   e' o fundo do hero, atraves do vidro do proprio cartao. Foi a correcao da
   1a tentativa, que dava um fundo TEC so nesta metade — como os dois lados
   mostravam recortes DIFERENTES do mesmo arquivo, nascia uma emenda vertical
   no meio do cartao. Assim o fundo e' um so, continuo de ponta a ponta, e o
   brilho passa a ficar atras do personagem: e' de onde vem o efeito 3D. */
.v2 .v2-slide-foto {
  position: relative;
  background: transparent;
  overflow: hidden;
}
.v2 .v2-slide-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* --- setas: sobrepostas nas laterais, como na referência --- */
.v2 .v2-seta {
  position: absolute;
  top: calc(var(--v2-palco-h) / 2);
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--v2-vidro-forte);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho);
  transition: background-color .2s ease;
}
/* 2026-09-08 — Renato: "as setas estao coladas no carrossel... deixaria as
   setas mais proximas as barras laterais da secao. Assim fica mais limpo."
   Medido em 1440px: a seta terminava em 162px e o cartao comecava em 162px —
   folga ZERO dos dois lados.
   Alvo: borda externa do container (a regua de 1240px do site), com 16px de
   respiro. O `max()` e' o piso de seguranca: em tela media o cartao cresce ate
   ocupar a faixa toda, e o primeiro termo (24px da borda da viewport) impede
   que a seta saia da tela ou invada o cartao. Em <=768px o media query manda. */
.v2 .v2-seta-ant  { left:  max(calc(50% - 50vw + 24px), calc(50% - var(--container) / 2 - 68px)); }
.v2 .v2-seta-prox { right: max(calc(50% - 50vw + 24px), calc(50% - var(--container) / 2 - 68px)); }
.v2 .v2-seta svg { width: 22px; height: 22px; fill: none; stroke: var(--branco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v2 .v2-seta:hover { background: rgba(200, 210, 222, .20); }
.v2 .v2-seta:focus-visible { outline: 2px solid var(--teal-claro); outline-offset: 3px; }

/* --- pontos: sobrepostos no rodape do palco ---
   Com o cartao encostando em cima e embaixo, a fileira perdeu o espaco
   proprio que tinha embaixo. Vai para dentro do palco, numa pilula de vidro
   que garante leitura sobre qualquer conteudo do cartao. */
.v2 .v2-pontos {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-btn);
  background: rgba(0, 27, 46, .42);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
          backdrop-filter: blur(12px) saturate(130%);
  box-shadow: inset 0 0 0 1px var(--v2-borda);
}
.v2 .v2-ponto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--r-btn);
  background: rgba(200, 210, 222, .42);
  transition: width .3s ease, background-color .3s ease;
}
.v2 .v2-ponto:hover { background: rgba(200, 210, 222, .55); }
.v2 .v2-ponto.esta-ativo { width: 28px; background: var(--teal); }
.v2 .v2-ponto:focus-visible { outline: 2px solid var(--teal-claro); outline-offset: 3px; }

/* quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  .v2 .v2-slide { transition: opacity .2s linear; }
}

/* --- cartões de vidro: DEC / LAD / TAG, sobre a seção escura --- */
.v2 .metodologia-item {
  background: var(--v2-vidro);
  -webkit-backdrop-filter: blur(var(--v2-blur)) saturate(130%);
          backdrop-filter: blur(var(--v2-blur)) saturate(130%);
  border-radius: var(--r-card-lg);
  padding: 26px 22px 30px;
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.v2 .metodologia-item:hover {
  background: var(--v2-vidro-forte);
  box-shadow:
    inset 0 0 0 1px rgba(200, 210, 222, .26),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
}
/* a correção de centroide de 8px (2026-08-31) compensava a massa visual
   assimétrica dos selos soltos. Com cartão simétrico em volta, o centro
   ótico volta a ser o geométrico e a compensação passa a desalinhar. */
.v2 .metodologia-selos { margin-left: 0; }

/* --- selos/badges que não são clicáveis viram vidro (consequência
       direta da disciplina de acento: teal só em clicável) --- */
.v2 .hero-qualificador {
  /* 2026-09-08 — Renato: "a caixa (nao depois de formar) possui uma cor de
     destaque". Medido no Academia.png: fundo rgb(177,196,221) = #B1C4DD,
     texto rgb(0,27,46) = #001B2E, caixa de 1166x162px -> 300x42px no cartao,
     raio de ~48px no arquivo -> 12px. Nao e' pilula e nao e' vidro: e' um
     bloco solido de cor. O vidro que estava aqui era invencao minha. */
  background: #B1C4DD;
  color: var(--ink);
  font-weight: 700;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho);
}

/* fallback: sem backdrop-filter, o vidro vira superfície opaca legível */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 .site-header      { background: var(--ink); }
  .v2 .dropdown         { background: #062338; }
  .v2 .abas-menu,
  .v2 .metodologia-item,
  .v2 .hero-qualificador { background: rgba(200, 210, 222, .12); }
}

/* ===========================================================
   DISCIPLINA DE ACENTO — teal = clicável · amarelo = destaque
   de título. Nenhum outro elemento usa acento.
   Cada par fundo+texto é fechado (regra 44).
   =========================================================== */

/* 2026-09-08 — REVERTIDO POR INTEIRO. Renato: "todos os botoes da home
   deixaram de ficar amarelos como no protótipo aprovado... incluindo o menu".
   Estava certo, e o valor certo ja' estava escrito no MODELO TRAVADO da
   doutrina: "Hover de todos: fundo --amarelo, texto --ink". A "disciplina de
   acento" (amarelo so em titulo) veio da intersecao das 4 style references —
   e' consenso externo passando por cima de decisao aprovada na Fase 6, o MESMO
   erro do bloco A da tipografia (regra 65). Cor de acento nao e' superficie.
   Os hovers voltam a herdar o style.css travado: --amarelo em .btn-primario
   (l.136), .btn-secundario (l.144), .btn-navy (l.1259), .btn-branco-azul
   (l.1409), nav .ativo (l.181) e .dropdown a:hover (l.202). Nenhuma regra de
   acento e' redefinida nesta camada. */

/* rótulos que usavam acento ou cinza cravado voltam para os dois
   tons de texto do site (#001B2E / #C8D2DE) */
.v2 .hero-tag,
.v2 .hero-tag-grande,
.v2 .metodologia-topo .hero-tag { color: var(--txt-claro); }

/* .destaque (amarelo) e .btn-primario / .btn-navy / .footer-col a (teal)
   seguem exatamente como no v1 — cada um no seu único trabalho. */

/* ===========================================================
   MOBILE
   Peso 350 em corpo pequeno afina demais: sobe para 400 abaixo
   de 860px, sem mudar o tamanho aprovado do v1.
   =========================================================== */
@media (max-width: 860px) {
  /* 2026-09-08: sem override — mobile herda o v1 (.h1 32px, .h2 26px, peso 800) */
  .v2 .secao             { padding: 72px 0; }
  .v2 .secao.pequena     { padding: 56px 0; }
  .v2 .secao-cabecalho .eyebrow::after { width: 48px; }

  /* carrossel empilhado: texto em cima, foto embaixo — o mesmo palco
     central da referência, em coluna única */
  /* mesma regra do desktop: encosta em cima e embaixo, folga so nas laterais */
  .v2                      { --v2-palco-h: clamp(480px, 74vh, 600px); }
  /* linha da foto em PROPORCAO, nao em px: com o palco preenchendo a tela,
     190px fixos deixariam a foto minuscula num cartao alto */
  .v2 .v2-slide            { width: min(330px, calc(100% - 64px)); grid-template-columns: 1fr; grid-template-rows: 1fr 46%; }
  .v2 .v2-slide .h1        { font-size: 27px; }   /* so tamanho: cabe na coluna de 330px; peso/lh do v1 */
  .v2 br.qm                { display: none; }    /* coluna de 330px reflui sozinha */
  .v2 .v2-slide-texto      { padding: 28px 24px; gap: 14px; }
  .v2 .v2-slide-texto .corpo { font-size: 15px; }
  .v2 .v2-slide.esta-antes  { transform: translateX(-124%) scale(.84); }
  .v2 .v2-slide.esta-depois { transform: translateX(24%)   scale(.84); }
  .v2 .v2-seta             { width: 42px; height: 42px; }
  .v2 .v2-seta-ant         { left: -4px; }
  .v2 .v2-seta-prox        { right: -4px; }
  .v2 .v2-seta svg         { width: 18px; height: 18px; }
}

/* ===========================================================
   PAGINA CONSULTORIA — v2 GLASS (2026-09-08)
   -----------------------------------------------------------
   Segunda pagina a receber a camada. Herda o que Renato aprovou
   e travou na Home v2: cabecalho em vidro, Fundo TEC no hero,
   cartao de vidro sobre camada ambiente, respiro, pilula, raio.

   O que NAO e' tocado, e por que:
   - Tipografia, tamanho, peso e cor de texto — regra 65: o modelo
     travado na Fase 6 e' a regua tambem para a versao nova.
   - `.hero-foto-wrap.hero-consultoria` — geometria travada em
     2026-09-04 (631x640, zoom 1,000, corte zero). Nenhuma regra
     daqui muda a altura do `.hero`, entao a foto fica identica.
   - `.lista-numeros-grandes .linha-num` (contorno pontilhado) e
     `.chao-fabrica-secao` (foto de fundo + gradiente) — decisoes de
     arte ja medidas no mockup. Regra 69: superficie nova nao se
     aplica retroativamente a arte ja decidida.
   - Fundo `#F1F3F4` de "Como aplicamos" — apontamento explicito de
     Renato em 2026-09-04. Nao se reabre o que ja foi decidido.
   - Copy, fotos e estrutura: nada novo. Regra 3 da skill.
   =========================================================== */

/* --- HERO ---------------------------------------------------
   Mesmo arquivo autoral do hero da Home (`fundo-hero-tec.jpg`),
   com o gradiente de costura trocado. Medicao que motivou a troca
   (varredura em 8 faixas de largura, luminancia media + densidade
   de bordas):

     faixa      L_med   textura
     0-12,5%     27,8     2,8   <- circuito
     37,5-50%    51,8     2,1
     62,5-75%    84,8     1,8   <- brilho
     75-87,5%    89,5     1,8

   A foto da Consultoria e' `absolute; right:0` e cobre de ~56% a
   100% da largura. Com `cover`, o texto cai sobre a metade escura
   com o circuito (contraste alto, atmosfera de engenharia — regra
   48) e o brilho contorna a foto pelos 16px de respiro. E' o
   enquadramento certo por acaso feliz, e esta' medido, nao suposto.

   O gradiente de base para `--ink` da Home NAO entra aqui: la ele
   costura o hero com a secao azul seguinte; aqui a secao seguinte
   e' bege, e o mesmo gradiente criaria a emenda dura que a regra 4
   da skill proibe. No lugar dele, um veu de topo que assenta o
   cabecalho de vidro sobre a parte mais clara do arquivo. */
.v2.pagina-consultoria .hero {
  background-image:
    linear-gradient(to bottom, rgba(0,27,46,.42) 0%, rgba(0,27,46,0) 30%),
    /* 2026-09-08 — Renato: "o fundo aprovado serve para todas as hero."
       O TEC sai daqui tambem; o gradiente de topo proprio desta pagina fica,
       porque ele existe por causa da secao BEGE que vem depois (a Home encosta
       numa secao azul e usa outro tratamento). */
    url('../img/fundo-hero-2.jpg');
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* --- "COMO APLICAMOS": camada ambiente CLARA ----------------
   Regra 46: vidro sobre cor chapada nao e' vidro, e' um retangulo
   mais claro. O cartao escuro desta secao so vira superficie de
   verdade se houver algo atras dele para embacar. A cor base
   #F1F3F4 fica intocada — entra so a grade de planta baixa (a
   mesma de 80px da Home, em tinta escura porque o fundo e' claro)
   e um halo teal fraco atras do cartao.
   Aplicada como `background-image` do proprio elemento, nunca como
   pseudo-elemento: pseudo cria contexto de empilhamento e foi a
   origem do bug de sangria de 2026-09-03. */
.v2 .como-aplicamos-secao {
  /* TESTE 2026-09-08, pedido de Renato: "utilize a foto Fundo Consultoria 2
     para o fundo da secao... e remova a luz azul que foi colocada ali. Tambem
     ficou fora de contexto."

     Os tres halos radiais (teal, azul escuro e dourado) SAIRAM por completo —
     eram a luz azul. No lugar entra a arte, medida antes de aplicar:
     4269x2219, L media 242 e uniforme em todas as faixas (229 a 244),
     amplitude de 15 em 255. E' textura clara sutil, nao imagem com assunto —
     por isso `cover`, e a cor base #F1F3F4 fica como fallback exato (L 240, a
     2 pontos da arte: se o arquivo falhar, ninguem percebe).

     PNG e nao JPG: amplitude baixa demais para arriscar perda, e o PNG saiu
     MENOR (9 KB contra 22 KB do JPG q92).

     ATENCAO ao `url()`: e' relativo A ESTA FOLHA (assets/css/), nunca ao HTML
     — o bug que deixou as 3 texturas do site sem carregar em 2026-09-03.

     Plano B, ja nomeado por Renato: voltar aos quadrados da 1a versao, que sao
     os mesmos da secao "Tecnologia sem estrutura" — grade de 80px em
     `--v2-grade`. Basta trocar este bloco pela versao no backup
     `BACKUP_v2-glass_antes-fundos_20260908_1640.css`. */
  background-color: #F1F3F4;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* --- "COMO APLICAMOS": o cartao vira vidro ------------------
   Analogo direto dos cartoes DEC/LAD/TAG que Renato chamou de
   "apice da modificacao" — mesmo raio (28px), mesma hairline
   `inset`, mesmo halo externo no lugar de sombra (regra 45.1).

   A diferenca esta' na densidade: la o vidro e' claro sobre fundo
   escuro (.07 de alfa); aqui e' escuro sobre fundo claro, e vidro
   come contraste (corolario da regra 46). Alfa de .92 mantem o par
   texto claro / fundo escuro praticamente intacto — a grade atras
   aparece embacada nas bordas, que e' o efeito, sem custar
   legibilidade. Medido depois de aplicado, nao estimado. */
.v2 .como-aplicamos-card {
  /* 2026-09-08, 2a passada. Renato: "o esfumacado nao foi revertido."
     Na 1a eu tirei so o GRAO e mantive o vidro (.82 + blur 34px) — e o que ele
     chama de esfumacado e' justamente o TRANSLUCIDO, nao o grao. Mesma familia
     da regra 66 ("preto" nunca era #000): o vocabulario dele descreve o efeito
     visto, nao a propriedade CSS.
     Agora o painel e' OPACO, na cor do modelo travado (--ink-fundo #001B2E),
     sem `backdrop-filter`. Nada atras aparece: e' cartao, nao vidro.
     Ficam do v2 apenas raio e elevacao — superficie e' campo livre (regra 65),
     e nenhuma das duas produz esfumacado. */
  background: var(--ink-fundo);
  border-radius: var(--r-card-lg);
  padding: 34px 30px;
  box-shadow:
    inset 0 0 0 1px rgba(200, 210, 222, .16),
    0 18px 44px rgba(0, 27, 46, .16);
}

/* --- CITACAO ------------------------------------------------
   A secao ja recebeu a camada ambiente pela regra generalizada de
   `.secao.ink-fundo`, acima. Aqui so o halo do bloco: a citacao e'
   a unica peca de texto solta sobre a grade, e sem um foco de luz
   atras ela fica boiando. Mesmo halo teal do topo da secao escura
   da Home, reposicionado para o centro. */
.v2.pagina-consultoria .citacao.secao.ink-fundo {
  background-image:
    radial-gradient(ellipse 62% 120% at 50% 50%, var(--v2-halo) 0%, transparent 68%),
    linear-gradient(to right,  var(--v2-grade) 1px, transparent 1px),
    linear-gradient(to bottom, var(--v2-grade) 1px, transparent 1px);
}

/* --- CTA final: hairline no lugar do corte seco -------------
   `.secao.paper-esc` encosta na secao anterior (foto de chao de
   fabrica, escura) sem transicao — bloco duro, o que a regra 4 da
   skill proibe. Um fio de luz no topo faz a costura sem inventar
   degrade nem mudar a cor da secao. */
.v2.pagina-consultoria .cta-final { position: relative; }
.v2.pagina-consultoria .secao.paper-esc {
  box-shadow: inset 0 1px 0 rgba(200, 210, 222, .55);
}

/* --- fallback sem backdrop-filter --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  }

@media (max-width: 860px) {
  .v2 .como-aplicamos-card { padding: 26px 22px; }
}


/* --- "O QUE MUDA": os tres itens viram cartoes de vidro (2026-09-08) -------
   Pedido de Renato: "a secao o que muda pode ganhar cards de liquid glass nas
   secoes 1, 2 e 3". Substitui o contorno pontilhado — que era decisao de arte
   medida no mockup, entao a regra 69 nao se aplica: quem desenhou e' quem esta
   mudando.

   Vidro CLARO, nao escuro: o fundo aqui e' bege (#E8E2D5) com textura, e vidro
   e' sempre mais claro que o que esta atras dele, nunca mais escuro. A textura
   do bege e' o substrato que a regra 46 exige — nao precisa inventar grade.
   Fontes, tamanhos, pesos e cores de texto seguem intocados. */
.v2 .lista-numeros-grandes .linha-num {
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
          backdrop-filter: blur(18px) saturate(125%);
  border: 0;                       /* sai o `2px dashed` */
  border-radius: var(--r-card-lg);
  padding: 28px 32px;
  width: 100%;                     /* pontilhado usava fit-content; cartao alinha */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    0 18px 40px rgba(0, 27, 46, .08);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.v2 .lista-numeros-grandes .linha-num:hover {
  background: rgba(255, 255, 255, .5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    inset 0 1px 1px rgba(255, 255, 255, .9),
    0 22px 46px rgba(0, 27, 46, .11);
}
/* o numero perde a opacidade .18 (que existia para nao competir com o
   pontilhado) e ganha o teal do site: dentro do cartao ele e' o ancoradouro */
.v2 .lista-numeros-grandes .num-grande { opacity: .42; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 .lista-numeros-grandes .linha-num { background: rgba(255,255,255,.72); }
}


/* --- HERO: a quina reta do canto direito (2026-09-08) ---------------------
   Renato: "a foto da hero ainda esta aparecendo a ponta do fundo azul.
   Sugiro deixar o fundo azul com a curvatura de 15 para ficar igual a foto,
   ou ao contrario, colocar a foto na curvatura do fundo azul."

   Medido antes de mexer, em 1400px:
     .hero-foto-wrap  x=753,67  right=1384,67  top=16  bottom=656
     .hero            width=1384,67  top=0     bottom=672
     border-radius    15px 0 0 15px   (cantos DIREITOS retos)

   Ou seja: a foto encosta exato na borda da tela, mas sobram 16px de fundo
   em cima e embaixo — e onde essa faixa encontra o canto reto nasce uma quina
   de 90 graus. E' a "ponta" que ele ve. A largura nao muda: os 631x640 e o
   zoom 1,000 travados em 2026-09-04 ficam intactos, porque raio nao mexe em
   caixa.

   Escolhida a segunda opcao dele (a foto acompanha a curvatura), que alem de
   resolver e' o que o MODELO TRAVADO ja' manda: "raio 15px em toda foto e
   cartao". Aplicar nos quatro cantos nao contraria a trava — cumpre. */
/* 2a passada, 2026-09-08. Renato: "a correcao na hero nao foi feita."
   Ele esta certo, e o erro foi meu de diagnostico: arredondar os 4 cantos NAO
   elimina a faixa de fundo — so troca a quina de 90 graus por um arco, e o
   arco contra a borda reta da tela ate' ABRE um vao onde antes a foto encostava.
   Nao havia como funcionar.

   A causa e' a faixa, nao o canto: a foto estava em top:16 / bottom:656 dentro
   de um hero de 0/672 — 16px de azul em cima e 16px embaixo. Enquanto existir
   essa folga, existe fundo azul aparecendo em volta da foto.

   Solucao: a foto encosta nos tres lados (topo, base, direita). E' a regra
   travada em 2026-08-28 ("foto de hero e' sangria total, nunca moldura") e o
   que Renato repete desde 2026-09-03 ("colada a barra de navegacao e ao final
   da secao"). O raio fica so' no lado esquerdo, o unico que nao encosta em
   nada.

   Custo medido, declarado e nao escondido: com top:0/bottom:0 a altura passa de
   640 para 672px e o aspect-ratio 1262/1280 devolve largura 662,5 em vez de
   631 — 5% maior que os px do protótipo travados em 2026-09-04. O zoom segue
   1,000 e o corte segue zero (a proporcao do arquivo e' preservada). Se os
   631x640 exatos valerem mais que a sangria, o caminho e' voltar a top/bottom
   16px e aceitar a moldura — mas ai' a faixa azul volta junto, porque as duas
   coisas sao a mesma. */
.v2.pagina-consultoria .hero-foto-wrap.hero-consultoria {
  top: 0; bottom: 0; right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* a asa entra maior e mais forte que o padrao da secao bege: aqui ela precisa
   atravessar o cartao para ter o que ser embacado. Classe propria — pedido de
   UMA secao nunca vira regra global (regra 22). */
/* 2026-09-08 — Renato: "colocar a logo em como aplicamos foi a pior decisao.
   remova a logo desta parte." Removida do HTML e daqui. A profundidade do
   vidro fica por conta dos halos e do glow externo do cartao, que nao dependem
   de nenhum elemento de marca atras. */
.v2 .como-aplicamos-grade { position: relative; z-index: 1; }



/* ===========================================================
   HERO EM CARD — teste 2026-09-08 (pedido de Renato)
   -----------------------------------------------------------
   "Entendendo que os carrosseis da home sao Cards. Vamos fazer um card para a
   hero da consultoria. Toda hero da consultoria serviria de fundo (sem os
   textos) porem usando o fundo e a foto bem esfumacado e na frente o card
   completo com os textos e a foto, no mesmo formato do card da hero do home."

   Cada arte volta ao papel certo, sem inventar ativo novo:
   - `consultoria-estrategia.jpg` (foto de ambiente, opaca) -> FUNDO desfocado,
     na mesma ancoragem a direita que ela ja tinha;
   - `carrossel-consultoria-camadas.webp` (recorte com alfa, aprovado no
     carrossel) -> a foto DENTRO do card. E' ela que permite o painel
     transparente do card, como na Home (regra 58).

   O card reusa `.v2-slide` — mesma classe, mesmo raio, mesmo vidro, mesma
   grade 1fr/1.06fr. `.v2-slide-fixo` so' desliga o que e' de carrossel
   (posicao absoluta, transform, transicao). Formato identico por
   CONSTRUCAO, nao por copia de valores — se o card da Home mudar, este
   acompanha.

   Reverter = `BACKUP_consultoria_antes-herocard_20260908_1720.html`.
   =========================================================== */

.v2 .hero.hero-card {
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
}
.v2 .hero.hero-card > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--v2-palco-h);
  display: flex;
  align-items: center;
}

/* --- o fundo esfumacado: a hero antiga, sem texto --- */
.v2 .hero-card-fundo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  z-index: 0;
  overflow: hidden;
  /* a foto some na borda esquerda em vez de terminar num corte reto — sem
     isso nasce a "emenda dura" que a regra 4 da skill proibe */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
          mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}
.v2 .hero-card-fundo img {
  width: 100%; height: 100%;
  object-fit: cover;              /* aqui e' FUNDO desfocado: nao ha assunto a preservar */
  display: block;
  /* "bem esfumacado": blur alto e opacidade suficiente para a foto SER VISTA.
     A 1a passada ficou em .5 com veu de .82 e o resultado foi fundo chapado —
     a foto existia e nao aparecia, o mesmo modo de falha da regra 74 (objeto
     atras de camada densa demais e objeto invisivel). */
  filter: blur(22px) saturate(90%);
  transform: scale(1.14);         /* cobre a franja transparente que o blur cria na borda */
  opacity: .8;
}
/* veu que devolve o contraste que o texto do card precisa */
.v2 .hero.hero-card::after {
  content: '';
  position: absolute; inset: 0;
  /* veu com direcao: forte a ESQUERDA, onde o texto do card precisa de base,
     e fraco a direita, onde a foto desfocada pode aparecer. */
  background: linear-gradient(90deg, rgba(0,27,46,.80) 0%, rgba(0,27,46,.40) 52%, rgba(0,27,46,.14) 100%);
  z-index: 1;
  pointer-events: none;
}

/* --- o card: reusa .v2-slide, desliga o que e' de carrossel --- */
.v2 .v2-slide.v2-slide-fixo {
  position: relative;
  top: auto; left: auto;
  transform: none;
  transition: none;
  opacity: 1;
  filter: none;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .v2 .hero.hero-card > .container { height: auto; padding-top: 40px; padding-bottom: 40px; }
  .v2 .v2-slide.v2-slide-fixo { width: 100%; height: auto; min-height: 520px; grid-template-columns: 1fr; grid-template-rows: 1fr 46%; }
  .v2 .hero-card-fundo { width: 100%; -webkit-mask-image: none; mask-image: none; opacity: .8; }
}


/* --- painel de foto OPACA dentro do card (2026-09-08) ---------------------
   Renato: "o que voce fez de errado foi... nao utilizar a foto da hero da
   consultoria no card. Quando eu falei para fazer um card igual ao da home, me
   referi a pegar todo o layout e formato da hero, porem nao eliminar toda a
   escrita, botao e foto da hero."

   O card da Home usa `object-fit: contain` porque as fotos dele sao RECORTES
   com alfa — contidas, elas flutuam sobre o fundo continuo do cartao. A foto da
   hero da Consultoria e' opaca e retangular (1262x1280): com `contain` ela
   apareceria como um retangulo menor, boiando, com barras dos dois lados.
   `.foto-cheia` troca para `cover`, que aqui e' o certo — o painel deixa de ser
   vitrine de recorte e passa a ser JANELA para a foto, que e' exatamente o que
   a hero fazia antes.

   E o mesmo arquivo aparece duas vezes de proposito: desfocado no fundo e
   nitido no card. E' isso que faz o efeito ler como "a hero atras do vidro". */
.v2 .v2-slide-foto.foto-cheia img {
  object-fit: cover;
  object-position: center;
}
/* Medido na 1a passada: com a grade 1fr/1.06fr da Home, o painel fica 566x460
   (proporcao 1,230) contra 0,986 do arquivo — `cover` ampliava 1,248 e cortava
   **19,9% da largura**. Corte de foto e' regra dura desde 2026-09-03.
   Correcao pelo principio ja travado em 2026-09-04: com a altura presa ao card,
   o `aspect-ratio` devolve a largura EXATA do arquivo, e o corte vai a zero. A
   coluna de texto absorve a diferenca — o card continua 1100x460 por fora, que
   e' o "mesmo formato" que ele pediu; muda so a divisao interna. */
.v2 .v2-slide.v2-slide-fixo:has(.foto-cheia) { grid-template-columns: 1fr auto; }
.v2 .v2-slide-foto.foto-cheia {
  /* 2a passada: `height:100%` + `aspect-ratio` num item de grid `auto` resolve
     a LARGURA primeiro e depois estica a altura — medido 574x582 num card de
     460, ou seja, a foto estourou o cartao e espremeu a coluna de texto (o
     titulo foi para 4 linhas e o 2o botao saiu da caixa).
     A largura passa a ser calculada explicitamente a partir da altura do palco,
     que e' a mesma variavel que define a altura do card. Determinístico, sem
     depender da ordem de resolucao do grid. 1262/1280 = 0,9859. */
  height: 100%;
  width: calc(var(--v2-palco-h) * 0.9859);
  flex: none;
}

/* Academia: o qualificador e o selo de certificado vivem dentro do card, entao
   herdam a largura da coluna de texto — sem isso o `width: fit-content` do v1
   estica ate a borda do painel. */
.v2 .v2-slide-texto .hero-qualificador { width: fit-content; }
.v2 .v2-slide-texto .hero-tag-grande img { width: 24px; height: 24px; }

/* ===========================================================
   LIQUID GLASS EM TODO CARD — diretriz de Renato, 2026-09-08
   -----------------------------------------------------------
   "Todo card precisa ser liquid glass. (nao esfumacado, esse nao ficou legal e
   nao sera usado no momento para nenhuma pagina). Nao altere o fundo de nenhuma
   pagina."

   Duas restricoes que moldam a solucao:
   1. Fundo de secao NAO se toca. Entao onde a secao e' cor chapada o vidro le
      como painel translucido, nao como vidro sobre textura (regra 46). Nas
      secoes que ja tem textura — bege, ink com grade, hero — ele aparece
      inteiro. Declarado, nao escondido.
   2. Cada card mantem a FAMILIA DE COR que ja tinha: card branco vira vidro
      claro, card escuro vira vidro escuro, card amarelo vira vidro amarelo.
      Vidro e' superficie, e superficie nao muda a cor de arte ja decidida
      (regra 69) nem o par fundo/texto (regra 44).

   O alfa de cada um saiu do contraste do texto que ele carrega, nunca de gosto.
   =========================================================== */

/* --- cards CLAROS (texto escuro): .card, .card-item, .card-foto-cheia --- */
.v2 .card,
.v2 .card-item {
  background: rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
          backdrop-filter: blur(20px) saturate(130%);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .62),
    inset 0 1px 1px rgba(255, 255, 255, .85),
    0 16px 38px rgba(0, 27, 46, .09);
}

/* --- cards ESCUROS (texto claro): .card.escuro, .frase-destaque ---
   .82 e' o piso ja medido para texto claro sobre vidro escuro (regra 74). */
.v2 .card.escuro,
.v2 .frase-destaque {
  background: rgba(0, 27, 46, .82);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 0 0 1px rgba(200, 210, 222, .24),
    inset 0 1px 1px rgba(255, 255, 255, .18),
    0 18px 44px rgba(0, 27, 46, .20);
}

/* --- card de foto: o painel de cor #B1C4DD do mockup vira vidro do MESMO tom,
       nunca de outro (a cor e' decisao de arte medida) --- */
.v2 .card-foto-cheia {
  background: rgba(177, 196, 221, .58);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
          backdrop-filter: blur(18px) saturate(125%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 16px 38px rgba(0, 27, 46, .10);
}

/* --- PRIMEIRO VOO: os cards amarelos (.pv-caixa, --apostila #FCFBE7) --- */
.v2 .pv-caixa {
  background: rgba(252, 251, 231, .5);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
          backdrop-filter: blur(18px) saturate(130%);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .58),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    0 14px 34px rgba(0, 27, 46, .10);
}

/* --- ACADEMIA: cartao da oferta (amarelo) --- */
.v2 .card-oferta-estudante {
  background: rgba(190, 178, 122, .62);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
          backdrop-filter: blur(18px) saturate(135%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    0 16px 38px rgba(0, 27, 46, .12);
}

/* fallback: sem backdrop-filter o vidro vira superficie opaca legivel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 .card, .v2 .card-item      { background: rgba(255,255,255,.92); }
  .v2 .card.escuro,
  .v2 .frase-destaque            { background: var(--ink-fundo); }
  .v2 .card-foto-cheia           { background: #B1C4DD; }
  .v2 .pv-caixa                  { background: var(--apostila); }
  .v2 .card-oferta-estudante     { background: var(--amarelo); }
}

/* ===========================================================
   ACADEMIA — dois bugs apontados por Renato (2026-09-08)
   =========================================================== */

/* 1. "O botao do card da oferta exclusiva vai de azul claro para amarelo e
      acaba sumindo. Preciso que ele va de azul claro para amarelo porem ao
      passar o mouse ele deve fazer o contrario dos cards que ficam em cima
      dele, de amarelo ele vai para azul escuro."
      O `.card-curso:hover` pinta o CARTAO de amarelo; o botao dentro dele
      tambem ia para amarelo e desaparecia — amarelo sobre amarelo. Agora ele
      INVERTE: quando o cartao vira amarelo, o botao vira azul escuro. Par
      fundo+texto fechado nos dois estados (regra 44). */
.v2 .card-oferta-estudante .btn:hover,
.v2 .card-oferta-estudante .card-curso-cta:hover {
  background: var(--ink);
  color: var(--branco);
  border-color: var(--ink);
}

/* 2. "Na parte 'Cada curso concluido...' o simbolo e o texto formacao com
      certificado sumiu, isso ja tinha sido corrigido."
      Regressao: o arquivo escuro do icone (criado em 2026-09-04 justamente
      porque o original tem alfa maximo 135 e some em fundo claro) e o par de
      cor do rotulo voltam a valer aqui. */
.v2 .hero-tag.selo-sobre-claro,
.v2 .secao.bege .hero-tag,
.v2 .secao.paper-esc .hero-tag {
  color: var(--ink);
  font-weight: 600;
  opacity: 1;
}
.v2 .secao.bege .hero-tag img,
.v2 .secao.paper-esc .hero-tag img,
.v2 .hero-tag.selo-sobre-claro img { opacity: 1; }

/* CORRECAO na mesma rodada: `.card-foto-cheia` tem uma variante ESCURA
   (`.card-foto-cheia-escuro`, texto branco) que eu tinha coberto com o vidro
   azul-claro da variante padrao — medido: contraste 1,05 e 1,45 no TAG, ou
   seja, ilegivel. Toda familia de card precisa ser varrida por VARIANTE antes
   de receber uma cor: e' o mesmo erro da regra 44 (par fundo+texto e' fechado),
   agora em superficie. */
.v2 .card-foto-cheia.card-foto-cheia-escuro {
  background: rgba(0, 27, 46, .82);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(200, 210, 222, .24),
    inset 0 1px 1px rgba(255, 255, 255, .18),
    0 18px 44px rgba(0, 27, 46, .20);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 .card-foto-cheia.card-foto-cheia-escuro { background: var(--ink-fundo); }
}

/* ===========================================================
   RODADA 2026-09-09 — lista escrita de Renato
   -----------------------------------------------------------
   Regra que orienta tudo abaixo: o vidro APROVADO e' o de
   `.metodologia-item` (Home, "Nossa metodologia"). Sobre secao
   ESCURA ele e' claro e quase todo transparente — o azul vem do
   fundo atravessando. Sobre secao CLARA um vidro assim nao
   sustenta texto claro, entao o corpo azul fica, mas medido:
   alfa .72 (28% do fundo atravessa, contra 18% do .82 anterior)
   da 7,50 de contraste para o branco e 4,90 para --txt-claro.
   O destaque em azul claro sobe de #88B3C1 (3,31 = reprova) para
   #B4D6E2 (4,88 = passa) — o par fundo+texto continua fechado.
   Sombra projetada sai; o volume vem de brilho e borda internos.
   =========================================================== */

:root{
  --v2-vidro-azul:        rgba(0, 27, 46, .72);
  --v2-vidro-azul-hover:  rgba(0, 27, 46, .66);
  --azul-destaque:        #B4D6E2;
  --v2-relevo-claro:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    inset 0 -14px 26px rgba(0, 27, 46, .05);
  --v2-relevo-escuro:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 0 0 1px rgba(200, 210, 222, .22),
    inset 0 -16px 30px rgba(0, 0, 0, .16);
}

/* --- 1. HOME, 2a secao: a arte propria entra como fundo -------------------
   A textura generica sai; entra `Home segunda secao..png` (4269x1356), que ja
   traz a marca inteira e posicionada. A secao recebe a proporcao EXATA do
   arquivo (3,1482), entao `cover` nao tem o que cortar; a ancoragem a direita
   protege a marca quando a tela e' mais estreita que a proporcao. */
.v2 .secao.abertura-foto{
  background-color: var(--ink);
  background-image: url('../img/home-abertura-fundo.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  aspect-ratio: 4269 / 1356;
  min-height: 330px;
  padding: 0;
  display: flex;
  align-items: center;
}
.v2 .secao.abertura-foto > .container{ padding-top: 0; padding-bottom: 0; }

/* --- 2. carrossel: bolinha amarela sob o mouse (Home e Contato) --- */
.v2 .v2-ponto:hover,
.v2 .v2-ponto.esta-ativo:hover{ background: var(--amarelo); }

/* --- 3. rodape: atalho amarelo sob o mouse, como no menu do topo --- */
.v2 .site-footer a:hover,
.v2 .rodape a:hover,
.v2 footer a:hover{ color: var(--amarelo); }

/* --- 4. VIDRO AZUL sobre secao CLARA ------------------------------------
   Onde antes havia bloco azul chapado (.82, quase opaco). */
.v2 .frase-destaque,
.v2 .caixa-azul-texto,
.v2 .a7-caixa,
.v2 .diagnostico-item,
.v2 .como-aplicamos-card,
.v2 .card.escuro,
.v2 .card-foto-cheia.card-foto-cheia-escuro{
  background: var(--v2-vidro-azul);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
          backdrop-filter: blur(26px) saturate(150%);
  border: 0;
  box-shadow: var(--v2-relevo-escuro);
}
.v2 .diagnostico-item{ border-radius: var(--r-card); }  /* o `border:0` acima e' que tira o pontilhado; padding fica como estava */
.v2 .a7-caixa{ border-radius: var(--r-card-lg); }

/* destaque em azul claro dentro do vidro azul — o mesmo tom nas duas
   estruturas irmas (Sobre Nos e Consultoria), como ele pediu */
.v2 .caixa-azul-texto strong,
.v2 .como-aplicamos-card p strong,
.v2 .frase-destaque strong{ color: var(--azul-destaque); }

/* --- 5. VIDRO CLARO com relevo, sem sombra projetada ---------------------
   "precisam aparentar esse efeito 3D. Nao crie nenhuma sombra ou fundo." */
.v2 .card,
.v2 .card-item,
.v2 .modulo-item,
.v2 .card-foto-cheia{
  box-shadow: var(--v2-relevo-claro);
}
.v2 .modulo-item{
  background: rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
          backdrop-filter: blur(20px) saturate(130%);
  border-radius: var(--r-card);
  padding: 18px 20px;
}
.v2 .card.escuro,
.v2 .card-foto-cheia.card-foto-cheia-escuro{ box-shadow: var(--v2-relevo-escuro); }

/* --- 6. TAG, "As tres condicoes": vidro do mesmo tom, mais nitido --- */
.v2 .tres-condicoes .card-foto-cheia{
  background: rgba(177, 196, 221, .46);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
}
.v2 .tres-condicoes .card-foto-cheia.card-foto-cheia-escuro{
  background: var(--v2-vidro-azul);
}

/* --- 7. numeros 01/02/03 de "O que muda" (LAD e TAG) --------------------
   O cartao virou vidro claro; o teal (#468497) sumiu nele. Azul escuro. */
.v2 .lad-omq-lista .card-item .selo-quadrado,
.v2 .tag-omq-lista .card-item .selo-quadrado{ color: var(--ink); }

/* --- 8. ACADEMIA -------------------------------------------------------- */
/* "Quanto do que voce aprende": a foto e a secao estao boas, o texto e' que
   nao acompanha. Titulo e corpo sobem juntos, sem tocar na caixa. */
.v2 .academia-quanto .academia-texto h2{ font-size: 44px; line-height: 1.12; }
.v2 .academia-quanto .academia-texto .corpo{ font-size: 21px; line-height: 1.6; }
.v2 .academia-quanto .academia-texto{ gap: 22px; max-width: 620px; }
/* "Ensino medio / Programa": as caixas amarelas viram vidro amarelo */
/* a caixa e' BEGE (#E8E2D5) com texto --ink, sobre secao escura: alfa baixo
   escurece a superficie e o texto some. Fica na propria familia de cor, em
   .80 — vidro visivel, cor preservada (regra 69), texto acima de 10. */
.v2 .acad-caixa{
  background: rgba(232, 226, 213, .80);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--r-card);
  box-shadow: var(--v2-relevo-escuro);
}

/* --- 9. PRIMEIRO VOO: o vidro dos cartoes vai de creme para amarelo --- */
/* medido: a secao e' azul escuro, entao alfa baixo puxa o amarelo para
   oliva e o texto --ink cai para ~2 de contraste. Em .80 a superficie fica
   amarela de verdade (152,142,98) e o texto escuro sobe para 4,75. */
.v2 .pv-caixa{
  background: rgba(190, 178, 122, .80);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--v2-relevo-claro);
}

/* --- 10. grade sobre fundo claro (a mesma das secoes escuras, invertida) -
   "pode usar o fundo quadriculado para dar dimensao, mantendo o fundo
   branco" — Sobre Nos (CTA) e Contato (Cada diagnostico). */
.v2 .secao.grade-clara{
  background-image:
    linear-gradient(to right,  rgba(0, 27, 46, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 27, 46, .055) 1px, transparent 1px);
  background-size: var(--v2-grade-passo) var(--v2-grade-passo), var(--v2-grade-passo) var(--v2-grade-passo);
  background-repeat: repeat, repeat;
  background-position: center top, center top;
}

/* --- 11. CONTATO: a caixa do formulario vira vidro --- */
.v2 .contato-form-card{
  background: rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
          backdrop-filter: blur(20px) saturate(130%);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--v2-relevo-claro);
}

/* fallback sem backdrop-filter: superficie opaca legivel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 .frase-destaque, .v2 .caixa-azul-texto, .v2 .a7-caixa,
  .v2 .diagnostico-item, .v2 .como-aplicamos-card, .v2 .card.escuro { background: var(--ink-fundo); }
  .v2 .modulo-item, .v2 .contato-form-card { background: rgba(255,255,255,.94); }
  .v2 .acad-caixa { background: var(--bege); }
  .v2 .pv-caixa { background: var(--apostila); }
}

/* --- 12. SOBRE NOS, "Como trabalhamos": os cartoes tinham fundo branco em
   `style` inline (que vence qualquer folha). Viraram `.card`, entao herdam o
   vidro — mas `.card` traz padding proprio e a foto precisa sangrar ate a
   borda: o padding volta a zero e o conteudo mantem o dele, que ja e' inline. */
.v2 .card.card-com-foto{
  padding: 0;
  overflow: hidden;
  gap: 0;
  align-items: stretch;
}

/* ===========================================================
   VIDRO AZUL ESCURO — "sombra no meio, luz em volta" (2026-09-09)
   -----------------------------------------------------------
   Pedido de Renato com 3 referencias (Pinterest). Medido nelas, nao
   estimado:
   - ref1 (placas empilhadas): no card escuro, corte VERTICAL vai de
     L 28 no topo a L 59 na base (a luz entra por baixo); corte
     HORIZONTAL vai de L 43,6 na borda esquerda a L 19,8 no miolo,
     com repique de L 28,4 junto a borda direita. Interior mais
     escuro que a periferia: e' a "sombra no meio".
   - ref2 (pastilhas) e ref3: razao de luminancia BORDA/CENTRO de
     4,68 e 3,73. E' a "luz em volta", e ela e' um FIO continuo em
     todo o contorno, nao um brilho so no topo.

   O que o nosso vidro tinha: fio de luz apenas no topo, hairline
   fraco (.22) e sombra interna na BASE — ou seja, escurecia
   justamente onde a referencia clareia, e nao tinha anel.

   Calibragem (vidro .72 sobre `paper`, base composta 67/87/102):
   - anel em .30  -> razao borda/centro 4,18 (dentro dos 3,73-4,68
     medidos nas referencias; .55 dava 7,05, luz demais)
   - miolo escurecido .26 -> branco 10,6 e --txt-claro 6,93
   - luz da base CONFINADA (spread -10px) porque em faixa larga ela
     derruba --txt-claro para 4,4/3,95, abaixo do piso AA.
   Sem sombra projetada: a restricao dele continua valendo.

   Escopo: SO o card azul escuro da Academia, como ele pediu.
   =========================================================== */
.v2.pagina-academia .card.escuro{
  background-color: rgba(0, 27, 46, .72);
  background-image:
    radial-gradient(120% 92% at 50% 44%,
      rgba(0, 0, 0, .26) 0%,
      rgba(0, 0, 0, .12) 46%,
      rgba(0, 0, 0, 0)   74%);
  box-shadow:
    inset 0 0  0  1px  rgba(198, 224, 235, .30),
    inset 0 1px 0        rgba(255, 255, 255, .42),
    inset 0 -14px 22px -10px rgba(198, 224, 235, .34),
    inset 0 18px  34px -14px rgba(0, 0, 0, .30);
}
/* no hover o cartao vira amarelo (decisao ja aprovada): o gradiente do
   vidro sai junto, senao suja a cor cheia */
.v2.pagina-academia .card.escuro.card-curso:hover{ background-image: none; }

/* ===========================================================
   LEITO DE VIDRO — Academia, faixa dos cartoes de curso
   (opcao A, escolhida por Renato em 2026-09-09)
   -----------------------------------------------------------
   Diagnostico que levou a isto: `backdrop-filter` borra o que esta
   ATRAS. Atras dos cartoes havia `background-image: none` sobre
   `rgb(239,242,246)` — cor chapada. Borrar cor chapada devolve a
   mesma cor, entao sobrava so a tinta a 72%: opaco, sem brilho.
   O cartao aprovado da Home usa alfa **.07** e funciona porque tem
   grade de 80px e halo radial atras dele.

   A correcao NAO mexe no fundo da secao (restricao dele): entra um
   leito com o substrato da Home apenas sob a faixa dos cartoes, e
   os cartoes voltam a receita exata de `.metodologia-item`.
   =========================================================== */
.v2 .leito-vidro{
  position: relative;
  padding: 34px 30px;
  border-radius: var(--r-card-lg);
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 24%, var(--v2-halo) 0%, transparent 66%),
    linear-gradient(to right,  var(--v2-grade) 1px, transparent 1px),
    linear-gradient(to bottom, var(--v2-grade) 1px, transparent 1px);
  background-size: 100% 100%, var(--v2-grade-passo) var(--v2-grade-passo), var(--v2-grade-passo) var(--v2-grade-passo);
  background-repeat: no-repeat, repeat, repeat;
  background-position: center center, center top, center top;
  isolation: isolate;
}

/* dentro do leito, o cartao e' o vidro APROVADO da Home — mesma receita,
   nao valores copiados a olho */
.v2.pagina-academia .leito-vidro .card.escuro{
  background-color: var(--v2-vidro);
  background-image: none;
  -webkit-backdrop-filter: blur(var(--v2-blur)) saturate(130%);
          backdrop-filter: blur(var(--v2-blur)) saturate(130%);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.v2.pagina-academia .leito-vidro .card.escuro:hover{
  background-color: var(--v2-vidro-forte);
}
/* o cartao teal do "acesso completo" e cor de arte decidida: nao vira vidro,
   so acompanha o raio e o hairline para nao destoar dentro do leito */
.v2.pagina-academia .leito-vidro .card-completo{
  box-shadow: inset 0 0 0 1px var(--v2-borda), var(--v2-halo-externo);
}
@media (max-width: 860px){
  .v2 .leito-vidro{ padding: 22px 16px; }
}

/* ===========================================================
   CARTAO AMARELO DA OFERTA — dentro do leito + hover invertido
   (2026-09-09, pedido de Renato)
   -----------------------------------------------------------
   "com o mesmo fundo ele fica com o mesmo efeito?" — fica, mas com
   um teto que os azuis nao tem. Medido, amarelo #BEB27A sobre o
   leito #001B2E com texto --ink:
     alfa .55 -> rgb(105,110,88)  contraste 3,32  REPROVA
     alfa .65 -> rgb(124,125,95)  contraste 4,14  REPROVA
     alfa .75 -> rgb(142,140,103) contraste 5,12  passa
     alfa .82 -> rgb(156,151,108) contraste 5,89  passa
   Abaixo de .75 a cor deixa de ser amarela (vira oliva) E o texto
   escuro cai. Entao este vidro e' mais denso que o azul (.07): 18%
   do leito atravessa, nao 93%. Declarado, nao escondido — e' o
   limite de vidro de cor CLARA sobre fundo ESCURO (regra 88).
   =========================================================== */
.v2.pagina-academia .leito-vidro .card-oferta-estudante{
  background-color: rgba(190, 178, 122, .82);
  background-image: none;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
          backdrop-filter: blur(20px) saturate(135%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .38),
    inset 0 1px 0   rgba(255, 255, 255, .55),
    inset 0 -14px 22px -10px rgba(255, 255, 255, .22),
    inset 0 18px 34px -14px rgba(0, 0, 0, .22);
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* --- hover: de amarelo para azul escuro, com o par de texto virando
       junto (regra 44: fundo e texto sao um par fechado) --- */
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover{
  background-color: rgba(0, 27, 46, .88);
  box-shadow:
    inset 0 0 0 1px rgba(198, 224, 235, .34),
    inset 0 1px 0   rgba(255, 255, 255, .28),
    inset 0 -14px 22px -10px rgba(198, 224, 235, .30),
    inset 0 18px 34px -14px rgba(0, 0, 0, .28);
}
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .h3,
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .oferta-por,
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .oferta-por span,
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .oferta-eyebrow,
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .oferta-de,
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .corpo{
  color: var(--branco);
}
.v2.pagina-academia .leito-vidro .card-oferta-estudante .h3,
.v2.pagina-academia .leito-vidro .card-oferta-estudante .oferta-por,
.v2.pagina-academia .leito-vidro .card-oferta-estudante .oferta-eyebrow,
.v2.pagina-academia .leito-vidro .card-oferta-estudante .corpo{
  transition: color .25s ease;
}
/* o botao ja tinha regra de inversao no hover do cartao (2026-09-08);
   dentro do azul ele volta ao par amarelo+ink, que le sobre fundo escuro */
.v2.pagina-academia .leito-vidro .card-oferta-estudante:hover .btn{
  background: var(--amarelo);
  color: var(--ink);
  border-color: var(--amarelo);
}


/* NOTA DE TRAVA 2026-09-10: blocos 1, 8, 25 e 27 removidos (sobrescritos pelos
   blocos 14 e 28; so' embutiam imagens mortas no link). Historico em
   logica-de-design.md e no backup BACKUP_v2-glass_antes-trava_20260910.css. */
/* ===========================================================
   RODADA 2026-09-10 — TESTES A PARTIR DO PONTO B
   -----------------------------------------------------------
   Ponto B = copia integral em
   `Claude Code - Site/PONTO-B_html-site-v2-glass_20260910/` (150 arq,
   md5 do v2-glass.css 45E2ECE17F7B). Reverter UM item = apagar o bloco
   dele aqui; reverter TUDO = restaurar a pasta do ponto B.
   =========================================================== */

/* --- 2. CONSULTORIA, "Como aplicamos": DROP SHADOW no lugar do vidro ----
   Renato: "a caixa azul ainda esta opaca... teste usando a referencia 03
   drop shadow ao inves do liquid glass. So nesta pagina."
   Medido na referencia (Referencias Glass.jpg, efeito 03): fundo L 236,
   cartao L 230. A sombra existe SO a direita e embaixo; esquerda e topo
   tem um fio de LUZ de 1px (L 244 e 242). Perfil: minimo a 3px da borda
   (L 151-158, ~35% mais escuro que o fundo), cauda ate ~40-45px.
   Duas camadas reproduzem isso: nucleo curto deslocado + cauda longa.
   Sem backdrop-filter: e' cartao solido que flutua, nao vidro. */
.v2.pagina-consultoria .como-aplicamos-card {
  background: var(--ink-fundo);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .16),
    5px 7px 9px rgba(0, 27, 46, .34),
    14px 20px 36px rgba(0, 27, 46, .20);
}

/* --- 3. DEC, LAD, TAG: simbolo do card 15% menor --------------------------
   Arquivos com 632/627/613px de largura rodavam a ~566px CSS no painel —
   numa tela com escala de 125-150% isso pede 700-850px fisicos de um
   arquivo de 632: ampliacao, e ampliacao borra. Em 85% o simbolo fica em
   ~481px CSS (~600px fisicos a 125%), abaixo do arquivo.
   O CARD nao muda: so a caixa da imagem encolhe dentro do painel, ancorada
   no mesmo ponto de antes (centro, rente a base). */
.v2.pagina-dec .hero-card .v2-slide-foto,
.v2.pagina-lad .hero-card .v2-slide-foto,
.v2.pagina-tag .hero-card .v2-slide-foto {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.v2.pagina-dec .hero-card .v2-slide-foto img,
.v2.pagina-lad .hero-card .v2-slide-foto img,
.v2.pagina-tag .hero-card .v2-slide-foto img {
  width: 85%;
  height: 85%;
}

/* --- 4. CONTATO: marca colada na parede direita do card, 5% menor --------
   A arte e' METADE do simbolo: o corte reto fica no lado direito do
   arquivo (924x1516, alfa ate x=920). Ela nasceu para encostar na borda;
   centrada, o corte ficava boiando no meio do painel.
   Ancorada a DIREITA e no CENTRO vertical (antes: centro/base). Rente a
   base, a ponta inferior da arte (~14px da borda direita) seria comida
   pelo raio de 28px do card; com 13px de folga embaixo o raio recua so
   ~4px naquela altura, e nada da arte e' cortado. */
.v2.pagina-contato .hero-card .v2-slide-foto {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.v2.pagina-contato .hero-card .v2-slide-foto img {
  width: 100%;
  height: 95%;
  object-position: right center;
}

/* --- 5. ACADEMIA, "Ensino medio": caixas amarelas em DROP SHADOW ---------
   Cor pedida por Renato, da referencia dele (paleta "Sunset"): #FBB931.
   FORA da paleta travada (--amarelo e' #BEB27A) — decisao dele, em teste.
   Texto --ink sobre #FBB931: 10,1.
   A barra dourada da esquerda sai: era o estilo antigo da caixa, e
   #BEB27A sobre #FBB931 le como mancha.
   A secao e' ESCURA: a sombra da referencia (feita sobre fundo claro) so
   existe sobre #001B2E com mais densidade — preto, nao ink. */
.v2.pagina-academia .acad-caixa {
  background: #FBB931;
  color: var(--ink);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-left: 0;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .45),
    5px 7px 9px rgba(0, 0, 0, .45),
    14px 20px 36px rgba(0, 0, 0, .30);
}

/* --- 6. SOBRE NOS, "Como trabalhamos": CARTAO IMERSO (REF1-REF3) ---------
   Renato: "o card deixa de ser fundo branco com uma foto em cima com texto
   em baixo e passa a ter a foto mais ampla esfumacada na parte do texto e o
   texto sendo aplicado em cima da foto."
   Anatomia medida na REF2 (cartao 285x427): raio 40px = 14% da largura;
   foto nitida no topo, que DESFOCA e escurece para a cor dela mesma na
   faixa do texto; sombra larga e macia (23% de escurecimento a 18px da
   borda, ainda ~11% a 84px) — a elevacao vem dela, nao de vidro.
   Tres camadas dentro da janela da foto:
   - a foto (proporcao 1600x945, a de 5 dos 6 arquivos: zoom 1,00);
   - `::before` com backdrop-filter e mascara em degrade: desfoque
     PROGRESSIVO, zero no topo e cheio na base — o "esfumacado";
   - `::after` com degrade de transparente para a TINTA do cartao.
   A tinta e' a cor media do terco inferior de cada foto puxada para
   #001B2E ate L 58: cada cartao herda o tom da propria foto, como na
   referencia, sem sair da familia azul da marca. Contraste medido na
   tinta pura: branco 11,3-11,5 · --txt-claro 7,4-7,5 · destaque 7,4-7,5.
   `--tint` vai inline em cada cartao: e' DADO da foto, nao estilo. */
.v2 .cartao-imerso {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 54px;
  background: var(--tint, var(--ink-fundo));
  display: flex;
  flex-direction: column;
  box-shadow:
    0 30px 80px -12px rgba(0, 27, 46, .34),
    0 10px 24px -8px  rgba(0, 27, 46, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.v2 .cartao-imerso .ci-foto {
  position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: var(--ci-prop, 1.693);
  overflow: hidden;
  z-index: 0;
}
.v2 .cartao-imerso .ci-foto img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2 .cartao-imerso .ci-foto::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  -webkit-backdrop-filter: blur(14px) saturate(115%);
          backdrop-filter: blur(14px) saturate(115%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent 38%, #000 78%);
}
.v2 .cartao-imerso .ci-foto::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom,
    transparent 36%,
    color-mix(in srgb, var(--tint) 55%, transparent) 62%,
    color-mix(in srgb, var(--tint) 90%, transparent) 84%,
    var(--tint) 100%);
}
/* o texto comeca a 80% da altura da foto (47% da largura = 0,80 x 0,59):
   o titulo pousa sobre a faixa ja esfumacada, como na referencia */
.v2 .cartao-imerso .ci-texto {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(80% / var(--ci-prop, 1.693)) 28px 30px;
}
.v2 .cartao-imerso .num {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 22px;
  color: var(--azul-destaque);
}
.v2 .cartao-imerso .h3    { color: var(--branco); }
.v2 .cartao-imerso .corpo { color: var(--txt-claro); font-size: 14px; }

/* --- 7. SOBRE NOS, hero: titulo em duas linhas, uma por cor --------------
   Renato: 1a linha "Nao entregamos metodologia.", 2a "Caminhamos junto." —
   a quebra separa as duas cores. O destaque nao pode quebrar no meio. */
@media (min-width: 861px) {
  /* medido: o destaque ocupa 490px em Manrope 800/33px e a coluna tinha
     470px uteis (534 - 44 - 20): o texto encostava no painel do simbolo.
     Coluna de texto +24px (534 -> 558). O painel cai de 566 para 542px e o
     simbolo NAO encolhe: ele e' quadrado e ja era limitado pela ALTURA
     (520x520), entao sobra largura nos dois casos. So no desktop: no
     celular a grade vira 1 coluna e o titulo reflui sozinho. */
  .v2.pagina-sobre .v2-slide.v2-slide-fixo { grid-template-columns: 558px 1fr; }
  .v2.pagina-sobre .v2-slide-texto .h1 .destaque { white-space: nowrap; }
}

/* NOTA DE TRAVA 2026-09-10: blocos 1, 8, 25 e 27 removidos (sobrescritos pelos
   blocos 14 e 28; so' embutiam imagens mortas no link). Historico em
   logica-de-design.md e no backup BACKUP_v2-glass_antes-trava_20260910.css. */
/* ===========================================================
   RODADA 2026-09-10 (2a) — veredito da 1a e novos testes
   -----------------------------------------------------------
   Aprovado por Renato na 1a: drop shadow na caixa azul da Consultoria
   ("ali nos acertamos a tecnica da tag azul. Para o fundo claro realmente
   nao vai rolar liquid-glass") e a grade no CTA ("ficou muito bom").
   Reprovado: Fundo branco 1 ("ficou um pouco escuro").
   =========================================================== */

/* --- 9. DROP SHADOW estendido — a receita aprovada no bloco 2 -------------
   Levada aos cards azuis que ele nomeou, cada um escopado pela PAGINA e pela
   SECAO (regra 22). O `background` curto zera tambem o gradiente do vidro. */
.v2.pagina-dec .dec-logica .frase-destaque,
.v2.pagina-lad .secao-problema .frase-destaque,
.v2.pagina-lad .a7-caixa,
.v2.pagina-lad .diagnostico-item,
.v2.pagina-tag .problema-sangria .frase-destaque,
.v2.pagina-sobre .caixa-azul-texto {
  background: var(--ink-fundo);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .16),
    5px 7px 9px rgba(0, 27, 46, .34),
    14px 20px 36px rgba(0, 27, 46, .20);
}

/* --- 10. DEC, LAD, TAG: simbolo centrado com o texto do card --------------
   "estao coladas ao fundo do card... preciso que estejam centralizadas com o
   texto do card (flutuando sem encostar em nenhum canto)". O texto do card
   ja' e' centrado na vertical; o simbolo passa a ser tambem. Tamanho (85%)
   aprovado: nao muda. */
.v2.pagina-dec .hero-card .v2-slide-foto,
.v2.pagina-lad .hero-card .v2-slide-foto,
.v2.pagina-tag .hero-card .v2-slide-foto { align-items: center; }
.v2.pagina-dec .hero-card .v2-slide-foto img,
.v2.pagina-lad .hero-card .v2-slide-foto img,
.v2.pagina-tag .hero-card .v2-slide-foto img { object-position: center center; }

/* --- 11. ACADEMIA: caixas do Primeiro Voo em #FFE3B3 -----------------------
   #FBB931 "ficou muito claro e doendo a vista". #FFE3B3 e' o 4o tom da
   referencia "Sunset" (REF.AMARELOS). Texto --ink sobre ele: 14,1. */
.v2.pagina-academia .acad-caixa { background: #FFE3B3; }

/* --- 12. CONSULTORIA, "O que muda" -----------------------------------------
   (a) "as tags estao terminando muito longe dos textos": o cartao tinha
   1192px e o texto terminava entre 829 e 877px — 432 a 479px vazios. A
   lista passa a ter a largura do CONTEUDO: o paragrafo ja' tem teto de 640px,
   entao os tres cartoes ficam iguais em 800px e a sobra cai para 40-87px.
   Altura da secao inalterada (746px).
   (b) marca d'agua: sai a asa inteira (logo-asas, 480x421), entra a meia
   marca do Contato, cujo corte reto nasceu para encostar na borda.
   Adaptacao, nao copia: mesma ALTURA da anterior (421px; a largura sai da
   proporcao do arquivo, 257px), colada a borda direita, centrada no bloco
   de TEXTOS (centro medido a 450px do topo da secao), nao no meio da secao.
   Opacidade .45 herdada da marca d'agua — o papel continua o mesmo. */
.v2.pagina-consultoria .lista-numeros-grandes { width: fit-content; max-width: 100%; }
.v2.pagina-consultoria .secao-marca-dagua .marca-dagua-borda { width: auto; height: 421px; }
@media (min-width: 1100px) {
  .v2.pagina-consultoria .secao-marca-dagua .marca-dagua-borda { top: 450px; }
}

/* --- 13. CARTAO IMERSO vira componente (Sobre Nos + TAG) ------------------
   O bloco 6 passou de `.v2.pagina-sobre` para `.v2 .cartao-imerso`, e a
   proporcao da janela da foto virou variavel (`--ci-prop`): cada pagina
   declara a do SEU arquivo, e o texto continua pousando a 80% da altura
   dela (`calc(80% / --ci-prop)`, % de padding e' da largura).
   Sobre Nos, teste pedido: foto ~2% maior e texto ~2% menor.
   A largura do cartao e' da grade, entao "foto 2% maior" = janela 2% mais
   alta (1,693 / 1,02 = 1,660) — zoom 1,02 no `cover`, 1% escondido de cada
   lado. Texto: os tres tamanhos x 0,98, medidos antes (22 / 19 / 14px). */
.v2.pagina-sobre .cartao-imerso        { --ci-prop: 1.660; }
.v2.pagina-sobre .cartao-imerso .num   { font-size: 21.6px; }
.v2.pagina-sobre .cartao-imerso .h3    { font-size: 18.6px; }
.v2.pagina-sobre .cartao-imerso .corpo { font-size: 13.7px; }
/* TAG, "As tres condicoes": fotos 570x317 (quase opacas: 0,7-3,9% de alfa) */
.v2.pagina-tag .cartao-imerso { --ci-prop: 1.798; }

/* NOTA DE TRAVA 2026-09-10: blocos 1, 8, 25 e 27 removidos (sobrescritos pelos
   blocos 14 e 28; so' embutiam imagens mortas no link). Historico em
   logica-de-design.md e no backup BACKUP_v2-glass_antes-trava_20260910.css. */
/* ===========================================================
   RODADA 2026-09-10 (3a) — fundo branco padrao, jornada em vidro
   -----------------------------------------------------------
   Aprovado por Renato na 2a: o amarelo #FFE3B3 com drop shadow nas
   caixas do Primeiro Voo (Academia) — replicado aqui na pagina propria.
   =========================================================== */

/* --- 14. FUNDO BRANCO PADRAO DO SITE ("fundo branco final") ---------------
   Renato: "este sera o fundo branco padrao incluindo o rodape." Vale para
   TODA secao clara (paper, paper-esc, fundo-branco, tres-condicoes, Como
   aplicamos) e os 9 rodapes. O BEGE com textura (terceiro fundo, travado
   em 2026-08-28) nao e' "fundo branco" e fica como esta.
   Medido: 4269x2219 (paisagem, 1,924), miolo #F2F4F5 chapado (L 244,
   desvio 0), faixas cinza em cima (L 211) e embaixo (L 215). O desenho
   esta nas BORDAS -> `100% 100%` (regra 99): cada secao ganha as duas faixas.
   Substitui os Fundos branco 1 e 2. `background-color` = o miolo exato. */
.v2 .secao.paper,
.v2 .secao.paper-esc,
.v2 .secao.fundo-branco,
.v2 .secao.tres-condicoes,
.v2.pagina-consultoria .como-aplicamos-secao {
  background-color: #F2F4F5;
  background-image: url('../img/fundo-branco-final.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
/* a grade continua por cima onde ela existe (CTAs de Consultoria, Sobre
   Nos, Academia e Contato) — as duas camadas no MESMO background-image */
.v2 .secao.grade-clara,
.v2 .secao.grade-clara.fundo-branco {
  background-image:
    linear-gradient(to right,  rgba(0, 27, 46, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 27, 46, .055) 1px, transparent 1px),
    url('../img/fundo-branco-final.jpg');
  background-size: var(--v2-grade-passo) var(--v2-grade-passo), var(--v2-grade-passo) var(--v2-grade-passo), 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  background-position: center top, center top, center;
}

/* --- 15. DEC, LAD, TAG: simbolo mais um pouco menor (85% -> 74%) ----------
   "Esta no local correto porem ainda precisa diminuir um pouco." O numero
   nao e' arbitrario: a 74% o simbolo desenha ~419px CSS, que numa tela com
   escala de 150% sao ~629px fisicos — abaixo dos 632px do arquivo. E' o
   tamanho a partir do qual ele deixa de ser ampliado (regra 101). Posicao
   (centro, flutuando) nao muda. */
.v2.pagina-dec .hero-card .v2-slide-foto img,
.v2.pagina-lad .hero-card .v2-slide-foto img,
.v2.pagina-tag .hero-card .v2-slide-foto img {
  width: 74%;
  height: 74%;
}

/* --- 16. LEITO AZUL COM GRADE: drop shadow ------------------------------
   "Adicione o efeito drop shadow neste retangulo maior" (Academia, Cada
   curso separado). E' a regra 105 — bloco azul sobre fundo claro — entao
   vale para todo leito, inclusive o novo da Jornada do DEC. */
.v2 .leito-vidro {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .16),
    5px 7px 9px rgba(0, 27, 46, .34),
    14px 20px 36px rgba(0, 27, 46, .20);
}

/* --- 17. DEC, "A jornada em tres atos": vidro esfumacado com sombra atras --
   "os cards estao um pouco sem vida... liquid glass esfumacado com uma
   sombra atras para criar um contraste. Caso seja interessante, coloque o
   fundo quadriculado." Sem substrato nao ha vidro (regra 95): os cartoes
   entram no leito azul com grade e halo (o mesmo da Academia), e voltam a
   receita APROVADA da Home (`.metodologia-item`: --v2-vidro, blur, anel e
   brilho) — reusada, nao copiada a olho. A sombra projetada, larga e para
   baixo, e' a das referencias (Efeito 1, 2 e 4): separa o cartao do fundo.
   O do meio fica um tom mais claro, como o cartao central do Efeito 2. */
.v2.pagina-dec .jornada-atos .leito-vidro .card {
  background: var(--v2-vidro);
  -webkit-backdrop-filter: blur(var(--v2-blur)) saturate(130%);
          backdrop-filter: blur(var(--v2-blur)) saturate(130%);
  border: 0;
  border-radius: var(--r-card-lg);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    0 22px 44px -14px rgba(0, 0, 0, .60);
}
.v2.pagina-dec .jornada-atos .leito-vidro .card.jornada-vidro-meio {
  background: var(--v2-vidro-forte);
  box-shadow:
    inset 0 0 0 1px rgba(200, 210, 222, .30),
    inset 0 1px 1px var(--v2-brilho),
    0 26px 52px -14px rgba(0, 0, 0, .65);
}

/* --- 18. PRIMEIRO VOO (pagina): caixas iguais as da Academia -------------
   "O amarelo e o efeito drop shadow nos cards da secao programa primeiro
   voo estao aprovados... todos precisam estar iguais." Mesma superficie do
   bloco 5 + 11: #FFE3B3, texto --ink (14,1), raio 16px, sem vidro, sombra
   preta (a secao e' escura, como na Academia). */
.v2.pagina-pv .pv-caixa {
  background: #FFE3B3;
  color: var(--ink);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-left: 0;
  border-radius: var(--r-card);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .45),
    5px 7px 9px rgba(0, 0, 0, .45),
    14px 20px 36px rgba(0, 0, 0, .30);
}

/* NOTA DE TRAVA 2026-09-10: blocos 1, 8, 25 e 27 removidos (sobrescritos pelos
   blocos 14 e 28; so' embutiam imagens mortas no link). Historico em
   logica-de-design.md e no backup BACKUP_v2-glass_antes-trava_20260910.css. */
/* ===========================================================
   RODADA 2026-09-10 (4a)
   =========================================================== */

/* --- 19. Rodape volta ao fundo anterior ------------------------------------
   Renato: "o fundo branco padrao nao ficou legal no rodape, altere somente o
   fundo do rodape de todo o site pelo fundo anterior." Feito tirando o
   rodape da lista do bloco 14 — ele volta ao `var(--paper)` chapado do
   style.css. As secoes claras seguem com o fundo padrao. */

/* --- 20. LAD, "O problema": a secao termina na foto -------------------------
   Medido: foto e texto terminam em 1289px, a secao em 1393 (padding-bottom
   104px). Mesmo pedido do DEC: "subir" a secao ate encostar, sem mexer em
   mais nada. `object-position` rente a base garante que o desenho da foto
   (object-fit: contain) encoste na borda da caixa, e nao so a caixa. */
.v2.pagina-lad .secao-problema { padding-bottom: 0; }
.v2.pagina-lad .secao-problema .lad-problema-foto { object-position: center bottom; }

/* --- 21. LAD, Sistema A7: subtitulos e numeros em azul claro ----------------
   "os sub-titulos estao na mesma cor do texto, precisam ter destaque...
   azul claro. E os numeros tambem." Eram --txt-claro (a cor do paragrafo) e
   #9AA3B0. --teal-claro (#88B3C1) e' o azul claro do site sobre fundo
   escuro: contraste 7,9 sobre #001B2E e visivelmente distinto do texto. */
.v2.pagina-lad .a7-item .num,
.v2.pagina-lad .a7-item .a7-sub { color: var(--teal-claro); }

/* --- 22. ACADEMIA, "Cada curso separado": PLANOS com tarja + vidro ----------
   Referencia de Renato (pricing de 3 cartoes): titulo e preco CENTRALIZADOS e
   em destaque, lista com check do que a pessoa recebe, botao igual em todos.
   A mescla pedida: "o texto do preco fica no formato mais drop shadow
   enquanto o restante e' liquid glass" -> cada cartao ganha uma TARJA solida
   que flutua (drop shadow, regra 105) sobre o CORPO de vidro. Os 5 cartoes
   continuam na mesma organizacao; muda o layout de cada plano.
   Os cartoes deixaram a classe `.card-curso` de proposito: o hover amarelo
   dela no style.css tem `!important` no fundo E no texto, e pintaria o
   cartao inteiro por cima da tarja. O hover agora e' so' daqui. */
.v2.pagina-academia .planos { align-items: stretch; }
.v2.pagina-academia .leito-vidro .card.plano {
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card-lg);
  transition: background-color .2s ease, transform .2s ease;
}
/* o "Os tres cursos" era teal chapado: o CORPO vira vidro como os outros e a
   TARJA passa a carregar o teal — a cor de destaque continua sendo dele */
.v2.pagina-academia .leito-vidro .card.plano-completo {
  background-color: var(--v2-vidro);
  -webkit-backdrop-filter: blur(var(--v2-blur)) saturate(130%);
          backdrop-filter: blur(var(--v2-blur)) saturate(130%);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
}
.v2.pagina-academia .plano-tarja {
  position: relative;
  z-index: 1;
  background: #12324B;             /* um tom acima do leito #001B2E: le como placa */
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  border-radius: var(--r-card-lg) var(--r-card-lg) 18px 18px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .16),
    0 8px 16px -4px rgba(0, 0, 0, .45),
    0 16px 30px -10px rgba(0, 0, 0, .35);
  transition: background-color .25s ease;
}
.v2.pagina-academia .plano-completo .plano-tarja { background: var(--teal); }
.v2.pagina-academia .plano-tarja p,
.v2.pagina-academia .plano-tarja .h3 { margin: 0; transition: color .25s ease; }
.v2.pagina-academia .plano-titulo  { font-size: 20px; color: var(--branco); }
.v2.pagina-academia .plano-sub     { font-size: 13px; color: var(--txt-claro); }
.v2.pagina-academia .plano-selo    { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); }
.v2.pagina-academia .plano-de      { font-size: 14px; text-decoration: line-through; color: var(--txt-claro); }
/* "os precos tambem ganham destaque": 26 -> 30px (mesma familia e peso) */
.v2.pagina-academia .plano-preco   { font-family: var(--font-titulo); font-weight: 800; font-size: 30px; line-height: 1.15; color: var(--branco); margin-top: 8px !important; }
.v2.pagina-academia .plano-parcela { font-size: 13px; color: var(--txt-claro); }
.v2.pagina-academia .plano-completo .plano-parcela { color: var(--branco); }
/* lista do que a pessoa recebe, com check — o "checkpoint" da referencia */
.v2.pagina-academia .plano-lista {
  list-style: none;
  margin: 0;
  padding: 20px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2.pagina-academia .plano-lista li {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--txt-claro);
}
.v2.pagina-academia .plano-lista li::before {
  content: '\2713';
  position: absolute;
  left: 0; top: -1px;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(136, 179, 193, .16);
  box-shadow: inset 0 0 0 1px rgba(136, 179, 193, .38);
  color: var(--teal-claro);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* botao no MESMO formato do "Saiba mais" (btn-primario, 13px), empurrado para
   a base para os quatro alinharem na mesma linha */
.v2.pagina-academia .plano-btn { font-size: 13px; margin: auto auto 22px; }
/* hover: segue o MODELO TRAVADO (amarelo + --ink), agora so' na tarja */
.v2.pagina-academia .leito-vidro .card.plano:hover { background-color: var(--v2-vidro-forte); transform: translateY(-2px); }
.v2.pagina-academia .leito-vidro .card.plano:hover .plano-tarja { background: var(--amarelo); }
.v2.pagina-academia .leito-vidro .card.plano:hover .plano-tarja p,
.v2.pagina-academia .leito-vidro .card.plano:hover .plano-tarja .h3 { color: var(--ink); }

/* --- oferta do ensino medio: tarja amarela em drop shadow + corpo em vidro --
   "da para fazer uma tarja drop shadow contendo o titulo e o valor e as
   vantagens e descricao abaixo com o liquid-glass". E o hover: "o mesmo azul
   claro do card azul de os tres cursos" -> a tarja vai para --teal, e o texto
   dela vira branco pelas regras de hover que ja existiam (par fechado). */
.v2.pagina-academia .leito-vidro .card-oferta-estudante.plano-oferta,
.v2.pagina-academia .leito-vidro .card-oferta-estudante.plano-oferta:hover {
  background-color: var(--v2-vidro);
  -webkit-backdrop-filter: blur(var(--v2-blur)) saturate(130%);
          backdrop-filter: blur(var(--v2-blur)) saturate(130%);
  box-shadow:
    inset 0 0 0 1px var(--v2-borda),
    inset 0 1px 1px var(--v2-brilho),
    var(--v2-halo-externo);
  padding: 0;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}
.v2.pagina-academia .plano-oferta .oferta-tarja { background: var(--amarelo); }
.v2.pagina-academia .plano-oferta:hover .oferta-tarja { background: var(--teal); }
.v2.pagina-academia .plano-oferta .oferta-por { font-size: 30px; }
.v2.pagina-academia .plano-oferta .oferta-corpo {
  padding: 20px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.v2.pagina-academia .plano-oferta .oferta-corpo .plano-lista { padding: 0; }
.v2.pagina-academia .plano-oferta .oferta-corpo .corpo { color: var(--txt-claro); }

/* correcao medida na mesma rodada: `.v2 .card` alinha os filhos a esquerda
   (align-items: flex-start), entao cada tarja encolhia ate o tamanho do preco
   — larguras 206, 225, 204 e 228px em cartoes de 265. A tarja ocupa a largura
   inteira do cartao; e as quatro ficam com a mesma altura (a do "Os tres
   cursos", 176px, que tem o preco riscado) para as listas comecarem na mesma
   linha. */
.v2.pagina-academia .leito-vidro .card.plano { align-items: stretch; }
.v2.pagina-academia .planos .plano-tarja { min-height: 176px; justify-content: center; }

/* --- 23. HOME, "Como trabalhamos": os 4 itens viram cards azuis em drop shadow --
   Renato: "esses 4 blocos se transformam em 4 cards drop shadow azul, com
   destaques nos numeros e titulos, e o texto de outra cor como nos cards azuis
   drop shadow ja utilizados." Mesma receita dos blocos 2 e 9 (regra 105) e o
   mesmo par de cores do Sistema A7, aprovado nesta data: numero --teal-claro,
   titulo branco, texto --txt-claro.
   O eyebrow volta ao teal dos outros eyebrows (tirado `.eyebrow-escuro` do HTML):
   "o titulo como trabalhamos nao tem destaque como nas outras paginas". */
.v2 .como-trabalhamos-grade .item-simples {
  background: var(--ink-fundo);
  border-radius: var(--r-card);
  padding: 22px 22px 24px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .16),
    5px 7px 9px rgba(0, 27, 46, .34),
    14px 20px 36px rgba(0, 27, 46, .20);
}
.v2 .como-trabalhamos-grade .item-simples .num   { color: var(--teal-claro); }
.v2 .como-trabalhamos-grade .item-simples .h3    { color: var(--branco); }
.v2 .como-trabalhamos-grade .item-simples .corpo { color: var(--txt-claro); }

/* "nao precisa modificar a foto de lugar, porem centralize os cards no espaco
   entre a foto e a barra de navegacao". Medido em 1440px: foto termina em 593,
   cards de 621 a 1308, borda da secao em 1425 -> folgas de 28 e 117px.
   Centrado, sobram ~72px de cada lado: deslocamento de 44px. Em formula (vale
   de 1288px para cima, onde o container ja esta no teto de 1240):
     (100vw - 15px de barra - 1240 - 2x24 de padding... ) -> (100vw - 1255px)/4 - 2px
   Abaixo disso o container encosta nas bordas e o deslocamento cai a zero.
   `transform` nao mexe no fluxo: a foto e a grade continuam onde estao.
   A foto fica travada no tamanho que tinha (476x610, mesmo corte do `cover`):
   os cards ganharam padding e ficaram mais altos que ela; sem a trava ela
   esticaria junto e mudaria o enquadramento — ele pediu para nao mexer. */
@media (min-width: 861px) {
  .v2 .como-trabalhamos-grade > .grid {
    transform: translateX(max(0px, calc((100vw - 1255px) / 4 - 2px)));
  }
  .v2 .como-trabalhamos-grade .como-trabalhamos-foto {
    height: 610px;
    align-self: center;
  }
}

/* --- 24. MENU: dois botoes no canto — Agendar Consultoria + Acessar Academia --
   Renato: "acrescentar um botao ao lado de agendar consultoria... diminua um
   pouco o botao atual trabalhando as proporcoes para que neste canto encaixe
   dois botoes. Pode chegar os atalhos mais para a esquerda." O novo e' atalho
   para a area de membros da Academia na Hotmart (abre em nova aba).
   Medido em 1440px: botao atual 210x48 (15px, padding 15/30); 368px livres a
   esquerda do menu. Os dois passam a 13,5px e padding 11/20 (~40px de altura),
   10px entre eles; o menu anda ~135px para a esquerda e cabe com folga.
   Contraste: o cabecalho e' vidro escuro fixo (rgba(0,27,46,.72)). O novo botao
   e' o PAR inverso do teal — fundo branco, texto --ink (17:1) —, destaque do
   mesmo peso sem competir com o "Agendar". Hover dos dois: --amarelo + --ink,
   como manda o MODELO TRAVADO. Par fechado de fundo+texto (regra 44). */
.v2 .nav-principal .menu-botoes { display: flex; align-items: center; gap: 10px; }
.v2 .nav-principal .btn.btn-menu {
  font-size: 13.5px;
  padding: 11px 20px;
  white-space: nowrap;
}
.v2 .nav-principal .btn.btn-academia {
  background: var(--branco);
  color: var(--ink);
  border: 0;
}
.v2 .nav-principal .btn.btn-academia:hover {
  background: var(--amarelo);
  color: var(--ink);
}
@media (max-width: 860px) {
  .v2 .nav-principal .menu-botoes { flex-direction: column; align-items: stretch; }
}

/* --- 26. LOGO ACIMA DO QUADRICULADO / DA TEXTURA (Academia e Primeiro Voo) ---
   Renato: "a ordem precisa ser fundo azul, fundo quadriculado, logo e foto...
   tudo fica no seu lugar, so muda a ordem." Medido: a asa nao esta na foto — e'
   o `::before` do wrap da foto (logo-asas.png, `opacity: .3`, z 0, foto em z 1).
   A 30% ela deixa passar 70% do que esta atras: o quadriculado (Academia) e a
   textura (Primeiro Voo) atravessam a asa, e ela le como se estivesse embaixo.
   Correcao sem mexer em lugar nem em tom: `logo-asas-sobre-azul.png` e' a mesma
   logo ja composta a 30% sobre #001B2E — mesma cor que ela tem hoje —, mas
   OPACA no miolo (a alfa original virou so' a cobertura da borda). Sobre o azul
   ela fica identica; o quadriculado e a textura deixam de passar por ela.
   Declarado: sob o halo radial da Academia o azul e' levemente mais claro, e
   ali a asa fica 1-2 tons mais escura que antes. Posicao/tamanho intocados. */
.v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap::before,
.v2.pagina-pv .pv-foto-wrap::before {
  background-image: url('../img/logo-asas-sobre-azul.png');
  opacity: 1;
}

/* --- 28. TEXTURA FINA SEM "LINHA": tile emendavel no lugar do espelho --------
   Renato: no Primeiro Voo "a textura ganhou uma linha na direcao dos pes da
   foto". Causa: o arquivo estendido por ESPELHO (blocos 25 e 27) nao tem emenda
   de cor, mas tem EIXO de simetria — e o eixo le como linha (no PV caiu a
   1080px, na altura dos pes; na Home ficava escondido atras dos cards).
   Substituido por um tile EMENDAVEL: o original misturado com ele mesmo
   deslocado de meia altura, pesos em rampa e mistura que preserva a variancia
   (o grao nao perde contraste em faixa nenhuma). Repetido na vertical, sem eixo
   e sem costura. Grao no mesmo tamanho aprovado: bege a 100% da largura
   (1425/1400 = zoom 1,018, igual a Consultoria/O que muda); azul em 1920px
   (zoom 1,000). Vale para toda secao com `.textura-fina` (Home + as 11 pedidas
   em 2026-09-10: DEC 2, LAD 2, TAG 3, Academia 3, Sobre Nos 1). */
.v2 .secao.bege.textura-fina {
  background-image: url('../img/textura-tile.jpg');
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
}
.v2.pagina-pv .secao.pv-regulamento {
  background-image: url('../img/fundo-azul-textura-tile.jpg');
  background-size: 1920px auto;
  background-repeat: repeat-y;
  background-position: center top;
}

/* =======================================================================
   BLOCO 2026-09-23 — pedidos de Renato (assinatura no topo + Duas portas DEC)
   ======================================================================= */

/* 1) Assinatura "Visão e Gestão Aplicada" abaixo do nome, no cabecalho.
      Espelha o par que ja existe no rodape (.footer-identidade h3 + .sub:
      17px/800 com 11px/300/1.3px uppercase, razao 0,647). No topo o nome e
      19px; a assinatura sai em 10px para a coluna de texto (20+3+11 = 34px)
      nao crescer muito alem do icone de 30px. Fonte do CORPO (Inter 400) e
      nao a do titulo: Manrope so tem 700;800 carregados, e um weight 300 ali
      seria sintetizado pelo navegador. */
.v2 .site-header .brand .brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.v2 .site-header .brand .brand-sub {
  font-family: var(--font-corpo);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 3px;
  opacity: .82;
}

/* 2) "Duas portas" do DEC — CORRIGIDO 2026-09-23 (2a rodada, apontamento de Renato:
      "faltou a curva" e "a foto ficou muito grande").
      Na 1a rodada eu medi o CSS (border-radius 0px no LAD e no TAG) e conclui que
      nao havia curvatura. Errado: no TAG a curva esta DESENHADA NO PNG, no canal
      alfa. Medida linha a linha em tag-duas-portas-sangria.png (743x900): recuo da
      borda 13,10,8,6,5,4,3,3,2,2,1,1,1,0 -> raio de 13px no arquivo nos quatro
      cantos (12px na base), que a 435px de render vira 7,6px.
      Raio adotado: 15px, o token travado da casa (MODELO TRAVADO: "raio 15px em
      toda foto e cartao"), e so nos cantos ESQUERDOS — regra 76: o raio fica so no
      lado que nao encosta, e esta foto sangra pela direita.
      TAMANHO: a regua e a foto do TAG, que renderiza 435x527. A foto do DEC e mais
      vertical (0,5622 contra 0,8256), entao igualar a LARGURA deixava 774px de
      altura — 47% mais alta que a do TAG, o "muito grande". Igualada a ALTURA:
      527 x 0,5622 = 296px de largura, e a secao volta ao min-height padrao de
      620px com a folga de 47px em cima e embaixo, identica a do TAG.
      34,5%% x (296/435) = 23,5%% mantem o mesmo encolhimento responsivo. */
.v2 .duas-portas-dec .duas-portas-foto-wrap {
  width: min(28.8%, calc(100% - 644px));
  max-width: 363px;
  border-radius: 15px 0 0 15px;
  overflow: hidden;
}

/* 3) 2026-09-23 (3a rodada) — Renato: "as fotos do DEC e do TAG precisam estar do
      mesmo tamanho da foto do LAD". O numero desambigua o pedido: o TAG JA tinha a
      mesma largura do LAD (435px), entao o que diferia era a ALTURA (527 contra
      645). Regua = a foto do LAD renderizada: 435x645 numa secao de 745px, folga
      50/50.
      Em foto retrato o que se compara e a altura, e a largura DERIVA dela (principio
      travado em 2026-09-04):
        TAG  645 x (743/900 = 0,825556) = 533px  ->  34,5%% x 533/435 = 42,3%%
        DEC  645 x (1026/1825 = 0,562192) = 363px -> 34,5%% x 363/435 = 28,8%%
      Mantida a mecanica das outras (width em %% + max-width em px, nunca altura
      fixa): assim as tres encolhem no mesmo ritmo abaixo de 1240px e o empilhamento
      da media query de 1024px continua valendo. Altura fixa quebraria os dois. */
.v2 .duas-portas-tag,
.v2 .duas-portas-dec { min-height: 745px; }
.v2 .duas-portas-tag .duas-portas-foto-wrap {
  width: min(42.3%, calc(100% - 644px));
  max-width: 533px;
}

/* Trava de seguranca do `min()` acima, medida e nao estimada: com a foto do TAG
   em 42,3%%, num viewport de 1025px ela comecava em 583px e o texto mais longo da
   secao terminava em 596px — 13px de invasao, o bug "texto atras da foto" que a
   propria .duas-portas-texto documenta no style.css. A caixa de texto tem 620px
   mais 24px de folga minima = 644px; `calc(100%% - 644px)` impede a foto de
   passar dessa linha em qualquer largura, sem media query e sem mexer no LAD.
   Conferido: 1440px -> 533px (max-width manda) · 1240px -> 524,5px · 1025px ->
   381px, folga de 48px ate o texto real. */

/* ===========================================================
   2026-09-24 — FOTOS NOVAS DE ESTUDANTES (faixa etaria corrigida)
   -----------------------------------------------------------
   Renato refez as tres fotos porque o estudante da anterior nao
   parecia ter 17 anos. As fotos novas sao de enquadramento mais
   ABERTO (os tres espalhados) — medido: proporcao do conteudo
   0,814 contra 0,688 (Academia) e 0,564 (regulamento).
   Numa caixa de largura fixa, foto mais aberta = pessoa menor.
   As duas caixas crescem o exato necessario para a PESSOA voltar
   ao tamanho de hoje, sem encostar no texto (regra 128).
   =========================================================== */

/* 34. Regulamento (primeiro-voo): a coluna da foto sai de 363 para 523px.
   Hoje a foto desenha 363x643 (contain pela largura) e a pessoa tem 643px de
   altura. Com prop 0,814 a mesma altura exige 643 x 0,814 = 523px de largura.
   1152px uteis (1240 - 48 de padding - 40 de gap): 523 / 629 = 0,831fr. */
.v2.pagina-pv .pv-grade { grid-template-columns: 1fr 0.8fr; }
/* 2026-09-24 (3a) — Renato: "diminuiria 2% apenas ou quase isso".
   0,831fr dava 523px; 0,8fr da 512px (-2,1%), e a pessoa vai de 643 para 629. */

/* 35. Academia, teaser do Primeiro Voo: 480 -> 545px, o maximo que mantem
   24px de folga ate o texto (que termina em 736px num viewport de 1440;
   a caixa encosta em 1305). A trava por calculo impede a invasao em telas
   estreitas: a foto nunca passa de (100% - 700px), com 620px de texto +
   folga. Com 545px a pessoa fica com 669px de altura (hoje: 698). */
.v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap {
  /* a regra irma em style.css trava `max-width: 480px` — mexer so na largura
     nao produz efeito nenhum (erro registrado em 2026-09-01, item 3).
     2026-09-24 (3a) — Renato: "esta grande demais, pelo menos 15% menor,
     vamos testar assim". 545 x 0,85 = 463px; a pessoa cai de 670 para 569px.
     A asa (::before, 128% do wrap) acompanha a foto, como sempre acompanhou. */
  width: min(32.5%, 463px, calc(100% - 700px));
  max-width: 463px;
}


/* 36. A ASA EM ALTA RESOLUCAO (2026-09-24, 3a rodada) --------------------------
   Renato: a asa esta "borrada" na Academia e "um pouco destorcida" no
   regulamento. Nao e distorcao: e AMPLIACAO. `logo-asas-sobre-azul.png` tem
   373x327 e era esticada para 593px (Academia, 128% do wrap) e 471px
   (regulamento, 92%) — 159% e 126% de ampliacao.
   `sobre-nos-simbolo.png` (1268x1268) e a MESMA arte em 3,1x a resolucao:
   medido, cor media rgb(162,195,206) contra rgb(163,196,206), proporcao 1,151
   contra 1,144. Recomposta do mesmo jeito que a original (30% da asa sobre
   #001B2E, alfa preservado como cobertura de borda) em
   `logo-asas-sobre-azul-hd.png`, 1133x984. Posicao e tom nao mudam. */
.v2.pagina-academia .academia-primeiro-voo .academia-foto-wrap::before,
.v2.pagina-pv .pv-foto-wrap::before {
  background-image: url('../img/logo-asas-sobre-azul-hd.png');
}

/* 37. Asa do regulamento um pouco mais baixa (2026-09-24) ---------------------
   Renato: "colocaria a logo mais para baixo. pouca coisa tambem."
   O ::before esta centrado em `top: 50%` com `translate(-50%,-50%)`; 56% desce
   6% da altura do wrap (~66px em 1094px de caixa). */
.v2.pagina-pv .pv-foto-wrap::before { top: 56%; }

/* 38. CELULAR ABRE COMO DESKTOP + ANCORA DA METODOLOGIA (2026-10-19, noite) ---
   Renato: "quero inicialmente deixar somente a versao desktop". A meta
   viewport das 10 paginas passou de device-width para width=1440 (a largura
   de todas as medicoes do projeto): o celular desenha o layout de desktop e
   reduz para caber, e nenhuma media query de celular dispara.
   text-size-adjust: com viewport fixa, o Chrome do Android "infla" o texto de
   blocos largos e quebra a diagramacao; 100% desliga esse ajuste.
   scroll-margin-top: "Ver os tres sistemas" (Consultoria) agora leva a
   index.html#metodologia; o cabecalho e' sticky de 75px e cobriria o topo da
   secao. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#metodologia { scroll-margin-top: 75px; }

/* 39. MENU: A PAGINA ATUAL EM AMARELO, IGUAL AO HOVER (2026-10-19, noite) -----
   Renato: "quando eu estiver na pagina o botao no menu principal precisa ficar
   amarelo (o mesmo que fica quando eu passo o mouse)". A regra do style.css
   mira `.ativo > a.link` (classe no <li>); as 9 paginas poem a classe no
   proprio <a> (`class="link ativo"`), entao ela nunca casou. Mesma cor do
   hover: var(--amarelo). Em DEC, LAD e TAG o ativo e' "Metodologia". */
nav.nav-principal a.link.ativo { color: var(--amarelo); }

/* --- 40. ACADEMIA, TAG DE ESTUDANTES: MESMA CURVA DOS PLANOS (2026-10-20) -------
   Renato: "a caixa amarela esta com o mesmo problema da versao mobile, a curva esta
   diferente da borda branca". Medido em 1440px: os planos (.card.plano) tem raio
   var(--r-card-lg) = 28px e a tarja amarela de dentro 28/28/18/18; o cartao de
   estudantes ficou no raio de .card (16px) - a curva da tarja nao acompanhava a do
   cartao. Mesmo token dos planos, sem valor novo (regra 223). */
.v2.pagina-academia .leito-vidro .card.card-oferta-estudante { border-radius: var(--r-card-lg); }

/* --- 41. CONSULTORIA, HERO: CANTOS ESQUERDOS DA FOTO (2026-10-21) --------------
   Renato: "a foto da consultoria possui um quadrado atras aparecendo, no lado
   esquerdo da foto, nas pontas". Medido no arquivo (nao no CSS, que tinha raio 0):
   consultoria-estrategia.jpg (1262x1280) foi recortado do mockup com os dois
   cantos ESQUERDOS ja arredondados e pintados de #001B2E (0,27,46), raio ajustado
   de 54px no arquivo; os direitos sao foto. JPG nao tem alfa, entao a tinta lia
   como um quadradinho escuro sobre o vidro do cartao.
   Raio em percentual NA IMAGEM: no desktop e no celular ela aparece sem corte, na
   proporcao do arquivo, entao o % acompanha a curva pintada em qualquer tamanho.
   58px (54 + 4 de franja do JPEG): 58/1262 = 4,6% e 58/1280 = 4,53%. */
.v2.pagina-consultoria .hero-card .v2-slide-foto.foto-cheia img {
  border-top-left-radius: 4.6% 4.53%;
  border-bottom-left-radius: 4.6% 4.53%;
}

/* --- 42. RODAPE: LINHA LEGAL + PAGINA DA POLITICA (2026-10-27) ---------------
   A Politica de Privacidade entra no rodape das 10 paginas, logo abaixo da
   linha de contato, na MESMA familia dela (13px / --txt-sec, como
   `.footer-contato` do style.css) com 10px de respiro. O link herda a cor do
   texto e vai para --amarelo no hover, que e o hover de rodape travado desde
   2026-09-04 - nenhuma cor nova entra por causa de um link legal.

   A pagina em si e texto corrido e NAO precisa de tipografia propria: `.h3`
   (19px/700) e `.corpo` (16px/1.65) ja tem max-width 720px no style.css, que
   e a coluna em que a linha fica entre 60 e 75 caracteres. Aqui so entram o
   centramento da coluna e o respiro entre os blocos. */
.footer-legal { font-size: 13px; color: var(--txt-sec); margin-top: 10px; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--amarelo); }

.pagina-privacidade .doc { max-width: 720px; margin: 0 auto; }
.pagina-privacidade .doc .h3 { margin: 38px 0 12px; }
.pagina-privacidade .doc .h3.primeiro { margin-top: 0; }
.pagina-privacidade .doc .corpo { margin: 0 0 14px; }
.pagina-privacidade .doc ul { margin: 0 0 16px; padding-left: 22px; }
.pagina-privacidade .doc li { margin: 0 0 9px; }
/* CONTRASTE (medido no ar em 2026-10-27, formula WCAG):
   `.h1`, `.eyebrow` e `.destaque` do v2 nasceram para o card de vidro ESCURO
   do hero; aqui eles caem sobre fundo CLARO. O h1 saiu BRANCO sobre #F2F4F5
   (contraste 1,10 - titulo invisivel), o destaque dourado deu 1,93 e o eyebrow
   teal, 3,80. E o mesmo defeito da citacao invisivel ja visto em Consultoria,
   Sobre Nos e TAG. A doutrina ja respondia: em fundo claro TODO texto e --ink,
   com hierarquia por PESO (2026-09-04), e destaque de fundo claro e TEAL, nunca
   dourado (2026-09-01). Nenhuma cor nova entra: so tokens travados. */
.pagina-privacidade .secao.paper .h1 { color: var(--ink); }
.pagina-privacidade .secao.paper .h1 .destaque { color: var(--teal); }
.pagina-privacidade .doc .eyebrow { color: var(--ink); }
/* Link dentro de texto corrido e texto PEQUENO: o teal da 3,80 e reprova AA
   (precisa de 4,5). Vai em --ink com sublinhado - 15,91, e sem duvida de que
   e link. O teal fica so no hover, onde o estado ja diz o que e. */
.pagina-privacidade .doc a { color: var(--ink); text-decoration: underline; }
.pagina-privacidade .doc a:hover { color: var(--teal); }
.pagina-privacidade .doc .nota {
  font-size: 14px; margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--borda-clara);
}
@media (max-width: 767px) {
  .pagina-privacidade .doc .h3 { margin: 28px 0 10px; }
}

/* --- 43. RODAPE: E-MAIL E WHATSAPP CLICAVEIS (2026-10-27) --------------------
   Renato: os dois sao contato, logo os dois sao acao. O e-mail abre o cliente de
   e-mail da pessoa (mailto:) e o telefone abre a conversa (wa.me/5519991378898,
   o MESMO numero e o MESMO destino do botao que ja existe na pagina de Contato).
   Mesma receita visual da linha legal do bloco 42: o link herda a cor do texto do
   rodape e vai para --amarelo no hover, o hover de rodape travado desde
   2026-09-04. Nenhuma cor nova entra. */
.footer-contato a { color: inherit; text-decoration: none; }
.footer-contato a:hover { color: var(--amarelo); }


/* --- 44. DEC: SECAO DIAGNOSTICO (2026-10-27) ---------------------------------
   Secao nova do DEC, no molde da secao Diagnostico do LAD (paper-esc + cartoes
   azuis com bolinha). O drop shadow do bloco 9 e escopado por PAGINA e SECAO
   (regra 22), entao o DEC precisa da mesma receita no seu proprio escopo.
   Valores copiados do bloco 9, sem nada novo. */
.v2.pagina-dec .dec-diagnostico .diagnostico-item {
  background: var(--ink-fundo);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .16),
    5px 7px 9px rgba(0, 27, 46, .34),
    14px 20px 36px rgba(0, 27, 46, .20);
}