/* qualbloco.gbrlrg.com.br · direção "Folia" do app (design/folia/README.md): fundo "Pôr do sol na avenida", adesivo
   (contorno + sombra dura, sem glow), estampa de carnaval tom sobre tom e confete só na faixa do topo, com fade.
   As cores vêm de /tokens.css, gerado pelo build.py com os mesmos tokens dos apps */
@font-face { font-family: "Sour Gummy"; src: url(/fonts/SourGummy-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --titulo: "Sour Gummy", "Figtree", system-ui, sans-serif;
  --ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fio: color-mix(in srgb, var(--texto-tela) 22%, transparent);
  --raio: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--tela-topo); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--texto-tela);
  font: 500 17px/1.6 var(--ui);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}
/* O fundo é um só para a tela inteira, como nos apps (fixo: no iPhone o background-attachment não funciona) */
body::before { content: ""; position: fixed; inset: 0; background: var(--tela); z-index: -1; }
main, header, footer { position: relative; z-index: 1; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--texto-tela); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: var(--chip-fundo); color: var(--chip-texto); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------------- faixa do topo: estampa → serpentinas → confete, sumindo em fade (sem caixa) ---------------- */
.faixa {
  position: absolute; top: 0; left: 0; right: 0; height: 345px; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.estampa {
  position: absolute; inset: 0; background: var(--texto-tela); opacity: var(--estampa-opacidade);
  -webkit-mask: url(/img/estampa.svg) repeat 0 0 / 240px 240px; mask: url(/img/estampa.svg) repeat 0 0 / 240px 240px;
}
.decor { position: absolute; top: 0; width: 292px; height: 345px; max-width: none; }
.decor-esq { left: 0; }
.decor-dir { right: 0; }
@media (max-width: 600px) {
  .faixa { height: 230px; }
  .decor { width: 195px; height: 230px; }
}

/* ---------------- topo ---------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; margin: 0 auto; padding: 18px 20px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-tela); text-decoration: none; font: 800 24px/1 var(--titulo); }
.brand:hover { text-decoration: none; }
.mark { display: block; flex: none; }
.mark-hero { margin: 0 auto 8px; }
.top-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.top-link, .langs a {
  font: 800 15px/1 var(--ui); color: var(--texto); background: var(--superficie); text-decoration: none;
  border: 2.5px solid var(--contorno); border-radius: 999px; box-shadow: 0 3px 0 var(--sombra-dura);
  min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center;
}
.top-link:hover { transform: translateY(-1px); }
.langs { display: inline-flex; gap: 6px; }
.langs a { padding: 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.langs a[aria-current="page"] { background: var(--chip-fundo); color: var(--chip-texto); }

/* ---------------- hero ---------------- */
.hero { padding: 24px 20px 56px; }
.hero-in {
  max-width: 1080px; margin: 0 auto; display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 860px) { .hero-in { grid-template-columns: 1.15fr .85fr; } }
.hero-text { text-align: center; }
@media (min-width: 860px) { .hero-text { text-align: left; } }
.kicker { font: 800 14px/1.4 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-sec-tela); margin: 18px 0 8px; }
.hero h1 {
  font: 800 clamp(58px, 11vw, 104px)/.95 var(--titulo); margin: 0; letter-spacing: 0;
  text-shadow: 0 4px 0 var(--titulo-sombra);
}
.hero-sub { font: 800 clamp(24px, 3.6vw, 32px)/1.2 var(--titulo); margin: 18px 0 0; max-width: 18em; }
.lead { font-size: 18px; color: var(--texto-sec-tela); max-width: 34em; margin: 18px 0 0; font-weight: 600; }
@media (max-width: 859px) { .hero-sub, .lead { margin-left: auto; margin-right: auto; } }
.soon { margin: 30px 0 0; }
/* Selos oficiais das lojas, sem link enquanto as fichas não existem. Não mudar cor, proporção nem texto dos
   selos; a mesma altura nos dois e espaço livre de pelo menos 1/4 da altura (regras da Apple e do Google) */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: center; }
@media (min-width: 860px) { .badges { justify-content: flex-start; } }
.badges img { display: block; height: 48px; width: auto; cursor: default; }
.soon-text { font-size: 15px; color: var(--texto-sec-tela); margin: 12px 0 0; font-weight: 700; }
.hero-phone { margin: 0 auto; max-width: 300px; }
.hero-phone img, .shot img {
  border: 3px solid var(--contorno); border-radius: 36px; box-shadow: 0 8px 0 var(--sombra-dura); background: var(--superficie);
}
.hero-phone img { transform: rotate(2.5deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-phone img { transition: transform .3s ease; }
  .hero-phone:hover img { transform: rotate(0deg); }
}

/* ---------------- seções ---------------- */
.section { padding: 56px 20px; }
.wide { max-width: 1080px; margin: 0 auto; }
.narrow { max-width: 720px; margin: 0 auto; }
/* Títulos, subtítulos e frases curtas com linhas equilibradas (linhas.js); não vale para os textos legais */
h1, h2, h3, .hero-sub, .lead, .kicker, .soon-text, summary, figcaption, .note { text-wrap: balance; }
h2 { font: 800 clamp(30px, 4.6vw, 44px)/1.1 var(--titulo); margin: 0 0 26px; letter-spacing: 0; text-shadow: 0 3px 0 var(--titulo-sombra); }
h3 { font: 800 21px/1.25 var(--ui); margin: 0 0 8px; }
.note { margin: 20px 0 0; font-size: 15px; color: var(--texto-sec-tela); font-weight: 600; }

/* Adesivo: superfície, contorno e sombra dura (sem blur) */
.card {
  background: var(--superficie); color: var(--texto); border: 2.5px solid var(--contorno); border-radius: var(--raio);
  box-shadow: 0 4px 0 var(--sombra-dura); padding: 24px 24px 22px;
}
.card p { margin: 0; color: var(--texto-sec); }
.card p + p, .card p + ul, .card ul + p { margin-top: 14px; }
.card h2 { text-shadow: none; font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 14px; }
.card a { color: var(--aba-ativa); font-weight: 800; }
.two { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .two { grid-template-columns: 1fr 1fr; } }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* Cor por bloco: como os cartões de bloco no app, sombra dura na cor do estilo e círculo numerado na tinta */
.card.estilo { box-shadow: 0 4px 0 var(--estilo-ponto); }
.num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 14px;
  border-radius: 50%; background: var(--estilo-tinta); color: var(--asfalto); font: 800 19px/1 var(--titulo);
  border: 2.5px solid var(--contorno); box-shadow: 0 2px 0 var(--sombra-dura);
}

/* cidades */
.cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cities li {
  font: 800 18px/1 var(--titulo); color: var(--texto); background: var(--superficie);
  border: 2.5px solid var(--contorno); border-radius: 999px; box-shadow: 0 3px 0 var(--sombra-dura);
  min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center;
}
.cities li:nth-child(5n+1) { background: var(--chip-fundo); color: var(--chip-texto); }

/* capturas */
.screens-sec { padding-left: 0; padding-right: 0; }
.screens-sec .wide { padding: 0 20px; }
.screens {
  display: flex; gap: 26px; overflow-x: auto; padding: 8px 20px 30px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--fio) transparent;
}
/* centrada quando cabe, sem cortar o começo quando não cabe */
.shot:first-child { margin-left: auto; }
.shot:last-child { margin-right: auto; }
.shot { margin: 0; flex: 0 0 auto; width: 220px; scroll-snap-align: center; }
.shot img { width: 220px; border-radius: 30px; box-shadow: 0 6px 0 var(--sombra-dura); }
.shot figcaption { margin-top: 14px; text-align: center; font-size: 15px; font-weight: 700; color: var(--texto-tela); }

/* ajuda: os telefones como na tela Ajuda do app */
.fones { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.fone {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px;
  border: 2.5px solid var(--contorno); border-radius: 18px; box-shadow: 0 3px 0 var(--sombra-dura); background: var(--superficie);
}
.fone-nome { font: 800 17px/1.2 var(--ui); display: flex; flex-direction: column; gap: 2px; }
.fone-nome small { font: 600 13px/1.2 var(--ui); color: var(--texto-sec); }
.fone-num { font: 800 32px/1 var(--titulo); }
.card.perigo { background: var(--status-conflito); color: #FFFFFF; }
.card.perigo p { color: #FFFFFF; }
.card.perigo .aviso { font-weight: 800; }

/* listas com marca "v" */
.checks { list-style: none; padding: 0; margin: 0 0 4px; }
.checks li { position: relative; padding-left: 30px; margin: 10px 0; color: var(--texto); font-weight: 600; }
.checks li::before {
  content: ""; position: absolute; left: 4px; top: .45em; width: 13px; height: 7px;
  border-left: 3px solid var(--status-daTempo); border-bottom: 3px solid var(--status-daTempo); transform: rotate(-48deg);
}

/* perguntas */
.faq { border-top: 2px solid var(--fio); margin-bottom: 24px; }
.faq details { border-bottom: 2px solid var(--fio); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 800 19px/1.35 var(--ui);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 20px; color: var(--texto-sec-tela); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* páginas internas */
.page { padding: 32px 20px 80px; }
.page h1 { font: 800 clamp(38px, 6vw, 56px)/1.05 var(--titulo); margin: 10px 0 14px; text-shadow: 0 4px 0 var(--titulo-sombra); }
.page .lead { margin: 0 0 34px; text-align: left; }
.page h2 { font-size: 28px; margin: 44px 0 12px; }
.page h3 { margin-top: 26px; }
.page ul { padding-left: 22px; }
.page li { margin: 8px 0; }
.legal h2 { font-size: 26px; }
.legal p, .legal li { color: var(--texto-tela); }
.toc {
  margin: 26px 0 8px; padding: 18px 22px; background: var(--superficie); color: var(--texto);
  border: 2.5px solid var(--contorno); border-radius: 18px; box-shadow: 0 3px 0 var(--sombra-dura);
}
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.toc li { margin: 4px 0; break-inside: avoid; color: var(--texto); }
.toc a { color: var(--texto); }
.table {
  overflow-x: auto; margin: 18px 0; background: var(--superficie); color: var(--texto);
  border: 2.5px solid var(--contorno); border-radius: 16px; box-shadow: 0 3px 0 var(--sombra-dura);
}
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1.5px solid color-mix(in srgb, var(--texto) 18%, transparent); vertical-align: top; color: var(--texto); }
th { font-weight: 800; }
tr:last-child td { border-bottom: 0; }
.notfound { text-align: center; }
.notfound div[lang] { margin: 22px 0; }
.notfound h1 { font-size: 40px; }

/* ---------------- rodapé ---------------- */
.foot { border-top: 2px solid var(--fio); padding: 34px 20px 46px; margin-top: 20px; }
.foot-in { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-links a { font-size: 15px; font-weight: 700; color: var(--texto-tela); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-legal { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--texto-sec-tela); font-weight: 600; }