/* Página de venda do Guia das Luzes. Mesma identidade do PDF (produto/guia/estilo.css): papel branco, faixa de
   painel preta com o símbolo aceso, placa de trânsito como veredito, Barlow + Barlow Condensed. O botão de compra é a
   placa verde de indicação ("siga"); nada de card com sombra, degradê ou rótulo em caixa alta. */
:root {
  --papel: #ffffff;
  --tinta: #232323;
  --suave: #6f6f6f;
  --linha: #e4e4e4;
  --painel: #000000;
  --painel-borda: #2b2b2b;
  --painel-texto: #b8b8b8;
  --siga: #00843d;
  --siga-escuro: #006b31;
  --luz: #ff9f1a;
  --marca: var(--tinta);
  --condensada: "Barlow Condensed", "Arial Narrow", sans-serif;
  color-scheme: light;
}
[data-cor="vermelho"] { --luz: #ff3b30; --marca: #c8102e; }
[data-cor="amarelo"]  { --luz: #ffb300; --marca: #a87d00; }
[data-cor="verde"]    { --luz: #2bd46a; --marca: #00843d; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.5 "Barlow", Arial, sans-serif; }
h1, h2 { margin: 0; font-family: var(--condensada); font-weight: 800; line-height: .95; }
h2 { font-size: 34px; margin-bottom: 12px; }
p { margin: 0 0 12px; }
b { font-weight: 700; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.miolo { max-width: 640px; margin: 0 auto; padding: 0 16px; }
main section { padding: 48px 0; }
main section + section { border-top: 1px solid var(--linha); }

/* ---------- painel (abertura e fecho) ---------- */
.painel { background: var(--painel); color: #fff; }
.topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-weight: 700; font-size: 15px; }
.topo a { text-decoration: none; }

.abertura h1 { font-size: 44px; margin-top: 16px; }
.abertura .sub { color: var(--painel-texto); font-size: 18px; margin: 12px 0 24px; }

.luzes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.luz {
  appearance: none; margin: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; aspect-ratio: 5 / 4;
  background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 8px;
  color: var(--luz);
}
.luz svg { width: 52%; max-width: 48px; height: auto; opacity: .38; }
.luz[aria-pressed="true"] { border-color: #6a6a6a; }
.luz[aria-pressed="true"] svg,
.luzes.teste .luz svg { opacity: 1; filter: drop-shadow(0 0 1px var(--luz)) drop-shadow(0 0 7px var(--luz)); }
.luz:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .luz svg { transition: opacity .25s cubic-bezier(.25, 1, .5, 1), filter .25s cubic-bezier(.25, 1, .5, 1); }
}

/* todas as leituras na mesma célula, só a ativa visível: a altura é sempre a da mais alta (duas placas, texto
   quebrando em tela estreita), e tocar outra luz nunca empurra a página */
.leitura { display: grid; padding: 24px 0 40px; }
.leitura > div { grid-area: 1 / 1; }
.leitura > [hidden] { display: block; visibility: hidden; }
.leitura .vazia { color: var(--painel-texto); font-size: 18px; }
.nome-luz { font-family: var(--condensada); font-weight: 800; font-size: 32px; line-height: 1; margin-bottom: 16px; }
.placa { display: flex; align-items: center; gap: 12px; font-family: var(--condensada); font-weight: 700; font-size: 22px; line-height: 1.05; margin-bottom: 8px; }
.placa svg { width: 40px; height: 40px; flex: none; }
.leitura .nota { color: var(--painel-texto); font-size: 15px; margin: 16px 0 0; }

.fim { padding: 48px 0 24px; }
.fim h2 { font-size: 36px; margin-bottom: 24px; }
.rodape { margin: 32px 0 0; font-size: 14px; color: var(--painel-texto); }

/* ---------- oferta e checklist: miniatura + texto ---------- */
.produto { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.miniatura { border: 1px solid var(--linha); border-radius: 4px; }
.preco { font-family: var(--condensada); font-weight: 800; font-size: 48px; line-height: 1; margin: 24px 0 16px; }
.miuda { font-size: 14px; color: var(--suave); margin: 12px 0 0; }

/* botão = placa verde de indicação: fundo verde com o filete branco por dentro */
.botao {
  display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 12px 20px;
  background: var(--siga); color: #fff; text-decoration: none; text-align: center; cursor: pointer;
  font-family: var(--condensada); font-weight: 700; font-size: 24px; line-height: 1.05;
  border-radius: 10px; box-shadow: inset 0 0 0 4px var(--siga), inset 0 0 0 6px #fff;
}
.botao:hover { background: var(--siga-escuro); box-shadow: inset 0 0 0 4px var(--siga-escuro), inset 0 0 0 6px #fff; }
.botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.painel .botao:focus-visible { outline-color: #fff; }
.amostra + .botao { margin-top: 32px; }

/* ---------- placas ---------- */
.placas { list-style: none; padding: 0; margin: 16px 0 32px; }
.placas li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.placas li:first-child { border-top: 1px solid var(--linha); }
.placas svg { width: 48px; height: 48px; }
.placas b, .capitulos b { display: block; font-family: var(--condensada); font-size: 23px; line-height: 1.05; margin-bottom: 4px; }

.amostra { margin: 0; }
.amostra img { border: 1px solid var(--linha); border-radius: 4px; max-width: 400px; width: 100%; }
.amostra figcaption { font-size: 14px; color: var(--suave); margin-top: 8px; }

/* ---------- capítulos (sequência real do guia: número na cor do capítulo, como no PDF) ---------- */
.capitulos { list-style: none; padding: 0; margin: 16px 0 32px; }
.capitulos li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); color: var(--suave); }
.capitulos li:first-child { border-top: 1px solid var(--linha); }
.capitulos b { color: var(--tinta); }
.capitulos .n { font-family: var(--condensada); font-weight: 800; font-size: 44px; line-height: .85; color: var(--marca); }

.lista { margin: 24px 0 0; padding-left: 20px; }
.lista li { margin-bottom: 8px; }

/* ---------- fontes ---------- */
.autor { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.autor img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.autor h2 { margin: 0; }

/* ---------- perguntas ---------- */
details { border-bottom: 1px solid var(--linha); }
details:first-of-type { border-top: 1px solid var(--linha); margin-top: 16px; }
summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-weight: 700; font-size: 18px; cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--condensada); font-size: 28px; line-height: 1; color: var(--suave); }
details[open] summary::after { transform: rotate(45deg); }
summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
details p { padding-bottom: 8px; }

/* ---------- privacidade (texto corrido, título menor que o da venda) ---------- */
.legal { padding: 40px 0 48px; }
.legal h1 { font-size: 40px; margin-bottom: 8px; }
.legal h2 { font-size: 24px; margin: 32px 0 8px; }
.legal .botao { margin-top: 40px; }
.rodape + .rodape { margin-top: 8px; }

/* ---------- telas largas: abertura em duas colunas (texto e leitura à esquerda, painel à direita) ---------- */
@media (min-width: 880px) {
  .abertura .miolo { max-width: 1040px; }
  .abertura-grade {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
    grid-template-areas: "texto luzes" "leitura luzes";
    grid-template-rows: auto 1fr; padding-bottom: 48px;
  }
  .abertura-texto { grid-area: texto; }
  .luzes { grid-area: luzes; align-self: start; margin-top: 16px; }
  .leitura { grid-area: leitura; padding-bottom: 0; }
  .abertura h1 { font-size: 60px; }
}