/* ==========================================================================
   FONTES LOCAIS: não dependem do Google, carregam mais rápido
   ========================================================================== */
@font-face{
  font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fontes/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fontes/anton-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fontes/jost-latin-300-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:italic; font-weight:300; font-display:swap;
  src:url("../fontes/jost-latin-300-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fontes/jost-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fontes/jost-latin-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fontes/jost-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:italic; font-weight:500; font-display:swap;
  src:url("../fontes/jost-latin-500-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fontes/jost-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:italic; font-weight:600; font-display:swap;
  src:url("../fontes/jost-latin-600-italic.woff2") format("woff2");
}

/* ==========================================================================
   TIQUIRA AGUARÁ · folha de estilo
   Cores, tipografia, sol, selo, rótulos e pattern do manual da marca.
   ========================================================================== */

:root{
  --sol:        #FBAC52;
  --vinho:      #631317;
  --terra:      #6A3D12;
  --ouro:       #AD7230;
  --ouro-claro: #D9A45C;   /* dourado para usar sobre fundo escuro */

  --areia:      #FDF1D8;
  --creme:      #FEF8EA;
  --sol-claro:  #FCC079;
  --sol-fundo:  #F5A044;
  --vinho-esc:  #4A0E11;
  --vinho-noite:#37090C;

  --display: "Anton", "Arial Narrow", sans-serif;
  --corpo:   "Jost", "Futura", "Century Gothic", sans-serif;

  --limite: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --respiro: clamp(4rem, 9vw, 7.5rem);
  --topo-altura: 78px;
  --curva: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--corpo);
  font-size:clamp(1rem,.96rem + .22vw,1.08rem);
  line-height:1.68;
  color:var(--terra);
  background:var(--areia);
  -webkit-font-smoothing:antialiased;
}
body.travado{ overflow:hidden; }

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button{ font:inherit; }

:focus-visible{ outline:3px solid var(--vinho); outline-offset:3px; }
.faixa--vinho :focus-visible,.topo :focus-visible,
.rodape :focus-visible,.topo-pagina :focus-visible{ outline-color:var(--sol); }

.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.pular{
  position:absolute; left:-9999px; z-index:300;
  background:var(--vinho); color:var(--creme);
  padding:.75rem 1.25rem; text-decoration:none;
}
.pular:focus{ left:1rem; top:1rem; }

.limite{ width:100%; max-width:var(--limite); margin-inline:auto; padding-inline:var(--gutter); }
.limite--estreito{ max-width:780px; }

/* ------------------------------------------------------- revelação -------- */
[data-reveal]{ opacity:0; transform:translateY(26px); }
.js-pronto [data-reveal]{ transition:opacity .8s var(--curva), transform .8s var(--curva); }
[data-reveal].visivel{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ------------------------------------------------------ tipografia -------- */
.sobrancelha{
  font-size:.71rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--sol); margin:0 0 1rem;
}
.sobrancelha--escura{ color:var(--ouro); }
.sobrancelha--vinho{ color:var(--vinho); opacity:.8; }

.titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.85rem,1.15rem + 2.6vw,3.05rem);
  line-height:1.16; letter-spacing:.008em; text-transform:uppercase;
  color:var(--vinho); margin:0;
}
.titulo--claro{ color:var(--sol); }

.titulo-pagina{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem,1.35rem + 4vw,4.3rem);
  line-height:1.12; letter-spacing:.006em; text-transform:uppercase;
  color:var(--sol); margin:0 0 1.5rem;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.titulo-pagina--menor{ font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem); }

.texto-grande{
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  line-height:1.36; color:var(--vinho); margin:0 0 1rem;
}
.chamada{ max-width:52ch; color:var(--sol-claro); font-size:1.06rem; margin:0; }

.etiqueta{
  display:inline-block; margin:0 0 1rem;
  background:var(--vinho); color:var(--sol);
  font-size:.64rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  padding:.45rem 1rem;
}
.link{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--vinho); font-weight:500; border-bottom:1px solid currentColor;
}

/* fio ornamental com o sol no meio */
.fio-ornamento{
  display:flex; align-items:center; gap:.9rem;
  margin:1.6rem 0; max-width:340px;
}
.fio-ornamento span{ height:1px; flex:1; background:var(--vinho); opacity:.35; }
.fio-ornamento img{ width:22px; height:auto; opacity:.7; }
.fio-ornamento--claro span{ background:var(--sol); opacity:.45; }
.fio-ornamento--claro img{ opacity:.9; }

/* ---------------------------------------------------------- botões -------- */
.botao{
  position:relative; display:inline-block; cursor:pointer;
  font-family:var(--corpo); font-weight:500;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; padding:1.05rem 2.1rem;
  border-radius:2px; border:1.5px solid transparent;
  transition:transform .25s var(--curva), background-color .25s var(--curva),
             color .25s var(--curva), box-shadow .25s var(--curva);
}
.botao--cheio{
  background:var(--vinho); color:var(--sol); border-color:var(--vinho);
  box-shadow:0 4px 0 rgba(74,14,17,.35);
}
.botao--cheio:hover{ background:var(--vinho-esc); border-color:var(--vinho-esc);
  transform:translateY(-3px); box-shadow:0 7px 0 rgba(74,14,17,.3); }
.botao--cheio:active{ transform:translateY(0); box-shadow:0 2px 0 rgba(74,14,17,.35); }
.botao--vazio{ background:transparent; color:var(--vinho); border-color:var(--vinho); }
.botao--vazio:hover{ background:var(--vinho); color:var(--sol); transform:translateY(-3px); }
.faixa--vinho .botao--vazio,.topo-pagina .botao--vazio{ color:var(--sol); border-color:var(--sol); }
.faixa--vinho .botao--vazio:hover{ background:var(--sol); color:var(--vinho); }
.botao--largo{ display:block; width:100%; text-align:center; }
.acoes{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ------------------------------------------------------------ topo -------- */
.topo{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg,var(--vinho) 0%, var(--vinho-esc) 100%);
}
.topo__interno{
  max-width:var(--limite); margin-inline:auto;
  padding:.7rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem; position:relative;
}
.topo__fio{
  height:3px;
  background:repeating-linear-gradient(90deg,
    var(--sol) 0 22px, transparent 22px 32px);
  opacity:.55;
}

.marca{ display:flex; align-items:center; gap:.85rem; flex:none; text-decoration:none; }
.marca__selo{
  width:44px; height:44px; flex:none;
  transition:transform .5s var(--curva);
}
.marca:hover .marca__selo{ transform:rotate(45deg); }
.marca__nome{
  display:flex; flex-direction:column;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);
  line-height:.94; letter-spacing:.02em; text-transform:uppercase;
  color:var(--sol);
  transition:color .25s var(--curva);
}
.marca__nome span{ display:block; }
.marca:hover .marca__nome{ color:var(--creme); }

.nav{ display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.nav a{
  position:relative; text-decoration:none;
  font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--creme); padding-block:.4rem;
  transition:color .25s var(--curva);
}
.nav a span{ position:relative; display:block; }
.nav a span::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1.5px; background:var(--sol);
  transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--curva);
}
.nav a:hover{ color:var(--sol); }
.nav a:hover span::after{ transform:scaleX(1); transform-origin:left; }
.nav a.atual{ color:var(--sol); }
.nav a.atual span::after{ transform:scaleX(1); }
.nav__loja{ color:var(--sol) !important; }

.topo__acoes{ display:flex; align-items:center; gap:.75rem; flex:none; }
.carrinho-botao{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; cursor:pointer;
  background:none; border:1px solid rgba(251,172,82,.4);
  border-radius:2px; color:var(--sol);
  transition:background-color .25s var(--curva), border-color .25s var(--curva);
}
.carrinho-botao:hover{ background:rgba(251,172,82,.14); border-color:var(--sol); }
.carrinho-botao svg{ width:22px; height:22px; }
.carrinho-botao__conta{
  position:absolute; top:-7px; right:-7px;
  min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:var(--sol); color:var(--vinho);
  display:grid; place-items:center;
  font-size:.68rem; font-weight:600;
  transform:scale(0); transition:transform .3s var(--curva);
}
.carrinho-botao__conta.cheio{ transform:scale(1); }
.carrinho-botao.pulsa{ animation:pulso .5s var(--curva); }
@keyframes pulso{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.16)} }

.menu-botao{ display:none; background:none; border:none; cursor:pointer; padding:.7rem .3rem; }
.menu-botao__traco{ display:block; width:24px; height:2px; background:var(--sol); position:relative; }
.menu-botao__traco::before,.menu-botao__traco::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:var(--sol);
  transition:transform .3s var(--curva);
}
.menu-botao__traco::before{ top:-7px; }
.menu-botao__traco::after{ top:7px; }
.menu-botao[aria-expanded="true"] .menu-botao__traco{ background:transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__traco::before{ transform:translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__traco::after{ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------- páginas -------- */
.pagina[hidden]{ display:none; }
.pagina{ animation:entrar .5s var(--curva); }
@keyframes entrar{ from{opacity:0} to{opacity:1} }

.faixa{ padding-block:var(--respiro); position:relative; overflow:hidden; }
.faixa--curta{ padding-block:clamp(2.5rem,5vw,3.5rem); }
.faixa--areia{ background:var(--areia); }
.faixa--sol{ background:linear-gradient(170deg,var(--sol) 0%, var(--sol-fundo) 100%); }
.faixa--vinho{ background:linear-gradient(170deg,var(--vinho) 0%, var(--vinho-esc) 100%); color:var(--sol-claro); }
.faixa > .limite{ position:relative; z-index:2; }

.faixa__pattern,.capa__pattern,.topo-pagina__pattern,.rodape__pattern{
  position:absolute; inset:-10% 0; z-index:1; pointer-events:none;
  background-image:url("../images/marca/pattern-laranja.png");
  background-size:640px auto;
  opacity:.07;
}
.faixa__pattern--claro{ background-image:url("../images/marca/pattern-vinho.png"); opacity:.05; }
.faixa__pattern--vinho{ background-image:url("../images/marca/pattern-vinho.png"); opacity:.09; }
.capa__pattern{ background-image:url("../images/marca/pattern-vinho.png"); opacity:.11; }
.topo-pagina__pattern{ opacity:.09; }
.rodape__pattern{ opacity:.06; }

.cabeca{ max-width:min(56ch,640px); margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.cabeca--centro{ margin-inline:auto; text-align:center; max-width:min(760px,100%); }
.cabeca__sol{ width:42px; height:auto; margin-bottom:1.1rem; }
.cabeca--centro .cabeca__sol{ margin-inline:auto; }
.cabeca__linha{ margin:1.3rem 0 0; color:var(--sol-claro); }
.faixa--areia .cabeca__linha,.faixa--sol .cabeca__linha{ color:var(--terra); }
.cabeca--centro .cabeca__linha{ margin-inline:auto; max-width:46ch; }

/* topo de página interna */
.topo-pagina{
  background:linear-gradient(160deg,var(--vinho) 0%, var(--vinho-noite) 100%);
  color:var(--sol-claro);
  padding-block:clamp(3.5rem,8vw,6rem);
  position:relative; overflow:hidden;
}
.topo-pagina .limite{ position:relative; z-index:3; }
.topo-pagina--curto{ padding-block:clamp(2rem,4vw,3rem); }
.topo-pagina__selo{
  position:absolute; z-index:2; pointer-events:none;
  right:-70px; top:50%; transform:translateY(-50%);
  width:min(420px,46vw); opacity:.13;
}

/* ============================== CAPA ====================================== */
.capa{
  background:linear-gradient(155deg,var(--sol) 0%, var(--sol-fundo) 100%);
  position:relative; overflow:hidden;
  padding-block:clamp(2.5rem,6vw,5rem);
}
.capa__sol-fundo{
  position:absolute; z-index:1; pointer-events:none;
  left:-14%; bottom:-24%; width:min(560px,58vw); opacity:.10;
}
.capa__interno{
  position:relative; z-index:3;
  max-width:var(--limite); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1.18fr .82fr;
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.capa__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem,1.1rem + 4.1vw,4.15rem);
  line-height:1.14; letter-spacing:.006em; text-transform:uppercase;
  color:var(--vinho); margin:0;
}
.capa__titulo span{ display:block; }
.capa__linha{
  font-size:clamp(1.02rem,.96rem + .42vw,1.24rem);
  color:var(--vinho); max-width:40ch; margin:0 0 2.4rem;
}
.capa__linha em{ font-style:italic; }

/* vitrine do carro-chefe */
.vitrine{ margin:0; position:relative; padding-block:1rem; }
.vitrine__halo{
  position:absolute; z-index:1; inset:6% 12% 12% 12%;
  background:radial-gradient(ellipse at 50% 45%,
    rgba(255,246,225,.85) 0%, rgba(255,240,210,.4) 42%, rgba(255,240,210,0) 70%);
  filter:blur(6px);
}
.vitrine__rotulo{
  position:absolute; z-index:2; pointer-events:none;
  top:48%; left:50%; transform:translate(-50%,-50%);
  width:96%; max-width:none; opacity:.2;
}
.vitrine__garrafa{
  position:relative; z-index:3;
  width:auto; max-width:100%; max-height:min(520px,54vh);
  margin-inline:auto;
  filter:drop-shadow(0 26px 34px rgba(74,14,17,.34));
  animation:flutuar 7s ease-in-out infinite;
}
@keyframes flutuar{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.vitrine figcaption{
  position:relative; z-index:3;
  margin-top:1.25rem; text-align:center; color:var(--vinho);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
}
.vitrine__etiqueta{
  background:var(--vinho); color:var(--sol);
  font-size:.6rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; padding:.35rem .9rem;
}
.vitrine figcaption strong{
  font-size:.82rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.vitrine__nota{ font-size:.86rem; opacity:.75; }

/* números */
.numeros{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.5rem);
}
.numero{ text-align:center; }
.numero strong{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);
  line-height:1; color:var(--sol);
}
.numero span{
  display:block; margin-top:.5rem;
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro-claro);
}

/* pilares */
.pilares{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); }
.pilar{ text-align:center; position:relative; padding-top:1rem; }
.pilar__algarismo{
  display:block; font-family:var(--display);
  font-size:2.8rem; line-height:1; color:var(--ouro); margin-bottom:.6rem;
  opacity:.85;
}
.pilar h3{
  font-family:var(--display); font-weight:400; font-size:1.6rem;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--vinho); margin:0 0 .85rem;
 line-height:1.16;}
.pilar h3::after{
  content:""; display:block; width:34px; height:1.5px;
  background:var(--ouro); margin:.7rem auto 0; opacity:.6;
}
.pilar p{ margin:0; }

/* portas */
.portas{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.porta{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.55rem; text-align:left;
  background:rgba(251,172,82,.04); cursor:pointer;
  border:1px solid rgba(251,172,82,.3); border-radius:3px;
  padding:clamp(1.6rem,3vw,2.1rem);
  transition:background-color .35s var(--curva), border-color .35s var(--curva),
             transform .35s var(--curva);
}
.porta__marca{
  position:absolute; right:-30px; top:-30px; width:130px;
  opacity:.07; transition:transform .6s var(--curva), opacity .35s var(--curva);
}
.porta:hover{ background:rgba(251,172,82,.12); border-color:var(--sol); transform:translateY(-5px); }
.porta:hover .porta__marca{ transform:rotate(60deg) scale(1.15); opacity:.14; }
.porta__rotulo{ font-size:.66rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-claro); }
.porta__titulo{ font-family:var(--display); font-size:1.8rem; line-height:1.14; text-transform:uppercase; color:var(--sol); }
.porta__texto{ color:var(--sol-claro); font-size:.95rem; }
.porta__seta{
  margin-top:.5rem; font-size:1.2rem; color:var(--sol);
  transition:transform .35s var(--curva);
}
.porta:hover .porta__seta{ transform:translateX(8px); }

/* convite */
.convite{ display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; }
.convite__texto{ margin:1.6rem 0 2.2rem; max-width:34ch; }
.convite__selo{ width:100%; max-width:320px; margin-inline:auto; opacity:.9; }

/* ============================== CINEMA (vídeo) ============================ */
.cinema{ position:relative; margin:0; padding-block:1rem; }
.cinema__pattern-esq,.cinema__pattern-dir{
  position:absolute; top:-2%; bottom:-2%; width:22%;
  object-fit:cover; opacity:.10; z-index:1; pointer-events:none;
  max-width:none; height:auto;
}
.cinema__pattern-esq{ left:-4%; }
.cinema__pattern-dir{ right:-4%; transform:scaleX(-1); }

.cinema__rotulo{
  position:absolute; z-index:2; pointer-events:none;
  width:clamp(100px,12vw,185px); opacity:.85;
  filter:drop-shadow(0 10px 18px rgba(74,14,17,.2));
}
.cinema__rotulo--esq{ left:1%; top:14%; transform:rotate(-7deg); }
.cinema__rotulo--dir{ right:1%; bottom:12%; transform:rotate(6deg); }

.cinema__moldura{
  position:relative; z-index:3;
  width:min(420px,100%); margin-inline:auto;
  padding:clamp(.9rem,2vw,1.4rem);
  background:linear-gradient(160deg,var(--vinho) 0%, var(--vinho-noite) 100%);
  border-radius:4px;
  box-shadow:0 24px 60px rgba(74,14,17,.34);
}
.cinema__moldura::before{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(251,172,82,.4); border-radius:2px; pointer-events:none; z-index:4;
}
.cinema__canto{
  position:absolute; width:34px; z-index:5; pointer-events:none;
  filter:brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(760%) hue-rotate(334deg) brightness(101%) contrast(97%);
}
.cinema__canto--tl{ top:-15px; left:-15px; }
.cinema__canto--tr{ top:-15px; right:-15px; }
.cinema__canto--bl{ bottom:-15px; left:-15px; }
.cinema__canto--br{ bottom:-15px; right:-15px; }

.cinema__tela{ position:relative; overflow:hidden; border-radius:2px; background:#000; }
.cinema__tela video{ width:100%; display:block; aspect-ratio:9/16; object-fit:cover; }

.cinema__play{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:linear-gradient(180deg, rgba(55,9,12,.25) 0%, rgba(55,9,12,.55) 100%);
  border:none; cursor:pointer; color:var(--sol);
  transition:opacity .4s var(--curva);
}
.cinema__play[hidden]{ display:none; }
.cinema__play-anel{
  position:relative; width:76px; height:76px; border-radius:50%;
  border:2px solid var(--sol);
  display:grid; place-items:center;
  transition:transform .35s var(--curva), background-color .35s var(--curva);
}
.cinema__play-anel::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(251,172,82,.4);
  animation:anel 2.6s ease-out infinite;
}
@keyframes anel{ 0%{transform:scale(.9);opacity:.8} 100%{transform:scale(1.35);opacity:0} }
.cinema__play-icone{
  position:absolute; width:0; height:0; margin-left:6px;
  border-top:13px solid transparent; border-bottom:13px solid transparent;
  border-left:21px solid var(--sol);
}
.cinema__play:hover .cinema__play-anel{ background:rgba(251,172,82,.2); transform:scale(1.08); }
.cinema__play-texto{
  font-size:.7rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
}

.cinema__legenda{
  position:relative; z-index:3;
  margin-top:1.5rem; display:flex; align-items:center;
  justify-content:center; gap:.7rem;
  font-size:.72rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ouro);
}
.cinema__legenda img{ width:20px; opacity:.8; }

/* ============================== HISTÓRIA ================================== */
.abertura{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.abertura p{ margin:0 0 1rem; max-width:58ch; }
.abertura__rotulo{
  width:100%; max-width:290px; margin-inline:auto;
  filter:drop-shadow(0 18px 30px rgba(74,14,17,.26));
}

.tempo{ list-style:none; margin:0; padding:0; }
.tempo__marco{
  position:relative; overflow:hidden;
  border-top:1px solid rgba(251,172,82,.26);
  padding:clamp(1.9rem,3.6vw,2.75rem) 0;
  display:grid; grid-template-columns:220px 1fr;
  gap:clamp(1rem,3vw,2.5rem); align-items:start;
}
.tempo__marco:last-child{ border-bottom:1px solid rgba(251,172,82,.26); }
.tempo__quando{
  margin:0; font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ouro-claro);
}
.tempo__titulo{
  grid-column:2; margin:0 0 .9rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.3rem);
  line-height:1.14; text-transform:uppercase; color:var(--sol);
}
.tempo__corpo{ grid-column:2; }
.tempo__corpo p{ margin:0 0 .9rem; max-width:64ch; color:var(--creme); opacity:.88; }
.tempo__corpo p:last-child{ margin-bottom:0; }
.tempo__frase{
  font-family:var(--display); font-size:1.2rem; line-height:1.34;
  text-transform:uppercase; letter-spacing:.02em;
  color:var(--sol) !important; opacity:1 !important;
}
.tempo__marco--destaque{ background:rgba(251,172,82,.06); }
.tempo__marco--destaque > *:not(.tempo__selo){ padding-inline-start:clamp(0px,1.6vw,1.4rem); }
.tempo__selo{
  position:absolute; right:-50px; top:50%; transform:translateY(-50%);
  width:260px; opacity:.09; pointer-events:none;
}

.onde{ display:grid; grid-template-columns:1.32fr .68fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.onde p{ margin:0 0 1rem; max-width:56ch; }
.onde__selo{ width:100%; max-width:270px; margin-inline:auto; opacity:.85; }
.registro{ margin-top:1.6rem; padding-top:1.3rem; border-top:2px solid var(--vinho); }
.registro p{ margin:0 0 .3rem; font-size:.92rem; }

/* ============================== A BEBIDA ================================== */
.processo{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.6rem);
}
.processo li{
  border-top:2px solid var(--vinho); padding-top:1.2rem;
  transition:transform .35s var(--curva);
}
.processo li:hover{ transform:translateY(-4px); }
.processo__num{
  display:block; font-family:var(--display);
  font-size:1.8rem; color:var(--ouro); line-height:1; margin-bottom:.55rem;
}
.processo h3{
  font-family:var(--corpo); font-weight:600; font-size:1.06rem;
  color:var(--vinho); margin:0 0 .45rem;
}
.processo p{ margin:0; font-size:.95rem; }

.razoes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3rem); }
.razao{ border-top:2px solid var(--sol); padding-top:1.3rem; }
.razao h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.28rem,1.1rem + .6vw,1.68rem);
  line-height:1.18; text-transform:uppercase; color:var(--sol); margin:0 0 .75rem;
}
.razao p{ margin:0; color:var(--creme); opacity:.88; }

.terroir{
  display:grid; grid-template-columns:.32fr 1fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgba(106,61,18,.25);
}
.terroir > img{ width:100%; max-width:200px; margin-inline:auto; opacity:.9; }
.terroir p{ margin:0 0 .9rem; }

.faq{ margin-top:clamp(2.5rem,5vw,4rem); }
.faq details{ border-bottom:1px solid rgba(106,61,18,.25); padding:1.15rem 0; }
.faq summary{
  cursor:pointer; font-weight:600; color:var(--vinho); font-size:1.03rem;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--display); font-size:1.45rem; color:var(--ouro);
  transition:transform .3s var(--curva);
}
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:.9rem 0 0; max-width:64ch; }

/* ============================== PRODUTOS ================================== */
.destaque{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.destaque__imagem{ position:relative; padding-block:1rem; }
.destaque__halo{
  position:absolute; inset:4% 8% 8% 8%;
  background:radial-gradient(ellipse at 50% 45%,
    rgba(255,250,238,.9) 0%, rgba(255,244,220,.45) 44%, rgba(255,244,220,0) 72%);
  filter:blur(5px); z-index:1;
}
.destaque__rotulo{
  position:absolute; z-index:2; pointer-events:none;
  top:48%; left:50%; transform:translate(-50%,-50%);
  width:92%; max-width:none; opacity:.17;
}
.destaque__garrafa{
  position:relative; z-index:3;
  width:auto; max-width:100%; max-height:520px; margin-inline:auto;
  filter:drop-shadow(0 24px 32px rgba(74,14,17,.28));
}
.destaque__cor{ margin:0 0 1.3rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); }
.destaque__corpo .titulo{ margin-bottom:.95rem; }
.destaque__corpo p{ margin:0 0 1rem; max-width:52ch; }
.bolinha{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:.45rem; vertical-align:middle; }
.bolinha--ambar{ background:#C08033; box-shadow:0 0 0 3px rgba(192,128,51,.18); }
.bolinha--clara{ background:#F5EFE0; box-shadow:0 0 0 3px rgba(106,61,18,.12); }

.ficha{ margin:1.6rem 0 1.9rem; border-top:1px solid rgba(106,61,18,.25); }
.ficha > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid rgba(106,61,18,.15);
}
.ficha dt{ font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ouro); }
.ficha dd{ margin:0; font-size:.92rem; font-weight:500; color:var(--vinho); text-align:right; }

.formatos{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.formato{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid rgba(251,172,82,.28); border-radius:3px;
  padding:clamp(1.6rem,3vw,2.2rem);
  transition:border-color .35s var(--curva), transform .35s var(--curva),
             background-color .35s var(--curva);
}
.formato:hover{ border-color:var(--sol); transform:translateY(-5px); background:rgba(251,172,82,.05); }
.formato__imagem{
  position:relative; overflow:hidden;
  margin:0 auto 1.35rem; border-radius:3px;
  background:linear-gradient(170deg,#fff 0%,#FAF3E4 100%);
  display:flex; align-items:center; justify-content:center;
  min-height:290px;
}
.formato__rotulo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:118%; width:auto; max-width:none; opacity:.14; z-index:1;
}
.formato__foto{
  position:relative; z-index:2;
  height:270px; width:auto; object-fit:contain;
  border-radius:3px;
  border:1px solid rgba(106,61,18,.2);
  box-shadow:0 8px 22px rgba(74,14,17,.18);
  cursor:zoom-in;
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
}
.formato:hover .formato__foto{
  transform:scale(1.05) translateY(-4px);
  box-shadow:0 16px 34px rgba(74,14,17,.26);
}
/* dica de lupa também aqui */
.formato__imagem::after{
  content:"";
  position:absolute; right:.65rem; bottom:.65rem; z-index:4;
  width:30px; height:30px; border-radius:50%;
  background:rgba(99,19,23,.82);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBAC52' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/></svg>");
  background-size:18px 18px; background-repeat:no-repeat; background-position:center;
  opacity:0; transform:scale(.85);
  transition:opacity .3s var(--curva), transform .3s var(--curva);
  pointer-events:none;
}
.formato:hover .formato__imagem::after{ opacity:1; transform:scale(1); }
.formato h3{
  font-family:var(--display); font-weight:400; font-size:2rem;
  line-height:1.14; text-transform:uppercase; color:var(--sol); margin:0 0 .4rem;
}
.formato__papel{
  margin:0 0 1rem; font-size:.66rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-claro);
}
.formato p{ color:var(--creme); opacity:.88; font-size:.95rem; margin:0; }
.formato--texto{ display:flex; flex-direction:column; justify-content:center; }
.formato__selo{ width:120px; margin:0 auto 1.35rem; opacity:.55; }

.pura{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.pura p{ margin:0 0 1rem; max-width:48ch; }
.pura__cor{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vinho); }
.pura__quadro{
  margin:0; padding:clamp(.6rem,1.4vw,1rem);
  background:var(--creme); border:1px solid rgba(99,19,23,.3); border-radius:3px;
  box-shadow:0 20px 44px rgba(74,14,17,.18);
}
.pura__quadro img{ border-radius:2px; }

/* ============================ EXPERIÊNCIA ================================= */
.ritual{
  position:relative;
  display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
  background:var(--creme); border:2px solid var(--vinho);
  border-radius:4px; padding:clamp(1.85rem,4vw,3rem);
  box-shadow:0 20px 50px rgba(74,14,17,.12);
}
.ritual__sol{ width:56px; margin-bottom:1.1rem; }
.ritual__lado p{ margin:1.1rem 0 0; }
.ritual__abas{ display:flex; gap:.65rem; margin-bottom:1rem; }
.ritual__aba{
  width:54px; height:54px; border-radius:50%;
  border:2px solid var(--vinho); background:transparent;
  color:var(--vinho); font-family:var(--display); font-size:1.4rem;
  line-height:1; cursor:pointer;
  transition:background-color .3s var(--curva), color .3s var(--curva), transform .3s var(--curva);
}
.ritual__aba:hover{ background:var(--sol-claro); transform:translateY(-3px); }
.ritual__aba.ativa{ background:var(--vinho); color:var(--sol); }
.ritual__barra{ height:2px; background:rgba(106,61,18,.2); margin-bottom:1.75rem; }
.ritual__barra span{
  display:block; height:100%; width:33.33%; background:var(--vinho);
  transition:width .4s var(--curva), transform .4s var(--curva);
}
.ritual__painel h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.45rem,1.2rem + 1vw,2rem);
  line-height:1.14; text-transform:uppercase; color:var(--vinho); margin:0 0 .75rem;
}
.ritual__painel p{ margin:0; max-width:46ch; }
.ritual__painel[hidden]{ display:none; }
.ritual__painel{ animation:surgir .45s var(--curva); }
@keyframes surgir{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.maneiras{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(251,172,82,.26);
  border-left:1px solid rgba(251,172,82,.26);
}
.maneiras li{
  padding:clamp(1.4rem,2.5vw,2rem);
  border-right:1px solid rgba(251,172,82,.26);
  border-bottom:1px solid rgba(251,172,82,.26);
  transition:background-color .35s var(--curva);
}
.maneiras li:hover{ background:rgba(251,172,82,.07); }
.maneiras__num{
  display:block; font-family:var(--display); font-size:1.1rem;
  color:var(--ouro-claro); line-height:1; margin-bottom:.6rem;
}
.maneiras h3{ font-family:var(--corpo); font-weight:600; font-size:1.03rem; color:var(--sol); margin:0 0 .45rem; }
.maneiras p{ margin:0; font-size:.94rem; color:var(--creme); opacity:.85; }

.ocasioes{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid rgba(106,61,18,.25);
}
.ocasioes h3{
  font-family:var(--display); font-weight:400; font-size:1.45rem;
  text-transform:uppercase; color:var(--vinho); margin:0 0 .45rem;
 line-height:1.16;}
.ocasioes p{ margin:0; font-size:.95rem; }

.experiencias{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.experiencias .titulo{ margin-bottom:1.85rem; }
.experiencias__grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.experiencias__grade article{
  border:1px solid rgba(99,19,23,.26); border-radius:3px;
  padding:1.4rem; background:rgba(254,248,234,.55);
  transition:transform .35s var(--curva), box-shadow .35s var(--curva);
}
.experiencias__grade article:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(74,14,17,.14); }
.experiencias__grade h3{ font-family:var(--corpo); font-weight:600; font-size:1.03rem; color:var(--vinho); margin:0 0 .35rem;  line-height:1.12;}
.experiencias__grade p{ margin:0; font-size:.92rem; }
.experiencias__aviso{ margin:1.6rem 0 0; }

/* ============================== BARES ===================================== */
.argumentos{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,3.5vw,2.85rem); }
.argumentos article{ border-top:2px solid var(--vinho); padding-top:1.2rem; }
.argumentos h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.72rem);
  line-height:1.18; text-transform:uppercase; color:var(--vinho); margin:0 0 .65rem;
}
.argumentos p{ margin:0; }

.canais{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.canal{
  border:1px solid rgba(251,172,82,.28); border-radius:3px; padding:1.45rem;
  transition:border-color .35s var(--curva), background-color .35s var(--curva);
}
.canal:hover{ border-color:var(--sol); background:rgba(251,172,82,.06); }
.canal span{ display:block; font-family:var(--display); font-size:1.35rem; color:var(--ouro-claro); line-height:1; }
.canal h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; text-transform:uppercase; color:var(--sol); margin:.4rem 0 .5rem;  line-height:1.16;}
.canal p{ margin:0; font-size:.93rem; color:var(--creme); opacity:.85; }

.pdv{ border-top:1px solid rgba(251,172,82,.26); padding-top:clamp(1.85rem,3.5vw,2.5rem); }
.pdv__titulo{ font-family:var(--display); font-weight:400; font-size:1.7rem; text-transform:uppercase; color:var(--sol); margin:0 0 1.1rem;  line-height:1.16;}
.pdv ul{ margin:0; padding:0; list-style:none; columns:2; column-gap:2.5rem; }
.pdv li{ padding:.48rem 0 .48rem 1.5rem; position:relative; color:var(--creme); opacity:.88; break-inside:avoid; }
.pdv li::before{ content:""; position:absolute; left:0; color:var(--ouro-claro); }

/* ============================ FORMULÁRIOS ================================= */
.formulario{ display:grid; gap:1.15rem; }
.formulario--cartao{
  background:var(--creme); border:1px solid rgba(99,19,23,.28);
  border-radius:4px; padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:0 16px 40px rgba(74,14,17,.12);
}
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.dupla--cep{ grid-template-columns:1fr auto; align-items:end; }
.campo{ display:grid; gap:.4rem; }
.campo--curto{ max-width:140px; }
.campo label{ font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ouro); }
.campo input,.campo select,.campo textarea{
  font-family:var(--corpo); font-size:1rem; color:var(--vinho);
  background:#fff; border:1px solid rgba(106,61,18,.32);
  border-radius:3px; padding:.85rem .95rem; width:100%;
  transition:border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--vinho); box-shadow:0 0 0 3px rgba(99,19,23,.12); outline:none;
}
.campo .invalido{ border-color:#A32A21; background:#FDF0EC; }
.erro-campo{ margin:.2rem 0 0; font-size:.82rem; color:#A32A21; }

.checagem{ display:flex; gap:.75rem; align-items:flex-start; font-size:.95rem; cursor:pointer; }
.checagem input{ margin-top:.28rem; width:18px; height:18px; flex:none; accent-color:var(--vinho); }
.formulario__aviso{ margin:.5rem 0 0; font-size:.92rem; }
.formulario__aviso.ok{ color:#1F6B3B; font-weight:500; }

/* ============================== LOJA ====================================== */
.filtros{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,4vw,3rem); }
.filtro{
  background:transparent; cursor:pointer;
  border:1px solid rgba(106,61,18,.32); border-radius:2px;
  padding:.65rem 1.25rem; font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra);
  transition:background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.filtro:hover{ border-color:var(--vinho); }
.filtro.ativo{ background:var(--vinho); color:var(--sol); border-color:var(--vinho); }

.catalogo{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem); }
.produto{
  position:relative; display:flex; flex-direction:column;
  background:var(--creme); border:1px solid rgba(106,61,18,.2);
  border-radius:4px; padding:clamp(1.1rem,2vw,1.5rem);
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s var(--curva);
  animation:surgir .5s var(--curva) backwards;
}
.produto:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(74,14,17,.16); border-color:rgba(99,19,23,.4); }
.produto__etiqueta{
  position:absolute; top:-.8rem; left:clamp(1.1rem,2vw,1.5rem); margin:0; z-index:4;
  background:var(--vinho); color:var(--sol);
  font-size:.6rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; padding:.38rem .85rem;
}
.produto__imagem{
  position:relative; overflow:hidden; margin-bottom:1.15rem;
  border-radius:3px; background:linear-gradient(170deg,#fff 0%,#FAF3E4 100%);
  display:flex; align-items:flex-end; justify-content:center; min-height:280px;
}
.produto__rotulo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:112%; width:auto; max-width:none; opacity:.13; z-index:1;
}
.produto__foto{
  position:relative; z-index:2;
  height:268px; width:auto; object-fit:contain;
  border-radius:3px;
  border:1px solid rgba(106,61,18,.2);
  box-shadow:0 8px 22px rgba(74,14,17,.16);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
}
.produto:hover .produto__foto{
  transform:scale(1.05) translateY(-5px);
  box-shadow:0 16px 34px rgba(74,14,17,.24);
}
.produto h3{
  font-family:var(--display); font-weight:400; font-size:1.45rem;
  line-height:1.18; text-transform:uppercase; color:var(--vinho); margin:0 0 .3rem;
}
.produto__cor{ margin:0 0 .75rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); }
.produto__resumo{ margin:0 0 1.15rem; font-size:.93rem; flex:1; }
.produto__preco{ margin:0 0 1.05rem; font-family:var(--display); font-size:1.85rem; color:var(--vinho); line-height:1; }

/* ============================== CHECKOUT ================================== */
.passos{ list-style:none; margin:0 0 clamp(2rem,4vw,3rem); padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.85rem; }
.passo{
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra); opacity:.45; transition:opacity .3s var(--curva);
}
.passo span{
  width:27px; height:27px; border-radius:50%; border:1px solid currentColor;
  display:grid; place-items:center; font-size:.75rem; letter-spacing:0;
  transition:background-color .3s var(--curva), color .3s var(--curva);
}
.passo.ativo{ opacity:1; color:var(--vinho); }
.passo.ativo span{ background:var(--vinho); color:var(--sol); border-color:var(--vinho); }
.passo.feito{ opacity:1; color:var(--ouro); }
.passo.feito span{ background:var(--ouro); color:var(--creme); border-color:var(--ouro); }

.checkout{ display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(1.75rem,4vw,3rem); align-items:start; }
.etapa[hidden]{ display:none; }
.etapa{ animation:surgir .45s var(--curva); }
.etapa__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
  line-height:1.14; text-transform:uppercase; color:var(--vinho); margin:0 0 1.6rem;
}
.etapa__sub{ font-family:var(--display); font-weight:400; font-size:1.35rem; text-transform:uppercase; color:var(--vinho); margin:2.1rem 0 1rem;  line-height:1.16;}
.etapa__acoes{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.1rem; }

.item{
  display:grid; grid-template-columns:74px 1fr auto; gap:1rem; align-items:center;
  padding:1.05rem 0; border-bottom:1px solid rgba(106,61,18,.2);
}
.item img{ width:74px; height:92px; object-fit:cover; border-radius:3px; background:#fff; }
.item__foto-vazia{ width:74px; height:92px; border-radius:3px; background:rgba(106,61,18,.08); flex:none; }
.item__nome{ margin:0 0 .2rem; font-weight:500; color:var(--vinho); }
.item__preco{ margin:0 0 .5rem; font-size:.85rem; opacity:.75; }
.item__quantidade{ display:flex; align-items:center; gap:.5rem; }
.item__quantidade button:not(.item__tirar){
  width:29px; height:29px; border-radius:2px; cursor:pointer;
  border:1px solid rgba(106,61,18,.32); background:transparent; color:var(--vinho);
  transition:background-color .25s var(--curva), color .25s var(--curva);
}
.item__quantidade button:not(.item__tirar):hover{ background:var(--vinho); color:var(--sol); }
.item__quantidade span{ min-width:24px; text-align:center; font-weight:500; }
.item__quantidade{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.item__tirar{
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-size:.74rem; letter-spacing:.06em; color:var(--ouro);
  text-decoration:underline; text-underline-offset:3px;
  padding:.5rem 0; min-height:36px;
  display:inline-flex; align-items:center;
  transition:color .25s var(--curva);
}
.item__tirar:hover{ color:var(--vinho); }
.item__soma{ margin:0; font-weight:600; color:var(--vinho); white-space:nowrap; }
.sacola__vazia{ padding:2rem 0; }

.opcoes{ display:grid; gap:.75rem; }
.opcao{
  display:flex; align-items:center; gap:.95rem; cursor:pointer;
  border:1px solid rgba(106,61,18,.28); border-radius:3px;
  padding:1.05rem 1.2rem; background:var(--creme);
  transition:border-color .25s var(--curva), background-color .25s var(--curva);
}
.opcao:hover{ border-color:var(--vinho); background:#fff; }
.opcao:has(input:checked){ border-color:var(--vinho); border-width:2px; padding:1rem 1.15rem; }
.opcao input{ width:18px; height:18px; flex:none; accent-color:var(--vinho); }
.opcao__corpo{ display:flex; flex-direction:column; flex:1; }
.opcao__corpo strong{ color:var(--vinho); font-weight:600; }
.opcao__corpo small{ font-size:.85rem; opacity:.75; }
.opcao__valor{ font-weight:600; color:var(--vinho); white-space:nowrap; }

/* aviso de frete grátis por causa de kit na sacola: substitui as opções
   de transportadora, já que o valor não muda qualquer que seja a escolha */
.opcao--gratis{
  cursor:default; background:rgba(31,107,59,.10); border-color:rgba(31,107,59,.32);
}
.opcao--gratis .opcao__corpo strong{ color:#1F6B3B; }
.opcao--gratis .opcao__valor{ color:#1F6B3B; }

/* aviso "informe o CEP": ainda não é uma opção de verdade, então não
   parece clicável nem tem preço — só um texto neutro no lugar.        */
.opcao--aguardando{
  cursor:default; justify-content:center; text-align:center;
  color:var(--terra); opacity:.75; font-size:.95rem;
  background:transparent; border-style:dashed;
}

/* aviso de entrega "a combinar", nos pedidos de atacado: nem grátis
   nem cobrado — só ainda não decidido pelo site, combinado depois.    */
.opcao--combinar{
  cursor:default; background:rgba(173,114,48,.10); border-color:rgba(173,114,48,.32);
}
.opcao--combinar .opcao__corpo strong{ color:var(--ouro); }
.opcao--combinar .opcao__valor{ color:var(--ouro); }

.cupom{ margin:2.1rem 0; }
.cupom > label{ display:block; margin-bottom:.45rem; font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ouro); }
.cupom__linha{ display:flex; gap:.6rem; }
.cupom__linha input{
  flex:1; font-family:var(--corpo); font-size:1rem; color:var(--vinho);
  background:#fff; border:1px solid rgba(106,61,18,.32); border-radius:3px; padding:.85rem .95rem;
}
.cupom__aviso{ margin:.5rem 0 0; font-size:.88rem; }
.cupom__aviso.ok{ color:#1F6B3B; font-weight:500; }
.cupom__aviso.erro{ color:#A32A21; }

.resumo{
  background:var(--creme); border:2px solid var(--vinho); border-radius:4px;
  padding:clamp(1.35rem,2.5vw,1.85rem);
  position:sticky; top:calc(var(--topo-altura) + 1.5rem);
  box-shadow:0 16px 40px rgba(74,14,17,.12);
}
.resumo__titulo{ font-family:var(--display); font-weight:400; font-size:1.4rem; text-transform:uppercase; color:var(--vinho); margin:0 0 1.15rem;  line-height:1.16;}
.resumo__itens{ margin-bottom:1rem; }
.resumo__item{ display:flex; justify-content:space-between; gap:1rem; margin:0 0 .5rem; font-size:.9rem; }
.resumo__contas{ margin:0; padding-top:1rem; border-top:1px solid rgba(106,61,18,.25); }
.resumo__contas > div{ display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; }
.resumo__contas dt{ font-size:.9rem; }
.resumo__contas dd{ margin:0; font-size:.9rem; font-weight:500; color:var(--vinho); }
.resumo__total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:1rem 0 0; padding-top:1rem; border-top:2px solid var(--vinho); }
.resumo__total span{ font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); }
.resumo__total strong{ font-family:var(--display); font-size:1.95rem; color:var(--vinho); line-height:1; }
.resumo__nota{ margin:1.3rem 0 0; font-size:.78rem; opacity:.7; }

.etapa--fim{ text-align:center; padding-block:2rem; }
.fim__selo{ width:140px; margin:0 auto 1.6rem; animation:surgir .7s var(--curva); }
.etapa--fim .titulo{ margin-bottom:1rem; }
.fim__numero{ font-size:1.05rem; }
.etapa--fim .etapa__acoes{ justify-content:center; }
.fim__troca{
  margin:1.6rem auto 0; max-width:420px; font-size:.85rem; opacity:.8; line-height:1.5;
}
.fim__troca a{ display:block; margin-top:.4rem; color:var(--vinho); font-weight:600; }

/* ============================== GAVETA ==================================== */
.gaveta{ position:fixed; inset:0; z-index:200; }
.gaveta[hidden]{ display:none; }
.gaveta__fundo{ position:absolute; inset:0; background:rgba(42,15,16,.55); animation:entrar .3s var(--curva); }
.gaveta__painel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(430px,100%); background:var(--areia);
  display:flex; flex-direction:column;
  box-shadow:-10px 0 44px rgba(42,15,16,.32);
  animation:deslizar .34s var(--curva);
}
@keyframes deslizar{ from{transform:translateX(100%)} to{transform:none} }
.gaveta__topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 1.5rem;
  background:linear-gradient(160deg,var(--vinho) 0%, var(--vinho-esc) 100%);
}
.gaveta__topo h2{ margin:0; font-family:var(--display); font-weight:400; font-size:1.35rem; text-transform:uppercase; color:var(--sol);  line-height:1.16;}
.gaveta__fechar{ background:none; border:none; cursor:pointer; font-size:2rem; line-height:1; color:var(--sol); padding:0 .25rem; }
.gaveta__corpo{ flex:1; overflow-y:auto; padding:0 1.5rem; }
.gaveta__vazia{ padding:2.5rem 0; text-align:center; opacity:.75; }
.gaveta__rodape{ padding:1.3rem 1.5rem; border-top:1px solid rgba(106,61,18,.25); }
.gaveta__total{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 1rem; }
.gaveta__total span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); }
.gaveta__total strong{ font-family:var(--display); font-size:1.55rem; color:var(--vinho); }

/* aviso de item adicionado */
.aviso-sacola{
  position:fixed; z-index:250; left:50%; bottom:1.5rem;
  transform:translate(-50%,140%);
  display:flex; align-items:center; gap:1rem;
  background:linear-gradient(160deg,var(--vinho) 0%, var(--vinho-esc) 100%);
  color:var(--sol); border:1px solid rgba(251,172,82,.4); border-radius:3px;
  padding:.9rem 1.15rem; box-shadow:0 12px 36px rgba(42,15,16,.34);
  opacity:0; pointer-events:none;
  transition:transform .35s var(--curva), opacity .35s var(--curva);
  max-width:calc(100% - 2rem);
}
.aviso-sacola.visivel{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.aviso-sacola span{ font-size:.92rem; }
.aviso-sacola button{
  background:none; border:none; cursor:pointer; padding:0; color:var(--sol);
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1px solid currentColor; white-space:nowrap;
}

/* ============================== RODAPÉ ==================================== */
.rodape{
  background:linear-gradient(170deg,var(--vinho-esc) 0%, var(--vinho-noite) 100%);
  color:var(--sol-claro); padding-block:clamp(3rem,6vw,4.5rem);
  position:relative; overflow:hidden;
}
.rodape .limite{ position:relative; z-index:2; }
.rodape__marca{
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
  padding-bottom:clamp(1.75rem,3.5vw,2.5rem);
  border-bottom:1px solid rgba(251,172,82,.2);
}
.rodape__selo{ width:64px; flex:none; opacity:.9; }
.rodape__logo{
  margin:0 0 .45rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
  line-height:1.06; letter-spacing:.02em; text-transform:uppercase;
  color:var(--sol);
}
.rodape__lema{ margin:0; font-family:var(--display); font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ouro); line-height:1.2;}
.rodape__grade{
  display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr;
  gap:clamp(1.5rem,3.5vw,3rem);
  padding-bottom:2.25rem; border-bottom:1px solid rgba(251,172,82,.2);
}
.rodape__grade h3{ font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-claro); margin:0 0 .95rem; }
.rodape__grade p{ margin:0; font-size:.9rem; line-height:1.85; opacity:.9; }
.rodape__grade nav{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.rodape__grade nav button{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--sol-claro); font-size:.9rem; text-align:left;
  transition:color .25s var(--curva), transform .25s var(--curva);
}
.rodape__grade nav button:hover{ color:var(--sol); transform:translateX(4px); }
.rodape__grade a{ text-decoration:none; border-bottom:1px solid rgba(251,172,82,.3); }
.rodape__grade a:hover{ color:var(--sol); }
.rodape__aviso{ margin:1.85rem 0 0; font-size:.78rem; color:var(--ouro-claro); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1120px){
  .nav{ gap:1.05rem; }
  .nav a{ font-size:.71rem; letter-spacing:.11em; }
}

@media (max-width: 960px){
  .menu-botao{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:linear-gradient(180deg,var(--vinho) 0%, var(--vinho-esc) 100%);
    padding:0 var(--gutter); max-height:0; overflow:hidden;
    transition:max-height .34s var(--curva), padding .34s var(--curva);
  }
  .nav.aberto{ max-height:520px; padding-block:.5rem 1.4rem; }
  .nav a{ padding-block:.85rem; border-bottom:1px solid rgba(251,172,82,.15); font-size:.78rem; letter-spacing:.16em; }
  .nav a span::after{ display:none; }

  .capa__interno{ grid-template-columns:1fr; }
  .vitrine{ max-width:360px; margin-inline:auto; }
  .numeros{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .pilares,.portas{ grid-template-columns:1fr; }
  .convite{ grid-template-columns:1fr; }
  .convite__selo{ max-width:230px; }
  .abertura,.onde,.destaque,.pura,.terroir,.ritual{ grid-template-columns:1fr; }
  .abertura__rotulo,.onde__selo{ max-width:230px; }
  .terroir > img{ max-width:140px; }
  .processo,.razoes,.formatos,.canais,.catalogo{ grid-template-columns:repeat(2,1fr); }
  .maneiras,.ocasioes,.experiencias__grade{ grid-template-columns:repeat(2,1fr); }
  .argumentos{ grid-template-columns:1fr; }
  .checkout{ grid-template-columns:1fr; }
  .resumo{ position:static; }
  .rodape__grade{ grid-template-columns:repeat(2,1fr); }
  .tempo__marco{ grid-template-columns:1fr; gap:.5rem; }
  .tempo__titulo,.tempo__corpo{ grid-column:1; }
  .pdv ul{ columns:1; }
  .cinema__rotulo{ display:none; }
  .cinema__pattern-esq,.cinema__pattern-dir{ width:30%; opacity:.08; }
  .topo-pagina__selo{ right:-110px; width:min(340px,60vw); opacity:.1; }
}

@media (max-width: 640px){
  .marca__nome{ font-size:.98rem; }
  .marca__selo{ width:38px; height:38px; }
  .processo,.razoes,.formatos,.canais,.catalogo,
  .maneiras,.ocasioes,.experiencias__grade{ grid-template-columns:1fr; }
  .dupla,.dupla--cep{ grid-template-columns:1fr; }
  .rodape__grade{ grid-template-columns:1fr; }
  .acoes .botao,.etapa__acoes .botao{ flex:1 1 100%; text-align:center; }
  .item{ grid-template-columns:58px 1fr; }
  .item img{ width:58px; height:72px; }
  .item__foto-vazia{ width:58px; height:72px; }
  .item__soma{ grid-column:2; }
  .passos{ gap:.5rem 1rem; }
  .passo{ font-size:.64rem; letter-spacing:.1em; }
  .cinema__canto{ width:26px; }
  .fio-ornamento{ max-width:240px; }
}

/* linha do produto no card da loja */
.produto__linha{
  margin:0 0 .25rem; font-size:.62rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ouro);
}

/* intro dos drinques */
.experiencias__intro{ max-width:60ch; margin:0 0 1.85rem; }

/* chamada de UGC */
.ugc{
  margin-top:clamp(3rem,6vw,4.5rem);
  text-align:center;
  background:var(--creme);
  border:2px solid var(--vinho); border-radius:4px;
  padding:clamp(2rem,4.5vw,3.25rem);
  box-shadow:0 20px 50px rgba(74,14,17,.12);
}
.ugc__sol{ width:52px; margin:0 auto 1.2rem; }
.ugc p{ margin:1.2rem auto 1.9rem; max-width:46ch; }
.ugc strong{ color:var(--vinho); font-weight:600; }

/* fotos que trazem o próprio fundo: recebem moldura para casar com os recortes */

/* ==========================================================================
   LUPA: foto ampliada
   ========================================================================== */
.produto__foto{ cursor:zoom-in; }

/* dica visual de que dá para ampliar */
.produto__imagem::after{
  content:"";
  position:absolute; right:.65rem; bottom:.65rem; z-index:4;
  width:30px; height:30px; border-radius:50%;
  background:rgba(99,19,23,.82);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBAC52' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/></svg>");
  background-size:18px 18px; background-repeat:no-repeat; background-position:center;
  opacity:0; transform:scale(.85);
  transition:opacity .3s var(--curva), transform .3s var(--curva);
  pointer-events:none;
}
.produto:hover .produto__imagem::after{ opacity:1; transform:scale(1); }

.lupa{ position:fixed; inset:0; z-index:400; }
.lupa[hidden]{ display:none; }
.lupa__fundo{
  position:absolute; inset:0;
  background:rgba(42,15,16,.88);
  backdrop-filter:blur(3px);
  animation:entrar .28s var(--curva);
}
.lupa__caixa{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2.5rem,6vw,4rem) clamp(3.5rem,8vw,6rem);
}
.lupa__figura{
  position:relative; margin:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  max-height:100%;
  animation:lupaEntra .32s var(--curva);
}
@keyframes lupaEntra{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none} }
.lupa__figura img{
  max-height:min(78vh,900px); max-width:100%; width:auto;
  border-radius:4px;
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.5));
}
.lupa__figura figcaption{
  font-size:.74rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sol); text-align:center;
}
.lupa__fechar{
  position:absolute; top:clamp(1rem,2.5vw,1.75rem); right:clamp(1rem,2.5vw,1.75rem);
  z-index:3; width:46px; height:46px; border-radius:50%;
  background:rgba(251,172,82,.12); border:1px solid rgba(251,172,82,.45);
  color:var(--sol); font-size:1.9rem; line-height:1; cursor:pointer;
  transition:background-color .25s var(--curva);
}
.lupa__fechar:hover{ background:rgba(251,172,82,.28); }
.lupa__seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:50%;
  background:rgba(251,172,82,.10); border:1px solid rgba(251,172,82,.4);
  color:var(--sol); font-size:2rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background-color .25s var(--curva), transform .25s var(--curva);
}
.lupa__seta:hover{ background:rgba(251,172,82,.26); }
.lupa__seta--esq{ left:clamp(.6rem,2vw,1.75rem); }
.lupa__seta--dir{ right:clamp(.6rem,2vw,1.75rem); }
.lupa__seta--esq:hover{ transform:translateY(-50%) translateX(-3px); }
.lupa__seta--dir:hover{ transform:translateY(-50%) translateX(3px); }

@media (max-width: 640px){
  .lupa__caixa{ padding:4rem 1rem 5.5rem; }
  .lupa__seta{ top:auto; bottom:1.1rem; transform:none; width:46px; height:46px; }
  .lupa__seta--esq{ left:25%; }
  .lupa__seta--dir{ right:25%; }
  .lupa__seta--esq:hover,.lupa__seta--dir:hover{ transform:none; }
  .lupa__figura img{ max-height:64vh; }
}

/* ==========================================================================
   VERIFICAÇÃO DE IDADE
   ========================================================================== */
.porta-idade{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  background:linear-gradient(160deg,var(--vinho) 0%, var(--vinho-noite) 100%);
  padding:1.5rem; overflow-y:auto;
}
.porta-idade[hidden]{ display:none; }
.porta-idade__pattern{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("../images/marca/pattern-laranja.png");
  background-size:560px auto; opacity:.07;
}
.porta-idade__caixa{
  position:relative; z-index:2; text-align:center;
  max-width:520px; width:100%;
  animation:surgir .5s var(--curva);
}
.porta-idade__selo{ width:96px; margin:0 auto 1.5rem; }
.porta-idade__marca{
  margin:0 0 1.75rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  letter-spacing:.02em; text-transform:uppercase; color:var(--sol);
}
.porta-idade__titulo{
  margin:0 0 1rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,1.3rem + 1.6vw,2.3rem);
  line-height:1.14; text-transform:uppercase; color:var(--creme);
}
.porta-idade__texto{ margin:0 0 2rem; color:var(--sol-claro); max-width:40ch; margin-inline:auto; }
.porta-idade__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.porta-idade .botao--cheio{ background:var(--sol); color:var(--vinho); border-color:var(--sol); box-shadow:0 4px 0 rgba(173,114,48,.5); }
.porta-idade .botao--cheio:hover{ background:var(--sol-claro); border-color:var(--sol-claro); box-shadow:0 7px 0 rgba(173,114,48,.45); }
.porta-idade .botao--claro{ background:transparent; color:var(--sol-claro); border-color:rgba(251,172,82,.5); }
.porta-idade .botao--claro:hover{ background:rgba(251,172,82,.14); border-color:var(--sol); color:var(--sol); }
.porta-idade__acoes .botao{ flex:1 1 auto; min-width:180px; }
.porta-idade__aviso{
  margin:2rem 0 0; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ouro-claro);
}
.porta-idade__negado{
  margin-top:1.75rem; padding-top:1.5rem;
  border-top:1px solid rgba(251,172,82,.28);
}
.porta-idade__negado p{ margin:0; color:var(--sol-claro); }
.porta-idade__negado[hidden]{ display:none; }

/* ==========================================================================
   DOCUMENTOS (termos e privacidade)
   ========================================================================== */
.documento__data{
  margin:0 0 2.25rem; font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ouro);
}
.documento h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  line-height:1.16; text-transform:uppercase; color:var(--vinho);
  margin:2.5rem 0 .85rem;
}
.documento h2:first-of-type{ margin-top:0; }
.documento p{ margin:0 0 1rem; max-width:66ch; }
.documento a{ color:var(--vinho); font-weight:500; }
.documento__nota{
  margin-top:3rem; padding:1.5rem;
  background:var(--creme); border-left:3px solid var(--ouro); border-radius:3px;
}
.documento__nota p{ margin:0; font-size:.92rem; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.assinar{
  margin:2.25rem 0 0; padding:clamp(1.5rem,3vw,2rem);
  border:1px solid rgba(251,172,82,.28); border-radius:4px;
  background:rgba(251,172,82,.05);
  display:grid; gap:1.1rem;
}
.assinar__texto h3{
  margin:0 0 .35rem; font-family:var(--display); font-weight:400;
  font-size:1.5rem; line-height:1.12; text-transform:uppercase; color:var(--sol);
}
.assinar__texto p{ margin:0; font-size:.92rem; opacity:.88; max-width:52ch; }
.assinar__campo{ display:flex; gap:.6rem; flex-wrap:wrap; }
.assinar__campo input{
  flex:1 1 240px; font-family:var(--corpo); font-size:1rem; color:var(--vinho);
  background:var(--creme); border:1px solid rgba(251,172,82,.4);
  border-radius:3px; padding:.9rem 1rem;
}
.assinar__campo input:focus{ outline:none; border-color:var(--sol); box-shadow:0 0 0 3px rgba(251,172,82,.2); }
.assinar__campo input.invalido{ border-color:#E08070; }
.assinar__aviso{ margin:0; font-size:.9rem; }
.assinar__aviso.ok{ color:#7BD49A; font-weight:500; }
.assinar__aviso.erro{ color:#F0A090; }
.assinar__legal{ margin:0; font-size:.78rem; opacity:.7; }
.assinar__legal .link{ color:inherit; }

@media (max-width: 640px){
  .porta-idade__acoes .botao{ flex:1 1 100%; }
}

/* ========================================================= PRODUTO ÚNICO */
.voltar{
  background:none; border:none; padding:0; cursor:pointer;
  margin-bottom:1.25rem; color:var(--sol);
  font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:transform .25s var(--curva);
}
.voltar:hover{ transform:translateX(-4px); }
.prod__preco{
  margin:1.5rem 0 1.25rem; font-family:var(--display);
  font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem); line-height:1; color:var(--vinho);
}
.prod__nota{ margin:1rem 0 0; font-size:.8rem; opacity:.7; }
#pg-produto .destaque__garrafa{ cursor:zoom-in; }
#prodRelacionados{ grid-template-columns:repeat(3,1fr); }
@media (max-width: 960px){ #prodRelacionados{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ #prodRelacionados{ grid-template-columns:1fr; } }

/* nome do produto clicável no catálogo */
.produto__nome{
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--curva), color .25s var(--curva);
}
.produto__nome:hover{ border-bottom-color:currentColor; }

/* botões sobre fundo vinho precisam ser claros para contrastar */
.assinar .botao--cheio,
.rodape .botao--cheio{
  background:var(--sol); color:var(--vinho); border-color:var(--sol);
  box-shadow:0 4px 0 rgba(173,114,48,.5);
}
.assinar .botao--cheio:hover,
.rodape .botao--cheio:hover{
  background:var(--sol-claro); border-color:var(--sol-claro);
  box-shadow:0 7px 0 rgba(173,114,48,.45);
}

/* na página do produto a foto é a peça principal: precisa de tamanho */
#pg-produto .destaque__imagem{ min-height:auto; }
#pg-produto .destaque__garrafa{
  height:auto;
  max-height:min(640px, 72vh);
  width:auto; max-width:100%;
  margin-inline:auto;
  border-radius:3px;
  border:1px solid rgba(106,61,18,.2);
  box-shadow:0 18px 40px rgba(74,14,17,.22);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
}
#pg-produto .destaque__imagem:hover .destaque__garrafa{
  transform:translateY(-6px);
  box-shadow:0 26px 52px rgba(74,14,17,.28);
}
#pg-produto .destaque__rotulo{ width:104%; opacity:.15; }
#pg-produto .destaque__halo{ inset:0 2% 2% 2%; }

/* dica de lupa também na página do produto */
#pg-produto .destaque__imagem::after{
  content:"";
  position:absolute; right:.9rem; bottom:.9rem; z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:rgba(99,19,23,.85);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBAC52' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/></svg>");
  background-size:20px 20px; background-repeat:no-repeat; background-position:center;
  opacity:0; transform:scale(.85);
  transition:opacity .3s var(--curva), transform .3s var(--curva);
  pointer-events:none;
}
#pg-produto .destaque__imagem:hover::after{ opacity:1; transform:scale(1); }

@media (max-width: 960px){
  #pg-produto .destaque__garrafa{ max-height:min(520px, 60vh); }
}

/* o atributo hidden precisa vencer qualquer display declarado nas classes */
[hidden]{ display:none !important; }

/* ==========================================================================
   ÁREA DE TOQUE: no celular todo alvo precisa de pelo menos 44x44
   ========================================================================== */
.menu-botao{
  display:none; place-items:center;
  min-width:46px; min-height:46px; padding:0;
}
@media (max-width: 960px){ .menu-botao{ display:grid; } }

.marca{ min-height:46px; }

.rodape__grade nav button{
  min-height:44px; display:flex; align-items:center;
  padding-block:.2rem;
}
.rodape__grade a{
  display:inline-block; padding-block:.5rem;
}
.rodape__grade p{ line-height:1.7; }

.item__quantidade button:not(.item__tirar){ min-width:34px; min-height:34px; }

@media (max-width: 640px){
  .item__quantidade button:not(.item__tirar){ min-width:40px; min-height:40px; }
  .filtro{ min-height:44px; }
  .ritual__aba{ width:56px; height:56px; }
  .faq summary{ min-height:44px; }
  .lupa__seta{ width:52px; height:52px; }
}

/* últimos alvos: links de contato e link dentro de texto corrido */
.rodape__grade a{ padding-block:.65rem; }
.assinar__legal{ line-height:2; }
.assinar__legal .link{ display:inline-block; padding-block:.6rem; }

/* nome do produto e links de texto também precisam de área de toque */
@media (max-width: 960px){
  .produto__nome{ display:inline-block; padding-block:.55rem; }
  .link{ display:inline-block; padding-block:.55rem; }
}

/* links dentro dos documentos e botão de voltar */
.documento a{ display:inline-block; padding-block:.5rem; }
.voltar{ min-height:44px; display:inline-flex; align-items:center; }

/* ==========================================================================
   FALE COM A GENTE: atalho flutuante de WhatsApp
   ========================================================================== */
.zap{
  position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:180; display:flex; align-items:flex-start; gap:.4rem;
}
.zap[hidden]{ display:none; }
.zap__botao{
  display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(160deg,var(--vinho) 0%, var(--vinho-esc) 100%);
  color:var(--sol); text-decoration:none;
  border:1.5px solid rgba(251,172,82,.45); border-radius:999px;
  padding:.8rem 1.15rem .8rem .95rem;
  box-shadow:0 8px 26px rgba(42,15,16,.34);
  transition:transform .3s var(--curva), box-shadow .3s var(--curva), background-color .3s var(--curva);
}
.zap__botao svg{ width:26px; height:26px; fill:var(--sol); flex:none; }
.zap__texto{
  font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
.zap__botao:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(42,15,16,.42);
  border-color:var(--sol);
}
.zap__balao{
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  background:var(--vinho); color:var(--sol);
  border:1px solid rgba(251,172,82,.4);
  font-size:1.05rem; line-height:1; padding:0;
  opacity:0; transition:opacity .25s var(--curva);
}
.zap:hover .zap__balao, .zap__balao:focus{ opacity:1; }

/* o aviso da sacola sobe para não bater no botão */
.aviso-sacola{ bottom:5.5rem; }

@media (max-width: 640px){
  .zap__texto{ display:none; }
  .zap__botao{ padding:.85rem; }
  .zap__botao svg{ width:28px; height:28px; }
  .zap__balao{ opacity:1; }
  .aviso-sacola{ bottom:1.35rem; right:auto; left:1rem; max-width:calc(100% - 6.5rem);
                 transform:translate(0,160%); padding:.8rem 1rem; }
  .aviso-sacola.visivel{ transform:translate(0,0); }
  .aviso-sacola span{ font-size:.86rem; }
  .zap{ bottom:1.1rem; right:1.1rem; }
}

/* links de ajuda */
.prod__ajuda, .resumo__ajuda{
  margin:1.1rem 0 0; font-size:.92rem;
}
.resumo__ajuda{ padding-top:1rem; border-top:1px solid rgba(106,61,18,.22); }
.prod__ajuda a, .resumo__ajuda a{
  color:var(--vinho); font-weight:500;
  border-bottom:1px solid currentColor;
  display:inline-block; padding-block:.45rem;
}

/* deixa respiro no fim da página para o botão flutuante não cobrir conteúdo */
.rodape{ padding-bottom:clamp(5rem,8vw,6rem); }

/* o X que esconde o atalho também precisa de área de toque no celular */
@media (max-width: 640px){
  .zap__balao{ width:40px; height:40px; font-size:1.35rem; }
}

/* aviso do pagamento no checkout */
.pagamento__aviso{ margin:1rem 0 0; font-size:.94rem; }
.pagamento__aviso.erro{ color:#A32A21; }
.pagamento__aviso a{ color:var(--vinho); font-weight:500; border-bottom:1px solid currentColor; }
#pg-retorno .faixa{ min-height:72vh; display:grid; align-items:center; }

/* ==========================================================================
   ATACADO: portao de CNPJ e tabela de precos
   ========================================================================== */
.portao{
  max-width:600px; margin-inline:auto; text-align:center;
  background:var(--creme); border:2px solid var(--vinho); border-radius:4px;
  padding:clamp(1.75rem,4vw,2.75rem);
  box-shadow:0 18px 44px rgba(74,14,17,.14);
}
.portao[hidden]{ display:none; }
.portao__selo{ width:74px; margin:0 auto 1.35rem; opacity:.9; }
.portao__rotulo{
  display:block; margin-bottom:.7rem;
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
}
.portao__linha{ display:flex; gap:.65rem; flex-wrap:wrap; justify-content:center; }
.portao__linha input{
  flex:1 1 240px; min-width:0;
  font-family:var(--corpo); font-size:1.15rem; letter-spacing:.04em;
  text-align:center; color:var(--vinho);
  background:#fff; border:1px solid rgba(106,61,18,.35); border-radius:3px;
  padding:.9rem 1rem;
}
.portao__linha input:focus{ outline:none; border-color:var(--vinho); box-shadow:0 0 0 3px rgba(99,19,23,.12); }
.portao__linha input.invalido{ border-color:#A32A21; background:#FDF0EC; }
.portao__aviso{ margin:.9rem 0 0; font-size:.92rem; min-height:1.2em; }
.portao__aviso.erro{ color:#A32A21; }
.portao__nota{ margin:1.35rem 0 0; font-size:.82rem; opacity:.75; max-width:44ch; margin-inline:auto; }

.atacado[hidden]{ display:none; }
.atacado__topo{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; margin-bottom:1.5rem;
}
.atacado__empresa{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,1.15rem + 1vw,2rem);
  line-height:1.14; text-transform:uppercase; color:var(--vinho);
}
.atacado__cnpj{ margin:.25rem 0 0; font-size:.85rem; opacity:.75; }
.atacado__sair{
  background:none; border:1px solid rgba(106,61,18,.35); border-radius:2px;
  cursor:pointer; color:var(--terra); min-height:44px; padding:0 1.1rem;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.atacado__sair:hover{ border-color:var(--vinho); color:var(--vinho); }

.atacado__rolagem{ overflow-x:auto; border-radius:4px; border:1px solid rgba(106,61,18,.22); }
.atacado__tabela{ width:100%; border-collapse:collapse; background:var(--creme); min-width:860px; }
.atacado__tabela th{
  text-align:left; padding:.95rem 1rem;
  background:var(--vinho); color:var(--sol);
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
}
.atacado__tabela td{ padding:.95rem 1rem; border-bottom:1px solid rgba(106,61,18,.16); vertical-align:middle; }
.atacado__tabela tr:last-child td{ border-bottom:none; }
.atacado__tabela tbody tr:hover{ background:rgba(251,172,82,.09); }
.atacado__tabela .num{ text-align:right; white-space:nowrap; }
.atacado__tabela td strong{ display:block; color:var(--vinho); font-weight:600; }
.atacado__tabela td small{
  display:block; margin-top:.15rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ouro);
}
.atacado__tabela .varejo{ opacity:.6; }
.atacado__tabela .varejo span{ text-decoration:line-through; }
.atacado__tabela .preco-atacado{ font-family:var(--display); font-size:1.2rem; color:var(--vinho); }
.atacado__tabela .margem{ color:#1F6B3B; font-weight:600; }

/* foto pequena ao lado do nome do produto, na tabela de atacado */
.atacado__tabela .prod{ display:flex; align-items:center; gap:.75rem; }
.atacado__foto{
  width:40px; height:52px; object-fit:contain; flex:none; border-radius:2px;
  background:#fff; border:1px solid rgba(106,61,18,.16);
}
.atacado__foto--vazia{ background:rgba(106,61,18,.06); }
.atacado__prod-texto{ min-width:0; }

/* estoque e compra, na tabela de atacado */
.atacado__tabela .produto__estoque{ margin:0; white-space:nowrap; }
.atacado__esgotado{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vinho); background:rgba(99,19,23,.1); padding:.3rem .6rem; border-radius:3px;
  white-space:nowrap;
}
.atacado__compra{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.atacado__qtd{
  width:60px; padding:.5rem; text-align:center; font-family:inherit; font-size:.9rem;
  border:1px solid rgba(106,61,18,.3); border-radius:3px; background:#fff;
}
.atacado__compra .botao{ padding:.6rem 1rem; font-size:.72rem; min-height:auto; }

.atacado__condicoes{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.55rem; }
.atacado__condicoes li{ position:relative; padding-left:1.4rem; font-size:.93rem; }
.atacado__condicoes li::before{ content:"+"; position:absolute; left:0; color:var(--ouro); font-weight:600; }
.atacado__acoes{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

/* ---- contato dentro da tabela de atacado ---- */
.atacado__contato{
  margin-top:clamp(2rem,4vw,3rem);
  background:var(--creme); border:2px solid var(--vinho); border-radius:4px;
  padding:clamp(1.75rem,3.5vw,2.5rem);
  box-shadow:0 18px 44px rgba(74,14,17,.12);
}
.atacado__contato-sol{ width:44px; margin-bottom:1rem; }
.atacado__contato-texto h3{
  margin:0 0 .6rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);
  line-height:1.14; text-transform:uppercase; color:var(--vinho);
}
.atacado__contato-texto p{ margin:0 0 1.75rem; max-width:56ch; }

.atacado__canais{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.canal-contato{
  display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.25rem; text-decoration:none;
  border:1px solid rgba(106,61,18,.3); border-radius:3px;
  background:#fff; color:var(--terra);
  transition:border-color .25s var(--curva), transform .25s var(--curva),
             box-shadow .25s var(--curva);
}
.canal-contato:hover{
  border-color:var(--vinho); transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(74,14,17,.14);
}
.canal-contato svg{ width:30px; height:30px; flex:none; fill:var(--vinho); color:var(--vinho); }
.canal-contato--zap svg{ fill:var(--vinho); }
.canal-contato span{ display:flex; flex-direction:column; min-width:0; }
.canal-contato strong{
  font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ouro); margin-bottom:.2rem;
}
.canal-contato small{
  font-size:1rem; color:var(--vinho); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.atacado__salvar{
  margin-top:1.35rem; background:none; border:none; cursor:pointer; padding:.6rem 0;
  color:var(--ouro); font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid currentColor;
}
.atacado__salvar:hover{ color:var(--vinho); }

@media (max-width: 640px){
  .atacado__canais{ grid-template-columns:1fr; }
  .canal-contato small{ font-size:.94rem; }
}

@media (max-width: 780px){
  .atacado__rolagem{ overflow:visible; border:none; border-radius:0; }
  .atacado__tabela{ min-width:0; background:transparent; }
  .atacado__tabela thead{ display:none; }
  .atacado__tabela tbody, .atacado__tabela tr, .atacado__tabela td{ display:block; width:100%; }
  .atacado__tabela tr{
    background:var(--creme); border:1px solid rgba(106,61,18,.22);
    border-radius:4px; padding:1.1rem 1.2rem; margin-bottom:.85rem;
  }
  .atacado__tabela tbody tr:hover{ background:var(--creme); }
  .atacado__tabela td{
    padding:.5rem 0; border-bottom:1px solid rgba(106,61,18,.12);
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem; text-align:right;
  }
  .atacado__tabela td:last-child{ border-bottom:none; }
  .atacado__tabela td::before{
    content:attr(data-rotulo);
    font-size:.66rem; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ouro); text-align:left;
  }
  .atacado__tabela td.prod{
    display:block; text-align:left; padding-top:0;
    border-bottom:2px solid rgba(106,61,18,.2); margin-bottom:.3rem; padding-bottom:.7rem;
  }
  .atacado__tabela td.prod::before{ content:none; }
  .atacado__tabela td.prod strong{ font-size:1.15rem; }
  .atacado__tabela .preco-atacado{ font-size:1.45rem; }
}
@media (max-width: 640px){
  .portao__linha .botao{ flex:1 1 100%; }
  .atacado__acoes .botao{ flex:1 1 100%; text-align:center; }
}
@media print{
  body{ background:#fff; }
  .topo,.rodape,.zap,.gaveta,.aviso-sacola,.portao,.atacado__sair,
  .atacado__acoes,.topo-pagina,.faixa__pattern,.cabeca__sol,.porta-idade{ display:none !important; }
  .faixa{ padding:0 !important; background:#fff !important; }
  .atacado__tabela th{ background:#fff !important; color:#631317 !important; border-bottom:2px solid #631317; }
  .atacado__rolagem{ overflow:visible; }
  .atacado__tabela{ min-width:0; }
}

/* ==========================================================================
   ICONES: desenhados em linha, herdam a cor do titulo
   ========================================================================== */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{
  width:1.55em; height:1.55em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}
/* titulos que recebem icone viram linha com o texto ao lado */
.ocasioes h3, .maneiras h3, .experiencias__grade h3, .canal h3{
  display:flex; align-items:center; gap:.6rem;
}
.ocasioes h3 .ic, .canal h3 .ic{ width:1.3em; height:1.3em; color:var(--ouro); }
.maneiras h3 .ic, .experiencias__grade h3 .ic{ width:1.5em; height:1.5em; color:var(--ouro); }
.ocasioes h3 span, .maneiras h3 span, .experiencias__grade h3 span, .canal h3 span{ display:block; }
/* o icone cresce um pouco quando o cartao recebe o mouse */
.maneiras li:hover .ic, .canal:hover .ic,
.experiencias__grade article:hover .ic{ opacity:1; transform:scale(1.06); }
.ic{ transition:opacity .3s var(--curva), transform .3s var(--curva); }

/* ==========================================================================
   TRAMAS DE FUNDO: cada bloco ganha um desenho tematico em marca d'agua
   ========================================================================== */
.maneiras li, .experiencias__grade article, .canal{ position:relative; overflow:hidden; }
.maneiras li > *, .experiencias__grade article > *, .canal > *{ position:relative; z-index:2; }

.maneiras li::after, .experiencias__grade article::after, .canal::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  right:-14%; bottom:-22%;
  width:min(190px,62%); aspect-ratio:1;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.09;
  transition:opacity .4s var(--curva), transform .5s var(--curva);
}
.maneiras li:hover::after, .experiencias__grade article:hover::after,
.canal:hover::after{ opacity:.16; transform:scale(1.06) rotate(-3deg); }

/* a trama usa o mesmo desenho do icone, ampliado */
.maneiras li:nth-child(1)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M15 8h18l-2.5 30a3 3 0 0 1-3 2.7h-7a3 3 0 0 1-3-2.7z'/><path d='M16.2 22h15.6'/></svg>"); }
.maneiras li:nth-child(2)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round'><path d='M24 5v38M8.5 14l31 20M39.5 14l-31 20'/><path d='M24 12l-4-4M24 12l4-4M24 36l-4 4M24 36l4 4'/><path d='M13.5 18.5l-5.4-1.5M13.5 18.5l1.4-5.5M34.5 29.5l5.4 1.5M34.5 29.5l-1.4 5.5'/><path d='M34.5 18.5l5.4-1.5M34.5 18.5l-1.4-5.5M13.5 29.5l-5.4 1.5M13.5 29.5l1.4 5.5'/></svg>"); }
.maneiras li:nth-child(3)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round'><circle cx='18' cy='27' r='13'/><path d='M18 14v26M5 27h26M9 18l18 18M27 18L9 36'/><path d='M34 10h10M36 6h2M41 6h2M35 14h2M40 14h3'/></svg>"); }
.maneiras li:nth-child(4)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M10 16h20v24a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2z'/><path d='M30 21h5a4 4 0 0 1 0 8h-5'/><path d='M10 16a4 4 0 0 1 4-4 4 4 0 0 1 6-2 4 4 0 0 1 6 2 4 4 0 0 1 4 4'/><path d='M16 24v11M24 24v11'/></svg>"); }
.maneiras li:nth-child(5)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linejoin='round'><path d='M12 12h24l-2 27a4 4 0 0 1-4 3.6H18a4 4 0 0 1-4-3.6z'/><rect x='17' y='19' width='8' height='8' rx='1'/><rect x='26' y='26' width='7' height='7' rx='1'/><rect x='16' y='30' width='7' height='7' rx='1'/></svg>"); }
.maneiras li:nth-child(6)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9h34L24 28z'/><path d='M24 28v13M16 41h16'/><path d='M33 6l4-4'/><circle cx='38' cy='5' r='3'/></svg>"); }

.experiencias__grade article:nth-child(1)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23631317' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M15 7h18v32a4 4 0 0 1-4 4h-10a4 4 0 0 1-4-4z'/><path d='M15 20h18'/><circle cx='21' cy='27' r='1.6'/><circle cx='27' cy='32' r='1.6'/><circle cx='22' cy='36' r='1.4'/><path d='M33 12l6-6'/></svg>"); }
.experiencias__grade article:nth-child(2)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23631317' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M13 14h22l-2 26a3 3 0 0 1-3 2.8H18a3 3 0 0 1-3-2.8z'/><path d='M13 14l-3-6h28l-3 6'/><circle cx='20' cy='24' r='3.4'/><circle cx='28' cy='30' r='3.4'/></svg>"); }
.experiencias__grade article:nth-child(3)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23631317' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 13h30c0 9-6.7 15-15 15S9 22 9 13z'/><path d='M9 13c0-2 6.7-4 15-4s15 2 15 4'/><path d='M24 28v11M16 41h16'/></svg>"); }
.experiencias__grade article:nth-child(4)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23631317' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M17 6h14v6l-4 4v6h-6v-6l-4-4z'/><path d='M15 22h18v18a3 3 0 0 1-3 3H18a3 3 0 0 1-3-3z'/><path d='M15 30h18'/></svg>"); }

.canal:nth-child(1)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 41h38M8 41V25h32v16'/><path d='M8 25l3-6h26l3 6'/><path d='M16 12h5v13h-5zM27 8h5v17h-5z'/></svg>"); }
.canal:nth-child(2)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round'><path d='M14 6v14a4 4 0 0 0 8 0V6M18 20v22'/><path d='M14 6v9M18 6v9M22 6v9'/><path d='M32 6c4 0 6 5 6 11s-2 8-4 8v17'/></svg>"); }
.canal:nth-child(3)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linejoin='round'><path d='M5 41h38'/><path d='M9 41V11l15-6 15 6v30'/><rect x='15' y='18' width='7' height='7'/><rect x='26' y='18' width='7' height='7'/><path d='M20 41V31h8v10'/></svg>"); }
.canal:nth-child(4)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 17h32l-2.5 24a2 2 0 0 1-2 1.8H12.5a2 2 0 0 1-2-1.8z'/><path d='M17 22V13a7 7 0 0 1 14 0v9'/><path d='M14 30h20M14 36h20'/></svg>"); }
.canal:nth-child(5)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12c4-3 8-3 12 0s8 3 12 0 8-3 12 0'/><path d='M8 13v10l4-3 4 3V12'/><path d='M20 13v11l4-3 4 3V13'/><path d='M32 12v12l4-3 4 3V13'/><path d='M24 27v15M14 42h20'/></svg>"); }
.canal:nth-child(6)::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23FBAC52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h22v20H4z'/><path d='M26 19h8l6 7v6H26z'/><circle cx='13' cy='37' r='4'/><circle cx='33' cy='37' r='4'/></svg>"); }

/* ocasioes nao tem cartao: a trama fica atras do bloco todo, bem apagada */
.ocasioes > div{ position:relative; overflow:hidden; padding-block:.2rem; }

/* ==================================================== PRECO NA CAPA ===== */
.vitrine__preco{
  margin-top:1.1rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.9rem;
  background:var(--vinho); color:var(--sol);
  border:1.5px solid var(--vinho); border-radius:999px;
  padding:.7rem 1.5rem .7rem 1.6rem;
  box-shadow:0 5px 0 rgba(74,14,17,.3);
  transition:transform .25s var(--curva), box-shadow .25s var(--curva), background-color .25s var(--curva);
}
.vitrine__preco:hover{
  background:var(--vinho-esc); border-color:var(--vinho-esc);
  transform:translateY(-3px); box-shadow:0 8px 0 rgba(74,14,17,.26);
}
.vitrine__preco:active{ transform:translateY(0); box-shadow:0 3px 0 rgba(74,14,17,.3); }
.vitrine__preco-valor{
  font-family:var(--display); font-size:1.6rem; line-height:1; letter-spacing:.01em;
}
.vitrine__preco-acao{
  position:relative; padding-left:.9rem;
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
}
.vitrine__preco-acao::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:1.6em; background:rgba(251,172,82,.45);
}
@media (max-width: 640px){
  .vitrine__preco{ width:100%; justify-content:center; }
}

/* a capa ganha respiro embaixo para o preco nao encostar no botao flutuante */
.capa{ padding-bottom:clamp(4.5rem,9vw,7rem); }
@media (max-width: 960px){ .capa{ padding-bottom:clamp(5.5rem,12vw,7rem); } }

/* ==========================================================================
   ÍCONES DE SEÇÃO
   ========================================================================== */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ic{
  width:1.55em; height:1.55em; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}

/* títulos que ganharam ícone viram linha com o texto ao lado */
.ocasioes h3, .maneiras h3, .experiencias__grade h3, .canal h3{
  display:flex; align-items:center; gap:.6rem;
}
.ocasioes h3 .ic{ color:var(--ouro); }
.maneiras h3 .ic, .canal h3 .ic{ color:var(--ouro-claro); }
.experiencias__grade h3 .ic{ color:var(--ouro); }

/* o ícone cresce de leve quando o cartão recebe o cursor */
.maneiras li:hover .ic, .canal:hover .ic,
.experiencias__grade article:hover .ic{
  transform:scale(1.08); opacity:1;
}
.ic{ transition:transform .3s var(--curva), opacity .3s var(--curva); }

@media (max-width: 640px){
  .ic{ width:1.4em; height:1.4em; }
}

/* ==========================================================================
   TEXTURA DE FUNDO NOS CARTÕES
   O próprio ícone da seção, gigante e apagado, atrás do texto.
   Dá a leitura visual do assunto sem precisar de fotografia.
   ========================================================================== */
.maneiras li, .canal, .experiencias__grade article, .ocasioes > div{
  position:relative; overflow:hidden; isolation:isolate;
}
.maneiras li > *, .canal > *, .experiencias__grade article > *, .ocasioes > div > *{
  position:relative; z-index:2;
}
.marca-agua{
  position:absolute; z-index:1; pointer-events:none;
  right:-8%; top:50%; transform:translateY(-50%) rotate(-8deg);
  width:min(52%, 168px); height:auto; aspect-ratio:1;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.09;
  transition:transform .5s var(--curva), opacity .4s var(--curva);
}
.maneiras li .marca-agua, .canal .marca-agua{ color:var(--sol); opacity:.10; }
.ocasioes > div .marca-agua{ color:var(--vinho); opacity:.10; }
.experiencias__grade article .marca-agua{ color:var(--vinho); opacity:.09; }

.maneiras li:hover .marca-agua, .canal:hover .marca-agua,
.experiencias__grade article:hover .marca-agua, .ocasioes > div:hover .marca-agua{
  transform:translateY(-50%) rotate(-3deg) scale(1.06); opacity:.16;
}

.ocasioes > div{ padding:1.25rem 1.35rem; border-radius:4px; }
.ocasioes > div:hover{ background:rgba(99,19,23,.04); }

@media (max-width: 640px){
  .marca-agua{ width:120px; right:-6%; }
}

/* o botão flutuante nunca encosta no preço do carro-chefe:
   a capa reserva o espaço dele embaixo */
@media (min-width: 961px){
  .capa{ padding-bottom:clamp(7rem,10vw,9rem); }
}

/* quando o preço do carro-chefe aparece, o atalho recua para não cobrir */
.zap{ transition:transform .35s var(--curva), opacity .3s var(--curva); }
.zap--oculto{ opacity:0; transform:translateY(120%); pointer-events:none; }

/* o preço vive dentro da coluna da garrafa, com margem à direita,
   longe da faixa onde o atalho flutuante mora */
@media (min-width: 961px){
  .capa{ padding-bottom:clamp(3rem,6vw,5rem); }
}

/* fecho de seção com chamada para ação */
.acoes--fecha{ margin-top:1.85rem; }
.fecha-secao{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid rgba(106,61,18,.25);
  text-align:center;
}
.fecha-secao__sol{ width:44px; margin:0 auto 1.1rem; opacity:.85; }
.fecha-secao h3{
  margin:0 0 .6rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1.14; text-transform:uppercase; color:var(--vinho);
}
.fecha-secao p{ margin:0 auto 1.75rem; max-width:44ch; }
.fecha-secao .acoes{ justify-content:center; }

/* ==========================================================================
   BARRA DE COMPRA: acompanha a rolagem na página do produto
   ========================================================================== */
.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:170;
  background:linear-gradient(180deg, var(--creme) 0%, #FBF2DF 100%);
  border-top:2px solid var(--vinho);
  box-shadow:0 -8px 30px rgba(74,14,17,.16);
  animation:subirBarra .32s var(--curva);
}
.barra-compra[hidden]{ display:none; }
@keyframes subirBarra{ from{ transform:translateY(100%); } to{ transform:none; } }
.barra-compra__interno{
  max-width:var(--limite); margin-inline:auto;
  padding:.85rem var(--gutter);
  display:flex; align-items:center; gap:1rem;
}
.barra-compra__foto{
  width:48px; height:58px; object-fit:cover; border-radius:3px;
  border:1px solid rgba(106,61,18,.22); background:#fff; flex:none;
}
.barra-compra__texto{ display:flex; flex-direction:column; min-width:0; }
.barra-compra__texto strong{
  font-family:var(--display); font-weight:400; font-size:1.15rem;
  line-height:1.15; text-transform:uppercase; color:var(--vinho);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra-compra__texto span{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ouro);
}
.barra-compra__preco{
  margin-left:auto; font-family:var(--display);
  font-size:1.5rem; line-height:1; color:var(--vinho); white-space:nowrap;
}
.barra-compra .botao{ flex:none; }

@media (max-width: 640px){
  .barra-compra__interno{ padding:.7rem 1rem; gap:.7rem; flex-wrap:wrap; }
  .barra-compra__foto{ width:40px; height:48px; }
  .barra-compra__texto strong{ font-size:1rem; }
  .barra-compra__preco{ font-size:1.25rem; }
  .barra-compra .botao{ flex:1 1 100%; text-align:center; padding-block:.9rem; }
}

/* a barra não pode cobrir o rodapé nem brigar com o atalho flutuante */
body:has(.barra-compra:not([hidden])) .zap{ transform:translateY(-4.5rem); }
@media (max-width: 640px){
  body:has(.barra-compra:not([hidden])) .zap{ transform:translateY(-7.5rem); }
}

/* ==========================================================================
   FRETE GRÁTIS: barra de progresso na sacola
   ========================================================================== */
.frete-gratis{
  margin-bottom:1rem; padding:.85rem 1rem;
  background:rgba(251,172,82,.14); border-radius:3px;
  border:1px solid rgba(173,114,48,.28);
}
.frete-gratis[hidden]{ display:none; }
.frete-gratis__texto{
  margin:0 0 .55rem; font-size:.86rem; color:var(--terra);
}
.frete-gratis__texto strong{ color:var(--vinho); font-weight:600; }
.frete-gratis__trilho{
  height:6px; border-radius:3px; overflow:hidden;
  background:rgba(106,61,18,.16);
}
.frete-gratis__trilho span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--ouro), var(--sol));
  transition:width .45s var(--curva);
}
.frete-gratis--pronto{
  background:rgba(31,107,59,.10); border-color:rgba(31,107,59,.32);
}
.frete-gratis--pronto .frete-gratis__texto{ color:#1F6B3B; font-weight:600; }
.frete-gratis--pronto .frete-gratis__trilho span{ background:#2E8B52; }

/* fotos que trazem o próprio fundo recebem moldura */
.produto__foto--moldura{
  border-radius:3px; border:1px solid rgba(106,61,18,.2);
  box-shadow:0 8px 20px rgba(74,14,17,.14);
}

/* fotos largas (kits com várias garrafas lado a lado): usam a largura
   toda do cartão em vez de altura fixa, para não cortar a lateral */
.produto__foto--paisagem{
  height:auto; width:100%; max-height:268px;
}

/* ==========================================================================
   AVISE-ME QUANDO VOLTAR
   ========================================================================== */
.produto__etiqueta--fora{
  background:var(--terra); color:var(--areia);
}
.avise{
  margin-top:.75rem; display:grid; gap:.55rem;
  animation:surgir .3s var(--curva);
}
.avise input{
  font-family:var(--corpo); font-size:.95rem; color:var(--vinho);
  background:#fff; border:1px solid rgba(106,61,18,.32);
  border-radius:3px; padding:.75rem .9rem; width:100%;
}
.avise input:focus{ outline:none; border-color:var(--vinho); box-shadow:0 0 0 3px rgba(99,19,23,.12); }
.avise input.invalido{ border-color:#A32A21; background:#FDF0EC; }
.avise .botao{ width:100%; text-align:center; padding-block:.8rem; }
.avise__aviso{ margin:0; font-size:.86rem; min-height:1.1em; }
.avise__aviso.ok{ color:#1F6B3B; font-weight:500; }
.avise__aviso.erro{ color:#A32A21; }

/* ==========================================================================
   KITS: preço cheio riscado, economia e composição
   ========================================================================== */
.produto__de, .prod__de{
  display:block; font-family:var(--corpo); font-size:.9rem;
  color:var(--terra); opacity:.65; text-decoration:line-through;
  margin-top:.15rem; letter-spacing:0;
}
.prod__de{ font-size:1.05rem; }
.produto__vantagem{
  margin:.35rem 0 0; font-size:.82rem; font-weight:600; color:#1F6B3B;
}
.prod__vantagem{
  margin:.9rem 0 0; padding:.85rem 1rem;
  background:rgba(31,107,59,.09); border-left:3px solid #2E8B52; border-radius:3px;
  font-size:.95rem; color:#1F6B3B;
}
.prod__vantagem[hidden]{ display:none; }
.prod__vantagem strong{ font-weight:700; }

/* "Restam X" — avisa quantidade baixa sem soar alarmante */
.produto__estoque{
  margin:.35rem 0 0; font-size:.8rem; font-weight:600; color:var(--ouro);
}
.prod__estoque{
  margin:.6rem 0 0; font-size:.88rem; font-weight:600; color:var(--ouro);
}
.prod__estoque[hidden]{ display:none; }

.composicao{ margin-top:1.5rem; }
.composicao[hidden]{ display:none; }
.composicao h3{
  margin:0 0 .8rem; font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
}
.composicao ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.composicao li{
  display:flex; gap:.7rem; align-items:baseline;
  padding-bottom:.4rem; border-bottom:1px solid rgba(106,61,18,.14);
}
.composicao li:last-child{ border-bottom:none; }
.composicao li span{
  font-family:var(--display); font-size:1.05rem; color:var(--vinho);
  min-width:2.1rem;
}

/* linha da bombona, exclusiva de bares */
.linha-exclusiva{ background:rgba(251,172,82,.10); }
.linha-exclusiva td.prod small{ color:var(--vinho); font-weight:600; }

/* faixa que apresenta os kits na loja */
.chamada-kit{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  justify-content:space-between;
  margin-bottom:2.25rem; padding:clamp(1.4rem,3vw,2rem);
  background:linear-gradient(120deg, rgba(251,172,82,.20), rgba(251,172,82,.08));
  border:1px solid rgba(173,114,48,.32); border-radius:4px;
}
.chamada-kit h3{
  margin:.3rem 0 .55rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);
  line-height:1.14; text-transform:uppercase; color:var(--vinho);
}
.chamada-kit p{ margin:0; max-width:52ch; font-size:.95rem; }
.chamada-kit strong{ color:var(--vinho); font-weight:600; }
.chamada-kit .botao{ flex:none; }
@media (max-width: 640px){
  .chamada-kit .botao{ flex:1 1 100%; text-align:center; }
}

/* recado informativo abaixo do campo, diferente de erro */
.erro-campo--aviso{ color:var(--terra); }

/* ==========================================================================
   OFERTAS NA SACOLA
   ========================================================================== */
.ofertas{
  margin-bottom:1rem; padding-top:1rem;
  border-top:1px dashed rgba(106,61,18,.3);
}
.ofertas[hidden]{ display:none; }
.ofertas__titulo{
  margin:0 0 .75rem; font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
}
.oferta{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem; margin-bottom:.55rem;
  background:rgba(251,172,82,.13);
  border:1px solid rgba(173,114,48,.3); border-radius:4px;
  transition:background-color .25s var(--curva), border-color .25s var(--curva);
}
.oferta:last-child{ margin-bottom:0; }
.oferta:hover{ background:rgba(251,172,82,.2); border-color:var(--ouro); }
.oferta img{
  width:42px; height:52px; flex:none; object-fit:cover;
  border-radius:2px; background:#fff; border:1px solid rgba(106,61,18,.18);
}
.oferta__texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.12rem; }
.oferta__texto strong{
  font-family:var(--display); font-weight:400; font-size:1.02rem;
  line-height:1.15; text-transform:uppercase; color:var(--vinho);
}
.oferta__texto > span{ font-size:.78rem; opacity:.8; line-height:1.35; }
.oferta__preco{
  margin:.2rem 0 0; display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap;
  font-family:var(--display); font-size:1.15rem; color:var(--vinho);
}
.oferta__de{
  font-family:var(--corpo); font-size:.8rem; opacity:.6; text-decoration:line-through;
}
.oferta__selo{
  font-family:var(--corpo); font-size:.66rem; font-weight:700; letter-spacing:.06em;
  background:#2E8B52; color:#fff; border-radius:2px; padding:.12rem .35rem;
}
.oferta__add{
  flex:none; cursor:pointer; min-height:40px; padding:0 .9rem;
  background:var(--vinho); color:var(--sol);
  border:1px solid var(--vinho); border-radius:3px;
  font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:background-color .25s var(--curva);
}
.oferta__add:hover{ background:var(--vinho-esc); }

@media (max-width: 420px){
  .oferta{ flex-wrap:wrap; }
  .oferta__add{ flex:1 1 100%; margin-top:.35rem; }
}

/* ==========================================================================
   OFERTAS DA SACOLA
   Aparecem quando o cliente já tem algo na sacola, antes de finalizar.
   ========================================================================== */
.ofertas{
  padding:1.1rem 1.35rem;
  border-top:1px dashed rgba(106,61,18,.28);
  background:rgba(251,172,82,.07);
}
.ofertas[hidden]{ display:none; }
.ofertas__titulo{
  margin:0 0 .85rem; font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
}
.ofertas__lista{ display:grid; gap:.7rem; }

.oferta{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:.85rem; align-items:center;
  padding:.8rem; border-radius:4px;
  background:var(--creme);
  border:1px solid rgba(173,114,48,.3);
  animation:surgir .3s var(--curva);
}
.oferta__foto{
  width:52px; height:62px; object-fit:cover; border-radius:3px;
  border:1px solid rgba(106,61,18,.18); background:#fff;
}
.oferta__corpo{ min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.oferta__corpo strong{
  font-family:var(--display); font-weight:400; font-size:1rem;
  line-height:1.18; text-transform:uppercase; color:var(--vinho);
}
.oferta__chamada{
  font-size:.78rem; line-height:1.4; color:var(--terra); opacity:.85;
}
.oferta__precos{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.45rem;
  margin-top:.25rem;
}
.oferta__precos b{
  font-family:var(--display); font-weight:400; font-size:1.25rem;
  color:var(--vinho); letter-spacing:.01em;
}
.oferta__precos s{ font-size:.8rem; opacity:.55; }
.oferta__precos em{
  font-style:normal; font-size:.66rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#1F6B3B;
}
.oferta__add{
  width:44px; height:44px; flex:none; border-radius:3px; cursor:pointer;
  background:var(--vinho); color:var(--sol);
  border:1px solid var(--vinho);
  font-size:1.5rem; line-height:1;
  display:grid; place-items:center;
  transition:background-color .25s var(--curva), transform .25s var(--curva);
}
.oferta__add:hover{ background:var(--vinho-esc); transform:scale(1.06); }

/* item de combo na sacola: quantidade travada */
.item__combo{
  font-size:.64rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ouro);
  padding:.3rem .6rem; border:1px solid rgba(173,114,48,.38); border-radius:2px;
}

@media (max-width: 420px){
  .oferta{ grid-template-columns:44px 1fr auto; gap:.65rem; padding:.7rem; }
  .oferta__foto{ width:44px; height:54px; }
  .oferta__corpo strong{ font-size:.92rem; }
  .oferta__chamada{ display:none; }
}

/* ==========================================================================
   SACOLA: a lista precisa deixar claro que continua abaixo
   ========================================================================== */
.gaveta__corpo{
  /* sombra no topo e no rodapé quando há conteúdo fora da vista */
  background:
    linear-gradient(var(--creme) 30%, rgba(254,248,234,0)) top / 100% 28px no-repeat,
    linear-gradient(rgba(254,248,234,0), var(--creme) 70%) bottom / 100% 28px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(99,19,23,.14), rgba(0,0,0,0)) top / 100% 12px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(99,19,23,.14), rgba(0,0,0,0)) bottom / 100% 12px no-repeat;
  background-attachment: local, local, scroll, scroll;
  scroll-behavior:smooth;
}

/* item recém-acrescentado pisca uma vez, para o cliente localizar */
.item--novo{
  animation:destacarItem 1.8s var(--curva);
  border-radius:4px;
}
@keyframes destacarItem{
  0%   { background:rgba(251,172,82,.42); }
  70%  { background:rgba(251,172,82,.22); }
  100% { background:transparent; }
}

/* ==========================================================================
   SACOLA: quem manda no espaço é o que o cliente escolheu
   As ofertas são complemento e não podem espremer a lista de itens.
   ========================================================================== */
.gaveta__painel{ display:flex; flex-direction:column; }

/* uma área de rolagem só, com os itens em cima e as ofertas embaixo */
.gaveta__rolagem{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  scroll-behavior:smooth;
}
.gaveta__corpo{ overflow:visible; }
.ofertas{ padding:.9rem 1.2rem; }

/* cartão de oferta mais enxuto: o essencial é preço e o botão */
@media (max-width: 560px){
  .oferta__chamada{ display:none; }
  .oferta{ padding:.65rem; gap:.7rem; grid-template-columns:42px 1fr auto; }
  .oferta__foto{ width:42px; height:50px; }
  .oferta__corpo strong{ font-size:.9rem; }
  .oferta__precos{ margin-top:.15rem; gap:.35rem; }
  .oferta__precos b{ font-size:1.1rem; }
  .oferta__precos s{ font-size:.72rem; }
  .oferta__precos em{ font-size:.6rem; }
  .oferta__add{ width:40px; height:40px; font-size:1.35rem; }
  .ofertas{ padding:.8rem 1rem; }
  .ofertas__titulo{ margin-bottom:.6rem; font-size:.62rem; }
  .ofertas__lista{ gap:.5rem; }
}

/* telas curtas: a lista de itens ganha ainda mais prioridade */


/* ==========================================================================
   ITEM DA SACOLA NO CELULAR: três colunas em vez de duas linhas
   Antes o valor total caía para baixo e cada item ocupava 179px.
   ========================================================================== */
@media (max-width: 560px){
  .gaveta__corpo .item{
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:.7rem;
    padding:.75rem 0;
  }
  .gaveta__corpo .item > img{ width:48px; height:58px; }
  .gaveta__corpo .item > .item__foto-vazia{ width:48px; height:58px; }
  .gaveta__corpo .item__nome{ font-size:.92rem; line-height:1.25; }
  .gaveta__corpo .item__preco{ font-size:.78rem; margin:.1rem 0 .35rem; }
  .gaveta__corpo .item__soma{ font-size:.95rem; align-self:center; }
  .gaveta__corpo .item__quantidade{ gap:.35rem; }
  .gaveta__corpo .item__quantidade button:not(.item__tirar){ min-width:32px; min-height:32px; width:32px; height:32px; }
  .gaveta__corpo .item__tirar{ font-size:.7rem; min-height:32px; }
  .gaveta__corpo .item__combo{ font-size:.6rem; padding:.25rem .45rem; }
}

/* aviso do cálculo de frete */
.frete__aviso{ margin:.7rem 0 0; font-size:.85rem; min-height:1.1em; color:var(--terra); }
.frete__aviso.ok{ color:#1F6B3B; }
.opcoes--carregando{ opacity:.5; pointer-events:none; transition:opacity .2s var(--curva); }

/* ==========================================================================
   GRAVURA HISTÓRICA na linha do tempo
   ========================================================================== */
.gravura{
  margin:1.6rem 0 0;
  background:var(--creme);
  border:1px solid rgba(106,61,18,.24);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(74,14,17,.12);
}
.gravura img{
  display:block; width:100%; height:auto;
  border-bottom:1px solid rgba(106,61,18,.18);
}
.gravura figcaption{
  padding:.9rem 1.1rem;
  font-size:.82rem; line-height:1.5; color:var(--terra);
}
.gravura cite{ font-style:italic; }

/* sobre o fundo vinho da linha do tempo, a moldura precisa de outro tom */
.faixa--vinho .gravura,
.tempo .gravura{
  background:rgba(253,241,216,.06);
  border-color:rgba(251,172,82,.28);
}
.faixa--vinho .gravura figcaption,
.tempo .gravura figcaption{ color:var(--sol-claro); }