/* =========================================================================
   OFT-Review Garantia — risk-reversal section
   Design system OFT: gold + onyx + Orbitron (h2). Hexagons ⬢ decorativos.
   Scope sob .ogg pra blindar contra WP/Elementor.
   ========================================================================= */
.ogg,.ogg *,.ogg *::before,.ogg *::after{box-sizing:border-box}

.ogg{
  --gold-200:#F8DB7D; --gold-300:#ECC575; --gold-400:#DBAD6B; --gold-500:#B58851; --gold-700:#6E5230;
  --onyx-1000:#060606; --onyx-900:#131210; --onyx-800:#1A1A1A; --onyx-700:#232220;
  --fg-on-dark:#F4F0EA; --fg-on-dark-2:#C6BFB1;
  --font-display:'Orbitron','Eurostile',system-ui,sans-serif;
  --font-body:'Exo 2','Inter',system-ui,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);

  position:relative;
  padding:clamp(56px,8vh,96px) 24px;
  background:#111111;
  color:var(--fg-on-dark);
  font-family:var(--font-body);
  isolation:isolate;
  overflow:clip;
  -webkit-font-smoothing:antialiased;
}

/* Override WP — força cores corretas em h2/h3 */
.ogg h2,.ogg h3{color:var(--fg-on-dark) !important;-webkit-text-fill-color:var(--fg-on-dark) !important;margin:0 !important}

.ogg a,.ogg a:hover,.ogg a:focus,.ogg a:visited{text-decoration:none!important}

/* ─── Card container ─────────────────────────────────────────────── */
.ogg__card{
  position:relative;
  max-width:1240px; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:48px;
  padding:48px 56px;
  background:
    radial-gradient(ellipse at 90% 20%,rgba(219,173,107,.15),transparent 60%),
    radial-gradient(ellipse at 10% 80%,rgba(184,136,81,.10),transparent 50%),
    linear-gradient(135deg,#1A1814 0%,#131210 50%,#0e0c0a 100%);
  border:1px solid rgba(219,173,107,.18);
  border-radius:24px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(248,219,125,.08);
  overflow:hidden;
}

/* Hexagons decorativos dentro do card */
.ogg__card::before,
.ogg__card::after{
  content:"⬢";
  position:absolute;
  color:var(--gold-700);
  opacity:.12;
  pointer-events:none;
  font-size:120px;
  z-index:0;
  will-change:transform;
  animation:oggHexFloat 14s ease-in-out infinite;
}
.ogg__card::before{top:-30px;right:-20px;font-size:180px;animation-delay:0s}
.ogg__card::after{bottom:-40px;left:30%;font-size:90px;animation-delay:5s;opacity:.08}
@keyframes oggHexFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-12px,0) rotate(180deg)}
}

/* ─── Content ────────────────────────────────────────────────────── */
.ogg__content{position:relative;z-index:1}
.ogg__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  border:1px solid rgba(248,219,125,.4);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(248,219,125,.10),rgba(219,173,107,.05));
  font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-300);
  margin-bottom:20px;
}
.ogg__eyebrow-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-300);
  box-shadow:0 0 8px var(--gold-300);
  animation:oggPulse 2.4s ease-in-out infinite;
}
@keyframes oggPulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.25)}
}

.ogg h2.ogg__heading{
  font-family:var(--font-display) !important;
  font-size:clamp(28px,3.4vw,40px) !important;
  font-weight:400 !important;
  line-height:1.12 !important;
  letter-spacing:0.02em !important;
  color:var(--fg-on-dark) !important;
  -webkit-text-fill-color:var(--fg-on-dark) !important;
  margin:0 0 18px !important;
  text-wrap:balance;
}
.ogg__heading-num{
  color:var(--gold-300) !important;
  -webkit-text-fill-color:var(--gold-300) !important;
  font-weight:500 !important;
  text-shadow:0 0 24px rgba(236,197,117,.35);
}

.ogg__lede{
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  color:var(--fg-on-dark-2);
  margin:0 0 28px;
  max-width:54ch;
}

/* CTA gold gradient com shimmer */
.ogg__cta{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--gold-200) 0%,var(--gold-400) 60%,var(--gold-500) 100%);
  color:var(--onyx-1000) !important;
  font-family:var(--font-body);
  font-weight:800;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:
    0 12px 32px -8px rgba(219,173,107,.55),
    0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .25s var(--ease-out),box-shadow .25s;
  overflow:hidden;
  cursor:pointer;
}
/* Shimmer effect */
.ogg__cta::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform .6s var(--ease-out);
  pointer-events:none;
}
.ogg__cta:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 40px -8px rgba(219,173,107,.7),
    0 0 0 1px rgba(255,255,255,.2) inset;
}
.ogg__cta:hover::before{transform:translateX(100%)}
.ogg__cta-arrow{
  width:16px; height:16px;
  transition:transform .25s var(--ease-out);
}
.ogg__cta:hover .ogg__cta-arrow{transform:translateX(4px)}

/* ─── Shield ─────────────────────────────────────────────────────── */
.ogg__shield-wrap{
  position:relative; z-index:1;
  width:clamp(220px,28vw,340px);
  aspect-ratio:1/1;
  display:grid; place-items:center;
}
.ogg__shield-glow{
  position:absolute; inset:-20%;
  background:radial-gradient(circle,rgba(236,197,117,.35) 0%,rgba(184,136,81,.15) 35%,transparent 65%);
  filter:blur(20px);
  z-index:-1;
  animation:oggGlow 4s ease-in-out infinite;
}
@keyframes oggGlow{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
.ogg__shield{
  width:100%; height:auto;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(236,197,117,.2));
  animation:oggShieldFloat 5s ease-in-out infinite;
  will-change:transform;
}
@keyframes oggShieldFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  50%{transform:translate3d(0,-8px,0) rotate(2deg)}
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width:820px){
  .ogg{padding:48px 16px}
  .ogg__card{
    grid-template-columns:1fr;
    gap:24px;
    padding:32px 24px;
    text-align:center;
  }
  .ogg__card::before{font-size:120px;top:-20px;right:-30px}
  .ogg__card::after{font-size:60px;bottom:-20px}
  .ogg__eyebrow{margin:0 auto 16px}
  .ogg h2.ogg__heading{font-size:26px !important}
  .ogg__lede{font-size:14px;margin:0 auto 24px}
  .ogg__shield-wrap{order:-1;width:200px}
  .ogg__cta{padding:14px 22px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .ogg *,.ogg *::before,.ogg *::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* PERF: section abaixo da dobra — skip render quando offscreen */
@supports (content-visibility:auto){
  #oft-garantia{content-visibility:auto;contain-intrinsic-size:auto 500px}
}