/* =====================================================================
   IPODS — vitrine (Início + Loja)
   ===================================================================== */

:root { --largura: 1240px; --calha: clamp(16px, 4vw, 40px); --topo-h: 76px; }

.view { animation: viewEntra .45s var(--ease); }
@keyframes viewEntra { from { opacity: 0; transform: translateY(10px); } }

.rotulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fumaca);
}
.rotulo::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--degrade-texto); }
.rotulo.claro { color: var(--fumaca-2); }

/* ================= topo: cápsula flutuante ================= */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: calc(12px + var(--topo-seguro)) var(--calha) 0;
  pointer-events: none;
}
.topo-capsula {
  pointer-events: auto;
  max-width: var(--largura); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: inset 0 0 0 1px rgba(220, 230, 236, .9), 0 10px 30px -18px rgba(6, 34, 43, .35);
  transition: box-shadow .3s;
}
.topo .marca { margin-right: auto; }
/* no cabeçalho só a logo completa, sem o ícone ao lado */
.topo .marca { padding-left: 10px; }
.topo .marca-logo { height: 26px; }

.topo-abas { position: relative; display: flex; padding: 4px; border-radius: 999px; background: var(--nevoa); }
.aba {
  position: relative; z-index: 1;
  min-width: 92px; padding: 9px 18px; border-radius: 999px; text-align: center;
  font-size: .88rem; font-weight: 700; color: var(--texto-2);
  transition: color .25s;
}
.aba.is-on { color: #fff; }
.aba-bolha {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 92px; border-radius: 999px;
  background: var(--petroleo-2);
  transition: transform .4s var(--ease), width .4s var(--ease);
}
.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topo-zap svg { width: 17px; height: 17px; }

/* ================= INÍCIO ================= */
.hero {
  max-width: var(--largura); margin: 0 auto;
  padding: calc(var(--topo-h) + 44px + var(--topo-seguro)) var(--calha) 56px;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
}
.hero-titulo {
  margin: 20px 0 18px;
  font-size: clamp(2.3rem, 5.2vw, 4.3rem); font-weight: 600; line-height: 1.02; letter-spacing: -.035em;
}
.hero-titulo span { display: block; }
.hero-sub { max-width: 30em; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--texto-2); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.hero-palco {
  position: relative; aspect-ratio: 1 / 1.02; max-height: 620px;
  border-radius: var(--r-xl);
  background: var(--degrade);
  overflow: hidden; isolation: isolate;
  box-shadow: var(--sombra-3);
}
.hero-palco .fumaca i { opacity: .5; }
.hero-orbitas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; stroke-dasharray: 2 6;
  animation: gira 90s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.hero-pods {
  position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 292 / 312;
  transform: translate(-50%, -50%);
  animation: flutua 6s ease-in-out infinite;
}
.hero-pods svg { width: 100%; height: 100%; overflow: visible; }
@keyframes flutua {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-50%, -54%) rotate(2deg); }
}
.hero-flutua {
  position: absolute; z-index: 2;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
.hero-flutua:empty { display: none; }
.hero-flutua-a {
  left: 5%; bottom: 6%; width: min(270px, 62%);
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  animation: flutuaB 7s ease-in-out infinite;
  cursor: pointer;
}
.hero-flutua-a .hf-foto { width: 58px; height: 58px; border-radius: 14px; background: var(--degrade-claro); overflow: hidden; flex: none; display: grid; place-items: center; }
.hero-flutua-a .hf-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero-flutua-a small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mar); }
.hero-flutua-a b { display: block; font-size: .9rem; line-height: 1.25; }
.hero-flutua-a em { font-style: normal; font-weight: 800; font-size: .92rem; color: var(--petroleo); }
.hero-flutua-a em s { font-weight: 600; color: var(--texto-3); font-size: .78rem; margin-right: 4px; }
.hero-flutua-b {
  right: 5%; top: 7%; padding: 10px 12px;
  animation: flutuaB 8s ease-in-out -3s infinite;
}
.hero-flutua-b small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fumaca); margin-bottom: 5px; }
.hero-flutua-b .hf-sabores { display: flex; }
.hero-flutua-b .hf-sabores span {
  width: 28px; height: 28px; border-radius: 50%; margin-left: -5px;
  display: grid; place-items: center;
  color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 8px -4px rgba(6, 34, 43, .35);
}
.hero-flutua-b .hf-sabores span:nth-child(1) { background: var(--petroleo-2); }
.hero-flutua-b .hf-sabores span:nth-child(2) { background: var(--petroleo); }
.hero-flutua-b .hf-sabores span:nth-child(3) { background: var(--mar); }
.hero-flutua-b .hf-sabores span:nth-child(4) { background: #3F7189; }
.hero-flutua-b .hf-sabores .ico { width: 16px; height: 16px; stroke-width: 1.8; }
.hero-flutua-b .hf-sabores span:first-child { margin-left: 0; }
.hero-flutua-b b { display: block; margin-top: 5px; font-size: .78rem; }
@keyframes flutuaB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- faixa ---- */
.faixa {
  overflow: hidden; background: var(--petroleo-2); color: #fff;
  padding: 16px 0; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa-trilho { display: inline-flex; animation: rola 36s linear infinite; }
.faixa-trilho span {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--f-display); font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 500; letter-spacing: .01em;
}
.faixa-trilho span::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brilho), var(--fumaca-2));
}
@keyframes rola { to { transform: translateX(-50%); } }

/* ---- blocos ---- */
.bloco { max-width: var(--largura); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--calha) 0; }
.bloco-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.bloco-topo h2 { margin-top: 10px; font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; }
.bloco-nota { color: var(--texto-3); font-size: .9rem; font-weight: 500; }
.seta-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: .9rem; color: var(--petroleo);
  padding: 10px 16px; border-radius: 999px; background: var(--gelo-2);
  transition: background .2s;
}
.seta-link:hover { background: var(--gelo); }
.seta-link .ico { width: 16px; height: 16px; }

/* ---- bento de promoções ---- */
.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
}
.bento-item {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-l);
  background: var(--nevoa); box-shadow: inset 0 0 0 1px var(--linha-2);
  display: flex; flex-direction: column; text-align: left;
  padding: 16px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.bento-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
/* a foto ocupa o que sobra sem empurrar o texto: fica presa na caixa */
.bento-foto { flex: 1; min-height: 0; position: relative; margin-bottom: 10px; }
.bento-foto img, .bento-foto .pod-ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease);
}
.bento-item:hover .bento-foto img { transform: scale(1.06) rotate(-2deg); }
.bento-off {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 6px 11px; border-radius: 999px;
  background: var(--zap); color: #fff; font-weight: 800; font-size: .8rem;
}
.bento-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.bento-info small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fumaca); }
.bento-info b { display: block; font-size: .98rem; line-height: 1.2; }
.bento-preco { text-align: right; white-space: nowrap; }
.bento-preco s { display: block; font-size: .78rem; color: var(--texto-3); }
.bento-preco strong { font-size: 1.05rem; color: var(--petroleo); }

.bento-item.grande { grid-column: span 2; grid-row: span 2; padding: 26px; background: var(--degrade); color: #fff; box-shadow: none; }
.bento-item.grande .fumaca i { opacity: .45; }
/* o disco é medido pela altura: assim ele continua redondo em qualquer largura */
.bento-item.grande .bento-foto { margin: 6px 0 14px; }
.bento-item.grande .bento-foto::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  aspect-ratio: 1; max-width: 100%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--gelo) 70%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.bento-item.grande .bento-foto img, .bento-item.grande .bento-foto .pod-ph { inset: 12% 0; height: 76%; }
.bento-item.grande .bento-off { top: 22px; right: 22px; background: var(--zap); color: #fff; font-size: .95rem; padding: 8px 14px; }
.bento-item.grande .bento-info small { color: var(--gelo); }
.bento-item.grande .bento-info b { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -.02em; }
.bento-item.grande .bento-preco s { color: var(--fumaca-2); }
.bento-item.grande .bento-preco strong { color: #fff; font-size: 1.5rem; font-family: var(--f-display); font-weight: 600; }
.bento-item.w2 { grid-column: span 2; }
.bento-item.w4 { grid-column: span 4; }
.bento-item.h2 { grid-row: span 2; }
.bento-item.largo { flex-direction: row; align-items: center; gap: 16px; }
.bento-item.largo .bento-foto { flex: 0 0 44%; height: 100%; margin: 0; }
.bento-item.largo .bento-info { flex: 1; flex-direction: column; align-items: flex-start; }
.bento-item.largo .bento-preco { text-align: left; }
.bento-vazio { grid-column: 1 / -1; }
.bento { position: relative; }
.bento-pontos { display: none; justify-content: center; gap: 6px; margin-top: 12px; }
.bento-pontos button { width: 8px; height: 8px; border-radius: 999px; background: var(--linha); transition: width .35s var(--ease), background .35s; }
.bento-pontos button.is-on { width: 24px; background: var(--petroleo); }

/* ---- vantagens ---- */
.vantagens {
  position: relative; overflow: hidden; isolation: isolate;
  margin: clamp(56px, 8vw, 96px) var(--calha);
  border-radius: var(--r-xl);
  background: var(--degrade); color: #fff;
}
.vantagens-in {
  position: relative; max-width: var(--largura); margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(22px, 5vw, 64px);
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start;
}
.vantagens h2 { margin-top: 12px; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -.035em; }
.vantagens h2 span { color: var(--brilho); }
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; counter-reset: perk; }
.perks li {
  counter-increment: perk;
  position: relative; padding: 22px; border-radius: var(--r-l);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 14px;
}
.perks li::after {
  content: '0' counter(perk);
  position: absolute; top: 20px; right: 22px;
  font-family: var(--f-display); font-size: .8rem; color: rgba(255, 255, 255, .4);
}
.perk-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: var(--brilho); }
.perks h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.perks p { font-size: .9rem; color: var(--gelo); opacity: .9; }

/* ================= LOJA ================= */
.loja-topo {
  max-width: var(--largura); margin: 0 auto;
  padding: calc(var(--topo-h) + 40px + var(--topo-seguro)) var(--calha) 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.loja-titulo h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; margin: 8px 0 6px; }
.loja-titulo p { color: var(--texto-2); font-weight: 500; }
.loja-busca { display: flex; gap: 10px; flex: 1; max-width: 640px; min-width: min(100%, 320px); }
.busca {
  flex: 1; position: relative; display: flex; align-items: center;
}
.busca .ico { position: absolute; left: 16px; width: 19px; height: 19px; color: var(--fumaca); pointer-events: none; }
.busca input { min-height: 50px !important; padding-left: 46px !important; padding-right: 42px !important; border-radius: 999px !important; background: var(--nevoa) !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--linha-2); }
.busca input:focus { background: #fff !important; border-color: var(--mar) !important; }
.busca-limpa { position: absolute; right: 8px; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; color: var(--texto-2); background: var(--linha-2); }
.filtros-btn { display: inline-flex; min-height: 50px; position: relative; }
.fcount { min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px; display: grid; place-items: center; background: var(--petroleo); color: #fff; font-size: .7rem; }
.ordem { width: auto !important; min-height: 50px !important; border-radius: 999px !important; font-weight: 700 !important; font-size: .88rem !important; background-color: var(--nevoa) !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--linha-2); padding-left: 18px !important; }

.loja-corpo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--calha) 80px; }

/* Filtros moram atrás do botão ao lado da busca, em qualquer tela: no PC
   abrem numa gaveta pela direita, no celular numa folha que sobe. A grade
   de produtos fica com a largura inteira. */
.filtros {
  position: fixed; z-index: 80; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  display: flex; flex-direction: column;
  padding: 26px 24px 20px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; box-shadow: var(--sombra-3);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  transform: translateX(105%); transition: transform .4s var(--ease);
}
.filtros.is-open { transform: none; }
.filtros-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.filtros-topo h3 { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; margin-right: auto; }
.filtros-limpa { font-size: .8rem; font-weight: 800; color: var(--mar); }
.filtros-fecha { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--nevoa); font-size: 1.3rem; }
.filtros-fecha:hover { background: var(--gelo-2); }
.filtros-ver { display: flex; margin-top: auto; position: sticky; bottom: 0; }
.filtros #chipGroups { margin-bottom: 16px; }
.filtros-veu { position: fixed; inset: 0; z-index: 79; background: rgba(6, 34, 43, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fundoEntra .25s var(--ease); }
.grupo { padding: 14px 0; border-top: 1px solid var(--linha); }
.grupo:first-child { border-top: 0; }
.grupo h4 { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--texto-2);
  background: #fff; box-shadow: inset 0 0 0 1px var(--linha);
  transition: all .18s;
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--fumaca-2); color: var(--petroleo); }
.chip.is-on { background: var(--petroleo-2); color: #fff; box-shadow: none; }
.chip-mais { background: transparent; box-shadow: none; color: var(--mar); }

.ativos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ativo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 14px; border-radius: 999px; background: var(--gelo-2); color: var(--petroleo); font-size: .8rem; font-weight: 700; }
.ativo i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-style: normal; font-size: .9rem; }
.ativo.limpa { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); padding-right: 14px; }

.trilho-bloco + .trilho-bloco { margin-top: 44px; }
.trilho-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.trilho-topo h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 600; letter-spacing: -.02em; }
.contagem { font-size: .84rem; font-weight: 700; color: var(--texto-3); }
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin-bottom: -10px; scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho .pc { scroll-snap-align: start; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vazio-loja { text-align: center; padding: 50px 20px; color: var(--texto-2); font-weight: 600; }
.vazio-loja .logo-selo.grande { width: 84px; height: 84px; margin: 0 auto 14px; object-fit: cover; }
.vazio-loja p { margin-bottom: 16px; }
/* sem isto a coluna cresce até a largura dos trilhos e estoura a página */
.loja-lista { min-width: 0; }

/* ---- cartão de produto ---- */
.pc {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-l); background: #fff;
  box-shadow: inset 0 0 0 1px var(--linha-2);
  padding: 8px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  animation: pcEntra .5s var(--ease) both;
}
@keyframes pcEntra { from { opacity: 0; transform: translateY(12px); } }
.pc:hover { box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-2); transform: translateY(-3px); }
.pc-foto {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: calc(var(--r-l) - 8px);
  background: var(--degrade-claro);
  display: grid; place-items: center; overflow: hidden;
}
.pc-foto img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
.pc:hover .pc-foto img { transform: scale(1.06) translateY(-2px); }
.pc-selos { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; }
.selo { padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; background: #fff; color: var(--petroleo); box-shadow: var(--sombra-1); }
.selo-off { background: var(--petroleo-2); color: #fff; }
.selo-novo { background: var(--brilho); color: var(--petroleo-2); }
.selo-fora { background: var(--texto-2); color: #fff; }
.pc-puffs {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .72rem; font-weight: 800; color: var(--petroleo);
}
.pc-puffs .ico { width: 14px; height: 14px; }
.pc-info { padding: 12px 8px 6px; display: flex; flex-direction: column; flex: 1; }
.pc-marca { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fumaca); }
.pc-nome { font-size: 1rem; font-weight: 800; line-height: 1.25; margin: 3px 0 8px; cursor: pointer; }
.pc-sabores { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; min-width: 0; }
.pc-sabor { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--texto-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-sabor i { width: 8px; height: 8px; border-radius: 50%; background: var(--degrade-texto); flex: none; }
.pc-mais { font-size: .72rem; font-weight: 800; color: var(--mar); background: var(--gelo-2); border-radius: 999px; padding: 2px 7px; flex: none; }
.pc-sabor em { font-style: normal; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* no PC: um sabor e o +N; o segundo sabor e o contador do celular ficam guardados */
.pc-sabor-2, .pc-mais-cel { display: none; }
.pc-pe { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-preco s { display: block; font-size: .76rem; color: var(--texto-3); font-weight: 600; }
.pc-preco b { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; color: var(--petroleo-2); }
.pc-zap {
  height: 40px; padding: 0 14px 0 11px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--zap); color: #fff; font-weight: 800; font-size: .84rem;
  box-shadow: 0 8px 18px -10px rgba(31, 174, 99, .8);
  transition: transform .25s var(--ease), background .25s;
}
.pc-zap svg { width: 17px; height: 17px; }
.pc-zap:hover { background: var(--zap-2); transform: translateY(-1px); }
.pc-zap.off { background: var(--linha-2); color: var(--texto-3); box-shadow: none; font-size: .76rem; padding: 0 12px; }
.pc.is-fora .pc-foto { filter: grayscale(.7); opacity: .7; }

/* ---- ficha do produto (gaveta) ---- */
.modal-prod { display: flex; flex-direction: column; }
.ficha-prod { display: flex; flex-direction: column; min-height: 100%; }
.fp-palco {
  position: relative; overflow: hidden; isolation: isolate;
  height: min(46vh, 420px); flex: none;
  background: var(--degrade-claro);
  display: grid; place-items: center;
}
.fp-palco .fumaca i { opacity: .7; }
.fp-marca {
  position: absolute; top: 22px; left: 24px; z-index: 2;
  font-family: var(--f-display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--petroleo);
}
.fp-foto { width: 64%; height: 82%; display: grid; place-items: center; }
.fp-foto img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; animation: flutuaB 6s ease-in-out infinite; }
.fp-corpo { padding: 24px 26px 18px; flex: 1; }
.fp-nome { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.03em; }
.fp-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fp-specs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--nevoa); font-size: .78rem; font-weight: 700; color: var(--texto-2); }
.fp-specs .ico { width: 15px; height: 15px; color: var(--mar); }
.fp-desc { margin-top: 16px; color: var(--texto-2); font-size: .95rem; }
.fp-sabores { margin-top: 22px; }
.fp-sabores h4 { font-size: .86rem; font-weight: 800; margin-bottom: 10px; display: flex; justify-content: space-between; }
.fp-sabores h4 small { font-weight: 600; color: var(--texto-3); }
.sabores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sabor {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-radius: var(--r-s); text-align: left;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--linha);
  font-size: .88rem; font-weight: 700;
  transition: all .18s;
}
.sabor:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--fumaca-2); }
.sabor em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--mar); }
.sabor.is-on { background: var(--petroleo-2); color: #fff; box-shadow: none; }
.sabor.is-on em { color: var(--brilho); }
.sabor.fora { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.sabor.fora em { color: var(--texto-3); text-decoration: none; }
.fp-pe {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px calc(16px + var(--pe-seguro));
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha-2);
}
.fp-pe .btn { flex: 1; }
.fp-pe .btn svg { width: 20px; height: 20px; }
.fp-preco span { display: block; font-size: .76rem; font-weight: 700; color: var(--texto-3); white-space: nowrap; }
.fp-preco b { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; color: var(--petroleo-2); white-space: nowrap; }
.fp-preco b.apagado { color: var(--texto-3); font-size: 1.1rem; }
/* o botão pode encolher até caber ao lado do preço; nunca passa da borda */
.fp-pe .btn { min-width: 0; }
/* celular estreito: preço e "Fechar pedido" lado a lado, um pouco mais
   compactos pra caberem inteiros na mesma linha */
@media (max-width: 420px) {
  .fp-pe { gap: 10px; padding: 14px 16px calc(14px + var(--pe-seguro)); }
  .fp-preco { flex: none; }
  .fp-preco span { font-size: .7rem; }
  .fp-preco b { font-size: 1.2rem; }
  .fp-pe .btn { padding: 0 14px; }
}

/* ================= rodapé ================= */
.rodape { background: var(--nevoa); border-top: 1px solid var(--linha-2); }
.rodape-in {
  max-width: var(--largura); margin: 0 auto; padding: 48px var(--calha) 28px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px;
}
.rodape-marca p { margin-top: 12px; color: var(--texto-2); max-width: 26em; font-size: .92rem; }
.rodape-links { display: flex; flex-direction: column; gap: 8px; }
.rodape-links h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 4px; }
.rodape-links a { font-weight: 700; color: var(--texto-2); font-size: .92rem; }
.rodape-links a:hover { color: var(--petroleo); }
.rodape-legal {
  max-width: var(--largura); margin: 0 auto; padding: 18px var(--calha) 30px;
  border-top: 1px solid var(--linha); font-size: .8rem; color: var(--texto-3);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.rodape-legal p:first-child { max-width: 60em; }
.rodape-legal b { color: var(--texto-2); }

/* ================= doca (celular) ================= */
.doca { display: none; }

/* ================= responsivo ================= */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item.w4 { grid-column: span 2; }
  .vantagens-in { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* no celular a gaveta vira folha que sobe da base */
  .filtros {
    left: 0; right: 0; top: auto; width: auto; max-height: 82dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 22px 20px calc(18px + var(--pe-seguro));
    transform: translateY(105%);
  }
  .filtros.is-open { transform: none; }
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--topo-h) + 26px + var(--topo-seguro)); }
  .hero-palco { order: -1; aspect-ratio: 1.1 / 1; max-height: 460px; }
}

@media (max-width: 760px) {
  :root { --topo-h: 60px; }
  body { padding-bottom: calc(76px + var(--pe-seguro)); }
  .topo { padding-top: calc(10px + var(--topo-seguro)); }
  /* no celular a cápsula é só a logo, no centro: o WhatsApp já mora na ilha de baixo */
  .topo-capsula { padding: 6px; min-height: 52px; justify-content: center; }
  .topo-abas, .topo-acoes { display: none; }
  .topo .marca { margin: 0 auto; padding-left: 0; }
  .topo .marca-logo { height: 23px; }

  .hero { padding-bottom: 36px; gap: 26px; }
  .hero-palco { aspect-ratio: 1 / .92; }
  .hero-flutua-b { display: none; }
  /* os pods sobem um pouco pra o cartão da promoção não cobrir a base deles */
  .hero-pods { top: 41%; width: 60%; }
  .hero-flutua-a { padding: 8px 12px 8px 8px; gap: 10px; }
  .hero-flutua-a .hf-foto { width: 46px; height: 46px; border-radius: 12px; }
  .hero-flutua-a b { font-size: .84rem; }
  .hero-flutua-a { left: 4%; bottom: 5%; width: auto; max-width: 78%; }
  .hero-ctas .btn { flex: 1; }

  /* no celular as promoções viram carrossel: um card por vez, centrado,
     o vizinho espiando dos lados e o da vez em destaque */
  .bento {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 calc(var(--calha) * -1); padding: 6px 8% 10px; scroll-padding: 0 8%;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento-item {
    flex: 0 0 84%; height: 340px; scroll-snap-align: center; scroll-snap-stop: always;
    transform: scale(.9); opacity: .5;
    transition: transform .5s var(--ease), opacity .5s var(--ease), box-shadow .3s;
  }
  .bento-item.is-ativo { transform: none; opacity: 1; }
  .bento-item:hover { transform: scale(.9); box-shadow: inset 0 0 0 1px var(--linha-2); }
  .bento-item.is-ativo:hover { transform: none; }
  .bento-item.grande:hover { box-shadow: none; }
  .bento-item.largo { flex-direction: column; align-items: stretch; }
  .bento-item.largo .bento-foto { flex: 1; margin-bottom: 10px; }
  .bento-item.largo .bento-info { flex-direction: row; align-items: flex-end; }
  .bento-item.largo .bento-preco { text-align: right; }
  .bento-pontos { display: flex; }

  .perks { grid-template-columns: 1fr; }

  .loja-busca { min-width: 100%; flex-wrap: wrap; }
  .busca { flex: 1 1 100%; }
  .filtros-btn, .ordem { flex: 1; }
  /* duas colunas travadas no mesmo tamanho dos trilhos: "1fr" sozinho deixava
     o conteúdo de um card alargar a coluna, e a foto crescia junto */
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--calha); }
  .grade .pc { min-width: 0; }
  /* dois cards inteiros por tela, do tamanho da grade: nenhum fica cortado na borda */
  .trilho { grid-auto-columns: calc((100% - var(--calha)) / 2); gap: var(--calha); margin: 0 calc(var(--calha) * -1); padding-left: var(--calha); padding-right: var(--calha); scroll-padding: 0 var(--calha); }
  .trilho .pc { scroll-snap-stop: always; }
  .pc { padding: 6px; border-radius: 22px; }
  .pc-info { padding: 10px 6px 4px; }
  .pc-nome { font-size: .9rem; }
  .pc-preco b { font-size: 1rem; }
  .pc-pe { flex-direction: column; align-items: stretch; gap: 8px; }
  .pc-zap { height: 38px; width: 100%; }
  .pc-sabor { font-size: .74rem; }
  /* no celular: dois sabores, um por linha; o +N fecha a segunda linha */
  .pc-sabores { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: center; }
  .pc-sabor { display: flex; }
  .pc-sabores > .pc-sabor:first-child { grid-column: 1 / -1; }
  .pc-sabor-2 { display: flex; }
  .pc-mais-pc { display: none; }
  .pc-mais-cel { display: inline-block; justify-self: end; }

  .sabores { grid-template-columns: 1fr; }
  .fp-palco { height: 38vh; }
  .fp-corpo { padding: 20px 20px 12px; }

  .rodape-in { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }

  /* Cápsula pequena e centrada, no alcance do polegar. Todas as abas
     mostram ícone e nome, sempre; a ativa ganha a pílula clara. O WhatsApp
     é sempre verde. */
  .doca {
    display: flex; align-items: center; gap: 4px; position: fixed; z-index: 60;
    left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--pe-seguro));
    width: max-content; max-width: calc(100% - 28px);
    padding: 5px; border-radius: 999px;
    background: linear-gradient(160deg, rgba(14, 74, 92, .94), rgba(6, 34, 43, .96));
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06),
      0 16px 34px -14px rgba(6, 34, 43, .65);
  }
  .doca-item {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 15px 0 13px; border-radius: 999px;
    color: var(--fumaca-2); font-size: .8rem; font-weight: 800; white-space: nowrap;
    transition: background .3s var(--ease), color .3s;
  }
  .doca-item .ico, .doca-item svg { width: 20px; height: 20px; flex: none; }
  .doca-item.is-on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
  .doca-item.is-on .ico { color: var(--brilho); }
  .doca-zap {
    padding: 0 16px 0 13px; margin-left: 2px;
    background: var(--zap); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px rgba(31, 174, 99, .8);
  }
  .doca-item:active { transform: scale(.96); }
}
/* celular estreito: as três abas com nome continuam cabendo numa linha */
@media (max-width: 360px) {
  .doca-item { gap: 5px; padding: 0 11px 0 10px; font-size: .74rem; }
  .doca-zap { padding: 0 13px 0 11px; }
  .doca-item .ico, .doca-item svg { width: 18px; height: 18px; }
}

@media (max-width: 380px) {
  .hero-titulo { font-size: 2.05rem; }
}

/* ================= hero no celular: tudo azul, anéis e pods grandes =================
   No celular a hero deixa de ser texto + cartão e vira um palco só: a seção
   inteira é o degradê azul, os anéis se espalham a partir dos pods e o
   texto vem claro por cima. */
@media (max-width: 760px) {
  .hero {
    position: relative; overflow: hidden; isolation: isolate;
    max-width: none;
    padding: calc(var(--topo-h) + 26px + var(--topo-seguro)) var(--calha) 30px;
    /* mais fundo que o degradê do desktop: o texto claro precisa de contraste até embaixo */
    background: linear-gradient(170deg, #06222B 0%, #0A3441 30%, #0E4A5C 62%, #1F6480 100%); color: #fff;
    border-radius: 0 0 36px 36px;
    gap: 22px;
  }
  /* anéis concêntricos saindo do centro dos pods, cada vez mais apagados */
  .hero::before {
    content: ''; position: absolute; z-index: -1;
    left: 50%; top: calc(var(--topo-h) + 26px + 44vw); width: 170vw; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle, rgba(124, 211, 240, .28) 0, rgba(124, 211, 240, 0) 38%),
      repeating-radial-gradient(circle, rgba(255, 255, 255, .11) 0 1.2px, transparent 1.2px 30px);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
            mask-image: radial-gradient(circle, #000 18%, transparent 62%);
    animation: pulsaAneis 9s ease-in-out infinite;
  }
  @keyframes pulsaAneis { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }

  .hero-palco {
    order: -1; aspect-ratio: 1 / 1.02; max-height: none;
    background: none; box-shadow: none; border-radius: 0; overflow: visible;
  }
  .hero-palco .fumaca { overflow: visible; }
  .hero-orbitas { stroke: rgba(255, 255, 255, .2); }
  .hero-pods { top: 50%; width: 94%; }
  /* no celular a hero é só pods e texto: sem cartão de promoção */
  .hero-flutua-a { display: none !important; }
  .hero-titulo { margin-top: 0; }
  .hero-flutua-a {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    background: rgba(255, 255, 255, .94); animation: none; color: var(--texto);
  }

  .hero-titulo { color: #fff; margin-top: 16px; }
  .hero .grad-txt { background-image: linear-gradient(100deg, #7CD3F0 0%, #CFE2EC 100%); }
  .hero-sub { color: var(--gelo); }

  .faixa { margin-top: 18px; }
}

/* ================= hero: um botão só, branco com aro de luz =================
   O pedido pelo WhatsApp sai da hero (ele já mora no topo e na doca). O
   "Conferir a loja" é uma placa branca com um aro de luz que gira devagar
   em volta, nos azuis da marca, e um halo ciano que respira. A seta fica
   num quadradinho petróleo. O aro é um degradê cônico por baixo da placa
   branca: só a borda de 2px aparece. Igual no PC e no celular. */
@property --aro {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.hero-ctas .btn-vidro {
  position: relative; isolation: isolate;
  min-width: 300px; min-height: 60px; padding: 0 8px 0 24px; justify-content: space-between; gap: 18px;
  border-radius: 20px;
  color: var(--abismo); font-size: 1.02rem; font-weight: 800; letter-spacing: .01em;
  background: transparent;
  animation: aro-halo 3.2s ease-in-out infinite;
}
/* o aro: gira por baixo de tudo */
.hero-ctas .btn-vidro::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--aro), #7CD3F0, #FFFFFF 18%, #3F7189 34%, #7CD3F0 52%, #FFFFFF 68%, #1F6480 84%, #7CD3F0);
  animation: aro-gira 4s linear infinite;
}
/* a placa branca, 2px pra dentro: deixa só a borda do aro à mostra */
.hero-ctas .btn-vidro::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: 18px; pointer-events: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #EAF4F9 100%);
  box-shadow: inset 0 -6px 14px -8px rgba(14, 74, 92, .18);
}
.hero-ctas .btn-vidro .vidro-seta {
  display: inline-flex; width: 44px; height: 44px; border-radius: 14px; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #1F6480, #0A3441);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(10, 52, 65, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--ease);
}
.hero-ctas .btn-vidro:hover { box-shadow: none; }
.hero-ctas .btn-vidro:hover .vidro-seta { transform: translateX(3px); }
.hero-ctas .btn-vidro:active { transform: scale(.98); }
.hero-ctas .btn-vidro:active .vidro-seta { transform: translateX(3px); }
@keyframes aro-gira { to { --aro: 360deg; } }
@keyframes aro-halo {
  0%, 100% { box-shadow: 0 10px 28px -12px rgba(3, 20, 26, .45), 0 0 0 0 rgba(124, 211, 240, 0); }
  50%      { box-shadow: 0 10px 28px -12px rgba(3, 20, 26, .45), 0 0 22px 2px rgba(124, 211, 240, .45); }
}
@media (max-width: 760px) {
  .hero-ctas .btn-vidro { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn-vidro, .hero-ctas .btn-vidro::before { animation: none; }
}