/* Design tokens replicados de Site/src/styles/global.css, para manter a identidade do site principal (preto/branco e dourado-camurça, Poppins/Barlow/Teko). Copiados em vez de importados porque esta landing precisa rodar como projeto estático independente, num domínio/host separado do site principal. */ /* As fontes sao carregadas por no do index.html, nao por @import aqui: um @import so e descoberto depois deste arquivo inteiro ser baixado e lido, atrasando o primeiro texto na tela. */ :root{ --bg:#FFFFFF; --bg-dark:#0A0A0A; --surface:#F7F7F7; --surface-2:#F0F0F0; --ink:#0A0A0A; --ink-2:#626974; --ink-3:#8B8FA0; --rule:#D9D9D9; --rule-strong:#BFBFBF; --accent:#AC8C66; --accent-ink:#8A6C49; --accent-soft:#F2EAE0; --bad:#C23B3B; /* Verde da faixa do Reclame Aqui. Mais fundo que o do WhatsApp (#25D366) de proposito: com a mesma cor, a faixa inteira pareceria um botao de conversa e o visitante tentaria clicar nela. Com texto branco o contraste fica em torno de 7:1, folgado para leitura. */ --verde-faixa-escuro:#0D4526; --verde-faixa:#17663A; --verde-faixa-claro:#2E9A57; --on-dark:#F5F5F3; --on-dark-2:#B7BAC2; --shadow-sm:0 1px 2px rgba(0,0,0,.07); --shadow-md:0 6px 20px -8px rgba(0,0,0,.18); --shadow-lg:0 20px 48px -14px rgba(0,0,0,.28); --f-display:'Poppins','Helvetica Neue',Arial,sans-serif; --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; --f-impact:'Teko','Poppins',sans-serif; --radius:10px; --radius-pill:999px; color-scheme: light; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:1.06rem; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} h1,h2,h3{ font-family:var(--f-display); font-weight:700; line-height:1.12; margin:0; color:var(--ink); text-wrap:balance; } h2{font-size:clamp(1.6rem,3vw,2.1rem)} h3{font-size:1.15rem; font-weight:600} p{margin:0} a{color:var(--accent-ink)} .h-impact{ font-family:var(--f-impact); font-weight:600; line-height:.96; font-size:clamp(2.3rem,6vw,3.6rem); } .container{max-width:68rem; margin:0 auto; padding:0 1.4rem} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--f-display); font-weight:600; font-size:.98rem; padding:.9rem 1.7rem; border-radius:var(--radius-pill); border:1px solid transparent; text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--ink); color:var(--bg); box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--accent-ink); box-shadow:var(--shadow-md)} /* Para uso sobre fundo escuro: .btn-primary e preto (--ink) e --bg-dark tambem, entao o botao sumia no CTA final. Estas duas variantes existem para nunca repetir esse erro: .btn-accent no escuro, .btn-whatsapp onde o destino e o proprio WhatsApp (a cor da marca ja diz para onde o clique leva). */ .btn-accent{background:var(--accent); color:#0A0A0A; box-shadow:var(--shadow-md)} .btn-accent:hover{background:#C4A47C; box-shadow:var(--shadow-lg)} .btn-whatsapp{background:#25D366; color:#08210F; box-shadow:var(--shadow-sm)} .btn-whatsapp:hover{background:#1FBE5A; box-shadow:var(--shadow-md)} .btn-outline-light{background:transparent; color:var(--on-dark); border-color:var(--rule-strong)} .btn-outline-light:hover{border-color:var(--accent); color:var(--accent)} .btn-block{width:100%} /* Foco visivel para navegacao por teclado. Nao existia estilo nenhum, entao quem navega por Tab nao enxergava onde estava. */ :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px} .hero :focus-visible, .cta-final :focus-visible{outline-color:var(--accent)} .section{padding:clamp(2.6rem,5vw,4.4rem) 0} .alt{background:var(--surface-2)} /* ---------- faixa do Reclame Aqui ---------- */ .faixa-ra{ /* Tres camadas. A de baixo e o degrade de fato, do verde fundo ao claro, com amplitude suficiente para se ver: a versao anterior ia de um verde a outro quase igual e lia como cor chapada. Por cima, um brilho suave atras do selo, que destaca o cartao branco, e uma sombra no canto oposto, que da profundidade sem escurecer o texto. O texto fica sobre a metade escura, onde o branco tem mais contraste; o lado claro e o do selo. Os 58% e o brilho estreito em 71% sairam de medicao: com o verde claro comecando em 48% e o brilho mais largo, o fim do paragrafo caia para 4,3:1, abaixo do minimo de 4,5:1 para texto desse tamanho. */ background: radial-gradient(ellipse 26% 120% at 71% 50%, rgba(140, 230, 160, .32) 0%, transparent 55%), radial-gradient(ellipse 55% 150% at 0% 0%, rgba(0, 0, 0, .30) 0%, transparent 70%), linear-gradient(110deg, var(--verde-faixa-escuro) 0%, var(--verde-faixa) 58%, var(--verde-faixa-claro) 100%); color:#fff; padding:clamp(1.6rem,4vw,2.3rem) 0; position:relative; overflow:hidden; isolation:isolate; } /* Reflexo que atravessa a faixa da esquerda para a direita, como luz passando num vidro: uma faixa larga e suave com um fio mais claro no meio, e um fio fino logo atras. Fica numa camada propria abaixo do conteudo (z-index -1 dentro do isolation da faixa), entao passa por tras do texto e do cartao do selo, nunca por cima. Anda so com transform, que o navegador resolve na placa de video sem redesenhar a pagina. A passada leva cerca de 2,5s e a faixa descansa o resto do ciclo: brilho continuo cansa e disputa atencao com o formulario. O pico e baixo (.16) para o texto seguir legivel mesmo no instante em que o reflexo passa por tras dele. */ .faixa-ra::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.07) 44%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.07) 56%, transparent 62%, transparent 65%, rgba(255,255,255,.09) 67%, transparent 69%); transform:translateX(-100%); animation:faixa-reflexo 7s cubic-bezier(.45,.05,.35,1) 1.2s infinite; } @keyframes faixa-reflexo{ 0%{ transform:translateX(-100%) } 36%, 100%{ transform:translateX(100%) } } @media (max-width: 640px){ /* No celular o texto ocupa a metade de cima da faixa, justo onde o degrade diagonal ja e mais claro. O reflexo passa ali com metade da forca e volta inteiro na altura do selo; com forca total, o paragrafo caia para 4,1:1 no pico do brilho. */ .faixa-ra::before{ -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5) 52%, #000 62%); mask-image:linear-gradient(to bottom, rgba(0,0,0,.5) 52%, #000 62%); } } /* A regra geral de movimento reduzido so alcanca elementos, nao o ::before. */ @media (prefers-reduced-motion: reduce){ .faixa-ra::before{ display:none } } @media (max-width: 640px){ /* No celular o selo desce para baixo do texto. O degrade corre na diagonal, do canto superior esquerdo ao inferior direito: o texto, em cima, fica na parte escura, e o selo, embaixo, na parte clara, com o brilho atras dele. Os 62% e o brilho baixo sairam de medicao: com o verde claro em 50%, o canto superior direito clareava e o fim do paragrafo caia para 4,1:1. */ .faixa-ra{ background: radial-gradient(ellipse 90% 38% at 50% 88%, rgba(140, 230, 160, .30) 0%, transparent 70%), linear-gradient(135deg, var(--verde-faixa-escuro) 0%, var(--verde-faixa) 62%, var(--verde-faixa-claro) 100%); } } /* Texto e selo andam juntos, centrados como um grupo. Assim a faixa fica equilibrada nos dois estados: com o selo, lado a lado; sem ele, so o texto no meio, sem um vazio de um lado. */ .faixa-ra-conteudo{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1.2rem 2.6rem; } .faixa-ra-texto{ max-width:34rem } .faixa-ra-titulo{ font-family:var(--f-display); font-weight:700; color:#fff; font-size:clamp(1.15rem,2.4vw,1.4rem); line-height:1.2; } /* Branco puro, e nao .88 como antes: com o reflexo passando por tras, o branco translucido caia abaixo de 4,5:1 no instante do brilho. A hierarquia com o titulo fica no tamanho e no peso. */ .faixa-ra-texto p + p{ margin-top:.35rem; color:#fff; font-size:.96rem } /* O selo tem texto cinza-escuro ("OTIMO") e o rosto do mascote em preto, desenhados para fundo claro. Direto no verde eles sumiam; o cartao branco devolve o fundo para o qual o selo foi feito. */ .ra-selo{ flex:none; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:14px; padding:.7rem 1.1rem; box-shadow:0 10px 26px -12px rgba(0,0,0,.45); } .ra-selo img{ height:3.6rem; width:auto; display:block } .ra-selo:empty{ display:none } @media (max-width: 640px){ .faixa-ra-conteudo{ flex-direction:column; text-align:center } } /* ---------- topbar ---------- */ .topbar{ padding:1rem 0; border-bottom:1px solid var(--rule); } .topbar .container{display:flex; align-items:center; justify-content:space-between; gap:1rem} .topbar img{height:2.5rem; width:auto} .topbar a.tel{font-family:var(--f-display); font-weight:600; font-size:.92rem; color:var(--ink); text-decoration:none; white-space:nowrap} .topbar-fim{ display:flex; align-items:center; gap:.85rem; min-width:0 } .google-nota{ display:flex; align-items:center; line-height:0 } /* A imagem e uma tira larga (840x228). A altura manda e a largura acompanha, entao o selo encolhe junto com a tela sem nunca empurrar o telefone para fora do cabecalho. */ .topbar .google-nota img{ height:1.45rem; width:auto } .google-nota:hover{ opacity:.82 } @media (max-width: 560px){ /* Em tela estreita o cabecalho tem logo, selo e telefone disputando a mesma linha. O selo cede primeiro: ele reforca, o telefone e o que se clica. */ .topbar .container{ gap:.6rem } .topbar-fim{ gap:.55rem } .topbar img{ height:2.2rem } .topbar .google-nota img{ height:1.15rem } .topbar a.tel{ font-size:.85rem } } @media (max-width: 380px){ .topbar .google-nota{ display:none } } /* ---------- hero ---------- */ .hero{ background:var(--bg-dark); padding:clamp(2.4rem,6vw,4rem) 0 clamp(3rem,7vw,5rem); } .hero .container{ display:grid; gap:2.4rem; grid-template-columns:1fr; align-items:start; } @media (min-width: 920px){ .hero .container{ grid-template-columns: 1.05fr .95fr; align-items:center; } } .hero-copy h1{color:var(--on-dark)} .hero-copy .lede{color:var(--on-dark-2); font-size:1.06rem; margin-top:1rem; max-width:36rem} /* Celular: titulo, depois o formulario, e so entao o selo com as credenciais. Quem chega do anuncio precisa encontrar o formulario sem rolar a tela; o selo e as credenciais reforcam a decisao logo abaixo dele. O .hero-copy vira display:contents para os filhos entrarem direto na grade do .container, e o order separa o titulo do selo. No desktop nada muda: o texto fica numa coluna so, ao lado do formulario. */ @media (max-width: 919.98px){ .hero .container{ gap:1.6rem } .hero-copy{ display:contents } .hero-titulo{ order:1 } .form-card{ order:2 } .prova-hero{ order:3; margin-top:0 } } /* ---------- prova do heroi: selo de garantia + credenciais ---------- */ .prova-hero{ margin-top:1.8rem; display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; } /* O selo e desenhado em SVG, nao e imagem: escala sem borrar em tela retina, acompanha a cor da marca e pesa uns poucos bytes dentro do proprio HTML, sem custar mais uma ida ao servidor no meio do carregamento do heroi. */ .selo{ width:7.4rem; height:7.4rem; flex:none; color:var(--accent) } .selo svg{ width:100%; height:100%; overflow:visible } .selo .anel{ fill:none; stroke:currentColor } .selo .anel-fora{ stroke-width:1.5; opacity:.55 } .selo .anel-dentro{ stroke-width:1; opacity:.45 } /* Serrilha: um circulo tracejado com ponta redonda vira uma coroa de contas, que e o detalhe que faz o desenho parecer selo e nao so um circulo. */ .selo .serrilha{ stroke-width:2.6; stroke-dasharray:0.1 5.2; stroke-linecap:round; opacity:.8 } .selo text{ fill:currentColor } .selo .arco{ font-family:var(--f-display); font-size:8.6px; font-weight:600; letter-spacing:1.7px; } .selo .numero{ font-family:var(--f-impact); font-size:46px; font-weight:600 } .selo .unidade{ font-family:var(--f-display); font-size:10px; font-weight:600; letter-spacing:3.4px; } .credenciais{ list-style:none; margin:0; padding:0 0 0 1.3rem; display:flex; flex-direction:column; gap:.55rem; border-left:1px solid rgba(255,255,255,.16); color:var(--on-dark-2); font-size:.95rem; } .credenciais strong{ color:var(--on-dark); font-weight:600 } @media (max-width: 420px){ /* Selo e credenciais lado a lado tambem no celular. Empilhados, o selo ficava sozinho numa linha com meia tela vazia ao lado. Com o selo em 5,4rem a coluna de texto fica com uns 210px mesmo numa tela de 360px, o bastante para cada credencial caber em duas linhas. */ .prova-hero{ gap:1rem; flex-wrap:nowrap } .selo{ width:5.4rem; height:5.4rem } .credenciais{ padding-left:1rem; font-size:.9rem; gap:.45rem } } /* ---------- showroom ---------- */ .showroom-lede{ margin-top:.8rem; max-width:42rem; color:var(--ink-2) } .showroom-grid{ margin-top:1.8rem; display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; align-items:stretch; } /* Se a foto da fachada faltar (esquecida no deploy, por exemplo), o onerror da imagem marca esta classe e a secao fica so com o mapa, centrado, em vez de mostrar meia grade vazia ou um icone de imagem quebrada. */ .showroom-grid.sem-foto{ grid-template-columns:1fr; max-width:30rem } .showroom-foto{ margin:0 } .showroom-foto img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-sm); } /* Sem fundo, sem borda e sem sombra de proposito. O degrade das bordas do desenho so cumpre o que promete se houver o fundo da secao atras dele: numa moldura branca o mapa apagaria para dentro do cartao e o efeito viraria uma mancha clara com canto reto em volta. Assim ele dissolve na pagina. */ .showroom-mapa{ position:relative } .mapa{ display:block; width:100%; height:auto; aspect-ratio:4/3 } .mapa .asfalto{ fill:#FFFFFF } .mapa .quadra{ fill:#E8E1D6 } .mapa .rua-diagonal{ stroke:#FFFFFF; stroke-width:13 } /* A rua da loja e a unica com cor: e o que leva o olho ao pino sem precisar de seta, legenda nem texto dentro do desenho. */ .mapa .rua-principal{ stroke:var(--accent); stroke-width:13; opacity:.34 } .mapa .pino{ fill:var(--accent-ink) } .mapa .pino-furo{ fill:#FFFFFF } .mapa .pino-halo{ fill:var(--accent); opacity:.18 } .showroom-endereco{ margin-top:1.3rem; display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; } .showroom-endereco p{ color:var(--ink-2); font-size:.95rem } .showroom-endereco strong{ color:var(--ink); font-family:var(--f-display); font-weight:600 } .showroom-endereco .btn{ border-color:var(--rule-strong); background:var(--bg); color:var(--ink) } .showroom-endereco .btn:hover{ border-color:var(--accent); color:var(--accent-ink) } @media (max-width: 700px){ .showroom-grid{ grid-template-columns:1fr } } /* ---------- form widget ---------- */ .form-card{ background:var(--bg); border-radius:calc(var(--radius) * 1.6); box-shadow:var(--shadow-lg); overflow:hidden; max-width:30rem; width:100%; margin:0 auto; } .form-head{ padding:1.3rem 1.4rem .9rem; } .form-head h2{font-size:1.3rem} .progress-track{ height:5px; background:var(--rule); } .progress-fill{ height:100%; background:var(--accent); width:0%; transition:width .3s ease; } .form-body{ padding:1.4rem; min-height:15rem; display:flex; flex-direction:column; } .step-back{ align-self:flex-start; background:none; border:0; padding:0 0 .8rem; font-family:var(--f-body); font-size:.86rem; color:var(--ink-3); cursor:pointer; } .step-back:hover{color:var(--ink-2)} .step-question{font-family:var(--f-display); font-weight:700; font-size:1.16rem; margin-bottom:1.1rem} .option-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; } .option-card{ position:relative; display:flex; flex-direction:column; gap:.5rem; border:1px solid var(--rule); border-radius:var(--radius); background:var(--bg); padding:.6rem; cursor:pointer; text-align:left; font-family:var(--f-body); transition:border-color .12s ease, box-shadow .12s ease; } .option-card:hover{border-color:var(--accent)} .option-card.is-selected{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)} .option-card .thumb{ width:100%; aspect-ratio:4/3; border-radius:calc(var(--radius) - 4px); overflow:hidden; background:var(--surface-2); } .option-card .thumb img{width:100%; height:100%; object-fit:cover} .option-card .label{font-size:.92rem; font-weight:600; color:var(--ink)} /* Sao 5 ambientes numa grade de 2 colunas: a ultima cartela ficava sozinha, com metade da largura e um buraco do lado, com cara de defeito bem no meio do heroi. Sozinha na linha ela ocupa a largura toda e vira uma faixa, com a foto reduzida a uma miniatura. A regra vale para qualquer numero impar de opcoes, entao adicionar ou tirar um ambiente do form.js nao quebra nada. */ .option-card:not(.option-icon):last-child:nth-child(odd){ grid-column:1 / -1; flex-direction:row; align-items:center; gap:.7rem; padding:.55rem .7rem } .option-card:not(.option-icon):last-child:nth-child(odd) .thumb{ width:4.4rem; flex:none } /* Cartelas com ícone, usadas na primeira pergunta (casa ou imóvel comercial). Aproveitam a borda, o hover e o estado selecionado de .option-card; só o miolo muda: no lugar da foto, um ícone grande num disco e o rótulo centrado. Ficam lado a lado inclusive no celular. São duas opções: quebrá-las em duas linhas faria a primeira tela do formulário parecer mais longa do que é, e a primeira tela é onde se perde ou se ganha o visitante. */ .option-icons{ grid-template-columns:1fr 1fr; } .option-card.option-icon{ align-items:center; justify-content:center; text-align:center; gap:.6rem; padding:1.15rem .6rem; } .option-card.option-icon .icone{ display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); transition:background-color .12s ease, color .12s ease; } .option-card.option-icon .icone svg{ width:1.6rem; height:1.6rem } .option-card.option-icon.is-selected .icone{ background:var(--accent); color:#fff } .option-card.option-icon .label{ font-size:.95rem } .option-list{ display:flex; flex-direction:column; gap:.55rem; } .option-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; border:1px solid var(--rule); border-radius:var(--radius); background:var(--bg); padding:.8rem 1rem; cursor:pointer; font-family:var(--f-body); font-size:.96rem; color:var(--ink); text-align:left; transition:border-color .12s ease; } .option-row:hover{border-color:var(--accent)} .option-row.is-selected{border-color:var(--accent); background:var(--accent-soft)} .option-row .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--rule-strong); flex:none; } .option-row.is-selected .dot{border-color:var(--accent); background:var(--accent)} .chip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; } .chip{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--bg); padding:.75rem .6rem; text-align:center; font-family:var(--f-body); font-weight:600; font-size:.9rem; color:var(--ink); cursor:pointer; transition:border-color .12s ease; } .chip:hover{border-color:var(--accent)} /* "Outra cidade" e a 11a opcao numa grade de 2 colunas: sozinha na ultima linha ficaria com metade da largura e cara de sobra. Ocupa a linha inteira e usa borda tracejada para se ler como "nenhuma das acima", nao como cidade. */ .chip-other{grid-column:1 / -1; border-style:dashed; color:var(--ink-2)} .chip-other:hover{color:var(--accent-ink)} .chip.is-selected{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink)} .chip:disabled{cursor:default} .field{ display:flex; flex-direction:column; gap:.4rem; } .field input{ font-family:var(--f-body); font-size:1.02rem; padding:.8rem .2rem; border:none; border-bottom:2px solid var(--rule-strong); background:transparent; color:var(--ink); outline:none; } .field input::placeholder{color:var(--ink-3)} .field input:focus{border-color:var(--accent)} .field-error{ color:var(--bad); font-size:.86rem; display:none; align-items:center; gap:.35rem; } .field.has-error input{border-color:var(--bad)} .field.has-error .field-error{display:flex} .step-continue{ margin-top:1.2rem; } .other-back{ align-self:center; padding:.9rem 0 0; text-decoration:underline } .summary-list{ list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.5rem; } .summary-list li{ display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; border-bottom:1px dashed var(--rule); padding-bottom:.5rem; } .summary-list .k{color:var(--ink-3)} .summary-list .v{color:var(--ink); font-weight:600; text-align:right} .ambiente-badge{ display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1rem; background:var(--accent-soft); color:var(--accent-ink); font-size:.82rem; font-weight:600; padding:.35rem .7rem; border-radius:var(--radius-pill); } .ambiente-badge button{ background:none; border:0; color:inherit; cursor:pointer; font-size:.9em; padding:0 } .whatsapp-fallback{ margin-top:.8rem; font-size:.86rem; text-align:center; color:var(--ink-2) } /* ---------- processo (como funciona) ---------- */ /* Linha do tempo: foto, depois o numero num circulo com um traco que corre ate o numero do passo seguinte, depois titulo e texto. O traco atravessa o vao entre os cartoes (margem negativa do tamanho do vao), entao os quatro numeros parecem uma linha so. */ .processo{ --vao:1.5rem } .processo-lede{ color:var(--ink-2); margin-top:.5rem } .processo-lista{ margin:2rem 0 0; padding:0; list-style:none; display:grid; gap:0 var(--vao); grid-template-columns:repeat(4,1fr); } .passo{ display:flex; flex-direction:column; min-width:0 } .passo-foto{ aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-sm); } .passo-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .passo:hover .passo-foto img{ transform:scale(1.06) } .passo-trilho{ display:flex; align-items:center; margin:1.1rem 0 .8rem } .passo-n{ flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--ink); color:var(--accent); font-family:var(--f-display); font-weight:700; font-size:.95rem; position:relative; z-index:1; } .passo-trilho::after{ content:""; flex:1; height:2px; margin-right:calc(-1 * var(--vao)); background:linear-gradient(90deg, var(--accent), var(--rule-strong)); transform-origin:left center; } .passo:last-child .passo-trilho::after{ display:none } .passo h3{ margin-bottom:.35rem } .passo p{ color:var(--ink-2); font-size:.92rem } /* Entrada em cena (so com .anima, posta pelo script; ver index.html). */ .anima .passo{ opacity:0; transform:translateY(1.6rem); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * .14s); } .anima .passo-trilho::after{ transform:scaleX(0); transition:transform .8s cubic-bezier(.6,0,.2,1); transition-delay:calc(var(--i) * .14s + .45s); } .anima .passo-n{ transform:scale(.4); opacity:0; transition:transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s ease; transition-delay:calc(var(--i) * .14s + .3s); } .anima .processo.visivel .passo, .anima .processo.visivel .passo-n{ opacity:1; transform:none } .anima .processo.visivel .passo-trilho::after{ transform:scaleX(1) } @media (max-width: 860px){ .processo-lista{ grid-template-columns:repeat(2,1fr); row-gap:2rem } /* Em duas colunas o passo da direita nao tem vizinho na mesma linha. */ .passo:nth-child(2n) .passo-trilho::after{ display:none } } @media (max-width: 560px){ /* Celular: linha do tempo vertical. Numero a esquerda, com o traco descendo ate o proximo numero; foto, titulo e texto a direita. */ .processo-lista{ grid-template-columns:1fr; row-gap:0 } .passo{ display:grid; grid-template-columns:2.6rem 1fr; column-gap:1rem; grid-template-areas:"trilho foto" "trilho titulo" "trilho texto"; padding-bottom:1.8rem; } .passo:last-child{ padding-bottom:0 } .passo-foto{ grid-area:foto; aspect-ratio:16/9 } .passo h3{ grid-area:titulo; margin-top:.8rem } .passo p{ grid-area:texto } .passo-trilho{ grid-area:trilho; flex-direction:column; margin:0 } .passo-trilho::after{ width:2px; height:auto; margin:0 0 -1.8rem; background:linear-gradient(180deg, var(--accent), var(--rule-strong)); transform-origin:center top; } .passo:nth-child(2n) .passo-trilho::after{ display:block } .passo:last-child .passo-trilho::after{ display:none } .anima .passo-trilho::after{ transform:scaleY(0) } .anima .processo.visivel .passo-trilho::after{ transform:scaleY(1) } } /* ---------- a Kless: video institucional ---------- */ /* Foto da fabrica ao fundo, escurecida da esquerda (onde fica o texto) para a direita, e com uma aproximacao lenta, quase parada, que da vida sem distrair. A foto e clara (galpao iluminado); sem o veu escuro, o texto branco nao se leria. */ .kless-video{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg-dark); color:var(--on-dark); padding:clamp(4rem,10vw,7rem) 0; } .kless-video::before{ content:""; position:absolute; inset:0; z-index:-2; background:url("images/kless/fabrica.webp") center 40% / cover no-repeat; animation:kless-aproxima 24s ease-in-out infinite alternate; } .kless-video::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.88) 55%, rgba(10,10,10,.5) 100%), linear-gradient(0deg, rgba(10,10,10,.5), transparent 40%); } @keyframes kless-aproxima{ from{ transform:scale(1) } to{ transform:scale(1.08) } } @media (prefers-reduced-motion: reduce){ .kless-video::before{ animation:none } } .kless-video-conteudo{ display:flex; align-items:center; gap:clamp(1.6rem,4vw,3rem) } .kless-play{ flex:none; display:flex; flex-direction:column; align-items:center; gap:.8rem; color:var(--on-dark); text-decoration:none; } .kless-play-disco{ position:relative; display:grid; place-items:center; width:6rem; height:6rem; border-radius:50%; background:var(--accent); color:#0A0A0A; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); transition:transform .2s ease, background-color .2s ease; } .kless-play-disco svg{ margin-left:4px } /* Anel que pulsa para fora do botao: chama o olho para o play sem piscar. */ .kless-play-disco::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); animation:kless-pulso 2.4s ease-out infinite; } @keyframes kless-pulso{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.7); opacity:0 } } @media (prefers-reduced-motion: reduce){ .kless-play-disco::after{ display:none } } .kless-play:hover .kless-play-disco{ transform:scale(1.07); background:#C4A47C } .kless-play-rotulo{ font-family:var(--f-display); font-weight:600; font-size:.82rem; letter-spacing:.04em; color:var(--on-dark-2); } .kless-video-texto{ max-width:36rem } .kless-sobretitulo{ font-family:var(--f-display); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .kless-video h2{ color:var(--on-dark); margin-top:.5rem } .kless-video-texto > p:not(.kless-sobretitulo){ color:var(--on-dark-2); margin-top:.8rem } .kless-numeros{ display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; margin:1.6rem 0 0; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.16); } /* O rotulo vem antes do numero no HTML (le-se "Desde: 2013"), mas na tela o numero fica em cima, grande. */ .kless-numeros div{ display:flex; flex-direction:column-reverse } .kless-numeros dd{ margin:0; font-family:var(--f-impact); font-weight:600; line-height:1; font-size:clamp(2.2rem,5vw,2.8rem); color:var(--on-dark); } .kless-numeros dt{ color:var(--on-dark-2); font-size:.84rem; margin-top:.25rem } @media (max-width: 560px){ .kless-video-conteudo{ flex-direction:column; align-items:flex-start } .kless-play{ flex-direction:row; gap:1rem } .kless-play-disco{ width:4.6rem; height:4.6rem } .kless-play-disco svg{ width:24px; height:24px } .kless-numeros{ gap:1rem 1.8rem } .kless-video::after{ background:linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.88) 35%, rgba(10,10,10,.9) 100%); } } /* Janela do video */ .video-janela{ padding:0; border:0; background:transparent; overflow:visible; width:min(62rem, 92vw); max-width:none; } .video-janela::backdrop{ background:rgba(0,0,0,.82) } .video-quadro{ aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); } .video-quadro iframe{ width:100%; height:100%; border:0; display:block } .video-fechar{ position:absolute; top:-3rem; right:0; width:2.5rem; height:2.5rem; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; font-size:1.6rem; line-height:1; } .video-fechar:hover{ background:rgba(255,255,255,.26) } /* ---------- galeria ---------- */ .gallery-grid{ margin-top:1.8rem; display:grid; gap:.8rem; grid-template-columns:repeat(3,1fr); /* align-items:start e obrigatorio: no stretch padrao do grid a altura do item vira a altura da linha, o aspect-ratio e ignorado e as fotos saem com alturas diferentes umas das outras. */ align-items:start; } /* 4/3 e o enquadramento nativo da maioria das fotos. O 3/4 anterior forcava retrato nas fotos de cozinha e sala e cortava metade do ambiente, justo o que a galeria existe para mostrar. */ .gallery-grid img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-sm) } /* ---------- faq ---------- */ /* Celular: titulo, perguntas e, por ultimo, o "Nao achou sua pergunta?". O convite so faz sentido depois de a pessoa ver as perguntas; antes delas seria pedir contato para quem ainda nem leu. Desktop: titulo e convite numa coluna fixa (sticky) a esquerda, perguntas a direita. Sao 18 perguntas; sem o sticky, a coluna da esquerda ficava vazia por quase toda a altura da secao. O .faq-lado vira display:contents no celular para os filhos dele entrarem direto na fila do flex e o order conseguir separar os dois. */ .faq-layout{ display:flex; flex-direction:column; gap:1.8rem } .faq-lado{ display:contents } .faq-intro{ order:1 } .faq-grupos{ order:2 } .faq-ask{ order:3 } @media (min-width: 920px){ .faq-layout{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:3.5rem; align-items:start } .faq-lado{ display:block; position:sticky; top:1.5rem } .faq-ask{ margin-top:1.8rem } } .faq-ask{ padding:1.2rem 1.3rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--rule); } .faq-ask-titulo{ font-family:var(--f-display); font-weight:600; font-size:1rem; color:var(--ink) } .faq-ask p + p{ margin-top:.3rem; color:var(--ink-2); font-size:.92rem } .faq-ask .btn{ margin-top:1rem } .faq-grupos{ display:flex; flex-direction:column; gap:2rem } .faq-grupo h3{ font-size:1.02rem; margin-bottom:.8rem } /* Abas do FAQ. Criadas pelo script do fim do index.html; sem JavaScript nada disto aparece e os grupos ficam empilhados como acima. */ .faq-grupos.com-abas{ gap:1.1rem } .faq-abas{ display:flex; flex-wrap:wrap; gap:.45rem } .faq-aba{ font-family:var(--f-display); font-weight:600; font-size:.88rem; line-height:1.2; padding:.6rem 1.05rem; border-radius:var(--radius-pill); border:1px solid var(--rule); background:var(--bg); color:var(--ink-2); cursor:pointer; transition:border-color .12s ease, color .12s ease, background-color .12s ease; } .faq-aba:hover{ border-color:var(--accent); color:var(--ink) } .faq-aba[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg) } /* No celular os quatro rotulos nao cabem numa linha: em vez de quebrar torto (tres em cima, um sobrando embaixo), viram uma grade 2x2 de botoes iguais. */ @media (max-width: 560px){ .faq-abas{ display:grid; grid-template-columns:1fr 1fr } .faq-aba{ padding:.65rem .5rem; text-align:center } } .faq-list{ display:flex; flex-direction:column; gap:.5rem } .faq-item{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--bg); overflow:hidden; transition:border-color .12s ease; } .faq-item[open]{ border-color:var(--rule-strong) } .faq-item summary{ cursor:pointer; padding:.95rem 1.1rem; font-family:var(--f-display); font-weight:600; font-size:.96rem; line-height:1.35; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; transition:color .12s ease; } .faq-item summary:hover{ color:var(--accent-ink) } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+'; color:var(--accent-ink); font-size:1.2rem; line-height:1.1; flex:none} .faq-item[open] summary::after{content:'−'} .faq-item .a{padding:0 1.1rem 1.1rem; color:var(--ink-2); font-size:.95rem; line-height:1.65} /* ---------- cta final + footer ---------- */ .cta-final{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg-dark); text-align:center; padding:clamp(2.6rem,6vw,4rem) 0 0; } /* Fundo: render 3D Wireframe técnico de móveis planejados (images/wireframe-3d-projeto.jpg). Camada com opacidade e máscara radial para mesclar harmoniosamente com o fundo escuro mantendo alta legibilidade e impacto visual. */ .cta-final::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url("images/wireframe-3d-projeto.jpg") center center / cover no-repeat; /* .2, menos da metade dos .42 de antes: o render tem de ser textura atras do convite, nao uma figura disputando com o titulo. */ opacity:.2; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%, #000 35%, transparent 100%); mask-image:radial-gradient(ellipse 70% 80% at 50% 45%, #000 35%, transparent 100%); } /* ---------- regua da ultima secao ---------- */ /* De canto a canto: a regua fica fora do .container e encosta no pe da secao (padding de baixo zero), como uma trena apoiada na borda. */ .regua{ position:relative; height:2.7rem; margin-top:2.8rem; --regua:rgba(172,140,102,.8); --mili:1% } .regua-tracos{ position:absolute; left:0; right:0; bottom:0; height:1.15rem; border-bottom:1px solid var(--regua); background: linear-gradient(var(--regua), var(--regua)) right bottom / 1px 100% no-repeat, repeating-linear-gradient(90deg, var(--regua) 0 1px, transparent 1px 10%) left bottom / 100% 100% no-repeat, repeating-linear-gradient(90deg, rgba(172,140,102,.6) 0 1px, transparent 1px 5%) left bottom / 100% 62% no-repeat, repeating-linear-gradient(90deg, rgba(172,140,102,.38) 0 1px, transparent 1px var(--mili)) left bottom / 100% 34% no-repeat; } .regua-nums{ position:absolute; left:0; right:0; top:0 } .regua-nums span{ position:absolute; left:calc(var(--i) * 10%); transform:translateX(-50%); font-family:var(--f-display); font-size:.68rem; letter-spacing:.04em; color:var(--on-dark-2); white-space:nowrap; } /* Com a regua indo de uma borda a outra, o 0 e o 100 ficariam metade para fora da tela se continuassem centrados no traco. Os dois das pontas se alinham para dentro, encostados no traco da borda. */ .regua-nums span:first-child{ transform:none; margin-left:.4rem } .regua-nums span:last-child{ transform:translateX(-100%); margin-left:-.4rem } @media (max-width: 520px){ /* Num celular, traco a cada 1% da largura fica a 3 px um do outro e vira uma faixa cinza. A 2% ainda se le como regua. Os numeros tambem saltam de 20 em 20 pelo mesmo motivo. */ .regua{ --mili:2% } .regua-nums span:nth-child(even){ display:none } } .cta-final h2{color:var(--on-dark)} .cta-final p{color:var(--on-dark-2); margin:.8rem 0 1.6rem} .site-footer{ padding:2rem 0; } .site-footer .container{ display:flex; flex-direction:column; gap:.4rem; } .site-footer p{ color:var(--ink-3); font-size:.82rem; } .site-footer a{ color:var(--ink-2) } /* Selos do rodape. O [hidden] precisa de regra propria: a regra global img{display:block} venceria o display:none padrao do navegador, e um selo marcado como escondido apareceria mesmo assim. */ .selos{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:.9rem } .selos img{ height:48px; width:auto } .selos [hidden]{ display:none } .selo-lgpd{ display:inline-flex; border-radius:6px } /* ---------- pagina de privacidade ---------- */ .doc{ padding:clamp(2rem,5vw,3.6rem) 0 } .doc .container{ max-width:44rem } .doc h1{ font-size:clamp(1.7rem,4vw,2.3rem) } .doc .atualizada{ margin-top:.5rem; color:var(--ink-3); font-size:.9rem } .doc h2{ font-size:1.2rem; margin-top:2.2rem } .doc h3{ font-size:1rem; margin-top:1.4rem } .doc p, .doc ul{ margin-top:.7rem; color:var(--ink-2) } .doc ul{ padding-left:1.2rem } .doc li + li{ margin-top:.35rem } .doc strong{ color:var(--ink) } .doc .voltar{ display:inline-block; margin-top:2.4rem } @media (max-width: 860px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} } /* ---------- fallback sem formulario ---------- */ /* O formulario inteiro e renderizado por form.js. Se o script falhar, for bloqueado por extensao ou a rede cair no meio, o card ficava vazio e a landing convertia zero, o que e caro numa pagina de trafego pago. Nasce com [hidden]; quem o revela e o