/* Seções da landing */

/* 1. Início */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hh) + 4vh);padding-bottom:8vh;background:transparent;overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,3.4vh,32px)}
.hero h1{font-size:clamp(2.6rem,min(7vw,12vh),7.4rem);line-height:.96;max-width:11ch}
.hero-p{max-width:46ch;font-size:clamp(1.02rem,1.5vw,1.25rem);color:var(--prata)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.hero-mark{position:absolute;z-index:0;right:calc(var(--gx) - 2vw);top:50%;width:min(36vw,52vh);height:auto;transform:translateY(-46%);opacity:.9;pointer-events:none}
.hero-mark path{fill:none;stroke:var(--grafite);stroke-width:103;stroke-linecap:round;stroke-linejoin:round}
.hero-3d{display:none;position:absolute;z-index:0;top:0;right:0;bottom:0;width:46vw;height:100%;pointer-events:none}
.has-3d .hero-3d{display:block}
.has-3d .hero-mark{display:none}

/* Foto no início (teste) */
/* As bordas da foto somem com máscara transparente (não com preto chapado),
   assim ela se funde com o fundo vivo sem deixar linha de emenda. */
/* --wipe controla a cortina da entrada (110% = escondida, 0% = toda à mostra).
   A borda da cortina é um degradê curto, não um corte reto: por isso não pisca. */
.hero-photo{--wipe:0%;position:absolute;z-index:0;top:0;right:0;bottom:0;width:58vw;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(0deg,transparent 0%,#000 30%),linear-gradient(90deg,transparent calc(var(--wipe) - 10%),#000 var(--wipe));
  -webkit-mask-composite:source-in,source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(0deg,transparent 0%,#000 30%),linear-gradient(90deg,transparent calc(var(--wipe) - 10%),#000 var(--wipe));
  mask-composite:intersect,intersect}
.hp-in{position:absolute;inset:0}
.hero-photo picture{position:absolute;left:0;right:0;top:-12%;height:112%;display:block}
.hero-photo img{display:block;width:100%;height:100%}
.hero-photo img{object-fit:cover;object-position:62% 62%;transform-origin:60% 60%;will-change:transform}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,16,.6) 0%,rgba(9,13,16,0) 22%)}
.hero--foto .hero-mark{display:none}

/* Faixa de serviços */
.band{overflow:hidden;border-block:1px solid var(--grafite-claro);background:rgba(9,13,16,.6);padding:18px 0;white-space:nowrap}
.band-track{display:inline-flex;gap:0;animation:band 46s linear infinite;will-change:transform}
.band-track span{display:inline-flex;align-items:center;font-size:.85rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--vidro);padding-right:2.2rem}
.band-track span::after{content:"›";color:var(--ceu);margin-left:2.2rem;font-size:1.3em;letter-spacing:0}
@keyframes band{to{transform:translateX(-50%)}}

/* 2. Serviços: bento grid */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:clamp(12px,1.4vw,18px);
  grid-template-areas:"lp lp lp lp si si" "lp lp lp lp gg gg" "seo seo seo mt mt mt"}
.card-lp{grid-area:lp}.card-si{grid-area:si}.card-gg{grid-area:gg}.card-seo{grid-area:seo}.card-mt{grid-area:mt}
.card{position:relative;overflow:hidden;background:rgba(9,13,16,.72);border:1px solid var(--grafite-claro);border-radius:18px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:18px;transition:border-color .5s var(--ease),transform .6s var(--ease)}
.card>*{position:relative}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(241,238,226,.09),transparent 60%);opacity:0;transition:opacity .5s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(241,238,226,.55),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.card:hover{transform:translateY(-4px)}
.card:hover::before,.card:hover::after{opacity:1}
.card-n{font-size:.8rem;font-weight:500;letter-spacing:.18em;color:var(--vidro);font-variant-numeric:tabular-nums}
.card-art{flex:1;display:flex;align-items:center;justify-content:center;min-height:90px}
.card-art svg{width:100%;max-width:220px;height:auto;overflow:visible}
.card-lp .card-art svg{max-width:440px}
.card-art svg *{fill:none;stroke:var(--aco);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .5s var(--ease),fill .5s var(--ease)}
.card-art .f{fill:var(--aco);stroke:none}
.card-art .bg{fill:var(--preto)}
.card-art .a{fill:var(--grafite-claro);stroke:none}
.card-art .k{stroke:var(--prata);stroke-width:2.5}
.card:hover .card-art svg *{stroke:var(--chumbo)}
.card:hover .card-art .a{fill:var(--ceu)}
.card:hover .card-art .k{stroke:var(--ceu)}
.card:hover .card-art .f,.card:hover .card-art .a{stroke:none}
.card-txt{display:flex;flex-direction:column;gap:10px}
.card h3{font-size:clamp(1.2rem,1.8vw,1.55rem)}
.card-lp h3{font-size:clamp(1.6rem,3vw,2.6rem)}
.card p{color:var(--prata);font-size:clamp(.95rem,1.2vw,1.02rem);max-width:48ch}

/* 3. Benefícios */
.ben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,90px);align-items:center}
.ben .sec-h{margin:0}
.ben-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,5vh,48px) clamp(20px,3vw,44px)}
.ben-item,.step{--ln:1;position:relative;border-top:1px solid var(--grafite-claro);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.ben-item::before,.step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--ceu);transform:scaleX(var(--ln));transform-origin:0 50%}
.ben-item h3{font-size:clamp(1.1rem,1.6vw,1.3rem)}
.ben-item p{color:var(--prata);font-size:clamp(.95rem,1.2vw,1.02rem)}

/* 4. Como trabalhamos */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,5vh,44px) clamp(16px,2vw,28px)}
.step{padding-top:16px}
.step-n{font-size:.85rem;font-weight:500;letter-spacing:.14em;color:var(--vidro);font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.1rem,1.5vw,1.3rem)}
.step p{color:var(--prata);font-size:.95rem}
@media (min-width:1280px){.steps{grid-template-columns:repeat(7,minmax(0,1fr))}.step p{font-size:.9rem}}

/* 5. Sobre nós */
.about{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,90px);align-items:center}
.about-txt{display:flex;flex-direction:column;gap:clamp(16px,3vh,26px)}
.about-txt p{color:var(--prata);font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:52ch}
.mv{display:flex;flex-direction:column;gap:clamp(20px,4vh,32px)}
.mv-item{border-left:2px solid var(--ceu);padding-left:20px;display:flex;flex-direction:column;gap:6px}
.mv-item span{font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vidro)}
.mv-item p{color:var(--ceu);font-size:clamp(1rem,1.3vw,1.15rem)}

/* 6. Contato */
.contato .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,3.4vh,30px)}
.contato h2{font-size:clamp(2rem,min(5.4vw,9vh),4.8rem);max-width:15ch;line-height:1.04}
.contato-p{color:var(--prata);max-width:46ch;font-size:clamp(1rem,1.4vw,1.2rem)}
.contato-btns{display:flex;flex-wrap:wrap;gap:14px}
.foot{width:100%;margin-top:clamp(64px,13vh,140px);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.85rem;color:var(--vidro);padding-top:20px;border-top:1px solid var(--grafite-claro)}
.foot img{height:22px;width:auto}
.foot span{display:flex;align-items:center;gap:12px}

/* C> gigante no Contato, desenhando-se em linha */
.contato{overflow:hidden}
.contato .wrap,.mega{position:relative;z-index:1}
.ct-mark{position:absolute;z-index:0;right:-6vw;top:clamp(60px,10vh,120px);width:min(56vw,860px);height:auto;pointer-events:none;overflow:visible}
.ct-mark path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ct-fill path{stroke:rgba(241,238,226,.045);stroke-width:103}
.ct-line path{stroke:var(--chumbo);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0}

/* CYRO gigante no rodapé */
.contato{padding-bottom:clamp(20px,3vw,40px)}
.mega{margin:clamp(40px,8vh,90px) auto 0;max-width:1600px;overflow:hidden}
.mega img{width:100%;height:auto;will-change:transform}

/* Fundo vivo: brilhos que se movem devagar + granulado */
.bg-live{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--preto)}
.bg-tone{position:absolute;inset:0;background:var(--grafite);opacity:0;will-change:opacity}
.bg-in{position:absolute;inset:-10%;will-change:transform}
.bg-live i{position:absolute;border-radius:50%;will-change:transform}
.bg-live i:nth-child(1){width:80vmax;height:80vmax;top:-30vmax;left:-25vmax;background:radial-gradient(closest-side,rgba(193,200,202,.11),transparent);animation:bgA 28s ease-in-out infinite alternate}
.bg-live i:nth-child(2){width:70vmax;height:70vmax;top:10vh;right:-30vmax;background:radial-gradient(closest-side,rgba(115,123,128,.16),transparent);animation:bgB 34s ease-in-out infinite alternate}
.bg-live i:nth-child(3){width:90vmax;height:90vmax;bottom:-50vmax;left:10vw;background:radial-gradient(closest-side,rgba(241,238,226,.06),transparent);animation:bgC 40s ease-in-out infinite alternate}
@keyframes bgA{to{transform:translate3d(22vw,18vh,0) scale(1.15)}}
@keyframes bgB{to{transform:translate3d(-26vw,30vh,0) scale(.9)}}
@keyframes bgC{to{transform:translate3d(18vw,-34vh,0) scale(1.1)}}
.bg-grain{position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite;will-change:transform}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-40px,25px)}40%{transform:translate(30px,-50px)}60%{transform:translate(-25px,-20px)}80%{transform:translate(45px,35px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.bg-live i,.bg-grain{animation:none!important}}

/* Serviços no computador: a seção inteira cabe numa tela (título + mosaico), sem cortar.
   Tamanhos acompanham a altura da janela. A rolagem continua livre. */
@media (min-width:901px){
  #servicos{min-height:100vh;min-height:100svh;display:flex;padding-top:calc(var(--hh) + 4vh);padding-bottom:5vh}
  #servicos .wrap{display:flex;flex-direction:column;flex:1;min-height:0;height:calc(100svh - var(--hh) - 9vh)}
  #servicos .sec-h{margin-bottom:3.5vh;gap:1.2vh}
  #servicos .sec-h h2{font-size:clamp(2rem,min(5vw,8vh),4.4rem)}
  #servicos .bento{flex:1;min-height:0;grid-auto-rows:auto;grid-template-rows:repeat(3,minmax(150px,1fr));gap:clamp(10px,1.6vh,18px)}
  #servicos .card{padding:clamp(16px,2.6vh,30px);gap:1.2vh;justify-content:space-between;min-height:0}
  #servicos .card-txt{gap:.8vh}
  #servicos .card h3{font-size:clamp(1.05rem,min(1.6vw,2.6vh),1.45rem)}
  #servicos .card p{font-size:clamp(.85rem,min(1.1vw,1.9vh),1rem);line-height:1.5}
  /* cartões menores: desenho no canto de cima, texto embaixo */
  #servicos .card:not(.card-lp) .card-txt{max-width:64%}
  #servicos .card:not(.card-lp) .card-art{position:absolute;top:clamp(16px,2.6vh,30px);right:clamp(16px,2.6vh,30px);width:32%;height:40%;min-height:0;justify-content:flex-end;align-items:flex-start}
  #servicos .card:not(.card-lp) .card-art svg{width:100%;height:100%;max-width:none}
  /* cartão grande: desenho ocupa o espaço que sobra */
  #servicos .card-lp .card-art{min-height:0}
  #servicos .card-lp .card-art svg{height:100%;max-height:100%;width:auto;max-width:min(100%,440px)}
  #servicos .card-lp h3{font-size:clamp(1.5rem,min(2.6vw,4.4vh),2.4rem)}
}