/* =============================================================================
   Vade Mecuns Impressos — Caveiras Negras Concursos
   Paleta puxada do banner do topo: fundo claro, tipografia quase preta,
   vermelho da marca só onde precisa chamar (preço, CTA, acento).
   ============================================================================= */

:root {
  --tinta:        #101215;
  --tinta-2:      #3d444d;
  --tinta-3:      #6b7480;
  --linha:        #e3e6ea;
  --fundo:        #ffffff;
  --fundo-2:      #f5f7f9;
  --fundo-3:      #eef1f4;

  --marca:        #c8102e;
  --marca-escura: #9c0c23;
  --marca-clara:  #fdf2f4;
  --navy:         #14213c;   /* azul-marinho dos títulos e da faixa "Invista" */

  --ok:           #0f7b3f;
  --ok-clara:     #eaf6ee;
  --aviso:        #a4610a;
  --aviso-clara:  #fdf4e7;

  --raio:         14px;
  --raio-s:       8px;
  --sombra:       0 1px 2px rgba(16, 18, 21, .04), 0 8px 24px rgba(16, 18, 21, .06);
  --sombra-alta:  0 2px 6px rgba(16, 18, 21, .06), 0 18px 44px rgba(16, 18, 21, .13);

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --largura: 1200px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* As faixas que sangram a página inteira (a esteira de aprovados usa
     width:100vw) medem o viewport COM a barra de rolagem — em desktop com
     barra clássica isso passa ~15px da borda e nasce uma rolagem horizontal
     fantasma. `clip` corta esse excesso sem criar um contêiner de rolagem,
     então o position:sticky dos filtros continua funcionando (com `hidden`
     ele quebraria). */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.limite {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- foco visível: navegação por teclado precisa enxergar onde está -------- */
:where(a, button, input, select):focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================== topo =====================================
   Réplica do header da HOME do WordPress. Valores extraídos do CSS que o
   Elementor gera para a página inicial (post-145.css) — não são aproximações:
     fundo   linear-gradient(330deg, #080808 53%, #363637 100%)  [preto, não navy]
     logo    logo-retangular-branco-sem-fundo.png a ~142px de largura
     menu    Roboto 15px/600 branco, item 11px/8px, hover/ativo #00B8FD
     botão   #00B8FD, 18px/700, raio 4px, padding 20px 35px, glow 10px
     seção   padding-bottom 30px; colunas com margin-top ~20px
   ========================================================================== */
.cn-topo {
  background: linear-gradient(330deg, #080808 53%, #363637 100%);
  padding-bottom: 30px;
  position: relative;
  z-index: 60;
}
.cn-topo__interno {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.cn-logo { flex: 0 0 auto; }
.cn-logo img { width: 142px; height: auto; }

.cn-nav { margin-left: auto; }
.cn-nav__lista {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-nav__lista > li { position: relative; }

/* O item do menu: mesma tipografia e mesmo respiro do original. */
.cn-nav__lista a,
.cn-sub__gatilho {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Roboto", var(--texto);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  padding: 11px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* O Elementor usa "pointer: background" com fade — o fundo azul aparece
   suavemente por trás do texto no hover. Reproduzido com ::before para não
   deslocar nada no layout. */
.cn-nav__lista > li > a::before,
.cn-sub__gatilho::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00B8FD;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}
.cn-nav__lista > li > a:hover::before,
.cn-sub__gatilho:hover::before,
.cn-tem-sub:hover .cn-sub__gatilho::before,
.cn-ativo .cn-sub__gatilho::before { opacity: 1; }

.cn-nav__lista a:focus-visible,
.cn-sub__gatilho:focus-visible { outline: 3px solid #00B8FD; outline-offset: 2px; }

/* --- submenu ------------------------------------------------------------- */
.cn-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #00B8FD;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 12px 32px rgba(3, 4, 19, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.cn-tem-sub:hover .cn-sub,
.cn-tem-sub:focus-within .cn-sub,
.cn-sub--aberto .cn-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cn-sub a {
  color: #030413;
  font-weight: 600;
  padding: 12px 20px;
  width: 100%;
}
.cn-sub a::before { display: none; }
.cn-sub a:hover { background: rgba(255, 255, 255, .28); }
.cn-sub a[aria-current="page"] { background: rgba(255, 255, 255, .4); }

.cn-sub__gatilho svg { transition: transform .2s ease; }
.cn-tem-sub:hover .cn-sub__gatilho svg,
.cn-sub--aberto .cn-sub__gatilho svg { transform: rotate(180deg); }

/* --- botão Área do aluno ------------------------------------------------- */
.cn-aluno {
  flex: 0 0 auto;
  background: #00B8FD;
  color: #fff;
  font-family: "Roboto", var(--texto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 20px 35px;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 #00B8FD;
  transition: background-color .3s, color .3s, background-image .3s;
}
.cn-aluno:hover,
.cn-aluno:focus {
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EAEAEA 100%);
  color: #00B8FD;
}

/* --- hambúrguer (só aparece no celular) ---------------------------------- */
.cn-burger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.cn-burger span {
  display: block;
  height: 2px;
  width: 26px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.cn-topo--aberto .cn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cn-topo--aberto .cn-burger span:nth-child(2) { opacity: 0; }
.cn-topo--aberto .cn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .cn-topo__interno { flex-wrap: wrap; padding: 18px 20px 0; gap: 14px; }
  .cn-logo img { width: 118px; }
  .cn-burger { display: flex; }
  .cn-aluno { font-size: 15px; padding: 14px 22px; order: 3; }

  .cn-nav {
    order: 4;
    flex-basis: 100%;
    margin: 0;
    display: none;
  }
  .cn-topo--aberto .cn-nav { display: block; }
  .cn-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .cn-nav__lista > li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .cn-nav__lista a, .cn-sub__gatilho { padding: 15px 4px; width: 100%; }
  .cn-sub__gatilho { justify-content: space-between; }

  /* No celular o submenu empurra o conteúdo em vez de flutuar por cima. */
  .cn-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 4px;
    margin: 0 0 12px;
    display: none;
  }
  .cn-sub--aberto .cn-sub { display: block; }
  .cn-tem-sub:hover .cn-sub { display: none; }
  .cn-sub--aberto:hover .cn-sub { display: block; }
}

/* ============================== carrossel ================================
   Dois banners de largura total que passam sozinhos. A janela tem altura
   travada pela proporção da arte (2.5:1), então a página não "pula" quando
   o slide troca nem enquanto a segunda imagem carrega. */
.carrossel {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
}
.carrossel__janela { overflow: hidden; position: relative; }

/* FUMAÇA NAS BORDAS DA ARTE. O banner é uma foto retangular sobre a página
   escura, e as quatro arestas duras entregavam "imagem colada" (reclamação do
   dono, 26/08/2026). O véu fica NO CSS, e não dentro da arte, de propósito:
   qualquer banner trocado no futuro já nasce integrado, sem depender de quem
   editou a imagem lembrar do acabamento.

   São três camadas na cor do fundo do carrossel (#0a0a0a):
     - fades curtos nas quatro arestas (curtos MESMO: os selos de frete da
       própria arte moram a ~8% da borda de baixo — um fade ganancioso os
       apagaria);
     - uma vinheta radial deslocada para os cantos, que é o que lê como
       "fumaça" em vez de moldura;
   pointer-events:none deixa o clique atravessar para o slide. */
.carrossel__janela::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* A primeira dose (alphas ~.45 em 7-9% de alcance) sumia no aparelho: sobre
     uma arte que já é escura nas beiradas, véu tímido é véu invisível — o dono
     testou e não viu nada. Esta é deliberadamente mais forte: preto cheio
     nascendo nas arestas e uma vinheta funda nos cantos. O limite continua
     sendo os selos da própria arte (~8% da borda de baixo): o fade inferior
     para de crescer antes deles. */
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .85) 0%, transparent 16%),
    linear-gradient(0deg, rgba(5, 5, 5, .8) 0%, transparent 11%),
    linear-gradient(90deg, rgba(5, 5, 5, .75) 0%, transparent 13%),
    linear-gradient(270deg, rgba(5, 5, 5, .75) 0%, transparent 13%),
    radial-gradient(125% 100% at 50% 45%, transparent 48%, rgba(5, 5, 5, .68) 100%);
}
.carrossel__trilho {
  display: flex;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.carrossel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: block;
}
.carrossel__slide img { width: 100%; height: auto; display: block; }

/* --- setas: discretas, aparecem mais no hover ---------------------------- */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: #101215;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
}
.carrossel:hover .carrossel__seta,
.carrossel__seta:focus-visible { opacity: 1; }
.carrossel__seta:hover { background: #fff; }
.carrossel__seta--ant  { left: 18px; }
.carrossel__seta--prox { right: 18px; }

/* --- pontos -------------------------------------------------------------- */
.carrossel__pontos {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.carrossel__pontos button {
  width: 30px; height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .42);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.carrossel__pontos button[aria-selected="true"] {
  background: #fff;
  width: 46px;
}

@media (max-width: 720px) {
  .carrossel__seta { display: none; }
  .carrossel__pontos { bottom: 9px; }
  .carrossel__pontos button { width: 22px; height: 4px; }
  .carrossel__pontos button[aria-selected="true"] { width: 34px; }
}

/* Sem animação para quem pediu menos movimento: o rodízio para e a troca
   é instantânea (o JS também não agenda o avanço automático). */
@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho { transition: none; }
}

/* ========================= faixa de confiança =============================
   Cartão branco logo abaixo do banner, no estilo do layout de referência. */
.confianca {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 28px 0 6px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.confianca li { display: flex; align-items: flex-start; gap: 12px; }
.confianca svg { width: 27px; height: 27px; flex: none; color: var(--marca); margin-top: 2px; }
.confianca b { display: block; font-size: 14.5px; color: var(--tinta); }
.confianca span { font-size: 13px; color: var(--tinta-3); line-height: 1.45; }

/* ========================= títulos de seção ===============================
   "KITS DA APROVAÇÃO", "VADE MECUNS"... — os divisores da página. */
.secao { padding: 54px 0 62px; }
/* Antes esta seção pintava a largura inteira da tela e cortava as faixas
   laterais no meio, com uma linha horizontal seca. Agora o fundo fica contido
   na coluna de conteúdo, como um cartão: a faixa corre sem interrupção pelas
   margens e a alternância de cor continua existindo. */
.secao--alternada > .limite {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 22px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.secao--alternada { padding-top: 20px; padding-bottom: 20px; }
.secao__cabeca { text-align: center; margin-bottom: 36px; }
.secao__olho {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 6px;
}
.secao__titulo {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.secao__risco {
  display: block;
  width: 64px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--marca);
}

/* ============================== filtros ==================================
   Um cartão branco flutuante em vez de uma faixa cinza: separa a busca do
   conteúdo sem criar mais uma linha divisória na página, e continua legível
   quando gruda no topo durante a rolagem. */
.filtros {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 18px 0 6px;
  background: linear-gradient(180deg, #fff 62%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(6px);
}
.filtros__caixa {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 8px 8px 8px 10px;
  box-shadow: 0 1px 2px rgba(16,18,21,.05), 0 10px 28px rgba(16,18,21,.07);
}

/* ------------------------------- busca ---------------------------------- */
.busca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.busca__lupa {
  position: absolute;
  left: 14px;
  color: var(--tinta-3);
  pointer-events: none;
}
.busca input {
  width: 100%;
  border: 0;
  background: none;
  padding: 12px 40px 12px 42px;
  font: 400 15px/1.2 var(--texto);
  color: var(--tinta);
}
.busca input:focus { outline: none; }
.busca input::placeholder { color: var(--tinta-3); }
/* O X nativo do type=search some: temos um botão próprio, que também limpa o
   filtro — o nativo limparia só o campo e a grade ficaria filtrada. */
.busca input::-webkit-search-cancel-button { display: none; }

.busca__limpar {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--fundo-3);
  color: var(--tinta-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.busca__limpar:hover { background: var(--marca); color: #fff; }

/* ------------------------------- campos --------------------------------- */
.filtros__campos { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.campo {
  position: relative;
  display: flex;
  align-items: center;
}
.campo svg {
  position: absolute;
  left: 13px;
  width: 16px; height: 16px;
  color: var(--tinta-3);
  pointer-events: none;
}
.campo select {
  appearance: none;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--fundo-2)
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  padding: 11px 34px 11px 36px;
  font: 500 14px/1.2 var(--texto);
  color: var(--tinta-2);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.campo select:hover { border-color: #cfd5dc; }
.campo select:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

.contagem {
  margin: 0 8px 0 4px;
  font-size: 13.5px;
  color: var(--tinta-3);
  white-space: nowrap;
}
.contagem b { color: var(--tinta); font-weight: 600; }

/* --------------------------- telas pequenas ------------------------------ */
@media (max-width: 860px) {
  /* A pílula única viraria uma fileira apertada demais: no celular a busca
     ocupa uma linha e os campos ficam embaixo, com rolagem lateral. */
  .filtros__caixa {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: var(--raio);
    padding: 10px;
  }
  .busca input { padding: 11px 40px 11px 40px; }
  .filtros__campos {
    justify-content: space-between;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filtros__campos::-webkit-scrollbar { display: none; }
  .campo select { padding: 10px 30px 10px 34px; font-size: 13.5px; }
  .contagem { margin-left: auto; }
}

/* A cópia móvel da foto do professor nasce escondida; a media query abaixo a
   acende no telefone. A ordem importa: se esta regra viesse DEPOIS da media,
   empataria em especificidade e venceria por posição — e a foto sumiria nos
   dois mundos. */
.prof__foto--movel { display: none; }

@media (max-width: 560px) {
  /* Com o banner evaporando na aurora, a primeira vitrine chega mais perto:
     o respiro cheio de seção (38px) somado à área evaporada virava um vão
     morto entre o banner e "Kits da Aprovação". */
  main#materiais .secao:first-child { padding-top: 20px; }

  /* Nome de produto com três linhas e meia ("...GCM e Agente de Trânsito e
     Transporte Aparecida de Goiânia") esticava TODOS os cartões da esteira,
     porque a fileira nivela pela célula mais alta. Três linhas e reticências;
     o nome completo segue na página do produto. */
  .grade__linha .card__nome {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A faixa de confiança e o buscador saem do telefone (dono, 26/08/2026):
     entre o banner e os produtos havia duas telas de meio — no celular quem
     chega quer VER os materiais. Os filtros eram só conveniência de quem
     compara 36 itens numa tela grande; as seções ancoradas cumprem o papel. */
  .confianca { display: none; }
  .filtros { display: none; }

  /* ------------- vitrines em esteira: arrasta para o lado ----------------
     Terceira forma, e a que o dedo do dono aprovou construir (26/08/2026).
     As lições das duas anteriores, para ninguém desfazer sem saber:

     1. SEM scroll-snap. O reposicionamento no fim do gesto era um "pula".
     2. LINHA ÚNICA em toda seção. Três fileiras num scroller alto engoliam o
        gesto vertical — a página "grudava" em vez de descer.
     3. overflow-y FECHADO na marra. Um eixo em `auto` faz o outro computar
        `auto` também, e qualquer pixel de estouro vertical deixava o cartão
        balançar para cima e para baixo dentro da esteira — era isso o
        "segura e arrasta pra cima, ele vai". Só sobra o eixo do arrasto.

     Vale para TODAS as seções (por isso .secao, sem id): duas delas têm
     poucos produtos e a esteira coincide com a grade, mas o gesto fica um só
     na página inteira. A esteira sangra até as bordas (margin negativa
     devolvida em padding): cartão cortado na borda é o convite do arrasto. */
  .secao .grade {
    display: block;
    margin-inline: -20px;
  }
  .secao .grade__linha {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 20px 10px;
    scrollbar-width: none;
  }
  .secao .grade__linha::-webkit-scrollbar { display: none; }

  /* Tipografia compacta para o cartão de ~170px: os tamanhos da grade cheia
     transbordariam. */
  .secao .card__nome { font-size: 12px; }
  .secao .card__corpo { padding: 10px 8px 12px; }
  .secao .preco__valor { font-size: 23px; }
  .secao .preco__antes, .secao .preco__depois { font-size: 11.5px; }
  .secao .cta { font-size: 11px; padding: 11px 6px; gap: 5px; }

  /* ---------------- professor: retrato entra debaixo do nome --------------
     Dois nomes no seletor DE PROPÓSITO: este bloco vive aqui em cima (junto
     das outras regras de telefone), mas as regras base de .prof__foto moram
     lá embaixo no arquivo (~linha 1690) e venceriam no empate — a foto
     subiria pelos -24px de margin-top do desktop. A especificidade maior
     ganha sem depender da posição no arquivo. */
  .prof__texto .prof__foto--movel {
    display: block;
    margin: 18px auto 22px;
    justify-self: auto;
  }
  /* A figure original (a da coluna do desktop) sai de cena no telefone. */
  .prof__interno > .prof__foto { display: none; }
}

@media (max-width: 560px) {
  /* (regra dos filtros mantida para quando eles voltarem a aparecer — o
     display:none acima os esconde hoje, mas quem reativar não reencontra o
     "36 materia…" cortado) */
  .filtros__campos { flex-wrap: wrap; overflow-x: visible; }
  .campo { flex: 1 1 calc(50% - 4px); }
  .campo select { width: 100%; }
  .contagem { flex: 1 1 100%; text-align: right; margin: 4px 4px 0 0; }
}

/* =============================== grade ==================================== */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
  gap: 24px;
}

/* Os wrappers de linha existem para o CELULAR fatiar as esteiras (ver a media
   query das vitrines). Aqui eles se dissolvem: com display:contents o grid
   enxerga os cards como filhos diretos e nada muda no desktop. */
.grade__linha { display: contents; }

/* A barra fixa de compra é um móvel do telefone; nasce escondida e a media
   query do produto a acende. */
.compra-fixa { display: none; }


.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: #d6dae0;
}

.card__capa {
  display: block;              /* vira <a> na vitrine e <span> nos relacionados */
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fundo-2);
  overflow: hidden;
}
.card__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.card:hover .card__capa img { transform: scale(1.04); }

.tarja {
  position: absolute;
  top: 10px;
  left: 10px;
  font: 700 10.5px/1 var(--texto);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 5px;
  background: rgba(16, 18, 21, .82);
  color: #fff;
  backdrop-filter: blur(4px);
}
.tarja--uf { background: rgba(255, 255, 255, .94); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
/* tarja de tipo: só o produto digital ganha uma, porque é a exceção */
.tarja--pdf { background: rgba(0, 184, 253, .95); color: #03202b; }
.tarja--uf-abaixo { top: 42px; }


.card--indisponivel .card__capa img { filter: grayscale(1); opacity: .55; }
.faixa-status {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(16, 18, 21, .86);
  color: #fff;
  font: 700 11.5px/1 var(--texto);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px;
}

/* Corpo do card no estilo do layout de referência: tudo centralizado,
   nome em cima, parcelamento pequeno, preço GRANDE em vermelho, à vista
   embaixo e o botão "QUERO ESTE" fechando. */
.card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  text-align: center;
  padding: 18px 16px 18px;
}

.card__nome {
  font: 600 15px/1.4 var(--texto);
  color: var(--tinta);
  margin: 0 0 4px;
}
.card__nome a { color: inherit; }
.card__nome a:hover { color: var(--marca); }

.card__aviso {
  background: var(--aviso-clara);
  color: var(--aviso);
  border-radius: var(--raio-s);
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  margin: 8px 0 0;
}

.preco {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}
.preco__antes { font-size: 13.5px; color: var(--tinta-2); }
.preco__valor {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--marca);
  letter-spacing: .01em;
}
.preco__valor small { font-size: 19px; font-weight: 600; margin-right: 2px; }
.preco__depois { font-size: 13px; color: var(--tinta-3); margin-top: 2px; }
.preco__de { text-decoration: line-through; }
.preco__parcela { font-size: 13px; color: var(--tinta-2); margin-top: 4px; }
.preco__parcela b { color: var(--tinta); font-weight: 600; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  background: var(--marca);
  color: #fff;
  font: 700 13.5px/1 var(--texto);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 15px 12px;
  border-radius: var(--raio-s);
  transition: background .15s, transform .15s;
}
.cta:hover { background: var(--marca-escura); transform: translateY(-1px); }
.cta--desativado {
  background: var(--fundo-3);
  color: var(--tinta-3);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================= sem resultado ============================== */
.vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: var(--tinta-3);
}
.vazio h3 { font-family: var(--display); font-size: 26px; color: var(--tinta); margin: 0 0 8px; }

/* ========================= faixa "Invista no seu futuro" ================== */
.investir {
  background: linear-gradient(330deg, #0d1830 40%, #1a2a52 100%);
  color: #fff;
  padding: 52px 0;
}
.investir__interno {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.investir__icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--marca);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 0 26px rgba(200, 16, 46, .5);
}
.investir__texto { flex: 1 1 380px; }
.investir h2 {
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}
.investir h2 em { font-style: normal; color: #f2384f; }
.investir p { color: #aeb8ce; margin: 0; font-size: 15px; }
.investir__botao { width: auto; margin: 0; flex: none; }

/* =============================== rodapé =================================== */
.duvida {
  background: var(--fundo-2);
  border-top: 1px solid var(--linha);
  text-align: center;
  padding: 64px 20px;
}
.duvida h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.duvida p { color: var(--tinta-2); margin: 0 auto 26px; max-width: 520px; }
.zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25d366;
  color: #06331a;
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 28px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.zap:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

.rodape { background: var(--tinta); color: #9aa3ad; padding: 44px 0 32px; font-size: 14px; }
.rodape__interno { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.rodape h4 { color: #fff; font-family: var(--display); font-size: 17px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 12px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a:hover { color: #fff; }
.rodape__base { border-top: 1px solid #23262b; margin-top: 32px; padding-top: 20px; font-size: 12.5px; color: #6d757e; }

/* ============================== telas pequenas ============================ */
@media (max-width: 900px) {
  .confianca { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; }
}

@media (max-width: 720px) {
  .grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .secao { padding: 38px 0 46px; }
  .card__corpo { padding: 13px 10px 14px; }
  .card__nome { font-size: 13.5px; }
  .preco__valor { font-size: 28px; }
  .cta { font-size: 12px; padding: 13px 8px; }
  .contagem { width: 100%; margin: 2px 0 0; }
  .confianca b { font-size: 13px; }
  .confianca span { font-size: 12px; }
  .investir__interno { justify-content: center; text-align: center; }
  .investir__botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .card:hover { transform: none; }
}


/* =========================================================================
   PÁGINA DO PRODUTO
   ========================================================================= */

.migalhas {
  position: relative;
  z-index: 2;                /* sobre a arte, nunca atrás dela */
  display: flex; gap: 9px; align-items: center;
  padding: 20px 20px 0; font-size: 13.5px; color: var(--tinta-3);
}
.migalhas a { color: var(--tinta-2); font-weight: 500; }
.migalhas a:hover { color: var(--marca); }

/* ------------------------------ destaques --------------------------------
   Faixa escura logo abaixo da compra: corta a página em dois e dá três
   motivos rápidos para quem ainda está decidindo continuar lendo. */
.destaques {
  background: var(--navy);
  color: #fff;
  padding: 46px 0;
}
.destaques__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px;
}
.destaque { position: relative; padding-left: 54px; }
.destaque__numero {
  position: absolute; left: 0; top: -6px;
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .17);
}
.destaque h2 {
  font-family: var(--display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 5px;
}
.destaque p { margin: 0; font-size: 14.5px; color: #b6c0d4; line-height: 1.55; }

/* ------------------------ títulos de bloco interno ----------------------- */
.titulo-bloco {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 18px;
}
.titulo-bloco--centro { text-align: center; margin-bottom: 26px; }
.titulo-bloco--centro::after {
  content: ""; display: block;
  width: 54px; height: 4px; border-radius: 2px;
  background: var(--marca);
  margin: 14px auto 0;
}

/* --------------------- o que vem + sobre o material ---------------------- */
.conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 44px;
  padding-top: 52px;
  padding-bottom: 8px;
  align-items: start;
}
.conteudo__caixa {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px;
}
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.itens li {
  position: relative; padding-left: 27px;
  color: var(--tinta-2); font-size: 15px; line-height: 1.5;
}
.itens li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marca);
}
.brinde-nota {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px dashed var(--linha);
  font-size: 14px; color: var(--ok);
}
.brinde-nota svg { flex: none; margin-top: 2px; }

.prosa {
  color: var(--tinta-2);
  font-size: 16.5px;
  line-height: 1.72;
  /* Texto justificado no bloco "Sobre o material". Vale para os 36 produtos:
     a regra é do bloco, não de cada texto.
     text-wrap:pretty + hyphens evitam o efeito colateral do justificado, que
     é o "rio" de espaços largos quando uma palavra longa não cabe na linha. */
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.prosa p { margin: 0 0 15px; }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa ul { margin: 0 0 15px; padding-left: 20px; }
.prosa li { margin-bottom: 7px; }

/* ------------------------------ ficha técnica ---------------------------- */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 0 0 52px;
  padding: 0;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.ficha__item { background: #fff; padding: 20px 22px; }
.ficha dt {
  font: 600 11.5px/1 var(--texto);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 7px;
}
.ficha dd { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--tinta); }

/* -------------------------------- entrega --------------------------------
   Material físico trava a compra por dúvida de entrega. Estes quatro passos
   existem para responder isso antes da pessoa desistir. */
.entrega {
  background: var(--fundo-2);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 52px 0 56px;
}
.passos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 26px;
  margin: 0; padding: 0;
}
.passos li { position: relative; padding-top: 6px; }
.passo__num {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font: 700 17px/1 var(--display);
  margin-bottom: 12px;
}
.passos h3 {
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 5px;
}
.passos p { margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.55; }

/* ---------------------------------- FAQ ----------------------------------
   <details> nativo: abre e fecha sem uma linha de JavaScript, e o conteúdo
   continua no HTML para o Google ler mesmo fechado. */
.faq { padding-top: 52px; padding-bottom: 8px; }
.faq__lista { max-width: 780px; margin: 0 auto; display: grid; gap: 10px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  overflow: hidden;
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; color: var(--tinta-3); transition: transform .2s ease; }
.faq__item[open] summary { color: var(--marca); }
.faq__item[open] summary svg { transform: rotate(180deg); color: var(--marca); }
.faq__resposta { padding: 0 20px 18px; color: var(--tinta-2); font-size: 15px; }
.faq__resposta p { margin: 0; }
.faq__rodape { text-align: center; margin: 26px 0 0; color: var(--tinta-3); font-size: 14.5px; }
.faq__rodape a { color: var(--marca); font-weight: 600; }

/* ------------------------------- CTA final ------------------------------- */
.fechamento {
  background: linear-gradient(330deg, #0d1830 40%, #1a2a52 100%);
  color: #fff;
  padding: 46px 0;
  margin-top: 52px;
}
.fechamento__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.fechamento h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 34px);
  text-transform: uppercase;
  line-height: 1.12;
  margin: 0 0 8px;
}
.fechamento h2 em { font-style: normal; color: #f2384f; }
.fechamento p { margin: 0; color: #aeb8ce; font-size: 15px; }
.fechamento p b { color: #fff; }
.fechamento__botao { width: auto; margin: 0; flex: none; }

/* ------------------------------ relacionados ----------------------------- */
.relacionados { padding-top: 52px; padding-bottom: 60px; }
.relacionados .grade { margin-top: 4px; }

/* ------------------------------ telas pequenas --------------------------- */
@media (max-width: 900px) {
  .produto { grid-template-columns: 1fr; gap: 26px; padding-bottom: 36px; }
  .produto__midia { max-width: 430px; margin: 0 auto; }
  .conteudo { grid-template-columns: 1fr; gap: 30px; padding-top: 38px; }
  .destaques { padding: 36px 0; }
  .destaques__grade { gap: 26px; }
}

@media (max-width: 720px) {
  .caixa-preco { padding: 20px; }
  .caixa-preco .preco__valor { font-size: 42px; }
  .fechamento__interno { justify-content: center; text-align: center; }
  .fechamento__botao { width: 100%; }
  .ficha { grid-template-columns: 1fr 1fr; }
  .faq, .relacionados { padding-top: 38px; }
}

/* =========================================================================
   PÁGINA DO PRODUTO — layout de landing

   Toda a cor desta página vem de três custom properties injetadas no <body>
   a partir da capa do material (ver estilo_cor() no bootstrap):
     --cor        a cor real do livro (arcos, ícones, detalhes)
     --cor-forte  escurecida até 4.5:1 com branco (botão, preço, faixa)
     --cor-suave  clareada (fundos de selo e cartão)
   Nada aqui usa cor fixa de produto: trocar a capa troca a página.
   ========================================================================= */

/* ---------------------------------- hero -------------------------------- */
.ph {
  position: relative;
  /* NÃO usar overflow:hidden aqui: era ele que cortava a moldura do produto
     na borda de baixo. Quem recorta as formas decorativas passou a ser
     .ph__formas, logo abaixo, que cobre exatamente a área do hero. */
  background: linear-gradient(160deg, #fbfcfd 0%, var(--cor-tenue) 100%);
  /* Sem borda embaixo: ela cortaria a arte no meio do vazamento. */
  /* Sem padding no topo: a arte encosta no header, sem faixa branca no meio.
     O caminho (migalhas) passou para dentro e flutua por cima dela. */
  /* O padding de baixo estende a ARTE para além do conteúdo, e o cartão de
     preço sobe exatamente a mesma medida (margin-top: -170px). Assim nada se
     move de lugar: a arte é que passa a continuar atrás e ao lado do cartão,
     em vez de terminar numa linha reta. Mexer num dos dois valores exige
     mexer no outro. */
  padding: 0 0 170px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

/* Camada que segura arcos, massa, fio e tipografia fantasma dentro do hero. */
.ph__formas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --------------------------- fundo do hero -------------------------------
   Quatro camadas, todas derivadas da cor da capa. Reproduzem em CSS o fundo
   do layout de referência: massa escura sangrando pela direita, fio dourado
   contornando, tipografia fantasma do concurso e um raio de luz.
   Feito em CSS e não em imagem por três motivos: o nome do concurso sai
   sempre correto, a cor acompanha a capa automaticamente, e não há 36
   arquivos para gerar e versionar. */

/* Nome do concurso, gigante e quase apagado, no canto superior direito. */
.ph__fantasma {
  position: absolute;
  top: -.18em;
  right: 2%;
  font-family: var(--display);
  font-size: clamp(120px, 19vw, 290px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cor);
  opacity: .07;
  user-select: none;
}

/* Massa orgânica: um círculo deformado por border-radius assimétrico. */
.ph__massa {
  position: absolute;
  top: -26%;
  right: -18%;
  width: 760px;
  height: 760px;
  border-radius: 58% 42% 46% 54% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 30% 30%, var(--cor) 0%, var(--cor-forte) 72%);
  opacity: .16;
  transform: rotate(-8deg);
}

/* Fio dourado acompanhando a curva da massa. Só um pedaço do anel aparece,
   o resto sai da tela — é o que dá o traço solto do layout. */
.ph__fio {
  position: absolute;
  top: -14%;
  right: -8%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  border: 2.5px solid #d8a72c;
  border-right-color: transparent;
  border-bottom-color: transparent;
  opacity: .5;
  transform: rotate(28deg);
}

/* Raio de luz diagonal, bem sutil, atravessando o canto. */
.ph__brilho {
  position: absolute;
  top: -30%;
  right: 6%;
  width: 300px;
  height: 900px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  transform: rotate(24deg);
  filter: blur(30px);
  opacity: .55;
}

.ph__interno {
  position: relative;
  /* z-index 3, e não 1: este elemento cria um contexto de empilhamento, então
     o z-index da moldura lá dentro NÃO é comparado com o cartão de preço —
     quem é comparado é este aqui. Com 1, o hero inteiro ficava atrás do
     cartão (z-index 2) e a imagem que vaza sumia por baixo dele. */
  z-index: 3;
  flex: 1;                   /* ocupa a altura restante do hero */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 40px;
  align-items: center;
  padding-top: 10px;
}

.ph__pilula {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 11px 20px;
  font: 700 12.5px/1 var(--texto);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cor-forte);
  box-shadow: var(--sombra);
  margin-bottom: 22px;
}

.ph__titulo {
  font-family: var(--display);
  font-weight: 700;
  line-height: .92;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.ph__titulo-linha {
  display: block;
  font-size: clamp(38px, 6vw, 68px);
  color: var(--tinta);
}
.ph__titulo-alvo {
  display: block;
  font-size: clamp(38px, 6vw, 68px);
  color: var(--cor-forte);
}

.ph__sub {
  font-size: clamp(16px, 1.9vw, 18.5px);
  color: var(--tinta-2);
  max-width: 40ch;
  margin: 0 0 28px;
}

/* Cada destaque e um CARTAO sobre o hero, e nao icone e texto soltos.
   O motivo e o fundo: o hero muda de cor (e as vezes de arte) a cada produto,
   e sem limite desenhado o olho nao sabia onde um destaque acabava e o outro
   comecava. O cartao branco resolve isso sem depender de qual arte caiu ali. */
.ph__mini {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.ph__mini li {
  display: grid;
  gap: 3px;
  align-content: start;
  text-align: left;            /* o hero centraliza em tela pequena; o cartao nao */
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 16px 18px;
  box-shadow: var(--sombra);
}
/* A caixa do icone e o unico lugar colorido do cartao, e a cor vem da CAPA
   daquele produto: fundo lavado (--cor-suave) com o traco na versao escurecida
   (--cor-forte), que e legivel sobre qualquer uma das cores cadastradas. E o
   mesmo par ja usado em .precisa__icone. */
.ph__mini-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--cor-suave);
  border: 1px solid color-mix(in srgb, var(--cor) 14%, transparent);
  color: var(--cor-forte);
  margin-bottom: 9px;
}
.ph__mini b { font-size: 14.5px; color: var(--tinta); }
/* `b + span` e nao `.ph__mini span`: o icone TAMBEM e um span, e a regra larga
   vencia por especificidade a cor definida em .ph__mini-icone — o icone saia
   cinza em todo produto, engolindo a cor da capa. Mirar no irmao do <b> pega
   so o texto de apoio. */
.ph__mini b + span { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }

/* A capa vem como JPEG quadrado com arte de fundo. Emoldurar é mais honesto
   (e mais bonito) do que tentar mascarar as bordas de uma imagem cheia. */
.ph__midia {
  position: relative;
  z-index: 3;                /* acima do cartão de preço, que é z-index 2 */
  padding: 14px 14px 24px;
  /* A moldura VAZA por cima do cartão de preço.
     NÃO usar margin-bottom negativa aqui: o hero tem min-height, então a
     margem só encolhe a linha da grade dentro da altura fixa e a imagem não
     sai do lugar (foi exatamente o que aconteceu na primeira tentativa).
     transform desloca o desenho sem alterar o layout, então o vazamento
     acontece de verdade. Os ~70px caem no padding-top de 74px do cartão,
     nunca sobre preço, nome ou botão. */
  transform: translateY(70px);
}

/* Halo na cor do produto: derrete o canto do quadrado no fundo da página. */
.ph__halo {
  position: absolute;
  inset: -6% -4% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cor) 0%, transparent 72%);
  opacity: .3;
  filter: blur(26px);
}

/* A CAPA FICA RETA. Ela nascia com rotate(-1.6deg) para dar um ar de foto
   apoiada na mesa, e o hover desentortava. Só que a arte da capa JÁ tem
   moldura, faixa e texto alinhados: inclinar o retângulo inteiro deixava as
   linhas do próprio desenho fora de esquadro, e era isso que se via — não o
   charme, o torto. Pedido do dono (31/08/2026), nos dois tamanhos.
   A sombra e o levantar no hover ficam: eles dão relevo sem girar nada. */
.ph__moldura {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
  box-shadow:
    0 2px 6px rgba(16, 18, 21, .10),
    0 18px 30px rgba(16, 18, 21, .16),
    0 40px 70px rgba(16, 18, 21, .20);
}
.ph__moldura:hover { transform: translateY(-4px); }

/* Aro interno claro: separa a arte da capa do fundo sem desenhar borda dura. */
.ph__moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
  pointer-events: none;
}

.ph__moldura img { width: 100%; height: auto; display: block; }

/* Sombra elíptica de apoio: dá chão ao objeto, como no pedestal do layout. */
.ph__apoio {
  position: absolute;
  left: 12%; right: 12%; bottom: 6px;
  height: 26px;
  border-radius: 50%;
  background: rgba(16, 18, 21, .30);
  filter: blur(16px);
}

.ph__status {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--tinta);
  color: #fff;
  font: 700 11.5px/1 var(--texto);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 6px;
}

/* ----------------------------- cartão de preço --------------------------- */
.compra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 18px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  margin-top: -170px;
  position: relative;
  z-index: 2;
}
.compra__id { padding: 74px 36px 34px; }   /* topo maior: é onde a imagem vaza */
.compra__linha {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tinta);
}
.compra__nome {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tinta);
  margin: 2px 0 0;
}
.compra__risco {
  display: block;
  width: 54px; height: 4px;
  border-radius: 2px;
  background: var(--marca);
  margin: 14px 0 16px;
}
.compra__formato { color: var(--tinta-3); font-size: 14.5px; margin: 0 0 22px; }

/* Icone a esquerda, texto a direita, dentro de um cartao — o mesmo desenho
   dos destaques do hero, de proposito: os dois blocos aparecem quase colados
   na primeira dobra e precisam ler como um par, nao como duas ideias. */
.compra__atributos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
  margin: 0; padding: 0;
}
.compra__atributos li {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.compra__icone {
  flex: none;                  /* o texto encolhe, a caixa do icone nunca */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--cor-suave);
  border: 1px solid color-mix(in srgb, var(--cor) 14%, transparent);
  color: var(--cor-forte);
}
/* Mesmo cuidado do hero: o texto e mirado pelo .compra__texto para a regra nao
   alcancar o span do icone e apagar a cor do produto. */
.compra__texto { display: grid; min-width: 0; }
.compra__texto b { font-size: 14px; color: var(--tinta); line-height: 1.3; }
.compra__texto span { font-size: 13px; color: var(--tinta-3); line-height: 1.3; }

.compra__valor {
  padding: 74px 36px 34px;
  border-left: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.compra__de { color: var(--tinta-3); font-size: 14.5px; margin: 0 0 8px; }

/* "4x de" / "à vista": rótulo pequeno logo acima do número grande. */
.compra__cabecalho {
  font-size: 15px;
  color: var(--tinta-2);
  margin: 0 0 -2px;
}
.compra__off {
  background: var(--marca);
  color: #fff;
  font: 700 12.5px/1 var(--texto);
  letter-spacing: .04em;
  padding: 7px 11px;
  border-radius: 5px;
  margin-bottom: 12px;
}
.compra__preco {
  font-family: var(--display);
  font-size: clamp(46px, 6vw, 62px);
  font-weight: 700;
  line-height: 1;
  color: var(--cor-forte);
  margin: 0 0 8px;
}
.compra__parcela { font-size: 15px; color: var(--tinta-2); margin: 0; }
.compra__parcela b { color: var(--tinta); font-weight: 600; }
.compra__pix { font-size: 14.5px; color: var(--tinta-2); margin: 6px 0 0; }
.compra__pix b { color: var(--ok); font-weight: 700; }

.compra .cta { margin-top: 22px; }
.cta--cor { background: var(--cor-forte); }
.cta--cor:hover { background: var(--cor-forte); filter: brightness(.88); }

.compra__seguro {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  font-size: 12.8px;
  color: var(--tinta-3);
  margin: 13px 0 0;
}
.compra__seguro a { color: var(--marca); font-weight: 600; }

/* ------------------------------ faixa escura ----------------------------- */
.barra {
  background: var(--cor-forte);
  color: #fff;
  margin-top: 34px;
  padding: 30px 0;
}
.barra__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.barra__item {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
  padding: 4px 14px;
  border-right: 1px solid rgba(255, 255, 255, .16);
}
.barra__item:last-child { border-right: 0; }
.barra__icone { color: #fff; opacity: .92; margin-bottom: 8px; }
.barra__item b { font-size: 14.5px; font-weight: 600; }
.barra__item span { font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.45; }

/* -------------------------- tudo que você precisa ------------------------ */
.precisa { padding: 56px 20px 10px; text-align: center; }
.precisa__titulo {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 0;
}
.precisa__risco {
  display: block;
  width: 58px; height: 4px;
  border-radius: 2px;
  background: var(--marca);
  margin: 14px auto 32px;
}
.precisa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px;
  text-align: center;
}
.precisa__card {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.precisa__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
  border-color: var(--cor);
}
.precisa__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--cor-suave);
  color: var(--cor-forte);
  margin-bottom: 14px;
}
.precisa__card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  margin: 0 0 7px;
}
.precisa__card p { font-size: 14px; color: var(--tinta-3); line-height: 1.55; margin: 0; }

/* ------------------- ajustes dos blocos que continuam -------------------- */
.itens li::before { background: var(--cor-forte); }
.passo__num { background: var(--cor-forte); }
.faq__item[open] summary,
.faq__item[open] summary svg { color: var(--cor-forte); }
.fechamento { background: var(--cor-forte); }
.fechamento h2 em { color: #fff; opacity: .72; }
.fechamento p { color: rgba(255, 255, 255, .78); }
.titulo-bloco { color: var(--tinta); }
.titulo-bloco--centro::after { background: var(--marca); }

/* ------------------------------ telas pequenas --------------------------- */
@media (max-width: 940px) {
  .ph__interno { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .ph__sub { margin-left: auto; margin-right: auto; }
  .ph__mini { max-width: 560px; margin: 0 auto; }
  /* Nada de justify-items: center aqui. O hero inteiro centraliza nesta
     largura, mas o conteudo DENTRO do cartao continua alinhado a esquerda —
     centralizar icone e texto num cartao com padding fica torto. */
  .ph__midia { max-width: 420px; margin: 0 auto; transform: none; }
  .ph__arco { top: -18%; right: -40%; }
  .ph__circulo, .ph__risco { display: none; }

  .compra { grid-template-columns: 1fr; }
  .compra__valor { border-left: 0; border-top: 1px solid var(--linha); align-items: center; text-align: center; }
  .compra__id { text-align: center; }
  .compra__risco { margin-left: auto; margin-right: auto; }
}

/* Celular: os destaques empilham.
   Em duas colunas nesta largura cada cartao fica com ~168px uteis — o titulo
   quebra em duas linhas e o texto de apoio em cinco — e, como sao tres, o
   terceiro cartao sobra sozinho na segunda fileira. Empilhado, cada um usa a
   largura toda e a fileira orfa some. */
@media (max-width: 560px) {
  .ph__mini { grid-template-columns: 1fr; max-width: 420px; }
  .ph__mini li { padding: 14px 16px 15px; }

  /* A ARTE DO HERO SAI NO TELEFONE. No desktop ela mora à direita e o texto à
     esquerda, cada um no seu campo; empilhados, o subtítulo cinza cai POR CIMA
     da parte colorida da arte e some — "dividida em 12 dias" ficou ilegível na
     página da SD-PMGO. O gradiente na cor da capa (o fallback que o código já
     declara funcionar para todos) volta a valer, e o texto recupera o
     contraste. A tipografia fantasma fica: é texto, escala e não briga. */
  .ph--arte::before,
  .ph--arte::after { display: none; }

  /* ------------------- hero: imagem logo depois do título ----------------
     A ordem que o dono desenhou (26/08/2026): título -> capa -> benefícios.
     No HTML a capa é IRMÃ do bloco de texto, e os benefícios são FILHOS dele
     — não há como intercalar com `order` entre pais diferentes. O
     display:contents dissolve o bloco de texto e todos viram irmãos no grid
     do hero; aí o order enfileira. */
  .ph__texto { display: contents; }
  .ph__pilula { order: 1; justify-self: center; }
  .ph__titulo { order: 2; }
  .ph__sub    { order: 3; }
  .ph__midia  { order: 4; max-width: 330px; margin: 0 auto; }
  .ph__mini   { order: 5; }

  /* ------------- benefícios: de três cartões para três linhas ------------
     Os cartões empilhados comiam meia tela ("bem resumidos no menor espaço
     possível" — dono). Viram linhas de conferência num cartão só, e o texto
     de apoio sai: o resumo é o título. O texto completo continua no desktop. */
  .ph__mini {
    display: block;
    max-width: 420px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 4px 14px;
    box-shadow: var(--sombra);
  }
  .ph__mini li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 1px 11px;
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 9px 0;
    text-align: left;
  }
  .ph__mini li + li { border-top: 1px solid var(--fundo-3); }
  .ph__mini-icone { width: 30px; height: 30px; border-radius: 8px; margin: 0; grid-row: 1 / 3; }
  .ph__mini-icone svg { width: 16px; height: 16px; }
  .ph__mini b { font-size: 12.5px; line-height: 1.3; }
  /* A primeira forma escondia este apoio, e o título sozinho ("Edital de
     oficial") ficou solto — reprovado pelo dono no aparelho. O apoio volta
     pequeno e PRESO a duas linhas: informa sem devolver os cartões de meia
     tela que motivaram o resumo. */
  .ph__mini b + span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    grid-column: 2;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tinta-3);
  }

  /* -------------------- cartão de preço sem a coluna de nome -------------
     O hero acabou de dizer nome e formato; repetir custava meia tela. Fica
     só a coluna do dinheiro. */
  .compra__id { display: none; }
  .compra__valor { border-top: 0; padding: 22px 20px 24px; }

  /* ------------- seções que saem da página do produto no telefone --------
     Pedido do dono (26/08/2026): depois dos benefícios, "só ficha técnica,
     como você recebe e dúvidas". As classes daqui existem apenas na página
     do produto — a home não as usa, então nada some de lá. */
  /* Com o nome do elemento no seletor (0,1,1) para vencer qualquer regra
     base dessas seções sem depender da posição no arquivo. */
  section.barra,
  section.precisa,
  section.conteudo,
  section.fechamento,
  div.prof-so-desktop { display: none; }

  /* ------------------------ ficha técnica em linhas ---------------------- */
  .ficha {
    display: block;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 6px 16px;
    box-shadow: var(--sombra);
  }
  .ficha__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    background: none;
    padding: 11px 0;
  }
  .ficha__item + .ficha__item { border-top: 1px solid var(--fundo-3); }
  .ficha dt {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tinta-3);
  }
  .ficha dd { font-size: 13.5px; font-weight: 600; text-align: right; }

  /* --------------------- "como você recebe", compacto -------------------- */
  .passos { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .passos li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 2px 12px;
    padding: 0;
    align-items: center;
  }
  .passo__num {
    width: 26px; height: 26px;
    font-size: 12.5px;
    grid-row: 1 / 3;
    margin: 0;
  }
  .passos h3 { margin: 0; font-size: 13.5px; }
  .passos p { grid-column: 2; font-size: 12.5px; line-height: 1.45; }

  /* --------------------------- compra fixa no pé -------------------------- */
  .compra-fixa {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--fundo);
    border-top: 1px solid var(--linha);
    box-shadow: 0 -8px 26px rgba(16, 18, 21, .14);
  }
  .compra-fixa__preco { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
  .compra-fixa__preco small { font-size: 10.5px; color: var(--tinta-3); }
  .compra-fixa__preco b {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    color: var(--cor-forte, #c8102e);
  }
  .compra-fixa__botao { flex: 1; margin: 0; padding: 14px 10px; font-size: 12.5px; }

  /* O rodapé não pode terminar escondido atrás da barra fixa. :has() falha em
     navegador de 2021 para trás — lá a barra cobre o finzinho do rodapé, que
     é só padding: ninguém perde botão. */
  body:has(.compra-fixa) { padding-bottom: 74px; }

  /* -------- relacionados: a mesma esteira manual das vitrines da home ----
     (a versão que andava sozinha foi testada e descartada pelo dono) */
  .relacionados .grade {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -20px;
    padding: 2px 20px 10px;
    scrollbar-width: none;
  }
  .relacionados .grade::-webkit-scrollbar { display: none; }
  .relacionados .card__nome { font-size: 12px; }
  .relacionados .card__corpo { padding: 10px 8px 12px; }
  .relacionados .preco__valor { font-size: 23px; }
  .relacionados .preco__antes,
  .relacionados .preco__depois { font-size: 11.5px; }
}

@media (max-width: 720px) {
  .ph { padding-bottom: 34px; }
  .compra__id, .compra__valor { padding: 24px 20px; }
  .compra__nome { font-size: 27px; }
  .compra__linha { font-size: 21px; }
  /* Em duas colunas (celular) o item da direita encostava na borda da tela:
     o padding lateral segura o texto dentro do quadro. */
  .barra__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 0 12px 16px; }
  .barra__item:last-child { border-bottom: 0; }
  .precisa { padding-top: 40px; }
}

/* Hero com arte de fundo: a arte é PNG/WebP COM TRANSPARÊNCIA — só a forma
   colorida da direita tem pixels. Por isso, ao contrário de uma imagem opaca,
   ela não leva véu branco por cima (lavaria a cor) e não precisa cobrir a
   página inteira: o gradiente do hero continua aparecendo por baixo, na área
   onde fica o texto. As formas equivalentes desenhadas em CSS saem de cena,
   mas a tipografia fantasma fica — ela é o nome do concurso, não decoração. */
/* A arte vive nesta camada, e não no background da seção, para poder ser
   dissolvida por máscara. Mascarar a seção inteira apagaria o texto junto. */
.ph--arte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--arte);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;

  /* É isto que acaba com a linha reta embaixo: a arte fica opaca até 58% da
     altura e vai sumindo até o fim, dissolvendo dentro do fundo claro da
     página. A segunda máscara faz o mesmo na borda direita, mais de leve,
     para a arte não bater no limite da tela. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%),
    linear-gradient(to left, #000 0%, #000 92%, rgba(0,0,0,.9) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%),
    linear-gradient(to left, #000 0%, #000 92%, rgba(0,0,0,.9) 100%);
  mask-composite: intersect;
}
.ph--arte .ph__massa,
.ph--arte .ph__fio,
.ph--arte .ph__brilho { display: none; }

/* Sobre a arte, o fantasma some um pouco mais para não competir com a foto. */
.ph--arte .ph__fantasma { opacity: .05; }

@media (max-width: 940px) {
  /* No celular a coluna vira uma só e a arte ficaria atrás do texto:
     melhor recuá-la para a direita e reduzir o peso. */
  .ph--arte { background-size: 150% auto; background-position: right top; }
}

/* Duas das seis artes não têm vazio chapado (concreto e fumaça de ponta a
   ponta), então entram opacas. Nelas o texto cai sobre a textura — medido em
   10:1 e 16:1 de contraste, acima do exigido — e um véu suave à esquerda
   acalma a variação da textura sem lavar a cor da direita. */
.ph--arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.78) 34%, rgba(255,255,255,.30) 52%, rgba(255,255,255,0) 66%);
  pointer-events: none;
}

@media (max-width: 940px) {
  /* Coluna única: a imagem fica sobre o cartão inteiro, não ao lado dele.
     Vazar aqui cobriria o preço, então a sobreposição some e o padding
     extra do topo volta ao normal. */
  .ph__midia { transform: none; }
  /* Cartão quase da largura da tela: não há laterais para a arte aparecer.
     Vazamento curto, só o suficiente para não terminar em linha reta. */
  .compra { margin-top: -40px; }
  .compra__id, .compra__valor { padding-top: 24px; }
}

@media (max-width: 560px) {
  /* Coluna estreita: justificar deixa vãos enormes entre as palavras.
     Abaixo deste ponto o texto volta a alinhar só à esquerda. */
  .prosa { text-align: left; }
}

@media (max-width: 940px) {
  .ph { padding-bottom: 60px; }
}

@media (max-width: 940px) {
  .ph--arte::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  }
}

/* =========================================================================
   SEÇÃO "QUEM ESTÁ POR TRÁS" — Prof. Caldeira
   Faixa escura, foto recortada ancorada no canto inferior esquerdo sangrando
   para fora, texto à direita. A mesma peça aparece na vitrine e nas páginas
   de produto.
   ========================================================================= */
.prof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 100% at 18% 100%, rgba(200, 16, 46, .22) 0%, transparent 60%),
    linear-gradient(150deg, #0d1017 0%, #171c26 55%, #0d1017 100%);
  color: #fff;
}

.prof__interno {
  display: grid;
  /* Texto à esquerda, figura à direita. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 48px;
  /* start, e não center: a figura é bem mais alta que o texto, e alinhar pelo
     topo põe o título na altura da cabeça dele. Centralizar jogaria o texto
     para a altura da cintura, longe do rosto. */
  align-items: start;
  padding-top: 60px;
}

/* A foto é alta e estreita: fica colada na base e sai pela borda de baixo,
   como se ele estivesse entrando na página. */
.prof__foto {
  position: relative;
  margin: 0;
  justify-self: end;
  /* Sobe um pouco: a cabeça passa a tangenciar o topo da seção, na mesma
     linha do título à esquerda. */
  margin-top: -24px;
}
.prof__foto img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: -1px;      /* botas encostam na borda, sem fresta */
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .55));
}
/* Halo atrás da figura, para ela não flutuar solta no escuro. */
.prof__foto::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 460px;
  height: 620px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 16, 46, .38), transparent 72%);
  filter: blur(10px);
  z-index: -1;
}

.prof__texto { padding: 0 0 64px; }

.prof__olho {
  font: 600 12.5px/1 var(--texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f2384f;
  margin: 0 0 8px;
}
.prof__nome {
  font-family: var(--display);
  font-size: clamp(38px, 5.5vw, 62px);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  margin: 0;
}
.prof__risco {
  display: block;
  width: 58px; height: 4px;
  border-radius: 2px;
  background: var(--marca);
  margin: 16px 0 22px;
}

.prof__texto p {
  color: #b9c1cd;
  font-size: 15.5px;
  line-height: 1.68;
  margin: 0 0 14px;
  max-width: 62ch;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.prof__texto strong { color: #fff; font-weight: 600; }

/* Primeira frase maior: é o gancho da história. */
.prof__linha-fina { font-size: 17.5px !important; color: #dde3ea !important; }

.prof__numeros {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0;
  padding: 0;
}
.prof__numeros li {
  flex: 1 1 150px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--raio-s);
  padding: 14px 16px;
}
.prof__numeros b {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #f2384f;
}
.prof__numeros span {
  display: block;
  font-size: 12.5px;
  color: #97a1b0;
  margin-top: 4px;
  line-height: 1.4;
}

.prof__frase {
  position: relative;
  margin: 26px 0 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--marca);
  font-size: 17px;
  font-style: italic;
  color: #eaeef4;
  line-height: 1.6;
  max-width: 58ch;
}
.prof__frase cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8d97a5;
}

@media (max-width: 900px) {
  /* Coluna única: a foto vira uma faixa menor no topo, senão empurra o texto
     inteiro para fora da primeira tela. */
  .prof__interno {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 40px;
  }
  .prof__foto { order: 2; justify-self: center; margin-top: 0; }
  /* A foto é corpo inteiro numa proporção de 1:4,4 — limitar a LARGURA (era
     max-width: 220px) ainda rendia quase mil pixels de altura: duas telas e
     meia de celular só de figura, e foi exatamente a reclamação do dono em
     26/08/2026. Limitar tem que ser a ALTURA. O object-fit corta o corpo e
     mostra cabeça e colete — a parte que tem rosto — e a máscara dissolve o
     corte no fundo escuro, no mesmo desenho que .apv-destaque já usa. */
  .prof__foto { width: 100%; max-width: 340px; }
  .prof__foto img {
    max-width: none;
    width: 100%;
    height: 430px;
    object-fit: cover;
    object-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .prof__foto::before { width: 260px; height: 260px; bottom: 30%; }
  .prof__texto { order: 1; padding-bottom: 30px; }
  .prof__texto p { text-align: left; }
  .prof__numeros li { flex: 1 1 118px; padding: 12px; }
  .prof__numeros b { font-size: 27px; }
}

/* ======================= revelação por rolagem ==========================
   O estado escondido vive DENTRO de html.js-revelar. Sem JavaScript a classe
   nunca é posta e a página aparece inteira — o efeito é enfeite, não
   requisito. Anima `translate` (propriedade separada) em vez de `transform`,
   que já é usado nos hovers de card e botão. */
.js-revelar .revelar {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity .62s cubic-bezier(.22, .68, .3, 1) var(--atraso, 0ms),
    translate .62s cubic-bezier(.22, .68, .3, 1) var(--atraso, 0ms);
  will-change: opacity, translate;
}
.js-revelar .revelado {
  opacity: 1;
  translate: none;
  will-change: auto;
}

/* A figura do professor entra pelo lado, não de baixo: ela é alta e vertical,
   e subir 26px numa peça dessa altura mal se percebe. */
.js-revelar .prof__foto.revelar { translate: 34px 0; }
.js-revelar .prof__foto.revelado { translate: none; }

@media (prefers-reduced-motion: reduce) {
  .js-revelar .revelar { opacity: 1; translate: none; transition: none; }
}

/* ===================== correções de base (não remover) ==================== */

/* Esconde de verdade. Sem isto, `elemento.hidden = true` no JavaScript não
   surte efeito em nada que tenha display definido por classe — .card usa
   display:flex, e uma regra de classe vence o [hidden] do navegador. Era a
   causa de a busca "não filtrar nada": os cards eram marcados como ocultos
   e continuavam na tela. */
[hidden] { display: none !important; }

/* Invisível na tela, disponível para leitor de tela e para o Google. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* =========================================================================
   TEMA ESCURO
   =========================================================================
   Princípio: o FUNDO fica escuro, os CARDS continuam brancos.

   Isso não é meio-termo, é o ponto todo. As 36 capas são artes coloridas e
   saturadas; contra branco elas se dissolvem, contra escuro elas brilham —
   é o efeito de vitrine de joalheria. E manter o card branco preserva todo
   o contraste interno dele (nome, preço, botão) sem precisar reescrever
   nada do que já estava certo.

   Por isso as variáveis --tinta / --fundo NÃO são invertidas: elas continuam
   valendo dentro dos cards. O que muda são as superfícies de PÁGINA, uma a
   uma, logo abaixo.
   ========================================================================= */

html.escuro { background: #0b0e14; }
html.escuro body { background: transparent; color: #e8edf3; }

/* ------------------- o banner como parte da página -----------------------
   O carrossel era um bloco preto (#0a0a0a) com a foto dentro: por mais fumaça
   que se pintasse POR CIMA, a seção terminava numa linha reta e o conjunto lia
   como imagem colada (reclamação do dono, duas vezes, 26/08/2026). O conserto
   é estrutural, não cosmético:

   1. o bloco perde a cor própria — a aurora do fundo da página atravessa;
   2. a base da imagem DISSOLVE de verdade (máscara), em vez de receber tinta
      preta por cima: os últimos ~8% derretem até transparente e a aurora
      aparece através da foto.

   A máscara fica na JANELA para levar junto o véu de fumaça (::after). Os 8%
   são medidos: os selos de frete da própria arte moram logo acima dessa
   faixa — dissolver mais alto os lavaria. */
html.escuro .carrossel { background: transparent; }
html.escuro .carrossel__janela {
  -webkit-mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
}

/* ------------------------------- vitrine --------------------------------- */
html.escuro .secao--alternada > .limite {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .07);
}
html.escuro .secao__titulo { color: #fff; }

html.escuro .filtros {
  background: linear-gradient(180deg, #0b0e14 62%, rgba(11, 14, 20, 0) 100%);
}
html.escuro .filtros__caixa {
  background: #151a23;
  border-color: #262d3a;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
}
html.escuro .busca input { color: #e8edf3; }
html.escuro .busca input::placeholder { color: #7c8797; }
html.escuro .busca__lupa { color: #7c8797; }
html.escuro .busca__limpar { background: #232b38; color: #b6c0cd; }
html.escuro .busca__limpar:hover { background: var(--marca); color: #fff; }
html.escuro .campo svg { color: #7c8797; }
html.escuro .campo select {
  background-color: #1b2230;
  border-color: #2a3340;
  color: #c3cddb;
}
html.escuro .campo select:hover { border-color: #3a4557; }
html.escuro .contagem { color: #8792a3; }
html.escuro .contagem b { color: #fff; }

html.escuro .confianca {
  background: #141922;
  border-color: #242c39;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
html.escuro .confianca b { color: #fff; }
html.escuro .confianca span { color: #93a0b1; }

html.escuro .vazio { color: #93a0b1; }
html.escuro .vazio h3 { color: #fff; }

html.escuro .duvida {
  background: #0f131b;
  border-top-color: #212936;
}
html.escuro .duvida h2 { color: #fff; }
html.escuro .duvida p { color: #b6c0cd; }

/* --------------------------- página de produto --------------------------- */
/* As artes de fundo foram feitas para página clara: metade delas é off-white
   e viraria um retângulo branco no escuro. No tema escuro elas saem, e o
   fundo desenhado em CSS assume — ele já usa a cor da capa e funciona nos
   dois temas. */
html.escuro .ph--arte::before { display: none; }
html.escuro .ph--arte::after  { display: none; }

html.escuro .ph {
  background:
    radial-gradient(80% 60% at 78% 22%,
      color-mix(in srgb, var(--cor, #14213c) 26%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, #0d1119 0%, #131926 60%, #0b0e14 100%);
  border-bottom-color: #1c2431;
}
html.escuro .ph__fantasma { color: #fff; opacity: .045; }
html.escuro .ph__titulo-linha { color: #fff; }
html.escuro .ph__titulo-alvo { color: color-mix(in srgb, var(--cor, #c8102e) 62%, #fff); }
html.escuro .ph__sub { color: #b6c0cd; }
html.escuro .ph__pilula {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #e6ecf3;
  box-shadow: none;
}
html.escuro .ph__mini li {
  background: #141922;
  border-color: #242c39;
  box-shadow: none;
}
html.escuro .ph__mini-icone {
  background: color-mix(in srgb, var(--cor, #c8102e) 18%, transparent);
  border-color: rgba(255,255,255,.10);
  color: color-mix(in srgb, var(--cor, #c8102e) 55%, #fff);
}
html.escuro .ph__mini b { color: #fff; }
html.escuro .ph__mini b + span { color: #9aa6b6; }
html.escuro .migalhas { color: #8792a3; }
html.escuro .migalhas a { color: #b6c0cd; }

html.escuro .titulo-bloco { color: #fff; }

/* Caixas que eram cinza-claro viram cinza-escuro; as brancas continuam
   brancas (cartão de preço, FAQ, relacionados) para manter o contraste. */
html.escuro .conteudo__caixa {
  background: #141922;
  border-color: #242c39;
}
html.escuro .prosa { color: #b6c0cd; }
html.escuro .prosa strong { color: #fff; }
html.escuro .itens li { color: #b6c0cd; }

html.escuro .ficha {
  background: #242c39;
  border-color: #242c39;
}
html.escuro .ficha__item { background: #141922; }
html.escuro .ficha dt { color: #8792a3; }
html.escuro .ficha dd { color: #fff; }

html.escuro .entrega {
  background: #0f131b;
  border-color: #212936;
}
html.escuro .passos h3 { color: #fff; }
html.escuro .passos p { color: #b6c0cd; }

html.escuro .faq__rodape { color: #8792a3; }

/* ------------------------------ ajustes finos ---------------------------- */
/* O card ganha uma borda mais viva: contra o escuro, borda clara demais
   some e borda escura demais faz o card flutuar sem apoio. */
html.escuro .card {
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
}
html.escuro .card:hover { border-color: rgba(255, 255, 255, .22); }
html.escuro .compra { border-color: rgba(255,255,255,.10); }
html.escuro .faq__item { border-color: rgba(255,255,255,.10); }

/* =========================================================================
   EFEITOS DO TEMA ESCURO
   Só existem aqui: em fundo claro, brilho vira mancha cinza. No escuro é
   luz de verdade, e é o que dá vida à página.
   ========================================================================= */

/* ------------------------- aurora de fundo -------------------------------
   Três manchas gigantes e desfocadas nas cores da marca, fixas atrás de
   tudo. Enormes de propósito: nesse tamanho não se lê como forma nem como
   repetição — lê-se como iluminação de ambiente. */
html.escuro body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(200, 16, 46, .16), transparent 70%),
    radial-gradient(42% 34% at 84% 34%, rgba(26, 42, 82, .34), transparent 72%),
    radial-gradient(46% 32% at 42% 88%, rgba(200, 16, 46, .10), transparent 74%);
  filter: blur(28px);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
}

/* --------------------- brilho do card na cor da capa ---------------------
   O card já carrega --cor no atributo style. Aqui essa cor vira a luz que
   ele emite: o Kit PMGO acende verde, o CFO-PMGO azul, o PMDF vermelho.
   É o detalhe que faz a grade parecer feita produto a produto. */
html.escuro .card {
  transition: transform .2s ease, box-shadow .28s ease, border-color .28s ease;
}
html.escuro .card:hover {
  border-color: color-mix(in srgb, var(--cor, #c8102e) 55%, transparent);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .5),
    0 16px 40px rgba(0, 0, 0, .5),
    0 0 0 1px color-mix(in srgb, var(--cor, #c8102e) 28%, transparent),
    0 12px 46px -6px color-mix(in srgb, var(--cor, #c8102e) 48%, transparent);
}

/* A capa perde o véu escuro ao aproximar: o card "acende". */
html.escuro .card__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .18) 100%);
  opacity: 1;
  transition: opacity .28s ease;
  pointer-events: none;
}
html.escuro .card:hover .card__capa::after { opacity: 0; }

/* O botão acompanha, em vez de ficar vermelho fixo enquanto o card acende
   noutra cor. */
html.escuro .card:hover .cta {
  background: color-mix(in srgb, var(--cor, #c8102e) 82%, #000);
}

/* ------------------------ luz no topo do hero ---------------------------- */
html.escuro .ph::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--cor, #c8102e) 60%, transparent), transparent);
}

/* --------------------- títulos de seção com brilho ----------------------- */
html.escuro .secao__titulo {
  text-shadow: 0 0 34px rgba(255, 255, 255, .12);
}

@media (prefers-reduced-motion: reduce) {
  html.escuro body::before { animation: none; }
}


/* =========================================================================
   MURAL DE APROVAÇÕES
   Copiado VERBATIM de assets/site.css do Vade Mecum digital — os dois blocos
   originais inteiros (v16 APROVAÇÕES e v17 ESTEIRAS), sem reescrita.

   A primeira tentativa extraiu regra por regra com expressão regular e pegou
   72 de 132: o layout quebrou porque faltaram justamente as regras de grade e
   de posicionamento. Copiar o bloco fechado é o que garante que nada falta.

   Só estas três definições são nossas, para a seção não depender do sistema
   de cores do outro projeto:
   ========================================================================= */
.apv-sec.section--dark { background: #0b0e14; color: #fff; }
.apv-sec .m-hide { display: inline; }
.apv-sec .reveal { opacity: 1; transform: none; }

/* ===== v16: APROVAÇÕES — modelo aprovado pelo dono (mock de 11/08/2026) ====
   Cabeçalho + barra de números + filtros por carreira + palco (destaque grande
   com a foto sangrando à direita) ao lado da lista + faixa de chamada. Onde o
   mock tinha botão de vídeo, aqui o clique abre o CARD ORIGINAL publicado pela
   escola — é a prova que temos, e é melhor que vídeo nenhum. */
.apv-sec{position:relative;overflow:hidden;padding:clamp(56px,6vw,92px) 0 clamp(48px,5vw,78px);
  background:radial-gradient(1100px 620px at 50% 0%,rgba(24,64,112,.26),transparent 60%),
    linear-gradient(180deg,#071426 0%,#050f22 100%)}

/* --- cabeçalho ---------------------------------------------------------- */
.apv-cab{text-align:center;max-width:820px;margin:0 auto}
.apv-eyebrow{display:inline-flex;align-items:center;gap:14px;color:#e8b64c;font-size:.78rem;
  font-weight:850;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.apv-eyebrow::before,.apv-eyebrow::after{content:"";width:30px;height:2px;border-radius:1px;background:#e8b64c}
.apv-cab h2{font-size:clamp(1.9rem,3.6vw,3.05rem);line-height:1.1;letter-spacing:-.03em;
  color:#fff;margin:0 0 14px}
.apv-cab p{color:#b9c4d4;font-size:1.02rem;line-height:1.55;margin:0 auto;max-width:56ch}

/* --- barra de números --------------------------------------------------- */
.apv-selos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:820px;margin:26px auto 0;padding:0;border-radius:16px;
  border:1px solid rgba(232,182,76,.38);background:rgba(6,17,34,.55)}
.apv-selos li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 18px;text-align:center}
.apv-selos li + li{border-left:1px solid rgba(232,182,76,.28)}
.apv-selos b{font-size:2.3rem;line-height:1;font-weight:900;color:#e8b64c;font-variant-numeric:tabular-nums}
.apv-selos span{font-size:.82rem;line-height:1.35;color:#b9c4d4;max-width:22ch}

/* --- palco: destaque + lista -------------------------------------------- */
.apv-palco{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,1fr);gap:20px;
  align-items:stretch;margin-top:30px}
.apv-destaque{position:relative;overflow:hidden;min-height:430px;display:flex;align-items:center;border-radius:18px;
  border:1px solid rgba(232,182,76,.3);background:#08172c;box-shadow:0 20px 46px rgba(0,0,0,.4)}
.apv-destaque img{position:absolute;inset:0 0 0 auto;height:100%;width:62%;object-fit:cover;
  object-position:center 22%}
.apv-destaque::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#08172c 30%,rgba(8,23,44,.86) 46%,rgba(8,23,44,0) 72%)}
.apv-destaque.is-trocando img{animation:apv-entra .45s ease}
@keyframes apv-entra{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.apv-destaque-tx{position:relative;z-index:2;max-width:56%;padding:34px 30px 34px 34px}
.apv-selo{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 11px;border-radius:999px;
  border:1px solid rgba(232,182,76,.5);background:rgba(232,182,76,.1);color:#e8b64c;margin-bottom:20px}
.apv-selo svg{width:17px;height:17px}
.apv-selo b{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.apv-destaque-tx h3{margin:0 0 10px;color:#fff;font-size:clamp(1.5rem,2.3vw,2.1rem);
  line-height:1.15;letter-spacing:-.02em;font-weight:860}
.apv-destaque-tx p{margin:0;color:#e8b64c;font-size:1.02rem;font-weight:700}
.apv-vercard{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding-bottom:6px;
  color:#fff;font-size:.82rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid #e8b64c}
.apv-vercard:hover{color:#e8b64c}

.apv-lista{display:flex;flex-direction:column;gap:10px}
.apv-linha{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;
  padding:9px 16px 9px 9px;border-radius:14px;text-decoration:none;
  border:1px solid rgba(255,255,255,.09);background:rgba(8,23,44,.6);transition:.18s;cursor:pointer}
.apv-linha:hover{border-color:rgba(232,182,76,.5);background:rgba(11,30,56,.8)}
.apv-linha.is-on{border-color:rgba(232,182,76,.75);background:rgba(13,34,62,.9)}
.apv-linha[hidden]{display:none}
.apv-linha img{width:88px;height:88px;border-radius:10px;object-fit:cover;display:block}
.apv-linha strong{display:block;color:#fff;font-size:1rem;line-height:1.25;font-weight:800}
.apv-linha i{display:block;margin-top:5px;font-style:normal;color:#e8b64c;font-size:.82rem;line-height:1.35}
.apv-linha i b{color:#fff;font-weight:800}

/* --- faixa de chamada --------------------------------------------------- */
.apv-cta{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  margin-top:22px;padding:26px 30px;border-radius:18px;
  border:1px solid rgba(232,182,76,.3);background:rgba(6,17,34,.55)}
.apv-alvo{display:grid;place-items:center;width:64px;height:64px;color:#e8b64c;flex:0 0 auto}
.apv-alvo svg{width:56px;height:56px}
.apv-cta-tx strong{display:block;color:#fff;font-size:1.42rem;line-height:1.2;letter-spacing:-.02em}
.apv-cta-tx small{display:block;margin-top:7px;color:#b9c4d4;font-size:.92rem}
.apv-cta-acoes{display:flex;flex-direction:column;align-items:center;gap:12px}
.apv-cta-acoes .button{white-space:nowrap;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}
.apv-vertodos{display:inline-flex;align-items:center;gap:8px;padding:0 0 3px;border:0;background:none;
  cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;color:#e8b64c;
  border-bottom:1px solid rgba(232,182,76,.5)}
.apv-vertodos:hover{color:#fff}

/* --- galeria (as fotos de formatura) ------------------------------------ */
.apv-galeria{margin-top:30px;scroll-margin-top:90px}
.apv-galeria-rot{margin:0 0 14px;text-align:center;color:#8fa0b8;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase}
.apv-foto{cursor:zoom-in}
.apv-nota{margin:24px auto 0;text-align:center;font-size:.74rem;color:#7c8ba1;max-width:70ch}

/* --- lupa --------------------------------------------------------------- */
.apv-lupa{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;
  background:rgba(3,8,18,.92);opacity:0;transition:opacity .2s}
.apv-lupa.is-open{opacity:1}
.apv-lupa[hidden]{display:none}
.apv-lupa figure{margin:0;max-width:min(720px,92vw);text-align:center}
.apv-lupa img{max-width:100%;max-height:78vh;border-radius:14px;display:block;
  border:1px solid rgba(232,182,76,.35);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.apv-lupa figcaption{margin-top:14px;color:#e6ebf3;font-size:.92rem}
.apv-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(10,20,38,.8);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer}
body.apv-travado{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .apv-destaque.is-trocando img{animation:none}
  .apv-foto:hover img{transform:none}
}
@media (max-width:1080px){
  .apv-palco{grid-template-columns:1fr}
  .apv-destaque{min-height:360px}
  .apv-destaque-tx{max-width:58%}
}
@media (max-width:760px){
  .apv-sec{padding:44px 0 40px}
  .apv-cab h2{font-size:1.62rem}
  .apv-cab p{font-size:.92rem}
  .apv-eyebrow{font-size:.64rem;letter-spacing:.16em;gap:9px}
  .apv-eyebrow::before,.apv-eyebrow::after{width:16px}
  .apv-selos{grid-template-columns:1fr 1fr;margin-top:20px;border-radius:13px}
  .apv-selos li{padding:13px 10px;gap:3px}
  .apv-selos li + li{border-left:1px solid rgba(232,182,76,.28)}
  .apv-selos li:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid rgba(232,182,76,.28)}
  .apv-selos b{font-size:1.6rem}
  .apv-selos span{font-size:.7rem;max-width:26ch}
  /* destaque: foto em cima, texto embaixo — nada por trás das letras */
  .apv-destaque{min-height:0;display:block}
  .apv-destaque img{position:static;width:100%;height:230px;object-position:center 20%}
  .apv-destaque::after{inset:auto 0 0 0;height:150px;
    background:linear-gradient(180deg,rgba(8,23,44,0),#08172c 78%)}
  .apv-destaque-tx{max-width:none;padding:18px 18px 20px}
  .apv-selo{margin-bottom:14px;padding:6px 12px 6px 9px}
  .apv-selo b{font-size:.64rem}
  .apv-destaque-tx h3{font-size:1.25rem}
  .apv-destaque-tx p{font-size:.9rem}
  .apv-vercard{margin-top:16px;font-size:.74rem}
  .apv-lista{gap:9px;margin-top:12px}
  .apv-linha{grid-template-columns:74px 1fr;gap:12px;padding:8px 12px 8px 8px;border-radius:12px}
  .apv-linha img{width:74px;height:74px;border-radius:9px}
  .apv-linha strong{font-size:.88rem}
  .apv-linha i{font-size:.72rem;margin-top:3px}
  /* chamada final empilhada */
  .apv-cta{grid-template-columns:1fr;gap:14px;text-align:center;padding:20px 16px;margin-top:18px}
  .apv-alvo{width:44px;height:44px;margin:0 auto}
  .apv-alvo svg{width:40px;height:40px}
  .apv-cta-tx strong{font-size:1.12rem}
  .apv-cta-tx small{font-size:.84rem}
  .apv-cta-acoes{width:100%}
  .apv-cta-acoes .button{width:100%;justify-content:center}
  .apv-nota{font-size:.68rem;margin-top:18px}
}

/* Vozes: os depoimentos que viviam numa seção branca separada agora moram
   dentro das aprovações — prova social existe uma vez só na página. */
.apv-vozes{margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}
.apv-vozes-rot{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#8fa0b8;margin-bottom:22px}
.apv-vozes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.apv-voz{margin:0;border-left:2px solid rgba(232,182,76,.55);padding-left:16px}
.apv-voz p{margin:0 0 12px;color:#cfd8e6;font-size:.95rem;line-height:1.6}
.apv-voz footer strong{display:block;color:#fff;font-size:.85rem;font-weight:800}
.apv-voz footer span{display:block;margin-top:2px;color:#8fa0b8;font-size:.72rem}
@media (max-width:760px){
  .apv-vozes{margin-top:24px;padding-top:22px}
  .apv-vozes-grid{grid-template-columns:1fr;gap:16px}
  .apv-voz p{font-size:.88rem;margin-bottom:9px}
}



/* ===== v17: ESTEIRAS DE FOTOS (dono, 11/08/2026) =========================
   As turmas correm em duas faixas, uma para cada lado, no PC e no celular.
   No celular entra ainda uma faixa com os aprovados que têm nome, no lugar do
   palco. Laço fechado por duas cópias + translateX(-50%); segurar o dedo (ou
   parar o mouse em cima) pausa. As medidas vão no <img>: sem elas o Safari
   calcula largura ZERO antes de a imagem chegar e o ladrilho vira um risco. */
.apv-esteira{display:none}
.apv-esteira-faixa{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.apv-esteira-faixa + .apv-esteira-faixa{margin-top:12px}
.apv-esteira-trilha{display:flex;gap:12px;width:max-content;
  animation:apv-rola var(--dur,72s) linear infinite;will-change:transform}
.apv-esteira-faixa--volta .apv-esteira-trilha{--dur:84s;animation-direction:reverse}
.apv-esteira-faixa:hover .apv-esteira-trilha,
.apv-esteira-faixa:active .apv-esteira-trilha{animation-play-state:paused}
@keyframes apv-rola{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.apv-ladrilho{position:relative;flex:0 0 auto;display:block;height:210px;min-width:110px;
  border-radius:12px;overflow:hidden;line-height:0;border:1px solid rgba(232,182,76,.24);
  background:#0a1c38;box-shadow:0 10px 22px rgba(0,0,0,.35)}
.apv-ladrilho img{height:210px;width:auto;max-width:none;display:block;object-fit:cover;
  filter:saturate(.94) brightness(.95);transition:filter .2s}
.apv-ladrilho:hover img{filter:none}
.apv-ladrilho span{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  gap:2px;padding:22px 12px 9px;line-height:1.2;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(3,10,22,.95) 62%)}
.apv-ladrilho b{color:#fff;font-size:.74rem;font-weight:800}
.apv-ladrilho i{color:#e8b64c;font-style:normal;font-size:.64rem;font-weight:700}
.apv-esteira-dica{display:none;margin:12px 0 0;text-align:center;color:#8fa0b8;
  font-size:.72rem;letter-spacing:.08em}
.apv-galeria .apv-esteira-faixa{margin-inline:calc(50% - 50vw);width:100vw}

/* Movimento reduzido no sistema (no Windows: Configurações > Acessibilidade >
   Efeitos visuais > Efeitos de animação): a esteira não anda sozinha, mas
   continua rolável com o dedo/mouse — ninguém fica sem ver as fotos. Andar
   BEM devagar seria pior que parar: é justamente o que incomoda quem liga
   essa opção. */
@media (prefers-reduced-motion:reduce){
  .apv-esteira-trilha{animation:none}
  .apv-esteira-faixa{overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:thin;cursor:grab}
  .apv-ladrilho{scroll-snap-align:center}
}
@media (max-width:760px){
  /* no celular o palco, os depoimentos e a nota saem: a esteira já entrega a
     prova e o resto é rolagem a mais (dono, 11/08/2026) */
  .apv-palco,.apv-vertodos,.apv-vozes,.apv-nota{display:none}
  .apv-esteira{display:block;margin:22px calc(50% - 50vw) 12px;width:100vw}
  .apv-esteira-dica{display:block}
  .apv-galeria{margin-top:0}
  .apv-galeria-rot{display:none}
  .apv-esteira-faixa + .apv-esteira-faixa{margin-top:10px}
  .apv-esteira-trilha{gap:10px;--dur:46s}
  .apv-esteira-faixa--volta .apv-esteira-trilha{--dur:54s}
  .apv-ladrilho{height:180px;min-width:96px;border-radius:11px}
  .apv-ladrilho img{height:180px}
  .apv-ladrilho b{font-size:.7rem}
  .apv-ladrilho i{font-size:.6rem}
  .apv-cta{margin-top:22px}
}

/* "Uso número internacional" (dono, 11/08/2026): caixinha discreta embaixo de
   qualquer campo de telefone. O fone-br.js cria uma quando o formulário não
   traz — por isso o estilo mora aqui, e não junto de cada tela. */
.fone-intl{display:flex;align-items:center;gap:7px;margin:6px 2px 0;
  font-size:12.5px;line-height:1.3;color:var(--muted,#7a8797);cursor:pointer;
  user-select:none;flex:1 1 100%}
.fone-intl input{width:15px;height:15px;margin:0;accent-color:#e8b64c;cursor:pointer;flex:0 0 auto}
.fone-intl:hover{color:var(--ink,#25313f)}
/* No cadastro o campo de telefone divide a linha com o nome: a caixinha fica
   alinhada à DIREITA, embaixo do campo (pedido do dono, 11/08/2026). E não pode
   herdar o .form-card label (grid + negrito), que empilhava quadradinho e texto. */
.form-card .fone-intl{justify-content:flex-end;font-weight:500;font-size:12px;
  color:var(--muted);margin:7px 0 0}


/* ─────────────────────────────────────────────────────────────────────────
   A BARRA DO SITE SOME NO CELULAR ONDE ELA ATRAPALHA

   Vale nas páginas que ligam $topoEnxuto: a de cada vade mecum, o checkout,
   a tela do cartão e a do pedido. Nelas a barra custava 113px do alto da
   tela e só oferecia caminhos para SAIR — no meio de uma compra, isso é o
   contrário do que a tela precisa fazer.

   MORA AQUI, e não no checkout.css: a página do produto carrega apenas o
   estilo.css, e foi por isso que a primeira tentativa não teve efeito nela.
   Aqui a regra fica junto do resto de .cn-topo, que é onde se procura.

   No desktop a barra continua: lá sobra espaço, e a marca ajuda a confiar.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 46rem) {
  .cn-topo--enxuto { display: none; }
}