/* ===================================================================== CLOA Assessoria Estratégica: folha de estilo única Paleta e fontes espelhadas do site modelo (creme / navy / dourado). Cores injetadas por includes/config.php no . ===================================================================== */ /* ---------- 1. TOKENS ---------- */ :root{ --marca:#052263; --destaque:#C3A57C; /* dourado do logo — SÓ sobre fundo escuro */ --ouro-escuro:#7E6132; /* mesmo acento, legível sobre fundo claro */ --fundo:#F7F1E9; --fundo-alt:#EFE6D8; --tinta:#1B2749; --branco:#FFFCF7; --cinza:#59667F; --linha:#E2D8C8; --linha-escura:rgba(255,255,255,.16); --fonte:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --serifa:'Cormorant Garamond',Georgia,'Times New Roman',serif; --raio:14px; --raio-sm:10px; --container:1200px; --espaco-secao:clamp(68px,9vw,132px); --transicao:.35s cubic-bezier(.22,.61,.36,1); --sombra:0 1px 2px rgba(5,34,99,.05),0 16px 40px -18px rgba(5,34,99,.20); } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--fonte); font-size:17px; line-height:1.7; color:var(--tinta); background:var(--fundo); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0 0 1.1em} ul{margin:0;padding:0;list-style:none} button{font:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--ouro-escuro);outline-offset:3px;border-radius:3px} h1,h2,h3{margin:0 0 .5em;font-weight:500;letter-spacing:-.01em;line-height:1.2} h1,h2{font-family:var(--serifa);font-weight:500;letter-spacing:0;line-height:1.12} .container{width:min(100% - 40px,var(--container));margin-inline:auto} .container--estreito{width:min(100% - 40px,780px)} .pular{position:absolute;left:-9999px;top:0;background:var(--marca);color:#fff;padding:12px 18px;z-index:200} .pular:focus{left:0} .icone{width:1.1em;height:1.1em;flex:none} /* ---------- 3. COMPONENTES ---------- */ /* Cabeçalho */ .cabecalho{ position:sticky;top:0;z-index:100; background:color-mix(in srgb,var(--fundo) 88%,transparent); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color var(--transicao),box-shadow var(--transicao); } .cabecalho.rolou{border-bottom-color:var(--linha);box-shadow:0 8px 24px -20px rgba(5,34,99,.5)} .cabecalho__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px} .logo{display:flex;align-items:center;gap:14px;flex:none} .logo img{ height:46px;width:auto;display:block;border-radius:5px; transition:transform var(--transicao),box-shadow var(--transicao); box-shadow:0 2px 10px -5px rgba(5,34,99,.5); } .logo:hover img{transform:translateY(-1px);box-shadow:0 6px 16px -7px rgba(5,34,99,.55)} .logo__apoio{ font-size:10.5px;text-transform:uppercase;letter-spacing:.22em; color:var(--cinza);white-space:nowrap;padding-top:2px; border-left:1px solid var(--linha);padding-left:14px; } .rodape__marca img{height:72px;width:auto;margin-bottom:18px} /* O botão dentro do menu precisa vencer a cor herdada de .nav a */ .nav a.btn--marca{color:var(--fundo)} .nav a.btn--marca:hover{color:var(--fundo)} .nav{display:flex;align-items:center;gap:34px} .nav a{font-size:15.5px;font-weight:400;color:var(--tinta);position:relative;padding:4px 0;transition:color var(--transicao)} .nav a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0; background:var(--marca);transition:width var(--transicao); } .nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after{width:100%} .nav a[aria-current="page"]{font-weight:500} .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px} .menu-toggle span{display:block;width:24px;height:1.5px;background:var(--marca);transition:var(--transicao)} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* Botões */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border:1px solid transparent;border-radius:4px; font-size:15px;font-weight:500;letter-spacing:.01em;text-align:center; transition:transform var(--transicao),background var(--transicao),color var(--transicao),border-color var(--transicao),box-shadow var(--transicao); } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn .icone{transition:transform var(--transicao)} .btn:hover .icone{transform:translateX(4px)} .btn--marca{background:var(--marca);color:var(--fundo);box-shadow:0 10px 24px -14px rgba(5,34,99,.8)} .btn--marca:hover{background:#0A3183;box-shadow:0 16px 30px -14px rgba(5,34,99,.85)} .btn--ouro{background:var(--destaque);color:var(--marca)} .btn--ouro:hover{background:#D2B78F} .btn--linha{border-color:var(--marca);color:var(--marca)} .btn--linha:hover{background:var(--marca);color:var(--fundo)} .btn--claro{background:var(--fundo);color:var(--marca)} .btn--claro-linha{border-color:var(--linha-escura);color:var(--branco)} .btn--claro-linha:hover{background:rgba(255,255,255,.1)} .btn--pequeno{padding:11px 20px;font-size:14px} .btn--bloco{width:100%} .botoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} /* Tipografia de seção */ .chapeu{ display:block;font-size:13px;font-weight:400; letter-spacing:.02em;color:var(--cinza);margin-bottom:18px; } .chapeu--ouro{color:var(--ouro-escuro);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:500} .chapeu--claro{color:rgba(255,255,255,.65)} .titulo{font-size:clamp(32px,4.6vw,52px);color:var(--marca)} .titulo--claro{color:var(--branco)} .titulo-display{font-size:clamp(38px,5.4vw,64px);color:var(--marca);letter-spacing:-.005em} .titulo-display em{font-style:italic;color:var(--ouro-escuro)} .subtitulo{font-size:clamp(17px,1.6vw,19px);color:var(--cinza);max-width:60ch} .secao__cabecalho{max-width:60ch;margin-bottom:clamp(40px,5vw,64px)} .secao__cabecalho--centro{margin-inline:auto;text-align:center} /* Grades */ .grade{display:grid;gap:24px} .grade--2{grid-template-columns:repeat(2,1fr)} .grade--3{grid-template-columns:repeat(3,1fr)} /* Listas com check */ .lista-check li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--cinza);margin-top:12px} .lista-check .icone{color:var(--ouro-escuro);margin-top:6px;width:17px;height:17px} .lista-check--clara li{color:rgba(255,255,255,.78)} /* Revelar ao rolar */ .revelar{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)} .revelar.visivel{opacity:1;transform:none} /* Regra decorativa */ .regua{width:56px;height:1px;background:var(--ouro-escuro);margin:0 0 26px} .regua--centro{margin-inline:auto} /* Sobre fundo escuro, o acento volta a ser o dourado do logo */ .secao--escura .chapeu--ouro, .secao--escura .lista-check .icone, .secao--escura .titulo-display em, .rodape .chapeu--ouro{color:var(--destaque)} .secao--escura .card__icone{border-color:var(--destaque);color:var(--destaque)} .secao--escura .regua{background:var(--destaque)} /* ---------- 4. SEÇÕES ---------- */ .secao{padding:var(--espaco-secao) 0} .secao--alt{background:var(--fundo-alt)} .secao--escura{background:var(--marca);color:var(--branco)} .secao--escura p{color:rgba(255,255,255,.76)} .secao--compacta{padding:clamp(52px,6vw,84px) 0} /* HERO — início */ .hero{padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px)} .hero__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:center} .hero__texto p{color:var(--cinza);max-width:52ch} .hero__texto strong{color:var(--marca);font-weight:700} .hero__assinatura{ font-family:var(--serifa);font-size:clamp(21px,2.4vw,27px); color:var(--marca);margin-top:28px; } .hero__figura{position:relative} .hero__figura img{border-radius:6px;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .hero__figura .placeholder-foto{aspect-ratio:4/3} /* HERO — páginas internas */ .hero-pagina{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px);background:var(--fundo-alt)} .hero-pagina__inner{max-width:74ch} /* Equações "Vender mais ≠ lucrar mais" */ .equacoes{display:grid;gap:0;border-top:1px solid var(--linha)} .equacao{ display:flex;flex-wrap:wrap;align-items:baseline;gap:14px; padding:26px 0;border-bottom:1px solid var(--linha); font-family:var(--serifa);font-size:clamp(24px,3.4vw,38px);color:var(--marca); } .equacao__sinal{ font-family:var(--fonte);font-size:.62em;color:var(--ouro-escuro); border:1px solid var(--ouro-escuro);border-radius:50%; width:1.9em;height:1.9em;display:inline-grid;place-items:center;flex:none; } .equacao__b{color:var(--cinza)} .antes__fecho{ font-family:var(--serifa);font-size:clamp(20px,2.3vw,26px); color:var(--marca);max-width:46ch;margin-top:40px; } /* Jornada — etapas em 3 colunas */ .jornada{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:16px} .jornada__item{ display:flex;flex-direction:column; background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio); padding:34px 30px;transition:transform var(--transicao),box-shadow var(--transicao); } .jornada__item:hover{transform:translateY(-5px);box-shadow:var(--sombra)} .jornada__n{font-family:var(--serifa);font-size:15px;letter-spacing:.2em;color:var(--ouro-escuro);display:block;margin-bottom:20px} .jornada__rotulo{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--cinza);display:block;margin-bottom:8px} .jornada__item h3{font-family:var(--serifa);font-size:27px;color:var(--marca);margin-bottom:14px} .jornada__item p{font-size:16px;color:var(--cinza)} .jornada__saida{ margin-top:auto;padding-top:20px;border-top:1px solid var(--linha); font-size:15px;color:var(--tinta); } .jornada__saida strong{color:var(--marca);font-weight:700} .jornada__item .btn{margin-top:22px} /* Manifesto */ .manifesto__destaque{ font-family:var(--serifa);font-size:clamp(26px,3.6vw,44px);line-height:1.24; color:var(--branco);max-width:24ch; } /* Versão reduzida: usada nos blocos de depoimento do Fio da Meada e da Jornada, onde a frase divide espaço com um texto corrido logo abaixo. */ .manifesto__destaque--menor{ font-size:clamp(22px,2.4vw,30px);max-width:34ch;margin-bottom:18px; } .manifesto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} /* Cards genéricos (Raio-X, Programa) */ .card{ background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio); padding:36px 32px;transition:transform var(--transicao),box-shadow var(--transicao); } .card:hover{transform:translateY(-5px);box-shadow:var(--sombra)} .card__icone{ display:inline-grid;place-items:center;width:52px;height:52px; border:1px solid var(--ouro-escuro);border-radius:50%; color:var(--ouro-escuro);margin-bottom:24px; } .card__icone .icone{width:23px;height:23px} .card h3{font-family:var(--serifa);font-size:25px;color:var(--marca)} .card p{font-size:16px;color:var(--cinza);margin:0} .card--escuro{background:rgba(255,255,255,.05);border-color:var(--linha-escura)} .card--escuro h3{color:var(--branco)} .card--escuro p{color:rgba(255,255,255,.72)} .card--escuro:hover{background:rgba(255,255,255,.08)} /* Fases numeradas */ /* list-style:none — o número já é desenhado pelo .fase__n; sem isto o navegador imprime também o marcador "1." do
    ao lado do "01". */ .fases{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;padding-left:0} .fase{padding:34px 26px 34px 0;border-top:2px solid var(--linha);position:relative} .fase::before{ content:"";position:absolute;top:-6px;left:0;width:10px;height:10px; border-radius:50%;background:var(--ouro-escuro); } .fase__n{font-family:var(--serifa);font-size:40px;color:var(--ouro-escuro);line-height:1;display:block;margin-bottom:12px} .fase h3{font-size:19px;font-weight:500;color:var(--marca);margin-bottom:8px} .fase p{font-size:15px;color:var(--cinza);margin:0} /* Compromisso Leme */ .leme{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} .leme__icone{ width:120px;height:120px;display:grid;place-items:center; border:1px solid var(--linha-escura);border-radius:50%;color:var(--destaque);margin-bottom:28px; } .leme__icone .icone{width:56px;height:56px} /* Placeholder de imagem */ .placeholder-foto{ aspect-ratio:4/3;border-radius:6px;border:1px dashed var(--linha); background:var(--branco);display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;color:var(--cinza);text-align:center;padding:20px; } .placeholder-foto span{font-weight:500;color:var(--marca)} .placeholder-foto small{font-size:13px;opacity:.75} /* Faixa de CTA */ .faixa-cta{text-align:center} .faixa-cta .titulo{margin-inline:auto;max-width:20ch} .faixa-cta p{margin-inline:auto;max-width:56ch} .faixa-cta .botoes{justify-content:center} .faixa-cta__nota{font-size:14px;color:rgba(255,255,255,.6);margin-top:22px} /* ---------- QUIZ ---------- */ .quiz{ background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio); padding:clamp(26px,4vw,48px);box-shadow:var(--sombra); } .quiz__progresso{display:flex;align-items:center;gap:16px;margin-bottom:32px} .quiz__barra{flex:1;height:4px;background:var(--fundo-alt);border-radius:100px;overflow:hidden} .quiz__barra i{display:block;height:100%;width:0;background:var(--destaque);transition:width .4s var(--transicao)} .quiz__contador{font-size:13px;color:var(--cinza);letter-spacing:.06em;flex:none} .quiz__pergunta{font-family:var(--serifa);font-size:clamp(24px,3vw,34px);color:var(--marca);margin-bottom:28px;line-height:1.22} .quiz__opcoes{display:grid;gap:12px} .quiz__opcao{ display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left; padding:19px 22px;border:1px solid var(--linha);border-radius:var(--raio-sm); background:var(--fundo);color:var(--tinta);font-size:16.5px;line-height:1.5; transition:border-color var(--transicao),background var(--transicao),transform var(--transicao); } .quiz__opcao:hover{border-color:var(--marca);background:var(--branco);transform:translateX(4px)} .quiz__opcao::before{ content:"";width:18px;height:18px;flex:none;margin-top:3px; border:1px solid var(--cinza);border-radius:50%;transition:var(--transicao); } .quiz__opcao:hover::before{border-color:var(--destaque);box-shadow:inset 0 0 0 4px var(--destaque)} .quiz__voltar{ background:none;border:0;color:var(--cinza);font-size:14px; margin-top:24px;padding:6px 0;text-decoration:underline;text-underline-offset:4px; } .quiz__voltar:hover{color:var(--marca)} .quiz__resultado{display:none} .quiz__resultado.ativo{display:block;animation:aparece .55s cubic-bezier(.22,.61,.36,1) both} @keyframes aparece{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .quiz__selo{ display:inline-block;font-size:11.5px;text-transform:uppercase;letter-spacing:.16em; color:var(--ouro-escuro);border:1px solid var(--ouro-escuro);border-radius:100px; padding:7px 16px;margin-bottom:20px; } .quiz__resultado h2{font-family:var(--serifa);font-size:clamp(30px,4vw,44px);color:var(--marca);margin-bottom:6px} .quiz__resumo{font-size:18px;color:var(--marca);font-weight:500;margin-bottom:20px} .quiz__bloco{margin-top:30px;padding-top:26px;border-top:1px solid var(--linha)} .quiz__bloco h3{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--cinza);font-weight:500;margin-bottom:16px} .quiz__passo{ background:var(--fundo-alt);border-left:2px solid var(--ouro-escuro); padding:22px 24px;border-radius:0 var(--raio-sm) var(--raio-sm) 0;margin-top:26px; } .quiz__passo p{margin:0;color:var(--tinta)} /* ---------- FORMULÁRIO ---------- */ .contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start} .form{ background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio); padding:clamp(26px,3.5vw,40px); } .campo{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:18px} .campo label{font-size:14px;font-weight:500;color:var(--marca)} .campo input,.campo select,.campo textarea{ font:inherit;font-size:16px;padding:14px 16px; border:1px solid var(--linha);border-radius:var(--raio-sm); background:var(--fundo);color:var(--tinta); transition:border-color var(--transicao),box-shadow var(--transicao); } .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(5,34,99,.1); } .campo textarea{resize:vertical;min-height:120px} .form__nota{font-size:13px;color:var(--cinza);margin:16px 0 0;text-align:center} .mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .aviso{padding:14px 18px;border-radius:var(--raio-sm);font-size:15px;margin:0 0 20px} .aviso--erro{background:#FBE9E6;color:#8C2E1D} .aviso--ok{background:#E9F1E6;color:#2C5320} .contato-canais{display:grid;gap:18px;margin-top:32px} .canal{ display:flex;gap:16px;align-items:flex-start; padding:22px 24px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco); transition:border-color var(--transicao),transform var(--transicao); } .canal:hover{border-color:var(--destaque);transform:translateX(4px)} .canal .icone{color:var(--ouro-escuro);width:22px;height:22px;margin-top:3px} .canal strong{display:block;color:var(--marca);font-weight:500} .canal span{font-size:15px;color:var(--cinza)} /* ---------- BLOG ---------- */ .posts{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .post{ display:flex;flex-direction:column;background:var(--branco); border:1px solid var(--linha);border-radius:var(--raio);padding:32px; transition:transform var(--transicao),box-shadow var(--transicao); } .post:hover{transform:translateY(-4px);box-shadow:var(--sombra)} /* Capa do post: opcional. Sem ela o card fica exatamente como era. O padding some no topo para a imagem encostar na borda do card. */ .post--capa{padding-top:0} .post__capa{display:block;margin:0 -32px 24px;overflow:hidden; border-radius:var(--raio) var(--raio) 0 0;background:var(--fundo-alt)} .post__capa img{width:100%;height:210px;object-fit:cover; transition:transform var(--transicao)} .post:hover .post__capa img{transform:scale(1.03)} .post__meta{font-size:13px;color:var(--cinza);letter-spacing:.04em;margin-bottom:14px} .post h2,.post h3{font-family:var(--serifa);font-size:26px;color:var(--marca);margin-bottom:12px} .post p{font-size:16px;color:var(--cinza)} .post__link{margin-top:auto;padding-top:18px;color:var(--marca);font-size:15px;font-weight:500;display:inline-flex;gap:8px;align-items:center} .post__link .icone{color:var(--ouro-escuro);transition:transform var(--transicao)} .post:hover .post__link .icone{transform:translateX(5px)} .artigo{max-width:70ch} .artigo h1{font-size:clamp(32px,4.4vw,50px);color:var(--marca);margin-bottom:18px} .artigo p{font-size:18px;color:var(--tinta)} .artigo__meta{font-size:14px;color:var(--cinza);margin-bottom:34px;letter-spacing:.04em} .artigo__capa{margin:0 0 34px} .artigo__capa img{width:100%;height:auto;border-radius:var(--raio)} /* Formatação que o editor do painel produz */ .artigo h3{font-size:clamp(19px,2vw,23px);color:var(--marca);margin-top:1.5em} .artigo ul,.artigo ol{margin:0 0 1.2em 1.4em;padding-left:1em;list-style:revert;font-size:18px} .artigo li{margin-bottom:.5em} .artigo blockquote{ margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--ouro-escuro); font-family:var(--serifa);font-size:22px;line-height:1.4;color:var(--marca); } .artigo blockquote p{font-size:inherit;font-family:inherit;color:inherit;margin:0} /* Paginação do Repertório */ .paginacao{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:12px 18px;margin-top:clamp(40px,5vw,64px); } .paginacao__lista{display:flex;gap:8px} .paginacao__n{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 12px;border-radius:6px; border:1px solid var(--linha);color:var(--marca);font-size:15px; transition:background var(--transicao),color var(--transicao),border-color var(--transicao); } a.paginacao__n:hover{background:var(--fundo-alt);border-color:var(--ouro-escuro)} .paginacao__n--atual{background:var(--marca);border-color:var(--marca);color:var(--fundo);font-weight:500} .paginacao__seta{ color:var(--marca);font-size:15px;font-weight:500;padding:10px 4px; border-bottom:1px solid transparent;transition:border-color var(--transicao); } .paginacao__seta:hover{border-bottom-color:var(--ouro-escuro)} /* ---------- RODAPÉ ---------- */ .rodape{background:var(--marca);color:rgba(255,255,255,.72);padding:clamp(56px,7vw,88px) 0 32px} .rodape__inner{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:44px} .rodape__marca strong{display:block;font-family:var(--serifa);font-size:23px;color:var(--branco);letter-spacing:.04em;margin-bottom:10px} .rodape__marca p{max-width:40ch;font-size:15px} .rodape__col h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--destaque);margin-bottom:18px;font-weight:500} .rodape__col li{margin-bottom:11px;font-size:15px} .rodape__col a{transition:color var(--transicao)} .rodape__col a:hover{color:var(--destaque)} .rodape__base{ margin-top:52px;padding-top:26px;border-top:1px solid var(--linha-escura); font-size:13px;color:rgba(255,255,255,.5); } .rodape__base p{margin:0} /* WhatsApp flutuante */ .whats-flutuante{ position:fixed;right:22px;bottom:22px;z-index:90; width:56px;height:56px;border-radius:50%; display:grid;place-items:center;background:#25D366;color:#fff; box-shadow:0 12px 28px -8px rgba(37,211,102,.55); transition:transform var(--transicao); } .whats-flutuante:hover{transform:scale(1.08)} /* ---------- 5. RESPONSIVO ---------- */ @media (max-width:1100px){ .nav{gap:24px} .jornada,.fases{grid-template-columns:repeat(2,1fr)} .grade--3{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .hero__grid,.manifesto__grid,.leme,.contato-grid{grid-template-columns:1fr} .hero__figura{order:-1} .rodape__inner{grid-template-columns:1fr 1fr} .rodape__marca{grid-column:1/-1} .posts{grid-template-columns:1fr} } @media (max-width:900px){ .logo__apoio{display:none} } @media (max-width:780px){ body{font-size:16px} .logo img{height:40px} .hero__figura{order:0;margin-top:32px} .menu-toggle{display:flex} .nav{ position:fixed;inset:84px 0 auto 0; flex-direction:column;align-items:stretch;gap:0; background:var(--fundo);border-bottom:1px solid var(--linha); padding:10px 20px 26px; transform:translateY(-130%);opacity:0;pointer-events:none; transition:transform var(--transicao),opacity var(--transicao); box-shadow:0 24px 40px -24px rgba(5,34,99,.4); } .nav.aberto{transform:translateY(0);opacity:1;pointer-events:auto} .nav a{padding:15px 0;border-bottom:1px solid var(--linha);font-size:17px} .nav a:not(.btn)::after{display:none} .nav__cta{border:0;margin-top:18px} .grade--2,.grade--3,.jornada,.fases,.campo-duplo{grid-template-columns:1fr} .fase{padding:28px 0} .card,.jornada__item{padding:28px 24px} .whats-flutuante{width:52px;height:52px;right:16px;bottom:16px} .equacao{font-size:22px;gap:10px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .revelar{opacity:1;transform:none} } /* ===================================================================== COMPONENTES ADICIONAIS — trilha, FAQ, consentimento ===================================================================== */ /* Trilha de navegação (breadcrumbs) */ .trilha{background:var(--fundo-alt);border-bottom:1px solid var(--linha);font-size:13.5px} .trilha ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:13px 0;margin:0} .trilha li{display:flex;align-items:center;gap:8px;color:var(--cinza)} .trilha li+li::before{content:"/";color:var(--linha);font-size:14px} .trilha a{color:var(--cinza);transition:color var(--transicao)} .trilha a:hover{color:var(--marca);text-decoration:underline;text-underline-offset:3px} .trilha [aria-current="page"]{color:var(--marca);font-weight:500} .hero-pagina{padding-top:clamp(40px,5vw,72px)} /* FAQ */ .faq{border-top:1px solid var(--linha)} .faq__item{border-bottom:1px solid var(--linha)} .faq__item h3{margin:0;font-size:inherit;font-weight:inherit} .faq__pergunta{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; background:none;border:0;padding:24px 0;text-align:left; font-family:var(--fonte);font-size:17.5px;font-weight:500;color:var(--marca); } .faq__pergunta .icone{color:var(--ouro-escuro);transition:transform var(--transicao);width:21px;height:21px;flex:none} .faq__pergunta[aria-expanded="true"] .icone{transform:rotate(45deg)} .faq__resposta{padding-bottom:26px;color:var(--cinza);max-width:66ch} .faq__resposta p{margin:0} /* Banner de consentimento (LGPD) */ .consent{ position:fixed;left:16px;right:16px;bottom:16px;z-index:120; max-width:680px;margin-inline:auto; display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px; background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio); padding:20px 24px;box-shadow:0 24px 60px -20px rgba(5,34,99,.35); transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease; } .consent--visivel{transform:translateY(0);opacity:1} .consent p{margin:0;flex:1 1 300px;font-size:14.5px;line-height:1.55;color:var(--cinza)} .consent a{color:var(--marca);text-decoration:underline;text-underline-offset:3px} .consent__acoes{display:flex;gap:10px;flex:none} /* Sociais no rodapé */ .rodape__sociais{display:flex;gap:18px;margin-top:16px} .rodape__sociais li{margin:0;font-size:14px} /* Links dentro de títulos de post */ .post h2 a{transition:color var(--transicao)} .post h2 a:hover{color:var(--destaque)} /* Conteúdo longo (política de privacidade, artigos) */ .artigo h2{font-size:clamp(23px,2.6vw,30px);color:var(--marca);margin-top:1.7em} .artigo a{color:var(--marca);text-decoration:underline;text-underline-offset:3px} @media (max-width:600px){ .consent{left:10px;right:10px;bottom:10px;padding:18px} .consent__acoes{width:100%} .consent__acoes .btn{flex:1} .whats-flutuante{bottom:auto;top:auto} } /* ===================================================================== reCAPTCHA v3 — selo flutuante O selo padrão do Google fica no canto inferior direito e cobriria o botão do WhatsApp. O Google permite ocultá-lo desde que a atribuição apareça no formulário — e ela aparece, logo abaixo do botão de envio. ===================================================================== */ .grecaptcha-badge{visibility:hidden !important} /* Linha final do rodapé — política de privacidade + crédito */ .rodape__legais{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-start;margin-top:10px} .rodape__legais a{transition:color var(--transicao)} .rodape__legais a:hover{color:var(--destaque);text-decoration:underline;text-underline-offset:3px} .rodape__sep{opacity:.45} @media (max-width:760px){ /* empilha em vez de deixar o separador solto no fim da linha */ .rodape__legais{flex-direction:column;align-items:flex-start;gap:6px} .rodape__sep{display:none} } /* ===================================================================== Redes sociais ===================================================================== */ .rodape__sociais{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .rodape__sociais li{margin:0} .rodape__sociais a{ display:inline-flex;align-items:center;gap:9px; padding:9px 15px;border:1px solid var(--linha-escura);border-radius:100px; font-size:14px;color:rgba(255,255,255,.8); transition:border-color var(--transicao),color var(--transicao),background var(--transicao),transform var(--transicao); } .rodape__sociais a:hover{ color:var(--marca);background:var(--destaque);border-color:var(--destaque); transform:translateY(-2px); } .rodape__sociais .icone{width:17px;height:17px} /* nos canais da página de contato os ícones seguem o padrão dos demais */ .canal .icone{flex:none} /* ===================================================================== DIAGNÓSTICO (/minha-trava) Sem JavaScript, todas as etapas aparecem empilhadas. Com JavaScript, o formulário ganha a classe .diag--js e mostra uma etapa por vez. ===================================================================== */ .diag__abertura{ color:var(--cinza);font-size:16px;border-left:3px solid var(--ouro-escuro); padding-left:16px;margin-bottom:36px; } .diag__etapa{border:0;padding:0;margin:0 0 46px} .diag--js .diag__etapa{display:none} .diag--js .diag__etapa--ativa{display:block} .diag__legenda{display:block;padding:0;margin-bottom:30px} .diag__legenda .chapeu{display:block;margin-bottom:8px} .diag__legenda-texto{ display:block;font-family:var(--serifa);font-size:clamp(24px,3vw,32px); line-height:1.2;color:var(--marca); } .diag__pergunta{ padding:26px 0 30px;border-top:1px solid var(--linha); } .diag__pergunta:first-of-type{border-top:0;padding-top:4px} .diag__enunciado{font-size:17px;font-weight:500;color:var(--marca);margin-bottom:16px;line-height:1.45} .diag__n{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;margin-right:10px;border-radius:50%; background:var(--fundo-alt);color:var(--ouro-escuro); font-family:var(--serifa);font-size:15px;vertical-align:1px; } .diag__opcoes{display:flex;flex-direction:column;gap:10px} .diag__opcao{ display:flex;gap:12px;align-items:flex-start;cursor:pointer; padding:14px 18px;border:1px solid var(--linha);border-radius:var(--raio-sm); background:var(--branco);font-size:15.5px;color:var(--tinta);line-height:1.5; transition:border-color var(--transicao),background var(--transicao),box-shadow var(--transicao); } .diag__opcao:hover{border-color:var(--ouro-escuro);background:#fff} .diag__opcao input{ appearance:none;-webkit-appearance:none;flex:none; width:19px;height:19px;margin-top:3px;border:1.5px solid var(--cinza); border-radius:50%;transition:border-color var(--transicao),box-shadow var(--transicao); } .diag__opcao input:checked{ border-color:var(--marca);border-width:6px; } .diag__opcao:has(input:checked){ border-color:var(--marca);background:var(--branco); box-shadow:0 0 0 1px var(--marca) inset; } .diag__opcao input:focus-visible{outline:2px solid var(--ouro-escuro);outline-offset:3px} .diag__pergunta--falta .diag__enunciado{color:#8C2E1D} .diag__pergunta--falta .diag__opcao{border-color:#E3B5AC} /* Barra de progresso */ .diag__progresso{margin-bottom:30px} .diag__barra{height:4px;background:var(--fundo-alt);border-radius:99px;overflow:hidden} .diag__barra span{ display:block;height:100%;width:0;background:var(--ouro-escuro); border-radius:99px;transition:width .4s cubic-bezier(.22,.61,.36,1); } .diag__contador{font-size:13px;color:var(--cinza);margin:10px 0 0;letter-spacing:.04em} .diag__navegacao{display:flex;gap:14px;justify-content:space-between;margin-top:10px} .diag__navegacao .btn{min-width:150px} .diag__aviso{ margin-top:18px;padding:12px 16px;border-radius:var(--raio-sm); background:#FBE9E6;color:#8C2E1D;font-size:15px; } /* Na última etapa o botão de enviar é o próprio botão do formulário */ .diag--js .diag__etapa[data-etapa="contato"] .btn--bloco{margin-top:10px} @media (max-width:640px){ .diag__opcao{padding:13px 15px;font-size:15px} .diag__navegacao{flex-direction:column-reverse} .diag__navegacao .btn{width:100%} } /* Os botões da navegação usam display:inline-flex, que vence o atributo [hidden] do HTML. Sem esta regra, "Voltar" aparece já na primeira etapa. */ .diag [hidden], .diag__navegacao [hidden]{display:none !important}