/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: brand · redesign: full · draw: d11189 · job: try
 * paper: #f3f4f6 · accent: #c2410c · display: Outfit · body: Outfit · hero: Banner · nav: slab · footer: mast · signature: a régua fixa das sete etapas da safra
 * axes: light/geometric-sans/warm · posture: restrained · imagery: screenshots 5 (vídeos reais) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, sete etapas com o mesmo esqueleto; a prova fica sempre à direita e a proporção muda entre vídeo e cena */
/* Hallmark · waive 59 · abertura e vitrine são uma só faixa carbono · o tour nasce colado ao título para a safra aparecer na primeira dobra */
/* Hallmark · answered F15 · os capítulos com vídeo abrem a tela em oito colunas e as cenas ficam em sete, por isso o vão muda */
/* Hallmark · dismissed render · a Outfit carregou: os prints mostram a fonte certa, servida de fontes/outfit.woff2 */
/* Hallmark · dropped emblema-abertura · o emblema já está na barra, e dois logos na primeira dobra enfraquecem o título */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fontes/outfit.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fontes/jetbrains-mono.woff2) format("woff2"); }

html { scroll-behavior: smooth; }
.defs { position: absolute; }
.conteiner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2 { overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h3 { text-wrap: balance; }
p { color: var(--color-ink-2); }
b { font-weight: 600; color: var(--color-ink); }

.escuro {
  --color-paper: var(--carbono); --color-paper-2: var(--carbono-2); --color-paper-3: var(--carbono-3);
  --color-ink: var(--sobre-carbono); --color-ink-2: var(--sobre-carbono-2); --color-muted: var(--sobre-carbono-2);
  --color-rule: var(--carbono-3); --color-accent: var(--cobre-claro); --color-accent-ink: var(--carbono); --color-focus: var(--cobre-claro);
  background: var(--color-paper); color: var(--color-ink);
}

/* Controles */
.botao { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.botao svg { width: 20px; height: 20px; flex-shrink: 0; }
.botao:hover { background: var(--cobre-forte); border-color: var(--cobre-forte); }
.escuro .botao:hover { background: var(--cobre-palha); border-color: var(--cobre-palha); }
.botao:active { transform: translateY(1px); }
.botao-linha, .topo .botao { background: transparent; border-color: var(--color-muted); color: var(--color-ink); }
.escuro .botao-linha:hover, .topo .botao:hover { background: var(--carbono-3); border-color: var(--color-ink); }
.pausa { min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.pausa:hover { background: var(--color-paper-2); }
.pausa:active { transform: translateY(1px); }
.pausa[aria-pressed="true"] { border-color: var(--color-accent); }
.pausa:disabled { opacity: 0.55; cursor: not-allowed; }

/* Barra */
.topo { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: 4px solid var(--cobre-claro); }
.topo .conteiner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav); }
.logo { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-lg); text-decoration: none; }
.logo svg { width: 36px; height: 36px; }
.logo b { font-weight: 700; }
.topo nav:not(.menu-lista) { display: flex; gap: var(--space-lg); }
.topo nav a, .rodape nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.topo nav a:hover, .rodape nav a:hover { color: var(--color-ink); }
.topo .botao { min-height: 44px; padding-inline: var(--space-md); font-size: var(--text-sm); }
.menu { display: none; position: relative; margin-left: auto; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 24px; height: 24px; }
.menu .menu-fechar, .menu[open] .menu-abrir { display: none; }
.menu[open] .menu-fechar { display: block; }
.menu-lista { position: absolute; top: calc(100% + var(--space-sm)); right: 0; display: grid; min-width: 14rem; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }

/* Abertura */
.abertura { padding-block: var(--space-2xl); }
.abertura h1 { max-width: none; font-size: clamp(2.75rem, 7.2vw, 6.5rem); line-height: 1.02; text-wrap: initial; }
.abertura-pe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-top: var(--space-xl); }
.abertura .lead { color: var(--color-ink-2); }
.acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); }
.vitrine { padding-bottom: var(--space-2xl); }
.abre-video, .tela { margin: 0; min-width: 0; }
.abre-video video, .tela video, .tela img { width: 100%; aspect-ratio: 8 / 5; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; background: var(--color-paper-2); object-fit: cover; }
.abre-video figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.tela figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* O problema */
.problema { padding-block: var(--section-gap-s); }
.problema .grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.problema h2 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.06; }
.problema p { margin-top: var(--space-md); }
.problema .virada { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.4; }
.cena-problema { width: 100%; height: auto; }

/* Uma safra */
.safra { padding-block: var(--section-gap-s) var(--section-gap); background: var(--branco); }
.bloco-titulo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.bloco-titulo h2 { line-height: 1.06; }
.regua { position: sticky; top: calc(var(--nav) + 4px); z-index: var(--z-sticky); margin-top: var(--space-2xl); background: var(--branco); border-bottom: 1px solid var(--linha); }
.regua ol { display: flex; justify-content: space-between; gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: etapa; overflow-x: auto; scrollbar-width: none; }
.regua li { counter-increment: etapa; flex-shrink: 0; }
.regua a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 56px; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.regua a::before { content: counter(etapa); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.regua a:hover, .regua a[aria-current] { color: var(--color-ink); }
.regua a[aria-current] { font-weight: 600; }
.regua a[aria-current]::before { color: var(--color-accent); }
.trilho { position: absolute; inset: auto 0 -1px; height: 3px; overflow: hidden; }
.trilho-cheio { height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; }
.cap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-3xl); scroll-margin-top: var(--space-2xl); }
.cap + .cap { border-top: 1px solid var(--linha); }
.cap.larga { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.cap h2 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.08; }
.cap-texto p { margin-top: var(--space-md); max-width: 60ch; }
.dado { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin: var(--space-lg) 0 0; }
.dado dt { color: var(--color-muted); font-size: var(--text-sm); }
.dado dd { margin: 0; color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.dado .verde { color: var(--lucro); }
.cap-texto .fio { display: flex; align-items: center; gap: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--linha); color: var(--cobre-forte); font-weight: 500; }
.fio svg { width: 26px; height: 10px; flex-shrink: 0; }
.cena { width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper); }
.rot { fill: var(--tinta-2); font-size: 13px; font-weight: 600; }
.rot.nota { font-size: 11px; font-weight: 500; }
.rot.claro { fill: var(--cena-cinza-2); }
.estacao circle { transition: fill var(--dur-micro) var(--ease-out), stroke var(--dur-micro) var(--ease-out); }
.estacao circle.aceso { fill: var(--cobre); stroke: var(--cobre); }
.tal.t0 { fill: var(--talhao); } .tal.t1 { fill: var(--talhao-2); } .tal.t2 { fill: var(--talhao-3); } .tal.t3 { fill: var(--talhao-4); }
.tal-rot { fill: var(--branco); stroke: none; font-family: var(--font-mono); font-size: 9px; font-weight: 700; }
.dica { display: flex; align-items: center; gap: var(--space-sm); min-height: 72px; padding-block: var(--space-sm); border-block: 1px solid var(--linha); color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.dica:hover { color: var(--color-ink); }
.dica:active b { color: var(--cobre-forte); }
.geraldo-mini { width: 40px; height: 40px; flex-shrink: 0; }
.dica + .cap { border-top: 0; }
.fim-safra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); }
.fim-safra p { max-width: 44ch; color: var(--color-ink); font-size: var(--text-title); font-weight: 500; line-height: 1.3; }

/* Geraldo */
.geraldo { padding-block: var(--section-gap-s); background: var(--cobre-papel); }
.geraldo .grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.geraldo-nome { display: flex; align-items: center; gap: var(--space-md); }
.geraldo-nome svg { width: 72px; height: 72px; flex-shrink: 0; }
.intro { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.45; }
.geraldo ul { margin: var(--space-lg) 0; padding: 0; list-style: none; }
.geraldo li { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.geraldo li:last-child { border-bottom: 1px solid var(--color-rule); }
.palco { position: relative; min-width: 0; padding-bottom: var(--space-3xl); }
.palco .tela { width: 82%; }
.palco figcaption { max-width: 44%; }
.painel { position: absolute; right: 0; bottom: 0; width: min(24rem, 62%); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--branco); }
.painel-topo { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--linha); }
.painel-topo svg { width: 36px; height: 36px; flex-shrink: 0; }
.painel-topo b, .painel-topo span { display: block; line-height: 1.2; }
.painel-topo span { color: var(--color-muted); font-size: var(--text-xs); }
.conversa { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.bolha { max-width: 92%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-card); font-size: var(--text-sm); line-height: 1.4; }
.bolha.voce { justify-self: end; background: var(--carbono); color: var(--sobre-carbono); }
.bolha.ele { background: var(--color-paper); color: var(--color-ink); }
.caminho { font-weight: 600; color: var(--cobre-forte); }
.digitando { display: flex; gap: var(--space-2xs); padding: var(--space-xs); }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--cena-cinza); }

/* Implantação */
.servico { padding-block: var(--section-gap) var(--section-gap-s); }
.percurso-fio { position: relative; margin-top: var(--space-2xl); padding-top: var(--space-lg); }
.percurso-linha { position: absolute; inset: 0 0 auto; height: 2px; background: var(--color-rule); }
.percurso-linha i { display: block; width: 100%; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; }
.percurso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.parada { counter-increment: passo; }
.parada::before { content: counter(passo); display: block; margin-bottom: var(--space-sm); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; }
.parada p { margin-top: var(--space-sm); }
.quem { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; margin-top: var(--section-gap-s); }
.quem blockquote { margin: 0; font-size: var(--text-display-s); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.08; text-wrap: balance; }
.quem p { margin-top: var(--space-md); }
.zap { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-card); background: var(--zap-fundo); }
.zap-topo { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--zap-recebe); }
.zap-topo .foto { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--carbono); color: var(--sobre-carbono); }
.zap-topo .foto svg { width: 28px; height: 28px; }
.zap-topo b, .zap-topo span { display: block; line-height: 1.25; color: var(--zap-texto); }
.zap-topo span { color: var(--zap-apoio); font-size: var(--text-sm); }
.zap-corpo { min-height: 96px; display: flex; align-items: flex-end; justify-content: flex-end; }
.zap-msg { max-width: 88%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-card); background: var(--zap-envia); color: var(--zap-texto); font-size: var(--text-sm); line-height: 1.4; }
.zap-msg small { display: block; color: var(--zap-texto); font-size: var(--text-xs); text-align: right; }
.zap .botao { justify-content: center; }

/* Dúvidas */
.duvidas { padding-block: var(--section-gap); }
.duvidas .grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.duvidas h2 { line-height: 1.06; }
details.menu ~ * { min-width: 0; }
.perguntas details { border-top: 1px solid var(--color-rule); }
.perguntas details:last-child { border-bottom: 1px solid var(--color-rule); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 80px; padding-block: var(--space-md); color: var(--color-ink); font-size: var(--text-title); font-weight: 500; line-height: 1.25; cursor: pointer; list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; color: var(--color-accent); font-size: var(--text-2xl); font-weight: 400; line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas summary:hover { color: var(--cobre-forte); }
.perguntas p { padding-bottom: var(--space-lg); max-width: 65ch; }

/* Fecho e rodapé */
.final { padding-block: var(--section-gap); }
.final .grade { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; }
.final h2 { font-size: var(--text-display-s); line-height: 1.06; }
.final p { margin-block: var(--space-md) var(--space-lg); max-width: 52ch; }
.final .numero { margin-block: var(--space-md) 0; }
.numero a { color: var(--color-ink); text-underline-offset: 0.2em; }
.numero a:hover { color: var(--color-accent); }
.emblema-grande { justify-self: end; width: 100%; max-width: 22rem; height: auto; }
footer { padding-block: var(--space-2xl) var(--space-lg); --color-paper: var(--carbono-fundo); border-top: 1px solid var(--carbono-3); }
.mastro { color: var(--color-ink); font-size: clamp(3.5rem, 15vw, 13rem); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1; }
.mastro b { font-weight: 700; }
.rodape { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; margin-top: var(--space-lg); font-size: var(--text-sm); }
.rodape nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.rodape p:last-child { justify-self: end; }
.flutuante { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-whats); color: var(--carbono); transition: transform var(--dur-micro) var(--ease-out); }
.flutuante svg { width: 28px; height: 28px; }
.flutuante:hover { transform: translateY(-1px); }
.flutuante:active { transform: translateY(1px); }

@media (min-width: 62.5rem) {
  .problema { display: grid; align-items: center; min-height: 100dvh; padding-top: calc(var(--nav) + var(--space-xl)); }
}
@media (max-width: 61.25rem) {
  .topo nav:not(.menu-lista) { display: none; }
  .menu { display: block; }
  .abertura-pe, .problema .grade, .bloco-titulo, .cap, .cap.larga, .geraldo .grade, .quem, .duvidas .grade, .final .grade { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .acoes { justify-content: flex-start; }
  .cap { padding-block: var(--space-2xl); }
  .fim-safra { flex-direction: column; align-items: flex-start; padding: var(--space-lg); }
  .percurso-linha { inset: 0 auto 0 0; width: 2px; height: auto; }
  .percurso-linha i { transform: scaleY(0); transform-origin: 50% 0; }
  .percurso-fio { padding-top: 0; padding-left: var(--space-lg); }
  .percurso { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .palco { padding-bottom: 0; }
  .palco .tela { width: 100%; }
  .palco figcaption { max-width: none; }
  .painel { position: static; width: 100%; margin-top: var(--space-md); }
  .emblema-grande { justify-self: start; max-width: 10rem; }
  .rodape { grid-template-columns: minmax(0, 1fr); }
  .rodape p:last-child { justify-self: start; }
}
@media (max-width: 30rem) {
  .abertura h1 { font-size: 9.2vw; }
  .topo .botao span { display: none; }
  .topo .botao { padding-inline: var(--space-sm); }
  .acoes .botao { width: 100%; justify-content: center; }
  .so-largo { display: none; }
  .abre-video figcaption { flex-direction: column; align-items: flex-start; }
  .dado { gap: var(--space-sm) var(--space-md); }
  .flutuante { right: var(--space-md); bottom: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .pausa, .flutuante, .perguntas summary::after { transition: none; }
  .botao:active, .pausa:active, .flutuante:hover, .flutuante:active { transform: none; }
  .pausa { display: none; }
}