@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-var.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrumentserif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 var(--t-corpo)/1.65 var(--f-texto);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-family:var(--f-acento);font-style:italic;font-weight:400;letter-spacing:0}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--fita-texto);outline-offset:3px;border-radius:6px}
.pular{position:absolute;left:-999px;top:8px;z-index:100;background:var(--tinta);color:#fff;padding:12px 18px}
.pular:focus{left:16px}
.grao{position:fixed;inset:0;z-index:90;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='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.topo__in,.hero__in,.loja__in,.rodape__in{--m:clamp(20px,5vw,72px);padding-inline:var(--m);max-width:1440px;margin-inline:auto}
.h2{font:800 var(--t-h2)/1.02 var(--f-titulo);letter-spacing:-.035em;text-wrap:balance}
.h2 em,.hero__titulo em{color:var(--fita-texto);font-size:1.12em}
.h3{font:700 var(--t-h3)/1.15 var(--f-titulo);letter-spacing:-.015em}
.rotulo{font:700 var(--t-mini)/1.2 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--etiqueta-texto);margin-bottom:var(--e3)}
.rotulo--claro{color:var(--rosa)}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font:700 .95rem/1 var(--f-texto);text-decoration:none;border:2px solid transparent;
  transition:transform var(--d-rapida) var(--ease),background-color var(--d-rapida),color var(--d-rapida),box-shadow var(--d-rapida) var(--ease)}
.botao:hover{transform:translateY(-2px) rotate(-1deg)}
.botao:active{transform:translateY(0) scale(.98)}
.botao--fita{background:var(--fita-texto);color:#fff;box-shadow:0 12px 24px -12px rgb(198 40 40 / .7)}
.botao--fita:hover{background:#A91F1F}
.botao--g{min-height:58px;padding:16px 28px;font-size:1.02rem}
.botao--linha{border-color:var(--tinta);color:var(--tinta)}
.botao--linha:hover{background:var(--tinta);color:var(--papel)}
.botao--claro{border-color:rgb(250 244 236 / .6);color:var(--papel)}
.botao--claro:hover{background:var(--papel);color:var(--tinta)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4)}
.acoes--centro{justify-content:center}

/* topo */
.topo{position:sticky;top:0;z-index:50;background:rgb(250 244 236 / .9);backdrop-filter:blur(10px);border-bottom:1px solid rgb(42 26 18 / .08)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);min-height:76px}
.marca{display:inline-flex;align-items:center;min-height:48px}
.marca img{height:46px;width:auto}
.menu{display:flex;gap:var(--e4)}
.menu a{text-decoration:none;font-weight:600;font-size:.95rem;padding:12px 0;background:linear-gradient(var(--fita),var(--fita)) 0 85%/0 3px no-repeat;transition:background-size var(--d-media) var(--ease)}
.menu a:hover{background-size:100% 3px}

/* 1. hero */
.hero{position:relative;overflow:hidden}
.fita-v{position:absolute;top:0;bottom:0;left:61%;width:64px;background:var(--fita);box-shadow:inset 6px 0 0 rgb(0 0 0 / .08),inset -6px 0 0 rgb(255 255 255 / .12)}
.hero__in{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;min-height:calc(100svh - 76px);padding-block:var(--e8)}
.hero__texto{grid-column:1/7;position:relative;z-index:2}
.etiqueta{display:inline-flex;margin-bottom:var(--e4)}
.etiqueta span{position:relative;display:inline-block;background:var(--etiqueta-texto);color:#fff;font:700 .78rem/1 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;padding:12px 18px 12px 30px;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
.hero__titulo{font:800 var(--t-hero)/.98 var(--f-titulo);letter-spacing:-.045em}
.hero__titulo .linha{display:block;overflow:hidden;padding-bottom:.06em}
.hero__titulo .linha>span{display:inline-block}
.hero__sub{max-width:42ch;margin-top:var(--e4);color:var(--cinza)}
/* foto em forma de etiqueta de presente, pendurada na fita */
.hero__tag{grid-column:7/12;position:relative;z-index:2;background:#fff;padding:14px 14px 0;border-radius:var(--raio);box-shadow:var(--sombra);transform:rotate(4deg);transform-origin:50% 0;margin-top:var(--e8)}
.hero__tag::before{content:"";position:absolute;top:-70px;left:50%;width:2px;height:84px;background:var(--etiqueta);transform:translateX(-50%)}
.hero__tag::after{content:"";position:absolute;top:10px;left:50%;width:18px;height:18px;border-radius:50%;background:var(--papel);border:2px solid var(--etiqueta);transform:translateX(-50%)}
.hero__tag img{border-radius:10px;aspect-ratio:1;object-fit:cover;margin-top:24px}
.hero__tag figcaption{font:italic 400 1.5rem/1 var(--f-acento);text-align:center;padding:16px 0 18px}
.hero__mini{position:absolute;z-index:3;right:clamp(20px,5vw,72px);bottom:var(--e8);width:clamp(140px,14vw,210px);border-radius:var(--raio);overflow:hidden;border:6px solid #fff;box-shadow:var(--sombra);transform:rotate(-6deg)}

/* 2. loja */
.loja{padding-block:var(--e16)}
.loja__in{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.sec-cab{grid-column:1/8;margin-bottom:var(--e6)}
.bloco figure,.mosaico{overflow:hidden;border-radius:var(--raio);background:var(--kraft)}
.bloco img{width:100%;object-fit:cover;transition:transform var(--d-lenta) var(--ease)}
.bloco:hover figure img{transform:scale(1.03)}
.bloco__txt{display:grid;grid-template-columns:auto 1fr;column-gap:var(--e2);padding-top:var(--e3);align-items:baseline}
.bloco__txt p{grid-column:2;color:var(--cinza);max-width:40ch}
.bloco__n{font:800 .9rem/1 var(--f-titulo);color:var(--fita-texto)}
.bloco--malas{grid-column:1/6;grid-row:2/4;align-self:start;position:sticky;top:calc(76px + var(--e4))}
.bloco--malas figure{aspect-ratio:3/4}
.bloco--malas img{height:118%}
.bloco--garrafas{grid-column:7/13;grid-row:2}
.bloco--garrafas img{aspect-ratio:720/662}
.bloco--make{grid-column:7/13;grid-row:3;margin-top:var(--e6)}
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--papel)}
.mosaico img{aspect-ratio:1;object-fit:cover;border-radius:6px;transition:transform var(--d-media) var(--ease)}
.mosaico img:hover{transform:scale(1.03)}

/* 3. maquiagem (destaque) */
.maquiagem{background:var(--tinta);color:var(--papel)}
.maq__pin{display:flex;align-items:center;gap:var(--e8);min-height:100svh;padding:calc(76px + var(--e4)) 0 var(--e4) clamp(20px,5vw,72px);overflow:hidden}
.maq__cab{flex:0 0 min(400px,82vw);position:relative;z-index:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:var(--tinta);padding-right:var(--e4)}
/* cobre a margem esquerda até a borda e esfuma a direita: os cards passam por baixo sem encostar no texto */
.maq__cab::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:var(--tinta)}
.maq__cab::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:72px;background:linear-gradient(90deg,var(--tinta) 30%,rgb(42 26 18 / 0))}
.maq__cab .h2 em{color:var(--rosa)}
.maq__cab p:not(.rotulo){margin:var(--e3) 0 var(--e4);color:rgb(250 244 236 / .82);max-width:36ch}
.trilho{display:flex;gap:var(--e4);padding-right:clamp(20px,5vw,72px);align-items:center}
.trilho li{flex:0 0 clamp(240px,23vw,340px)}
.trilho li:nth-child(odd){transform:rotate(-2deg)}
.trilho li:nth-child(even){transform:rotate(2deg);margin-top:var(--e8)}
.trilho figure{background:var(--papel);color:var(--tinta);padding:10px 10px 0;border-radius:12px;transition:transform var(--d-media) var(--ease)}
.trilho figure:hover{transform:translateY(-6px)}
.trilho img{border-radius:8px;aspect-ratio:1;width:100%;object-fit:cover}
.maquiagem :focus-visible{outline-color:var(--rosa)}
.trilho:focus-visible{outline-offset:-3px;border-radius:12px}
.trilho figcaption{font:italic 400 1.35rem/1 var(--f-acento);text-align:center;padding:12px 0 14px}

/* 4. frase */
.frase{position:relative;padding:var(--e16) clamp(20px,5vw,72px);text-align:center;overflow:hidden;background:var(--kraft)}
.fita-h{position:absolute;left:-5%;right:-5%;top:var(--e8);height:44px;background:var(--fita);transform:rotate(-2deg)}
.frase__txt{position:relative;font:800 clamp(2.6rem,1rem + 6.4vw,8rem)/1 var(--f-titulo);letter-spacing:-.05em;max-width:14ch;margin-inline:auto}
.frase__txt em{color:var(--fita-texto)}
.frase__fonte{position:relative;margin-top:var(--e3);color:var(--cinza);font-weight:600}

/* 5. contato */
.contato{padding:var(--e16) clamp(20px,5vw,72px)}
.contato__card{max-width:880px;margin-inline:auto;text-align:center;background:#fff;border-radius:var(--raio);padding:var(--e12) var(--e4);box-shadow:var(--sombra);position:relative;overflow:hidden}
.contato__card::before{content:"";position:absolute;inset:0 auto 0 50%;width:36px;transform:translateX(-50%);background:var(--fita);opacity:.12}
.contato__card>*{position:relative}
.contato__card>img{height:64px;width:auto;margin:0 auto var(--e6)}
.contato__card .h2{max-width:16ch;margin-inline:auto}
.contato__card>p:not(.contato__cidade){max-width:46ch;margin:var(--e3) auto 0;color:var(--cinza)}
.contato__cidade{margin-top:var(--e6);font:700 var(--t-mini)/1 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--etiqueta-texto)}

/* rodapé */
.rodape{background:var(--tinta);color:var(--papel);padding-block:var(--e6);font-size:.92rem}
.rodape__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e2)}
.rodape__aviso{color:rgb(250 244 236 / .72);font-size:.82rem}

.wa-fixo{display:none;position:fixed;right:16px;bottom:16px;z-index:60;width:60px;height:60px;border-radius:50%;background:#1A7F4B;color:#fff;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px rgb(0 0 0 / .5)}

/* motion: CSS primeiro, visível por padrão */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .revela{animation:sobe linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .parallax{animation:para linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .fita-h{animation:fita linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes sobe{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes para{from{transform:translateY(-10%)}to{transform:translateY(0)}}
@keyframes fita{from{transform:rotate(-5deg) scaleX(.4)}to{transform:rotate(-1deg) scaleX(1)}}
.js-io .revela{opacity:0;transform:translateY(40px);transition:opacity var(--d-lenta) var(--ease),transform var(--d-lenta) var(--ease)}
.js-io .revela.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
  .revela,.parallax,.fita-h{animation:none!important}
  .js-io .revela{opacity:1;transform:none}
}

@media (max-width:1100px){
  .menu{display:none}
  .fita-v{left:58%}
}
@media (max-width:860px){
  .fita-v{left:auto;right:-6px;width:34px}
  .hero__sub{max-width:88%}
  .hero__in{grid-template-columns:1fr;min-height:0;padding-block:var(--e6) var(--e12);row-gap:var(--e8)}
  .hero__texto{grid-column:1/-1}
  .hero__tag{grid-column:1/-1;width:min(78vw,380px);justify-self:center;margin-top:var(--e6)}
  .hero__mini{bottom:calc(var(--e12) + 72px);width:110px}
  .loja__in{grid-template-columns:1fr}
  .loja__in>*{grid-column:1/-1!important;grid-row:auto!important;margin-top:0!important}
  .bloco--malas{position:static}
  .loja__in{row-gap:var(--e8)}
  .maq__pin{flex-direction:column;align-items:flex-start;min-height:0;padding-right:0}
  .maq__pin{padding-top:var(--e12)}
  .maq__cab{align-self:auto;flex:none;width:100%;padding-right:clamp(20px,5vw,72px)}
  .maq__cab::before,.maq__cab::after{display:none}
  .trilho{overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x mandatory;width:100%;padding:var(--e2) var(--e3) var(--e3) 0;align-items:flex-start}
  .trilho li{scroll-snap-align:start;flex-basis:62vw;margin-top:0!important}
  .wa-fixo{display:inline-flex}
}
@media (max-width:480px){
  .marca img{height:36px}
  .topo .botao{padding:10px 16px}
  .acoes .botao{width:100%}
  .contato__card>img{height:44px}
  .contato .botao{font-size:.85rem;padding-inline:14px}
}