/* ==========================================================================
   Moleques do Sul — landing page
   Ordem: tokens · base · componentes · seções (na ordem da página) · movimento

   Regras do sistema (valem para tudo):
   - Uma grade só: toda seção usa .recipiente (mesma largura e mesmas margens).
   - Espaçamento só pela escala --sp-*. Número solto não entra.
   - Nenhum canto arredondado. Nenhuma caixa dentro de caixa.
   - Computador: cada seção comum ocupa uma tela (abaixo do header) e a rolagem
     encaixa de leve no começo dela. Faixas e o mural podem passar da grade.
   - Botão: um formato só. Creme = compra (WhatsApp). Contorno azul = outras ações.
   - Cor por função (ver tokens): marinho fundo · creme texto e compra · água apoio ·
     azul estrutura · vermelho só destaque. Vermelho nunca em texto pequeno.
   - Título e subtítulo quebram entre frases (.frase), nunca no meio sem precisar.
   ========================================================================== */

:root {
  /* PALETA OFICIAL (aprovada em 30/09/2026) — consulta rápida em docs/paleta-de-cores.md
     token            Hex      nome da paleta         RGB
     --pal-vermelho   #E63946  Strawberry Red         230 57 70
     --pal-creme      #F1FAEE  Honeydew               241 250 238
     --pal-agua       #A8DADC  Frosted Blue           168 218 220
     --pal-azul       #457B9D  Steel Blue             69 123 157
     --pal-marinho    #1D3557  Deep Space Blue        29 53 87 */
  --pal-vermelho: #e63946;   /* Strawberry Red */
  --pal-creme:    #f1faee;   /* Honeydew */
  --pal-agua:     #a8dadc;   /* Frosted Blue */
  --pal-azul:     #457b9d;   /* Steel Blue */
  --pal-marinho:  #1d3557;   /* Deep Space Blue */

  /* Tons derivados (mesma cor da paleta, só mais escura, mais clara ou misturada) */
  --marinho-escuro: #172a46;   /* marinho 20% mais escuro */
  --marinho-claro:  #24426b;   /* marinho 15% mais claro */
  --agua-suave:     #86bccb;   /* água + azul */
  --agua-press:     #8fc9cc;   /* água 10% mais escura */
  --azul-escuro:    #2f5a77;   /* azul 30% mais escuro (texto de apoio no claro, contraste 6,9) */
  --azul-medio:     #3a6a8a;   /* azul 15% mais escuro (rótulos no claro, contraste 5,5) */
  --creme-agua:     #e4f2ef;   /* creme + água: cartões no claro */
  --creme-alto:     #d6ecea;   /* creme + água mais forte: etiquetas no claro */

  /* Fora da paleta, pedidos pelo cliente (01/10/2026): só nos botões indicados */
  --verde-whats:       #25d366;   /* verde do WhatsApp: todo botão que abre o WhatsApp (texto marinho, contraste 6,2) */
  --verde-whats-hover: #20bd5b;
  --verde-whats-press: #1ca650;
  --azul-mapa:         #3a6a8a;   /* "Traçar rota": azul 15% mais escuro (texto creme, contraste 5,4) */

  --f-titulo: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --f-sub: 'Young Serif', Georgia, serif;
  --f-texto: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;   /* só a marca ("Artigos de pesca"), pedido do cliente */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-mare: cubic-bezier(.16, 1, .3, 1);

  /* Escala de espaçamento */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* Ritmo do bloco "rótulo → título → subtítulo → conteúdo", igual em toda seção */
  --gap-rotulo: var(--sp-4);
  --gap-sub: var(--sp-5);
  --gap-header: var(--sp-8);
  --pad-cartao: var(--sp-6);
  --gap-grade: var(--sp-5);
}

/* ---------- Cores por função, nos dois modos ----------
   Hierarquia (a mesma nos dois modos):
   fundo = cor dominante · texto = principal · apoio = subtítulos e descrições
   suave = rótulos pequenos · ação = botão de compra (WhatsApp) · estrutura = linhas e bordas
   destaque (vermelho) = só parte vermelha dos títulos, números grandes, marcas e faixa;
   nunca em texto pequeno.
   ESCURO: fundo marinho, texto creme, botão creme.  CLARO: fundo creme, texto marinho, botão marinho.
   O topo com foto, o header e o rodapé com foto usam .tema-escuro nos dois modos. */
:root, .tema-escuro {
  --cor-fundo: var(--pal-marinho);
  --cor-fundo-escuro: var(--marinho-escuro);
  --cor-fundo-alto: var(--marinho-claro);
  --cor-texto: var(--pal-creme);
  --cor-texto-apoio: var(--pal-agua);
  --cor-texto-suave: var(--agua-suave);
  --cor-destaque: var(--pal-vermelho);
  --cor-acao: var(--pal-creme);
  --cor-acao-hover: var(--pal-agua);
  --cor-acao-press: var(--agua-press);
  --cor-estrutura: var(--pal-azul);
  --cor-linha: rgba(69, 123, 157, .55);
  --cor-hachura: rgba(168, 218, 220, .05);
  --cor-diagrama: rgba(23, 42, 70, .55);
  --cor-brilho: rgba(230, 57, 70, .2);
  --ondas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23457b9d' stroke-width='1' opacity='.3'%3E%3Cpath d='M-40 90 C180 40 360 150 600 100 S1000 30 1240 110'/%3E%3Cpath d='M-40 180 C170 130 380 240 610 190 S1010 120 1240 200'/%3E%3Cpath d='M-40 270 C160 220 390 325 620 280 S1020 210 1240 290'/%3E%3Cpath d='M-40 360 C150 310 400 410 630 370 S1030 300 1240 380'/%3E%3Cpath d='M-40 450 C140 400 410 495 640 460 S1040 390 1240 470'/%3E%3Cpath d='M-40 540 C130 490 420 580 650 550 S1050 480 1240 560'/%3E%3Cpath d='M-40 630 C120 580 430 665 660 640 S1060 570 1240 650'/%3E%3Cpath d='M-40 720 C110 670 440 750 670 730 S1070 660 1240 740'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
/* Header, topo e rodapé: o texto também volta a ser claro dentro deles */
.tema-escuro { color: var(--cor-texto); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --cor-fundo: var(--pal-creme);
    --cor-fundo-escuro: var(--creme-agua);
    --cor-fundo-alto: var(--creme-alto);
    --cor-texto: var(--pal-marinho);
    --cor-texto-apoio: var(--azul-escuro);
    --cor-texto-suave: var(--azul-medio);
    --cor-acao: var(--pal-marinho);
    --cor-acao-hover: var(--marinho-claro);
    --cor-acao-press: var(--marinho-escuro);
    --cor-linha: rgba(69, 123, 157, .35);
    --cor-hachura: rgba(69, 123, 157, .07);
    --cor-diagrama: rgba(168, 218, 220, .2);
    --cor-brilho: transparent;
    --ondas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23457b9d' stroke-width='1' opacity='.13'%3E%3Cpath d='M-40 90 C180 40 360 150 600 100 S1000 30 1240 110'/%3E%3Cpath d='M-40 180 C170 130 380 240 610 190 S1010 120 1240 200'/%3E%3Cpath d='M-40 270 C160 220 390 325 620 280 S1020 210 1240 290'/%3E%3Cpath d='M-40 360 C150 310 400 410 630 370 S1030 300 1240 380'/%3E%3Cpath d='M-40 450 C140 400 410 495 640 460 S1040 390 1240 470'/%3E%3Cpath d='M-40 540 C130 490 420 580 650 550 S1050 480 1240 560'/%3E%3Cpath d='M-40 630 C120 580 430 665 660 640 S1060 570 1240 650'/%3E%3Cpath d='M-40 720 C110 670 440 750 670 730 S1070 660 1240 740'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --cor-fundo: var(--pal-creme);
  --cor-fundo-escuro: var(--creme-agua);
  --cor-fundo-alto: var(--creme-alto);
  --cor-texto: var(--pal-marinho);
  --cor-texto-apoio: var(--azul-escuro);
  --cor-texto-suave: var(--azul-medio);
  --cor-acao: var(--pal-marinho);
  --cor-acao-hover: var(--marinho-claro);
  --cor-acao-press: var(--marinho-escuro);
  --cor-linha: rgba(69, 123, 157, .35);
  --cor-hachura: rgba(69, 123, 157, .07);
  --cor-diagrama: rgba(168, 218, 220, .2);
  --cor-brilho: transparent;
  --ondas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23457b9d' stroke-width='1' opacity='.13'%3E%3Cpath d='M-40 90 C180 40 360 150 600 100 S1000 30 1240 110'/%3E%3Cpath d='M-40 180 C170 130 380 240 610 190 S1010 120 1240 200'/%3E%3Cpath d='M-40 270 C160 220 390 325 620 280 S1020 210 1240 290'/%3E%3Cpath d='M-40 360 C150 310 400 410 630 370 S1030 300 1240 380'/%3E%3Cpath d='M-40 450 C140 400 410 495 640 460 S1040 390 1240 470'/%3E%3Cpath d='M-40 540 C130 490 420 580 650 550 S1050 480 1240 560'/%3E%3Cpath d='M-40 630 C120 580 430 665 660 640 S1060 570 1240 650'/%3E%3Cpath d='M-40 720 C110 670 440 750 670 730 S1070 660 1240 740'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

/* GRADE DO SITE (vale nos dois modos e para tudo: header, seções e rodapé)
   celular 4 colunas · tablet 8 · computador 12 · calha (espaço entre colunas) fixa
   Toda divisão de layout ocupa colunas inteiras desta grade (grid-column: span N). */
:root {
  --largura: 1240px;
  --margem: var(--sp-5);
  --topo: 64px;
  --colunas: 4;
  --calha: var(--sp-4);
}
@media (min-width: 768px) { :root { --margem: var(--sp-7); --colunas: 8; --calha: var(--sp-5); } }
@media (min-width: 1024px) { :root { --margem: var(--sp-9); --topo: 72px; --colunas: 12; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Enquadramento das seções na rolagem: main.js (parte 13). O encaixe nativo (scroll-snap)
   prende a página quando se rola um clique por vez, por isso não é usado na vertical. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--topo); }
body {
  margin: 0;
  /* Linhas de onda (curvas de profundidade) no site inteiro; no topo, a foto fica por cima */
  background: var(--cor-fundo) var(--ondas) center top / 1400px auto repeat;
  color: var(--cor-texto);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body, html { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
p, li { text-wrap: pretty; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 3px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Some da tela, continua para leitor de tela */
.so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pular {
  position: absolute; left: var(--sp-4); top: -80px; z-index: 100;
  background: var(--cor-acao); color: var(--cor-fundo);
  padding: var(--sp-3) var(--sp-4); font-weight: 700; text-decoration: none;
}
.pular:focus { top: var(--sp-4); }

/* A grade do site: mesma largura e mesmas margens em todas as seções */
.recipiente { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }

/* ---------- Tipografia ---------- */
.etiqueta {
  display: block; margin-bottom: var(--gap-rotulo); font-weight: 700; font-size: 12px; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave);
}
.etiqueta::before { content: '— '; color: var(--cor-destaque); }

.titulo-secao {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900;
  text-transform: uppercase; line-height: .92; letter-spacing: .004em;
  font-size: clamp(36px, 4.2vw, 60px);
}
.destaque { color: var(--cor-destaque); }
/* Frase inteira: cabe na linha ou desce inteira. A quebra acontece entre frases, depois do ponto. */
.frase { display: inline-block; max-width: 100%; }
/* Quando uma frase do título não cabe numa linha, as linhas ficam do mesmo tamanho
   ("Pesca guiada / no barco da loja.", nunca "Pesca guiada no barco / da loja."). Vale para tudo que é curto e grande. */
.titulo-secao, .titulo-secao .frase, .titulo-bloco, .etiqueta, .etiqueta .frase, .resultado__nome, .etapa__pergunta, .opcao__desc, .sub .frase { text-wrap: balance; }
/* Separador (· ou —) que cairia no fim da linha some, e a parte seguinte começa a linha de baixo */
.sep--quebra { display: none; }
.frase--linha { display: block; }
.endereco__linha { display: block; }

.sub { font-family: var(--f-sub); font-size: clamp(18px, 4.4vw, 22px); line-height: 1.42; color: var(--cor-texto-apoio); }
.titulo-secao + .sub { margin-top: var(--gap-sub); }

.titulo-bloco {
  font-family: var(--f-titulo); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 28px; line-height: 1; margin-bottom: var(--sp-3);
}

/* ---------- Botão: um formato só ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--sp-6);
  border: 1.5px solid transparent;
  font-family: var(--f-texto); font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.botao svg { width: 20px; height: 20px; flex: none; }
/* Verde = WhatsApp (por onde o cliente compra) · azul = mapa · contorno = ação secundária */
.botao--whats { background: var(--verde-whats); color: var(--pal-marinho); }
.botao--whats:hover { background: var(--verde-whats-hover); }
.botao--whats:active { background: var(--verde-whats-press); }
.botao--mapa { background: var(--azul-mapa); color: var(--pal-creme); }
.botao--mapa:hover { background: var(--pal-azul); }
.botao--contorno { border-color: var(--cor-estrutura); color: var(--cor-texto); }
.botao--contorno:hover { border-color: var(--cor-texto); }

/* WhatsApp flutuante: aparece depois que o topo sai da tela, sempre no canto de baixo */
.whats-flutuante {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 40;
  box-shadow: 0 8px 24px rgba(13, 27, 46, .35);
  opacity: 0; transform: translateY(var(--sp-4)); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .25s var(--ease);
}
.whats-flutuante--visivel { opacity: 1; transform: none; pointer-events: auto; }
/* Computador: só aparece quando cabe na margem lateral, fora da grade (medido: abaixo de 1600px
   ele cobre botões das seções). O WhatsApp do header continua sempre visível. */
@media (min-width: 1024px) and (max-width: 1599px) { .whats-flutuante { display: none; } }@media (max-width: 599px) {
  .whats-flutuante { right: var(--sp-4); bottom: var(--sp-4); width: 56px; min-height: 56px; padding: 0; }
  .whats-flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .whats-flutuante svg { width: 26px; height: 26px; }
}
.botao--compacto { min-height: 44px; padding: 0 var(--sp-4); gap: var(--sp-2); font-size: 15px; }
.botao--largo { width: 100%; }

/* ---------- Foto com espaço reservado ---------- */
.foto { position: relative; overflow: hidden; background: linear-gradient(160deg, #24426b 0%, #172a46 70%); }
/* Mesmo grão de cor em toda foto do site: unifica fontes diferentes */
.foto > img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.92); }
.foto--vazia > img { display: none; }
.foto--vazia::after {
  content: attr(data-descricao);
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-texto-suave); line-height: 1.35;
}

/* ---------- Ficha técnica (itens 01, 02, 03…) ---------- */
.ficha { position: relative; margin: var(--sp-4) 0 var(--sp-2); }
.ficha__item { position: relative; }
.ficha__botao {
  width: 100%; display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: var(--sp-3);
  min-height: 48px; padding: var(--sp-2) 0; text-align: left;
}
.ficha__num {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 24px; line-height: 1;
  color: var(--cor-destaque); text-align: center;
}
.ficha__nome { font-weight: 600; font-size: 16px; line-height: 1.3; text-wrap: pretty; }
/* Mais/menos sem caixa */
.ficha__mais { position: relative; width: 20px; height: 20px; transition: transform .35s var(--ease); }
.ficha__mais::before, .ficha__mais::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px;
  background: var(--cor-texto-apoio); transform: translate(-50%, -50%);
}
.ficha__mais::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .2s var(--ease); }
.ficha__botao:hover .ficha__mais::before, .ficha__botao:hover .ficha__mais::after { background: var(--cor-texto); }
.ficha__botao[aria-expanded="true"] .ficha__mais { transform: rotate(180deg); }
.ficha__botao[aria-expanded="true"] .ficha__mais::after { opacity: 0; }
.ficha__detalhe { padding: 0 var(--sp-7) var(--sp-3) calc(32px + var(--sp-3)); font-size: 14px; line-height: 1.5; color: var(--cor-texto-apoio); animation: foco .45s var(--ease-mare) backwards; }
.ficha__spec {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-texto); margin-bottom: var(--sp-1); font-variant-numeric: tabular-nums;
}

.preco {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  border-top: 1px solid var(--cor-linha); padding-top: var(--sp-3); margin: var(--sp-2) 0 var(--sp-4);
}
.preco span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave); }
.preco strong { font-size: 15px; font-weight: 700; }

/* ==========================================================================
   HEADER FIXO — logo e WhatsApp sempre à mão
   ========================================================================== */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--topo);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.topo--solido {
  background: var(--cor-fundo); border-bottom-color: var(--cor-linha);
}
.topo__barra { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.topo__acoes { display: flex; align-items: center; gap: var(--sp-2); }
/* Troca de modo: ícone do modo para onde vai (sol no escuro, lua no claro) */
/* Celular: sem espaço no header; ali o site segue o modo do próprio aparelho */
@media (max-width: 559px) { .tema-botao { display: none !important; } }
.tema-botao {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  color: var(--cor-texto-apoio); border: 1.5px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tema-botao:hover { color: var(--cor-texto); border-color: var(--cor-estrutura); }
.tema-botao svg { width: 20px; height: 20px; }
.tema-botao__lua { display: none; }
:root[data-tema="claro"] .tema-botao__sol { display: none; }
:root[data-tema="claro"] .tema-botao__lua { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) .tema-botao__sol { display: none; }
  :root:not([data-tema="escuro"]) .tema-botao__lua { display: block; }
}
.topo__extra { display: none; }
/* Celular estreito: o botão do header vira só o ícone do WhatsApp (texto fica para leitor de tela) */
@media (max-width: 399px) {
  .topo .botao { width: 44px; padding: 0; }
  .topo .botao > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 560px) { .topo__extra { display: inline; } }

.marca { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; min-width: 0; }
/* Logo oficial: peixe + texto num círculo creme (fundo do header e do rodapé são sempre escuros) */
.marca__logo { height: 52px; width: 52px; flex: none; }
.marca__texto { display: grid; }
.marca__nome { font-family: var(--f-sub); font-size: 18px; line-height: 1; white-space: nowrap; }
.marca__sub { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cor-texto-apoio); margin-top: var(--sp-1); }
@media (min-width: 1024px) { .marca__logo { height: 56px; width: 56px; } .marca__nome { font-size: 19px; } }

/* Etiqueta de prévia: fora do fluxo, a página avaliada fica igual à de produção */
/* Na vertical, colada na borda esquerda: cabe na margem da grade em qualquer tela, sem cobrir conteúdo */
.previa {
  position: fixed; left: 0; top: 50%; z-index: 80;
  margin: 0; padding: var(--sp-3) 2px;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-size: 9px; line-height: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: var(--cor-fundo-alto); color: var(--cor-texto-suave); pointer-events: none;
}

/* ==========================================================================
   1. TOPO (hero)
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; overflow: hidden;
  padding-top: var(--topo);
  background: radial-gradient(110% 70% at 80% 0%, #2a4f7d 0%, var(--cor-fundo) 60%);
}
.hero__textura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.batimetria { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--cor-estrutura); opacity: .35; }

/* Painel da foto: espaço próprio, nada por cima */
.hero__painel {
  grid-area: painel; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; margin-inline: calc(var(--margem) * -1); background: #172a46;
}
.hero__fundo { position: absolute; inset: 0; isolation: isolate; }
/* Troca de foto: a nova entra por cima da anterior (maré + foco); a anterior sai quando a nova cobre tudo */
.hero__foto { position: absolute; inset: 0; opacity: 0; background: transparent; }
.hero__foto--ativa { opacity: 1; z-index: 2; }
.hero__foto--anterior { opacity: 1; z-index: 1; }
.hero__foto--entrando { animation: mare 1.6s var(--ease-mare) backwards; }
.hero__foto--entrando > img { animation: assentar 1.6s var(--ease-mare) backwards; }
.hero__foto.foto--vazia { background: radial-gradient(110% 90% at 70% 20%, var(--tom, #24426b) 0%, #172a46 75%); }
.hero__foto.foto--vazia::after { content: none; }
.hero__foto > img { transform: scaleX(var(--espelho, 1)); }

.hero__conteudo {
  flex: 1; width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto;
  display: grid; grid-template-areas: "painel" "texto" "montador"; gap: var(--sp-6); align-content: start;
  padding-block: 0 var(--sp-8);
}
.hero__texto { grid-area: texto; }
.hero__conteudo > .montador { grid-area: montador; }
.hero__titulo {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 9vw, 64px); line-height: .9; letter-spacing: .004em;
  text-wrap: balance;
}
.hero__titulo span { display: block; color: var(--cor-destaque); }
.hero__sub { margin-top: var(--sp-4); color: var(--cor-texto-apoio); font-size: clamp(16px, 4.2vw, 20px); }

@media (min-width: 1024px) {
  /* Bloco preso no topo: ao trocar de pergunta, o título não pula, só a pergunta muda */
  .hero__conteudo {
    grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
    grid-template-areas: none;
    grid-template-rows: auto auto; align-content: start;
    column-gap: var(--calha); row-gap: var(--sp-7); align-items: start;
    padding-block: var(--sp-7) var(--sp-7);
  }
  /* texto: colunas 1–8 · perguntas: colunas 1–6 (a foto fica livre à direita) */
  .hero__painel { grid-area: auto; }
  .hero__texto { grid-column: 1 / 9; grid-row: 1; }
  .hero__conteudo > .montador { grid-column: 1 / 7; grid-row: 2; }
  /* Computador: a foto é o fundo inteiro do topo; as perguntas ficam sobre a parte escura.
     O véu acompanha a grade: escuro onde há texto (até o fim da coluna 8, onde termina o título)
     e some logo depois, deixando a foto livre onde está o pescador. Vale para qualquer foto,
     clara ou escura, em qualquer largura de tela. */
  .hero__painel {
    position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; margin: 0; background: #132540;
    --conteudo: min(100% - 2 * var(--margem), var(--largura));
    --fim-texto: calc((100% - var(--conteudo)) / 2 + (var(--conteudo) - 11 * var(--calha)) * 8 / 12 + 7 * var(--calha));
  }
  .hero__painel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(23, 42, 70, .9) 0, rgba(23, 42, 70, .86) calc(var(--fim-texto) - var(--sp-12) * 2), rgba(23, 42, 70, 0) calc(var(--fim-texto) + var(--sp-12) * 2)),
      linear-gradient(180deg, rgba(29, 53, 87, .6) 0%, rgba(29, 53, 87, 0) 32%, rgba(29, 53, 87, 0) 78%, var(--cor-fundo) 100%);
  }  .hero__foto[data-espelhar] > img { --espelho: -1; object-position: 50% 50% !important; }
  .hero__titulo { font-size: clamp(44px, 3.4vw, 64px); }
}

/* ---------- Montador ---------- */
/* Sem cartão: o montador fica direto sobre o fundo, alinhado ao texto do topo */
.montador { display: block; align-self: start; min-width: 0; }
/* Uma linha: contagem · linha com a boia (ocupa o resto) · voltar */
.montador__topo { display: flex; align-items: center; gap: var(--sp-4); min-height: 44px; margin-bottom: var(--sp-5); }
.montador__topo .etiqueta { margin: 0; white-space: nowrap; }
.montador__voltar {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-2); margin-right: calc(var(--sp-2) * -1);
  font-size: 14px; font-weight: 600; color: var(--cor-texto-apoio); transition: color .2s var(--ease); flex: none;
}
.montador__voltar:hover { color: var(--cor-texto); }
.montador__voltar svg { width: 18px; height: 18px; }

/* Linha e boia: a barra de progresso */
/* Só desenho: nunca recebe clique (a boia anda para a direita e passaria por cima do "Voltar") */
.linha-boia { position: relative; flex: 1; min-width: 0; height: 32px; --p: 0; pointer-events: none; }
.linha-boia::before {
  content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 1px;
  background: rgba(241, 250, 238, .22);
}
.linha-boia__percorrido {
  position: absolute; left: 0; right: 0; top: 16.5px; height: 2px; background: var(--cor-texto);
  transform-origin: left; transform: scaleX(var(--p)); transition: transform .7s var(--ease);
}
.linha-boia__marca {
  position: absolute; top: 13px; width: 1px; height: 9px; left: calc(var(--m) * 100%);
  background: rgba(241, 250, 238, .4);
}
.linha-boia__trilho { position: absolute; inset: 0; transform: translateX(calc(var(--p) * 100%)); transition: transform .7s var(--ease); }
.boia { position: absolute; left: 0; top: 0; width: 14px; height: 30px; transform: translateX(-50%); overflow: visible; animation: boiar 2.4s ease-in-out infinite; }

.montador__etapas { display: grid; }
/* Troca de pergunta: a anterior se dissolve, a nova chega pela maré (voltando, a maré corre ao contrário) */
.etapa { grid-area: 1 / 1; min-width: 0; transition: opacity .28s ease, filter .28s ease; }
.etapa--saindo { opacity: 0; filter: blur(6px); pointer-events: none; }
.etapa--volta { --mare-angulo: 280deg; }
.etapa--nova .etapa__pergunta, .etapa--nova .resultado__nome { animation: mare 1.1s var(--ease-mare) .12s backwards; }
.etapa--nova .opcao, .etapa--nova .resultado__escolhas, .etapa--nova .resultado__cabeca,
.etapa--nova .resultado__frase, .etapa--nova .preco, .etapa--nova .botao, .etapa--nova .resultado__aviso, .etapa--nova .resultado__refazer {
  animation: foco .7s var(--ease-mare) backwards; animation-delay: calc(var(--i, 3) * 70ms + 200ms);
}
.etapa--nova .resultado__escolhas { --i: 0; }
.etapa--nova .resultado__cabeca { --i: 0; }
.etapa--nova .resultado__frase { --i: 5; }
.etapa--nova .preco { --i: 6; }
.etapa--nova .botao, .etapa--nova .resultado__aviso, .etapa--nova .resultado__refazer { --i: 7; }
.etapa__pergunta {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 32px; line-height: .95; margin-bottom: var(--sp-4); outline: none;
}

/* Opções sem caixa. Texto: lista com linha fina. Foto: a foto solta, o nome embaixo, nada por cima. */
.opcoes { display: grid; }
.opcoes--fotos { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
.opcao {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 64px; padding: var(--sp-3) 0;
  background: none; border: 0; border-top: 1px solid var(--cor-linha); text-align: left;
  transition: color .2s var(--ease);
}
.opcao:last-child { border-bottom: 1px solid var(--cor-linha); }
/* Peixe-alvo: até 6 opções em 2 colunas, para ocupar a mesma altura das outras perguntas */
.opcoes--peixes { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
.opcoes--peixes .opcao:nth-last-child(-n+2) { border-bottom: 1px solid var(--cor-linha); }
.opcao:active { transform: scale(.98); }
.opcao__nome { display: block; font-weight: 700; font-size: 17px; line-height: 1.2; }
.opcao__desc { display: block; font-size: 14px; line-height: 1.35; color: var(--cor-texto-suave); margin-top: var(--sp-1); }
.opcao__seta { width: 20px; height: 20px; margin-left: auto; flex: none; color: var(--cor-texto-suave); transition: transform .3s var(--ease), color .2s var(--ease); }
.opcao:hover .opcao__seta, .opcao[aria-pressed="true"] .opcao__seta { transform: translateX(3px); color: var(--cor-destaque); }
.opcao[aria-pressed="true"] .opcao__nome { color: var(--cor-texto); }

.opcao--foto { min-height: 0; padding: 0; border: 0; flex-direction: column; align-items: stretch; gap: 0; }
.opcao--foto:last-child { border-bottom: 0; }
.opcao__img { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; background: radial-gradient(120% 90% at 80% 10%, var(--tom, #24426b) 0%, #172a46 75%); }
.opcao__img.foto--vazia::after { content: none; }
.opcao--foto:hover .opcao__img > img { opacity: .85; }
.opcao__img > img { transition: opacity .25s ease; }
/* Escolhida: contorno reto na foto + nome em vermelho */
.opcao--foto[aria-pressed="true"] .opcao__img { outline: 2px solid var(--cor-texto); outline-offset: -2px; }
/* Nome e descrição na mesma linha (quebra só se não couber, no celular) */
.opcao__texto { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); padding-top: var(--sp-2); }
.opcao--foto .opcao__nome {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 24px; line-height: .9;
}
.opcao--foto .opcao__desc { color: var(--cor-texto-apoio); font-size: 14px; margin-top: 0; }
.opcao--foto .opcao__check { display: none; }
.opcao__check {
  position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1; width: 24px; height: 24px;
  background: var(--cor-texto); color: var(--cor-fundo); display: grid; place-items: center;
  opacity: 0; transition: opacity .25s ease;
}
.opcao[aria-pressed="true"] .opcao__check { opacity: 1; }
.opcao__check svg { width: 14px; height: 14px; }

/* Resultado do montador */
.resultado__escolhas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--cor-linha); font-size: 13px; font-weight: 600; color: var(--cor-texto-apoio);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--cor-texto); color: var(--cor-texto); }
.resultado__cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.resultado__cabeca .etiqueta { margin: 0; }
.resultado__nome {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 36px; line-height: .92; margin-top: var(--sp-2); outline: none;
}
.resultado__frase { font-family: var(--f-sub); font-size: 16px; line-height: 1.45; color: var(--cor-texto-apoio); margin: var(--sp-2) 0 var(--sp-4); }
.resultado__aviso { font-size: 12px; color: var(--cor-texto-suave); text-align: center; margin-top: var(--sp-3); }
.resultado__refazer {
  display: block; margin: var(--sp-1) auto 0; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--cor-texto-apoio);
  text-decoration: underline; text-underline-offset: 3px;
}
.resultado .ficha__item { animation: foco .7s var(--ease-mare) backwards; animation-delay: calc(var(--i) * 80ms + 260ms); }
.selo {
  display: inline-block; background: var(--cor-destaque); color: var(--pal-creme);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2); line-height: 1.2;
}

/* ==========================================================================
   Faixa de marcas (passa da grade de propósito)
   ========================================================================== */
.faixa-envoltorio { overflow: hidden; padding: var(--sp-5) 0; margin-top: calc(var(--sp-5) * -1); position: relative; z-index: 2; }
.faixa { background: var(--cor-destaque); color: var(--pal-marinho); transform: rotate(-2deg); width: 106%; margin-left: -3%; padding: var(--sp-3) 0 var(--sp-2); }
.faixa__trilho { display: flex; width: max-content; animation: deslizar 38s linear infinite; }
.faixa__item {
  display: inline-flex; align-items: center; gap: var(--sp-6); padding-left: var(--sp-6); white-space: nowrap;
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 36px; line-height: 1;
}
.faixa__item::after { content: ''; width: 9px; height: 9px; background: var(--pal-marinho); }
.faixa__item--vazado { color: transparent; -webkit-text-stroke: 1.4px var(--pal-marinho); }

/* ==========================================================================
   Seção comum: no computador, uma tela abaixo do header, conteúdo centralizado
   ========================================================================== */
.secao { padding-block: var(--sp-10); }
.cabecalho-secao { margin-bottom: var(--gap-header); }
@media (min-width: 1024px) and (min-height: 700px) {
  :root { --pad-secao: var(--sp-8); }
  .secao {
    min-height: calc(100svh - var(--topo));
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--pad-secao);
  }
  /* Encaixe por construção: se a tela for baixa, só as fotos encolhem (o texto nunca é cortado) */
  .produtos > .recipiente, .kits > .recipiente, .dicas > .recipiente, .capturas > .recipiente {
    display: flex; flex-direction: column; justify-content: center;
    height: calc(100svh - var(--topo) - 2 * var(--pad-secao));
  }
  .cabecalho-secao, .capturas__rodape { flex: none; }
  .produtos__grade, .kits__lista, .dicas__lista, .mural { flex: 0 1 auto; min-height: 0; }
  .produtos__grade { grid-template-rows: repeat(2, minmax(0, auto)); }
  .kits__lista, .dicas__lista, .mural { grid-template-rows: minmax(0, auto); }
  /* (as fotos que encolhem estão no bloco "Telas baixas", depois das seções) */
}
/* Telas de notebook (altura até 860px): mesma página, escala menor de título e espaços */
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 860px) {
  :root { --pad-secao: var(--sp-6); --gap-rotulo: var(--sp-3); --gap-sub: var(--sp-3); --gap-header: var(--sp-6); }
  .titulo-secao { font-size: clamp(36px, 3.4vw, 48px); }
  .sub { font-size: 19px; }
  .produtos__grade { row-gap: var(--sp-6); }
  .captura__legenda { -webkit-line-clamp: 2; }
  .capturas__rodape { margin-top: var(--sp-6); padding-top: var(--sp-4); }
}

/* ==========================================================================
   2. PRODUTOS — categorias da loja
   ========================================================================== */
.produtos__grade { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); gap: var(--sp-6) var(--calha); }
/* celular 2 por linha · tablet 4 · computador 4 (2 colunas de 4, 2 de 8, 3 de 12) */
.produto { grid-column: span 2; }
@media (min-width: 1024px) { .produtos__grade { row-gap: var(--sp-7); } .produto { grid-column: span 3; } }
.produto__link { display: block; text-decoration: none; }
.produto__foto { display: block; aspect-ratio: 3 / 2; }
.produto__foto > img { transition: opacity .25s ease; }
.produto__nome {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3);
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase;
  transition: color .2s var(--ease);
}
.produto__nome svg { width: 18px; height: 18px; flex: none; color: var(--cor-texto-apoio); }
.produto__marcas { display: block; margin-top: var(--sp-1); font-size: 14px; line-height: 1.4; color: var(--cor-texto-suave); }
.produto__link:hover .produto__nome { color: var(--cor-destaque); }
.produto__link:hover .produto__foto > img { opacity: .85; }

/* ==========================================================================
   3. KITS PRONTOS — o cartão segue a arte de kit da loja
   (listras diagonais, faixa vermelha, cantoneiras, "KIT DE" + título, itens numerados)
   ========================================================================== */
/* Celular e tablet: um cartão embaixo do outro, largura toda · computador: três lado a lado */
.kits__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grade); }
@media (min-width: 1024px) {
  .kits__lista { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); column-gap: var(--calha); }
  .kit { grid-column: span 4; }
}
.kit__cartao {
  position: relative; height: 100%; display: flex; flex-direction: column;
  border: 1px solid var(--cor-linha);
  background:
    radial-gradient(80% 45% at 100% 0%, var(--cor-brilho), transparent 70%),
    repeating-linear-gradient(135deg, var(--cor-hachura) 0 1px, transparent 1px 12px),
    var(--cor-fundo-escuro);
}
/* Cantoneiras vermelhas nos quatro cantos, como na arte da loja */
.kit__cartao::before {
  content: ''; position: absolute; inset: var(--sp-2); z-index: 2; pointer-events: none;
  --c: var(--cor-destaque); --t: 3px; --l: 20px;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c) 0 0) right bottom / var(--t) var(--l) no-repeat;
}
.kit__cabeca {
  position: relative;
  padding: var(--pad-cartao) var(--pad-cartao) var(--sp-4);
}
.kit__nome {
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 3vw, 42px); line-height: .9; white-space: nowrap;
}
.kit__rotulo {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--f-texto); font-style: normal; font-weight: 700; font-size: 12px; line-height: 1;
  letter-spacing: .3em; color: var(--cor-texto-suave);
}
/* Linha fixa logo abaixo do título, mesma altura nos 3 cartões (com ou sem selo), para a foto
   começar sempre na mesma altura: traço vermelho à esquerda, selo "Pronta entrega" à direita,
   os dois no mesmo topo. A direita do selo alinha com a linha vertical da cantoneira, sem tocá-la. */
.kit__selo-linha {
  display: flex; align-items: flex-start; justify-content: space-between; margin-top: var(--sp-3);
  min-height: calc(11px * 1.2 + 2 * var(--sp-1));
}
.kit__acento { display: block; width: 40px; height: 4px; flex: none; background: var(--cor-destaque); }
.kit__status {
  flex: none; margin: 0 calc(-1 * (var(--pad-cartao) - var(--sp-2))) 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  background: var(--cor-destaque); color: var(--pal-creme);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
/* Foto do kit: retângulo limpo, mesmo tamanho e mesmo tratamento nos três */
.kit__foto { aspect-ratio: 2 / 1; flex: none; }
.kit__foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 110% at 50% 45%, transparent 55%, rgba(29, 53, 87, .5) 100%);
}
/* Itens como na arte: número, tipo da peça em vermelho, modelo */
.ficha--kit { margin: 0; padding: var(--sp-3) var(--pad-cartao) 0; }
.ficha--kit .ficha__item + .ficha__item { border-top: 1px solid var(--cor-linha); }
.ficha--kit .ficha__botao { grid-template-columns: 28px 92px minmax(0, 1fr) 20px; min-height: 44px; gap: var(--sp-2); }
.ficha--kit .ficha__num { font-size: 22px; text-align: left; }
.ficha__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave); }
.ficha--kit .ficha__nome { font-size: 15px; }
.ficha--kit .ficha__detalhe { padding-left: calc(28px + 92px + 2 * var(--sp-2)); }
/* Cartão estreito (celular): o tipo da peça sobe para cima do modelo, e o modelo ganha a largura toda */
@media (max-width: 899px) {
  .ficha--kit .ficha__botao { grid-template-columns: 28px minmax(0, 1fr) 20px; column-gap: var(--sp-3); row-gap: 2px; }
  .ficha--kit .ficha__num { grid-row: 1 / 3; }
  .ficha--kit .ficha__rotulo { grid-column: 2; grid-row: 1; }
  .ficha--kit .ficha__nome { grid-column: 2; grid-row: 2; }
  .ficha--kit .ficha__mais { grid-column: 3; grid-row: 1 / 3; }
  .ficha--kit .ficha__detalhe { padding-left: calc(28px + var(--sp-3)); }
}
.kit__acao { margin-top: auto; padding: var(--sp-4) var(--pad-cartao) var(--pad-cartao); }

/* ==========================================================================
   4. CONSERTO — no computador a seção inteira fica fixa enquanto o molinete se desmonta
   ========================================================================== */
.conserto { position: relative; }
.conserto__palco { position: relative; }
.conserto__fixo { padding-block: var(--sp-10); }
.conserto__grade { display: grid; gap: var(--sp-7); grid-template-areas: "cabeca" "diagrama" "legenda" "info"; }
.conserto__cabeca { grid-area: cabeca; }
.diagrama { grid-area: diagrama; }
.legendas { grid-area: legenda; display: grid; gap: var(--sp-5); }
.conserto__info { grid-area: info; }

.diagrama {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--cor-linha); padding: var(--sp-3) var(--sp-3) var(--sp-4);
  background-color: var(--cor-diagrama);
  background-image:
    linear-gradient(rgba(69, 123, 157, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 123, 157, .3) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
/* Celular: molinete e vara, um embaixo do outro, na mesma janela */
.diagrama__pecas { display: grid; gap: var(--sp-6); }
.desenho { width: 100%; height: auto; overflow: visible; }
.diagrama__barra { flex: none; height: 2px; margin: var(--sp-2) var(--sp-2) 0; background: var(--cor-linha); overflow: hidden; }
.diagrama__barra span { display: block; height: 100%; background: var(--cor-destaque); transform-origin: left; transform: scaleX(var(--p, 0)); }
.diagrama__dica {
  position: absolute; top: var(--sp-3); right: var(--sp-4); z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cor-texto-suave); transition: opacity .4s var(--ease);
}
.diagrama--andando .diagrama__dica { opacity: 0; }

/* Desenho técnico (molinete e vara): mesmo traço nos dois */
.desenho .mol-peca > * { fill: var(--cor-fundo-escuro); stroke: var(--cor-texto); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.desenho .mol-traco { fill: none; }
.desenho .mol-cheio-vermelho { fill: var(--cor-destaque); }
.desenho .mol-parafuso { fill: var(--cor-texto-suave); stroke: none; }
.desenho .mol-dente { fill: none; stroke-width: 7; stroke-dasharray: 5 4; vector-effect: none; }
.desenho .mol-dente--fino { stroke-width: 5; stroke-dasharray: 3 3; }
.desenho .mol-arame { fill: none; stroke-width: 3; }
.desenho .mol-linha line { stroke: var(--cor-destaque); stroke-width: 1.4; }
.desenho .mol-serrilha line { stroke: var(--cor-fundo); stroke-width: 1.6; }
.desenho .mol-peca > .mol-fio { fill: none; stroke: var(--cor-fundo); stroke-width: 1.4; }   /* voltas da linha da amarração */
.mol-vara rect { fill: var(--cor-estrutura); }
.mol-vara .mol-vara__detalhe { fill: var(--cor-destaque); }
.mol-eixo { stroke: var(--cor-texto-suave); stroke-width: 1; stroke-dasharray: 6 6; opacity: 0; }
.rotulo { opacity: 0; transition: opacity .35s var(--ease); }
.rotulo.ativo { opacity: 1; }
.rotulo line { stroke: var(--cor-texto-suave); stroke-width: 1; }
.rotulo text { font-family: var(--f-texto); font-weight: 700; font-size: 17px; letter-spacing: .1em; fill: var(--cor-texto); }
.rotulo .rotulo__num { font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 32px; letter-spacing: 0; fill: var(--cor-destaque); }
.rotulo .rotulo__nome { display: none; }

.legenda { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-4); font-size: 14px; font-weight: 600; }
.legenda li { opacity: .28; transition: opacity .35s var(--ease); }
.legenda li.ativo { opacity: 1; }
.legenda b { font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 18px; color: var(--cor-destaque); margin-right: var(--sp-1); }

/* Lista de serviços: uma linha por serviço, linha fina entre eles */
.servicos { margin-bottom: var(--sp-7); }
.servicos li { padding: var(--sp-3) 0; border-top: 1px solid var(--cor-linha); font-size: 15px; line-height: 1.45; }
.servicos li:last-child { border-bottom: 1px solid var(--cor-linha); }
.servicos strong { font-size: 16px; margin-right: var(--sp-1); }
.servicos span { color: var(--cor-texto-apoio); }
/* Passos: a sequência é real (1, 2, 3) */
.passos { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.passos li { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: var(--sp-3); font-size: 15px; line-height: 1.4; }
.passos__num {
  width: 36px; height: 36px; border: 1.5px solid var(--cor-estrutura);
  display: grid; place-items: center;
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 20px; color: var(--cor-destaque);
}

@media (min-width: 1024px) and (min-height: 700px) {
  /* Palco alto = percurso de rolagem com a seção presa na tela: entrada, desmontagem do molinete,
     molinete pronto, vara montada, desmontagem da vara, vara pronta (main.js, partes 8 e 13).
     As zonas absorvem a rolagem que sobra enquanto uma animação termina, sem mexer na tela. */
  .conserto__palco { height: 700vh; }
  .conserto__fixo {
    position: sticky; top: var(--topo); height: calc(100svh - var(--topo));
    display: flex; align-items: center; padding-block: var(--sp-8);
  }
  .conserto__grade {
    width: min(100% - 2 * var(--margem), var(--largura));
    grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
    grid-template-areas: none;
    column-gap: var(--calha); row-gap: var(--sp-8);
  }
  /* desenho: colunas 1–7 · uma coluna de respiro · texto: colunas 9–12 */
  .conserto__cabeca { grid-column: 1 / -1; grid-row: 1; }
  .diagrama { grid-column: 1 / 8; grid-row: 2; }
  .conserto__info { grid-column: 9 / -1; grid-row: 2; }
  /* O desenho acompanha a altura da coluna de texto ao lado (não empurra a seção) */
  .diagrama { contain: size; height: 100%; }
  /* Os dois desenhos ocupam o mesmo lugar; a rolagem troca um pelo outro (main.js, parte 8) */
  .diagrama__pecas { flex: 1; min-height: 0; gap: 0; overflow: hidden; }
  .diagrama__pecas > .desenho { grid-area: 1 / 1; height: 100%; min-height: 0; }
  #vara { opacity: 0; transform: translateX(110%); }
  .rotulo .rotulo__nome { display: inline; }
  .legendas { display: none; }
}

/* ==========================================================================
   5. DICAS — foto, título, texto e link, sem caixa
   ========================================================================== */
/* 4 colunas cada: celular 1 por linha · tablet 2 · computador 3 */
.dicas__lista { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); gap: var(--sp-8) var(--calha); }
.dica { grid-column: span 4; }
.dica__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.dica__foto { display: block; aspect-ratio: 3 / 2; }
.dica__foto > img { transition: opacity .25s ease; }
.dica__titulo {
  display: block; margin-top: var(--sp-4);
  font-family: var(--f-titulo); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 28px; line-height: .95;
  transition: color .2s var(--ease);
}
.dica__texto { display: block; margin-top: var(--sp-2); font-size: 15px; line-height: 1.5; color: var(--cor-texto-apoio); text-wrap: pretty; }
.dica__mais {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3);
  font-size: 14px; font-weight: 700; color: var(--cor-texto);
}
.dica__mais svg { width: 18px; height: 18px; flex: none; }
.dica__link:hover .dica__titulo { color: var(--cor-destaque); }
.dica__link:hover .dica__foto > img { opacity: .85; }

/* ==========================================================================
   6. CAPTURAS — mural na grade (celular: rolagem lateral) e uma linha de chamada
   ========================================================================== */
.mural {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--sp-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--margem) * -1); padding: 0 var(--margem); scroll-padding-inline: var(--margem); scrollbar-width: none;
}
.mural::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .mural { grid-auto-flow: row; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); column-gap: var(--calha); overflow: visible; margin: 0; padding: 0; }
  .captura { grid-column: span 3; }
}
.captura { display: block; scroll-snap-align: start; text-decoration: none; }
.captura__foto { display: block; aspect-ratio: 4 / 5; }
.captura__foto > img { transition: opacity .3s ease; }
.captura:hover .captura__foto > img { opacity: .85; }
.captura__legenda {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: var(--sp-2); font-size: 14px; line-height: 1.4; color: var(--cor-texto-apoio); text-wrap: pretty;
}
.capturas__rodape {
  display: grid; gap: var(--sp-5); align-items: center;
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--cor-linha);
}
.capturas__numero { display: flex; align-items: baseline; gap: var(--sp-2); color: var(--cor-texto-apoio); font-size: 15px; }
.capturas__numero strong { font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 40px; line-height: 1; color: var(--cor-texto); }
.capturas__convite { font-size: 16px; color: var(--cor-texto-apoio); }
.capturas__convite a { color: var(--cor-texto); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  /* Uma linha só: número · convite · botão */
  /* número: colunas 1–3 · convite: 4–9 (alinhado à 2ª foto) · botão termina na coluna 12 */
  .capturas__rodape { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); column-gap: var(--calha); }
  .capturas__numero { grid-column: 1 / 4; }
  .capturas__convite { grid-column: 4 / 10; }
  .capturas__rodape .botao { grid-column: 10 / -1; justify-self: end; }
}

/* ==========================================================================
   4b. PESCA GUIADA — foto do barco como fundo da seção inteira (estilo do hero)
   ========================================================================== */
.guiada { position: relative; overflow: hidden; background: var(--marinho-escuro); }
.guiada__fundo { position: absolute; inset: 0; z-index: 0; }
.guiada__fundo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: contrast(1.06) saturate(.92); }
/* Véu: escurece tudo pra ler o texto, mais forte à esquerda (onde fica o texto) */
.guiada__fundo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23, 42, 70, .88) 0%, rgba(23, 42, 70, .6) 55%, rgba(23, 42, 70, .4) 100%),
    linear-gradient(180deg, rgba(23, 42, 70, .35) 0%, rgba(23, 42, 70, .15) 30%, rgba(23, 42, 70, .55) 100%);
}
.guiada__grade { position: relative; z-index: 1; display: grid; gap: var(--sp-7); align-items: center; }
.guiada__acao .botao { margin-top: var(--sp-6); }
.guiada__lista { margin-bottom: 0; }
@media (min-width: 1024px) {
  /* Desenho do barco (bico avança pra direita): título em cima antes do barco, ação embaixo depois
     do casco (mesma margem do título), lista embaixo à frente do bico — o meio da foto (onde está o
     barco) fica livre. Linha de cima flexível empurra a de baixo para o rodapé da seção. */
  .guiada__grade {
    grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); grid-template-rows: 1fr auto;
    column-gap: var(--calha); align-items: stretch; min-height: min(620px, 72vh);
  }
  .guiada__topo { grid-column: 1 / 7; grid-row: 1; align-self: start; }
  .guiada__acao { grid-column: 1 / 7; grid-row: 2; align-self: end; }
  .guiada__lista { grid-column: 8 / -1; grid-row: 2; align-self: end; }
}

/* ==========================================================================
   7. LOJA
   ========================================================================== */
.loja__grade { display: grid; gap: var(--sp-7); align-items: center; }
.loja__foto { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  /* foto: colunas 1–5 · uma coluna de respiro · texto: colunas 7–12 */
  .loja__grade { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); column-gap: var(--calha); }
  .loja__foto { grid-column: 1 / 6; }
  .loja__info { grid-column: 7 / -1; }
  /* A foto acompanha a altura da tela, sem vazar */
  .loja__foto { aspect-ratio: auto; height: min(640px, calc(100svh - var(--topo) - 2 * var(--sp-8))); }
}
.info-lista { margin: var(--sp-7) 0; }
.info-lista li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--cor-linha); font-size: 16px; }
.info-lista li:last-child { border-bottom: 1px solid var(--cor-linha); }
.info-lista svg { width: 22px; height: 22px; color: var(--cor-texto-apoio); }
.loja__botoes { display: grid; gap: var(--sp-3); }
@media (min-width: 560px) { .loja__botoes { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   8. RODAPÉ — logo, endereço e links sobre o fundo, com uma linha fina em cima
   ========================================================================== */
.rodape { position: relative; background: var(--cor-fundo); border-top: 1px solid var(--cor-linha); }
.rodape__grade { display: grid; gap: var(--sp-4); padding-block: var(--sp-8); }
/* Celular e tablet: espaço no fim da página para o WhatsApp flutuante não cobrir o rodapé */
@media (max-width: 1023px) { .rodape__grade { padding-bottom: var(--sp-12); } }
.rodape__endereco { color: var(--cor-texto-apoio); font-size: 14px; }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.rodape__links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; font-size: 15px; text-decoration: none; }
.rodape__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__direitos { font-size: 12px; color: var(--cor-texto-suave); }
@media (min-width: 1024px) {
  /* mesmas colunas da linha do Instagram: marca 1–3 · endereço 4–9 · links terminam na 12 */
  .rodape__grade { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); align-items: center; column-gap: var(--calha); }
  .rodape__grade .marca { grid-column: 1 / 4; }
  .rodape__endereco { grid-column: 4 / 10; }
  .rodape__links { grid-column: 10 / -1; justify-content: flex-end; }
  .rodape__direitos { grid-column: 1 / -1; }
}

/* ==========================================================================
   Telas baixas — fica aqui, depois das regras de cada seção, para valer sobre elas
   ========================================================================== */
/* Computador: dentro de cada cartão, só a foto encolhe quando a tela é baixa */
@media (min-width: 1024px) and (min-height: 700px) {
  .produto__link, .captura { height: 100%; display: flex; flex-direction: column; }
  .produto__foto, .kit__foto, .dica__foto, .captura__foto { flex: 0 1 auto; min-height: 0; }
  .produto__nome, .produto__marcas, .captura__legenda { flex: none; }
}
/* Telas de notebook (altura até 860px): continuação do modo compacto */
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 860px) {
  .hero__conteudo { padding-block: var(--sp-5); row-gap: var(--sp-6); }
  .hero__titulo { font-size: clamp(44px, 3.3vw, 64px); }
  .hero__sub { margin-top: var(--sp-3); font-size: 18px; }
  .montador__topo { margin-bottom: var(--sp-4); }

  .kit__cabeca { padding: var(--sp-5) var(--pad-cartao) var(--sp-3); }
  .kit__cartao--selo-topo .kit__status { top: var(--sp-5); }
  .kit__nome { font-size: 34px; }
  .ficha--kit { padding-top: var(--sp-2); }
  .ficha--kit .ficha__botao { min-height: 40px; }
  .kit__acao { padding: var(--sp-3) var(--pad-cartao) var(--sp-5); }

  .conserto__fixo { padding-block: var(--sp-6); }
  .conserto__grade { row-gap: var(--sp-6); }
  /* Coluna de texto mais larga (5 colunas): cada serviço cabe numa linha e a seção cabe na tela */
  .diagrama { grid-column: 1 / 7; }
  .conserto__info { grid-column: 8 / -1; }
  .titulo-bloco { font-size: 24px; }
  .servicos { margin-bottom: var(--sp-6); }
  .servicos li { padding: var(--sp-2) 0; }
  .passos { gap: var(--sp-2); margin-bottom: var(--sp-5); }
}
/* Altura até 760px (notebook com zoom de 125%): o topo encolhe o montador para caber com o título */
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 760px) {
  .hero__conteudo > .montador { grid-column: 1 / 6; }
  .hero__titulo { font-size: 40px; }
  .servicos { margin-bottom: var(--sp-5); }
  .titulo-bloco { margin-bottom: var(--sp-2); }
  .hero__sub { font-size: 17px; }
}

/* Aviso rápido (prévia sem WhatsApp) */
.aviso {
  position: fixed; left: 50%; top: calc(var(--topo) + var(--sp-4)); z-index: 90; max-width: calc(100% - 2 * var(--sp-4));
  transform: translateX(-50%); opacity: 0; filter: blur(6px); pointer-events: none;
  background: var(--cor-texto); color: var(--cor-fundo); font-weight: 700; font-size: 14px;
  padding: var(--sp-3) var(--sp-4); text-align: center;
  transition: opacity .3s ease, filter .5s var(--ease-mare);
}
.aviso--visivel { opacity: 1; filter: none; }

/* ==========================================================================
   Movimento · "maré"
   Uma assinatura só, no site inteiro:
   - maré: o conteúdo chega numa varredura de borda difusa, inclinada como
     a frente de uma onda na areia (da esquerda para a direita);
   - foco: fotos chegam fora de foco e assentam.
   Nada desliza, gira ou pula. Tudo usa a mesma curva (--ease-mare).
   ========================================================================== */
@property --mare { syntax: '<percentage>'; inherits: false; initial-value: 140%; }

.js [data-revelar].visivel:not(.assentado), .hero__foto--entrando,
.etapa--nova .etapa__pergunta, .etapa--nova .resultado__nome {
  -webkit-mask-image: linear-gradient(var(--mare-angulo, 100deg), #000 calc(var(--mare) - 40%), transparent var(--mare));
  mask-image: linear-gradient(var(--mare-angulo, 100deg), #000 calc(var(--mare) - 40%), transparent var(--mare));
}

/* Seções: aparecem uma vez; itens de uma mesma lista entram em sequência (--i) */
.js [data-revelar] { opacity: 0; }
.js [data-revelar].visivel { opacity: 1; animation: mare 1.5s var(--ease-mare) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
.js [data-revelar].visivel .foto > img { animation: assentar 1.6s var(--ease-mare) backwards; animation-delay: calc(var(--i, 0) * 110ms); }

@keyframes mare { from { --mare: 0%; } to { --mare: 140%; } }
@keyframes foco { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes assentar { from { filter: blur(14px); scale: 1.06; } to { filter: blur(0); scale: 1; } }
@keyframes boiar { 0%, 100% { transform: translate(-50%, -1.5px); } 50% { transform: translate(-50%, 1.5px); } }
@keyframes deslizar { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-revelar], .js [data-revelar] .foto > img { opacity: 1; animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .faixa__trilho { animation: none; }
  .conserto__palco { height: auto !important; }
  .conserto__fixo { position: relative !important; height: auto !important; }
  /* Sem movimento: molinete e vara já desmontados, um embaixo do outro */
  .diagrama__pecas > .desenho { grid-area: auto !important; }
  #vara { opacity: 1 !important; transform: none !important; }
}