/* Hallmark · macrostructure: Marquee-lite (título de valor + um dado em texto + botão) · tone: utilitário-quente · anchor hue: goiaba 355°
 * genre: playful · theme: custom (marca Oi Elisa: goiaba #C42B48, azul-noite #1E2A4A, creme, amarelo-buzina) · display: Bricolage Grotesque 800 · texto: system-ui
 * nav: N1a (compartilhada) · footer: Ft5 Statement (frase + botão + linha com logo e links)
 * Um sistema só para todas as páginas (08/11): abertura de título grande, seções separadas por fio, passos numerados, perguntas em coluna, fecho de frase.
 * pre-emit critique: P5 H5 E4 S4 R5 V4
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip;
  font: var(--text-base)/1.55 var(--font-texto);
  color: var(--color-tinta); background: var(--color-creme);
}
img, svg { max-width: 100%; display: block; }
p { margin: 0 0 var(--space-sm); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; margin: 0; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
a { color: var(--color-goiaba-escura); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--color-buzina); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
h1 .destaque, h2 .destaque { color: var(--color-goiaba); }

.pagina { width: 100%; max-width: var(--pagina); margin: 0 auto; padding: 0 var(--space-md); }
.pular { position: absolute; left: var(--space-sm); top: -4rem; z-index: 50; background: var(--color-tinta); color: var(--color-sobre-cor); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }
.pular:focus { top: var(--space-sm); }
.icone { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- topo ---------- */
.topo .pagina { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 4.25rem; }
.marca { display: inline-flex; align-items: center; color: var(--color-noite); text-decoration: none; border-radius: var(--radius-sm); }
.marca svg { width: auto; height: 2.125rem; }
.marca .nota, .logo .nota { fill: var(--color-goiaba); }
.topo-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font-size: 1rem; font-weight: 700; color: var(--color-tinta); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--color-linha); background: var(--color-superficie); }
.topo-link:hover { box-shadow: inset 0 0 0 2px var(--color-goiaba); color: var(--color-goiaba-escura); }

/* ---------- botões ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  width: 100%; min-height: var(--alvo-min); padding: 0.875rem 1.5rem;
  border: 0; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 800 1.1875rem/1.1 var(--font-texto); color: var(--color-sobre-cor); background: var(--color-zap);
  box-shadow: 0 1px 0 var(--color-brilho) inset, 0 8px 20px -8px var(--color-zap-sombra);
}
.btn:hover { background: var(--color-zap-escura); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .icone { width: 1.625rem; height: 1.625rem; }

.lead { font-size: var(--text-lead); line-height: 1.45; color: var(--color-suave); max-width: 32rem; margin-bottom: var(--space-lg); }
.acao { max-width: 27rem; }
.confianca { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0.375rem; }
.confianca li { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; font-size: 1rem; color: var(--color-tinta); }
.confianca .icone { width: 1.25rem; height: 1.25rem; color: var(--color-zap); }
.legal { margin: var(--space-md) 0 0; font-size: var(--text-mini); line-height: 1.5; color: var(--color-suave); }

/* conversa de exemplo: balões soltos sobre o creme, sem painel e sem moldura de celular */
.conversa { margin: 0; }
.chat { display: grid; gap: var(--space-xs); }
.bolha { justify-self: start; max-width: 90%; padding: 0.625rem 0.875rem; border-radius: 0.25rem var(--radius-md) var(--radius-md) var(--radius-md); background: var(--color-buzina-clara); font-size: 1rem; line-height: 1.4; }
.bolha .quem { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 800; color: var(--color-goiaba-escura); }
.bolha .quem img { width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.bolha.eu { justify-self: end; border-radius: var(--radius-md) 0.25rem var(--radius-md) var(--radius-md); background: var(--color-superficie); box-shadow: 0 2px 8px var(--color-sombra); }
.oferta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.125rem var(--space-sm); margin-top: var(--space-xs); padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: var(--color-superficie); }
.oferta-nome { grid-column: 1; font-size: 0.875rem; color: var(--color-suave); }
.oferta .preco { grid-column: 1; font: 800 1.375rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-tinta); }
.oferta .escolher { grid-row: 1 / span 2; grid-column: 2; padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); background: var(--color-goiaba-clara); color: var(--color-goiaba-escura); font-weight: 800; font-size: 0.9375rem; }
.oferta.melhor { box-shadow: 0 0 0 2px var(--color-zap); }
.oferta.melhor .escolher { background: var(--color-zap); color: var(--color-sobre-cor); }
.conversa figcaption { margin-top: var(--space-sm); color: var(--color-suave); font-size: var(--text-mini); line-height: 1.4; }

h2 { font-size: var(--text-h2); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--space-md); }
.fonte { margin: var(--space-sm) 0 0; font-size: var(--text-mini); color: var(--color-suave); }

/* ---------- perguntas ---------- */
.perguntas { display: grid; margin-top: var(--space-lg); border-top: 1px solid var(--color-linha); }
.perguntas details { border-bottom: 1px solid var(--color-linha); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 3.5rem; padding: var(--space-sm) 0; cursor: pointer; list-style: none; font-weight: 800; font-size: 1.125rem; line-height: 1.3; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; flex: none; width: 0.75rem; height: 0.75rem; margin-right: 0.25rem; border-right: 3px solid var(--color-goiaba); border-bottom: 3px solid var(--color-goiaba); transform: rotate(45deg) translateY(-25%); }
.perguntas details[open] summary::after { transform: rotate(-135deg) translateX(-25%); }
.perguntas details > p { margin: 0; padding: 0 var(--space-lg) var(--space-md) 0; color: var(--color-suave); }

/* ---------- abertura: título grande, texto e botão ---------- */
.abertura { padding: var(--space-md) 0 var(--space-xl); }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.abertura h1 { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.035em; max-width: 13ch; }
.abertura-texto .lead { margin-bottom: var(--space-sm); }
.abertura-fato { margin: 0; max-width: 32rem; color: var(--color-tinta); }
/* marcador de texto: faixa do meio para baixo da linha, quebra junto com o texto */
.marcador {
  color: var(--color-tinta); background: linear-gradient(transparent 38%, var(--color-buzina-clara) 38%, var(--color-buzina-clara) 88%, transparent 88%);
  padding: 0 0.15em; margin: 0 -0.05em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- faixa de preço da semana (home) ---------- */
.faixa { padding: var(--space-xl) 0; border-top: 1px solid var(--color-linha); }
.faixa-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.faixa-grade .lead { margin-bottom: var(--space-sm); }
.faixa-preco { margin: 0; padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-superficie); box-shadow: 0 0 0 1px var(--color-linha); }
.faixa-numeros { display: flex; justify-content: space-between; gap: var(--space-sm); }
.faixa-numeros p { margin: 0; font: 800 clamp(1.5rem, 7vw, 2rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.faixa-numeros small { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; font: 700 var(--text-mini)/1.2 var(--font-texto); letter-spacing: 0; color: var(--color-suave); }
.faixa-numeros small::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.faixa-barato small::before { background: var(--color-zap); }
.faixa-caro { text-align: right; }
.faixa-caro small { justify-content: flex-end; }
.faixa-caro small::before { background: var(--color-goiaba); }
.faixa-barra { position: relative; height: 0.5rem; margin: var(--space-md) 0.375rem; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-zap), var(--color-buzina) 55%, var(--color-goiaba)); }
.faixa-barra::before, .faixa-barra::after { content: ""; position: absolute; top: 50%; width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border-radius: 50%; background: var(--color-superficie); box-shadow: 0 0 0 4px var(--color-zap); }
.faixa-barra::before { left: 0; }
.faixa-barra::after { left: 100%; box-shadow: 0 0 0 4px var(--color-goiaba); }
.faixa-diferenca { margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-linha); font: 800 var(--text-numero)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-goiaba); font-variant-numeric: tabular-nums; }
.faixa-diferenca small { display: block; margin-top: var(--space-xs); font: 700 1.0625rem/1.3 var(--font-texto); letter-spacing: 0; color: var(--color-tinta); }
.faixa-preco figcaption { margin-top: var(--space-sm); font-size: var(--text-mini); line-height: 1.45; color: var(--color-suave); }

/* ---------- como funciona: passos numerados + conversa de exemplo ---------- */
.como { padding: var(--space-xl) 0; border-top: 1px solid var(--color-linha); }
.como-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.passos { list-style: none; margin: var(--space-md) 0 0; padding: 0; counter-reset: p; display: grid; gap: var(--space-md); }
.passos li { counter-increment: p; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--space-sm); }
.passos li::before { content: counter(p); grid-row: span 2; font: 800 2.25rem/0.9 var(--font-display); color: var(--color-goiaba); font-variant-numeric: tabular-nums; }
.passos h3 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.015em; }
.passos p { margin: 0.125rem 0 0; color: var(--color-suave); }
.como .conversa { max-width: 26rem; }

/* ---------- perguntas em coluna ---------- */
.duvidas { padding: var(--space-xl) 0 var(--space-lg); border-top: 1px solid var(--color-linha); }
.duvidas-coluna { max-width: calc(var(--medida) + 2 * var(--space-md)); }
.duvidas .perguntas { margin-top: var(--space-md); }
.duvidas-mais { margin: var(--space-md) 0 0; color: var(--color-suave); }

/* ---------- fecho: frase + botão, depois logo e links ---------- */
.fecho { padding: var(--space-lg) 0 calc(var(--space-2xl) + env(safe-area-inset-bottom)); }
.fecho-frase { display: grid; gap: var(--space-md); padding-bottom: var(--space-xl); }
.fecho-frase h2 { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.035em; margin: 0; max-width: 14ch; }
.fecho-frase .lead { margin: var(--space-sm) 0 0; }
.fecho-meta { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-linha); font-size: var(--text-pequeno); color: var(--color-suave); }
.fecho-meta .logo { width: 8rem; height: auto; color: var(--color-noite); }
.fecho-meta p { margin: 0; }
.fecho-meta nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.fecho-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-suave); white-space: nowrap; }
.fecho-meta a:hover { color: var(--color-goiaba-escura); }
.fecho-meta a[aria-current] { color: var(--color-tinta); font-weight: 700; text-decoration: none; }

@media (min-width: 48rem) {
  .abertura { padding: var(--space-xl) 0 var(--space-2xl); }
  .abertura-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
  .abertura-cab { grid-column: 1 / -1; }
  .como, .faixa { padding: var(--space-2xl) 0; }
  .faixa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .faixa-preco { padding: var(--space-lg); }
  .como-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .como .conversa { justify-self: end; width: 100%; }
  .duvidas { padding: var(--space-2xl) 0 var(--space-xl); }
  .fecho { padding-bottom: calc(var(--alvo-min) + 2 * var(--space-lg)); } /* espaço para o botão flutuante não cobrir os links */
  .fecho-frase { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: var(--space-xl); padding-bottom: var(--space-2xl); }
  .fecho-meta { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
}

/* ---------- barra fixa no celular ---------- */
.fixa { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--color-creme-vidro); box-shadow: 0 -1px 0 var(--color-linha), 0 -8px 24px -12px var(--color-sombra); transform: translateY(110%); }
.fixa.visivel { transform: none; }
.fixa .btn { min-height: 3.375rem; }

/* ---------- páginas internas ---------- */
.texto { max-width: var(--medida); padding: var(--space-md) 0 var(--space-xl); }
.texto h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: var(--space-md); }
.texto h2 { font-size: 1.5rem; letter-spacing: -0.015em; margin: var(--space-lg) 0 var(--space-xs); }
.caixa { background: var(--color-superficie); box-shadow: 0 0 0 1px var(--color-linha); border-radius: var(--radius-md); padding: var(--space-md); margin: var(--space-sm) 0; }
.ph { background: #FEE2E2; color: #7F1D1D; padding: 0 0.25rem; border-radius: 0.25rem; }
.rascunho { background: var(--color-aviso-fundo); color: var(--color-aviso-texto); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: 1rem; }

@media (max-width: 23rem) {
  .btn { font-size: 1.0625rem; padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.5rem; }
  .btn .icone { width: 1.375rem; height: 1.375rem; }
}

@media (min-width: 48rem) {
  .fixa { left: auto; right: var(--space-lg); bottom: var(--space-lg); padding: 0; background: none; box-shadow: none; transform: translateY(calc(100% + var(--space-lg) + 1rem)); }
  .fixa .btn { width: auto; padding: 0 var(--space-lg); box-shadow: 0 10px 28px -10px var(--color-zap-sombra), 0 2px 8px var(--color-sombra); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-curta) var(--ease-out), transform var(--dur-curta) var(--ease-out); }
  .fixa { transition: transform var(--dur-media) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* botões de resposta rápida do exemplo (não clicáveis) */
.respostas { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.respostas span { padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); background: var(--color-superficie); color: var(--color-goiaba-escura); font-weight: 800; font-size: 0.9375rem; box-shadow: 0 2px 0 var(--color-sombra); }
.respostas .principal { background: var(--color-zap); color: var(--color-sobre-cor); }

.link-forte { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; font-weight: 800; }

/* ---------- página de preços ---------- */
.precos-topo { padding-top: var(--space-sm); padding-bottom: var(--space-md); }
.precos-topo h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; margin-bottom: var(--space-sm); }
.precos-topo .lead { margin-bottom: var(--space-md); }
.filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); max-width: 40rem; }
.campo { display: grid; gap: 0.375rem; font-size: var(--text-mini); font-weight: 800; color: var(--color-suave); }
.campo select {
  width: 100%; min-height: 3.25rem; padding: 0 2.75rem 0 var(--space-sm);
  border: 0; border-radius: var(--radius-sm); background: var(--color-superficie); color: var(--color-tinta);
  box-shadow: inset 0 0 0 2px var(--color-linha); font: 700 1.0625rem/1.2 var(--font-texto);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-goiaba) 50%), linear-gradient(135deg, var(--color-goiaba) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.875rem) 55%; background-size: 0.375rem 0.375rem; background-repeat: no-repeat;
}
.campo select:hover { box-shadow: inset 0 0 0 2px var(--color-goiaba-clara); }

.semana-card { padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-superficie); box-shadow: 0 0 0 1px var(--color-linha); }
.semana-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.semana-cab h2 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.015em; margin: 0.25rem 0 0; }
.semana-nav { display: flex; gap: var(--space-xs); flex: none; }
.btn-sec { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-pill); background: var(--color-goiaba-clara); color: var(--color-goiaba-escura); cursor: pointer; }
.btn-sec:hover { background: var(--color-goiaba-clara); }
.btn-sec:disabled { background: var(--color-creme); color: var(--color-linha); cursor: default; }
.seta-volta { transform: rotate(180deg); }
.numeros-semana { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); margin: 0; }
.numeros-semana div { min-width: 0; }
.numeros-semana dt { font-size: var(--text-mini); font-weight: 700; color: var(--color-suave); margin-bottom: 0.25rem; }
.numeros-semana dd { margin: 0; font: 800 1.5rem/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.numeros-semana .n-barato dd, .numeros-semana .n-caro dd { font-size: clamp(1.875rem, 8vw, 2.5rem); }
.numeros-semana .n-barato dt::before, .numeros-semana .n-caro dt::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.375rem; border-radius: 50%; vertical-align: 0.05em; }
.numeros-semana .n-barato dt::before { background: var(--color-zap); }
.numeros-semana .n-caro dt::before { background: var(--color-goiaba); }
.semana-rodape { margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-linha); font-size: var(--text-pequeno); color: var(--color-suave); }

.grafico-secao { padding-top: var(--space-xl); }
.grafico-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.grafico-cab h2 { margin: 0; font-size: 1.75rem; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); list-style: none; margin: 0 0 var(--space-sm); padding: 0; font-size: var(--text-mini); font-weight: 700; color: var(--color-suave); }
.legenda li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.chave-faixa { width: 1.25rem; height: 0.75rem; border-radius: 3px; background: var(--color-goiaba-clara); }
.chave-linha { width: 1.25rem; height: 0; border-top: 2px solid var(--color-goiaba); }
.grafico { position: relative; min-height: 260px; border-radius: var(--radius-md); background: var(--color-superficie); box-shadow: 0 0 0 1px var(--color-linha); touch-action: pan-y; cursor: crosshair; overflow: hidden; }
.grafico svg { display: block; }
.g-grade { stroke: var(--color-linha); stroke-width: 1; }
.g-eixo { fill: var(--color-suave); font: 600 12px var(--font-texto); font-variant-numeric: tabular-nums; }
.g-eixo-sec { font-weight: 500; }
.g-faixa { fill: var(--color-goiaba-clara); fill-opacity: 0.7; }
.g-linha { fill: none; stroke: var(--color-goiaba); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-mira { stroke: var(--color-tinta); stroke-width: 1; stroke-opacity: 0.35; }
.g-marca.g-fixa .g-mira { stroke-opacity: 0.6; }
.g-ponto { stroke: var(--color-superficie); stroke-width: 2; }
.g-max, .g-media { fill: var(--color-goiaba); }
.g-min { fill: var(--color-zap); }
.dica { position: absolute; left: 0; top: 0; display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--color-tinta); color: var(--color-sobre-cor); font-size: 0.875rem; line-height: 1.35; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px var(--color-sombra); }
.dica strong { font-weight: 800; margin-bottom: 0.125rem; }
.dica b { font-weight: 800; }
.dica span { color: var(--color-nevoa); }
.grafico-dica { margin-top: var(--space-xs); }


.como-ler { padding-top: var(--space-xl); padding-bottom: var(--space-xl); max-width: var(--pagina); }
.como-ler h2 { font-size: 1.75rem; }
.como-ler .garantias { max-width: 42rem; }
.como-ler .garantias { padding-left: 1.25rem; display: grid; gap: var(--space-xs); }

.lista-cidades { list-style: none; margin: var(--space-lg) 0; padding: 0; display: grid; gap: var(--space-xs); }
.lista-cidades a { display: grid; gap: 0.25rem; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-superficie); box-shadow: 0 0 0 1px var(--color-linha); text-decoration: none; color: var(--color-tinta); }
.lista-cidades a:hover { box-shadow: 0 0 0 2px var(--color-goiaba-clara); }
.lista-cidades span { font: 800 1.375rem/1.1 var(--font-display); }
.lista-cidades small { color: var(--color-suave); font-size: var(--text-pequeno); }

@media (min-width: 48rem) {
  .filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .numeros-semana { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .semana-card { padding: var(--space-lg); }
  .grafico-dica { display: none; }
}
@media (max-width: 23rem) {
  .numeros-semana .n-barato dd, .numeros-semana .n-caro dd { font-size: 1.625rem; }
  .numeros-semana dd { font-size: 1.3125rem; }
  .semana-card { padding: var(--space-md) var(--space-sm); }
}


/* ---------- cidade: selo com "Trocar cidade", cidades perto, aviso de cidade não atendida ---------- */
.selo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--space-xs); margin: 0 0 var(--space-sm); font-weight: 800; font-size: 1rem; color: var(--color-goiaba-escura); }
.selo .icone { width: 1.25rem; height: 1.25rem; color: var(--color-goiaba); }
.selo a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-2xs); font-weight: 700; font-size: var(--text-pequeno); color: var(--color-suave); }
.selo a:hover { color: var(--color-goiaba-escura); }
.abertura .selo { margin-bottom: var(--space-xs); }

.perto { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-linha); font-size: var(--text-pequeno); color: var(--color-suave); }
.perto p { flex-basis: 100%; margin: 0; }
.perto a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-suave); }
.perto a:hover { color: var(--color-goiaba-escura); }

.final { padding: var(--space-lg) 0 var(--space-xl); }
.final h2 { font-size: var(--text-h2); line-height: 1.05; letter-spacing: -0.025em; }
.final .acao { margin-bottom: var(--space-sm); }

.lista-curta span { font-size: 1.1875rem; }
.texto .lista-curta { margin: var(--space-sm) 0 var(--space-md); }
.localizar { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.localizar[hidden] { display: none; }
.localizar .legal { margin: 0; }
.btn-local { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); justify-self: start; min-height: var(--alvo-min); padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-goiaba-clara); color: var(--color-goiaba-escura); font: 800 1.0625rem/1 var(--font-texto); cursor: pointer; }
.btn-local:hover { box-shadow: inset 0 0 0 2px var(--color-goiaba); }
.btn-local:disabled { opacity: 0.6; cursor: progress; }

.ainda-nao { display: none; position: fixed; inset: 0; z-index: 60; place-items: end center; padding: var(--space-md); padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); background: rgba(30, 42, 74, 0.55); }
.ainda-nao:target, .ainda-nao.aberto { display: grid; }
.ainda-nao:focus { outline: none; }
.ainda-nao-caixa { width: 100%; max-width: 28rem; padding: var(--space-lg) var(--space-md) var(--space-md); border-radius: var(--radius-lg); background: var(--color-creme); box-shadow: 0 20px 48px -12px rgba(30, 42, 74, 0.45); }
.ainda-nao-caixa h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: var(--space-sm); }
.ainda-nao-caixa p { margin: 0 0 var(--space-sm); color: var(--color-suave); }
.btn-fechar { display: flex; align-items: center; justify-content: center; min-height: var(--alvo-min); border-radius: var(--radius-md); background: var(--color-noite); color: var(--color-sobre-cor); font-weight: 800; text-decoration: none; }
.btn-fechar:hover { background: var(--color-noite-2); }
@media (min-width: 48rem) {
  .ainda-nao { place-items: center; }
  .ainda-nao-caixa { padding: var(--space-lg); }
}