/* ═══════════════════════════════════════════════════════════════════════════
   ONDA · camada de MOCKUP DE SEGMENTO · v1.0 · 15/09/2026
   ───────────────────────────────────────────────────────────────────────────
   Complementa onda-scroll-v1.css. Carregar SEMPRE depois dela.

   O que é: o vocabulário que as sete páginas de mockup de segmento
   compartilham e que a folha do padrão não tem, porque nasceu para site e LP,
   não para simulação de negócio de terceiro.

   Por que existe em arquivo e não no <style> de cada página: as primitivas
   abaixo apareceram idênticas em sete peças. Repetir 260 linhas sete vezes
   transforma qualquer correção de placeholder ou de vitrine numa edição em
   volume, que é exatamente a classe de trabalho que a casa evita.

   O que NÃO entra aqui: nada específico de um segmento. A folha local de cada
   página cuida do que só ela tem.

   Mobile primeiro: o bloco base é o do celular, desktop entra por min-width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · PLACEHOLDER DE MÍDIA ════════════════════════════════════════════
   Decisão de 15/09/2026: o slot vazio de mídia precisa ficar APRESENTÁVEL em
   tela, não apenas declarado. Estas páginas são gravadas em OBS para virar
   corte de Reel antes de a mídia final existir, e o hachurado diagonal que a
   folha do padrão usa (.passo-vazio, .trat-vaga) lê como erro de carregamento
   quando projetado.

   Então o placeholder daqui é uma peça gráfica da marca: gradação de noite e
   oceano, um respiro de ouro, a trama diagonal em intensidade quase nula e o
   rótulo do que vai entrar ali. Quando a mídia real chegar, troca-se o bloco
   pelo <img>/<video> e nada mais muda: o contêiner é o mesmo.            */
.ph{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;
  text-align:center;padding:18px;
  background:
    radial-gradient(74% 62% at 28% 22%,rgba(27,68,98,.62),transparent 72%),
    radial-gradient(64% 72% at 84% 96%,rgba(231,164,49,.15),transparent 70%),
    linear-gradient(158deg,#0e1a28 0%,#0a121c 46%,#070910 100%)}
html[data-theme="light"] .ph{
  background:
    radial-gradient(74% 62% at 28% 22%,rgba(27,68,98,.16),transparent 72%),
    radial-gradient(64% 72% at 84% 96%,rgba(184,122,24,.14),transparent 70%),
    linear-gradient(158deg,#EFE7D8 0%,#F4EEE3 52%,#F7F3EC 100%)}

/* a trama: presente o suficiente para a superfície não ser chapada, discreta
   o suficiente para não ler como "imagem faltando" */
.ph:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(118deg,transparent 0 26px,rgba(255,255,255,.02) 26px 52px)}
html[data-theme="light"] .ph:before{
  background:repeating-linear-gradient(118deg,transparent 0 26px,rgba(60,44,20,.022) 26px 52px)}

/* o filete de horizonte, que é o que dá leitura de "cena" e não de "caixa" */
.ph:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}

.ph-in{position:relative;z-index:2;max-width:86%;display:grid;gap:10px;justify-items:center}
.ph-in svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.25;
  stroke-linecap:round;opacity:.82}
.ph-rot{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);opacity:.95}
.ph-txt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.8;max-width:34ch}

/* variação pequena: capa de card de vitrine e etapa de jornada têm pouca
   altura, então o glifo sai e sobra o rótulo */
.ph.ph-mini{padding:12px}
.ph.ph-mini .ph-in svg{width:24px;height:24px}
.ph.ph-mini .ph-txt{font-size:8.5px;letter-spacing:.11em;max-width:30ch}

/* ── variação grande: palco de tela cheia ──────────────────────────────────
   Achado de 15/09/2026, na primeira página construída: centralizar o rótulo
   num palco de tela cheia o joga EXATAMENTE atrás da headline, e o resultado
   lê como texto corrompido por baixo do título. Foto real não tem esse
   problema porque o véu a rebaixa; um rótulo monoespaçado em ouro, sim.

   Então no palco o placeholder vira CLAQUETE: a gradação fica de fundo, que
   é o que já estava bonito, e a anotação desce para o canto inferior
   direito, fora da caixa de texto, alinhada à direita. Quem grava em OBS
   continua vendo o que vai entrar ali sem que isso dispute com a copy.    */
.ph.ph-alto{place-items:end}
.ph.ph-alto .ph-in{position:absolute;right:18px;bottom:16px;max-width:min(58%,34ch);
  justify-items:end;text-align:right;gap:7px}
.ph.ph-alto .ph-in svg{width:26px;height:26px;opacity:.42}
.ph.ph-alto .ph-rot{opacity:.7}
.ph.ph-alto .ph-txt{font-size:8.5px;letter-spacing:.11em;opacity:.62;line-height:1.7}

/* ═══ 2 · VITRINE ═════════════════════════════════════════════════════════
   A prateleira do negócio simulado: imóvel, plano, equipamento, serviço.
   Generalizada a partir da .trat da ONDA Clinic, que era específica de
   tratamento. Card de canto vivo, capa em cima, etiqueta sobre a capa.     */
.vit{display:grid;gap:12px;margin-top:22px}
.item{position:relative;overflow:hidden;padding:0}
.item.fora{display:none}
.item-capa{position:relative;height:138px;background:var(--raise);overflow:hidden;
  border-bottom:1px solid var(--line)}
.item-capa img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.64) contrast(1.07) brightness(.8)}
html[data-theme="light"] .item-capa img{filter:saturate(.86) contrast(1.02) brightness(1.02)}
.item-tag{position:absolute;left:14px;bottom:11px;z-index:3;font-family:var(--mono);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--noite);
  background:var(--accent);padding:4px 8px}
.item-corpo{padding:18px}
.item-corpo h3{font-size:18px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.item-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.item-meta i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:4px 7px}
.item-corpo p{font-size:14px;margin-top:12px;color:var(--ink-2)}
.item-fio{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.item-fio b{color:var(--accent);font-weight:600}
.vit-nota{margin-top:16px;font-size:12.5px;color:var(--ink-3);max-width:72ch}

/* ═══ 3 · FERRAMENTA ══════════════════════════════════════════════════════
   O bloco interativo que cada mockup tem um, e um só. É o que transforma a
   página de folheto em demonstração: o visitante mexe e a página responde.
   Duas colunas no desktop (resultado à esquerda, controles à direita),
   empilhado no celular, porque aqui a coluna de controle é formulário e
   formulário estreito não se lê.                                          */
/* ── A ORDEM: ESCOLHA PRIMEIRO, RESULTADO DEPOIS ───────────────────────────
   Corrigido em 15/09/2026, apontamento do Yuri sobre a ONDA Plena.

   O erro: o `.fer-quadro` vinha antes do `.fer-ctrl` no HTML, então no
   empilhado (celular, e também desktop com zoom, que estreita o viewport em
   px de CSS) o RESULTADO aparecia acima dos CONTROLES. A pessoa lia a
   resposta antes de ter escolhido qualquer coisa, e a ferramenta perdia o
   sentido: não dá para entender um resultado sem ver a pergunta.

   A correção é de ordem visual, não de marcação: `order` no controle e no
   quadro, para que a escolha venha primeiro em TODA largura. No celular isso
   é acima; no desktop, à esquerda. A marcação segue com o quadro primeiro
   porque é ele que carrega o `aria-live`, e leitor de tela deve encontrar a
   região viva sem depender de ordem visual.                                */
.fer{margin-top:24px;display:grid;gap:18px;grid-template-columns:1fr}
/* A altura do quadro no celular subiu de 320 para 460 px em 16/09/2026. Com
   320 px cabia o cabeçalho do resultado e mais nada: a pessoa trocava uma
   opção no controle, o bloco que mudava ficava abaixo da dobra do quadro e a
   ferramenta parecia não reagir ao clique. Foi o defeito relatado na ONDA
   Plena e na ONDA Houses, e vale para todas as páginas que usam esta folha. */
.fer-quadro{order:2;position:relative;border:1px solid var(--line);background:var(--surface);
  min-height:460px;overflow:hidden}
.fer-ctrl{order:1;display:grid;gap:16px;align-content:start}
.fer-linha{display:grid;gap:9px}
.fer-linha > label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.fer-linha .val{float:right;font-family:var(--mono);font-size:11px;color:var(--accent);
  font-weight:700;letter-spacing:.06em}

/* campo de entrada · canto vivo, como manda o token da marca */
.fer-in{width:100%;background:var(--raise);border:1px solid var(--line-2);color:var(--ink);
  padding:12px 13px;font-size:16px;font-family:var(--sans);border-radius:0;outline:none;
  transition:border-color var(--t-micro)}
.fer-in:focus{border-color:var(--accent)}
.fer-in option{background:var(--surface);color:var(--ink)}

.fer-faixa{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--line-2);outline:none;margin:8px 0}
.fer-faixa::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--accent);border:3px solid var(--ground);cursor:pointer}
.fer-faixa::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:3px solid var(--ground);cursor:pointer}

/* escolha por botão · quando a opção é categórica e curta */
.fer-ops{display:flex;flex-wrap:wrap;gap:2px}
.fer-ops button{font:inherit;font-size:12.5px;color:var(--ink-3);background:var(--raise);
  border:1px solid var(--line);padding:9px 13px;cursor:pointer;border-radius:0;
  transition:color var(--t-micro),border-color var(--t-micro),background var(--t-micro)}
.fer-ops button:hover{color:var(--ink-2);border-color:var(--line-2)}
.fer-ops button.on{color:var(--noite);background:var(--accent);border-color:var(--accent);
  font-weight:600}
html[data-theme="light"] .fer-ops button.on{color:var(--papel)}

/* painel de resultado · linhas de rótulo e valor, com um destaque no pé */
.res{border:1px solid var(--line);background:var(--raise)}
.res-l{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 17px;border-bottom:1px solid var(--line)}
.res-l:last-child{border-bottom:0}
.res-l span{font-size:13px;color:var(--ink-3)}
.res-l b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:16px;
  color:var(--ink);font-weight:700;white-space:nowrap}
.res-forte{padding:18px;border-top:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--glow),transparent 76%)}
.res-forte .ph-rot{opacity:1}
.res-forte .big{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(26px,7vw,38px);font-weight:800;color:var(--ink);line-height:1;margin-top:7px;
  letter-spacing:-.03em}
.res-forte p{font-size:12.5px;color:var(--ink-2);margin-top:10px;max-width:46ch}

/* a fórmula na tela · regra da casa: toda métrica derivada mostra a conta */
.formula{margin-top:13px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  line-height:1.75;word-break:break-word}

/* o selo de premissa · onde a página declara o que é estimativa nossa */
.selo{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 15px;
  border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink-3)}
.selo svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;stroke:var(--accent);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.selo b{color:var(--ink-2)}

/* Celular usado como RESULTADO de ferramenta, e não como seção de comparação.
   A folha do padrão só trava `.fone` em 300 px a partir de 761 px, porque lá
   ele vive dentro do `.demo`, que é de duas colunas em toda largura. Aqui ele
   mora sozinho num quadro que ocupa a coluna inteira, e entre 590 e 760 px a
   moldura esticava para cerca de 500 px: deixava de parecer celular e virava
   tablet. Trava e centraliza em toda largura. Medido em 15/09/2026.        */
.fer-quadro .fone{max-width:300px;margin-inline:auto}

/* estado vazio da ferramenta · antes de o visitante mexer em qualquer coisa */
.fer-vazio{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  text-align:center;padding:22px;background:var(--surface)}
.fer-vazio .moldura{border:1px dashed var(--line-2);padding:26px 20px;max-width:340px}
.fer-vazio h3{font-size:18px;color:var(--ink);line-height:1.3}
.fer-vazio p{font-size:13.5px;margin-top:10px;color:var(--ink-3)}

/* ═══ 4 · AS AÇÕES E O INCLUSO ════════════════════════════════════════════
   As duas listas que fecham a camada ONDA em toda página do formato.      */
.acoes{display:grid;gap:2px;margin-top:24px;counter-reset:a}
.acao{background:var(--surface);border:1px solid var(--line);padding:19px 18px 19px 56px;
  position:relative;transition:border-color var(--t-micro),background var(--t-micro)}
.acao:before{counter-increment:a;content:counter(a,decimal-leading-zero);position:absolute;
  left:18px;top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--accent)}
.acao:hover{border-color:var(--line-2);background:var(--raise)}
.acao b{display:block;font-size:15px;color:var(--ink);letter-spacing:-.005em}
.acao span{display:block;font-size:13.5px;margin-top:6px;color:var(--ink-2)}

.incluso{display:grid;gap:2px;margin-top:24px;list-style:none}
.incluso li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);padding:16px 17px;font-size:14.5px;color:var(--ink-2)}
.incluso b{color:var(--ink);font-weight:600}

/* ═══ 5 · A VIRADA ════════════════════════════════════════════════════════
   O fio de ouro que desce da frase de virada e leva o olho para a próxima
   seção. É o único ornamento da página, e existe porque a virada é o ponto
   em que o visitante precisa entender que há mais abaixo.                 */
.virada-fio{display:block;width:1px;height:38px;margin:22px auto 0;
  background:linear-gradient(var(--accent),transparent)}

/* ═══ 6 · DESKTOP ═════════════════════════════════════════════════════════ */
@media(min-width:761px){
  .vit{grid-template-columns:repeat(3,1fr);gap:14px}
  .item-capa{height:170px}
  /* controle à esquerda, resultado à direita: a mesma ordem do empilhado,
     lida da esquerda para a direita. Ver a nota de 15/09/2026 acima. */
  .fer{grid-template-columns:330px 1fr;gap:22px;align-items:start}
  .fer-quadro{min-height:420px}
  .acoes{grid-template-columns:1fr 1fr}
  .incluso{grid-template-columns:1fr 1fr}
}