/* Gratifike — identidade: roxo #820AD1, Barlow Condensed (títulos) + Barlow (texto),
   texturas halftone (nunca chapado) */
:root {
  --roxo: #820AD1;
  --roxo-escuro: #5c0794;
  --roxo-claro: #f3e8fd;
  --tinta: #221a2e;
  --cinza: #6b6377;
  --fundo: #faf8fc;
  --branco: #fff;
  /* VERDE DO WHATSAPP e a tinta que vai em cima dele *(chefe, 01/09/2026)*.
     Branco sobre este verde dá 1,98:1 — a norma pede 4,5:1, e era o único
     erro de acessibilidade que sobrava no site inteiro. O verde NÃO muda: é a
     exceção de cor aprovada (regra 35) e é o que faz o botão ser reconhecido
     como WhatsApp. Quem muda é o texto, para um verde quase preto: 7,69:1.
     Os dois vivem AQUI porque são quatro botões em quatro blocos de CSS
     diferentes — quatro cópias divergiriam na primeira troca. */
  --zap: #25d366;
  --zap-tinta: #0d2b1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Rede de segurança do atributo `hidden`. Qualquer classe que declare `display`
   sobrescreve o `display:none` do navegador e o elemento continua na tela —
   foi assim que um overlay invisível cobriu a página inteira e comeu todos os
   cliques, sem erro nenhum no console. */
[hidden] { display: none !important; }

body {
  font-family: 'Barlow', sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.55;
}

h1, h2, h3, .logo {
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1.15;
}

a { color: var(--roxo); text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* textura halftone: pontos em degradê, aplicada por cima do roxo */
.halftone {
  background-color: var(--roxo);
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .18) 1.2px, transparent 1.6px),
    radial-gradient(circle at 10px 10px, rgba(255, 255, 255, .10) 1.6px, transparent 2px),
    linear-gradient(135deg, var(--roxo) 0%, var(--roxo-escuro) 100%);
  background-size: 16px 16px, 16px 16px, cover;
}

/* ---------------------------------------------------------------- topo */
.topo { background: var(--branco); border-bottom: 3px solid var(--roxo); }
/* min-height, não height: o menu passou de 4 para 8 itens (as categorias) e
   altura travada faz o texto vazar por baixo da borda roxa. */
.topo-linha {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 18px;
}
.logo {
  font-size: 28px; font-weight: 700; letter-spacing: 2px; color: var(--roxo);
}
.logo span {
  display: block; font-family: 'Barlow', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 3px; color: var(--cinza); text-transform: uppercase;
}
/* DOIS GRUPOS com pesos diferentes: o que se compra (pastilha roxa) e as
   páginas da empresa (texto simples). O menu é o mesmo em toda página — sinal
   de sitelink —, então todos os links ficam sempre visíveis, sem dropdown. */
.topo-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-produtos, .nav-institucional { display: flex; align-items: center; flex-wrap: wrap; }
.nav-produtos { gap: 7px; }
.nav-institucional { gap: 16px; }

/* Pastilha: é o caminho para o catálogo, e é ele que tem que puxar o olho. */
.nav-cat {
  background: var(--roxo); color: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
  border: 1.5px solid var(--roxo); transition: background .15s ease, color .15s ease;
}
.nav-cat:hover { background: var(--roxo-escuro); border-color: var(--roxo-escuro); color: #fff; }
/* "Todos" é a saída para o catálogo inteiro, não uma linha de produto —
   contorno em vez de preenchido para não competir com as categorias. */
.nav-cat-todos { background: transparent; color: var(--roxo); }
.nav-cat-todos:hover { background: var(--roxo-claro); color: var(--roxo-escuro); }

/* Institucional: peso de link, não de botão, e SEMPRE na própria linha.
   Tentei primeiro uma barrinha vertical separando os dois grupos na mesma
   linha — só que nem em 1440px eles cabem juntos (o container trava em 1100 e
   as pastilhas ocupam quase tudo), então a barrinha virava um risco solto no
   começo da segunda linha. Linha própria por decisão é melhor que linha própria
   por acidente: fica igual em toda tela, com um fio separando. */
.nav-institucional {
  flex-basis: 100%; padding-top: 7px;
  border-top: 1px solid var(--linha, #e4d2f7);
}
.nav-institucional a {
  font-weight: 600; font-size: 13px; color: var(--cinza); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .8px;
}
.nav-institucional a:hover { color: var(--roxo); }

/* CTA do topo: verde do WhatsApp, a mesma exceção de cor da Maria (regra 35).
   Fica no fim da linha institucional e é o único elemento colorido dali — o
   olho acha sem procurar, em qualquer página. */
.nav-cta {
  background: var(--zap); color: var(--zap-tinta) !important; border-radius: 999px;
  padding: 6px 15px 6px 12px; font-size: 12.5px; letter-spacing: .4px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-cta::before {
  content: ''; width: 14px; height: 14px; flex: none;
  background: currentColor;
  -webkit-mask: var(--zap-svg) center/contain no-repeat;
  mask: var(--zap-svg) center/contain no-repeat;
}
.nav-cta:hover { background: #1eb855; }

/* ------------------------------------------------------------- lupa do topo */
/* Discreta de propósito: fechada é só o ícone, do tamanho de um alvo de toque
   (40px). Aberta, o campo cai POR BAIXO da linha do topo em vez de empurrar a
   logo e o botão de orçamento para os lados — no celular não há largura para
   os três na mesma linha. */
.busca-topo { position: relative; }
.busca-topo > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--roxo);
}
.busca-topo > summary::-webkit-details-marker { display: none; }
.busca-topo > summary:hover { background: var(--roxo-claro); }
.busca-topo[open] > summary { background: var(--roxo-claro); }
.busca-topo > form {
  position: absolute; top: 46px; right: 0; z-index: 40;
  display: flex; gap: 6px; padding: 10px;
  background: var(--branco); border: 1px solid var(--roxo-claro);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(45, 5, 70, .18);
}
.busca-topo input {
  width: min(62vw, 260px); height: 40px; padding: 0 12px; font-size: 16px;
  font-family: 'Barlow', sans-serif; color: var(--tinta);
  border: 1.5px solid var(--roxo-claro); border-radius: 8px; background: var(--branco);
}
.busca-topo input:focus { outline: none; border-color: var(--roxo); }
.busca-topo button, .busca-pagina button {
  height: 40px; padding: 0 16px; cursor: pointer; border: none; border-radius: 8px;
  background: var(--roxo); color: var(--branco);
  font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
}
.busca-topo button:hover, .busca-pagina button:hover { background: var(--roxo-escuro); }

/* o mesmo campo, repetido na página de resultado */
.busca-pagina { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }
.busca-pagina input {
  flex: 1 1 220px; height: 44px; padding: 0 14px; font-size: 16px;
  font-family: 'Barlow', sans-serif; color: var(--tinta);
  border: 1.5px solid var(--roxo-claro); border-radius: 8px; background: var(--branco);
}
.busca-pagina input:focus { outline: none; border-color: var(--roxo); }
.busca-vazia { color: var(--cinza); margin: 6px 0 14px; max-width: 60ch; }

/* No DESKTOP não existe sanfona: o botão de abrir some e o menu fica sempre à
   mostra, como sempre foi. `display: contents` no `.topo-topo` faz a logo e o
   botão participarem direto do flex do `.topo-linha` — sem isso eles ficariam
   presos numa caixa e o desktop perderia o arranjo de sempre. */
@media (min-width: 901px) {
  .topo-topo { display: contents; }
  .menu-sanfona > summary { display: none; }
  .menu-sanfona > nav { display: flex; }
  .logo { order: 1; }
  .menu-sanfona { order: 2; flex: 1 1 auto; }
  /* a lupa precisa de `order` explícito: com `display: contents` no pai ela vira
     filha do flex e, sem ordem, o padrão 0 a jogaria na frente da logo. */
  .busca-topo { order: 3; }
  .nav-cta { order: 4; }
}
:root {
  --zap-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.5c1.2.6 2.5.9 3.8.9 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 21.8c-1.2 0-2.4-.3-3.4-.8l-.6-.3-4.9.9 1-4.7-.4-.6c-.9-1.5-1.4-3.2-1.4-4.9 0-5.2 4.3-9.5 9.5-9.5s9.5 4.3 9.5 9.5-4.1 10.4-9.3 10.4zm5.3-7.3c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.4.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  /* `padding: 10px 0` zerava o "0 20px" do `.container` (a mesma armadilha do
     `.pagina`): a logo e o menu encostavam na borda esquerda da tela. Só as
     medidas verticais são desta regra. */
  .topo-linha { flex-direction: column; align-items: stretch; gap: 8px;
    padding-top: 10px; padding-bottom: 10px; }

  /* MENU FECHADO por padrão *(decisão do chefe, 31/08/2026)*. Aberto, ele
     ocupava meia tela: ao abrir uma categoria o visitante não via produto
     nenhum sem rolar, e aquilo parecia bug.
     Antes tentamos rolagem horizontal (escondia metade das categorias) e depois
     três linhas visíveis (ocupava demais). A sanfona resolve os dois: ninguém
     precisa adivinhar que rola, e fechada ela custa uma linha.
     Os links continuam TODOS no HTML — é `<details>`, não JavaScript —, então
     o Google os lê com o menu aberto ou fechado (regra 49). */
  .menu-sanfona summary {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    list-style: none; padding: 9px 0 8px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--roxo-escuro);
    border-top: 1px solid var(--linha, #e4d2f7);
  }
  .menu-sanfona summary::-webkit-details-marker { display: none; }
  /* Três riscos do hambúrguer, desenhados com borda — sem imagem e sem ícone. */
  .menu-risco, .menu-risco::before, .menu-risco::after {
    display: block; width: 20px; height: 2px; background: var(--roxo);
    border-radius: 2px; content: '';
  }
  .menu-risco { position: relative; }
  .menu-risco::before { position: absolute; top: -6px; }
  .menu-risco::after { position: absolute; top: 6px; }
  /* Aberto, os riscos viram X — o mesmo botão fecha. */
  .menu-sanfona[open] .menu-risco { background: transparent; }
  .menu-sanfona[open] .menu-risco::before { top: 0; transform: rotate(45deg); }
  .menu-sanfona[open] .menu-risco::after { top: 0; transform: rotate(-45deg); }

  .topo-nav { row-gap: 8px; column-gap: 12px; padding: 4px 0 8px; }
  .nav-produtos { row-gap: 7px; }
  .nav-institucional { gap: 18px; }

  /* Logo e botão de orçamento na MESMA linha, sempre visíveis: é o que o
     visitante precisa ter à mão sem abrir nada. */
  .topo-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .topo-topo .logo { font-size: 23px; letter-spacing: 1.5px; }
  .topo-topo .logo span { font-size: 8.5px; letter-spacing: 1.6px; }
  .nav-cta { padding: 8px 14px 8px 11px; font-size: 12px; }

  /* A caixa da busca aberta ocupa a LARGURA DA PÁGINA, não a sobra à direita
     da lupa. Pendurada na lupa (`right: 0`), ela media 351px num vão de 200 e
     saía pela esquerda da tela — o cliente via meio campo e o botão cortado.
     Soltando a `.busca-topo` (`position: static`), o ancoradouro passa a ser a
     linha do topo, e aí `left`/`right` valem contra a largura toda. */
  .topo-linha { position: relative; }
  .busca-topo { position: static; }
  .busca-topo > form { left: 4px; right: 4px; top: 56px; }
  .busca-topo input { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* ------------------------------------------------- navegação entre linhas */
.outras-categorias { margin: 40px 0 8px; }
.outras-categorias h2 { font-size: 20px; margin-bottom: 12px; }
.outras-categorias ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.outras-categorias a {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--roxo-claro);
  border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--roxo);
}
.outras-categorias a:hover { background: var(--roxo-claro); }

/* ---------------------------------------------------------------- hero */
.hero { color: var(--branco); padding: 56px 0; }
.hero h1 { font-size: clamp(34px, 5.5vw, 54px); font-weight: 700; text-transform: uppercase; }
.hero p { margin-top: 12px; font-size: 17px; opacity: .92; }

/* Limite da categoria: o que a Gratifike NÃO faz, dito na entrada. Fica com
   cara de aviso útil, não de letra miúda — é informação que evita o cliente
   pedir orçamento de fachada e descobrir depois. */
.cat-limite {
  margin: 16px 0 4px; padding: 12px 16px; border-radius: 10px;
  background: var(--roxo-claro); border-left: 4px solid var(--roxo);
  font-size: 15.5px; line-height: 1.5; max-width: 68ch;
}
.cat-limite strong { color: var(--roxo-escuro); }
.cat-limite span { color: var(--tinta); }

/* CABEÇALHO DA CATEGORIA — curto de propósito *(ordem do chefe, 31/08/2026)*.
   A linha de apoio é UMA só; o texto inteiro vive em `.cat-texto`, depois da
   grade. O objetivo é medido: os dois primeiros produtos têm que aparecer
   logo abaixo do cabeçalho, sem rolagem longa, em 360 e 390px. */
.cat-resumo { margin-bottom: 4px; }
/* Texto de apoio no FIM da página: mesmo conteúdo, peso de leitura menor. */
.cat-texto { margin: 40px 0 0; max-width: 70ch; }
.cat-texto h2 { font-size: 21px; color: var(--roxo-escuro); margin-bottom: 10px; }
.cat-texto p { color: #4a4457; line-height: 1.6; margin-bottom: 8px; }

@media (max-width: 700px) {
  /* Cada linha aqui é uma linha a menos antes do primeiro produto. */
  .pagina h1 { font-size: 25px; margin-bottom: 8px; }
  .migalha { margin: 10px 0; font-size: 12px; }
  .cat-resumo { font-size: 15.5px; }
  .cat-limite { margin: 12px 0 2px; padding: 10px 13px; font-size: 14.5px; }
  .cat-texto { margin-top: 30px; }
  .cat-texto h2 { font-size: 19px; }
}

/* Faixa promocional clicável, largura da página. O clique inteiro é o link —
   banner de campanha em que só uma parte clica frustra quem tentou. */
.promo-faixa { display: block; margin: 26px 0 6px; border-radius: 12px; overflow: hidden; }
.promo-faixa img { display: block; width: 100%; height: auto; }
.promo-faixa:hover { filter: brightness(1.04); }

/* ----------------------------------------------------------- categorias */
.categorias { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.cat-chip {
  background: var(--branco); border: 1.5px solid var(--roxo); color: var(--roxo);
  border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: 14px;
}
.cat-chip:hover { background: var(--roxo-claro); }
.cat-chip small { color: var(--cinza); font-weight: 400; }

.cat-titulo {
  margin: 34px 0 14px; font-size: 28px; text-transform: uppercase;
  color: var(--roxo-escuro); border-left: 6px solid var(--roxo); padding-left: 12px;
}

/* ---------------------------------------------------------------- grid */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 18px;
}
.card {
  background: var(--branco); border-radius: 10px; overflow: hidden;
  border: 1px solid #eee5f7; color: var(--tinta);
  transition: transform .12s ease, box-shadow .12s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(130, 10, 209, .14); }
.card-foto { aspect-ratio: 1; background: var(--roxo-claro); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  min-height: 180px;
}
.placeholder span {
  color: var(--branco); font-size: 13px; text-transform: uppercase;
  letter-spacing: 2px; font-weight: 600; opacity: .85;
}
/* vitrines: banners clicáveis que levam ao grupo de produtos */
.vitrines {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 28px 0 8px;
}
.vitrine { display: block; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(130, 10, 209, .15);
  transition: transform .12s ease, box-shadow .12s ease; }
.vitrine:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(130, 10, 209, .3); }
/* height:auto e obrigatorio quando o <img> declara width/height, senao a
   altura fica travada e a imagem distorce (Lighthouse: aspect ratio). */
.vitrine img { width: 100%; height: auto; display: block; }

.card h3 { font-size: 19px; font-weight: 600; padding: 10px 12px 0; }
.card-preco { padding: 2px 12px; font-size: 14px; color: var(--cinza); }
.card-preco strong { color: var(--roxo); font-size: 19px; font-weight: 700; }
.card-min { padding: 0 12px 12px; font-size: 12.5px; color: var(--cinza); margin-top: auto; }

/* DOIS PRODUTOS POR LINHA NO CELULAR *(ordem do chefe, 31/08/2026)*.
   O `minmax(215px, 1fr)` precisa de 430px + o vão para abrir a segunda coluna,
   e a tela útil de um celular é de ~350px: dava UMA coluna, cada card com a
   largura inteira, e comparar produto virava rolagem sem fim. Com duas
   colunas o visitante vê quatro produtos de uma vez.
   `repeat(2, 1fr)` em vez de baixar o `minmax`: com auto-fill o card ficaria
   de larguras diferentes conforme a tela, e aqui a gente quer exatamente 2. */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* o texto tem que caber na metade da tela sem quebrar em cinco linhas */
  .card h3 { font-size: 15px; padding: 8px 9px 0; }
  .card-preco { padding: 2px 9px; font-size: 12px; }
  .card-preco strong { font-size: 15.5px; }
  .card-min { padding: 0 9px 10px; font-size: 11px; }
}

/* -------------------------------------------------------------- produto */
.migalha { margin: 18px 0; font-size: 14px; color: var(--cinza); }
/* SUBLINHADO obrigatório: o link da migalha é roxo dentro de texto cinza, e o
   contraste ENTRE as duas cores é de 1,26:1 — abaixo do mínimo de 3:1. Sem o
   sublinhado, quem não distingue bem cor não percebe que ali existe um link.
   Apontado pelo Lighthouse (`link-in-text-block`) e aprovado pelo chefe:
   sublinha, não mexe em cor nem em layout. */
.migalha a { text-decoration: underline; text-underline-offset: 2px; }
.produto-grid {
  display: grid; grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 34px; margin-bottom: 48px;
}
/* `min-width: 0` é o que deixa a coluna ENCOLHER. Item de grid nasce com
   `min-width: auto`, ou seja, nunca fica menor que o conteúdo mais largo dele —
   e a tabela comparada (4 colunas com `nowrap`) empurrava a coluna inteira para
   439px numa tela de 375. A página do calendário e a das 3 agendas eram as
   únicas do site que vazavam para a direita, e era por isto: a caixa de rolagem
   da tabela só funciona se a coluna que a contém puder encolher. */
.produto-grid > * { min-width: 0; }
@media (max-width: 760px) { .produto-grid { grid-template-columns: 1fr; } }
.produto-foto {
  background: var(--roxo-claro); border-radius: 12px; overflow: hidden; aspect-ratio: 1;
}
.produto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-info h1 { font-size: 34px; text-transform: uppercase; color: var(--roxo-escuro); }
.sku { color: var(--cinza); font-size: 13px; letter-spacing: 1px; margin: 4px 0 18px; }
.aviso-est {
  background: #fff3cd; border: 1px solid #ffe08a; border-radius: 6px;
  padding: 6px 12px; font-size: 14px; margin-bottom: 14px; display: inline-block;
}

.faixas { border-collapse: collapse; width: 100%; max-width: 420px; background: var(--branco); }
.faixas th {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 15px; background: var(--roxo); color: var(--branco);
  padding: 8px 14px; text-align: left;
}
.faixas td { padding: 8px 14px; border-bottom: 1px solid #eee5f7; font-size: 15px; }
.faixas tr.ativa td { background: var(--roxo-claro); font-weight: 600; color: var(--roxo-escuro); }

.produto-min { margin: 14px 0 22px; font-size: 15px; }

/* ------------------------------------------------- seletor de quantidade */
.calculo {
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 12px;
  padding: 18px 20px; max-width: 420px; margin-bottom: 22px;
}
.calculo label { font-weight: 600; font-size: 15px; }
.stepper { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.stepper button {
  width: 42px; height: 42px; font-size: 22px; font-weight: 700;
  background: var(--roxo-claro); color: var(--roxo); border: none;
  border-radius: 8px; cursor: pointer;
}
.stepper button:hover { background: var(--roxo); color: var(--branco); }
.stepper input {
  width: 90px; height: 42px; text-align: center; font-size: 18px; font-weight: 600;
  border: 1.5px solid var(--roxo); border-radius: 8px; color: var(--tinta);
  font-family: 'Barlow', sans-serif;
}
/* ------------------------------------------- condições de pagamento */
.pg-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 15px; color: var(--tinta); margin-top: 8px; }
.pg-icones { display: inline-flex; gap: 4px; color: var(--roxo); flex-shrink: 0; }
.pg-avista .pg-desconto { color: #1b7a3d; font-weight: 700; }
.pg-avista .pg-valor { color: #1b7a3d; font-size: 20px; font-weight: 700; }
.pg-cartao { color: var(--cinza); }
.pg-cartao strong { color: var(--tinta); }

.form-dica { font-size: 13.5px; color: var(--cinza); margin: 8px 0 2px; }

.qtd-livre { width: 110px; }
.qtd-un { font-size: 15px; color: var(--cinza); }
.stepper .qtd-mais {
  width: auto; padding: 0 12px; height: 38px; font-size: 15px; letter-spacing: .5px;
}
.totais { margin-top: 10px; border-top: 1px dashed #e2d5f2; padding-top: 12px; }
.linha-unit { font-size: 15px; color: var(--cinza); }
.linha-unit span { color: var(--roxo); font-weight: 700; font-size: 18px; }
.linha-total { font-size: 17px; margin-top: 4px; }
.linha-total strong { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; color: var(--roxo-escuro); }
.linha-parcela { font-size: 14.5px; color: var(--cinza); }
.linha-parcela strong { color: var(--tinta); }

.botao-zap {
  display: inline-block; background: var(--zap); color: var(--zap-tinta);
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 13px 30px; border-radius: 10px;
}
.botao-zap:hover { filter: brightness(.94); }

/* ------------------------------------------------- confiança / identidade */
.confianca { margin-top: 60px; background: var(--branco); border-top: 3px solid var(--roxo); }
.confianca-grid {
  display: grid; grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 36px; padding: 44px 20px; align-items: center;
}
@media (max-width: 760px) { .confianca-grid { grid-template-columns: 1fr; } }
.confianca-foto img { width: 100%; height: auto; border-radius: 14px; display: block;
  box-shadow: 0 10px 30px rgba(130, 10, 209, .18); }
.confianca-texto h2 { font-size: 34px; text-transform: uppercase; color: var(--roxo-escuro); }
.confianca-texto > p { margin: 12px 0 18px; max-width: 560px; }

.selos { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.selos li a, .selos li > span {
  display: block; background: var(--roxo-claro); border: 1.5px solid var(--roxo);
  border-radius: 10px; padding: 10px 16px; color: var(--tinta); line-height: 1.3;
  min-width: 150px;
}
.selos li a:hover { background: var(--roxo); color: var(--branco); }
.selos li a:hover small { color: var(--branco); }
.selos strong { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; color: inherit; }
.selos small { color: var(--cinza); font-size: 12.5px; }

.botao-secundario {
  display: inline-block; border: 2px solid var(--roxo); color: var(--roxo);
  font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; padding: 9px 24px; border-radius: 10px;
}
.botao-secundario:hover { background: var(--roxo); color: var(--branco); }

.selos-produto { margin-top: 16px; font-size: 13.5px; color: var(--cinza); }

.sobre-grid { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 30px; }
@media (max-width: 760px) { .sobre-grid { grid-template-columns: 1fr; } }
.sobre-foto { width: 100%; border-radius: 14px; display: block; }
.legenda { font-size: 13px; color: var(--cinza); margin-top: 6px; }
.sobre-grid p { margin-bottom: 10px; }

.contato-cartoes { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 24px; }
.contato-cartao {
  display: flex; flex-direction: column; gap: 2px; background: var(--branco);
  border: 1.5px solid var(--roxo); border-radius: 12px; padding: 16px 22px;
  color: var(--tinta); min-width: 210px;
}
.contato-cartao:hover { background: var(--roxo-claro); }
.contato-cartao strong { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; color: var(--roxo); }
.contato-cartao small { color: var(--cinza); }

/* -------------------------------------------------------------- rodapé */
.rodape {
  margin-top: 56px; padding: 34px 0; color: var(--branco);
  background-color: var(--tinta);
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .07) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  font-size: 14px;
}
.rodape-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.rodape p { margin-bottom: 4px; }
.rodape a { color: #d9b8f5; }
.rodape a:hover { color: var(--branco); }
.rodape-titulo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 19px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--branco); margin-bottom: 8px;
}

.zap-flutuante {
  position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px;
  background: var(--zap); color: var(--zap-tinta); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); z-index: 50;
}
/* O rótulo só existe no modo BARRA (abaixo). No círculo, quem diz o que ele é
   é o `aria-label`. */
.zap-rotulo { display: none; }
/* O fim da página tem que LIVRAR o botão: sem esta folga a última linha do
   rodapé fica embaixo dele para sempre, e aí não é "passou por cima ao rolar",
   é conteúdo escondido. */
body { padding-bottom: 84px; }

/* BOTÃO DE WHATSAPP: BARRA em tela estreita, círculo só onde SOBRA margem
   *(ordem do chefe, 31/08/2026: "corrigir de vez, em todas as páginas")*.
   Encolher o círculo (a tentativa anterior) baixou de 39 para 31 as posições
   de rolagem com texto embaixo dele — melhorou, não resolveu, e ele reportou
   de novo. A conta explica por quê: o conteúdo trava em 1100px e o círculo
   ocupa os 76px da direita (56 do botão + 20 de folga), então só existe
   margem livre a partir de 1100 + 2x76 = 1252px de janela. Abaixo disso ele
   está NECESSARIAMENTE por cima da coluna de texto, e nenhum ajuste de
   posição resolve — é o que "flutuante" quer dizer.
   A barra colada no rodapé é lida como borda da tela, não como algo em cima
   da leitura, e o `padding-bottom` do body reserva a altura dela. De quebra
   ela ganha rótulo: o círculo dependia de o visitante reconhecer o ícone. */
@media (max-width: 1251px) {
  .zap-flutuante {
    left: 0; right: 0; bottom: 0; width: auto; height: 52px;
    border-radius: 0; gap: 9px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .8px;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .18);
  }
  .zap-rotulo { display: inline; }
  .zap-flutuante svg { width: 26px; height: 26px; }
  body { padding-bottom: 52px; }
}

.erro404 { padding: 80px 20px; text-align: center; }

/* ------------------------------- tabela de faixas comparada (3 tamanhos) */

/* A tabela pode ganhar 3 ou 4 colunas de preço: rola dentro do próprio box,
   nunca faz a PÁGINA rolar de lado. */
.faixas-rolagem { overflow-x: auto; margin-bottom: 4px; }
.faixas-comparada { min-width: 100%; }
.faixas-comparada th, .faixas-comparada td { text-align: right; white-space: nowrap; }
.faixas-comparada th:first-child, .faixas-comparada .col-qtd { text-align: left; }
/* Coluna do tamanho escolhido: acesa. As outras continuam legíveis —
   comparar os formatos é a decisão desta página, não um detalhe. */
.faixas-comparada .ativa-col { background: var(--roxo-claro); font-weight: 600; }
.faixas-comparada thead .ativa-col { background: var(--roxo-escuro); }
/* Traço da tiragem que aquele tamanho não tem (a Mini começa em 30). */
.faixas-comparada .vazia { color: var(--cinza); font-weight: 400; }

/* Seletor de tamanho e atalho na mesma linha; empilham no celular. */
.linha-opcao { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.campo-opcao { display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; justify-content: flex-end; }
.campo-opcao label { margin: 0; }
/* O bloco de preço tem largura fixa (~420px), então o rótulo inteiro do chefe
   não cabe numa linha ao lado do seletor. O botão quebra em duas linhas em vez
   de descer para baixo do seletor — "ao lado" foi o pedido. */
.linha-opcao .botao-atalho {
  flex: 0 1 195px; padding: 9px 14px; font-size: 14px; line-height: 1.2;
  white-space: normal; display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------- opcionais e atalho do produto */

/* BOTÃO DE ATALHO para outro anúncio (a agenda 15x21, que é a mais vendida e
   mora em página própria). Roxo cheio, do tamanho de um CTA de verdade: o
   chefe pediu visível, e link discreto aqui perderia a venda de quem já sabe
   o que quer. Não usa as cores do par Maria/JOE — aquela exceção é só deles. */
.atalho-produto { margin: 14px 0 18px; }
.botao-atalho {
  display: inline-block; background: var(--roxo); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  padding: 13px 22px; border-radius: 10px; text-align: center;
}
.botao-atalho:hover { background: var(--roxo-escuro); color: #fff; }

/* OPCIONAIS: bloco secundário de propósito — menor e cinza, para não competir
   com o preço nem com o CTA. É acréscimo que o cliente escolhe, não etapa. */
.adicionais {
  border: 1px solid #e9e5f0; border-radius: 12px;
  padding: 12px 14px 10px; margin: 16px 0 4px; background: #fff;
}
.adicionais legend { font-size: 14px; font-weight: 600; color: var(--cinza); padding: 0 6px; }
.adicionais legend small { font-weight: 400; }
.adicional {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; padding: 5px 2px; cursor: pointer;
}
.adicional input { width: 17px; height: 17px; accent-color: var(--roxo); cursor: pointer; }
/* Linha do "com opcionais": mesmo peso das outras linhas do bloco de preço,
   entre o unitário e o total. É ela que faz a conta fechar para quem lê. */
.linha-adicionais { margin: 2px 0 6px; font-size: 15px; line-height: 1.45; }
.linha-adicionais strong { color: var(--roxo); font-size: 17px; }
.linha-adicionais .add-detalhe { font-size: 13px; color: var(--cinza); }

.adicional-nome small { display: block; font-size: 12.5px; color: var(--cinza); line-height: 1.35; }
.adicional-preco { margin-left: auto; font-size: 13px; color: var(--cinza); white-space: nowrap; }
/* o nome sobe para o topo quando tem a nota embaixo */
.adicional:has(.adicional-nome small) { align-items: flex-start; }
.adicional:has(.adicional-nome small) input,
.adicional:has(.adicional-nome small) .adicional-preco { margin-top: 2px; }

/* ------------------------------------------------------ página estática */
/* `padding` INTEIRO aqui zerava o "0 20px" do `.container` — as duas classes
   têm a mesma especificidade e `.pagina` vem depois, então ela vencia. No
   desktop ninguém via (a janela é mais larga que o max-width e sobra folga);
   no celular o texto encostava na borda e as palavras apareciam cortadas.
   Só as medidas verticais são desta classe; a lateral é do `.container`. */
.pagina { padding-top: 30px; padding-bottom: 10px; max-width: 720px; }
.pagina h1 { font-size: 34px; color: var(--roxo-escuro); text-transform: uppercase; margin-bottom: 14px; }

/* -------------------------------------------------- políticas (documentos)
   As classes `politica-*` já eram usadas pela política de vendas, mas nunca
   tinham estilo: com o reset global (`* { margin:0; padding:0 }`) os parágrafos
   saíam colados uns nos outros e a <ul> ficava sem marcador nem recuo — parede
   de texto justamente na página onde o cliente precisa achar UMA cláusula.
   Serve às duas políticas; classe nova aqui vale para as duas. */
.politica-empresa { color: var(--tinta); margin-bottom: 2px; }
.politica-data { font-size: 14px; color: var(--cinza); margin-bottom: 18px; }
.politica-abre { line-height: 1.6; margin-bottom: 22px; max-width: 68ch; }

.politica-indice { background: var(--roxo-claro); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 30px; }
.politica-indice ol { margin: 0; padding-left: 20px; }
.politica-indice li { margin: 3px 0; font-size: 15px; }

.politica-secao { margin-bottom: 30px; scroll-margin-top: 20px; }
.politica-secao h2 { font-size: 24px; color: var(--roxo-escuro); margin-bottom: 8px; }
.politica-secao p { line-height: 1.6; margin-bottom: 10px; max-width: 68ch; }

.politica-lista { margin: 4px 0 12px; padding-left: 22px; max-width: 68ch; }
.politica-lista li { line-height: 1.55; margin-bottom: 5px; }

.politica-rodape { margin: 34px 0 10px; padding-top: 16px;
  border-top: 1px solid #e9e5f0; font-size: 14px; color: var(--cinza); line-height: 1.6; }

/* ============ camada SEO/GEO: FAQ, blog, nichos, depoimentos ============ */
.faq{margin:48px 0 8px}
.faq h2{font-family:'Barlow Condensed',sans-serif;font-size:30px;margin-bottom:14px}
.faq-lista{display:grid;gap:8px}
.faq-item{border:1px solid var(--linha,#e4d2f7);border-radius:12px;background:#fff}
.faq-item summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';float:right;color:#820AD1;font-weight:700}
.faq-item[open] summary::after{content:'–'}
.faq-resp{padding:0 18px 16px;color:#4a4457;line-height:1.55}
.faq-pendente{border-style:dashed;border-color:#b45309}
.aviso-chefe{background:#fdf3e6;border:1px dashed #b45309;color:#8a4b06;
  padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5}

.resposta-direta{font-size:17px;line-height:1.55;color:#3a3448;margin:6px 0 12px}
.chamada{font-size:17px;color:#4a4457;line-height:1.55;max-width:70ch}

.post-lista{list-style:none;padding:0;display:grid;gap:26px;margin-top:22px}
.post-item h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;line-height:1.15}
.post-item h2 a{color:#1c1726;text-decoration:none}
.post-item h2 a:hover{color:#820AD1}
.post-data{font-size:13px;color:#8b8496;margin:2px 0 6px}
.post-tags a{font-size:13px;color:#820AD1;text-decoration:none;margin-right:6px}
.post-corpo{line-height:1.65;max-width:72ch}
.post-corpo h2{font-family:'Barlow Condensed',sans-serif;font-size:28px;margin:30px 0 10px}
.post-corpo p{margin:12px 0}
.post-resumo{font-size:18px;color:#3a3448;line-height:1.55;margin:10px 0 20px;
  padding-left:14px;border-left:3px solid #820AD1}
.paginacao{display:flex;gap:16px;align-items:center;margin:32px 0;font-size:14px}
.paginacao a{color:#820AD1;text-decoration:none;font-weight:600}
.tags-todas{margin-top:40px;padding-top:20px;border-top:1px solid #e9e5f0}

.cta-zap{margin:44px 0 8px;padding:26px;border-radius:14px;
  background:linear-gradient(110deg,#5B1A7A,#820AD1);color:#fff}
.cta-zap h2{font-family:'Barlow Condensed',sans-serif;font-size:28px;margin-bottom:6px}
.cta-zap p{opacity:.92;margin-bottom:14px}
.btn-zap{display:inline-block;background:#fff;color:#820AD1;font-weight:700;
  padding:12px 22px;border-radius:10px;text-decoration:none}

.historia{margin:44px 0;max-width:74ch}
.historia h2{font-family:'Barlow Condensed',sans-serif;font-size:30px;margin-bottom:10px}
.historia p{line-height:1.65;margin:10px 0}

.depo-lista{list-style:none;padding:0;display:grid;gap:20px;margin-top:20px}
.depo{border:1px solid #e9e5f0;border-radius:12px;padding:18px;background:#fff}
.depo blockquote{margin:0 0 8px;font-size:16px;line-height:1.6;color:#3a3448}
.depo-nota{color:#b45309;font-weight:700;margin-bottom:6px}
.depo-autor{font-size:14px;color:#6b6478}
.vazio{color:#8b8496;font-style:italic}
.filtro-tag{font-size:14px;color:#6b6478}

/* qualquer <img> com width/height declarados mantem a proporcao */
img[width][height]{max-width:100%}
.sobre-foto{width:100%;height:auto}

/* ------------------------------------------------ leva de produtos da LI */
.galeria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.galeria-item {
  padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: var(--branco); cursor: pointer; line-height: 0;
}
.galeria-item img { width: 90px; height: auto; display: block; }
.galeria-item.ativa, .galeria-item:hover { border-color: var(--roxo); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.etiqueta {
  background: var(--roxo-claro); color: var(--roxo-escuro); border-radius: 999px;
  padding: 3px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
}

.sob-consulta {
  background: var(--roxo-claro); border: 1.5px solid var(--roxo);
  border-radius: 12px; padding: 16px 20px; max-width: 420px; margin-bottom: 20px;
}
.sob-consulta-titulo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700;
  color: var(--roxo-escuro); text-transform: uppercase; margin-bottom: 4px;
}
.sob-consulta p { font-size: 14.5px; }

.especificacoes { margin: 10px auto 0; max-width: 1100px; }
.especificacoes h2 {
  font-size: 26px; text-transform: uppercase; color: var(--roxo-escuro);
  border-left: 6px solid var(--roxo); padding-left: 12px; margin-bottom: 12px;
}
.especificacoes ul { list-style: none; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.especificacoes li {
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 8px;
  padding: 9px 14px; font-size: 14.5px;
}

.ver-tambem { margin-top: 18px; font-size: 15px; }
.ver-tambem a { font-weight: 600; }

.familia-linha { color: var(--cinza); margin: -6px 0 14px; max-width: 640px; }

/* faixa de entrada: presente pro cliente achar, mas sem competir com o topo */
.entrada { margin-top: 40px; padding-top: 22px; border-top: 1px dashed #e2d5f2; }
.entrada-titulo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--cinza);
}
.entrada-linha { color: var(--cinza); font-size: 14px; margin-bottom: 12px; max-width: 620px; }
.grid-compacto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card-compacto h3 { font-size: 15.5px; padding: 8px 10px 0; }
.card-compacto .card-preco { padding: 0 10px 10px; font-size: 13px; }
.card-compacto .card-preco strong { font-size: 15.5px; }
.segmento { margin-top: 8px; }
.segmento-link { margin-top: 10px; font-size: 15px; font-weight: 600; }

/* selo de envio: caminhão + caixa antes do texto */
.selo-envio { display: inline-flex; align-items: center; gap: 5px; }
.ico-envio { color: var(--roxo); flex: none; vertical-align: middle; }
.ico-envio + .ico-envio { margin-right: 3px; }

/* ---------------------------------------- espinha da home (problema→CTA) */
.problema { background: var(--branco); border-bottom: 1px solid #eee5f7; }
.problema p {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 600; color: var(--roxo-escuro); padding: 18px 0; text-align: center;
}

.porques { padding: 34px 0 6px; }
.porques h2 {
  font-size: 30px; text-transform: uppercase; color: var(--roxo-escuro);
  border-left: 6px solid var(--roxo); padding-left: 12px; margin-bottom: 18px;
}
.porques-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.porque {
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 12px; padding: 18px 20px;
  border-top: 4px solid var(--roxo);
}
.porque h3 { font-size: 21px; color: var(--roxo-escuro); margin-bottom: 6px; }
.porque p { font-size: 15px; }
/* No desktop o cartão já se explica sozinho — o ícone só existe para o celular. */
.porque-icone { display: none; }

@media (max-width: 700px) {
  /* TRÊS LINHAS, sem moldura *(pedido do chefe, 31/08/2026)*. Os cartões
     ocupavam quase duas telas e eram o primeiro conteúdo depois do hero: o
     visitante rolava muito antes de ver produto nenhum.
     É a MOLDURA que come espaço, não o texto — some a caixa, a borda, a sombra
     e a barra roxa do topo, e entra um ícone à esquerda para a linha continuar
     tendo cara de item e não de parágrafo solto. */
  .porques { padding-top: 26px; }
  .porques-grid { gap: 16px; }
  .porque {
    display: flex; gap: 12px; align-items: flex-start;
    background: none; border: 0; border-top: 0; border-radius: 0; padding: 0;
  }
  .porque-icone { display: block; color: var(--roxo); flex: none; margin-top: 2px; }
  .porque-texto { min-width: 0; }
  .porque h3 { font-size: 18px; margin-bottom: 2px; }
  .porque p { font-size: 14.5px; line-height: 1.45; }
}

.passos { background: var(--branco); border-top: 1px solid #eee5f7; padding: 34px 0; margin-top: 40px; }
.passos h2 {
  font-size: 30px; text-transform: uppercase; color: var(--roxo-escuro);
  border-left: 6px solid var(--roxo); padding-left: 12px; margin-bottom: 18px;
}
.passos-grid {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.passo { position: relative; padding-left: 52px; }
.passo-n {
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--roxo); color: var(--branco); display: flex; align-items: center;
  justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 21px; font-weight: 700;
}
.passo h3 { font-size: 20px; color: var(--roxo-escuro); }
.passo p { font-size: 15px; }

.cta-final { text-align: center; padding: 44px 0; }
.cta-final h2 { font-size: clamp(26px, 4vw, 38px); text-transform: uppercase; color: var(--roxo-escuro); }
.cta-final > .container > p { margin: 10px 0 18px; font-size: 16.5px; }
.cta-final-obs { color: var(--cinza); font-size: 14px; margin-top: 12px !important; }
.rodape-assinatura { margin-top: 8px; color: #d9b8f5; }

/* ------------------------------------------- formulário de orçamento + CTAs */
.form-orcamento {
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 12px;
  padding: 18px 20px; max-width: 460px; margin-bottom: 18px;
}
.form-titulo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700;
  text-transform: uppercase; color: var(--roxo-escuro); margin-bottom: 10px;
}
.form-linha { margin-bottom: 10px; }
.form-linha label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.form-linha input {
  width: 100%; height: 42px; padding: 0 12px; font-size: 16px;
  font-family: 'Barlow', sans-serif; color: var(--tinta);
  border: 1.5px solid #ddd0ee; border-radius: 8px; background: var(--fundo);
}
.form-linha input:focus { outline: none; border-color: var(--roxo); background: var(--branco); }
.form-aviso { color: #b00020; font-size: 13.5px; margin: 2px 0 8px; }
.form-obs { color: var(--cinza); font-size: 12.5px; margin-top: 10px; }

/* EXCEÇÃO de cor aprovada pelo chefe: só este par de CTAs foge do roxo único.
   Verde = WhatsApp da Maria (humano). Azul = JOE, o atendimento por IA. */
.ctas { display: grid; gap: 10px; margin-top: 12px; }
.botao-zap { text-align: center; }
.cta-maria { background: var(--zap); }
.cta-maria:hover { filter: brightness(.94); }
.cta-joe {
  background: #1d6ff2; display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; flex-wrap: wrap;
}
.cta-joe:hover { filter: brightness(.94); }
.badge-ia {
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px; padding: 1px 10px; font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
}
.stepper select {
  height: 42px; padding: 0 10px; font-size: 16px; font-weight: 600;
  font-family: 'Barlow', sans-serif; color: var(--tinta);
  border: 1.5px solid var(--roxo); border-radius: 8px; background: var(--branco);
}

/* ------------------------------------------ calculadora de grande formato */
.gf-abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin: 26px 0 8px; }
.gf-aba {
  text-align: left; background: var(--branco); border: 1.5px solid #eee5f7;
  border-top: 4px solid #eee5f7; border-radius: 12px; padding: 14px 16px; cursor: pointer;
  font-family: 'Barlow', sans-serif; color: var(--tinta);
}
.gf-aba strong { display: block; font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; color: var(--roxo-escuro); }
.gf-aba small { color: var(--cinza); font-size: 13.5px; line-height: 1.35; display: block; margin-top: 3px; }
.gf-aba:hover { border-color: var(--roxo); }
.gf-aba.ativa { border-color: var(--roxo); border-top-color: var(--roxo); background: var(--roxo-claro); }

.gf-painel { display: none; }
.gf-painel.ativo { display: block; }
.gf-aviso {
  background: #fff3cd; border: 1px solid #ffe08a; border-radius: 8px;
  padding: 10px 14px; font-size: 15px; margin-bottom: 16px;
}
.gf-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 20px; align-items: start; margin-bottom: 30px; }
@media (max-width: 760px) { .gf-grid { grid-template-columns: 1fr; } }
.gf-form, .gf-resultado {
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 12px; padding: 18px 20px;
}
.gf-form select, .gf-form input {
  width: 100%; height: 42px; padding: 0 10px; font-size: 16px;
  font-family: 'Barlow', sans-serif; color: var(--tinta);
  border: 1.5px solid #ddd0ee; border-radius: 8px; background: var(--fundo);
}
.gf-form select:focus, .gf-form input:focus { outline: none; border-color: var(--roxo); background: var(--branco); }
.gf-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gf-obs { color: var(--cinza); font-size: 13px; margin-top: 10px; }

.gf-detalhe { color: var(--cinza); font-size: 14px; min-height: 20px; }
.gf-total-rotulo { font-size: 14px; color: var(--cinza); margin-top: 6px; }
.gf-total { font-family: 'Barlow Condensed', sans-serif; font-size: 42px; font-weight: 700;
  color: var(--roxo-escuro); line-height: 1.1; }
.gf-unit { color: var(--cinza); font-size: 14.5px; margin-bottom: 12px; }
.gf-orcamento {
  background: var(--roxo-claro); border: 1.5px solid var(--roxo); border-radius: 8px;
  padding: 10px 14px; font-size: 14.5px; margin: 8px 0 12px;
}

.gf-frete {
  background: var(--roxo-claro); border-left: 4px solid var(--roxo); border-radius: 6px;
  padding: 8px 12px; font-size: 14px; margin: 4px 0 12px;
}

/* --------------------------------------------- avaliações do Google (prova social) */
.aval-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin: 18px 0; }
.aval-card {
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 12px;
  padding: 18px 20px; margin: 0; display: flex; flex-direction: column; gap: 8px;
}
.aval-card.oculto { display: none; }
.aval-topo { display: flex; align-items: center; gap: 10px; }
.aval-foto { border-radius: 50%; display: block; }
.aval-inicial {
  width: 44px; height: 44px; border-radius: 50%; background: var(--roxo);
  color: var(--branco); display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; flex: none;
}
.aval-autor { font-weight: 600; font-size: 15.5px; }
.aval-estrelas { color: #f5a623; font-size: 15px; letter-spacing: 1px; line-height: 1; }
/* pre-line preserva a quebra de linha que o cliente escreveu, sem deixar HTML passar */
.aval-texto { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.aval-truncado { color: var(--cinza); }
.aval-rodape { font-size: 13px; color: var(--cinza); margin-top: auto; }
.aval-rodape a { font-weight: 600; }
.aval-cta { margin-top: 18px; }
.aval-bloco { background: var(--branco); border-top: 1px solid #eee5f7; padding: 34px 0; }
.aval-bloco h2 { font-size: 30px; text-transform: uppercase; color: var(--roxo-escuro);
  border-left: 6px solid var(--roxo); padding-left: 12px; margin-bottom: 6px; }
.aval-bloco .familia-linha { margin-bottom: 14px; }

/* na página de produto o bloco vem logo depois do CTA, antes da ficha técnica */
.aval-produto { margin-top: 8px; border-top: none; padding-top: 0; }

.var-opcao { width: 100%; max-width: 260px; height: 42px; padding: 0 10px; font-size: 16px;
  font-family: 'Barlow', sans-serif; border: 1.5px solid var(--roxo); border-radius: 8px;
  background: var(--branco); color: var(--tinta); margin: 6px 0 12px; display: block; }

/* ------------------------------------------------------ hero com banner */
/* ------------------------------------------------------------------ HERO
   O BANNER é imagem, como o chefe decidiu — a reconstrução em HTML
   desconfigurou o recorte no celular. O texto vive FORA dela, logo abaixo:
   a arte dá o contexto visual, e o H1 de verdade fica legível para gente,
   para o Google e para as IAs. Texto dentro do PNG ninguém lê. */
.hero-banner { background: var(--roxo-escuro); padding: 0; }
.hero-banner .container { padding: 0 20px; }
.hero-banner img { display: block; width: 100%; height: auto; max-width: 1060px; margin: 0 auto; }

/* Continuação do banner, não concorrente: fundo do site, centralizado, com
   respiro. Sem cor de fundo própria para não disputar atenção com a arte. */
.hero-texto { background: var(--branco); }
.hero-texto .container {
  max-width: 720px; text-align: center;
  padding-top: 34px; padding-bottom: 30px;
}
.hero-texto h1 {
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.06; color: var(--roxo-escuro);
  text-transform: uppercase; text-wrap: balance; margin: 0;
}
.hero-sub {
  font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.5; color: var(--tinta);
  margin: 14px auto 0; max-width: 52ch;
}
.hero-sub strong { color: var(--roxo-escuro); }
/* Verde do WhatsApp, a mesma exceção de cor da Maria (regra 35): é o mesmo
   destino, e o cliente reconhece o botão antes de ler. */
.hero-cta { display: inline-block; margin-top: 20px; font-size: 16px; padding: 14px 28px; }
/* A Maria sai do rótulo do botão e fica aqui — o botão diz o que ACONTECE ao
   clicar, e o nome dela mantém o calor humano logo embaixo. */
.hero-apoio { margin-top: 11px; font-size: 14px; color: var(--cinza); }

@media (max-width: 700px) {
  /* O banner tem texto miúdo dentro da arte: no celular ele vai de borda a
     borda, que é o pouco de largura que ainda deixa esse texto legível. */
  .hero-banner .container { padding: 0; }
  .hero-texto .container { padding-top: 24px; padding-bottom: 22px; }
  .hero-sub { margin-top: 11px; }
  .hero-cta { margin-top: 16px; width: 100%; text-align: center; }
}

/* fora da tela, mas lido por leitor de tela e pelo buscador */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------- faixa da equipe */
.equipe { background: var(--branco); border-top: 1px solid #eee5f7; padding: 34px 0; }
.equipe h2 { font-size: 30px; text-transform: uppercase; color: var(--roxo-escuro);
  border-left: 6px solid var(--roxo); padding-left: 12px; margin-bottom: 6px; }
.equipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-top: 14px; }
.equipe-card { margin: 0; background: var(--fundo); border-radius: 12px; overflow: hidden;
  border: 1px solid #eee5f7; }
/* ALTURA PROPORCIONAL À LARGURA, não fixa. Com `height: 260px` o cartão virava
   paisagem no celular (334 de largura por 260 de altura) e o corte comia a
   cabeça de quem estava na foto — todas as fotos da equipe são verticais.
   Com `aspect-ratio` o recorte acompanha a coluna e continua retrato. */
.equipe-card img { width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; display: block; }
.equipe-card figcaption { padding: 10px 12px; }
/* No celular a faixa vira DUAS colunas. Com uma só, cada cartão ficava com a
   largura inteira da tela e a foto vertical dentro dele ficava enorme —
   rolagem sem fim para ver a equipe. */
@media (max-width: 560px) {
  .equipe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .equipe-card figcaption { padding: 8px 10px; }
  .equipe-card strong { font-size: 17px; }
  .equipe-card span { font-size: 12.5px; }
}
.equipe-card strong { display: block; font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; color: var(--roxo-escuro); }
.equipe-card span { font-size: 13.5px; color: var(--cinza); }

/* ----------------------------------------------------- bolha de vídeo */
/* Canto INFERIOR ESQUERDO: o direito é do botão de WhatsApp e não se invade.
   Formato story 9:16, nunca redondo. */
.vb {
  position: fixed; left: 18px; bottom: 18px; z-index: 60;
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.vb-visivel { opacity: 1; transform: translateY(0); }
/* encostou no preço ou no formulário: sai da frente sem sumir de vez */
.vb.vb-recuada { opacity: 0; transform: translateY(10px); pointer-events: none; }
.vb-bolha {
  position: relative; width: 110px; height: 195px;      /* 9:16 */
  border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--roxo); background: var(--roxo-escuro);
  box-shadow: 0 6px 22px rgba(45, 5, 70, .34);
}
.vb-bolha:focus-visible { outline: 3px solid var(--roxo); outline-offset: 3px; }
.vb-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* X no canto superior ESQUERDO da bolha, com área de toque de 32px */
.vb-x {
  position: absolute; top: 4px; left: 4px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(20, 2, 32, .62); color: #fff;
}
.vb-x:hover { background: rgba(20, 2, 32, .86); }

/* ------------------------------------------------------ vídeo expandido */
.vb-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 2, 30, .82); padding: 20px;
  opacity: 0; transition: opacity .22s ease;
}
/* `display:flex` vence o atributo `hidden`: sem esta linha o overlay fica
   invisível MAS por cima da página inteira, comendo todo clique. */
.vb-modal[hidden] { display: none; }
.vb-modal.vb-visivel { opacity: 1; }
.vb-modal-caixa { position: relative; max-width: min(92vw, 420px); }
.vb-modal-video {
  width: 100%; max-height: 82vh; display: block;
  border-radius: 14px; background: #000;
}
.vb-modal-x, .vb-play {
  position: absolute; width: 42px; height: 42px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 50%; background: rgba(20, 2, 32, .68); color: #fff;
}
.vb-modal-x { top: -52px; right: 0; }
.vb-play { bottom: 12px; left: 12px; }
.vb-modal-x:hover, .vb-play:hover { background: var(--roxo); }
body.vb-travado { overflow: hidden; }

@media (max-width: 700px) {
  /* tela pequena: bolha menor e mais colada no canto, longe do conteúdo */
  .vb { left: 12px; }
  .vb-bolha { width: 90px; height: 160px; }
  .vb-modal-x { top: -50px; }
}

/* Onde o WhatsApp vira BARRA, a bolha sobe: ela mora no canto inferior
   esquerdo e ficaria metade escondida atrás da barra. Depois do bloco de
   700px de propósito — este tem que vencer o `bottom` de lá. */
@media (max-width: 1251px) {
  .vb { bottom: 64px; }
}

/* quem pediu menos animação no sistema não leva fade nenhum */
@media (prefers-reduced-motion: reduce) {
  .vb, .vb-modal { transition: none; }
  .vb { transform: none; }
}

/* --------------------------------------------------- saiu na imprensa */
.imprensa {
  margin: 26px 0 0; padding: 18px 20px; border-radius: 12px;
  background: var(--roxo-claro); border-left: 6px solid var(--roxo);
}

/* Os fundadores, logo depois da matéria. Foto larga (4:3), sem quadrar —
   é foto de gente, e a regra 24 vale aqui igual. */
.fundadores { margin: 26px 0 0; }
.fundadores img {
  display: block; width: 100%; height: auto; max-width: 620px;
  border-radius: 12px;
}
.fundadores figcaption {
  margin-top: 8px; font-size: 14px; color: var(--cinza); max-width: 620px;
}
.imprensa-selo {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 700; font-size: 13px; color: var(--roxo);
  margin: 0 0 6px;
}
.imprensa blockquote { margin: 0; }
.imprensa blockquote p {
  font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--roxo-escuro);
}
.imprensa-credito { font-size: 14px; color: var(--cinza); margin-top: 8px; }
.imprensa-credito cite { font-style: normal; font-weight: 700; color: var(--tinta); }
.imprensa-link { font-weight: 600; }


/* ------------------------------- DTF: padrão, atalhos e serviços da arte */
.gf-padrao {
  background: var(--branco); border: 1.5px solid #e2d5f2; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
.gf-padrao-titulo { font-weight: 700; color: var(--roxo-escuro); margin-bottom: 2px; }
.gf-padrao p { font-size: 14.5px; color: var(--cinza); }

.gf-atalhos { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gf-atalho {
  flex: 1 1 120px; min-height: 56px; cursor: pointer; padding: 8px 14px;
  background: var(--branco); border: 2px solid var(--roxo); border-radius: 10px;
  color: var(--roxo-escuro); font-family: 'Barlow', sans-serif; text-align: left;
}
.gf-atalho strong { display: block; font-size: 20px; font-family: 'Barlow Condensed', sans-serif; }
.gf-atalho span { font-size: 13px; color: var(--cinza); }
.gf-atalho:hover, .gf-atalho.ativo { background: var(--roxo); color: var(--branco); }
.gf-atalho.ativo span, .gf-atalho:hover span { color: rgba(255, 255, 255, .85); }

/* fica DEPOIS do resultado: o cliente vê o preço da impressão primeiro e só
   então decide sobre a arte — o total se atualiza na hora */
.gf-adicionais {
  border: none; margin: 0 0 30px; padding: 18px 20px;
  background: var(--branco); border: 1px solid #eee5f7; border-radius: 12px;
}
.gf-adicionais legend {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; color: var(--roxo); font-size: 14px;
  padding: 0; margin-bottom: 8px;
}
.gf-adicional {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  background: var(--branco); border: 1.5px solid #e2d5f2; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.gf-adicional:has(input:checked) { border-color: var(--roxo); background: var(--roxo-claro); }
.gf-adicional input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--roxo); flex-shrink: 0; }
.gf-adicional strong { color: var(--roxo-escuro); }
.gf-adicional em { font-style: normal; font-weight: 700; color: var(--roxo); margin-left: 6px; }
.gf-adicional small { display: block; font-size: 13px; color: var(--cinza); margin-top: 3px; line-height: 1.35; }
.gf-adicional .gf-ressalva { font-weight: 600; color: var(--tinta); }

.gf-extras { font-size: 14px; color: var(--cinza); margin-top: 4px; }

.gf-titulo-livre {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; color: var(--roxo); font-size: 15px;
  margin-bottom: 8px;
}

/* ------------------------------- aviso de medida fora do rolo (DTF) */
.gf-alerta {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(18, 2, 30, .8); opacity: 0; transition: opacity .2s ease;
}
/* `display:flex` vence o atributo `hidden` — sem esta linha o aviso fica
   invisível por cima da página inteira e engole todo clique. */
.gf-alerta[hidden] { display: none; }
.gf-alerta.vb-visivel { opacity: 1; }
.gf-alerta-caixa {
  background: var(--branco); border-radius: 14px; padding: 24px;
  max-width: 460px; width: 100%; box-shadow: 0 18px 50px rgba(20, 2, 32, .4);
}
.gf-alerta-titulo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700;
  text-transform: uppercase; color: var(--roxo-escuro); line-height: 1.1;
}
.gf-alerta-texto { margin: 10px 0 18px; color: var(--tinta); font-size: 15.5px; }
.gf-alerta-ir {
  display: block; text-align: center; margin-bottom: 10px;
  background: var(--roxo); color: var(--branco); text-decoration: none;
  padding: 14px 18px; border-radius: 10px; font-weight: 700; font-size: 16.5px;
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .5px; transition: background .12s ease;
}
.gf-alerta-ir:hover { background: var(--roxo-escuro); color: var(--branco); }
.gf-alerta-voltar {
  display: block; width: 100%; padding: 10px; cursor: pointer;
  background: none; border: none; color: var(--cinza); font-size: 14.5px;
  font-family: 'Barlow', sans-serif; text-decoration: underline;
}
.gf-alerta-voltar:hover { color: var(--roxo); }

.gf-incluso { color: #1b7a3d !important; font-size: 14px; }

.gf-piso {
  background: #fff8e6; border-left: 4px solid #e8a300; border-radius: 6px;
  padding: 10px 12px; margin-top: 10px; font-size: 14.5px; color: var(--tinta);
}

.gf-rodape {
  text-align: center; font-weight: 600; color: var(--roxo-escuro);
  background: var(--roxo-claro); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 30px; font-size: 15.5px;
}

.gf-proxima {
  background: #eaf7ee; border-left: 4px solid #1b7a3d; border-radius: 6px;
  padding: 10px 12px; margin-top: 10px; font-size: 14.5px; color: var(--tinta);
}
.gf-proxima strong { color: #1b7a3d; }

/* ------------------------------------------------------------- /sobre */
.pilares { margin: 44px 0; }
.pilares-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 16px;
}
.pilar {
  background: var(--branco); border: 1px solid var(--roxo-claro);
  border-radius: 12px; padding: 20px 22px;
}
.pilar h3 { font-size: 19px; color: var(--roxo); margin-bottom: 8px; }
.pilar p { font-size: 15.5px; line-height: 1.55; }

/* Os três números de contagem ficam juntos; "Desde 2008" fica embaixo e
   separado de propósito — é data, não contagem. */
.numeros { margin: 44px 0; }
.numeros-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; text-align: center;
}
.numero {
  background: var(--roxo-claro); border-radius: 12px; padding: 22px 14px;
}
.numero strong {
  display: block; font-size: clamp(30px, 4.5vw, 42px); font-weight: 700;
  color: var(--roxo); line-height: 1.05;
}
.numero span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--cinza); }
/* selo do ano de fundação — vive na história, longe da faixa de números */
.selo-fundacao {
  display: inline-block; background: var(--roxo); color: var(--branco);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; font-size: 14px;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 10px;
}

.equipe-sobre { margin: 44px 0; }
.sobre-contato { margin: 44px 0 8px; }

/* parágrafos seguintes da descrição do produto (o 1º é .resposta-direta) */
.descricao-extra { margin-top: 10px; font-size: 15.5px; color: var(--cinza); line-height: 1.6; }

/* aviso da política no formulário: discreto e NÃO bloqueante — sem checkbox,
   sem pop-up, sem fricção antes do CTA */
.form-politica { margin-top: 4px; font-size: 12.5px; color: var(--cinza); line-height: 1.45; }
.form-politica a { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINA DE PRODUTO NO CELULAR: o PREÇO sobe *(chefe, 02/09/2026)*
   ═══════════════════════════════════════════════════════════════════════
   Medido antes: numa tela de 390x800, o bloco de preço aparecia entre
   1.379 e 1.665px — DUAS telas de rolagem. Quem chega de anúncio pago e
   precisa rolar duas vezes para ver quanto custa, some.

   O empilhamento era: foto (350) · miniaturas (138) · H1 · parágrafo ·
   SKU · tabela de faixas (281) · pedido mínimo · preço. Ou seja, 700px de
   coisa entre o benefício e o número.

   CONSERTO POR `order`, NÃO POR HTML DUPLICADO. A regra de um preço por
   página continua valendo (regra 13): é o MESMO bloco, noutra posição.
   Mexer no HTML mudaria o desktop junto, onde a ordem atual está certa —
   lá as duas colunas ficam lado a lado e não existe "abaixo da dobra".

   `display: contents` na coluna da esquerda faz a foto e as miniaturas
   virarem filhas diretas do grid; sem isso elas seriam um bloco só e as
   miniaturas não teriam como descer sozinhas. */
@media (max-width: 760px) {
  .produto-grid { display: flex; flex-direction: column; gap: 0; }
  .produto-grid > div:first-child { display: contents; }

  .produto-foto { order: 1; }
  .produto-info { order: 2; display: flex; flex-direction: column; }
  /* as miniaturas descem: quem ainda não sabe o preço não escolhe foto */
  .galeria { order: 3; margin-top: 18px; }

  /* A FOTO ENCOLHE. É o maior bloco acima do preço, e 1:1 numa tela de
     390px come 350px de altura. Com 260 ela continua mostrando o produto
     inteiro (`object-fit: cover` num quadrado) e devolve 90px. */
  .produto-foto { aspect-ratio: auto; height: 230px; }

  /* Dentro da coluna de texto: título, benefício, PREÇO, formulário.
     A tabela de faixas, o SKU e a descrição longa vão para depois — são
     leitura de quem já se interessou pelo número. */
  .produto-info > h1 { order: 1; }
  .produto-info > .resposta-direta { order: 2; }
  .produto-info > .calculo { order: 3; }        /* seletor + quantidade + TOTAIS */
  .produto-info > .sob-consulta { order: 3; }
  .produto-info > .gf-bloco { order: 3; }        /* calculadora de grande formato */
  .produto-info > .form-orcamento { order: 4; }  /* o CTA acompanha o preço */
  .produto-info > .faixas-rolagem { order: 5; }
  .produto-info > table.faixas { order: 5; }
  .produto-info > .produto-min { order: 6; }
  .produto-info > .descricao-extra { order: 7; }
  .produto-info > .aviso-est { order: 8; }
  .produto-info > .sku { order: 9; }
  .produto-info > .etiquetas { order: 10; }
  .produto-info > .selos-produto { order: 11; }

  /* o H1 de 34px come duas linhas e meia num celular */
  .produto-info h1 { font-size: 25px; }

  /* Dentro do bloco de cálculo: escolhe o tamanho, VÊ O PREÇO, e só então
     decide os opcionais. É a regra 25-U — "o bloco de preço vem ANTES do
     'E a arte?'" — aplicada ao catálogo: ler cinco caixinhas de acréscimo
     antes de saber o preço base é a ordem errada, e na agenda dos 3
     formatos isso empurrava o preço 200px para baixo sozinho. */
  .calculo { display: flex; flex-direction: column; }
  .calculo > .linha-opcao { order: 1; }
  .calculo > .stepper { order: 2; }
  .calculo > .totais { order: 3; }
  .calculo > .adicionais { order: 4; }
  .calculo > .gf-piso { order: 5; }
}