/* ==========================================================================
   POAB — landing pública (rota /). Identidade vinho/dourado/areia.
   Sem CDN, sem fonte externa: display serifado do próprio sistema.
   ========================================================================== */

.corpo-landing { background-image: none; background: var(--areia-2); }
main.landing { flex: 1; width: 100%; padding: 0; }
.faixa-interna { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1.4rem; }

/* micro-animações -------------------------------------------------------- */
@keyframes surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surgir-lado { from { opacity: 0; transform: translateX(26px) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; overflow: hidden; color: #f8eee0;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(185, 143, 52, .30), transparent 62%),
    linear-gradient(155deg, #6a1626 0%, var(--vinho-escuro) 58%, #2c060f 100%);
  padding: clamp(3rem, 2rem + 6vw, 6.5rem) 0 clamp(3.4rem, 2rem + 7vw, 6rem);
  border-bottom: 3px solid var(--ouro);
}
.hero-textura {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 9px),
    radial-gradient(620px 300px at 6% 96%, rgba(224, 193, 121, .18), transparent 70%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.hero-grade {
  position: relative; display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
.hero-texto { animation: surgir .7s ease-out both; }
.hero-etiqueta {
  display: inline-block; margin: 0 0 1.1rem; padding: .32rem .95rem; border-radius: 999px;
  border: 1px solid rgba(224, 193, 121, .5); background: rgba(224, 193, 121, .10);
  font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ouro-claro);
}
.hero-titulo {
  font-family: var(--serif); font-weight: 600; color: #fdf6ea;
  font-size: clamp(2.6rem, 1.6rem + 5.2vw, 4.6rem); line-height: 1.03;
  letter-spacing: -.025em; margin: 0 0 1.1rem; text-wrap: balance;
}
.hero-titulo em {
  font-style: normal; color: var(--ouro-claro); position: relative;
  background: linear-gradient(180deg, #f6e5b6, #d3ab55);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* chip de contagem regressiva (texto escrito por JS no fim de inicio.html) */
.chip-contagem {
  /* flex + fit-content (e não inline-flex): a .hero-etiqueta acima é
     inline-block, então um chip inline-level ficaria colado ao lado dela.
     Assim ele ocupa a própria linha sem esticar até a borda. */
  display: flex; width: fit-content; align-items: center; gap: .5rem;
  margin: 0 0 1.15rem; padding: .35rem .8rem;
  border: 1px solid rgba(224, 193, 121, .45); border-radius: 4px;
  background: rgba(224, 193, 121, .16); color: var(--ouro-claro, #f3e2ae);
  font-size: .82rem; font-weight: 600; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.chip-contagem[hidden] { display: none; }
.chip-pulso {
  width: .5rem; height: .5rem; flex: none; border-radius: 50%;
  background: #e0c179; animation: chip-pulsar 2.4s ease-in-out infinite;
}
@keyframes chip-pulsar {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

.hero-subtitulo {
  font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); line-height: 1.62;
  color: rgba(248, 238, 224, .84); max-width: 52ch; margin: 0 0 1.9rem;
}
.hero-acoes { display: flex; gap: .9rem; flex-wrap: wrap; margin: 0 0 1rem; }
.hero-acoes.centralizadas { justify-content: center; }
.btn-fantasma {
  background: rgba(253, 246, 234, .06); color: #fdf6ea;
  border: 1px solid rgba(240, 226, 194, .55); backdrop-filter: blur(2px);
}
.btn-fantasma:hover { background: rgba(253, 246, 234, .14); color: #fff; }
.hero-nota { font-size: .84rem; color: rgba(240, 226, 194, .6); margin: 0; }

.hero-arte { display: grid; place-items: center; animation: surgir-lado .85s .1s ease-out both; }

/* gravura da balança: marca-d'água de traço fino no canto superior direito.
   Fica atrás de tudo (.hero-grade é position:relative) e o .hero corta o que
   sobra com o overflow:hidden dele. */
.gravura-balanca {
  position: absolute; top: -3rem; right: -3.5rem;
  width: clamp(230px, 32vw, 420px); height: auto;
  opacity: .10; pointer-events: none;
}

/* -------------------------------------------- cartão-produto do hero (mock) */

.hcard {
  width: min(100%, 420px); text-align: left; overflow: hidden;
  background: #fdf9f0; color: #2b2119;
  border: 1px solid rgba(216, 180, 92, .55); border-radius: 10px;
  box-shadow: 0 22px 54px -16px rgba(0, 0, 0, .55);
  font-size: .84rem; line-height: 1.45;
}
.hcard-topo {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: #5b1220; color: #f3e2ae; padding: .6rem .95rem;
  font-size: .76rem; font-weight: 600;
}
.hcard-crono {
  font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap;
  background: rgba(0, 0, 0, .25); border-radius: 4px; padding: .16rem .5rem;
}
.hcard-corpo { padding: .95rem 1rem .5rem; }
.hcard-questao {
  margin: 0 0 .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #8c6b1f;
}
.hcard-enunciado { margin: 0 0 .65rem; font-size: .82rem; }
.hcard-alt {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 .38rem; padding: .4rem .6rem; font-size: .79rem;
  border: 1px solid #e4d9c4; border-radius: 5px;
}
.hcard-alt b { flex: none; font-weight: 700; }
.hcard-alt em {
  margin-left: auto; font-style: normal; font-size: .63rem;
  font-weight: 700; white-space: nowrap;
}
.hcard-alt-errada { background: #f7e3de; border-color: #c97a66; }
.hcard-alt-errada em { color: #8c2b1e; }
.hcard-alt-certa { background: #e2efe5; border-color: #6fa382; }
.hcard-alt-certa em { color: #1c6349; }
.hcard-pe { margin-top: .45rem; padding: .6rem 1rem .95rem; border-top: 1px dashed #e4d9c4; }
.hcard-pe-titulo {
  margin: 0 0 .45rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #8c6b1f;
}
.hcard-barra { display: flex; align-items: center; gap: .55rem; margin: 0 0 .32rem; font-size: .73rem; }
.hcard-barra:last-child { margin-bottom: 0; }
.hcard-area { width: 6.4rem; flex: none; }
.hcard-trilho { flex: 1; height: .45rem; background: #efe6d4; border-radius: 999px; overflow: hidden; }
.hcard-trilho i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #d8b45c, #9c7524); }
.hcard-pct { width: 2.6rem; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* --------------------------------------------------------------- números */

.numeros { background: var(--vinho-escuro); color: #f6ead9; border-bottom: 1px solid rgba(224, 193, 121, .25); }
.numeros-grade {
  display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr);
  background: rgba(224, 193, 121, .22);
}
/* 5º ladrilho ("N simulados corrigidos", só com prova social real >= 50 —
   ver painel.py:inicio): a grade ganha uma coluna em vez de deixar a última
   linha do desktop com 3 buracos vazios. */
.numeros-grade:has(.numero-item:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
.numero-item {
  background: var(--vinho-escuro); padding: 1.7rem 1.3rem; text-align: center;
  display: flex; flex-direction: column; gap: .35rem; align-items: center;
}
.numero-item strong {
  font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1;
  color: var(--ouro-claro); letter-spacing: -.02em;
}
.numero-item span { font-size: .86rem; color: rgba(246, 234, 217, .72); max-width: 26ch; line-height: 1.45; }
/* rodapé da faixa: link discreto para a página que abre a conta do acervo */
.numeros-pe { padding-top: 1rem; padding-bottom: 1.2rem; text-align: center; }
.numeros-link {
  font-size: .82rem; font-weight: 600; color: var(--ouro-claro);
  text-decoration: underline; text-decoration-color: rgba(224, 193, 121, .45);
  text-underline-offset: 4px;
}
.numeros-link:hover { color: #f6e6bd; text-decoration-color: rgba(224, 193, 121, .9); }

/* --------------------------------------------------------------- seções */

.secao { padding: clamp(3rem, 2rem + 4vw, 5.4rem) 0; }
.secao-passos { background: linear-gradient(180deg, var(--areia) 0%, var(--areia-2) 100%); border-top: 1px solid rgba(185, 143, 52, .22); border-bottom: 1px solid rgba(185, 143, 52, .22); }
.secao-cabeca { max-width: 46ch; margin: 0 0 2.4rem; }
.secao-cabeca h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.35rem); line-height: 1.18;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}

.cartoes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.cartao-recurso {
  position: relative; background: var(--areia-2); border: var(--borda); border-radius: var(--raio);
  padding: 1.6rem 1.5rem; box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cartao-recurso:hover {
  transform: translateY(-4px); border-color: rgba(185, 143, 52, .65);
  box-shadow: 0 22px 40px -26px rgba(58, 11, 20, .6);
}
.cartao-recurso h3 { font-family: var(--serif); font-size: 1.18rem; margin: 0 0 .5rem; }
.cartao-recurso p { margin: 0; font-size: .95rem; color: var(--tinta-suave); }
.icone {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px;
  margin-bottom: 1rem; background: linear-gradient(160deg, rgba(185, 143, 52, .20), rgba(91, 18, 32, .12));
  border: 1px solid rgba(185, 143, 52, .38);
}
.icone svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: var(--vinho); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cartao-recurso .link-fase2 {
  display: inline-block; margin-top: .85rem; font-size: .92rem; font-weight: 700;
  color: var(--vinho); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cartao-recurso .link-fase2:hover { color: var(--vinho-escuro); }
.cartao-breve { background: linear-gradient(170deg, #fffdf8, #f3e9d7); }
.etiqueta-breve {
  position: absolute; top: 1.1rem; right: 1.1rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #6b4e12;
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro)); padding: .22rem .6rem; border-radius: 999px;
}

/* -------------------------------------------------------------- quem fez */

/* Faixa de credibilidade entre os cartões de recursos e o "como funciona".
   Degradê de areia da mesma família da .secao-passos (invertido), para separar
   do bloco de cartões sem inventar cor nova. */
.secao-quemfez {
  background: linear-gradient(180deg, var(--areia-2) 0%, var(--areia) 100%);
  border-top: 1px solid rgba(185, 143, 52, .22);
}
.quemfez-caixa { max-width: 64ch; }
.quemfez-caixa h2 em { font-style: italic; color: var(--vinho); }
.quemfez-texto p { margin: 0 0 1rem; font-size: .98rem; line-height: 1.72; color: var(--tinta-suave); }
.quemfez-texto p:last-child { margin-bottom: 0; }
.quemfez-texto strong { color: var(--tinta); font-weight: 700; }
.quemfez-assinatura {
  margin-top: 1.9rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(185, 143, 52, .28);
}
/* Anel dourado duplo: o mesmo par de círculos do selo "P" do topo — anel
   grosso colado na foto, folga transparente e anel fino por fora. Feito com
   moldura + padding (e não com outline-offset) para o anel externo sair
   redondo em navegador antigo também. */
.quemfez-moldura {
  display: inline-block; padding: 4px; border-radius: 50%;
  border: 1px solid rgba(185, 143, 52, .55);
}
.quemfez-foto {
  display: block; width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--ouro);
}
.quemfez-nome {
  margin: .9rem 0 0; font-family: var(--serif); font-size: 1rem;
  font-weight: 600; color: var(--vinho);
}

/* ---------------------------------------------------------------- passos */

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: passo; }
.passo { position: relative; padding-left: 4.1rem; }
.passo h3 { font-family: var(--serif); font-size: 1.2rem; margin: .1rem 0 .45rem; }
.passo p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
.passo-numero {
  position: absolute; left: 0; top: -.15rem; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
  color: var(--ouro-claro); background: var(--vinho); box-shadow: 0 0 0 4px rgba(185, 143, 52, .22);
}

/* ---------------------------------------------------------- preços na home */

.grade-precos {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 1.4rem;
}
.cartao-preco {
  background: var(--areia-2); border: var(--borda); border-radius: var(--raio);
  padding: 1.2rem; box-shadow: var(--sombra);
}
.cartao-preco h3 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .3rem; }
.cartao-preco .valor {
  font-family: var(--serif); font-size: 1.9rem; color: var(--vinho); line-height: 1.1;
  margin: 0 0 .4rem;
}
.cartao-preco .valor span { font-family: var(--sans); font-size: .85rem; color: var(--tinta-suave); }
.cartao-preco p:last-child { margin: 0; font-size: .88rem; color: var(--tinta-suave); }
.preco-destaque { border-color: var(--ouro); box-shadow: 0 16px 34px -24px rgba(185, 143, 52, .85); }

/* ------------------------------------------------------------- fechamento */

.fechamento {
  color: #f8eee0; text-align: center; border-top: 3px solid var(--ouro);
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(185, 143, 52, .28), transparent 65%),
    linear-gradient(150deg, var(--vinho) 0%, var(--vinho-escuro) 100%);
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
}
.fechamento-interno { max-width: 720px; }
.fechamento h2 {
  color: #fdf6ea; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); line-height: 1.18;
  margin: 0 auto .8rem; max-width: 22ch; text-wrap: balance;
}
.fechamento-texto { color: rgba(248, 238, 224, .82); margin: 0 auto 1.8rem; max-width: 46ch; }
.aviso-honesto { margin: 1.9rem auto 0; max-width: 58ch; font-size: .78rem; line-height: 1.55; color: rgba(240, 226, 194, .58); }

/* ------------------------------------------- acervo (a matemática, /acervo) */

/* a faixa da conta vem logo abaixo: sem isto sobram 5rem de vazio entre as duas */
.acervo-abertura { padding-bottom: clamp(1.8rem, 1rem + 2vw, 2.8rem); }
.acervo-cabeca { max-width: 54ch; margin-bottom: 0; }
.acervo-cabeca h1 { margin: 0 0 .9rem; text-wrap: balance; }
.acervo-cabeca h1 em { font-style: italic; color: var(--vinho); }

/* faixa da conta: mesma linguagem da faixa de números da landing */
.acervo-conta {
  background: var(--vinho-escuro); color: #f6ead9;
  border-top: 1px solid rgba(224, 193, 121, .25);
  border-bottom: 1px solid rgba(224, 193, 121, .25);
  padding: clamp(1.9rem, 1.2rem + 2.6vw, 3rem) 0;
}
.acervo-formula {
  margin: 0; max-width: 60ch; font-family: var(--serif);
  font-size: clamp(1.04rem, .94rem + .7vw, 1.4rem); line-height: 1.58;
}
.acervo-formula strong { color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.acervo-conta .acervo-fonte {
  margin: 1rem 0 0; font-family: var(--sans); font-size: .78rem;
  color: rgba(246, 234, 217, .62);
}

/* Corpo de leitura mais estreito que a faixa de 1140px — a medida vai nos
   BLOCOS, e não na faixa: estreitar a faixa a centralizaria de novo e o texto
   sairia desalinhado da abertura e da faixa da conta, que começam na borda. */
.acervo-corpo h2 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.acervo-corpo p { color: var(--tinta-suave); }
.acervo-bloco { max-width: 820px; margin: 0 0 2.6rem; }
.acervo-bloco:last-child { margin-bottom: 0; }
.acervo-legenda {
  caption-side: bottom; text-align: left; padding-top: .75rem;
  font-size: .82rem; line-height: 1.5; color: var(--tinta-suave);
}
.tabela th.acervo-num, .tabela td.acervo-num {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.acervo-trilho {
  display: block; width: 100%; height: .5rem; margin-top: .35rem;
  background: var(--areia-3); border-radius: 999px; overflow: hidden;
}
.acervo-trilho i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #d8b45c, #9c7524);
}
.acervo-acoes { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 940px) {
  .hero-grade { grid-template-columns: 1fr; text-align: left; }
  /* o cartão-produto empilha ABAIXO do texto (a balança antiga vinha acima).
     A entrada também deixa de vir "de lado": o cartão é bem mais largo que a
     balança antiga, e os 26px de translateX do surgir-lado encostavam na borda
     durante a animação. Sobe reto, reaproveitando o keyframe que já existe. */
  .hero-arte { order: 0; justify-items: stretch; animation-name: surgir; }
  .hcard { width: min(100%, 460px); margin: 0 auto; }
  .gravura-balanca { width: clamp(200px, 46vw, 300px); top: -2rem; right: -2.5rem; }
  .numeros-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .faixa-interna { padding: 0 1.1rem; }
  .hero { padding-top: 2.4rem; }
  .hero-titulo br { display: none; }
  .hero-acoes .btn { width: 100%; }
  .hero-acoes { gap: .7rem; }
  .numero-item { padding: 1.3rem .9rem; }
  .numero-item span { font-size: .8rem; }
  .passo { padding-left: 3.6rem; }
  .passo-numero { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-texto, .hero-arte { animation: none !important; }
  .cartao-recurso:hover { transform: none; }
  /* vem depois da regra base, mesma especificidade: dispensa !important */
  .chip-pulso { animation: none; }
}

/* ==========================================================================
   VIDRO E LUZ — acabamento da home (rota /)
   --------------------------------------------------------------------------
   Tudo daqui para baixo é escopado em `.corpo-vidro`, classe que SÓ a
   inicio.html põe no <body>. A `.corpo-landing` também veste a /acervo, que
   segue exatamente como estava — por isso o escopo novo, e não o antigo.

   Ideia: o topo da página vira UM campo de vinho contínuo (cabeçalho + faixa
   do gabarito + herói), atravessado por feixes de luz diagonais; o que está
   por cima (barra do menu, faixa, pílulas, cartão do simulado e o botão
   secundário) vira painel de vidro — fundo translúcido, borda clara de 1px,
   brilho interno no topo e desfoque do fundo.

   Contraste: todos os pares texto/fundo desta folha foram medidos com
   composição de camadas (WCAG 2.1). Mínimo respeitado: 4.5:1 no texto corrido
   e 3:1 no título grande. Números em docs/design/home-vidro/NOTAS.md.
   Nenhuma cor de marca nova: o dourado é o mesmo par claro/escuro da paleta e
   o vinho é o mesmo vinho, só com mais amplitude entre a ponta escura e a
   clara do degradê.
   ========================================================================== */

.corpo-vidro {
  --luz-vinho-1: #4a0f1e;      /* ponta escura do campo */
  --luz-vinho-2: #7a1a33;      /* ponta clara do campo  */
  --luz-ouro-1: #f3d27a;
  --luz-ouro-2: #c9a032;
  /* dourado do título grande — mais claro, porque ele fica em cima do feixe */
  --luz-ouro-titulo-1: #f9edc9;
  --luz-ouro-titulo-2: #e4c273;
  /* fundo OPACO do vidro: é o que vale onde não há backdrop-filter (fallback
     e celular). Onde há desfoque, o @supports mais abaixo baixa a opacidade. */
  --vidro: rgba(255, 255, 255, .12);
  --vidro-forte: rgba(255, 255, 255, .16);
  --vidro-borda: rgba(255, 255, 255, .22);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .25);
  --vidro-sombra: 0 18px 46px -22px rgba(0, 0, 0, .7);
  --vidro-raio: 16px;
}

/* ---------------------------------------------- campo de vinho contínuo */

/* O cabeçalho é global (poab.css). Aqui ele só recebe o vinho profundo do
   campo e um par de feixes; a barra interna é que vira o painel de vidro. */
.corpo-vidro .topo {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #3d0c18 0%, var(--luz-vinho-1) 100%);
}
.corpo-vidro .topo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(104deg, transparent 46%, rgba(255, 255, 255, .10) 52%, transparent 58%),
    linear-gradient(104deg, transparent 68%, rgba(243, 210, 122, .10) 73%, transparent 79%);
}
.corpo-vidro .topo-interno {
  position: relative; z-index: 1;
  /* largura em % (e não max-width sozinho) para o painel descolar das bordas
     em QUALQUER largura, inclusive no celular, sem estourar a rolagem. */
  width: calc(100% - 1.8rem); max-width: var(--largura);
  margin: .6rem auto; padding: .7rem 1.1rem;
  border-radius: var(--vidro-raio);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-sombra);
}

/* Faixa do gabarito: o <aside> vira a faixa cheia de vinho e o <p> de dentro
   vira o painel de vidro. Zero mudança de HTML. */
.corpo-vidro .faixa-gabarito {
  max-width: none; margin: 0; border: 0; border-radius: 0;
  padding: 0 .9rem .9rem;
  background: linear-gradient(180deg, var(--luz-vinho-1) 0%, #4f1122 100%);
  font-size: .93rem; color: #fdf6ea;
}
.corpo-vidro .faixa-gabarito p {
  width: 100%; max-width: var(--largura); margin: 0 auto;
  padding: .62rem 1.1rem; border-radius: 14px;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), 0 12px 30px -20px rgba(0, 0, 0, .7);
}
.corpo-vidro .faixa-gabarito a {
  color: var(--luz-ouro-1); text-decoration-color: rgba(243, 210, 122, .55);
}
.corpo-vidro .faixa-gabarito a:hover { color: #f8e2ab; }

/* Herói: mesmo campo, degradê com mais amplitude e dois halos dourados. */
.corpo-vidro .hero {
  background:
    radial-gradient(980px 540px at 82% 2%, rgba(243, 210, 122, .18), transparent 64%),
    radial-gradient(720px 480px at 6% 98%, rgba(201, 160, 50, .14), transparent 72%),
    linear-gradient(158deg, #4f1122 0%, var(--luz-vinho-2) 46%, var(--luz-vinho-1) 100%);
}

/* Feixes de luz diagonais. Reaproveita a camada de textura que já existia no
   HTML (.hero-textura, aria-hidden). O `inset` negativo dá folga para o
   deslize lateral sem descolar da borda — o overflow do .hero corta o resto. */
.corpo-vidro .hero-textura {
  inset: -8% -10%; opacity: 1;
  background-image:
    linear-gradient(104deg, transparent 28%, rgba(255, 214, 184, .12) 35%,
                    rgba(255, 255, 255, .22) 41%, rgba(255, 196, 158, .10) 47%, transparent 55%),
    linear-gradient(104deg, transparent 57%, rgba(243, 210, 122, .15) 62%,
                    rgba(255, 255, 255, .13) 66%, transparent 74%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px),
    radial-gradient(660px 340px at 14% 100%, rgba(243, 210, 122, .16), transparent 72%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  animation: deslizar-feixes 22s ease-in-out infinite alternate;
}
@keyframes deslizar-feixes {
  from { transform: translate3d(-1.6%, 0, 0); opacity: .82; }
  to   { transform: translate3d(1.6%, 0, 0);  opacity: 1; }
}

/* Balança: mesma gravura de sempre, um pouco mais presente e com halo dourado. */
.corpo-vidro .gravura-balanca {
  opacity: .16;
  filter: drop-shadow(0 0 22px rgba(243, 210, 122, .35));
}

/* ------------------------------------------------------- pílulas de vidro */

.corpo-vidro .hero-etiqueta,
.corpo-vidro .chip-contagem {
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), 0 10px 26px -20px rgba(0, 0, 0, .8);
  color: #f3e2ae;
}
.corpo-vidro .chip-contagem { border-radius: 999px; }
.corpo-vidro .chip-pulso { background: var(--luz-ouro-1); box-shadow: 0 0 8px rgba(243, 210, 122, .8); }

/* ------------------------------------------------------------- tipografia */

/* Mesmo tamanho, mesma família, mesmo texto: só o dourado do degradê muda. */
.corpo-vidro .hero-titulo em {
  /* Par PRÓPRIO do título, mais claro que o dos botões: o feixe de luz passa
     por baixo do "prova real" e, nas telas largas (1600/1920), o vinho ali
     chega quase ao rosa. Com o par dos botões (#f3d27a → #c9a032) a ponta
     escura caía a 2,75:1, abaixo do mínimo de 3:1 do texto grande. Medido em
     1024→2560 px; números em docs/design/home-vidro/NOTAS.md. */
  background: linear-gradient(100deg, var(--luz-ouro-titulo-1), var(--luz-ouro-titulo-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Os dois textos claros do herói ganharam opacidade: o halo do botão dourado e
   os feixes clareiam o vinho por baixo deles, e no PIOR ponto da caixa (é assim
   que a medição afere) .84 e .60 caíam abaixo do mínimo de 4.5:1. */
.corpo-vidro .hero-subtitulo { color: rgba(250, 242, 232, .95); }
.corpo-vidro .hero-nota { color: rgba(245, 234, 210, .95); }

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

.corpo-vidro .hero .btn-ouro,
.corpo-vidro .fechamento .btn-ouro,
.corpo-vidro .topo .btn-ouro {
  background: linear-gradient(135deg, var(--luz-ouro-1) 0%, var(--luz-ouro-2) 100%);
  color: #3a0b14;  /* 6.91:1 no ponto mais escuro do degradê */
  border-color: rgba(255, 240, 200, .45);
}
.corpo-vidro .hero .btn-ouro,
.corpo-vidro .fechamento .btn-ouro {
  box-shadow: 0 0 0 1px rgba(255, 244, 214, .2),
              0 10px 26px -10px rgba(243, 210, 122, .5),
              0 0 34px -10px rgba(243, 210, 122, .38);
}
.corpo-vidro .hero .btn-ouro:hover,
.corpo-vidro .fechamento .btn-ouro:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255, 244, 214, .3),
              0 12px 30px -8px rgba(243, 210, 122, .7),
              0 0 54px -4px rgba(243, 210, 122, .6);
}
.corpo-vidro .btn-fantasma {
  background: var(--vidro-forte); border-color: var(--vidro-borda); color: #fdf6ea;
  box-shadow: var(--vidro-brilho), 0 12px 28px -20px rgba(0, 0, 0, .8);
}
.corpo-vidro .btn-fantasma:hover { background: rgba(255, 255, 255, .22); }

/* -------------------------------------------- cartão do simulado em vidro */

.corpo-vidro .hcard {
  /* fallback SEM desfoque: vidro com pigmento de vinho, e não branco puro —
     o branco puro somado ao feixe de luz que passa por baixo derruba o texto
     miúdo do cartão abaixo de 4.5:1 (medido). */
  background: rgba(58, 11, 20, .52); color: #fbf1e2;
  border: 1px solid var(--vidro-borda); border-radius: 18px;
  box-shadow: var(--vidro-brilho), 0 28px 64px -22px rgba(0, 0, 0, .75);
}
.corpo-vidro .hcard-topo {
  background: rgba(0, 0, 0, .38); color: #f7dd9b;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.corpo-vidro .hcard-crono { background: rgba(0, 0, 0, .32); }
.corpo-vidro .hcard-questao,
.corpo-vidro .hcard-pe-titulo { color: #f7dd9b; }
.corpo-vidro .hcard-enunciado { color: rgba(251, 241, 226, .92); }
.corpo-vidro .hcard-alt {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2);
  color: #f7ede0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.corpo-vidro .hcard-alt-errada { background: rgba(206, 58, 48, .40); border-color: rgba(255, 150, 134, .5); }
.corpo-vidro .hcard-alt-errada em { color: #ffd4c9; }
.corpo-vidro .hcard-alt-certa { background: rgba(30, 170, 105, .40); border-color: rgba(126, 226, 173, .5); }
.corpo-vidro .hcard-alt-certa em { color: #bff2d6; }
.corpo-vidro .hcard-pe { border-top: 1px dashed rgba(255, 255, 255, .22); }
.corpo-vidro .hcard-trilho { background: rgba(255, 255, 255, .16); }
.corpo-vidro .hcard-trilho i {
  background: linear-gradient(90deg, var(--luz-ouro-2), var(--luz-ouro-1));
  box-shadow: 0 0 10px rgba(243, 210, 122, .65);
}
.corpo-vidro .hcard-pct { color: var(--luz-ouro-1); }

/* ------------------------------------------------------- vidro de verdade */

/* O desfoque entra SÓ onde o navegador o suporta; sem ele, ficam valendo os
   fundos mais opacos declarados acima (que é o fallback pedido). */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .corpo-vidro .topo-interno,
  .corpo-vidro .faixa-gabarito p,
  .corpo-vidro .hero-etiqueta,
  .corpo-vidro .chip-contagem,
  .corpo-vidro .btn-fantasma {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
  .corpo-vidro .topo-interno,
  .corpo-vidro .faixa-gabarito p,
  .corpo-vidro .hero-etiqueta,
  .corpo-vidro .chip-contagem { background: rgba(255, 255, 255, .08); }
  .corpo-vidro .btn-fantasma { background: rgba(255, 255, 255, .11); }
  /* O cartão NÃO entra na lista acima, e a ausência é de propósito: o
     `.hero-arte` que o embrulha tem animação de transform, o que faz dele uma
     raiz de fundo — um `backdrop-filter` no cartão não enxergaria o feixe e
     não filtraria nada (medido: mudar o brightness não mexeu um pixel sequer).
     Declará-lo seria peso de compositor sem um pixel de resultado. O pigmento
     de vinho fica então no PRÓPRIO fundo do cartão: assim o contraste do texto
     miúdo não depende do compositor. */
  .corpo-vidro .hcard { background: rgba(58, 11, 20, .42); }
}

/* --------------------------------------------------------------- celular */

/* Até 768px o desfoque sai de cena: `backdrop-filter` numa área grande custa
   caro no aparelho e é o primeiro suspeito de rolagem travada. Sem ele o
   painel precisa de fundo semiopaco, senão o vidro some no vinho. Vem DEPOIS
   do @supports de propósito — é ele que tem de ganhar aqui. */
@media (max-width: 768px) {
  .corpo-vidro .topo-interno,
  .corpo-vidro .faixa-gabarito p,
  .corpo-vidro .hero-etiqueta,
  .corpo-vidro .chip-contagem,
  .corpo-vidro .btn-fantasma {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .corpo-vidro .topo-interno { background: rgba(255, 255, 255, .11); padding: .65rem .85rem; }
  .corpo-vidro .faixa-gabarito p { background: rgba(255, 255, 255, .11); }
  /* pílula e botão secundário deixam de ser vidro BRANCO: sem o desfoque, o
     branco somado ao feixe clareava o fundo e derrubava o texto para 3,3:1.
     Vinho semiopaco com a mesma borda clara mantém o desenho e devolve o
     contraste (medido). */
  .corpo-vidro .hero-etiqueta,
  .corpo-vidro .chip-contagem { background: rgba(58, 11, 20, .5); }
  .corpo-vidro .btn-fantasma { background: rgba(58, 11, 20, .5); }
  .corpo-vidro .btn-fantasma:hover { background: rgba(58, 11, 20, .68); }
  /* feixes mais discretos: em tela estreita eles passam por baixo de TODO o
     texto do herói, e não só das margens */
  .corpo-vidro .hero-textura { opacity: .5; }
  /* o cartão empilha embaixo do texto e cobre a largura toda: com fundo só
     translúcido o texto brigaria com os feixes que passam por trás. */
  .corpo-vidro .hcard { background: rgba(97, 26, 50, .88); }
  /* feixes parados: animação de fundo em tela pequena é bateria, não desenho */
  .corpo-vidro .hero-textura { animation: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* poab.css já derruba tudo com `*`; fica declarado aqui também para quem
     ler esta folha isolada saber que o feixe não se mexe. */
  .corpo-vidro .hero-textura { animation: none; transform: none; }
}

/* ------------------------------------------------------- moldura de foco */

/* O `:focus-visible` global do poab.css é um anel de UMA cor: ouro `#b98f34`.
   Dentro do campo de vinho ele encosta no halo dourado dos botões do herói —
   dourado contra dourado — e o contraste do INDICADOR caía a 2,15:1 no botão
   dourado e a 2,74:1 no "Entrar", abaixo dos 3:1 do SC 1.4.11. Nas faixas de
   areia da mesma página o mesmo ouro cai a 2,5:1 contra o papel claro (isso é
   anterior a esta obra e vale para o app inteiro; aqui só a home é corrigida —
   o poab.css global não é tocado).

   O conserto é uma regra só, em duas leituras: o anel fica ESCURO por padrão
   (as faixas de areia) e CLARO nas seis faixas de vinho da home (topo, faixa
   do gabarito, herói, números, fechamento e rodapé) mais o atalho de pular.
   Mesma espessura, mesmo offset, mesma forma do anel de sempre: só a cor muda.
   Medido depois, nos 22 focáveis da home: pior caso 5,73:1 (botão dourado).
   Ferramenta: docs/design/home-vidro/medir_foco.py. */
.corpo-vidro :focus-visible { outline-color: #3a0b14; }
.corpo-vidro .topo :focus-visible,
.corpo-vidro .faixa-gabarito :focus-visible,
.corpo-vidro .hero :focus-visible,
.corpo-vidro .numeros :focus-visible,
.corpo-vidro .fechamento :focus-visible,
.corpo-vidro .rodape :focus-visible,
.corpo-vidro .pular:focus-visible { outline-color: #fdf6ea; }

/* O atalho "Pular para o conteúdo" aparecia grudado no canto, EM CIMA da
   faixa de ouro de 4px: metade do anel caía no dourado e metade no vinho, e
   nenhuma cor única passa nos dois ao mesmo tempo (medido: 1,28:1). Descolado
   do canto, ele fica inteiro sobre o vinho e o anel claro sobra. */
.corpo-vidro .pular { top: .85rem; border-radius: var(--raio-p); }
.corpo-vidro .pular:focus { left: .85rem; }

/* --------------------------------------------------------- "Criar conta" */

/* Defeito anterior a esta obra, corrigido aqui porque a barra do topo é da
   mesma frente: `.menu a { padding: .3rem 0 }` (poab.css) tem especificidade
   maior que `.btn-mini`, então o botão "Criar conta" ficava sem respiro
   horizontal nenhum — o texto encostava na borda. O conserto é escopado na
   home; o poab.css global não é tocado. */
.corpo-vidro .menu .btn-mini { padding: .45rem 1rem; }

/* Da mesma família, achado ao medir o foco no celular: até 768px o
   `.faixa-interna { padding: 0 1.1rem }` (atalho) zera o padding VERTICAL que
   o `.numeros-pe` declara em longhand, e o link "ver a matemática do acervo"
   encosta na borda da faixa escura — sem respiro e com a moldura de foco meio
   dentro, meio fora da faixa. Devolvido aqui, também escopado na home. */
.corpo-vidro .numeros-pe { padding-top: 1rem; padding-bottom: 1.2rem; }

/* -------------------------------------------------------------- impressão */

/* O poab.css já tira topo e rodapé da impressão. Faltavam as três peças que
   esta folha pintou de vinho: sem elas, a impressão sai com texto claro sobre
   o papel branco (o navegador não imprime fundo por padrão) — ou seja,
   invisível. Some com elas também: são a moldura da página, e não o conteúdo
   que alguém imprime. O `.hcard` mora dentro do `.hero`, então o `.hero`
   cobre os dois. */
@media print {
  .corpo-vidro .hero,
  .corpo-vidro .faixa-gabarito { display: none !important; }
}