/* ============================================================================
   INFINITY PRIME — SISTEMA VISUAL v4 · ESCURO NA GRAMÁTICA APPLE
   ----------------------------------------------------------------------------
   O dono viu as duas versões e escolheu com precisão: o TOM da v2 (escuro,
   dourado) com a DISCIPLINA da v3 (Apple). Não é contradição — é exatamente
   o que a própria Apple faz nas páginas Pro: fundo preto, tipografia central
   gigante, UMA cor de acento, produto no palco. A v4 é essa fusão.

   O que define esta versão:
     1. ESCURO COMO PRINCIPAL: #0a0a0c de página, #141519 de cartão, preto
        puro nos capítulos. O dourado (#d8b26a) é o ÚNICO acento — botão,
        link, eyebrow. O azul morreu; o verde só existe no Pix; o laranja
        só em alerta de escassez.
     2. ZERO EMOJI. Tudo que era emoji virou ícone de linha em SVG, desenhado
        no mesmo traço (1.6px). Emoji renderiza diferente em cada aparelho e
        entrega "cara de anos 2000"; ícone de linha renderiza idêntico em
        tudo — é isso que o dono chamou de "renderizado 100%".
     3. 3D DE VERDADE, MAS HONESTO: inclinação de perspectiva nos cartões
        seguindo o cursor (CSS transform 3D, máx. 5°) + luz especular no
        vidro. WebGL foi descartado por medição: 800 kB–2 MB de JavaScript
        antes do primeiro pixel. transform:perspective custa zero.
     4. MARKETING OPERÁVEL PELO PAINEL: o aviso do topo, o hero e o cartaz de
        campanha do meio da página são banners das posições faixa/hero/vitrine
        — quem edita é a tela "Banners e campanhas", não um programador.

   A escala segue bidimensional (min(vw, vh)) — a lição do 1366x768 é lei.
   ========================================================================== */

/* ------------------------------------------------------------- TIPOGRAFIA -- */
/* v4.3 — fontes PRÓPRIAS, hospedadas na loja (funciona no XAMPP sem internet
   e na HostGator sem depender do Google). Instrument Sans é a voz do site:
   uma grotesca refinada, desenhada para interface, com números tabulares
   para preço. Instrument Serif entra só em itálico, como caligrafia editorial
   — a palavra de ênfase dos títulos, o toque de boutique. Licença OFL. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fontes/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fontes/instrument-sans-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fontes/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fontes/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* superfícies — preto com profundidade, nunca cinza lavado */
  --fundo:   #0a0a0c;
  --fundo-2: #000000;
  --carta:   #141519;
  --carta-2: #1b1d22;
  --nav:     rgba(10,10,12,.94);

  /* texto */
  --txt:   #f5f5f7;
  --txt-2: #a1a1a6;
  --txt-3: #6e6e73;

  /* o ÚNICO acento */
  --acento:       #d8b26a;
  --acento-forte: #e6c684;
  --acento-fundo: rgba(216,178,106,.12);
  --acento-borda: rgba(216,178,106,.32);

  /* funcionais */
  --verde:   #30d158;
  --alerta:  #ff6961;
  --escasso: #ff9f0a;

  /* hairlines */
  --linha:   rgba(255,255,255,.09);
  --linha-2: rgba(255,255,255,.18);

  /* escala bidimensional */
  --t-mega: clamp(2.1rem,  min(4.6vw, 6.6vh), 4.4rem);
  --t-xxl:  clamp(1.55rem, min(3vw,   4.4vh), 2.6rem);
  --t-xl:   clamp(1.2rem,  min(1.9vw, 2.7vh), 1.65rem);
  --t-lg:   clamp(1rem,    min(1.2vw, 1.75vh),1.18rem);
  --t-md:   1.0625rem;
  --t-sm:   .875rem;
  --t-xs:   .75rem;

  --sec: clamp(40px, min(5vw, 8vh), 96px);
  --gap: clamp(12px, 1.1vw, 20px);
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
  --e-5: 22px; --e-6: 30px; --e-7: 44px; --e-8: 64px;

  --gutter:  20px;
  --largura: 1200px;
  --larg-texto: 820px;
  --raio:     18px;
  --raio-sm:  12px;
  --raio-pill: 980px;
  --topo-alt: 52px;

  --ease:  cubic-bezier(.25,.6,.3,1);
  --micro: 160ms var(--ease);
  --macro: 420ms var(--ease);

  --sombra-1: 0 1px 3px rgba(0,0,0,.5);
  --sombra-2: 0 22px 48px -20px rgba(0,0,0,.85);

  --f: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
       'SF Pro Text', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

@media (min-width: 640px)  { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 36px; --topo-alt: 56px; } }
@media (min-width: 1024px) and (max-height: 800px) { :root { --sec: clamp(34px, 6vh, 64px); } }

/* ------------------------------------------------------------ FUNDAÇÕES -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--fundo); color: var(--txt);
  font-family: var(--f); font-size: var(--t-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { max-width: 100%; display: block; }
figure { margin: 0; }
img { height: auto; }
/* vídeo obedece à mesma regra: o atributo height é dica de proporção,
   nunca altura fixa — sem isto o vídeo do hero esticava 900px e abria
   um vão preto no meio da página */
video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -.021em;
  margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--acento); color: #0a0a0c; }
[id] { scroll-margin-top: calc(var(--topo-alt) + 18px); }

.ip-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ip-pular { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--acento); color: #0a0a0c; padding: 12px 20px; font-weight: 600;
  border-radius: 0 0 var(--raio-sm) 0; }
.ip-pular:focus { left: 0; }
.ip-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ip-w { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================ AVISO/TOPO == */
/* Barra de aviso ACIMA da navegação — é um banner da posição "faixa",
   editado no painel. Uma linha, um link. É onde mora a campanha do dia. */
.ip-aviso-topo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px var(--gutter);
  background: var(--acento); color: #0a0a0c;
  font-size: var(--t-sm); font-weight: 600; text-align: center;
}
.ip-aviso-topo svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: 0 0 auto; }
.ip-aviso-topo:hover { background: var(--acento-forte); }

.ip-topo { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--topo-alt);
  display: flex; align-items: center; background: var(--nav);
  border-bottom: 1px solid transparent; transition: border-color var(--macro); }
.ip-topo.is-solido { border-bottom-color: var(--linha); }
.ip-topo__linha { width: 100%; max-width: var(--largura); margin-inline: auto;
  padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--e-4); }

.ip-marca { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ip-marca__simbolo { font-size: 19px; line-height: 1; color: var(--acento); }
.ip-marca__nome { font-weight: 700; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; }
.ip-marca__nome b { color: var(--txt-2); font-weight: 700; }

.ip-nav-desk { display: none; }
@media (min-width: 1024px) {
  .ip-nav-desk { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .ip-nav-desk a { position: relative; font-size: .8125rem; color: var(--txt-2);
    padding: 7px 12px; border-radius: var(--raio-pill);
    transition: color var(--micro), background var(--micro); white-space: nowrap; }
  .ip-nav-desk a:hover { color: var(--txt); }
  .ip-nav-desk a[aria-current] { color: var(--txt); background: rgba(255,255,255,.08); }
}
.ip-nav-sep { width: 1px; height: 14px; background: var(--linha-2); margin-inline: 7px; flex: 0 0 auto; }
.ip-topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (min-width: 1024px) { .ip-topo__acoes { margin-left: 0; } }
.ip-icone-btn { width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--raio-pill); cursor: pointer;
  color: var(--txt); transition: background var(--micro), transform var(--micro); }
.ip-icone-btn:hover { background: rgba(255,255,255,.09); }
.ip-icone-btn:active { transform: scale(.92); }
.ip-icone-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ip-topo__cta { display: none; }
@media (min-width: 760px) { .ip-topo__cta { display: inline-flex; } }

/* --------------------------------------------------------------- BOTÕES -- */
.ip-btn { --bg: var(--acento); --cor: #0a0a0c;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  background: var(--bg); color: var(--cor);
  border: 0; border-radius: var(--raio-pill);
  font-weight: 600; font-size: var(--t-sm); letter-spacing: -.01em;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--micro), transform var(--micro), opacity var(--micro); }
.ip-btn:hover  { background: var(--acento-forte); }
.ip-btn:active { transform: scale(.98); }
.ip-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.ip-btn--fantasma { --bg: transparent; --cor: var(--txt); border: 1px solid var(--linha-2); }
.ip-btn--fantasma:hover { background: rgba(255,255,255,.08); border-color: var(--txt-2); }
.ip-btn--zap { --bg: #1FAD54; --cor: #fff; }
.ip-btn--zap:hover { background: #24bd5f; }
.ip-btn--bloco { width: 100%; }
.ip-btn--peq { min-height: 34px; padding: 0 15px; font-size: .8125rem; }
.ip-btn[disabled] { opacity: .35; pointer-events: none; }

.ip-link-seta { display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500; font-size: var(--t-lg); color: var(--acento); white-space: nowrap; }
.ip-link-seta:hover { text-decoration: underline; text-underline-offset: 3px; }
.ip-link-seta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; transition: transform var(--micro); }
.ip-link-seta:hover svg { transform: translateX(3px); }

/* ================================================================== HERO == */
.ip-hero { position: relative;
  padding-top: calc(var(--topo-alt) + var(--sec)); padding-bottom: var(--sec);
  background:
    radial-gradient(56% 44% at 50% 0%, rgba(216,178,106,.09) 0%, transparent 62%),
    var(--fundo-2);
  border-bottom: 1px solid var(--linha); overflow: hidden; }
.ip-hero__fundo { display: none; }

/* a palavra-fantasma volta — foi aprovada na referência escura — mas em
   traço de 1px quase subliminar, atrás de tudo */
.ip-hero__fantasma { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%);
  z-index: 0; pointer-events: none; user-select: none;
  font-weight: 700; font-size: clamp(4rem, min(14vw, 20vh), 12rem); line-height: .8;
  letter-spacing: -.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(245,245,247,.035); display: block; }

.ip-hero__grade { display: block; position: relative; z-index: 1; }
.ip-hero__texto { max-width: var(--larg-texto); margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.ip-rotulo { display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-sm); font-weight: 600; color: var(--acento); }
.ip-rotulo::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acento); animation: ip-pulso 2.6s ease-in-out infinite; }
@keyframes ip-pulso { 0%,100%{opacity:.35} 50%{opacity:1} }
.ip-hero__titulo { font-size: var(--t-mega); letter-spacing: -.028em; margin-top: var(--e-3); }
.ip-hero__titulo em { font-style: normal;
  background: linear-gradient(100deg, var(--acento-forte), var(--acento) 55%, #a07f3e);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ip-hero__sub { margin-top: var(--e-3); font-size: var(--t-xl); font-weight: 400;
  color: var(--txt-2); max-width: 34ch; letter-spacing: -.014em; }
.ip-hero__acoes { margin-top: var(--e-5); display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }

.ip-hero__selos { margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: 1px solid var(--linha); width: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3) var(--e-4); text-align: left; }
@media (min-width: 560px) { .ip-hero__selos { grid-template-columns: repeat(4, 1fr); } }
.ip-hero__selo { display: flex; align-items: flex-start; gap: 8px; }
.ip-hero__selo svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px;
  stroke: var(--acento); fill: none; stroke-width: 1.7; }
.ip-hero__selo b { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.25; }
.ip-hero__selo span { font-size: var(--t-xs); color: var(--txt-3); }

.ip-hero__vitrine { margin-top: var(--e-6); display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.ip-hero__vitrine > :nth-child(n+2) { display: none; }
@media (min-width: 700px) {
  .ip-hero__vitrine { grid-template-columns: repeat(3, 1fr); }
  .ip-hero__vitrine > :nth-child(n+2) { display: flex; }
}

/* ============================================== CARD DE PRODUTO ========== */
/* Cartão escuro com PROFUNDIDADE 3D: o JavaScript escreve --rx/--ry conforme
   o cursor e o cartão inclina até 5° — CSS transform puro, custo zero de
   biblioteca. A luz especular (.ip-luz) acompanha na mesma passada de rAF. */
.ip-card { position: relative; display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-1);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow var(--micro), border-color var(--micro); }
.ip-card.is-tilt { transition: box-shadow var(--micro), border-color var(--micro); }
.ip-card:not(.is-tilt) { transition: transform 380ms var(--ease), box-shadow var(--micro), border-color var(--micro); }
.ip-card:hover { box-shadow: var(--sombra-2); border-color: var(--linha-2); }
.ip-card:has(.ip-card__link:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

.ip-card__foto { position: relative; aspect-ratio: 1/1; background: var(--carta-2); overflow: hidden; }
.ip-card__foto img, .ip-card__foto video { width: 100%; height: 100%; object-fit: cover; }
.ip-card__vazio { width: 100%; height: 100%; display: grid; place-items: center; }
.ip-card__vazio svg { width: 44px; height: 44px; stroke: var(--txt-3); fill: none; stroke-width: 1.2; opacity: .6; }

.ip-card--faixa { flex-direction: row; align-items: stretch; }
.ip-card--faixa .ip-card__foto { aspect-ratio: 1/1; width: 42%; flex: 0 0 42%; }
.ip-card--faixa .ip-card__corpo { padding: var(--e-4); justify-content: center; }
.ip-card--faixa .ip-card__nome { -webkit-line-clamp: 2; font-size: var(--t-sm); }
.ip-card--faixa .ip-card__preco { font-size: 1.02rem; }
.ip-card--faixa .ip-card__parcela, .ip-card--faixa .ip-card__alerta { display: none; }
@media (min-width: 700px) {
  .ip-hero__vitrine .ip-card--faixa { flex-direction: column; }
  .ip-hero__vitrine .ip-card--faixa .ip-card__foto { width: 100%; flex: 1 1 auto; aspect-ratio: 4/3; }
}

.ip-selos { position: absolute; inset: 10px 10px auto 10px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; z-index: 2; }
.ip-selo { font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 10px; border-radius: var(--raio-pill);
  background: rgba(10,10,12,.85); color: var(--txt-2); border: 1px solid var(--linha); }
.ip-selo--novo     { background: var(--acento-fundo); color: var(--acento); border-color: var(--acento-borda); }
.ip-selo--seminovo { background: rgba(255,255,255,.08); color: var(--txt-2); border-color: transparent; }
.ip-selo--off      { background: rgba(255,159,10,.14); color: var(--escasso); border-color: transparent; }
.ip-selo--esgotado { background: rgba(255,255,255,.08); color: var(--txt-3); border-color: transparent; }

.ip-card__corpo { display: flex; flex-direction: column; gap: 4px; padding: var(--e-4);
  flex: 1 1 auto; text-align: center; }
.ip-card__cat { font-size: var(--t-xs); font-weight: 500; color: var(--txt-3); }
.ip-card__nome { font-weight: 600; font-size: var(--t-md); line-height: 1.28; letter-spacing: -.014em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ip-card__precos { margin-top: auto; padding-top: var(--e-2); }
.ip-card__de { font-size: var(--t-xs); color: var(--txt-3); text-decoration: line-through; }
.ip-card__preco { font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; }
.ip-card__parcela { font-size: var(--t-xs); color: var(--txt-2); }
.ip-card__pix { margin-top: 3px; font-size: var(--t-xs); color: var(--verde); font-weight: 600; }
.ip-card__alerta { margin-top: 3px; font-size: var(--t-xs); font-weight: 600; color: var(--escasso); }
.ip-card__link { position: absolute; inset: 0; z-index: 3; }

.ip-card--herói .ip-card__corpo { padding: var(--e-4) var(--e-5); }
.ip-card--herói .ip-card__cat, .ip-card--herói .ip-card__parcela, .ip-card--herói .ip-card__alerta { display: none; }
.ip-card--herói .ip-card__precos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; justify-content: center; }
.ip-card--herói .ip-card__de { order: 2; }
.ip-card--herói .ip-card__preco { order: 1; font-size: 1.2rem; }
.ip-card--herói .ip-card__pix { order: 3; flex-basis: 100%; }
.ip-card--herói .ip-card__foto { aspect-ratio: 16/10; }

/* luz especular: um gradiente que segue o cursor. Zero blur, zero canvas. */
.ip-luz::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 240ms var(--ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
    rgba(216,178,106,.1), transparent 60%); }
.ip-luz:hover::before { opacity: 1; }
.ip-luz > * { position: relative; z-index: 2; }

/* ================================================= GRADES DE PRODUTO ===== */
.ip-grade { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .ip-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ip-grade { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1700px) { .ip-grade { grid-template-columns: repeat(5, 1fr); } }

/* ================================================================ BENTO == */
.ip-bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
@media (min-width: 700px)  { .ip-bento { grid-template-columns: repeat(8, minmax(0,1fr)); } }
@media (min-width: 1024px) { .ip-bento { grid-template-columns: repeat(12, minmax(0,1fr)); } }
.ip-cel { grid-column: span 4; min-width: 0; }
@media (min-width: 700px) {
  .ip-cel--2,.ip-cel--3,.ip-cel--4,.ip-cel--6 { grid-column: span 4; }
  .ip-cel--5,.ip-cel--7,.ip-cel--8,.ip-cel--12 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .ip-cel--2{grid-column:span 2}.ip-cel--3{grid-column:span 3}.ip-cel--4{grid-column:span 4}
  .ip-cel--5{grid-column:span 5}.ip-cel--6{grid-column:span 6}.ip-cel--7{grid-column:span 7}
  .ip-cel--8{grid-column:span 8}.ip-cel--12{grid-column:span 12}
}
.ip-caixa { position: relative; background: var(--carta); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-1); }
.ip-caixa--pad { padding: var(--e-6); }
.ip-caixa--claro { background: var(--carta-2); }

/* ================================================ TILES DE CATEGORIA ===== */
.ip-tile { position: relative; display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-1);
  min-height: clamp(150px, 21vh, 210px);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow var(--micro), border-color var(--micro); }
.ip-tile:not(.is-tilt) { transition: transform 380ms var(--ease), box-shadow var(--micro), border-color var(--micro); }
.ip-tile:hover { box-shadow: var(--sombra-2); border-color: var(--linha-2); }
.ip-tile--grande { min-height: clamp(230px, 36vh, 350px); }
.ip-tile__arte { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .35; transition: opacity var(--macro), transform 700ms var(--ease); }
.ip-tile:hover .ip-tile__arte { opacity: .5; transform: scale(1.03); }
.ip-tile__veu { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.2) 0%, rgba(10,10,12,.72) 58%, var(--carta) 100%); }
.ip-tile__conteudo { position: relative; height: 100%; min-height: inherit;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--e-5); text-align: left; }
.ip-tile__icone { margin-bottom: 10px; }
.ip-tile__icone svg { width: 26px; height: 26px; stroke: var(--acento); fill: none; stroke-width: 1.5; }
.ip-tile--grande .ip-tile__icone svg { width: 34px; height: 34px; }
.ip-tile__nome { font-weight: 700; font-size: var(--t-xl); letter-spacing: -.02em; }
.ip-tile--grande .ip-tile__nome { font-size: var(--t-xxl); }
.ip-tile__meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: var(--t-sm); color: var(--txt-2); }
.ip-tile__meta b { color: var(--txt); font-weight: 600; }
.ip-tile__cta { margin-top: var(--e-3); display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500; font-size: var(--t-sm); color: var(--acento); }
.ip-tile__cta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; transition: transform var(--micro); }
.ip-tile:hover .ip-tile__cta svg { transform: translateX(3px); }
.ip-tile--largo { min-height: clamp(96px, 14vh, 140px); }
.ip-tile--largo .ip-tile__conteudo { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e-4); }
.ip-tile--largo .ip-tile__icone { margin-bottom: 0; }
.ip-tile--largo .ip-tile__cta { margin-top: 0; }

/* ==================================================== SEÇÕES E TÍTULOS ==== */
.ip-secao { padding-block: var(--sec); background: var(--fundo); }
.ip-secao:nth-of-type(even) { background: var(--fundo-2); }
.ip-secao--limpa { background: var(--fundo); }
.ip-titulo-bloco { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e-2); margin-bottom: var(--e-6); }
.ip-titulo-bloco > div { display: contents; }
.ip-eyebrow { font-size: var(--t-sm); font-weight: 600; color: var(--acento);
  letter-spacing: 0; text-transform: none; }
.ip-titulo { font-size: var(--t-xxl); letter-spacing: -.024em; }
.ip-texto  { color: var(--txt-2); font-size: var(--t-lg); font-weight: 400; max-width: 52ch; }
.ip-titulo-bloco .ip-link-seta { margin-top: var(--e-2); }

.ip-numeros { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; border-block: 1px solid var(--linha); }
@media (min-width: 560px) { .ip-numeros { grid-template-columns: repeat(4,1fr); } }
.ip-numero { padding: var(--e-5) var(--e-3); text-align: center; }
.ip-numero + .ip-numero { border-left: 1px solid var(--linha); }
.ip-numero__valor { font-weight: 700; font-size: clamp(1.5rem, min(2.4vw,3.6vh), 2.2rem);
  letter-spacing: -.03em; line-height: 1; color: var(--acento); }
.ip-numero__rotulo { margin-top: 6px; font-size: var(--t-xs); color: var(--txt-3); }

.ip-passos { display: grid; gap: var(--e-4); counter-reset: passo; }
@media (min-width: 700px) { .ip-passos { grid-template-columns: repeat(2,1fr); } }
.ip-passo { display: flex; gap: var(--e-3); align-items: flex-start; }
.ip-passo::before { counter-increment: passo; content: counter(passo);
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--acento); color: #0a0a0c;
  font-weight: 700; font-size: .8rem; }
.ip-passo h3 { font-size: var(--t-md); font-weight: 600; }
.ip-passo p { margin-top: 2px; color: var(--txt-2); font-size: var(--t-sm); }

.ip-cond { display: grid; gap: var(--gap); }
@media (min-width: 620px) { .ip-cond { grid-template-columns: repeat(2,1fr); } }
.ip-cond__lado { position: relative; padding: var(--e-6); background: var(--carta);
  border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; }
.ip-cond__lado::before { display: none; }
.ip-cond__icone svg { width: 26px; height: 26px; stroke: var(--acento); fill: none; stroke-width: 1.5; }
.ip-cond__titulo { font-size: var(--t-xl); margin-top: 10px; letter-spacing: -.02em; }
.ip-cond__titulo b { color: var(--acento); font-weight: 700; }
.ip-cond__lista { margin: var(--e-3) 0 var(--e-4); padding: 0; list-style: none; display: grid; gap: 8px; }
.ip-cond__lista li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-sm); color: var(--txt-2); }
.ip-cond__lista li::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 8px;
  border-radius: 50%; background: var(--acento); }
.ip-cond__lado > :last-child { margin-top: auto; align-self: flex-start; }

.ip-faq { display: grid; gap: 0 var(--e-8); max-width: 900px; margin-inline: auto; }
@media (min-width: 900px) { .ip-faq { grid-template-columns: repeat(2,1fr); } }
.ip-faq details { border-bottom: 1px solid var(--linha); }
.ip-faq summary { cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) 0; font-weight: 600; font-size: var(--t-md); letter-spacing: -.01em;
  transition: color var(--micro); }
.ip-faq summary:hover { color: var(--acento); }
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary::after { content: '+'; flex: 0 0 auto; font-size: 1.3rem; font-weight: 400;
  line-height: 1; color: var(--acento); transition: transform 220ms var(--ease); }
.ip-faq details[open] summary::after { transform: rotate(45deg); }
.ip-faq__resposta { padding: 0 0 var(--e-4); color: var(--txt-2); font-size: var(--t-sm); }

.ip-faixa { border-block: 1px solid var(--linha); background: var(--fundo-2); overflow: hidden; }
.ip-faixa__trilho { animation: none; width: 100%; display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--e-2) var(--e-6); padding: 14px var(--gutter); }
.ip-faixa__item { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--txt-2); white-space: nowrap; }
.ip-faixa__item b { color: var(--txt); font-weight: 600; }
.ip-faixa__item[aria-hidden] { display: none; }

/* ============================================= CARTAZ DE CAMPANHA ======== */
/* Um banner da posição "vitrine", editado no painel. Ocupa a largura do
   conteúdo como um cartaz — arte à direita, argumento à esquerda. */
.ip-campanha { display: grid; overflow: hidden; border-radius: var(--raio);
  border: 1px solid var(--acento-borda); background: var(--carta);
  box-shadow: var(--sombra-1); }
@media (min-width: 800px) { .ip-campanha { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.ip-campanha__corpo { padding: var(--e-6); }
.ip-campanha__rotulo { font-size: var(--t-sm); font-weight: 600; color: var(--acento); }
.ip-campanha__titulo { font-size: var(--t-xl); letter-spacing: -.02em; margin-top: 6px; }
.ip-campanha__sub { margin-top: 8px; color: var(--txt-2); font-size: var(--t-sm); max-width: 46ch; }
.ip-campanha__corpo .ip-btn { margin-top: var(--e-4); }
.ip-campanha__arte { min-height: 200px; background-size: cover; background-position: center; }
@media (max-width: 799px) { .ip-campanha__arte { order: -1; min-height: 160px; } }

/* ================================================= CAPÍTULO ESCURO ======= */
.ip-palco { position: relative; display: grid; align-items: center;
  min-height: min(62vh, 620px); background: var(--fundo-2); color: var(--txt);
  overflow: hidden; isolation: isolate; border-block: 1px solid var(--linha); }
.ip-palco--medio { min-height: min(48vh, 480px); }
.ip-palco__arte { position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center; opacity: .4; }
.ip-palco__veu { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 90% at 50% 10%, transparent 0%, rgba(0,0,0,.85) 78%); }
.ip-palco__conteudo { padding-block: var(--sec); width: 100%; }
.ip-palco__texto { max-width: var(--larg-texto); margin-inline: auto; text-align: center; }
.ip-palco__titulo { font-size: var(--t-xxl); letter-spacing: -.024em; margin-top: var(--e-3); }
.ip-palco__titulo em { font-style: normal;
  background: linear-gradient(100deg, var(--acento-forte), var(--acento) 55%, #a07f3e);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ip-palco__sub { margin-top: var(--e-3); font-size: var(--t-lg); color: var(--txt-2);
  max-width: 46ch; margin-inline: auto; }
.ip-palco__acoes { margin-top: var(--e-5); display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }
.ip-palco .ip-cel { text-align: left; }
.ip-palco .ip-cel .ip-palco__sub { margin-inline: 0; max-width: 42ch; }
.ip-palco .ip-cel .ip-palco__acoes { justify-content: flex-start; }
.ip-palco .ip-caixa { border-color: var(--linha-2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }

/* ============================================================= LEAD ====== */
.ip-lead { display: block; }
.ip-lead__cabeca { margin-bottom: var(--e-4); }
.ip-lead__titulo { font-weight: 700; font-size: var(--t-xl); letter-spacing: -.02em; margin-top: 4px; }
.ip-lead__texto { margin-top: 6px; color: var(--txt-2); font-size: var(--t-sm); }
.ip-lead__campos { display: grid; gap: var(--e-3); }
@media (min-width: 620px) { .ip-lead__campos { grid-template-columns: repeat(2, 1fr); } }
.ip-inp--largo { grid-column: 1 / -1; }
.ip-inp { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ip-inp label { font-size: var(--t-xs); font-weight: 600; color: var(--txt-2); }
.ip-inp input { width: 100%; min-height: 46px; padding: 0 15px;
  background: var(--carta-2); color: var(--txt);
  border: 1px solid var(--linha-2); border-radius: var(--raio-sm);
  font: inherit; font-size: var(--t-md);
  transition: border-color var(--micro), box-shadow var(--micro); }
.ip-inp input::placeholder { color: var(--txt-3); }
.ip-inp input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(216,178,106,.18); }
.ip-inp input:user-invalid { border-color: var(--alerta); }
.ip-aceite { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--e-4);
  cursor: pointer; font-size: var(--t-xs); color: var(--txt-2); line-height: 1.5; }
.ip-aceite input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--acento); cursor: pointer; }
.ip-aceite b { color: var(--txt); }
.ip-lead__botao { margin-top: var(--e-4); width: 100%; }
@media (min-width: 620px) { .ip-lead__botao { width: auto; min-width: 240px; } }
.ip-lead__aviso { margin-top: var(--e-3); font-size: var(--t-sm); min-height: 1px; }
.ip-lead__aviso .ok { color: var(--verde); font-weight: 600; }
.ip-lead__aviso .erro { color: var(--alerta); font-weight: 600; }
.ip-lead__rodape { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--txt-3); }
.ip-lead__rodape a { color: var(--txt-2); text-decoration: underline; text-underline-offset: 2px; }
.ip-lead.is-enviado .ip-lead__aviso { font-size: var(--t-lg); margin-top: var(--e-4); }
.ip-lead.is-enviado .ip-lead__cabeca { opacity: .55; }

/* ==================================================== INSTITUCIONAL ====== */
.ip-inst { padding-bottom: var(--sec); background: var(--fundo); }
.ip-inst__topo { padding-top: calc(var(--topo-alt) + var(--sec)); padding-bottom: var(--sec);
  background: radial-gradient(56% 50% at 50% 0%, rgba(216,178,106,.08) 0%, transparent 60%), var(--fundo-2);
  border-bottom: 1px solid var(--linha); text-align: center; }
.ip-inst__topo .ip-trilha { justify-content: center; }
.ip-inst__titulo { font-size: var(--t-mega); letter-spacing: -.028em; margin-top: 6px; }
.ip-inst__resumo { margin-top: var(--e-3); font-size: var(--t-xl); font-weight: 400;
  color: var(--txt-2); max-width: 40ch; margin-inline: auto; letter-spacing: -.014em; }
.ip-inst__grade { display: grid; gap: var(--e-6); padding-top: var(--sec); }
@media (min-width: 980px) {
  .ip-inst__grade { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-8); align-items: start; }
  .ip-inst__lado { position: sticky; top: calc(var(--topo-alt) + var(--e-4)); }
}
.ip-inst__bloco + .ip-inst__bloco { margin-top: var(--e-6); padding-top: var(--e-6); border-top: 1px solid var(--linha); }
.ip-inst__bloco h2 { font-size: var(--t-xl); letter-spacing: -.02em; }
.ip-inst__bloco p { margin-top: var(--e-3); color: var(--txt-2); max-width: 68ch; }
.ip-inst__ladoTitulo { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e-3); }
.ip-inst__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ip-inst__links a { color: var(--acento); font-size: var(--t-sm); }
.ip-inst__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ip-canais { display: grid; gap: var(--e-2); }
.ip-canal { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4);
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-1); transition: border-color var(--micro), box-shadow var(--micro); }
.ip-canal:hover { border-color: var(--linha-2); box-shadow: var(--sombra-2); }
.ip-canal__icone { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--acento-fundo); }
.ip-canal__icone svg { width: 17px; height: 17px; stroke: var(--acento); fill: none; stroke-width: 1.8; }
.ip-canal > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ip-canal b { display: block; font-weight: 600; font-size: var(--t-md); }
.ip-canal b + span { display: block; font-size: var(--t-xs); color: var(--txt-3); margin-top: 1px; }
.ip-canal > svg:last-child { width: 14px; height: 14px; flex: 0 0 auto; stroke: var(--txt-3);
  fill: none; stroke-width: 2.2; transition: transform var(--micro), stroke var(--micro); }
.ip-canal:hover > svg:last-child { transform: translateX(3px); stroke: var(--acento); }

/* =============================================== CATÁLOGO / FILTROS ====== */
.ip-cabeca-pagina { padding-top: calc(var(--topo-alt) + var(--e-6)); padding-bottom: var(--e-4);
  background: var(--fundo-2); border-bottom: 1px solid var(--linha); text-align: center; }
.ip-cabeca-pagina .ip-trilha { justify-content: center; }
.ip-cabeca-pagina .ip-titulo { font-size: var(--t-mega); letter-spacing: -.028em; }
.ip-cabeca-pagina .ip-texto { margin-inline: auto; margin-top: var(--e-2); }
.ip-cabeca-pagina form.ip-campo { margin-inline: auto; }
.ip-trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: var(--t-xs); color: var(--txt-3); margin-bottom: var(--e-2); }
.ip-trilha a:hover { color: var(--acento); }
.ip-trilha span[aria-current] { color: var(--txt-2); }
.ip-filtros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-block: var(--e-4); }
.ip-filtros > * { flex: 0 0 auto; }
.ip-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; white-space: nowrap;
  border: 1px solid var(--linha-2); border-radius: var(--raio-pill);
  background: transparent; color: var(--txt); font-size: var(--t-sm); font-weight: 500;
  cursor: pointer; transition: border-color var(--micro), background var(--micro), color var(--micro); }
.ip-chip:hover { border-color: var(--txt-2); }
.ip-chip.is-ativo, .ip-chip[aria-current] { background: var(--acento); border-color: var(--acento); color: #0a0a0c; }
.ip-barra-filtro { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
  justify-content: space-between; padding-block: var(--e-3); }
.ip-contagem { font-size: var(--t-sm); color: var(--txt-2); }
.ip-contagem b { color: var(--txt); }
.ip-campo { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  background: var(--carta-2); border: 1px solid var(--linha-2); border-radius: var(--raio-pill);
  transition: border-color var(--micro), box-shadow var(--micro); }
.ip-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(216,178,106,.15); }
.ip-campo input, .ip-campo select { flex: 1 1 auto; min-width: 0; background: transparent;
  border: 0; outline: 0; color: var(--txt); font-size: var(--t-sm); }
.ip-campo select { cursor: pointer; }
.ip-campo select option { background: var(--carta-2); color: var(--txt); }
.ip-campo svg { width: 15px; height: 15px; stroke: var(--txt-3); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.ip-campo .ip-so-sem-js { padding: 4px 11px; font-size: var(--t-xs); }
.js-ligado .ip-so-sem-js { display: none; }
.ip-vazio { text-align: center; padding: var(--e-8) var(--e-4);
  border: 1px dashed var(--linha-2); border-radius: var(--raio); background: var(--carta); }
.ip-vazio__icone { margin-bottom: var(--e-3); display: flex; justify-content: center; }
.ip-vazio__icone svg { width: 40px; height: 40px; stroke: var(--txt-3); fill: none; stroke-width: 1.3; }
.ip-vazio h3 { font-size: var(--t-xl); }
.ip-vazio p { margin: var(--e-2) auto 0; color: var(--txt-2); max-width: 46ch; font-size: var(--t-sm); }
.ip-vazio__acoes { margin-top: var(--e-4); display: flex; gap: var(--e-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------- PÁGINA DE PRODUTO ---- */
.ip-produto { padding-top: calc(var(--topo-alt) + var(--e-5)); background: var(--fundo); }
.ip-produto__grade { display: grid; gap: var(--e-5); }
@media (min-width: 980px) {
  .ip-produto__grade { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--e-7); align-items: start; }
  .ip-produto__compra { position: sticky; top: calc(var(--topo-alt) + var(--e-3)); }
}
.ip-galeria__palco { position: relative; aspect-ratio: 4/3; border-radius: var(--raio);
  background: var(--carta-2); overflow: hidden; border: 1px solid var(--linha); }
@media (min-width: 980px) { .ip-galeria__palco { aspect-ratio: 1/1; max-height: calc(100vh - var(--topo-alt) - 120px); } }
.ip-galeria__palco img, .ip-galeria__palco video { width: 100%; height: 100%; object-fit: cover; }
.ip-galeria__vazio { width: 100%; height: 100%; display: grid; place-items: center; }
.ip-galeria__vazio svg { width: 64px; height: 64px; stroke: var(--txt-3); fill: none; stroke-width: 1; opacity: .5; }
.ip-galeria__miniaturas { display: flex; gap: 8px; margin-top: var(--e-3); overflow-x: auto;
  padding-bottom: 3px; scrollbar-width: none; }
.ip-galeria__miniaturas::-webkit-scrollbar { display: none; }
.ip-mini { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 1px solid var(--linha);
  border-radius: var(--raio-sm); background: var(--carta-2); overflow: hidden; cursor: pointer;
  transition: border-color var(--micro); }
.ip-mini img, .ip-mini video { width: 100%; height: 100%; object-fit: cover; }
.ip-mini[aria-selected="true"] { border-color: var(--acento); border-width: 2px; }
.ip-produto__titulo { font-size: clamp(1.5rem, min(2.6vw,3.8vh), 2.3rem); letter-spacing: -.024em; margin-top: var(--e-2); }
.ip-produto__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-3); }
.ip-spec { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--carta-2); border-radius: var(--raio-pill);
  font-size: var(--t-xs); color: var(--txt-2); }
.ip-spec b { color: var(--txt); font-weight: 600; }
.ip-preco-bloco { margin-top: var(--e-4); padding: var(--e-5);
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio); }
.ip-preco-bloco__de { font-size: var(--t-xs); color: var(--txt-3); text-decoration: line-through; }
.ip-preco-bloco__valor { font-weight: 700; font-size: clamp(1.7rem, min(3.2vw,4.4vh), 2.4rem);
  letter-spacing: -.028em; line-height: 1.04; }
.ip-preco-bloco__parcela { margin-top: 4px; color: var(--txt-2); font-size: var(--t-sm); }
.ip-pix-destaque { margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  background: rgba(48,209,88,.09); border: 1px solid rgba(48,209,88,.25); border-radius: var(--raio-sm); }
.ip-pix-destaque__valor { font-weight: 700; font-size: 1.25rem; color: var(--verde); letter-spacing: -.02em; }
.ip-pix-destaque__nota { font-size: var(--t-xs); color: var(--txt-2); margin-top: 1px; }
.ip-compra-acoes { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.ip-confianca { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.ip-confianca__item { display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); color: var(--txt-2); }
.ip-confianca__item svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px;
  stroke: var(--acento); fill: none; stroke-width: 1.6; }
.ip-confianca__item b { color: var(--txt); font-weight: 600; display: block; }
.ip-prosa { color: var(--txt-2); max-width: 70ch; font-size: var(--t-md); margin-inline: auto; }
.ip-prosa p + p { margin-top: var(--e-3); }

/* ------------------------------------------- SUGESTÕES (upsell/downsell) - */
/* Marketing que respeita: duas alternativas honestas ao lado do produto —
   uma acima ("mais desempenho"), uma abaixo ("mais economia") — com a
   DIFERENÇA de preço dita em voz alta. Nada de urgência falsa. */
.ip-sugestoes { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .ip-sugestoes { grid-template-columns: repeat(2, 1fr); } }
.ip-sugestao { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4);
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-1); position: relative;
  transition: border-color var(--micro), box-shadow var(--micro); }
.ip-sugestao:hover { border-color: var(--linha-2); box-shadow: var(--sombra-2); }
.ip-sugestao__foto { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--raio-sm);
  background: var(--carta-2); overflow: hidden; }
.ip-sugestao__foto img { width: 100%; height: 100%; object-fit: cover; }
.ip-sugestao__corpo { flex: 1 1 auto; min-width: 0; }
.ip-sugestao__rotulo { font-size: var(--t-xs); font-weight: 600; color: var(--acento); }
.ip-sugestao__nome { font-weight: 600; font-size: var(--t-sm); line-height: 1.3; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ip-sugestao__dif { font-size: var(--t-xs); color: var(--txt-2); margin-top: 2px; }
.ip-sugestao__dif b { color: var(--txt); }
.ip-sugestao > svg { width: 14px; height: 14px; flex: 0 0 auto; stroke: var(--txt-3);
  fill: none; stroke-width: 2.2; }
.ip-sugestao__link { position: absolute; inset: 0; }

.ip-compra-fixa { position: fixed; inset: auto 0 0 0; z-index: 90;
  display: flex; align-items: center; gap: var(--e-3);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--nav); border-top: 1px solid var(--linha);
  transform: translateY(110%); transition: transform 300ms var(--ease); }
.ip-compra-fixa.is-visivel { transform: translateY(0); }
.ip-compra-fixa__preco { flex: 1 1 auto; min-width: 0; }
.ip-compra-fixa__valor { font-weight: 700; font-size: 1rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ip-compra-fixa__nota { font-size: 11px; color: var(--txt-3); }
@media (min-width: 980px) { .ip-compra-fixa { display: none; } }

/* ================================================= MENU EM TELA CHEIA ==== */
.ip-menu { position: fixed; inset: 0; z-index: 110; background: var(--fundo);
  display: flex; flex-direction: column; transform: translateY(-100%);
  transition: transform 340ms var(--ease); overflow-y: auto; }
.ip-menu.is-aberto { transform: translateY(0); }
.ip-menu__topo { height: var(--topo-alt); flex: 0 0 auto; display: flex; align-items: center;
  justify-content: space-between; padding-inline: var(--gutter); border-bottom: 1px solid var(--linha); }
.ip-menu__corpo { padding: var(--e-5) var(--gutter) var(--e-7); }
.ip-menu__lista { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.ip-menu__lista li + li { border-top: 1px solid var(--linha); }
.ip-menu__lista a { display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) 0; font-weight: 600; font-size: 1.15rem; letter-spacing: -.015em; }
.ip-menu__lista a span:last-child { margin-left: auto; font-size: var(--t-xs);
  color: var(--txt-3); font-weight: 400; }
.ip-menu__lista svg { width: 20px; height: 20px; stroke: var(--acento); fill: none; stroke-width: 1.5; flex: 0 0 auto; }
.ip-menu__secao { font-size: var(--t-xs); font-weight: 600; color: var(--txt-3); margin: var(--e-5) 0 var(--e-2); }
.ip-menu__lista--simples a { font-size: 1rem; font-weight: 500; color: var(--txt-2); padding: 10px 0; }
.ip-menu__lista--simples a:hover { color: var(--acento); }

/* ============================================================= RODAPÉ ==== */
.ip-rodape { background: var(--fundo-2); border-top: 1px solid var(--linha);
  padding-block: var(--e-7) var(--e-4); color: var(--txt-2); }
.ip-rodape__grade { display: grid; gap: var(--e-5); }
@media (min-width: 700px) { .ip-rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e-6); } }
.ip-rodape h4 { font-size: var(--t-xs); font-weight: 600; color: var(--txt); margin-bottom: var(--e-3);
  letter-spacing: 0; text-transform: none; }
.ip-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ip-rodape a { color: var(--txt-2); font-size: var(--t-xs); }
.ip-rodape a:hover { color: var(--txt); text-decoration: underline; text-underline-offset: 2px; }
.ip-rodape__sobre { color: var(--txt-3); font-size: var(--t-xs); max-width: 44ch; margin-top: var(--e-3); }
.ip-rodape__fim { margin-top: var(--e-6); padding-top: var(--e-3); border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: space-between;
  font-size: var(--t-xs); color: var(--txt-3); }

/* ================================================ MOVIMENTO (scroll) ===== */
@keyframes ip-surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ip-surgir-escala { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes ip-emergir { from { transform: scale(1.05); } to { transform: scale(1); } }
.ip-revela, .ip-revela-2 { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .ip-revela   { animation: ip-surgir linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  .ip-revela-2 { animation: ip-surgir-escala linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  .ip-card__foto img { animation: ip-emergir linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
}
html.sem-timeline .ip-revela, html.sem-timeline .ip-revela-2 {
  opacity: 0; transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
html.sem-timeline .ip-revela.is-visivel, html.sem-timeline .ip-revela-2.is-visivel { opacity: 1; transform: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ip-vt-sai 200ms var(--ease) both; }
::view-transition-new(root) { animation: ip-vt-entra 280ms var(--ease) both; }
@keyframes ip-vt-sai   { to   { opacity: 0; } }
@keyframes ip-vt-entra { from { opacity: 0; transform: translateY(8px); } }
::view-transition-group(produto-foto) { animation-duration: 380ms; }
::view-transition-old(produto-foto), ::view-transition-new(produto-foto) {
  animation-duration: 380ms; animation-timing-function: var(--ease); }
.ip-vt-foto { view-transition-name: produto-foto; }

/* ============================================ TELAS MUITO GRANDES (4K) === */
@media (min-width: 1800px) { :root { --largura: 1320px; } }
@media (min-width: 2400px) {
  :root { --largura: 1480px;
    --t-mega: clamp(3.2rem, min(3.8vw, 7vh), 5.6rem);
    --t-xxl:  clamp(2rem,   min(2.4vw, 4.6vh), 3.2rem); }
  body { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important; }
  .ip-revela, .ip-revela-2 { opacity: 1 !important; transform: none !important; }
  .ip-card, .ip-tile { transform: none !important; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  .ip-topo, .ip-compra-fixa, .ip-menu, .ip-palco, .ip-faixa, .ip-aviso-topo { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================================
   v4.1 — OS TRÊS PEDIDOS FINAIS DO DONO, COM AS REFERÊNCIAS NA MESA
   1. Mega-menu de navegação no estilo da loja da referência
   2. Hero de PRODUTO: título gigante central, foto enorme, preço embaixo
   3. Cartazes de categoria em escala de cinema (a herança da Rockstar)
   ========================================================================== */

/* ------------------------------------------------------------ MEGA-MENU -- */
/* O painel que abre sob "Catálogo": coluna de categorias em tipo grande à
   esquerda, links rápidos à direita — a anatomia exata da referência.
   O atraso de 300 ms antes de abrir vem de pesquisa (Baymard): sem ele o
   painel "pisca" quando o cursor só está de passagem. */
.ip-mega { position: relative; }
.ip-mega__painel {
  position: fixed; left: 0; right: 0; top: var(--topo-alt);
  background: var(--nav);
  border-bottom: 1px solid var(--linha);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s 220ms;
  z-index: 99;
}
.ip-mega.is-aberto .ip-mega__painel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.ip-mega__grade { max-width: var(--largura); margin-inline: auto;
  padding: var(--e-6) var(--gutter) var(--e-7);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-7); }
.ip-mega h3 { font-size: var(--t-xs); font-weight: 500; color: var(--txt-3); margin: 0 0 var(--e-3); }
.ip-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ip-mega__grandes a { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--txt); transition: color var(--micro); }
.ip-mega__grandes a:hover { color: var(--acento); }
.ip-mega__grandes a small { font-size: var(--t-xs); font-weight: 400; color: var(--txt-3); margin-left: 8px; }
.ip-mega__mini a { font-size: var(--t-sm); font-weight: 500; color: var(--txt-2); }
.ip-mega__mini a:hover { color: var(--txt); }

/* ------------------------------------------------- HERO DE PRODUTO ------- */
/* A anatomia da página de lançamento da referência: nome do produto em tipo
   gigante, uma frase, a FOTO ENORME respirando sozinha, botão e preço
   embaixo. A foto é a protagonista — o resto abre alas. */
.ip-heroprod { position: relative; text-align: center;
  padding-top: calc(var(--topo-alt) + var(--sec));
  background: radial-gradient(60% 46% at 50% 8%, rgba(216,178,106,.10) 0%, transparent 60%), var(--fundo-2);
  border-bottom: 1px solid var(--linha); overflow: hidden; }
.ip-heroprod__rotulo { font-size: var(--t-sm); font-weight: 600; color: var(--acento); }
.ip-heroprod__titulo { font-size: clamp(2.4rem, min(6vw, 9vh), 5.6rem);
  letter-spacing: -.032em; margin-top: var(--e-2); }
.ip-heroprod__sub { margin-top: var(--e-3); font-size: var(--t-xl); font-weight: 400;
  color: var(--txt-2); max-width: 40ch; margin-inline: auto; letter-spacing: -.014em; }
.ip-heroprod__foto { margin-top: var(--e-5); position: relative; }
.ip-heroprod__foto img { width: min(880px, 86vw); max-height: min(52vh, 560px);
  object-fit: cover; margin-inline: auto;
  border-radius: var(--raio); box-shadow: 0 46px 110px -44px rgba(0,0,0,.95);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 300ms var(--ease); will-change: transform; }
.ip-heroprod__acoes { margin-top: var(--e-5); display: flex; flex-direction: column;
  align-items: center; gap: var(--e-3); padding-bottom: var(--sec); }
.ip-heroprod__preco { font-size: var(--t-sm); color: var(--txt-2); }
.ip-heroprod__preco b { color: var(--txt); font-weight: 600; }

/* ------------------------------------------- CARTAZ DE CATEGORIA --------- */
/* A escala da Rockstar dentro da disciplina da Apple: cada categoria é um
   cartaz ALTO com a arte dominando, nome gigante e um único convite. Um
   embaixo do outro, como capítulos — não uma gaveta de miniaturas. */
.ip-posters { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .ip-posters { grid-template-columns: repeat(2, 1fr); } }
.ip-poster { position: relative; display: flex; overflow: hidden;
  border-radius: var(--raio); border: 1px solid var(--linha);
  min-height: clamp(300px, 52vh, 560px);
  background: var(--carta); isolation: isolate;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: border-color var(--micro), box-shadow var(--micro); }
.ip-poster:not(.is-tilt) { transition: transform 380ms var(--ease), border-color var(--micro), box-shadow var(--micro); }
.ip-poster:hover { border-color: var(--linha-2); box-shadow: var(--sombra-2); }
.ip-poster--largo { grid-column: 1 / -1; min-height: clamp(340px, 62vh, 640px); }
/* v4.9 — TODAS as categorias em cartaz: a família principal (mãe larga +
   filhas em par) e, abaixo, o resto da loja em grade de três no desktop. */
.ip-posters + .ip-posters { margin-top: var(--gap); }
@media (min-width: 1200px) { .ip-posters--grade { grid-template-columns: repeat(3, 1fr); } }
/* Linhas principais (iPhones, iPads, Watch, MacBooks): par no desktop,
   TELA CHEIA vertical no celular — um cartaz por rolagem. */
.ip-posters--cheio .ip-poster { min-height: clamp(300px, 52vh, 560px); }
@media (min-width: 900px) { .ip-posters--cheio .ip-poster:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ip-posters--grade .ip-poster { min-height: clamp(260px, 40vh, 440px); }
/* Cartaz sem capa cadastrada: a foto de um produto da categoria preenche o
   cartaz (mesma regra dos cards, decidida pelo dono) — nunca um retângulo preto. */
.ip-poster__arte--produto { background-color: #141519; background-position: center 35%; }
.ip-poster__arte { position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform 900ms var(--ease); }
.ip-poster:hover .ip-poster__arte { transform: scale(1.04); }
.ip-poster__veu { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,12,.06) 0%, rgba(10,10,12,.36) 52%, rgba(10,10,12,.9) 100%); }
.ip-poster__conteudo { position: relative; margin-top: auto; width: 100%;
  padding: var(--e-6); text-align: left; }
.ip-poster__nome { font-size: clamp(1.8rem, min(3.6vw, 5.2vh), 3.2rem);
  font-weight: 700; letter-spacing: -.028em; }
.ip-poster--largo .ip-poster__nome { font-size: clamp(2.2rem, min(4.6vw, 6.6vh), 4.2rem); }
.ip-poster__meta { margin-top: 4px; font-size: var(--t-lg); color: var(--txt-2); }
.ip-poster__meta b { color: var(--txt); font-weight: 600; white-space: nowrap; }
.ip-poster__meta { display: inline-block; }
.ip-poster__cta { margin-top: var(--e-4); display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: var(--t-md); color: var(--acento); }
.ip-poster__cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2.4; transition: transform var(--micro); }
.ip-poster:hover .ip-poster__cta svg { transform: translateX(4px); }

/* ------------------------------------------------------- TRILHOS --------- */
/* "Mais vendidos" e "mais procurados": fileiras que rolam na horizontal no
   desktop também — o gesto de vitrine da referência — mas SEM margem
   negativa (a lição do viewport de celular está paga). */
.ip-trilho { display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 24vw, 300px);
  gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  padding-block: 4px var(--e-3); scroll-snap-type: x proximity;
  scrollbar-width: none; }
.ip-trilho::-webkit-scrollbar { display: none; }
.ip-trilho > * { scroll-snap-align: start; }

/* ------------------------------------------------- VÍDEO NOS BANNERS ----- */
/* O vídeo obedece ao mesmo quadro da foto: preenche, corta pelo centro e
   nunca estica. `data-video-eco` é pausado pelo JS quando sai da tela —
   vídeo tocando fora da viewport é bateria e 4G queimados à toa. */
.ip-heroprod__video { width: min(880px, 86vw); margin-inline: auto;
  border-radius: var(--raio); box-shadow: 0 46px 110px -44px rgba(0,0,0,.95);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  display: block; }
.ip-poster__arte--video video,
.ip-campanha__arte--video video { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; }
.ip-poster__arte--video { overflow: hidden; }
.ip-campanha__arte--video { position: relative; min-height: 200px; overflow: hidden; }
@media (max-width: 799px) { .ip-campanha__arte--video { min-height: 180px; } }

/* ============================================================================
   v4.2 — CARROSSEL DE HERO, TRILHO DE SEÇÕES, FOTOS MAIORES, DOWNSELL
   ========================================================================== */

/* --------------------------------------------------- HERO EM CARROSSEL --- */
/* Os slides vivem empilhados no mesmo palco e trocam por cross-fade — a
   rotação da referência de jogos, sem biblioteca. A altura é a do maior
   slide (grid-area compartilhada), então a página nunca "pula" na troca. */
section[data-carrossel] { display: grid; }
.ip-heroslide { grid-area: 1 / 1; min-width: 0;
  opacity: 1; transition: opacity 700ms var(--ease), visibility 0s; }
section[data-carrossel] .ip-heroslide:not(.is-ativo) {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 700ms var(--ease), visibility 0s 700ms; }
.ip-heropontos { grid-area: 1 / 1; align-self: end; justify-self: center;
  display: flex; gap: 10px; padding-bottom: var(--e-4); z-index: 5; }
.ip-heroponto { width: 26px; height: 4px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--raio-pill); background: rgba(255,255,255,.22);
  transition: background var(--micro), width var(--micro); }
.ip-heroponto:hover { background: rgba(255,255,255,.45); }
.ip-heroponto.is-ativo { background: var(--acento); width: 40px; }

/* --------------------------------------------------- TRILHO DE SEÇÕES ---- */
/* A navegação que desce pela página: pontos fixos à direita, o ativo cresce
   e mostra o nome. Presente só em tela grande — no celular o dedo é o trilho. */
.ip-trilha-secoes { display: none; }
@media (min-width: 1200px) {
  .ip-trilha-secoes { display: flex; flex-direction: column; gap: 14px;
    position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 80; }
  .ip-trilha-secoes a { position: relative; width: 10px; height: 10px;
    border-radius: 50%; background: rgba(255,255,255,.2);
    transition: background var(--micro), transform var(--micro); }
  .ip-trilha-secoes a:hover { background: rgba(255,255,255,.5); }
  .ip-trilha-secoes a.is-ativo { background: var(--acento); transform: scale(1.25); }
  .ip-trilha-secoes a span { position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); white-space: nowrap;
    font-size: var(--t-xs); font-weight: 600; color: var(--txt);
    background: var(--carta-2); border: 1px solid var(--linha);
    padding: 4px 10px; border-radius: var(--raio-pill);
    opacity: 0; pointer-events: none; transition: opacity var(--micro); }
  .ip-trilha-secoes a:hover span, .ip-trilha-secoes a.is-ativo span { opacity: 1; }
}

/* ------------------------------------------------------ FOTOS MAIORES ---- */
/* A loja mostra MENOS colunas com fotos MAIORES: 3 no notebook, 4 só em
   monitor largo. O produto é o cartaz — pedido explícito do dono. */
.ip-grade { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .ip-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ip-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1700px) { .ip-grade { grid-template-columns: repeat(4, 1fr); } }
.ip-trilho { grid-auto-columns: clamp(250px, 30vw, 360px); }
.ip-card__nome { font-size: var(--t-lg); }
.ip-card__preco { font-size: 1.18rem; }

/* -------------------------------------------------- PAINEL DE DOWNSELL --- */
/* Quando a pessoa olha um LACRADO e existe o MESMO modelo seminovo, o painel
   entra na coluna de compra com a economia dita em número. Não é truque —
   é a oferta que faz a venda que ia embora ficar. */
.ip-downsell { margin-top: var(--e-3); padding: var(--e-4);
  border: 1px solid var(--acento-borda); border-radius: var(--raio-sm);
  background: var(--acento-fundo); position: relative; }
.ip-downsell__rotulo { font-size: var(--t-xs); font-weight: 700; color: var(--acento);
  text-transform: uppercase; letter-spacing: .06em; }
.ip-downsell__frase { margin-top: 4px; font-size: var(--t-sm); color: var(--txt); }
.ip-downsell__frase b { color: var(--acento-forte); }
.ip-downsell__nota { margin-top: 2px; font-size: var(--t-xs); color: var(--txt-2); }
.ip-downsell__link { position: absolute; inset: 0; }
.ip-downsell:hover { border-color: var(--acento); }

/* ============================================================================
   v4.3 — TIPOGRAFIA EDITORIAL E MATERIAL DE LUXO
   ----------------------------------------------------------------------------
   O dono pediu: "melhore as letras, o site está muito seco". O diagnóstico da
   pesquisa (interfaces que parecem caras): tom se transmite por TIPO, não por
   enfeite. Três movimentos, todos contidos:
     1. Instrument Sans assume a voz; Instrument Serif itálico entra como a
        palavra de ênfase — o gesto editorial das casas de luxo.
     2. Títulos grandes ganham acabamento metálico (gradiente branco→prata em
        clip de texto) — brilho de vitrine, sem cor nova.
     3. Grão de filme sobre a página inteira (feTurbulence em SVG, ~300 bytes)
        — mata o "liso de plástico" que fazia o preto parecer seco.
   ========================================================================== */

/* grão de filme — opacidade baixíssima, nunca captura clique */
body::after { content: ''; position: fixed; inset: 0; z-index: 2;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* a palavra de ênfase: serif itálico dentro de qualquer título */
h1 em, h2 em, h3 em, .ip-serif {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: .005em; }
h1 em, h2 em, h3 em { font-size: 1.06em; line-height: 1; }

/* acabamento metálico nos títulos de palco */
.ip-heroprod__titulo, .ip-poster__nome, .ip-titulo, .ip-palco__titulo, .ip-campanha__titulo {
  background: linear-gradient(180deg, #ffffff 30%, #b9b9c2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ip-heroprod__titulo em, .ip-poster__nome em, .ip-titulo em, .ip-palco__titulo em, .ip-campanha__titulo em {
  background: linear-gradient(180deg, var(--acento-forte) 20%, var(--acento) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* eyebrows viram kickers editoriais: caixa alta, respiro largo, fio dourado */
.ip-eyebrow, .ip-heroprod__rotulo {
  font-size: var(--t-xs); font-weight: 600; color: var(--acento);
  text-transform: uppercase; letter-spacing: .18em; }
.ip-titulo-bloco .ip-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.ip-titulo-bloco .ip-eyebrow::before, .ip-titulo-bloco .ip-eyebrow::after {
  content: ''; width: 26px; height: 1px; }
.ip-titulo-bloco .ip-eyebrow::before { background: linear-gradient(90deg, transparent, var(--acento)); }
.ip-titulo-bloco .ip-eyebrow::after  { background: linear-gradient(90deg, var(--acento), transparent); }

/* preço é número de vitrine: tabular, com o "R$" discreto */
.ip-card__preco, .ip-heroprod__preco, .ip-preco, .ip-poster__meta b {
  font-variant-numeric: tabular-nums lining-nums; }

/* fio de seção: hairline que nasce e morre em transparência */
.ip-fio { border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--linha-2), transparent); }

/* botão principal com corpo de metal: gradiente + filete de luz em cima.
   Só o DOURADO — fantasma e zap mantêm as caras deles (hierarquia preservada) */
.ip-btn:not(.ip-btn--fantasma):not(.ip-btn--zap) {
  background: linear-gradient(180deg, #e6c583 0%, var(--acento) 55%, #c49c53 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px -12px rgba(216,178,106,.45); }
.ip-btn:not(.ip-btn--fantasma):not(.ip-btn--zap):hover {
  background: linear-gradient(180deg, #efd096 0%, var(--acento-forte) 55%, #cda45c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px -12px rgba(216,178,106,.6); }

/* links do rodapé e institucionais: sublinhado que desliza */
.ip-rodape a, .ip-texto a { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--macro); }
.ip-rodape a:hover, .ip-texto a:hover { background-size: 100% 1px; }

/* ------------------------------------------- HERO: O PRETO SE EXPANDE ----- */
/* Pedido do dono, com a captura na mão: o vídeo do hero deve ser ENQUADRADO
   com o lado preto expandido — o preto do filme vira o palco inteiro, de
   borda a borda, sem moldura nem canto arredondado. O vídeo funde no fundo. */
.ip-heroprod__foto--palco { margin-top: var(--e-5); background: #000; }
.ip-heroprod__foto--palco .ip-heroprod__video {
  width: 100%; max-width: none; margin-inline: 0;
  border-radius: 0; box-shadow: none; transform: none;
  aspect-ratio: 16 / 9; max-height: min(72vh, 820px);
  /* contain, não cover: o filme inteiro aparece na proporção dele e o PRETO
     preenche as laterais — o enquadramento exato que o dono pediu no print */
  object-fit: contain; background: #000; }
/* o slide de vídeo apaga o brilho dourado do palco — preto puro atrás */
.ip-heroslide:has(.ip-heroprod__foto--palco) { background: #000; }

@media (prefers-reduced-motion: reduce) {
  .ip-rodape a, .ip-texto a { transition: none; }
}

/* ============================================================================
   v4.4 — PALCO INFINITO: O HERO NA ARQUITETURA DA REFERÊNCIA DE JOGOS
   ----------------------------------------------------------------------------
   Pedido do dono: expandir a área do 17 Pro Max "como o layout da Rockstar",
   de BORDA INFINITA, em todo frontend até 4K. Tradução técnica:
     1. Cada slide do hero vira um palco de VIEWPORT INTEIRO (100svh) — como
        os capítulos de jogo da referência: a mídia É a tela.
     2. O vídeo cobre o palco de borda a borda (object-fit cover, camada
        absoluta). Em 1366×768, 1920×1080 e 4K 3840×2160 a proporção é a
        mesma do filme (16:9): encaixe exato, sem corte. Só telas fora de
        16:9 cortam pelas bordas — o comportamento da própria referência.
     3. Texto e CTA ficam SOBRE o filme, com véu de legibilidade em cima e
        embaixo — o conteúdo desce para o pé do palco, como lá.
   ========================================================================== */

.ip-heroprod { padding-top: 0; }
/* altura DEFINIDA (não mínima): o palco é exatamente a tela, como os
   capítulos da referência — e com altura definida o max-height:100% da
   foto resolve, em vez de deixar a foto natural esticar o palco. */
.ip-heroslide { position: relative; height: 100svh; min-height: 540px;
  display: flex; flex-direction: column; overflow: hidden;
  padding-top: calc(var(--topo-alt) + var(--e-6)); }

/* slide de produto (foto): título no alto, foto respirando no meio, CTA no pé */
.ip-heroslide .ip-heroprod__foto { flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; }
.ip-heroslide .ip-heroprod__foto img { width: auto; max-width: min(1100px, 90vw);
  max-height: 100%; object-fit: contain; }
.ip-heroprod__acoes { padding-bottom: calc(var(--e-7) + 30px); }

/* slide de FILME: borda infinita — o vídeo é o palco inteiro */
.ip-heroslide--filme .ip-heroprod__foto--palco { position: absolute; inset: 0;
  margin: 0; z-index: 0; display: block; }
.ip-heroslide--filme .ip-heroprod__video { position: absolute; inset: 0;
  width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
  object-fit: cover; }
/* véu de legibilidade: forte no pé (onde mora o CTA), leve no topo */
.ip-heroslide--filme::after { content: ''; position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, transparent 32%,
    transparent 58%, rgba(0,0,0,.78) 100%); }
.ip-heroslide--filme .ip-w,
.ip-heroslide--filme .ip-heroprod__acoes { position: relative; z-index: 2; }
/* no palco de filme o conteúdo desce para o pé — a assinatura da referência */
.ip-heroslide--filme { justify-content: flex-end; }
.ip-heroslide--filme .ip-heroprod__titulo {
  filter: drop-shadow(0 3px 20px rgba(0,0,0,.7)); }
.ip-heroslide--filme .ip-heroprod__sub { color: #d6d6db;
  text-shadow: 0 1px 12px rgba(0,0,0,.8); }

/* os pontos do carrossel continuam visíveis sobre o véu */
.ip-heropontos { z-index: 6; }

/* --------------------------------------------- ADEQUAÇÃO ATÉ 4K ---------- */
/* Em monitor grande o palco não pode virar site pequeno centrado: o miolo
   alarga, o tipo cresce junto (sempre bidimensional) e a grade respira. */
@media (min-width: 2200px) {
  :root { --largura: 1560px; --gutter: 48px;
    --t-xl: clamp(1.4rem, min(1.6vw, 2.6vh), 1.9rem);
    --t-lg: clamp(1.1rem, min(1vw, 1.7vh), 1.35rem); }
  .ip-heroprod__titulo { font-size: clamp(3.4rem, min(5vw, 9vh), 7.5rem); }
  .ip-poster { min-height: clamp(420px, 54vh, 780px); }
  .ip-poster--largo { min-height: clamp(500px, 64vh, 900px); }
  .ip-trilho { grid-auto-columns: clamp(300px, 18vw, 440px); }
}
@media (min-width: 3200px) {
  :root { --largura: 1880px;
    --t-md: 1.25rem; --t-sm: 1rem; }
  .ip-heroprod__titulo { font-size: clamp(4.2rem, min(5vw, 9vh), 9rem); }
  .ip-heroprod__sub { max-width: 46ch; }
  .ip-btn { min-height: 52px; padding-inline: 30px; font-size: 1.15rem; }
  .ip-heroponto { width: 34px; height: 5px; }
  .ip-heroponto.is-ativo { width: 52px; }
}

/* celular: o palco continua inteiro, o véu do pé sobe um pouco mais */
@media (max-width: 700px) {
  .ip-heroslide { min-height: 100svh; }
  .ip-heroslide--filme::after {
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 30%,
      transparent 50%, rgba(0,0,0,.84) 100%); }
}

/* ============================================================================
   v4.5 — ENQUADRAMENTO DE FOTO NO CELULAR
   ----------------------------------------------------------------------------
   O dono testou no celular: "as fotos estão muito grandes, enquadre certinho".
   Dois problemas distintos, duas correções:
     1. CORTE: object-fit cover cortava a foto real do produto (foto de
        aparelho em pé perdia topo e base). Produto em loja se mostra INTEIRO
        — vira contain, com respiro, no palco do card. Vale em toda tela.
     2. ESCALA: no celular os cartazes de categoria e os trilhos ocupavam
        alturas de desktop. Encolhem para a proporção do polegar.
   ========================================================================== */

/* o dono decidiu na tela real: a foto PREENCHE o card inteiro, sem sobras
   (cover). Na galeria do produto ela continua inteira (contain) — lá o
   cliente examina o aparelho; no card, a foto é vitrine. */
.ip-card__foto img { object-fit: cover; padding: 0; }
.ip-galeria__palco img { object-fit: contain; background: var(--carta-2); }

@media (max-width: 700px) {
  /* cartazes de categoria: presença sem engolir a tela */
  .ip-poster { min-height: clamp(200px, 30vh, 280px); }
  .ip-poster--largo { min-height: clamp(230px, 34vh, 320px); }
  .ip-poster__nome { font-size: 1.5rem; }
  .ip-poster--largo .ip-poster__nome { font-size: 1.7rem; }
  .ip-poster__conteudo { padding: var(--e-4); }

  /* trilhos: card do tamanho do polegar, ~2 por tela */
  .ip-trilho { grid-auto-columns: clamp(160px, 44vw, 220px); }
  .ip-trilho .ip-card__nome { font-size: var(--t-sm); }
  .ip-trilho .ip-card__preco { font-size: 1rem; }

  /* galeria do produto: palco quadrado compacto */
  .ip-galeria__palco { aspect-ratio: 1/1; max-height: 64vw; }

  /* grade da loja: fotos dos cards mais baixas que largas — mais produtos
     por tela, foto inteira do mesmo jeito */
  .ip-grade .ip-card__foto { aspect-ratio: 1/1; }
  .ip-grade { gap: 10px; }
  .ip-card__corpo { padding: var(--e-3); }
}

/* ============================================================================
   v4.6 — CONTA, CHECKOUT E PIX (a parte que TRANSFORMA visita em dinheiro)
   ========================================================================== */

.ip-w--estreito { max-width: 560px; }
.ip-entrada { padding-block: var(--e-6); }
.ip-subtitulo { font-size: var(--t-xl); margin-top: var(--e-7); letter-spacing: -.02em; }

.ip-alerta { margin-top: var(--e-4); padding: 12px 16px; border-radius: var(--raio-sm);
  font-size: var(--t-sm); border: 1px solid var(--linha-2); }
.ip-alerta--erro { border-color: rgba(255,120,90,.5); color: #ffb3a0; background: rgba(255,120,90,.08); }
.ip-alerta--info { border-color: var(--acento-borda); color: var(--acento-forte); background: var(--acento-fundo); }

.ip-social { display: grid; gap: 10px; margin-top: var(--e-5); }
.ip-ou { display: flex; align-items: center; gap: 14px; margin-block: var(--e-5); color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; }
.ip-ou::before, .ip-ou::after { content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-2), transparent); }

.ip-abas__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio-pill);
  padding: 5px; margin-top: var(--e-5); }
.ip-abas__botoes button { border: 0; background: transparent; padding: 10px 8px; cursor: pointer;
  border-radius: var(--raio-pill); font-weight: 600; font-size: var(--t-sm); color: var(--txt-2);
  transition: background var(--micro), color var(--micro); }
.ip-abas__botoes button.is-ativa { background: var(--acento); color: #0a0a0c; }
.ip-aba:not(.is-ativa) { display: none !important; }
.ip-aba.is-ativa { display: grid; }

.ip-form { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.ip-form label { display: grid; gap: 6px; font-size: var(--t-sm); font-weight: 600; }
.ip-form input[type=email], .ip-form input[type=password], .ip-form input[type=text], .ip-form input[type=tel] {
  width: 100%; box-sizing: border-box; padding: 13px 16px; font: inherit; color: var(--txt);
  background: var(--carta); border: 1px solid var(--linha-2); border-radius: var(--raio-sm);
  transition: border-color var(--micro); }
.ip-form input:focus { outline: none; border-color: var(--acento); }
.ip-opcional { font-weight: 400; color: var(--txt-3); }
.ip-legal { font-size: var(--t-xs); color: var(--txt-3); }
.ip-legal a { color: var(--txt-2); text-decoration: underline; }

.ip-escolha { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.ip-escolha legend { font-size: var(--t-sm); font-weight: 600; margin-bottom: 8px; }
.ip-escolha__opcao { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--linha-2); border-radius: var(--raio-sm);
  background: var(--carta); transition: border-color var(--micro); }
.ip-escolha__opcao:has(input:checked) { border-color: var(--acento); background: var(--acento-fundo); }
.ip-escolha__opcao input { accent-color: var(--acento); margin-top: 3px; }
.ip-escolha__opcao span { display: grid; gap: 2px; font-size: var(--t-sm); }
.ip-escolha__opcao small { color: var(--txt-2); font-weight: 400; }

.ip-resumo-compra { display: flex; gap: 16px; align-items: center; margin-top: var(--e-5);
  padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--carta); }
.ip-resumo-compra img { width: 84px; height: 84px; object-fit: contain; border-radius: var(--raio-sm);
  background: var(--carta-2); padding: 6px; box-sizing: border-box; flex: 0 0 auto; }
.ip-resumo-compra strong { display: block; letter-spacing: -.014em; }
.ip-resumo-compra__cond { font-size: var(--t-xs); color: var(--txt-2); }
.ip-resumo-compra__preco { margin-top: 6px; font-size: var(--t-md); }
.ip-resumo-compra__preco b { color: var(--verde, #30d158); font-variant-numeric: tabular-nums; }
.ip-resumo-compra__preco small { display: block; color: var(--txt-3); font-size: var(--t-xs); }

.ip-pix { margin-top: var(--e-5); display: grid; gap: var(--e-4); justify-items: center;
  padding: var(--e-6); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--carta); }
.ip-pix__qr { width: 240px; height: 240px; display: grid; place-items: center;
  background: #fff; border-radius: var(--raio-sm); padding: 10px; box-sizing: content-box; }
.ip-pix__qr img, .ip-pix__qr canvas { width: 240px; height: 240px; image-rendering: pixelated; }
.ip-pix__passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--txt-2); }
.ip-pix__passos b { color: var(--txt); }
.ip-pix__status { font-size: var(--t-sm); color: var(--txt-2); display: flex; align-items: center; gap: 8px; }
.ip-pix__status a { color: var(--acento); font-weight: 600; }
.ip-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); display: inline-block;
  animation: ip-pulsar 1.6s ease-in-out infinite; }
@keyframes ip-pulsar { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

.ip-pedido-pago .ip-btn { margin-top: var(--e-5); }

.ip-lista-pedidos { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: 10px; }
.ip-lista-pedidos a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio-sm);
  background: var(--carta); transition: border-color var(--micro); }
.ip-lista-pedidos a:hover { border-color: var(--linha-2); }
.ip-lista-pedidos b { font-variant-numeric: tabular-nums; }
.ip-lista-pedidos small { margin-left: auto; color: var(--txt-3); }
.ip-pill { font-size: var(--t-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--raio-pill);
  border: 1px solid var(--linha-2); color: var(--txt-2); }
.ip-pill--ok { border-color: rgba(48,209,88,.45); color: #7ee2a0; background: rgba(48,209,88,.08); }
.ip-pill--aguarda { border-color: var(--acento-borda); color: var(--acento-forte); background: var(--acento-fundo); }

@media (prefers-reduced-motion: reduce) { .ip-pulso { animation: none; } }

/* ações do pedido pago: recibo + WhatsApp lado a lado, nota embaixo */
.ip-acoes-pedido { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--e-5); }
.ip-form-nota { margin-top: var(--e-3); }

/* ============================================================================
   v4.7 — CELULAR EM PRIMEIRO LUGAR + ECONOMIA EM DINHEIRO + ENTREGA BH
   ----------------------------------------------------------------------------
   O dono cravou: "a maioria dos meus clientes estão nas mãos" — o celular é a
   loja principal, não a versão reduzida. Três decisões desta passada:
     1. A economia do Pix aparece em REAIS ("economize R$ 447"), nunca em
        porcentagem — dinheiro na mão convence, percentual é matemática.
     2. Fotos maiores no celular: galeria em largura total, trilhos e cartazes
        com presença de vitrine (a reclamação era "a foto está menor").
     3. Entrega vira argumento: hoje em BH, Brasil inteiro rastreado.
   ========================================================================== */

/* --- economia do Pix em dinheiro ------------------------------------------ */
.ip-card__pixeco { display: block; font-size: var(--t-xs); color: var(--verde, #35d07f);
  opacity: .92; font-weight: 600; margin-top: 1px; }
.ip-heroprod__pixeco { color: var(--verde, #35d07f); font-weight: 600; }

/* --- faixa de entrega (home) e itens -------------------------------------- */
.ip-entrega { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3);
  margin-block: var(--e-4) var(--e-2); }
.ip-entrega__item { display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-sm);
  background: var(--carta); padding: 14px 18px; }
.ip-entrega__icone { flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--acento-fundo); color: var(--acento-forte); }
.ip-entrega__icone svg { width: 20px; height: 20px; }
.ip-entrega__texto b { display: block; font-size: var(--t-sm); letter-spacing: -.01em; }
.ip-entrega__texto span { font-size: var(--t-xs); color: var(--txt-2); }
@media (max-width: 700px) {
  .ip-entrega { grid-template-columns: 1fr; gap: 10px; }
  .ip-entrega__item { padding: 12px 14px; }
}

/* --- tabela de parcelas no produto ------------------------------------ */
.ip-parcelas__abrir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--acento-borda);
  background: var(--acento-fundo); color: var(--acento); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.ip-parcelas__abrir svg { width: 16px; height: 16px; }
.ip-parcelas__abas { display: flex; gap: 6px; margin-bottom: 8px; }
.ip-parcelas__aba { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--linha-2); background: transparent; color: var(--txt-2); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.ip-parcelas__aba.is-on { background: var(--acento); color: #1a1400; border-color: var(--acento); }
.ip-parcelas__abrir:hover { background: rgba(255,255,255,.08); }
.ip-parcelas { margin: 10px 0 4px; padding: 10px 14px; border-radius: 14px; background: var(--carta-2); border: 1px solid var(--linha); }
.ip-parcelas__linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-sm); }
.ip-parcelas__linha:last-of-type { border-bottom: 0; }
.ip-parcelas__total { color: var(--txt-2); }
.ip-parcelas__nota { margin-top: 8px; font-size: var(--t-xs); color: var(--txt-2); }

/* --- ferramentas de fechar na hora (página do produto) ------------------ */
.ip-parcelas__linha--link { text-decoration: none; color: inherit; }
.ip-parcelas__linha--link > span:first-child { white-space: nowrap; }
.ip-parcelas__linha--link .ip-parcelas__total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ip-parcelas__linha--link em { font-style: normal; font-size: var(--t-xs); color: var(--acento); white-space: nowrap; }
.ip-parcelas__linha--link:hover { background: rgba(255,255,255,.04); }
.ip-usado { display: flex; align-items: center; gap: 12px; margin-top: var(--e-4); padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--acento-borda); background: var(--acento-fundo); color: var(--txt); text-decoration: none; }
.ip-usado svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--acento); }
.ip-usado svg:last-child { margin-left: auto; color: var(--txt-2); }
.ip-usado b { display: block; font-size: var(--t-sm); }
.ip-usado small { display: block; color: var(--txt-2); font-size: var(--t-xs); margin-top: 2px; }
.ip-usado:hover { border-color: var(--acento); }
.ip-prova { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--t-xs); color: var(--txt-2); }
.ip-prova svg { width: 14px; height: 14px; color: #ff8a3d; }
.ip-compra-fixa__valor small { font-size: var(--t-xs); font-weight: 600; color: #1fa86b; margin-left: 2px; }
.ip-compra-fixa__zap { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(31,168,107,.5); color: #1fa86b; }
.ip-compra-fixa__zap svg { width: 20px; height: 20px; }

/* --- compartilhar produto (mesma frase pra dono, vendedor e cliente) ------- */
.ip-share { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.ip-share__rotulo { display: block; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--txt-2); margin-bottom: 8px; }
.ip-share__botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ip-share__bt { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px;
  border-radius: 999px; border: 1px solid var(--linha-2); background: transparent;
  color: var(--txt); font: inherit; font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.ip-share__bt:hover { background: rgba(255,255,255,.08); border-color: var(--txt-2); }
.ip-share__bt svg { width: 16px; height: 16px; }
.ip-share__bt--zap { border-color: #1fa86b; color: #1fa86b; }
.ip-share__bt--zap:hover { background: rgba(31,168,107,.14); }
.ip-share__aviso { display: block; min-height: 1.2em; margin-top: 6px; font-size: var(--t-xs); color: #1fa86b; }
.ip-card__share { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid;
  place-items: center; cursor: pointer; opacity: .85; }
.ip-card__share:hover { opacity: 1; background: rgba(0,0,0,.8); }
.ip-card__share svg { width: 16px; height: 16px; }

/* --- frete por CEP na página do produto ----------------------------------- */
.ip-frete { margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid var(--linha); }
.ip-frete__rotulo { display: block; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--txt-2);
  margin-bottom: 8px; }
.ip-frete__linha { display: flex; gap: 8px; }
.ip-frete__linha input { flex: 1; min-width: 0; border: 1px solid var(--linha-2);
  border-radius: var(--raio-pill); background: var(--carta); color: var(--txt);
  padding: 11px 16px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ip-frete__linha input:focus { outline: none; border-color: var(--acento-borda); }
.ip-frete__linha button { border: 1px solid var(--linha-2); background: transparent;
  color: var(--txt); border-radius: var(--raio-pill); padding: 0 20px;
  font-weight: 600; font-size: var(--t-sm); cursor: pointer;
  transition: border-color .15s, color .15s; }
.ip-frete__linha button:hover { border-color: var(--acento-borda); color: var(--acento-forte); }
.ip-frete__linha button:disabled { opacity: .5; cursor: wait; }
.ip-frete__lista { list-style: none; margin: var(--e-3) 0 0; padding: 0; }
.ip-frete__lista li { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm); }
.ip-frete__lista li:last-child { border-bottom: 0; }
.ip-frete__lista small { color: var(--txt-3); margin-left: 6px; }
.ip-frete__lista b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-frete__nota { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--txt-2); }
.ip-frete__nota b { color: var(--verde, #35d07f); }
.ip-frete__erro { margin-top: var(--e-3); font-size: var(--t-xs); color: #ffb3a0; }

/* --- celular: a foto cresce até virar vitrine ----------------------------- */
@media (max-width: 700px) {
  /* galeria do produto: a foto toma a largura inteira da tela — o cliente
     examina o aparelho sem apertar os olhos */
  .ip-galeria__palco { aspect-ratio: 1/1; max-height: none; }

  /* trilhos (mais vendidos/procurados): card grande de vitrine, ~1,6 por tela */
  .ip-trilho { grid-auto-columns: clamp(210px, 60vw, 280px); }

  /* cartazes de categoria com presença de cinema */
  .ip-poster { min-height: clamp(250px, 38vh, 360px); }
  .ip-poster--largo { min-height: clamp(290px, 44vh, 420px); }
  /* linhas principais: cartaz de TELA CHEIA na vertical (svh = altura real no
     Safari do iPhone, sem a barra de endereço "roubar" o fim do cartaz) */
  .ip-posters--cheio { grid-template-columns: 1fr; gap: 12px; }
  .ip-posters--cheio .ip-poster { min-height: 78vh; min-height: 78svh; }
  .ip-posters--cheio .ip-poster__nome { font-size: 2rem; }
  .ip-posters--cheio .ip-poster__meta { display: block; margin-top: 4px; font-size: 1rem; }
  .ip-posters--cheio .ip-poster__cta { margin-top: 10px; }
  /* o resto da loja em DUAS colunas no polegar: 11 categorias cabem em
     ~3 telas em vez de 11 — o cliente enxerga a loja inteira sem cansar */
  .ip-posters--grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ip-posters--grade .ip-poster { min-height: clamp(170px, 26vh, 230px); }
  .ip-posters--grade .ip-poster__conteudo { padding: var(--e-3); }
  .ip-posters--grade .ip-poster__nome { font-size: 1.15rem; }
  .ip-posters--grade .ip-poster__meta { display: block; margin-top: 2px; font-size: .85rem; }
  .ip-posters--grade .ip-poster__cta { margin-top: 6px; font-size: .8rem; }

  /* preço e economia legíveis com o aparelho na mão */
  .ip-card__preco { font-size: 1.06rem; }
  .ip-preco-bloco__valor { font-size: 2rem; }
}

/* ============================================================================
   v4.8 — VÍDEO NO CARD (acorda no hover / quando domina a tela no celular)
   ========================================================================== */
.ip-card__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .35s ease;
  pointer-events: none; }
.ip-card__video.is-rodando { opacity: 1; }
.ip-card__video--solo { opacity: 1; }

/* Autofill do Chrome/Safari pintava o campo de branco — mantém o tema escuro */
.ip-form input:-webkit-autofill, .ip-form input:-webkit-autofill:hover, .ip-form input:-webkit-autofill:focus, .ip-form textarea:-webkit-autofill, .ip-form select:-webkit-autofill,
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--txt, #f2eff7); caret-color: var(--txt, #f2eff7);
  -webkit-box-shadow: 0 0 0 1000px var(--carta, #141519) inset; box-shadow: 0 0 0 1000px var(--carta, #141519) inset;
  border-color: var(--acento, #d4af37); transition: background-color 9999s ease-out 0s; }
/* "Complete o seu": 2 por linha no celular, 3 no desktop */
.ip-grade--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .ip-grade--3 { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================================
   v5.0 — SOM SOB DEMANDA NO HERO + PRODUTO "EM BREVE"
   ----------------------------------------------------------------------------
   O filme do hero começa mudo (exigência dos navegadores para autoplay). Um
   botão discreto no canto liga o áudio original; ligado, o carrossel para de
   girar para não cortar o som no meio. "Em breve" = produto sem preço: entra
   na vitrine como lançamento e captura quem quer ser avisado.
   ========================================================================== */
.ip-heroslide--filme .ip-heroprod__foto--palco { z-index: auto; }
.ip-heroprod__som { position: absolute; z-index: 3;
  right: clamp(14px, 3vw, 40px); bottom: clamp(88px, 12vh, 132px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 12px; border-radius: 999px;
  color: #fff; font: 600 .82rem/1 var(--fonte, inherit); letter-spacing: .01em;
  background: rgba(10,10,12,.55); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.ip-heroprod__som:hover { background: rgba(10,10,12,.75); border-color: rgba(212,175,55,.7); }
.ip-heroprod__som:active { transform: scale(.97); }
.ip-heroprod__som:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 2px; }
.ip-heroprod__som-ico { display: inline-grid; width: 20px; height: 20px; }
.ip-heroprod__som-ico svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.ip-heroprod__som-ico svg:last-child { display: none; }
.ip-heroprod__som[aria-pressed="true"] { border-color: rgba(212,175,55,.85); color: #f5dc8a; }
.ip-heroprod__som[aria-pressed="true"] .ip-heroprod__som-ico svg:first-child { display: none; }
.ip-heroprod__som[aria-pressed="true"] .ip-heroprod__som-ico svg:last-child { display: block; }
.ip-heroprod__cheia { right: auto; left: clamp(14px, 3vw, 40px); }
@media (max-width: 700px) {
  /* CELULAR: o filme é 16:9 e a tela é em pé — com "cover" só sobrava uma
     faixa do meio. Passa a "contain": o filme inteiro aparece, na largura
     total, e o preto do próprio filme preenche o resto do palco. O botão
     "Tela cheia" abre o player nativo (deitado) com som. */
  .ip-heroslide--filme .ip-heroprod__video { object-fit: contain; object-position: center 40%; }
  .ip-heroslide--filme::after { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 18%,
    transparent 70%, rgba(0,0,0,.85) 100%); }
  .ip-heroprod__som { bottom: auto; top: calc(var(--topo-alt, 64px) + 14px); right: 14px; left: auto; padding: 9px 12px; gap: 6px; font-size: .78rem; }
  .ip-heroprod__cheia { right: auto; left: 14px; }
}
/* selo e bloco "Em breve" */
.ip-selo--breve { background: linear-gradient(135deg, #f0cf7a, #d4af37); color: #1a1305; }
.ip-card__breve { font-weight: 700; color: #f0cf7a; letter-spacing: .01em; }
.ip-card__breve small { display: block; font-weight: 500; color: var(--txt-2, #8b8695); margin-top: 2px; }
.ip-breve { padding: var(--e-4, 18px); border: 1px solid rgba(212,175,55,.35); border-radius: var(--raio, 14px);
  background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.03)); }
.ip-breve__titulo { font-size: var(--t-lg, 1.35rem); font-weight: 700; color: #f0cf7a; }
.ip-breve__nota { color: var(--txt-2, #8b8695); margin-top: 4px; font-size: .95rem; }

/* ---- fundo desfocado + arte viva do hero de filme (v5.1) ------------------ */
.ip-heroprod__fundo { position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 30%; }
.ip-heroslide--filme .ip-heroprod__video { z-index: 1; }
/* o filme inteiro é clicável; botões e ações ficam por cima do link */
.ip-heroslide__link { position: absolute; inset: 0; z-index: 2; display: block; }
.ip-heroslide--filme .ip-heroprod__acoes, .ip-heroslide--filme .ip-heroprod__som { z-index: 3; }
.ip-heroslide--filme .ip-w { pointer-events: none; }
/* a foto do produto mora embaixo do botão de reserva */
.ip-heroslide--filme .ip-heroprod__acoes { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); margin-top: var(--e-3, 14px); padding-bottom: var(--e-4, 20px); }
.ip-heroslide--filme .ip-heroprod__sub { margin-top: var(--e-2, 8px); }
.ip-heroprod__arte { display: block; width: min(7vw, 96px); aspect-ratio: 900 / 893; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  animation: ip-flutua 6s ease-in-out infinite; will-change: transform; }
.ip-heroprod__arte.is-toque { animation: none; transition: transform .08s linear; }
.ip-heroprod__arte:focus-visible { outline: 2px solid var(--gold, #d4af37); outline-offset: 3px; }
.ip-heroslide .ip-heroprod__foto .ip-heroprod__arte img, .ip-heroprod__arte img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; margin: 0; }
.ip-heroprod__arte::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, transparent 38%, transparent 62%, rgba(255,255,255,.08) 100%);
  mix-blend-mode: screen; }
.ip-heroprod__arte { position: relative; }
@keyframes ip-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .ip-heroprod__arte { animation: none; } }
@media (max-width: 700px) {
  /* celular: o filme inteiro na largura da tela, e o preto do palco vira a
     mesma foto desfocada */
  .ip-heroslide--filme .ip-heroprod__video { object-position: center 36%; background: transparent; }
  .ip-heroprod__arte { width: 24vw; border-radius: 14px; }
  .ip-heroslide--filme::after { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 16%,
    transparent 58%, rgba(0,0,0,.88) 100%); }
}

/* v5.1 — iPhones, o carro-chefe, em linha propria: Lacrados em cima,
   Seminovos logo abaixo, cartaz de cinema em qualquer tela. */
@media (min-width: 900px) { .ip-posters--cheio { grid-template-columns: 1fr; } }
.ip-posters--cheio .ip-poster { min-height: clamp(320px, 56vh, 620px); }
.ip-posters--cheio .ip-poster .ip-poster__nome { font-size: clamp(2.2rem, min(4.6vw, 6.6vh), 4.2rem); }

/* ═══ FOTO REAL no catálogo — o produto na mão, foto de verdade (banner "vitrine") ═══ */
.ip-fotoreal { position: relative; display: block; overflow: hidden; border-radius: var(--raio); margin: 0 0 var(--e-5);
  background: #0e0e12; border: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; isolation: isolate; }
.ip-fotoreal img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; object-position: center;
  transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ip-fotoreal:hover img { transform: scale(1.025); }
.ip-fotoreal__veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.ip-fotoreal__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--e-5); display: grid; gap: 4px; }
.ip-fotoreal__texto small { font-size: var(--t-xs, 12px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.ip-fotoreal__texto b { font-size: clamp(20px, 3.2vw, 34px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.ip-fotoreal__texto span { color: rgba(255,255,255,.78); font-size: var(--t-sm); max-width: 52ch; }
.ip-fotoreal__texto em { font-style: normal; font-weight: 700; color: #fff; margin-top: 4px; }
@media (max-width: 700px) {
  .ip-fotoreal img { max-height: none; object-fit: contain; background: #0e0e12; }
  .ip-fotoreal__texto { padding: var(--e-4); }
  .ip-fotoreal__veu { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%); }
}