/* DM Group: "O que fazemos", hero post card, marketing plans */

/* ---------- O que fazemos ---------- */
.dmg.light{position:relative;background:var(--bg-l2);padding-block:clamp(3.6rem,8vw,7rem);overflow:hidden}
.dmg:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:120px 120px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%)}
.dmg .wrap{position:relative}
.dmg__head{display:grid;gap:1rem;max-width:56rem;margin-bottom:clamp(1.8rem,4vw,3.2rem)}
.dmg__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.dmg__card{position:relative;display:flex;flex-direction:column;gap:1rem;box-shadow:0 30px 60px -36px #14110d99;padding:clamp(.9rem,1.4vw,1.25rem) clamp(.9rem,1.4vw,1.25rem) clamp(1.2rem,1.8vw,1.6rem);background:var(--bg-d);border:1px solid var(--ln)}
.dmg__card:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--ln);transform-origin:left}
.dmg__card--lead:before{background:var(--ac)}
.dmg__t{font:800 clamp(1.75rem,2.5vw,2.6rem)/.98 var(--f-display);letter-spacing:-.03em;margin-top:.4rem}
.dmg__t .it{display:block}
.dmg__d{color:var(--mu);font-size:clamp(.98rem,.95rem + .12vw,1.06rem);line-height:1.5}
.dmg__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.dmg__tags li{padding:.55em .8em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ln);font:500 .82rem/1 var(--f-body);color:var(--tx)}
.dmg__card .link{margin-top:auto;align-self:flex-start}
.dmg__dots{display:none}

/* illustrations: small, real-feeling screens that show the result */
.viz{position:relative;height:clamp(200px,17vw,240px);background:#0b0907;border:1px solid var(--ln);overflow:hidden;display:grid;place-items:center}
.viz:after{content:"";position:absolute;inset:auto 0 0;height:40%;background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%);pointer-events:none}
.viz__url{position:absolute;top:.65rem;left:.8rem;z-index:2;font:600 max(.68rem,11px)/1 var(--f-mono);letter-spacing:.04em;color:var(--mu)}
.viz__url b{color:var(--tx);font-weight:600}

/* Instagram grid */
.ig{width:min(52%,160px);margin-top:1.5rem;position:relative;z-index:1}
.ig__top{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.ig__av{width:24px;height:24px;flex:none;border-radius:50%;background:radial-gradient(circle,#14110d 52%,transparent 54%),conic-gradient(#DBA46A,#955D2E,#F3EEE4,#DBA46A)}
.ig__bars{flex:1;display:grid;gap:4px}
.ig__bars u{display:block;height:4px;background:#f3eee433;border-radius:2px;width:70%}
.ig__bars u+u{width:42%;background:#f3eee41f}
.ig__live{font:700 .58rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#14110d;background:var(--ac);padding:.35em .55em;border-radius:3px}
.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ig__grid i{position:relative;aspect-ratio:1;background:#2a2219;overflow:hidden}
.ig__grid i:nth-child(3n+1){background:linear-gradient(150deg,#DBA46A,#955D2E)}
.ig__grid i:nth-child(3n){background:linear-gradient(150deg,#F3EEE4,#c4b296)}
.ig__grid i:nth-child(5){background:linear-gradient(200deg,#955D2E,#3b2616)}
.ig__grid i:first-child:before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-6px 0 0 -4px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff8ec}
.ig__grid i:first-child:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#fff8ec;transform-origin:left;transform:scaleX(.35)}

/* website */
.wb{position:relative;z-index:1;width:min(80%,280px);aspect-ratio:16/10.5;margin-top:1.2rem;background:#F3EEE4;border-radius:3px;padding:8% 8% 0;box-shadow:0 30px 50px -20px #000}
.wb__nav{display:flex;justify-content:space-between;margin-bottom:12%}
.wb__nav u{display:block;height:6px;width:26%;background:#15110d;border-radius:2px}
.wb__nav u+u{width:16%;background:#955D2E}
.wb__h{display:grid;gap:7px;margin-bottom:10%}
.wb__h u{display:block;height:11px;width:82%;background:#15110d;border-radius:2px}
.wb__h u+u{width:55%;background:#955D2E}
.wb__btn{display:inline-flex;align-items:center;gap:.4em;padding:.55em .85em;background:#1f9e55;color:#fff;font:700 max(.62rem,10px)/1 var(--f-body);border-radius:2px}
.wb__btn:before{content:"";width:.55em;height:.55em;border-radius:50%;background:#fff}
.wb__cur{position:absolute;left:24%;top:72%;width:16px;height:22px;background:#fff;clip-path:polygon(0 0,0 78%,24% 60%,42% 100%,58% 93%,40% 55%,72% 55%);filter:drop-shadow(0 2px 2px #0008)}
.wb__toast{position:absolute;right:-10%;top:-12%;display:flex;align-items:center;gap:.45em;padding:.5em .75em;border-radius:10px;background:#fff;color:#14110d;font:600 max(.64rem,10px)/1 var(--f-body);box-shadow:0 14px 30px -10px #000c;opacity:0}
.wb__toast b{width:.75em;height:.75em;border-radius:50%;background:#1f9e55}

/* PDF quote */
.pdf{position:relative;z-index:1;width:min(50%,170px);aspect-ratio:1/1.02;margin-top:1.5rem;background:#fff;padding:10% 10% 0;box-shadow:0 30px 50px -20px #000}
.pdf__head{display:flex;align-items:center;gap:.5em;margin-bottom:14%}
.pdf__logo{width:16px;height:16px;background:#955D2E}
.pdf__ttl{font:700 max(.72rem,11px)/1 var(--f-serif);color:#15110d}
.pdf__rows{display:grid;gap:9px}
.pdf__rows li,.pdf__tot{display:flex;justify-content:space-between;align-items:center;gap:10%}
.pdf__rows u,.pdf__tot u{display:block;height:5px;flex:1;background:#d9d1c4;border-radius:2px;transform-origin:left}
.pdf__rows b,.pdf__tot b{display:block;height:5px;width:22%;background:#8d8476;border-radius:2px}
.pdf__tot{margin-top:12%;padding-top:9%;border-top:1px solid #d9d1c4}
.pdf__tot u{background:#15110d;flex:.6}
.pdf__tot b{background:#955D2E;height:7px;width:30%}
.pdf__ok{position:absolute;right:-16%;bottom:12%;display:flex;align-items:center;gap:.4em;padding:.5em .7em;background:#14110d;color:#F3EEE4;font:700 max(.62rem,10px)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ac);opacity:0}
.pdf__ok:before{content:"";width:.5em;height:.3em;border:solid var(--ac);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-.1em)}

/* motion: each screen plays what the service does, only when on screen */
@media(prefers-reduced-motion:no-preference){
html.js .dmg__card:before{transform:scaleX(0);transition:transform 1s var(--ease)}
html.js .dmg__card.is-in:before{transform:none}
html.js .ig__grid i{opacity:0;transform:scale(.55)}
html.js .is-in .ig__grid i{animation:tile .55s var(--ease) calc(.25s + var(--d) * .11s) forwards}
html.js .is-in .ig__grid i:first-child:after{animation:reel 4s linear 1.4s infinite}
html.js .wb__cur{opacity:0}
html.js .is-in .wb__cur{animation:cur 6s var(--ease) .6s infinite}
html.js .is-in .wb__btn{animation:press 6s var(--ease) .6s infinite}
html.js .is-in .wb__toast{animation:toast 6s var(--ease) .6s infinite}
html.js .pdf__rows u,html.js .pdf__tot u{transform:scaleX(0)}
html.js .pdf__rows b,html.js .pdf__tot b,html.js .pdf__logo,html.js .pdf__ttl{opacity:0}
html.js .is-in .pdf__logo,html.js .is-in .pdf__ttl{animation:fade .5s var(--ease) .3s forwards}
html.js .is-in .pdf__rows li:nth-child(1) u{animation:line .6s var(--ease) .7s forwards}
html.js .is-in .pdf__rows li:nth-child(2) u{animation:line .6s var(--ease) 1s forwards}
html.js .is-in .pdf__rows li:nth-child(3) u{animation:line .6s var(--ease) 1.3s forwards}
html.js .is-in .pdf__rows li:nth-child(1) b{animation:fade .4s var(--ease) 1s forwards}
html.js .is-in .pdf__rows li:nth-child(2) b{animation:fade .4s var(--ease) 1.3s forwards}
html.js .is-in .pdf__rows li:nth-child(3) b{animation:fade .4s var(--ease) 1.6s forwards}
html.js .is-in .pdf__tot u{animation:line .6s var(--ease) 1.8s forwards}
html.js .is-in .pdf__tot b{animation:fade .4s var(--ease) 2.2s forwards}
html.js .is-in .pdf__ok{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 2.6s forwards}
}
@media(prefers-reduced-motion:reduce){.wb__toast,.pdf__ok{opacity:1}}
@keyframes tile{to{opacity:1;transform:none}}
@keyframes reel{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fade{to{opacity:1}}
@keyframes line{to{transform:none}}
@keyframes stamp{from{opacity:0;transform:scale(1.4) rotate(-6deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes cur{0%{opacity:0;left:96%;top:104%}12%{opacity:1}38%{left:24%;top:72%;transform:none}44%{left:24%;top:72%;transform:scale(.82)}50%{left:24%;top:72%;transform:none}82%{opacity:1;left:24%;top:72%}92%,100%{opacity:0;left:24%;top:72%}}
@keyframes press{0%,40%,50%,100%{transform:none}44%{transform:scale(.94)}}
@keyframes toast{0%,46%{opacity:0;transform:translateY(8px)}54%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-4px)}}

@media(max-width:900px){
.dmg__track{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.dmg__track::-webkit-scrollbar{display:none}
.dmg__card{flex:0 0 min(84%,400px);scroll-snap-align:start}
.dmg__dots{display:flex;justify-content:center;gap:.25rem;margin-top:1rem}
.dmg__dots button{position:relative;width:32px;height:32px}
.dmg__dots button:before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ln);transition:background .3s,width .3s,margin .3s;}
.dmg__dots button[aria-current=true]:before{width:22px;margin-left:-11px;border-radius:4px;background:var(--ac)}
.viz{height:210px}
.ig{width:min(52%,138px)}
}

/* ---------- hero: the phone alternates between the site and an Instagram Reel ---------- */
.ph-ig{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;padding-top:15cqw;background:#fff;color:#15110d;opacity:0;pointer-events:none}
.ph-ig__top{display:flex;align-items:center;gap:3cqw;padding:0 6cqw 4cqw}
.ph-ig__av{width:11cqw;height:11cqw;flex:none;border-radius:50%;background:radial-gradient(circle,var(--m-acc) 50%,#fff 53% 62%,transparent 64%),conic-gradient(#DBA46A,#955D2E,var(--m-acc),#DBA46A)}
.ph-ig__name{flex:1;min-width:0;font:700 5.6cqw/1 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-ig__tag{font:700 4.4cqw/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--m-acc)}
.ph-ig__media{position:relative;flex:1;display:flex;align-items:flex-end;padding:8cqw 7cqw 11cqw;overflow:hidden;background:linear-gradient(165deg,var(--m-acc),var(--m-acc2))}
.ph-ig__txt{position:relative;color:#fff;font-family:var(--m-ff);font-weight:var(--m-fw);text-transform:var(--m-tt);letter-spacing:var(--m-ls);font-size:11cqw;line-height:1;transition:opacity .3s}
.ph-ig__txt em{font-style:italic;font-weight:500}
.swap .ph-ig__txt,.swap .ph-ig__name{opacity:0}
.ph-ig__play{position:absolute;left:50%;top:38%;width:20cqw;height:20cqw;margin:-10cqw 0 0 -10cqw;border-radius:50%;background:#ffffff38}
.ph-ig__play:before{content:"";position:absolute;left:40%;top:30%;border-style:solid;border-width:4.6cqw 0 4.6cqw 7cqw;border-color:transparent transparent transparent #fff}
.ph-ig__bar{position:absolute;left:0;right:0;bottom:0;height:1.4cqw;background:#ffffff47}
.ph-ig__bar b{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(.3)}
.ph-ig__act{display:flex;gap:5cqw;padding:5cqw 6cqw 10cqw}
.ph-ig__act i{width:7.5cqw;height:7.5cqw;border:1.5px solid #15110d}
.ph-ig__heart{border-radius:50% 50% 0 50%;transform:rotate(45deg) scale(.82)}
.ph-ig__com{border-radius:50%}
.ph-ig__share{border-radius:2px;transform:skew(-12deg) scale(.86)}
@media(prefers-reduced-motion:no-preference){
.js .hero .ph-ig{animation:phig 11s var(--ease) 3.5s infinite}
.js .hero .ph-ig__bar b{animation:igbar 11s linear 3.5s infinite}
}
@keyframes phig{0%,40%{opacity:0;transform:translateY(5%)}47%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes igbar{0%,45%{transform:scaleX(0)}90%,100%{transform:scaleX(1)}}

/* ---------- marketing plans ---------- */
.prow__price .mk__mo{margin:.35rem 0 0}
@media(max-width:640px){.prow__price .mk__mo{margin:0}}
@media(max-width:480px){.tabs button{padding-inline:.85em}}

/* ---------- hero headline + header ---------- */
.hero__h{font-size:clamp(3rem,6.5vw,110px)}
@media(max-width:1000px){.hero__h{font-size:clamp(2.5rem,12.8vw,8rem)}}
.hdr__cta{white-space:nowrap}
@media(max-width:380px){.hdr__cta{padding-inline:.75em;font-size:.8rem}}

/* coin fallback without 3D */
.cf__sites{margin-top:3cqw;font-size:17cqw}