/* Home (/) — rascunho, 2026-10-10.
   Figma QDHkZaB7DBYamOgZkSWRmY: desktop 25:588 (1440) e celular 55:3057 (390).
   Notas: 10:430 (animações do piloto) e 25:773 (v2). Toda medida em px do Figma × var(--px). */

/* ---------- Topo (hero 25:589 / 55:3058) ---------- */
.home-topo{height:calc(900 * var(--px));overflow:hidden;background:#7fa8d0;}
.home-topo .ceu{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.home-topo .miolo{height:100%;}

.home-topo .camada{position:absolute;height:auto;}
.home-topo .n1{left:calc(30 * var(--px));top:calc(560 * var(--px));width:calc(300 * var(--px));}
.home-topo .n2{left:calc(330 * var(--px));top:calc(430 * var(--px));width:calc(300 * var(--px));}
.home-topo .n3{left:calc(1000 * var(--px));top:calc(90 * var(--px));width:calc(200 * var(--px));}
.home-topo .n4{left:calc(1150 * var(--px));top:calc(456 * var(--px));width:calc(280 * var(--px));}
.home-topo .where{left:calc(100 * var(--px));top:calc(130 * var(--px));width:calc(470 * var(--px));}
.home-topo .placa{left:calc(500 * var(--px));top:calc(232 * var(--px));width:calc(500 * var(--px));}
.home-topo .ideas{left:calc(919 * var(--px));top:calc(610 * var(--px));width:calc(461 * var(--px));}
.home-topo .n5{left:calc(1060 * var(--px));top:calc(200 * var(--px));width:calc(360 * var(--px));}
.home-topo h1{position:absolute;left:calc(96 * var(--px));top:calc(836 * var(--px));font-weight:400;color:var(--branco);white-space:nowrap;z-index:2;}

/* ---------- Confiado por (25:598 / 55:3065) ---------- */
.home-confiado .miolo{padding:calc(32 * var(--px)) calc(48 * var(--px));}
.home-confiado .faixa{display:flex;align-items:center;gap:calc(64 * var(--px));padding:calc(26 * var(--px)) 0;height:calc(100 * var(--px));}
.home-confiado .rotulo{font-weight:400;white-space:nowrap;flex:none;}
.home-confiado .loop{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;}
/* 13/10: sem caixa; o logo surge aos poucos ao entrar pela ponta da faixa e se desfaz ao sair pela outra */
.home-confiado .loop{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);}
.home-confiado .trilho{align-items:center;--tempo:60s;translate:calc(var(--v,.5) * -220 * var(--px)) 0;}
.home-confiado .trilho>*{flex:none;margin-right:calc(64 * var(--px));}
.logo-cliente{display:block;width:auto;height:calc(var(--h,32) * var(--px));}
.logo-cliente[data-slug=spotify]{--h:35;--hc:26} .logo-cliente[data-slug=globo]{--h:48;--hc:36}
.logo-cliente[data-slug=viden]{--h:31;--hc:23} .logo-cliente[data-slug=kobana]{--h:19;--hc:14}
.logo-cliente[data-slug=nuuvem]{--h:46;--hc:34} .logo-cliente[data-slug=noah]{--h:40;--hc:30}
.logo-cliente[data-slug=skander-capital]{--h:26;--hc:19} .logo-cliente[data-slug=sand]{--h:31;--hc:23}
.logo-cliente[data-slug=ubquo]{--h:33;--hc:25} .logo-cliente[data-slug=meta-kosmos]{--h:34;--hc:25}
.logo-cliente[data-slug=movimento-cidade]{--h:31;--hc:23} .logo-cliente[data-slug=moodclub]{--h:32;--hc:23}
.logo-cliente[data-slug=blume]{--h:33;--hc:25} .logo-cliente[data-slug=v]{--h:48;--hc:36}
.logo-cliente[data-slug=donavinci]{--h:17;--hc:12} .logo-cliente[data-slug=galli]{--h:25;--hc:18}
.logo-cliente[data-slug=segura]{--h:31;--hc:22.32} .logo-cliente[data-slug=bnoted]{--h:30;--hc:22}
.logo-cliente[data-slug=agua-conteudo]{--h:48;--hc:35} .logo-cliente[data-slug=ziba-seguros]{--h:46;--hc:33}
.logo-cliente[data-slug=cliente-17]{--h:48;--hc:36}

/* ---------- Desde 2020 (25:618 / 55:3086) ---------- */
.home-desde .miolo{display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--px));
  padding:calc(200 * var(--px)) 0 calc(300 * var(--px));}
.home-desde h2{text-align:center;}
/* cena: cada adesivo anda numa profundidade (--prof, px do Figma) e gira um pouco (--giro, graus)
   enquanto a seção atravessa a tela; o chapéu e as linhas do título sobem um depois do outro */
.home-desde .adesivo{translate:0 calc((.5 - var(--v,.5)) * var(--prof,0) * var(--px));rotate:calc((.5 - var(--v,.5)) * var(--giro,0) * 1deg);}
.home-desde .a-tire{--prof:180;--giro:10;} .home-desde .a-fragile{--prof:300;--giro:-8;}
.home-desde .a-famous{--prof:240;--giro:8;} .home-desde .a-crazy{--prof:360;--giro:-10;}
.home-desde .linha{display:inline-block;--k:clamp(0, (var(--e,1) - var(--atraso,0)) / .38, 1);
  translate:0 calc((1 - var(--k)) * 70 * var(--px));opacity:var(--k);}
.home-desde .l2{--atraso:.12;} .home-desde .l3{--atraso:.24;}
.home-desde .desde-chapeu{--k:clamp(0, (var(--e,1) + .1) / .38, 1);translate:0 calc((1 - var(--k)) * 30 * var(--px));opacity:var(--k);}
.home-desde .a-tire{--w:190;--r:-8deg;left:calc(135.85 * var(--px));top:calc(35.61 * var(--px));}
.home-desde .a-fragile{--w:300;--r:6deg;left:calc(1053.01 * var(--px));top:calc(135.36 * var(--px));}
.home-desde .a-famous{--w:330;--r:-10deg;left:calc(133.04 * var(--px));top:calc(557.99 * var(--px));}
.home-desde .a-crazy{--w:280;--r:-6deg;left:calc(1035.61 * var(--px));top:calc(585.03 * var(--px));}

/* ---------- Fazemos entregas de (25:789 / 55:3251) ----------
   Fundo laranja e sem setas (11/10). Cena presa: --p (0→1) acende as etapas na ordem; o fio de cima
   de cada etapa enche como barra de progresso. Sem JS, --p vale 1 e tudo aparece aceso. */
.home-entregas .miolo{display:flex;flex-direction:column;gap:calc(40 * var(--px));padding:calc(120 * var(--px)) calc(96 * var(--px));}
.home-entregas .miolo>h2{--k:clamp(0, var(--p,1) / .12, 1);opacity:calc(.35 + .65 * var(--k));}
.home-entregas .etapas{display:flex;gap:calc(40 * var(--px));align-items:flex-start;}
.home-entregas .etapa{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(12 * var(--px));position:relative;
  border-top:calc(2 * var(--px)) solid rgba(255,255,255,.3);padding-top:calc(20 * var(--px));
  --k:clamp(0, (var(--p,1) - var(--inicio,0)) / .2, 1);}
/* --inicio de cada etapa vem do build (style), espalhado entre .1 e .58 conforme o número de etapas do CMS */
.home-entregas .etapa::before{content:"";position:absolute;left:0;right:0;top:calc(-2 * var(--px));height:calc(2 * var(--px));
  background:var(--branco);transform:scaleX(var(--k));transform-origin:left;}
.home-entregas .etapa>*{opacity:calc(.28 + .72 * var(--k));translate:0 calc((1 - var(--k)) * 18 * var(--px));}
.home-entregas .num{color:var(--escuro);}
.home-entregas h3{color:var(--branco);font-size:calc(60 * var(--px));font-weight:400;}
.home-entregas .assina{--k:clamp(0, (var(--p,1) - .82) / .14, 1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 20 * var(--px));}
.js .home-entregas-trilho>.percurso{display:block;height:110svh;}
.js .home-entregas-trilho .home-entregas{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;}

/* ---------- For the brave (25:634 / 55:3102) ---------- */
.home-brave{padding:calc(16 * var(--px)) 0;}
.home-brave .trilho{align-items:center;--tempo:45s;translate:calc((1 - var(--v,.5)) * -260 * var(--px)) 0;}
.home-brave .trilho>*{flex:none;margin-right:calc(24 * var(--px));}
.home-brave .trilho span{line-height:1.25;white-space:nowrap;}
.home-brave .trilho img{width:calc(20 * var(--px));height:auto;}

/* ---------- Áreas (25:655 / 55:3109) ---------- */
.home-areas .miolo{padding:calc(100 * var(--px)) calc(96 * var(--px)) calc(140 * var(--px));}
.home-areas .area{display:flex;align-items:center;justify-content:space-between;padding:calc(44 * var(--px)) 0;position:relative;
  --k:clamp(0, (var(--e,1) - .05) / .5, 1);--k2:clamp(0, (var(--e,1) - .25) / .5, 1);}
.home-areas .area::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--branco);transform:scaleX(var(--k));transform-origin:left;}
.home-areas .area h2{translate:calc((1 - var(--k)) * -90 * var(--px)) 0;opacity:calc(.2 + .8 * var(--k));}
.home-areas .area .texto{translate:0 calc((1 - var(--k2)) * 30 * var(--px));opacity:var(--k2);}
.home-areas .area h2{white-space:nowrap;}
.home-areas .texto{display:flex;flex-direction:column;align-items:flex-start;gap:calc(16 * var(--px));width:calc(460 * var(--px));}
.home-areas .texto p{font-weight:700;}

/* ---------- Cabeçalho de faixa com link (cases e blog) ---------- */
.home-cabeca{display:flex;align-items:flex-end;justify-content:space-between;}
.home-cabeca .coluna{display:flex;flex-direction:column;gap:calc(8 * var(--px));}
.home-cabeca .chapeu{color:var(--laranja);white-space:nowrap;}
.home-cabeca h2{white-space:nowrap;}
.home-cabeca .link{white-space:nowrap;}

/* ---------- Cases em destaque (25:723 / 55:3187) ---------- */
.home-cases .miolo,.home-blog .miolo{display:flex;flex-direction:column;gap:calc(48 * var(--px));padding:calc(120 * var(--px)) calc(96 * var(--px));}
.home-cards{display:flex;gap:calc(24 * var(--px));align-items:flex-start;}
.home-cases .card-case{width:calc(400 * var(--px));display:flex;flex-direction:column;align-items:flex-start;gap:calc(14 * var(--px));}
.home-cases .capa{width:100%;height:calc(300 * var(--px));background:#e2dfdc;}
.home-cases .capa img,.home-blog .capa img{width:100%;height:100%;object-fit:cover;}
.home-cards .nome{font-weight:400;font-size:calc(22 * var(--px));line-height:1.18;letter-spacing:-.03em;}
.home-cases .pilula{background:var(--laranja);color:var(--branco);}
/* Rótulo curto do serviço como no Figma (SETUP, BRANDING, GROWTH). O esquema de cases não tem
   campo de rótulo; para outros serviços aparece o próprio valor do campo. */
.home-cases .pilula[data-servico=setup-estrategico] .valor,
.home-cases .pilula[data-servico=branding] .valor,
.home-cases .pilula[data-servico=plano-de-growth] .valor{display:none;}
.home-cases .pilula[data-servico=setup-estrategico]::before{content:"SETUP";}
.home-cases .pilula[data-servico=branding]::before{content:"BRANDING";}
.home-cases .pilula[data-servico=plano-de-growth]::before{content:"GROWTH";}

/* ---------- Diagnóstico (35:286 / 55:3215) ---------- */
.home-diag .miolo{padding:calc(96 * var(--px));}
.home-diag .coluna{display:flex;flex-direction:column;align-items:flex-start;gap:calc(10 * var(--px));}
.home-diag .coluna>*{--k:clamp(0, (var(--e,1) - var(--atraso,0)) / .45, 1);translate:0 calc((1 - var(--k)) * 40 * var(--px));opacity:var(--k);}
.home-diag .coluna>:nth-child(2){--atraso:.08;} .home-diag .coluna>:nth-child(3){--atraso:.16;} .home-diag .coluna>:nth-child(4){--atraso:.24;}
.home-diag .chapeu{color:var(--laranja);}
.home-diag .botao{font-weight:400;}
.costura.c-crazy{--x:87.47%;--w:191;--r:-6deg;}

/* ---------- Do blog (25:751 / 55:3223) ---------- */
.home-blog .card-post{width:calc(400 * var(--px));display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--px));}
.home-blog .capa{width:100%;height:calc(260 * var(--px));overflow:hidden;}
.home-blog .categoria{color:var(--laranja);text-transform:uppercase;}
.home-blog .data{text-transform:uppercase;}

/* ================= Celular (quadro 390) ================= */
@media (max-width:767px){
  .home-topo{height:calc(824 * var(--px));}
  .home-topo .n2,.home-topo .n3{display:none;}
  .home-topo .n1{left:calc(-30 * var(--px));top:calc(520 * var(--px));width:calc(170 * var(--px));}
  .home-topo .n4{left:calc(250 * var(--px));top:calc(690 * var(--px));width:calc(160 * var(--px));}
  .home-topo .n5{left:calc(230 * var(--px));top:calc(120 * var(--px));width:calc(180 * var(--px));z-index:0;}
  .home-topo .where{left:calc(20 * var(--px));top:calc(96 * var(--px));width:calc(290 * var(--px));z-index:1;}
  .home-topo .placa{left:calc(60 * var(--px));top:calc(250 * var(--px));width:calc(300 * var(--px));z-index:1;}
  .home-topo .ideas{left:calc(80 * var(--px));top:calc(560 * var(--px));width:calc(300 * var(--px));z-index:1;}
  .home-topo h1{left:calc(24 * var(--px));top:calc(772 * var(--px));width:calc(300 * var(--px));white-space:normal;font-size:calc(12 * var(--px));font-weight:700;}

  .home-confiado .miolo{padding:calc(20 * var(--px)) calc(16 * var(--px));}
  .home-confiado .faixa{flex-direction:column;align-items:flex-start;gap:calc(16 * var(--px));padding:calc(12 * var(--px)) 0;height:auto;}
  .home-confiado .loop{-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);}
  .home-confiado .rotulo{font-size:calc(12 * var(--px));font-weight:700;}
  .home-confiado .loop{align-self:stretch;height:calc(36 * var(--px));}
  .home-confiado .trilho>*{margin-right:calc(36 * var(--px));}
  .logo-cliente{height:calc(var(--hc,24) * var(--px));}

  .home-desde .miolo{gap:calc(28 * var(--px));padding:calc(190 * var(--px)) calc(20 * var(--px)) calc(200 * var(--px));}
  .home-desde .acento{font-size:calc(26 * var(--px));}
  .home-desde h2{font-size:calc(48 * var(--px));line-height:1;width:calc(350 * var(--px));}
  .home-desde h2 br{display:none;}
  .home-desde .a-tire{--prof:70;--w:100;left:calc(32.35 * var(--px));top:calc(28.42 * var(--px));}
  .home-desde .a-fragile{--prof:110;--w:170;left:calc(196.04 * var(--px));top:calc(78.7 * var(--px));}
  .home-desde .a-famous{--prof:90;--w:170;left:calc(26.7 * var(--px));top:calc(458.54 * var(--px));}
  .home-desde .a-crazy{--prof:130;--w:160;left:calc(208.22 * var(--px));top:calc(486.45 * var(--px));}

  .home-entregas .miolo{gap:calc(28 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .home-entregas .miolo>.acento{font-size:calc(26 * var(--px));}
  .home-entregas .etapas{flex-direction:column;gap:calc(28 * var(--px));}
  .js .home-entregas-trilho>.percurso{height:90svh;}
  .home-entregas .etapa{flex:none;width:100%;}
  .home-entregas h3{font-size:calc(48 * var(--px));}
  .home-entregas .assina{font-size:calc(32 * var(--px));}

  .home-brave{padding:calc(12 * var(--px)) 0;}
  .home-brave .trilho>*{margin-right:calc(16 * var(--px));}
  .home-brave .trilho span{font-size:calc(12 * var(--px));font-weight:700;}
  .home-brave .trilho img{width:calc(16 * var(--px));}

  .home-areas .miolo{padding:calc(48 * var(--px)) calc(20 * var(--px)) calc(80 * var(--px));}
  .home-areas .area{flex-direction:column;align-items:flex-start;gap:calc(12 * var(--px));padding:calc(28 * var(--px)) 0;}
  .home-areas .area h2{font-size:calc(48 * var(--px));line-height:1;}
  .home-areas .texto{width:100%;gap:calc(12 * var(--px));}
  .home-areas .texto p{font-size:calc(16 * var(--px));}

  .home-cases .miolo,.home-blog .miolo{gap:calc(28 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .home-cabeca .chapeu{font-size:calc(26 * var(--px));}
  .home-cabeca h2{font-size:calc(64 * var(--px));}
  .home-cases .home-cabeca{flex-direction:column;align-items:flex-start;gap:calc(16 * var(--px));}
  .home-blog .home-cabeca{gap:calc(16 * var(--px));}
  .home-blog .home-cabeca .coluna{flex:1 0 0;min-width:0;}
  .home-blog .home-cabeca h2{white-space:normal;}
  .home-cards{flex-direction:column;gap:calc(16 * var(--px));}
  .home-cases .card-case,.home-blog .card-post{width:100%;}

  .home-diag .miolo{padding:calc(56 * var(--px)) calc(24 * var(--px));}
  .home-diag .coluna{gap:calc(10 * var(--px));}
  .home-diag .chapeu{font-size:calc(26 * var(--px));}
  .home-diag h2{font-size:calc(40 * var(--px));line-height:1;}
  .home-diag .coluna .b18{font-size:calc(16 * var(--px));}
  .home-diag .botao{margin-top:calc(18 * var(--px));padding:calc(18 * var(--px)) calc(20 * var(--px));}
  .costura.c-crazy{--x:84.44%;--w:83;}
}

/* Movimento reduzido: sem trilho */
@media (prefers-reduced-motion: reduce){
  .js .home-entregas-trilho>.percurso{display:none;}
  .js .home-entregas-trilho .home-entregas{position:relative;min-height:0;display:block;}
}