/* ============================================================
   LP-B · OFERTA — 2 zonas (livro 3D esq · valor+preço dir), auto-play, SEM travar scroll.
   + FUNDO AMBIENTE na página toda (blobs fluindo). Isolado, escopado.
   ============================================================ */
#oferta.b-offer-section, #oferta {
  height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; overflow: visible !important; position: relative;
  --vo-navy: #09212C; --vo-navy2: #12313D; --vo-gold: #97927D; --vo-gold2: #b6ad91; --vo-goldsoft: #D9D4C3; --vo-risco: #c45a4d;
  --vo-serif: Georgia, "Times New Roman", serif; --vo-sans: "Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
}
#oferta .vo-pin { position: relative; overflow: hidden; color: #fff; font-family: var(--vo-sans);
  background: radial-gradient(circle at 82% 6%, rgba(151,146,125,0.18), transparent 44%), linear-gradient(160deg,#061820,var(--vo-navy) 58%,var(--vo-navy2)); }
#oferta .vo-pin::before { content:""; position:absolute; inset:0; opacity:0.4; pointer-events:none;
  background-image: linear-gradient(rgba(151,146,125,0.05) 1px,transparent 1px), linear-gradient(90deg, rgba(151,146,125,0.05) 1px,transparent 1px); background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 58% 44%, #000, transparent 80%); mask-image: radial-gradient(circle at 58% 44%, #000, transparent 80%); }
#oferta .vo-stage { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 54px clamp(20px,4vw,48px);
  display: grid; grid-template-columns: minmax(0,0.88fr) minmax(0,1.12fr); gap: 34px; align-items: center; }

/* ----- LIVRO 3D: imagem como capa + lombada + miolo CSS ----- */
#oferta .vo-book3d {
  position: relative;
  display: inline-block;
  width: 220px;
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0;
  filter: drop-shadow(0 32px 48px rgba(0,0,0,0.62)) drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

#oferta .vo-book-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 4px 4px 0;
}

/* Lombada */
#oferta .vo-book3d::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 26px;
  background: linear-gradient(to right, #030b10 0%, #071c26 55%, #09212C 100%);
  border-radius: 3px 0 0 3px;
  transform-origin: right center;
  transform: rotateY(-90deg);
}

/* Miolo (páginas) */
#oferta .vo-book3d::after {
  content: '';
  position: absolute;
  top: 1%; right: 0; bottom: 1%;
  width: 16px;
  background: linear-gradient(90deg, #c0b8a8 0%, #ddd6c8 35%, #ede8df 100%);
  transform-origin: left center;
  transform: rotateY(90deg);
  border-radius: 0 1px 1px 0;
}

#oferta .vo-prod { display: grid; place-items: center; height: 392px; position: relative; z-index: 1; }
#oferta .vo-floor { position: absolute; bottom: 8%; left: 50%; width: 270px; height: 48px; transform: translateX(-50%) rotateX(72deg); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.42), transparent 70%); filter: blur(6px); }
#oferta .vo-float { transform-style: preserve-3d; }
#oferta .vo-book { position: relative; width: 210px; height: 290px; transform-style: preserve-3d; will-change: transform; }
#oferta .vo-book > div { position: absolute; overflow: hidden; }
#oferta .vo-bf,#oferta .vo-bb { width: 210px; height: 290px; border-radius: 3px 7px 7px 3px; }
#oferta .vo-bf { transform: translateZ(21px); background: linear-gradient(135deg, rgba(151,146,125,0.22), transparent 40%), linear-gradient(180deg,#11303d,#071c25); border: 1px solid rgba(217,212,195,0.32); box-shadow: inset 0 0 36px rgba(0,0,0,0.35); }
#oferta .vo-bb { transform: rotateY(180deg) translateZ(21px); background: linear-gradient(180deg,#0c2731,#06181f); border: 1px solid rgba(217,212,195,0.16); }
#oferta .vo-bl { width: 42px; height: 290px; left: 84px; transform: rotateY(-90deg) translateZ(105px); background: linear-gradient(180deg,var(--vo-gold2),var(--vo-gold) 50%,#7f7a66); box-shadow: inset 0 0 14px rgba(0,0,0,0.4); }
#oferta .vo-br { width: 42px; height: 290px; left: 84px; transform: rotateY(90deg) translateZ(105px); background: repeating-linear-gradient(90deg,#efe9da,#efe9da 1px,#d9d2bf 2px,#efe9da 3px); }
#oferta .vo-bt { width: 210px; height: 42px; top: 124px; transform: rotateX(90deg) translateZ(145px); background: repeating-linear-gradient(90deg,#efe9da,#efe9da 1px,#d2cbb8 2px,#efe9da 3px); }
#oferta .vo-bd { width: 210px; height: 42px; top: 124px; transform: rotateX(-90deg) translateZ(145px); background: repeating-linear-gradient(90deg,#e7e0cf,#e7e0cf 1px,#cfc7b3 2px,#e7e0cf 3px); }
#oferta .vo-cover { position: absolute; inset: 0; padding: 24px 21px; display: flex; flex-direction: column; }
#oferta .vo-cover .k { color: var(--vo-goldsoft); font-size: 0.56rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
#oferta .vo-cover .t { margin-top: auto; font-family: var(--vo-serif); font-size: 1.5rem; line-height: 1.05; color: #fff; }
#oferta .vo-cover .s { margin-top: 7px; color: var(--vo-goldsoft); font-size: 0.68rem; }
#oferta .vo-cover .foil { position: absolute; left: 21px; top: 24px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--vo-gold); background: radial-gradient(circle, rgba(151,146,125,0.4), transparent 70%); }
#oferta .vo-cover::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.2) 48%, rgba(217,212,195,0.36) 50%, transparent 60%); transform: translateX(-30%); animation: voSweep 5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes voSweep { 0%,72%{transform: translateX(-60%)} 88%,100%{transform: translateX(60%)} }
#oferta .vo-spine { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#oferta .vo-spine span { transform: rotate(90deg); white-space: nowrap; font-size:0.5rem; font-weight:900; letter-spacing:0.2em; color:rgba(9,33,44,0.7); text-transform:uppercase; }

#oferta .vo-reader { position: absolute; right: 0; bottom: 8%; z-index: 3; width: 188px; border-radius: 15px; background: #fff; color: var(--vo-navy); box-shadow: 0 28px 56px rgba(0,0,0,0.45); transform-origin: bottom right; opacity: 0; will-change: transform, opacity; }
#oferta .vo-reader-card { border-radius: 15px; overflow: hidden; }
#oferta .vo-reader-top { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: linear-gradient(180deg,#0e2c38,var(--vo-navy)); }
#oferta .vo-reader-top .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(217,212,195,0.5); }
#oferta .vo-reader-top .rt { margin-left: 5px; color: var(--vo-goldsoft); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
#oferta .vo-reader-body { padding: 9px 13px 12px; }
#oferta .vo-reader-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 0.76rem; font-weight: 700; color: #2a343a; }
#oferta .vo-reader-row + .vo-reader-row { border-top: 1px solid rgba(9,33,44,0.08); }
#oferta .vo-reader-row .ri { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(151,146,125,0.16); color: var(--vo-gold); flex: 0 0 auto; }
#oferta .vo-reader-row .ri svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#oferta .vo-reader-badge { position: absolute; top: -10px; left: -8px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--vo-gold); color: var(--vo-navy); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(0,0,0,0.3); transform: rotate(-6deg); }

/* ----- VALOR + PREÇO (direita, juntos) ----- */
#oferta .vo-offer { align-self: center; }
#oferta .vo-eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:9px; color:var(--vo-goldsoft); font-size:0.74rem; font-weight:900; letter-spacing:0.16em; text-transform:uppercase; }
#oferta .vo-eyebrow::before { content:""; width:22px; height:2px; background:var(--vo-gold); }
#oferta .vo-offer > h2 { margin:0 0 13px; font-family:var(--vo-serif); font-weight:500; font-size:clamp(1.4rem,2.1vw,1.9rem); line-height:1.08; color:#fff; }
#oferta .vo-items { list-style:none; margin:0; padding:0; display:grid; gap:1px; }
#oferta .vo-it { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:start; gap:9px; padding:5px 2px; border-bottom:1px solid rgba(151,146,125,0.13); opacity:0.16; transform:translateX(-8px); transition:opacity .4s, transform .4s; }
#oferta .vo-it .ck { width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(151,146,125,0.14); color:var(--vo-gold); transform:scale(0.4); transition:transform .3s cubic-bezier(.2,1.2,.4,1.2), background .3s; }
#oferta .vo-it.st .ck { transform:scale(1); background:var(--vo-gold); color:var(--vo-navy); }
#oferta .vo-it.in { opacity:1; transform:none; }
#oferta .vo-it .ck svg { width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
#oferta .vo-it .txt { min-width:0; }
#oferta .vo-it .nm { display:block; font-size:0.88rem; font-weight:700; color:#fff; line-height:1.16; }
#oferta .vo-it .d { display:block; margin-top:1px; font-size:0.71rem; color:rgba(255,255,255,0.55); line-height:1.3; }
#oferta .vo-it .pr { position:relative; align-self:start; margin-top:1px; font-size:0.88rem; font-weight:800; color:rgba(255,255,255,0.68); white-space:nowrap; }
#oferta .vo-it .pr::after { content:""; position:absolute; left:-3px; right:-3px; top:52%; height:2px; background:var(--vo-risco); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.5,0,.2,1); }
#oferta .vo-it.st .pr { color:rgba(255,255,255,0.4); }
#oferta .vo-it.st .pr::after { transform:scaleX(1); }

#oferta .vo-price { margin-top:14px; padding-top:14px; border-top:1px solid rgba(151,146,125,0.22); display:flex; align-items:flex-end; flex-wrap:wrap; gap:6px 22px; }
#oferta .vo-price-l { flex:1 1 180px; min-width:160px; }
#oferta .vo-plabel { display:block; min-height:1.1em; color:rgba(255,255,255,0.72); font-size:0.86rem; font-weight:700; }
#oferta .vo-pwas { height:0; overflow:hidden; opacity:0; transition:opacity .3s,height .3s; }
#oferta .vo-pwas.show { height:1.4em; opacity:1; }
#oferta .vo-pwas .w { position:relative; font-family:var(--vo-serif); font-size:1.3rem; color:rgba(255,255,255,0.5); }
#oferta .vo-pwas .w::after { content:""; position:absolute; left:-3px; right:-3px; top:52%; height:2px; background:var(--vo-risco); }
#oferta .vo-num { display:flex; align-items:baseline; gap:5px; font-family:var(--vo-serif); line-height:1; }
#oferta .vo-num .cur { font-size:1.6rem; color:var(--vo-goldsoft); }
#oferta .vo-num .n { font-size:clamp(3rem,4.6vw,4.4rem); font-weight:500; letter-spacing:-0.02em; }
#oferta .vo-num.pop { animation: voNumpop .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes voNumpop { 0%{transform:scale(.82)} 100%{transform:scale(1)} }
#oferta .vo-num.struck { position:relative; }
#oferta .vo-num.struck::after { content:""; position:absolute; left:4%; right:18%; top:52%; height:4px; border-radius:2px; background:var(--vo-risco); transform:scaleX(var(--sx,0)); transform-origin:left; }
#oferta .vo-price-r { flex:1 1 240px; min-width:220px; }
#oferta .vo-coupon { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 12px; border-radius:10px; border:1px dashed var(--vo-gold); background:rgba(151,146,125,0.12); opacity:0; transform:translateY(8px) scale(.97); transition:opacity .35s cubic-bezier(.2,.9,.3,1.3), transform .35s cubic-bezier(.2,.9,.3,1.3); }
#oferta .vo-coupon.pop { opacity:1; transform:none; }
#oferta .vo-coupon .cd { font-weight:900; letter-spacing:0.08em; color:var(--vo-goldsoft); font-size:0.82rem; }
#oferta .vo-coupon .off { margin-left:auto; padding:3px 9px; border-radius:6px; background:var(--vo-gold); color:var(--vo-navy); font-weight:900; font-size:0.78rem; }
#oferta .vo-cta { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:10px; background:var(--vo-gold); color:var(--vo-navy); font-weight:900; font-size:0.96rem; text-decoration:none; box-shadow:0 14px 28px rgba(0,0,0,0.28); transition:filter .2s, transform .2s; }
#oferta .vo-cta:hover { filter:brightness(1.06); transform:translateY(-1px); }
#oferta .vo-cta svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#oferta .vo-guar { margin:8px 0 0; font-size:0.74rem; color:rgba(255,255,255,0.55); }

@media (max-width: 900px) {
  #oferta .vo-stage { grid-template-columns: 1fr; gap: 22px; padding: 44px clamp(18px,5vw,28px); }
  #oferta .vo-prod { height: 268px; }
  #oferta .vo-book { width: 168px; height: 232px; }
  #oferta .vo-reader { right: 4%; bottom: 4%; width: 168px; }
  #oferta .vo-price { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) { #oferta .vo-cover::after { animation: none !important; } }

/* ============================================================
   FUNDO AMBIENTE — blobs suaves fluindo na página toda (estilo cre8tera)
   ============================================================ */
.vo-ambient { position: fixed; inset: -25vmax; z-index: 7; pointer-events: none; overflow: hidden;
  mix-blend-mode: soft-light; opacity: 0.85; }
.vo-ambient .vo-blob { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.vo-ambient .vo-blob--1 { width: 62vmax; height: 62vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle, rgba(151,146,125,0.85), transparent 62%); animation: voAmb1 30s ease-in-out infinite alternate; }
.vo-ambient .vo-blob--2 { width: 54vmax; height: 54vmax; right: -6vmax; top: 18vmax;
  background: radial-gradient(circle, rgba(217,212,195,0.7), transparent 60%); animation: voAmb2 38s ease-in-out infinite alternate; }
.vo-ambient .vo-blob--3 { width: 50vmax; height: 50vmax; left: 24vmax; bottom: -10vmax;
  background: radial-gradient(circle, rgba(12,55,70,0.8), transparent 60%); animation: voAmb3 34s ease-in-out infinite alternate; }
@keyframes voAmb1 { 0%{transform: translate(0,0) scale(1)} 100%{transform: translate(14vmax,10vmax) scale(1.18)} }
@keyframes voAmb2 { 0%{transform: translate(0,0) scale(1.1)} 100%{transform: translate(-16vmax,8vmax) scale(0.92)} }
@keyframes voAmb3 { 0%{transform: translate(0,0) scale(0.95)} 100%{transform: translate(10vmax,-12vmax) scale(1.15)} }
@media (prefers-reduced-motion: reduce) { .vo-ambient .vo-blob { animation-duration: 0s !important; } }

/* ============================================================
   MOVIMENTO da page-motion-bg existente — mais visível (parallax do mouse já é JS da página)
   ============================================================ */
.lp-b .page-motion-bg { opacity: 0.5 !important; }
.lp-b .motion-layer--lines { animation: pageMotionLines 16s linear infinite !important; transform: translate3d(calc(var(--motion-x) * 40px), calc(var(--motion-y) * 32px), 0) !important; }
.lp-b .motion-layer--waves { animation: pageMotionWaves 20s ease-in-out infinite alternate !important; transform: translate3d(calc(var(--motion-x) * -46px), calc(var(--motion-y) * -34px), 0) rotate(calc(var(--motion-s) * 3deg)) !important; }
.lp-b .motion-layer--glow { animation: pageMotionGlow 11s ease-in-out infinite alternate !important; }
#metodo.hib::before { animation: voMetodoGrid 26s linear infinite !important; }
@keyframes voMetodoGrid { from { background-position: 0 0; } to { background-position: 84px 42px; } }

/* ============================================================
   LP-B - Oferta no modelo sim-oferta-completa, sem scroll preso.
   Livro e conteudo ficam lado a lado; preco fica abaixo e central.
   ============================================================ */
#oferta .vo-stage {
  max-width: 1120px !important;
  min-height: clamp(500px, 66vh, 610px);
  padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 52px) 22px !important;
  display: grid !important;
  grid-template-columns: minmax(270px, 0.92fr) minmax(0, 1.08fr) !important;
  grid-template-areas:
    "prod items"
    "price price";
  gap: clamp(8px, 1.2vw, 16px) clamp(34px, 4vw, 56px) !important;
  align-items: center;
}

#oferta .vo-prod {
  grid-area: prod;
  height: auto !important;
  min-height: 420px;
  width: min(100%, 400px);
  align-self: center;
  justify-self: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

/* Livro centralizado no topo; a faixa do leitor fica ABAIXO, sem cobrir a capa. */
#oferta .vo-float { transform: none; }

#oferta .vo-book {
  width: 208px !important;
  height: 286px !important;
}

#oferta .vo-bf,
#oferta .vo-bb {
  width: 208px !important;
  height: 286px !important;
}

#oferta .vo-bl,
#oferta .vo-br {
  width: 40px !important;
  height: 286px !important;
  left: 84px !important;
}

#oferta .vo-bl { transform: rotateY(-90deg) translateZ(104px) !important; }
#oferta .vo-br { transform: rotateY(90deg) translateZ(104px) !important; }
#oferta .vo-bt { width: 208px !important; height: 40px !important; top: 123px !important; transform: rotateX(90deg) translateZ(143px) !important; }
#oferta .vo-bd { width: 208px !important; height: 40px !important; top: 123px !important; transform: rotateX(-90deg) translateZ(143px) !important; }

#oferta .vo-cover {
  padding: 24px 22px !important;
}

#oferta .vo-cover .t {
  font-size: 1.5rem !important;
}

#oferta .vo-floor {
  top: 244px !important;
  bottom: auto !important;
  left: 50% !important;
  width: 250px !important;
}

/* ----- Leitor digital: faixa ABAIXO do livro (não cobre a capa) ----- */
#oferta .vo-reader {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 372px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  text-align: center;
  transform-origin: center bottom;
}
#oferta .vo-reader-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(151, 146, 125, 0.16);
  border: 1px solid rgba(217, 212, 195, 0.34);
  color: var(--vo-goldsoft);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#oferta .vo-reader-feats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
#oferta .vo-feat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(151, 146, 125, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
#oferta .vo-feat svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--vo-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#oferta .vo-itemscol {
  grid-area: items;
  align-self: center;
  min-width: 0;
  max-width: 560px;
}

#oferta .vo-itemscol > h2 {
  margin: 0 0 13px;
  max-width: 520px;
  font-family: var(--vo-serif);
  font-weight: 500;
  font-size: clamp(1.52rem, 2.2vw, 1.95rem);
  line-height: 1.08;
  color: #fff;
}

#oferta .vo-items {
  gap: 1px !important;
  margin-bottom: 0 !important;
}

#oferta .vo-it {
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 7px 2px !important;
}

#oferta .vo-it .nm {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

#oferta .vo-it .d {
  margin-top: 3px !important;
  font-size: 0.78rem !important;
  line-height: 1.26 !important;
}

#oferta .vo-pricecol {
  grid-area: price;
  align-self: start;
  justify-self: center;
  width: min(100%, 620px);
  min-width: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  margin-top: -6px;
  padding-top: 10px;
  border-top: 1px solid rgba(151, 146, 125, 0.22);
}

#oferta .vo-plabel {
  min-height: 1.2em;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 700;
}

#oferta .vo-num {
  justify-content: center;
}

#oferta .vo-num .n {
  font-size: clamp(2.8rem, 4.2vw, 3.45rem) !important;
  color: var(--vo-goldsoft) !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

#oferta .vo-coupon {
  width: min(100%, 360px);
  margin: 7px auto 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border-style: solid !important;
  border-color: rgba(151, 146, 125, 0.38) !important;
}

#oferta .vo-coupon .cd {
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
}

#oferta .vo-cta {
  width: min(100%, 360px);
  margin-top: 8px;
  padding: 11px 20px !important;
  font-size: 0.98rem !important;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s, filter 0.2s;
}

#oferta .vo-cta.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#oferta .vo-guar {
  text-align: center;
}

@media (max-width: 900px) {
  #oferta .vo-stage {
    min-height: 0;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "prod"
      "items"
      "price";
    padding: 28px clamp(18px, 5vw, 28px) 26px !important;
    gap: 16px !important;
  }

  #oferta .vo-prod {
    height: auto !important;
    min-height: 360px;
  }

  #oferta .vo-itemscol {
    justify-self: center;
    width: min(100%, 560px);
  }

  #oferta .vo-pricecol {
    width: min(100%, 380px);
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  #oferta .vo-prod {
    height: auto !important;
    min-height: 320px;
  }
  #oferta .vo-floor { top: 196px !important; }

  #oferta .vo-book {
    width: 172px !important;
    height: 236px !important;
  }

  #oferta .vo-bf,
  #oferta .vo-bb {
    width: 172px !important;
    height: 236px !important;
  }

  #oferta .vo-bl,
  #oferta .vo-br {
    width: 34px !important;
    height: 236px !important;
    left: 69px !important;
  }

  #oferta .vo-bl { transform: rotateY(-90deg) translateZ(86px) !important; }
  #oferta .vo-br { transform: rotateY(90deg) translateZ(86px) !important; }
  #oferta .vo-bt { width: 172px !important; height: 34px !important; top: 101px !important; transform: rotateX(90deg) translateZ(118px) !important; }
  #oferta .vo-bd { width: 172px !important; height: 34px !important; top: 101px !important; transform: rotateX(-90deg) translateZ(118px) !important; }
  #oferta .vo-floor { top: 196px !important; }
}

/* ============================================================
   CAPA do livro — brasão (escudo + chave) + moldura art-déco. Vetorial,
   acompanha a rotação 3D. (Substitui a antiga capa só de texto.)
   ============================================================ */
#oferta .vo-bf {
  background:
    radial-gradient(circle at 50% 30%, rgba(151,146,125,0.22), transparent 56%),
    linear-gradient(180deg, #143845, #06181f 72%) !important;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4) !important;
}
#oferta .vo-cover {
  align-items: center;
  text-align: center;
}
#oferta .vo-frame {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(217,212,195,0.42);
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px rgba(151,146,125,0.10);
  pointer-events: none;
}
#oferta .vo-cover .k {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  font-size: 0.5rem !important;
  letter-spacing: 0.2em !important;
}
#oferta .vo-crest {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 58px;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,0.45));
}
#oferta .vo-crest svg { width: 100%; height: auto; display: block; }
#oferta .vo-cover .t {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 1.4rem !important;
  letter-spacing: 0.01em;
}
#oferta .vo-cover .s {
  position: relative;
  z-index: 1;
  font-size: 0.62rem !important;
}

/* Float idle — oscila mostrando lombada e capa */
@keyframes voBookFloat {
  0%,100% { transform: perspective(1200px) rotateY(-30deg) rotateX(2deg) translateY(0); }
  50%      { transform: perspective(1200px) rotateY(-10deg) rotateX(-1deg) translateY(-14px); }
}
#oferta .vo-book3d.is-idle {
  animation: voBookFloat 8s ease-in-out infinite;
  opacity: 1 !important;
}

/* ============================================================
   CTA PULSANTE
   ============================================================ */
@keyframes voCtaPulse {
  0%,100% { box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 0 0 0 rgba(151,146,125,0.55); }
  55%     { box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 0 0 14px rgba(151,146,125,0); }
}
#oferta .vo-cta.show {
  animation: voCtaPulse 2.4s ease-out infinite;
}