/* Visão do Campo — página pública (/).
   Mesma paleta e mesma família tipográfica do produto (app/view/estilo.css): papel claro, tinta
   escura, o verde #1E6B45 e o mapa em fundo escuro. Grade de 8 px, botões de 48 px, títulos grandes.
   Sem brilho, sem degradê decorativo: os únicos degradês são as réguas de cor do mapa, que são dado. */

:root {
  --papel: #F3F5F2; --papel-2: #EAEEE8; --superficie: #FFFFFF; --superficie-2: #F7F8F6;
  --tinta: #151A16; --tinta-2: #525A52; --tinta-3: #596157;
  --linha: #E3E7E1; --linha-forte: #C8CFC6; --contorno: #8A938A;
  --verde: #1E6B45; --verde-escuro: #17593A; --verde-claro: #E7F1EA; --selecionado: #D6EADC; --sobre-selecionado: #0F3D26;
  --ambar: #8A5A08; --ambar-claro: #FBF1DE; --fogo: #B3301C; --azul: #1E5E9E;
  --noite: #0E110F; --noite-2: #151A16; --sobre-noite: #F0F2ED; --sobre-noite-2: rgba(240,242,237,0.74); --verde-na-noite: #9FD3B0;
  --ui: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --raio: 8px; --topo: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--papel); }
body { margin: 0; font-family: var(--ui); font-size: 16px; line-height: 1.5; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--verde); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.escuro :focus-visible, .topo-barra :focus-visible { outline-color: var(--verde-na-noite); }

.pular { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: var(--raio); font-weight: 600; text-decoration: none; }
.pular:focus { top: 8px; }

.cx { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.rotulo { font: 500 12px/16px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 16px; }
.escuro .rotulo { color: var(--verde-na-noite); }
h1 { font-weight: 600; font-size: clamp(38px, 6vw, 76px); line-height: 1.04; letter-spacing: -0.032em; max-width: 19ch; }
h1 span { color: var(--verde); display: block; }
h2 { font-weight: 600; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-weight: 600; }

/* ------------------------------------------------------------ botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--raio); border: 1px solid var(--verde);
  background: var(--verde); color: #fff; font: 600 16px/24px var(--ui); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.botao:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; text-decoration: none; }
.botao-sec { background: transparent; color: var(--tinta); border-color: var(--contorno); }
.botao-sec:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--tinta-3); }
.botao-pequeno { min-height: 40px; padding: 0 16px; }   /* mesma fonte (16) dos outros botões da página: muda só a altura */
.botao-cheio { width: 100%; }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------ topo */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo); background: rgba(243,245,242,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: inline-flex; align-items: center; gap: 0.3em; min-height: 48px; font: 600 16px/24px var(--ui); letter-spacing: -0.02em; text-transform: uppercase; color: var(--tinta); text-decoration: none; white-space: nowrap; }
small { font-size: 12px; }
.marca i { color: var(--verde); font-style: normal; font-weight: 400; }
/* a logo ao lado do nome: o texto da marca continua como é (2026-10-05) */
.marca-img { flex: none; display: block; height: 34px; width: auto; margin-right: 6px; }
.marca-nome { min-width: 0; }
.marca:hover { text-decoration: none; color: var(--tinta); }
.topo-nav { display: flex; align-items: center; gap: 24px; }
.topo-nav a:not(.botao) { display: inline-flex; align-items: center; white-space: nowrap; min-height: 48px; color: var(--tinta-2); font-weight: 500; font-size: 14px; text-decoration: none; padding: 0 8px; border-radius: var(--raio); }
.topo-nav a:not(.botao):hover { color: var(--tinta); text-decoration: underline; }
.topo-barra { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.topo-barra span { display: block; height: 100%; width: 100%; background: var(--verde); transform-origin: left; transform: scaleX(0); }

/* ------------------------------------------------------------ trilho de passos
   Uma linha por trás das bolinhas que enche até a etapa atual (--fill, gravado pelo landing.js). A bolinha atual ganha
   o número da etapa e o nome dela fica SEMPRE à vista, na vertical: um rótulo horizontal ao lado da bolinha cairia em cima
   da tela que a pessoa está olhando. Os outros nomes aparecem só no hover/foco, como antes. */
.trilho { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.trilho.visivel { opacity: 1; pointer-events: auto; }
.trilho::before, .trilho::after { content: ''; position: absolute; right: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; }
.trilho::before { background: rgba(138,147,138,0.55); }
.trilho::after { background: var(--verde); transform-origin: top; transform: scaleY(var(--fill, 0)); transition: transform .3s; }
.trilho a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none; }
.trilho a::after { content: ''; display: flex; align-items: center; justify-content: center; width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); box-shadow: 0 0 0 1px rgba(14,17,15,0.35);
  font: 600 11px/1 var(--mono); color: #fff; transition: width .2s, height .2s, background .2s; }
.trilho a.passou::after { background: var(--verde); box-shadow: 0 0 0 1px #fff; }
.trilho a.atual::after { width: 14px; height: 14px; background: var(--verde); box-shadow: 0 0 0 2px #fff; }
.trilho a.atual[data-n]::after { content: attr(data-n); width: 24px; height: 24px; }
.trilho a span { position: absolute; right: 32px; white-space: nowrap; padding: 4px 8px; border-radius: 4px; background: var(--noite); color: var(--sobre-noite); font: 500 12px/16px var(--ui); opacity: 0; transform: translateX(4px); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 2; }
.trilho a:hover span, .trilho a:focus-visible span { opacity: 1; transform: none; }
.trilho a:hover, .trilho a:focus-visible { z-index: 3; }
/* o nome da etapa atual: vertical, colado à bolinha, fora da tela do produto */
.trilho a.atual span { right: 30px; top: 50%; padding: 8px 4px; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); opacity: 1; font: 500 11px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.trilho a.atual:hover span, .trilho a.atual:focus-visible span { transform: translateY(-50%) rotate(180deg); }

/* ------------------------------------------------------------ hero */
.hero { padding: calc(var(--topo) + 72px) 0 80px; }
.hero-sub { max-width: 62ch; margin-top: 32px; font-size: 20px; line-height: 32px; color: var(--tinta-2); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

.video { margin-top: 64px; }
.video figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--tinta-3); }
.video-moldura { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: var(--noite); box-shadow: 0 0 0 1px rgba(14,17,15,0.18), 0 24px 48px -24px rgba(14,17,15,0.45); }
.video-poster { position: absolute; inset: 0; }
.video-poster canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.video-poster-rotulo { position: absolute; left: 16px; bottom: 16px; padding: 4px 8px; border-radius: 4px; background: rgba(14,17,15,0.88); color: var(--sobre-noite); font: 500 12px/16px var(--mono); }
.video-moldura video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; background: var(--noite); }
.video-moldura.pronto video { opacity: 1; }
.video-moldura.pronto .video-poster { visibility: hidden; transition: visibility 0s .4s; }
.video-aviso { position: absolute; right: 16px; top: 16px; padding: 8px 12px; border-radius: 4px; background: rgba(14,17,15,0.88); color: var(--sobre-noite); font-size: 14px; }
.video-controles { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.video-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border: 1px solid rgba(240,242,237,0.35); border-radius: var(--raio); background: rgba(14,17,15,0.88); color: var(--sobre-noite); font: 600 16px/24px var(--ui); cursor: pointer; }
.video-botao:hover { background: #000; }
.video-botao:focus-visible { outline-color: var(--verde-na-noite); }
.video-botao .som-mudo, .video-botao .toca-icone { display: none; }
.video-botao[aria-pressed="false"] .som-ligado { display: none; }
.video-botao[aria-pressed="false"] .som-mudo { display: inline; }
#video-pausa[aria-pressed="true"] .pausa-icone { display: none; }
#video-pausa[aria-pressed="true"] .toca-icone { display: inline; }

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--linha-forte); }
.numeros dt { font: 600 clamp(28px, 4vw, 44px)/1.1 var(--ui); letter-spacing: -0.03em; }
.numeros dd { margin-top: 8px; color: var(--tinta-2); font-size: 16px; line-height: 24px; max-width: 28ch; }

/* o convite para rolar: fecha o hero e entrega a pessoa à primeira etapa */
.role { grid-area: role; justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--tinta); font: 600 16px/24px var(--ui); text-decoration: none; }
.role svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: balanca 1.8s ease-in-out infinite; }
.role:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ histórias (scrollytelling) */
.historia { position: relative; background: var(--superficie); }
.historia.papel { background: var(--papel-2); }
.historia.escuro, .contato.escuro { background: var(--noite); color: var(--sobre-noite); }
.pista { height: var(--pista, 250vh); position: relative; }   /* era 340vh: cada cena prendia a tela por tempo demais */
.palco { position: sticky; top: 0; height: 100vh; height: 100dvh; max-width: 1360px; margin: 0 auto; padding: calc(var(--topo) + 24px) 32px 32px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.palco-texto { min-width: 0; }
.palco-texto h2 { margin-bottom: 32px; }
.passos { list-style: none; counter-reset: p; display: grid; gap: 16px; }
.passos li { counter-increment: p; position: relative; padding-left: 48px; font-size: 18px; line-height: 28px; color: var(--tinta); opacity: .55; transition: opacity .35s; }
.escuro .passos li { color: var(--sobre-noite); }
/* os passos são um percurso: o número num círculo, e uma linha liga cada um ao seguinte (verde até onde a pessoa já leu) */
.passos li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border: 1.5px solid var(--linha-forte); border-radius: 50%;
  font: 500 11px/21px var(--mono); text-align: center; color: var(--tinta-3); transition: background .25s, border-color .25s, color .25s; }
.passos li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: -18px; width: 2px; background: var(--linha-forte); transition: background .25s; }
.escuro .passos li::before { color: var(--verde-na-noite); border-color: rgba(240,242,237,0.3); }
.escuro .passos li:not(:last-child)::after { background: rgba(240,242,237,0.3); }
.passos li.feito { opacity: .65; }
.passos li.feito::before { background: var(--verde); border-color: var(--verde); color: #fff; }
.passos li.feito:not(:last-child)::after { background: var(--verde); }
.escuro .passos li.feito::before { background: var(--verde-na-noite); border-color: var(--verde-na-noite); color: var(--noite); }
.escuro .passos li.feito:not(:last-child)::after { background: var(--verde-na-noite); }
.passos li.ativo { opacity: 1; }
.passos li.ativo::before { border-color: var(--verde); color: var(--verde); }
.escuro .passos li.ativo::before { border-color: var(--verde-na-noite); color: var(--verde-na-noite); }

/* "Etapa N de M": a barra enche com o progresso da cena (--p, gravado na seção pelo landing.js) */
.historia .rotulo { margin-bottom: 12px; }
.etapa-barra { display: block; height: 3px; margin-bottom: 24px; border-radius: 2px; overflow: hidden; background: var(--linha); }
.escuro .etapa-barra { background: rgba(240,242,237,0.16); }
.etapa-barra i { display: block; height: 100%; background: var(--verde); transform-origin: left; transform: scaleX(var(--p, 0)); }
.escuro .etapa-barra i { background: var(--verde-na-noite); }

/* "A seguir": a pergunta da próxima etapa. É link de verdade (rolagem suave), e acende quando a cena está acabando */
.proximo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin-top: 16px; padding: 8px 0; border-bottom: 1px solid var(--linha-forte); color: var(--tinta); text-decoration: none; transition: border-color .25s; }
.proximo-txt { display: grid; gap: 2px; min-width: 0; }
.proximo-eti { font: 500 12px/16px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-3); }
.proximo-perg { font: 600 16px/24px var(--ui); }
.proximo svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proximo:hover { border-color: var(--verde); }
.proximo:hover .proximo-perg { text-decoration: underline; text-underline-offset: 3px; }
.proximo:hover svg { transform: translateY(2px); }
.historia.fim .proximo { border-color: var(--verde); }
.historia.fim .proximo svg { animation: balanca 1.6s ease-in-out infinite; }
.escuro .proximo { color: var(--sobre-noite); border-color: rgba(240,242,237,0.3); }
.escuro .proximo-eti { color: var(--verde-na-noite); }
.escuro .proximo svg { stroke: var(--verde-na-noite); }
.escuro .proximo:hover, .escuro.historia.fim .proximo { border-color: var(--verde-na-noite); }
.proximo:focus-visible { outline-offset: 4px; border-radius: 4px; }
@keyframes balanca { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.nota-cena { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linha-forte); font: 400 14px/20px var(--mono); color: var(--tinta-2); }
.escuro .nota-cena { border-color: rgba(240,242,237,0.2); color: var(--sobre-noite-2); }

.tela { height: min(660px, calc(100vh - var(--topo) - 64px)); min-height: 440px; min-width: 0; }

/* a janela do produto */
.app { display: flex; flex-direction: column; height: 100%; border-radius: var(--raio); overflow: hidden; background: var(--superficie); color: var(--tinta); font-size: 14px; line-height: 20px;
  box-shadow: 0 0 0 1px rgba(14,17,15,0.25), 0 32px 64px -32px rgba(0,0,0,0.6); }
.escuro .app { box-shadow: 0 0 0 1px rgba(240,242,237,0.14), 0 32px 64px -32px rgba(0,0,0,0.8); }
.app-topo { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; background: var(--superficie); border-bottom: 1px solid var(--linha); overflow: hidden; }
.app-marca { font: 600 14px/16px var(--ui); letter-spacing: -0.02em; text-transform: uppercase; margin-right: 8px; white-space: nowrap; }
.app-marca i { color: var(--verde); font-style: normal; font-weight: 400; }
.app-select { padding: 6px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie-2); font: 500 12px/16px var(--ui); white-space: nowrap; }
.app-medida { margin-left: auto; display: flex; align-items: baseline; gap: 6px; padding-left: 12px; border-left: 1px solid var(--linha-forte); white-space: nowrap; }
.app-medida b { font: 600 14px var(--mono); }
.app-medida em { font: 500 12px var(--ui); font-style: normal; color: var(--tinta-2); }
.app-mapa { position: relative; flex: 1; min-height: 0; background: #1D2A20; overflow: hidden; }
.app-mapa canvas, .lateral-mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-hud { position: absolute; left: 12px; top: 12px; padding: 8px 12px; border-radius: 4px; background: rgba(14,17,15,0.88); color: var(--sobre-noite); font: 500 12px/16px var(--mono); }
.mapa-hud b { font-weight: 600; }
.mapa-legenda { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; background: rgba(14,17,15,0.88); color: var(--sobre-noite); font: 500 12px/16px var(--ui); }
.mapa-legenda i { display: block; width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgb(168,26,18), rgb(226,96,34) 18%, rgb(232,178,46) 32%, rgb(92,168,92) 44%, rgb(92,168,92) 56%, rgb(74,176,168) 70%, rgb(58,124,196) 84%, rgb(36,74,162)); }
.mapa-balao { position: absolute; z-index: 3; max-width: 232px; padding: 8px 12px; border-radius: 4px; background: rgba(14,17,15,0.92); color: var(--sobre-noite); font: 400 12px/16px var(--ui);
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.mapa-balao.on { opacity: 1; transform: none; }
.mapa-balao b { display: block; font: 600 12px/16px var(--mono); margin-bottom: 4px; }

/* lateral */
.lateral-corpo { flex: 1; min-height: 0; display: flex; }
.lateral-mapa { position: relative; flex: 0 0 32%; background: #1D2A20; }
.lateral { flex: 1; min-width: 0; padding: 16px; overflow: hidden; background: var(--superficie); display: flex; flex-direction: column; gap: 8px; }
.lat-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lat-cab h3 { font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.lat-cab p { font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; font: 600 12px/16px var(--ui); white-space: nowrap; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo-ambar { background: var(--ambar-claro); color: var(--ambar); }
.lat-seq { font: 500 12px/16px var(--mono); color: var(--tinta-2); padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.medidas { display: grid; gap: 8px; }
.medida { padding: 8px 0 4px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.medida.on { opacity: 1; transform: none; }
.m-nome { font: 600 14px/20px var(--ui); }
.m-estado { font: 500 12px/16px var(--mono); color: var(--tinta-2); }
.m-estado.abaixo { color: var(--ambar); }
.regua { display: block; margin: 12px 0 8px; }
.trilho-regua { position: relative; display: block; height: 10px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(14,17,15,0.22);
  background: linear-gradient(90deg, rgb(168,26,18) 0%, rgb(168,26,18) 25%, rgb(226,96,34) 30%, rgb(232,178,46) 36%, rgb(92,168,92) 40%, rgb(92,168,92) 60%, rgb(74,176,168) 64%, rgb(58,124,196) 70%, rgb(36,74,162) 75%, rgb(36,74,162) 100%); }
.tq { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -0.5px; background: rgba(14,17,15,0.5); }
.tq.ref { top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: rgba(14,17,15,0.9); box-shadow: 0 0 0 1px rgba(255,255,255,0.75); }
.marca-regua { position: absolute; top: -6px; bottom: -6px; left: 50%; width: 7px; margin-left: -3.5px; border-radius: 3.5px; background: var(--tinta); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(14,17,15,0.55), 0 1px 4px rgba(0,0,0,0.4); }
.m-par { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/16px var(--mono); color: var(--tinta-2); }
.m-par b { color: var(--tinta); font-weight: 600; }
.grafico { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linha); opacity: 0; transition: opacity .4s; }
.grafico.on { opacity: 1; }
.grafico-cab { display: flex; justify-content: space-between; gap: 8px; font: 500 12px/16px var(--ui); color: var(--tinta-2); }
.grafico-cab b { color: var(--tinta); font-weight: 600; font-size: 12px; }
#grafico-svg { display: block; width: 100%; height: 112px; margin-top: 4px; overflow: visible; }
.grafico-leg { display: flex; gap: 16px; font: 400 12px/16px var(--ui); color: var(--tinta-2); }
.grafico-leg i { display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.5px solid var(--fogo); }
.grafico-leg i.l-ref { border-top: 2px dashed var(--tinta-3); }

/* nuvem */
.nuvem-tag { position: absolute; right: 12px; top: 12px; padding: 8px 12px; border-radius: 4px; background: rgba(14,17,15,0.88); color: var(--sobre-noite); font: 500 12px/16px var(--mono); opacity: 0; transition: opacity .3s; }
.nuvem-tag.on { opacity: 1; }
.semana { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linha); background: var(--superficie); }
.dia { padding: 12px 16px; border-right: 1px solid var(--linha); opacity: .4; transition: opacity .3s, background .3s; }
.dia:last-child { border-right: 0; }
.dia b { display: block; font: 600 14px/16px var(--mono); }
.dia span { font: 400 12px/16px var(--ui); color: var(--tinta-2); }
.dia.on { opacity: 1; }
.dia.dia-soma.on { background: var(--verde-claro); }

/* perguntas (balão) */
.chip-info { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity .3s; }
.chip-info.on { opacity: 1; }
.balao { position: absolute; z-index: 4; width: 344px; max-width: calc(100% - 16px); padding: 8px 16px 16px; border-radius: 8px; background: var(--superficie); color: var(--tinta); box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display: grid; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.balao.on { opacity: 1; transform: none; }
.balao-topo { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.balao-alca { display: inline-grid; grid-template-columns: repeat(3, 3px); gap: 3px; padding: 4px 2px; }
.balao-alca i { width: 3px; height: 3px; border-radius: 50%; background: var(--linha-forte); }
.balao-lugar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/16px var(--ui); color: var(--tinta-2); }
.balao-pontos { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.balao-pontos i { width: 6px; height: 6px; border-radius: 3px; background: var(--linha-forte); }
.balao-pontos i.feito { background: var(--verde); }
.balao-pontos i.atual { width: 16px; background: var(--tinta); }
.balao .fase { grid-area: 2 / 1; transition: opacity .3s; }
.balao .fase-2 { opacity: 0; visibility: hidden; }
.balao.f2 .fase-1 { opacity: 0; visibility: hidden; }
.balao.f2 .fase-2 { opacity: 1; visibility: visible; }
.balao-sobre { font: 500 12px/16px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-3); }
.balao h3 { margin-top: 4px; font-size: 16px; line-height: 24px; }
.fatos { list-style: none; margin-top: 8px; display: grid; gap: 4px; font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.fatos li { position: relative; padding-left: 16px; }
.fatos li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--tinta-3); }
.fatos b { color: var(--tinta); font-weight: 600; }
.recomenda { margin-top: 12px; padding: 8px 12px; border-radius: 4px; background: var(--ambar-claro); color: #5E3D05; font-weight: 600; font-size: 14px; }
.balao-botoes { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.b-prim, .b-sec { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--raio); font: 600 14px/20px var(--ui); }
.b-prim { background: var(--verde); color: #fff; transition: transform .15s, background .15s; }
.b-prim.press { transform: scale(.96); background: var(--verde-escuro); }
.b-sec { border: 1px solid var(--contorno); color: var(--tinta-2); }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.opcoes span { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--contorno); border-radius: var(--raio); font-size: 14px; line-height: 16px; transition: background .2s, color .2s, border-color .2s; }
.opcoes span.sel { border-color: transparent; background: var(--selecionado); color: var(--sobre-selecionado); font-weight: 600; }
.balao-ok { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--verde); font-weight: 600; opacity: 0; transition: opacity .3s; }
.balao-ok.on { opacity: 1; }
.cursor { position: absolute; z-index: 6; left: 0; top: 0; opacity: 0; transition: transform .7s cubic-bezier(.3,.1,.2,1), opacity .3s; pointer-events: none; }
.cursor.on { opacity: 1; }

/* descarte */
.descarte { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--papel); overflow: hidden; }
.cartao { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie);
  opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s; flex: 1; }
.cartao.on { opacity: 1; transform: none; }
.cartao.sobra { grid-template-columns: minmax(0, 1fr) auto; border-color: var(--ambar); background: var(--ambar-claro); }
.cartao-arte svg { display: block; width: 100%; height: auto; border-radius: 4px; background: #1D2A20; }
.cartao h3 { font-size: 14px; line-height: 20px; }
.cartao p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--raio); background: var(--selecionado); color: var(--sobre-selecionado); font: 600 12px/16px var(--ui); white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .3s .15s, transform .3s .15s; }
.pilula i { width: 8px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
.pilula-ambar { background: #F0D9AE; color: #5E3D05; }
.pilula-ambar i { border: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: none; }
.cartao.feito .pilula { opacity: 1; transform: none; }

/* ferramentas */
.ferr-abas { flex: none; display: flex; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.ferr-abas span { padding: 12px 20px; font: 600 14px/20px var(--ui); color: var(--tinta-2); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.ferr-abas span.on { color: var(--verde); border-color: var(--verde); }
.ferr-corpo { position: relative; flex: 1; min-height: 0; padding: 20px; background: var(--papel); overflow: hidden; }
.ferr-painel { display: none; }
.ferr-painel.on { display: block; animation: entra .35s both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ferr-tit { font: 500 12px/16px var(--mono); color: var(--tinta-2); margin-bottom: 12px; }
.ferr-rodape { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.agendada { padding: 16px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--superficie); transition: opacity .4s, transform .4s, max-height .4s, padding .4s, margin .4s; max-height: 220px; overflow: hidden; }
.agendada.some { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: -12px; }
.ag-sobre { font: 500 12px/16px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ambar); }
.agendada h3 { margin-top: 4px; font-size: 16px; line-height: 24px; }
.ag-q { margin-top: 8px; font-size: 14px; color: var(--tinta-2); }
.ag-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ag-botoes span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--contorno); border-radius: var(--raio); font: 600 14px/16px var(--ui); transition: background .15s, color .15s, transform .15s; }
.ag-botoes span.press { background: var(--verde); color: #fff; border-color: var(--verde); transform: scale(.97); }
.lista-manejo { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.lista-manejo li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); font-size: 14px; }
.lista-manejo li b { font: 600 12px var(--mono); }
.lista-manejo li.novo { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; transition: all .4s; }
.lista-manejo li.novo.on { max-height: 60px; opacity: 1; padding: 12px 16px; border-width: 1px; }
.etq { font: 600 12px/16px var(--ui); font-style: normal; padding: 2px 8px; border-radius: 4px; }
.etq-ok { background: var(--selecionado); color: var(--sobre-selecionado); }
.tab-analise { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; font-size: 14px; }
.tab-analise th { text-align: left; padding: 8px 16px; font: 500 12px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 1px solid var(--linha); }
.tab-analise td { padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.tab-analise tr:last-child td { border-bottom: 0; }
.tab-analise td.num { font-family: var(--mono); font-weight: 500; }
.tab-analise tr { opacity: 0; transition: opacity .35s; }
.tab-analise tr.on, .tab-analise tr:first-child { opacity: 1; }
.classe { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 600 12px/16px var(--ui); background: var(--cinza, #ECEEEA); color: var(--tinta-2); }
.classe.boa { background: var(--selecionado); color: var(--sobre-selecionado); }
.classe.media { background: var(--ambar-claro); color: var(--ambar); }
.classe.sem { background: none; color: var(--tinta-3); font-weight: 400; padding-left: 0; }
.passos-calc { display: flex; gap: 4px; margin-bottom: 16px; }
.passos-calc span { flex: 1; text-align: center; padding: 8px 4px; border-bottom: 3px solid var(--linha-forte); font: 600 12px/16px var(--ui); color: var(--tinta-3); }
.passos-calc span.on { color: var(--verde); border-color: var(--verde); }
.calc-linhas { display: grid; gap: 12px; }
.calc-linha { padding: 12px 16px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.calc-linha.on { opacity: 1; transform: none; }
.cl-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cl-topo b { font: 600 14px/20px var(--ui); }
.cl-topo span { font: 500 12px/16px var(--mono); color: var(--tinta-2); }
.cl-barra { display: flex; height: 10px; margin: 8px 0; border-radius: 5px; overflow: hidden; background: var(--cinza, #ECEEEA); }
.cl-barra i { display: block; height: 100%; width: 0; transition: width .7s cubic-bezier(.3,.1,.2,1); }
.cl-barra .b-feito { background: var(--verde); }
.cl-barra .b-agend { background: var(--azul); }
.cl-barra .b-falta { background: repeating-linear-gradient(135deg, #D9A441 0 4px, #F0D9AE 4px 8px); }
.cl-prod { font: 400 12px/16px var(--ui); color: var(--tinta-2); }
.cl-prod b { color: var(--tinta); font-weight: 600; font-family: var(--mono); }

/* ------------------------------------------------------------ princípios */
.principios { padding: 120px 0; background: var(--papel); }
.principios h2 { max-width: 18ch; margin-bottom: 64px; }
.grade-principios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.principio { display: flex; flex-direction: column; padding: 32px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.js [data-rev] { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.js [data-rev].visivel { opacity: 1; transform: none; }
.principio-n { font: 500 12px/16px var(--mono); color: var(--tinta-3); margin-bottom: 24px; }
.principio h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.principio p { margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--tinta-2); }
.principio-arte { margin-top: auto; padding-top: 32px; }
.cam-vazio { display: block; padding: 12px 16px; border: 1.5px dashed var(--contorno); border-radius: 8px; }
.cam-vazio em { display: block; font: 500 12px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); font-style: normal; }
.cam-vazio i { display: block; height: 20px; margin-top: 4px; border-bottom: 1px solid var(--linha-forte); }
.cam-num { display: block; padding: 12px 16px; border-radius: 8px; background: var(--papel); border: 1px solid var(--linha); }
.cam-num b { display: block; font: 600 22px/32px var(--mono); letter-spacing: -0.02em; }
.cam-num em { display: block; font: 400 12px/16px var(--mono); color: var(--tinta-2); font-style: normal; }
.cam-ambar { background: var(--ambar-claro); border-color: #E9CF9C; }
.cam-ambar b { color: var(--ambar); font-family: var(--ui); font-size: 18px; }

/* ------------------------------------------------------------ contato (era a fila de espera; o visual é o mesmo) */
.contato { padding: 120px 0; }
.contato-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.contato-texto h2 { margin-bottom: 24px; }
.contato-texto > p:not(.rotulo) { font-size: 18px; line-height: 28px; color: var(--sobre-noite-2); max-width: 44ch; }
.contato-caixa { padding: 32px; border-radius: var(--raio); background: var(--papel); color: var(--tinta); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.campo { min-width: 0; border: 0; padding: 0; margin: 0; }
.campo label, .campo legend { display: block; margin-bottom: 8px; padding: 0; font: 500 14px/20px var(--ui); color: var(--tinta); }
.campo label small { font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
.campo:has([aria-invalid="true"]) > label { color: #B3261E; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"] { display: block; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--contorno); border-radius: var(--raio); background: #fff; color: var(--tinta); font: 400 16px/24px var(--ui); }
.campo textarea { display: block; width: 100%; min-height: 144px; padding: 12px 16px; border: 1px solid var(--contorno); border-radius: var(--raio); background: #fff; color: var(--tinta); font: 400 16px/24px var(--ui); resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: var(--tinta-2); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--verde); outline-offset: 0; border-color: var(--verde); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border: 2px solid #B3261E; padding-left: 15px; }
.campo textarea[aria-invalid="true"] { padding: 11px 15px; }
.campo-largo { grid-column: 1 / -1; }
.campo-contagem { margin: 4px 0 0; font: 400 12px/16px var(--ui); color: var(--tinta-3); text-align: right; }
.contato-caixa #form-enviar { margin-top: 24px; }
.contato-nota { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.perfil, .campos .perfil { grid-column: 1 / -1; }
.perfil { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil legend { width: 100%; }
.perfil label { position: relative; display: inline-block; margin: 0; cursor: pointer; }
.perfil input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.perfil span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--contorno); border-radius: var(--raio); background: #fff; font: 500 16px/24px var(--ui); transition: background .15s; }
.perfil input:checked + span { background: var(--selecionado); border-color: transparent; color: var(--sobre-selecionado); font-weight: 600; }
.perfil input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 24px 0; font-size: 14px; line-height: 20px; cursor: pointer; }
.consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--verde); }
.erro { position: relative; margin: 0 0 16px; padding: 12px 16px 12px 44px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); font-size: 14px; line-height: 20px; font-weight: 400; }
/* a cor de erro fica só no ícone (o mesmo banner do produto, estilo.css) */
.erro::before { content: ''; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; background: #B3261E;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.obrigado { display: none; padding: 32px 0; }
.obrigado h3 { font-size: 28px; line-height: 36px; letter-spacing: -0.02em; color: var(--verde); }
.obrigado p { margin-top: 12px; color: var(--tinta-2); font-size: 16px; }
.obrigado .botao { margin-top: 20px; }
.obrigado.on, .obrigado:target { display: block; }
.contato-caixa.enviado form { display: none; }
.obrigado:focus { outline: none; }

.rodape { padding: 40px 0 48px; background: var(--noite); color: var(--sobre-noite-2); border-top: 1px solid rgba(240,242,237,0.14); font-size: 14px; line-height: 20px; }
.rodape-in { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.rodape .marca { color: var(--sobre-noite); }
.rodape a { color: var(--verde-na-noite); }

/* ------------------------------------------------------------ telas menores */
/* de 1101 a 1440 px a tela do produto iria até a borda: o palco cede lugar ao trilho */
@media (min-width: 1101px) and (max-width: 1440px) { .palco { padding-right: 72px; } }
@media (max-width: 1100px) {
  .topo-nav { gap: 8px; }
  .topo-nav a[href="#cotacao"] { display: none; }   /* com "Fale com a gente" no menu, o preço do café já está no hero */
  .trilho { display: none; }
  .lateral-mapa { display: none; }
  .palco { gap: 32px; padding-left: 24px; padding-right: 24px; }
}
/* telas baixas (notebook de 720 a 860 px): a coluna de texto ganha o "a seguir" e a barra de etapa, e precisa continuar cabendo no palco */
@media (min-width: 861px) and (max-height: 860px) {
  .palco-texto h2 { font-size: clamp(26px, 3.1vw, 40px); margin-bottom: 20px; }
  .historia .rotulo { margin-bottom: 8px; }
  .etapa-barra { margin-bottom: 16px; }
  .passos { gap: 12px; }
  .passos li { padding-left: 44px; font-size: 16px; line-height: 24px; }
  .passos li::before { top: 0; }
  .passos li:not(:last-child)::after { top: 24px; bottom: -12px; }
  .nota-cena { margin-top: 16px; padding-top: 12px; font-size: 13px; line-height: 18px; }
  .proximo { margin-top: 8px; min-height: 48px; padding: 4px 0; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .palco { padding-top: calc(var(--topo) + 8px); padding-bottom: 16px; }
}
@media (max-width: 860px) {
  :root { --topo: 56px; }
  .cx, .topo-in { padding-left: 16px; padding-right: 16px; }
  .topo-nav a:not(.botao) { display: none; }
  .hero { padding-top: calc(var(--topo) + 40px); padding-bottom: 48px; }
  .hero-sub { font-size: 18px; line-height: 28px; margin-top: 24px; }
  .video { margin-top: 40px; }
  .video-moldura { border-radius: 8px; }
  /* o rótulo sai da vista mas continua no leitor de tela (display:none o tirava dos dois) */
  .video-botao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .video-botao { padding: 0 12px; min-height: 48px; min-width: 48px; justify-content: center; }
  .botao-pequeno { min-height: 48px; }
  .numeros { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  /* no celular a página deixa de ter palco preso: o texto vem primeiro, a tela logo depois, e a animação roda uma vez ao entrar na vista */
  .pista { height: auto; }
  .palco { position: static; height: auto; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 16px; }
  .passos li, .passos li.feito { opacity: 1; }
  .proximo { margin-top: 24px; }
  .tela { height: auto; min-height: 0; }
  .app { height: auto; }
  .app-mapa { flex: none; height: 360px; }
  .app-medida { display: none; }
  .app-topo .app-select:nth-child(3) { display: none; }
  .lateral-corpo { display: block; }
  .lateral { overflow: visible; }
  #grafico-svg { height: 120px; }
  .mapa-legenda i { width: 72px; }
  .balao { width: calc(100% - 16px); }
  .cartao { grid-template-columns: 1fr; gap: 8px; }
  .cartao.sobra { grid-template-columns: 1fr; }
  .cartao-arte { max-width: 280px; }
  .pilula { justify-self: start; }
  .ferr-corpo { min-height: 420px; }
  .ferr-abas span { flex: 1; text-align: center; padding: 12px 4px; }
  .semana .dia { padding: 8px 12px; }
  .principios, .contato { padding: 64px 0; }
  .principios h2 { margin-bottom: 32px; }
  .grade-principios { grid-template-columns: 1fr; }
  .principio { padding: 24px; }
  .contato-grade { grid-template-columns: 1fr; gap: 40px; }
  .contato-caixa { padding: 24px 16px; }
  .campos { grid-template-columns: 1fr; }
  .rodape-in { grid-template-columns: 1fr; gap: 16px; }
}

/* quem prefere menos movimento recebe a página sem palco preso e sem transições: cada tela já nasce no estado final */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .pista { height: auto; }
  .palco { position: static; height: auto; grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 64px; }
  .passos li, .passos li.feito { opacity: 1; }
  .etapa-barra { display: none; }   /* sem rolagem presa não há progresso a mostrar: a barra ficaria cheia o tempo todo */
  .tela { height: auto; min-height: 0; }
  .app { height: auto; }
  .app-mapa { flex: none; height: 420px; }
  .lateral-corpo { display: block; }
  .lateral { overflow: visible; }
  .js [data-rev] { opacity: 1; transform: none; }
  .video-botao#video-pausa { display: inline-flex; }
}
@media print { .topo, .trilho, .role, .proximo, .etapa-barra { display: none; } .pista { height: auto; } .palco { position: static; height: auto; } }
@media (max-width: 860px) {
  .app-mapa.mapa-pergunta { height: auto; display: flex; flex-direction: column; }
  .mapa-pergunta canvas { position: relative; inset: auto; height: 300px; flex: none; }
  .mapa-pergunta .balao { position: relative; left: auto; top: auto; width: auto; margin: 8px; max-width: none; }
}
@media (max-width: 860px) {
  .nuvem-tag { left: 12px; right: auto; top: auto; bottom: 12px; max-width: calc(100% - 24px); }
}

/* ============================================================ o preço do café (hero + painel) */
.hero-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start;
  /* o TÍTULO vem antes da tabela de preços: no celular o card tinha 936 px e empurrava a promessa do produto
     para depois da primeira tela (auditoria D-08) */
  grid-template-areas: "conteudo" "cotacao" "role"; }
.hero-grade > .cotacao { grid-area: cotacao; }
.hero-grade > .hero-conteudo { grid-area: conteudo; min-width: 0; }
@media (min-width: 1020px) {
  .hero-grade { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; grid-template-areas: "conteudo cotacao" "role role"; }
  .hero-grade > .cotacao { position: sticky; top: calc(var(--topo) + 24px); }
}
.cotacao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; font-size: 16px; line-height: 1.5; }
.cot-cab { padding: 20px 20px 16px; }
.cot-cab h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.cot-data { margin-top: 2px; font-size: 16px; color: var(--tinta-2); }
.cot-abas { margin: 0 20px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--raio); background: var(--papel-2); }
.cot-abas button { min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--raio); font: 600 16px var(--ui); cursor: pointer; background: transparent; color: #3D453E; }
.cot-abas button[aria-pressed="true"] { background: var(--verde); color: #fff; }
.cot-dest { margin: 16px 20px 0; padding: 18px; border-radius: var(--raio); background: var(--verde-claro); }
.cot-dest-nome { font-size: 16px; font-weight: 600; color: var(--verde-escuro); }
.cot-preco { margin-top: 4px; font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cot-unidade { margin-top: 2px; font-size: 16px; color: var(--tinta-2); }
.cot-var { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 4px; background: var(--superficie); font-size: 16px; font-weight: 600; }
.cot-sobe { color: var(--verde-escuro); } .cot-desce { color: var(--fogo); } .cot-igual { color: var(--tinta-2); }
.cot-sem-titulo { margin-top: 20px; font-size: 16px; font-weight: 600; color: var(--verde-escuro); }
.cot-grafico { position: relative; height: 100px; margin-top: 8px; }
.cot-grafico svg { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100px; }
.cot-grafico svg polyline { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cot-ponto { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.cot-ponto-valor { display: block; height: 20px; line-height: 20px; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinta); }
.cot-ponto i { display: block; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px var(--verde-claro); }
.cot-ponto.ultimo .cot-ponto-valor { color: var(--verde-escuro); }
.cot-ponto.ultimo i { width: 12px; height: 12px; margin-top: 4px; }
.cot-dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 6px; text-align: center; font-size: 14px; color: var(--tinta-2); }
.cot-dias .ultimo { color: var(--verde-escuro); font-weight: 700; }
.cot-pergunta { margin: 20px 20px 6px; font-size: 16px; font-weight: 600; }
.cot-lista { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.cot-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px; font-size: 16px; border-radius: var(--raio); cursor: pointer; font-family: inherit; border: 2px solid var(--linha); background: var(--superficie); color: var(--tinta); text-align: left; }
.cot-item[aria-pressed="true"] { border-color: var(--verde); background: #F2F8F4; }
.cot-item-esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cot-marca { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #8A938A; background: #fff; }
.cot-item[aria-pressed="true"] .cot-marca { border: 7px solid var(--verde); }
.cot-item b { display: block; font-weight: 600; font-size: 16px; }
.cot-item small { display: block; font-size: 14px; color: var(--tinta-3); }
.cot-item-dir { text-align: right; white-space: nowrap; }
.cot-item-dir b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cot-item-dir span { display: block; font-size: 14px; font-weight: 600; }
.cot-nota { padding: 16px 20px 20px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.cot-falha { margin: 8px 20px 0; padding: 18px; border-radius: var(--raio); background: var(--papel-2); font-size: 16px; font-weight: 600; }
.cot-falha button { margin-top: 12px; display: block; }
.cot-esqueleto { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.cot-esqueleto i { display: block; border-radius: var(--raio); background: var(--papel-2); animation: cot-pulso 1.4s ease-in-out infinite; }
.cot-esqueleto .e-abas { height: 56px; } .cot-esqueleto .e-dest { height: 230px; } .cot-esqueleto .e-linha { height: 64px; }
@keyframes cot-pulso { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cot-esqueleto i { animation: none; } }
.cotacao button:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.sr-so { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.alem { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 56px 0; }
.alem h2 { font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.028em; max-width: 24ch; }
.alem-grade { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.alem-grade a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.alem-grade a:hover { border-color: var(--verde); }
.alem-grade svg { width: 44px; height: 44px; padding: 10px; border-radius: var(--raio); background: var(--verde-claro); fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alem-grade b { font-size: 18px; font-weight: 600; }
.alem-grade span { font-size: 16px; line-height: 1.55; color: var(--tinta-2); }
@media (max-width: 1020px) { .alem-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .alem-grade { grid-template-columns: minmax(0, 1fr); } .cot-preco { font-size: 38px; } }

/* ============================================================ planos */
.hero-fila { margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--tinta-2); }
.hero-fila a { font-weight: 600; }
.topo-nav .botao-sec { background: transparent; }

.planos { padding: 96px 0; background: var(--papel); border-top: 1px solid var(--linha); }
.planos h2 { max-width: 20ch; }
.planos-sub { max-width: 56ch; margin-top: 24px; font-size: 18px; line-height: 28px; color: var(--tinta-2); }
.planos-intervalo { margin: 32px 0 0; padding: 0; border: 0; min-width: 0; }
.planos-intervalo legend { padding: 0; margin-bottom: 8px; font: 500 14px/20px var(--ui); }
.planos-intervalo .seg { display: inline-flex; border: 1px solid var(--contorno); border-radius: var(--raio); overflow: hidden; max-width: 100%; }
.planos-intervalo .seg-item { position: relative; display: flex; }
.planos-intervalo .seg-item + .seg-item { border-left: 1px solid var(--contorno); }
.planos-intervalo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.planos-intervalo label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; background: var(--superficie); font: 500 14px/20px var(--ui); }
.planos-intervalo label svg { display: none; }
.planos-intervalo input:checked + label { background: var(--selecionado); color: var(--sobre-selecionado); font-weight: 600; }
.planos-intervalo input:checked + label svg { display: inline; }
.planos-intervalo input:focus-visible + label { outline: 3px solid var(--verde); outline-offset: -3px; }

.planos-lista { margin-top: 32px; }
.planos-grade { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plano { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); }
.plano h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.plano-ha { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--tinta-2); }
.plano-preco { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--tinta-2); }
.plano-preco b { font: 600 36px/44px var(--ui); letter-spacing: -0.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.plano-porha { margin-top: 8px; font: 600 14px/20px var(--ui); color: var(--verde-escuro); }
.plano-nota { min-height: 48px; margin: 8px 0 24px; font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.plano .botao { margin-top: auto; }
.planos-acima { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--tinta-2); }
.planos-acima a { font-weight: 600; }
.planos-falha { max-width: 480px; padding: 24px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); }
.planos-falha p { margin-bottom: 16px; font-size: 18px; font-weight: 600; }
.planos-esqueleto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.planos-esqueleto i { display: block; height: 240px; border-radius: var(--raio); background: var(--papel-2); animation: cot-pulso 1.4s ease-in-out infinite; }

.rodape-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 48px; }
@media (max-width: 860px) {
  .planos { padding: 64px 0; }
  .planos-sub { font-size: 16px; line-height: 24px; }
  .topo-nav { gap: 8px; }
  .topo-nav .botao { padding: 0 12px; }
  /* texto grande do sistema: a marca quebra em duas linhas em vez de empurrar "Criar conta" para fora da tela */
  .topo-in .marca { min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; row-gap: 0; line-height: 18px; white-space: normal; }
  .topo-nav { flex: none; }
  .planos-intervalo .seg { display: flex; width: 100%; }
  .planos-intervalo .seg-item { flex: 1 1 0; }
  .planos-intervalo label { width: 100%; justify-content: center; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .planos-esqueleto i { animation: none; } }

/* tablet e telas de toque acima de 860 px: o botão pequeno do topo também é alvo de dedo (D-06) */
@media (pointer: coarse) { .botao-pequeno, .video-botao { min-height: 48px; } }

.planos-cupom, .planos-suporte { max-width: 64ch; margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--tinta-2); }
.planos-cupom b { color: var(--tinta); font-weight: 600; }
.planos-suporte { margin-top: 8px; }
.planos-suporte a, .contato-nota a, .rodape-links a[data-suporte] { font-weight: 600; text-underline-offset: 3px; }
.planos-numero { font: 500 14px/20px var(--mono); color: var(--tinta-2); white-space: nowrap; }
.planos-falha .planos-numero { margin: 12px 0 0; font-size: 14px; font-weight: 500; }
.plano-forma { margin: -16px 0 24px; font: 500 14px/20px var(--ui); color: var(--tinta); }

/* erro de CAMPO (o mesmo do produto): texto de apoio embaixo do campo, cor de erro, ícone pequeno */
.campo-erro { position: relative; margin: 8px 0 0; padding-left: 24px; font: 400 14px/20px var(--ui); color: #B3261E; }
.campo-erro::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.consent + .campo-erro { margin-top: -16px; margin-bottom: 16px; }

/* a janela do produto encolhe (tablet, 900–1100 px): o topo dela não pode passar da moldura. Com pouco espaço some
   a frase dos hectares e fica o número; a marca cede antes dos controles. */
.app { container-type: inline-size; }
.app-topo > * { flex-shrink: 0; }
.app-marca { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 640px) { .app-medida em { display: none; } }
@container (max-width: 480px) { .app-select + .app-select { display: none; } }