/* Estilos não críticos — abaixo da dobra. Cores, reset, topo e herói estão inline no do index.html. */ /* ---------- Blocos de seção ---------- */ .secao{padding:72px 0;border-top:1px solid var(--borda)} .secao__titulo{font-size:clamp(1.6rem,4.5vw,2.3rem)} .secao__descricao{color:var(--texto-suave);max-width:60ch;margin:0 0 32px} .secao__descricao strong{color:var(--texto)} .secao__cabecalho{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px} .secao__cabecalho .secao__titulo{margin:0} .botao--pequeno{padding:10px 20px;font-size:.88rem} .cartao{ background:var(--fundo-cartao); border:1px solid var(--borda); border-radius:var(--raio); padding:26px; } .cartao h3{font-size:1.15rem} .cartao p{color:var(--texto-suave);margin:0 0 12px} .cartao p:last-child{margin-bottom:0} .lista{list-style:none;margin:0;padding:0;display:grid;gap:10px} .lista li{position:relative;padding-left:26px;color:var(--texto-suave)} .lista li::before{ content:"";position:absolute;left:0;top:.6em; width:8px;height:8px;border-radius:50%;background:var(--acento); } .lista--linha{margin-top:18px} /* ---------- 1b. Vitrine: também entregamos, com imagem rotativa ---------- */ .vitrine{padding:8px 0 64px} .vitrine__grade{display:grid;gap:32px;align-items:center} .vitrine__legenda{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-marcador);margin:0 0 16px} .vitrine__lista{display:grid;gap:10px} .vitrine__item{ display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer; background:transparent;border:1px solid transparent;border-radius:var(--raio); padding:16px 18px;transition:background .2s ease,border-color .2s ease; } .vitrine__item h3{font-size:1rem;margin:0 0 4px;color:var(--texto-suave);transition:color .2s ease} .vitrine__item p{ font-size:.88rem;color:var(--texto-marcador);margin:0; max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease; } .vitrine__item:hover{background:var(--fundo-cartao)} .vitrine__item.is-ativo{background:var(--fundo-cartao);border-color:rgba(51,153,137,.4)} .vitrine__item.is-ativo h3{color:var(--texto)} .vitrine__item.is-ativo p{max-height:4em;opacity:1;margin-top:4px} .vitrine__visual{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid var(--borda);background:var(--fundo-cartao);display:flex;align-items:center;justify-content:center} .vitrine__quadro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease} .vitrine__quadro.is-ativo{opacity:1} .vitrine__quadro img{width:100%;height:100%;object-fit:contain} .vitrine__quadro--pendente{display:grid;place-items:center;background:linear-gradient(150deg,rgba(51,153,137,.16),var(--fundo-cartao))} .vitrine__quadro--pendente::after{content:attr(data-legenda);color:var(--texto-marcador);font-size:.85rem;letter-spacing:.04em} @media (min-width:860px){ .vitrine__grade{grid-template-columns:1fr 1fr;gap:48px} } @media (prefers-reduced-motion:reduce){ .vitrine__quadro{transition:none} } /* ---------- 2. Prova social ---------- */ .prova{border-top:1px solid var(--borda)} .prova__grade{ display:grid;grid-template-columns:repeat(2,1fr); background:var(--fundo-cartao);border:1px solid var(--borda);border-radius:var(--raio); margin:36px auto;gap:20px;padding:28px 20px; } .prova__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;padding:14px 0 0 0} .prova__item:nth-child(-n+2){padding-top:0} .prova__item::before{content:"";position:absolute;left:0;top:14px;bottom:0;width:1px;background:var(--borda)} .prova__item:nth-child(odd)::before{display:none} .prova__item strong{font-size:1.9rem;letter-spacing:-.02em;color:var(--destaque);font-family:var(--fonte-titulo)} .prova__item span{font-size:.85rem;color:var(--texto-suave);line-height:1.35} /* ---------- 3. Problema → solução ---------- */ .colunas{display:grid;gap:18px} .cartao--dor{border-color:var(--borda-dor)} .cartao--dor .lista li::before{background:var(--erro)} .cartao--solucao{border-color:var(--borda-solucao)} .cartao--solucao .lista li::before{background:var(--destaque)} /* ---------- 4. Serviços ---------- */ .cartao--destaque{ border-color:rgba(51,153,137,.45); background:linear-gradient(160deg,rgba(51,153,137,.12),var(--fundo-cartao) 60%); padding:32px; margin-bottom:18px; position:relative;overflow:hidden; } .cartao--destaque::before{ content:"";position:absolute;top:-70px;right:-70px;width:220px;height:220px; background:radial-gradient(circle,rgba(125,226,209,.25),transparent 70%); animation:flutuar 8s ease-in-out infinite;pointer-events:none; } .cartao--destaque h3{font-size:clamp(1.3rem,3.4vw,1.7rem)} .etiqueta{ position:relative;display:inline-flex;align-items:center;gap:6px; font-size:.72rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--acento); background:rgba(51,153,137,.14);padding:6px 14px;border-radius:999px;margin:0 0 16px; } .cartao--destaque .lista--linha{list-style:none} .cartao--destaque .lista--linha li::before{content:"✓";position:static;width:auto;height:auto;border-radius:0;background:none;color:var(--destaque);font-weight:700;margin-right:8px} .cartao--destaque .lista--linha li{padding-left:0;color:var(--texto)} .servicos__legenda{ font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--texto-marcador);margin:0 0 14px; } .grade-servicos{display:grid;gap:18px} .cartao--secundario{background:transparent;padding:20px} .cartao--secundario h3{font-size:1rem;margin-bottom:6px} .cartao--secundario p{font-size:.9rem} /* ---------- 5. Processo ---------- */ .passos{list-style:none;margin:0;padding:0;display:grid;gap:18px} .passo{ background:var(--fundo-cartao);border:1px solid var(--borda); border-radius:var(--raio);padding:26px; } .passo h3{font-size:1.15rem;margin-top:14px} .passo p{color:var(--texto-suave);margin:0} .passo__numero{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%; background:rgba(51,153,137,.14);border:1px solid rgba(51,153,137,.4); color:var(--acento);font-weight:700; } /* ---------- 6. Projetos ---------- */ .grade-projetos{display:grid;gap:18px} .projeto__imagem{ border-radius:10px;overflow:hidden;border:1px solid var(--borda); margin:-6px 0 18px;background:var(--fundo);aspect-ratio:8/5; } .projeto__imagem img{width:100%;height:100%;object-fit:cover;object-position:top center} .projeto__imagem--pendente{ display:grid;place-items:center; background:linear-gradient(150deg,rgba(51,153,137,.16),var(--fundo-cartao)); } .projeto__imagem--pendente::after{ content:"Print do projeto"; color:var(--texto-marcador);font-size:.85rem;letter-spacing:.04em; } .projeto__marcadores{font-size:.82rem;color:var(--destaque)} .cartao--vazio{ border-style:dashed;display:flex;flex-direction:column;justify-content:center; } .atalho{color:var(--acento);text-decoration:none;font-weight:600} .atalho:hover{text-decoration:underline} /* ---------- 7. Preço ---------- */ .preco{ background:var(--fundo-cartao);border:1px solid var(--borda);border-radius:var(--raio); padding:32px;display:grid;gap:24px;align-items:center; } .preco .secao__titulo{margin-bottom:16px} .preco__valor{color:var(--destaque);white-space:nowrap} /* ---------- 8. Perguntas frequentes ---------- */ .perguntas{display:grid;gap:10px;max-width:760px} .perguntas details{ background:var(--fundo-cartao);border:1px solid var(--borda); border-radius:10px;padding:2px 20px; } .perguntas summary{ cursor:pointer;font-weight:600;padding:16px 0;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:16px; } .perguntas summary::-webkit-details-marker{display:none} .perguntas summary::after{content:"+";color:var(--acento);font-size:1.3rem;line-height:1} .perguntas details[open] summary::after{content:"–"} .perguntas summary:focus-visible{outline:2px solid var(--destaque);outline-offset:4px;border-radius:6px} .perguntas p{color:var(--texto-suave);margin:0 0 18px} /* ---------- 9. Chamada final + formulário ---------- */ .secao--chamada{ background:radial-gradient(120% 100% at 50% 0,rgba(51,153,137,.16),transparent 60%); } .chamada{max-width:660px} .chamada h2{font-size:clamp(1.7rem,5vw,2.5rem)} .formulario{display:grid;gap:16px;margin-top:8px} .campo{display:grid;gap:7px} .campo label{font-size:.9rem;font-weight:600} .campo input,.campo textarea{ width:100%;padding:14px 16px;border-radius:10px; background:var(--fundo-cartao);border:1px solid var(--borda); color:var(--texto);font:inherit;resize:vertical; } .campo input::placeholder,.campo textarea::placeholder{color:var(--texto-marcador)} .campo input:focus,.campo textarea:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:transparent} .botao--largo{width:100%;padding:16px 22px;font-size:1rem} .formulario__nota{font-size:.83rem;color:var(--texto-suave);margin:0;text-align:center} .formulario__erro{ margin:0;color:var(--erro-texto);font-size:.9rem; background:rgba(229,112,126,.1);border:1px solid rgba(229,112,126,.35); border-radius:8px;padding:10px 14px; } /* ---------- Rodapé + botão flutuante ---------- */ .rodape{border-top:1px solid var(--borda);padding:30px 0;color:var(--texto-suave);font-size:.9rem} .rodape__grade{display:grid;gap:8px} .rodape p{margin:0} .rodape a{color:var(--destaque);text-decoration:none} .marca--rodape svg{height:20px;opacity:.75} .flutuante{ position:fixed;right:20px;bottom:20px;z-index:30; display:inline-flex;align-items:center;justify-content:center; width:58px;height:58px;border-radius:50%;text-decoration:none; background:var(--destaque);color:var(--destaque-contraste); box-shadow:0 10px 26px rgba(0,0,0,.4); opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .25s ease,transform .25s ease,background .15s ease; } .flutuante.visivel{opacity:1;transform:none;pointer-events:auto;animation:pulsarAnel 2.6s infinite} .flutuante:hover{background:#6ad3c1;transform:scale(1.06)} .flutuante:focus-visible{outline:2px solid var(--texto);outline-offset:3px} /* ---------- Animação de entrada ---------- */ .revelar{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease} .revelar.visivel{opacity:1;transform:none} /* ---------- Pontos de quebra ---------- */ @media (min-width:640px){ .prova__grade{grid-template-columns:repeat(4,1fr)} .prova__item{padding-top:0} .prova__item:nth-child(odd)::before{display:block} .prova__item:first-child::before{display:none} .rodape__grade{grid-template-columns:1fr auto auto;align-items:center;gap:24px} } @media (min-width:860px){ .secao{padding:96px 0} .colunas{grid-template-columns:1fr 1fr;gap:20px} .grade-servicos{grid-template-columns:repeat(4,1fr)} .passos{grid-template-columns:repeat(3,1fr)} .grade-projetos{grid-template-columns:1fr 1fr} .preco{grid-template-columns:1fr auto;padding:44px} .cartao--destaque .lista--linha{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .revelar{opacity:1;transform:none} }