/* M4.mov — site v2 (inspirado na Sand). Vermelho: traço do hero, REC, botões principais, palavra de destaque dos títulos, etiquetas com ponto, Pro com IA e hover dos links. */
:root{
  --bg:#000;--fg:#fff;--mut:#9b9b9b;--dim:#6f6f6f;--line:rgba(255,255,255,.16);--line2:rgba(255,255,255,.7);
  --red:#D22F27;--cream:#f3eee8;--ink:#0d0d0d;
  --display:'Poppins',system-ui,sans-serif;--sans:'Open Sans',system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px);--max:1440px;--r:16px;
  --gut:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.m4-skip{position:absolute;left:-9999px;top:8px;z-index:200;padding:10px 16px;background:#fff;color:#000;border-radius:8px}
.m4-skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tipografia */
.t-xl,.t-l,.t-m{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.t-xl{font-size:clamp(42px,8.4vw,150px)}
.t-l{font-size:clamp(36px,6.2vw,104px)}
.t-m{font-size:clamp(30px,3.4vw,54px);line-height:1}
.lead{margin:0;max-width:34ch;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#cfcfcf}
.mut{color:var(--mut)}
.link{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:16px;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .25s}
.link:hover{color:var(--red)}

/* toques vermelhos (mescla com o site antigo) */
.acc{color:var(--red)}
::selection{background:var(--red);color:#fff}
.kick{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-family:var(--display);font-weight:500;font-size:14px;color:var(--mut)}
.sec-cream .kick{color:#5d5a55}
.kick i{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}
.btn.btn-red{background:var(--red);color:#fff}
.price.hot .v,.card.hl .v{color:var(--red)}
.price.hot h3::after,.card.hl h2::after{content:"Mais pedido";margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--red);color:#fff;font-family:var(--sans);font-weight:600;font-size:11px;vertical-align:3px}
.cards .card.hl{border-color:var(--red)}
.foot-menu a:hover,.foot-info a:hover,.m4-nav a:hover,.contacts a:hover{color:var(--red);opacity:1}
.m4-nav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--red)}
.m4-opt.on{box-shadow:inset 0 -3px 0 var(--red)}
.reel-sound[aria-pressed=true]{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}

/* seções */
.sec{padding:clamp(88px,12vw,180px) var(--gut)}
.sec-cream{background:var(--cream);color:var(--ink)}
.sec-cream .lead,.sec-cream .mut{color:#5d5a55}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(48px,6vw,88px);flex-wrap:wrap}

/* cabeçalho */
.m4-head{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut);transition:background .35s,padding .35s}
.m4-head.solid{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px}
/* logo M4//MOV: SVG preenchido por marca/logo-anim.js em [data-m4-logo] */
.m4-head .m4-logo{display:block;position:relative;z-index:2;width:160px}
.m4-nav{display:flex;gap:40px;font-family:var(--display);font-weight:500;font-size:15px}
.m4-nav a{opacity:.75;transition:opacity .25s}
.m4-nav a:hover,.m4-nav a[aria-current]{opacity:1}
.m4-burger{display:none;position:relative;z-index:2;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer}
.m4-burger span{position:absolute;left:11px;right:11px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,top .3s}
.m4-burger span:first-child{top:17px}.m4-burger span:last-child{top:25px}
.m4-head.open .m4-burger span:first-child{top:21px;transform:rotate(45deg)}
.m4-head.open .m4-burger span:last-child{top:21px;transform:rotate(-45deg)}

/* botão principal (único vermelho) */
.m4-fab{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:90;display:flex;align-items:center;gap:10px;height:56px;padding:0 24px 0 20px;border-radius:999px;background:var(--red);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;box-shadow:0 16px 40px -12px rgba(0,0,0,.7);transition:transform .3s}
.m4-fab:hover{transform:translateY(-2px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;background:#fff;color:#000;font-family:var(--display);font-weight:600;font-size:15px;border:0;cursor:pointer;transition:opacity .25s}
.btn:hover{opacity:.85}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px var(--gut) clamp(40px,6vw,72px);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.7)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%)}
.hero-vf{position:absolute;z-index:-1;pointer-events:none;inset:clamp(88px,9vw,120px) var(--gut) clamp(24px,3vw,40px)}
.hero-vf i{position:absolute;width:clamp(28px,3vw,48px);height:clamp(28px,3vw,48px);border:0 solid rgba(255,255,255,.75)}
.hero-vf i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:6px}
.hero-vf i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:6px}
.hero-vf i:nth-child(3){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:6px}
.hero-vf i:nth-child(4){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:6px}
.hero h1{max-width:12ch}
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-3%;bottom:-.16em;width:106%;height:.32em;overflow:visible}
.mark path{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-foot{display:flex;align-items:flex-end;gap:clamp(24px,6vw,96px);margin-top:clamp(32px,5vw,64px);flex-wrap:wrap}
.hero-foot p{margin:0;max-width:30ch;font-size:clamp(16px,1.4vw,19px);color:#d6d6d6}

/* PORTFÓLIO */
.work{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:clamp(32px,5vw,96px);align-items:center}
.work-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,clamp(140px,19vw,300px)));gap:clamp(12px,1.6vw,24px)}
.reel{margin:0}
.reel-v{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:#111}
.reel-v video{width:100%;height:100%;object-fit:cover}
.reel-sound{position:absolute;right:12px;top:12px;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;cursor:pointer}
.reel-sound[aria-pressed=true]{background:#fff;color:#000}
.reel figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding-top:14px;font-family:var(--display);font-weight:500;font-size:16px}
.reel figcaption span+span{color:var(--mut);font-weight:400}

/* VALORES (linha simples) */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(0,0,0,.18)}
.price{display:flex;flex-direction:column;gap:12px;padding:32px 28px 8px 0}
.price+.price{padding-left:28px;border-left:1px solid rgba(0,0,0,.18)}
.price h3{margin:0;font-family:var(--display);font-weight:500;font-size:20px}
.price .v{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.4vw,68px);line-height:1;letter-spacing:-.03em}
.price .v small{font-size:.38em;font-weight:500;margin-right:4px;letter-spacing:0;vertical-align:.9em}
.price .v.txt{font-size:clamp(26px,2.4vw,36px);padding-top:.25em}
.price p{margin:0;font-size:15px;line-height:1.5;color:#5d5a55}
.price .link{margin-top:auto;align-self:flex-start;font-size:15px}
.price-note{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;font-size:15px;color:#5d5a55}

/* RODAPÉ */
.foot{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) var(--gut) 0;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:48px;align-items:start}
.foot-menu{display:flex;flex-direction:column;gap:4px;font-family:var(--display);font-weight:500;font-size:clamp(34px,4.2vw,60px);line-height:1.12;letter-spacing:-.02em}
.foot-menu a{transition:opacity .25s}.foot-menu a:hover{opacity:.55}
.foot-info{display:flex;flex-direction:column;gap:6px;font-size:16px;color:#cfcfcf}
.foot-info a:hover{color:#fff}
.rec{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:15px}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.clock{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,40px);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:6px}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(64px,8vw,120px);padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.foot-bar a:hover{color:#fff}
.foot-giant{width:calc(100% + 2px);margin:clamp(40px,5vw,72px) 0 -3.2%;color:#fff;line-height:0;user-select:none}
.foot-giant-b{display:none}

/* PÁGINAS INTERNAS */
.page-head{padding:clamp(150px,16vw,240px) var(--gut) clamp(64px,8vw,120px);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:14px;padding:28px 24px;border:1px solid var(--line);border-radius:var(--r)}
.card.hl{border-color:var(--line2)}
.card h2{margin:0;font-family:var(--display);font-weight:500;font-size:22px}
.card .v{font-family:var(--display);font-weight:700;font-size:clamp(40px,3.6vw,56px);line-height:1;letter-spacing:-.03em}
.card .v small{font-size:.38em;font-weight:500;margin-right:4px;letter-spacing:0;vertical-align:.9em}
.card .v.txt{font-size:30px;padding-top:.3em}
.card ul{list-style:none;margin:8px 0 20px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:#cfcfcf}
.card .link{margin-top:auto;align-self:flex-start;font-size:15px}
.card .tag{font-size:14px;color:var(--mut)}
.note{margin:40px 0 0;font-size:15px;color:var(--mut)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps div{border-top:1px solid rgba(0,0,0,.2);padding-top:20px}
.steps b{display:block;font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:8px}
.steps p{margin:0;font-size:15px;color:#5d5a55}
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,20px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:26px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 0 24px;max-width:56ch;color:#bdbdbd;font-size:16px}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.member{margin:0}
.member img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);filter:grayscale(1);transition:filter .6s}
.member:hover img{filter:grayscale(0)}
.member figcaption{padding-top:16px}
.member b{display:block;font-family:var(--display);font-weight:600;font-size:20px}
.member span{display:block;font-size:15px;color:var(--mut)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.stats div{border-top:1px solid rgba(0,0,0,.2);padding-top:20px;font-size:15px;color:#5d5a55}
.stats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(56px,7vw,110px);line-height:1;letter-spacing:-.04em;color:var(--ink)}

/* FORMULÁRIO em grade */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.cell{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:#000;min-width:0}
.cell.full{grid-column:1/-1}
.cell label,.opts legend,.lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#d9d9d9}
.cell input{width:100%;padding:4px 0;border:0;background:transparent;font-size:18px;outline:none}
.cell input::placeholder{color:#6a6a6a}
.cell:focus-within{background:#0d0d0d}
.cell.bad{background:#1a1a1a}
.cell.bad label::after{content:" · obrigatório";color:#fff}
.opts{margin:0;padding:0;border:0;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line2)}
.opts legend{float:left;width:100%;grid-column:1/-1;padding:18px 20px 12px;background:#000}
.m4-opt{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 20px 18px;background:#000;cursor:pointer;transition:background .25s,color .25s}
.m4-opt input{position:absolute;opacity:0;pointer-events:none}
.m4-opt b{font-family:var(--display);font-weight:600;font-size:17px}
.m4-opt span{font-size:14px;color:var(--mut)}
.m4-opt.on{background:#fff;color:#000}.m4-opt.on span{color:#555}
.m4-opt.focus{outline:2px solid #fff;outline-offset:-4px}
.form .btn{grid-column:1/-1;border-radius:0;min-height:72px;font-size:17px}
.form-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--mut)}
#m4-f-err{color:#fff}
.contacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(64px,8vw,112px)}
.contacts a,.contacts div{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:18px;font-family:var(--display);font-weight:500;font-size:18px;overflow-wrap:anywhere}
.contacts span{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--mut)}
.contacts a:hover{opacity:.7}

/* entrada suave */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* tablet */
@media (max-width:1024px){
  .work{grid-template-columns:1fr}
  .reels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prices,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price:nth-child(3){padding-left:0;border-left:0}
  .price:nth-child(n+3){border-top:1px solid rgba(0,0,0,.18);margin-top:24px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-menu{grid-column:1/-1;order:-1}
  .faq,.split{grid-template-columns:1fr}
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* celular */
@media (max-width:720px){
  body{font-size:16px}
  .m4-burger{display:block}
  .m4-nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);background:#000;font-size:44px;font-weight:600;letter-spacing:-.02em;text-transform:uppercase;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .m4-nav a{opacity:1}
  .m4-head.open{z-index:100;-webkit-backdrop-filter:none;backdrop-filter:none;background:#000}
  .m4-head.open .m4-nav{opacity:1;visibility:visible}
  .m4-head .m4-logo{width:128px}
  .m4-fab{height:52px;padding:0 20px 0 16px;font-size:14px}
  .hero{padding-bottom:96px}
  .hero-vf{inset:84px 10px 12px}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none}
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 78%;scroll-snap-align:center}
  .work{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .price,.price+.price{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;row-gap:6px;padding:22px 0;border-left:0;border-top:1px solid rgba(0,0,0,.18);margin-top:0}
  .price:first-child{border-top:0}
  .price h3{grid-column:1}.price .v{grid-column:2;grid-row:1 / span 2;font-size:40px}.price .v.txt{font-size:20px;text-align:right}
  .price p{grid-column:1}.price .link{grid-column:1/-1;justify-self:start;margin-top:6px}
  .cards{grid-template-columns:1fr}
  .steps,.stats{grid-template-columns:1fr;gap:24px}
  .team{grid-template-columns:1fr 1fr;gap:12px}
  .member b{font-size:17px}
  .form{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr 1fr}
  .contacts{grid-template-columns:1fr;gap:0}
  .contacts a,.contacts div{padding:16px 0}
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .foot-bar{flex-direction:column;padding-bottom:8px}
  .foot-giant{display:none}
  .foot-giant-b{display:block;width:100%;margin:40px 0 -6%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .mark path{stroke-dashoffset:0}
}
.m4-trail{position:fixed;inset:0;width:100%;height:100%;z-index:9000;pointer-events:none}