/* Gestar Organics · "A página que gesta com você" */
:root{
  --pele:#F3E1D6; --pele2:#E4C3B1; --cacau:#4E3523; --cacau2:#7A5A45; --framb:#B8445E; --framb2:#9C3550; --leite:#FFF8F3;
  --w:550;           /* peso do Pally: cresce com a fase */
  --m:clamp(20px,5vw,90px);
  --mola:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.65,0,.35,1); --expo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--pele);color:var(--cacau);font-family:"General Sans",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--framb);outline-offset:4px;border-radius:999px}
::selection{background:rgba(184,68,94,.2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tipografia */
.h2,.assinatura,.pergunta,.abre__msg,.selo__num,.confianca__frase,.momento figcaption{font-family:"Pally",system-ui,sans-serif;font-weight:var(--w);letter-spacing:-.015em}
.h2{font-size:clamp(36px,5.2vw,86px);line-height:1.02}
.sobre{font-size:14px;letter-spacing:.01em;color:var(--cacau2);margin-bottom:16px}
.word{display:inline-block;will-change:transform,filter,opacity}

/* pílulas macias que respiram */
.pill{--bg:var(--leite);--fg:var(--cacau);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--bg);color:var(--fg);
  text-decoration:none;font-weight:500;font-size:16px;line-height:1.1;white-space:nowrap;box-shadow:0 14px 34px -20px rgba(78,53,35,.45),inset 0 1px 0 rgba(255,255,255,.7);
  animation:respira 4s ease-in-out infinite;transition:background .5s,color .5s,transform .6s var(--mola)}
.pill:hover{transform:scale(1.04);animation-play-state:paused}
.pill--framboesa{--bg:var(--framb);--fg:#FFF8F3;box-shadow:0 18px 38px -18px rgba(184,68,94,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.pill--framboesa:hover{--bg:var(--framb2)}
.pill--g{font-size:19px;min-height:64px;padding:18px 36px}
.pill--p{min-height:48px;padding:12px 20px;font-size:15px}
@keyframes respira{50%{scale:1.02}}

/* topo */
.topo{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px var(--m);pointer-events:none}
.topo>*{pointer-events:auto}
.topo__logo img{height:30px;width:auto}
.pilula-fase{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;background:rgba(255,248,243,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:14.5px;box-shadow:0 10px 30px -18px rgba(78,53,35,.5);transition:transform .6s var(--mola)}
.pilula-fase:hover{transform:scale(1.04)}
.pilula-fase[hidden]{display:none}
.pilula-fase b{font-weight:600;color:var(--framb)}

/* abertura / escolha */
.abre{position:relative;height:100svh;min-height:600px;overflow:hidden}
.abre__svg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.anel text{font-family:"Pally",system-ui,sans-serif;font-size:21px;font-weight:420;fill:var(--cacau);cursor:pointer;transition:font-weight .5s var(--ease),fill .5s;letter-spacing:.01em;outline:none}
.anel text.on,.anel text:hover,.anel text:focus-visible{font-weight:700;fill:var(--framb)}
.anel .sep{fill:var(--cacau2);opacity:.5;cursor:default;font-weight:400}
.abre__txt{position:absolute;left:0;right:0;top:calc(84px + 2svh);text-align:center;padding:0 var(--m);pointer-events:none}
.assinatura{font-size:clamp(34px,4.6vw,74px);line-height:1.05}
.pergunta{font-size:clamp(19px,1.7vw,26px);font-weight:450;margin-top:14px;color:var(--cacau2);letter-spacing:0}
.ver-tudo{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:14.5px;color:var(--cacau2);text-decoration:underline;text-underline-offset:4px;min-height:48px;padding:0 16px}
.fases-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);list-style:none}
.fases-sr button:focus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;clip:auto;background:var(--leite);padding:12px 20px;border-radius:999px}
.abre__fase{position:absolute;left:var(--m);bottom:clamp(40px,10svh,120px);max-width:min(560px,40vw);opacity:0;visibility:hidden}
.abre__rot{font-size:14px;color:var(--framb);font-weight:600;margin-bottom:14px}
.abre__msg{font-size:clamp(32px,3.6vw,58px);line-height:1.06;margin-bottom:26px}
.abre__desce{font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.abre.escolhida .abre__txt,.abre.escolhida .ver-tudo{opacity:0;visibility:hidden}
.abre__txt{transition:opacity .7s var(--ease),visibility .7s}

/* fase */
.sec{position:relative;padding:clamp(90px,12vw,190px) var(--m)}
.troca{will-change:opacity,filter}
.fase__t{max-width:14ch}
.produtos{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(22px,4vw,70px) clamp(20px,4vw,60px);margin:clamp(50px,7vw,110px) 0 60px}
.prod{width:clamp(160px,20vw,300px);display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform}
.prod:nth-child(2){margin-top:90px}.prod:nth-child(3){margin-top:-20px}.prod:nth-child(4){margin-top:120px}
.prod--destaque{width:clamp(200px,26vw,380px)}
.prod__f{position:relative;width:100%;aspect-ratio:1;background:#fff;overflow:hidden;box-shadow:0 30px 50px -34px rgba(78,53,35,.45)}
.prod__f img{width:100%;height:100%;object-fit:cover}
.prod__f--png img{object-fit:cover;object-position:50% 45%}
.prod__n{font-family:"Pally",system-ui,sans-serif;font-weight:calc(var(--w) - 50);font-size:clamp(17px,1.5vw,22px);line-height:1.2;margin:18px 0 12px;max-width:16ch}
.prod .pill{min-height:46px;padding:10px 20px;font-size:14.5px}
.fase__acoes{display:flex;justify-content:center}
.semana{margin:90px auto 0;max-width:560px;text-align:center}
.semana__l{display:block;font-family:"Pally",system-ui,sans-serif;font-weight:var(--w);font-size:clamp(22px,2.2vw,30px);margin-bottom:22px}
.semana__ctl{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.semana__n{font-weight:600;min-width:6.5em;color:var(--framb)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:48px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--framb) var(--p,57%),var(--pele2) var(--p,57%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:30px;margin-top:-10px;border-radius:52% 48% 46% 54%/58% 50% 50% 42%;background:var(--leite);box-shadow:0 6px 18px -6px rgba(78,53,35,.6)}
input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:var(--pele2)}
input[type=range]::-moz-range-progress{height:10px;border-radius:999px;background:var(--framb)}
input[type=range]::-moz-range-thumb{width:34px;height:30px;border:0;border-radius:52% 48% 46% 54%/58% 50% 50% 42%;background:var(--leite);box-shadow:0 6px 18px -6px rgba(78,53,35,.6)}

/* ritual */
.ritual{position:relative}
.ritual__palco{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#2a1c14}
.ritual__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:brightness(.72);animation:pulso 8s ease-in-out infinite}
@keyframes pulso{50%{transform:scale(1.015)}}
.ritual__gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:pan-y;cursor:crosshair}
.ritual.gl .ritual__foto{visibility:hidden}
.ritual__txt{position:absolute;left:var(--m);top:clamp(90px,14svh,150px);z-index:3;color:var(--leite);pointer-events:none}
.ritual__txt .h2{text-shadow:0 2px 30px rgba(42,28,20,.45)}
.ritual__auto{pointer-events:auto;margin-top:22px;font-size:15px;color:var(--leite);text-decoration:underline;text-underline-offset:4px;min-height:48px}
.ritual__fim{position:absolute;right:var(--m);bottom:clamp(40px,8svh,90px);z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;visibility:hidden;color:var(--leite)}
.ritual__packs{display:flex;align-items:flex-end;margin-bottom:12px}
.pack{width:clamp(110px,12vw,190px);height:auto;filter:drop-shadow(0 24px 30px rgba(20,10,5,.5))}
.pack--oleo{border-radius:46% 54% 50% 50%/60% 58% 42% 40%;aspect-ratio:4/5;object-fit:cover;margin-right:-18px;transform:rotate(-6deg)}
.pack--kit{width:clamp(130px,14vw,220px);aspect-ratio:4/5;object-fit:cover;border-radius:54% 46% 44% 56%/48% 52% 48% 52%}
.ritual__nomes{font-size:14.5px;margin-bottom:18px;text-shadow:0 1px 14px rgba(0,0,0,.4)}

/* texturas */
.texturas{padding-top:clamp(70px,9vw,140px)}
.texturas__hero{position:relative;width:min(100%,880px);margin:0 auto;aspect-ratio:4/5}
.texturas__img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 60% 56% at 50% 52%,#000 62%,transparent 100%)}
.texturas__pouso{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pouso{fill:none;stroke:var(--cacau);stroke-width:1.6;opacity:.7}
.texturas__t{position:absolute;left:0;right:0;bottom:4%;text-align:center}
.lupa-bloco{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;margin-top:clamp(70px,9vw,150px)}
.lupa{position:relative;aspect-ratio:2/3;cursor:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lupa__base{width:100%;height:100%;object-fit:cover;border-radius:46% 54% 44% 56%/38% 40% 60% 62%}
.lupa__aberracao{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;filter:drop-shadow(2px 0 0 rgba(255,40,90,.45)) drop-shadow(-2px 0 0 rgba(40,170,255,.4)) drop-shadow(0 18px 30px rgba(78,53,35,.35))}
.lupa__lente{position:absolute;left:0;top:0;width:220px;height:220px;overflow:hidden;will-change:transform,clip-path}
.lupa__macro{position:absolute;left:0;top:0;max-width:none;will-change:transform}
.lupa__dica{position:absolute;left:0;right:0;bottom:-38px;text-align:center;font-size:14px;color:var(--cacau2)}
.momentos{display:flex;flex-direction:column;gap:clamp(24px,4vw,60px)}
.momento{display:flex;align-items:center;gap:22px}
.momento:nth-child(2){margin-left:18%}.momento:nth-child(3){margin-left:6%}
.momento__f{position:relative;width:clamp(120px,13vw,200px);aspect-ratio:1;overflow:hidden;flex:none}
.m1 .momento__f{border-radius:62% 38% 54% 46%/48% 60% 40% 52%}
.m2 .momento__f{border-radius:40% 60% 62% 38%/56% 44% 56% 44%}
.m3 .momento__f{border-radius:54% 46% 38% 62%/42% 52% 48% 58%}
.momento__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gota img{opacity:0;transition:opacity .35s ease}
.gota img.on{opacity:1}
.momento figcaption{font-size:clamp(30px,3.4vw,54px)}

/* presente */
.presente{overflow:hidden;text-align:center}
.laco{display:block;width:min(100%,760px);height:auto;margin:0 auto -6%}
.presente__txt .h2{max-width:13ch;margin:0 auto}
.bones{margin:56px calc(-1 * var(--m)) 50px;overflow:hidden}
.bones__trilho{display:flex;gap:22px;width:max-content;animation:desliza 42s linear infinite}
.bones:hover .bones__trilho,.bones.pausa .bones__trilho{animation-play-state:paused}
.bones img{width:clamp(190px,22vw,320px);aspect-ratio:16/10;object-fit:cover;border-radius:999px;background:var(--leite)}
@keyframes desliza{to{transform:translateX(-50%)}}
.presente__links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:760px;margin:0 auto}
.presente__links .pill--framboesa{flex-basis:100%;max-width:420px;margin:0 calc(50% - 210px) 8px}

/* confiança */
.confianca{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:center}
.selo{position:relative;aspect-ratio:1;width:100%;max-width:760px}
.selo__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.selo__linha{fill:none;stroke:var(--cacau);stroke-width:1.4}
.selo__txt{font-family:"General Sans",system-ui,sans-serif;font-size:27px;font-weight:500;fill:var(--cacau);letter-spacing:.02em}
.selo__centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.selo__num{font-size:clamp(56px,7.6vw,128px);line-height:.95}
.selo__num::before{content:"+"}
.selo__rot{font-size:18px;margin-top:6px}
.selo__estrela{font-family:"Pally",system-ui,sans-serif;font-weight:var(--w);font-size:clamp(26px,2.6vw,40px);margin-top:26px;color:var(--framb)}
.selo__estrela span{font-family:"General Sans",system-ui,sans-serif;font-size:15px;color:var(--cacau2);font-weight:500}
.confianca__foto{overflow:hidden;border-radius:58% 42% 50% 50%/46% 54% 46% 54%;aspect-ratio:4/5}
.confianca__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 2.2s var(--ease)}
.confianca__foto.cor img{filter:grayscale(0)}
.confianca__frase{grid-column:1/-1;text-align:center;font-size:clamp(26px,2.8vw,44px);margin-top:20px}

/* abraço */
.abraco{padding-bottom:70px}
.abraco__palco{position:relative;max-width:1100px;margin:0 auto}
.abraco__svg{display:block;width:100%;height:auto;overflow:visible}
.abraco__dentro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;opacity:0}
.abraco__dentro .h2{font-size:clamp(32px,4vw,64px);margin-bottom:14px;max-width:12ch}
.soltas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;max-width:900px;margin:50px auto 0}
.soltas .pill:nth-child(odd){translate:0 8px}
.soltas .pill:nth-child(3n){translate:0 -6px}
.soltas .pill{animation-duration:5s}
.soltas .pill:nth-child(2n){animation-delay:-1.3s}.soltas .pill:nth-child(3n){animation-delay:-2.6s}

.rodape{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px var(--m) 70px;text-align:center}
.rodape img{height:34px;width:auto}
.rodape p{font-family:"Pally",system-ui,sans-serif;font-weight:var(--w);font-size:18px}

/* whatsapp flutuante */
.zap{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--framb);color:#FFF8F3;
  box-shadow:0 16px 34px -14px rgba(184,68,94,.8);transform:scale(0);transition:transform .8s var(--mola)}
.zap svg{width:28px;height:28px}
.zap.on{transform:scale(1)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  body{font-size:16px}
  .topo{padding:14px var(--m)}
  .topo__logo img{height:26px}
  .pilula-fase{font-size:13.5px;padding:9px 14px}
  .abre__txt{top:calc(74px + 1svh)}
  .assinatura{font-size:clamp(30px,8.6vw,40px)}
  .pergunta{font-size:18px;margin-top:10px}
  .anel text{font-size:21px}
  .ver-tudo{bottom:auto;top:calc(50svh + 64px)}
  .abre__fase{left:var(--m);right:var(--m);max-width:none;bottom:calc(26px + env(safe-area-inset-bottom))}
  .abre__msg{font-size:clamp(27px,7.6vw,36px);margin-bottom:16px}
  .produtos{gap:34px 18px;justify-content:space-between}
  .prod,.prod--destaque{width:calc(50% - 9px)}
  .prod--destaque{width:100%;max-width:330px;margin:0 auto}
  .prod:nth-child(n){margin-top:0}
  .prod:nth-child(3){margin-top:46px}
  .ritual__txt{top:auto;bottom:auto;top:96px}
  .ritual__fim{left:var(--m);right:var(--m);bottom:calc(30px + env(safe-area-inset-bottom))}
  .lupa-bloco{grid-template-columns:1fr}
  .lupa{width:88%;margin:0 auto}
  .momentos{margin-top:40px}
  .momento:nth-child(n){margin-left:0}.momento:nth-child(2){margin-left:22%}.momento:nth-child(3){margin-left:8%}
  .confianca{grid-template-columns:1fr}
  .selo{margin:0 auto}
  .selo__txt{font-size:44px}
  .confianca__foto{width:76%;margin:0 auto}
  .presente__links .pill--framboesa{margin:0 0 6px}
  .abraco__svg{width:150%;margin-left:-25%}
  .abraco__dentro .h2{font-size:30px}
  .abraco__dentro .pill--g{font-size:17px;padding:16px 26px}
}

@media (prefers-reduced-motion:reduce){
  .pill,.ritual__foto,.bones__trilho{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}
