/* ==========================================================================
   OPÇÃO B DA HOME (20/10/2026) — só na prévia, em /home-b, para ele comparar.

   Pedido dele, frase a frase:
   - "Apareça", "Venda" e "Cresça" uma em cada linha.
   - "esse amarelo, acho que a gente pode tentar colocar um neon nele.
     Principalmente nas partes principais, não tanto": o brilho vai em poucos
     pontos (a palavra Venda, o botão principal, os três números da abertura e o
     traço dos rótulos). O resto do dourado fica como está.
   - "trabalhar um pouco no contraste": texto de apoio e bordas mais claros.
   - "divisão de algumas dobras melhores, está muito da mesma cor o fundo,
     falta respiro": cada dobra ganha um fundo próprio em ritmo claro/escuro,
     um fio de luz na emenda e mais espaço em cima e embaixo.

   Tudo pendurado em html[data-opcao="b"]: a home oficial não carrega este
   arquivo, e esta página é cópia gerada por ferramentas/montar_opcao_b.py.
   ========================================================================== */

html[data-opcao="b"] {
  --texto: #FBF7F2;
  --apoio: #DCD1C5;          /* era #C4B5A8 */
  --borda: #5E4D41;          /* era #4A3D34 */
  /* rodada 2 (20/10): "o neon ficou muito neon" — cor mais perto do dourado
     original e brilho em um terço da força */
  --neon: #EDC57C;
  --brilho: 0 0 10px rgba(237, 197, 124, .22), 0 0 28px rgba(237, 197, 124, .10);
  /* fundos das dobras, do mais fundo ao mais claro */
  --d0: #0B0807;
  --d1: #100C0A;
  --d2: #19130F;
  --d3: #221A15;
}

/* ---- abertura: uma palavra por linha, Venda acesa --------------------- */
html[data-opcao="b"] .hero h1 .pal,
html[data-opcao="b"].js-mov .hero .hero__titulo h1 .pal { display: block; width: max-content; }
/* rodada 3 (20/10): "talvez esteja muito grande, está empurrando as métricas" */
html[data-opcao="b"][data-harmonia] .hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; }
html[data-opcao="b"] .hero h1 .pal:nth-child(2) { color: var(--neon); text-shadow: var(--brilho); }
html[data-opcao="b"] .hero__sub { color: var(--apoio); }

/* botão principal com halo; os de linha ficam como estão */
/* rodada 2: "os botões são muito acesos" — volta a cor do site, halo quase
   imperceptível, e o hover só clareia (sem halo crescendo) */
html[data-opcao="b"] .botao--principal { box-shadow: 0 0 16px rgba(224, 185, 111, .14); }
html[data-opcao="b"] .botao--principal:hover { box-shadow: 0 0 16px rgba(224, 185, 111, .18); }

/* os três números da abertura */
html[data-opcao="b"] .hero .medida__valor { color: var(--neon); text-shadow: var(--brilho); }
html[data-opcao="b"] .hero .medida__valor small { text-shadow: none; }

/* traço dourado dos rótulos de seção */
html[data-opcao="b"] .rotulo::before { background: var(--neon); box-shadow: 0 0 8px rgba(237, 197, 124, .35); }

/* ---- dobras: fundo próprio, fio de luz na emenda e respiro ------------ */
html[data-opcao="b"] .hero { background: var(--d1); }
html[data-opcao="b"] #servicos { background: var(--d2); }
html[data-opcao="b"] #aparecer { background: var(--d0); }
html[data-opcao="b"] #diferencial { background: var(--d3); }
html[data-opcao="b"] #como-funciona { background: var(--d1); }
html[data-opcao="b"] #sites { background: var(--d2); }
html[data-opcao="b"] #quem-faz { background: var(--d3); }
html[data-opcao="b"] #duvidas { background: var(--d1); }
html[data-opcao="b"] #contato { background: var(--d2); }

html[data-opcao="b"] main > section.secao { position: relative; }
html[data-opcao="b"] main > section.secao::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 206, 112, .32) 30%, rgba(255, 206, 112, .32) 70%, transparent);
}
html[data-opcao="b"][data-harmonia] main > section.secao,
html[data-opcao="b"][data-harmonia] main > section.secao + section.secao:not(.secao--alt):not(.poco) {
  padding-top: clamp(5rem, 12vh, 8rem); padding-bottom: clamp(5rem, 12vh, 8rem);
}
@media (max-width: 760px) {
  html[data-opcao="b"][data-harmonia] main > section.secao,
  html[data-opcao="b"][data-harmonia] main > section.secao + section.secao:not(.secao--alt):not(.poco) {
    padding-top: 4.2rem; padding-bottom: 4.2rem;
  }
}

/* cartões um degrau acima do fundo da dobra, com borda que se vê */
html[data-opcao="b"] .bloco { border-color: var(--borda); }
html[data-opcao="b"] #diferencial .bloco,
html[data-opcao="b"] #quem-faz .quem__foto { background-color: #2B211B; }

/* rodada 4 (20/10): teste sem os botões da abertura ("Quero um orçamento" e
   "Conhecer os serviços"). O contato segue no cabeçalho (aparece ao rolar), no
   botão flutuante e, no celular, na barra de baixo. */
html[data-opcao="b"] .hero .botoes { display: none; }

/* rodada 5 (20/10): o logo compõe com o slogan. "HOUZZES" grande com o
   símbolo no lugar do H (ideia dele), Montserrat como no logo, e o slogan
   numa linha só: empilhado, as iniciais formavam "AVC". O bloco continua com
   a classe .hero__marca, então o voo até o cabeçalho segue valendo. */
@font-face { font-family: "Montserrat Marca"; src: url("../midia/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
html[data-opcao="b"] .hero .hero__marca.hero__marca--palavra {
  display: inline-flex; align-items: baseline; gap: .1em; height: auto; width: auto;
  margin: 0 0 clamp(1rem, 2.4vh, 1.6rem);
  font-family: "Montserrat Marca", "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: .16em; color: var(--texto);
}
html[data-opcao="b"] .hero__marca--palavra img { height: .74em; width: auto; display: block; align-self: baseline; transform: translateY(.0em); }
html[data-opcao="b"] .hero__marca--palavra span { display: block; margin-right: -.16em; }
/* slogan numa linha */
html[data-opcao="b"] .hero h1 .pal,
html[data-opcao="b"].js-mov .hero .hero__titulo h1 .pal { display: inline-block; width: auto; }
html[data-opcao="b"][data-harmonia] .hero h1 { font-size: clamp(1.9rem, 3.7vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; white-space: nowrap; }
/* celular: numa linha também (empilhado formava "AVC"); o tamanho acompanha
   a largura da tela para caber até em 360 px */
@media (max-width: 620px) { html[data-opcao="b"][data-harmonia] .hero h1 { white-space: nowrap; font-size: min(1.9rem, calc((100vw - 40px) / 11.8)); } }

/* rodada 6 (20/10): "HOUZZES" e o quadro da busca alinhados no topo, num meio
   termo de distância (a marca estava colada no topo e o quadro, longe). A marca
   agora mora na coluna do título (montar_opcao_b.py). */
html[data-opcao="b"][data-harmonia] .hero { padding-top: clamp(2.6rem, 8vh, 4.6rem); }
html[data-opcao="b"][data-harmonia] .hero .hero__topo { align-items: start; }
/* o topo do H fica 11 px abaixo do topo da caixa da linha (entrelinha da
   Montserrat): a caixa da busca desce o mesmo tanto */
html[data-opcao="b"] .hero .busca-viva { margin-top: 11px; }

/* rodada 7 (20/10), pedidos dele: mais distância do topo; "Houzzes" menor, do
   tamanho do slogan (agora imagem: símbolo como H maiúsculo + "ouzzes");
   subtítulo menor e da largura do slogan; mais espaço até os números. */
html[data-opcao="b"][data-harmonia] .hero { padding-top: clamp(3.6rem, 12vh, 7rem); }
html[data-opcao="b"] .hero .hero__marca.hero__marca--palavra {
  display: block; height: clamp(1.6rem, 3.1vw, 2.65rem); width: auto; margin: 0 0 clamp(.9rem, 2vh, 1.3rem);
}
/* coluna do título na largura do slogan: o subtítulo quebra dentro dela */
html[data-opcao="b"] .hero .hero__titulo { display: grid; grid-template-columns: min-content; }
html[data-opcao="b"] .hero .hero__sub { font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.6; max-width: none; }
html[data-opcao="b"] .hero .busca-viva { margin-top: 0; }
html[data-opcao="b"] .hero .medidas { margin-top: clamp(3.6rem, 9vh, 5.4rem); }
/* cabeçalho com a mesma marca da abertura */
html[data-opcao="b"] .nav__marca img { height: 26px; }
@media (max-width: 620px) {
  html[data-opcao="b"] .hero .hero__titulo { display: block; }
  html[data-opcao="b"] .nav__marca img { height: 22px; }
}