:root{--cream:#f3f0e8;--black:#0b0b0d;--purple:#4b16df;--yellow:#dfff00;--cyan:#10cbd0;--pink:#ee3f9d;--orange:#ff8b18;--font-head:'Archivo Black',Arial,sans-serif;--font-body:'Oswald','Arial Narrow',Arial,sans-serif;--font-hand:'Caveat',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--black);font-family:var(--font-body);font-size:16px}.wrap{width:min(1180px,calc(100% - 72px));margin:auto}.textured,.textured-dark,.textured-purple{position:relative;isolation:isolate}.textured:after,.textured-dark:after,.textured-purple:after{content:"";position:absolute;inset:0;background:url('assets/texture.webp') repeat;opacity:.18;pointer-events:none;z-index:-1}.textured-dark:after,.textured-purple:after{opacity:.13}.site-header{height:82px;background:transparent;position:absolute;top:0;left:0;right:0;z-index:10}.header-inner{height:100%;display:grid;grid-template-columns:130px 1fr 250px;align-items:center;gap:32px}.brand{display:flex;align-items:center;width:115px;height:41px;color:var(--purple);text-decoration:none}.brand img{display:block;width:115px;height:41px;object-fit:contain}.site-header nav{display:flex;justify-content:center;gap:38px}.site-header nav a{font-size:13px;color:#17171a;text-decoration:none;position:relative}.site-header nav a.active:after{content:"";position:absolute;height:3px;background:var(--yellow);left:0;right:0;bottom:-12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:15px 24px;border-radius:30px;text-decoration:none;font:600 13px var(--font-body);letter-spacing:.2px;white-space:nowrap}.button span{font-size:20px;line-height:0}.button.yellow{background:var(--yellow);color:#050505}.button.purple{background:var(--purple);color:#fff}.hero{min-height:570px;overflow:hidden;background:var(--cream)}.hero-grid{min-height:570px;display:grid;grid-template-columns:39% 61%;position:relative}.hero-copy{padding:38px 0;position:relative;z-index:2}.hero-copy .kicker,.hero-copy h1{font:400 clamp(2.9rem,4.6vw,4.6rem)/.87 var(--font-head);margin:0;color:#050505;letter-spacing:-1px}.hero-copy h1{margin-bottom:17px}.hero-copy h1 span{background:var(--yellow);padding:0 9px 1px}.lead,.bold-line{font-size:18px;line-height:1.2;margin:0}.lead{margin-bottom:12px}.bold-line{font-weight:700;margin-bottom:21px}.side-note{position:absolute;left:-43px;bottom:66px;font-size:11px;line-height:1.35;letter-spacing:1.2px;color:#54545b}.hero-art{position:relative;min-height:570px}.hero-art img{position:absolute;top:0;right:0;display:block;width:116%;max-width:none;height:auto;transform:translateX(2%)}.agency{padding:42px 0 48px;background:var(--cream)}.agency-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr .62fr;gap:28px;align-items:center}.agency small,.portfolio small,.differential small,.about small,.contact small{font-size:12px;letter-spacing:1.3px}.agency-title h2,.portfolio-intro h2,.differential h2{font:400 clamp(2rem,3.2vw,3.15rem)/.9 var(--font-head);margin:8px 0 0;letter-spacing:-.3px}.agency-title h2 span,.portfolio-intro h2 span,.differential h2 span,.about h2 span,.contact h2 span{color:var(--purple)}.agency-text{font-size:17px;line-height:1.35;border-left:1px solid #777;padding-left:25px}.agency-text.bordered{border-left:2px solid var(--yellow)}.postit{transform:rotate(-8deg);justify-self:end}.postit img{width:190px;display:block}.services{display:grid;grid-template-columns:repeat(6,1fr);min-height:350px;overflow:hidden}.service{min-width:0;min-height:350px;position:relative;padding:18px 16px 0;overflow:hidden}.service-yellow{background:#ffe000}.service-cyan{background:#10cbd0}.service-pink{background:#ef3e9d}.service-orange{background:#ff8c19}.service-purple{background:#5518df;color:#fff}.service.last{background:#0ecad0;color:#000}.service-copy{position:relative;z-index:2}.service small{font-size:12px;letter-spacing:1.2px}.service h3{font:400 25px/.92 var(--font-head);margin:18px 0 9px}.service p{font-size:14px;line-height:1.15;margin:0}.service img{position:absolute;left:0;bottom:0;width:100%;height:72%;object-fit:contain;object-position:center bottom;mix-blend-mode:normal}.portfolio{padding:48px 0 44px;background:var(--cream)}.portfolio-grid{display:grid;grid-template-columns:1.15fr repeat(4,1fr) .7fr;gap:17px;align-items:start}.portfolio-intro h2{margin-bottom:12px}.portfolio-intro p{font-size:15px;line-height:1.2;margin:0 0 15px}.outline-button{display:inline-flex;gap:15px;align-items:center;border:1px solid var(--purple);color:var(--purple);border-radius:20px;padding:8px 13px;text-decoration:none;font-size:11px}.project{position:relative}.project img{width:100%;aspect-ratio:1.405;object-fit:cover;display:block;margin-bottom:7px}.project small{font-size:9px;letter-spacing:1.1px;color:#6c6c70}.project b{font-size:11px;display:block;margin-top:2px}.project p{font-size:12px;line-height:1.15;margin:3px 22px 0 0}.arrow{position:absolute;right:0;bottom:0;width:29px;height:29px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:19px}.portfolio-note{font:600 26px/1 var(--font-hand);transform:rotate(-5deg);padding-top:15px}.differential{background:#111;color:#fff;overflow:hidden}.diff-head small{color:var(--yellow)}.diff-grid{min-height:330px;display:grid;grid-template-columns:1.1fr 1fr 1fr 1.05fr;align-items:stretch;position:relative}.diff-head{padding:42px 25px 34px 0;display:flex;flex-direction:column;justify-content:center}.differential h2{font-size:52px}.differential h2 span{color:var(--yellow)}.diff-text{font-size:16px;line-height:1.28;border-left:2px solid var(--yellow);padding:45px 22px;display:flex;align-items:center}.diff-text.strong{border-left-color:var(--yellow);display:block;padding-top:62px}.diff-text strong{color:var(--yellow)}.david{height:330px;align-self:stretch;overflow:hidden;display:flex;align-items:flex-end}.david img{width:100%;height:100%;object-fit:cover;object-position:center bottom}.about{padding:44px 0;background:var(--cream)}.about-grid{display:grid;grid-template-columns:1fr 1.35fr 1.35fr 1fr;gap:26px;align-items:start}.about h2{font:400 42px/.9 var(--font-head);margin:10px 0}.about p{font-size:14px;line-height:1.25;border-left:1px solid #777;padding-left:22px;margin:0}.about h3{font:600 24px/1.05 var(--font-body);color:var(--purple);margin:0;border-left:1px solid #777;padding-left:22px}.contact{background:var(--purple);color:#fff;overflow:hidden}.contact-grid{min-height:400px;display:grid;grid-template-columns:20% 42% 38%;position:relative;align-items:stretch}.contact-left{display:flex;align-items:flex-end;overflow:hidden}.contact-left img{width:100%;height:100%;object-fit:cover;object-position:center bottom}.contact-copy{padding:50px 30px 44px 0;position:relative;z-index:2}.contact h2{font:400 clamp(2.5rem,4vw,4.3rem)/.88 var(--font-head);margin:9px 0 22px;letter-spacing:-.5px}.contact h2 span{color:var(--yellow)}.contact h3{font-size:22px;margin:0 0 7px}.contact p{font-size:14px;line-height:1.2;margin:0 0 9px}.contact-copy>b{display:block;margin-bottom:20px}.contact .button{background:var(--yellow);color:#080808}.contact-right{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end}.contact-right img{width:115%;max-width:none;height:auto;display:block;align-self:flex-end}.site-footer{padding:30px 0;background:var(--cream)}.footer-grid{display:grid;grid-template-columns:1.2fr 1.7fr .7fr 1fr .4fr;gap:25px;align-items:center;font-size:12px;line-height:1.4}.footer-brand{display:flex;align-items:center}.footer-brand img{display:block;width:115px;height:41px;object-fit:contain}.social{display:flex;align-items:center;gap:16px}.social img{width:18px;height:18px;display:block;color:var(--black)}.footer-side{border-left:1px solid #ff4b9d;padding-left:15px;letter-spacing:1.8px;font-size:9px;line-height:1.5}
@media(max-width:1000px){.wrap{width:min(100% - 42px,760px)}.header-inner{grid-template-columns:1fr auto;gap:14px}.site-header nav{display:none}.hero-grid{grid-template-columns:1fr;min-height:0}.hero{min-height:0}.hero-copy{padding:32px 0 28px}.hero-copy .kicker,.hero-copy h1{font-size:clamp(3rem,12vw,5rem)}.hero-art{min-height:400px;display:flex;justify-content:center;align-items:flex-end}.hero-art img{position:static;width:105%;transform:none}.side-note{display:none}.agency-grid{grid-template-columns:1fr 1fr;gap:28px}.agency-title{grid-column:1/-1}.postit{justify-self:end}.services{grid-template-columns:repeat(3,1fr)}.portfolio-grid{grid-template-columns:1fr 1fr}.portfolio-intro{grid-column:1/-1}.portfolio-note{display:none}.diff-grid{grid-template-columns:1fr 1fr}.diff-head{grid-column:1/-1}.david{height:280px}.about-grid{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:20% 1fr}.contact-right{position:absolute;right:0;top:0;bottom:0;width:42%;opacity:.9}.contact-copy{padding-right:12%}.footer-grid{grid-template-columns:1fr 1fr;gap:18px}.footer-side{display:none}}
@media(max-width:620px){.wrap{width:calc(100% - 30px)}.site-header{height:auto;padding:13px 0}.brand{width:100px;height:auto}.brand img{width:100px;height:auto}.site-header .button{padding:10px 13px;font-size:10px;gap:8px}.site-header .button span{font-size:16px}.hero-copy{padding:28px 0 24px}.hero-copy .kicker{font-size:14vw}.hero-copy h1{font-size:15vw}.lead,.bold-line{font-size:16px}.desktop{display:none}.hero-art{min-height:270px}.hero-art img{position:static;width:125%;max-width:none;transform:translateX(4%)}.agency{padding:34px 0 38px}.agency-grid{grid-template-columns:1fr;gap:22px}.agency-title{grid-column:auto}.agency-text{border-left:0;padding-left:0}.agency-text.bordered{border-left:0;border-top:2px solid var(--yellow);padding:18px 0 0}.postit{justify-self:center}.postit img{width:170px}.services{grid-template-columns:1fr}.service{min-height:390px;padding:18px 18px 0}.service img{height:78%;width:100%;object-fit:contain;object-position:center bottom}.portfolio{padding:38px 0}.portfolio-grid{grid-template-columns:1fr;gap:28px}.project img{aspect-ratio:1.405}.differential{padding:0}.diff-grid{grid-template-columns:1fr;min-height:0}.diff-head{grid-column:auto;padding:38px 0 22px}.differential h2{font-size:44px}.diff-text{padding:26px 0;border-left:0;border-top:2px solid var(--yellow)}.diff-text.strong{padding:26px 0;border-left:0;border-top:2px solid var(--yellow)}.david{height:auto;margin-top:10px}.david img{width:100%;height:auto;object-fit:contain}.about{padding:36px 0}.about-grid{grid-template-columns:1fr;gap:20px}.about p,.about h3{border-left:0;padding-left:0}.contact-grid{grid-template-columns:1fr;min-height:0}.contact-left{display:none}.contact-copy{padding:38px 0 24px}.contact h2{font-size:42px}.contact-right{position:relative;width:100%;height:300px;opacity:1;display:flex}.contact-right img{width:125%;transform:translateX(-4%)}.site-footer{padding:26px 0}.footer-grid{grid-template-columns:1fr;text-align:center;gap:17px}.footer-brand{justify-self:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* V6 — tipografia cirúrgica da Hero (base V5) */
@media(min-width:1001px){
  .hero-copy .kicker{
    white-space:nowrap;
    font-family:var(--font-head);
    letter-spacing:-1.8px;
  }
  .hero-copy h1{
    font-family:var(--font-head);
    font-size:clamp(2.65rem,4.15vw,4.15rem);
    line-height:.86;
    letter-spacing:-1.8px;
  }
}
.hero-copy .lead{
  font-family:var(--font-body);
  font-weight:300;
  letter-spacing:-.15px;
}
.hero-copy .bold-line{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:-.2px;
}
.hero-copy .button{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:-.15px;
}

/* V3 — ajustes cirúrgicos da Hero */
@media(min-width:1001px){.header-inner{padding-right:28px}.site-header .button{position:relative;right:18px}}

/* V7 — ajustes finos da composição da Hero (base V6) */
@media(min-width:1001px){
  .hero-copy h1{
    margin-top:28px;
    margin-bottom:0;
  }
  .hero-copy h1 .purple-word{color:var(--purple)}
  .hero-copy h1 span{
    padding:0 9px 0;
    line-height:.82;
    display:inline-block;
  }
  .hero-copy .lead{
    margin-top:31px;
  }
  .hero-copy .bold-line{
    margin-bottom:21px;
  }
}


/* V9 — ajuste cirúrgico final da composição da Hero (base V8) */
@media(min-width:1001px){
  /* IDEIAS QUE passa a integrar visualmente o mesmo bloco do título */
  .hero-copy .kicker{
    font-size:clamp(2.45rem,3.85vw,3.85rem);
    line-height:.86;
    letter-spacing:-1.8px;
    position:relative;
    top:58px;
    margin-bottom:0;
  }
  /* Mantém PRECISAM / GANHAR / FORMA no mesmo tamanho e posição aprovados */
  .hero-copy h1{
    position:relative;
    top:26px;
    margin-top:28px;
    margin-bottom:0;
  }
  .hero-copy h1 .purple-word{
    color:var(--purple);
    background:transparent;
    padding:0;
    line-height:inherit;
  }
  .hero-copy h1 span:not(.purple-word){
    background:var(--yellow);
    padding:0 9px 0;
    line-height:.76;
  }
  /* O bloco inferior não muda internamente; apenas desce até a base da foto */
  .hero-copy .lead{
    margin-top:45px;
  }
}


/* V10 — BLOCO 2: ajustes cirúrgicos. Hero permanece congelada. */
@media(min-width:1001px){
  .agency{position:relative;z-index:2;}
  .agency-grid{grid-template-columns:1.05fr 1fr 1fr .62fr;}
  .agency-text{font-weight:300;}
  .agency-text.bordered{font-weight:300;}
  .postit{position:absolute;right:0;bottom:-78px;z-index:5;justify-self:auto;}
}
@media(max-width:1000px){
  .agency-text{font-weight:300;}
  .agency-text.bordered{font-weight:300;}
}

/* V11 — BLOCO 2: ajuste final de escala, altura e post-it. Hero permanece congelada. */
@media(min-width:1001px){
  .agency{padding-top:30px;padding-bottom:36px;}
  .agency-title h2{font-size:2.65rem;line-height:.9;letter-spacing:-.5px;}
  .postit{bottom:-18px;}
}


/* V13 — BLOCO 2: quebra estrutural do título. Somente o título foi alterado. Hero permanece congelada. */
@media(min-width:1001px){
  .agency-title h2 .agency-line{
    display:block;
    white-space:nowrap;
    color:#050505;
  }
  .agency-title h2 .agency-line.purple{
    color:var(--purple);
  }
  .agency-title h2{
    font-size:2.15rem;
  }
}


/* V14 — BLOCO 2: subir o conjunto título + dois textos em 40px. */
/* Hero e demais blocos permanecem intocados. */
@media(min-width:1001px){
  .agency-grid{transform:translateY(-20px);}
}


/* V15 — BLOCO 2: retorno parcial de 20px para baixo.
   Mantém a margem inferior/posição relativa do conjunto preservada.
   Post-it acompanha o conjunto; nenhuma alteração horizontal. */





/* V17 — BLOCO 3: baseline pelos tamanhos reais dos seis assets.
   Respeita o .wrap existente; não divide a largura por seis.
   Cada arte mantém sua proporção e largura relativa original.
   Nenhum corte, object-fit ou deformação. */
@media(min-width:1001px){
  .services{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    width:100%;
    max-width:100%;
    overflow:visible;
  }
  .services .service{
    flex:0 0 auto;
    width:auto;
    min-width:0;
    margin:0;
    height:auto;
  }
  .services .service img{
    display:block;
    width:auto;
    max-width:none;
    height:auto;
    object-fit:contain;
  }
}


/* V18 — BLOCO 3: composição gráfica única fornecida pelo usuário.
   Desktop: uma peça única dentro do .wrap, sem corte ou deformação.
   Os textos permanecem em HTML sobre a arte. */
@media(min-width:1001px){
  .services{
    overflow:visible;
  }
  .services-composite{
    position:relative;
    width:100%;
    max-width:100%;
    margin:0 auto;
  }
  .services-art{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
  }
  .services-composite .service-copy{
    position:absolute;
    z-index:2;
    margin:0;
    padding:0;
  }
  .services-composite .service-copy h3{
    margin:5px 0 8px;
  }
  .services-composite .service-copy p{
    margin:0;
  }
  .service-copy-1{left:2.8%;top:14%;}
  .service-copy-2{left:25.0%;top:14%;}
  .service-copy-3{left:38.0%;top:14%;}
  .service-copy-4{left:53.0%;top:14%;}
  .service-copy-5{left:68.5%;top:14%;}
  .service-copy-6{left:85.0%;top:14%;}
}

@media(max-width:1000px){
  .services-composite{
    width:100%;
  }
  .services-art{
    display:block;
    width:100%;
    height:auto;
  }
  .services-composite .service-copy{
    display:none;
  }
}


/* V18 — fallback mobile preservado enquanto a composição mobile é definida depois. */
.services-mobile{display:none;}
@media(max-width:1000px){
  .services-composite{display:none;}
  .services-mobile{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    width:100%;
  }
}
@media(max-width:620px){
  .services-mobile{
    grid-template-columns:1fr;
  }
}


/* V19 — BLOCO 3: correção da área útil da composição.
   A arte ocupa somente a largura do .wrap (margens do site).
   Textos acompanham as seis áreas da arte; sem alteração de escala da arte,
   sem corte e sem deformação. */
@media(min-width:1001px){
  .services-composite{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
  }
  .services-art{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
  .services-composite .service-copy{
    position:absolute;
    z-index:2;
    margin:0;
    padding:0;
  }
  .services-composite .service-copy-1{left:2.8%;top:11%;}
  .services-composite .service-copy-2{left:24.8%;top:11%;}
  .services-composite .service-copy-3{left:38.0%;top:11%;}
  .services-composite .service-copy-4{left:53.0%;top:11%;}
  .services-composite .service-copy-5{left:68.5%;top:11%;}
  .services-composite .service-copy-6{left:83.8%;top:11%;}
}


/* V20 — BLOCO 3: correção definitiva da caixa de composição.
   O .services é apenas o fundo/seção de largura total.
   A composição gráfica fica obrigatoriamente dentro da mesma coluna
   de conteúdo usada pelo restante do site (.wrap). */
@media(min-width:1001px){
  .services{
    display:block;
    width:100%;
    min-height:0;
    overflow:visible;
  }
  .services > .services-composite{
    display:block;
    width:min(1180px, calc(100% - 72px));
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
  .services > .services-composite .services-art{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
  }

  /* Textos posicionados em relação à própria arte, não à página. */
  .services > .services-composite .service-copy-1{left:2.8%;top:11%;}
  .services > .services-composite .service-copy-2{left:25.0%;top:11%;}
  .services > .services-composite .service-copy-3{left:38.0%;top:11%;}
  .services > .services-composite .service-copy-4{left:53.0%;top:11%;}
  .services > .services-composite .service-copy-5{left:68.5%;top:11%;}
  .services > .services-composite .service-copy-6{left:83.8%;top:11%;}
}


/* V21 — BLOCO 3: refinamento da composição desktop.
   Base V20. A arte permanece na coluna .wrap do site.
   Ajustes: subir composição 12px; descer post-it 20px;
   tipografia e encaixe dos seis textos.
   Hero e demais blocos permanecem intocados. */
@media(min-width:1001px){
  .services{
    display:block;
    overflow:visible;
    position:relative;
  }
  .services > .services-composite{
    width:min(1180px, calc(100% - 72px));
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    transform:translateY(-12px);
  }
  .services > .services-composite .services-art{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
  }
  .services > .services-composite .service-copy{
    position:absolute;
    z-index:2;
    margin:0;
    padding:0;
    font-family:var(--font-body);
    font-weight:300;
  }
  .services > .services-composite .service-copy h3{
    font-family:var(--font-head);
    font-weight:400;
    font-size:22px;
    line-height:.92;
    letter-spacing:-.2px;
    margin:5px 0 9px;
  }
  .services > .services-composite .service-copy p{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:300;
    line-height:1.12;
    margin:0;
  }
  .services > .services-composite .service-copy-1{left:2.8%;top:11%;width:18%;}
  .services > .services-composite .service-copy-2{left:25.0%;top:11%;width:11.5%;}
  .services > .services-composite .service-copy-3{left:38.0%;top:11%;width:14.5%;}
  .services > .services-composite .service-copy-4{left:53.0%;top:11%;width:14%;}
  .services > .services-composite .service-copy-5{left:68.5%;top:11%;width:14%;}
  .services > .services-composite .service-copy-6{left:83.8%;top:11%;width:14%;}
}

/* V21 — post-it: desce 20px sem alterar sua posição horizontal. */
@media(min-width:1001px){
  .agency .postit{bottom:-38px;}
}


/* V22 — BLOCO 3: dois ajustes cirúrgicos.
   1) O grupo O QUE A GENTE FAZ + DESIGN + descrição avança para a direita,
      afastando-se da caneta.
   2) Post-it desce mais e entra um pouco no painel azul/gato.
   Demais serviços, Agência e Hero permanecem intocados. */
@media(min-width:1001px){
  .services > .services-composite .service-copy-1{
    left:5.8%;
  }
  .postit{
    transform:translateY(18px) rotate(-8deg);
  }
}


/* V23 — BLOCO 3: refinamento cirúrgico de posições.
   Design/O QUE A GENTE FAZ + descrição: +20px à direita e coluna textual mais larga.
   Web: pequeno deslocamento à esquerda.
   Digital: pequeno deslocamento à direita.
   Post-it: -20px adicionais no eixo vertical.
   Demais elementos permanecem intocados. */
@media(min-width:1001px){
  .services > .services-composite .service-copy-1{
    left:7.8%;
    width:17%;
  }
  .services > .services-composite .service-copy-2{
    left:24.0%;
  }
  .services > .services-composite .service-copy-5{
    left:70.2%;
  }
  .postit{
    transform:translateY(38px) rotate(-8deg);
  }
}

/* V24 — BLOCO 3: último refinamento cirúrgico.
   Digital recua metade do avanço feito na V23.
   Design: amplia a caixa textual para aliviar a quebra das linhas
   inferiores e tentar elevar "campanhas"/"gráficos" sem alterar a arte.
   Post-it e demais serviços permanecem exatamente como na V23. */
@media(min-width:1001px){
  .services > .services-composite .service-copy-5{
    left:69.35%;
  }
  .services > .services-composite .service-copy-1{
    width:20%;
  }
}


/* V25 — BLOCO DESIGN: somente as duas últimas linhas do texto. */
@media(min-width:1001px){
  .services > .services-composite .service-copy-1 .design-last-line{
    display:inline-block;
    transform:translateX(22px);
  }
}


/* V26 — BLOCO DESIGN: linha intermediária deslocada metade das duas linhas inferiores. */
@media(min-width:1001px){
  .services > .services-composite .service-copy-1 .design-middle-line{
    display:inline-block;
    transform:translateX(11px);
  }
}


/* V27 — PORTFÓLIO: refinamento final da seção.
   Somente: círculos das setas com sombra e setas mais encorpadas;
   CTA em degradê furta-cor; título ligeiramente reduzido. */
@media(min-width:1001px){
  .portfolio-intro h2{font-size:clamp(1.85rem,3vw,2.95rem);}

  .project .arrow{
    box-shadow:0 4px 0 rgba(0,0,0,.16);
    font-family:Arial,sans-serif;
    font-size:0;
  }
  .project .arrow::before{
    content:'→';
    font-family:Arial,sans-serif;
    font-size:17px;
    font-weight:900;
    line-height:1;
    transform:scaleX(1.08);
  }

  .outline-button{
    border:1px solid transparent;
    background:
      linear-gradient(var(--cream),var(--cream)) padding-box,
      linear-gradient(105deg,#4b16df 0%,#10cbd0 28%,#ee3f9d 55%,#ff8b18 78%,#4b16df 100%) border-box;
    color:transparent;
    background-clip:padding-box,border-box;
    -webkit-background-clip:padding-box,border-box;
  }
  .outline-button span,
  .outline-button{
    background-image:linear-gradient(105deg,#4b16df 0%,#10cbd0 28%,#ee3f9d 55%,#ff8b18 78%,#4b16df 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .outline-button span{
    font-family:Arial,sans-serif;
    font-size:17px;
    font-weight:900;
    line-height:1;
    transform:scaleX(1.08);
  }
}

/* V28 — PORTFÓLIO: refinamento com a seta fornecida pelo usuário.
   Base V27. Somente a seção Portfólio é alterada. */
@media(min-width:1001px){
  /* Título ligeiramente menor. */
  .portfolio-intro h2{
    font-size:clamp(1.7rem,2.6vw,2.55rem);
  }

  /* Descrições abaixo dos projetos: peso mais fino. */
  .project p{
    font-weight:300;
  }

  /* Seta dos quatro projetos: usa exatamente a forma fornecida,
     reduzida para caber discretamente dentro da bolinha. */
  .project .arrow{
    width:29px;
    height:29px;
    box-shadow:0 4px 0 rgba(0,0,0,.16);
    font-size:0;
    background:#fff;
    display:grid;
    place-items:center;
  }
  .project .arrow::before{
    content:"";
    display:block;
    width:15px;
    height:15px;
    background:#0b0b0d;
    -webkit-mask:url('assets/seta.png') center/contain no-repeat;
    mask:url('assets/seta.png') center/contain no-repeat;
  }

  /* CTA: apenas contorno furta-cor; texto e seta também furta-cor. */
  .outline-button{
    background:transparent;
    border:1px solid transparent;
    background-image:linear-gradient(var(--cream),var(--cream)),
      linear-gradient(105deg,#4b16df 0%,#10cbd0 28%,#ee3f9d 55%,#ff8b18 78%,#4b16df 100%);
    background-origin:border-box;
    background-clip:padding-box,border-box;
    -webkit-background-clip:padding-box,border-box;
    color:#4b16df;
  }
  .outline-button .cta-arrow{
    width:15px;
    height:15px;
    display:inline-block;
    flex:0 0 15px;
    background:linear-gradient(105deg,#4b16df 0%,#10cbd0 28%,#ee3f9d 55%,#ff8b18 78%,#4b16df 100%);
    -webkit-mask:url('assets/seta.png') center/contain no-repeat;
    mask:url('assets/seta.png') center/contain no-repeat;
  }
  .outline-button .cta-label{
    background-image:linear-gradient(105deg,#4b16df 0%,#10cbd0 28%,#ee3f9d 55%,#ff8b18 78%,#4b16df 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}


/* V29 — PORTFÓLIO: refinamento cirúrgico final.
   Base V28. Ajustes somente no Portfólio: setas visíveis, título/CTA menores
   e quebra do texto introdutório. Demais blocos permanecem intocados. */
@media(min-width:1001px){
  /* Título: mais delicado em relação às fotos pequenas. */
  .portfolio-intro h2{
    font-size:clamp(1.55rem,2.3vw,2.3rem);
  }

  /* CTA: volta ao tamanho compacto e mantém tudo em uma única linha. */
  .outline-button{
    gap:9px;
    padding:6px 10px;
    border-radius:18px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
  }
  .outline-button .cta-label{
    font-family:var(--font-body);
    font-size:9px;
    font-weight:500;
    line-height:1;
    transform:none;
    white-space:nowrap;
  }

  /* Setas dos projetos: usa diretamente a seta fornecida,
     garantindo que ela apareça no Chrome sem depender de mask. */
  .project .arrow{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .project .arrow::before{
    content:"";
    display:block;
    width:17px;
    height:12px;
    background:url('assets/seta.png') center/100% 100% no-repeat;
    transform:none;
  }

  /* Seta do CTA: mesma seta fornecida, menor e com o degradê furta-cor. */
  .outline-button .cta-arrow{
    width:13px;
    height:9px;
    flex:0 0 13px;
    display:inline-block;
    background:linear-gradient(105deg,#4b16df 0%,#10cbd0 28%,#ee3f9d 55%,#ff8b18 78%,#4b16df 100%);
    -webkit-mask-image:url('assets/seta.png');
    mask-image:url('assets/seta.png');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
}


/* V30 — PORTFÓLIO: setas vetorizadas a partir da seta fornecida pelo usuário.
   Base V29. Somente setas e pequeno refinamento de tamanho do CTA. */
@media(min-width:1001px){
  /* Setas das quatro bolinhas: pretas, proporcionais e sempre visíveis. */
  .portfolio .project .arrow{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    overflow:hidden;
    box-shadow:0 4px 0 rgba(0,0,0,.16);
  }
  .portfolio .project .arrow::before{content:none;}
  .portfolio .project .arrow img{
    display:block;
    width:16px;
    height:auto;
    max-width:16px;
  }

  /* CTA: um pouco maior que a V29, mantendo delicadeza e uma linha. */
  .portfolio .outline-button{
    gap:10px;
    padding:7px 12px;
    border-radius:19px;
    font-size:10px;
  }
  .portfolio .outline-button .cta-label{
    font-size:10px;
  }
  .portfolio .outline-button .cta-arrow{
    display:block;
    width:14px;
    height:auto;
    flex:0 0 14px;
    margin:0;
  }
}


/* V31 — PORTFÓLIO: alinhamento final das setas.
   Base V30. Somente: setas dos projetos mais baixas/alinhadas e seta do CTA visível. */
@media(min-width:1001px){
  /* Mantém os quatro botões na mesma altura e mais abaixo. */
  .portfolio .project{
    height:220px;
  }
  .portfolio .project .arrow{
    top:auto;
    bottom:0;
  }

  /* CTA: seta furta-cor como imagem real, com tamanho controlado. */
  .portfolio .outline-button .cta-arrow{
    width:15px;
    height:10px;
    flex:0 0 15px;
    display:block;
    object-fit:contain;
    object-position:center;
    margin:0;
  }
}

/* V32 — PORTFÓLIO: correção definitiva das setas.
   Base V31. Somente alinhamento vertical das quatro bolinhas e seta do CTA. */
@media(min-width:1001px){
  /* As quatro bolinhas passam a ter uma coordenada vertical explícita,
     independente da quantidade de texto de cada projeto. */
  .portfolio .project{
    height:220px;
    position:relative;
  }
  .portfolio .project .arrow{
    top:180px;
    bottom:auto;
    right:0;
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    box-shadow:0 4px 0 rgba(0,0,0,.16);
  }
  .portfolio .project .arrow img{
    display:block;
    width:16px;
    height:auto;
    max-width:16px;
  }

  /* CTA: seta vetorial inline, usando exatamente o desenho fornecido.
     Sem mask, sem dependência externa para a renderização. */
  .portfolio .outline-button .cta-arrow{
    display:block;
    width:14px;
    height:10px;
    flex:0 0 14px;
    margin:0;
    overflow:visible;
  }
}


/* V33 — PORTFÓLIO: correção real dos dois controles.
   Base V32. Nada além das setas/bolinhas é alterado. */
@media(min-width:1001px){
  /* As quatro bolinhas compartilham exatamente a mesma coordenada vertical,
     agora abaixo do bloco textual. */
  .portfolio .project{
    position:relative;
    height:250px;
  }
  .portfolio .project .arrow{
    top:210px;
    bottom:auto;
    right:0;
    width:29px;
    height:29px;
    margin:0;
    display:grid;
    place-items:center;
    box-shadow:0 4px 0 rgba(0,0,0,.16);
  }
  .portfolio .project .arrow img{
    display:block;
    width:16px;
    height:auto;
    max-width:16px;
    margin:0;
  }

  /* CTA: imagem SVG real, sem máscara e sem pseudo-elemento. */
  .portfolio .outline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .portfolio .outline-button .cta-arrow{
    display:block;
    width:14px;
    height:auto;
    min-width:14px;
    flex:0 0 14px;
    margin:0;
    opacity:1;
    visibility:visible;
  }
}


/* V34 — PORTFÓLIO: ajuste final das setas.
   Base V33. Somente posição vertical das quatro bolinhas e seta do CTA. */
@media(min-width:1001px){
  /* Retorna as quatro bolinhas para junto da base dos textos,
     mantendo a mesma coordenada vertical entre os quatro projetos. */
  .portfolio .project{
    height:250px;
    position:relative;
  }
  .portfolio .project .arrow{
    top:178px;
    bottom:auto;
    right:0;
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    margin:0;
    box-shadow:0 4px 0 rgba(0,0,0,.16);
  }
  .portfolio .project .arrow img{
    display:block;
    width:16px;
    height:auto;
    max-width:16px;
    margin:0;
  }

  /* CTA: seta SVG inline, sempre visível e com o mesmo desenho fornecido. */
  .portfolio .outline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .portfolio .outline-button .cta-arrow{
    display:block;
    width:14px;
    height:10px;
    min-width:14px;
    flex:0 0 14px;
    margin:0;
    overflow:visible;
    opacity:1;
    visibility:visible;
  }
  .portfolio .outline-button .cta-arrow path{
    display:block;
  }
}


/* V35 — PORTFÓLIO: CTA. Base V34.
   Única alteração: seta furta-cor como imagem real dentro do botão.
   As quatro setas dos projetos permanecem exatamente como na V34. */
@media(min-width:1001px){
  .portfolio .outline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .portfolio .outline-button .cta-arrow{
    display:block;
    width:14px;
    height:auto;
    min-width:14px;
    flex:0 0 14px;
    margin:0;
    opacity:1;
    visibility:visible;
  }
}

/* V36 — BLOCO DIFERENCIAL.
   Base V35. Ajustes exclusivos no bloco preto:
   faixa alinhada à coluna .wrap; texto branco extra light;
   texto amarelo com peso maior; linhas verticais com mesma altura. */
@media(min-width:1001px){
  .differential{
    width:min(1180px,calc(100% - 72px));
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }
  .differential .diff-grid{
    width:100%;
    min-height:330px;
    grid-template-columns:1.1fr 1fr 1fr 1.05fr;
    align-items:stretch;
  }
  .differential .diff-text{
    font-family:var(--font-body);
    font-size:16px;
    font-weight:200;
    line-height:1.28;
    padding-top:45px;
    padding-bottom:45px;
    align-self:center;
    height:210px;
    box-sizing:border-box;
  }
  .differential .diff-text.strong{
    font-weight:200;
    padding-top:45px;
    padding-bottom:45px;
    height:210px;
  }
  .differential .diff-text strong{
    font-weight:600;
  }
}

/* V37 — BLOCO DIFERENCIAL: ajuste estrutural final.
   Base V36. David preserva integralmente o recorte original;
   título em 3 linhas; barras acompanham a altura real dos dois textos. */
@media(min-width:1001px){
  .differential .diff-grid{
    min-height:0;
    align-items:stretch;
  }
  .differential .diff-head{
    padding-top:34px;
    padding-bottom:30px;
    justify-content:center;
  }
  .differential .differential h2,
  .differential h2{
    font-size:44px;
    line-height:.9;
    letter-spacing:-.4px;
    margin:8px 0 0;
  }
  .differential .diff-text,
  .differential .diff-text.strong{
    height:auto;
    min-height:0;
    align-self:center;
    padding-top:0;
    padding-bottom:0;
    margin:34px 0;
  }
  .differential .diff-text.strong{
    display:block;
  }
  .differential .david{
    height:auto;
    min-height:0;
    overflow:visible;
    align-self:end;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .differential .david img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center bottom;
  }
}


/* V38 — BLOCO DIFERENCIAL: ajuste visual conforme referência aprovada.
   Base V37. Título afastado da margem; bloco reduzido e David posicionado
   com o recorte original inteiro, fazendo o amarelo tocar o topo e o cabelo
   ultrapassar levemente o limite superior. Textos deslocados para a direita
   acompanhando a nova distribuição. */
@media(min-width:1001px){
  .differential .diff-grid{
    min-height:355px;
    grid-template-columns:1.1fr 1fr 1fr 1.05fr;
  }
  .differential .diff-head{
    padding-left:25px;
    padding-top:26px;
    padding-bottom:24px;
    justify-content:center;
  }
  .differential .diff-head h2{
    font-size:44px;
    line-height:.88;
    margin:8px 0 0;
  }
  .differential .diff-text,
  .differential .diff-text.strong{
    margin:42px 0;
  }
  .differential .diff-text{
    transform:translateX(14px);
  }
  .differential .diff-text.strong{
    transform:translateX(10px);
  }
  .differential .david{
    overflow:visible;
    align-self:end;
    justify-content:center;
  }
  .differential .david img{
    width:auto;
    height:371px;
    max-width:none;
    object-fit:contain;
    object-position:center bottom;
  }
}

/* V39 — BLOCO DIFERENCIAL: reprodução da referência enviada.
   Base V38. Apenas o bloco preto é ajustado. */
@media(min-width:1001px){
  .differential{
    overflow:visible;
  }
  .differential .diff-grid{
    min-height:330px;
    height:330px;
    grid-template-columns:320px 280px 280px 300px;
    align-items:stretch;
  }

  /* Título em exatamente três linhas, sem permitir quebra interna. */
  .differential .diff-head{
    padding:0 0 0 25px;
    justify-content:center;
    align-items:flex-start;
  }
  .differential .diff-head h2{
    font-size:44px;
    line-height:.88;
    margin:8px 0 0;
    white-space:nowrap;
  }
  .differential .diff-head h2 .diff-line{
    display:block;
    white-space:nowrap;
  }

  /* Barras exatamente com a altura dos respectivos textos e iguais entre si. */
  .differential .diff-text,
  .differential .diff-text.strong{
    height:126px;
    min-height:126px;
    margin:0;
    padding:0 22px;
    align-self:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
  }
  .differential .diff-text{transform:translateX(0);}
  .differential .diff-text.strong{transform:translateX(0);}

  /* David menor, inteiro e encostado na base. Sem crop. */
  .differential .david{
    height:330px;
    min-height:330px;
    align-self:end;
    overflow:visible;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
  }
  .differential .david img{
    display:block;
    width:auto;
    height:330px;
    max-width:none;
    object-fit:contain;
    object-position:center bottom;
  }
}

/* V40 — BLOCO DIFERENCIAL: ajuste fino pela referência do usuário.
   Base V39. Apenas este bloco é alterado. */
@media(min-width:1001px){
  /* Mantém o bloco compacto e abre espaço para o David menor à direita. */
  .differential .diff-grid{
    height:285px;
    min-height:285px;
    grid-template-columns:350px 270px 270px 290px;
    align-items:stretch;
  }

  /* Cor correta: somente FAZER e BONITO. ficam amarelos. */
  .differential .diff-head h2 .diff-line:first-child{color:#fff;}
  .differential .diff-head h2 .diff-line:nth-child(2){color:#fff;}
  .differential .diff-head h2 .diff-line:nth-child(2) span{color:var(--yellow);}
  .differential .diff-head h2 .diff-line:nth-child(3){color:var(--yellow);}

  /* Título afastado da margem e mantido exatamente em três linhas. */
  .differential .diff-head{
    padding-left:25px;
    padding-right:10px;
    justify-content:center;
    align-items:flex-start;
  }
  .differential .diff-head h2{
    font-size:44px;
    line-height:.88;
    margin:8px 0 0;
    white-space:nowrap;
  }

  /* Os dois textos compartilham exatamente a mesma altura e o mesmo eixo vertical. */
  .differential .diff-text,
  .differential .diff-text.strong{
    height:126px;
    min-height:126px;
    margin:0;
    padding:0 22px;
    align-self:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
    transform:none;
  }
  .differential .diff-text.strong strong{color:var(--yellow);}

  /* David menor, inteiro, mantido à direita e levantado até o topo do preto.
     A imagem continua sendo o recorte original, sem crop. */
  .differential .david{
    height:285px;
    min-height:285px;
    overflow:visible;
    align-self:start;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    position:relative;
    top:0;
  }
  .differential .david img{
    display:block;
    width:auto;
    height:250px;
    max-width:none;
    object-fit:contain;
    object-position:center top;
    position:relative;
    top:-2px;
  }
}

/* V41 — BLOCO DIFERENCIAL: compactação e alinhamento.
   Base V40. Apenas ajustes solicitados nesta etapa. */
@media(min-width:1001px){
  /* Caixa preta: reduz aproximadamente 80px, mantendo a composição horizontal. */
  .differential .diff-grid{
    height:205px;
    min-height:205px;
  }

  /* Título: redução leve para afastá-lo da barra amarela. */
  .differential .diff-head h2{
    font-size:40px;
    line-height:.88;
  }

  /* Segundo bloco: branco e amarelo começam no mesmo eixo vertical. */
  .differential .diff-text.strong{
    justify-content:flex-start;
    padding-top:0;
  }
}

/* V42 — BLOCO DIFERENCIAL: ajuste final de composição.
   Base V41. Caixa preta permanece com 205px de altura.
   Textos sobem para o centro/eixo comum; David reduz para caber no bloco. */
@media(min-width:1001px){
  /* Mantém a caixa preta exatamente na altura aprovada. */
  .differential .diff-grid{
    height:205px;
    min-height:205px;
    align-items:stretch;
  }

  /* Título: grupo inteiro centralizado verticalmente no preto. */
  .differential .diff-head{
    padding:0 10px 0 25px;
    justify-content:center;
    align-items:flex-start;
    transform:translateY(-2px);
  }
  .differential .diff-head h2{
    margin:8px 0 0;
    font-size:40px;
    line-height:.88;
  }

  /* Os dois blocos de texto partem exatamente do mesmo eixo vertical. */
  .differential .diff-text,
  .differential .diff-text.strong{
    height:126px;
    min-height:126px;
    margin:0;
    padding:0 22px;
    align-self:center;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    box-sizing:border-box;
    transform:none;
  }

  /* David: reduzido para caber inteiro na caixa e sobe até o topo.
     O recorte original é preservado; não há crop/object-fit:cover. */
  .differential .david{
    height:205px;
    min-height:205px;
    overflow:visible;
    align-self:start;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    position:relative;
    top:0;
  }
  .differential .david img{
    display:block;
    width:auto;
    height:214px;
    max-width:none;
    object-fit:contain;
    object-position:center top;
    position:relative;
    top:-9px;
  }
}


/* V43 — BLOCO DIFERENCIAL: ajuste final do segundo texto.
   Base V42. Somente o conteúdo do segundo bloco é refinado: alinhamento
   pelo mesmo eixo superior e quebra exata do texto amarelo em três linhas. */
@media(min-width:1001px){
  .differential .diff-text.strong{
    justify-content:flex-start;
    align-items:flex-start;
  }
  .differential .diff-text.strong .diff-white-copy{
    display:block;
    margin:0;
    padding:0;
  }
  .differential .diff-text.strong strong{
    display:block;
    margin-top:18px;
    padding:0;
    color:var(--yellow);
    font-weight:600;
    white-space:nowrap;
  }
}

/* V45 — BLOCO SOBRE: ajuste cirúrgico do segundo texto e do bloco roxo.
   Base V44. A quebra do bloco roxo permanece exatamente em 4 linhas;
   as duas colunas avançam para a esquerda e o bloco roxo ganha largura. */
@media(min-width:1001px){
  .about-grid > p:nth-of-type(2){
    transform:translateX(-18px);
  }
  .about-grid > h3{
    transform:translateX(-24px);
    width:calc(100% + 36px);
    white-space:nowrap;
  }
}


/* V46 — BLOCO CONTATO: reconstrução desktop baseada na referência CORRETO-CONTATO.
   Mantém a faixa dentro da coluna .wrap, sem sangrar para a página.
   Os assets contato1/contato2 são recortes transparentes e permanecem inteiros,
   sem object-fit:cover ou cortes artificiais. */
@media(min-width:1001px){
  .contact{
    background:var(--yellow);
    color:#050505;
    overflow:hidden;
  }
  .contact-grid{
    width:min(1180px,calc(100% - 72px));
    min-height:194px;
    height:194px;
    margin:0 auto;
    display:grid;
    grid-template-columns:18% 43% 39%;
    align-items:stretch;
    position:relative;
    overflow:hidden;
  }
  .contact-left{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    overflow:visible;
  }
  .contact-left img{
    width:auto;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:left bottom;
    display:block;
  }
  .contact-copy{
    padding:28px 18px 20px 0;
    position:relative;
    z-index:2;
  }
  .contact-copy small{
    font-size:8px;
    letter-spacing:1.1px;
    font-weight:500;
  }
  .contact h2{
    font-family:var(--font-head);
    font-size:32px;
    line-height:.88;
    letter-spacing:-.8px;
    margin:5px 0 13px;
    color:#050505;
  }
  .contact h2 span{color:#050505;}
  .contact h3{
    font-family:var(--font-head);
    font-size:16px;
    line-height:1;
    margin:0 0 6px;
  }
  .contact p{
    font-family:var(--font-body);
    font-size:11px;
    line-height:1.18;
    margin:0 0 6px;
  }
  .contact-copy>b{
    font-family:var(--font-head);
    font-size:13px;
    line-height:1;
    margin-bottom:12px;
  }
  .contact .button{
    background:var(--purple);
    color:#fff;
    padding:10px 18px;
    gap:12px;
    font-size:10px;
    border-radius:22px;
  }
  .contact .button span{
    font-size:17px;
    line-height:1;
  }
  .contact-right{
    position:relative;
    overflow:visible;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
  }
  .contact-right img{
    width:auto;
    height:100%;
    max-width:none;
    display:block;
    align-self:flex-end;
  }
}
/* V47 — BLOCO CONTATO: reconstrução fiel à referência CORRETO-CONTATO.
   A faixa amarela fica dentro da coluna .wrap; o fundo externo permanece creme.
   Os recortes transparentes são mantidos inteiros, sem cover/crop. */
@media(min-width:1001px){
  .contact{
    background:var(--cream);
    color:#050505;
    overflow:visible;
    padding:0;
  }
  .contact-grid{
    width:min(1180px,calc(100% - 72px));
    max-width:1180px;
    height:194px;
    min-height:194px;
    margin:0 auto;
    position:relative;
    display:block;
    overflow:hidden;
    background:var(--yellow);
  }
  .contact-left{
    position:absolute;
    left:0;
    bottom:0;
    width:auto;
    height:100%;
    display:block;
    overflow:visible;
    z-index:1;
  }
  .contact-left img{
    display:block;
    width:auto;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:left bottom;
  }
  .contact-copy{
    position:absolute;
    left:34.5%;
    top:0;
    width:36%;
    height:100%;
    padding:34px 0 0;
    z-index:3;
  }
  .contact-copy small{
    display:block;
    font-family:var(--font-body);
    font-size:8px;
    line-height:1;
    letter-spacing:1.1px;
    font-weight:500;
    margin:0 0 9px;
  }
  .contact h2{
    font-family:var(--font-head);
    font-size:32px;
    line-height:.88;
    letter-spacing:-.8px;
    margin:0;
    color:#050505;
  }
  .contact h2 span{color:#050505;}
  .contact h3{
    font-family:var(--font-head);
    font-size:16px;
    line-height:1;
    margin:0 0 6px;
    color:#050505;
  }
  .contact p{
    font-family:var(--font-body);
    font-size:11px;
    line-height:1.18;
    margin:0 0 7px;
    color:#050505;
  }
  .contact-copy>b{
    display:block;
    font-family:var(--font-head);
    font-size:13px;
    line-height:1;
    margin:0 0 12px;
    color:#050505;
  }
  .contact .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    background:var(--purple);
    color:#fff;
    padding:10px 18px;
    border-radius:22px;
    font-size:10px;
    line-height:1;
  }
  .contact .button span{
    font-size:17px;
    line-height:1;
  }
  .contact-right{
    position:absolute;
    right:0;
    bottom:0;
    width:39%;
    height:100%;
    overflow:visible;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    z-index:2;
  }
  .contact-right img{
    display:block;
    width:auto;
    height:100%;
    max-width:none;
    align-self:flex-end;
  }
}
/* V47.1 — ajuste de composição interna conforme CORRETO-CONTATO.
   Título fica na área esquerda; conversa permanece no centro. */
@media(min-width:1001px){
  .contact-copy small,
  .contact-copy h2{
    position:relative;
    left:-22.6%;
  }
  .contact-copy h2{width:430px;}
  .contact-copy h3{margin-top:1px;}
  .contact-copy .button{margin-left:263px;}
}

/* V48 — CONTATO: ajuste exclusivamente dos três grupos de conteúdo.
   Base V47. A faixa, grafismos, telefone e altura permanecem intocados. */
@media(min-width:1001px){
  .contact-copy{
    left:0;
    top:0;
    width:100%;
    height:100%;
    padding:0;
    position:absolute;
  }

  /* Grupo 1 — CONTATO + título: mais à esquerda, sem encostar no grafismo. */
  .contact-copy small{
    position:absolute;
    left:6.8%;
    top:34px;
    margin:0;
  }
  .contact-copy h2{
    position:absolute;
    left:6.8%;
    top:62px;
    width:430px;
    margin:0;
  }

  /* Grupo 2 — conversa: centralizado verticalmente na faixa. */
  .contact-copy h3{
    position:absolute;
    left:34.5%;
    top:34px;
    margin:0 0 6px;
  }
  .contact-copy p{
    position:absolute;
    left:34.5%;
    top:58px;
    width:410px;
    margin:0;
  }
  .contact-copy>b{
    position:absolute;
    left:34.5%;
    top:109px;
    margin:0;
  }

  /* Grupo 3 — CTA entre a conversa e o telefone. */
  .contact-copy .button{
    position:absolute;
    left:56.5%;
    top:72px;
    margin:0;
  }
}


/* V49 — CONTATO: ajuste final dos grupos internos.
   Base V48. Faixa, altura, grafismo esquerdo e telefone permanecem intocados. */
@media(min-width:1001px){
  /* Grupo 1 — título em três linhas, afastado do grafismo. */
  .contact-copy small{
    left:9.5%;
    top:29px;
  }
  .contact-copy small::after{
    content:"";
    display:block;
    width:34px;
    height:2px;
    margin-top:5px;
    background:#fff;
  }
  .contact-copy h2{
    left:9.5%;
    top:51px;
    width:290px;
    font-size:30px;
    line-height:.86;
    letter-spacing:-.7px;
  }
  .contact-copy h2 .contact-title-line{
    display:block;
    white-space:nowrap;
    color:#050505;
  }
  .contact-copy h2 .contact-title-line.yellow-word{
    color:#050505;
  }

  /* Grupo 2 — conversa centralizada verticalmente como conjunto. */
  .contact-copy h3{
    left:34.5%;
    top:45px;
  }
  .contact-copy p{
    left:34.5%;
    top:68px;
    width:410px;
  }
  .contact-copy>b{
    left:34.5%;
    top:137px;
    margin:0;
  }

  /* Grupo 3 — botão centralizado entre conversa e telefone. */
  .contact-copy .button{
    left:56.5%;
    top:50%;
    transform:translateY(-50%);
    margin:0;
  }
  .contact-copy .button .contact-button-arrow{
    display:block;
    width:14px;
    height:auto;
    max-width:none;
    object-fit:contain;
    flex:0 0 auto;
  }
}


/* V52 — acabamento final de navegação, setas e links. Base V51. */
@media(min-width:1001px){
  .site-header .header-cta{gap:12px;}
  .site-header .header-arrow,
  .hero-cta .hero-arrow{
    display:block;
    width:14px;
    height:14px;
    object-fit:contain;
    object-position:center;
    flex:0 0 14px;
  }
  .hero-cta{gap:12px;}
  .contact-button-arrow{
    width:14px !important;
    height:14px !important;
  }
  .agency-text.bordered{border-left-color:#777;}
}
.social a{display:flex;align-items:center;justify-content:center;text-decoration:none;}
.social a img{display:block;}