/* ═══════════════════════════════════════════════════════════════════════════
   Venpi — site institucional. Direcao: A CIDADE (mapa claro), escolhida pelo
   dono do site em 2026-09-22 depois de duas rodadas de variacoes.

   A pagina deixou de ser branco sobre branco. A cor vem de CENARIO, nao de
   enfeite: a cidade vista de cima, com os clientes do vendedor espalhados
   pelos quarteiroes. No hero ela e animada (pedidos fechando, um cliente sem
   sinal que sincroniza depois); nos passos da historia vira o fundo do palco
   onde cada animacao se apresenta; na faixa de CTA e a mesma cidade a noite.
   Os mapas sao GERADOS por ferramentas/gera_mapa.py.

   O que ficou de fora de proposito: ceu azul, nuvens, colinas e arvores
   redondas — o conjunto lembrava a Salesforce (mesma categoria, CRM). A nuvem
   so aparece como icone de sincronizacao dentro das cenas.

   Titulos em peso 700 (a direcao anterior, "Galeria", usava 400 e a pagina
   ficava apagada). Acao primaria em navy; o azul da marca vai para a segunda
   linha do h1, o numero dos passos e o foco. Sombra so onde algo flutua sobre
   o cenario: cabecalho, palco, cartao da cena, botao primario.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fontes servidas do proprio dominio. O site tem regra de ZERO dependencia
   externa (ver README.md) — nada de Google Fonts, CDN ou @import remoto.
   Subset `latin`, que ja cobre ç ã õ á é í ó ú â ê ô (U+00C0-00FF). */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* Marca */
  --navy: #001830;          /* a "tinta": texto, icone, fio forte, acao 2a */
  --azul: #0c60e4;          /* UNICA cor saturada, so na acao primaria */
  --navy-hover: #0b2a4f;    /* hover/toque da acao primaria */
  --borda-campo: #8a97ab;   /* borda de campo: 3:1 no branco (WCAG 1.4.11) */

  --texto-suave: #46536a;   /* 7,76:1 no branco */
  --papel: #ffffff;
  --fio: #e8ecf3;           /* fio de cabelo: borda, divisor, moldura */
  --fio-forte: #cfd8e6;     /* tracejado, estados de vazio */

  /* Washes — cor como pontuacao, nunca decoracao. Cada uma diz um estado que
     o produto ja usa: menta = concluido, areia = atencao. */
  --menta: #eef7f1;
  --menta-tinta: #0b5c34;
  --areia: #fdf4e3;
  --areia-tinta: #8a5a05;
  --tom: #f6f9fd;      /* alternancia de secao, chapada */
  --mapa: #eef3fa;     /* o chao do mapa da cidade (hero, palcos, contato): azul claro da marca */
  --fio-mapa: #d9e3f1; /* borda de pilula/cartao sobre o mapa */

  --texto-fonte: 'Archivo', system-ui, -apple-system, sans-serif;

  /* Raios: pilula, cartao, tela; o palco e o cabecalho flutuante tem os seus. */
  --r-pilula: 50px;
  --r-cartao: 20px;
  --r-tela: 9px;
  --r-palco: 30px;

  --sombra-flutua: 0 30px 60px -28px rgba(0,24,48,.45);

  --largura: 1200px;
  --ar: 80px;               /* respiro entre secoes, da referencia */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* O flash de toque do celular sai RETANGULAR sobre o botao em pilula; a
     resposta ao toque e o :active dos botoes, logo abaixo. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Ao puxar a pagina no topo (iOS), aparece o fundo do html: na home ele e o
   chao do mapa, senao surgia uma faixa branca acima do hero. */
html:has(.hero) { background: var(--mapa); }
/* Destino de ancora ("Ver como funciona", "Quero uma demonstração"): para
   abaixo do cabecalho flutuante (78px), com folga — senao o topo da
   animacao do passo 1 ficava escondido atras dele. */
.hpasso[id], section[id] { scroll-margin-top: 120px; }

body {
  margin: 0;
  font-family: var(--texto-fonte);
  font-size: 1rem;           /* respeita o tamanho de fonte do navegador */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--navy);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

.secao { padding: var(--ar) 0; }
/* Alternancia chapada, sem gradiente: o ritmo vem do tom e do respiro. */

/* ── Tipografia ─────────────────────────────────────────────────────────────
   Titulos em 700 com tracking negativo que aperta conforme o corpo cresce. */
h1, h2, h3 { margin: 0 0 16px; font-weight: 700; text-wrap: balance; color: var(--navy); }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.02; letter-spacing: -.035em; }
/* O <em> e a segunda frase: linha propria, no azul da marca. */
h1 em { display: block; font-style: normal; color: var(--azul); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em; }
h3 { font-size: 1.31rem; line-height: 1.3; letter-spacing: -.015em; }
p  { margin: 0 0 16px; }
.lead { font-size: 1.31rem; line-height: 1.5; color: var(--texto-suave); max-width: 62ch; }
/* Link de texto no conteudo (contato@, politica de privacidade): navy do site com
   sublinhado discreto, em vez do azul/roxo padrao do navegador. Os blocos
   escuros (faixa de CTA, rodape) tem regra propria e mais especifica, em branco. */
main a:not(.btn) {
  color: var(--navy); text-decoration: underline; text-decoration-color: rgba(0,24,48,.3);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
main a:not(.btn):hover { color: var(--azul); text-decoration-color: currentColor; }

/* ── Botoes: navy (acao primaria) e claro (secundaria). Branco so no escuro. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: var(--r-pilula);
  font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primario { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -10px rgba(0,24,48,.6); }
.btn-claro { background: rgba(255,255,255,.85); color: var(--navy); border-color: rgba(0,24,48,.14); }
.btn-branco { background: #fff; color: var(--navy); border-color: #fff; }
/* :hover SO onde ha mouse: no toque ele fica preso depois do clique (o botao
   do formulario ficava escuro e levantado durante o "Enviando…"). */
@media (hover: hover) and (pointer: fine) {
  .btn-primario:hover { background: var(--navy-hover); transform: translateY(-1px); }
  .btn-claro:hover { background: #fff; border-color: rgba(0,24,48,.35); }
  .btn-branco:hover { background: var(--tom); border-color: var(--tom); }
}
.btn:active { transform: scale(.97); }
.btn-primario:active { background: var(--navy-hover); }
.btn, .menu-botao { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* Foco: azul CHEIO (5,5:1 no branco, 3,1:1 no navy). O azul a 45% dava 2:1. */
.btn:focus-visible, .menu-botao:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.faixa-cta .btn:focus-visible { outline-color: #fff; }

/* ── Cabecalho: barra de vidro que flutua sobre o cenario ──────────────────
   O <header> em si e transparente e nao pega clique (o mapa aparece em volta
   da barra); so a barra pega. */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; padding-top: 14px; pointer-events: none; }
.topo__barra {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 12px 0 20px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.85); border-radius: 18px;
  box-shadow: 0 8px 30px -12px rgba(0,24,48,.25);
}
.topo img { height: 36px; width: auto; display: block; }
.topo nav { flex: 1; display: flex; align-items: center; gap: 32px; }
/* As acoes vao para a direita. */
.menu__acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu__acoes .btn { min-height: 46px; padding: 0 22px; font-size: .94rem; }

.menu-botao { display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; padding: 11px; color: var(--navy);
  border-radius: 12px; transition: background-color .12s ease; }
.menu-botao:active { background: rgba(0,24,48,.07); }
.menu-botao svg { display: block; }

/* ── HERO: a cidade vista de cima ───────────────────────────────────────────
   O hero sobe por baixo do cabecalho flutuante (margin-top negativo = altura
   do cabecalho) para o mapa correr ate o topo da tela. O mapa (svg gerado) fica
   ancorado embaixo e corre POR TRAS do texto: o veu claro e uma elipse so atras
   do bloco de texto (em pixels, do tamanho dele), e o mapa aparece nas
   laterais e numa faixa baixa embaixo, onde ficam os pins. A faixa era de
   ~360px e ficava alta demais (pedido do dono do site, 2026-09-22). */
.hero {
  position: relative; isolation: isolate; overflow: hidden; margin-top: -78px; padding: 150px 0 190px;
  /* A cidade (estatica) e o FUNDO; o svg por cima tem so os pins, que animam.
     Juntos no mesmo svg, cada pin que mudava repintava o mapa inteiro. */
  background: var(--mapa) url('../img/mapa-hero.svg') center bottom / max(100%, 1920px) auto no-repeat;
}
/* O svg tem 1920 de largura e altura FIXA de 960px: ate 1920 de tela ele so
   corta as laterais, entao pin e quarteirao ficam do mesmo tamanho em todo
   monitor comum (com altura 100% ele esticava e os pins cresciam em tela larga). */
.hero .hero__mapa { position: absolute; left: 50%; bottom: 0; z-index: -2; width: max(100%, 1920px); height: 960px; transform: translateX(-50%); display: block; will-change: transform; }
.hero__veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 640px 330px at 50% calc(50% - 60px), rgba(246,249,253,.97) 0, rgba(246,249,253,.93) 62%, rgba(246,249,253,0) 100%),
    linear-gradient(180deg, rgba(246,249,253,.8) 0, rgba(246,249,253,0) 140px);
}
.hero__texto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hero__texto h1 { margin: 0; }
.hero__texto .lead { margin: 0; max-width: 58ch; color: #1f3350; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.7); border: 1px solid var(--fio-mapa); border-radius: var(--r-pilula);
  padding: 7px 18px; font-size: .88rem; color: var(--texto-suave);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--menta-tinta); display: block; }

/* Os quatro checks numa LINHA horizontal, em pilula BRANCA SOLIDA que flutua
   sobre o mapa (como o cabecalho). Com fundo translucido o mapa aparecia por
   tras do texto e a leitura ficava ruidosa. */
.checks {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.checks li {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--fio-mapa); border-radius: var(--r-pilula);
  box-shadow: 0 6px 16px -10px rgba(0,24,48,.35);
  padding: 7px 14px; font-size: .92rem; color: #1f3350;
}
/* Check verde desenhado em SVG embutido (data URI): nada externo, e nitido
   em qualquer densidade de tela. */
.checks li::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6 L6.2 12.2 L13.5 4.2' fill='none' stroke='%231e9b57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Entrada dos checks: UMA vez, ao abrir a pagina. Cada pilula sobe e aparece
   90ms depois da anterior, e o check e "riscado" da esquerda para a direita
   (clip-path, ja que o traco mora num data URI e nao da para animar o stroke).
   Carrossel foi descartado de proposito: esconderia 3 dos 4 diferenciais.
   O estado-base e o final (tudo visivel): com o reset de prefers-reduced-motion,
   que zera `animation`, as pilulas simplesmente aparecem prontas. */
@keyframes check-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes check-risca { from { clip-path: inset(0 100% 0 0); } }
.checks li { animation: check-entra .5s cubic-bezier(.22,1,.36,1) both; }
.checks li::before { animation: check-risca .32s cubic-bezier(.65,0,.35,1) both; }
.checks li:nth-child(1) { animation-delay: .35s; } .checks li:nth-child(1)::before { animation-delay: .6s; }
.checks li:nth-child(2) { animation-delay: .44s; } .checks li:nth-child(2)::before { animation-delay: .69s; }
.checks li:nth-child(3) { animation-delay: .53s; } .checks li:nth-child(3)::before { animation-delay: .78s; }
.checks li:nth-child(4) { animation-delay: .62s; } .checks li:nth-child(4)::before { animation-delay: .87s; }
.hero__acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }

/* ══ A HISTÓRIA ═══════════════════════════════════════════════════════════
   Quatro passos de uma sequencia unica, com lados alternados e um fio
   pontilhado costurando um ao seguinte. O fio e o que separa "quatro secoes
   soltas" de "uma historia" — foi o que a referencia da contaazul.com.br fez
   e e o unico elemento que peguei de la; as nuvens e a ilustracao sao marca
   deles.

   O numero e estrutural, nao enfeite: aqui a ordem E informacao (nao da para
   o vendedor fechar antes de voce desenhar). E o unico lugar numerado da
   pagina junto com "Como comeca". */
.historia__lista { list-style: none; margin: 56px 0 0; padding: 0; counter-reset: passo; }

.hpasso {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
  padding-bottom: 120px;                 /* espaco onde o fio corre */
  counter-increment: passo;
}
.hpasso:last-child { padding-bottom: 0; }

/* O numero, em circulo cheio, acima do titulo do passo. */
.hpasso__texto::before {
  content: counter(passo);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--azul); color: #fff;
  font-size: 1rem; font-weight: 500; margin-bottom: 20px;
}
.hpasso__texto h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em; }

/* O palco: cada animacao se apresenta sobre um pedaco da mesma cidade do hero
   (img/mapa-palco-N.svg, gerado), dentro de um cartao branco. */
.palco {
  position: relative; border-radius: var(--r-palco); padding: 56px 44px;
  background: var(--mapa) center / cover no-repeat;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--sombra-flutua);
}
.palco--1 { background-image: url('../img/mapa-palco-1.svg'); }
.palco--2 { background-image: url('../img/mapa-palco-2.svg'); }
.palco--3 { background-image: url('../img/mapa-palco-3.svg'); }
.palco__cartao {
  background: #fff; border-radius: 22px; padding: 16px 16px 6px;
  box-shadow: 0 30px 60px -24px rgba(0,24,48,.45), 0 0 0 1px rgba(0,24,48,.05);
}
.hpasso__texto .lead { font-size: 1.19rem; }

/* Lados alternados: o zigue-zague obriga o olho a descer, e e o que faz o fio
   ter para onde ir. Trocar a ORDEM das colunas (e nao a ordem no HTML) mantem
   a leitura por teclado e por leitor de tela correta.

   A inversao e por CLASSE, nao por `:nth-child(even)`: o passo 2 e largo e nao
   participa da alternancia, entao contar por posicao dava
   esquerda / largo / esquerda / direita — sem zigue-zague nenhum. */
.hpasso--invertido .hpasso__texto { order: 2; }
.hpasso--invertido .hpasso__arte  { order: 1; }

/* O fio: curva pontilhada no vao entre um passo e o proximo, ligando as
   ANIMACOES (nao os textos). Ele ocupa o vao entre o centro de uma coluna e o
   centro da outra (25%..75% da largura), entao cada ponta cai embaixo/acima
   do centro de uma arte. O desenho base (viewBox) vai da esquerda-alto para a
   direita-baixo: serve ao passo INVERTIDO (arte a esquerda, a do proximo a
   direita). No passo normal a arte esta a direita, e o fio espelha.
   `preserveAspectRatio="none"` estica a curva ate a largura da coluna, e o
   `vector-effect` mantem o pontilhado com a mesma espessura. */
.hpasso__fio {
  position: absolute; left: 25%; bottom: 0;
  width: 50%; height: 120px;
  color: #9fb0c8; pointer-events: none;
  transform: scaleX(-1);
}
.hpasso--invertido .hpasso__fio { transform: none; }
.hpasso:last-child .hpasso__fio { display: none; }

/* Passo 2 e largo: e so texto (as abas dos tipos sairam a pedido do usuario),
   entao ocupa a coluna inteira em vez de deixar metade vazia. `order: 0` no
   texto e OBRIGATORIO: o passo largo e par, entao a troca de lados acima o
   pegava — e como ele nao tem `.hpasso__arte`, so o texto se mexia. */
.hpasso--largo { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hpasso--largo .hpasso__texto { order: 0; }
.hpasso--largo .hpasso__texto { max-width: 62ch; }

/* ── Painel escuro (offline) e faixa de CTA: os dois momentos escuros ────── */
/* A faixa de CTA e a cidade a noite (img/mapa-noite.svg, gerado): um degrade
   navy por cima segura o texto a esquerda e deixa as luzes aparecerem a direita. */
.faixa-cta {
  color: #e6ecf5; border-radius: var(--r-palco); padding: 64px;
  background:
    linear-gradient(90deg, rgba(10,26,56,.97) 0%, rgba(10,26,56,.9) 45%, rgba(10,26,56,.45) 100%),
    #0a1a38 url('../img/mapa-noite.svg') center / cover no-repeat;
  box-shadow: var(--sombra-flutua);
}
.faixa-cta h2 { color: #fff; }
.faixa-cta p { color: #b9c6d8; }
.faixa-cta a:not(.btn) { color: #fff; }
.faixa-cta { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.faixa-cta h2 { margin-bottom: 8px; }
.faixa-cta p { margin: 0; }
.faixa-cta__acao { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.faixa-cta__acao span { font-size: .94rem; color: #b9c6d8; }

/* ── Lojas ───────────────────────────────────────────────────────────────── */
.lojas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lojas__rotulo { width: 100%; font-size: .88rem; color: var(--texto-suave); }
.loja {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--fio); border-radius: var(--r-pilula);
  padding: 9px 20px; color: var(--navy);
}
.loja svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.loja span { display: flex; flex-direction: column; line-height: 1.2; font-size: .94rem; font-weight: 500; }
.loja small { font-size: .69rem; font-weight: 400; opacity: .75; }
/* No rodape o fundo e navy, entao a variante escura vem DEPOIS da base. */
.lojas--rodape { margin-top: 24px; }
.lojas--rodape .lojas__rotulo { color: #b9c6d8; }
.lojas--rodape .loja { border-color: rgba(255,255,255,.3); color: #fff; }

/* ── Contato: o chao do mapa, com o formulario flutuando ──────────────────── */
.contato { background: var(--mapa); }
.form-cartao { border: 1px solid var(--fio-mapa); border-radius: var(--r-cartao); padding: 40px; background: var(--papel); box-shadow: var(--sombra-flutua); }
.form-campo { margin-bottom: 20px; }
.form-campo label { display: block; font-size: .94rem; font-weight: 500; margin-bottom: 8px; }
.form-campo input, .form-campo select, .form-campo textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--borda-campo); border-radius: var(--r-tela);
  font-size: 1rem; font-family: inherit; letter-spacing: -.01em;
  color: var(--navy); background: var(--papel);
}
.form-campo textarea { min-height: 96px; }
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus {
  outline: 3px solid var(--azul); outline-offset: 1px; border-color: var(--azul);
}
.form-campo [aria-invalid="true"] { border-color: #b3261e; }
.form-erro { color: #b3261e; }
.form-cartao .btn { width: 100%; }

/* HONEYPOT: fora da tela, sem display:none — bot esperto ignora campo com
   display:none, mas preenche o que esta apenas deslocado. */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Aviso abaixo do botao: e o que torna o envio um consentimento informado. */
.aviso-envio { margin: 12px 0 0; font-size: .81rem; line-height: 1.5; color: var(--texto-suave); }
.aviso-envio a { color: var(--navy); }

/* ── Rodape ──────────────────────────────────────────────────────────────── */
.rodape { background: var(--navy); color: #b9c6d8; padding: 64px 0 40px; }
.rodape img { height: 40px; width: auto; margin-bottom: 20px; }
.rodape a { color: #fff; }

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .secao { padding: 56px 0; }
  .hero { padding-top: 124px; }
  /* No celular o mapa amplia e mostra so a faixa dos pins, com eles legiveis;
     o "sem sinal" fica no centro e aparece. */
  .hero { background-size: 1280px 640px; }
  .hero .hero__mapa { height: 640px; width: 1280px; }
  /* No celular nao ha lateral: o mapa volta a ser uma faixa embaixo (baixa). */
  .hero { padding-bottom: 230px; }
  .hero__veu { background: linear-gradient(180deg, rgba(246,249,253,.97) 0, rgba(246,249,253,.92) calc(100% - 290px), rgba(246,249,253,0) calc(100% - 200px)); }
  .palco { padding: 24px 12px; border-radius: 22px; }
  /* A secao ja tem 56px de respiro: 120px deixavam ~100px de vazio sob o
     cabecalho, e o CTA chegava ao formulario sem mostrar o primeiro campo. */
  section[id] { scroll-margin-top: 78px; }
  .hpasso[id] { scroll-margin-top: 96px; }
  .grid-2 { grid-template-columns: 1fr; }
  .faixa-cta { padding: 36px 24px; }

  /* A historia empilha: o zigue-zague nao existe numa coluna so, e o fio
     perde a diagonal para onde ir. */
  /* `minmax(0, 1fr)` e nao `1fr`: `1fr` e `minmax(auto, 1fr)`, e o `auto`
     deixa o conteudo (o painel das abas, aqui) empurrar a coluna alem da
     tela. Estourava 11px. */
  .hpasso, .hpasso--largo { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 64px; }
  .hpasso--invertido .hpasso__texto { order: 0; }
  .hpasso--invertido .hpasso__arte  { order: 0; }
  .hpasso__fio { display: none; }

  /* Menu mobile: o hamburguer abre o nav como cartao suspenso. */
  .menu-botao { display: block; }
  .topo__barra { gap: 12px; }
  .topo nav {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--papel); border: 1px solid var(--fio);
    border-radius: var(--r-cartao); padding: 16px; box-shadow: var(--sombra-flutua);
  }
  .topo nav.aberto { display: flex; }
  .menu__acoes { margin-left: 0; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Desliga tudo — MENOS as cenas da historia (.cena-anim.anima), que animam
     sempre por decisao do dono do site. Sem essa excecao o !important
     zerava as cenas para quem tem o sistema com animacoes desligadas. */
  *:not(.cena-anim.anima *),
  *:not(.cena-anim.anima *)::before,
  *:not(.cena-anim.anima *)::after { animation: none !important; transition: none !important; }
}