/* ========================================================================== Be Auron — blocos novos (serviços, provas, chat multi, consentimento). Estende reset → tokens → layout → components. Mesma identidade visual. ========================================================================== */ /* -------------------------------------------------------------------------- REDE DE SEGURANÇA O marca .js e, se main.js não sinalizar em 2,5s, marca .anim-failed. Sem JS ou com JS quebrado, o conteúdo aparece — nunca página em branco. -------------------------------------------------------------------------- */ html:not(.js) .reveal, html:not(.js) .pstep, html:not(.js) .svc, html.anim-failed .reveal, html.anim-failed .pstep, html.anim-failed .svc, html.anim-failed .split-lines span, html.anim-failed .word{ opacity:1 !important;transform:none !important; } html:not(.js) .split-lines span, html:not(.js) .word{opacity:1 !important;transform:none !important} /* -------------------------------------------------------------------------- NAV — botão mobile -------------------------------------------------------------------------- */ .nav-toggle{ display:none;background:none;border:0;cursor:pointer;padding:8px; color:inherit;width:40px;height:40px;position:relative;z-index:60; } .nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;margin:4px auto;transition:transform .3s var(--ease),opacity .2s} /* painel aberto e' sempre escuro: o X precisa ser claro, senao herda a cor do .nav (escura quando .is-light) e some sobre o preto */ .nav-links.is-open ~ .nav-toggle{color:var(--text-hi)} .nav-links.is-open ~ .nav-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .nav-links.is-open ~ .nav-toggle span:nth-child(2){opacity:0} .nav-links.is-open ~ .nav-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* A barra completa cabe ate ~600px (marca 67 + links 436 + gutter + respiro). Colapsar antes disso escondia opcoes que ainda tinham espaco de sobra. */ @media (max-width:600px){ .nav-toggle{display:block} .nav-links{ /* o backdrop-filter da .nav cria containing block para position:fixed, entao este painel se posiciona pela .nav (~76px), nao pela viewport. Com inset:0 a caixa ficava do tamanho da .nav, o conteudo transbordava e o translateY(-100%) so movia 76px -- sobravam os ultimos itens a vista entre 641 e 860px. Altura de viewport explicita faz o -100% esconder o painel inteiro. */ position:fixed;top:0;left:0;right:0; height:100vh;height:100dvh; background:var(--ink);flex-direction:column; justify-content:center;align-items:center;gap:28px;font-size:1.4rem; transform:translateY(-100%);transition:transform .45s var(--ease); padding:var(--gutter);overflow-y:auto; } .nav-links.is-open{transform:none} .nav-links a{color:var(--text-hi)} } /* -------------------------------------------------------------------------- SERVIÇOS — blocos de apresentação (home) -------------------------------------------------------------------------- */ .svc-list{display:flex;flex-direction:column;gap:0;margin-top:clamp(48px,7vh,88px)} .svc{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,80px);align-items:start; padding:clamp(44px,6vh,72px) 0; border-top:1px solid var(--hairline-light); opacity:0;transform:translateY(24px); } .section-dark .svc{border-top-color:var(--hairline-dark)} .svc:last-child{border-bottom:1px solid var(--hairline-light)} .section-dark .svc:last-child{border-bottom-color:var(--hairline-dark)} .svc.is-in{opacity:1;transform:none} .svc-head{display:flex;flex-direction:column;gap:14px;position:sticky;top:104px} .svc-n{ font-family:var(--font-display);font-size:.82rem;font-weight:600;letter-spacing:.16em; color:var(--accent); } .section-light .svc-n{color:var(--ink-text-lo)} .svc-title{font-size:clamp(1.75rem,3.4vw,2.75rem);letter-spacing:-.03em;line-height:1.06} .svc-sub{font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.55;color:var(--text-md);max-width:36ch} .section-light .svc-sub{color:var(--ink-text-md)} .lede strong{color:var(--text-hi);font-weight:600} .section-light .lede strong{color:var(--ink-text-hi)} /* -------------------------------------------------------------------------- SELEÇÃO NA PÁGINA Antes a escolha de serviços só existia dentro do chat, a dois cliques de distância. Ninguém achava. Agora ela é visível no próprio bloco. -------------------------------------------------------------------------- */ .svc-pick{ display:inline-flex;align-items:center;gap:11px;align-self:flex-start; margin-top:4px;padding:11px 20px 11px 14px;border-radius:100px;cursor:pointer; background:transparent;border:1px solid var(--hairline-light); font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--ink-text-md); transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease); } .section-dark .svc-pick{border-color:var(--hairline-dark);color:var(--text-md)} .svc-pick:hover{border-color:var(--ink-text-hi);color:var(--ink-text-hi)} .svc-pick:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .svc-pick-box{ width:18px;height:18px;flex:none;border-radius:6px;position:relative; border:1.5px solid var(--ink-text-lo);transition:background .25s,border-color .25s; } .section-dark .svc-pick-box{border-color:var(--text-lo)} .svc-pick[aria-pressed="true"]{ background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600; } .svc-pick[aria-pressed="true"] .svc-pick-box{background:var(--ink);border-color:var(--ink)} .svc-pick[aria-pressed="true"] .svc-pick-box::after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(43deg); } /* -------------------------------------------------------------------------- BARRA DE SELEÇÃO — aparece quando há ao menos um serviço marcado -------------------------------------------------------------------------- */ .pickbar{ position:fixed;left:var(--gutter);right:var(--gutter);bottom:22px;z-index:80; max-width:640px;margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:16px 18px 16px 24px;border-radius:100px; background:rgba(14,14,16,.97);border:1px solid rgba(232,255,107,.35); box-shadow:0 18px 50px -18px rgba(0,0,0,.8); backdrop-filter:blur(12px); transform:translateY(160%);opacity:0; transition:transform .5s var(--ease),opacity .35s var(--ease); } .pickbar.is-in{transform:none;opacity:1} .pickbar-txt{font-size:.92rem;color:var(--text-md);white-space:nowrap} .pickbar-txt b{ font-family:var(--font-display);font-size:1.15rem;font-weight:600; color:var(--accent);margin-right:4px; } .pickbar-acoes{display:flex;align-items:center;gap:14px} .pickbar-limpar{ background:none;border:0;cursor:pointer;padding:6px 2px; font-family:var(--font-body);font-size:.85rem;color:var(--text-lo); text-decoration:underline;text-underline-offset:3px; } .pickbar-limpar:hover{color:var(--text-hi)} .pickbar .btn{white-space:nowrap} @media (max-width:560px){ .pickbar{border-radius:var(--radius);padding:16px 18px;justify-content:center;text-align:center} .pickbar-acoes{width:100%;justify-content:space-between} .pickbar .btn{flex:1;justify-content:center} } .svc-body{display:flex;flex-direction:column;gap:26px;padding-top:6px} .svc-desc{font-size:1.02rem;line-height:1.7;color:var(--text-md);max-width:58ch} .section-light .svc-desc{color:var(--ink-text-md)} .svc-desc strong{color:var(--text-hi);font-weight:500} .section-light .svc-desc strong{color:var(--ink-text-hi)} .svc-items{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px} .svc-items li{ position:relative;padding-left:20px;font-size:.95rem;line-height:1.45;color:var(--text-md); } .section-light .svc-items li{color:var(--ink-text-md)} .svc-items li::before{ content:"";position:absolute;left:0;top:.55em;width:7px;height:7px; background:var(--accent);border-radius:1px; } .section-light .svc-items li::before{background:var(--ink-text-hi)} .svc-link{ display:inline-flex;align-items:center;gap:9px;align-self:flex-start; font-size:.92rem;font-weight:500;letter-spacing:.01em; color:var(--text-hi);border-bottom:1px solid var(--hairline-dark);padding-bottom:5px; transition:border-color .3s,gap .3s; } .section-light .svc-link{color:var(--ink-text-hi);border-bottom-color:var(--hairline-light)} .svc-link:hover{border-bottom-color:var(--accent);gap:14px} @media (max-width:860px){ .svc{grid-template-columns:1fr;gap:24px} .svc-head{position:static} .svc-items{grid-template-columns:1fr} } /* -------------------------------------------------------------------------- COMPOSIÇÃO — como os serviços se somam -------------------------------------------------------------------------- */ .compose{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(40px,6vh,64px)} .compose-card{ border:1px solid var(--hairline-dark);border-radius:var(--radius); padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px; background:rgba(255,255,255,.02); } .section-light .compose-card{border-color:var(--hairline-light);background:rgba(0,0,0,.015)} .compose-tag{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .section-light .compose-tag{color:var(--ink-text-lo)} .compose-card h3{font-size:1.18rem;letter-spacing:-.02em} .compose-card p{font-size:.95rem;line-height:1.6;color:var(--text-md)} .section-light .compose-card p{color:var(--ink-text-md)} .compose-path{ font-family:var(--font-display);font-size:.86rem;color:var(--text-lo); margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline-dark); } .section-light .compose-path{color:var(--ink-text-lo);border-top-color:var(--hairline-light)} @media (max-width:820px){.compose{grid-template-columns:1fr}} /* -------------------------------------------------------------------------- PROVA — números e cases -------------------------------------------------------------------------- */ .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px; background:var(--hairline-dark);border:1px solid var(--hairline-dark);border-radius:var(--radius);overflow:hidden; margin-top:clamp(36px,5vh,56px)} .metric{background:var(--ink);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:8px} .section-light .metrics{background:var(--hairline-light);border-color:var(--hairline-light)} .section-light .metric{background:var(--paper)} .metric-v{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1} .metric-l{font-size:.86rem;line-height:1.45;color:var(--text-lo)} .metric-l b{font-weight:600;color:var(--text-md)} .section-light .metric-l{color:var(--ink-text-lo)} .section-light .metric-l b{color:var(--ink-text-md)} .case{ border-top:1px solid var(--hairline-dark);padding:clamp(32px,4.5vh,52px) 0; display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px); } .section-light .case{border-top-color:var(--hairline-light)} .case:last-child{border-bottom:1px solid var(--hairline-dark)} .section-light .case:last-child{border-bottom-color:var(--hairline-light)} .case-meta{display:flex;flex-direction:column;gap:10px} .case-cliente{font-family:var(--font-display);font-size:1.24rem;font-weight:600;letter-spacing:-.02em} .case-seg{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lo)} .section-light .case-seg{color:var(--ink-text-lo)} .case-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px} .case-tag{font-size:.72rem;letter-spacing:.06em;padding:5px 11px;border-radius:100px; border:1px solid var(--hairline-dark);color:var(--text-md)} .section-light .case-tag{border-color:var(--hairline-light);color:var(--ink-text-md)} .case-body{display:flex;flex-direction:column;gap:18px} .case-body h3{font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.02em;line-height:1.25} .case-body p{font-size:.99rem;line-height:1.68;color:var(--text-md)} .section-light .case-body p{color:var(--ink-text-md)} .case-num{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);padding-top:6px} .case-num div{display:flex;flex-direction:column;gap:3px} .case-num b{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--accent)} .section-light .case-num b{color:var(--ink-text-hi)} .case-num span{font-size:.8rem;color:var(--text-lo)} .section-light .case-num span{color:var(--ink-text-lo)} /* sistemas satélites dentro de um case */ .case-sub-t{ margin-top:26px;font-size:.72rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--accent); } .section-light .case-sub-t{color:var(--ink-text-lo)} .case-sub{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:0} .case-sub li{ display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;gap:8px 24px; padding:16px 0;border-top:1px solid var(--hairline-dark); } .section-light .case-sub li{border-top-color:var(--hairline-light)} .case-sub b{ font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.015em; color:var(--text-hi); } .section-light .case-sub b{color:var(--ink-text-hi)} .case-sub span{font-size:.93rem;line-height:1.6;color:var(--text-md)} .section-light .case-sub span{color:var(--ink-text-md)} @media (max-width:700px){.case-sub li{grid-template-columns:1fr;gap:6px}} /* fecho curto depois de uma lista dentro do case */ .case-nota{ margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline-dark); font-size:.95rem;line-height:1.6;color:var(--text-md); } .section-light .case-nota{border-top-color:var(--hairline-light);color:var(--ink-text-md)} .case-nota strong{color:var(--text-hi);font-weight:500} .section-light .case-nota strong{color:var(--ink-text-hi)} @media (max-width:820px){.case{grid-template-columns:1fr;gap:20px}} /* -------------------------------------------------------------------------- PÁGINA DE SERVIÇO -------------------------------------------------------------------------- */ .svc-hero{padding-top:clamp(140px,18vh,220px)} .svc-hero .eyebrow{margin-bottom:18px} .crumb{display:flex;gap:10px;align-items:center;font-size:.82rem;color:var(--text-lo);margin-bottom:26px} .section-light .crumb{color:var(--ink-text-lo)} .crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.2)} .section-dark .crumb a{text-decoration-color:rgba(255,255,255,.25)} .problema{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.6vw,30px);margin-top:clamp(36px,5vh,56px)} .problema-item{border-left:2px solid var(--accent);padding:4px 0 4px 20px} .section-light .problema-item{border-left-color:var(--ink-text-hi)} .problema-item h3{font-size:1.05rem;margin-bottom:8px;letter-spacing:-.015em} .problema-item p{font-size:.94rem;line-height:1.6;color:var(--text-md)} .section-light .problema-item p{color:var(--ink-text-md)} .entrega{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px; background:var(--hairline-dark);border:1px solid var(--hairline-dark);border-radius:var(--radius); overflow:hidden;margin-top:clamp(36px,5vh,56px)} .section-light .entrega{background:var(--hairline-light);border-color:var(--hairline-light)} .entrega-item{background:var(--ink);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:11px} .section-light .entrega-item{background:var(--paper)} .entrega-item h3{font-size:1.06rem;letter-spacing:-.015em} .entrega-item p{font-size:.93rem;line-height:1.6;color:var(--text-md)} .section-light .entrega-item p{color:var(--ink-text-md)} .fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vh,56px)} .fit-col{border:1px solid var(--hairline-dark);border-radius:var(--radius);padding:clamp(24px,3vw,34px)} .section-light .fit-col{border-color:var(--hairline-light)} .fit-col h3{font-size:1.1rem;margin-bottom:16px;letter-spacing:-.015em} .fit-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .fit-col li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.5;color:var(--text-md)} .section-light .fit-col li{color:var(--ink-text-md)} .fit-yes li::before{content:"→";position:absolute;left:0;color:var(--accent)} .fit-no li::before{content:"—";position:absolute;left:0;color:var(--text-lo)} .section-light .fit-yes li::before{color:var(--ink-text-hi)} @media (max-width:760px){.fit{grid-template-columns:1fr}} .combina{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .combina a{ display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:100px; border:1px solid var(--hairline-dark);font-size:.9rem;color:var(--text-md);transition:border-color .3s,color .3s; } .section-light .combina a{border-color:var(--hairline-light);color:var(--ink-text-md)} .combina a:hover{border-color:var(--accent);color:var(--text-hi)} .section-light .combina a:hover{border-color:var(--ink-text-hi);color:var(--ink-text-hi)} /* -------------------------------------------------------------------------- CHAT — seleção múltipla e resumo -------------------------------------------------------------------------- */ /* O rodapé do chat vira coluna flex: a lista de opções rola por dentro e o botão de confirmar fica sempre visível. Sem isto, cinco serviços empurram o botão para fora da caixa. */ .chat-foot{display:flex;flex-direction:column;gap:0;overflow:hidden !important;max-height:60% !important} .chat-multi{ display:flex;flex-direction:column;gap:8px;margin-bottom:14px; flex:1 1 auto;min-height:0;overflow-y:auto;max-height:none; } .chat-multi::-webkit-scrollbar{width:6px} .chat-multi::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px} .chat-confirm{flex:0 0 auto} .multi-op{ display:flex;align-items:flex-start;gap:13px;text-align:left;width:100%; padding:14px 16px;border-radius:var(--radius-sm);cursor:pointer; border:1px solid var(--hairline-dark);background:rgba(255,255,255,.02); color:var(--text-hi);transition:border-color .25s,background .25s; } .multi-op:hover{border-color:rgba(232,255,107,.4)} .multi-op.is-on{border-color:var(--accent);background:var(--accent-soft)} .multi-check{ flex:none;width:18px;height:18px;border-radius:5px;margin-top:1px; border:1.5px solid var(--text-lo);position:relative;transition:background .25s,border-color .25s; } .multi-op.is-on .multi-check{background:var(--accent);border-color:var(--accent)} .multi-op.is-on .multi-check::after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(43deg); } .multi-txt{display:flex;flex-direction:column;gap:3px} .multi-txt b{font-weight:500;font-size:.97rem} .multi-txt small{font-size:.83rem;color:var(--text-lo);line-height:1.4} .chat-confirm{width:100%;justify-content:center} .chat-confirm:disabled{opacity:.4;cursor:not-allowed} .chat-resumo{ align-self:flex-start;max-width:88%;margin-top:6px;padding:16px 18px; border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-soft); } .chat-resumo-t{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .chat-resumo ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} .chat-resumo li{font-size:.95rem;color:var(--text-hi);padding-left:16px;position:relative} .chat-resumo li::before{content:"→";position:absolute;left:0;color:var(--accent)} .chat-final-acoes{display:flex;gap:10px;flex-wrap:wrap;width:100%} .chat-final-acoes .btn{flex:1;justify-content:center;min-width:150px} .chat-err{font-size:.83rem;color:#FF8A8A;margin-top:8px} input.is-err{border-color:#FF8A8A !important} /* -------------------------------------------------------------------------- CONSENTIMENTO (LGPD) -------------------------------------------------------------------------- */ .consent{ position:fixed;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:90; max-width:660px;margin-inline:auto; display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding:18px 22px;border-radius:var(--radius); background:rgba(14,14,16,.96);border:1px solid var(--hairline-dark); backdrop-filter:blur(10px); transform:translateY(140%);opacity:0;transition:transform .5s var(--ease),opacity .4s; } .consent.is-in{transform:none;opacity:1} .consent-txt{font-size:.85rem;line-height:1.55;color:var(--text-md);flex:1;min-width:240px} .consent-txt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .consent-btns{display:flex;gap:9px} .btn-sm{padding:9px 18px !important;font-size:.84rem !important} /* -------------------------------------------------------------------------- BLOG — lista em linhas -------------------------------------------------------------------------- */ .blog-rows{display:flex;flex-direction:column;margin-top:clamp(32px,4vh,48px)} .blog-row{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding:24px 0;border-top:1px solid var(--hairline-light);transition:padding-left .3s var(--ease); } .section-dark .blog-row{border-top-color:var(--hairline-dark)} .blog-row:last-child{border-bottom:1px solid var(--hairline-light)} .section-dark .blog-row:last-child{border-bottom-color:var(--hairline-dark)} .blog-row:hover{padding-left:10px} .blog-row h3{font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.02em;font-weight:500} .blog-row-meta{font-size:.8rem;color:var(--text-lo);white-space:nowrap} .section-light .blog-row-meta{color:var(--ink-text-lo)} .blog-arrow{font-size:1.1rem;color:var(--text-lo);flex:none} /* -------------------------------------------------------------------------- Utilidades -------------------------------------------------------------------------- */ /* Esconde de olho, mantém para leitor de tela e para o honeypot anti-bot. Sem esta classe o campo isca do chat renderiza como uma barra branca. */ .visually-hidden{ position:absolute !important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .narrow{max-width:860px;margin-inline:auto} .stack-lg{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,26px)} .mt-lg{margin-top:clamp(36px,5vh,56px)}