:root {
  --asfalto: #16130F;
  --fumaca: #2A2520;
  --contorno: #0B0906;
  --ouro: #F5C518;
  --ouro-claro: #FFE88A;
  --ouro-escuro: #A9741A;
  --giz: #EDE7DC;
  --spray: #D9342B;

  /* Variacoes com alfa, escritas a mao: color-mix() so existe a partir do
     Safari 16.2, e o publico daqui usa celular antigo. */
  --giz-70: rgba(237, 231, 220, .72);
  --giz-55: rgba(237, 231, 220, .55);
  --giz-45: rgba(237, 231, 220, .58);
  --ouro-40: rgba(245, 197, 24, .62);

  --display: 'Bungee', 'Impact', sans-serif;
  --texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --dados: 'Space Mono', 'Courier New', monospace;

  --raio: 14px;
  --borda: 3px;
}

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

body {
  margin: 0;
  background: var(--asfalto);
  color: var(--giz);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* :focus primeiro, para navegador antigo ter anel de foco; :focus-visible
   depois, para quem tem suporte nao ver o anel ao clicar com o dedo. */
:focus {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
}

/* Letreiro: ouro solido com sombra dura, como as letras contornadas da logo.
   Gradiente em texto depende de background-clip, que falha silenciosamente
   deixando o texto invisivel — o degrade fica nas superficies cheias (.botao). */
.ouro-metal {
  color: var(--ouro);
  text-shadow: 3px 3px 0 var(--contorno);
}

/* Adesivo de vinil: borda dura, sombra solida, zero desfoque. */
.adesivo {
  border: var(--borda) solid var(--contorno);
  border-radius: var(--raio);
  box-shadow: 5px 5px 0 var(--contorno);
}

.capa {
  position: relative;
  padding: 32px 20px 44px;
  text-align: center;
  overflow: hidden;
}

.capa__fumaca {
  position: absolute;
  inset: -20% -30% auto;
  height: 90%;
  background: radial-gradient(60% 55% at 50% 40%, rgba(237, 231, 220, .16), transparent 70%);
  animation: deriva 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes deriva {
  from { transform: translate3d(-5%, 0, 0) scale(1); }
  to   { transform: translate3d(5%, -4%, 0) scale(1.12); }
}

.capa__logo {
  position: relative;
  width: min(74vw, 320px);
  height: auto;
  animation: queda .7s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes queda {
  from { transform: translateY(-28px) scale(.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.capa__titulo {
  position: relative;
  margin: 12px 0 14px;
  font-family: var(--display);
  font-size: clamp(30px, 8.5vw, 52px);
  line-height: 1.04;
  letter-spacing: .01em;
  animation: sobe .6s .2s ease-out both;
}

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

.capa__linha {
  position: relative;
  max-width: 30rem;
  margin: 0 auto 26px;
  color: var(--giz);
}

.capa__linha strong { color: var(--ouro); }

.botao {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(170deg, var(--ouro-claro), var(--ouro) 48%, var(--ouro-escuro));
  color: var(--contorno);
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform .12s ease, box-shadow .12s ease;
}

.botao:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--contorno);
}

.confianca {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 0;
  padding: 16px 20px;
  border-top: 2px solid var(--fumaca);
  border-bottom: 2px solid var(--fumaca);
  list-style: none;
  font-family: var(--dados);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ouro);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

.vitrine {
  display: grid;
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 18px 48px;
}

@media (min-width: 880px) {
  .vitrine { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.card {
  padding: 0 20px 22px;
  background: var(--fumaca);
  overflow: hidden;
}

.cena {
  /* O JS sobrescreve com a cor do sabor; o padrao mantem a cena valida sem ele. */
  --sabor: var(--ouro-escuro);
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 -20px 18px;
  padding: 26px 16px;
  min-height: 190px;
  background: var(--asfalto);
  border-bottom: var(--borda) solid var(--contorno);
  color: var(--sabor);
}

/* O brilho do sabor vive numa camada propria: alfa por opacity, sem color-mix. */
.cena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 48%, var(--sabor), transparent 72%);
  opacity: .5;
  transition: background .4s ease;
  pointer-events: none;
}

.cena__aparelho { position: relative; z-index: 1; width: min(74%, 230px); }
.cena__aparelho .simbolo { width: 100%; height: auto; }

/* Quando houver foto real, ela ocupa o mesmo lugar do desenho. */
.cena__foto { display: block; width: 100%; height: auto; }

.cena__frutas { position: absolute; z-index: 1; inset: 0; }

.cena__frutas .simbolo { width: 100%; height: 100%; }

.cena__fruta, .cena__gelo {
  position: absolute;
  display: block;
  width: 78px;
  height: 78px;
  animation: entra-fruta .45s ease-out both;
}

.cena__fruta--1 { top: 6px;    left: 8px;   transform: rotate(-12deg); }
.cena__fruta--2 { bottom: 6px; right: 10px; transform: rotate(11deg); width: 68px; height: 68px; }
.cena__gelo     { top: 12px;   right: 14px; width: 42px; height: 42px; opacity: .8; }

/* Com duas frutas o gelo desce para o canto livre, em vez de brigar com a fruta 2. */
.cena__fruta--2 ~ .cena__gelo { top: auto; bottom: 10px; left: 12px; right: auto; }

/* So opacidade: um scale aqui sobrescreveria o rotate de cada fruta,
   fazendo o desenho endireitar e saltar ao aparecer. */
@keyframes entra-fruta {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.card__nome {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 5.2vw, 26px);
  line-height: 1.15;
  color: var(--giz);
}

.card__caixa, .card__puffs {
  margin: 4px 0 0;
  font-family: var(--dados);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ouro);
}

.card__caixa { color: var(--giz-55); }

.card__chamada { margin: 12px 0 18px; font-size: 16px; }

.card__rotulo {
  margin: 0 0 10px;
  font-family: var(--dados);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--giz-55);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.chip {
  position: relative;
  padding: 9px 13px;
  max-width: 100%;
  background: transparent;
  border: 2px solid var(--ouro-40);
  border-radius: 999px;
  color: var(--giz);
  font-family: var(--texto);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}

.chip__nome { overflow-wrap: anywhere; }

.chip:hover:not([disabled]) { border-color: var(--ouro); }
.chip:active:not([disabled]) { transform: scale(.94); }

.chip[aria-pressed="true"] {
  background: linear-gradient(170deg, var(--ouro-claro), var(--ouro) 50%, var(--ouro-escuro));
  border-color: var(--contorno);
  color: var(--contorno);
  font-weight: 800;
}

/* Sem opacity: ela apagaria junto o carimbo ESGOTADO, que precisa ser lido.
   O chip recua pela cor, nao pela transparencia. */
.chip--esgotado {
  border-color: var(--giz-45);
  color: var(--giz-70);
  cursor: not-allowed;
}

.chip--esgotado .chip__nome { text-decoration: line-through; }
.chip--esgotado:hover { border-color: var(--giz-45); }

.chip__selo {
  display: block;
  margin-top: 2px;
  font-family: var(--dados);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.chip__selo--ultimo, .chip__selo--poucos { color: var(--ouro); }
.chip[aria-pressed="true"] .chip__selo { color: var(--contorno); }
.chip__selo--esgotado { color: var(--spray); }

.card__precos { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }

.card__de {
  font-family: var(--dados);
  font-size: 15px;
  color: var(--giz-45);
  text-decoration: line-through;
}

.card__por { font-size: 38px; font-weight: 800; line-height: 1; }

.card__botao { display: block; text-align: center; }

.secao__titulo {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.12;
}

.passos, .duvidas, .fecho {
  max-width: 44rem;
  margin: 0 auto;
  padding: 36px 20px;
}

.passos__lista {
  margin: 0;
  padding-left: 1.3em;
  font-size: 18px;
}

.passos__lista li { margin-bottom: 8px; }
.passos__lista strong { color: var(--ouro); }

.duvidas__lista { margin: 0; }

.duvidas__lista dt {
  margin-top: 18px;
  font-weight: 800;
  color: var(--ouro);
}

.duvidas__lista dd {
  margin: 4px 0 0;
  color: var(--giz-70);
}

.fecho { text-align: center; }

.lista-sabores { padding-left: 1.2em; }
.lista-sabores a { color: var(--ouro); }
.lista-sabores s { color: var(--giz-45); }

.rodape {
  padding: 30px 20px calc(96px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--fumaca);
  text-align: center;
}

.rodape__insta {
  font-family: var(--dados);
  font-weight: 700;
  color: var(--ouro);
  text-decoration: none;
}

.rodape__aviso {
  max-width: 34rem;
  margin: 12px auto 0;
  font-size: 13px;
  color: var(--giz-55);
}

.flutuante {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 20;
  padding: 13px 20px;
  background: linear-gradient(170deg, var(--ouro-claro), var(--ouro) 48%, var(--ouro-escuro));
  border: var(--borda) solid var(--contorno);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--contorno);
  color: var(--contorno);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}

@media (min-width: 880px) { .flutuante { display: none; } }

/* Com foto real a cena vira a propria foto: sem brilho por baixo e sem margem,
   porque a imagem ja traz a cor e as frutas do sabor. */
.cena--foto { padding: 0; }
.cena--foto::before { display: none; }
.cena--foto .cena__aparelho { width: 100%; }

.cena__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 38%;
}

/* Aviso do topo: a primeira coisa que a pessoa le, antes mesmo da logo.
   So existe quando LOJA.aviso tem texto. */
.aviso {
  padding: 11px 18px;
  background: linear-gradient(170deg, var(--ouro-claro), var(--ouro) 48%, var(--ouro-escuro));
  border-bottom: var(--borda) solid var(--contorno);
  color: var(--contorno);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}