:root{
  --roxo-topo:#320B35; --roxo-base:#4E184B; --roxo-tinta:#4A1748;
  --roxo-claro:#F6EFF6; --roxo-claro-2:#EFE3EF;
  --btn-a:#9D3C98; --btn-b:#80227B;
  --ciano:#00ACE4; --teal:#03989E; --laranja:#FF9400;
  --tinta:#191618; --texto-suave:#B690B6; --texto-suave-2:#756675; --branco:#fff;
  --laranja-claro-bg:#C47200;   /* laranja da marca legível sobre fundo claro */
  --ciano-escuro-bg:#1FB6E7;    /* ciano da marca legível sobre o roxo */
  --fonte-titulo:"Lexend",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte-corpo:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --raio:22px; --raio-g:32px; --wrap:1180px;
  --sombra:0 18px 48px rgba(50,11,53,.14);
  --sombra-forte:0 26px 70px rgba(50,11,53,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte-corpo); color:var(--tinta); background:var(--branco);
  line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
::selection{background:var(--ciano); color:#06232B}
:focus-visible{outline:3px solid var(--ciano); outline-offset:3px; border-radius:8px}

.wrap{width:min(100% - 48px, var(--wrap)); margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 32px, var(--wrap))}}

h1,h2,h3,h4{font-family:var(--fonte-titulo); line-height:1.14; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(36px,4.9vw,58px); font-weight:700}
h2{font-size:clamp(28px,3.6vw,42px); font-weight:600}
h3{font-size:clamp(19px,1.8vw,23px); font-weight:600; letter-spacing:-.01em}

/* Gradiente nos títulos. Duas salvaguardas:
   1) só dentro de @supports — sem o recorte em texto, color:transparent sumiria com a frase;
   2) os destaques coloridos dentro do título têm cor própria e continuam pintando por cima,
      então "modalidades" segue laranja e "de contratação" segue teal. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1,h2,.faixa-marca{
    background-image:linear-gradient(102deg,#241030 0%,#63215F 96%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .heroi h1,.heroi h2,.secao-escura h1,.secao-escura h2,.capa-serv h1,.faixa-corp h2{
    background-image:linear-gradient(102deg,#FFFFFF 0%,#D9C7DE 96%);
  }
  /* o destaque volta a pintar a si mesmo */
  h1 .destaque-lar,h1 .destaque-cia,h1 .destaque-cia-esc,
  h2 .destaque-lar,h2 .destaque-cia,h2 .destaque-cia-esc{
    -webkit-text-fill-color:currentColor; background-image:none;
  }
}
p{margin:0}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px; border-radius:999px;
  font-family:var(--fonte-corpo); font-weight:700; font-size:15px; text-decoration:none;
  border:0; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:linear-gradient(98.12deg,var(--btn-a) 43.75%,var(--btn-b) 80.61%); color:#fff; box-shadow:0 10px 26px rgba(128,34,123,.34)}
.btn-primario:hover{box-shadow:0 16px 34px rgba(128,34,123,.44)}
.btn-ciano{background:var(--ciano); color:#06232B; box-shadow:0 10px 26px rgba(0,172,228,.32)}
.btn-ciano:hover{box-shadow:0 16px 34px rgba(0,172,228,.42)}
.btn-linha{background:transparent; color:var(--roxo-base); border:2px solid var(--btn-a)}
.btn-linha:hover{background:var(--btn-a); color:#fff}
.btn-linha-claro{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5)}
.btn-linha-claro:hover{background:#fff; color:var(--roxo-topo); border-color:#fff}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:60;
  /* Tom entre o topo do herói (#1B0B2B) e o roxo da marca: o cabeçalho é fixo e
     passa por cima das duas famílias, então não pode casar só com uma. */
  background:rgba(32,13,48,.93); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topo-in{display:flex; align-items:center; gap:26px; min-height:74px}
.marca{display:flex; align-items:center; flex:0 0 auto; padding:8px 4px; border-radius:10px}
.marca img{width:168px}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{
  color:rgba(255,255,255,.86); text-decoration:none; font-size:14.5px; font-weight:600;
  padding:11px 15px; border-radius:999px; transition:color .2s ease, background .2s ease; white-space:nowrap;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.12)}
.nav .btn{margin-left:8px; min-height:46px; padding:11px 24px; font-size:14.5px}
.nav .login{display:inline-flex; align-items:center; gap:7px; color:var(--ciano)}
.nav .login:hover{color:#fff; background:rgba(0,172,228,.18)}
.abrir-menu{display:none}

/* ---------- herói ---------- */
/* O gradiente é do CSS, não da imagem: assim ele usa os tokens exatos do site e se
   estende sem emenda. A figura chega recortada, com alfa, e é só a figura. */
.heroi{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  /* Família dos cards da própria arte (#21153B–#3C1B60), com um resto do magenta da
     marca no fim. Ir até o índigo puro faria os cards sumirem dentro do fundo. */
  background:linear-gradient(150deg,#1B0B2B 0%,#2E1147 42%,#45185A 100%);
}
.heroi::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(58vw,820px); aspect-ratio:1; right:2%; top:-22%; border-radius:50%;
  background:radial-gradient(circle,rgba(124,64,190,.46) 0%,rgba(124,64,190,0) 66%);
}
.heroi::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(40vw,520px); aspect-ratio:1; left:-12%; bottom:-30%; border-radius:50%;
  background:radial-gradient(circle,rgba(0,172,228,.18) 0%,rgba(0,172,228,0) 68%);
}
.heroi-in{
  position:relative; z-index:1;
  /* distância da borda do .wrap até a borda da tela — a figura usa para sangrar */
  --sangria:max(0px, (100vw - var(--wrap)) / 2);
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);
  gap:clamp(20px,2.4vw,40px); align-items:center;
  padding-block:clamp(68px,7.4vw,112px) 0;
  min-height:min(78vh,660px);
}
.heroi-texto{padding-bottom:clamp(68px,7.4vw,112px)}
/* Rótulo, não botão. O preenchimento branco com sombra prometia clique e não entregava
   nenhum — os quatro selos da peça são <span>. Aqui a cor vive no filete, que é elemento
   gráfico, e o texto fica em tinta: é a regra de contraste que o resto da página segue. */
.selo{
  display:inline-flex; align-items:center; gap:9px;
  padding:3px 0 3px 13px; border-left:3px solid var(--ciano);
  background:none; box-shadow:none; border-radius:0;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  /* O padrão é o fundo CLARO. Já errei na outra direção: um selo em texto branco caiu
     numa seção branca e ficou invisível. Com o claro como padrão, um selo novo em
     qualquer seção nasce legível, e só os fundos escuros pedem override. */
  border-left-color:var(--teal); color:var(--roxo-tinta);
  line-height:1.35; margin-bottom:24px;
}
.selo svg{flex:0 0 auto; width:15px; height:15px}
/* fundos escuros: o filete vira ciano e o texto, branco */
.heroi .selo,.secao-escura .selo,.faixa-corp .selo{
  border-left-color:var(--ciano); color:rgba(255,255,255,.94);
}

/* Onde o bloco é centralizado, o filete só de um lado desequilibra: viram dois. */
.cabeca .selo,.faixa-corp .selo{
  padding:3px 13px; border-left:0; border-inline:3px solid var(--teal);
}
.faixa-corp .selo{border-inline-color:rgba(255,255,255,.5); color:#fff}
.heroi h1{margin-bottom:20px; text-wrap:balance}
.heroi .sub{font-size:clamp(16.5px,1.5vw,19px); color:rgba(255,255,255,.92); max-width:38ch; margin-bottom:26px}
.heroi-acoes{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.link-ancora{color:var(--laranja); font-weight:700; text-decoration:none; border-bottom:2px solid rgba(255,148,0,.45); padding-bottom:2px; transition:border-color .2s ease, color .2s ease}
.link-ancora:hover{color:#fff; border-color:#fff}

/* A figura está cortada na altura do quadril: encostá-la na base da seção faz o corte
   virar decisão de enquadramento, em vez de acidente. */
.heroi-figura{
  position:relative; align-self:end; margin-bottom:-1px;
  /* sem sangria: a figura termina na coluna de conteúdo, alinhada com o resto da página */
  margin-right:0;
}
/* ⚠ sem display aqui: `.heroi-figura img` é (0,1,1) e venceria o `.fig-mob{display:none}`,
   que é (0,1,0) — as duas variantes apareceriam empilhadas no desktop. O reset global de
   img já dá o display:block. */
.heroi-figura img{width:100%; max-width:790px; margin-left:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.34))}
.fig-mob{display:none}


/* Curva orgânica no encontro do herói com a seção seguinte. O corte reto marcava demais
   a emenda; a onda é rasa de propósito — ela existe para suavizar, não para virar forma.
   O `currentColor` pega a cor da seção de baixo, então a onda não precisa saber qual é. */
.onda{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  display:block; width:100%; height:clamp(40px,5.2vw,92px); pointer-events:none;
}
.heroi .onda{color:#fff}            /* abaixo do herói da home vem seção branca */
.capa-serv .onda{color:var(--roxo-claro)}   /* na de serviços vem a faixa lilás */

/* ---------- seções ---------- */
.secao{padding-block:clamp(64px,7vw,104px)}
.secao-clara{background:var(--roxo-claro)}
.secao-escura{background:linear-gradient(180deg,var(--roxo-topo) 0%,var(--roxo-base) 100%); color:#fff}
.cabeca{text-align:center; max-width:720px; margin:0 auto clamp(38px,4vw,58px)}
.cabeca .selo{margin-bottom:20px}
.cabeca h2{margin-bottom:16px; text-wrap:balance}
.cabeca p{color:var(--texto-suave-2); font-size:17px}
.secao-escura .cabeca p{color:rgba(255,255,255,.82)}
.destaque-lar{color:var(--laranja-claro-bg)}
.secao-escura .destaque-lar,.heroi .destaque-lar,.capa-serv .destaque-lar,.faixa-corp .destaque-lar{color:var(--laranja)}
.destaque-cia{color:var(--ciano-escuro-bg)}
.destaque-cia-esc{color:var(--teal)}

/* ---------- manifesto ---------- */
.manifesto-grade{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,4vw,64px); align-items:center}
.manifesto-video{position:relative; border-radius:var(--raio-g); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:16/9; background:var(--roxo-claro-2)}
.manifesto-video img{width:100%; height:100%; object-fit:cover}
.play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(50,11,53,.30); border:0; cursor:pointer; color:#fff; text-decoration:none;
  transition:background .25s ease;
}
.play:hover{background:rgba(50,11,53,.46)}
.play span{
  width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .25s ease;
}
.play:hover span{transform:scale(1.08)}
.manifesto-texto h2{margin-bottom:18px}
.manifesto-texto p{color:var(--texto-suave-2); font-size:17px; margin-bottom:26px; max-width:50ch}

/* ---------- pilares ---------- */
.pilares{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:44px}
.pilar{display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--raio); padding:18px 22px; box-shadow:0 6px 20px rgba(50,11,53,.07)}
.pilar svg{flex:0 0 auto}
.pilar span{font-size:14.5px; font-weight:600; color:var(--roxo-tinta); line-height:1.4}

/* ---------- planos ---------- */
.planos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch}
.plano{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border-radius:var(--raio-g); padding:30px 28px 28px; box-shadow:var(--sombra);
  border:2px solid transparent; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.plano:hover{transform:translateY(-6px); box-shadow:var(--sombra-forte)}
.plano-destaque{border-color:var(--btn-a)}
.fita{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--laranja); color:#3A2100; font-size:12px; font-weight:800;
  padding:7px 18px; border-radius:999px; white-space:nowrap; letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(255,148,0,.36);
}
.plano-ico{width:44px; height:44px; border-radius:14px; background:var(--roxo-claro); display:grid; place-items:center; margin-bottom:16px}
.plano h3{color:var(--roxo-tinta); margin-bottom:10px}
.plano .desc{color:var(--texto-suave-2); font-size:15px; margin-bottom:20px; flex:0 0 auto; min-height:66px}
.plano-figura{border-radius:16px; overflow:hidden; background:var(--roxo-claro); margin-bottom:22px; aspect-ratio:16/9}
.plano-figura img{width:100%; height:100%; object-fit:cover; object-position:top left}
.plano .btn{margin-top:auto; width:100%}

/* ---------- mentalidade ---------- */
.mente-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4vw,64px); align-items:center}
/* A figura chega recortada, com alfa. Sem moldura, sem proporção fixa e sem box-shadow:
   a sombra do contêiner desenharia um retângulo em volta de área vazia. A sombra, quando
   existir, tem que ser drop-shadow, que segue o recorte. */
.mente-figura{border-radius:0; overflow:visible; box-shadow:none}
/* ⚠ nada de object-fit aqui: `none` renderiza no tamanho natural dentro da caixa e
   recorta; com width:100% + height:auto a imagem escala sozinha. */
.mente-figura img{width:100%; height:auto;
  filter:drop-shadow(0 22px 44px rgba(50,11,53,.16))}
.faixa-marca{
  font-family:var(--fonte-titulo); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(30px,3.6vw,46px); color:var(--roxo-tinta); margin-bottom:8px; line-height:1.05;
}
.faixa-marca-sub{color:var(--teal); font-weight:700; font-size:16px; margin-bottom:26px}
.mente-texto > p:first-of-type{color:var(--texto-suave-2); font-size:17px; margin-bottom:24px; max-width:46ch}
.beneficios{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:14px}
.beneficios li{display:flex; align-items:flex-start; gap:13px; font-size:16px; color:var(--roxo-tinta); font-weight:600}
.beneficios li > span{min-width:0}
.beneficios svg{flex:0 0 auto; margin-top:2px}

/* ---------- depoimentos ---------- */
.dep-palco{position:relative}
.dep-trilho{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:0; padding-bottom:8px; scrollbar-width:none}
.dep-trilho::-webkit-scrollbar{display:none}
.dep{
  flex:0 0 100%; scroll-snap-align:start; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--raio-g); padding:clamp(26px,3vw,42px);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(22px,3vw,38px); align-items:start;
}
.dep-foto{width:112px; height:112px; border-radius:50%; overflow:hidden; flex:0 0 auto; border:3px solid rgba(0,172,228,.55)}
.dep-foto img{width:100%; height:100%; object-fit:cover}
.dep blockquote{margin:0; font-size:clamp(15.5px,1.45vw,17px); color:rgba(255,255,255,.93); line-height:1.7}
.dep .aspas{color:var(--ciano); font-size:40px; line-height:.6; font-family:var(--fonte-titulo); display:block; margin-bottom:10px}
.dep figcaption{margin-top:20px; font-family:var(--fonte-titulo); font-weight:700; color:#fff; font-size:16px}
.dep figcaption span{display:block; font-family:var(--fonte-corpo); font-weight:400; color:var(--ciano-escuro-bg); font-size:14px; margin-top:3px}
.dep-controles{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px}
.dep-seta{
  width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.36);
  background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.dep-seta:hover{background:#fff; color:var(--roxo-topo); border-color:#fff; transform:scale(1.06)}
.dep-pontos{display:flex; gap:9px}
.dep-ponto{width:10px; height:10px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.34); cursor:pointer; transition:background .2s ease, width .2s ease}
.dep-ponto[aria-current="true"]{background:var(--ciano); width:28px; border-radius:999px}

/* ---------- logos de clientes ---------- */
.clientes{margin-top:clamp(48px,5vw,72px)}
.clientes-titulo{text-align:center; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:700; margin-bottom:26px}
/* Parede de logos. Os arquivos do cliente vinham com até 88% de moldura transparente
   embutida, então a caixa mentia sobre o tamanho da marca: sete logos quadrados
   estouravam o card em 39px e a razão de área entre o menor e o maior era 5,8:1.
   Os arquivos foram aparados no conteúdo e cada um recebe a altura que iguala a
   massa óptica — normalizar por caixa faria a marca larga parecer minúscula. */
.clientes-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px; justify-content:center;
}
.cliente{
  background:rgba(255,255,255,.94); border-radius:14px; min-height:88px;
  display:grid; place-items:center; padding:16px; overflow:hidden;
  transition:transform .22s ease, background .22s ease;
}
.cliente:hover{transform:translateY(-3px); background:#fff}
.cliente img{
  height:var(--h,26px); width:auto;
  max-width:100%; max-height:calc(88px - 32px); object-fit:contain;
}

/* ---------- blog ---------- */
.blog-topo{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:14px}
.blog-topo h2{margin:0}
.tags{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:36px}
.tags .rot{font-size:13.5px; color:var(--texto-suave-2); font-weight:600; margin-right:2px}
.tag{background:#fff; border:1px solid var(--roxo-claro-2); color:var(--roxo-tinta); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease}
.tag:hover{background:var(--btn-a); color:#fff; border-color:var(--btn-a)}
.posts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.post{
  display:flex; flex-direction:column; background:#fff; border-radius:var(--raio-g); overflow:hidden;
  text-decoration:none; color:inherit; box-shadow:0 8px 26px rgba(50,11,53,.08);
  transition:transform .28s ease, box-shadow .28s ease;
}
.post:hover{transform:translateY(-6px); box-shadow:var(--sombra-forte)}
.post-capa{aspect-ratio:16/10; overflow:hidden; background:var(--roxo-claro-2)}
.post-capa img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.post:hover .post-capa img{transform:scale(1.05)}
.post-corpo{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.post-meta{display:flex; flex-direction:column; align-items:flex-start; gap:7px}
.post-tag{background:var(--roxo-claro); color:var(--btn-b); border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:700}
.post-data{font-size:12.5px; color:var(--texto-suave-2)}
.post h3{font-size:16.5px; color:var(--roxo-tinta); line-height:1.35}
.post .ler{margin-top:auto; padding-top:12px; font-size:14px; font-weight:700; color:var(--btn-a); display:inline-flex; align-items:center; gap:7px}
.post:hover .ler{color:var(--btn-b)}

/* ---------- formulário ---------- */
.form-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4vw,64px); align-items:center}
.form-grade h2{margin-bottom:16px; text-wrap:balance}
.form-grade .apoio{color:rgba(255,255,255,.84); font-size:17px; max-width:40ch}
.form-caixa{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--raio-g); padding:clamp(24px,3vw,36px)}
.campo{margin-bottom:16px}
.campo label{display:block; font-size:13.5px; font-weight:700; color:#fff; margin-bottom:7px}
.campo input,.campo textarea{
  width:100%; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  border-radius:14px; padding:14px 16px; color:#fff; font-family:var(--fonte-corpo); font-size:15px;
  transition:border-color .2s ease, background .2s ease;
}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.48)}
.campo input:focus,.campo textarea:focus{outline:none; border-color:var(--ciano); background:rgba(255,255,255,.16)}
.campo textarea{resize:vertical; min-height:104px}
.aceite{display:flex; align-items:flex-start; gap:11px; margin:18px 0 22px; font-size:13.5px; color:rgba(255,255,255,.82); cursor:pointer}
.aceite input{width:20px; height:20px; flex:0 0 auto; margin-top:1px; accent-color:var(--ciano); cursor:pointer}
.form-caixa .btn{width:100%}

/* ---------- rodapé ---------- */
.rodape{background:var(--roxo-topo); color:#fff; padding-block:clamp(48px,5vw,68px) 0}
.rodape-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:44px}
.rodape-marca img{width:186px; margin-bottom:18px}
.rodape-marca p{color:rgba(255,255,255,.72); font-size:15px; max-width:38ch}
.sociais{display:flex; gap:11px}
.social{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.10); display:grid; place-items:center; transition:background .22s ease, transform .22s ease}
.social:hover{background:var(--ciano); transform:translateY(-3px)}
.social img{width:19px; height:19px; object-fit:contain}
.rodape-grade{display:grid; grid-template-columns:minmax(0,.8fr) repeat(2,minmax(0,1.1fr)); gap:clamp(26px,3vw,48px); padding-bottom:44px}
.rodape-grade h3{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ciano); margin-bottom:16px; font-weight:700}
.rodape-lista{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.rodape-lista a{color:rgba(255,255,255,.80); text-decoration:none; font-size:15px; transition:color .2s ease; display:inline-block; padding:2px 0}
.rodape-lista a:hover{color:var(--ciano)}
.rodape-bloco p{color:rgba(255,255,255,.74); font-size:14.5px; line-height:1.7; margin-bottom:10px}
.rodape-bloco a{color:rgba(255,255,255,.86); text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; padding:3px 0}
.rodape-bloco a:hover{color:var(--ciano)}
.rodape-fim{border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.rodape-fim p{color:rgba(255,255,255,.56); font-size:13.5px}
.assina{display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.56); font-size:13px; text-decoration:none; transition:color .2s ease}
.assina:hover{color:#fff}
.assina img{width:116px; opacity:.72; transition:opacity .2s ease}
.assina:hover img{opacity:1}

/* ---------- whatsapp flutuante ---------- */
.zap{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition:transform .22s ease, box-shadow .22s ease;
}
.zap:hover{transform:scale(1.08); box-shadow:0 16px 38px rgba(37,211,102,.54)}

/* ---------- aviso de cookies ---------- */
.cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:#241026; border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -14px 40px rgba(0,0,0,.34); padding:20px 0;
  transform:translateY(120%); transition:transform .42s cubic-bezier(.22,.7,.3,1);
}
.cookies.aberto{transform:translateY(0)}
.cookies-in{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.cookies-txt{flex:1 1 380px; color:rgba(255,255,255,.86); font-size:14.5px; line-height:1.6}
.cookies-txt strong{color:#fff; display:block; font-family:var(--fonte-titulo); font-size:16px; margin-bottom:4px}
.cookies-txt a{color:var(--ciano)}
.cookies-acoes{display:flex; gap:11px; flex-wrap:wrap}
.cookies-acoes .btn{min-height:48px; padding:12px 26px; font-size:14.5px}
body.tem-aviso .zap{bottom:calc(var(--altura-aviso, 104px) + 18px)}

/* ---------- revelação ao rolar ---------- */
/* Dois níveis: o bloco entra, e dentro dele título, figura e apoio entram em cascata
   curta. O deslocamento é pequeno de propósito — 14px sobe o suficiente para o olho
   perceber sem que a página pareça estar se remontando. */
.rev{opacity:0; transform:translateY(12px); transition:opacity .62s ease, transform .62s ease}
.rev.dentro{opacity:1; transform:none}

.rev-f{
  opacity:0; transform:translateY(14px);
  transition:opacity .66s cubic-bezier(.22,.7,.3,1), transform .66s cubic-bezier(.22,.7,.3,1);
  transition-delay:var(--atraso,0ms);
}
.rev.dentro .rev-f{opacity:1; transform:none}
/* figura entra com um respiro a mais: sobe menos e cresce de leve */
img.rev-f,.rev-f > img{transform:translateY(18px) scale(.985)}
.rev.dentro img.rev-f,.rev.dentro .rev-f > img{transform:none}


/* ---------- refino: alvos de toque e hover em tudo que clica ---------- */
.marca{min-height:44px; transition:opacity .2s ease}
.marca:hover{opacity:.82}

.link-ancora{display:inline-flex; align-items:center; min-height:44px}

.tag{min-height:44px; display:inline-flex; align-items:center}

/* o ponto continua com 10px de desenho; quem cresce é a área de clique */
.dep-ponto{
  width:44px; height:44px; background:transparent; position:relative;
  display:grid; place-items:center; border-radius:50%;
}
.dep-ponto::before{
  content:""; width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.34); transition:background .2s ease, width .2s ease;
}
.dep-ponto:hover::before{background:rgba(255,255,255,.66)}
.dep-ponto[aria-current="true"]{width:44px; background:transparent}
.dep-ponto[aria-current="true"]::before{background:var(--ciano); width:28px}

.rodape-lista a{min-height:44px; display:inline-flex; align-items:center; padding:0}
.rodape-bloco a{min-height:44px}
.assina{min-height:44px}
.cookies-txt a{text-decoration:underline; text-underline-offset:3px; padding-block:4px; transition:color .2s ease}
.cookies-txt a:hover{color:#fff}

/* o cartão inteiro do post é o alvo, não só o título */
.post{-webkit-tap-highlight-color:transparent}


/* ================= SISTEMA DE AÇÃO =================
   A varredura achou 17 estilos clicáveis distintos só na home — no herói eram quatro
   cores ao mesmo tempo (ciano sólido, gradiente roxo, link laranja, Login ciano).
   Cor demais em elemento clicável não chama atenção: dilui a que importa.

   Passam a existir três, e só três:
     primária   ação principal do bloco. Uma por bloco.
     secundária ação alternativa. Contorno, sem preenchimento.
     discreto   link de apoio. Texto e sublinhado.

   Cada uma inverte conforme o fundo. Ciano e laranja saem dos alvos clicáveis e
   seguem apenas como acento não-textual (filete do rótulo, destaque de título).
   ==================================================== */
:root{
  --acao:#6A2A6B;            /* primária sobre fundo claro */
  --acao-forte:#55215A;      /* seu estado de hover */
  --acao-clara:#E4D3E8;      /* primária sobre fundo escuro */
  --acao-clara-txt:#2A1030;
  --acao-linha:rgba(106,42,107,.45);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px; border-radius:999px;
  font-family:var(--fonte-corpo); font-weight:600; font-size:15px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.btn:hover{transform:translateY(-1px)}

/* --- primária --- */
.btn-primario,.btn-ciano{
  background:var(--acao); background-image:none; color:#fff;
  border-color:var(--acao); box-shadow:none;
}
.btn-primario:hover,.btn-ciano:hover{background:var(--acao-forte); border-color:var(--acao-forte); box-shadow:none}

/* sobre fundo escuro a primária inverte: preenchimento claro, tinta escura */
.topo .btn-primario,.heroi .btn-primario,.heroi .btn-ciano,
.secao-escura .btn-primario,.secao-escura .btn-ciano,
.faixa-corp .btn-primario,.faixa-corp .btn-ciano,
.cookies .btn-primario,.cookies .btn-ciano{
  background:var(--acao-clara); border-color:var(--acao-clara); color:var(--acao-clara-txt);
}
.topo .btn-primario:hover,.heroi .btn-primario:hover,.heroi .btn-ciano:hover,
.secao-escura .btn-primario:hover,.secao-escura .btn-ciano:hover,
.faixa-corp .btn-primario:hover,.faixa-corp .btn-ciano:hover,
.cookies .btn-primario:hover,.cookies .btn-ciano:hover{background:#fff; border-color:#fff}

/* --- secundária --- */
.btn-linha{background:transparent; color:var(--acao); border-color:var(--acao-linha)}
.btn-linha:hover{background:transparent; color:var(--acao-forte); border-color:var(--acao)}
.btn-linha-claro,.secao-escura .btn-linha,.heroi .btn-linha,.faixa-corp .btn-linha,.cookies .btn-linha{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.38);
}
.btn-linha-claro:hover,.secao-escura .btn-linha:hover,.heroi .btn-linha:hover,
.faixa-corp .btn-linha:hover,.cookies .btn-linha:hover{background:transparent; border-color:#fff}

/* --- discreto --- */
.link-ancora{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--acao); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--acao-linha); padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.link-ancora:hover{color:var(--acao-forte); border-color:var(--acao)}
.heroi .link-ancora,.secao-escura .link-ancora{color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.34)}
.heroi .link-ancora:hover,.secao-escura .link-ancora:hover{color:#fff; border-bottom-color:#fff}

/* Login era mais uma cor no herói; vira o mesmo discreto do resto do cabeçalho */
.nav .login{color:rgba(255,255,255,.86)}
.nav .login:hover{color:#fff; background:rgba(255,255,255,.12)}

/* "Ler" dos cartões de post e "ver" da capa seguem a primária */
.post .ler{color:var(--acao)}
.post:hover .ler{color:var(--acao-forte)}
.tag:hover{background:var(--acao); border-color:var(--acao); color:#fff}


/* sobraram três alvos fora do sistema, alinhados aqui */
.cookies-txt a{color:rgba(255,255,255,.92); border-bottom:1px solid rgba(255,255,255,.4); text-decoration:none}
.cookies-txt a:hover{color:#fff; border-bottom-color:#fff}
.dep-seta{border-width:1.5px; border-color:rgba(255,255,255,.38)}
.dep-seta:hover{background:#fff; color:var(--acao-clara-txt); border-color:#fff}

/* ---------- responsivo (depois de tudo que sobrescreve) ---------- */
@media(max-width:1024px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .abrir-menu{
    display:grid; place-items:center; margin-left:auto; width:46px; height:46px;
    border-radius:12px; background:rgba(255,255,255,.12); border:0; color:#fff; cursor:pointer;
    transition:background .2s ease;
  }
  .abrir-menu:hover{background:rgba(255,255,255,.24)}
  .nav{
    position:absolute; left:0; right:0; top:100%; margin:0; flex-direction:column;
    align-items:stretch; gap:6px; background:#2A0A2D; padding:16px 24px 24px;
    border-bottom:1px solid rgba(255,255,255,.12); display:none;
  }
  .nav.aberto{display:flex}
  .nav a{padding:14px 16px}
  .nav .btn{margin-left:0; width:100%}
  /* Empilhado: a chamada primeiro, a figura embaixo, encostada na base da seção.
     No estreito entra um recorte mais fechado — o painel de linha da esquerda
     desapareceria de qualquer jeito. */
  .heroi-in{grid-template-columns:1fr; gap:0; padding-block:56px 0}
  .heroi-texto{padding-bottom:36px}
  .heroi .sub{max-width:none}
  .heroi-figura{margin-right:0}
  .heroi-figura img{max-width:none; margin-inline:auto}
  .fig-desk{display:none}
  .fig-mob{display:block}
  .manifesto-grade,.mente-grade,.form-grade{grid-template-columns:1fr}
  .planos{grid-template-columns:1fr; gap:34px}
  .pilares{grid-template-columns:1fr}
  .dep{grid-template-columns:1fr; justify-items:start}
  .dep-foto{width:88px; height:88px}
}
@media(max-width:640px){
  .posts{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr}
  .clientes-grade{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .blog-topo{align-items:flex-start}
  .cookies-acoes{width:100%}
  .cookies-acoes .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; transition-delay:0ms!important}
  .rev,.rev-f,img.rev-f,.rev-f > img{opacity:1!important; transform:none!important}
}
.form-janela{height:680px;overflow:hidden;border-radius:12px;background:#39174d}
.form-caixa iframe{display:block;width:100%;height:800px;transform:translateY(-60px);border:0;background:#39174d}
@media(max-width:640px){.form-janela{height:800px}.form-caixa iframe{height:920px}}