depois de uma
, sem precisar de regra por combinação */ .texto section > * + *{margin-top:15px} .texto h3{font-size:15.5px;font-weight:500;color:#fff;margin-bottom:10px} .texto section > * + h3{margin-top:28px} .texto p{font-size:15px;line-height:1.82;color:rgba(214,232,244,.66)} .texto ul{padding-left:0;list-style:none;display:grid;gap:11px} /* títulos já carregam o afastamento no margin-bottom */ .texto h2 + *,.texto h3 + *{margin-top:0} .texto li{position:relative;padding-left:20px;font-size:15px;line-height:1.75; color:rgba(214,232,244,.66)} .texto li::before{content:"";position:absolute;left:2px;top:11px; width:5px;height:5px;border-radius:50%;background:rgba(111,180,210,.55)} .texto strong{font-weight:500;color:rgba(240,248,252,.92)} .texto a{color:#9FD0E4;text-decoration:none;border-bottom:1px solid rgba(159,208,228,.3); transition:color .3s,border-color .3s} .texto a:hover,.texto a:focus-visible{color:#fff;border-color:#9FD0E4} /* trechos que dependem de informação jurídica da Polvo */ .pend{color:#E3B98B;border-bottom:1px dotted rgba(227,185,139,.5)} .aviso{margin-top:clamp(44px,7vh,72px);padding:clamp(20px,2.4vw,28px); border:1px solid rgba(159,208,228,.16);border-radius:16px; background:rgba(3,49,102,.18)} .aviso p{font-size:13.5px;line-height:1.7;color:rgba(214,232,244,.56)} .vigencia{margin-top:clamp(30px,4.4vh,44px);font-size:12px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:rgba(214,232,244,.34)} /* ---------- estado de página atual no menu ---------- */ .top .navlink[aria-current="page"]{color:#fff} .top .navlink[aria-current="page"]::before{content:"";display:inline-block; width:4px;height:4px;border-radius:50%;background:#6FB4D2; margin-right:8px;flex:0 0 auto} /* a seção da grade vem logo depois do destaque: menos respiro no topo que o padrão das seções da home */ .sec.grade-sec{padding-top:clamp(44px,7vh,84px)} /* ============================================================ PÁGINAS DE SERVIÇO Reaproveita ao máximo o que já existe no styles.css: .cases/.caso (linhas editoriais), .grade/.bloco (cartões), .passos/.passo (sequência numerada), .setores span (chips), .destaques/.dest (números) e .post (artigos). ============================================================ */ /* ---------- capa em duas colunas: texto + case ---------- */ .capa.dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%); gap:clamp(30px,4.5vw,72px);align-items:center; padding-bottom:clamp(30px,5vh,56px)} .capa.dupla .lead{margin-top:clamp(18px,2.6vh,26px)} .capa.dupla .cta-capa{margin-top:clamp(24px,3.4vh,34px)} /* o h1 da capa dupla divide a linha com o cartão: menos medida */ .capa.dupla h1{max-width:19ch;font-size:clamp(31px,4.4vw,54px)} @media (max-width:900px){ .capa.dupla{grid-template-columns:1fr;gap:clamp(30px,5vh,44px)} .capa.dupla h1{max-width:19ch} } /* botão de ação sólido, para a capa e os fechamentos de seção */ /* mesmo vidro azul do botão Orçamento do header */ .acao{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:13.5px; font-weight:500;letter-spacing:.01em;cursor:pointer;text-decoration:none;color:#fff; padding:13px 28px;border-radius:12px; border:1px solid rgba(159,208,228,.26); background:linear-gradient(158deg, rgba(120,164,188,.18), rgba(5,62,112,.32)); -webkit-backdrop-filter:blur(5px) saturate(150%);backdrop-filter:blur(5px) saturate(150%); box-shadow:0 20px 46px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(159,208,228,.16); text-shadow:0 1px 3px rgba(0,0,0,.35); transition:filter .2s,transform .3s} .acao:hover,.acao:focus-visible{transform:translateY(-2px)} .acao:active{filter:brightness(.92)} .acao:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px} .acao i{font-style:normal;transition:transform .3s} .acao:hover i{transform:translate(2px,-2px)} /* cartão de case na capa: retrato, mesma anatomia do .post */ .capacase{position:relative;display:block;text-decoration:none;overflow:hidden; aspect-ratio:4/3.1;border-radius:20px; border:1px solid rgba(159,208,228,.18)} .capacase .pimg{position:absolute;inset:0;background-size:cover;background-position:center} .capacase .pimg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,6,16,.42) 0%,rgba(0,6,16,.04) 32%,rgba(0,6,16,.74) 100%)} .capacase .pglass{position:absolute;left:12px;right:12px;bottom:12px; display:block;padding:clamp(15px,1.6vw,20px);border-radius:15px; background:rgba(6,26,52,.46);border:1px solid rgba(159,208,228,.2); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); transition:background .4s,border-color .4s} .capacase:hover .pglass{background:rgba(6,26,52,.62);border-color:rgba(159,208,228,.36)} .capacase:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px} .capacase .pmarca{top:15px;left:17px;right:17px} /* ---------- tabela editorial: rótulo curto + explicação ---------- */ /* variação do .caso sem numeração, para conteúdo que não é sequência */ .caso.sem-n{grid-template-columns:14px minmax(0,1fr) minmax(0,1.35fr)} .caso.sem-n .n{padding-top:12px} .caso.sem-n .n::before{content:"";display:block;width:5px;height:5px;border-radius:50%; background:rgba(111,180,210,.6)} .caso h3 + .lista{margin-top:12px} .caso .res .lista{margin-top:0} /* listas curtas dentro das linhas */ .lista{list-style:none;display:grid;gap:9px} .lista li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.6; color:rgba(214,232,244,.6)} .lista li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px; border-radius:50%;background:rgba(111,180,210,.5)} @media (max-width:860px){ .caso.sem-n{grid-template-columns:14px 1fr} } /* ---------- banda: painel que quebra o ritmo da página ---------- */ /* na referência é um bloco claro sobre fundo creme; aqui, sendo o site escuro, o mesmo movimento se faz com um azul mais aceso */ .banda{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,56px)} .banda-in{border-radius:clamp(22px,2.6vw,32px); padding:clamp(38px,6vw,76px) clamp(22px,4vw,56px); background: radial-gradient(70% 60% at 50% 0%, rgba(120,164,188,.18), transparent 70%), linear-gradient(168deg,#053E70 0%,#033166 44%,#011A3F 100%); border:1px solid rgba(159,208,228,.2)} .banda-in .shead{max-width:760px} .banda-in .title{color:#fff} .banda-in .lead{color:rgba(226,240,248,.72)} /* cartões sobre a banda precisam de mais contraste que sobre o abismo */ .banda-in .bloco{background:rgba(0,12,30,.34);border-color:rgba(159,208,228,.2)} .banda-in .bloco:hover{background:rgba(0,12,30,.46);border-color:rgba(159,208,228,.4)} .banda-in .bloco p{color:rgba(226,240,248,.68)} .banda-in .lista li{color:rgba(226,240,248,.66)} .grade.q3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:980px){ .grade.q3{grid-template-columns:1fr 1fr} } @media (max-width:620px){ .grade.q3{grid-template-columns:1fr} } /* ---------- grupos de plataformas: rótulo + itens ---------- */ .grupos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px);margin-top:clamp(38px,5.5vh,64px)} .grupo{border-top:1px solid rgba(159,208,228,.2);padding-top:20px} .grupo h3{font-size:15.5px;font-weight:500;color:#fff;margin-bottom:14px} .grupo .lista li{font-size:13px} .grupo .obs{font-size:13px;line-height:1.6;color:rgba(214,232,244,.5)} @media (max-width:900px){ .grupos{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .grupos{grid-template-columns:1fr} } /* ---------- sanfona de cases relacionados ---------- */ .sanfona{margin-top:clamp(38px,5.5vh,64px);border-top:1px solid rgba(159,208,228,.14)} .linha{border-bottom:1px solid rgba(159,208,228,.14)} .linha > .cab{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) 22px; gap:clamp(14px,2.4vw,40px);align-items:center;width:100%; font:inherit;text-align:left;cursor:pointer;color:inherit; background:none;border:0;padding:clamp(20px,2.4vw,28px) 0; transition:color .3s} .linha > .cab:hover{color:#9FD0E4} .linha > .cab:focus-visible{outline:2px solid #9FD0E4;outline-offset:2px} .lmarca{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff} .ltit{font-size:14.5px;line-height:1.5;color:rgba(214,232,244,.66)} .lseta{justify-self:end;width:18px;height:18px;opacity:.5; transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s} .cab[aria-expanded="true"] .lseta{transform:rotate(180deg);opacity:1} .lcorpo{overflow:hidden;max-height:0; transition:max-height .5s cubic-bezier(.22,1,.36,1)} .lcorpo > div{padding:0 0 clamp(24px,3vw,32px)} .lcorpo .destaques{margin-bottom:22px} .lcorpo p{max-width:74ch;font-size:14.5px;line-height:1.75;color:rgba(214,232,244,.62)} .lcorpo p + p{margin-top:13px} .lcorpo strong{font-weight:500;color:rgba(240,248,252,.9)} /* linha sem conteúdo a expandir: some o gatilho e a seta */ .linha.estatica > .cab{cursor:default} .linha.estatica > .cab:hover{color:inherit} .linha.estatica .lseta{display:none} .linha.estatica > .cab{grid-template-columns:minmax(0,240px) minmax(0,1fr)} @media (max-width:760px){ .linha > .cab,.linha.estatica > .cab{grid-template-columns:1fr;gap:8px;align-items:start} .lseta{position:absolute;right:0;top:clamp(22px,2.6vw,30px)} .linha{position:relative} } /* ---------- citação ---------- */ .citacao{margin-top:clamp(34px,5vh,52px);padding:clamp(24px,3vw,36px); border-radius:20px;border:1px solid rgba(159,208,228,.16); background:linear-gradient(158deg,rgba(9,60,104,.24),rgba(2,20,44,.36))} .citacao p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,24px); line-height:1.5;letter-spacing:-.01em;color:rgba(240,248,252,.92);max-width:44ch} .citacao cite{display:block;margin-top:18px;font-style:normal;font-size:12.5px; font-weight:500;color:rgba(214,232,244,.5)} /* ---------- prosa curta dentro de uma seção ---------- */ .prosa{max-width:66ch;margin-top:clamp(30px,4.4vh,48px)} .prosa p{font-size:15.5px;line-height:1.8;color:rgba(214,232,244,.66)} .prosa p + p{margin-top:16px} .prosa strong{font-weight:500;color:rgba(240,248,252,.9)} /* ---------- fechamento da página de serviço ---------- */ .fecha{text-align:center;margin-top:clamp(44px,7vh,80px)} .fecha p{margin:0 auto clamp(22px,3.2vh,30px);max-width:44ch; font-size:clamp(16px,1.6vw,21px);font-weight:300;line-height:1.5; color:rgba(226,240,248,.78)} /* chips de rótulo sem descrição (tecnologias, objetivos) */ .setores.esq{justify-content:flex-start} /* rótulo que introduz uma sublista ("Recomendado para", "O que entrega"). Sem isso ele herda o cinza da .tagline do .caso e cola no parágrafo. */ .caso .res > .tagline, .bloco > .tagline{ margin-top:16px;margin-bottom:10px; font-size:12.5px;font-weight:500;line-height:1.4; color:rgba(159,208,228,.82)} .caso .res > .tagline + .lista, .bloco > .tagline + .lista{margin-top:0} /* quando a lista vem direto depois do parágrafo, sem rótulo */ .caso .res > p + .lista, .bloco > p + .lista{margin-top:14px} /* o corpo expandido alinha com a coluna do título, não com a da marca: a marca fica como rótulo da linha e o conteúdo recua junto do texto */ .lcorpo > div{padding-left:calc(240px + clamp(14px,2.4vw,40px))} @media (max-width:760px){ .lcorpo > div{padding-left:0} } /* No mobile, o styles.css move só o .lado para a segunda coluna e o .res cai na faixa de 36px, quebrando uma palavra por linha. Move os dois. */ @media (max-width:860px){ .caso .res{grid-column:2;min-width:0;margin-top:12px} .caso .lado{min-width:0} } /* ============================================================ PÁGINAS DE POST DO BLOG ============================================================ */ .post-pagina body{background:var(--abismo)} .post-pagina main{position:static;z-index:auto;background:none} /* o espaço antes do card é padding no wrapper (.abertura-fundo.post-abertura), não margin no .post-hero: margin no primeiro filho colapsaria com o próprio .abertura-fundo (ele não tem padding/border própria), empurrando todo o vazamento de fundo claro para baixo e deixando o header sobre o body escuro. */ .abertura-fundo.post-abertura{padding-top:clamp(100px,14vh,160px)} .post-hero{ position:relative; width:min(1280px,calc(100vw - 40px)); margin:0 auto; padding:0; background:linear-gradient(148deg,rgba(9,60,104,.95),rgba(2,20,44,.98)); border:1px solid rgba(159,208,228,.18);border-radius:28px; display:flex;flex-direction:column;gap:0; overflow:visible} .post-hero .ph-body{ display:grid;grid-template-columns:1.1fr 0.9fr; gap:clamp(24px,3vw,48px);align-items:end; padding:clamp(28px,4vw,56px) clamp(24px,3vw,40px) clamp(28px,4vw,56px)} .post-hero .ph-text{padding-bottom:clamp(8px,1.5vw,20px)} .post-hero .ph-tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.06em; padding:6px 16px;border-radius:999px; background:rgba(3,49,102,.4);border:1px solid rgba(159,208,228,.24); color:rgba(226,240,248,.82);margin-bottom:clamp(16px,2.5vw,28px)} .post-hero .ph-title{font-family:var(--ui);font-weight:300; font-size:clamp(28px,4.2vw,56px);line-height:1.08;letter-spacing:-.024em; color:#fff;max-width:18ch;text-shadow:none;transform:none} /* A imagem se alinha no topo da célula (align-self:start), criando a assimetria visual: imagem alta, texto baixo */ .post-hero .ph-img{display:block;width:100%;aspect-ratio:1/1;border-radius:20px; background-size:cover;background-position:center; filter:saturate(.88) brightness(.88); margin:0 clamp(8px,1.5vw,20px) 0 0; align-self:start} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px; margin-top:clamp(20px,3vh,28px);font-size:13px;color:rgba(214,232,244,.52)} .post-meta .tagcat{display:inline-block;padding:5px 14px;border-radius:999px; font-size:11px;font-weight:500;letter-spacing:.06em; background:rgba(3,49,102,.35);border:1px solid rgba(159,208,228,.22); color:rgba(226,240,248,.82)} .post-meta .autor{font-weight:500;color:rgba(226,240,248,.72)} .post-meta .sep{color:rgba(159,208,228,.3)} @media (max-width:900px){ .abertura-fundo.post-abertura{padding-top:clamp(12px,2vh,20px)} .post-hero{border-radius:22px} .post-hero .ph-body{grid-template-columns:1fr;gap:clamp(20px,4vw,32px); padding-inline:clamp(16px,4vw,32px)} .post-hero .ph-img{aspect-ratio:16/10;order:-1;margin:0} .post-hero .ph-title{max-width:none} } /* Mobile: o nav (navlinks com dropdowns) fica oculto; o hamb aparece via menu.css. Aqui apenas garantimos que o hamb seja visível dentro do .post-hero */ @media (max-width:620px){ .post-hero header.ph-nav{grid-template-columns:1fr auto auto;gap:12px; padding-inline:clamp(16px,4vw,28px)} .post-hero .ph-nav nav{display:none} .post-hero .ph-nav .cta{display:none} .post-hero .ph-body{padding-inline:clamp(16px,4vw,28px)} } .post-conteudo{position:relative; background:var(--claro-bg); box-shadow:0 0 0 100vmax var(--claro-bg); clip-path:inset(0 -100vmax); max-width:700px;margin:0 auto; padding:clamp(32px,5vh,52px) clamp(20px,5vw,56px) clamp(80px,12vh,140px)} .post-conteudo section{scroll-margin-top:104px} .post-conteudo section + section{margin-top:clamp(36px,5vh,52px)} .post-conteudo h2{font-size:clamp(19px,2vw,26px);font-weight:400;line-height:1.24; letter-spacing:-.016em;color:var(--claro-texto);margin-bottom:clamp(14px,2vh,20px); padding-top:clamp(20px,3vh,28px);border-top:1px solid rgba(10,32,56,.14)} .post-conteudo section:first-child h2{padding-top:0;border-top:0} .post-conteudo section > * + *{margin-top:15px} .post-conteudo h3{font-size:15.5px;font-weight:500;color:var(--claro-texto);margin-bottom:10px} .post-conteudo section > * + h3{margin-top:28px} .post-conteudo p{font-size:15px;line-height:1.82;color:rgba(10,32,56,.66)} .post-conteudo ul,.post-conteudo ol{padding-left:0;list-style:none;display:grid;gap:11px} .post-conteudo h2 + *,.post-conteudo h3 + *{margin-top:0} .post-conteudo li{position:relative;padding-left:20px;font-size:15px;line-height:1.75; color:rgba(10,32,56,.66)} .post-conteudo li::before{content:"";position:absolute;left:2px;top:11px; width:5px;height:5px;border-radius:50%;background:rgba(10,32,56,.4)} .post-conteudo strong{font-weight:500;color:var(--claro-texto)} .post-conteudo a{color:var(--claro-acento);text-decoration:none;border-bottom:1px solid rgba(10,92,150,.32); transition:color .3s,border-color .3s} .post-conteudo a:hover,.post-conteudo a:focus-visible{color:var(--claro-texto);border-color:var(--claro-texto)} .post-conteudo .cta-fim{margin-top:clamp(40px,6vh,64px);text-align:center} .post-conteudo .cta-fim p{font-size:clamp(16px,1.6vw,21px);font-weight:300; line-height:1.5;color:rgba(10,32,56,.7);max-width:44ch;margin:0 auto clamp(22px,3.2vh,30px)} .post-conteudo .acao{color:#fff;text-shadow:none; background:linear-gradient(158deg,var(--claro-acento),#062C4C); border-color:rgba(10,32,56,.16); box-shadow:0 16px 34px -14px rgba(10,32,56,.32),inset 0 1px 0 rgba(255,255,255,.16)} .post-relacionados{position:relative; background:var(--claro-bg); box-shadow:0 0 0 100vmax var(--claro-bg); clip-path:inset(0 -100vmax); max-width:780px;margin:0 auto; padding:0 clamp(20px,5vw,56px) clamp(80px,12vh,140px)} .post-relacionados .shead{margin-bottom:0} .post-relacionados .title{color:var(--claro-texto)} .post-relacionados .eyebrow{color:var(--claro-acento)} /* ============================================================ PÁGINAS DE CASE — topo escuro (capa), corpo claro Reaproveita as variáveis --claro-bg/--claro-texto/--claro-acento e a mesma técnica de "vazamento" de fundo (.sec.clara) já usada no site; aqui só cobrimos os componentes que essas páginas usam e que ainda não tinham uma versão clara: .cases/.caso (sem-n), .prosa, .citacao, .fecha e o botão .acao. ============================================================ */ .sec.clara + .sec.clara{border-top:0} .sec.clara .cases{border-top-color:rgba(10,32,56,.14)} .sec.clara .caso{border-bottom-color:rgba(10,32,56,.14)} .sec.clara .caso:hover{border-bottom-color:rgba(10,32,56,.32)} .sec.clara .caso .n{color:var(--claro-acento)} .sec.clara .caso h3{color:var(--claro-texto)} .sec.clara .caso .res{color:rgba(10,32,56,.68)} .sec.clara .caso .tagline{color:var(--claro-texto)} .sec.clara .prosa p{color:rgba(10,32,56,.66)} .sec.clara .prosa strong{color:var(--claro-texto)} .sec.clara .citacao{background:linear-gradient(158deg,rgba(10,92,150,.1),rgba(10,32,56,.05)); border-color:rgba(10,32,56,.14)} .sec.clara .citacao p{color:var(--claro-texto)} .sec.clara .citacao cite{color:rgba(10,32,56,.52)} .sec.clara .fecha p{color:rgba(10,32,56,.7)} .sec.clara .acao{color:#fff;text-shadow:none; background:linear-gradient(158deg,var(--claro-acento),#062C4C); border-color:rgba(10,32,56,.16); box-shadow:0 16px 34px -14px rgba(10,32,56,.32),inset 0 1px 0 rgba(255,255,255,.16)} /* respiro entre uma citação e os números que vêm logo depois dela (antes ficavam colados) */ .citacao + .destaques{margin-top:clamp(28px,4vh,40px)} /* ============================================================ PÁGINAS DE CASE — hero em cartão arredondado (referência GHFLY) Diferente do header/menu (que continua igual em todo o site), aqui é só o bloco de abertura (foto + título) que vira um grande retângulo escuro de cantos arredondados, no mesmo estilo do .dcaixa que já existe em cases.html — reaproveita a mesma linguagem (borda, degradê, sombra), só que dimensionado para o conteúdo maior do h1/lead/CTA. ============================================================ */ .abertura-fundo{position:relative;background:var(--claro-bg); box-shadow:0 0 0 100vmax var(--claro-bg);clip-path:inset(0 -100vmax)} .capa.abertura{max-width:1120px;margin:0 auto; padding:clamp(120px,17vh,180px) clamp(20px,5vw,56px) clamp(28px,4vh,44px)} .capacard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%); gap:clamp(24px,3.6vw,56px);align-items:center; border:1px solid rgba(159,208,228,.18);border-radius:28px; padding:clamp(28px,4vw,52px); background:linear-gradient(148deg,rgba(9,60,104,.95),rgba(2,20,44,.98))} .capacard .lead{margin-top:clamp(18px,2.6vh,26px)} .capacard .cta-capa{margin-top:clamp(24px,3.4vh,34px)} .capacard h1{max-width:19ch;font-size:clamp(27px,3.6vw,44px)} @media (max-width:900px){ .capacard{grid-template-columns:1fr;gap:clamp(24px,4vh,34px)} } /* ============================================================ PÁGINA DE LISTAGEM DE CASES (cases.html) — grade e filtros em fundo claro (hero + case em destaque continuam escuros, como o resto do site). .post/.pimg/.pglass não precisam de ajuste: já são cartões de foto autocontidos, com overlay escuro próprio. ============================================================ */ .sec.clara .filtros{border-bottom-color:rgba(10,32,56,.14)} .sec.clara .busca input{color:var(--claro-texto); background:rgba(255,255,255,.66);border-color:rgba(10,32,56,.18)} .sec.clara .busca input::placeholder{color:rgba(10,32,56,.4)} .sec.clara .busca input:focus{border-color:var(--claro-acento); background:#fff;box-shadow:0 0 0 3px rgba(10,92,150,.14)} .sec.clara .busca svg{color:var(--claro-texto)} .sec.clara .chip{color:rgba(10,32,56,.6);border-color:rgba(10,32,56,.18)} .sec.clara .chip:hover{color:var(--claro-texto);border-color:rgba(10,32,56,.4)} .sec.clara .chip[aria-pressed="true"]{color:#fff;background:var(--claro-acento);border-color:var(--claro-acento)} .sec.clara .vazio strong{color:var(--claro-texto)} .sec.clara .vazio p{color:rgba(10,32,56,.6)} .sec.clara .vazio button{color:var(--claro-acento);border-bottom-color:rgba(10,92,150,.32)} /* ============================================================ PÁGINAS DE SERVIÇO — cobertura clara para os componentes que faltavam (grupos de plataformas, sanfona de cases relacionados, listas curtas). O hero (.capa.abertura/.capacard) e os componentes já cobertos (.cases/.caso, .prosa, .citacao, .fecha, .acao, .dest, .passos) são os mesmos das páginas de case. ============================================================ */ .sec.clara .lista li{color:rgba(10,32,56,.62)} .sec.clara .lista li::before{background:rgba(10,32,56,.4)} .sec.clara .grupo{border-top-color:rgba(10,32,56,.16)} .sec.clara .grupo h3{color:var(--claro-texto)} .sec.clara .grupo .obs{color:rgba(10,32,56,.55)} .sec.clara .sanfona{border-top-color:rgba(10,32,56,.14)} .sec.clara .linha{border-bottom-color:rgba(10,32,56,.14)} .sec.clara .lmarca{color:var(--claro-texto)} .sec.clara .ltit{color:rgba(10,32,56,.62)} .sec.clara .lcorpo p{color:rgba(10,32,56,.62)} .sec.clara .lcorpo strong{color:var(--claro-texto)} /* ============================================================ TOPO CLARO (páginas com heading simples, sem foto no hero, mas com um bloco em destaque logo abaixo, como cases.html): o texto do título fica em cima do claro, e só o cartão escuro (.dcaixa) por baixo continua escuro — mesma lógica do .hero-fundo da home. ============================================================ */ .topo-claro{position:relative; margin-top:-1px; background:var(--claro-bg); box-shadow:0 0 0 100vmax var(--claro-bg); clip-path:inset(0 -100vmax)} .topo-claro .capa h1{color:var(--claro-texto)} .topo-claro .capa .lead{color:rgba(10,32,56,.62)} .topo-claro .capa .contagem{color:rgba(10,32,56,.45)} .topo-claro .trace{background:var(--claro-acento)} /* ============================================================ BANDA CLARA — "Três formas de contratar" e afins: o grande bloco escuro que quebrava o ritmo da página virou um bloco claro (sem fundo/borda própria, se funde com a seção clara ao redor), com os cartõezinhos (.bloco) num cinza bem claro em vez do vidro escuro. ============================================================ */ .banda.clara{ position:relative; margin-top:-1px; background:var(--claro-bg); box-shadow:0 0 0 100vmax var(--claro-bg); clip-path:inset(0 -100vmax); } .banda-in.clara{ background:none; border-color:transparent; box-shadow:none; } .banda-in.clara .title{color:var(--claro-texto)} .banda-in.clara .lead{color:rgba(10,32,56,.62)} .banda-in.clara .bloco{background:#fff;border-color:rgba(10,32,56,.12)} .banda-in.clara .bloco:hover{border-color:rgba(10,32,56,.28);filter:none;box-shadow:0 14px 30px -18px rgba(10,32,56,.2)} .banda-in.clara .bloco h3{color:var(--claro-texto)} .banda-in.clara .bloco p{color:rgba(10,32,56,.6)} .banda-in.clara .bloco .tagline{color:var(--claro-acento)} .banda-in.clara .bloco .lista li{color:rgba(10,32,56,.58)} .banda-in.clara .bloco .lista li::before{background:rgba(10,32,56,.4)} /* marketing de influência: número de destaque entre os cards de influenciadores e os passos seguintes — afastado e em azul escuro */ .banda-in.clara .tagline.destaque{ margin-top:clamp(32px,4.5vh,48px); color:var(--claro-texto) } /* ============================================================ ATUALIZAÇÕES 3 — acréscimos às páginas de Inbound Marketing e SEO + GEO: imagem em .bloco (case Vapza), badges de ferramentas (SEO+GEO), gráfico ao lado da citação (SEO+GEO) e fluxo de posicionamento entre serviços (Inbound). Segue a mesma lógica de override .sec.clara já usada no resto do arquivo. ============================================================ */ /* imagem dentro de um .bloco (ex.: peças do case Vapza) */ .bloco .bimg{display:block;width:100%;aspect-ratio:16/10;object-fit:cover; border-radius:14px;margin-bottom:16px;border:1px solid rgba(159,208,228,.16)} .sec.clara .bloco .bimg{border-color:rgba(10,32,56,.12)} /* badges de ferramentas (substitui a linha de texto simples) */ .chips-ferramentas{list-style:none;display:flex;flex-wrap:wrap;gap:9px; margin-top:6px;padding:0} .chips-ferramentas li{padding:7px 15px;border-radius:999px; border:1px solid rgba(159,208,228,.28);font-size:12.5px;font-weight:500; color:rgba(226,240,248,.82);background:rgba(159,208,228,.08)} .sec.clara .chips-ferramentas li{border-color:rgba(10,32,56,.16); color:rgba(10,32,56,.68);background:rgba(10,32,56,.045)} /* citação + gráfico lado a lado (case Faculdade São Luís) */ .citacao-grafico{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%); gap:clamp(18px,2.6vw,28px);align-items:stretch;margin-top:clamp(34px,5vh,52px)} .citacao-grafico .citacao{margin-top:0} .citacao-grafico .grafico{border-radius:20px;overflow:hidden; border:1px solid rgba(159,208,228,.16);min-height:140px} .sec.clara .citacao-grafico .grafico{border-color:rgba(10,32,56,.12)} .citacao-grafico .grafico img{display:block;width:100%;height:100%;object-fit:cover} @media (max-width:860px){.citacao-grafico{grid-template-columns:1fr}} /* discovery com IA (desenvolvimento) — texto + mockup do app */ .mockup-fig{margin:0;border-radius:20px;overflow:hidden; border:1px solid rgba(159,208,228,.18);background:#fff} .mockup-fig img{display:block;width:100%;height:auto} .sec.clara .mockup-fig{border-color:rgba(10,32,56,.12)} /* fluxo "como este serviço se conecta ao restante da estratégia" */ .fluxo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(26px,3.6vh,38px)} .fluxo-item{display:flex;flex-direction:column;gap:4px;padding:14px 18px; border-radius:16px;border:1px solid rgba(159,208,228,.18); background:rgba(159,208,228,.06);text-decoration:none;min-width:150px} .fluxo-item b{font-size:13.5px;font-weight:500;color:rgba(240,248,252,.92)} .fluxo-item span{font-size:12px;line-height:1.4;color:rgba(214,232,244,.58)} a.fluxo-item:hover{border-color:rgba(159,208,228,.4);background:rgba(159,208,228,.12)} .fluxo-item.atual{border-color:var(--claro-acento,#0a5c96);background:rgba(10,92,150,.14)} .fluxo-seta{color:rgba(159,208,228,.4);font-size:16px} .sec.clara .fluxo-item{border-color:rgba(10,32,56,.14);background:rgba(10,32,56,.03)} .sec.clara .fluxo-item b{color:var(--claro-texto)} .sec.clara .fluxo-item span{color:rgba(10,32,56,.58)} .sec.clara a.fluxo-item:hover{border-color:rgba(10,32,56,.3);background:rgba(10,32,56,.06)} .sec.clara .fluxo-item.atual{border-color:var(--claro-acento);background:rgba(10,92,150,.1)} .sec.clara .fluxo-seta{color:rgba(10,32,56,.3)} @media (max-width:640px){.fluxo{flex-direction:column;align-items:stretch} .fluxo-seta{transform:rotate(90deg);align-self:center}}