/* ==========================================================================
   Renovatio Studio
   Reconstrução em HTML/CSS de referencia/07_MOCKUP_ORIGINAL_COMPLETO.png.
   Cores e proporções medidas em pixel sobre o próprio mockup.
   Sem build, sem framework, sem requisição externa em tempo de execução.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-variable.woff2') format('woff2-variations'),
      url('../fonts/inter-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- cores amostradas do mockup ---- */
  --amarelo:       #FFD400;   /* mesmo valor do SVG do logotipo */
  --amarelo-claro: #FFE352;
  --preto:         #04090C;   /* fundo geral */
  --secao-alt:     #070C11;   /* seções levemente mais claras */
  --superficie:    #0C1318;   /* cards */
  --superficie-2:  #111A20;
  --borda:         #1A2228;
  --borda-forte:   #263038;

  --texto:         #FFFFFF;
  --texto-suave:   #B6BCC2;
  --texto-fraco:   #79838B;

  --fonte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --env:1440px;
  --respiro:clamp(20px,5vw,72px);
  --r-card:14px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --rapido:180ms;
  --base:320ms;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--preto);color:var(--texto);
  font-family:var(--fonte);font-size:16.5px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;padding-top:84px;
}

h1,h2,h3{margin:0;font-weight:800;line-height:1.08;letter-spacing:-0.035em}
p{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px;border-radius:4px}

.env{max-width:var(--env);margin:0 auto;padding-inline:var(--respiro)}
.secao{padding-block:clamp(40px,3.2vw,46px) clamp(42px,3.4vw,50px)}
.secao-alt{background:var(--secao-alt)}
.borda-topo{border-top:1px solid var(--borda)}

.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amarelo);
  color:var(--preto);padding:12px 20px;border-radius:0 0 8px 0;font-weight:700}
.pular:focus{left:0}

.amarelo{color:var(--amarelo)}

/* rótulo pequeno com tracinho, repetido em todas as seções */
.rotulo{
  display:flex;align-items:center;gap:13px;margin-bottom:20px;
  font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-suave);
}
.rotulo::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--amarelo);flex:0 0 auto}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14.5px;font-weight:700;line-height:1;letter-spacing:-0.01em;
  padding:16px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  white-space:nowrap;
  transition:background var(--rapido) ease,border-color var(--rapido) ease,
             color var(--rapido) ease,transform var(--rapido) var(--ease);
}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform var(--base) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--amarelo);color:var(--preto)}
.btn-1:hover{background:var(--amarelo-claro)}
.btn-2{border-color:var(--borda-forte);color:var(--texto)}
.btn-2:hover{border-color:var(--amarelo);background:rgba(255,212,0,.07)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:hover svg{transform:none}}

/* ==========================================================================
   01 · CABEÇALHO
   ========================================================================== */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:60;height:84px;display:flex;align-items:center;
  border-bottom:1px solid transparent;background:transparent;
  transition:background var(--base) ease,border-color var(--base) ease;
}
.topo[data-rolado="true"]{
  background:rgba(4,9,12,.92);border-bottom-color:var(--borda);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.topo-in{
  width:100%;max-width:var(--env);margin:0 auto;padding-inline:var(--respiro);
  display:flex;align-items:center;gap:26px;position:relative;
}
.marca{flex:0 0 auto}
.marca img{height:38px;width:auto}

.menu{display:flex;align-items:center;gap:clamp(13px,2vw,28px);margin-inline:auto}
.menu a{
  position:relative;padding:6px 0;font-size:14px;font-weight:500;color:var(--texto-suave);
  transition:color var(--rapido) ease;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--amarelo);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--base) var(--ease);
}
.menu a:hover{color:var(--texto)}
.menu a:hover::after{transform:scaleX(1)}
.topo .btn{flex:0 0 auto;padding:12px 20px;font-size:13.5px}

.btn-menu{display:none;position:relative;width:46px;height:46px;flex:0 0 auto;border-radius:10px}
.btn-menu span{
  position:absolute;left:50%;translate:-50% 0;width:22px;height:2px;border-radius:2px;
  background:var(--texto);
  transition:top var(--base) var(--ease),transform var(--base) var(--ease),opacity var(--rapido) ease;
}
.btn-menu span:nth-child(1){top:17px}
.btn-menu span:nth-child(2){top:22px}
.btn-menu span:nth-child(3){top:27px}
.btn-menu[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.btn-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.btn-menu[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* ==========================================================================
   02 · HERO
   A foto sangra até a borda direita da tela, como no mockup, e se dissolve
   no fundo pela esquerda. Os seis cards flutuam sobre ela.
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--preto);isolation:isolate}
/* A moldura cobre o hero inteiro e a foto fica dentro dela, recuada da borda
   direita pela mesma margem externa do container. Assim o rosto guarda
   sempre a mesma distancia dos cards, em qualquer largura de tela, e a
   escala vem so da altura fixa do hero: nada de recorte variavel. */
.hero-foto{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-foto img{
  position:absolute;top:0;height:100%;width:auto;max-width:none;
  right:calc(max(0px,(100vw - var(--env)) / 2));
}
.hero-foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--preto) 0%,rgba(4,9,12,.98) 42%,rgba(4,9,12,.7) 52%,rgba(4,9,12,.12) 62%,rgba(4,9,12,.06) 82%,rgba(4,9,12,.28) 100%),
    linear-gradient(to bottom,rgba(4,9,12,.34) 0%,transparent 11%,transparent 76%,var(--preto) 100%);
}

.hero-txt,.hero-cards{position:relative;z-index:2}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(18px,2.2vw,32px);align-items:center;
  min-height:560px;
  padding-block:clamp(40px,4.6vw,66px);
}

.hero-rotulo{
  display:flex;align-items:center;gap:13px;margin-bottom:24px;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-suave);
}
.hero-rotulo::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--amarelo);flex:0 0 auto}

.hero h1{font-size:clamp(36px,3.8vw,53px);letter-spacing:-0.042em;max-width:19ch}
.hero-texto{margin-top:22px;font-size:clamp(15px,1.15vw,16.5px);line-height:1.62;
  color:var(--texto-suave);max-width:44ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}

/* fora do carrossel o trilho não existe para o layout: os cards seguem na grade */
.hero-trilho{display:contents}
.hero-cards .card-eco{display:none}
@keyframes desliza{to{translate:-50% 0}}

/* três cards de cada lado, com o rosto aparecendo no vão do meio */
.hero-cards{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  gap:14px clamp(24px,19vw,275px);
}
.card{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-card);
  background:rgba(10,16,20,.84);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color var(--base) ease,transform var(--base) var(--ease);
}
.card:hover{border-color:rgba(255,212,0,.42);transform:translateY(-3px)}
.card-ic{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center}
.card-ic svg{width:100%;height:100%}
.card b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-0.015em;line-height:1.25}
.card span{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--texto-suave)}
.card-seta{margin-left:auto;align-self:flex-start;color:var(--amarelo);flex:0 0 auto}
.card-seta svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}

/* ==========================================================================
   03 · FAIXA DAS SEIS FRENTES
   ========================================================================== */
.faixa{background:var(--preto);border-block:1px solid var(--borda);
  padding-block:clamp(30px,3.2vw,46px) clamp(36px,3.8vw,54px)}
.faixa-in{display:grid;grid-template-columns:minmax(190px,225px) minmax(0,1fr);
  gap:clamp(18px,1.8vw,24px);align-items:start}
.faixa-tit{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.55;margin-bottom:10px}
.faixa-tit::before{content:"";display:block;width:24px;height:3px;border-radius:2px;
  background:var(--amarelo);margin-bottom:16px}
.faixa-txt{font-size:11.5px;line-height:1.5;color:var(--texto-suave);max-width:40ch}

.frentes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
/* a divisoria vem antes de cada item, inclusive do primeiro, como no mockup */
.frente{padding:0 4px 0 20px;border-left:1px solid var(--borda)}
.frente svg{width:38px;height:38px;color:var(--amarelo);margin-bottom:18px}
.frente b{display:block;font-size:13px;font-weight:700;letter-spacing:-0.015em;margin-bottom:6px}
.frente span{display:block;font-size:11px;line-height:1.5;color:var(--texto-suave)}
/* Os seis cards da faixa levam a uma pagina ou a uma conversa no WhatsApp.
   Sem nenhum retorno no hover, nada dizia que sao clicaveis. O transform fica
   no icone, e nao no card: o card carrega .sobe, cuja regra de revelacao
   venceria por especificidade. */
.frente{transition:border-color var(--rapido) ease}
.frente svg{transition:transform var(--base) var(--ease)}
.frente b{transition:color var(--rapido) ease}
.frente:hover{border-color:var(--amarelo)}
.frente:hover b{color:var(--amarelo)}
.frente:hover svg{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.frente:hover svg{transform:none}}

/* ==========================================================================
   04 · POR QUE INVESTIR
   ========================================================================== */
/* overflow:hidden para o sangramento da arte nao gerar barra horizontal:
   100vw inclui a barra de rolagem, a largura util do documento nao. */
.porque{position:relative;background:var(--secao-alt);padding-block:34px 43px;overflow:hidden}
.porque-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
  gap:clamp(32px,7.5vw,108px);align-items:center}
.tracinho{display:block;width:34px;height:3px;border-radius:2px;background:var(--amarelo);
  margin-bottom:20px}
.porque h2{font-size:clamp(24px,2.1vw,28px);line-height:1.18;max-width:20ch}
.porque-txt{margin-top:17px;font-size:13.5px;line-height:1.58;color:var(--texto-suave);max-width:330px}

.beneficios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 18px;margin-top:31px}
.ben{display:flex;gap:18px;align-items:flex-start}
.ben svg{flex:0 0 auto;width:34px;height:34px;color:var(--amarelo);margin-top:0}
.ben b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-0.015em;margin-bottom:4px}
.ben span{display:block;font-size:13px;line-height:1.5;color:var(--texto-suave)}

/* A arte sai da grade e passa a ocupar a altura inteira da secao, ancorada
   na borda direita. Como a referencia e a propria secao, e nao 100vw, ela
   encosta na tela sem contar a barra de rolagem: nada e cortado. A coluna 2
   da grade continua reservando a largura, por usar fr. */
.aparelhos{position:absolute;top:0;bottom:0;right:0;width:66%;overflow:hidden;z-index:0}
/* A arte escala pela altura e mantem a proporcao do arquivo: nada de corte.
   Usa a mesma ancoragem da foto do hero, a margem externa do container, para
   as duas terminarem exatamente na mesma vertical. */
.aparelhos img{position:absolute;top:50%;translate:0 -50%;
  right:calc(max(0px,(100vw - var(--env)) / 2));
  height:100%;width:auto;max-width:none}
/* Dissolve a arte no fundo da secao. A esquerda o desvanecimento e longo,
   para a foto nascer do escuro em vez de comecar numa borda. A direita um
   toque leve, para o recuo da imagem nao virar uma emenda visivel. */
.aparelhos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,
      var(--secao-alt) 0%,
      rgba(7,12,17,.96) 12%,
      rgba(7,12,17,.72) 24%,
      rgba(7,12,17,.38) 36%,
      rgba(7,12,17,.14) 46%,
      transparent 56%,
      transparent 88%,
      rgba(7,12,17,.35) 100%),
    linear-gradient(to bottom,rgba(7,12,17,.5) 0%,transparent 12%,transparent 86%,rgba(7,12,17,.6) 100%);
}

/* ==========================================================================
   05 · PROJETOS
   ========================================================================== */
.projetos-in{display:grid;grid-template-columns:minmax(0,.70fr) minmax(0,2.30fr);
  gap:clamp(24px,2.8vw,42px);align-items:start}
.projetos-in h2{font-size:clamp(24px,2.1vw,28px);line-height:1.18;max-width:17ch}
.projetos-txt{margin-top:18px;font-size:14.5px;line-height:1.62;color:var(--texto-suave);max-width:36ch}
.projetos-in .btn{margin-top:14px;padding:11px 20px;font-size:13.5px}

.grade-projetos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.projeto{display:flex;flex-direction:column}
.projeto-arte{
  border-radius:11px;overflow:hidden;border:1px solid var(--borda);background:var(--superficie);
  transition:transform var(--base) var(--ease),border-color var(--base) ease,
             box-shadow var(--base) var(--ease);
}
.projeto-arte img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.projeto:hover .projeto-arte{transform:translateY(-5px);border-color:var(--borda-forte);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.9)}
.projeto-nome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.projeto-nome b{font-size:15px;font-weight:700;letter-spacing:-0.02em}
.projeto-nome svg{width:15px;height:15px;flex:0 0 auto;color:var(--texto-fraco);
  transition:color var(--rapido) ease,transform var(--base) var(--ease)}
.projeto:hover .projeto-nome svg{color:var(--amarelo);transform:translateX(3px)}
.projeto-tipo{margin-top:5px;font-size:13px;color:var(--texto-suave)}
@media (prefers-reduced-motion:reduce){.projeto:hover .projeto-arte{transform:none}}

/* ==========================================================================
   06 · MÉTODO
   Cinco círculos numerados em linha, ligados por uma seta, como no mockup.
   ========================================================================== */
.metodo{background:var(--preto)}
.metodo-in{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,2.34fr);
  gap:clamp(28px,3.4vw,52px);align-items:start}
.metodo-in h2{font-size:clamp(24px,2.1vw,28px);line-height:1.18;max-width:19ch}
.metodo-txt{margin-top:18px;font-size:14.5px;line-height:1.62;color:var(--texto-suave);max-width:36ch}

.passos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.passo{position:relative;padding-right:22px}
.passo-n{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--amarelo);color:var(--amarelo);
  font-size:13.5px;font-weight:700;letter-spacing:.02em;margin-bottom:18px;
  transition:background var(--base) ease,color var(--base) ease;
}
.passo:hover .passo-n{background:var(--amarelo);color:var(--preto)}
/* linha que liga um círculo ao próximo */
.passo:not(:last-child)::before{
  content:"";position:absolute;top:24px;left:62px;right:8px;height:1px;background:var(--borda-forte);
}
.passo:not(:last-child)::after{
  content:"";position:absolute;top:20.5px;right:8px;width:7px;height:7px;
  border-top:1px solid var(--borda-forte);border-right:1px solid var(--borda-forte);
  transform:rotate(45deg);
}
.passo b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-0.02em;margin-bottom:8px}
.passo span:not(.passo-n){display:block;font-size:13px;line-height:1.55;color:var(--texto-suave)}

/* ==========================================================================
   07 · CTA FINAL
   Fundo escuro com a luz quente entrando pela esquerda e a seta da marca
   ampliada à direita, como no mockup.
   ========================================================================== */
/* Faixa medida no mockup: 96px de altura (135px na escala do site).
   A luz quente entra pelo canto inferior esquerdo e some por volta de 40%
   da largura. A direita leva uma textura facetada escura, e sobre ela o
   chevron da marca em amarelo solido, com 76% da altura da faixa. */
.final{position:relative;overflow:hidden;background:var(--preto);border-block:1px solid var(--borda)}
/* textura facetada: tres tramas em angulo formam a mesma mecanica de
   triangulos do mockup, sem precisar de imagem */
.final::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(58deg,rgba(214,226,238,.062) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(-58deg,rgba(214,226,238,.062) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(214,226,238,.032) 0 1px,transparent 1px 62px),
    linear-gradient(115deg,rgba(255,255,255,.012) 0 34%,rgba(255,255,255,.05) 52%,
      rgba(255,255,255,.015) 70%,rgba(255,255,255,.045) 88%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 52%,rgba(0,0,0,.5) 66%,#000 82%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 52%,rgba(0,0,0,.5) 66%,#000 82%);
}
/* luz quente saindo do canto inferior esquerdo */
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 165% at 0% 118%,rgba(255,196,0,.62) 0%,rgba(255,180,0,.26) 18%,rgba(255,170,0,.08) 30%,transparent 44%),
    linear-gradient(to right,rgba(255,200,0,.12) 0%,transparent 26%);
}
.final-seta{
  position:absolute;right:165px;top:50%;translate:0 -50%;height:77%;width:auto;
  opacity:1;pointer-events:none;z-index:0;
  filter:drop-shadow(0 5px 18px rgba(0,0,0,.5));
}
.final-in{
  position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:clamp(22px,2.6vw,40px);align-items:center;
  padding-block:clamp(26px,2.4vw,34px);
  /* o conteudo para antes da zona da seta, como no mockup */
  padding-right:clamp(0px,22.5vw,330px);
}
.final h2{font-size:clamp(22px,1.95vw,26px);line-height:1.2;max-width:none;text-wrap:balance}
/* filete vertical separando a chamada do texto, como no mockup */
.final p{font-size:12.5px;line-height:1.55;color:var(--texto-suave);max-width:none;
  padding-left:clamp(20px,2.2vw,34px);border-left:1px solid rgba(214,226,238,.14)}
.final .btn{padding:13px 22px;font-size:13.5px}

/* ==========================================================================
   08 · RODAPÉ
   ========================================================================== */
.rodape{background:var(--preto);padding-top:clamp(32px,3vw,38px)}
/* larguras na proporcao medida no mockup: 360 / 235 / 348 / 315 */
.rodape-in{
  display:grid;grid-template-columns:minmax(0,360fr) minmax(0,235fr) minmax(0,348fr) minmax(0,315fr);
  gap:clamp(24px,2.8vw,40px);align-items:start;
}
.rodape-marca img{height:30px;width:auto;margin-bottom:14px}
/* fluida para nao quebrar em duas linhas nas larguras intermediarias */
.tagline{font-size:clamp(10.5px,.85vw,12px);font-weight:600;color:var(--texto-suave);max-width:none}

.rodape h3{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--texto);margin:0 0 13px}
/* no mockup os links ficam colados, com 15px de passo: a entrelinha faz o
   espacamento, nao o gap */
.rodape-col{display:flex;flex-direction:column;gap:0}
.rodape-col a,.rodape-col span{font-size:13px;line-height:1.32;color:var(--texto-suave)}
.rodape-col-contato{gap:7px}
.rodape-col a{transition:color var(--rapido) ease}
.rodape-col a:hover{color:var(--amarelo)}
.linha-contato{display:flex;align-items:flex-start;gap:10px}
.linha-contato svg{flex:0 0 auto;width:15px;height:15px;color:var(--amarelo);margin-top:3px}
.linha-contato span,.linha-contato a{overflow-wrap:anywhere}

.redes{display:flex;gap:8px;margin-bottom:14px}
.redes a{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--borda);color:var(--texto-suave);
  transition:border-color var(--rapido) ease,color var(--rapido) ease;
}
.redes a:hover{border-color:var(--amarelo);color:var(--amarelo)}
.redes svg{width:16px;height:16px}
.btn-zap{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-pill);
  border:1px solid var(--borda-forte);font-size:13.5px;font-weight:600;
  transition:border-color var(--rapido) ease,color var(--rapido) ease,background var(--rapido) ease;
}
.btn-zap svg{width:16px;height:16px;flex:0 0 auto}
.btn-zap:hover{border-color:var(--amarelo);color:var(--amarelo);background:rgba(255,212,0,.06)}

.rodape-base{
  margin-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--borda);
  padding-block:15px 19px;display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--texto-fraco);
}
.legais{display:flex;gap:22px}
.legais a{transition:color var(--rapido) ease}
.legais a:hover{color:var(--texto-suave)}

/* ==========================================================================
   REVELAÇÃO EM SCROLL
   Atrás da classe .js, posta pelo próprio script: sem JavaScript nada some.
   ========================================================================== */
.js .sobe{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s var(--ease)}
.js .sobe.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .sobe{opacity:1!important;transform:none!important;transition:none}
}

/* ==========================================================================
   RESPONSIVO
   Auditado em 1920 · 1600 · 1440 · 1366 · 1280 · 1180 · 1080 · 1024 · 980
   · 860 · 768 · 720 · 560 · 430 · 375
   ========================================================================== */
@media (min-width:1181px){.menu .btn-mob{display:none}}

@media (max-width:1280px){
  .porque{padding-block:clamp(48px,8vw,70px)}
  .card{padding:12px 14px}
  .card b{font-size:13px}
  .card span{font-size:11.5px}
  .hero-cards{gap:12px clamp(24px,7vw,110px)}
}

@media (max-width:1180px){
  .grade-projetos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .projetos-in{grid-template-columns:minmax(0,1fr);gap:34px}
  .projetos-in h2{max-width:20ch}
  .metodo-in{grid-template-columns:minmax(0,1fr);gap:34px}
  .metodo-in h2{max-width:22ch}
  /* a seta so cabe inteira nas telas largas */
  .final-in{padding-right:clamp(0px,11vw,140px)}
  .final-seta{height:62%;right:36px}
}

@media (max-width:1180px){
  .btn-menu{display:block}
  .topo .btn{display:none}
  .topo-in{justify-content:space-between}
  .menu{
    position:absolute;left:0;right:0;top:100%;margin:0;gap:0;
    flex-direction:column;align-items:stretch;
    background:var(--secao-alt);border-bottom:1px solid var(--borda);
    padding-block:8px 18px;
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .44s var(--ease),opacity .3s ease;
  }
  .menu[data-aberto="true"]{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .menu a{padding:16px var(--respiro);font-size:16px;border-bottom:1px solid var(--borda)}
  .menu a::after{display:none}
  .menu .btn-mob{
    display:flex;justify-content:center;margin:18px var(--respiro) 0;border-bottom:0;
    background:var(--amarelo);color:var(--preto);font-weight:700;font-size:15px;
    padding:16px 22px;border-radius:var(--r-pill);
  }
  /* sem JavaScript o painel não abre: o cabeçalho sai do fixo e os links
     empilham, continuando clicáveis */
  html:not(.js) .topo{position:static;height:auto;padding-block:14px}
  html:not(.js) body{padding-top:0}
  html:not(.js) .topo-in{flex-wrap:wrap;row-gap:12px}
  html:not(.js) .menu{position:static;clip-path:none;opacity:1;pointer-events:auto;
    flex-direction:row;flex-wrap:wrap;background:none;border:0;padding:0;gap:6px 20px;flex:1 0 100%}
  html:not(.js) .menu a{padding:6px 0;border:0;font-size:14.5px}
  html:not(.js) .menu .btn-mob{display:none}
  html:not(.js) .btn-menu{display:none}
  html:not(.js) .topo-in > .btn{display:inline-flex}

  .passos{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 0}
  .passo:nth-child(3n)::before,.passo:nth-child(3n)::after{display:none}
  .final-in{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:0}
  .final-in .btn{grid-column:1/-1;justify-self:start}
  /* com o conteudo em duas colunas a seta viraria obstaculo: fica so o relevo */
  .final-seta{opacity:.2;height:72%;right:40px}
  .rodape-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rodape-marca{grid-column:1/-1}
}

/* ---- o hero deixa de ser duas colunas ---- */
@media (max-width:1400px){
  .faixa-in{grid-template-columns:minmax(0,1fr)}
  .frentes{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 0}
  .frente{padding:0 clamp(14px,2vw,28px) 0 0}
  .frente:nth-child(3n+1){border-left:0}
  .frente:not(:nth-child(3n+1)){padding-left:clamp(14px,2vw,28px)}
}

@media (max-width:1280px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;
    padding-block:clamp(34px,7vw,56px) 0}
  .hero h1{max-width:16ch}
  .hero-texto{max-width:56ch}
  /* a foto sai do fundo e entra no fluxo, entre o texto e os cards.
     Sem margem negativa: aqui ela ja ocupa a largura toda da grade. */
  .hero-foto{position:relative;inset:auto;width:auto;order:2;margin-top:30px;overflow:visible}
  .hero-foto img{position:static;width:100%;height:auto;right:auto}
  .hero-txt{order:1}
  .hero-cards{order:3}
  .hero-foto img{aspect-ratio:16/10;height:auto}
  .hero-foto::after{background:
    linear-gradient(to bottom,rgba(4,9,12,.45) 0%,transparent 26%,transparent 74%,var(--preto) 100%)}
  /* os cards viram carrossel horizontal */
  .hero-cards{
    display:flex;grid-auto-flow:row;gap:12px;margin-top:24px;padding:4px 0 16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:var(--borda-forte) transparent;
  }
  .hero-cards::-webkit-scrollbar{height:5px}
  .hero-cards::-webkit-scrollbar-thumb{background:var(--borda-forte);border-radius:3px}
  .card{flex:0 0 auto;width:226px;scroll-snap-align:start}
  /* com JS, o carrossel anda sozinho da direita para a esquerda. O script
     duplica os cards dentro de .hero-trilho, e o -50% cai exatamente no
     começo da cópia, então o laço não dá salto. Para no toque e no foco. */
  .hero-cards.rolando{overflow:hidden;scroll-snap-type:none;padding-bottom:4px;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
  .rolando .hero-trilho{display:flex;gap:12px;padding-right:12px;width:max-content;
    animation:desliza 32s linear infinite}
  .rolando .card-eco{display:flex}
  .rolando:hover .hero-trilho,.rolando:focus-within .hero-trilho{animation-play-state:paused}
  .porque{display:flex;flex-direction:column;gap:36px}
  .porque-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .porque h2{max-width:18ch}
  /* no empilhado a arte volta ao fluxo e respeita as mesmas margens do
     container, igual a foto do hero */
  .aparelhos{position:relative;top:auto;bottom:auto;right:auto;order:-1;
    width:auto;max-width:var(--env);margin-inline:auto;padding-inline:var(--respiro)}
  .aparelhos img{position:relative;right:auto;top:auto;translate:none;width:100%;height:auto}
}

@media (max-width:860px){
  .grade-projetos{gap:26px 20px}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passo::before,.passo::after{display:none}
  .rodape-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .final-in{padding-right:0}
  .final-seta{display:none}
  .secao{padding-block:clamp(48px,9vw,70px)}
  .frentes{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .frente{border-left:0;padding-inline:0}
  .beneficios{grid-template-columns:minmax(0,1fr);gap:22px}
  .final-in{grid-template-columns:minmax(0,1fr)}
  .final h2{max-width:100%}
  .hero-ctas .btn{width:100%}
  .rodape-base{justify-content:flex-start}
}

@media (max-width:560px){
  .hero h1{font-size:clamp(30px,8.4vw,42px);max-width:100%}
  .grade-projetos{grid-template-columns:minmax(0,1fr)}
  .passos{grid-template-columns:minmax(0,1fr);gap:26px}
  .rodape-in{grid-template-columns:minmax(0,1fr);gap:30px}
  .legais{gap:16px}
}

@media (max-width:430px){
  .card{width:208px}
  .btn{padding:15px 22px;font-size:14px}
}

/* a frase do botão da hero não cabe com a seta abaixo disso: a seta sai */
@media (max-width:400px){
  .hero-ctas .btn svg{display:none}
}
@media (max-width:359px){
  .hero-ctas .btn{padding-inline:14px;font-size:13.5px}
}

@media (max-width:375px){
  .hero h1{font-size:29px}
}

/* ==========================================================================
   PÁGINA DE PORTFÓLIO
   Mesma paleta e mesmos componentes da home. Cada projeto ocupa uma linha
   inteira, com a arte de um lado e a ficha do outro, alternando o lado a
   cada item.
   ========================================================================== */
.pf-topo{background:var(--preto);padding-block:clamp(44px,5vw,72px) clamp(36px,4vw,54px)}
.pf-topo h1{font-size:clamp(30px,3.4vw,44px);line-height:1.12;max-width:16ch}
.pf-topo p{margin-top:18px;font-size:15.5px;line-height:1.62;color:var(--texto-suave);max-width:56ch}
.pf-resumo{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pf-marca{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--borda);font-size:12.5px;color:var(--texto-suave);
}
.pf-marca b{color:var(--texto);font-weight:700}

.pf-lista{background:var(--secao-alt);border-top:1px solid var(--borda)}
.pf-item{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(40px,4.4vw,60px);
  border-bottom:1px solid var(--borda);
}
.pf-item:last-of-type{border-bottom:0}
/* O lado da arte alterna a cada projeto. As colunas tambem se invertem: sem
   isso a arte dos pares cairia na coluna estreita e ficaria menor que a dos
   impares, quebrando o ritmo da lista. */
.pf-item:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.pf-item:nth-of-type(even) .pf-arte{order:2}
.pf-item:nth-of-type(even) .pf-ficha{order:1}

.pf-arte{
  border-radius:12px;overflow:hidden;border:1px solid var(--borda);background:var(--superficie);
  transition:transform var(--base) var(--ease),border-color var(--base) ease,
             box-shadow var(--base) var(--ease);
}
.pf-arte img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.pf-item:hover .pf-arte{transform:translateY(-5px);border-color:var(--borda-forte);
  box-shadow:0 26px 52px -26px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){.pf-item:hover .pf-arte{transform:none}}

.pf-cabeca{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pf-num{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--amarelo)}
.pf-cat{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-fraco)}
.pf-cat::before{content:"";display:inline-block;width:18px;height:1px;background:var(--borda-forte);
  vertical-align:middle;margin-right:12px}
.pf-ficha h2{font-size:clamp(21px,2vw,26px);line-height:1.18;margin-bottom:12px}
.pf-ficha p{font-size:14px;line-height:1.62;color:var(--texto-suave);max-width:46ch}

.pf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pf-tag{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--texto-suave);
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--borda);
  background:rgba(255,255,255,.015);
}
.pf-acoes{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px}
.pf-link{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:var(--texto);position:relative;padding-bottom:3px;
  transition:color var(--rapido) ease;
}
.pf-link svg{width:14px;height:14px;transition:transform var(--base) var(--ease)}
.pf-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amarelo);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--base) var(--ease);
}
.pf-link:hover{color:var(--amarelo)}
.pf-link:hover::after{transform:scaleX(1)}
.pf-link:hover svg{transform:translate(2px,-2px)}
.pf-link-off{color:var(--texto-fraco);cursor:default}
.pf-link-off::after{display:none}

/* chamada no meio da lista, quebrando o ritmo dos projetos */
.pf-chamada{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(24px,3vw,34px) clamp(24px,3vw,36px);
  border:1px solid var(--borda);border-radius:var(--r-card);
  background:linear-gradient(120deg,rgba(255,212,0,.07),transparent 46%),var(--superficie);
}
.pf-chamada h2{font-size:clamp(19px,1.8vw,23px);line-height:1.2;max-width:22ch}
.pf-chamada p{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--texto-suave);max-width:52ch}

/* Empilha so abaixo de 960: entre 960 e 1180 as duas colunas ainda cabem, e
   empilhar antes disso deixava a arte com mais de 1000px de largura. Ja
   empilhada, a arte ganha teto de largura pelo mesmo motivo. */
@media (max-width:960px){
  .pf-item,
  .pf-item:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:26px}
  .pf-item:nth-of-type(even) .pf-arte{order:0}
  .pf-item:nth-of-type(even) .pf-ficha{order:0}
  .pf-arte{max-width:620px}
}
@media (max-width:720px){
  .pf-chamada{grid-template-columns:minmax(0,1fr)}
  .pf-chamada .btn{width:100%}
  .pf-acoes{gap:16px}
}

/* ==========================================================================
   PÁGINA DE CRIAÇÃO DE SITES
   Mesma paleta e mesmos componentes da home. A pagina e longa, com treze
   blocos: em vez de um layout proprio por bloco, ela usa um cabecalho de
   secao (.cs-cab) e uma grade generica (.cs-grade) que muda so o numero de
   colunas. Menos CSS para manter e ritmo vertical igual do topo ao fim.
   ========================================================================== */
.cs-hero{background:var(--preto);padding-block:clamp(30px,3.4vw,46px) clamp(38px,4vw,56px)}
/* Texto a esquerda, quadro a direita. Sem largura maxima no titulo e no
   texto: quem limita e a coluna, senao sobra um vao entre o texto e o
   quadro. Os tetos voltam quando a hero empilha, mais abaixo. */
.cs-hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(348px,.94fr);
  gap:clamp(28px,3.4vw,54px);align-items:center}
.cs-hero h1{font-size:clamp(33px,3.7vw,48px);line-height:1.12;text-wrap:balance}
.cs-hero-txt{margin-top:19px;font-size:17px;line-height:1.62;color:var(--texto-suave)}
.cs-hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

/* quadro do "desenvolvimento direto" */
.cs-quadro{
  padding:clamp(22px,2.2vw,30px);border-radius:var(--r-card);
  border:1px solid var(--borda);
  background:linear-gradient(150deg,rgba(255,212,0,.055),transparent 48%),var(--superficie);
}
/* etiqueta de categoria: no quadro da hero e no topo dos cards */
.cs-tag{
  display:inline-block;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,212,0,.12);border:1px solid rgba(255,212,0,.3);color:var(--amarelo);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
/* O tique e desenhado em CSS em vez de virar mais um simbolo no sprite: o
   sprite e igual nas tres paginas e so esta pagina precisa deste icone. */
/* variante sem destaque, para o card que faz par com um card em amarelo */
.cs-tag-neutra{background:rgba(255,255,255,.055);border-color:var(--borda-forte);
  color:var(--texto-suave)}
/* dentro de um card a etiqueta precisa de respiro antes do titulo */
.cs-lista .cs-tag{margin-bottom:15px}

.cs-checks{list-style:none;margin:21px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.cs-checks li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;
  color:var(--texto-suave)}
.cs-checks li::before{
  content:"";position:absolute;left:3px;top:.34em;width:6px;height:11px;
  border:2px solid var(--amarelo);border-top:0;border-left:0;transform:rotate(45deg);
}
.cs-checks b{color:var(--texto);font-weight:700}
.cs-assina{display:flex;align-items:center;gap:13px;
  margin-top:23px;padding-top:21px;border-top:1px solid var(--borda)}
.cs-avatar{width:46px;height:46px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:2px solid var(--amarelo)}
.cs-assina b{display:block;font-size:16px;font-weight:800;letter-spacing:-0.02em}
.cs-assina span{display:block;margin-top:2px;font-size:13.5px;color:var(--texto-suave)}

/* trilha de navegacao: texto pequeno, sem peso visual de menu */
.cs-migalhas{display:flex;align-items:center;gap:9px;margin-bottom:22px;
  font-size:13px;color:var(--texto-fraco)}
.cs-migalhas a{color:var(--texto-suave);transition:color var(--rapido) ease}
.cs-migalhas a:hover{color:var(--amarelo)}
.cs-migalhas [aria-current]{color:var(--texto-fraco)}

/* cabecalho de secao, repetido em todos os blocos */
.cs-cab{margin-bottom:clamp(30px,3vw,42px)}
.cs-cab h2{font-size:clamp(29px,2.9vw,40px);line-height:1.14}
.cs-txt{margin-top:18px;font-size:16px;line-height:1.62;color:var(--texto-suave);max-width:64ch}

/* ---- grade generica ---- */
.cs-grade{display:grid;gap:clamp(16px,1.6vw,22px)}
.cs-grade-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-grade-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Caixa de conteudo com selo, repetida em cinco secoes: usabilidade, canais,
   metodo, dominio e estrutura tecnica. O selo carrega um icone ou o numero da
   etapa, entao a mesma caixa serve para lista e para sequencia, e a pagina
   inteira fica com um ritmo so. */
.cs-caixa{
  padding:clamp(22px,2.2vw,28px);border-radius:var(--r-card);
  border:1px solid var(--borda);background:var(--superficie);
}
.cs-selo{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:17px;
  border-radius:11px;color:var(--amarelo);
  background:rgba(255,212,0,.1);border:1px solid rgba(255,212,0,.24);
  font-size:16px;font-weight:800;line-height:1;letter-spacing:-0.01em;
}
.cs-selo svg{width:21px;height:21px}
.cs-caixa h3{font-size:17.5px;line-height:1.26}
.cs-caixa p{margin-top:11px;font-size:15px;line-height:1.62;color:var(--texto-suave)}

/* ---- 04 · comparativo site x landing / 08 · listas da proposta ---- */
.cs-formato,
.cs-lista{
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-card);border:1px solid var(--borda);
  background:var(--superficie);
}

/* ---- mouseover dos cards, um comportamento so para os tres ---- */
.cs-caixa,
.cs-formato,
.cs-lista{
  transition:transform var(--base) var(--ease),border-color var(--base) ease,
             background-color var(--base) ease,box-shadow var(--base) var(--ease);
}
/* A classe da revelacao em scroll mora no mesmo elemento e, ja revelada,
   aplica .js .sobe.visivel{transform:none} — 0-3-0. Um simples .cs-caixa:hover
   e 0-2-0 e perdia: o card nunca subia. Repetir a classe empata em
   especificidade e a ordem no arquivo decide a favor do hover. */
.cs-caixa.cs-caixa:hover,
.cs-formato.cs-formato:hover,
.cs-lista.cs-lista:hover{
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(255,212,0,.42);
  background-color:var(--superficie-2);
  box-shadow:0 24px 50px -16px rgba(0,0,0,1),
             0 0 44px -8px rgba(255,212,0,.26);
}
/* o selo acende e se mexe junto, senao so a borda muda e o olho nao pega */
.cs-selo{transition:background var(--base) ease,border-color var(--base) ease,
  transform var(--base) var(--ease)}
.cs-caixa:hover .cs-selo,
.cs-lista:hover .cs-selo{
  background:rgba(255,212,0,.2);border-color:rgba(255,212,0,.55);
  transform:translateY(-2px) scale(1.06);
}
.cs-formato:hover .cs-formato-cab svg{transform:translateY(-2px) scale(1.08)}
.cs-formato-cab svg{transition:transform var(--base) var(--ease)}
.cs-formato:hover .cs-formato-tipo{color:var(--texto-suave)}
@media (prefers-reduced-motion:reduce){
  .cs-caixa.cs-caixa:hover,
  .cs-formato.cs-formato:hover,
  .cs-lista.cs-lista:hover,
  .cs-caixa:hover .cs-selo,
  .cs-lista:hover .cs-selo,
  .cs-formato:hover .cs-formato-cab svg{transform:none}
}
.cs-formato-cab{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.cs-formato-cab svg{width:24px;height:24px;color:var(--amarelo);flex:0 0 auto}
.cs-formato-tipo{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-fraco)}
.cs-formato h3,
.cs-lista h3{font-size:clamp(21px,1.85vw,24px);line-height:1.2}
.cs-lista h3{margin-bottom:6px}
/* paragrafo de abertura entre o titulo do card e a lista */
.cs-card-txt{margin-top:13px;font-size:15px;line-height:1.62;color:var(--texto-suave)}

/* lista com marcador proprio: o disco padrao nao acompanha a paleta e cola
   no texto quando a linha quebra. */
.cs-bullets{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cs-bullets li{position:relative;padding-left:24px;font-size:15px;line-height:1.6;
  color:var(--texto-suave)}
.cs-bullets b{color:var(--texto);font-weight:700}
.cs-bullets li::before{
  content:"";position:absolute;left:0;top:.8em;width:8px;height:8px;
  border-radius:2px;background:var(--amarelo);transform:rotate(45deg);
}

/* ---- canais: mesma grade da .cs-grade, so que em <ol> ---- */
.cs-canais{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,22px)}

/* ---- metodo: texto a esquerda, linha do tempo a direita ---- */
.cs-metodo{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(30px,4vw,74px);align-items:start}
.cs-metodo h2{font-size:clamp(29px,2.9vw,40px);line-height:1.14}
.cs-metodo-resumo{
  display:flex;align-items:flex-start;gap:18px;
  margin-top:clamp(26px,2.6vw,34px);padding-top:clamp(22px,2.2vw,28px);
  border-top:1px solid var(--borda);
}
.cs-metodo-n{font-size:46px;font-weight:800;letter-spacing:-0.05em;line-height:.88;
  color:var(--amarelo);flex:0 0 auto}
.cs-metodo-resumo b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-0.02em}
/* so o span de dentro do bloco de texto: o .cs-metodo-n tambem e span e era
   atropelado por um seletor mais especifico */
.cs-metodo-resumo div span{display:block;margin-top:4px;font-size:14.5px;color:var(--texto-suave)}

.cs-linha{list-style:none;margin:0;padding:0}
.cs-passo-l{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:18px;padding-top:22px}
.cs-passo-l:first-child{padding-top:0}
/* a divisoria mora no bloco de texto para nao passar por baixo do selo */
.cs-passo-l>div{padding-bottom:22px;border-bottom:1px solid var(--borda)}
.cs-passo-l:last-child>div{padding-bottom:0;border-bottom:0}
/* O fio corre pelo centro do selo. No primeiro item comeca no centro do
   proprio selo, no ultimo para nele: sem isso sobrava um traco solto em cima
   do 01 e embaixo do 06. */
.cs-passo-l::before{
  content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;
  background:var(--borda-forte);
}
.cs-passo-l:first-child::before{top:19px}
.cs-passo-l:last-child::before{bottom:auto;height:41px}
.cs-selo-l{
  position:relative;z-index:1;
  display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--superficie-2);border:1px solid rgba(255,212,0,.38);
  color:var(--amarelo);font-size:13.5px;font-weight:800;line-height:1;
}
/* a ultima etapa e a entrega: selo cheio, para fechar a sequencia */
.cs-passo-l:last-child .cs-selo-l{background:var(--amarelo);border-color:var(--amarelo);
  color:var(--preto)}
.cs-passo-l h3{font-size:18.5px;line-height:1.22;padding-top:7px}
.cs-passo-l p{margin-top:10px;font-size:15px;line-height:1.62;color:var(--texto-suave)}
.cs-etiqueta{
  display:inline-block;margin-left:10px;vertical-align:3px;
  padding:4px 9px;border-radius:5px;background:var(--amarelo);color:var(--preto);
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}

/* ---- 10 · nota sobre posicionamento ---- */
.cs-nota{
  margin-top:clamp(20px,2.2vw,28px);padding:18px 20px;
  border-radius:var(--r-card);border:1px solid var(--borda);
  border-left:3px solid var(--amarelo);
  background:rgba(255,255,255,.015);
  font-size:15px;line-height:1.66;color:var(--texto-suave);
}
.cs-nota b{color:var(--texto)}
.cs-mono{color:var(--texto);font-variant-numeric:tabular-nums}

/* ---- 11 · projetos ---- */
.cs-ver-mais{margin-top:clamp(22px,2.4vw,30px)}

/* ---- 12 · FAQ ----
   <details> nativo: abre sem JavaScript e o estado ja e anunciado pelo leitor
   de tela. O triangulo padrao sai e entra um sinal desenhado em CSS, que vai
   de + para - conforme o [open]. */
.cs-faq{border-top:1px solid var(--borda)}
.cs-q{border-bottom:1px solid var(--borda)}
.cs-q summary{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:19px 52px 19px 0;
  font-size:17px;font-weight:700;letter-spacing:-0.02em;line-height:1.35;
  transition:color var(--rapido) ease;
}
.cs-q summary::-webkit-details-marker{display:none}
.cs-q summary:hover{color:var(--amarelo)}
.cs-q summary::before,
.cs-q summary::after{
  content:"";position:absolute;top:50%;background:var(--amarelo);
  transition:transform var(--base) var(--ease),opacity var(--rapido) ease;
}
.cs-q summary::before{right:5px;width:14px;height:2px;margin-top:-1px}
.cs-q summary::after{right:11px;width:2px;height:14px;margin-top:-7px}
.cs-q[open] summary{color:var(--amarelo)}
.cs-q[open] summary::after{transform:rotate(90deg);opacity:0}
/* A resposta ocupa a linha inteira. O recuo a direita e o mesmo do summary,
   para o texto nao passar por baixo do sinal de + e -. */
.cs-q p{padding:0 52px 22px 0;
  font-size:15.5px;line-height:1.68;color:var(--texto-suave)}
@media (prefers-reduced-motion:reduce){
  .cs-q summary::before,.cs-q summary::after{transition:none}
}

/* O CTA final e o mesmo componente da home, que segue a escala do mockup.
   Nesta pagina ele sobe um degrau junto com o resto, sem afetar as outras. */
.cs-final h2{font-size:clamp(24px,2.15vw,29px)}
.cs-final p{font-size:13.5px;line-height:1.6}
.cs-final .btn{padding:14px 24px;font-size:14.5px}

/* ---- responsivo ----
   Em 960 a hero empilha e as grades de 3 caem para 2; em 720 tudo vira
   coluna unica. O quadro da hero pede uns 320px para as quatro linhas nao
   virarem tres linhas cada, e e por isso que ele desce antes. */
@media (max-width:960px){
  .cs-metodo{grid-template-columns:minmax(0,1fr);gap:34px}
  .cs-hero-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .cs-hero h1{max-width:18ch}
  .cs-hero-txt{max-width:58ch}
  .cs-quadro{max-width:560px}
  .cs-grade-3,
  .cs-canais{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cs-grade-2,
  .cs-grade-3,
  .cs-canais{grid-template-columns:minmax(0,1fr)}
  /* no celular o selo sobe para cima do texto: 38px de coluna mais o vao
     deixavam o titulo com uns 20 caracteres por linha */
  .cs-passo-l{grid-template-columns:minmax(0,1fr);gap:12px}
  .cs-passo-l::before{display:none}
  .cs-passo-l h3{padding-top:0}
  .cs-hero-ctas .btn,
  .cs-ver-mais .btn{width:100%}
  .cs-q summary{padding-right:42px;font-size:16.5px}
  .cs-q p{padding-right:0}
}

/* ==========================================================================
   ASSISTENTE DE IA · BOTÃO FLUTUANTE E PAINEL DE CONVERSA
   Mesma funcionalidade do assistente que já roda no site atual: mesmo
   endpoint, mesmo histórico de 20 mensagens, mesmo encerramento por assunto
   fora de escopo. O que muda aqui é só a pele, que passa a usar os tokens
   desta paleta: o botão fica no amarelo da marca, e não no dourado antigo.

   z-index abaixo do cabeçalho (60) de propósito: o menu do celular abre a
   partir do topo e precisa vencer o painel, não o contrário.

   Tudo atrás da classe .js. Sem script o assistente não aparece, em vez de
   aparecer morto: o mesmo critério já usado na revelação em scroll.
   ========================================================================== */
.chat-fab{
  display:none;position:fixed;right:clamp(16px,4vw,32px);bottom:clamp(16px,4vw,32px);
  z-index:40;width:60px;height:60px;border-radius:var(--r-pill);
  background:var(--amarelo);color:var(--preto);border:0;
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.9),0 0 32px -10px rgba(255,212,0,.45);
  transition:background var(--rapido) ease,transform var(--rapido) var(--ease);
}
.js .chat-fab{display:flex}
.chat-fab:hover{background:var(--amarelo-claro);transform:translateY(-2px)}
.chat-fab:active{transform:scale(.94)}
.chat-fab svg{width:26px;height:26px}
@media (prefers-reduced-motion:reduce){.chat-fab:hover,.chat-fab:active{transform:none}}

/* a etiqueta só aparece em ponteiro com hover real, por isso a classe
   .hover-fab, posta pelo script depois de consultar (hover:hover). No toque
   ela nunca apareceria e ficaria ocupando espaço. */
.chat-dica{
  display:none;position:fixed;right:clamp(16px,4vw,32px);
  bottom:calc(60px + clamp(16px,4vw,32px) + 12px);z-index:40;max-width:210px;
  background:var(--superficie);border:1px solid var(--borda-forte);color:var(--texto);
  font-size:14px;line-height:1.4;padding:10px 14px;border-radius:10px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--base) ease,transform var(--base) var(--ease);
}
.js .chat-dica{display:block}
.js.hover-fab .chat-fab:hover + .chat-dica,
.js.hover-fab .chat-fab:focus-visible + .chat-dica{opacity:1;transform:none}
.chat-fab[aria-expanded="true"] + .chat-dica{opacity:0!important}

/* o painel abre por clip-path, e não por height: a altura depende do conteúdo,
   que só existe depois da primeira resposta, e transição de altura automática
   não anima. */
.chat-painel{
  display:none;position:fixed;right:clamp(16px,4vw,32px);
  bottom:calc(60px + clamp(16px,4vw,32px) + 12px);z-index:41;
  width:380px;max-width:calc(100vw - 32px);max-height:min(600px,calc(100vh - 120px));
  background:var(--superficie);border:1px solid var(--borda-forte);border-radius:var(--r-card);
  box-shadow:0 30px 70px -24px rgba(0,0,0,1);
  flex-direction:column;overflow:hidden;
  clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
  transition:clip-path .38s var(--ease),opacity .28s ease;
}
.js .chat-painel{display:flex}
.js .chat-painel[data-aberto="true"]{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.chat-painel{transition:opacity .28s ease}}

.chat-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 14px;border-bottom:1px solid var(--borda);flex:0 0 auto;
}
.chat-cab h2{font-size:17px;font-weight:700;letter-spacing:-0.02em;color:var(--texto);margin:0 0 5px}
.chat-aviso{font-size:12px;line-height:1.45;letter-spacing:.01em;color:var(--texto-fraco);margin:0}
.chat-fechar{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  color:var(--texto-suave);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--rapido) ease,background var(--rapido) ease;
}
.chat-fechar:hover{color:var(--texto);background:var(--superficie-2)}

.chat-msgs{
  flex:1 1 auto;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;font-size:15px;
}
.chat-msg{max-width:82%;padding:10px 14px;border-radius:12px;line-height:1.5}
.chat-msg-bot{align-self:flex-start;background:var(--superficie-2);border:1px solid var(--borda);
  color:var(--texto);border-bottom-left-radius:4px}
.chat-msg-user{align-self:flex-end;background:var(--amarelo);color:var(--preto);font-weight:500;
  border-bottom-right-radius:4px}

.chat-form{display:flex;gap:8px;padding:0 16px 12px;flex:0 0 auto}
.chat-form input{
  flex:1 1 auto;min-width:0;background:var(--preto);border:1px solid var(--borda-forte);
  border-radius:12px;padding:12px 14px;color:var(--texto);
  font-family:var(--fonte);font-size:14.5px;outline:none;
  transition:border-color var(--rapido) ease;
}
.chat-form input::placeholder{color:var(--texto-fraco)}
.chat-form input:focus{border-color:var(--amarelo)}
.chat-form input:disabled{opacity:.5}
.chat-enviar{
  flex:0 0 auto;width:44px;height:44px;border-radius:var(--r-pill);
  background:var(--amarelo);color:var(--preto);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--rapido) ease;
}
.chat-enviar:hover{background:var(--amarelo-claro)}
.chat-enviar:disabled{opacity:.45;cursor:default}
.chat-enviar svg{width:18px;height:18px}

.chat-zap{
  display:block;margin:0 16px 16px;padding:12px 14px;flex:0 0 auto;
  text-align:center;font-size:14px;font-weight:700;color:var(--amarelo);
  border:1px solid var(--borda-forte);border-radius:12px;
  transition:border-color var(--rapido) ease,background var(--rapido) ease;
}
.chat-zap:hover{border-color:var(--amarelo);background:rgba(255,212,0,.07)}

/* no celular o painel ocupa a largura toda menos as margens, e o teto de 100px
   garante que ele nunca encoste no cabeçalho fixo de 84px */
@media (max-width:560px){
  .chat-fab,.chat-dica{right:20px}
  .chat-fab{bottom:20px}
  .chat-painel{right:20px;left:20px;bottom:20px;width:auto;max-width:none;
    max-height:min(520px,calc(100vh - 100px))}
}

/* ==========================================================================
   AVISO DE COOKIES (LGPD)
   O Google Analytics só carrega depois do "Aceitar". Enquanto o visitante não
   escolhe, nenhum cookie de medição existe, e recusar apaga os que existirem.

   Canto inferior esquerdo, do lado oposto ao assistente. z-index 50: acima do
   painel do chat (41) porque é um aviso que pede resposta, e abaixo do
   cabeçalho (60) porque a navegação nunca pode ficar coberta.

   Sem JavaScript o aviso continua com o atributo hidden e o Analytics nunca
   carrega: a medição depende do script, o conteúdo não.
   ========================================================================== */
.consent{
  position:fixed;left:clamp(16px,4vw,32px);bottom:clamp(16px,4vw,32px);z-index:50;
  max-width:420px;background:var(--superficie);border:1px solid var(--borda-forte);
  border-radius:var(--r-card);padding:20px 22px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,1);
}
.consent[hidden]{display:none}
.consent p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--texto-suave)}
.consent-acoes{display:flex;gap:10px;flex-wrap:wrap}
.consent-acoes button{
  font-size:13.5px;font-weight:700;line-height:1;padding:11px 20px;
  border-radius:var(--r-pill);border:1px solid transparent;
  transition:background var(--rapido) ease,border-color var(--rapido) ease,
             color var(--rapido) ease,transform var(--rapido) var(--ease);
}
.consent-sim{background:var(--amarelo);color:var(--preto)}
.consent-sim:hover{background:var(--amarelo-claro);transform:translateY(-2px)}
.consent-nao{border-color:var(--borda-forte);color:var(--texto-suave)}
.consent-nao:hover{border-color:var(--amarelo);background:rgba(255,212,0,.07);color:var(--texto)}
@media (prefers-reduced-motion:reduce){.consent-acoes button:hover{transform:none}}

/* botão para mudar de ideia depois, no rodapé. Nasce hidden e só o script o
   mostra: sem JavaScript não há o que reconfigurar. */
.rp-cookies{
  font-size:12.5px;color:var(--texto-fraco);padding:0;
  transition:color var(--rapido) ease;
}
.rp-cookies:hover{color:var(--texto-suave)}
.rp-cookies[hidden]{display:none}

@media (max-width:560px){
  /* a largura toda faria o aviso cobrir o botao do assistente, que mora neste
     mesmo canto. Sobe acima dele pela mesma conta do painel do chat. */
  .consent{left:16px;right:16px;max-width:none;padding:18px;
    bottom:calc(60px + 20px + 12px)}
  .consent-acoes button{flex:1 1 auto}
}