/* ===== HERO C aprovado (Despiorou) + base do site ===== */

:root{
  /* paleta: amostrada do retrato (parede creme, persiana, pele, jaleco) + o roxo das etiquetas dela */
  --papel:#f7efe4;
  --creme:oklch(94.5% 0.035 85);
  --manteiga:oklch(95% 0.05 100);
  --pessego:oklch(87% 0.065 50);
  --rosa-pele:oklch(84% 0.06 35);
  --lilas:oklch(86% 0.07 300);
  --tinta:#251a2c;
  --tinta-suave:#55485c;
  --roxo:#7a2cf5;
  --roxo-escuro:#5a17c9;
  --laser:#ff2a3c;
  --branco:#fffdf9;
  --f-titulo:"Anybody", "Arial Narrow", sans-serif;
  --f-texto:"Gantari", system-ui, sans-serif;
  --mola:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(1.25rem, 4.4vw, 4.5rem);
  --raio:.32rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--papel)}
body{font-family:var(--f-texto);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}

.hero{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;display:flex;flex-direction:column}

/* ---------- malha ---------- */
.malha{position:absolute;inset:0;z-index:-2;background:var(--papel);overflow:hidden}
.malha i{position:absolute;display:block;border-radius:50%;will-change:transform}
.malha .m1{width:70vmax;height:70vmax;left:42%;top:-28%;background:radial-gradient(closest-side in oklab, var(--lilas), color-mix(in oklab, var(--lilas) 0%, transparent));opacity:.85;animation:deriva1 34s ease-in-out infinite alternate}
.malha .m2{width:62vmax;height:62vmax;left:58%;top:30%;background:radial-gradient(closest-side in oklab, var(--pessego), color-mix(in oklab, var(--pessego) 0%, transparent));opacity:.8;animation:deriva2 38s ease-in-out infinite alternate}
.malha .m3{width:64vmax;height:64vmax;left:-24%;top:-30%;background:radial-gradient(closest-side in oklab, var(--manteiga), color-mix(in oklab, var(--manteiga) 0%, transparent));opacity:.95;animation:deriva3 30s ease-in-out infinite alternate}
.malha .m4{width:56vmax;height:56vmax;left:-12%;top:52%;background:radial-gradient(closest-side in oklab, var(--rosa-pele), color-mix(in oklab, var(--rosa-pele) 0%, transparent));opacity:.45;animation:deriva1 42s ease-in-out infinite alternate-reverse}
.malha .m5{width:40vmax;height:40vmax;left:30%;top:18%;background:radial-gradient(closest-side in oklab, var(--creme), color-mix(in oklab, var(--creme) 0%, transparent));opacity:.9;animation:deriva2 27s ease-in-out infinite alternate-reverse}
@keyframes deriva1{to{transform:translate3d(-6vmax,5vmax,0) scale(1.08)}}
@keyframes deriva2{to{transform:translate3d(5vmax,-6vmax,0) scale(.94)}}
@keyframes deriva3{to{transform:translate3d(7vmax,4vmax,0) scale(1.06)}}
.grao{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- etiqueta (a dos reels dela) ---------- */
.etq{display:inline-block;word-spacing:.14em;font-family:var(--f-titulo);font-variation-settings:"wdth" 62;font-weight:700;letter-spacing:.01em;line-height:1;
  background:var(--roxo);color:#fff;padding:.38em .55em .36em;border-radius:var(--raio);box-shadow:0 1px 0 rgb(0 0 0/.08),0 6px 14px -6px rgb(60 10 120/.45)}
.etq--branca{background:var(--branco);color:var(--roxo);box-shadow:0 1px 0 rgb(0 0 0/.06),0 6px 14px -8px rgb(60 30 40/.35)}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.4vw,1.75rem) var(--pad) 0;position:relative;z-index:3}
.marca{display:flex;align-items:baseline;gap:.5rem;text-decoration:none}
.marca b{font-family:var(--f-titulo);font-variation-settings:"wdth" 100;font-weight:760;font-size:1.06rem;letter-spacing:-.01em}
.marca span{font-size:.86rem;color:var(--tinta-suave)}
.topo nav{display:flex;align-items:center;gap:1.1rem;font-size:.92rem}
.topo nav a{text-decoration:none}
.topo .ig{font-size:.86rem}
.topo .tel{border-bottom:1.5px solid color-mix(in oklab, var(--roxo) 55%, transparent);padding-bottom:1px;font-weight:600}

/* ---------- palco ---------- */
.palco{flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:". adesivo" "titulo adesivo" "texto adesivo" ". adesivo";
  grid-template-rows:1fr auto auto 1.15fr;column-gap:clamp(1rem,3vw,3rem);align-items:start;padding:clamp(1.4rem,4.2vh,3.4rem) var(--pad) clamp(1.2rem,3vh,2.4rem)}

.chapeu{font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);display:flex;align-items:center;gap:.6rem;margin-bottom:clamp(.9rem,2.2vh,1.6rem)}
.chapeu::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--laser);box-shadow:0 0 0 3px color-mix(in oklab, var(--laser) 22%, transparent),0 0 14px 2px color-mix(in oklab, var(--laser) 55%, transparent)}

.titulo-area{grid-area:titulo;position:relative;z-index:2}
h1{font-family:var(--f-titulo);line-height:.86;letter-spacing:-.02em;color:var(--tinta)}
h1 .l1{display:block;font-weight:280;font-variation-settings:"wdth" 70;font-size:clamp(3rem,7.4vw,7.6rem);letter-spacing:-.01em}
h1 .l2{display:flex;align-items:flex-end;white-space:nowrap;font-weight:880;font-variation-settings:"wdth" 112;font-size:clamp(4.2rem,10.2vw,10.6rem);margin-top:.04em}
h1 .des{position:relative;z-index:2;font-size:.62em;font-weight:800;font-variation-settings:"wdth" 58;padding:.14em .2em .1em;margin:0 -.1em .1em -.04em;border-radius:.07em;
  transform:rotate(-7deg);transform-origin:60% 80%;letter-spacing:0;line-height:.9;
  box-shadow:0 .02em 0 rgb(0 0 0/.08),0 .14em .3em -.12em rgb(70 10 140/.55)}
h1 .piora{position:relative}
h1 .piora .ponto{color:var(--roxo)}
.sublinha{position:absolute;left:-.02em;right:.32em;bottom:-.12em;height:.22em;overflow:visible;pointer-events:none}
.sublinha path{fill:none;stroke:var(--roxo);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.9}

.texto-area{grid-area:texto;position:relative;z-index:2;max-width:39rem;margin-top:clamp(1.3rem,3.4vh,2.4rem)}
.fala{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.75rem}
.fala .etq{font-size:1.5rem;transform:rotate(2.5deg)}
.fala small{font-size:.95rem;color:var(--tinta-suave);font-style:italic}
.explica{font-size:clamp(1.06rem,1.25vw,1.2rem);line-height:1.45;font-weight:560;color:var(--tinta);max-width:34rem}
.apoio{margin-top:.75rem;font-size:clamp(.98rem,1.08vw,1.05rem);line-height:1.6;color:var(--tinta-suave);max-width:36rem}
.apoio strong{color:var(--tinta);font-weight:650}

.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:clamp(1.2rem,3vh,1.8rem)}
.btn{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;background:var(--roxo);color:#fff;font-family:var(--f-titulo);font-variation-settings:"wdth" 80;font-weight:720;font-size:1.12rem;letter-spacing:.01em;
  padding:1rem 1.4rem 1rem 1.15rem;border-radius:.45rem;box-shadow:0 2px 0 var(--roxo-escuro),0 14px 26px -12px rgb(90 20 200/.6);transform:rotate(-1.2deg);transition:transform .35s var(--mola),box-shadow .3s}
.btn:hover,.btn:focus-visible{transform:rotate(0) translateY(-2px);box-shadow:0 3px 0 var(--roxo-escuro),0 20px 30px -12px rgb(90 20 200/.7)}
.btn:focus-visible,.secundaria:focus-visible,.topo a:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.btn svg{width:1.3rem;height:1.3rem;flex:none}
.secundaria{font-size:.98rem;text-decoration:none;border-bottom:1.5px solid color-mix(in oklab, var(--tinta) 35%, transparent);padding-bottom:2px}

.provas{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:clamp(1.1rem,2.6vh,1.6rem);font-size:.88rem;color:var(--tinta-suave);list-style:none}
.provas li{display:flex;align-items:center;gap:.45rem}
.provas li::before{content:"";width:.42rem;height:.42rem;border-radius:2px;background:var(--roxo);transform:rotate(45deg)}
.provas b{color:var(--tinta);font-weight:650}

/* ---------- adesivo ---------- */
.adesivo-area{grid-area:adesivo;grid-row:1 / -1;position:relative;align-self:center;justify-self:center;width:min(100%, calc(76svh * .794));z-index:1}
.adesivo{position:relative;transform:rotate(3.5deg)}
.adesivo img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 1px rgb(60 30 40/.14)) drop-shadow(0 22px 26px rgb(70 30 50/.22))}
.adesivo .brilho{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(../img/c-retrato-adesivo-flow.webp) center/100% 100% no-repeat;mask:url(../img/c-retrato-adesivo-flow.webp) center/100% 100% no-repeat;
  background:linear-gradient(115deg,transparent 30%,rgb(255 255 255/.28) 44%,transparent 56%);background-size:250% 100%;background-position:120% 0}
.colada{position:absolute;z-index:2;white-space:nowrap}
.colada.nome{left:8%;bottom:9%;font-size:clamp(1rem,1.75vw,1.6rem);transform:rotate(-5deg);text-align:left;line-height:1.02}
.colada.nome small{display:block;font-size:.62em;font-weight:600;font-variation-settings:"wdth" 80;opacity:.92;margin-top:.22em;letter-spacing:.04em}
.colada.arroba{right:2%;top:47%;font-size:clamp(.92rem,1.3vw,1.18rem);transform:rotate(6deg);font-weight:760}
.colada.amor{right:-3%;bottom:24%;font-size:clamp(.9rem,1.25vw,1.12rem);transform:rotate(-3deg);background:oklch(90% .06 300);color:var(--roxo-escuro)}
.registro{position:absolute;left:0;right:0;bottom:-2.2rem;text-align:center;font-size:.8rem;letter-spacing:.06em;color:var(--tinta-suave)}

/* ---------- entrada: colagem com mola ---------- */
.js .entra{opacity:0}
.js.pronto .l1{animation:sobe .7s cubic-bezier(.2,.8,.2,1) .1s both}
.js.pronto .piora{animation:sobe .7s cubic-bezier(.2,.8,.2,1) .28s both}
.js.pronto .des{animation:bate .62s var(--mola) 1.05s both}
.js .sublinha path{opacity:0}
.js.pronto .sublinha path{animation:risca .7s cubic-bezier(.6,0,.2,1) 1.55s both}
.js.pronto .adesivo{animation:cola .9s var(--mola) .45s both}
.js.pronto .brilho{animation:reluz 1.4s ease-out 1.25s both}
.js.pronto .colada.nome{animation:bateNome .55s var(--mola) 1.5s both}
.js.pronto .colada.arroba{animation:bateArroba .55s var(--mola) 1.68s both}
.js.pronto .colada.amor{animation:bateAmor .55s var(--mola) 1.86s both}
.js.pronto .fala .etq{animation:bateFala .55s var(--mola) 2.0s both}
.js.pronto .texto-area>*:not(.fala){animation:sobe .7s cubic-bezier(.2,.8,.2,1) both}
.js.pronto .texto-area>.explica{animation-delay:2.1s}
.js.pronto .texto-area>.apoio{animation-delay:2.2s}
.js.pronto .texto-area>.acoes{animation-delay:2.3s}
.js.pronto .texto-area>.provas{animation-delay:2.4s}
.js.pronto .fala small{animation:sobe .6s ease 2.15s both}
.js.pronto .topo{animation:sobe .6s ease 0s both}
.js.pronto .registro{animation:sobe .6s ease 2.4s both}
.js.pronto .entra{opacity:1}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bate{0%{opacity:0;transform:translate(-.4em,-.9em) rotate(-24deg) scale(1.9)}55%{opacity:1}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
@keyframes cola{0%{opacity:0;transform:translate(6%,-5%) rotate(14deg) scale(1.12)}40%{opacity:1}100%{opacity:1;transform:rotate(3.5deg)}}
@keyframes reluz{from{background-position:120% 0}to{background-position:-60% 0}}
@keyframes bateNome{0%{opacity:0;transform:rotate(-20deg) scale(1.7)}60%{opacity:1}100%{opacity:1;transform:rotate(-5deg)}}
@keyframes bateArroba{0%{opacity:0;transform:rotate(22deg) scale(1.7)}60%{opacity:1}100%{opacity:1;transform:rotate(6deg)}}
@keyframes bateAmor{0%{opacity:0;transform:rotate(-18deg) scale(1.7)}60%{opacity:1}100%{opacity:1;transform:rotate(-3deg)}}
@keyframes bateFala{0%{opacity:0;transform:rotate(18deg) scale(1.6)}60%{opacity:1}100%{opacity:1;transform:rotate(2.5deg)}}
@keyframes risca{0%{opacity:0;stroke-dashoffset:1}2%{opacity:.9}100%{opacity:.9;stroke-dashoffset:0}}

/* ---------- notebook baixo ---------- */
@media (max-height:760px) and (min-width:981px){
  h1 .l1{font-size:clamp(2.6rem,6vw,5.6rem)}
  h1 .l2{font-size:clamp(3.8rem,8.4vw,8rem)}
  .apoio{display:none}
}

/* ---------- tablet e celular ---------- */
@media (max-width:980px){
  .palco{grid-template-columns:1fr;grid-template-areas:"titulo" "adesivo" "texto";grid-template-rows:auto;padding-top:clamp(1.1rem,3vh,2rem)}
  .adesivo-area{grid-row:auto;width:min(82%, 30rem);margin-top:clamp(1rem,3vw,1.6rem)}
  .registro{bottom:-1.9rem;font-size:.72rem;letter-spacing:.03em}
  .texto-area{margin-top:3.4rem;max-width:none}
  h1 .l1{font-size:clamp(2.7rem,12vw,5.6rem)}
  h1 .l2{font-size:clamp(3.6rem,17.6vw,8.6rem)}
  .colada.amor{right:-5%}
}
@media (max-width:560px){
  .topo .ig{display:none}
  .marca span{display:none}
  .chapeu{font-size:.72rem;letter-spacing:.11em;margin-bottom:.8rem}
  .adesivo-area{width:min(90%, 23rem)}
  .registro{letter-spacing:0;font-size:.7rem}
  .colada.nome{font-size:1rem;left:4%;bottom:7%}
  .colada.arroba{font-size:.86rem;right:-2%}
  .colada.amor{font-size:.82rem;right:-6%;bottom:22%}
  .fala .etq{font-size:1.3rem}
  .btn{width:100%;justify-content:center;transform:none}
  .acoes{gap:.9rem}
  .acoes .secundaria{margin:0 auto}
}
@media (max-width:374px){
  .topo .tel{font-size:.84rem}
  .marca b{font-size:.98rem}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .entra{opacity:1}
  .sublinha path{stroke-dashoffset:0!important;opacity:.9!important}
}

/* ===================================================================
   BASE DO SITE
   =================================================================== */
:root{
  --laser-quente:#ff7a5c;
  --violeta-luz:#8b5cff;
  --noite:#1a1024;
  --noite-2:#2a1638;
  --noite-texto:#f6ecf2;
  --noite-suave:#cbb9cf;
  --respiro:clamp(5rem,12vh,9rem);
  --sobe:cubic-bezier(.2,.8,.2,1);
}
html{scroll-behavior:smooth}
img{max-width:100%}
:focus-visible{outline:3px solid var(--roxo);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grao-pagina{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")}
.hero .grao{display:none}

/* ---------- o ponto de laser (motivo central) ---------- */
.laser{position:absolute;width:var(--t,14px);height:var(--t,14px);margin:calc(var(--t,14px) / -2) 0 0 calc(var(--t,14px) / -2);border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle, #fff 0 32%, #ffd9dc 42%, var(--laser) 60%, color-mix(in oklab, var(--laser) 0%, transparent) 72%);
  box-shadow:0 0 calc(var(--t,14px)*.9) calc(var(--t,14px)*.35) color-mix(in oklab, var(--laser) 70%, transparent),0 0 calc(var(--t,14px)*4) calc(var(--t,14px)*1.2) color-mix(in oklab, var(--laser-quente) 32%, transparent)}
.laser.pulsa{animation:pulsaLaser 2.4s ease-in-out infinite}
@keyframes pulsaLaser{50%{transform:scale(.82);opacity:.82}}

/* ponto do hero: escreve o sublinhado e acende o ponto final */
.hero-laser{opacity:0;transition:opacity .25s}
.hero-laser.on{opacity:1}
h1 .piora .ponto{position:relative;transition:color .4s,text-shadow .4s}
h1 .piora .ponto.aceso{color:var(--laser);text-shadow:0 0 .12em color-mix(in oklab,var(--laser) 80%,transparent),0 0 .4em color-mix(in oklab,var(--laser-quente) 55%,transparent);animation:respiraPonto 2.6s ease-in-out infinite}
@keyframes respiraPonto{50%{text-shadow:0 0 .06em color-mix(in oklab,var(--laser) 60%,transparent),0 0 .2em color-mix(in oklab,var(--laser-quente) 30%,transparent)}}

/* ---------- seções ---------- */
.secao{position:relative;padding:var(--respiro) var(--pad);isolation:isolate}
.secao-titulo{font-family:var(--f-titulo);font-weight:880;font-variation-settings:"wdth" 104;font-size:clamp(2.5rem,5.6vw,5.4rem);line-height:.9;letter-spacing:-.02em;color:var(--tinta)}
.secao-titulo .fino{font-weight:280;font-variation-settings:"wdth" 70;letter-spacing:-.01em}
.olho{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:1.2rem}
.olho::before{content:"";width:.46rem;height:.46rem;border-radius:50%;background:var(--laser);box-shadow:0 0 0 3px color-mix(in oklab,var(--laser) 22%,transparent),0 0 12px 2px color-mix(in oklab,var(--laser) 55%,transparent)}

/* revelação por rolagem (só com JS) */
.js .rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--sobe),transform .9s var(--sobe)}
.js .rev.vis{opacity:1;transform:none}
.js .rev-cola{opacity:0;transform:rotate(var(--r,0deg)) scale(1.6) rotate(12deg);transition:opacity .35s,transform .6s var(--mola)}
.js .rev-cola.vis{opacity:1;transform:rotate(var(--r,0deg))}

/* botão flutuante de WhatsApp (celular) */
.zap-fixo{position:fixed;right:1rem;bottom:1rem;z-index:50;display:none;align-items:center;gap:.5rem;text-decoration:none;background:var(--roxo);color:#fff;font-family:var(--f-titulo);font-variation-settings:"wdth" 80;font-weight:720;
  padding:.85rem 1.1rem .85rem .95rem;border-radius:999px;box-shadow:0 2px 0 var(--roxo-escuro),0 14px 26px -10px rgb(90 20 200/.6);transform:translateY(140%);transition:transform .45s var(--mola)}
.zap-fixo svg{width:1.25rem;height:1.25rem}
.zap-fixo .laser{position:relative;margin:0;--t:9px;display:inline-block}
.zap-fixo.mostra{transform:none}
@media (max-width:760px){.zap-fixo{display:inline-flex}}