/* acabamento.css — o acabamento da PÁGINA INICIAL (16/09/2026).
   Decisão dele: "vamos de B, coloca na página inicial". Cópia de produção do
   harmonia.css sem a barra de comparação; a home declara data-harmonia="b".
   /harmonia.html segue como referência com o arquivo original: editar lá não
   muda o site, editar aqui não muda lá. */

/* harmonia.css — duas opções de ACABAMENTO para a página inicial (16/09/2026).

   Pedido dele: "ajuste o visual, deixando mais harmônico, olhando seção por
   seção. Ajustando também a hero. Conforme for, faça uma segunda opção."

   O que a revisão (captura inteira da página a 1440 px) encontrou:
   · topo: um buraco entre o logo e o título; buscas do fundo aparecendo como
     sujeira solta; faixa que corre cortada seco nas pontas
   · etiquetas (selos) esticadas na largura inteira do cartão, parecendo barra
   · títulos de cartão em três tamanhos diferentes
   · respiro desigual entre seções (o espaco.css soma folga extra quando o
     fundo não muda)
   · arco do ciclo tracejado em pedaços largos, parecendo quebrado; desenho do
     logo pesado e cortado na borda da seção
   · "Como funciona" com três medidores de tamanhos diferentes sem motivo
   · portfólio em 3 colunas com 8 sites: sobram dois na última linha
   · dúvidas numa coluna estreita com a direita vazia

   data-harmonia no <html>:
     atual · como a página está hoje
     a     · REFINADA: mesma estrutura, arestas acertadas
     b     · EDITORIAL: tudo da A + título maior, números em faixa fina,
             cenas encostadas no topo do cartão, linha do tempo e dúvidas em
             duas colunas
   O que é das duas fica em H (a ou b). */

/* ======================================================= H: comum a A e B = */

/* --- ritmo: o mesmo respiro entre todas as seções */
html[data-harmonia="a"] .secao,
html[data-harmonia="b"] .secao,
html[data-harmonia="a"] .secao + .secao:not(.secao--alt):not(.poco),
html[data-harmonia="b"] .secao + .secao:not(.secao--alt):not(.poco) {
  padding: clamp(4.2rem, 10vh, 6.2rem) 0;
}
html[data-harmonia="a"] .secao__topo,
html[data-harmonia="b"] .secao__topo { margin-bottom: clamp(2.2rem, 5vh, 3rem); }
html[data-harmonia="a"] .rotulo,
html[data-harmonia="b"] .rotulo { margin-bottom: 1.4rem; }

/* --- topo: o logo encosta no título, a faixa some nas pontas */
html[data-harmonia="a"] .hero,
html[data-harmonia="b"] .hero { padding-top: clamp(1.6rem, 4vh, 2.4rem); }
html[data-harmonia="a"] .hero__marca,
html[data-harmonia="b"] .hero__marca { margin-bottom: clamp(3rem, 9vh, 4.6rem); }
html[data-harmonia="a"] .faixa-viva,
html[data-harmonia="b"] .faixa-viva {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  border-color: transparent; background: transparent;
}
/* as buscas do fundo só existem sob a luz: soltas, pareciam sujeira */
html[data-harmonia="a"] .buscas-fundo span,
html[data-harmonia="b"] .buscas-fundo span { color: rgba(234, 223, 198, .012); }
html[data-harmonia="a"] .buscas-fundo__camada--luz span,
html[data-harmonia="b"] .buscas-fundo__camada--luz span { color: rgba(234, 223, 198, .14); }
/* a busca alinha o topo com o título, em vez de flutuar acima dele */
@media (min-width: 1080px) {
  html[data-harmonia="a"] .hero__topo,
  html[data-harmonia="b"] .hero__topo { align-items: start; }
  html[data-harmonia="a"] .busca-viva,
  html[data-harmonia="b"] .busca-viva { margin-top: .35rem; }
}

/* --- etiquetas do tamanho do texto, não da largura do cartão */
html[data-harmonia="a"] .bloco .selo,
html[data-harmonia="b"] .bloco .selo { align-self: flex-start; }

/* --- uma escala só de título de cartão */
html[data-harmonia="a"] .bloco h3,
html[data-harmonia="b"] .bloco h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; }
html[data-harmonia="a"] .servico h3,
html[data-harmonia="b"] .servico h3 { font-size: 1.1875rem; margin-top: .9rem; }
html[data-harmonia="a"] .servico ul,
html[data-harmonia="b"] .servico ul { gap: .3rem; font-size: .9rem; }
html[data-harmonia="a"] .servico__para,
html[data-harmonia="b"] .servico__para { font-size: .9rem; line-height: 1.6; }

/* --- ciclo: arco contínuo e fino; desenho do logo mais leve e inteiro */
html[data-harmonia="a"] .trilho__volta path,
html[data-harmonia="b"] .trilho__volta path { stroke-dasharray: none; stroke-width: 1; opacity: .5; }
html[data-harmonia="a"] .trilho__volta .trilho__risco,
html[data-harmonia="b"] .trilho__volta .trilho__risco { stroke-dasharray: 100 100; stroke-width: 4; opacity: 1; }
html[data-harmonia="a"] .trilho__rotulo,
html[data-harmonia="b"] .trilho__rotulo { font-size: .64rem; top: -4px; }
html[data-harmonia="a"] #diferencial .passo__num,
html[data-harmonia="b"] #diferencial .passo__num { font-size: 1.6rem; margin-bottom: 1rem; }
html[data-harmonia="a"][data-fundo~="crescer-secao"] [data-crescer] .crescer-local,
html[data-harmonia="b"][data-fundo~="crescer-secao"] [data-crescer] .crescer-local { opacity: .06; width: min(34vw, 420px); bottom: 1.5rem; right: 0; }

/* --- portfólio: 8 sites em 4 colunas (2 fileiras cheias) */
@media (min-width: 1100px) {
  html[data-harmonia="a"] #sites .grade,
  html[data-harmonia="b"] #sites .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 620px) and (max-width: 1099px) {
  html[data-harmonia="a"] #sites .grade,
  html[data-harmonia="b"] #sites .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-harmonia="a"] #sites .bloco,
html[data-harmonia="b"] #sites .bloco { padding: 1.1rem 1.1rem 1.2rem; }
html[data-harmonia="a"] #sites .bloco h3,
html[data-harmonia="b"] #sites .bloco h3 { font-size: 1rem; margin: .5rem 0 .1rem; }
html[data-harmonia="a"] #sites .portfolio__onde,
html[data-harmonia="b"] #sites .portfolio__onde { font-size: .84rem; line-height: 1.5; }
html[data-harmonia="a"] #sites .tela,
html[data-harmonia="b"] #sites .tela { margin: 0 0 .9rem; aspect-ratio: 16 / 10; }

/* endereço comprido (nutricionistagabrielfeijo.houzzes.com.br) quebrava no meio
   e desalinhava a última linha dos cartões: uma linha só, com reticências */
html[data-harmonia="a"] #sites .portfolio__url,
html[data-harmonia="b"] #sites .portfolio__url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- contato: a coluna da esquerda na largura da janela de conversa */
html[data-harmonia="a"] .zap,
html[data-harmonia="b"] .zap { max-width: 28rem; }

/* ================================================ A: refinada ============ */
html[data-harmonia="a"] .medida { padding: 1.2rem 1.4rem 1.15rem; }
html[data-harmonia="a"] .medidas { margin-top: clamp(2.2rem, 5vh, 2.8rem); }
html[data-harmonia="a"] .medida__valor { font-size: clamp(2.1rem, 4.2vw, 3rem); }
/* os três medidores do "Como funciona" do mesmo tamanho: são etapas, não notas */
html[data-harmonia="a"] #como-funciona .bloco--medido { --cheio: 100% !important; }
html[data-harmonia="a"] #como-funciona .bloco--medido::after { opacity: .55; }
html[data-harmonia="a"] .faq { max-width: none; }

/* ================================================ B: editorial =========== */
/* --- topo: título maior e botões logo abaixo dele */
html[data-harmonia="b"] .hero .envoltorio { display: flex; flex-direction: column; }
html[data-harmonia="b"] .hero .hero__marca { order: 0; align-self: flex-start; }
html[data-harmonia="b"] .hero .hero__topo { order: 1; }
html[data-harmonia="b"] .hero .botoes { order: 2; margin-top: 2rem; }
html[data-harmonia="b"] .hero .medidas { order: 3; }
html[data-harmonia="b"] .hero .faixa-viva { order: 4; }
html[data-harmonia="b"] .hero h1 { font-size: clamp(2.6rem, 5.8vw, 4.4rem); letter-spacing: -.035em; line-height: 1.04; }
html[data-harmonia="b"] .hero__sub { font-size: 1.15rem; max-width: 50ch; }

/* --- números numa faixa fina, sem caixa */
html[data-harmonia="b"] .medidas {
  gap: 0; background: transparent; border: 0; border-radius: 0; overflow: visible;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); margin-top: clamp(2.8rem, 7vh, 4rem);
}
html[data-harmonia="b"] .medida { background: transparent; padding: 1.4rem 1.6rem 1.3rem; }
html[data-harmonia="b"] .medida:first-child { padding-left: 0; }
html[data-harmonia="b"] .medida + .medida { border-left: 1px solid var(--borda); }
html[data-harmonia="b"] .medida::before { display: none; }
html[data-harmonia="b"] .medida .glifo { right: 1.6rem; }
@media (max-width: 700px) {
  html[data-harmonia="b"] .medida { padding-left: 0; padding-right: 0; }
  html[data-harmonia="b"] .medida + .medida { border-left: 0; border-top: 1px solid var(--borda); }
  html[data-harmonia="b"] .medida .glifo { right: 0; }
}

/* --- serviços: a cena encosta no topo do cartão, de ponta a ponta */
html[data-harmonia="b"][data-inteligente~="cartoes"] .servico .demo {
  margin: -1.6rem -1.7rem 1.3rem; border-width: 0 0 1px; border-radius: var(--raio) var(--raio) 0 0; height: 96px;
}
@media (max-width: 620px) {
  html[data-harmonia="b"][data-inteligente~="cartoes"] .servico .demo { margin: -1.35rem -1.4rem 1.2rem; }
}

/* --- ciclo: marcas no trilho onde cada etapa começa */
html[data-harmonia="b"] .trilho::after {
  content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 10px; pointer-events: none;
  background:
    radial-gradient(circle, var(--borda-campo) 2.5px, transparent 3px) 16.5% 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--borda-campo) 2.5px, transparent 3px) 50% 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--borda-campo) 2.5px, transparent 3px) 83.5% 50% / 10px 10px no-repeat;
}

/* --- como funciona: linha do tempo, sem caixa (deixa de repetir o ciclo) */
html[data-harmonia="b"] #como-funciona .grade { gap: 2.4rem; }
html[data-harmonia="b"] #como-funciona .grade > .bloco,
html[data-harmonia="b"] #como-funciona .grade > .bloco:hover {
  background: transparent !important; background-image: none !important; border: 0; border-radius: 0;
  border-top: 1px solid var(--borda); padding: 1.8rem 0 0; transform: none !important; overflow: visible;
}
html[data-harmonia="b"] #como-funciona .grade > .bloco::before {
  content: ""; position: absolute; inset: auto; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--acento) !important; animation: none !important; box-shadow: 0 0 0 4px rgba(224, 185, 111, .15);
}
html[data-harmonia="b"] #como-funciona .grade > .bloco::after { display: none; }
html[data-harmonia="b"] #como-funciona .grade > .bloco h3 { font-size: 1.25rem; }

/* --- dúvidas em duas colunas: o título fica parado enquanto a lista corre */
@media (min-width: 900px) {
  html[data-harmonia="b"] #duvidas .envoltorio {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
  }
  html[data-harmonia="b"] #duvidas .rotulo { grid-column: 1 / -1; }
  html[data-harmonia="b"] #duvidas .secao__topo { grid-column: 1; position: sticky; top: 6rem; }
  html[data-harmonia="b"] #duvidas .faq { grid-column: 2; max-width: none; }
}