/* ═══ CONFIGURAÇÃO — mude aqui e o site inteiro acompanha ═══════════════ */ /* WhatsApp e e-mail estão em data-attributes no , lá embaixo. */ :root{ --grafite:#1a1815; --grafite-2:#241f1a; --terra:#3d2f24; --ocre:#c8873f; --ocre-claro:#e8b273; --areia:#f5f1ea; --areia-2:#eae3d7; --pedra:#8a8178; --pedra-clara:#b8afa4; --display:'Fraunces',Georgia,'Times New Roman',serif; --corpo:'Archivo','Helvetica Neue',Helvetica,sans-serif; --medida:70ch; --borda:1px solid color-mix(in srgb,var(--ocre) 22%,transparent); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--corpo); font-size:clamp(1rem,.96rem + .2vw,1.09rem); line-height:1.62; color:var(--areia); background:var(--grafite); -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.02em;margin:0} p{margin:0} a{color:inherit} img,svg{display:block;max-width:100%} /* ═══ Textura: grão + estratos ═════════════════════════════════════════ */ .grao{ position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } .faixa{position:relative;isolation:isolate} .faixa::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:repeating-linear-gradient( to bottom, transparent 0 3px, color-mix(in srgb,var(--ocre) 6%,transparent) 3px 4px ); opacity:.55; } .faixa--clara{background:var(--areia);color:var(--terra)} .faixa--clara::before{background-image:repeating-linear-gradient(to bottom,transparent 0 3px,color-mix(in srgb,var(--terra) 5%,transparent) 3px 4px)} .faixa--clara h1,.faixa--clara h2,.faixa--clara h3{color:var(--grafite)} .env{width:min(1120px,100% - 2.5rem);margin-inline:auto} section{padding:clamp(4.5rem,10vw,8.5rem) 0} /* rótulo tipo marcação de sondagem */ .rotulo{ font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ocre);display:flex;align-items:center;gap:.85rem;margin-bottom:1.75rem; } .rotulo::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--ocre) 45%,transparent),transparent)} .faixa--clara .rotulo{color:#a06a28} .faixa--clara .rotulo::after{background:linear-gradient(90deg,color-mix(in srgb,#a06a28 40%,transparent),transparent)} /* ═══ Cabeçalho ════════════════════════════════════════════════════════ */ header{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--grafite) 88%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--ocre) 14%,transparent); } .header-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0} .marca{display:flex;align-items:center;gap:.7rem;text-decoration:none} .marca svg{width:34px;height:34px;flex:none} .marca .lockup{display:flex;flex-direction:column;line-height:1} .marca .lockup b{font-family:var(--display);font-size:1.32rem;font-weight:700;letter-spacing:-.035em} .marca .lockup i{font-style:normal;font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ocre);margin-top:.22rem} @media(max-width:400px){.marca .lockup b{font-size:1.15rem}.marca .lockup i{letter-spacing:.18em}} .header-cta{ font-size:.85rem;font-weight:600;text-decoration:none; padding:.6rem 1.15rem;border-radius:2px; background:var(--ocre);color:var(--grafite); transition:background .2s ease,transform .2s ease; } .header-cta:hover{background:var(--ocre-claro);transform:translateY(-1px)} /* Seletor de idioma — discreto ao lado do CTA, nunca competindo com ele. */ .header-acoes{display:flex;align-items:center;gap:.85rem} .idioma{ font-size:.72rem;font-weight:700;letter-spacing:.12em;text-decoration:none; padding:.5rem .6rem;border:1px solid color-mix(in srgb,var(--ocre) 38%,transparent); border-radius:2px;color:var(--ocre);line-height:1; transition:border-color .2s ease,color .2s ease; } .idioma:hover{border-color:var(--ocre);color:var(--ocre-claro)} /* ═══ Herói ════════════════════════════════════════════════════════════ */ .heroi{padding:clamp(4rem,9vw,7.5rem) 0 clamp(4rem,8vw,6.5rem);position:relative;overflow:hidden} .heroi::after{ /* o sulco — três arcos gigantes atravessando ao fundo */ content:'';position:absolute;right:-18%;top:8%;width:min(760px,105%);aspect-ratio:1; background: radial-gradient(closest-side,transparent 61%,color-mix(in srgb,var(--ocre) 13%,transparent) 61.6% 63%,transparent 63.6%), radial-gradient(closest-side,transparent 71%,color-mix(in srgb,var(--ocre) 10%,transparent) 71.6% 73%,transparent 73.6%), radial-gradient(closest-side,transparent 81%,color-mix(in srgb,var(--ocre) 7%,transparent) 81.6% 83%,transparent 83.6%); pointer-events:none;z-index:-1; } h1{font-size:clamp(2.5rem,1.35rem + 5.1vw,5.1rem);max-width:15ch;letter-spacing:-.035em} h1 em{font-style:normal;color:var(--ocre);position:relative;white-space:nowrap} h1 em::after{ content:'';position:absolute;left:0;right:0;bottom:.1em;height:.09em; background:var(--ocre);transform-origin:left;transform:scaleX(0); animation:risca 1s cubic-bezier(.22,1,.36,1) 1.05s forwards; } @keyframes risca{to{transform:scaleX(1)}} .heroi p.chamada{margin-top:1.9rem;max-width:52ch;font-size:clamp(1.05rem,1rem + .38vw,1.28rem);color:var(--pedra-clara);line-height:1.6} .heroi p.chamada strong{color:var(--areia);font-weight:600} .botoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.6rem} .btn{ display:inline-flex;align-items:center;gap:.6rem; padding:.95rem 1.7rem;border-radius:2px;text-decoration:none; font-weight:600;font-size:.98rem;border:1px solid transparent; transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease; } .btn--forte{background:var(--ocre);color:var(--grafite)} .btn--forte:hover{background:var(--ocre-claro);transform:translateY(-2px)} .btn--fraco{border-color:color-mix(in srgb,var(--ocre) 42%,transparent);color:var(--areia)} .btn--fraco:hover{border-color:var(--ocre);background:color-mix(in srgb,var(--ocre) 11%,transparent);transform:translateY(-2px)} .faixa--clara .btn--fraco{border-color:color-mix(in srgb,var(--terra) 32%,transparent);color:var(--terra)} .faixa--clara .btn--fraco:hover{border-color:var(--terra);background:color-mix(in srgb,var(--terra) 7%,transparent)} .assinatura{ margin-top:3.4rem;padding-top:1.5rem;font-size:.87rem;color:var(--pedra); border-top:1px solid color-mix(in srgb,var(--ocre) 16%,transparent);max-width:46ch; } .assinatura b{color:var(--areia);font-weight:600} /* ═══ Prova ════════════════════════════════════════════════════════════ */ .prova{ display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:start; border:var(--borda);padding:clamp(1.6rem,4vw,3rem);border-radius:3px; background:linear-gradient(150deg,color-mix(in srgb,var(--ocre) 7%,transparent),transparent 62%); } @media(min-width:880px){.prova{grid-template-columns:1.25fr .9fr;gap:3.4rem}} .prova h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem)} .prova p{margin-top:1.1rem;color:var(--pedra-clara);max-width:52ch} .prova-lista{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:.72rem} .prova-lista li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;color:var(--areia)} .prova-lista li::before{content:'';flex:none;width:7px;height:7px;margin-top:.55em;background:var(--ocre);border-radius:50%} .por-baixo{margin-top:1.7rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--ocre) 18%,transparent);font-size:.85rem;color:var(--pedra);line-height:1.62;max-width:58ch} .por-baixo b{color:var(--ocre-claro);font-weight:600} .cartao-prova{ border:var(--borda);border-radius:3px;padding:1.6rem; background:color-mix(in srgb,var(--grafite-2) 92%,var(--ocre)); } .cartao-prova .rot{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ocre);font-weight:600} .cartao-prova .nome{font-family:var(--display);font-size:1.65rem;font-weight:700;margin-top:.5rem;letter-spacing:-.02em} .cartao-prova .desc{font-size:.9rem;color:var(--pedra-clara);margin-top:.6rem;line-height:1.55} .selo-vivo{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--ocre-claro);text-transform:uppercase} .pulso{width:8px;height:8px;border-radius:50%;background:#5ec26a;box-shadow:0 0 0 0 rgba(94,194,106,.7);animation:pulsa 2.1s infinite} @keyframes pulsa{70%{box-shadow:0 0 0 9px rgba(94,194,106,0)}100%{box-shadow:0 0 0 0 rgba(94,194,106,0)}} .cartao-prova a.btn{margin-top:1.4rem;width:100%;justify-content:center} .nota-extra{margin-top:1.8rem;font-size:.92rem;color:#6b6257;max-width:var(--medida)} /* ═══ Trilhas de serviço ═══════════════════════════════════════════════ */ .sub-secao{margin-top:1.1rem;max-width:52ch;color:#5c5348;font-size:1.02rem} .trilhas{display:grid;gap:1.3rem;margin-top:2.9rem} @media(min-width:720px){.trilhas{grid-template-columns:repeat(2,1fr)}} @media(min-width:1080px){.trilhas{grid-template-columns:repeat(4,1fr)}} .trilha{ border:1px solid color-mix(in srgb,var(--terra) 16%,transparent); border-top:3px solid var(--ocre); padding:1.7rem 1.5rem;background:#fff;border-radius:2px; display:flex;flex-direction:column; transition:transform .25s ease,box-shadow .25s ease; } .trilha:hover{transform:translateY(-4px);box-shadow:0 14px 40px -20px rgba(61,47,36,.42)} .trilha .ico{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--ocre) 15%,transparent);color:#a06a28;margin-bottom:1.05rem} .trilha .ico svg{width:19px;height:19px} .trilha h3{font-size:1.18rem;color:var(--grafite);letter-spacing:-.015em} .trilha p{margin-top:.7rem;font-size:.92rem;color:#5c5348;line-height:1.6;flex:1} .trilha .pra-quem{margin-top:1.2rem;padding-top:.95rem;border-top:1px dashed color-mix(in srgb,var(--terra) 22%,transparent);font-size:.82rem;color:#7a7065;flex:none} .trilha .pra-quem b{color:var(--terra);font-weight:600} /* Comércio local — presente, mas deliberadamente secundário */ .comercio{ margin-top:1.9rem;display:grid;gap:1.8rem;align-items:center; border:1px solid color-mix(in srgb,var(--terra) 15%,transparent); border-left:3px solid color-mix(in srgb,var(--ocre) 55%,transparent); background:color-mix(in srgb,var(--areia-2) 55%,transparent); padding:clamp(1.4rem,3.5vw,2.1rem);border-radius:2px; } @media(min-width:840px){.comercio{grid-template-columns:1.15fr .85fr;gap:2.6rem}} .comercio h3{font-size:1.24rem;color:var(--grafite);max-width:24ch} .comercio p{margin-top:.7rem;font-size:.92rem;color:#5c5348;line-height:1.6;max-width:56ch} .degraus-mini{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:d} .degraus-mini li{counter-increment:d;display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;color:#5c5348;line-height:1.5} .degraus-mini li::before{ content:counter(d);flex:none;width:22px;height:22px;border-radius:50%; background:color-mix(in srgb,var(--ocre) 18%,transparent);color:#a06a28; font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.05em; } .degraus-mini b{display:block;color:var(--terra);font-weight:600;margin-bottom:.1rem} /* ═══ Trajetória — testemunho de sondagem ══════════════════════════════ */ .sondagem{margin-top:3rem;position:relative;padding-left:clamp(3.6rem,9vw,5.6rem)} .sondagem::before{ content:'';position:absolute;left:clamp(1.4rem,3.6vw,2.3rem);top:.4rem;bottom:.4rem;width:2px; background:linear-gradient(180deg,var(--ocre),color-mix(in srgb,var(--ocre) 20%,transparent)); } .camada{position:relative;padding:1.35rem 0 1.5rem} .camada+.camada{border-top:1px solid color-mix(in srgb,var(--ocre) 15%,transparent)} .camada::before{ /* o nó na coluna */ content:'';position:absolute;left:calc(clamp(1.4rem,3.6vw,2.3rem) - clamp(3.6rem,9vw,5.6rem) - 4px); top:1.95rem;width:10px;height:10px;border-radius:50%; background:var(--grafite);border:2px solid var(--ocre); } .camada--marco::before{background:var(--ocre);width:14px;height:14px;left:calc(clamp(1.4rem,3.6vw,2.3rem) - clamp(3.6rem,9vw,5.6rem) - 6px);top:1.8rem} .camada .ano{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--ocre);text-transform:uppercase} .camada h3{font-size:clamp(1.12rem,1rem + .55vw,1.42rem);margin-top:.42rem} .camada .onde{font-size:.9rem;color:var(--pedra);margin-top:.2rem} .camada p{margin-top:.7rem;color:var(--pedra-clara);font-size:.95rem;max-width:62ch;line-height:1.62} .camada--marco{background:linear-gradient(90deg,color-mix(in srgb,var(--ocre) 8%,transparent),transparent 72%);margin-inline:-1.2rem;padding-inline:1.2rem} .camada--marco h3{color:var(--ocre-claro)} /* ═══ Como funciona ════════════════════════════════════════════════════ */ .passos{display:grid;gap:1.1rem;margin-top:2.6rem;counter-reset:p} @media(min-width:760px){.passos{grid-template-columns:repeat(4,1fr)}} .passo{border-left:2px solid var(--ocre);padding:.2rem 0 .2rem 1.15rem;counter-increment:p} .passo h3{font-size:1.05rem;margin-bottom:.4rem} .passo h3::before{content:counter(p,decimal-leading-zero);display:block;font-family:var(--corpo);font-size:.7rem;letter-spacing:.18em;color:var(--ocre);font-weight:700;margin-bottom:.5rem} .passo p{font-size:.9rem;color:var(--pedra-clara);line-height:1.58} /* na faixa clara o corpo precisa de cor escura, senao some no fundo areia */ .faixa--clara .passo p{color:#5c5348} .faixa--clara .passo{border-left-color:var(--ocre)} /* ═══ Contato ══════════════════════════════════════════════════════════ */ .contato-grid{display:grid;gap:2.8rem} @media(min-width:900px){.contato-grid{grid-template-columns:.92fr 1.08fr;gap:4rem}} .contato-grid h2{font-size:clamp(1.9rem,1.4rem + 2vw,3rem);max-width:14ch} .contato-grid .sub{margin-top:1.2rem;color:var(--pedra-clara);max-width:44ch} .diretos{margin-top:2.2rem;display:grid;gap:.9rem} .direto{display:flex;align-items:center;gap:.85rem;text-decoration:none;font-size:1.02rem;font-weight:500;padding:.55rem 0;transition:color .18s ease} .direto:hover{color:var(--ocre-claro)} .direto svg{width:20px;height:20px;flex:none;color:var(--ocre)} form{display:grid;gap:1.05rem;border:var(--borda);padding:clamp(1.4rem,3.5vw,2.2rem);border-radius:3px;background:color-mix(in srgb,var(--grafite-2) 80%,transparent)} .campo{display:grid;gap:.42rem} label{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pedra-clara)} input,select,textarea{ font-family:inherit;font-size:1rem;color:var(--areia); background:color-mix(in srgb,var(--grafite) 70%,transparent); border:1px solid color-mix(in srgb,var(--ocre) 20%,transparent); border-radius:2px;padding:.78rem .9rem;width:100%; transition:border-color .18s ease,box-shadow .18s ease; } input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--pedra) 78%,transparent)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ocre);box-shadow:0 0 0 3px color-mix(in srgb,var(--ocre) 17%,transparent)} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c8873f' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;background-size:12px;padding-right:2.4rem} textarea{resize:vertical;min-height:96px} form button{ font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer; background:var(--ocre);color:var(--grafite);border:none;border-radius:2px; padding:1rem 1.5rem;transition:background .2s ease,transform .2s ease; } form button:hover{background:var(--ocre-claro);transform:translateY(-2px)} .aviso{font-size:.79rem;color:var(--pedra);line-height:1.5} /* ═══ Rodapé ═══════════════════════════════════════════════════════════ */ footer{border-top:1px solid color-mix(in srgb,var(--ocre) 15%,transparent);padding:2.8rem 0 3.4rem;font-size:.86rem;color:var(--pedra)} .rodape-in{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center} .rodape-marca{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.08rem;font-weight:700;color:var(--areia);letter-spacing:-.02em} .rodape-marca svg{width:24px;height:24px} /* ═══ Revelação ao rolar ═══════════════════════════════════════════════ */ .rev{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)} .rev.vis{opacity:1;transform:none} .heroi .rev{animation:sobe .85s cubic-bezier(.22,1,.36,1) both} .heroi .rev:nth-child(1){animation-delay:.05s} .heroi .rev:nth-child(2){animation-delay:.16s} .heroi .rev:nth-child(3){animation-delay:.27s} .heroi .rev:nth-child(4){animation-delay:.38s} .heroi .rev:nth-child(5){animation-delay:.5s} @keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} html{scroll-behavior:auto} .rev{opacity:1;transform:none} h1 em::after{transform:scaleX(1)} }