/* ==========================================================
   VELLUNE — a arte de guardar o instante
   Direção: vintage, divertido, analógico.
   Paleta oficial: Bordô · Azul bebê · Manteiga · Chocolate amargo
   Cabine de fotos · caixinha de fósforo · linho azul · fotos impressas
   ========================================================== */
:root{
  --creme:#F2EBDD;
  --bordo:#83242A;            /* Bordô */
  --chocolate-amargo:#3A2824; /* Chocolate amargo */
  --azul-bebe:#CAD7E9;        /* Azul bebê */
  --azul-bebe-claro:#DCE6F2;
  --manteiga:#FBEAB2;         /* Manteiga */

  /* fundos com textura de papel (fotos enviadas pela Vellune) */
  --tx-bordo:#4F0204 url(../assets/texturas/bordo.jpg) center/cover;
  --tx-azul-bebe:#BBCFEC url(../assets/texturas/azul-bebe.jpg) center/cover;
  --tx-bege:#E8D7BC url(../assets/texturas/bege.jpg) center/cover;
  --tx-chocolate:#432721 url(../assets/texturas/chocolate-amargo.jpg) center/cover;

  --f-serif:"Fraunces", Georgia, serif;
  --f-script:"Pinyon Script", cursive;
  --f-hand:"Reenie Beanie", cursive;
  --f-mono:"Courier Prime", ui-monospace, monospace;

  --gutter:clamp(16px, 4vw, 56px);
  --ease:cubic-bezier(.22,1,.36,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 18px 40px -14px rgba(58,40,36,.55), 0 2px 6px rgba(58,40,36,.2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:#E8D7BC url(../assets/texturas/bege.jpg) center top/1672px auto repeat;color:var(--chocolate-amargo);
  font:300 clamp(16px,1.05vw,18px)/1.6 var(--f-serif);
  font-variation-settings:"opsz" 14;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--azul-bebe);color:var(--chocolate-amargo)}

/* grão de filme */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.06;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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(5) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0;text-transform:none}
.hand{font-family:var(--f-hand);font-weight:400;letter-spacing:.01em;text-transform:none;line-height:1}
.eyebrow{margin:0 0 1.6rem}
.h2{font:400 clamp(2.4rem,5vw,4.8rem)/1.04 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.01em;margin:1.2rem 0 1.6rem}
.h2 em{font-style:italic;font-weight:300}

/* textura de linho (referência House of Wander) */
.linen{background:var(--tx-azul-bebe)}

/* split de palavras */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;will-change:transform}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1em 1.8em;border-radius:100px;border:1.5px solid currentColor;
  font:400 .8rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .4s var(--bounce),box-shadow .4s var(--ease),background .3s,color .3s;
  box-shadow:3px 3px 0 currentColor;
}
.btn:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:6px 6px 0 currentColor}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 currentColor}
.btn--creme{background:var(--creme);color:var(--chocolate-amargo);border-color:var(--chocolate-amargo);box-shadow:3px 3px 0 var(--chocolate-amargo)}
.btn--creme:hover{box-shadow:6px 6px 0 var(--chocolate-amargo)}
.btn--chocolate{background:var(--chocolate-amargo);color:var(--creme);border-color:var(--chocolate-amargo);box-shadow:3px 3px 0 var(--azul-bebe)}
.btn--chocolate:hover{box-shadow:6px 6px 0 var(--azul-bebe)}
.link-arrow{display:inline-flex;gap:.5em;align-items:center;border-bottom:1px dashed currentColor;padding-bottom:3px}

/* ==========================================================
   PRELOADER (cabine de fotos)
   ========================================================== */
.loader{position:fixed;inset:0;z-index:9999;background:var(--tx-bordo);color:var(--creme);display:grid;place-items:center;text-align:center}
.loader__top{position:absolute;top:2rem;left:0;right:0;margin:0;opacity:.8}
.loader__count{font:300 clamp(8rem,28vw,20rem)/1 var(--f-serif);font-variation-settings:"opsz" 144;font-style:italic}
.flash{position:fixed;inset:0;z-index:10000;background:#fff;opacity:0;pointer-events:none}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:2rem;
  padding:1.2rem var(--gutter);color:var(--creme);
  transition:transform .6s var(--ease),color .4s,background .4s,padding .4s;
}
.nav.is-scrolled{padding-top:.8rem;padding-bottom:.8rem;background:rgba(79,2,4,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav.is-light{color:var(--chocolate-amargo)}
.nav.is-light.is-scrolled{background:rgba(232,215,188,.92)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{position:relative;width:clamp(100px,8.5vw,124px);flex:none}
.nav__logo img{width:100%;transition:opacity .4s}
.nav__logo .logo-b{position:absolute;inset:0;opacity:0}
.nav.is-light .logo-a{opacity:0}
.nav.is-light .logo-b{opacity:1}
.nav__links{display:flex;gap:2rem;margin-left:auto;font-size:.72rem}
.nav__links a{position:relative;padding:.3em 0;z-index:0}
.nav__links a::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:8px;background:var(--azul-bebe);opacity:.7;z-index:-1;transform:skewX(-12deg) scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:skewX(-12deg) scaleX(1)}
.nav__cta{padding:.8em 1.3em;font-size:.7rem}
.nav__burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;z-index:2}
.nav__burger span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.nav__burger span:first-child{top:18px}.nav__burger span:last-child{top:26px}
.menu-open .nav__burger span:first-child{top:22px;transform:rotate(45deg)}
.menu-open .nav__burger span:last-child{top:22px;transform:rotate(-45deg)}
.menu-open .nav{color:var(--creme)!important;background:transparent!important}
.menu-open .nav .logo-a{opacity:1}.menu-open .nav .logo-b{opacity:0}
.menu{
  position:fixed;inset:0;z-index:99;background:var(--tx-chocolate);color:var(--creme);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gutter) 2rem;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .9s var(--ease);
}
.menu-open .menu{clip-path:circle(150% at calc(100% - 40px) 40px)}
.menu__links{display:flex;flex-direction:column;gap:.3rem}
.menu__links a{font:300 clamp(2rem,8vw,3.6rem)/1.1 var(--f-serif);font-style:italic;display:flex;gap:1rem;align-items:baseline}
.menu__links small{font-size:.65rem;opacity:.6;font-style:normal}
.menu__foot{margin-top:auto;padding-top:2rem;font-size:1.8rem;color:var(--azul-bebe)}
@media (max-width:1060px){.nav__links,.nav__cta{display:none}.nav__burger{display:block}}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;min-height:100svh;background:var(--tx-bordo);color:var(--creme);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:2vw;
  padding:7rem var(--gutter) 3rem;
}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 70% 50%,rgba(255,255,255,.07),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(58,40,36,.45),transparent 70%)}
.hero__giant{
  position:absolute;left:-2vw;top:50%;transform:translateY(-55%) rotate(-8deg);margin:0;
  font-size:clamp(14rem,40vw,42rem);line-height:1;white-space:nowrap;color:var(--creme);opacity:.13;pointer-events:none;
}
.hero__copy{position:relative;z-index:2;max-width:38rem}
.hero__title{font:400 clamp(2.6rem,5.2vw,5.4rem)/1 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.012em;margin:1.4rem 0 1.4rem}
.hero__title em{display:block;font-family:var(--f-script);font-style:normal;font-weight:400;letter-spacing:0;font-size:1.12em;line-height:1.05;margin-top:.15em;color:var(--manteiga)}
.hero__lead{max-width:30rem;opacity:.9;margin:0 0 2.2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center}

/* coração com o casal */
.board{position:relative;z-index:1;display:grid;place-items:center end;min-height:480px;margin:-4.5rem calc(-1 * var(--gutter) + 8px) -1.5rem 0}
.heart{display:block;height:min(110svh,1010px);aspect-ratio:716/873;max-width:none;translate:calc(-1 * clamp(0px, 25vw - 260px, 200px)) 0;filter:drop-shadow(0 28px 36px rgba(0,0,0,.45))}
.heart img{width:100%;height:100%;object-fit:contain;animation:boia 7s ease-in-out infinite;transform-origin:50% 60%}
@keyframes boia{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.badge{position:absolute;left:4%;bottom:16%;width:clamp(96px,9vw,130px);z-index:5;animation:spin 18s linear infinite;pointer-events:none}
.badge circle{fill:var(--azul-bebe)}
.badge text{font:700 15px var(--f-mono);letter-spacing:2.2px;text-transform:uppercase;fill:var(--chocolate-amargo)}
.badge .badge__v{font:400 64px var(--f-script);letter-spacing:0;fill:var(--chocolate-amargo)}
@keyframes spin{to{transform:rotate(360deg)}}

/* celular / stories */
.phone{
  position:relative;aspect-ratio:9/18.5;border-radius:32px;overflow:hidden;background:#111;
  box-shadow:0 0 0 7px #1d0d0b,0 40px 80px -20px rgba(0,0,0,.6);
}
.phone__bars{position:absolute;top:12px;left:10px;right:10px;z-index:3;display:flex;gap:4px}
.phone__bars i{flex:1;height:2px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.phone__bars i b{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.phone__head{position:absolute;top:22px;left:10px;right:10px;z-index:3;display:flex;align-items:center;gap:7px;font:600 .72rem/1 system-ui,sans-serif;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.phone__head img{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.phone__time{opacity:.7;font-weight:400}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:4px;background:var(--bordo);padding:3px 7px;border-radius:4px;font:400 .52rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.phone__slides figure,.viewer__slides figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.phone__slides figure.is-on,.viewer__slides figure.is-on{opacity:1}
.phone__slides img,.viewer__slides img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.phone__slides img{filter:sepia(.2) saturate(.9)}
.phone__slides figure.is-on img{animation:kb 5s ease-out forwards}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.phone__slides::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 60%,rgba(0,0,0,.5))}
.phone__caption{position:absolute;left:0;right:0;bottom:62px;z-index:3;margin:0;text-align:center;color:#fff;font-size:1.7rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.phone__foot{position:absolute;left:10px;right:10px;bottom:14px;z-index:3;display:flex;gap:8px;align-items:center}
.phone__foot span{flex:1;border:1px solid rgba(255,255,255,.55);border-radius:30px;padding:8px 12px;font:400 .66rem/1 system-ui,sans-serif;color:#fff}
.phone__foot svg{width:22px;fill:none;stroke:#fff;stroke-width:1.6}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:6.5rem;gap:2.5rem}
  .board{height:auto;min-height:0;padding-bottom:1rem;margin:0;place-items:center}
  .heart{width:min(108vw,700px);height:auto;translate:none;margin-inline:calc((100% - min(108vw,700px)) / 2)}
  .badge{left:auto;right:2%;bottom:4%;width:88px}
  .hero__giant{font-size:62vw;top:62%}
}

/* ==========================================================
   VERBETE (ficha de biblioteca)
   ========================================================== */
.verbete{padding:clamp(6rem,12vw,10rem) 0}
.verbete__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:5vw;align-items:center}
.ficha{
  position:relative;background:#FBF7EE;padding:clamp(1.6rem,3vw,2.8rem);transform:rotate(-1.5deg);box-shadow:var(--shadow);
  background-image:linear-gradient(transparent 0 calc(100% - 1px),rgba(131,36,42,.2) 0);background-size:100% 2rem;background-position:0 1.2rem;
}
.ficha__top{display:flex;justify-content:space-between;gap:1rem;font-size:.66rem;color:var(--bordo);border-bottom:2px solid var(--bordo);padding-bottom:.6rem;margin-bottom:1rem}
.ficha__word{font:400 clamp(4rem,11vw,10rem)/.9 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;margin:0;color:var(--chocolate-amargo)}
.ficha__def{font:italic 300 clamp(1.4rem,2.4vw,2.2rem)/1.2 var(--f-serif);margin:.4em 0 1.4em}
.ficha__def .mono{font-style:normal;color:var(--bordo);margin-right:.4em}
.ficha__cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;font-family:var(--f-mono);font-size:.92rem;line-height:1.6}
.ficha__cols p{margin:0}
.ficha__root{color:var(--bordo);font-size:1rem;margin-bottom:.4rem!important}
.ficha__root span{text-transform:none;letter-spacing:0;color:var(--chocolate-amargo);opacity:.6;font-size:.82rem;margin-left:.4em}
.stamp{
  position:absolute;right:6%;top:16%;width:116px;height:116px;border-radius:50%;
  border:3px double var(--bordo);color:var(--bordo);display:grid;place-items:center;text-align:center;
  transform:rotate(14deg);opacity:.85;font-size:.6rem;line-height:1.4;
}
.verbete__side{color:var(--chocolate-amargo);text-align:center}
.verbete__note{font-size:clamp(2rem,3.4vw,3rem);margin:0;transform:rotate(-5deg)}
.verbete__script{font-size:clamp(4rem,8vw,7.5rem);margin:0;line-height:1.1;color:var(--bordo)}
.moons{display:flex;justify-content:center;gap:12px;margin-top:1.4rem}
.moons i{width:22px;height:22px;border-radius:50%;background:var(--creme);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--chocolate-amargo)}
.moons i::after{content:"";position:absolute;inset:0;background:var(--chocolate-amargo);border-radius:50%}
.moons i:nth-child(1)::after{transform:translateX(80%)}.moons i:nth-child(2)::after{transform:translateX(45%)}
.moons i:nth-child(3)::after{transform:translateX(0)}.moons i:nth-child(4)::after{transform:translateX(-45%)}.moons i:nth-child(5)::after{transform:translateX(-80%)}
@media (max-width:860px){.verbete__grid{grid-template-columns:1fr}.ficha__cols{grid-template-columns:1fr}.stamp{width:90px;height:90px;top:6%;right:4%}}

/* ==========================================================
   SOBRE (cabine)
   ========================================================== */
.sobre{background:var(--tx-bordo);color:var(--creme);padding:clamp(6rem,11vw,10rem) 0;overflow:hidden}
.sobre__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:center}
.sobre__booth{position:relative;display:flex;flex-direction:column;align-items:center;padding:2rem 0 1rem}
.strip{
  width:min(190px,48vw);background:#141010;padding:9px 9px 0;display:grid;gap:9px;
  transform:rotate(-3deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.5);transition:transform .8s var(--bounce);
}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--pos,50% 50%)}
.strip img:last-child{margin-bottom:9px}
.strip:hover{transform:rotate(1deg) scale(1.02)}
.sobre__scribble{margin:1.6rem 0 0;font-size:clamp(2rem,2.8vw,2.8rem);line-height:1.05;color:var(--manteiga);transform:rotate(-5deg);text-align:center;white-space:nowrap}
.sobre__copy .h2 em{color:var(--manteiga)}
.sobre__text p{max-width:34rem;margin:0 0 1rem;opacity:.92}
.sobre__quote{font-size:clamp(1.8rem,2.6vw,2.4rem);color:var(--manteiga);margin:2rem 0 0;max-width:30rem;transform:rotate(-1.5deg)}
@media (max-width:860px){.sobre__grid{grid-template-columns:1fr}.sobre__scribble{font-size:1.9rem}}

/* ==========================================================
   CONCEITO (roteiro datilografado)
   ========================================================== */
.conceito{background:var(--tx-bege);padding:clamp(6rem,11vw,10rem) 0}
.conceito__head{max-width:56rem;position:relative;margin-bottom:clamp(3rem,6vw,5rem)}
.conceito__a{font:italic 300 clamp(1.3rem,2vw,1.8rem)/1.3 var(--f-serif);margin:1.2rem 0 0;opacity:.7}
.conceito__head .h2 em{color:var(--bordo)}
.scribble-line{width:min(520px,80%);height:30px;display:block;margin-top:-1rem}
.scribble-line path,.posic__big path{fill:none;stroke:var(--bordo);stroke-width:3;stroke-linecap:round}
.scribble-line--center{margin:0 auto}
.roteiro{
  position:relative;background:#FBF7EE;padding:clamp(1.4rem,3vw,2.8rem);box-shadow:var(--shadow);transform:rotate(.6deg);
  max-width:1100px;margin-left:auto;
}
.roteiro::before{content:"";position:absolute;top:-14px;left:12%;width:90px;height:26px;background:rgba(202,215,233,.9);transform:rotate(-5deg)}
.roteiro::after{content:"";position:absolute;top:-14px;right:10%;width:80px;height:26px;background:rgba(251,234,178,.9);transform:rotate(6deg)}
.roteiro__head{display:flex;justify-content:space-between;gap:1rem;font-size:.66rem;color:var(--bordo);border-bottom:2px solid var(--chocolate-amargo);padding-bottom:.7rem}
.fragments{list-style:none;margin:0;padding:0}
.fragments li{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:baseline;
  padding:clamp(.9rem,1.6vw,1.3rem) 0;border-bottom:1px dashed rgba(58,40,36,.3);
  transition:padding .5s var(--ease);
}
.fragments li span{color:var(--bordo)}
.fragments li p{margin:0;font:400 clamp(1.5rem,3.2vw,2.8rem)/1.1 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.005em;position:relative;justify-self:start;z-index:0}
.fragments li p::after{ /* marca-texto */
  content:"";position:absolute;left:-.15em;right:-.15em;bottom:.08em;height:.42em;background:var(--azul-bebe);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.fragments li.is-active p::after{transform:scaleX(1)}
@media (hover:hover){.fragments li:hover{padding-left:.8rem}}
.roteiro__end{margin:1.6rem 0 0;font-size:clamp(1.7rem,2.4vw,2.3rem);color:var(--bordo);text-align:right}
.fragments__float{position:fixed;top:0;left:0;z-index:50;pointer-events:none;width:240px;background:#FBF7EE;padding:9px 9px 30px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,width .3s}
.fragments__float.is-wide{width:330px}
.fragments__float.is-on{opacity:1}
.fragments__float img{width:100%;height:auto;display:block}
@media (hover:none),(max-width:900px){.fragments__float{display:none}}
/* miniaturas: só aparecem onde não há mouse (celular/tablet) */
.frag-thumb{display:none}
@media (hover:none),(max-width:900px){
  .fragments li{grid-template-columns:5.5rem 1fr 76px}
  .frag-thumb{display:block;grid-column:3;grid-row:1 / span 2;align-self:center;width:76px;aspect-ratio:3/4;object-fit:cover;background:#FBF7EE;padding:4px 4px 12px;box-shadow:0 8px 16px -8px rgba(58,40,36,.6);transform:rotate(3deg)}
  .fragments li:nth-child(even) .frag-thumb{transform:rotate(-3deg)}
}
@media (max-width:600px){.fragments li{grid-template-columns:1fr 70px;gap:.2rem .9rem}.fragments li span{grid-column:1}.fragments li p{grid-column:1}.frag-thumb{grid-column:2;width:70px}}

/* ==========================================================
   A NOITE (varal)
   ========================================================== */
.noite{background:var(--tx-chocolate);color:var(--creme);position:relative}
.noite__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;padding:5.5rem 0 2rem;overflow:hidden}
.noite__title{font:400 clamp(2rem,4vw,3.8rem)/1.05 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.008em;margin:.8rem 0 0;max-width:22ch}
.noite__title .script{display:block;font-size:1.5em;color:var(--manteiga);line-height:1}
.noite__line{position:relative;margin-top:2.4rem}
.varal{position:absolute;top:-4px;left:0;width:100%;height:60px;pointer-events:none}
.varal path{fill:none;stroke:rgba(242,235,221,.55);stroke-width:1.5}
.noite__track{display:flex;gap:clamp(1.2rem,2.4vw,2.6rem);padding:0 var(--gutter);width:max-content;will-change:transform;align-items:flex-start}
.pol{
  --h:calc(100svh - 430px);
  width:clamp(160px,min(18vw,calc(var(--h) * .7)),270px);flex:none;background:#FBF7EE;color:var(--chocolate-amargo);
  padding:9px 9px 12px;box-shadow:var(--shadow);position:relative;transform-origin:50% -20px;
  transform:rotate(var(--r,0deg));margin-top:var(--mt,24px);
}
.pol:nth-child(odd){--r:-3deg;--mt:30px}.pol:nth-child(even){--r:2.5deg;--mt:18px}.pol:nth-child(3n){--r:-1deg;--mt:40px}
.pol::before{ /* prendedor */
  content:"";position:absolute;top:-22px;left:50%;width:12px;height:36px;margin-left:-6px;border-radius:3px;
  background:linear-gradient(90deg,#c9a77a,#e2c597 50%,#c9a77a);box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.pol:hover{animation:swing 1.4s var(--ease)}
@keyframes swing{20%{transform:rotate(6deg)}45%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}100%{transform:rotate(var(--r))}}
.pol__img{aspect-ratio:4/5;overflow:hidden}
.pol__img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pol .mono{display:block;margin-top:.6rem;color:var(--bordo);font-size:.66rem}
.pol h3{font-size:clamp(1.4rem,1.8vw,1.8rem);margin:.15rem 0 0}
.pol--note{background:var(--manteiga);padding:1.4rem;display:flex;flex-direction:column;justify-content:center;min-height:240px}
.pol--note .script{font-size:2.2rem;margin:0;color:var(--bordo);line-height:1.1}
.pol--note p{margin:.4rem 0 0;font:400 1.3rem/1.2 var(--f-serif)}
.noite__hint{margin:1.6rem var(--gutter) 0;font-size:1.6rem;color:var(--azul-bebe);text-align:right}
@media (max-width:900px){
  .noite__pin{height:auto;padding:6rem 0 4rem}
  .noite__track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:30px;padding-bottom:30px}
  .noite__track::-webkit-scrollbar{display:none}
  .pol{scroll-snap-align:center;width:62vw}
  .varal{top:22px}
  .noite__hint{text-align:left}
}

/* ==========================================================
   POSICIONAMENTO (caligrafia gigante)
   ========================================================== */
.posic{color:var(--bordo);padding:clamp(5rem,10vw,9rem) 0;overflow:hidden}
.posic__label{padding:0 var(--gutter);max-width:1400px;margin:0 auto 1rem;color:var(--chocolate-amargo)}
.posic__words{display:flex;flex-direction:column;line-height:.86}
.posic__words span{font-size:clamp(5rem,15vw,15rem);white-space:nowrap;display:block}
.posic__words span:nth-child(1){padding-left:3vw}
.posic__words span:nth-child(2){padding-left:18vw}
.posic__words span:nth-child(3){padding-left:6vw;color:var(--chocolate-amargo)}
.posic__words span:nth-child(4){padding-left:26vw}
.posic__disc{display:grid;grid-template-columns:auto 1fr;gap:1rem 5vw;align-items:center;margin-top:clamp(3rem,6vw,5rem);color:var(--chocolate-amargo)}
.posic__disc .mono{grid-column:1/-1;margin:0}
.posic__big{position:relative;font:italic 400 clamp(4rem,10vw,9rem)/1 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.012em;margin:0;padding:.1em .3em}
.posic__big span{position:relative;z-index:1}
.posic__big svg{position:absolute;inset:-10% -6%;width:112%;height:120%}
.posic__big path{stroke:var(--chocolate-amargo);stroke-width:2.5}
.posic__text{max-width:30rem;margin:0;font-size:1.1rem;color:var(--chocolate-amargo)}
@media (max-width:760px){.posic__disc{grid-template-columns:1fr}}

/* ==========================================================
   ENTREGAS (cardápio)
   ========================================================== */
.entregas{background:var(--tx-bege);padding:clamp(6rem,11vw,10rem) 0}
.entregas__grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.entregas__copy .h2 em{color:var(--bordo)}
.entregas__copy p{max-width:30rem}
.entregas__hand{font-size:clamp(1.8rem,2.4vw,2.3rem);color:var(--bordo);transform:rotate(-2deg);margin-top:1.6rem}
.menu-card{
  background:var(--manteiga);padding:clamp(1.8rem,3.4vw,3rem);text-align:center;box-shadow:var(--shadow);transform:rotate(2deg);
  outline:2px solid var(--chocolate-amargo);outline-offset:-12px;position:relative;
}
.menu-card::after{content:"";position:absolute;inset:18px;border:1px solid var(--chocolate-amargo);pointer-events:none}
.menu-card__top{color:var(--bordo);margin:.6rem 0 0}
.menu-card h3{font-size:clamp(3rem,5vw,4.4rem);margin:0 0 1.4rem;color:var(--chocolate-amargo);line-height:1.2}
.menu-card ul{list-style:none;padding:0;margin:0 0 1.6rem;text-align:left}
.menu-card li{display:flex;align-items:baseline;gap:.6rem;padding:.75rem 0}
.menu-card li span{font:400 clamp(1.2rem,1.7vw,1.5rem)/1.2 var(--f-serif);font-variation-settings:"opsz" 144}
.menu-card li i{flex:1;border-bottom:2px dotted var(--chocolate-amargo);transform:translateY(-4px);min-width:1rem}
.menu-card li b{font-size:.66rem;color:var(--bordo);white-space:nowrap}
.menu-card__foot{font-size:.62rem;opacity:.7;margin:0 0 .6rem}
@media (max-width:900px){.entregas__grid{grid-template-columns:1fr}}
@media (max-width:480px){.menu-card li{flex-wrap:wrap}.menu-card li i{display:none}.menu-card li b{width:100%}}

/* ==========================================================
   HISTÓRIAS (fotos sobre a mesa)
   ========================================================== */
.historias{background:var(--tx-chocolate);color:var(--creme);padding:clamp(4rem,8vw,7rem) 0 clamp(6rem,11vw,10rem);overflow:hidden}
.historias__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.historias__title{margin:0;line-height:1}
.historias__title .script{font-size:clamp(5rem,14vw,13rem);color:var(--creme)}
.historias__lead{max-width:22rem;font-size:clamp(1.6rem,2vw,2rem);color:var(--azul-bebe);transform:rotate(-2deg);margin:0 0 2rem}
.historias__table{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.4vw,3.4rem) clamp(1.2rem,3vw,3rem)}
.hcard{display:block;text-align:center;background:#FBF7EE;color:var(--chocolate-amargo);padding:10px 10px 34px;box-shadow:0 26px 50px -18px rgba(0,0,0,.6);transform:rotate(var(--r,0deg));transition:transform .6s var(--bounce),box-shadow .5s}
.hcard:nth-child(6n+1){--r:-4deg}.hcard:nth-child(6n+2){--r:3deg;margin-top:3rem}.hcard:nth-child(6n+3){--r:-2deg;margin-top:1rem}
.hcard:nth-child(6n+4){--r:2.5deg}.hcard:nth-child(6n+5){--r:-3deg;margin-top:2.4rem}.hcard:nth-child(6n+6){--r:4deg}
.hcard:hover{transform:rotate(0deg) scale(1.04) translateY(-8px);box-shadow:0 40px 70px -20px rgba(0,0,0,.7);z-index:2;position:relative}
.hcard__img{aspect-ratio:4/5;overflow:hidden;position:relative}
.hcard__img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 1s var(--ease)}
.hcard:hover .hcard__img img{transform:scale(1.04)}
.hcard__img::after{content:"▶";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--azul-bebe);color:var(--chocolate-amargo);display:grid;place-items:center;font-size:1rem;transform:scale(0);transition:transform .5s var(--bounce)}
.hcard:hover .hcard__img::after{transform:scale(1)}
.hcard h3{font-size:clamp(1.6rem,2vw,2rem);margin:.6rem 0 .1rem}
.hcard .mono{font-size:.6rem;color:var(--bordo)}
@media (max-width:900px){.historias__table{grid-template-columns:1fr 1fr}.hcard:nth-child(n){margin-top:0}.hcard:nth-child(even){margin-top:2rem}}

/* convite para seguir no Instagram */
.follow{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;margin:clamp(4rem,7vw,6rem) auto 0;max-width:900px;
  padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.2rem,3vw,2.4rem);border:1.5px dashed rgba(242,235,221,.5);border-radius:18px;
  transition:border-color .4s,background .4s;
}
.follow:hover{border-color:var(--manteiga);background:rgba(242,235,221,.05)}
.follow__icon{flex:none;width:64px;height:64px;border-radius:18px;background:var(--azul-bebe);display:grid;place-items:center;transform:rotate(-8deg);transition:transform .6s var(--bounce)}
.follow:hover .follow__icon{transform:rotate(6deg) scale(1.08)}
.follow__icon svg{width:34px;fill:none;stroke:var(--chocolate-amargo);stroke-width:1.8}
.follow__icon .dot{fill:var(--chocolate-amargo);stroke:none}
.follow__text{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.2rem}
.follow__text .hand{font-size:clamp(1.5rem,2vw,1.9rem);color:var(--azul-bebe)}
.follow__text strong{font:400 clamp(1.8rem,3vw,2.6rem)/1.05 var(--f-serif);font-variation-settings:"opsz" 144}
.follow:hover .follow__btn{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:6px 6px 0 var(--chocolate-amargo)}
@media (max-width:600px){.follow__btn{width:100%}}

/* ==========================================================
   CITAÇÃO
   ========================================================== */
.citacao{background:var(--tx-bege);padding:clamp(6rem,12vw,10rem) 0 0;text-align:center;overflow:hidden}
.citacao__text{font:400 clamp(2rem,4.2vw,4rem)/1.12 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.008em;max-width:24ch;margin:0 auto 1rem}
.citacao__text em{color:var(--bordo)}
.marquee{overflow:hidden;white-space:nowrap;background:var(--azul-bebe);color:var(--chocolate-amargo);padding:1rem 0;margin-top:clamp(4rem,8vw,7rem);transform:rotate(-1.5deg) scale(1.03)}
.marquee__track{display:inline-flex;align-items:center;gap:2rem;animation:marquee 30s linear infinite;padding-left:2rem;font-size:.9rem}
.marquee b{font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================
   ÁREA DO CLIENTE (caixa de fósforo)
   ========================================================== */
.cliente-band{padding:clamp(6rem,11vw,10rem) 0;color:var(--chocolate-amargo)}
.cliente-band__grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.cliente-band .h2 em{color:var(--bordo)}
.cliente-band p{max-width:30rem;margin:0 0 2rem}
.matchbox{position:relative;display:block;width:min(100%,460px);aspect-ratio:1.55;justify-self:center;transform:rotate(-6deg);transition:transform .8s var(--bounce)}
.matchbox:hover{transform:rotate(-2deg) scale(1.03)}
.matchbox__cover{
  position:absolute;inset:0;z-index:2;background:var(--tx-chocolate);color:var(--creme);padding:6% 7%;
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);border-radius:4px;
}
.matchbox__addr{font-size:.62rem;line-height:1.3;opacity:.85}
.matchbox__name{
  font-size:clamp(4rem,8vw,6rem);line-height:1;align-self:center;transform:rotate(-8deg);
  background:linear-gradient(100deg,#9a9a9a 0%,#fff 22%,#bdbdbd 40%,#fff 55%,#8f8f8f 75%,#efefef 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
.matchbox__foot{font-size:.62rem;align-self:center;font-style:italic}
.matchbox__drawer{
  position:absolute;top:5%;bottom:5%;right:4%;width:30%;z-index:1;background:#efe6d6;
  display:flex;flex-direction:column;justify-content:space-around;padding:4% 0;box-shadow:inset 0 0 12px rgba(0,0,0,.25);
  transition:transform 1s var(--bounce);border-radius:2px;
}
.matchbox.is-open .matchbox__drawer,.matchbox:hover .matchbox__drawer{transform:translateX(68%)}
.matchbox__drawer i{display:block;height:9%;margin-left:12%;border-radius:0 40px 40px 0;background:linear-gradient(90deg,var(--manteiga) 0 55%,var(--azul-bebe) 55%)}
@media (max-width:900px){.cliente-band__grid{grid-template-columns:1fr}.matchbox{width:82%;justify-self:start}}

/* ==========================================================
   CONTATO (cartão-postal)
   ========================================================== */
.contato{background:var(--tx-bordo);color:var(--creme);padding:clamp(6rem,11vw,10rem) 0}
.contato__head{max-width:46rem;margin-bottom:3rem}
.contato__title{font:400 clamp(3rem,6.4vw,6.2rem)/1 var(--f-serif);font-variation-settings:"opsz" 144;letter-spacing:-.012em;margin:1rem 0 1.4rem}
.contato__title em{font-family:var(--f-script);font-style:normal;color:var(--manteiga);font-size:1.1em}
.contato__head>p{max-width:30rem;opacity:.9}
.postal{
  display:grid;grid-template-columns:1.25fr 1fr;background:#FBF7EE;color:var(--chocolate-amargo);box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  padding:clamp(1.4rem,3vw,2.6rem);gap:clamp(1.4rem,3vw,3rem);transform:rotate(-1deg);max-width:1100px;
}
.postal__left{display:flex;flex-direction:column;gap:1rem;padding-right:clamp(1rem,3vw,3rem);border-right:1px solid rgba(58,40,36,.3)}
.postal__greet{font-size:clamp(2rem,3vw,2.8rem);margin:0;color:var(--bordo)}
.postal label{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.postal label .mono{font-size:.66rem;color:var(--bordo);white-space:nowrap}
.postal input,.postal textarea{
  flex:1;min-width:140px;background:transparent;border:0;border-bottom:1px solid rgba(58,40,36,.45);border-radius:0;
  font:400 1.7rem/1.1 var(--f-hand);color:var(--chocolate-amargo);padding:.2rem .1rem;outline:none;resize:none;
}
.postal input:focus,.postal textarea:focus{border-bottom-color:var(--bordo);background:rgba(202,215,233,.25)}
.postal input[type=date]{font:400 1rem var(--f-mono)}
.postal__right{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;min-height:340px}
.postal__stamp{
  align-self:flex-end;width:110px;padding:12px 10px;background:var(--azul-bebe);text-align:center;
  outline:2px dashed var(--creme);outline-offset:-6px;box-shadow:0 0 0 4px var(--azul-bebe),0 6px 14px rgba(0,0,0,.2);
  transform:rotate(4deg);
}
.postal__stamp img{width:64%;margin:6px auto}
.postal__stamp span{font-size:.5rem;color:var(--chocolate-amargo)}
.postal__mark{position:absolute;right:80px;top:40px;width:110px;height:110px;border-radius:50%;border:2px solid rgba(58,40,36,.55);display:grid;place-items:center;text-align:center;font-size:.6rem;color:rgba(58,40,36,.7);transform:rotate(-16deg)}
.postal__to p{margin:0}
.postal__to .mono{font-size:.62rem;opacity:.7}
.postal__to .hand{font-size:3rem;color:var(--chocolate-amargo);border-bottom:1px solid rgba(58,40,36,.3)}
.postal .btn{align-self:flex-start}
.postal__ok{margin:0;font-size:.64rem;line-height:1.6;color:var(--bordo);max-width:30rem}
.postal__ok a{border-bottom:1px dashed currentColor;white-space:nowrap}
.contato__info{list-style:none;padding:0;margin:3rem 0 0;display:flex;flex-wrap:wrap;gap:1rem 2.4rem}
.contato__info a{border-bottom:1px dashed currentColor}
@media (max-width:860px){.postal{grid-template-columns:1fr;transform:none}.postal__left{border-right:0;padding-right:0;border-bottom:1px solid rgba(58,40,36,.3);padding-bottom:1.6rem}.postal__right{min-height:260px}.postal__mark{right:130px;top:10px}}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{background:var(--tx-chocolate);color:var(--creme);padding:clamp(3rem,6vw,5rem) 0 2rem;overflow:hidden}
.footer__giant{font-size:clamp(9rem,30vw,30rem);line-height:.9;margin:0 0 -.05em;text-align:center;white-space:nowrap;color:var(--creme)}
.footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;border-top:1px dashed rgba(242,235,221,.35);padding-top:1.4rem;font-size:.66rem}
.footer__row p{margin:0;opacity:.75}
.footer__row nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer__row nav a:hover{color:var(--azul-bebe)}

/* ==========================================================
   WHATSAPP
   ========================================================== */
.wa{
  position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--azul-bebe);display:grid;place-items:center;border:1.5px solid var(--chocolate-amargo);box-shadow:3px 3px 0 var(--chocolate-amargo);
  transition:transform .5s var(--bounce);transform:scale(0) rotate(-30deg);
}
.wa.is-on{transform:scale(1)}
.wa.is-on:hover{transform:scale(1.08) rotate(-8deg)}
.wa svg{width:28px;fill:var(--chocolate-amargo)}

/* ==========================================================
   VIEWER (stories do portfólio)
   ========================================================== */
.viewer{position:fixed;inset:0;z-index:200;background:rgba(58,40,36,.95);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s}
.viewer.is-open{opacity:1;pointer-events:auto}
.viewer__phone{position:relative;height:min(86svh,780px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;transform:scale(.9) rotate(-3deg);transition:transform .6s var(--bounce)}
.viewer.is-open .viewer__phone{transform:none}
.viewer__slides{position:absolute;inset:0}
.viewer__slides::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 20%)}
.viewer__prev,.viewer__next{position:absolute;top:0;bottom:0;z-index:4;width:40%}
.viewer__prev{left:0}.viewer__next{right:0;width:60%}
.viewer__close{position:absolute;top:1.4rem;right:var(--gutter);color:var(--creme);padding:.8rem}
@media (max-width:520px){.viewer__phone{height:100svh;border-radius:0;width:100vw;aspect-ratio:auto}.viewer__close{z-index:5;top:3.4rem}}

/* ==========================================================
   ESTADOS INICIAIS DE ANIMAÇÃO (só com JS)
   ========================================================== */
.js [data-reveal]{opacity:0;transform:translateY(40px)}
.js .hero-in{opacity:0;transform:translateY(50px)}
.js .board > *{opacity:0}
.js [data-draw]{stroke-dasharray:1;stroke-dashoffset:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal],.js .hero-in,.js .board > *{opacity:1;transform:none}
  .heart img{animation:none}
  .js [data-draw]{stroke-dashoffset:0}
}