/* ============ Yanne Cake's ============
   Confeitaria artesanal: rosa claro, creme, branco e rosa forte nos detalhes.
   Hero: texto fixo à esquerda, palco à direita onde os produtos caem um por vez. */
:root{
  --cream:#fff8f5;
  --blush:#fdeaf0;
  --pink:#f6c9d7;
  --rose:#d95f83;
  --rose-dk:#a9365c;
  --ink:#432b32;
  --mute:#7d646c;
  --line:#efd5de;
  --f-head:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-body:'Nunito','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(18px,5vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--rose-dk);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--rose-dk);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
em{font-style:italic;color:var(--rose-dk)}

/* ---------- botões ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font-family:var(--f-body);font-weight:800;font-size:1rem;text-decoration:none;border-radius:999px;transition:transform .25s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:scale(.97)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.95rem}
.btn--lg{min-height:58px;padding:0 30px;font-size:1.05rem}
.btn--rose{background:var(--rose-dk);color:#fff;box-shadow:0 14px 28px -12px rgba(169,54,92,.65)}
.btn--rose:hover{background:#8f2a4c;box-shadow:0 18px 32px -12px rgba(169,54,92,.75)}
.btn--ghost{background:#fff;color:var(--rose-dk);border:2px solid var(--pink)}
.btn--ghost:hover{border-color:var(--rose);background:var(--blush)}
.btn--white{background:#fff;color:var(--rose-dk);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn--white:hover{background:var(--blush)}
.btn--shine::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn--shine:hover::after{transform:translateX(130%)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:100;padding:calc(env(safe-area-inset-top) + 10px) var(--gut) 10px;transition:background-color .4s,box-shadow .4s,padding .4s var(--ease)}
.top__in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.top__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-head);font-weight:700;font-size:1.25rem;color:var(--rose-dk)}
.top__brand img{width:50px;height:50px;border-radius:50%;transition:width .4s var(--ease),height .4s var(--ease)}
.top__brand span{display:none}
.top__nav{display:none;gap:34px;font-weight:700;font-size:.98rem}
.top__nav a{text-decoration:none;color:var(--mute);padding:6px 0;background:linear-gradient(var(--rose),var(--rose)) 0 100%/0 2px no-repeat;transition:color .2s,background-size .35s var(--ease)}
.top__nav a:hover{color:var(--rose-dk);background-size:100% 2px}
.top.sm{padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:6px;background:rgba(255,244,230,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 30px -18px rgba(120,50,75,.45)}
.top.sm .top__brand img{width:40px;height:40px}
@media(min-width:560px){.top__brand span{display:inline}}
@media(min-width:860px){.top__nav{display:flex}}
@media(max-width:400px){.top .btn span{display:none}.top .btn{padding:0 15px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(env(safe-area-inset-top) + 92px) 0 44px;background:linear-gradient(115deg,#fff1d8 0%,#ffe7d2 42%,#f9cfc6 100%)}
.hero__bg i{position:absolute;border-radius:50%}
.hero__bg i:nth-child(1){width:44vmax;height:44vmax;left:-20vmax;bottom:-18vmax;background:radial-gradient(circle,rgba(255,196,182,.7),transparent 68%)}
.hero__bg i:nth-child(2){width:46vmax;height:46vmax;right:-14vmax;top:-16vmax;background:radial-gradient(circle,rgba(236,120,140,.30),transparent 66%)}
.hero__bg i:nth-child(3){inset:0;border-radius:0;background-image:radial-gradient(rgba(169,54,92,.10) 1.2px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.hero__in{position:relative;display:grid;gap:10px;align-items:center}
.hero__in>*{min-width:0}
.hero__copy{text-align:center}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#7a2a40;margin-bottom:14px}
.hero__eyebrow .heart{color:var(--rose)}
.hero h1{font-family:var(--f-head);font-weight:800;font-size:clamp(3.3rem,17vw,6.8rem);line-height:.92;letter-spacing:-.03em;color:#3b1f17;text-wrap:balance}
.hero h1 em{position:relative;display:inline-block;color:#a9264b;font-weight:800;padding-right:.1em}
.hero h1 .splash{position:absolute;right:-.55em;top:-.1em;width:.52em;height:.52em;color:#a9264b}
.hero__sub{margin:18px auto 0;max-width:24em;color:#5b3a35;font-size:clamp(1.05rem,3vw,1.3rem)}
.hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn .arr{margin-left:-2px;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
@media(min-width:900px){
  .hero{padding:calc(env(safe-area-inset-top) + 100px) 0 70px;min-height:min(840px,100svh);display:flex;align-items:center}
  .hero__in{grid-template-columns:1.12fr 1fr;gap:20px;width:100%}
  .hero__copy{text-align:left}
  .hero__sub{margin-left:0}
  .hero__cta{justify-content:flex-start}
  .hero h1{font-size:clamp(4.4rem,8.4vw,7.2rem)}
}

/* cena dos produtos: recortes flutuando, um em destaque e dois ao fundo */
.scene{position:relative;container-type:size;width:min(100%,560px);aspect-ratio:1/1;margin:0 auto}
@media(min-width:900px){.scene{width:min(100%,600px);margin-right:0}}
.scene__glow{position:absolute;left:50%;top:50%;width:84cqw;height:84cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,220,205,.55) 45%,transparent 70%)}
.scene__heart{position:absolute;color:rgba(217,95,131,.35);animation:drift 7s ease-in-out infinite}
.sh1{right:3%;top:34%}.sh2{left:6%;top:12%;animation-delay:-3s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(8deg)}}
.scene__items{position:absolute;inset:0}
.prod{--x:0cqw;--y:0cqw;--r:0deg;--s:.2;--o:0;--b:0px;--sh:0;
  position:absolute;left:50%;top:50%;width:88cqw;height:88cqw;margin:-44cqw 0 0 -44cqw;
  opacity:var(--o);z-index:0;pointer-events:none;
  transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));
  filter:blur(var(--b)) drop-shadow(0 calc(2.6cqw*var(--sh)) calc(2.2cqw*var(--sh)) rgba(92,30,40,.34));
  transition:transform 1.25s cubic-bezier(.34,1.18,.4,1),opacity .9s ease,filter 1.1s ease}
.prod img{width:100%;height:100%;object-fit:contain;animation:bob 6.5s ease-in-out infinite}
.prod:nth-child(2n) img{animation-duration:7.4s;animation-delay:-2s}
.prod:nth-child(3n) img{animation-duration:8.2s;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-2.4cqw) rotate(1.4deg)}}
.prod[data-role=main]{--x:0cqw;--y:-1cqw;--r:-4deg;--s:1;--o:1;--b:0px;--sh:1;z-index:3}
.prod[data-role=a]{--x:-36cqw;--y:31cqw;--r:-14deg;--s:.44;--o:.96;--b:1.2px;--sh:.55;z-index:2}
.prod[data-role=b]{--x:36cqw;--y:-33cqw;--r:12deg;--s:.38;--o:.9;--b:2.4px;--sh:.4;z-index:1}
.prod[data-role=out]{--x:8cqw;--y:-26cqw;--r:12deg;--s:1.18;--o:0;--b:7px;--sh:1;z-index:4}
.prod[data-role=hidden]{--x:40cqw;--y:-40cqw;--r:22deg;--s:.18;--o:0;--b:3px;--sh:0;z-index:0}
.scene__ctrl{position:absolute;left:0;right:0;bottom:-2%;display:flex;align-items:center;justify-content:center;gap:10px;z-index:6}
.scene__dots{display:flex;gap:2px;align-items:center}
.scene__dots button{width:22px;height:30px;display:grid;place-items:center}
.scene__dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(169,54,92,.28);transition:width .3s var(--ease),background-color .3s}
.scene__dots button[aria-current=true]::before{width:24px;border-radius:8px;background:var(--rose-dk)}
.scene__pause{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--rose-dk);box-shadow:0 8px 18px -8px rgba(110,40,65,.6);transition:background-color .2s}
.scene__pause:hover{background:var(--blush)}

/* ---------- seções ---------- */
.sec{padding:72px 0}
.sec__head{margin-bottom:26px;text-align:center}
.sec__head h2,.final h2,.menu h2{font-family:var(--f-head);font-weight:700;font-size:clamp(2.2rem,7vw,3.6rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.sec__head p{margin:12px auto 0;max-width:30em;color:var(--mute)}
@media(min-width:900px){.sec{padding:100px 0}}

/* filtros */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}
.tab{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--pink);background:#fff;font-weight:700;font-size:.95rem;color:var(--rose-dk);transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.tab:hover{border-color:var(--rose)}
.tab:active{transform:scale(.96)}
.tab.on{background:var(--rose-dk);border-color:var(--rose-dk);color:#fff}

/* carrossel de produtos */
.rail{--edge:max(var(--gut),calc((100% - 1200px)/2 + var(--gut)))}
.rail__track{display:flex;gap:16px;overflow-x:auto;padding:6px var(--edge) 12px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.rail__track::-webkit-scrollbar{display:none}
.rail__track:focus-visible{outline-offset:-3px}
@media(hover:hover) and (pointer:fine){.rail__track{cursor:grab}}
.rail__track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.pcard{position:relative;flex:0 0 clamp(224px,66vw,300px);scroll-snap-align:start;border-radius:26px;overflow:hidden;background:var(--blush);box-shadow:0 18px 36px -22px rgba(110,40,65,.55);transition:transform .4s var(--ease)}
.pcard[hidden]{display:none}
.pcard:hover{transform:translateY(-5px)}
.pcard img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover img{transform:scale(1.04)}
.pcard span{position:absolute;left:12px;bottom:12px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:800;font-size:.9rem;color:var(--rose-dk)}
.rail__foot{display:flex;align-items:center;gap:18px;margin-top:10px}
.rail__bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.rail__bar i{display:block;height:100%;width:34%;border-radius:4px;background:var(--rose);transition:margin-left .15s linear,width .2s}
.rail__arrows{display:none;gap:8px}
.arrow{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid var(--pink);color:var(--rose-dk);transition:background-color .2s,color .2s,border-color .2s,opacity .2s,transform .2s}
.arrow:hover:not(:disabled){background:var(--rose-dk);border-color:var(--rose-dk);color:#fff}
.arrow:active:not(:disabled){transform:scale(.93)}
.arrow:disabled{opacity:.35;cursor:default}
@media(min-width:820px){.rail__arrows{display:flex}.rail__track{gap:22px}}

/* credibilidade */
.proof{background:#fff;border-block:1px solid var(--line);padding:56px 0}
.proof__grid{display:grid;gap:14px}
.proof__grid li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 20px;border-radius:26px;background:var(--cream);border:1px solid var(--line)}
.proof__grid svg{color:var(--rose);margin-bottom:6px}
.proof__grid h3{font-family:var(--f-head);font-weight:700;font-size:1.5rem;color:var(--rose-dk);line-height:1.1}
.proof__grid p{color:var(--mute)}
@media(min-width:760px){.proof__grid{grid-template-columns:repeat(3,1fr);gap:20px}}

/* cardápio do dia */
.menu{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(380px,60vw,460px);display:flex;align-items:center;color:#fff}
.menu__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.menu__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(110,30,60,.88) 0%,rgba(110,30,60,.7) 45%,rgba(110,30,60,.15) 100%)}
.menu__in{padding-block:64px}
.menu__box{max-width:520px}
.menu h2{color:#fff}
.menu p{margin:14px 0 26px;font-size:clamp(1.05rem,3vw,1.25rem);max-width:24em}
@media(max-width:700px){.menu__shade{background:linear-gradient(180deg,rgba(110,30,60,.55),rgba(110,30,60,.9))}.menu__in{padding-block:56px}}

/* cta final */
.final{padding:84px 0;background:linear-gradient(160deg,#fff6f2,#fdeaf0);text-align:center}
.final p{margin:14px auto 28px;color:var(--mute);max-width:26em}

/* rodapé */
.foot{padding:50px 0 calc(24px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.foot__brand{display:flex;align-items:center;gap:16px}
.foot__brand img{width:84px;height:84px;border-radius:50%}
.foot__brand p{color:var(--mute);line-height:1.5}
.foot__links{display:flex;flex-wrap:wrap;gap:10px}
.foot__links a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;background:var(--blush);color:var(--rose-dk);font-weight:800;text-decoration:none;transition:background-color .2s,color .2s,transform .2s}
.foot__links a:hover{background:var(--rose-dk);color:#fff;transform:translateY(-2px)}
.foot__links small{font-weight:600;opacity:.85}
.foot__copy{margin-top:28px;color:#a58f96;font-size:.85rem}

/* botão flutuante */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;width:56px;height:56px;display:grid;place-items:center;background:var(--rose-dk);color:#fff;border-radius:50%;box-shadow:0 14px 28px -8px rgba(110,30,60,.7);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .35s,transform .45s var(--ease),background-color .2s}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:#8f2a4c}

/* ---------- entradas (só com JS) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .hero__eyebrow,.js .hero h1,.js .hero__sub,.js .hero__cta,.js .scene{opacity:0;animation:fadeup .9s var(--ease) forwards}
.js .scene{animation-delay:.2s}
.js .hero__eyebrow{animation-delay:.05s}.js .hero h1{animation-delay:.15s}.js .hero__sub{animation-delay:.3s}.js .hero__cta{animation-delay:.42s}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js .rv,.js .hero__eyebrow,.js .hero h1,.js .hero__sub,.js .hero__cta,.js .scene{opacity:1;transform:none}
  .prod{transition:opacity .8s ease !important}
  .prod[data-role=a],.prod[data-role=b],.prod[data-role=out]{--o:0}
  .prod[data-role=main]{--r:0deg;--y:0cqw}
  .rail__track{scroll-behavior:auto}
}
[hidden]{display:none !important}