/* ==========================================================================
   VINHOS DO VALLE — Componentes
   Botões, cards, medidores, modais, gaveta, campos e microinterações.
   ========================================================================== */

/* ==========================================================================
   MARCA
   O símbolo (cacho/videira) nunca é redesenhado — brandbook, seção 09.
   ========================================================================== */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--dourado);
}

.marca__simbolo { width: 22px; height: auto; flex-shrink: 0; }

.marca__texto { display: flex; flex-direction: column; line-height: 1; }

.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
}

.marca__sub {
  margin-top: 5px;
  font-family: var(--fonte-texto);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dourado);
}

.marca--empilhada { flex-direction: column; gap: var(--e2); }
.marca--empilhada .marca__simbolo { width: 34px; }
.marca--empilhada .marca__texto { align-items: center; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  padding: 16px 32px;
  border-radius: var(--r-botao);
  overflow: hidden;
  font-family: var(--fonte-texto);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform var(--t-rapido) var(--curva),
    background-color var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva),
    box-shadow var(--t-rapido) var(--curva);
}

/* Varredura de luz atravessando o botão no hover — o brilho que passa por
   uma superfície polida quando ela se move. */
.btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.btn:hover::before { animation: varrerBotao 850ms var(--curva); }

@keyframes varrerBotao {
  0%   { left: -60%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

.btn > * { position: relative; z-index: 1; }

/* Elevação de 2% com a sombra acompanhando: o botão sai do plano em vez
   de só crescer. O recuo no clique devolve a sensação tátil. */
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: var(--t-toque); }

.btn--primario {
  background: var(--primaria);
  color: var(--texto);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.28);
}

.btn--primario:hover {
  background: var(--primaria-hover);
  /* O halo dourado é o último anel, quase imperceptível — é o que separa
     "botão vermelho" de "botão de marca cara". */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 34px rgba(90, 14, 24, 0.46),
    0 0 0 1px rgba(199, 169, 107, 0.22);
}

.btn--secundario:hover {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(199, 169, 107, 0.16);
}

.btn--fantasma:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30); }

/* Secundário: contorno dourado que inverte no hover. */
.btn--secundario {
  background: transparent;
  border: 1px solid var(--borda-dourada);
  color: var(--dourado);
}
.btn--secundario:hover {
  background: var(--dourado);
  border-color: var(--dourado);
  color: #0A0A0A;
}

.btn--fantasma {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto);
}
.btn--fantasma:hover { border-color: var(--borda-forte); background: rgba(255,255,255,0.03); }

.btn--miudo { padding: 11px 22px; font-size: var(--t-caption); }
.btn--largo { width: 100%; }

.btn svg { width: 16px; height: 16px; }

/* Link textual com fio dourado que desliza no hover. */
.btn-texto {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding-block: var(--e05);
  font-size: var(--t-pequeno);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dourado);
  transition: color var(--t-rapido) var(--curva);
}

.btn-texto::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio) var(--curva);
}

.btn-texto:hover { color: var(--dourado-claro); }
.btn-texto:hover::after { transform: scaleX(1); }
.btn-texto svg { width: 16px; height: 16px; }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pilula);
  color: var(--texto-2);
  position: relative;
  transition:
    color var(--t-rapido) var(--curva),
    background-color var(--t-rapido) var(--curva);
}

.btn-icone:hover { color: var(--dourado); background: rgba(255,255,255,0.04); }
.btn-icone:active { transform: scale(0.92); transition-duration: var(--t-toque); }

.btn-icone svg {
  width: 20px; height: 20px;
  transition: transform var(--t-rapido) var(--curva);
}

/* O ícone respira junto com o botão — 4% e nada mais. */
.btn-icone:hover svg { transform: scale(1.04); }

.btn-icone.ativo { color: var(--dourado); }
.btn-icone.ativo svg { fill: rgba(199,169,107,0.18); }

/* Coração do favorito: pulso único ao ser marcado. */
.card__favorito.ativo svg { animation: pulsarFavorito 420ms var(--curva-fina); }

@keyframes pulsarFavorito {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.24); }
  100% { transform: scale(1); }
}

/* Setas que apontam o caminho ganham um passo à frente. */
.btn-texto:hover svg,
.btn:hover svg { transform: translateX(3px); }
.btn-texto svg, .btn svg { transition: transform var(--t-rapido) var(--curva); }

/* Bolha de contagem da sacola. */
.bolha {
  position: absolute;
  top: 5px; right: 3px;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--primaria);
  color: var(--texto);
  border-radius: var(--r-pilula);
  font-size: 10px;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}

.bolha.visivel { opacity: 1; transform: none; }

/* ==========================================================================
   FIO DE PROGRESSO
   Marca discreta de quanto da página já foi percorrido.
   ========================================================================== */

.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 130;
  pointer-events: none;
}

.progresso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--folha-ouro);
  opacity: 0.85;
  transition: width 120ms linear;
}

/* ==========================================================================
   OURO EM FOLHA
   Aplicado só em peças grandes: em texto miúdo o gradiente vira sujeira.
   ========================================================================== */

.enfase,
.plano__preco,
.depoimento__numero,
.instagram-bloco__desconto {
  background: var(--folha-ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* O preço do plano tem uma linha em fonte de texto embaixo, que não pode
   herdar o recorte — senão some. */
.plano__preco small {
  -webkit-text-fill-color: var(--texto-3);
  color: var(--texto-3);
}

/* ==========================================================================
   SELOS E BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--texto-2);
  transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}

.badge:hover { border-color: var(--borda-dourada); color: var(--dourado); }

.selo {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pilula);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Os três papéis da recomendação — tipografia e cor, sem emoji. */
.selo--escolha { background: var(--dourado); color: #0A0A0A; }
.selo--custo   { background: transparent; border: 1px solid var(--borda-dourada); color: var(--dourado); }
.selo--premium { background: var(--primaria); color: var(--texto); }
.selo--neutro  { background: rgba(255,255,255,0.06); color: var(--texto-2); }

.pilula {
  padding: 10px 22px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--texto-2);
  white-space: nowrap;
  transition:
    border-color var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva),
    background-color var(--t-rapido) var(--curva);
}

.pilula:hover { border-color: var(--borda-dourada); color: var(--dourado); }
.pilula.marcada { background: var(--dourado); border-color: var(--dourado); color: #0A0A0A; }

.tira-pilulas { display: flex; gap: var(--e1); flex-wrap: wrap; }

/* ==========================================================================
   CARD DE PRODUTO
   Imagem grande, muito respiro, pouco texto, preço em destaque.
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Superfície com leve queda de luz de cima para baixo, em vez de cor
     chapada: é o que dá volume ao card sem recorrer a sombra pesada. */
  background: linear-gradient(180deg, #1C1C1C 0%, var(--superficie) 46%, #141414 100%);
  border: 1px solid var(--borda);
  border-radius: var(--r-premium);
  overflow: hidden;
  /* A linha clara no topo simula a quina do material pegando a luz. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 2px rgba(0, 0, 0, 0.4);
  transition:
    transform var(--t-medio) var(--curva),
    border-color var(--t-medio) var(--curva),
    box-shadow var(--t-medio) var(--curva);
}

.card:hover {
  transform: translateY(-8px);
  border-color: var(--borda-dourada);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--sombra-hover);
}

/* Fio de ouro que corre no topo do card ao passar o mouse. */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg,
    transparent, var(--dourado-claro) 50%, transparent);
  transform: scaleX(0);
  transition: transform var(--t-entrada) var(--curva);
}

.card:hover::after { transform: scaleX(1); }

/* Reflexo dourado atravessando o palco — o brilho que corre no vidro
   quando a garrafa é girada na mão. Passa uma vez e some. */
.card__palco::before,
.card__reflexo-luz {
  pointer-events: none;
}

.card__palco {
  --luz: 0;
}

.card:hover .card__palco { --luz: 1; }

.card__palco > .card__varredura {
  position: absolute;
  top: -20%; bottom: -20%;
  left: -40%;
  width: 34%;
  z-index: 3;
  background: linear-gradient(100deg,
    transparent,
    rgba(199, 169, 107, 0.10) 38%,
    rgba(240, 221, 176, 0.20) 50%,
    rgba(199, 169, 107, 0.10) 62%,
    transparent);
  transform: skewX(-14deg);
  opacity: 0;
  pointer-events: none;
}

.card:hover .card__varredura { animation: varrerPalco 1100ms var(--curva-fina); }

@keyframes varrerPalco {
  0%   { left: -40%; opacity: 0; }
  22%  { opacity: 1; }
  100% { left: 116%; opacity: 0; }
}

/* A garrafa ganha corpo e brilho no hover, como objeto sob a luz. */
.card__garrafa {
  filter: saturate(1) contrast(1) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  transition:
    transform var(--t-medio) var(--curva),
    filter var(--t-medio) var(--curva);
}

.card:hover .card__garrafa {
  filter: saturate(1.12) contrast(1.08)
          drop-shadow(0 18px 30px rgba(0, 0, 0, 0.62));
}

/* O piso acende junto. */
.card__reflexo {
  transition: opacity var(--t-medio) var(--curva),
              transform var(--t-medio) var(--curva);
  opacity: 0.7;
}

.card:hover .card__reflexo { opacity: 1; transform: translateX(-50%) scaleX(1.14); }

.card__palco {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--e8) var(--e4) var(--e4);
  min-height: 300px;
  overflow: hidden;
}

/* Luz caindo de cima sobre a garrafa, como em vitrine de adega. z-index:0
   garante que o brilho fique atrás da garrafa/foto (z-index:1), nunca
   por cima cobrindo o produto. */
.card__palco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 74% at 50% 42%, rgba(199,169,107,0.16), transparent 66%),
    radial-gradient(ellipse 74% 62% at 50% 60%, rgba(90,14,24,0.5), transparent 74%);
}

/* Piso: a linha de apoio que impede a garrafa de parecer flutuando solta. */
.card__palco::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  bottom: 26px;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg,
    transparent, rgba(199,169,107,0.16) 50%, transparent);
}

.card__garrafa {
  position: relative;
  height: 230px;
  width: auto;
  transition: transform var(--t-medio) var(--curva);
}

.card:hover .card__garrafa { transform: scale(1.08); }

.card__reflexo {
  position: absolute;
  left: 50%; bottom: 22px;
  width: 130px; height: 12px;
  z-index: 0;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(199,169,107,0.20), transparent 72%);
}

/* Card de produto real: mesma vitrine do card demonstrativo, mas com uma
   foto de produto (fundo branco de estúdio) no lugar da garrafa em SVG.
   A foto fica sem filtro/blend — brilho natural, sem escurecer — e o
   brilho do palco (::before/::after e .card__reflexo, z-index:0) fica
   só no fundo, atrás dela (z-index:1). */
.card__garrafa-real {
  position: relative;
  z-index: 1;
  height: 230px;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transition: transform var(--t-medio) var(--curva);
}

.card:hover .card__garrafa-real {
  transform: scale(1.08);
}

/* Selo discreto de frete grátis, no tom dourado da marca. */
.frete-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 10px 18px;
  margin-bottom: var(--e4);
  border: 1px solid var(--borda-dourada);
  border-radius: var(--r-pilula);
  background: var(--dourado-fundo);
  color: var(--dourado-claro);
  font-size: var(--t-pequeno);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.frete-selo svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Aviso de atacado, discreto, acima ou junto da grade de produtos. */
.aviso-atacado {
  margin-block: var(--e2) var(--e6);
  font-size: var(--t-pequeno);
  color: var(--texto-2);
}

.aviso-atacado a { color: var(--dourado); text-decoration: underline; text-underline-offset: 3px; }
.aviso-atacado a:hover { color: var(--dourado-claro); }

.card__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  border-top: 1px solid var(--borda);
}

.card__origem {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-3);
}

.card__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-card);
  line-height: 1.26;
  color: var(--texto);
  transition: color var(--t-rapido) var(--curva);
}

.card:hover .card__nome { color: var(--dourado-claro); }

.card__uva { font-size: var(--t-pequeno); color: var(--texto-2); }

.card__motivo {
  font-size: var(--t-pequeno);
  line-height: 1.5;
  color: var(--texto-2);
  padding-left: var(--e2);
  border-left: 1px solid var(--borda-dourada);
}

/* Preço acima, CTA em largura cheia abaixo: com os dois na mesma linha o
   valor quebrava no meio ("R$" / "189,00") nos cards estreitos. */
.card__rodape {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e2);
}

.card__preco {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.1;
  color: var(--texto);
  white-space: nowrap;
  transition: color var(--t-rapido) var(--curva);
}

.card:hover .card__preco { color: var(--dourado); }

.card__parcela {
  display: block;
  margin-top: 2px;
  font-family: var(--fonte-texto);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto-3);
}

/* CTA sempre presente; ganha corpo no hover. */
.card__cta {
  width: 100%;
  opacity: 0.62;
  transform: translateY(4px);
  transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}

.card:hover .card__cta { opacity: 1; transform: none; }

.card__selo { position: absolute; top: var(--e3); left: var(--e3); z-index: 3; }
.card__favorito { position: absolute; top: var(--e2); right: var(--e2); z-index: 3; width: 40px; height: 40px; }

.card--gourmet .card__palco { min-height: 200px; padding-top: var(--e6); }
.card__icone { width: 56px; height: 56px; color: var(--dourado); opacity: 0.5; }

/* ==========================================================================
   GRADES DE CARD
   ========================================================================== */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--e4);
}

.grade--tres { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grade--dois { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

@media (max-width: 640px) { .grade { grid-template-columns: 1fr; gap: var(--e3); } }

/* Troca de filtro: some e volta, nunca instantâneo. */
.grade.trocando > * {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 200ms var(--curva-suave), transform 200ms var(--curva-suave);
}

/* ==========================================================================
   PERFIL SENSORIAL — barras
   ========================================================================== */

.perfil { display: grid; gap: var(--e3); }

.medidor {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: center;
  gap: var(--e3);
}

.medidor__nome { font-size: var(--t-pequeno); color: var(--texto-2); }

.medidor__trilha {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-pilula);
  overflow: hidden;
}

.medidor__nivel {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--nivel, 0%);
  background: linear-gradient(90deg, var(--primaria), var(--dourado));
  border-radius: var(--r-pilula);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--curva);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.visivel .medidor__nivel { transform: scaleX(1); }

.medidor__valor {
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  color: var(--texto-3);
  min-width: 68px;
  text-align: right;
}

@media (max-width: 520px) {
  .medidor { grid-template-columns: 92px 1fr; }
  .medidor__valor { display: none; }
}

/* ==========================================================================
   AVALIAÇÃO
   ========================================================================== */

.avaliacao { display: inline-flex; align-items: center; gap: var(--e2); }
.avaliacao__marcas { display: inline-flex; gap: 5px; }

.avaliacao__losango {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  border: 1px solid var(--borda-dourada);
}

.avaliacao__losango.cheio { background: var(--dourado); border-color: var(--dourado); }
.avaliacao__texto { font-size: var(--t-caption); color: var(--texto-3); }

/* ==========================================================================
   CAMPOS
   ========================================================================== */

.campo { display: flex; flex-direction: column; gap: var(--e1); }

.campo__rotulo {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-3);
}

.campo__entrada {
  padding: 15px 20px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-campo);
  color: var(--texto);
  font-size: var(--t-pequeno);
  transition: border-color var(--t-rapido) var(--curva), background-color var(--t-rapido) var(--curva);
}

.campo__entrada::placeholder { color: var(--texto-3); }
.campo__entrada:focus {
  outline: none;
  border-color: var(--borda-dourada);
  background: var(--superficie);
}

select.campo__entrada {
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ==========================================================================
   OPÇÕES — Sommelier e Monte sua Adega
   ========================================================================== */

.opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--e2);
}

.opcao {
  padding: 20px var(--e3);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-botao);
  font-size: var(--t-pequeno);
  color: var(--texto-2);
  text-align: left;
  transition:
    border-color var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva),
    background-color var(--t-rapido) var(--curva),
    transform var(--t-rapido) var(--curva);
}

.opcao:hover { border-color: var(--borda-dourada); color: var(--texto); transform: translateY(-2px); }

.opcao.marcada {
  background: var(--primaria-fundo);
  border-color: var(--dourado);
  color: var(--dourado-claro);
}

.trilho { display: flex; gap: 6px; margin-bottom: var(--e6); }

.trilho__parte {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-pilula);
  overflow: hidden;
  position: relative;
}

.trilho__parte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio) var(--curva);
}

.trilho__parte.feita::after { transform: scaleX(1); }

.passo { display: none; }
.passo.ativa { display: block; animation: entrarPasso var(--t-medio) var(--curva); }

@keyframes entrarPasso {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.contador { display: flex; align-items: center; justify-content: center; gap: var(--e4); }

.contador__btn {
  width: 48px; height: 48px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  color: var(--texto-2);
  font-size: 1.25rem;
  transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}

.contador__btn:hover { border-color: var(--dourado); color: var(--dourado); }

.contador__valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-h2);
  min-width: 88px;
  text-align: center;
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--e4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--curva);
}

.modal.aberto { opacity: 1; pointer-events: auto; }

.modal__veu {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--e8);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-modal);
  box-shadow: var(--sombra-hover);
  transform: translateY(24px) scale(0.97);
  transition: transform var(--t-medio) var(--curva);
}

.modal.aberto .modal__caixa { transform: none; }
.modal__caixa--ampla { max-width: 1080px; }

.modal__fechar { position: absolute; top: var(--e3); right: var(--e3); }

.modal__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: var(--e6);
  padding-right: var(--e6);
}

.modal__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-top: var(--e8);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

@media (max-width: 768px) {
  .modal { padding: var(--e2); }
  .modal__caixa { padding: var(--e4); max-height: 92vh; }
}

/* ==========================================================================
   CONVERSA COM A SOMMELIÈRE
   As perguntas viraram fala. As respostas seguem em botão — é o que mantém
   a recomendação confiável — mas chegam como sugestão dentro do diálogo.
   ========================================================================== */

/* Altura travada. As respostas mudam de tamanho a cada passo (dez ocasiões
   ocupam três linhas, quatro faixas ocupam uma) e, com o modal centralizado,
   isso fazia a caixa inteira saltar a cada pergunta. Fixando a altura, quem
   absorve a variação é a área da conversa. */
.modal__caixa--conversa {
  max-width: 620px;
  height: min(720px, 86vh);
  display: flex;
  flex-direction: column;
}

.modal__caixa--conversa > #modal-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Ao chegar na recomendação a caixa precisa abrir para os três cards
   caberem lado a lado. Sem esta regra a largura da conversa vence por
   vir depois no arquivo, e os vinhos ficam espremidos numa coluna. */
.modal__caixa--conversa.modal__caixa--ampla { max-width: 1080px; }

.modal__caixa--conversa .modal__cabeca { margin-bottom: var(--e4); }

/* No resultado a caixa volta a crescer com o conteúdo: os vinhos precisam
   de espaço e não há mais troca de respostas para causar salto. */
.modal__caixa--conversa.modal__caixa--ampla {
  height: auto;
  max-height: 88vh;
  display: block;
}

.modal__caixa--ampla .conversa { flex: none; height: 24vh; min-height: 150px; }

.conversa-cabeca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.conversa-cabeca__retrato {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--borda-dourada);
  border-radius: var(--r-pilula);
  background: var(--superficie);
  color: var(--dourado);
  overflow: hidden;
  flex-shrink: 0;
}

.conversa-cabeca__retrato svg { width: 80%; height: 80%; }

.conversa-cabeca__nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-card);
}

.conversa-cabeca__estado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-caption);
  color: var(--texto-3);
}

/* Ponto verde discreto: sinal de que há alguém do outro lado. */
.conversa-cabeca__estado::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5E9C6B;
  box-shadow: 0 0 8px rgba(94, 156, 107, 0.7);
}

/* Altura fixa, não máxima: com max-height a caixa crescia a cada bolha e,
   como o modal é centralizado, a tela inteira saltava a cada mensagem. */
/* Ocupa o que sobrar da altura fixa da caixa — é ela que absorve a
   variação das respostas, rolando por dentro quando precisa. */
.conversa {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--e1);
  scroll-behavior: smooth;
}

.conversa .fala + .fala { margin-top: var(--e2); }

#conversa-respostas { flex-shrink: 0; }

.fala {
  display: flex;
  align-items: flex-end;
  gap: var(--e1);
  animation: entrarFala 460ms var(--curva-fina);
}

@keyframes entrarFala {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.fala--cliente { justify-content: flex-end; }

.fala__retrato {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pilula);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--dourado);
  overflow: hidden;
  flex-shrink: 0;
}

.fala__retrato svg { width: 80%; height: 80%; }

.fala__balao {
  max-width: 78%;
  padding: 13px 18px;
  border-radius: 18px;
  font-size: var(--t-pequeno);
  line-height: 1.55;
}

/* Ela fala de um lado, o cliente do outro — com a quina apontando para
   quem falou, como em qualquer conversa. */
.fala--sommelier .fala__balao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom-left-radius: 5px;
  color: var(--texto);
}

.fala--cliente .fala__balao {
  background: var(--primaria);
  border-bottom-right-radius: 5px;
  color: var(--texto);
}

/* Os três pontos enquanto ela "escreve". */
.fala__balao--digitando { display: inline-flex; gap: 5px; padding: 16px 18px; }

.fala__balao--digitando i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--texto-3);
  animation: digitar 1.3s ease-in-out infinite;
}

.fala__balao--digitando i:nth-child(2) { animation-delay: 0.18s; }
.fala__balao--digitando i:nth-child(3) { animation-delay: 0.36s; }

@keyframes digitar {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-4px); }
}

/* Sugestões de resposta. */
.respostas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  justify-content: flex-end;
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  animation: entrarFala 460ms var(--curva-fina);
}

.resposta {
  padding: 11px 20px;
  border: 1px solid var(--borda-dourada);
  border-radius: var(--r-pilula);
  font-size: var(--t-pequeno);
  color: var(--dourado);
  transition:
    background-color var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva),
    transform var(--t-rapido) var(--curva);
}

.resposta:hover {
  background: var(--dourado);
  color: #0A0A0A;
  transform: translateY(-2px);
}

.resposta:active { transform: translateY(0) scale(0.97); transition-duration: var(--t-toque); }

.respostas--contador {
  flex-direction: column;
  align-items: stretch;
  gap: var(--e3);
}

.conversa-resultado {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

@media (max-width: 560px) {
  .modal__caixa--conversa { height: 88vh; }
  .fala__balao { max-width: 86%; }
}

/* Abas do "Conhecer este vinho". */
.abas {
  display: flex;
  gap: var(--e4);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--e6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aba {
  position: relative;
  padding-bottom: var(--e2);
  font-size: var(--t-pequeno);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
  transition: color var(--t-rapido) var(--curva);
}

.aba::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio) var(--curva);
}

.aba:hover { color: var(--texto-2); }
.aba.ativa { color: var(--dourado); }
.aba.ativa::after { transform: scaleX(1); }

.painel { display: none; }
.painel.ativo { display: grid; gap: var(--e2); animation: entrarPasso var(--t-medio) var(--curva); }

.painel__linha {
  padding-left: var(--e3);
  border-left: 1px solid var(--borda-dourada);
  font-size: var(--t-pequeno);
  line-height: 1.6;
  color: var(--texto-2);
}

/* ==========================================================================
   GAVETA — sacola
   ========================================================================== */

.gaveta { position: fixed; inset: 0; z-index: 220; pointer-events: none; }

.gaveta__veu {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--t-medio) var(--curva);
}

.gaveta__painel {
  position: absolute;
  top: 0; right: 0;
  width: min(460px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fundo-2);
  border-left: 1px solid var(--borda);
  transform: translateX(100%);
  transition: transform var(--t-medio) var(--curva);
}

.gaveta.aberta { pointer-events: auto; }
.gaveta.aberta .gaveta__veu { opacity: 1; }
.gaveta.aberta .gaveta__painel { transform: none; }

.gaveta__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.gaveta__lista { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--e3) var(--e4); }

.gaveta__rodape {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}

.item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--e3);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.item:last-child { border-bottom: 0; }

.item__mini {
  display: grid;
  place-items: center;
  height: 76px;
  background: var(--superficie);
  border-radius: 12px;
  overflow: hidden;
}

.item__mini svg { height: 62px; width: auto; }

.item__nome { font-size: var(--t-pequeno); font-weight: 500; line-height: 1.35; }
.item__meta { font-size: var(--t-caption); color: var(--texto-3); margin-top: 2px; }

.item__qtd { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e1); }

.item__qtd button {
  width: 26px; height: 26px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  color: var(--texto-2);
  font-size: var(--t-caption);
  display: grid;
  place-items: center;
  transition: border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}

.item__qtd button:hover { border-color: var(--dourado); color: var(--dourado); }
.item__qtd span { font-size: var(--t-pequeno); min-width: 18px; text-align: center; }

/* Abaixo de 26px o alvo de toque é pequeno demais pro dedo — a área
   clicável cresce por fora do botão sem alterar o desenho visual. */
@media (max-width: 768px) {
  .item__qtd button {
    position: relative;
    width: 30px;
    height: 30px;
  }
  .item__qtd button::before {
    content: '';
    position: absolute;
    inset: -7px;
  }
}

.item__preco { font-size: var(--t-pequeno); font-weight: 600; text-align: right; }

.item__remover {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-caption);
  color: var(--texto-3);
  text-align: right;
  transition: color var(--t-rapido) var(--curva);
}

.item__remover:hover { color: var(--dourado); }

.linha-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.linha-total__rotulo { font-size: var(--t-pequeno); color: var(--texto-2); }

.linha-total__valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-h4);
}

.linha-total--desconto .linha-total__valor { color: var(--dourado); font-size: var(--t-corpo); }

.vazio {
  padding-block: var(--e10);
  text-align: center;
  font-size: var(--t-pequeno);
  line-height: 1.7;
  color: var(--texto-3);
}

/* ==========================================================================
   BARRA DE COMPARAÇÃO
   ========================================================================== */

.comparar-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  padding-block: var(--e3);
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--borda);
  transform: translateY(100%);
  transition: transform var(--t-medio) var(--curva);
}

.comparar-barra.visivel { transform: none; }

.comparar-barra__grade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}

.comparar-barra__itens {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  font-size: var(--t-caption);
  color: var(--texto-3);
}

.comparar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 7px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  font-size: var(--t-caption);
  color: var(--texto-2);
}

.comparar-chip button {
  color: var(--texto-3);
  font-size: 1rem;
  line-height: 1;
  transition: color var(--t-rapido) var(--curva);
}

.comparar-chip button:hover { color: var(--dourado); }

.marcar-comparar {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin-top: var(--e2);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
  transition: color var(--t-rapido) var(--curva);
}

.marcar-comparar__caixa {
  width: 13px; height: 13px;
  border: 1px solid var(--borda-forte);
  border-radius: 3px;
  transition: background-color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}

.marcar-comparar:hover { color: var(--dourado); }
.marcar-comparar.marcada { color: var(--dourado); }
.marcar-comparar.marcada .marcar-comparar__caixa { background: var(--dourado); border-color: var(--dourado); }

.comparar-tabela { display: grid; gap: 0; }

.comparar-linha {
  display: grid;
  grid-template-columns: 168px 1fr 1fr;
  gap: var(--e3);
  padding-block: var(--e2);
  border-bottom: 1px solid var(--borda);
}

.comparar-celula { font-size: var(--t-pequeno); color: var(--texto-2); }

.comparar-celula--rotulo {
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.comparar-celula--cabeca {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-card);
  color: var(--texto);
}

.comparar-numero {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: 2px;
}

@media (max-width: 640px) {
  .comparar-linha { grid-template-columns: 1fr 1fr; }
  .comparar-celula--rotulo { grid-column: 1 / -1; padding-top: var(--e1); }
}

/* ==========================================================================
   NOTA — "Você sabia?" e recomendações
   ========================================================================== */

.nota {
  padding: var(--e4);
  background: var(--primaria-fundo);
  border: 1px solid rgba(199,169,107,0.18);
  border-radius: var(--r-card);
}

.nota__titulo {
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: var(--e1);
}

.nota__texto { font-size: var(--t-pequeno); line-height: 1.6; color: var(--texto-2); }

.motivos { display: grid; gap: var(--e2); }

.motivo {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--e2);
  align-items: start;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  color: var(--texto-2);
}

.motivo__marca { color: var(--dourado); margin-top: 3px; }
.motivo__marca svg { width: 14px; height: 14px; }

/* ==========================================================================
   SOMMELIÈRE — atalho flutuante para o Sommelier Digital
   ========================================================================== */

.sommeliere {
  position: fixed;
  right: var(--e6);
  bottom: var(--e6);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0;
}

.sommeliere__retrato {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border: 1px solid var(--borda-dourada);
  border-radius: var(--r-pilula);
  background:
    radial-gradient(circle at 34% 28%, rgba(199,169,107,0.14), transparent 62%),
    var(--superficie);
  color: var(--dourado);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition:
    transform var(--t-medio) var(--curva),
    border-color var(--t-medio) var(--curva);
}

.sommeliere__retrato svg { width: 78%; height: 78%; }

/* Com fotografia, o retrato preenche o círculo. */
.sommeliere__retrato--foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.sommeliere:hover .sommeliere__retrato {
  transform: scale(1.06);
  border-color: var(--dourado);
}

/* Halo que respira, para o atalho não passar despercebido. */
.sommeliere__aura {
  position: absolute;
  right: 0; bottom: 0;
  width: 72px; height: 72px;
  border-radius: var(--r-pilula);
  border: 1px solid var(--dourado);
  opacity: 0;
  animation: auraSommeliere 3.6s var(--curva) infinite;
  pointer-events: none;
}

@keyframes auraSommeliere {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Balão sempre visível, compacto: o convite precisa estar lá o tempo todo,
   senão quem não passa o mouse nunca descobre que ela existe. */
.sommeliere__balao {
  order: -1;
  display: grid;
  gap: 1px;
  padding: 10px 18px;
  text-align: right;
  white-space: nowrap;
  background: rgba(18, 18, 18, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  box-shadow: var(--sombra);
  transition:
    border-color var(--t-rapido) var(--curva),
    transform var(--t-rapido) var(--curva);
}

.sommeliere:hover .sommeliere__balao,
.sommeliere:focus-visible .sommeliere__balao {
  border-color: var(--borda-dourada);
  transform: translateX(-3px);
}

.sommeliere__titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texto);
}

.sommeliere__texto {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* Retrato com foto preenche o círculo inteiro. */
.sommeliere__retrato.tem-foto img,
.fala__retrato.tem-foto img,
.conversa-cabeca__retrato.tem-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.sommeliere__retrato.tem-foto,
.fala__retrato.tem-foto,
.conversa-cabeca__retrato.tem-foto { padding: 0; }

/* A barra de comparação sobe pela mesma borda: sai da frente. */
.comparar-barra.visivel ~ .sommeliere { bottom: 104px; }

@media (max-width: 768px) {
  .sommeliere { right: var(--e3); bottom: var(--e3); }
  .sommeliere__retrato { width: 60px; height: 60px; }
  .sommeliere__aura { width: 60px; height: 60px; }
  .sommeliere__balao { display: none; }
}

/* ==========================================================================
   AVISO FLUTUANTE
   ========================================================================== */

.aviso {
  position: fixed;
  left: 50%; bottom: var(--e6);
  z-index: 300;
  transform: translate(-50%, 20px);
  padding: 14px 28px;
  background: var(--superficie);
  border: 1px solid var(--borda-dourada);
  border-radius: var(--r-pilula);
  font-size: var(--t-pequeno);
  color: var(--texto);
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva);
}

.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   BLOCO DE CONTEÚDO
   ========================================================================== */

.bloco {
  display: grid;
  gap: var(--e3);
  padding-top: var(--e6);
  border-top: 1px solid var(--borda);
}

.bloco__titulo {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dourado);
}

.badges { display: flex; gap: var(--e1); flex-wrap: wrap; }

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
}

.ficha__item {
  display: flex;
  flex-direction: column;
  gap: var(--e05);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borda);
}

.ficha__rotulo {
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.ficha__valor { font-size: var(--t-pequeno); color: var(--texto); }

@media (min-width: 640px) { .ficha { column-gap: var(--e8); } }