/* ============================================================
   PÁGINAS INTERNAS — cases, blog e privacidade
   Complementa css/styles.css. Nada aqui altera a home:
   todos os seletores dependem de classes novas (.capa, .destaque,
   .filtros, .legal) ou do escopo .interna no <body>.
   ============================================================ */

/* ---------- fundo: a home tem o hero em canvas, aqui a luz
     de superfície vem de um gradiente estático mais curto ---------- */
.interna main{
  background:
    radial-gradient(72% 34% at 50% -4%, rgba(120,164,188,.16) 0%, rgba(5,62,112,.20) 40%, transparent 72%),
    linear-gradient(var(--abismo),#000E22 42%,var(--abismo));
}

/* ---------- capa da página ---------- */
/* padding-top reserva a altura do .top fixo (46px de marca + respiro) */
.capa{max-width:1120px;margin:0 auto;
      padding:clamp(120px,17vh,180px) clamp(20px,5vw,56px) clamp(8px,2vh,20px)}
.capa .trace{margin-bottom:22px}
.capa h1{font-family:var(--ui);font-weight:300;
         font-size:clamp(34px,5.6vw,68px);line-height:1.06;letter-spacing:-.022em;
         max-width:17ch;color:#fff;text-shadow:none;transform:none}
.capa h1 em{font-family:var(--serif);font-style:italic;font-weight:400;
            letter-spacing:-.026em;font-size:1.06em}
.capa .lead{margin:clamp(20px,3vh,28px) 0 0;text-align:left;max-width:52ch}
.capa .contagem{margin-top:clamp(22px,3vh,32px);font-size:12.5px;font-weight:500;
                letter-spacing:.02em;color:rgba(214,232,244,.45)}

/* ---------- caso em destaque ---------- */
.destaque{max-width:1120px;margin:0 auto;padding:clamp(40px,6vh,64px) clamp(20px,5vw,56px) 0}
.dcaixa{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
        gap:clamp(24px,3.6vw,56px);align-items:center;
        border:1px solid rgba(159,208,228,.18);border-radius:24px;
        padding:clamp(18px,2vw,26px);
        background:linear-gradient(148deg,rgba(9,60,104,.95),rgba(2,20,44,.98))}
.dfoto{position:relative;display:block;border-radius:16px;overflow:hidden;
       aspect-ratio:440/580;background-size:cover;background-position:center top;
       filter:saturate(.92) brightness(.94)}
.dfoto::after{content:"";position:absolute;inset:0;
              background:linear-gradient(180deg,rgba(0,6,16,.34) 0%,transparent 34%,rgba(0,6,16,.5) 100%)}
.dmarca{position:absolute;z-index:2;left:16px;right:16px;top:15px;
        font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff;
        text-shadow:0 2px 14px rgba(0,6,16,.7)}
.dtexto .ptag{margin-bottom:16px}
.dtexto h2{font-size:clamp(21px,2.6vw,34px);font-weight:400;line-height:1.2;
           letter-spacing:-.018em;color:#fff;max-width:24ch}
.dtexto .gresumo{margin-top:clamp(16px,2.2vh,22px);max-width:52ch}
.dtexto .destaques{margin-top:clamp(24px,3.4vh,34px)}
.dtexto .mais-link{margin-top:clamp(26px,3.6vh,34px)}
@media (max-width:860px){
  .dcaixa{grid-template-columns:1fr;gap:22px}
  .dfoto{aspect-ratio:16/10;background-position:center}
  .dtexto h2{max-width:none}
}

/* ---------- filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;align-items:center;
         gap:10px clamp(10px,1.4vw,16px);margin-top:clamp(38px,5.5vh,56px);
         padding-bottom:clamp(24px,3.4vh,34px);
         border-bottom:1px solid rgba(159,208,228,.12)}
/* abrindo a seção, o padding do .sec já dá o respiro: sem margem dupla */
.sec > .filtros:first-child{margin-top:0}
/* a grade vem logo abaixo dos filtros, não precisa do afastamento da home */
.filtros + .posts{margin-top:clamp(26px,3.6vh,40px)}
.busca{position:relative;flex:1 1 260px;max-width:340px}
.busca input{width:100%;font:inherit;font-size:14.5px;color:#fff;
             padding:12px 14px 12px 42px;border-radius:12px;
             background:rgba(3,49,102,.24);border:1px solid rgba(159,208,228,.2);
             transition:border-color .3s,background .3s,box-shadow .3s}
.busca input::placeholder{color:rgba(214,232,244,.42)}
.busca input:focus{outline:0;border-color:rgba(159,208,228,.6);
             background:rgba(3,49,102,.4);box-shadow:0 0 0 3px rgba(111,180,210,.16)}
.busca svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
           width:15px;height:15px;opacity:.44;pointer-events:none;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.chip{font:inherit;font-size:12.5px;cursor:pointer;padding:9px 16px;border-radius:999px;
      color:rgba(214,232,244,.62);background:transparent;
      border:1px solid rgba(159,208,228,.16);
      transition:color .3s,border-color .3s,background .3s}
.chip:hover{color:#fff;border-color:rgba(159,208,228,.42)}
.chip[aria-pressed="true"]{color:#00060F;background:#9FD0E4;border-color:#9FD0E4;font-weight:500}
.chip:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
@media (max-width:760px){
  .chips{margin-left:0}
  .busca{max-width:none}
}

/* ---------- grade de cartões ---------- */
/* reaproveita .post/.pimg/.pglass do styles.css; aqui só a coluna e o vazio */
.posts.quatro{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .posts.quatro{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){
  .posts.quatro{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
}
.post[hidden]{display:none}
/* blog: a capa do artigo vem do WordPress como <img> (lazy + srcset) dentro da .pimg */
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* "ver mais artigos": o mesmo link discreto de continuidade, só que como botão */
button.mais-link{font-family:inherit;cursor:pointer;background:none;
                 border-width:0 0 1px;border-style:solid;border-radius:0;padding:0 0 3px}
button.mais-link:hover i,button.mais-link:focus-visible i{transform:translateY(3px)}
/* cinco dos cases ainda não têm foto: a marca no topo é o que identifica
   o cartão enquanto a capa é só gradiente */
.pmarca{position:absolute;z-index:2;top:clamp(13px,1.2vw,17px);
        left:clamp(14px,1.3vw,18px);right:clamp(14px,1.3vw,18px);
        font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:#fff;
        text-shadow:0 2px 14px rgba(0,6,16,.7)}
/* o link "ver mais" do cartão precisa parecer clicável mesmo sem hover */
.vazio{margin:clamp(48px,8vh,80px) auto;max-width:44ch;text-align:center}
.vazio strong{display:block;font-size:clamp(17px,1.6vw,21px);font-weight:400;
              letter-spacing:-.01em;color:#fff;margin-bottom:10px}
.vazio p{font-size:14.5px;line-height:1.7;color:rgba(214,232,244,.58)}
.vazio button{margin-top:20px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
              color:#9FD0E4;background:none;border:0;border-bottom:1px solid rgba(159,208,228,.3);
              padding:0 0 3px}
.vazio button:hover{color:#fff;border-bottom-color:#9FD0E4}

/* ---------- assinatura da newsletter (blog) ---------- */
.news{border:1px solid rgba(159,208,228,.18);border-radius:22px;
      padding:clamp(28px,4vw,52px);text-align:center;
      background:linear-gradient(152deg,rgba(9,60,104,.95),rgba(2,20,44,.98))}
.news h2{font-size:clamp(20px,2.3vw,30px);font-weight:300;line-height:1.24;
         letter-spacing:-.014em;color:#fff;max-width:26ch;margin:0 auto}
.news h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1em}
.news p{margin:16px auto 0;max-width:48ch;font-size:14.5px;line-height:1.7;
        color:rgba(214,232,244,.58)}
.assina{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
        margin:clamp(26px,3.6vh,34px) auto 0;max-width:520px}
.assina input{flex:1 1 240px;font:inherit;font-size:15px;color:#fff;
              padding:14px 16px;border-radius:12px;
              background:rgba(0,10,26,.5);border:1px solid rgba(159,208,228,.22);
              transition:border-color .3s,box-shadow .3s}
.assina input::placeholder{color:rgba(214,232,244,.42)}
.assina input:focus{outline:0;border-color:rgba(159,208,228,.6);
              box-shadow:0 0 0 3px rgba(111,180,210,.16)}
.assina input[aria-invalid="true"]{border-color:#E08C84}
.assina button{font:inherit;font-size:14px;font-weight:500;cursor:pointer;color:#EAF4FA;
              padding:14px 30px;border-radius:12px;
              border:1px solid rgba(159,208,228,.34);background:rgba(3,49,102,.42);
              transition:background .3s,border-color .3s,color .3s}
.assina button:hover,.assina button:focus-visible{background:rgba(111,180,210,.22);
              border-color:rgba(159,208,228,.62);color:#fff}
.newsnota{margin-top:18px;font-size:12px;line-height:1.6;color:rgba(214,232,244,.4)}
.newsnota a{color:#9FD0E4;text-decoration:none;border-bottom:1px solid rgba(159,208,228,.3)}
.newsnota a:hover{color:#fff;border-bottom-color:#9FD0E4}
.newsok{margin-top:22px;font-size:14.5px;color:#9FD0E4}
.newsok[hidden]{display:none}

/* ---------- página legal ---------- */
.legal{display:grid;grid-template-columns:236px minmax(0,1fr);
       gap:clamp(30px,5vw,80px);align-items:start;
       max-width:1120px;margin:0 auto;
       padding:clamp(40px,6vh,64px) clamp(20px,5vw,56px) clamp(56px,8vh,92px)}
.indice{position:sticky;top:104px}
.indice ol{list-style:none;counter-reset:i;display:grid;gap:2px}
.indice li{counter-increment:i}
.indice a{display:flex;gap:11px;padding:8px 0;text-decoration:none;
          font-size:13.5px;line-height:1.45;color:rgba(214,232,244,.5);
          transition:color .3s}
.indice a::before{content:counter(i,decimal-leading-zero);flex:0 0 auto;
          font-size:10.5px;font-weight:500;letter-spacing:.14em;padding-top:3px;
          color:rgba(111,180,210,.5);transition:color .3s}
.indice a:hover,.indice a:focus-visible{color:#fff}
.indice a[aria-current="true"]{color:#fff}
.indice a[aria-current="true"]::before{color:#6FB4D2}
@media (max-width:900px){
  .legal{grid-template-columns:1fr}
  .indice{position:static;padding-bottom:26px;border-bottom:1px solid rgba(159,208,228,.12)}
  .indice ol{grid-template-columns:1fr 1fr;display:grid;gap:0 24px}
}
@media (max-width:520px){ .indice ol{grid-template-columns:1fr} }

.texto{max-width:68ch}
.texto section{scroll-margin-top:104px}
.texto section + section{margin-top:clamp(28px,4vh,44px)}
.texto h2{font-size:clamp(19px,2vw,26px);font-weight:400;line-height:1.24;
          letter-spacing:-.016em;color:#fff;margin-bottom:clamp(16px,2.2vh,22px);
          padding-top:clamp(20px,3vh,28px);border-top:1px solid rgba(159,208,228,.12)}
.texto section:first-child h2{padding-top:0;border-top:0}
/* ritmo vertical por irmãos: um <p> depois de uma <ul> recebe o mesmo
   respiro que depois de outro <p>, 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{
       position:relative;z-index:1;
       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 top;
       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(56px,8vh,92px)}
.post-conteudo section{scroll-margin-top:104px}
.post-conteudo section + section{margin-top:clamp(26px,3.6vh,38px)}
.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)}

/* ---------- artigo do WordPress (single.php) ----------
   mesmo layout das páginas de post acima; o corpo vem do editor (blocos), não
   das <section> fixas, então aqui ele ganha o mesmo ritmo e as mesmas cores
   delas. O CSS de blocos do WordPress é removido pelo tema, por isso galerias,
   vídeos, tabelas etc. são estilizados aqui. */
.post-corpo{color:rgba(10,32,56,.66);font-size:15px;line-height:1.82;overflow-wrap:break-word}
.post-corpo > * + *{margin-top:15px}
.post-corpo > * + h2{margin-top:clamp(26px,3.6vh,38px)}
.post-corpo > h2:first-child{padding-top:0;border-top:0}
.post-corpo > * + h3,.post-corpo > * + h4,.post-corpo > * + h5{margin-top:28px}
.post-corpo h4,.post-corpo h5,.post-corpo h6{font-size:15px;font-weight:500;color:var(--claro-texto);margin-bottom:10px}
.post-corpo b{font-weight:500;color:var(--claro-texto)}
.post-corpo .has-text-align-center{text-align:center}
/* listas numeradas: o modelo só tem marcadores; aqui o número volta */
.post-corpo ol{counter-reset:pc}
.post-corpo ol > li{counter-increment:pc;padding-left:26px}
.post-corpo ol > li::before{content:counter(pc) ".";top:0;left:0;width:auto;height:auto;
       border-radius:0;background:none;font-weight:500;color:var(--claro-texto)}
.post-corpo li > ul,.post-corpo li > ol,.post-corpo li > * + p{margin-top:8px}
/* imagens e legendas */
.post-corpo img{display:block;max-width:100%;height:auto;border-radius:14px}
.post-corpo .aligncenter,.post-corpo .aligncenter > img{margin-inline:auto}
.post-corpo .wp-caption{max-width:100%}
.post-corpo a:has(img){border-bottom:0}
.post-corpo figcaption,.post-corpo .wp-caption-text{margin-top:10px;font-size:13px;line-height:1.6;
       color:rgba(10,32,56,.5);text-align:center}
/* galerias (formato novo e antigo do editor) */
.post-corpo .wp-block-gallery.has-nested-images,.post-corpo .blocks-gallery-grid{display:grid;gap:10px;
       grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.post-corpo .wp-block-gallery > figure,.post-corpo .blocks-gallery-item{margin:0;padding:0}
.post-corpo .blocks-gallery-item::before{content:none}
.post-corpo .wp-block-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.post-corpo .wp-block-gallery > figcaption{grid-column:1/-1}
/* vídeos incorporados (YouTube 16:9 e vertical) */
.post-corpo .wp-block-embed__wrapper{position:relative}
.post-corpo iframe:not(.wp-embedded-content){display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:14px}
.post-corpo .wp-embed-aspect-9-16 iframe{aspect-ratio:9/16;max-width:340px;margin-inline:auto}
/* mídia ao lado do texto */
.post-corpo .wp-block-media-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:clamp(16px,3vw,28px);align-items:center}
.post-corpo .wp-block-media-text__media img{width:100%}
.post-corpo .wp-block-media-text__content > * + *{margin-top:12px}
@media (max-width:600px){ .post-corpo .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:1fr} }
/* citações, destaques do layout antigo, separador e tabelas */
.post-corpo blockquote{padding:2px 0 2px 20px;border-left:2px solid var(--claro-acento);color:var(--claro-texto)}
.post-corpo blockquote > * + *{margin-top:10px}
.post-corpo blockquote p{color:inherit}
.post-corpo .main-depoimentos-wrap-item-text{padding:clamp(18px,3vw,26px);border-radius:16px;
       background:rgba(10,92,150,.06);font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:var(--claro-texto)}
.post-corpo hr{border:0;border-top:1px solid rgba(10,32,56,.14);margin-block:clamp(26px,3.6vh,38px)}
.post-corpo .wp-block-table{overflow-x:auto}
.post-corpo table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.post-corpo th,.post-corpo td{padding:10px 12px;border:1px solid rgba(10,32,56,.14);text-align:left;vertical-align:top}
.post-corpo th{font-weight:500;color:var(--claro-texto);background:rgba(10,92,150,.06)}

/* ============================================================
   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)}

/* chips (.setores) em seção clara — o estilo base é pensado para fundo
   escuro (texto e borda azul-claros), e sumia no fundo claro */
.sec.clara .setores span{border-color:rgba(10,32,56,.16);color:rgba(10,32,56,.72);
       background:rgba(255,255,255,.55)}

/* destaques com palavras em vez de números (ex.: Quem somos) — o .dest
   padrão é dimensionado para números curtos em linha única e estourava
   a largura com palavras longas; aqui vira grade de 4 colunas */
.destaques.palavras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
       gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4.4vh,48px)}
.destaques.palavras .dest b{font-size:clamp(22px,2.3vw,30px);white-space:normal;line-height:1.15}
.destaques.palavras .dest p{max-width:none}
@media (max-width:900px){.destaques.palavras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.destaques.palavras{grid-template-columns:1fr}}

/* Quem somos: títulos das seções são centralizados, então o bloco de
   texto (.prosa) também fica centralizado na página (texto segue
   alinhado à esquerda, só o bloco é centralizado) */
.pg-sobre .prosa{margin-inline:auto}

/* citação com texto centralizado (a <p> tem max-width:44ch, então
   precisa de margin auto além do text-align) */
.citacao.centro{text-align:center}
.citacao.centro p{margin-inline:auto}

/* ============================================================
   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)}
/* hero sem foto/case associado (ex.: página Quem somos) — cartão em
   coluna única, sem a coluna estreita de 44% que ficaria vazia */
.capacard.sem-case{grid-template-columns:1fr}
.capacard.sem-case h1{max-width:34ch}
.capacard.sem-case .lead{max-width:62ch}

/* ===== vídeo de fundo nos heros de posts e serviços =====
   mesmo empilhamento do hero da home: vídeo + véu escuro (.sea) +
   grão (.grain), todos recortados pelo raio do cartão. O vídeo não
   tem fundo próprio: se ele falhar, o degradê do cartão aparece. */
/* position:relative é obrigatório: sem ele (e com .rv revelando via
   transform) o vídeo/véu/grão acabam se posicionando contra o
   .abertura-fundo e estourando pra fora do cartão */
.post-hero,.capacard{isolation:isolate;position:relative}
.hpv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
     object-position:center;border-radius:inherit;
     z-index:0;pointer-events:none}
.post-hero .sea,.post-hero .grain,
.capacard .sea,.capacard .grain{border-radius:inherit}
/* conteúdo acima do vídeo (elemento estático pintaria por baixo) */
.capacard > *{position:relative;z-index:1}
.capacard .hpv{position:absolute;z-index:0}
/* .sea e .grain são decorativos (véu + grão) e precisam voltar a
   position:absolute — sem isso o ".capacard > *" acima os transforma em
   itens reais do grid, quebrando o card em 2 linhas (texto embaixo do
   case) e deixando o hero de serviço bem mais alto do que devia. */
.capacard .sea,.capacard .grain{position:absolute;z-index:0}
/* com sea/grain fora do grid, sobram só 2 itens reais (texto e o case) —
   no HTML o texto vem primeiro, então sem isto o auto-placement do grid
   jogaria o texto pra a coluna larga (esquerda) e o case pra estreita
   (direita), invertendo o layout. .order:-1 devolve o case pra
   coluna 1 (larga, à esquerda), texto na coluna 2 (estreita, à direita) */
.capacard .capacase{order:-1}
/* o grão fica só sobre o vídeo: abaixo do conteúdo (texto e foto),
   então a imagem do post/case não ganha ruído */
.post-hero .grain,.capacard .grain{z-index:0}

/* ===== hero de serviço (wide) =====
   mesmas dimensões do hero de post — cartão de 1280px, mesmo padding e
   mesma grade 1.1fr/0.9fr — só que com a foto na horizontal (4/3.1),
   mantendo o conjunto mais largo que alto */
.capa.abertura.wide{max-width:none;padding-inline:0;
       padding-top:clamp(100px,14vh,160px)}   /* mesmo respiro de cima do hero de post */
.capa.abertura.wide .capacard{
       width:min(1280px,calc(100vw - 40px));
       margin-inline:auto;
       gap:clamp(24px,3vw,48px);
       padding:clamp(28px,4vw,56px) clamp(24px,3vw,40px) clamp(28px,4vw,56px);
       border:0}
@media (min-width:901px){
  .capa.abertura.wide .capacard{grid-template-columns:1.1fr 0.9fr}
}
@media (max-width:900px){
  .capa.abertura.wide .capacard{gap:clamp(20px,4vw,32px);padding-inline:clamp(16px,4vw,32px)}
}
@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}}

/* ============================================================
   PÁGINA DE CASE (caso-*.html)
   Estrutura no estilo da referência (gas rocket): imagem grande
   no topo, título com a ficha do projeto, e depois blocos de
   texto (título à esquerda, texto à direita) intercalados com
   as peças. No fim: resultado, outros cases e o convite.

   QUADRADOS CINZA (.cs-img) = espaços das imagens.
   Para colocar a imagem, ponha uma <img> dentro do quadrado:
     <div class="cs-img" data-tam="1920 × 1080">
       <img src="img/nayax-estande.webp" alt="Estande da Nayax">
     </div>
   (vídeo também funciona: <video src="..." autoplay muted loop playsinline>)
   O rótulo com o tamanho sugerido some sozinho quando a imagem entra.
   ============================================================ */

/* topo: imagem principal, mais larga que o conteúdo */
.cs-topo{position:relative;background:var(--claro-bg);
    box-shadow:0 0 0 100vmax var(--claro-bg);clip-path:inset(0 -100vmax);
    padding-top:clamp(96px,13vh,136px)}
.cs-hero{width:min(1280px,calc(100vw - 40px));margin:0 auto;
    aspect-ratio:2/1;max-height:76vh;border-radius:28px}

/* quadrado cinza claro (espaço da imagem) */
.cs-img{position:relative;display:block;width:100%;aspect-ratio:16/9;
    border-radius:20px;overflow:hidden;background:#D6DCE3 center/cover no-repeat}
.cs-img::after{content:attr(data-tam);position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
    font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(10,32,56,.36)}
.cs-img img,.cs-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-img:has(img,video)::after,.cs-img[style*="url"]::after{display:none}
.cs-hero.cs-img{width:min(1280px,calc(100vw - 40px))}

/* abertura: título + ficha do projeto + resumo */
.sec.clara.cs-intro{padding-top:clamp(48px,7vh,84px)}
.cs-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
    gap:clamp(28px,5vw,80px);align-items:end}
.cs-cats{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
    color:var(--claro-acento);margin-bottom:clamp(14px,2vh,20px)}
.cs-titulo{font-family:var(--ui);font-weight:300;font-size:clamp(34px,5vw,64px);
    line-height:1.06;letter-spacing:-.024em;color:var(--claro-texto);max-width:15ch;
    text-shadow:none;transform:none}
.cs-ficha{display:grid;gap:0;border-top:1px solid rgba(10,32,56,.14)}
.cs-ficha div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;
    padding:12px 0;border-bottom:1px solid rgba(10,32,56,.14)}
.cs-ficha dt{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(10,32,56,.5);padding-top:2px}
.cs-ficha dd{font-size:14px;line-height:1.5;color:var(--claro-texto)}
.cs-resumo{margin-top:clamp(32px,5vh,56px);max-width:62ch}
.cs-resumo p{font-size:clamp(17px,1.6vw,21px);font-weight:300;line-height:1.6;
    color:rgba(10,32,56,.74)}

/* bloco: texto (título | parágrafo) e, embaixo, as peças */
.cs-bloco{margin-top:clamp(64px,10vh,120px)}
.cs-texto{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
    gap:clamp(20px,4vw,64px);margin-bottom:clamp(28px,4vh,44px)}
.cs-texto h2{font-size:clamp(22px,2.3vw,30px);font-weight:400;line-height:1.2;
    letter-spacing:-.016em;color:var(--claro-texto)}
.cs-n{display:block;margin-bottom:10px;font-size:11px;font-weight:500;letter-spacing:.2em;
    color:var(--claro-acento)}
.cs-texto p{font-size:16px;line-height:1.8;color:rgba(10,32,56,.7);max-width:64ch}
.cs-texto p + p{margin-top:14px}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-texto p + .cs-chips{margin-top:18px}
/* texto diagramado dentro da grade das peças (coluna da direita, alinhado
   ao topo): uma coluna só, sem a margem inferior do .cs-texto normal */
.cs-texto.cs-texto-lado{grid-template-columns:1fr;gap:clamp(14px,2vw,26px);
    margin-bottom:0;align-self:center}
/* peça + texto lado a lado: a peça fica menor (cerca de 2/5 da largura) e o texto ganha espaço */
.cs-pecas.dois.com-texto{grid-template-columns:minmax(0,2fr) minmax(0,3fr);
    gap:clamp(24px,5vw,72px);align-items:center}
.cs-pecas + .cs-pecas.dois.com-texto{margin-top:clamp(28px,3.6vw,52px)}   /* mais respiro da peça de cima */
@media (max-width:560px){
  .cs-pecas.dois.com-texto{grid-template-columns:1fr}
  .cs-pecas.dois.com-texto .cs-img{max-width:340px}
}
.cs-chips span{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:500;
    color:var(--claro-texto);background:rgba(10,32,56,.05);border:1px solid rgba(10,32,56,.14)}

/* grade das peças: 1 grande, 2 lado a lado, 3 lado a lado, telas de app */
.cs-pecas{display:grid;gap:clamp(12px,1.6vw,20px)}
.cs-pecas + .cs-pecas{margin-top:clamp(12px,1.6vw,20px)}
.cs-pecas.dois{grid-template-columns:1fr 1fr}
.cs-pecas.dois .cs-img{aspect-ratio:4/5}
.cs-pecas.tres{grid-template-columns:repeat(3,1fr)}
.cs-pecas.tres .cs-img{aspect-ratio:1/1}
.cs-pecas.telas .cs-img{aspect-ratio:9/16}

/* outros cases */
.cs-outros .shead{margin-bottom:clamp(28px,4vh,44px)}
.cs-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.cs-card{display:block;text-decoration:none}
.cs-card .cs-img{aspect-ratio:16/10;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cs-card:hover .cs-img{transform:scale(.985)}
.cs-card-tag{display:block;margin-top:16px;font-size:11px;font-weight:500;letter-spacing:.18em;
    text-transform:uppercase;color:var(--claro-acento)}
.cs-card-tit{display:block;margin-top:8px;font-size:clamp(17px,1.7vw,21px);font-weight:400;
    line-height:1.35;color:var(--claro-texto);transition:color .3s}
.cs-card:hover .cs-card-tit{color:var(--claro-acento)}

@media (max-width:860px){
  .cs-hero{aspect-ratio:4/3;border-radius:22px}
  .cs-cab,.cs-texto{grid-template-columns:1fr}
  .cs-cab{align-items:start}
  .cs-pecas.tres:not(.telas){grid-template-columns:1fr 1fr}
  .cs-pecas.tres:not(.telas) .cs-img:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:560px){
  .cs-pecas.dois,.cs-cards{grid-template-columns:1fr}
}

/* bloco só com título (case sem texto descritivo ainda) */
.cs-texto.so-titulo{grid-template-columns:1fr}
/* duas telas verticais lado a lado, sem ficarem gigantes */
.cs-pecas.dois.telas{max-width:760px;margin-inline:auto}
.cs-pecas.dois.telas .cs-img{aspect-ratio:9/16}
.cs-texto strong{font-weight:500;color:var(--claro-texto)}

/* três peças em retrato (4:5), como posts de feed */
.cs-pecas.tres.retrato .cs-img{aspect-ratio:4/5}
/* print de site dentro de uma janela de navegador */
/* navegador na largura total, alinhado com as peças de baixo */
.cs-pecas.navegador{max-width:none}
.cs-navegador{border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(10,32,56,.1);
    box-shadow:0 24px 60px -30px rgba(10,32,56,.4)}
.cs-navegador-barra{display:flex;gap:6px;align-items:center;padding:11px 14px;
    background:#F1F4F8;border-bottom:1px solid rgba(10,32,56,.08)}
.cs-navegador-barra i{width:9px;height:9px;border-radius:50%;background:#CDD5DF}
.cs-navegador img{display:block;width:100%;height:auto}

/* topo animado da campanha "Nayax e ponto": os vídeos dos mercados no lugar das fotos.
   Os cartões ficam numa curva (os das pontas maiores e girados) e deslizam para um lado
   e voltam, num vai e volta contínuo (js/kv-curva.js). Vídeos curtos, sem áudio,
   em img/cases/nayax/videos.
   Tipografia igual ao KV original (KV-3.psd): Hurme Geometric Sans No Three Bold no título,
   Hurme Geometric Sans 3 Regular no resto, espaçamento 20 (0.02em). Os tamanhos usam cqw
   (porcentagem da largura do topo) para manter a mesma proporção da arte em qualquer tela. */
@font-face{font-family:'Hurme KV';src:url('fontes/hurme-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Hurme KV';src:url('fontes/hurme-regular.woff2') format('woff2');font-weight:400;font-display:swap}
.cs-kv{position:relative;width:min(1280px,calc(100vw - 40px),calc((100vh - 40px) * 16 / 9));
    margin:0 auto;aspect-ratio:16/9;min-height:640px;border-radius:28px;overflow:hidden;background:#F4F4F4;
    font-family:'Hurme KV',var(--ui);color:#262626;container-type:inline-size;
    display:flex;flex-direction:column;padding-top:8.2cqw}
.cs-kv-texto{position:relative;flex:0 0 auto;text-align:center;z-index:2;margin-bottom:4.1cqw;
    animation:cs-kv-sobe .9s cubic-bezier(.22,1,.36,1) both}
.cs-kv-titulo{font-size:4.67cqw;font-weight:700;letter-spacing:.02em;line-height:1}
.cs-kv-titulo span{color:#FACA08}
.cs-kv-sub{margin-top:1.21cqw;font-size:2.71cqw;font-weight:400;letter-spacing:.02em;line-height:1}
.cs-kv-faixa{position:relative;flex:1 1 auto;min-height:0;margin-bottom:11.25cqw;perspective:1100px}
.cs-kv-card{position:absolute;top:50%;left:50%;width:180px;aspect-ratio:237/368;margin:0;
    border-radius:14px;overflow:hidden;background:#ddd;box-shadow:0 18px 40px -22px rgba(0,0,0,.35);
    will-change:transform;animation:cs-kv-entra .9s ease calc(.15s + var(--a) * .1s) both}
.cs-kv-card video,.cs-kv-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-kv-rodape{position:absolute;left:4.5%;bottom:5.7%;font-size:1.17cqw;font-weight:400;letter-spacing:.02em;line-height:1;z-index:2}
.cs-kv-rodape b{font-weight:700}
.cs-kv-logo{position:absolute;right:3.5%;bottom:4%;width:clamp(56px,6.5vw,104px);height:auto;z-index:2}
@keyframes cs-kv-sobe{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes cs-kv-entra{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
  .cs-kv{width:min(1280px,calc(100vw - 40px));aspect-ratio:4/5;max-height:none;min-height:420px;border-radius:22px;padding-top:10cqw}
  .cs-kv-texto{margin-bottom:8cqw;padding:0 16px}
  .cs-kv-titulo{font-size:9cqw}
  .cs-kv-sub{margin-top:2.4cqw;font-size:5.2cqw}
  .cs-kv-faixa{margin-bottom:30cqw}
  .cs-kv-card{width:27%}
  .cs-kv-rodape{left:6%;bottom:5%;max-width:60%;font-size:3cqw;line-height:1.3}
}
@media (prefers-reduced-motion:reduce){
  .cs-kv-texto,.cs-kv-card{animation:none}
}

/* site rolando dentro da janela de navegador (case Nayax): a imagem é o print da página
   inteira; js/rolagem-site.js rola do topo ao rodapé quando o bloco aparece na tela */
.cs-rolagem{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff}
.cs-rolagem img{position:absolute;top:0;left:0;width:100%;height:auto;will-change:transform}

/* ===== Case EPR: topo animado em loop (fotos que se trocam, logo gigante e título) ===== */
.cs-epr{position:relative;width:min(1280px,calc(100vw - 40px),calc((100vh - 40px) * 16 / 9));
    margin:0 auto;aspect-ratio:16/9;min-height:640px;border-radius:28px;overflow:hidden;isolation:isolate;
    background:#0A2A3F;font-family:'Hurme KV',var(--ui);color:#fff;container-type:inline-size}
.cs-epr-fotos,.cs-epr-foto,.cs-epr-veu{position:absolute;inset:0;margin:0}
.cs-epr-foto{opacity:0;animation:epr-foto 24s linear infinite both;will-change:opacity,transform}
.cs-epr-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cs-epr-foto.f1{animation-delay:-1.2s;--x:2.5%;--y:1.5%}
.cs-epr-foto.f2{animation-delay:4.8s;--x:-2.5%;--y:-1%}
.cs-epr-foto.f3{animation-delay:10.8s;--x:2%;--y:-2%}
.cs-epr-foto.f4{animation-delay:16.8s;--x:-2%;--y:1.5%}
.cs-epr-foto.f1 img{object-position:50% 38%}.cs-epr-foto.f2 img{object-position:50% 55%}
.cs-epr-foto.f3 img{object-position:50% 62%}.cs-epr-foto.f4 img{object-position:50% 50%}
@keyframes epr-foto{
  0%{opacity:0;transform:scale(1.14) translate(var(--x),var(--y))}
  5%{opacity:1}
  27%{opacity:1}
  32%{opacity:0;transform:scale(1.02) translate(0,0)}
  100%{opacity:0;transform:scale(1.02) translate(0,0)}
}
.cs-epr-veu{z-index:1;background:linear-gradient(180deg,rgba(3,22,36,.5) 0%,rgba(3,22,36,.18) 38%,rgba(3,22,36,.5) 100%),
    radial-gradient(120% 80% at 50% 50%,rgba(3,22,36,0) 40%,rgba(3,22,36,.45) 100%)}
.cs-epr-grande{position:absolute;z-index:2;left:50%;top:50%;width:104%;max-width:none;height:auto;opacity:.2;pointer-events:none;
    translate:-50% -50%;animation:epr-logo-vai 24s ease-in-out infinite alternate,epr-logo-pulso 6s ease-in-out infinite}
@keyframes epr-logo-vai{from{transform:translateX(-2.5%) scale(1)}to{transform:translateX(2.5%) scale(1.06)}}
@keyframes epr-logo-pulso{0%,84%{opacity:.16}97%{opacity:.58}100%{opacity:.16}}
.cs-epr-titulo{position:absolute;z-index:3;left:0;right:0;top:50%;translate:0 -50%;margin:0;text-align:center;
    font-size:6.4cqw;line-height:1.05;letter-spacing:.015em;text-shadow:0 .4cqw 2.4cqw rgba(0,0,0,.35);
    animation:epr-titulo 6s ease-in-out infinite}
.cs-epr-titulo .l1{font-weight:700}
.cs-epr-titulo .l2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.18em;letter-spacing:-.01em;
    background:linear-gradient(100deg,#fff 0%,#fff 38%,#FACA08 50%,#fff 62%,#fff 100%);background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:epr-brilho 6s ease-in-out infinite}
@keyframes epr-brilho{0%,60%{background-position:100% 0}95%,100%{background-position:0 0}}
@keyframes epr-titulo{0%,88%{translate:0 -50%}94%{translate:0 -52%}100%{translate:0 -50%}}
.cs-epr-rodape{z-index:3;color:#fff}
.cs-epr-logo{z-index:3;opacity:.95}
.cs-epr-pontos{position:absolute;z-index:3;left:50%;bottom:5.4%;translate:-50% 0;display:flex;gap:.9cqw}
.cs-epr-pontos i{position:relative;display:block;width:4.2cqw;height:.28cqw;min-height:2px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.cs-epr-pontos i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
    animation:epr-ponto 24s linear infinite both}
.cs-epr-pontos i:nth-child(1)::after{animation-delay:-1.2s}.cs-epr-pontos i:nth-child(2)::after{animation-delay:4.8s}
.cs-epr-pontos i:nth-child(3)::after{animation-delay:10.8s}.cs-epr-pontos i:nth-child(4)::after{animation-delay:16.8s}
@keyframes epr-ponto{0%{transform:scaleX(0)}5%{transform:scaleX(0)}27%{transform:scaleX(1)}32%{transform:scaleX(1)}33%,100%{transform:scaleX(0)}}
@media (max-width:760px){
  .cs-epr{width:min(1280px,calc(100vw - 40px));aspect-ratio:4/5;max-height:none;min-height:420px;border-radius:22px}
  .cs-epr-titulo{font-size:10.5cqw;line-height:1.1;padding:0 6%}
  .cs-epr-titulo .l1,.cs-epr-titulo .l2{display:block}
  .cs-epr-grande{width:190%}
  .cs-epr-pontos{bottom:4.2%}
  .cs-epr-pontos i{width:9cqw}
}
@media (prefers-reduced-motion:reduce){
  .cs-epr-foto{animation:none}.cs-epr-foto.f1{opacity:1}
  .cs-epr-grande,.cs-epr-titulo,.cs-epr-titulo .l2,.cs-epr-pontos i::after{animation:none}
  .cs-epr-titulo .l2{-webkit-text-fill-color:#fff;color:#fff;background:none}
}

/* Case EPR: o logo gigante é desenhado traço a traço, a cada troca de foto */
.cs-epr-grande{opacity:1;animation:epr-logo-vai 24s ease-in-out infinite alternate}
.cs-epr-grande path{fill:none;stroke:#fff;stroke-width:4.8;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
    animation:epr-traco 6s ease-in-out infinite both;animation-delay:var(--d,0s)}
@keyframes epr-traco{
  0%{stroke-dashoffset:1;opacity:0}
  2%{opacity:.85}
  56%{stroke-dashoffset:0;opacity:.85}
  90%{stroke-dashoffset:0;opacity:.85}
  98%{stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:1;opacity:0}
}
@media (prefers-reduced-motion:reduce){.cs-epr-grande path{animation:none;stroke-dashoffset:0;opacity:.6}}

/* logo EPR vetorial: contorno desenhado + preenchimento (v36) */
.cs-epr-grande{opacity:.6;animation:epr-logo-vai 24s ease-in-out infinite alternate}
.cs-epr-grande .ls{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:epr-ls 6s ease-in-out infinite both;animation-delay:var(--d,0s);filter:none}
.cs-epr-grande .lf{stroke:none;opacity:0;animation:epr-lf 6s ease-in-out infinite both}
@keyframes epr-ls{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}45%{stroke-dashoffset:0;opacity:1}62%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes epr-lf{0%,30%{opacity:0}55%{opacity:1}90%{opacity:1}98%,100%{opacity:0}}

.cs-epr-grande .lf{fill:#fff}.cs-epr-grande .lf+.lf{fill:#73cc98}.cs-epr-grande .ls{stroke:#fff}.cs-epr-grande .ls[stroke="#73cc98"]{stroke:#73cc98}

.cs-epr-grande{width:84%}@media(max-width:720px){.cs-epr-grande{width:150%}}

/* v39: só contorno, traço fino */
.cs-epr-grande .lf{display:none}.cs-epr-grande .ls{stroke-width:1.5}
@keyframes epr-ls{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}50%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}

/* v40: tudo branco, tamanho grande */
.cs-epr-grande .ls,.cs-epr-grande .ls[stroke="#73cc98"]{stroke:#fff}.cs-epr-grande{width:104%}@media(max-width:720px){.cs-epr-grande{width:190%}}

/* v41: traço mais fino e logo maior */
.cs-epr-grande .ls{stroke-width:.8}.cs-epr-grande{width:124%}@media(max-width:720px){.cs-epr-grande{width:215%}}

/* v42: logo mais transparente */
.cs-epr-grande{opacity:.35}

/* v43: entrada mais rápida */
.cs-epr-grande .ls{animation-delay:calc(var(--d,0s)*.2)}
@keyframes epr-ls{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}22%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}

/* v44: velocidade do traço como antes (3s), mas começa já visível */
.cs-epr-grande .ls{animation-delay:var(--d,0s);animation-timing-function:ease-out}
@keyframes epr-ls{0%{stroke-dashoffset:1;opacity:1}50%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}

/* ===== Hero animado do case Túa (só código) ===== */
.cs-tua{position:relative;width:min(1280px,calc(100vw - 40px),calc((100vh - 40px) * 16 / 9));margin:0 auto;aspect-ratio:16/9;min-height:640px;border-radius:28px;overflow:hidden;isolation:isolate;background:#22130f;color:#fff;font-family:var(--ui,'Poppins',sans-serif);container-type:inline-size}
.cs-tua-cols{position:absolute;inset:0;display:flex;justify-content:center;gap:1.1cqw;padding:0 .8cqw}
.cs-tua-col{flex:0 0 18.8cqw;overflow:hidden;height:100%}
.cs-tua-trilho{display:flex;flex-direction:column;gap:1.1cqw;padding-bottom:1.1cqw;animation:tua-sobe 64s linear infinite;will-change:transform}
.cs-tua-col:nth-child(even) .cs-tua-trilho{animation-direction:reverse}
.cs-tua-col:nth-child(1) .cs-tua-trilho{animation-delay:-8s}.cs-tua-col:nth-child(2) .cs-tua-trilho{animation-delay:-30s}.cs-tua-col:nth-child(3) .cs-tua-trilho{animation-delay:-18s}.cs-tua-col:nth-child(4) .cs-tua-trilho{animation-delay:-44s}.cs-tua-col:nth-child(5) .cs-tua-trilho{animation-delay:-3s}
.cs-tua-trilho figure{margin:0;flex:none;aspect-ratio:3/4;border-radius:1.5cqw;overflow:hidden;background:#3a211a}
.cs-tua-trilho img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes tua-sobe{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.cs-tua-veu{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 62% at 50% 50%,rgba(34,19,15,.72) 0%,rgba(34,19,15,.42) 55%,rgba(34,19,15,.12) 100%),linear-gradient(180deg,rgba(34,19,15,.28),rgba(34,19,15,0) 30%,rgba(34,19,15,0) 70%,rgba(34,19,15,.4))}
.cs-tua-logo{position:absolute;z-index:2;left:50%;top:46%;width:40cqw;height:auto;translate:-50% -50%;fill:#fff;overflow:visible;filter:drop-shadow(0 .5cqw 2.2cqw rgba(20,8,4,.45));pointer-events:none}
.cs-tua-logo path{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:tua-letra 1.15s cubic-bezier(.2,.7,.2,1) both}
.cs-tua-logo .l1{animation-delay:.15s}.cs-tua-logo .l2{animation-delay:.38s}.cs-tua-logo .l3{animation-delay:.7s}.cs-tua-logo .l4{animation-delay:.6s}.cs-tua-logo .l5{animation-delay:.95s}
@keyframes tua-letra{from{opacity:0;transform:translateY(14%) scale(.94)}to{opacity:1;transform:none}}
.cs-tua-frase{position:absolute;z-index:3;left:0;right:0;top:calc(46% + 12.2cqw);margin:0;text-align:center;font-size:max(1.5cqw,13px);font-weight:300;letter-spacing:.34em;text-transform:uppercase;text-shadow:0 .2cqw 1.4cqw rgba(20,8,4,.5);animation:tua-frase 1.2s ease 1.3s both}
@keyframes tua-frase{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}
.cs-tua-rodape{position:absolute;z-index:3;left:2.4cqw;bottom:1.9cqw;margin:0;font-size:max(.95cqw,11px);letter-spacing:.02em;text-shadow:0 .2cqw 1cqw rgba(20,8,4,.5)}
.cs-tua-rodape b{font-weight:600}
@media (max-width:720px){
 .cs-tua{aspect-ratio:auto;min-height:0;height:min(150vw,720px);width:calc(100vw - 24px);border-radius:20px}
 .cs-tua-cols{gap:2.4cqw;padding:0 1.5cqw}.cs-tua-col{flex:0 0 31.6cqw}
 .cs-tua-col:nth-child(n+4){display:none}
 .cs-tua-trilho{gap:2.4cqw;padding-bottom:2.4cqw}.cs-tua-trilho figure{border-radius:3.4cqw}
 .cs-tua-logo{width:72cqw;top:44%}.cs-tua-frase{top:calc(44% + 21cqw);font-size:max(2.9cqw,11px)}.cs-tua-rodape{left:5cqw;bottom:4cqw;font-size:max(2.8cqw,11px)}
}
@media (prefers-reduced-motion:reduce){.cs-tua-trilho,.cs-tua-logo path,.cs-tua-frase{animation:none}.cs-tua-logo path,.cs-tua-frase{opacity:1}}


/* ===== Case Salware (hero animado em código + peças 3:4) ===== */
.cs-sal{background:#43091a}
.cs-sal .cs-tua-trilho figure{background:#6b1427}
.cs-sal .cs-tua-veu{background:radial-gradient(62% 64% at 50% 47%,rgba(66,6,22,.84) 0%,rgba(66,6,22,.52) 55%,rgba(66,6,22,.14) 100%),linear-gradient(180deg,rgba(40,3,12,.34),rgba(40,3,12,0) 30%,rgba(40,3,12,0) 68%,rgba(40,3,12,.5))}
.cs-sal .cs-tua-logo{width:47cqw;top:45%;filter:drop-shadow(0 .5cqw 2.2cqw rgba(30,0,8,.5))}
.cs-sal .cs-tua-logo path{animation-name:sal-letra;animation-duration:1.05s}
.cs-sal .cs-tua-logo .l1{animation-delay:.2s}.cs-sal .cs-tua-logo .l2{animation-delay:.36s}.cs-sal .cs-tua-logo .l3{animation-delay:.52s}.cs-sal .cs-tua-logo .l4{animation-delay:.68s}.cs-sal .cs-tua-logo .l5{animation-delay:.84s}.cs-sal .cs-tua-logo .l6{animation-delay:1s}.cs-sal .cs-tua-logo .l7{animation-delay:1.16s}
@keyframes sal-letra{from{opacity:0;transform:translateY(18%) rotate(-3deg) scale(.92)}to{opacity:1;transform:none}}
.cs-sal .cs-tua-frase{top:calc(45% + 8.6cqw);animation-delay:1.7s}
.caso-sal .cs-pecas.dois .cs-img,.caso-sal .cs-pecas.tres.retrato .cs-img{aspect-ratio:3/4}
.caso-sal .cs-pecas.dois.telas .cs-img,.caso-sal .cs-pecas.tres.telas .cs-img{aspect-ratio:9/16}
.caso-sal .cs-img video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
 .cs-sal .cs-tua-logo{width:78cqw;top:44%}.cs-sal .cs-tua-frase{top:calc(44% + 14.2cqw);letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){.cs-sal .cs-tua-logo path{animation:none;opacity:1}}


/* ===== Case Salware v2: fitas inclinadas, chocolate escorrendo e logo escrito ===== */
.cs-sal2{position:relative;width:min(1280px,calc(100vw - 40px),calc((100vh - 40px) * 16 / 9));margin:0 auto;aspect-ratio:16/9;min-height:640px;border-radius:28px;overflow:hidden;isolation:isolate;background:#f1e4d3;color:#fff;font-family:var(--ui,'Poppins',sans-serif);container-type:inline-size}
.cs-sal2-rows{position:absolute;inset:-14% -14%;display:flex;flex-direction:column;justify-content:center;gap:1.2cqw;transform:rotate(-8deg)}
.cs-sal2-fita{overflow:hidden;flex:none}
.cs-sal2-trilho{display:flex;gap:1.2cqw;width:max-content;animation:sal2-x 80s linear infinite;will-change:transform}
.cs-sal2-fita:nth-child(even) .cs-sal2-trilho{animation-direction:reverse;animation-duration:96s}
.cs-sal2-fita:nth-child(2) .cs-sal2-trilho{animation-delay:-20s}.cs-sal2-fita:nth-child(3) .cs-sal2-trilho{animation-delay:-45s}.cs-sal2-fita:nth-child(4) .cs-sal2-trilho{animation-delay:-8s}
.cs-sal2-trilho figure{margin:0;flex:none;width:13cqw;aspect-ratio:3/4;border-radius:1.3cqw;overflow:hidden;background:#6b1427;box-shadow:0 .5cqw 1.4cqw rgba(60,10,20,.25)}
.cs-sal2-trilho img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes sal2-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cs-sal2-choco{position:absolute;left:0;right:0;top:0;z-index:2;height:0;pointer-events:none}
.cs-sal2-barra{position:absolute;left:0;right:0;top:0;height:2.6cqw;background:linear-gradient(180deg,#2a0f0a,#4a2016);box-shadow:0 .5cqw 1.2cqw rgba(30,8,4,.35);transform-origin:top;animation:sal2-barra .9s cubic-bezier(.2,.7,.2,1) both}
.cs-sal2-choco i{position:absolute;top:1cqw;left:var(--x);width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);background:linear-gradient(90deg,#3a160e,#5b2a1c 45%,#3a160e);border-radius:0 0 var(--w) var(--w);transform-origin:top;animation:sal2-gota 2.6s cubic-bezier(.3,.6,.25,1) var(--d) both}
.cs-sal2-choco i::after{content:"";position:absolute;left:50%;bottom:calc(var(--w) * -.25);width:calc(var(--w) * 1.5);height:calc(var(--w) * 1.5);margin-left:calc(var(--w) * -.75);border-radius:50%;background:radial-gradient(circle at 35% 30%,#7a3a28 0,#4a2016 38%,#33130c 100%)}
@keyframes sal2-barra{from{transform:scaleY(0)}to{transform:none}}
@keyframes sal2-gota{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}
.cs-sal2-selo{position:absolute;z-index:3;left:50%;top:53%;translate:-50% -50%;width:54cqw;padding:5.2cqw 4cqw 3.8cqw;border-radius:3.2cqw;text-align:center;background:linear-gradient(160deg,#8f1429 0%,#5d0c1d 100%);box-shadow:0 2cqw 5cqw rgba(40,4,14,.45),inset 0 0 0 .18cqw rgba(255,255,255,.18);animation:sal2-selo 1.1s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes sal2-selo{from{opacity:0;transform:scale(.93) translateY(3cqw)}to{opacity:1;transform:none}}
.cs-sal2-logo{display:block;width:78%;height:auto;margin:0 auto;overflow:visible}
.cs-sal2-logo path{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:.9;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:sal2-tr 1.6s cubic-bezier(.4,.1,.3,1) both,sal2-pre .9s ease both}
.cs-sal2-logo .l1{animation-delay:1.2s,2.5s}.cs-sal2-logo .l2{animation-delay:1.45s,2.75s}.cs-sal2-logo .l3{animation-delay:1.7s,3s}.cs-sal2-logo .l4{animation-delay:1.95s,3.25s}.cs-sal2-logo .l5{animation-delay:2.2s,3.5s}.cs-sal2-logo .l6{animation-delay:2.45s,3.75s}.cs-sal2-logo .l7{animation-delay:2.7s,4s}
@keyframes sal2-tr{to{stroke-dashoffset:0}}
@keyframes sal2-pre{to{fill-opacity:1;stroke-width:.2}}
.cs-sal2-frase{margin:2.6cqw 0 0;font-size:max(1.25cqw,12px);font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:#f6e3cf;animation:sal2-fr 1.2s ease 4s both}
@keyframes sal2-fr{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}
.cs-sal2-rodape{position:absolute;z-index:3;left:2cqw;bottom:1.8cqw;margin:0;padding:.55cqw 1.3cqw;border-radius:99px;background:rgba(60,8,22,.78);font-size:max(.95cqw,11px);letter-spacing:.02em}
.cs-sal2-rodape b{font-weight:600}
@media (max-width:720px){
 .cs-sal2{aspect-ratio:auto;min-height:0;height:min(150vw,720px);width:calc(100vw - 24px);border-radius:20px}
 .cs-sal2-rows{inset:-22% -40%;gap:2.4cqw}.cs-sal2-trilho{gap:2.4cqw}.cs-sal2-trilho figure{width:30cqw;border-radius:3cqw}
 .cs-sal2-barra{height:5cqw}.cs-sal2-choco i{top:2cqw}
 .cs-sal2-selo{width:86cqw;padding:9cqw 6cqw 6.5cqw;border-radius:6cqw;top:52%}
 .cs-sal2-frase{font-size:max(2.7cqw,10px);letter-spacing:.2em;margin-top:5cqw}.cs-sal2-rodape{left:4cqw;bottom:3.5cqw;font-size:max(2.8cqw,11px);padding:1.2cqw 3cqw}
}
@media (prefers-reduced-motion:reduce){.cs-sal2-trilho,.cs-sal2-barra,.cs-sal2-choco i,.cs-sal2-selo,.cs-sal2-frase{animation:none}.cs-sal2-logo path{animation:none;fill-opacity:1;stroke-dashoffset:0;stroke-width:.2}}

.cs-sal2-choco{display:none}

.cs-sal2-rodape{background:none!important;padding:0!important;text-shadow:0 .2cqw 1.2cqw rgba(30,4,12,.75)}