/* Hallmark · shape: 03 Marquee Hero, a pinned street below · genre: editorial · theme: custom · job: buy · idea: "a white architectural model of a commercial street where the black Kepzen products are the only dark things, lit by the business day as you scroll" · vibe: "white model, warm sun, black objects, quiet"
 * paper: oklch(98.4% 0.004 80) · accent: none, ink oklch(19% 0.006 70) · display: Albert Sans · body: Albert Sans · hero: Ledge, the three.js model fills the screen and the head rests on a white band at its base · nav: a drawing sheet's index, a vertical rail on the left · footer: the sheet's title block (carimbo) · imagery: the product built in three.js, still renders of the same scene as fallback · signature: the sun runs from 9h to 18h as you scroll and the camera stops at each shop
 * axes: light/grotesk-sans/neutral · posture: Restrained · contrast: pass · fold: pass · comp: referencia.png (PO-approved) · reproduced (checked at 1440x900) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: P and H, a white model can read as a pretty render with no offer; every stop carries its two prices as order links and the band keeps the action at the base of the first screen */

/* Hallmark · hero-review: fix · 5 findings · 5 resolved · finish-review: subagent · 6 findings + copy + carried · scored 4 resolved 2 partial, 2 new defects fixed in the last batch · gap: chairs simpler than the comp; nothing carries the model below the price table */
/* Hallmark · reworded "Mais do que um cartão." to "Sites, marca e automações." · craft § 6, the finish review found the head would pass on any NFC competitor; it now names what this section holds */
/* Hallmark · reworded "O que perguntam antes de pedir." to "Perguntas de quem tem loja no Acre." · craft § 6, the same finding; the head names who asks */
/* Hallmark · dismissed 42 · the six links stand in a vertical drawing-sheet index on the left rail with no button in it; the wordmark and the action live in the band at the base of the model */
/* Hallmark · dismissed 58 · the page total and the 93-word footer screen come from text the content rules keep verbatim: the privacy note, the legal line, the renewal and change fees and the six real questions */

@import url("./tokens.css");
@import url("./base.css");

/* ---------- Folha ---------- */
body { font-size: var(--text-md); line-height: 1.6; font-synthesis: none; }
.pular { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.pular:focus-visible { transform: none; }
h2 { font-size: var(--text-section); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.08; max-width: 22ch; }
h3 { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); }
a:hover { text-decoration-thickness: 2px; }

.marca { font-family: var(--font-display); font-size: var(--text-marca); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.marca:focus-visible { outline-offset: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.link:hover { text-decoration-thickness: 2px; }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Índice (prancha) ---------- */
.indice { position: fixed; top: var(--space-sm); right: var(--space-sm); z-index: var(--z-sticky-nav); display: flex; flex-direction: column; align-items: flex-end; }
.indice__abrir { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.indice__abrir:hover { background: var(--color-paper-2); }
.indice__abrir:active { background: var(--color-paper-3); }
.indice__abrir:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.indice__lista { display: none; list-style: none; margin: var(--space-xs) 0 0; padding: var(--space-xs) 0; min-width: 14rem; border: 1px solid var(--color-ink); background: var(--color-paper); }
.indice[data-aberto] .indice__lista { display: block; }
.indice__lista a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); color: var(--color-ink); text-decoration: none; }
.indice__lista a:hover { background: var(--color-paper-2); }
.indice__lista a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.indice__lista a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }
.indice__pe { display: none; }

@media (min-width: 64rem) {
  .indice { inset: 0 auto 0 0; width: var(--rail); padding: var(--space-xl) var(--space-md) var(--space-lg); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; border-right: 1px solid var(--color-rule); background: var(--color-paper); }
  .indice__abrir { display: none; }
  .indice__lista { display: block; margin: 0; padding: 0; min-width: 0; border: 0; background: none; }
  .indice__lista a { min-height: 40px; padding: 0; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
  .indice__lista a:hover { background: none; color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.3em; }
  .indice__lista a[aria-current] { color: var(--color-ink); }
  .indice__pe { display: block; font-size: var(--text-xs); color: var(--color-muted); }
  main, .carimbo { margin-left: var(--rail); }
}

/* ---------- A rua: palco, faixa, paradas ---------- */
.rua { position: relative; }
.palco { position: relative; height: clamp(22rem, calc(var(--alto, 100svh) - var(--faixa, 11rem)), 60rem); overflow: hidden; background: var(--color-modelo); }
.palco__still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* imagem parada: o palco nunca fica mais alto que a proporção da imagem, para as três lojas não saírem pelos lados */
html:not(.vivo) .palco { width: 100%; height: auto; aspect-ratio: 2608 / 1450; max-height: calc(var(--alto, 100svh) - var(--faixa, 11rem)); min-height: 0; }
@media (max-width: 40rem) { html:not(.vivo) .palco { aspect-ratio: 900 / 1130; } }
.palco__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.palco__nota { position: absolute; right: var(--space-lg); bottom: var(--space-md); z-index: var(--z-raised); font-size: var(--text-xs); color: var(--color-ink-2); }
.vivo .palco__nota { top: var(--space-md); right: var(--space-lg); bottom: auto; }
@media (max-width: 64rem) { .vivo .palco__nota { right: auto; left: var(--space-md); top: var(--space-lg); max-width: 14rem; } }

/* arco do sol: diagrama do horário de atendimento */
.sol { position: absolute; left: 17%; right: 17%; top: 6%; height: 9%; z-index: var(--z-raised); color: var(--color-ink); }
.sol__arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sol__arco path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sol__ponta { position: absolute; bottom: 0; font-size: var(--text-rotulo); font-weight: 600; line-height: 1; transform: translateY(50%); }
.sol__ponta--ini { right: 100%; margin-right: var(--space-xl); }
.sol__ponta--fim { left: 100%; margin-left: var(--space-xl); }
.sol__marca { position: absolute; left: 0; top: 100%; width: 44px; height: 44px; transform: translate(calc(var(--sx, 0px) - 50%), calc(var(--sy, 0px) - 50%)); background: var(--color-modelo); border-radius: var(--radius-pill); }
.sol__marca svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sol__agora { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.sol__agora[data-ponta] { visibility: hidden; }

/* rótulos de arquitetura com linha de chamada */
.rotulo, .guias { display: none; }
.js .rotulo { display: block; position: absolute; left: 0; top: 0; z-index: var(--z-raised); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-ink); font-size: var(--text-rotulo); font-weight: 600; line-height: 1.15; white-space: nowrap; color: var(--color-ink); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.js .rotulo--duas { white-space: normal; width: 12ch; }
.js .guias { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-raised); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.guias path { fill: none; stroke: var(--color-ink); stroke-width: 1.4; }
.guias circle { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.6; }

.faixa { display: grid; grid-template-columns: auto 1px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-xl); padding: var(--space-xl) max(var(--gutter), calc((100% - var(--container)) / 2)); background: var(--color-paper); }
.faixa__fio { align-self: stretch; background: var(--color-ink); margin-block: var(--space-xs); }
.faixa h1 { font-size: var(--text-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.04; max-width: none; }
.faixa__texto p { margin-top: var(--space-xs); font-size: var(--text-lead); color: var(--color-ink-2); }

/* paradas: sem WebGL, cada loja é uma imagem parada ao lado do texto */
.paradas { display: grid; gap: var(--space-3xl); padding-block: var(--section-gap-s); }
.parada { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.parada__still { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-modelo); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.parada__still img { width: 100%; height: 100%; object-fit: cover; }
.parada__texto { display: grid; gap: var(--space-lg); justify-items: start; }
.parada__texto h2 { font-size: var(--text-display-s); }
.parada--fim .parada__still { aspect-ratio: 2 / 1; }
.fim__frase { font-size: var(--text-display-s); line-height: 1.1; letter-spacing: var(--tracking-display); max-width: 18ch; }

.mini { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini th, .mini td { padding: var(--space-sm) var(--space-xs) var(--space-sm) 0; border-top: 1px solid var(--color-rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.mini thead th { border-top: 0; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.mini tbody th { font-weight: 600; }
.mini a, .tabela a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.mini a:hover, .tabela a:hover { text-decoration-thickness: 2px; }
.mini__nota { font-size: var(--text-sm); color: var(--color-ink-2); }
.tabela caption { caption-side: top; padding-bottom: var(--space-md); text-align: left; font-size: var(--text-sm); color: var(--color-muted); }
.mini a:focus-visible, .tabela a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* modo vivo: o palco fica parado e as lojas passam por cima */
.vivo .palco { position: sticky; top: 0; height: 100svh; }
.vivo .palco__still { display: none; }
.vivo .abertura { position: relative; z-index: var(--z-raised); height: 100svh; margin-top: -100svh; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.vivo .faixa { pointer-events: auto; }
.vivo .paradas { position: relative; z-index: var(--z-raised); display: block; padding: 0; pointer-events: none; }
.vivo .parada { display: flex; justify-content: flex-end; align-items: center; min-height: 140svh; max-width: none; padding-inline: var(--gutter); }
.vivo .parada__still { display: none; }
.vivo .parada__texto { pointer-events: auto; width: min(29rem, 38%); padding: var(--space-xl); background: var(--color-paper); border: 1px solid var(--color-rule); }
.vivo .parada--fim { justify-content: flex-start; align-items: center; min-height: 150svh; }
.vivo .parada--fim .parada__texto { width: min(34rem, 48%); }

/* ---------- Quadro de preços ---------- */
.quadro { padding-block: var(--section-gap-l) var(--section-gap); border-top: 1px solid var(--color-ink); background: var(--color-paper); position: relative; z-index: var(--z-raised); }
.cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.cab .lead { justify-self: end; text-align: right; }
.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-bottom: var(--space-3xl); }
.opcao { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.opcao p { color: var(--color-ink-2); }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: middle; }
.tabela thead th { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); border-bottom-color: var(--color-ink); white-space: nowrap; }
.tabela tbody th { font-size: var(--text-title); font-weight: 600; width: 42%; }
.tabela tbody th span { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.peca { float: left; width: 96px; height: 72px; margin-right: var(--space-md); object-fit: cover; outline: 1px solid var(--color-rule); outline-offset: -1px; }
@media (max-width: 40rem) { .peca { width: 64px; height: 48px; margin-right: var(--space-sm); } }
.notas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-3xl) 0 0; }
.notas div { display: grid; gap: var(--space-xs); align-content: start; }
.notas dt { font-weight: 600; }
.notas dd { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- Como funciona ---------- */
.passos { padding-block: var(--section-gap); background: var(--color-paper-2); position: relative; z-index: var(--z-raised); }
.passos__lista { counter-reset: passo; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; }
.passos__lista li { counter-increment: passo; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.passos__lista li::before { content: counter(passo); font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 400; line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.passos__lista p { color: var(--color-ink-2); }

/* ---------- Serviços ---------- */
.servicos { padding-block: var(--section-gap-s) var(--section-gap-s); border-top: 1px solid var(--color-rule); background: var(--color-paper); position: relative; z-index: var(--z-raised); }
.linhas { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; border-top: 1px solid var(--color-ink); }
.linhas li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.linhas p { color: var(--color-ink-2); }
.linhas .link { justify-self: end; }

/* ---------- Dúvidas ---------- */
.duvidas { padding-block: var(--section-gap-l) var(--section-gap); background: var(--color-paper); position: relative; z-index: var(--z-raised); }
.duvidas__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.duvidas__lista { border-top: 1px solid var(--color-ink); }
.duvidas details { border-bottom: 1px solid var(--color-rule); }
.duvidas summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); font-size: var(--text-lg); font-weight: 600; cursor: pointer; list-style: none; }
.duvidas summary::-webkit-details-marker { display: none; }
.mais { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.duvidas details[open] .mais .v { opacity: 0; }
.duvidas summary:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.duvidas summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.duvidas details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
.duvidas details:not([open]) > p { display: none; }

/* ---------- Carimbo (rodapé) ---------- */
.carimbo { padding-block: var(--section-gap-l) var(--space-2xl); background: var(--color-paper); position: relative; z-index: var(--z-raised); }
.carimbo__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--color-ink); }
.carimbo__marca { display: grid; gap: var(--space-lg); align-content: start; justify-items: start; padding: var(--space-xl); border-right: 1px solid var(--color-ink); }
.marca--grande { font-size: clamp(3.5rem, 6vw, 6rem); }
.carimbo__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.carimbo__dados div { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.carimbo__dados div:nth-child(odd) { border-right: 1px solid var(--color-rule); }
.carimbo__dados div:nth-last-child(-n+2) { border-bottom: 0; }
.carimbo__dados dt { font-size: var(--text-sm); color: var(--color-muted); }
.carimbo__dados dd { margin: 0; }
.carimbo__dados a { color: var(--color-ink); }
.privacidade { margin-top: var(--space-xl); max-width: 64ch; font-size: var(--text-sm); color: var(--color-ink-2); }
.legal { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Telas menores ---------- */
@media (max-width: 87.5rem) {
  .faixa { grid-template-columns: auto 1px minmax(0, 1fr); row-gap: var(--space-md); }
  .faixa .btn { grid-column: 3; justify-self: start; }
  .faixa__fio { grid-row: span 2; }
  .marca:not(.marca--grande) { grid-row: span 2; }
}
@media (max-width: 64rem) {
  .faixa { grid-template-columns: auto 1px minmax(0, 1fr); row-gap: var(--space-lg); padding-top: var(--space-xl); }
  .faixa .btn { grid-column: 3; justify-self: start; }
  .linhas li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .linhas .link { grid-column: 2; justify-self: start; }
  .notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
}
@media (max-width: 60rem) {
  .parada, .cab, .duvidas__grade, .carimbo__grade, .opcoes { grid-template-columns: minmax(0, 1fr); }
  .cab .lead { justify-self: start; text-align: left; }
  .carimbo__marca { border-right: 0; border-bottom: 1px solid var(--color-ink); }
  .sol { left: 20%; right: 20%; top: 12%; height: 7%; }
  .vivo .parada { align-items: flex-end; justify-content: center; padding-bottom: var(--space-xl); }
  .vivo .parada__texto { width: 100%; max-width: 34rem; padding: var(--space-lg); }
  .vivo .parada--fim .parada__texto { width: 100%; }
}
@media (max-width: 40rem) {
  .palco { height: max(20rem, calc(var(--alto, 100svh) - var(--faixa, 22rem))); }
  .faixa { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) var(--gutter) var(--space-xl); }
  .faixa__fio { display: none; }
  .faixa .btn { grid-column: 1; width: 100%; }
  .palco__nota { right: var(--space-md); bottom: var(--space-sm); }
  .linhas li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .linhas .link { grid-column: 1; }
  .notas, .passos__lista, .carimbo__dados { grid-template-columns: minmax(0, 1fr); }
  .carimbo__dados div:nth-child(odd) { border-right: 0; }
  .carimbo__dados div:nth-last-child(2) { border-bottom: 1px solid var(--color-rule); }
  .tabela thead th:first-child { width: auto; }
  .tabela th, .tabela td { padding-right: var(--space-xs); }
  .tabela tbody th { font-size: var(--text-lg); width: auto; }
  .sol__ponta { font-size: var(--text-sm); }
}

/* captura das imagens paradas (?render=) */
.render .pular, .render .indice, .render .abertura, .render .paradas, .render .sol, .render .rotulo, .render .guias, .render .palco__nota, .render main > section:not(.rua), .render .carimbo { display: none !important; }
.render main { margin: 0; }
.render .palco { position: fixed; inset: 0; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .btn, .indice__abrir, .js .rotulo, .js .guias { transition: none; }
}

/* captura (?shot): o índice não se repete em cada trecho da página inteira */
[data-motivo="shot"] .indice { position: absolute; }