/* ===================================================== Base compartilhada - as cores e fontes vem do painel (variaveis CSS injetadas no pelo index.php) ===================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--fx);font-size:16.5px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased} img,video,iframe{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{font-family:var(--ft);color:var(--tit);margin:0;line-height:1.12;font-weight:700;letter-spacing:-.02em} p{margin:0 0 1em} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:2px solid var(--c1);outline-offset:3px} ::selection{background:var(--c1btn);color:var(--btxt)} .container{width:min(1200px,calc(100% - 44px));margin:0 auto} .sec{padding:clamp(64px,9vw,120px) 0;position:relative} .sec-fina{padding:clamp(44px,6vw,72px) 0;position:relative} .centro{text-align:center} .oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .ico{width:20px;height:20px;flex:none} /* ---------- Cabecalhos de secao ---------- */ /* --c1txt e a cor primaria ja ajustada para ter contraste como TEXTO sobre os fundos do site. Onde a primaria e fundo (botoes, selos) continua sendo --c1. */ .kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--c1txt);margin-bottom:16px} .kicker i{width:26px;height:2px;background:var(--c1);display:block;border-radius:2px} .kicker.centro{justify-content:center} .titulo-sec{font-size:clamp(29px,4.4vw,50px);margin-bottom:16px} .sub-sec{font-size:clamp(15.5px,1.7vw,18.5px);max-width:62ch;color:var(--txt);opacity:.92;margin-bottom:0} .cabeca-sec{margin-bottom:clamp(38px,5vw,60px);max-width:760px} .cabeca-sec.centro{margin-left:auto;margin-right:auto} .cabeca-sec.centro .sub-sec{margin-left:auto;margin-right:auto} .corpo p{margin-bottom:1.1em} /* ---------- Botoes ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:var(--r); font-family:var(--ft);font-weight:700;font-size:15px;letter-spacing:.01em;transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s,color .22s; position:relative;overflow:hidden;white-space:nowrap} .btn .ico{width:18px;height:18px} .btn-p{background:var(--c1btn);color:var(--btxt);box-shadow:0 8px 26px -10px var(--c1)} .btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px var(--c1)} .btn-s{background:transparent;color:var(--tit);border:1.5px solid var(--bd)} .btn-s:hover{border-color:var(--c1);color:var(--c1txt);transform:translateY(-3px)} .btn-g{padding:17px 34px;font-size:16px} .btn.bloco{width:100%} .btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%); transform:translateX(-120%);transition:transform .6s} .btn-p:hover::after{transform:translateX(120%)} .link-seta{display:inline-flex;align-items:center;gap:7px;color:var(--c1txt);font-weight:600;font-size:14.5px} .link-seta .ico{width:17px;height:17px;transition:transform .25s} .link-seta:hover .ico{transform:translateX(5px)} /* ---------- Barra de progresso ---------- */ .progresso{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--c1),var(--c2));z-index:200;transition:width .1s linear} /* ---------- Topbar ---------- */ /* --c1grad e o segundo tom do degrade, calculado no PHP de modo que o texto continue legivel do inicio ao fim, qualquer que seja a paleta. */ .topbar{background:linear-gradient(90deg,var(--c1btn),var(--c1grad)); color:var(--btxt);font-size:13px;font-weight:700; letter-spacing:.05em;padding:9px 0;text-align:center;position:relative;z-index:60;overflow:hidden} .topbar .marquee{display:inline-block;animation:pulsa 3.4s ease-in-out infinite} @keyframes pulsa{0%,100%{opacity:1}50%{opacity:.68}} /* ---------- Cabecalho ---------- */ .cabecalho{position:sticky;top:0;z-index:90;backdrop-filter:blur(14px);background:var(--bg); background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid transparent;transition:.3s} .cabecalho.fixo{border-bottom-color:var(--bd);box-shadow:0 10px 40px -22px rgba(0,0,0,.75)} .cabecalho-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;transition:height .3s} .cabecalho.fixo .cabecalho-in{height:66px} .logo img{max-height:44px;width:auto;transition:.3s} .cabecalho.fixo .logo img{max-height:38px} .logo strong{font-family:var(--ft);font-size:22px;color:var(--tit)} .menu{display:flex;align-items:center;gap:6px} /* :not(.btn) e obrigatorio: sem isso esta regra (0,1,1) venceria .btn-p (0,1,0) e o botao do cabecalho ficaria com o cinza do texto corrido sobre a cor forte. */ .menu > a:not(.btn){padding:9px 14px;font-size:14.5px;font-weight:500;color:var(--txt);border-radius:var(--r);position:relative;transition:color .2s} .menu > a:not(.btn)::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--c1); transform:scaleX(0);transform-origin:left;transition:transform .28s} .menu > a:not(.btn):hover{color:var(--tit)} .menu > a:not(.btn):hover::after{transform:scaleX(1)} .menu-cta{margin-left:12px;padding:11px 20px !important;font-size:14px !important} .hamburger{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:var(--r)} .hamburger span{width:24px;height:2px;background:var(--tit);border-radius:2px;transition:.3s} .hamburger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.on span:nth-child(2){opacity:0} .hamburger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ===================================================== HERO ===================================================== */ .hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(560px,88vh,900px);padding:80px 0 90px} .hero-fundo{position:absolute;inset:0;z-index:0} .hero-fundo img,.hero-fundo video{width:100%;height:100%;object-fit:cover} .hero-veu{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--bg) 92%); background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 55%,var(--bg) 100%)} .hero-brilho{position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--c1) 22%,transparent),transparent 68%); top:-18%;right:-12%;filter:blur(30px);animation:flutua 16s ease-in-out infinite} @keyframes flutua{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,40px) scale(1.1)}} .hero-in{position:relative;z-index:2;display:grid;gap:clamp(36px,5vw,64px);align-items:center} .hero h1{font-size:clamp(38px,7.2vw,80px);line-height:1.03;margin-bottom:18px} .hero-sub{font-size:clamp(17px,2.2vw,22px);color:var(--c1txt);font-weight:600;margin-bottom:14px} .hero-desc{font-size:clamp(15.5px,1.8vw,18.5px);max-width:56ch;margin-bottom:32px;opacity:.95} .hero-botoes{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} .hero-pills{display:flex;gap:10px;flex-wrap:wrap} .hero-pills li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px; background:var(--card);background:color-mix(in srgb,var(--card) 70%,transparent); border:1px solid var(--bd);font-size:13.5px;font-weight:600;color:var(--tit)} .hero-pills .ico{width:15px;height:15px;color:var(--c1txt)} .hero-numeros{display:flex;gap:clamp(22px,4vw,48px);flex-wrap:wrap;padding-top:8px} .hero-numeros div{position:relative;padding-left:18px} .hero-numeros div::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--c1);border-radius:3px} .hero-numeros b{display:block;font-family:var(--ft);font-size:clamp(30px,4.4vw,46px);color:var(--tit);line-height:1} .hero-numeros span{font-size:13.5px;opacity:.85} .hero-rolar{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:42px; border:2px solid var(--bd);border-radius:20px;display:grid;justify-items:center;padding-top:7px} .hero-rolar span{width:4px;height:8px;background:var(--c1);border-radius:3px;animation:rola 1.7s infinite} @keyframes rola{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(13px)}} .hero-A .hero-in,.hero-C .hero-in{justify-items:center;text-align:center} .hero-A .hero-desc,.hero-C .hero-desc{margin-left:auto;margin-right:auto} .hero-A .hero-botoes,.hero-C .hero-botoes,.hero-A .hero-pills,.hero-C .hero-pills{justify-content:center} .hero-A .kicker,.hero-C .kicker{justify-content:center} .hero-B .hero-in,.hero-E .hero-in{grid-template-columns:1.05fr .95fr} .hero-arte{position:relative} .hero-arte img{width:100%;border-radius:calc(var(--r) * 2.5);object-fit:cover;aspect-ratio:4/4.4; box-shadow:0 40px 80px -40px rgba(0,0,0,.7)} .orbe{position:absolute;border-radius:50%;filter:blur(6px);opacity:.75;z-index:-1} .orbe-1{width:58%;aspect-ratio:1;background:radial-gradient(circle,var(--c1),transparent 70%);top:-8%;right:-10%;animation:flutua 12s ease-in-out infinite} .orbe-2{width:46%;aspect-ratio:1;background:radial-gradient(circle,var(--c2),transparent 70%);bottom:-6%;left:-9%;animation:flutua 15s ease-in-out infinite reverse} .hero-flutua{position:absolute;background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--bd); border-radius:calc(var(--r) * 1.6);padding:14px 18px;backdrop-filter:blur(12px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6); display:flex;flex-direction:column;animation:balanca 5s ease-in-out infinite} .hero-flutua b{font-family:var(--ft);font-size:26px;color:var(--tit);line-height:1} .hero-flutua span{font-size:12.5px} .hero-flutua .ico{color:var(--c1);margin-bottom:5px} .card-flutua-1{left:-6%;bottom:16%} .card-flutua-2{right:-5%;top:12%;animation-delay:.9s} @keyframes balanca{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hero-D .hero-in{justify-items:start} .hero-D .hero-veu{background:linear-gradient(100deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 72%,transparent) 48%,color-mix(in srgb,var(--bg) 35%,transparent) 100%)} /* ---------- Faixa de destaques ---------- */ .faixa-destaques{background:var(--bg2);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:26px 0} .destaques-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px} .destaque-item{display:flex;align-items:center;gap:14px} .destaque-ico{width:46px;height:46px;flex:none;border-radius:var(--r);display:grid;place-items:center; background:var(--bg2);background:color-mix(in srgb,var(--c1) 14%,transparent);color:var(--c1txt)} .destaque-item strong{display:block;font-family:var(--ft);color:var(--tit);font-size:16px;line-height:1.25} .destaque-item small{font-size:13px;opacity:.85;line-height:1.4;display:block} /* ---------- Sobre ---------- */ .sobre{background:var(--bg)} .sobre-grade{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5.5vw,80px);align-items:center} .sobre-fotos{position:relative} .sobre-fotos img{border-radius:calc(var(--r) * 2);object-fit:cover;width:100%} .sobre-fotos .foto-1{aspect-ratio:4/4.6;box-shadow:0 40px 70px -40px rgba(0,0,0,.65)} .sobre-fotos .foto-2{position:absolute;width:52%;right:-8%;bottom:-9%;aspect-ratio:4/3.4;border:6px solid var(--bg); box-shadow:0 30px 50px -28px rgba(0,0,0,.7);animation:balanca 7s ease-in-out infinite} .sobre-forma{position:absolute;width:130px;height:130px;left:-32px;top:-32px;border:2px solid var(--c1);opacity:.35; border-radius:calc(var(--r) * 2);z-index:-1} /* ---------- Numeros ---------- */ .numeros{background:var(--bg2);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)} .numeros .titulo-sec{margin-bottom:38px} .numeros-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;text-align:center} .numero-item b{display:block;font-family:var(--ft);font-size:clamp(34px,5.2vw,58px);color:var(--c1txt);line-height:1;margin-bottom:6px} .numero-item span{font-size:14px;opacity:.9} /* ---------- Grades ---------- */ .grade-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(18px,2.4vw,28px)} .grade-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,2.2vw,26px)} /* ---------- Cartoes de beneficio ---------- */ .beneficios{background:var(--bg)} .cartao{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r) * 1.8); padding:32px 28px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s,box-shadow .35s} .cartao::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 10%,transparent),transparent 55%); opacity:0;transition:opacity .35s} .cartao:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c1) 45%,var(--bd));box-shadow:0 30px 60px -34px rgba(0,0,0,.75)} .cartao:hover::before{opacity:1} .cartao-ico{position:relative;width:56px;height:56px;border-radius:calc(var(--r) * 1.3);display:grid;place-items:center; background:var(--bg2);background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--c1txt);margin-bottom:20px;transition:.35s} .cartao-ico .ico{width:26px;height:26px} .cartao:hover .cartao-ico{background:var(--c1btn);color:var(--btxt);transform:rotate(-6deg) scale(1.06)} .cartao h3{position:relative;font-size:20px;margin-bottom:10px} .cartao p{position:relative;font-size:15px;margin:0;opacity:.92} .cartao-num{position:absolute;right:18px;top:10px;font-family:var(--ft);font-size:58px;font-style:normal; color:var(--tit);opacity:.045;line-height:1;pointer-events:none} /* ---------- Modalidades ---------- */ .modalidades{background:var(--bg2)} .modalidade{background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r) * 1.8);overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s} .modalidade:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c1) 45%,var(--bd));box-shadow:0 30px 60px -34px rgba(0,0,0,.72)} /* A moldura recorta apenas a foto. A caixa nao pode ter overflow:hidden, senao corta o selo que fica encavalado entre a imagem e o corpo do card. */ .moldura{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit} .modalidade-img{position:relative;aspect-ratio:16/10;background:var(--bg2)} .modalidade-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)} .modalidade:hover .modalidade-img img{transform:scale(1.08)} .modalidade-ico{position:absolute;z-index:2;left:18px;bottom:-22px;width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center; background:var(--c1btn);color:var(--btxt);box-shadow:0 12px 26px -12px var(--c1)} .modalidade-corpo{padding:34px 24px 26px} .modalidade h3{font-size:20px;margin-bottom:9px} .modalidade p{font-size:14.8px;margin-bottom:16px;opacity:.92} /* ---------- Video ---------- */ .video{background:var(--bg)} .video-caixa{position:relative;border-radius:calc(var(--r) * 2.2);overflow:hidden;border:1px solid var(--bd); box-shadow:0 50px 90px -50px rgba(0,0,0,.8);max-width:980px;margin:0 auto} .video-embed{position:relative;aspect-ratio:16/9;background:var(--bg2)} .video-embed img,.video-embed iframe,.video-caixa video{width:100%;height:100%;object-fit:cover;border:0} .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%; background:var(--c1btn);color:var(--btxt);display:grid;place-items:center;box-shadow:0 0 0 0 color-mix(in srgb,var(--c1) 55%,transparent); animation:ondaPlay 2.4s infinite;transition:transform .25s} .play .ico{width:30px;height:30px;margin-left:4px} .play:hover{transform:translate(-50%,-50%) scale(1.09)} @keyframes ondaPlay{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c1) 50%,transparent)}70%{box-shadow:0 0 0 30px transparent}100%{box-shadow:0 0 0 0 transparent}} .video-aviso{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;opacity:.75;margin:0} /* ---------- Galeria ---------- */ .estrutura{background:var(--bg2)} .galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} .galeria-item{margin:0;position:relative;border-radius:calc(var(--r) * 1.6);overflow:hidden;aspect-ratio:4/3;cursor:zoom-in} .galeria-item:nth-child(1),.galeria-item:nth-child(6){grid-column:span 2;aspect-ratio:8/3.6} .galeria-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)} .galeria-item:hover img{transform:scale(1.07)} .galeria-item figcaption{position:absolute;inset:auto 0 0 0;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:10px; background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-family:var(--ft);font-size:16px; transform:translateY(8px);opacity:.92;transition:.35s} .galeria-item:hover figcaption{transform:translateY(0);opacity:1} .galeria-item figcaption .ico{color:var(--c1)} /* ---------- Planos ---------- */ .planos{background:var(--bg)} .planos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(18px,2.4vw,26px);align-items:stretch} .plano{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r) * 2); padding:36px 30px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s} .plano:hover{transform:translateY(-8px);box-shadow:0 34px 66px -36px rgba(0,0,0,.75)} .plano-top{border-color:var(--c1);box-shadow:0 30px 60px -34px color-mix(in srgb,var(--c1) 55%,transparent)} .plano-top::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(160deg,var(--c1),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .selo{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--c1btn);color:var(--btxt); padding:6px 16px;border-radius:100px;font-size:12px;font-weight:800;letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .selo .ico{width:14px;height:14px} .plano h3{font-size:23px;margin-bottom:4px} .plano-sub{font-size:14px;opacity:.85;margin-bottom:22px} .plano-preco{margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--bd)} .plano-preco s{display:block;font-size:14.5px;opacity:.5;margin-bottom:2px} .plano-preco span{display:flex;align-items:flex-end;gap:4px;color:var(--tit)} .plano-preco i{font-style:normal;font-size:18px;font-weight:600;margin-bottom:11px;opacity:.8} .plano-preco b{font-family:var(--ft);font-size:clamp(42px,5.2vw,56px);line-height:.95} .plano-preco em{font-style:normal;font-size:14.5px;opacity:.7;margin-bottom:11px} .plano-lista{display:grid;gap:11px;margin-bottom:28px;flex:1} .plano-lista li{display:flex;gap:10px;align-items:flex-start;font-size:14.8px} .plano-lista .ico{width:17px;height:17px;color:var(--c1txt);margin-top:4px} .planos-nota{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:34px;font-size:13.8px;opacity:.75} .planos-nota .ico{color:var(--c1txt)} /* ---------- Resultados ---------- */ .resultados{background:var(--bg2)} .resultado{background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r) * 1.8);overflow:hidden;padding-bottom:24px;transition:.35s} .resultado:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--c1) 40%,var(--bd))} .resultado-img{position:relative;aspect-ratio:4/3.2;margin-bottom:44px} .resultado-img img{width:100%;height:100%;object-fit:cover} .resultado-tag{position:absolute;z-index:2;left:20px;bottom:-18px;background:var(--c1btn);color:var(--btxt);padding:9px 16px; border-radius:var(--r);font-family:var(--ft);font-size:14.5px;font-weight:700;max-width:calc(100% - 40px); box-shadow:0 14px 26px -14px var(--c1)} .resultado h3{font-size:19px;padding:0 24px;margin-bottom:8px} .resultado p{font-size:14.5px;padding:0 24px;margin:0;opacity:.9} /* ---------- Equipe ---------- */ .equipe{background:var(--bg)} .pessoa{text-align:center} .pessoa-img{position:relative;border-radius:calc(var(--r) * 1.8);overflow:hidden;aspect-ratio:1/1.15;margin-bottom:18px;background:var(--bg2)} .pessoa-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1);filter:grayscale(.25)} .pessoa:hover .pessoa-img img{transform:scale(1.06);filter:grayscale(0)} .pessoa-social{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:var(--c1btn);color:var(--btxt);transform:translateY(60px);transition:transform .35s} .pessoa:hover .pessoa-social{transform:translateY(0)} .pessoa h3{font-size:18.5px;margin-bottom:3px} .pessoa-cargo{display:block;font-size:13px;color:var(--c1txt);font-weight:600;margin-bottom:9px} .pessoa p{font-size:14px;opacity:.86;margin:0} /* ---------- Depoimentos ---------- */ .depoimentos{background:var(--bg2);overflow:hidden} .depoimentos .cabeca-sec{position:relative;max-width:100%;display:grid;gap:6px} .carrossel-nav{display:flex;gap:9px;margin-top:14px} .cnav{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--bd);display:grid;place-items:center;transition:.25s;color:var(--tit)} .cnav:hover{background:var(--c1btn);color:var(--btxt);border-color:var(--c1)} .cnav[data-dir="-1"] .ico{transform:rotate(90deg)} .cnav[data-dir="1"] .ico{transform:rotate(-90deg)} .carrossel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 22px;scrollbar-width:none} .carrossel::-webkit-scrollbar{display:none} .depo{flex:0 0 min(400px,86vw);scroll-snap-align:start;background:var(--card);border:1px solid var(--bd); border-radius:calc(var(--r) * 1.8);padding:32px 28px;position:relative;display:flex;flex-direction:column} .depo-aspas{position:absolute;right:24px;top:22px;color:var(--c1);opacity:.16} .depo-aspas .ico{width:44px;height:44px} .estrelas{display:flex;gap:3px;margin-bottom:14px} .ico-star{width:17px;height:17px;color:var(--c1txt);fill:var(--c1txt)} .depo p{font-size:15.5px;line-height:1.72;flex:1;margin-bottom:22px} .depo footer{display:flex;align-items:center;gap:13px;border-top:1px solid var(--bd);padding-top:18px} .depo footer img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none} .depo footer strong{display:block;color:var(--tit);font-family:var(--ft);font-size:16px} .depo footer small{font-size:13px;opacity:.8} /* ---------- FAQ ---------- */ .faq{background:var(--bg)} .faq-grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,70px);align-items:start} .faq-lado{position:sticky;top:110px} .faq-lado .btn{margin-top:22px} .faq-lista{display:grid;gap:12px} .faq-item{background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r) * 1.4);overflow:hidden;transition:border-color .3s} .faq-item[open]{border-color:color-mix(in srgb,var(--c1) 45%,var(--bd))} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer; font-family:var(--ft);font-size:17px;color:var(--tit);list-style:none;font-weight:600} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .ico{flex:none;color:var(--c1txt);transition:transform .3s} .faq-item[open] summary .ico{transform:rotate(180deg)} .faq-resp{padding:0 24px 22px;animation:abre .35s ease} .faq-resp p{margin:0;font-size:15px;opacity:.92} @keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* ---------- CTA ---------- */ .cta{position:relative;padding:clamp(70px,9vw,120px) 0;overflow:hidden;text-align:center} .cta-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cta-veu{position:absolute;inset:0;background:var(--bg); background:linear-gradient(120deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 74%,transparent))} .cta-in{position:relative;z-index:2;max-width:760px} .cta h2{font-size:clamp(29px,4.6vw,52px);margin-bottom:16px} .cta p{font-size:clamp(15.5px,1.9vw,19px);max-width:60ch;margin:0 auto 32px;opacity:.95} .cta-botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- Contato ---------- */ .contato{background:var(--bg2)} .contato-grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,50px);align-items:start} .info-lista{display:grid;gap:18px;margin-bottom:24px} .info-lista li{display:flex;gap:15px;align-items:flex-start} .info-ico{width:48px;height:48px;flex:none;border-radius:var(--r);display:grid;place-items:center; background:var(--bg);background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--c1txt)} .info-lista strong{display:block;font-family:var(--ft);color:var(--tit);font-size:16px;margin-bottom:2px} .info-lista p{margin:0;font-size:14.8px;opacity:.92} .mapa{margin-top:22px;border-radius:calc(var(--r) * 1.6);overflow:hidden;border:1px solid var(--bd);filter:grayscale(.35) contrast(1.05)} .contato-form{background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r) * 2);padding:clamp(26px,3.5vw,40px)} .campo-form{margin-bottom:16px} .campo-form label{display:block;font-size:13.5px;font-weight:600;color:var(--tit);margin-bottom:7px} .campo-form input,.campo-form select,.campo-form textarea{width:100%;padding:14px 16px;border-radius:var(--r); border:1.5px solid var(--bd);background:var(--bg2);color:var(--tit);font:inherit;font-size:15.5px;transition:.22s} .campo-form textarea{resize:vertical} .campo-form input::placeholder,.campo-form textarea::placeholder{color:var(--txt);opacity:.55} .campo-form input:focus,.campo-form select:focus,.campo-form textarea:focus{outline:none;border-color:var(--c1); box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 18%,transparent)} .form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .form-nota{display:block;text-align:center;font-size:12.5px;opacity:.7;margin-top:12px} .aviso{display:flex;gap:13px;padding:16px 18px;border-radius:var(--r);margin-bottom:20px;align-items:flex-start} .aviso strong{display:block;color:var(--tit);font-family:var(--ft)} .aviso p{margin:2px 0 0;font-size:14px} .aviso.ok{background:color-mix(in srgb,#22c55e 12%,transparent);border:1px solid color-mix(in srgb,#22c55e 40%,transparent)} .aviso.ok .ico{color:#22c55e} .aviso.erro{background:color-mix(in srgb,#ef4444 12%,transparent);border:1px solid color-mix(in srgb,#ef4444 40%,transparent)} .aviso.erro .ico{color:#ef4444} /* ---------- Rodape ---------- */ .rodape{background:var(--bg);border-top:1px solid var(--bd);padding:clamp(48px,6vw,72px) 0 26px} .rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);margin-bottom:40px} .rodape-marca img{max-height:48px;margin-bottom:16px} .rodape-marca strong{font-family:var(--ft);font-size:22px;color:var(--tit);display:block;margin-bottom:12px} .rodape-marca p{font-size:14.5px;max-width:34ch;opacity:.88} .redes{display:flex;gap:10px;margin-top:18px} .redes a{width:42px;height:42px;border-radius:var(--r);border:1px solid var(--bd);display:grid;place-items:center;transition:.25s} .redes a:hover{background:var(--c1btn);color:var(--btxt);border-color:var(--c1);transform:translateY(-3px)} .rodape-col h4{font-size:15px;margin-bottom:16px;letter-spacing:.03em} .rodape-col ul{display:grid;gap:9px} .rodape-col a{font-size:14.5px;opacity:.88;transition:.2s} .rodape-col a:hover{color:var(--c1txt);opacity:1} .rodape-contato li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;opacity:.9} .rodape-contato .ico{color:var(--c1txt);margin-top:3px;width:18px;height:18px} .rodape-base{border-top:1px solid var(--bd);padding-top:22px;display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap;font-size:13.5px;opacity:.78} .link-painel{font-size:12.5px;opacity:.55} .link-painel:hover{color:var(--c1txt);opacity:1} /* ---------- Flutuantes ---------- */ .zap-float{position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:10px; background:#25d366;color:#052e16;padding:14px 20px;border-radius:100px;font-weight:700;font-size:14.5px; box-shadow:0 16px 34px -14px rgba(37,211,102,.8);animation:pulsaZap 2.6s infinite;transition:transform .25s} .zap-float:hover{transform:scale(1.05)} .zap-float .ico{width:22px;height:22px} @keyframes pulsaZap{0%{box-shadow:0 16px 34px -14px rgba(37,211,102,.8),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 16px 34px -14px rgba(37,211,102,.8),0 0 0 18px transparent}100%{box-shadow:0 16px 34px -14px rgba(37,211,102,.8),0 0 0 0 transparent}} .topo-btn{position:fixed;left:20px;bottom:22px;z-index:69;width:46px;height:46px;border-radius:50%;background:var(--card); border:1px solid var(--bd);color:var(--tit);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s} .topo-btn .ico{transform:rotate(180deg)} .topo-btn.ver{opacity:1;pointer-events:auto} .topo-btn:hover{background:var(--c1btn);color:var(--btxt);border-color:var(--c1)} /* ---------- Lightbox ---------- */ /* O atributo hidden vem do navegador como [hidden]{display:none}, e regras do autor sempre vencem as do navegador. Sem esta linha o overlay ficaria sempre visivel e o botao de fechar nao teria efeito. */ .lightbox[hidden]{display:none !important} .lightbox{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:34px;cursor:zoom-out} .lightbox img{max-width:100%;max-height:88vh;border-radius:var(--r);animation:abreLb .3s ease} @keyframes abreLb{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} .lb-fechar{position:absolute;right:22px;top:16px;font-size:38px;color:#fff;line-height:1} /* ---------- Animacoes de entrada ---------- */ .com-anim [data-anim]{opacity:0;transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)} .com-anim [data-anim="sobe"]{transform:translateY(38px)} .com-anim [data-anim="esq"]{transform:translateX(-42px)} .com-anim [data-anim="dir"]{transform:translateX(42px)} .com-anim [data-anim="zoom"]{transform:scale(.93)} .com-anim [data-anim].visivel{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .com-anim [data-anim]{opacity:1;transform:none} } /* ---------- Responsivo ---------- */ @media(max-width:1024px){ .hero-B .hero-in,.hero-E .hero-in{grid-template-columns:1fr} .hero-arte{max-width:520px;margin:0 auto} .card-flutua-1{left:0}.card-flutua-2{right:0} .sobre-grade,.faq-grade,.contato-grade{grid-template-columns:1fr} .faq-lado{position:static} .sobre-fotos{max-width:520px;margin:0 auto 34px} .rodape-grade{grid-template-columns:1fr 1fr} .galeria-item:nth-child(1),.galeria-item:nth-child(6){grid-column:span 1;aspect-ratio:4/3} } @media(max-width:860px){ .hamburger{display:flex} /* backdrop-filter no cabecalho o tornaria o bloco de contencao do menu position:fixed, prendendo a gaveta a altura do header (sem fundo visivel). */ .cabecalho{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} .menu{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--bg2);border-left:1px solid var(--bd); flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:30px 24px; transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.3,1);z-index:80} .menu.aberto{transform:none;box-shadow:-20px 0 60px -20px rgba(0,0,0,.7)} .menu > a:not(.btn){padding:14px 16px;font-size:17px;font-family:var(--ft)} .menu > a:not(.btn)::after{display:none} .menu-cta{margin:16px 0 0 !important;justify-content:center} .hero{min-height:auto;padding:60px 0 80px} .hero-numeros{gap:20px} .form-2{grid-template-columns:1fr} .zap-float span{display:none} .zap-float{padding:15px;border-radius:50%} .rodape-grade{grid-template-columns:1fr;gap:32px} .depoimentos .cabeca-sec{margin-bottom:26px} } @media(max-width:520px){ body{font-size:15.8px} .container{width:calc(100% - 32px)} .cartao,.plano,.contato-form{padding:26px 22px} .btn{padding:13px 22px;font-size:14.5px} .btn-g{padding:15px 26px;font-size:15px} .hero-botoes .btn{width:100%} .cta-botoes .btn{width:100%} .destaques-grade{grid-template-columns:1fr} }