/* ============================================================
   TESTE — PÁGINA BRANCA, HORIZONTE AZUL, MARCA D'ÁGUA AZUL
   Pedido do usuário em 11/08/2026, para avaliação.

   ESTE ARQUIVO É UM TESTE E É DESCARTÁVEL. Ele não altera nenhuma linha do
   site: só sobrescreve tokens e três regras, e é carregado por ÚLTIMO. Para
   desfazer, basta remover o <link> das quatro páginas — nada mais precisa
   ser tocado.

   O que ele faz:
   1. Todo bege vira branco. --surface #FCF8F5 -> #FFFFFF, e o --surface-alt
      #F4EDE6 vira um branco levemente frio, só para as faixas alternadas não
      sumirem por completo.
   2. A marca d'água do monograma deixa de ser dourada e vira azul da marca,
      bem apagada. Ela é pintada por MÁSCARA, não por imagem de fundo: o SVG
      tem cor própria e não se recolore como imagem — como máscara, quem dá a
      cor é o CSS.
   3. O horizonte troca o quente pelo azul.

   NOTA DE CONTRASTE — os alfas do azul NÃO são gosto, são resultado de busca.
   O azul ESCURECE (o horizonte quente não escurecia), e as três camadas se
   somam na âncora. Medido no pior pixel possível, com o grão em overlay
   incluído: fundo #EBEEF3, dourado 4,57:1, secundário 6,60:1, corpo 7,01:1.
   O que travava tudo era o --text-muted #7A7065, que no branco puro tem só
   4,83:1 — com ele, só passavam alfas invisíveis (0,018). Escurecendo o
   secundário para #5A5248, o azul pôde ficar 2,5x mais presente.
   ============================================================ */

:root,
body.escuro {
  --surface: #FFFFFF;
  /* branco levemente frio: sem isto as faixas .on-alt somem e a página fica
     uma folha só, sem ritmo */
  --surface-alt: #F5F8FC;
  --surface-raised: #FFFFFF;
  /* O secundário escurece um passo. Não é gosto: no branco puro o #7A7065
     tem só 4,83:1, e era ELE — não o azul — que travava o horizonte em
     alfas invisíveis. Com #5A5248 o azul pode ser 2,5x mais presente, e o
     texto secundário ainda melhora de 4,83 para 6,60:1. */
  --text-muted: #5A5248;
  /* O dourado desce um passo, de #8A6510 para #6A4E0C. É a moeda que paga a
     visibilidade do horizonte: com o tom antigo, o azul no pico deixava o
     rótulo em 3,17:1. Mesma matiz, um passo mais escuro, e volta a 4,63:1.
     MUDANÇA DE BRANDBOOK — pendente da sua aprovação. */
  --gold-text: #6A4E0C;
}

/* ---- Marca d'água em azul ----
   A imagem de fundo vira máscara: assim a cor sai do CSS e não do arquivo. */
#mais-vendidos::before,
#avaliacoes::before,
#nossa-historia::before {
  background: var(--brand-blue);
  -webkit-mask: url("../imagens/monograma.svg") no-repeat center / contain;
  mask: url("../imagens/monograma.svg") no-repeat center / contain;
  /* .08 do dourado era discreto; o azul é mais escuro e pesa mais, então
     cede para .055 para continuar sendo marca d'água e não desenho */
  opacity: .055;
}

/* ---- Horizonte azul ----
   Mesmas âncoras e mesmos raios do horizonte atual; só as cores mudam.
   O azul ESCURECE (o quente não escurecia), então os alfas são baixos: é o
   que mantém o rótulo dourado acima de AA sobre o branco. */
/* ============================================================
   BRILHO QUE SEGUE O CURSOR — segunda variante do teste
   Pedido a partir da referência do background-gradient-animation: um núcleo
   grande e SATURADO, não um véu. Acompanha glass/teste-brilho.js.

   O horizonte sai de cena aqui: os dois efeitos disputariam a mesma tela.
   ============================================================ */
.teste-brilho {
  position: absolute;
  left: 0; top: 0;
  width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
  /* Azul da marca no núcleo, caindo até sumir. A queda é longa (52%) para
     não desenhar um anel: borda visível é o que denuncia efeito barato.

     O núcleo em .32 é O TETO MEDIDO com texto escuro por cima — o dobro da
     saturação do horizonte anterior (.16). Ali o fundo fica #C1C8D6, com
     corpo 4,86:1, secundário 4,58:1 e dourado 4,62:1.

     Na força da referência (.62 no núcleo) o fundo vira #7F8AA0, e aí NADA
     se lê: corpo 2,36:1, título 2,86:1 — e texto CREME também reprova, em
     3,28:1. Meio-tom é o pior caso possível, porque derruba tanto o texto
     escuro quanto o claro. A referência escapa disso porque o magenta dela é
     escuro o bastante para o branco funcionar por cima. */
  background: radial-gradient(circle at center,
    rgba(60,84,128,.32) 0%,
    rgba(60,84,128,.26) 14%,
    rgba(60,84,128,.15) 27%,
    rgba(120,160,214,.07) 38%,
    rgba(255,255,255,0) 52%);
  transform: translate3d(var(--bx, 50vw), var(--by, 45vh), 0);
  will-change: transform;
}
/* Com o brilho no ar, o horizonte se cala. */
.aura-horizonte, .aura-teto { display: none; }

/* ---- As superfícies precisam PROTEGER o texto ----
   Esta é a correção do que o usuário viu como "apagado". Os tokens de cor
   estavam certos; o que lavava o texto era o vidro: o preenchimento ia de
   74% a 52% de branco, então o brilho azul atravessava a carta e o interior
   dela deixava de ser branco. Quanto mais forte o fundo, mais opaca a
   superfície precisa ser — é a mesma lógica das placas que a referência usa.
   Com 96%/90% o interior fica em no mínimo #F3F5F8, e o contraste do texto
   passa a depender só do token, não do que está atrás. */
:is(.aurora, body) :is(.product-card, .trust-item, .step-card, .content-card,
.review-card, .trial-card, .option, .faq-list details, .table-wrap,
.modal-panel, .buybox, .model-card, .panel, .summary) {
  background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
}

/* Força 0,8 — o teto medido. A tabela completa:
     0,23 -> 12 pontos de afastamento do branco (o que estava, invisível)
     0,50 -> 26 pontos
     0,80 -> 39 pontos, corpo 4,87:1 e secundário 4,58:1   <- aqui
     1,10 -> 51 pontos, mas o corpo cai para 4,06:1 e reprova
   Acima de 0,8 não é questão de gosto: o texto do corpo sai do AA. */
.aura-horizonte {
  background:
    radial-gradient(50% 42% at 50% 100%, rgba(60,84,128,.160) 0%, rgba(60,84,128,.062) 34%, rgba(255,255,255,0) 62%),
    radial-gradient(34% 26% at 50% 100%, rgba(48,67,102,.104) 0%, rgba(48,67,102,0) 70%),
    radial-gradient(72% 58% at 50% 100%, rgba(120,160,214,.080) 0%, rgba(255,255,255,0) 66%);
}
.aura-teto {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(60,84,128,.084) 0%, rgba(120,160,214,.034) 40%, rgba(255,255,255,0) 70%);
}
.aura { background: var(--surface); }

/* O grão em overlay sobre branco puro pesa mais que sobre o off-white:
   cede um passo para não virar textura suja. */
.aura-grao { opacity: .13; }

/* ============================================================
   O BEGE QUE SOBRAVA — fotos de cena
   Trocar os tokens não alcançava estas seções: o bege delas não vem de
   token nenhum, vem das FOTOS (F4 quente em modelos/fábrica, F2 em
   como-chega/vídeos/FAQ) e, principalmente, do véu que as cobre, que era
   bege — rgba(244,237,230,.75). Aqui o véu vira branco e sobe de opacidade:
   sobra só um fantasma de textura, sem temperatura quente.
   Os degradês de emenda das pontas seguem os mesmos, agora em branco puro,
   para as fronteiras continuarem sem risco.
   ============================================================ */
/* As fotos SAEM destas cinco seções.
   Dois motivos, medidos: lavadas para branco elas já não entregavam nada
   (a F4 virou #FDFDFC, calor 1 — indistinguível do branco), e, sendo opacas,
   TAPAVAM o horizonte por completo. Eram 10 das 15 seções cobrindo a luz, e
   por isso ela aparecia em manchas desconexas em vez de atravessar a página.
   Sem elas o fundo é um só, contínuo, do topo ao rodapé. */
#modelos, #nossa-fabrica,
#como-chega, #videos, #faq {
  background: transparent;
}

/* #mais-vendidos é a fronteira da hero: a rampa do topo continua intocada,
   e só o bege das camadas de baixo vira branco. */
#mais-vendidos {
  background-image:
    linear-gradient(180deg,
      #1A2436 0,
      rgba(26,36,54,.66) 18px,
      rgba(26,36,54,.34) 40px,
      rgba(26,36,54,.14) 70px,
      rgba(26,36,54,.055) 110px,
      rgba(26,36,54,.02) 170px,
      rgba(26,36,54,0) 250px),
    linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 50%, #FFFFFF 100%);
}
/* A foto de cena dentro de #mais-vendidos é o outro ponto quente. Ela fica,
   mas bem mais apagada — a máscara das pontas continua valendo. */
#mais-vendidos .scene-img { opacity: .34; }

/* O rodapé NÃO precisa mais de exceção aqui. Esta regra existia para trocar
   o bege do degradê de emenda por branco — e era ela que fixava branco puro
   no topo do rodapé, criando o degrau que o usuário circulou: a página é
   branco-QUENTE e este branco é puro. Agora glass/rodape.css começa
   transparente e deixa a página aparecer, então a troca de token
   --surface-alt já basta e a emenda some sozinha. Ver a nota lá. */