@font-face{font-family:Paperlogy;src:url(assets/Paperlogy-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{color-scheme:dark;--heading:Paperlogy,sans-serif;--text:Paperlogy,sans-serif;--h1:clamp(2.3rem,4.1vw,4.9rem);--h2:calc(var(--h1)*.72);--h3:calc(var(--h1)*.40);--body:1rem;--support:1.06rem;--small:.78rem;--gap:2rem;--bg:#071017;--surface:#0e2030;--surface-border:rgba(90,165,220,0.16);--tunic-blue:#1d4ed8;--cloak-green:#0d5c4d;--accent:#ff6a28;--accent-amber:#f97316;--cta-light:#ffa46e;--cta-mid:#f35518;--cta-edge:#b83303;--cta-glow:#f35518;--ink:#f4f7fa;--muted:#9bb0c1;--line:rgba(90,165,220,0.14)}
*{box-sizing:border-box;font-synthesis:none}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;background:#071017;color:var(--ink);font:400 var(--body)/1.5 var(--text);overflow-x:clip}h1,h2,h3,p,ul,ol{margin:0}h1,h2,h3{font-family:var(--heading);font-weight:400;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}p,li{text-wrap:pretty}p{color:var(--muted)}p+p{margin-top:1.5rem}button,summary{font:inherit;font-weight:400}button:focus-visible,summary:focus-visible{outline:2px solid #ffa46e;outline-offset:6px}.wrap{width:min(86%,80rem);margin:auto;position:relative}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}.hero{position:relative;isolation:isolate;min-height:55rem;display:flex;align-items:center;padding:8rem 0 7rem;overflow:hidden;background:#071017}.hero-copy{grid-column:1/8;max-width:45rem}.hero h1{max-width:11.3em}.subhead{font-size:var(--support);line-height:1.55;max-width:37rem;margin-top:2rem;text-wrap:balance}.hero-art{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 35%,rgba(249,115,22,0.12) 0,transparent 46%),radial-gradient(ellipse at 89% 65%,#0b233a 0,transparent 45%),linear-gradient(90deg,#071017 30%,transparent 90%)}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071017,transparent 30%)}.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:3.6rem;padding:1rem 2.1rem;border:1px solid rgba(255,164,110,0.5);border-radius:.7rem;background:linear-gradient(180deg,#ff7836,#e64a19);color:#fff;box-shadow:inset 0 1px 0 #fff6,0 5px 0 #7a2002,0 12px 32px rgba(243,85,24,0.35);cursor:pointer;transition:transform .2s,box-shadow .2s;font-size:.95rem;line-height:1.4;text-align:center;margin-top:2rem}.cta:after{content:'';position:absolute;inset:-60% -80%;background:linear-gradient(105deg,transparent 44%,#ffffff50 49%,transparent 54%);transform:translateX(-70%)}.cta.attention:after{animation:shine 6s ease-in-out infinite}.cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff8,0 7px 0 #7a2002,0 16px 40px rgba(243,85,24,0.45)}.cta:active{transform:translateY(3px);box-shadow:0 1px 0 #7a2002}.meta{font-size:var(--small);line-height:1.6}.hero .meta{margin-top:1.7rem;max-width:34rem;color:#9292a3}.section{padding:6.5rem 0;position:relative}.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}.split>div:first-child{grid-column:1/6}.split>div:last-child,.split>ul{grid-column:7/13}.split h2+p{margin-top:1.7rem}.compact{list-style:none;padding:0;display:grid;gap:1.1rem}.compact li{display:grid;grid-template-columns:2rem 1fr;gap:1rem;align-items:start}.compact+p{margin-top:2rem}.compact li>span:last-child{color:#c9c9d2}.icon{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}.icon svg{width:1.5rem;height:1.5rem}.compact li>span[data-copy]{display:block}.compact li>span[data-copy]::first-letter{color:#85819d}.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:3rem}.steps .icon{margin-bottom:1.5rem;background:rgba(29,78,216,0.16);border-radius:.5rem;width:3rem;height:3rem;box-shadow:inset 0 1px 0 #ffffff17}.steps p{margin-top:1rem}.wash{background:linear-gradient(180deg,#071017 0%,#0b0f1b 22%,#0e111b 50%,#0a1118 78%,#071017 100%)}.lessons{list-style:none;padding:0;display:grid;gap:1.7rem}.lessons li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem}.lessons p{margin-top:.65rem}.lessons h3{font-size:var(--h3)}.visual-reserve{min-height:24rem}.bonus-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem;margin-top:3rem}.bonus-card{grid-column:span 2;padding:2rem;border-radius:1.2rem;background:linear-gradient(140deg,#1c1b2caa,#101117);box-shadow:inset 0 1px 0 #ffffff1d,inset 1px 0 0 #ffffff08,0 20px 40px #0002}.bonus-card:nth-child(n+4){grid-column:span 3;padding-top:5rem;background:radial-gradient(ellipse at 95% 0,rgba(29,78,216,0.25),transparent 70%),#111219}.bonus-card .icon{margin-bottom:1.3rem}.bonus-card p{margin-top:1.3rem}.bonus-card p:last-child{font-size:.85rem;color:#9bb0c1}.offer{background:linear-gradient(180deg,#071017 0%,transparent 18%,transparent 82%,#071017 100%),radial-gradient(ellipse 68% 44% at 50% 52%,rgba(14,88,100,0.22),transparent 72%),#071017}.offer h2{max-width:19em;text-align:center;margin:0 auto 3.5rem}.offer-panel{display:grid;grid-template-columns:1fr 1fr;gap:4rem;padding:3rem;border-radius:1.4rem;background:linear-gradient(130deg,#191925,#0f1017);box-shadow:inset 0 1px 0 #c3b6ff40,0 30px 90px #0004}.offer-panel .compact{margin-top:2rem}.offer-side{text-align:center}.payment{display:flex;flex-direction:column;align-items:center;gap:.65rem}.payment p{margin:0;color:#edeaf8}.installments{display:inline-flex;align-items:center;justify-content:center;gap:.3rem}.amount{font-family:var(--heading);font-size:calc(var(--h1)*.95);line-height:1.1;color:#ffffff}.terms{font-size:.8rem;margin-top:1.4rem!important;line-height:1.55}.offer-side .cta{width:100%}.teacher{min-height:43rem;background:linear-gradient(180deg,#071017 0%,transparent 22%,transparent 78%,#071017 100%),radial-gradient(ellipse 46% 36% at 22% 52%,rgba(29,41,59,0.78) 0%,rgba(13,24,36,0.34) 55%,rgba(7,16,23,0) 88%),#071017}.teacher .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem}.portrait-reserve{min-height:29rem}.bio h2{margin-bottom:2rem}.questions details{border-bottom:1px solid var(--line);padding:1.3rem 0}.questions details:first-child{padding-top:0}.questions summary{list-style:none;cursor:pointer;color:#dedde6;display:flex;justify-content:space-between;gap:1rem;align-items:center}.questions summary::-webkit-details-marker{display:none}.questions summary:after{content:'+';color:var(--accent);font-size:1.4rem;transition:transform .2s}.questions details[open] summary:after{transform:rotate(45deg)}.questions details p{margin-top:1rem}.questions .cta{margin-top:2.5rem}.reveal{transition:opacity .82s cubic-bezier(0.16,1,0.3,1),transform .82s cubic-bezier(0.16,1,0.3,1)}.reveal.pending{opacity:0;transform:translate3d(0,var(--reveal-y,26px),0)}
/* ==========================================================================
   ENTRADA ELEGANTE DE SESSÕES (BIDIRECIONAL IDA E VOLTA - LIGHTWEIGHT & GPU)
   ========================================================================== */
.reveal-header,
.reveal-body {
  transition: 
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-header.is-pending {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 24px), 0);
  will-change: opacity, transform;
}
.reveal-body {
  transition-duration: 0.88s;
  transition-delay: 0.08s;
}
.reveal-body.is-pending {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 30px), 0);
  will-change: opacity, transform;
}
.reveal-header.is-revealed,
.reveal-body.is-revealed {
  will-change: auto;
}.hero-copy{animation:enter .7s ease-out}body.paused .cta:after{animation-play-state:paused!important}@keyframes enter{from{transform:translateY(12px)}to{transform:none}}@keyframes shine{0%,65%{transform:translateX(-70%)}90%,100%{transform:translateX(70%)}}
@media(min-width:1600px){.hero{min-height:67.5rem}.hero-copy{grid-column:1/8}}
@media(max-width:1000px){:root{--h1:3rem;--h3:1.35rem}.wrap{width:90%}.hero-copy{grid-column:1/10}.hero{min-height:48rem}.section{padding:4.5rem 0}.split{gap:1.5rem}.split>div:first-child{grid-column:1/6}.split>div:last-child,.split>ul{grid-column:6/13}.steps{gap:1.5rem}.bonus-card{padding:1.5rem}.offer-panel{gap:2rem;padding:2rem}.teacher .wrap{gap:2rem}}
@media(max-width:600px){:root{--h1:clamp(1.8rem,8vw,3rem);--h2:calc(var(--h1)*.88);--h3:calc(var(--h1)*.66);--body:1rem;--support:1rem;--small:.75rem;--gap:1rem}.wrap{width:calc(100% - 2rem)}.hero{padding:15rem 0 3rem;min-height:0;align-items:start}.hero-copy{grid-column:1/-1;max-width:none}.hero h1{max-width:none}.hero-art{background:radial-gradient(ellipse at 65% 10%,rgba(249,115,22,0.15),transparent 45%),radial-gradient(ellipse at 90% 30%,#10354a,transparent 55%)}.subhead{margin-top:1.25rem;line-height:1.45;text-wrap:pretty}.cta{padding:.9rem 1.2rem;width:100%;margin-top:1.5rem}.hero .meta{margin-top:1.4rem;font-size:.71rem;text-align:center}.section{padding:3.5rem 0}.split{grid-template-columns:1fr;gap:2rem}.split>div:first-child,.split>div:last-child,.split>ul{grid-column:1}.split h2+p{margin-top:1.25rem}.compact{gap:1rem}.compact li{grid-template-columns:1.5rem 1fr;gap:.75rem}.icon{width:1.5rem;height:1.5rem}.steps{grid-template-columns:1fr;gap:2rem;margin-top:2rem}.steps li{display:grid;grid-template-columns:2.5rem 1fr;column-gap:1rem}.steps .icon{grid-row:1/3;margin:0;width:2.5rem;height:2.5rem}.steps p{grid-column:2;margin-top:.65rem}.visual-reserve{min-height:10rem}.lessons{gap:1.7rem}.lessons li{grid-template-columns:1.5rem 1fr;gap:.75rem}.bonus-grid{grid-template-columns:1fr;gap:1rem;margin-top:2rem}.bonus-card,.bonus-card:nth-child(n+4){grid-column:1;padding:1.5rem}.bonus-card:nth-child(n+4){padding-top:5rem}.bonus-card .icon{margin-bottom:1rem}.offer h2{text-align:left;margin-bottom:2rem}.offer-panel{grid-template-columns:1fr;padding:1.25rem;gap:2.5rem}.amount{font-size:var(--h1)}.terms{font-size:.8rem}.teacher{min-height:0;padding-top:3.5rem;background:linear-gradient(180deg,#071017 0%,transparent 24%,transparent 76%,#071017 100%),radial-gradient(ellipse 72% 34% at 50% 42%,rgba(29,41,59,0.58) 0%,rgba(7,16,23,0) 78%),#071017}.teacher .wrap{grid-template-columns:1fr;gap:0}.portrait-reserve{min-height:16rem}.bio h2{margin-bottom:1.5rem}.questions summary{font-size:1rem}.questions .cta{margin-top:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:after{animation:none!important;transition:none!important}.reveal.pending,.reveal-header.is-pending,.reveal-body.is-pending{opacity:1!important;transform:none!important;filter:none!important}}
/* ==========================================================================
   1950s RETRO-FUTURISTIC TV CONSOLE APPLIANCE & OFFER SECTION (#oferta)
   ========================================================================== */
#oferta.tv-retro-section {
  isolation: isolate;
  background:
    linear-gradient(180deg, #071017 0%, transparent 18%, transparent 82%, #071017 100%),
    radial-gradient(ellipse 70% 50% at 50% 44%, rgba(14, 88, 100, 0.30) 0%, rgba(6, 26, 38, 0.42) 48%, rgba(7, 16, 23, 0) 86%),
    #071017;
  padding: 6rem 0 7.5rem;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

#oferta.tv-retro-section::before {
  display: none;
  content: none;
}

#oferta h2 {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3rem;
  font-family: 'Paperlogy', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.8vw, 2.75rem);
  line-height: 1.25;
  color: #f2f8fa;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}

/* --------------------------------------------------------------------------
   TV CONSOLE UNIT UNIFICADO — MOLDURA ANOS 50 IGUAL A "O GRANDE OBJETIVO"
   -------------------------------------------------------------------------- */
.tv-console-unit {
  max-width: 52rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.45rem;
  perspective: 1200px;
  position: relative;
  box-sizing: border-box;
  border: 28px solid transparent;
  border-image: url('assets/frame-teal-chrome.webp') 110 / 30px / 0 stretch;
  border-radius: 2.2rem;
  background: linear-gradient(150deg, rgba(7,16,23,0.92), rgba(12,24,34,0.96)), url('assets/texture-cyan-vintage-tile.webp') 0 0/140px 140px repeat;
  background-clip: border-box;
  background-origin: border-box;
  box-shadow: 0 24px 60px rgba(0,0,0,0.95), 0 4px 16px rgba(0,0,0,0.8), inset 0 1px 2px rgba(255,255,255,0.22);
  padding: 2.3rem 2.2rem 2.6rem;
  overflow: hidden;
  isolation: isolate;
}

.tv-console-unit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 60%);
  pointer-events: none;
  z-index: 3;
}

.tv-deliverables-panel {
  width: 100%;
  position: relative;
  z-index: 4;
}

.tv-discount-bridge {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  z-index: 4;
}

.tv-bridge-line {
  flex: 1 1 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 243, 196, 0.45), transparent);
}

.tv-bridge-chip {
  font-family: monospace, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a4f5db;
  background: rgba(8, 29, 34, 0.85);
  border: 1px solid rgba(94, 243, 196, 0.35);
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* --------------------------------------------------------------------------
   TELEVISÃO CRT ANOS 50 (MICRO TELA CRT + CONTROLES VINTAGE DENTRO DO GABINETE)
   -------------------------------------------------------------------------- */
.tv-upper-chassis {
  width: 100%;
  border-radius: 1.9rem;
  background: radial-gradient(ellipse at 50% 12%, rgba(68, 185, 185, 0.34) 0%, transparent 65%), linear-gradient(180deg, #194853 0%, #0d2a32 48%, #07161c 100%);
  border: 2.5px solid #2b6f7a;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.34), inset 0 -3px 6px rgba(0,0,0,0.85), 0 14px 32px rgba(0,0,0,0.72), 0 0 28px rgba(28, 170, 163, 0.18);
  padding: 1.6rem 1.8rem 1.5rem;
  position: relative;
  z-index: 4;
}

.tv-screen-bezel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

/* Micro Tela CRT Abaulada com Fósforo e Scanlines */
.tv-crt-screen {
  border-radius: 1.85rem;
  background: radial-gradient(ellipse at 50% 45%, #0a3632 0%, #041b1a 60%, #010c0b 100%);
  border: 3px solid #143d3b;
  box-shadow: inset 0 6px 18px rgba(0,0,0,0.95), inset 0 -6px 18px rgba(0,0,0,0.95), inset 4px 0 12px rgba(0,0,0,0.85), inset -4px 0 12px rgba(0,0,0,0.85), 0 0 28px rgba(32, 222, 178, 0.22);
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.5rem;
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0, 15, 10, 0.5) 3px, rgba(0, 15, 10, 0.5) 4px);
  opacity: 0.72;
  z-index: 2;
}

.crt-glass-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 65%, transparent 100%);
  border-radius: 1.85rem 1.85rem 0 0;
  z-index: 3;
}

.crt-phosphor-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(46, 230, 168, 0.14) 0%, transparent 70%);
  mix-blend-mode: screen;
  z-index: 2;
}

.tv-screen-top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
  z-index: 4;
  font-family: monospace, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #5ef3c4;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(94, 243, 196, 0.6);
}

.tv-screen-label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a4f5db;
  font-weight: 700;
  margin: 0 0 0.45rem;
  text-shadow: 0 0 8px rgba(94, 243, 196, 0.5);
  z-index: 4;
}

/* Preço Rotativo Derivado do Mercado Pago */
.tv-price-display {
  display: block;
  width: 100%;
  z-index: 4;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.tv-price-display .price-stage {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 4.8rem;
  perspective: 600px;
}

.tv-price-display .price-frame {
  grid-area: 1/1;
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  font-family: 'Paperlogy', sans-serif;
  line-height: 1.15;
  color: #ffffff;
  transform: translateY(10px);
  filter: none;
}

.tv-price-display .price-frame.is-current {
  visibility: visible;
  opacity: 1;
  transform: none;
  filter: none;
}

.tv-price-display .crt-from {
  font-size: clamp(0.88rem, 1.45vw, 1.08rem);
  font-weight: 700;
  color: #a4f5db;
  letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(94, 243, 196, 0.35);
}

.tv-price-display .crt-main {
  font-weight: 800;
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 0 12px rgba(94, 243, 196, 0.55);
}

.tv-price-display .price-frame s {
  position: relative;
  text-decoration: none;
  color: #ff8e8e;
  font-weight: 800;
  padding: 0 2px;
}

.tv-price-display .price-frame s::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  background: #ff5c5c;
  transform: scaleX(0);
  transform-origin: left;
}

.tv-price-display .price-frame.is-current s::after {
  transform: scaleX(1);
  transition: transform 0.5s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tv-price-display .price-qualifier {
  font-size: 0.56em;
  white-space: nowrap;
  color: #a4f5db;
}

.price-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Painel de Controles Vintage Anos 50 */
.tv-control-panel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  align-items: center;
  padding: 0.9rem 0.65rem;
  background: linear-gradient(180deg, #102127 0%, #091317 100%);
  border-radius: 1.2rem;
  border: 2px solid #1c3b42;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 4px 10px rgba(0,0,0,0.5);
}

.tv-dial-housing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.dial-label {
  font-family: monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #6db6b3;
  font-weight: 700;
  text-transform: uppercase;
}

.tv-dial-knob {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #445156 0%, #1c2428 55%, #0d1214 100%);
  border: 2px solid #576d75;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), inset 0 -3px 4px rgba(0,0,0,0.9), 0 6px 12px rgba(0,0,0,0.7);
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tv-dial-knob:hover {
  transform: rotate(25deg);
}

.knob-line {
  width: 3px;
  height: 12px;
  background: #5ef3c4;
  box-shadow: 0 0 5px #5ef3c4;
  border-radius: 2px;
  position: absolute;
  top: 4px;
}

.knob-notch {
  position: absolute;
  font-size: 0.55rem;
  font-family: monospace;
  font-weight: bold;
  color: #8ba9a7;
  pointer-events: none;
}
.knob-notch.n-1 { top: 3px; left: 50%; transform: translateX(-50%); }
.knob-notch.n-2 { right: 4px; top: 50%; transform: translateY(-50%); }
.knob-notch.n-3 { bottom: 3px; left: 50%; transform: translateX(-50%); }
.knob-notch.n-4 { left: 4px; top: 50%; transform: translateY(-50%); }

.tv-switch-cluster {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.pilot-jewel {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9e9e 0%, #e61919 60%, #800505 100%);
  box-shadow: 0 0 8px #ff2222, 0 0 16px rgba(255, 34, 34, 0.7), inset 0 1px 2px rgba(255,255,255,0.8);
  border: 1.5px solid #ffcccc;
  animation: pilot-pulse 2.4s ease-in-out infinite;
}

@keyframes pilot-pulse {
  0%, 100% { opacity: 0.9; box-shadow: 0 0 8px #ff2222, 0 0 16px rgba(255, 34, 34, 0.7); }
  50% { opacity: 0.5; box-shadow: 0 0 4px #ff2222, 0 0 8px rgba(255, 34, 34, 0.4); }
}

.tv-pause-toggle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a6d77 0%, #202b30 70%);
  border: 1.5px solid #78929e;
  box-shadow: 0 3px 6px rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.toggle-lever {
  width: 6px;
  height: 12px;
  background: linear-gradient(180deg, #e4eef2, #7a8d94);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.8);
  transition: transform 0.2s ease;
}

.tv-pause-toggle[aria-pressed="true"] .toggle-lever {
  transform: rotate(-35deg);
  background: linear-gradient(180deg, #ff9e9e, #800505);
}

/* --------------------------------------------------------------------------
   BLOCO INFERIOR DE CONVERSÃO (Marquee + Botão 3D em Baquelite)
   -------------------------------------------------------------------------- */
.tv-lower-chassis {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-top: 0;
  padding: 0;
  position: relative;
  z-index: 4;
}

/* 1. Recibo de Benefícios / Lista de Compras Pinned com Ímã de Geladeira */
.pantry-checklist-card {
  position: relative;
  background: linear-gradient(180deg, #fbfaf6 0%, #f4f1e8 100%);
  color: #1f272b;
  border-radius: 0.9rem;
  border: 1px solid #d8d3c5;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 2.25rem 2rem 1.85rem;
  margin-top: 1.05rem;
}

.fridge-magnet-pin {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #c4d0d6 45%, #6a7c85 85%, #3e4b52 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.9), inset 0 -3px 4px rgba(0,0,0,0.7);
  display: grid;
  place-items: center;
  z-index: 10;
}

.magnet-gem {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5ef3c4, #0e8574);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.4);
}

.pantry-header {
  text-align: center;
}

.pantry-tag {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #0f6057;
  background: #e0f4ee;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.pantry-title {
  font-family: 'Paperlogy', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: #172227;
  margin: 0 0 0.75rem;
}

.pantry-divider-dash {
  border-bottom: 2px dashed #c8c2b0;
  margin-bottom: 1.25rem;
}

.pantry-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.6rem;
}

.pantry-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #222e33;
  padding-bottom: 0.55rem;
  border-bottom: 1px dotted #ded8c8;
}

.check-box {
  color: #0b8f6c;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.pantry-item-text {
  flex-grow: 1;
  font-weight: 600;
  color: #1c272c;
}

.pantry-item-price {
  font-family: monospace;
  font-size: 0.82rem;
  white-space: nowrap;
  color: #55656d;
  text-align: right;
  margin-left: 0.5rem;
}

.pantry-item-price strong {
  color: #08795b;
  font-weight: 800;
}

.pantry-item-price s {
  color: #8c9ba1;
  text-decoration-color: #d15656;
}

.pantry-footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 2px dashed #b5ae9b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.pantry-stamp-badge {
  font-family: 'Paperlogy', Impact, sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #c42727;
  border: 3px double #c42727;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  transform: rotate(-3.5deg);
  text-transform: uppercase;
  background: rgba(220, 50, 50, 0.06);
  box-shadow: 0 0 0 1px rgba(196, 39, 39, 0.2);
}

.pantry-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.28rem;
  flex: 1 1 16rem;
}

.pantry-anchor-copy {
  margin: 0;
  font-family: 'Paperlogy', sans-serif;
  font-size: clamp(0.98rem, 1.6vw, 1.18rem);
  font-weight: 700;
  line-height: 1.3;
  color: #172227;
}

.pantry-anchor-copy .total-strike {
  display: inline-block;
  white-space: nowrap;
  font-weight: 800;
  color: #8f1d1d;
  text-decoration: line-through;
  text-decoration-color: #d12828;
  text-decoration-thickness: 2.5px;
  margin: 0 0.14rem;
}

.pantry-anchor-sub {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0b6e53;
}

/* 2. Split-Flap Flicker Lettering Marquee Sign Anos 50 (Estilo Estação / Diner Autêntico) */
.diner-split-flap-marquee {
  margin: 0 auto;
  max-width: 34rem;
  background: linear-gradient(180deg, #1b2024 0%, #101316 100%);
  border: 3px solid #414950;
  border-radius: 12px;
  padding: 1rem 1.25rem 0.85rem;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.65);
  position: relative;
  overflow: hidden;
}

.diner-felt-board {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
}

.flap-flip-stage {
  display: grid;
  place-items: center;
  width: 100%;
  perspective: 520px;
}

.flap-card {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.flap-state {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.flap-state.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.flap-word {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  position: relative;
}

.flap-word-strike .flap-char {
  color: #d4cfc4;
}

.flap-word-strike::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: rgba(235, 68, 68, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  transform: rotate(-3.5deg);
  pointer-events: none;
  z-index: 4;
}

.flap-space {
  display: inline-block;
  width: 0.45rem;
  flex-shrink: 0;
}

.flap-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 2.2rem;
  padding: 0 0.25rem;
  background: linear-gradient(180deg, #2b3136 0%, #202529 48%, #161a1d 52%, #1d2226 100%);
  border: 1px solid #3f474e;
  border-radius: 4px;
  font-family: 'Paperlogy', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1;
  color: #f7f3e8;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  position: relative;
  transform-origin: center center;
  backface-visibility: hidden;
}

.flap-char.is-punct {
  min-width: 0.92rem;
  padding: 0 0.12rem;
}

.flap-line-2 .flap-char {
  min-width: 1.95rem;
  height: 2.65rem;
  font-size: 1.24rem;
}

.flap-line-2 .flap-char.is-punct {
  min-width: 1.05rem;
}

.flap-char::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.flap-char.highlight-amber {
  color: #ffbe55;
  background: linear-gradient(180deg, #2c2419 0%, #211a12 48%, #16110b 52%, #1e1710 100%);
  border-color: #6b522c;
}

.flap-char.highlight-cream {
  color: #fffaf0;
  border-color: #4b545c;
}

.flap-state.is-flipping .flap-char {
  animation: flapTileTurn 0.34s cubic-bezier(0.22, 0.88, 0.32, 1) both;
  animation-delay: calc(var(--flap-i, 0) * 24ms);
}

@keyframes flapTileTurn {
  0% {
    transform: rotateX(-86deg);
    filter: brightness(0.65);
  }
  70% {
    transform: rotateX(10deg);
    filter: brightness(1.08);
  }
  100% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
}

.flap-sub-strip {
  margin: 0.15rem 0 0;
  font-family: monospace, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #a4d9cc;
  text-transform: uppercase;
  line-height: 1.3;
}

/* 3. Botão CTA Hiper-Realista 3D em Baquelite / Vidro Laranja e Cromo */
.tv-cta-wrapper {
  margin: 2.2rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}

/* ========================================================
   BOTÃO DE AÇÃO RETRO ANOS 50 (RÁDIO / MÁQUINA VINTAGE)
   Textura 3D fotorrealista com laca laranja persimmon vitrificada,
   friso recartilhado em metal cromado e animação contínua magnética
   ======================================================== */
/* ========================================================
   BOTÃO CTA 1950s MONOLÍTICO EM LACA LARANJA & CROMO 3D
   (Composição modular 3-partes: cap-left + slice-mid + cap-right)
   ======================================================== */
.retro-3d-button,
.cta.retro-3d-button {
  --btn-h: clamp(4.2rem, 6vw, 5.05rem);
  position: relative;
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 28.5rem);
  height: var(--btn-h);
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;
  outline: none;
  border-radius: 999px;
  animation: retroCtaPulse 2.8s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.retro-3d-button::before,
.retro-3d-button::after {
  display: none !important;
}

/* Chassi Híbrido em 3 Fatias Alinhadas Sem Costura */
.btn-lacquer-chassis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: none;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 18px rgba(235, 108, 22, 0.34));
  transition: filter 0.25s ease, transform 0.2s ease;
}

.btn-cap-part {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 167 / 200;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 2;
}

.btn-cap-part.cap-left {
  background-image: url('assets/btn-cap-left.webp');
  background-position: left center;
}

.btn-cap-part.cap-right {
  background-image: url('assets/btn-cap-right.webp');
  background-position: right center;
}

.btn-mid-part {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0 -2px;
  background: url('assets/btn-slice-mid.webp') center / 100% 100% no-repeat;
  position: relative;
  z-index: 1;
}

/* Reflexo Especular Varrendo Exclusivamente a Cápsula Laranja Central */
.btn-3d-glare {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: calc(var(--btn-h) * 0.26);
  right: calc(var(--btn-h) * 0.26);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.btn-3d-glare::after {
  content: '';
  position: absolute;
  inset: -60% -80%;
  background: linear-gradient(108deg, transparent 40%, rgba(255, 255, 255, 0.56) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: retroCtaSheen 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Tipografia idêntica ao H1 (Paperlogy Bold 700, sentence case, sem shadow) */
.btn-3d-text {
  position: relative;
  z-index: 4;
  font-family: Paperlogy, sans-serif;
  font-weight: 700;
  font-size: clamp(0.96rem, 1.85vw, 1.32rem);
  line-height: 1.05;
  color: #ffffff;
  text-transform: none;
  letter-spacing: -0.025em;
  text-shadow: none;
  pointer-events: none;
  margin-top: -1px;
  white-space: nowrap;
  padding: 0 calc(var(--btn-h) * 0.44);
}

/* Micro-pulso contínuo do botão inteiro no compositor GPU */
@keyframes retroCtaPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.024);
  }
}

/* Varredura da luz sobre a carcaça de laca do rádio */
@keyframes retroCtaSheen {
  0%, 20% {
    transform: translateX(-130%);
  }
  60%, 100% {
    transform: translateX(130%);
  }
}

/* Hover: Interrupção do pulso para foco do usuário + Lançamento de brilho */
.retro-3d-button:hover {
  animation: none;
  transform: scale(1.032) translateY(-2px);
}

.retro-3d-button:hover .btn-lacquer-chassis {
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 28px rgba(255, 132, 48, 0.72))
    brightness(1.05);
}

/* Clique / Active: Mecânica de interruptor físico de rádio anos 50 */
.retro-3d-button:active {
  animation: none;
  transform: scale(0.975) translateY(3px);
  transition-duration: 0.06s;
}

.retro-3d-button:active .btn-lacquer-chassis {
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 14px rgba(243, 85, 24, 0.45))
    brightness(0.96);
}

@media(min-width: 601px) and (max-width: 960px) {
  .retro-3d-button {
    --btn-h: clamp(3.7rem, 5.6vw, 4.4rem);
  }
  .btn-3d-text {
    font-size: clamp(0.84rem, 1.82vw, 1.14rem);
    letter-spacing: -0.025em;
    padding: 0 calc(var(--btn-h) * 0.44);
  }
}

@media(max-width: 600px) {
  .retro-3d-button {
    --btn-h: 4.1rem;
    height: var(--btn-h);
    width: 100%;
    max-width: 24rem;
  }
  .btn-3d-text {
    font-size: clamp(0.86rem, 3.85vw, 1.12rem);
    letter-spacing: -0.025em;
    padding: 0 calc(var(--btn-h) * 0.44);
  }
}

.retro-3d-button:focus-visible {
  outline: 3px solid #ff9e42;
  outline-offset: 6px;
}

.tv-guarantee-micro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #8ba5ae;
  text-align: center;
}

.guarantee-icon {
  font-size: 0.95rem;
}


/* --------------------------------------------------------------------------
   REFINED MOBILE & UTILITY STYLES FOR 1950s TV OFFER SECTION
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#oferta.tv-retro-section {
  overflow-x: clip;
}

.tv-console-unit {
  width: 100%;
  box-sizing: border-box;
}

.tv-upper-chassis,
.tv-lower-chassis {
  box-sizing: border-box;
}

/* Responsividade Mobile Refinada da Televisão 1950s */
@media (max-width: 640px) {
  #oferta .wrap {
    width: calc(100% - 1.25rem) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #oferta.tv-retro-section {
    padding: 4rem 0 6.5rem;
    overflow-x: clip;
    overflow-y: visible;
  }
  #oferta h2 {
    font-size: clamp(1.4rem, 5.8vw, 1.8rem);
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    text-wrap: balance;
  }
  .tv-console-unit {
    width: 100% !important;
    max-width: 100% !important;
    border: 20px solid transparent;
    border-image: url('assets/frame-teal-chrome.webp') 110 / 22px / 0 stretch;
    border-radius: 1.8rem;
    padding: 1.55rem 0.65rem 1.75rem;
    gap: 1.2rem;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .tv-bridge-chip {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.65rem;
    white-space: normal;
    text-align: center;
  }
  .tv-upper-chassis {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.95rem 0.65rem;
    border-radius: 1.35rem;
    box-sizing: border-box !important;
  }
  .tv-crt-screen {
    width: 100%;
    max-width: 100%;
    padding: 0.85rem 0.55rem;
    min-height: 8.6rem;
    border-radius: 1.15rem;
    box-sizing: border-box !important;
  }
  .tv-screen-top-bar {
    font-size: 0.54rem;
  }
  .tv-screen-label {
    font-size: 0.64rem;
    margin-bottom: 0.2rem;
  }
  .tv-price-display {
    width: 100%;
    max-width: 100%;
  }
  .tv-price-display .crt-from {
    font-size: clamp(0.76rem, 3.2vw, 0.92rem);
  }
  .tv-price-display .crt-main {
    font-size: clamp(1.38rem, 5.8vw, 1.85rem);
  }
  .tv-screen-bezel {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .tv-control-panel {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.9rem;
    box-sizing: border-box;
  }
  .tv-dial-knob {
    width: 2.5rem;
    height: 2.5rem;
  }
  .tv-lower-chassis {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box !important;
  }
  .pantry-checklist-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.65rem 0.7rem 1.1rem;
    margin-top: 0.95rem;
    box-sizing: border-box !important;
    overflow: visible;
  }
  .pantry-title {
    font-size: 1.08rem;
    text-wrap: balance;
  }
  .pantry-items-list {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .pantry-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.2rem 0.4rem;
    font-size: 0.8rem;
    padding-bottom: 0.45rem;
  }
  .pantry-item-text {
    flex: 1 1 56%;
    word-break: break-word;
  }
  .pantry-item-price {
    flex: 0 0 auto;
    font-size: 0.73rem;
    white-space: nowrap;
    margin-left: auto;
  }
  .pantry-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
  }
  .pantry-totals {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .pantry-anchor-copy {
    font-size: clamp(0.92rem, 4.1vw, 1.06rem);
    text-wrap: balance;
  }
  .pantry-anchor-sub {
    font-size: 0.78rem;
  }
  .diner-split-flap-marquee {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 0.45rem 0.65rem;
    box-sizing: border-box !important;
    overflow: hidden;
  }
  .diner-felt-board {
    width: 100%;
    max-width: 100%;
    gap: 0.45rem;
  }
  .flap-card {
    gap: 2px;
    max-width: 100%;
    justify-content: center;
  }
  .flap-word {
    gap: 2px;
  }
  .flap-space {
    width: 0.25rem;
  }
  .flap-char {
    min-width: clamp(1.02rem, 4.4vw, 1.42rem);
    height: clamp(1.42rem, 5.8vw, 1.85rem);
    font-size: clamp(0.68rem, 3vw, 0.9rem);
    padding: 0 2px;
    border-radius: 3px;
  }
  .flap-char.is-punct {
    min-width: clamp(0.56rem, 2.3vw, 0.78rem);
    padding: 0 1px;
  }
  .flap-line-2 .flap-char {
    min-width: clamp(1.06rem, 4.5vw, 1.56rem);
    height: clamp(1.62rem, 6.4vw, 2.15rem);
    font-size: clamp(0.76rem, 3.3vw, 1.04rem);
  }
  .flap-line-2 .flap-char.is-punct {
    min-width: clamp(0.58rem, 2.4vw, 0.82rem);
  }
  .flap-sub-strip {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    padding: 0 0.25rem;
  }
  .tv-cta-wrapper {
    margin: 1.35rem auto 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .retro-3d-button {
    --btn-h: 4rem;
    height: var(--btn-h);
    width: 100%;
    max-width: 100%;
  }
  .btn-3d-text {
    font-size: clamp(0.86rem, 3.85vw, 1.12rem);
    letter-spacing: -0.025em;
    padding: 0 calc(var(--btn-h) * 0.44);
    white-space: nowrap;
  }
  .tv-guarantee-micro {
    font-size: 0.74rem;
    padding: 0 0.5rem;
    flex-wrap: wrap;
    line-height: 1.35;
    text-align: center;
  }
  .guarantee-text {
    max-width: 100%;
    text-wrap: balance;
  }
}

 @media (max-width: 390px) {
  .tv-console-unit {
    border-width: 16px;
    border-image-width: 18px;
    padding: 1.35rem 0.5rem 1.5rem;
  }
  .retro-3d-button {
    --btn-h: 3.55rem;
    height: var(--btn-h);
  }
  .btn-3d-text {
    font-size: clamp(0.76rem, 3.7vw, 0.98rem);
    letter-spacing: -0.025em;
    padding: 0 calc(var(--btn-h) * 0.42);
  }
 }

/* 1950s TV Offer Styles Replaced */
/* Título: escala desktop e sequência mobile. */
@media(min-width:1001px){:root{--h1:clamp(2.3rem,3vw,3.6rem)}.hero h1{max-width:none}}
.hero-mobile-static,.hero-mobile-rotator,.hero-motion{display:none}
@media(max-width:600px){
 .hero-desktop-title{display:none!important}
 #inicio .hero-mobile-static{
   display:block;
   width:100%;
   max-width:19ch;
   margin:0 auto;
   font-family:Paperlogy,sans-serif;
   font-weight:700;
   font-size:clamp(1.26rem,5.25vw,1.62rem);
   line-height:1.18;
   letter-spacing:-.028em;
   text-align:center;
   text-wrap:balance;
   color:#ffffff;
   text-shadow:0 0 16px rgba(255,255,255,.38),0 0 32px rgba(255,157,92,.26),0 2px 10px rgba(0,0,0,.92);
 }
 #inicio .hero-mobile-rotator{
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:.42rem;
   width:100%;
   max-width:25rem;
   margin:.65rem auto 0;
   order:2;
 }
 #inicio .hero-rotator-stage{
   display:grid;
   place-items:center;
   width:100%;
   min-height:0;
 }
 #inicio .hero-rotator-phrase{
   grid-area:1/1;
   margin:0;
   width:100%;
   max-width:34ch;
   padding:0 .25rem;
   text-align:center;
   text-wrap:balance;
   font-family:'Space Grotesk',var(--text),sans-serif;
   font-weight:500;
   font-size:clamp(.84rem,3.45vw,.98rem);
   line-height:1.32;
   letter-spacing:-.01em;
   color:#ffd4ad;
   text-shadow:0 0 14px rgba(255,157,92,.24),0 2px 8px rgba(0,0,0,.85);
   visibility:hidden;
   opacity:0;
   pointer-events:none;
 }
 #inicio .hero-rotator-phrase.is-current{
   visibility:visible;
   opacity:1;
   pointer-events:auto;
 }
 #inicio .hero-rotator-controls{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:.55rem;
   min-height:1.35rem;
 }
 #inicio .hero-rotator-dots{
   display:inline-flex;
   align-items:center;
   gap:.32rem;
 }
 #inicio .hero-rotator-dot{
   display:block;
   width:.36rem;
   height:.22rem;
   border-radius:999px;
   background:rgba(255,255,255,.24);
   transition:width .28s cubic-bezier(.16,1,.3,1),background-color .28s ease;
 }
 #inicio .hero-rotator-dot.is-active{
   width:1.15rem;
   background:#ff9d5c;
   box-shadow:0 0 8px rgba(255,157,92,.55);
 }
 #inicio .hero-motion{
   display:inline-grid;
   place-items:center;
   position:static;
   width:1.35rem;
   height:1.35rem;
   min-width:0;
   padding:0;
   margin:0;
   border:1px solid rgba(255,255,255,.18);
   border-radius:50%;
   background:rgba(255,255,255,.05);
   color:rgba(255,222,194,.78);
   font-size:.55rem;
   line-height:1;
   cursor:pointer;
   opacity:.68;
 }
 #inicio .hero-motion:hover,#inicio .hero-motion:focus-visible{opacity:1;outline:2px solid #ff9d5c;outline-offset:2px}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){
 #inicio .hero-motion{display:none}
 #inicio .hero-rotator-dot{transition:none}
}
/* Primeira dobra centralizada no desktop; mobile mantém fluxo dedicado. */
.hero .hero-copy{grid-column:1/-1;max-width:58rem;width:100%;margin-inline:auto;text-align:center;position:relative}
.hero h1{max-width:none;margin-inline:auto}
.hero .subhead{margin-inline:auto;max-width:43rem}
.hero .meta{margin-inline:auto;max-width:43rem}
.hero .hero-emphasis{color:#ff9d5c;text-shadow:0 0 24px rgba(249,115,22,0.45)}
@media(max-width:600px){
 .hero .hero-copy{position:static}
 .hero .hero-title{font-size:var(--h1);line-height:1.16}
 .hero .subhead{text-align:center}
}

/* Arte da primeira dobra: copy à esquerda, personagem à direita (reveal v2 no mouse desktop + glitch v2 mobile). */
#inicio .hero-art::after{z-index:3;pointer-events:none}
#inicio .hero-art-reveal,
#inicio .hero-reveal-ring,
#inicio .hero-glitch-slices{position:absolute;inset:0;pointer-events:none}
#inicio .hero-art-reveal{z-index:1;display:none}
#inicio .hero-reveal-ring{z-index:2;display:none}
#inicio .hero-glitch-slices{z-index:1;display:none}
@media(min-width:601px){
 #inicio.hero{min-height:clamp(39rem,96svh,55rem);padding:clamp(3.25rem,7.5vh,7.5rem) 0 clamp(2.75rem,6.5vh,6.5rem)}
 #inicio .hero-art{background:url('assets/final%20image.webp') right center/cover no-repeat!important}
 #inicio .hero-art::after{background:linear-gradient(90deg,#071017 0%,rgba(7,16,23,.94) 26%,rgba(7,16,23,.72) 40%,transparent 58%),linear-gradient(0deg,#071017 0%,rgba(7,16,23,.72) 14%,transparent 34%)!important}
 #inicio .hero-copy{grid-column:1/7!important;max-width:43rem!important;margin-left:0!important;margin-right:auto!important;text-align:left!important}
 #inicio .hero-copy h1,#inicio .hero-copy .subhead,#inicio .hero-copy .meta{margin-left:0!important;margin-right:0!important;text-align:left!important}
}
@media(min-width:601px) and (hover:hover) and (pointer:fine){
 #inicio .hero-art-reveal{
   display:block;
   background:url('assets/final%20image%20v2.webp') right center/cover no-repeat;
   opacity:0;
   transition:opacity .38s ease-out;
   will-change:opacity;
   -webkit-mask-image:
     radial-gradient(circle var(--r0,185px) at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.98) 52%,rgba(0,0,0,.58) 76%,transparent 100%),
     radial-gradient(circle var(--r1,148px) at var(--t1x,-999px) var(--t1y,-999px),rgba(0,0,0,.88) 0%,rgba(0,0,0,.42) 68%,transparent 100%),
     radial-gradient(circle var(--r2,112px) at var(--t2x,-999px) var(--t2y,-999px),rgba(0,0,0,.68) 0%,transparent 100%),
     radial-gradient(circle var(--r3,82px) at var(--t3x,-999px) var(--t3y,-999px),rgba(0,0,0,.46) 0%,transparent 100%);
   mask-image:
     radial-gradient(circle var(--r0,185px) at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.98) 52%,rgba(0,0,0,.58) 76%,transparent 100%),
     radial-gradient(circle var(--r1,148px) at var(--t1x,-999px) var(--t1y,-999px),rgba(0,0,0,.88) 0%,rgba(0,0,0,.42) 68%,transparent 100%),
     radial-gradient(circle var(--r2,112px) at var(--t2x,-999px) var(--t2y,-999px),rgba(0,0,0,.68) 0%,transparent 100%),
     radial-gradient(circle var(--r3,82px) at var(--t3x,-999px) var(--t3y,-999px),rgba(0,0,0,.46) 0%,transparent 100%);
 }
 #inicio.hero-reveal-active .hero-art-reveal{opacity:1;transition:opacity .16s ease-out}
 #inicio .hero-reveal-ring{
   display:block;
   opacity:0;
   transition:opacity .38s ease-out;
   background:radial-gradient(circle calc(var(--r0,185px) * 1.04) at var(--mx,-999px) var(--my,-999px),transparent 54%,rgba(255,172,72,.20) 70%,rgba(255,112,34,.07) 84%,transparent 100%);
 }
 #inicio.hero-reveal-active .hero-reveal-ring{opacity:1;transition:opacity .16s ease-out}
}
@media(min-width:601px) and (max-height:820px){
 #inicio.hero{min-height:min(100svh,46rem);padding:3.25rem 0 2.75rem}
 #inicio .hero-logo{width:13rem;margin-bottom:.5rem}
 #inicio .subhead{margin-top:1.15rem;line-height:1.45}
 #inicio .cta{margin-top:1.25rem}
 #inicio .meta{margin-top:1.05rem}
}
@media(min-width:1600px) and (min-height:920px){
 #inicio.hero{min-height:67.5rem}
}
/* Composição mobile revisada: título estático bold/brilhante, sub-frases animadas e CTA na 1ª dobra. */
@font-face{font-family:Paperlogy;src:url(assets/Paperlogy-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@media(max-width:600px){
 #inicio.hero{padding-top:12rem;padding-bottom:2rem}
 #inicio .wrap{width:calc(100% - 2rem)}
 #inicio .hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
 #inicio .hero-title{width:100%;margin:0;text-align:center}
 #inicio .hero-emphasis{color:#ff9d5c;text-shadow:none}
 #inicio .subhead{margin:1rem auto 0;font-size:.94rem;line-height:1.45;max-width:34rem;text-align:center;text-wrap:pretty}
 #inicio .cta{margin-top:1.5rem}
 #inicio .meta{margin:1.15rem auto 0;font-size:.68rem;line-height:1.5;max-width:30rem;text-align:center}
}

#inicio .hero-logo{display:block;width:15rem;max-width:65%;aspect-ratio:3/1;margin:0 0 .8rem;background:url('assets/logo-maipv-sprite.webp') 0 0/100% 300% no-repeat;animation:logoGlitch 1.1s steps(1,end) infinite;animation-play-state:paused}
#inicio .black-november-badge{position:absolute;z-index:3;top:1rem;right:2rem;width:14rem;height:auto;pointer-events:none}
@media(max-width:600px){#inicio .black-november-badge{top:.5rem;right:.5rem;width:9rem}}
/* Reset limpo do CTA no Hero (#inicio): herda o botão retrô de laca sem molduras ou caixas parasitas */
#inicio .cta,
#inicio .cta.retro-3d-button {
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
  min-height: 0 !important;
  border-radius: 500px !important;
}
#inicio .cta::before,
#inicio .cta::after,
#inicio .cta.retro-3d-button::before,
#inicio .cta.retro-3d-button::after {
  display: none !important;
  content: none !important;
}
#inicio.sprite-visible .hero-logo{animation-play-state:running}
@keyframes logoGlitch{0%,100%{filter:none}12%,39%,72%{filter:brightness(1.18) drop-shadow(1px 0 0 #65eaff88)}16%,43%,77%{filter:brightness(.88) drop-shadow(-1px 0 0 #d28dff88)}20%,48%,82%{filter:none}59%{filter:brightness(1.28)}63%{filter:none}}
@media(prefers-reduced-motion:reduce){#inicio .hero-logo{animation:none}}
@media(max-width:600px){#inicio .hero-logo{width:12rem;margin:0 auto .5rem}}
@media(max-width:600px){#inicio .black-november-badge{right:1rem}}

.scroll-identity{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.55rem 1.5rem;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;background:linear-gradient(#071017d9,transparent)}
.scroll-identity.is-visible{opacity:1;visibility:visible;transform:none}
.scroll-identity .hero-logo{display:block;width:10rem;aspect-ratio:3/1;background:url('assets/logo-maipv-sprite.webp') 0 0/100% 300% no-repeat;animation:logoGlitch 1.1s steps(1,end) infinite;animation-play-state:paused}
.scroll-identity.is-visible:not(.is-paused) .hero-logo{animation-play-state:running}
.scroll-identity .black-november-badge{display:block;width:12rem;height:auto}
@media(max-width:600px){.scroll-identity{padding:.4rem .6rem}.scroll-identity .hero-logo{width:7.5rem}.scroll-identity .black-november-badge{width:9rem}}
@media(prefers-reduced-motion:reduce){.scroll-identity{transition:none}.scroll-identity .hero-logo{animation:none}}
/* Mobile: personagem nítido sem blur ou névoa, imagem 100% visível com contraste focado no texto */
@media(max-width:600px){
 #inicio.hero{--hero-visual:min(100vw,max(11.5rem,calc(100svh - 23.5rem)));padding-top:var(--hero-visual)!important;padding-bottom:max(26px,env(safe-area-inset-bottom))!important;background:#071017!important;min-height:100svh}
 #inicio::before{display:none}
 #inicio .hero-art{inset:0 0 auto!important;width:100%!important;height:min(100%,178vw)!important;background:url('assets/final%20image%20mobile.webp') center top/100% auto no-repeat!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 86%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 86%)}
 #inicio .hero-art::after{background:linear-gradient(180deg,transparent 0%,transparent 48%,rgba(7,16,23,.78) 62%,#071017 78%)!important}
 #inicio .hero-glitch-slices{display:block;overflow:hidden}
 #inicio .hero-glitch-slice{position:absolute;inset:0;background:url('assets/final%20image%20mobile%20v2.webp') center top/100% auto no-repeat;opacity:0;will-change:clip-path,transform,opacity}
 #inicio .hero-glitch-bar{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(255,180,82,.72) 22%,rgba(255,244,210,.92) 50%,rgba(255,120,40,.68) 78%,transparent 100%);opacity:0;pointer-events:none;will-change:transform,opacity}
 #inicio .hero-copy{position:relative;z-index:1;display:flex;flex-direction:column}
 #inicio .hero-logo{order:0;margin-bottom:.38rem}
 #inicio .hero-title{order:1}
 #inicio .hero-mobile-rotator{order:2}
 #inicio .cta{order:3;margin-top:.85rem!important}
 #inicio .meta{order:4;margin-top:.85rem!important}
 #inicio .subhead{display:none!important}
 #inicio .meta{text-shadow:none!important;color:#cbd5e1!important}
}

/* Títulos da página: Paperlogy Bold. */
h1,h2,h3{font-family:Paperlogy,sans-serif;font-weight:700}

/* ========================================================
   DIVISÓRIA 3D MODULAR (#inicio -> #para-quem #071017)
   ======================================================== */

.section-divider-3d {
  --div-h: 136px;
  --wing-w: calc(var(--div-h) * 220 / 280);
  --orb-size: 98px;
  --dots-size: 146px;
  position: relative;
  z-index: 6;
  width: 100%;
  height: var(--div-h);
  margin-top: -3.25rem;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}

.section-divider-3d .div3d-backdrop {
  position: absolute;
  inset: 14px 0 0 0;
  background:
    radial-gradient(ellipse 38% 72% at 50% 34%, rgba(255, 132, 56, 0.16) 0%, rgba(16, 42, 58, 0.24) 44%, transparent 76%),
    linear-gradient(180deg, transparent 0%, rgba(7, 16, 23, 0.72) 52%, #071017 100%);
  pointer-events: none;
}

.section-divider-3d .div3d-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(1.5rem, 12vw) var(--wing-w) 1fr var(--wing-w) minmax(1.5rem, 12vw);
  width: 100%;
  height: var(--div-h);
}

.section-divider-3d .div3d-piece {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.section-divider-3d .div3d-ext-left,
.section-divider-3d .div3d-ext-right {
  background-image: url('assets/divider-high-ext.webp');
}

.section-divider-3d .div3d-wing-left {
  background-image: url('assets/divider-wing-left.webp');
}

.section-divider-3d .div3d-mid-low {
  background-image: url('assets/divider-mid-low.webp');
}

.section-divider-3d .div3d-wing-right {
  background-image: url('assets/divider-wing-right.webp');
}

.section-divider-3d .div3d-orb-btn {
  position: absolute;
  left: 50%;
  /* 116 / 280 = 41.43% é exatamente a crista da borda média baixa */
  top: calc(var(--div-h) * 0.4143);
  transform: translate(-50%, -50%);
  z-index: 3;
  width: var(--dots-size);
  height: var(--dots-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-divider-3d .div3d-orb-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.section-divider-3d .div3d-orb-btn:focus-visible {
  outline: 2px solid #ff9d5c;
  outline-offset: 4px;
}

.section-divider-3d .div3d-orb-aura {
  grid-area: 1 / 1;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.55) 0%, rgba(249, 115, 22, 0.14) 55%, transparent 74%);
  pointer-events: none;
}

.section-divider-3d .div3d-orb-dots {
  grid-area: 1 / 1;
  width: var(--dots-size);
  height: var(--dots-size);
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
  animation: div3dDotsOrbit 26s linear infinite;
  animation-play-state: paused;
}

.section-divider-3d .div3d-orb-core {
  grid-area: 1 / 1;
  width: var(--orb-size);
  height: var(--orb-size);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
}

.section-divider-3d .div3d-arrow-stage {
  grid-area: 1 / 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform;
  animation: div3dArrowSpin 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-play-state: paused;
}

.section-divider-3d .div3d-arrow-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(135, 35, 0, 0.65));
}

.section-divider-3d.is-inview .div3d-orb-dots,
.section-divider-3d.is-inview .div3d-arrow-stage {
  animation-play-state: running;
}

body.paused .section-divider-3d .div3d-orb-dots,
body.paused .section-divider-3d .div3d-arrow-stage {
  animation-play-state: paused;
}

@keyframes div3dDotsOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes div3dArrowSpin {
  0% { transform: perspective(180px) rotateY(0deg) translateY(0px); }
  30% { transform: perspective(180px) rotateY(0deg) translateY(2.5px); }
  58% { transform: perspective(180px) rotateY(0deg) translateY(0px); }
  94%, 100% { transform: perspective(180px) rotateY(360deg) translateY(0px); }
}

@media (max-width: 900px) {
  .section-divider-3d {
    --div-h: 112px;
    --orb-size: 84px;
    --dots-size: 124px;
  }
  .section-divider-3d .div3d-rail {
    grid-template-columns: minmax(1rem, 8vw) var(--wing-w) 1fr var(--wing-w) minmax(1rem, 8vw);
  }
}

@media (max-width: 600px) {
  .section-divider-3d {
    --div-h: 84px;
    --orb-size: 66px;
    --dots-size: 98px;
    margin-top: 0;
    padding-top: 18px;
    height: calc(var(--div-h) + 18px);
    background: #071017;
  }
  .section-divider-3d .div3d-backdrop {
    top: 26px;
  }
  .section-divider-3d .div3d-rail {
    grid-template-columns: minmax(0.75rem, 6vw) var(--wing-w) 1fr var(--wing-w) minmax(0.75rem, 6vw);
  }
  .section-divider-3d .div3d-orb-btn {
    top: calc(18px + var(--div-h) * 0.4143);
  }
  .section-divider-3d .div3d-arrow-stage {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 600px) and (min-height: 700px) and (min-width: 360px) {
  #inicio.hero {
    --hero-visual: min(90vw, max(11rem, calc(100svh - 27.4rem)));
    min-height: calc(100svh - 4.75rem);
    padding-bottom: 1.55rem !important;
  }
  .section-divider-3d {
    --div-h: 78px;
    --orb-size: 64px;
    --dots-size: 94px;
    margin-top: 0;
    padding-top: 0;
    height: var(--div-h);
    background: transparent;
  }
  .section-divider-3d .div3d-backdrop {
    top: 10px;
  }
  .section-divider-3d .div3d-orb-btn {
    top: calc(var(--div-h) * 0.4143);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-divider-3d .div3d-orb-dots,
  .section-divider-3d .div3d-arrow-stage {
    animation: none !important;
    transform: none !important;
  }
}

/* ========================================================
   SEÇÃO #para-quem: DESKTOP (>= 601px) & MOBILE (<= 600px)
   ======================================================== */

#para-quem.pain-section {
  overflow: hidden;
  padding-block: clamp(2rem, 4.5vw, 4.25rem) clamp(4rem, 8vw, 8rem);
  background: #071017;
}
#para-quem .pain-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
#para-quem .pain-heading {
  max-width: 54rem;
}
#para-quem .pain-heading h2 {
  margin-bottom: 1rem;
}
#para-quem .pain-outro {
  max-width: 54rem;
  margin-top: 1rem;
  color: #b8b8c5;
}

/* --------------------------------------------------------
   DESKTOP (min-width: 601px): 5 Lâminas Paralelas Alinhadas
   - Imagens 100% nítidas (sem escada / sem painel preto)
   - Títulos visíveis no rodapé de cada lâmina
   - Sem leitor mobile duplicado
   -------------------------------------------------------- */
@media (min-width: 601px) {
  #para-quem .pain-mobile-reader {
    display: none !important;
  }

  #para-quem .pain-panels {
    --pain-diag: 36px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 34rem !important;
    min-height: 34rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  #para-quem .pain-panel,
  #para-quem .pain-panel:nth-child(n) {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    width: calc(20% + var(--pain-diag)) !important;
    height: 34rem !important;
    min-height: 34rem !important;
    margin: 0 !important;
    padding: 1.5rem calc(var(--pain-diag) * 0.3 + 0.55rem) 1.85rem calc(var(--pain-diag) + 0.45rem) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: 0.92 !important;
    filter: none !important;
    transform: none !important;
    transform-origin: initial !important;
    transition: opacity 0.35s ease !important;
  }

  /* Lâminas contíguas com corte diagonal paralelo sem vazamento */
  #para-quem .pain-panel:nth-child(1) {
    left: 0 !important;
    padding: 1.5rem calc(var(--pain-diag) * 0.35 + 0.55rem) 1.85rem 0.85rem !important;
    clip-path: polygon(0 0, calc(100% - var(--pain-diag)) 0, 100% 100%, 0 100%) !important;
  }
  #para-quem .pain-panel:nth-child(2) {
    left: 20% !important;
    clip-path: polygon(0 0, calc(100% - var(--pain-diag)) 0, 100% 100%, var(--pain-diag) 100%) !important;
  }
  #para-quem .pain-panel:nth-child(3) {
    left: 40% !important;
    clip-path: polygon(0 0, calc(100% - var(--pain-diag)) 0, 100% 100%, var(--pain-diag) 100%) !important;
  }
  #para-quem .pain-panel:nth-child(4) {
    left: 60% !important;
    clip-path: polygon(0 0, calc(100% - var(--pain-diag)) 0, 100% 100%, var(--pain-diag) 100%) !important;
  }
  #para-quem .pain-panel:nth-child(5) {
    left: 80% !important;
    width: 20% !important;
    padding: 1.5rem 0.65rem 1.85rem calc(var(--pain-diag) + 0.45rem) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pain-diag) 100%) !important;
  }

  /* Imagens 9:16 no Desktop: monocromáticas no padrão cyan/petróleo da page quando não selecionadas */
  #para-quem .pain-art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 1 !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 62%, rgba(0,0,0,0.42) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 62%, rgba(0,0,0,0.42) 84%, transparent 100%);
    filter: grayscale(100%) sepia(100%) hue-rotate(148deg) saturate(1.45) contrast(1.12) brightness(0.56) !important;
    transition: opacity 0.4s ease, filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }
  #para-quem .pain-panel:nth-child(1) .pain-art {
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(7,16,23,0.78) 75%, #071017 100%),
                url('assets/matheus-sand-disintegration-9-16.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(2) .pain-art {
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(7,16,23,0.78) 75%, #071017 100%),
                url('assets/matheus-burning-dollar-digital-code-9-16.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(3) .pain-art {
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(7,16,23,0.78) 75%, #071017 100%),
                url('assets/matheus-overloaded-ai-machines-9-16.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(4) .pain-art {
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(7,16,23,0.78) 75%, #071017 100%),
                url('assets/matheus-white-vision-cyan-9-16.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(5) .pain-art {
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(7,16,23,0.78) 75%, #071017 100%),
                url('assets/matheus-mind-armchair-vision-9-16.webp') center top / cover no-repeat !important;
  }

  /* Textos das lâminas no Desktop */
  #para-quem .pain-panel p {
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-bottom: 0.25rem !important;
    text-align: center !important;
    color: #ffffff !important;
    font-family: Paperlogy, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(0.75rem, 0.94vw, 0.98rem) !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    transform: none !important;
  }

  /* Estado em foco / hover no desktop: apenas o selecionado brilha em cores */
  #para-quem .pain-panel:hover,
  #para-quem .pain-panel:focus-visible,
  #para-quem .pain-panel.is-featured {
    z-index: 6 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  #para-quem .pain-panel:hover .pain-art,
  #para-quem .pain-panel:focus-visible .pain-art,
  #para-quem .pain-panel.is-featured .pain-art {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.04) !important;
  }
}
@media (min-width: 601px) and (max-width: 1220px) {
  #para-quem .wrap {
    width: min(94%, 80rem);
  }
  #para-quem .pain-panels {
    --pain-diag: 24px;
    height: 31rem !important;
    min-height: 31rem !important;
  }
  #para-quem .pain-panel,
  #para-quem .pain-panel:nth-child(n) {
    height: 31rem !important;
    min-height: 31rem !important;
  }
}

/* --------------------------------------------------------
   MOBILE (max-width: 600px): 5 Fatias de Vidro Quebrado
   - Fatias de Matheus nítidas em cima
   - Títulos do problema e navegação CRT visíveis embaixo
   -------------------------------------------------------- */
@media (max-width: 600px) {
  #para-quem.pain-section {
    padding-block: 3.5rem;
    border: none !important;
    outline: none !important;
  }
  #para-quem .pain-wrap {
    gap: 1.25rem;
    border: none !important;
    outline: none !important;
  }
  #para-quem .pain-heading,
  #para-quem .pain-outro {
    text-align: center !important;
    margin-inline: auto !important;
  }
  
  /* Palco das fatias */
  #para-quem .pain-panels {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: 26rem !important;
    min-height: 26rem !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #071017 !important;
    isolation: isolate;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 70%, rgba(0,0,0,0.85) 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 70%, rgba(0,0,0,0.85) 85%, transparent 100%);
  }
  
  /* Painéis das fatias móveis */
  #para-quem .pain-panel,
  #para-quem .pain-panel:nth-child(n) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 26rem !important;
    min-height: 26rem !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    will-change: clip-path, transform;
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease !important;
    cursor: pointer;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* Esconde o texto dentro da lâmina no mobile, pois é exibido no leitor */
  #para-quem .pain-panel p {
    display: none !important;
  }
  
  /* Imagem base mobile: monocromática no padrão cyan/petróleo da page quando não selecionada */
  #para-quem .pain-art {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
    filter: grayscale(100%) sepia(100%) hue-rotate(148deg) saturate(1.45) contrast(1.12) brightness(0.55) !important;
    transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
  }
  
  #para-quem .pain-panel:nth-child(1) .pain-art {
    inset: 0 auto 0 -9% !important;
    width: 57%;
    background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(7,16,23,0.85) 90%, #071017 100%),
                url('assets/matheus-sand-wide.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(2) .pain-art {
    inset: 0 auto 0 2.5% !important;
    width: 57%;
    background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(7,16,23,0.85) 90%, #071017 100%),
                url('assets/matheus-burning-dollar-wide.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(3) .pain-art {
    inset: 0 auto 0 21.5% !important;
    width: 57%;
    background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(7,16,23,0.85) 90%, #071017 100%),
                url('assets/matheus-overloaded-wide.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(4) .pain-art {
    inset: 0 auto 0 41.5% !important;
    width: 57%;
    background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(7,16,23,0.85) 90%, #071017 100%),
                url('assets/matheus-white-vision-wide.webp') center top / cover no-repeat !important;
  }
  #para-quem .pain-panel:nth-child(5) .pain-art {
    inset: 0 auto 0 61.5% !important;
    width: 57%;
    background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(7,16,23,0.85) 90%, #071017 100%),
                url('assets/matheus-mind-armchair-wide.webp') center top / cover no-repeat !important;
  }
  
  /* Cortes de vidro quebrado no Mobile */
  #para-quem .pain-panel:nth-child(1) {
    clip-path: polygon(0 2.5%, 19.3% 1%, 49% 100%, 0 100%) !important;
    transform: translateY(10px) !important;
  }
  #para-quem .pain-panel:nth-child(2) {
    clip-path: polygon(20.7% 0, 39.3% 1.8%, 49.65% 100%) !important;
    transform: translateY(-14px) !important;
  }
  #para-quem .pain-panel:nth-child(3) {
    clip-path: polygon(40.7% 2%, 59.3% 0, 50% 100%) !important;
    transform: translateY(12px) !important;
  }
  #para-quem .pain-panel:nth-child(4) {
    clip-path: polygon(60.7% 0, 79.3% 2.4%, 50.35% 100%) !important;
    transform: translateY(-16px) !important;
  }
  #para-quem .pain-panel:nth-child(5) {
    clip-path: polygon(80.7% 1.5%, 100% 3%, 100% 100%, 51% 100%) !important;
    transform: translateY(10px) !important;
  }
  
  /* Estados inativo e em foco no Mobile */
  #para-quem .pain-panel:not(.is-featured) {
    opacity: 1 !important;
  }
  #para-quem .pain-panel:not(.is-featured) .pain-art {
    filter: grayscale(100%) sepia(100%) hue-rotate(148deg) saturate(1.45) contrast(1.12) brightness(0.55) !important;
  }
  #para-quem .pain-panel.is-featured {
    z-index: 5 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 16px rgba(243, 85, 24, 0.65)) !important;
  }
  #para-quem .pain-panel.is-featured .pain-art {
    filter: none !important;
    opacity: 1 !important;
  }
  #para-quem .pain-panel:nth-child(1).is-featured {
    clip-path: polygon(0 0, 30% 0, 50% 100%, 0 100%) !important;
    transform: translateY(4px) scale(1.04) !important;
  }
  #para-quem .pain-panel:nth-child(2).is-featured {
    clip-path: polygon(15.5% 0, 44.5% 1.8%, 49.65% 100%) !important;
    transform: translateY(-18px) scale(1.05) !important;
  }
  #para-quem .pain-panel:nth-child(3).is-featured {
    clip-path: polygon(35.5% 2%, 64.5% 0, 50% 100%) !important;
    transform: translateY(8px) scale(1.05) !important;
  }
  #para-quem .pain-panel:nth-child(4).is-featured {
    clip-path: polygon(55.5% 0, 84.5% 2.4%, 50.35% 100%) !important;
    transform: translateY(-20px) scale(1.05) !important;
  }
  #para-quem .pain-panel:nth-child(5).is-featured {
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 50% 100%) !important;
    transform: translateY(4px) scale(1.05) !important;
  }
  
  /* Leitor de problemas no mobile: encaixado logo abaixo do fade das fatias, sem vão escuro */
  #para-quem .pain-mobile-reader {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    gap: 0.85rem !important;
    min-height: auto !important;
    margin: -5.4rem auto 0 !important;
    padding: 0 1.25rem !important;
    text-align: center !important;
    overflow: visible !important;
    isolation: isolate;
    z-index: 10 !important;
    pointer-events: auto !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
  }
  
  #para-quem .pain-mobile-glow {
    display: none !important;
  }
  
  #para-quem .pain-copy-stage {
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 24rem !important;
    margin: 0 auto !important;
  }

  #para-quem .pain-mobile-copy,
  #para-quem .pain-copy-sizer {
    grid-area: 1 / 1 !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 24rem !important;
    margin: 0 auto !important;
    color: #ffffff !important;
    font-family: Paperlogy, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.15rem, 4.4vw, 1.4rem) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-wrap: balance !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95) !important;
  }

  #para-quem .pain-copy-sizer {
    visibility: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
    text-shadow: none !important;
  }
  
  #para-quem .decode-layout {
    visibility: hidden;
    display: block;
  }
  #para-quem .decode-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    width: 100%;
    height: 100%;
    word-break: break-word;
  }
  
  /* Navegação do leitor (Cápsula Retro Enamel / Latão) */
  #para-quem .pain-mobile-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    padding: 0.45rem 0.8rem 0.55rem !important;
    border: 1px solid #a39978 !important;
    border-radius: 0.8rem !important;
    background: linear-gradient(180deg, #485b51, #182e29 18%, #10211e 80%, #35483c) !important;
    box-shadow: inset 0 1px 0 #d9dfbb88, 0 3px 0 #101a16, 0 7px 12px #0006 !important;
    pointer-events: auto !important;
  }
  
  #para-quem .pain-mobile-nav button {
    width: 2.65rem !important;
    height: 2.65rem !important;
    border: 3px solid #b4b59a !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 22%, #668e7d, #285249 55%, #112c27 85%) !important;
    color: #fff1c9 !important;
    box-shadow: inset 0 1px 1px #e1f0cf88, inset 0 -3px 3px #061c17, 0 3px 0 #101b15, 0 4px 5px #0009 !important;
    text-shadow: 0 1px 2px #000 !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, filter 0.15s ease !important;
  }
  
  #para-quem .pain-mobile-nav button:hover {
    filter: brightness(1.18) !important;
  }
  #para-quem .pain-mobile-nav button:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px #061c17, 0 1px 0 #101b15 !important;
  }
  #para-quem .pain-mobile-nav button:focus-visible {
    outline: 2px solid #ff7836 !important;
    outline-offset: 4px !important;
  }
  
  #para-quem .pain-mobile-nav .pain-mobile-count {
    display: grid !important;
    place-items: center !important;
    min-width: 3.6rem !important;
    min-height: 2.1rem !important;
    padding: 0.2rem 0.45rem !important;
    border: 2px solid #817754 !important;
    border-radius: 0.25rem !important;
    background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px),
                linear-gradient(180deg, #101810, #293323 55%, #101810) !important;
    color: #ffd58b !important;
    font-family: Paperlogy, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 0 5px #edaf4c88 !important;
    box-shadow: inset 0 2px 5px #000b, 0 1px 0 #c5b988 !important;
  }
  
  #para-quem .pain-outro {
    margin-top: 0.75rem !important;
    border: none !important;
  }
}

/* Terceira dobra: Como funciona - Composição radial Ninjak (Fatias de pizza contíguas borda com borda) */
#como-funciona .steps-gears{display:flex;align-items:center;justify-content:center;height:6.5rem;margin:0 auto 1rem;pointer-events:none}
#como-funciona .steps-gears img{width:5.5rem;height:5.5rem;animation:stepsGearTurn 18s linear infinite;animation-play-state:paused}
#como-funciona .steps-gears img+img{margin-left:-.3rem;margin-top:2.1rem;width:4.1rem;height:4.1rem;animation-direction:reverse;animation-duration:13.5s}
#como-funciona.gears-visible .steps-gears img{animation-play-state:running}
body.paused #como-funciona .steps-gears img{animation-play-state:paused}
@keyframes stepsGearTurn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#como-funciona .steps-gears img{animation:none}}

/* Transição suave e cinematográfica de cores entre #aulas e #diferencial */
#aulas.wash{
  background:linear-gradient(180deg,#071017 0%,#0b0f1b 16%,#10101c 34%,#0d0e17 56%,#0a1118 78%,#071017 95%,#071017 100%);
  position:relative;
}
#aulas .wrap{
  position:relative;
  z-index:2;
}
#aulas::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(8rem, 18vh, 18rem);
  background:linear-gradient(180deg,transparent 0%,rgba(7,16,23,0.45) 40%,#071017 100%);
  pointer-events:none;
  z-index:1;
}

@media(min-width:601px){
 #aulas.section{padding-top:clamp(1.6rem,3.4vh,3.8rem);padding-bottom:clamp(1.8rem,4vh,4.2rem);overflow-x:clip;overflow-y:visible}
 #aulas .split{display:block}
 #aulas .section-intro{
   position:relative;
   top:auto;
   z-index:5;
   text-align:center;
   max-width:55rem;
   margin:0 auto;
   padding:0.25rem 1rem;
   background:transparent!important;
   backdrop-filter:none!important;
   -webkit-backdrop-filter:none!important;
 }
 #aulas .section-intro::before{
   display:none!important;
   content:none!important;
 }
 #aulas .section-intro h2{
   font-family:Paperlogy,sans-serif!important;
   font-weight:800!important;
   font-size:clamp(1.6rem,2.75vw,2.75rem);
   line-height:1.15;
   color:#ffffff;
   text-shadow:0 2px 8px rgba(0,0,0,0.85);
 }
 #aulas .visual-reserve{display:none}
 
 /* Carrossel Desktop compacto para caber completo em 1024x768 e 1280x720 com folga pros props 3D */
 #aulas .lessons{
   position:relative;
   z-index:40;
   display:block;
   height:clamp(19.4rem,40.5vh,23.2rem);
   margin:clamp(7.8rem,14vh,8.8rem) auto 0;
   perspective:1200px;
   counter-reset:desktop-lesson;
   list-style:none;
   padding:0;
 }
 
 /* Card Desktop com Smooth Layered Shadow e borda 20px limpa */
 #aulas .lessons li{
   counter-increment:desktop-lesson;
   position:absolute;
   left:50%;
   top:0.2rem;
   width:clamp(16.8rem,28vw,24rem);
   height:clamp(19rem,39.5vh,22.8rem);
   box-sizing:border-box;
   display:flex;
   flex-direction:column;
   gap:0.65rem;
   padding:clamp(1.1rem,2vh,1.7rem) clamp(1.25rem,2vw,1.85rem);
   border:20px solid transparent;
   border-image:url('assets/frame-teal-chrome.webp') 110 / 24px / 0 stretch;
   border-radius:2rem;
   background:linear-gradient(#07101726,#07101755),url('assets/texture-cyan-vintage-tile.webp') 0 0/160px repeat;
   opacity:0;
   visibility:hidden;
   transform:translateX(-50%) scale(.84)!important;
   transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease,box-shadow .5s ease;
   pointer-events:none;
   overflow:visible!important;
   isolation:isolate;
   box-shadow:
     0 2px 4px rgba(0,0,0,0.16),
     0 6px 14px rgba(0,0,0,0.22),
     0 16px 32px rgba(0,0,0,0.32),
     0 32px 64px rgba(0,0,0,0.42);
 }
 #aulas .lessons li::before{content:'AULA 0' counter(desktop-lesson);font-size:.7rem;color:#ffe0a0;letter-spacing:.06em}
 
 /* Card Central Ativo */
 #aulas .lessons li.is-center{
   visibility:visible;
   opacity:1;
   filter:none!important;
   z-index:45;
   transform:translateX(-50%) scale(1)!important;
   pointer-events:auto;
   box-shadow:
     0 3px 6px rgba(0,0,0,0.2),
     0 10px 20px rgba(0,0,0,0.26),
     0 22px 44px rgba(0,0,0,0.36),
     0 44px 88px rgba(0,0,0,0.48),
     0 0 32px rgba(52,211,192,0.16),
     inset 0 1px 1px rgba(255,255,255,0.25)!important;
 }
 
 /* Cards Laterais simétricos no eixo (-50% +- gap) */
 #aulas .lessons li.is-prev{
   visibility:visible;
   opacity:.55;
   z-index:41;
   cursor:pointer;
   pointer-events:auto!important;
   transform:translateX(calc(-50% - clamp(17.5rem,29.5vw,25.5rem))) scale(.86) rotateY(8deg)!important;
   box-shadow:
     0 2px 6px rgba(0,0,0,0.22),
     0 8px 18px rgba(0,0,0,0.32),
     0 20px 40px rgba(0,0,0,0.42)!important;
 }
 #aulas .lessons li.is-next{
   visibility:visible;
   opacity:.55;
   z-index:41;
   cursor:pointer;
   pointer-events:auto!important;
   transform:translateX(calc(-50% + clamp(17.5rem,29.5vw,25.5rem))) scale(.86) rotateY(-8deg)!important;
   box-shadow:
     0 2px 6px rgba(0,0,0,0.22),
     0 8px 18px rgba(0,0,0,0.32),
     0 20px 40px rgba(0,0,0,0.42)!important;
 }
 #aulas .lessons li h3{font-size:clamp(1.12rem,1.45vw,1.32rem);line-height:1.18}
 #aulas .lessons li p{font-size:clamp(.86rem,1.05vw,.96rem);color:#e0e9e6;line-height:1.42;margin:0}
 #aulas .lessons li .icon{width:1.7rem;height:1.7rem}
 
 /* ========================================================
    ADEREÇOS 3D NO TOPO DO MONITOR RETRÔ (DESKTOP) — GPU COMPOSITOR
    ======================================================== */
 #aulas .lessons .lesson-mechanism,
 #aulas .lessons .lesson-typewriter,
 #aulas .lessons .lesson-pinch,
 #aulas .lessons .lesson-camera,
 #aulas .lessons .lesson-tv,
 #aulas .lessons .lesson-mario,
 #aulas .lessons .lesson-domain {
   position: absolute !important;
   left: 50% !important;
   top: -6.4rem !important;
   transform: translateX(-50%) !important;
   pointer-events: none !important;
   display: block !important;
   z-index: 5 !important;
 }

 /* AULA 01: Mecanismo de engrenagem em latão e catraca */
 #aulas .lessons .lesson-mechanism {
   top: -6.7rem !important;
   width: 12.5rem !important;
   height: 6.7rem !important;
   overflow: visible !important;
 }
 #aulas .lessons .lesson-mechanism img {
   position: absolute !important;
   display: block !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-mechanism .lesson-cog {
   width: 5.2rem !important;
   height: 5.2rem !important;
   left: 3.65rem !important;
   top: 1.05rem !important;
   object-fit: contain !important;
   animation: deskLessonCog 3s linear infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-mechanism .lesson-ratchet {
   width: 8.2rem !important;
   height: 8.2rem !important;
   left: 1.75rem !important;
   top: -0.75rem !important;
   object-fit: contain !important;
   transform-origin: 50% 56% !important;
   animation: deskLessonRatchet 1.5s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }

 /* AULA 02: Máquina de Escrever Retrô 1950s com papel, texto e teclas */
 #aulas .lessons .lesson-typewriter {
   top: -6.35rem !important;
   width: 10rem !important;
   height: 6.4rem !important;
   overflow: visible !important;
 }
 #aulas .lessons .lesson-typewriter > img {
   position: absolute !important;
   bottom: -0.4rem !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: 8.6rem !important;
   height: 8.6rem !important;
   object-fit: contain !important;
   z-index: 2 !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
 }
 #aulas .lessons .lesson-typewriter::before,
 #aulas .lessons .lesson-typewriter::after {
   content: '' !important;
   position: absolute !important;
   z-index: 3 !important;
   width: 0.34rem !important;
   height: 0.22rem !important;
   border-radius: 50% !important;
   border: 1px solid #a39879 !important;
   background: radial-gradient(ellipse at 35% 25%, #fff4d5, #bcaf8b) !important;
   box-shadow: 0 2px 0 #243b32 !important;
   top: 4.95rem !important;
   left: 3.45rem !important;
   animation: deskTypewriterKey 0.37s steps(2, end) infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-typewriter::after {
   left: 6.1rem !important;
   animation-duration: 0.53s !important;
   animation-delay: 0.17s !important;
 }
 #aulas .lessons .lesson-typewriter .typewriter-carriage {
   position: absolute !important;
   top: -1.45rem !important;
   left: 50% !important;
   margin-left: -2.65rem !important;
   width: 5.3rem !important;
   height: 4.3rem !important;
   z-index: 1 !important;
   animation: deskTypewriterCarriage 4s steps(14, end) infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-typewriter .typewriter-paper {
   position: absolute !important;
   inset: 0 !important;
   background: linear-gradient(100deg, #c2b99d, #fff3d4 35%, #e1d4af) !important;
   border-radius: 0.15rem !important;
   box-shadow: 0 2px 6px rgba(0,0,0,0.55) !important;
   padding: 0.55rem 0.5rem !important;
   display: block !important;
 }
 #aulas .lessons .lesson-typewriter .typewriter-paper > span {
   display: block !important;
   height: 2.1rem !important;
   background: repeating-linear-gradient(180deg, #514b3b 0 1px, transparent 1px 6px) !important;
   animation: deskTypewriterInk 4s steps(14, end) infinite !important;
   animation-play-state: paused !important;
   transform-origin: left center !important;
 }

 /* AULA 03: Braço Robótico Articulado com Cursor Retrô sem cobrir AULA 03 */
 #aulas .lessons .lesson-pinch {
   top: -6.45rem !important;
   width: 11.5rem !important;
   height: 5.65rem !important;
   z-index: -1 !important;
   overflow: hidden !important;
 }
 #aulas .lessons .lesson-pinch .pinch-hand {
   position: absolute !important;
   inset: auto !important;
   width: 8.8rem !important;
   height: 8.8rem !important;
   left: 0.55rem !important;
   top: -0.25rem !important;
   z-index: 2 !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation: deskPinchLift 5s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-pinch .pinch-palm,
 #aulas .lessons .lesson-pinch .pinch-index,
 #aulas .lessons .lesson-pinch .pinch-thumb {
   position: absolute !important;
   inset: 0 !important;
   width: 8.8rem !important;
   height: 8.8rem !important;
   background-image: url('assets/lesson-pinch-natural.webp') !important;
   background-size: 100% 100% !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
 }
 #aulas .lessons .lesson-pinch .pinch-palm {
   clip-path: polygon(0 0, 45% 0, 45% 26%, 62% 26%, 62% 32%, 53% 36%, 53% 43%, 100% 43%, 100% 100%, 0 100%) !important;
 }
 #aulas .lessons .lesson-pinch .pinch-index {
   clip-path: polygon(45% 12%, 85% 12%, 85% 27%, 45% 27%) !important;
   transform-origin: 47% 22% !important;
   animation: deskPinchIndex 5s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-pinch .pinch-thumb {
   clip-path: polygon(53% 35%, 65% 26%, 85% 26%, 85% 42%, 55% 47%) !important;
   transform-origin: 54% 36% !important;
   animation: deskPinchThumb 5s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-pinch .pinch-cursor {
   position: absolute !important;
   display: block !important;
   width: 1.85rem !important;
   height: 1.85rem !important;
   left: 6.45rem !important;
   top: 0.65rem !important;
   z-index: 1 !important;
   background-image: url('assets/lesson-robot-pinch-atlas.webp') !important;
   background-size: 200% 200% !important;
   background-position: 100% 100% !important;
   background-repeat: no-repeat !important;
   transform-origin: center !important;
   animation: deskPinchCursor 5s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }
 #aulas .lessons .lesson-pinch .pinch-wave {
   display: none !important;
 }

 /* AULA 04: Câmera Fotográfica Vintage 1950s */
 #aulas .lessons .lesson-camera {
   top: -6.35rem !important;
   width: 10rem !important;
   height: 6.4rem !important;
   overflow: visible !important;
 }
 #aulas .lessons .lesson-camera > img {
   position: absolute !important;
   bottom: -0.45rem !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: 8.6rem !important;
   height: 8.6rem !important;
   object-fit: contain !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation: deskCameraFloat 4.2s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }

 /* AULA 05: TV Analógica Retrô com Tubo CRT */
 #aulas .lessons .lesson-tv {
   top: -6.35rem !important;
   width: 10rem !important;
   height: 6.4rem !important;
   overflow: visible !important;
 }
 #aulas .lessons .lesson-tv > img {
   position: absolute !important;
   bottom: -0.45rem !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: 8.6rem !important;
   height: 8.6rem !important;
   object-fit: contain !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation: deskTvFloat 3.8s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }

 /* AULA 06: Mario Pixel 8-Bit Retrô */
 #aulas .lessons .lesson-mario {
   top: -6.35rem !important;
   width: 10rem !important;
   height: 6.4rem !important;
   overflow: visible !important;
 }
 #aulas .lessons .lesson-mario > img {
   position: absolute !important;
   bottom: -0.45rem !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: 8.2rem !important;
   height: 8.2rem !important;
   object-fit: contain !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation: deskMarioJump 2.2s cubic-bezier(0.28,0.84,0.42,1) infinite !important;
   animation-play-state: paused !important;
 }

 /* AULA 07: Letreiro Domínio Anos 50 */
 #aulas .lessons .lesson-domain {
   top: -6.35rem !important;
   width: 10.5rem !important;
   height: 6.4rem !important;
   overflow: visible !important;
 }
 #aulas .lessons .lesson-domain > img {
   position: absolute !important;
   bottom: -0.45rem !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: 8.6rem !important;
   height: 8.6rem !important;
   object-fit: contain !important;
   filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation: deskDomainSwing 4.5s ease-in-out infinite !important;
   animation-play-state: paused !important;
 }

 /* Só anima o adereço do card central e apenas quando #aulas está na tela */
 #aulas.aulas-inview .lessons li.is-center .lesson-mechanism img,
 #aulas.aulas-inview .lessons li.is-center .lesson-typewriter::before,
 #aulas.aulas-inview .lessons li.is-center .lesson-typewriter::after,
 #aulas.aulas-inview .lessons li.is-center .lesson-typewriter .typewriter-carriage,
 #aulas.aulas-inview .lessons li.is-center .lesson-typewriter .typewriter-paper > span,
 #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-hand,
 #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-index,
 #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-thumb,
 #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-cursor,
 #aulas.aulas-inview .lessons li.is-center .lesson-camera > img,
 #aulas.aulas-inview .lessons li.is-center .lesson-tv > img,
 #aulas.aulas-inview .lessons li.is-center .lesson-mario > img,
 #aulas.aulas-inview .lessons li.is-center .lesson-domain > img {
   animation-play-state: running !important;
 }
 body.paused #aulas .lessons li .lesson-mechanism img,
 body.paused #aulas .lessons li .lesson-typewriter::before,
 body.paused #aulas .lessons li .lesson-typewriter::after,
 body.paused #aulas .lessons li .lesson-typewriter .typewriter-carriage,
 body.paused #aulas .lessons li .lesson-typewriter .typewriter-paper > span,
 body.paused #aulas .lessons li .lesson-pinch .pinch-hand,
 body.paused #aulas .lessons li .lesson-pinch .pinch-index,
 body.paused #aulas .lessons li .lesson-pinch .pinch-thumb,
 body.paused #aulas .lessons li .lesson-pinch .pinch-cursor,
 body.paused #aulas .lessons li .lesson-camera > img,
 body.paused #aulas .lessons li .lesson-tv > img,
 body.paused #aulas .lessons li .lesson-mario > img,
 body.paused #aulas .lessons li .lesson-domain > img {
   animation-play-state: paused !important;
 }

 /* Controles de navegação com acabamento de botão baquelite realista e smooth shadow */
 #aulas .lesson-slider-nav{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:clamp(.75rem,1.8vh,1.35rem);position:relative;z-index:46}
 #aulas .lesson-slider-nav button{
   width:3.1rem;
   height:3.1rem;
   border:2px solid #b4b59a;
   border-radius:50%;
   background:linear-gradient(180deg,#527866 0%,#16362e 100%);
   color:#fff1c9;
   box-shadow:
     0 2px 4px rgba(0,0,0,0.2),
     0 6px 14px rgba(0,0,0,0.28),
     inset 0 1px 0 rgba(255,255,255,0.35);
   cursor:pointer;
   transition:transform .2s ease,box-shadow .2s ease;
 }
 #aulas .lesson-slider-nav button:hover{
   transform:translateY(-2px);
   box-shadow:
     0 4px 8px rgba(0,0,0,0.24),
     0 10px 20px rgba(0,0,0,0.32),
     inset 0 1px 0 rgba(255,255,255,0.45);
 }
 #aulas .lesson-slider-nav button:active{
   transform:translateY(1px);
   box-shadow:
     0 1px 2px rgba(0,0,0,0.2),
     0 3px 6px rgba(0,0,0,0.25),
     inset 0 1px 2px rgba(0,0,0,0.4);
 }
 #aulas .lesson-slider-count{color:#ffe0a0;font-variant-numeric:tabular-nums;font-weight:700}
}
@media(min-width:601px) and (max-height:800px){
 #aulas.section{padding-top:1.35rem;padding-bottom:1.65rem}
 #aulas .lessons{height:clamp(18.6rem,39vh,20.8rem);margin-top:7.7rem}
 #aulas .lessons li{height:clamp(18.2rem,38vh,20.4rem);padding:1rem 1.25rem}
 #aulas .lessons li .icon{width:1.45rem;height:1.45rem}
 #aulas .lessons .lesson-mechanism,
 #aulas .lessons .lesson-typewriter,
 #aulas .lessons .lesson-pinch,
 #aulas .lessons .lesson-camera,
 #aulas .lessons .lesson-tv,
 #aulas .lessons .lesson-mario,
 #aulas .lessons .lesson-domain{
   transform:translateX(-50%) scale(0.86)!important;
   transform-origin:center bottom!important;
 }
}
@media(max-width:600px){#aulas .lesson-slider-nav{display:none}}
@media(prefers-reduced-motion:reduce){#aulas .lessons li{transition:none}}
.steps-mobile-scroller{display:none}
@media(max-width:600px){
 #como-funciona.section{padding-top:2rem;padding-bottom:0;overflow:visible}
 #como-funciona .wrap{width:100%!important;padding:0!important}
 #como-funciona .wrap > h2{padding:0 1rem;margin-bottom:1rem;text-align:center}
 #como-funciona .steps{display:none!important}
 
 /* Palco compacto interativo (SEM scroll forçado; navegação por setas Prev/Next ou clique na fatia) */
 #como-funciona .steps-mobile-scroller{display:block!important;position:relative;width:100vw;height:auto!important;margin:0;padding-bottom:2.2rem}
 #como-funciona .steps-sticky-stage{position:relative!important;top:auto!important;z-index:10;width:100vw;min-height:0;padding:0;background:#071017;overflow:visible}
 
 /* Palco que ocupa toda a tela de ponta a ponta */
 #como-funciona .pizza-stage{position:relative;width:100vw;height:clamp(20rem, 52vh, 28rem);min-height:18rem;max-height:28.5rem;margin:0;overflow:visible;isolation:isolate;background:#071017}
 
 /* Lateral esquerda: Imagem colada 100% na borda esquerda */
 #como-funciona .pizza-left-hero{position:absolute;left:-8vw;top:0;bottom:0;width:80%;z-index:10;overflow:visible;pointer-events:none}
 #como-funciona .pizza-hero-image{position:absolute;inset:0;width:100%;height:100%;background:none!important;animation:presenterGlitch 3.8s steps(1,end) infinite;animation-play-state:paused}
 #como-funciona .pizza-hero-image::before{content:'';position:absolute;inset:0;background:transparent url('assets/matheus-crossed-arms-transparent.webp') left center/contain no-repeat;animation:presenterHuman 7.6s steps(1,end) infinite;animation-play-state:paused}
 @keyframes presenterHuman{0%,48%,100%{opacity:1}46%{opacity:0}}
 #como-funciona.gears-visible .pizza-hero-image::before{animation-play-state:running}
 body.paused #como-funciona .pizza-hero-image::before,body.paused #como-funciona .pizza-hero-image::after{animation-play-state:paused}
 @media(prefers-reduced-motion:reduce){#como-funciona .pizza-hero-image::before{animation:none;opacity:1}}
 #como-funciona .pizza-hero-image::after{content:'';position:absolute;inset:0;background:transparent url('assets/matheus-crossed-arms-white-vision.webp') left center/contain no-repeat;opacity:0;animation:presenterSwap 7.6s steps(1,end) infinite;animation-play-state:paused}
 #como-funciona.gears-visible .pizza-hero-image,#como-funciona.gears-visible .pizza-hero-image::after{animation-play-state:running}
 @keyframes presenterSwap{0%,100%{opacity:0}46%{opacity:1}48%{opacity:0}}
 @media(prefers-reduced-motion:reduce){#como-funciona .pizza-hero-image::after{animation:none;opacity:0}}
 body.paused #como-funciona .pizza-hero-image{animation-play-state:paused}
 @keyframes presenterGlitch{0%,86%,100%{opacity:1;transform:none;filter:none}87%{opacity:.85;transform:translateX(1px);filter:none}89%{opacity:1;transform:translateX(-1px);filter:none}92%{opacity:1;transform:none;filter:none}}
 @media(prefers-reduced-motion:reduce){#como-funciona .pizza-hero-image{animation:none}}
 
 /* Palco das 3 fatias de pizza radiais */
 #como-funciona .pizza-shards-stage{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:auto}
 
 /* As fatias ocupam o palco inteiro e se encontram exatamente borda com borda ao longo das linhas radiais */
 #como-funciona .pizza-shard{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;pointer-events:auto;opacity:.55;filter:grayscale(80%) brightness(.58);transition:opacity .3s ease,filter .3s ease,transform .28s cubic-bezier(.2,.8,.2,1);will-change:clip-path,transform,opacity,filter}
 
 /* Fatia 1 (superior): do topo até o primeiro corte radial disforme */
 #como-funciona .shard-1{clip-path:polygon(30% 6%,98% 1%,100% 29%,76% 37%,53% 45%,35% 51%)}
 
 /* Fatia 2 (meio): colada borda com borda na Fatia 1 e vai até o segundo corte radial */
 #como-funciona .shard-2{clip-path:polygon(36% 48.5%, 55% 41.5%, 76% 35.5%, 100% 28.5%, 100% 66.5%, 76% 61.5%, 55% 55.5%, 36% 49.5%)}
 
 /* Fatia 3 (inferior): colada borda com borda na Fatia 2 e vai até o chão */
 #como-funciona .shard-3{clip-path:polygon(36% 51%,55% 57%,76% 63%,100% 68%,97% 98%,27% 91%)}
 
 /* Superfície da imagem de cada fatia (sem reflexo de vidro) */
 #como-funciona .shard-surface{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#131520}
 #como-funciona .shard-img-1{inset:0 0 auto auto;width:72%;height:54%;background-image:url('assets/matheus-hero-gears-visionquest-1-1.webp');background-size:cover;background-position:center 60%;background-repeat:no-repeat;background-color:#131520;image-rendering:auto}
 #como-funciona .shard-img-2{inset:27% 0 auto auto;width:70%;height:41%;background-image:url('assets/matheus-miniature-tv-wide.webp');background-size:cover;background-position:65% center;background-repeat:no-repeat;background-color:#131520;image-rendering:auto}
 #como-funciona .shard-img-3{inset:50% 0 auto auto;width:70%;height:50%;background-image:url('assets/matheus-manutencao-processador-wide.webp');background-size:cover;background-position:65% center;background-repeat:no-repeat;background-color:#131520;image-rendering:auto}
 
 /* Numeração de cada fatia */
 #como-funciona .shard-tag{display:none}
 #como-funciona .shard-1 .shard-tag{top:12%}
 #como-funciona .shard-2 .shard-tag{top:46%}
 #como-funciona .shard-3 .shard-tag{top:78%}
 
 /* Fatia ativa: destaca, acende e revela o texto */
 #como-funciona .pizza-shard.is-active{opacity:1!important;filter:none!important;z-index:8}
 
 #como-funciona .pizza-shard.is-active .shard-tag{color:#ff7836;transform:translateX(-3px);text-shadow:0 0 12px rgba(249,115,22,0.8)}
 
 /* Bloco de texto da fatia ativa embaixo */
 #como-funciona .step-mobile-text{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;width:calc(100% - 2rem);margin:-1.4rem auto 0;padding:1rem 1rem .5rem;position:relative;z-index:15;min-height:9.5rem;background:linear-gradient(transparent,#071017 30%);transition:opacity .22s ease,transform .22s ease}
 #como-funciona .step-mobile-text.is-empty{opacity:0;pointer-events:none;transform:translateY(12px)}
 
 #como-funciona .step-mobile-badge{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;padding:.4rem .75rem;border-radius:.35rem;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),linear-gradient(180deg,#365b4e,#142e26 25%,#10241e 80%,#3c5140);border:2px solid #a6a484;box-shadow:inset 0 1px 0 #e5e4b777,inset 0 -2px 3px #061b15,0 2px 0 #162019,0 4px 7px #0007;backdrop-filter:none}
 #como-funciona .step-mobile-icon{display:inline-flex;align-items:center;justify-content:center;color:#ff7836;width:1.2rem;height:1.2rem}
 #como-funciona .step-mobile-icon svg{width:1.15rem;height:1.15rem}
 #como-funciona .step-mobile-step-num{color:#ffe0a0;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 5px #eaa33d55}
 #como-funciona .step-title-stage,
 #como-funciona .step-desc-stage{display:grid;align-items:center;justify-items:center;width:100%;max-width:24rem;margin:0 auto}
 #como-funciona .step-mobile-title,
 #como-funciona .step-title-sizer{grid-area:1/1;width:100%;margin:0;font-family:Paperlogy,sans-serif;font-weight:700;font-size:clamp(1.35rem,5.6vw,1.75rem);line-height:1.22;letter-spacing:-.025em;color:#ffffff;transition:opacity .18s ease,transform .18s ease;text-shadow:none;text-align:center}
 #como-funciona .step-mobile-desc,
 #como-funciona .step-desc-sizer{grid-area:1/1;width:100%;margin:0;font-size:.98rem;line-height:1.5;color:#cfd1de;transition:opacity .18s ease,transform .18s ease;text-shadow:none;max-width:24rem;text-align:center}
 #como-funciona .step-title-sizer,
 #como-funciona .step-desc-sizer{visibility:hidden;pointer-events:none;user-select:none}

 /* Navegação Prev/Next das etapas no Mobile (Estética Retro Enamel / Latão igual ao módulo anterior) */
 #como-funciona .step-mobile-nav{display:flex!important;align-items:center!important;justify-content:center!important;gap:.8rem!important;margin-top:.55rem!important;padding:.45rem .8rem .55rem!important;border:1px solid #a39978!important;border-radius:.8rem!important;background:linear-gradient(180deg,#485b51,#182e29 18%,#10211e 80%,#35483c)!important;box-shadow:inset 0 1px 0 #d9dfbb88,0 3px 0 #101a16,0 7px 12px #0006!important;pointer-events:auto!important}
 #como-funciona .step-mobile-nav button{width:2.65rem!important;height:2.65rem!important;border:3px solid #b4b59a!important;border-radius:50%!important;background:radial-gradient(circle at 35% 22%,#668e7d,#285249 55%,#112c27 85%)!important;color:#fff1c9!important;box-shadow:inset 0 1px 1px #e1f0cf88,inset 0 -3px 3px #061c17,0 3px 0 #101b15,0 4px 5px #0009!important;text-shadow:0 1px 2px #000!important;font-size:1.15rem!important;cursor:pointer!important;transition:transform .15s ease,filter .15s ease!important}
 #como-funciona .step-mobile-nav button:hover{filter:brightness(1.18)!important}
 #como-funciona .step-mobile-nav button:active{transform:translateY(2px)!important;box-shadow:inset 0 2px 4px #061c17,0 1px 0 #101b15!important}
 #como-funciona .step-mobile-nav button:focus-visible{outline:2px solid #ff7836!important;outline-offset:4px!important}
 #como-funciona .step-mobile-nav .step-mobile-count{display:grid!important;place-items:center!important;min-width:3.6rem!important;min-height:2.1rem!important;padding:.2rem .45rem!important;border:2px solid #817754!important;border-radius:.25rem!important;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(180deg,#101810,#293323 55%,#101810)!important;color:#ffd58b!important;font-family:Paperlogy,sans-serif!important;font-size:.82rem!important;font-weight:700!important;letter-spacing:.1em!important;font-variant-numeric:tabular-nums!important;text-shadow:0 0 5px #edaf4c88!important;box-shadow:inset 0 3px 7px #000c,inset 0 0 8px #50614144!important}
}

/* Keyframes GPU-only dedicados ao carrossel #aulas no Desktop (isolados de @media(max-width:600px)) */
@keyframes deskLessonCog{to{transform:rotate(90deg)}}
@keyframes deskLessonRatchet{0%,100%{transform:rotate(-18deg)}48%,58%{transform:rotate(12deg)}}
@keyframes deskTypewriterKey{0%,70%,100%{transform:translateY(0) scaleY(1);opacity:1}35%,55%{transform:translateY(2px) scaleY(.65);opacity:.78}}
@keyframes deskTypewriterCarriage{0%{transform:translate3d(8px,6px,0)}38%{transform:translate3d(-10px,3px,0)}43%{transform:translate3d(8px,0,0)}78%,85%{transform:translate3d(-10px,-3px,0)}92%,100%{transform:translate3d(8px,6px,0)}}
@keyframes deskTypewriterInk{0%{clip-path:inset(0 100% 0 0)}75%,85%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes deskPinchLift{0%,100%{transform:translateY(14px)}20%,82%{transform:translateY(-4px)}}
@keyframes deskPinchCursor{0%{transform:translate3d(0,14px,0) rotate(-8deg)}20%,30%{transform:translate3d(0,-4px,0) rotate(-8deg)}42%{transform:translate3d(24px,-13px,0) rotate(-8deg)}62%{transform:translate3d(24px,-13px,0) rotate(352deg)}74%,82%{transform:translate3d(0,-4px,0) rotate(352deg)}100%{transform:translate3d(0,14px,0) rotate(352deg)}}
@keyframes deskPinchIndex{0%,22%,80%,100%{transform:rotate(5deg)}32%,70%{transform:rotate(-6deg)}}
@keyframes deskPinchThumb{0%,22%,80%,100%{transform:rotate(-12deg)}32%,70%{transform:rotate(5deg)}}
@keyframes deskCameraFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}50%{transform:translateX(-50%) translateY(-7px) rotate(-1.8deg)}}
@keyframes deskTvFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes deskMarioJump{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}35%{transform:translateX(-50%) translateY(0) scale(1.05,0.92)}48%{transform:translateX(-50%) translateY(-13px) scale(0.96,1.04)}60%{transform:translateX(-50%) translateY(0) scale(1.03,0.95)}}
@keyframes deskDomainSwing{0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}50%{transform:translateX(-50%) translateY(-6px) rotate(1.2deg)}}

/* Seção #aulas: Stacking cards Apple-level (Cards que ficam para trás encolhem e recuam no espaço 3D) */
@media(max-width:600px){
 #aulas.section{padding-top:3.5rem;padding-bottom:2rem;overflow:visible}
 #aulas .split{display:flex;flex-direction:column;gap:1.5rem}
 #aulas .section-intro{
   position:sticky;
   top:calc(4.2rem + env(safe-area-inset-top, 0px));
   z-index:5!important;
   text-align:center;
   margin:0 auto;
   padding:0.4rem 1rem;
   width:100%;
   box-sizing:border-box;
   pointer-events:none;
   will-change:transform;
   background:transparent!important;
   backdrop-filter:none!important;
   -webkit-backdrop-filter:none!important;
 }
 #aulas .section-intro::before{
   display:none!important;
   content:none!important;
 }
 #aulas .section-intro h2{
   text-align:center;
   font-family:Paperlogy,sans-serif!important;
   font-weight:800!important;
   font-size:clamp(1.18rem, 5.2vw, 1.5rem);
   line-height:1.22;
   letter-spacing:-0.02em;
   color:#ffffff;
   margin:0 auto;
   text-wrap:balance;
   text-shadow:0 2px 4px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.95);
   pointer-events:auto;
 }
 #aulas .visual-reserve{display:none}
 
 /* Container com perspectiva 3D — z-index superior ao título "Menos de 1 hora de aulas..." */
 /* Uso de gap no flex container evita que margin-bottom encolha o sticky-box dos cards anteriores antes do card 07 */
 #aulas .lessons{display:flex;flex-direction:column;gap:6.5rem;padding:0 0 2.8rem;margin:1.75rem 0 0;list-style:none;position:relative;z-index:40!important;counter-reset:lesson-counter;perspective:1200px}
 #aulas .lessons.reveal-body.is-pending{opacity:1!important;transform:none!important}
 
 /* Cards com ancoragem única no centro visual do dispositivo (sem descer a cada card) */
 #aulas .lessons li{
   counter-increment:lesson-counter;
   position:sticky;
   z-index:calc(40 + var(--card-i, 0));
   top:calc(clamp(14.5rem, 27.5vh, 16.5rem) + env(safe-area-inset-top, 0px));
   display:flex;
   flex-direction:column;
   min-height:20.25rem;
   margin-bottom:0;
   padding:1.65rem 1.45rem;
   border-radius:1.6rem;
   background:linear-gradient(150deg,#181928,#0e1019 75%);
   border:1px solid rgba(255,255,255,0.13);
   box-shadow:
     0 2px 4px rgba(0,0,0,0.16),
     0 6px 16px rgba(0,0,0,0.24),
     0 18px 36px rgba(0,0,0,0.36),
     0 36px 68px rgba(0,0,0,0.46),
     inset 0 1px 0 rgba(255,255,255,0.22);
   overflow:hidden;
   isolation:isolate;
   transform-origin:center top;
   will-change:transform,opacity;
   backface-visibility:hidden;
 }
 #aulas .lessons li:last-child{margin-bottom:0}
 
 /* Cores de cada card com identidade refinada */
 #aulas .lessons li:nth-child(1){--card-i:0;background:linear-gradient(150deg,#1e1b30,#0f101a 80%);border-color:rgba(169,157,255,0.28)}
 #aulas .lessons li:nth-child(2){--card-i:1;background:linear-gradient(150deg,#251728,#110e17 80%);border-color:rgba(230,90,160,0.28)}
 #aulas .lessons li:nth-child(3){--card-i:2;background:linear-gradient(150deg,#28171a,#130e10 80%);border-color:rgba(236,0,41,0.3)}
 #aulas .lessons li:nth-child(4){--card-i:3;background:linear-gradient(150deg,#241c14,#120f0b 80%);border-color:rgba(240,140,40,0.28)}
 #aulas .lessons li:nth-child(5){--card-i:4;background:linear-gradient(150deg,#142224,#0b1314 80%);border-color:rgba(40,190,180,0.28)}
 #aulas .lessons li:nth-child(6){--card-i:5;background:linear-gradient(150deg,#151b2c,#0c0f18 80%);border-color:rgba(70,130,240,0.28)}
 #aulas .lessons li:nth-child(7){--card-i:6;background:linear-gradient(150deg,#1c1d28,#0e0f14 80%);border-color:rgba(200,205,220,0.28)}
 
 /* Badge AULA 0X no topo do card */
 #aulas .lessons li::before{content:"AULA 0" counter(lesson-counter);display:inline-block;align-self:flex-start;padding:.32rem .75rem;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#e5e5f0;margin-bottom:1.15rem}
 
 /* Ícone do card com luz interna */
 #aulas .lessons li .icon{width:2.65rem;height:2.65rem;border-radius:.75rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#fff;margin-bottom:1.15rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)}
 #aulas .lessons li .icon svg{width:1.35rem;height:1.35rem}
 
 /* Conteúdo de texto */
 #aulas .lessons li div{display:flex;flex-direction:column;gap:.65rem}
 #aulas .lessons li h3{font-size:clamp(1.35rem,5.6vw,1.7rem);line-height:1.25;letter-spacing:-.025em;color:#ffffff;font-family:Paperlogy,sans-serif;font-weight:700}
 #aulas .lessons li p{font-size:.98rem;line-height:1.5;color:#b0b2c2;margin-top:0}
 
 /* Luz superior e acabamento do vidro fosco */
 #aulas .lessons li::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,transparent 35%,rgba(0,0,0,0.55) 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,0.25);z-index:0}
 #aulas .lessons li > *{position:relative;z-index:1}
 #aulas .lessons li:nth-child(n){background:linear-gradient(#07101726,#07101755),url('assets/texture-cyan-vintage-tile.webp') 0 0/160px 160px repeat,#0b2427;border:30px solid transparent;border-image:url('assets/frame-teal-chrome.webp') 110 / 34px / 0 stretch;background-clip:border-box;background-origin:border-box;border-radius:2.2rem;overflow:hidden;box-shadow:0 12px 26px #0006;padding:1rem 1.15rem}
 #aulas .lessons li p{color:#e0e9e6}
 #aulas .lessons li:first-child,#aulas .lessons li:nth-child(2),#aulas .lessons li:nth-child(3),#aulas .lessons li:nth-child(4),#aulas .lessons li:nth-child(5),#aulas .lessons li:nth-child(6),#aulas .lessons li:nth-child(7){overflow:visible;isolation:isolate}
 #aulas .lessons li:nth-child(3) .lesson-pinch{position:absolute;left:50%;top:-7rem;width:13rem;height:7rem;transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none;display:block}
 #aulas .pinch-hand{position:absolute;inset:0;animation:pinchHand 6s ease-in-out infinite}
 #aulas .pinch-palm,#aulas .pinch-index,#aulas .pinch-thumb,#aulas .pinch-cursor{position:absolute;display:block;background-image:url('assets/lesson-robot-pinch-atlas.webp');background-size:200% 200%;background-repeat:no-repeat}
 #aulas .pinch-palm{width:8rem;height:8rem;left:0;top:2.2rem;background-position:0 0}
 #aulas .pinch-index{width:4rem;height:4rem;left:3.2rem;top:-.7rem;background-position:100% 0;transform-origin:15% 85%;animation:pinchIndex 6s ease-in-out infinite}
 #aulas .pinch-thumb{width:4rem;height:4rem;left:1.5rem;top:1.8rem;background-position:0 100%;transform-origin:15% 85%;animation:pinchThumb 6s ease-in-out infinite}
 #aulas .pinch-cursor{width:2.7rem;height:2.7rem;left:4.8rem;top:.35rem;background-position:100% 100%;animation:pinchCursor 6s ease-in-out infinite}
 #aulas .pinch-wave{position:absolute;width:2rem;height:2rem;left:5.4rem;top:.7rem;border:2px solid #94eee5;border-radius:50%;opacity:0;animation:pinchWave 6s ease-out infinite}
 #aulas .lesson-pinch .pinch-hand{animation:pinchNaturalLift 5s ease-in-out infinite;inset:0;width:10rem;height:10rem;left:1rem;top:0;z-index:2;pointer-events:none}
 #aulas .lesson-pinch .pinch-palm,#aulas .lesson-pinch .pinch-index,#aulas .lesson-pinch .pinch-thumb{inset:0;width:10rem;height:10rem;background-image:url('assets/lesson-pinch-natural.webp');background-size:100% 100%;background-position:center}
 #aulas .lesson-pinch .pinch-palm{clip-path:polygon(0 0,45% 0,45% 26%,62% 26%,62% 32%,53% 36%,53% 43%,100% 43%,100% 100%,0 100%)}
 #aulas .lesson-pinch .pinch-index{clip-path:polygon(45% 12%,85% 12%,85% 27%,45% 27%);transform-origin:47% 22%;animation:pinchNaturalIndex 5s ease-in-out infinite}
 #aulas .lesson-pinch .pinch-thumb{clip-path:polygon(53% 35%,65% 26%,85% 26%,85% 42%,55% 47%);transform-origin:54% 36%;animation:pinchNaturalThumb 5s ease-in-out infinite}
 #aulas .lesson-pinch .pinch-cursor{display:block;width:2rem;height:2rem;left:7.2rem;top:.9rem;z-index:1;animation:pinchNaturalCursor 5s ease-in-out infinite;transform-origin:center}
 #aulas .lesson-pinch .pinch-wave{display:none}
 @keyframes pinchNaturalLift{0%,100%{transform:translateY(16px)}20%,82%{transform:translateY(-5px)}}
 @keyframes pinchNaturalCursor{0%{transform:translate(0,16px) rotate(-8deg)}20%,30%{transform:translate(0,-5px) rotate(-8deg)}42%{transform:translate(25px,-14px) rotate(-8deg)}62%{transform:translate(25px,-14px) rotate(352deg)}74%,82%{transform:translate(0,-5px) rotate(352deg)}100%{transform:translate(0,16px) rotate(352deg)}}
 @keyframes pinchNaturalIndex{0%,22%,80%,100%{transform:rotate(5deg)}32%,70%{transform:rotate(-6deg)}}
 @keyframes pinchNaturalThumb{0%,22%,80%,100%{transform:rotate(-12deg)}32%,70%{transform:rotate(5deg)}}
 #aulas .lesson-pinch *,#aulas .pinch-hand{animation-play-state:paused}
 #aulas.pinch-visible .lesson-pinch *{animation-play-state:running}
 @keyframes pinchHand{0%,100%{transform:translate(-8px,28px)}25%,65%{transform:translate(0,0)}80%{transform:translate(0,0)}}
 @keyframes pinchIndex{0%,25%,78%,100%{transform:rotate(20deg)}35%,65%{transform:rotate(-8deg)}}
 @keyframes pinchThumb{0%,25%,78%,100%{transform:rotate(0)}35%,65%{transform:rotate(24deg)}}
 @keyframes pinchCursor{0%,100%{transform:translate(-8px,28px)}25%{transform:translate(0,0)}38%,65%{transform:translate(10px,-5px)}78%{transform:translate(0,0)}}
 @keyframes pinchWave{0%,32%,45%,100%{opacity:0;transform:scale(.5)}34%{opacity:.8;transform:scale(.5)}44%{opacity:0;transform:scale(2.6)}}
 @media(prefers-reduced-motion:reduce){#aulas .lesson-pinch *{animation:none!important}#aulas .pinch-wave{display:none}}
 #aulas .lessons li:nth-child(2) .lesson-typewriter{position:absolute;left:50%;top:-6.7rem;width:10rem;height:6.7rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-typewriter>img{position:absolute;inset:1.6rem 0 auto;width:10rem;height:10rem;z-index:2}
 #aulas .lesson-typewriter::before,#aulas .lesson-typewriter::after{content:'';position:absolute;z-index:3;width:.36rem;height:.23rem;border-radius:50%;border:1px solid #a39879;background:radial-gradient(ellipse at 35% 25%,#fff4d5,#bcaf8b);box-shadow:0 2px 0 #243b32;top:6.2rem;left:3.4rem;animation:typewriterKey .37s steps(2,end) infinite;animation-play-state:paused}
 #aulas .lesson-typewriter::after{left:6.1rem;animation-duration:.53s;animation-delay:.17s}
 #aulas.typewriter-visible .lesson-typewriter::before,#aulas.typewriter-visible .lesson-typewriter::after{animation-play-state:running}
 @keyframes typewriterKey{0%,70%,100%{transform:none;filter:none}35%,55%{transform:translateY(2px) scaleY(.65);filter:brightness(.7)}}
 #aulas .typewriter-carriage{position:absolute;left:2rem;top:0;width:6rem;height:5rem;animation:typewriterCarriage 4s steps(14,end) infinite;animation-play-state:paused}
 #aulas .typewriter-paper{position:absolute;inset:0;background:linear-gradient(100deg,#c2b99d,#fff3d4 35%,#e1d4af);border-radius:.15rem;box-shadow:0 1px 4px #0008;padding:.65rem .55rem}
 #aulas .typewriter-paper>span{display:block;height:2.5rem;background:repeating-linear-gradient(180deg,#514b3b 0 1px,transparent 1px 7px);animation:typewriterInk 4s steps(14,end) infinite;animation-play-state:paused;transform-origin:left center}
 #aulas.typewriter-visible .typewriter-carriage,#aulas.typewriter-visible .typewriter-paper>span{animation-play-state:running}
 @keyframes typewriterCarriage{0%{transform:translate(8px,6px)}38%{transform:translate(-10px,3px)}43%{transform:translate(8px,0)}78%,85%{transform:translate(-10px,-3px)}92%,100%{transform:translate(8px,6px)}}
 @keyframes typewriterInk{0%{clip-path:inset(0 100% 0 0)}75%,85%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 100% 0 0)}}
 @media(prefers-reduced-motion:reduce){#aulas .typewriter-carriage,#aulas .typewriter-paper>span,#aulas .lesson-typewriter::before,#aulas .lesson-typewriter::after{animation:none!important}}
 #aulas .lessons li:first-child .lesson-mechanism{position:absolute;left:50%;top:-8.3rem;width:14rem;height:8.4rem;transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none;display:block}
 #aulas .lesson-mechanism img{position:absolute;display:block;animation-play-state:paused}
 #aulas .lesson-mechanism .lesson-cog{width:6rem;height:6rem;left:4rem;top:5rem;animation:lessonCog 3s linear infinite;animation-play-state:paused}
 #aulas .lesson-mechanism .lesson-ratchet{width:10rem;height:10rem;left:2rem;top:2.4rem;transform-origin:50% 56%;animation:lessonRatchet 1.5s ease-in-out infinite;animation-play-state:paused}
 #aulas.mechanism-visible .lesson-mechanism img{animation-play-state:running}
 @keyframes lessonRatchet{0%,100%{transform:rotate(-18deg)}48%,58%{transform:rotate(12deg)}}
 @keyframes lessonCog{to{transform:rotate(90deg)}}
 @media(prefers-reduced-motion:reduce){#aulas .lesson-mechanism img{animation:none!important}}
 /* Animações ativas sincronizadas com visibilidade da seção #aulas */
 #aulas.aulas-inview .lessons li.is-center .lesson-mechanism img,
 #aulas.aulas-inview.mechanism-visible .lesson-mechanism img {
   animation-play-state: running !important;
 }
 #aulas.aulas-inview .lessons li.is-center .lesson-typewriter::before,
 #aulas.aulas-inview .lessons li.is-center .lesson-typewriter::after,
 #aulas.aulas-inview .lessons li.is-center .typewriter-paper,
 #aulas.aulas-inview.typewriter-visible .lesson-typewriter::before,
 #aulas.aulas-inview.typewriter-visible .lesson-typewriter::after,
 #aulas.aulas-inview.typewriter-visible .typewriter-paper {
   animation-play-state: running !important;
 }
 #aulas.aulas-inview .lessons li.is-center .pinch-hand,
 #aulas.aulas-inview .lessons li.is-center .pinch-index,
 #aulas.aulas-inview .lessons li.is-center .pinch-thumb,
 #aulas.aulas-inview .lessons li.is-center .pinch-cursor,
 #aulas.aulas-inview .lessons li.is-center .pinch-wave,
 #aulas.aulas-inview.pinch-visible .pinch-hand,
 #aulas.aulas-inview.pinch-visible .pinch-index,
 #aulas.aulas-inview.pinch-visible .pinch-thumb,
 #aulas.aulas-inview.pinch-visible .pinch-cursor,
 #aulas.aulas-inview.pinch-visible .pinch-wave {
   animation-play-state: running !important;
 }

 /* AULA 04: Câmera Anos 50 com levitação analógica e GPU compositor puro */
 #aulas .lessons li:nth-child(4) .lesson-camera{position:absolute;left:50%;top:-8.5rem;width:11rem;height:8.5rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-camera>img{
   position:absolute;
   left:50%;
   bottom:0;
   transform:translateX(-50%);
   width:10.5rem;
   height:10.5rem;
   display:block;
   object-fit:contain;
   object-position:bottom center;
   filter:drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation:cameraFloat 3.8s ease-in-out infinite;
   animation-play-state:paused;
 }
 #aulas.aulas-inview.camera-visible .lesson-camera>img{animation-play-state:running}
 @keyframes cameraFloat{
   0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
   50%{transform:translateX(-50%) translateY(-7px) rotate(-1.8deg)}
 }
 @media(prefers-reduced-motion:reduce){#aulas .lesson-camera>img{animation:none!important}}

 /* AULA 05: TV Vintage Anos 50 com flutuação pura no compositor GPU */
 #aulas .lessons li:nth-child(5) .lesson-tv{position:absolute;left:50%;top:-8.5rem;width:11rem;height:8.5rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-tv>img{
   position:absolute;
   left:50%;
   bottom:0;
   transform:translateX(-50%);
   width:10.5rem;
   height:10.5rem;
   display:block;
   object-fit:contain;
   object-position:bottom center;
   filter:drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation:tvFloat 4s ease-in-out infinite;
   animation-play-state:paused;
 }
 #aulas.aulas-inview.tv-visible .lesson-tv>img{animation-play-state:running}
 @keyframes tvFloat{
   0%,100%{transform:translateX(-50%) translateY(0)}
   50%{transform:translateX(-50%) translateY(-6px)}
 }
 @media(prefers-reduced-motion:reduce){#aulas .lesson-tv>img{animation:none!important}}

 /* AULA 06: Mario Pixel 8-bit com salto ritmado squash/stretch no compositor GPU */
 #aulas .lessons li:nth-child(6) .lesson-mario{position:absolute;left:50%;top:-8.5rem;width:11rem;height:8.5rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-mario{position:absolute;left:50%;top:-8.5rem;width:11rem;height:8.5rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-mario>img{
   position:absolute;
   left:50%;
   bottom:0;
   transform:translateX(-50%);
   width:10.5rem;
   height:10.5rem;
   display:block;
   object-fit:contain;
   object-position:bottom center;
   filter:drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation:marioJump 2.4s cubic-bezier(0.28,0.84,0.42,1) infinite;
   animation-play-state:paused;
 }
 #aulas.aulas-inview.mario-visible .lesson-mario>img{animation-play-state:running}
 @keyframes marioJump{
   0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
   35%{transform:translateX(-50%) translateY(0) scale(1.05,0.92)}
   48%{transform:translateX(-50%) translateY(-14px) scale(0.96,1.04)}
   60%{transform:translateX(-50%) translateY(0) scale(1.03,0.95)}
 }
 @media(prefers-reduced-motion:reduce){#aulas .lesson-mario>img{animation:none!important}}

 /* AULA 07: Letreiro Domínio Anos 50 com balanço puro no compositor GPU */
 #aulas .lessons li:nth-child(7) .lesson-domain{position:absolute;left:50%;top:-8.5rem;width:11rem;height:8.5rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-domain{position:absolute;left:50%;top:-8.5rem;width:11rem;height:8.5rem;transform:translateX(-50%);z-index:-1;display:block;pointer-events:none;overflow:hidden}
 #aulas .lesson-domain>img{
   position:absolute;
   left:50%;
   bottom:0;
   transform:translateX(-50%);
   width:10.5rem;
   height:10.5rem;
   display:block;
   object-fit:contain;
   object-position:bottom center;
   filter:drop-shadow(0 10px 18px rgba(0,0,0,0.42));
   animation:domainSwing 4.5s ease-in-out infinite;
   animation-play-state:paused;
 }
 #aulas.aulas-inview.domain-visible .lesson-domain>img{animation-play-state:running}
 body.paused #aulas .lesson-camera>img,
 body.paused #aulas .lesson-tv>img,
 body.paused #aulas .lesson-mario>img,
 body.paused #aulas .lesson-domain>img{animation-play-state:paused!important}
 @keyframes domainSwing{
   0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
   50%{transform:translateX(-50%) translateY(-6px) rotate(1.2deg)}
 }
 @media(prefers-reduced-motion:reduce){#aulas .lesson-domain>img{animation:none!important}}
 #aulas .lessons li:nth-child(n) > .lesson-mechanism,
 #aulas .lessons li:nth-child(n) > .lesson-typewriter,
 #aulas .lessons li:nth-child(n) > .lesson-pinch,
 #aulas .lessons li:nth-child(n) > .lesson-camera,
 #aulas .lessons li:nth-child(n) > .lesson-tv,
 #aulas .lessons li:nth-child(n) > .lesson-mario,
 #aulas .lessons li:nth-child(n) > .lesson-domain{
   opacity:var(--prop-op, 1);
   transform:translateX(-50%) scale(var(--prop-scale, 0.78));
   transform-origin:center bottom;
 }
}
@media(max-width:600px) and (max-height:620px){
 #aulas .section-intro{top:calc(3.55rem + env(safe-area-inset-top, 0px))}
 #aulas .lessons li{top:calc(clamp(10.8rem, 22.5vh, 13.5rem) + env(safe-area-inset-top, 0px));min-height:17.25rem}
}

/* Seção #diferencial: Experiência Apple Scrollytelling Ajustada */
#diferencial.diferencial-apple{padding:0!important;overflow:visible;background:#071017;position:relative}

/* Trilha de scroll contínua para os 3 atos */
.apple-scroller{position:relative;width:100%;height:550svh}

/* Palco fixado ocupando 100% da tela */
.apple-sticky-stage{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#071017;
  isolation:isolate;
}
.apple-sticky-stage::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:clamp(14rem, 30vh, 24rem);
  background:radial-gradient(ellipse 76% 48% at 50% 44%,rgba(29,78,216,0.16) 0%,rgba(29,78,216,0.06) 44%,rgba(29,78,216,0) 74%);
  pointer-events:none;
  z-index:5;
}

/* Cabeçalho de Impacto Centralizado da Seção: O Grande Diferencial */
.apple-top-bar{
  position:absolute;
  top:calc(4.8rem + env(safe-area-inset-top, 0px));
  left:0;
  right:0;
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.65rem;
  padding:0 1.25rem;
  z-index:30;
  pointer-events:none;
  text-align:center;
}
.apple-section-label{
  font-family:Paperlogy,sans-serif;
  font-weight:800;
  font-size:clamp(1.55rem, 4.4vw, 2.75rem);
  line-height:1.15;
  letter-spacing:-.03em;
  color:#ffffff;
  text-align:center;
  margin:0 auto;
  text-wrap:balance;
  text-shadow:0 4px 28px rgba(0,0,0,0.7);
}
.apple-act-dots{
  display:inline-flex;
  gap:0.55rem;
  align-items:center;
  justify-content:center;
  padding:0.35rem 0.85rem;
  background:rgba(11,22,32,0.9);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
.apple-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.28);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.apple-dot.is-active{
  width:22px;
  border-radius:999px;
  background:#ff7836;
  box-shadow:0 0 12px rgba(255,120,54,0.7);
  transform:none;
}

/* Cenários em tela cheia */
.apple-scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(8rem + env(safe-area-inset-top, 0px)) 1.5rem 2.5rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,0,0) scale(1);
  will-change:opacity,transform;
}

/* Cena 1 ativa por padrão sem !important para que o scroll oculte a cópia 1 perfeitamente */
.apple-scene.scene-1{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.apple-scene.scene-2,
.apple-scene.scene-3{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ========================================================
   CENA 1: AS DUAS MÃOS VINDAS DIRETO DA TELA (FULL-BLEED)
   COREOGRAFIA DE 3 ETAPAS:
   1. Mãos convergem no centro com o texto oculto
   2. Ao tocarem os dedos, sobem para a parte superior do palco
   3. Só então o texto aparece na zona confortável de leitura
   ======================================================== */
.apple-scene.scene-1{
  position:absolute;
  inset:0;
  width:100vw;
  max-width:100vw;
  height:100%;
  padding:0;
  margin:0;
  display:block;
  overflow:visible;
  box-sizing:border-box;
}

/* Palco das Mãos 100vw outscreen total (centralizado no repouso; sobe após o toque) */
.apple-hands-stage{
  position:absolute;
  left:0;
  right:0;
  top:calc(50% - clamp(160px, 23vh, 230px));
  width:100vw;
  max-width:100vw;
  height:clamp(320px, 46vh, 460px);
  pointer-events:none;
  overflow:visible!important;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:50% 45%;
  will-change:transform;
  margin:0;
  padding:0;
}

.apple-hand-slot{
  position:absolute;
  top:0;
  bottom:0;
  height:100%;
  will-change:transform;
  transition:none;
  pointer-events:none;
  display:flex;
  align-items:center;
  overflow:visible;
}

.apple-hand-slot.hand-left{
  left:0;
  width:50vw;
  justify-content:flex-end;
  transform-origin:100% 50%;
  transform:translateX(0);
}

.apple-hand-slot.hand-right{
  right:0;
  width:50vw;
  justify-content:flex-start;
  transform-origin:0% 50%;
  transform:translateX(0);
}

/* MÃOS GIGANTES EM ESCALA PANORÂMICA:
   Os braços medem mais de 1600px de envergadura no desktop e saem diretamente
   de fora da tela (outscreen puro). A base do corte fica 100% fora do monitor! */
.apple-hand-img{
  display:block;
  height:88%;
  width:auto;
  max-width:none;
  flex-shrink:0;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,0.78));
}

.hand-human-img{
  margin-right:0;
  transform-origin:100% 50%;
}

.hand-robot-img{
  margin-left:0;
  transform-origin:0% 50%;
}

/* Texto da Parte 1: Oculto até o toque e subida dos dedos; aparece na zona média de leitura */
.text-wrap-1{
  position:absolute;
  left:0;
  right:0;
  top:clamp(395px, 53vh, 495px);
  width:min(92vw, 37rem);
  margin:0 auto;
  padding:0 1.25rem;
  text-align:center;
  z-index:15;
  box-sizing:border-box;
  opacity:0;
  visibility:hidden;
  will-change:opacity,transform;
  transform:translate3d(0, 28px, 0);
}
.text-wrap-1.is-revealed{
  opacity:1;
  visibility:visible;
}

/* Tipografia comum proeminente com alto contraste e legibilidade */
.apple-copy.apple-copy-prominent{
  font-family:Paperlogy,sans-serif;
  font-weight:700;
  font-size:clamp(1.22rem, 4.2vw, 1.68rem);
  line-height:1.38;
  letter-spacing:-.025em;
  color:#ffffff;
  text-align:center;
  margin:0 auto;
  text-wrap:balance;
  text-shadow:none;
}

/* ========================================================
   MOBILE: OUTSCREEN TOTAL 100vw (SEM LINHAS DE CORTE)
   Mãos iniciam centralizadas; após o toque sobem para o topo
   e o texto surge logo abaixo em altura ergonômica de leitura.
   ======================================================== */
@media(max-width:768px){
  .apple-top-bar{
    top:calc(4.2rem + env(safe-area-inset-top, 0px))!important;
    padding:0 1rem!important;
    gap:0.45rem!important;
  }
  .apple-section-label{
    font-size:clamp(1.22rem, 5vw, 1.55rem)!important;
    line-height:1.2!important;
    text-shadow:0 2px 14px rgba(0,0,0,0.85)!important;
  }
  .apple-act-dots{
    padding:0.24rem 0.65rem!important;
    gap:0.45rem!important;
  }
  .apple-scene{
    padding-top:calc(7.8rem + env(safe-area-inset-top, 0px))!important;
    padding-bottom:1.2rem!important;
  }
  .apple-scene.scene-1{
    width:100vw!important;
    max-width:100vw!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
    overflow:visible!important;
    box-sizing:border-box;
  }
  .apple-hands-stage{
    top:calc(46% - clamp(138px, 18.5vh, 182px))!important;
    width:100vw!important;
    max-width:100vw!important;
    height:clamp(276px, 37vh, 364px)!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .apple-hand-slot.hand-left{
    width:50vw!important;
    transform:rotate(-22deg) translateX(0);
  }
  .apple-hand-slot.hand-right{
    width:50vw!important;
    transform:rotate(-22deg) translateX(0);
  }
  .apple-hand-img{
    height:clamp(235px, 34vh, 305px)!important;
    width:auto!important;
    max-width:none!important;
    flex-shrink:0;
  }
  .text-wrap-1{
    top:clamp(412px, 51.5vh, 505px);
    margin:0 auto;
    padding:0 1rem;
    width:100%;
    max-width:24rem;
    box-sizing:border-box;
  }
  .apple-copy.apple-copy-prominent{
    font-size:clamp(1.04rem, 3.85vw, 1.35rem);
    line-height:1.42;
  }
  .apple-scene.scene-2{
    justify-content:flex-start!important;
    padding-top:calc(clamp(9.4rem, 19vh, 11.4rem) + env(safe-area-inset-top, 0px))!important;
    padding-bottom:1.25rem!important;
  }
  .apple-scene.scene-3{
    justify-content:flex-start!important;
    padding-top:calc(clamp(8.9rem, 19.5vh, 11.4rem) + env(safe-area-inset-top, 0px))!important;
    padding-bottom:1.25rem!important;
  }
}
/* ========================================================
   CENA 2: PAPER FLIPS RECORTES (STOP-MOTION & JORNAIS VINTAGE)
   (DOCUMENTOS REAIS, TIPOGRAFIAS HISTÓRICAS E PALAVRA TEXTOS FOCADA)
   ======================================================== */
.apple-scene.scene-2{
  justify-content:flex-start;
  padding-top:calc(clamp(11rem, 21.5vh, 13.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom:2rem;
}

.apple-scene.scene-3{
  justify-content:flex-start;
  padding-top:calc(clamp(11.4rem, 22vh, 14rem) + env(safe-area-inset-top, 0px));
  padding-bottom:2rem;
}

.apple-newspaper-stage{
  position:relative;
  width:100%;
  max-width:34rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto clamp(1.1rem, 2.4vh, 2.1rem);
  perspective:1000px;
  will-change:transform;
}

.paper-flip-stage{
  position:relative;
  width:95%;
  max-width:min(500px, 56vh);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}

.paper-flip-stack{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform,filter;
  transform-origin:center center;
  /* Sombra profunda realista com contato e ambientação para destacar o papel rasgado */
  filter:drop-shadow(0 22px 42px rgba(0,0,0,0.92)) drop-shadow(0 6px 14px rgba(0,0,0,0.70));
  transition:transform .08s cubic-bezier(.2,.9,.3,1.1);
}

.paper-flip-stage.has-paper-canvas .paper-flip-stack{
  aspect-ratio:520 / 260;
  filter:none;
  will-change:transform;
  transition:none;
}
.paper-flip-stage.has-paper-canvas .newspaper-flicker-view{
  display:none;
}
.newspaper-flicker-canvas{
  position:absolute;
  left:-9%;
  top:-18%;
  width:118%;
  height:136%;
  display:block;
  pointer-events:none;
  user-select:none;
}
.newspaper-flicker-view{
  display:block;
  width:100%;
  aspect-ratio:520 / 260;
  height:auto;
  background-image:url('assets/newspaper-flicker-sheet.webp');
  background-size:100% 800%; /* 8 frames verticais */
  background-position:0 0;
  background-repeat:no-repeat;
  pointer-events:none;
  user-select:none;
  transform:translateZ(0);
}

.paper-recorte-img{
  display:none;
}

/* Texto 2 elevado para a zona central/superior de leitura confortável */
.text-wrap-2{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:35rem;
  padding:0 1.25rem;
  will-change:opacity,transform;
}

/* ========================================================
   CENA 3: O OBJETIVO FINAL EM GABINETE / MOLDURA ANOS 50
   (ESTÉTICA TELEVISOR & CONSOLE VINTAGE COM REVELAÇÃO NO SCROLL)
   ======================================================== */
.apple-statement-electric-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:94%;
  max-width:44rem;
  margin:0 auto;
  box-sizing:border-box;
  overflow:visible;
  z-index:4;
  --e-power:0;
  --e1x:160px;
  --e1y:0px;
  --e2x:160px;
  --e2y:300px;
  --e3x:-999px;
  --e3y:-999px;
  --e3a:0;
  --e-top-hit:0;
  --e-bot-hit:0;
}

.elec-wall-light{
  position:absolute;
  inset:-380px;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
  opacity:calc(0.84 * var(--e-power, 0));
  background:
    radial-gradient(circle 195px at calc(var(--e1x, 160px) + 380px) calc(var(--e1y, 0px) + 380px), rgba(103, 232, 249, 0.25) 0%, rgba(34, 211, 238, 0.10) 36%, rgba(34, 211, 238, 0.025) 62%, rgba(34, 211, 238, 0) 84%),
    radial-gradient(circle 182px at calc(var(--e2x, 160px) + 380px) calc(var(--e2y, 300px) + 380px), rgba(103, 232, 249, 0.22) 0%, rgba(34, 211, 238, 0.08) 36%, rgba(34, 211, 238, 0.02) 62%, rgba(34, 211, 238, 0) 84%),
    radial-gradient(circle 155px at calc(var(--e3x, -999px) + 380px) calc(var(--e3y, -999px) + 380px), rgba(165, 243, 252, calc(var(--e3a, 0) * 0.24)) 0%, rgba(34, 211, 238, calc(var(--e3a, 0) * 0.07)) 42%, rgba(34, 211, 238, 0) 82%);
  will-change:opacity;
}

.apple-statement-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1.4rem;
  width:100%;
  margin:0;
  box-sizing:border-box;
  z-index:2;
  /* Moldura clássica anos 50 em cromo e esmalte teal */
  border:28px solid transparent;
  border-image:url('assets/frame-teal-chrome.webp') 110 / 30px / 0 stretch;
  border-radius:2.2rem;
  background:linear-gradient(150deg,rgba(7,16,23,0.92),rgba(12,24,34,0.96)),url('assets/texture-cyan-vintage-tile.webp') 0 0/140px 140px repeat;
  background-clip:border-box;
  background-origin:border-box;
  box-shadow:0 24px 60px rgba(0,0,0,0.95),0 4px 16px rgba(0,0,0,0.8),inset 0 1px 2px rgba(255,255,255,0.22);
  padding:2.2rem 2.4rem;
  overflow:hidden;
  isolation:isolate;
}

.elec-glass-spill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
  opacity:calc(0.56 * var(--e-power, 0));
  background:
    radial-gradient(circle 165px at var(--e1x, 50%) var(--e1y, 0%), rgba(165, 243, 252, 0.24) 0%, rgba(34, 211, 238, 0.08) 44%, transparent 78%),
    radial-gradient(circle 152px at var(--e2x, 50%) var(--e2y, 100%), rgba(165, 243, 252, 0.21) 0%, rgba(34, 211, 238, 0.07) 44%, transparent 78%),
    radial-gradient(circle 130px at var(--e3x, -999px) var(--e3y, -999px), rgba(186, 247, 255, calc(var(--e3a, 0) * 0.20)) 0%, transparent 76%);
}

/* Reflexo sutil de vidro curvo anos 50 */
.apple-statement-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 40%,transparent 60%);
  pointer-events:none;
  z-index:3;
}

/* Incidência direta de luz elétrica na moldura cromada */
.elec-chrome-specular{
  position:absolute;
  inset:0;
  border-radius:2.2rem;
  padding:30px;
  pointer-events:none;
  z-index:4;
  mix-blend-mode:screen;
  opacity:calc(0.95 * var(--e-power, 0));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  background:
    radial-gradient(circle 130px at var(--e1x, 50%) var(--e1y, 0%), rgba(242, 254, 255, 0.90) 0%, rgba(125, 242, 255, 0.44) 34%, rgba(34, 211, 238, 0.12) 66%, transparent 94%),
    radial-gradient(circle 120px at var(--e2x, 50%) var(--e2y, 100%), rgba(242, 254, 255, 0.86) 0%, rgba(125, 242, 255, 0.40) 36%, rgba(34, 211, 238, 0.10) 66%, transparent 94%),
    radial-gradient(circle 100px at var(--e3x, -999px) var(--e3y, -999px), rgba(242, 254, 255, calc(var(--e3a, 0) * 0.84)) 0%, rgba(103, 232, 249, calc(var(--e3a, 0) * 0.36)) 44%, transparent 82%);
}

/* Camada de raios em dupla camada (Glow Blur + Núcleo Nítido) */
.elec-bolts-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
  z-index:6;
  mix-blend-mode:screen;
}
.elec-slot{
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  transform:translate3d(-9999px, -9999px, 0);
  pointer-events:none;
  overflow:visible;
  will-change:transform,opacity;
  opacity:0;
}
.elec-layer-glow,
.elec-layer-core{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.elec-layer-glow{
  inset:-72px;
  width:calc(100% + 144px);
  height:calc(100% + 144px);
  padding:72px;
  box-sizing:border-box;
  filter:blur(8px) brightness(1.62) saturate(1.24);
  opacity:0.86;
  mix-blend-mode:screen;
}
.elec-layer-core{
  filter:brightness(1.34) contrast(1.12);
  opacity:1;
  mix-blend-mode:screen;
}

/* ========================================================
   PILHA INFINITA DE NOTIFICAÇÕES PIX RECEBIDO (CENA 3 - IDV MAIPV)
   ======================================================== */
.pix-stack-stage{
  position:relative;
  width:min(90vw, 378px);
  height:0;
  margin:clamp(14px, 2.2vh, 22px) auto 0;
  pointer-events:none;
  overflow:visible;
  z-index:3;
}
.pix-notif-card{
  position:absolute;
  left:0;
  right:0;
  top:0;
  display:flex;
  align-items:center;
  gap:0.72rem;
  padding:0.62rem 0.85rem;
  border-radius:1rem;
  background:linear-gradient(155deg, rgba(14, 28, 39, 0.94) 0%, rgba(7, 16, 23, 0.97) 100%);
  border:1px solid rgba(94, 234, 212, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 12px 30px rgba(0, 0, 0, 0.72),
    0 0 22px rgba(13, 92, 77, 0.22);
  transform-origin:50% 0%;
  transform:translate3d(-9999px, -9999px, 0);
  opacity:0;
  overflow:hidden;
  will-change:transform,opacity;
  pointer-events:none;
  user-select:none;
}
.pix-notif-card.is-newest{
  border-color:rgba(94, 234, 212, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 14px 34px rgba(0, 0, 0, 0.78),
    0 0 26px rgba(45, 212, 191, 0.20),
    0 0 16px rgba(255, 120, 54, 0.10);
}
.pix-card-sheen{
  position:absolute;
  inset:0;
  width:46%;
  background:linear-gradient(105deg, transparent 0%, rgba(165, 243, 252, 0.11) 48%, rgba(255, 164, 110, 0.08) 54%, transparent 100%);
  transform:translate3d(-160%, 0, 0);
  pointer-events:none;
}
.pix-notif-icon{
  position:relative;
  flex-shrink:0;
  width:2.35rem;
  height:2.35rem;
  border-radius:0.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, #135d52 0%, #072924 100%);
  border:1px solid rgba(110, 231, 210, 0.34);
  box-shadow:inset 0 1px 1px rgba(255, 255, 255, 0.26), 0 3px 10px rgba(0, 0, 0, 0.45);
}
.pix-notif-icon svg{
  width:1.25rem;
  height:1.25rem;
  display:block;
}
.pix-notif-dot{
  position:absolute;
  top:-3px;
  right:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff7836;
  border:1.5px solid #071017;
  box-shadow:0 0 8px rgba(255, 120, 54, 0.85);
}
.pix-notif-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0.12rem;
  text-align:left;
}
.pix-notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
}
.pix-notif-title{
  font-family:Paperlogy,sans-serif;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:-0.01em;
  color:#f4f7fa;
  display:inline-flex;
  align-items:center;
  gap:0.36rem;
}
.pix-notif-pill{
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.08rem 0.36rem;
  border-radius:999px;
  background:rgba(13, 92, 77, 0.52);
  border:1px solid rgba(94, 234, 212, 0.28);
  color:#86efac;
}
.pix-notif-time{
  font-family:Paperlogy,sans-serif;
  font-size:0.68rem;
  font-weight:400;
  color:#7f96a8;
  white-space:nowrap;
  flex-shrink:0;
}
.pix-notif-body{
  font-family:Paperlogy,sans-serif;
  font-size:0.74rem;
  line-height:1.34;
  color:#b6c7d6;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pix-notif-amount{
  font-weight:800;
  color:#5eead4;
  text-shadow:0 0 12px rgba(94, 234, 212, 0.25);
}
.pix-notif-sender{
  color:#8fa6b8;
}
@media(max-width:600px){
  .pix-stack-stage{
    width:min(90vw, 348px);
    margin-top:clamp(14px, 2.2vh, 20px);
  }
  .pix-notif-card{
    padding:0.56rem 0.76rem;
    gap:0.62rem;
    border-radius:0.92rem;
  }
  .pix-notif-icon{
    width:2.1rem;
    height:2.1rem;
    border-radius:0.58rem;
  }
  .pix-notif-icon svg{
    width:1.12rem;
    height:1.12rem;
  }
  .pix-notif-title{
    font-size:0.74rem;
  }
  .pix-notif-body{
    font-size:0.70rem;
  }
}

/* Placa Esmaltada Vintage Anos 50 + incidência de luz superior */
.apple-badge{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:Paperlogy,sans-serif;
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#ffe29a;
  padding:0.4rem 1.25rem;
  border-radius:999px;
  background:linear-gradient(180deg,#1c3d32,#0c221a);
  border:1.5px solid #a3b899;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 1px 10px rgba(125,211,252,calc(0.55 * var(--e-top-hit, 0))),
    0 3px 8px rgba(0,0,0,0.5),
    0 0 16px rgba(50,210,150,0.25),
    0 0 22px rgba(56,189,248,calc(0.42 * var(--e-top-hit, 0)));
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
  position:relative;
  z-index:4;
}
.apple-badge::before,
.apple-badge::after{
  content:'★';
  font-size:0.65rem;
  color:#ffd166;
  opacity:0.85;
}

/* Tipografia de Manchete Cinematográfica */
.apple-hero-statement.scroll-reading-target{
  font-family:Paperlogy,sans-serif;
  font-weight:700;
  font-size:clamp(1.2rem, 3.8vw, 1.85rem);
  line-height:1.36;
  letter-spacing:-.025em;
  color:#ffffff;
  text-wrap:balance;
  margin:0;
  position:relative;
  z-index:4;
  transform:translateZ(0);
  contain:layout style paint;
}

/* Palavras dinâmicas no scroll com acendimento de fósforo CRT / filamento vintage */
.scroll-word{
  display:inline-block;
  opacity:0.22;
  color:#fffdfa;
  text-shadow:0 0 16px rgba(255,248,235,0.55),0 2px 4px rgba(0,0,0,0.6);
  transform:translateY(2px);
  transition:opacity .14s cubic-bezier(.16,1,.3,1),transform .14s cubic-bezier(.16,1,.3,1);
}
.scroll-word.highlight-target{
  color:#ff7a3d;
  font-weight:800;
  text-shadow:0 0 22px rgba(255,122,61,0.7),0 2px 4px rgba(0,0,0,0.8);
}
.scroll-word.is-revealed{
  opacity:1;
  transform:translateY(0);
}

/* Botão indicador de transição retrô anos 50 + incidência de luz inferior */
.apple-scroll-bridge{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  margin-top:0.35rem;
  padding:0.42rem 1.25rem;
  border-radius:999px;
  background:linear-gradient(180deg,#242b36,#121820);
  border:1.5px solid rgba(180,181,154,0.35);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.25),
    inset 0 -1px 10px rgba(125,211,252,calc(0.55 * var(--e-bot-hit, 0))),
    0 4px 12px rgba(0,0,0,0.6),
    0 0 22px rgba(56,189,248,calc(0.45 * var(--e-bot-hit, 0)));
  opacity:0.92;
  animation:bridge-bounce 2s infinite ease-in-out;
  position:relative;
  z-index:4;
}
.bridge-text{
  font-family:Paperlogy,sans-serif;
  font-size:clamp(0.68rem, 2.8vw, 0.75rem);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#ffe0a0;
  margin:0;
  white-space:nowrap;
}
.bridge-arrow{
  width:14px;
  height:14px;
  stroke:#ff9858;
}
@keyframes bridge-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

/* Mobile responsivo para a moldura anos 50 + economia de fill-rate na eletricidade */
@media(max-width:600px){
  .apple-statement-electric-stage{
    width:94%;
  }
  .apple-statement-wrap{
    width:100%;
    padding:1.4rem 1.15rem;
    border:20px solid transparent;
    border-image:url('assets/frame-teal-chrome.webp') 110 / 22px / 0 stretch;
    border-radius:1.8rem;
    gap:1.15rem;
  }
  .elec-chrome-specular{
    border-radius:1.8rem;
    padding:22px;
  }
  .elec-layer-glow{
    inset:-16px;
    width:calc(100% + 32px);
    height:calc(100% + 32px);
    padding:16px;
    filter:brightness(1.42) saturate(1.18);
    opacity:0.44;
  }
  .elec-wall-light{
    inset:-200px;
    background:
      radial-gradient(circle 165px at calc(var(--e1x, 160px) + 200px) calc(var(--e1y, 0px) + 200px), rgba(103, 232, 249, 0.25) 0%, rgba(34, 211, 238, 0.10) 36%, rgba(34, 211, 238, 0.025) 62%, rgba(34, 211, 238, 0) 84%),
      radial-gradient(circle 154px at calc(var(--e2x, 160px) + 200px) calc(var(--e2y, 300px) + 200px), rgba(103, 232, 249, 0.22) 0%, rgba(34, 211, 238, 0.08) 36%, rgba(34, 211, 238, 0.02) 62%, rgba(34, 211, 238, 0) 84%),
      radial-gradient(circle 130px at calc(var(--e3x, -999px) + 200px) calc(var(--e3y, -999px) + 200px), rgba(165, 243, 252, calc(var(--e3a, 0) * 0.24)) 0%, rgba(34, 211, 238, calc(var(--e3a, 0) * 0.07)) 42%, rgba(34, 211, 238, 0) 82%);
  }
  .apple-hero-statement.scroll-reading-target{
    font-size:clamp(1.05rem, 4.2vw, 1.4rem);
    line-height:1.35;
  }
  .apple-badge{
    white-space:nowrap;
    font-size:clamp(0.64rem, 2.9vw, 0.75rem);
    padding:0.36rem 0.95rem;
  }
}

/* Desktop aprimorado (>= 769px): braços 100% outscreen sem bordas cortadas e zero sobreposição no texto */
@media(min-width:769px){
  .apple-sticky-stage{
    width:100%;
  }
  .apple-scene.scene-1{
    width:100%;
    max-width:100%;
  }
  .apple-hands-stage{
    top:calc(54vh - clamp(120px, max(20vh, 11.6vw), 410px));
    width:100%;
    max-width:100%;
    height:clamp(230px, max(37vh, 21.2vw), 760px);
    min-height:0;
    max-height:none;
  }
  .apple-hand-slot.hand-left{
    width:calc(50% + 24px);
    transform:translateX(-80%);
  }
  .apple-hand-slot.hand-right{
    width:calc(50% + 24px);
    transform:translateX(80%);
  }
  .apple-hand-img{
    height:100%;
    width:auto;
    max-width:none;
  }
  .text-wrap-1{
    top:clamp(410px, 56vh, 660px);
    margin:0 auto;
  }
}
@media(min-width:769px) and (max-height:760px){
  .apple-scene.scene-3{
    padding-top:calc(178px + env(safe-area-inset-top, 0px));
    padding-bottom:1rem;
  }
  .apple-statement-wrap{
    padding:1.25rem 2.2rem;
    gap:0.85rem;
  }
  .apple-hero-statement.scroll-reading-target{
    font-size:clamp(1.2rem, 2.3vw, 1.52rem);
    line-height:1.30;
  }
  .apple-scroll-bridge{
    margin-top:0.15rem;
  }
  .pix-stack-stage{
    margin-top:10px;
  }
  .pix-notif-card{
    padding:0.46rem 0.78rem;
  }
  .pix-notif-icon{
    width:2rem;
    height:2rem;
  }
}

/* ========================================================
   ARCOS CIRCULARES 3D DAS LOGOS (PARALLAX + LUZ CINEMATOGRÁFICA)
   - Mobile Cena 1: meio círculo arqueado para cima (◠)
   - Mobile Cena 2: meio círculo arqueado para baixo (◡) completando o círculo
   - Desktop Cena 2: arco bem mais aberto e arqueado para baixo (◡) em loop
   ======================================================== */
.apple-logo-arc{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:8;
}
.apple-logo-arc-up{
  display:none;
}
@media(max-width:768px){
  .apple-logo-arc-up{
    display:block;
  }
}
.apple-scene.scene-2 .apple-newspaper-stage,
.apple-scene.scene-2 .text-wrap-2{
  position:relative;
  z-index:14;
}
.apple-arc-spotlight{
  position:absolute;
  left:0;
  top:0;
  width:280px;
  height:200px;
  transform:translate3d(-50%, -50%, 0);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(215, 238, 255, 0.14) 0%,
    rgba(96, 175, 250, 0.05) 38%,
    rgba(7, 16, 23, 0) 72%);
  pointer-events:none;
  will-change:transform,opacity;
  opacity:0;
  z-index:1;
}
.arc-logo-slot{
  position:absolute;
  left:0;
  top:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transform:translate3d(-9999px, -9999px, 0);
  transform-origin:center center;
  will-change:transform,opacity;
  opacity:0;
}
.arc-logo-img,
.arc-logo-img-mono,
.arc-logo-img-color{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.arc-logo-img-color{
  will-change:opacity;
}
.apple-statement-electric-stage.has-fx-canvas .elec-wall-light,
.apple-statement-electric-stage.has-fx-canvas .elec-glass-spill,
.apple-statement-electric-stage.has-fx-canvas .elec-chrome-specular,
.apple-statement-electric-stage.has-fx-canvas .elec-bolts-overlay{
  display:none!important;
}
.apple-statement-electric-stage.has-fx-canvas .apple-badge{
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 3px 8px rgba(0,0,0,0.5),0 0 16px rgba(50,210,150,0.25);
}
.apple-statement-electric-stage.has-fx-canvas .apple-scroll-bridge{
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 4px 12px rgba(0,0,0,0.6);
}
.elec-fx-canvas{
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  z-index:6;
  mix-blend-mode:screen;
  will-change:opacity;
}
@media(prefers-reduced-motion:reduce){
  .arc-logo-slot,
  .arc-logo-img,
  .apple-arc-spotlight{
    transition:none!important;
  }
}

/* ========================================================
   SEÇÃO #BONUS: TIMELINE DIAL & QUADRADOS COM COR CHAPADA
   (ESTILO CRISTIANO RONALDO / ESCALA DE INSANIDADE)
   ======================================================== */
/* ==========================================================================
   SEÇÃO BÔNUS: RETRO TERMINAL TV CRT (ENTRADA NO SCROLL + SETAS PREV/NEXT)
   - Mapeamento analítico 1:1 de retro-tv-terminal.webp (920 x 884)
   - Tubo CRT: top: 14.85% | left: 22.17% | width: 55.54% | height: 44.94%
   - Z-Index Hierárquico: Computador z-index: 35 (sobe sobre o título z-index: 10)
   - Título Mobile: 2 linhas ("Você também / recebe estes bônus")
   - Mobile: Zoom expandido preenchendo a largura e sangrando as bordas laterais
   - Navegação por setas Prev/Next (.bonus-nav) + botões mecânicos 3D (CH 1 a CH 5)
   ========================================================================== */
.bonus-terminal-section {
  padding: 0 !important;
  overflow: visible;
  background: #071017;
  position: relative;
}

.bonus-scroller {
  position: relative;
  width: 100%;
  height: 150svh;
}

/* PALCO CENTRALIZADO NO VIEWPORT */
.bonus-sticky-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, #071017 0%, transparent 18%, transparent 82%, #071017 100%),
    radial-gradient(ellipse 66% 42% at 50% 54%, rgba(16, 52, 34, 0.48) 0%, rgba(10, 32, 23, 0.22) 52%, rgba(7, 16, 23, 0) 84%),
    #071017;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26px, #000 calc(100% - 26px), transparent 100%);
  box-sizing: border-box;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* TÍTULO SOLTO COM Z-INDEX: 10 (COMPUTADOR SOBE POR CIMA NO PARALLAX) */
.bonus-top-bar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Inferior ao computador (z-index: 35) */
  pointer-events: none;
  text-align: center;
  padding: 0 1.25rem;
  margin-bottom: clamp(0.35rem, 1.1vh, 0.7rem);
  will-change: transform, opacity;
}

.br-mobile {
  display: none;
}

.bonus-sticky-title {
  font-family: Paperlogy, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.95), 0 0 35px rgba(34, 197, 94, 0.25);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* PALCO DO TERMINAL RETRÔ TV (Z-INDEX: 35 PARA SUBIR POR CIMA DO TÍTULO) */
.retro-terminal-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-sizing: border-box;
  z-index: 35; /* SUPERIOR AO TÍTULO: sobrepõe o texto no parallax */
  margin: 0;
}

.retro-terminal-device {
  position: relative;
  width: min(82vw, 1080px, calc((100vh - 12.5rem) * 920 / 884));
  aspect-ratio: 920 / 884;
  container-type: inline-size;
  margin: 0 auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 56px rgba(34, 197, 94, 0.14));
  will-change: transform, opacity;
  transform-origin: center center;
  z-index: 35;
}

.terminal-chassis-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ==========================================================================
   TELA CRT MILIMETRICAMENTE ENCAIXADA NA CARCAÇA
   Mapeamento exato de pixel: top: 14.85% | left: 22.17% | width: 55.54% | height: 44.94%
   Curvatura abaulada orgânica de tubo de vidro: 44px/36px
   ========================================================================== */
.crt-screen-monitor {
  position: absolute;
  top: 14.85%;
  left: 22.17%;
  width: 55.54%;
  height: 44.94%;
  border-radius: 44px 44px 38px 38px / 36px 36px 30px 30px;
  overflow: hidden;
  background: radial-gradient(ellipse 96% 88% at 50% 46%, #0d281a 0%, #05150c 68%, #010603 100%);
  box-shadow: 
    inset 0 0 45px rgba(0, 0, 0, 0.98),
    inset 0 0 20px rgba(0, 0, 0, 0.95),
    inset 0 2px 4px rgba(255, 255, 255, 0.12),
    0 0 12px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(1rem, 2.2vw, 1.95rem) clamp(1.45rem, 3.1vw, 2.8rem);
  z-index: 2;
  border: none !important;
}

/* BISEL DE VIDRO E VINHETA DA TELA */
.crt-screen-monitor::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 
    inset 0 0 0 2px rgba(0, 0, 0, 0.85),
    inset 0 0 30px rgba(0, 0, 0, 0.9),
    inset 0 4px 10px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 8;
}

/* SCANLINES & CRT GLOW */
.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px, rgba(0,0,0,0.28) 4px);
  z-index: 5;
  opacity: 0.7;
}

.crt-curvature-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(34, 197, 94, 0.14) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 6;
}

.crt-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 70%);
  z-index: 7;
}

/* CABEÇALHO CRT */
.crt-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: clamp(0.58rem, 0.92vw, 0.84rem);
  letter-spacing: 0.05em;
  color: #4ade80;
  border-bottom: 1px solid rgba(74, 222, 128, 0.3);
  padding-bottom: 0.35rem;
  margin-bottom: 0.45rem;
  z-index: 3;
}

.crt-led-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  margin-right: 6px;
  animation: crtBlink 1.4s infinite;
}

@keyframes crtBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.crt-channel-badge {
  font-weight: 700;
  color: #86efac;
}

/* ==========================================================================
   DECK DE PROGRAMAS CRT (NITIDEZ MÁXIMA SEM DESLOCAMENTO OU RECORTE NAS BORDAS)
   ========================================================================== */
.crt-programs-deck {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  perspective: 420px;
  transform: perspective(420px) rotateX(var(--crt-fisheye-rx, 0deg)) rotateY(var(--crt-fisheye-ry, 0deg)) scale(var(--crt-fisheye-scale, 1));
  transform-style: preserve-3d;
  will-change: transform;
  max-width: 100%;
  box-sizing: border-box;
}

.crt-program-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0.15rem 0.2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.crt-program-card.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.crt-prog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  max-width: 100%;
}

.crt-prog-tag {
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: clamp(0.64rem, 0.95vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #86efac;
  text-transform: uppercase;
  white-space: nowrap;
}

.crt-prog-free {
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: clamp(0.62rem, 0.88vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.55);
  border-radius: 4px;
  padding: 0.15rem 0.55rem;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

.crt-prog-title {
  font-family: Paperlogy, sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.9vw, 1.78rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #f0fdf4;
  margin: 0.2rem 0 0.45rem 0;
  max-width: 100%;
  overflow-wrap: break-word;
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.65), 0 2px 10px rgba(0, 0, 0, 0.8);
}

.crt-prog-desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.76rem, 1.05vw, 0.98rem);
  line-height: 1.42;
  color: #bbf7d0;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.crt-prog-footer {
  max-width: 100%;
}

.crt-price-pill {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: clamp(0.62rem, 0.9vw, 0.82rem);
  line-height: 1.35;
  color: #4ade80;
  background: rgba(16, 52, 34, 0.65);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 4px;
  padding: 0.26rem 0.68rem;
  box-shadow: inset 0 0 12px rgba(34, 197, 94, 0.2);
}

/* ==========================================================================
   BOTÕES MECÂNICOS 3D ESTILO SA PROFILE (CH 1 a CH 5)
   ========================================================================== */
.crt-rotary-knobs {
  display: none !important;
}

.crt-hardware-controls {
  position: absolute;
  bottom: 8.5%;
  left: 17%;
  right: 17%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  z-index: 10;
  pointer-events: auto;
}

.crt-channel-btn {
  flex: 1;
  max-width: 82px;
  height: clamp(32px, 4.1vw, 42px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.crt-channel-btn:focus-visible .keycap-base {
  outline: 2px solid #ff7836;
  outline-offset: 3px;
}

.keycap-base {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(to bottom, #f3ede2 0%, #ded5c4 65%, #c8bea9 100%);
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 5px 0 #736b5c,
    0 7px 0 #4d463b,
    0 10px 14px rgba(0, 0, 0, 0.55);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
  padding: 1px 1px 5px 1px;
  box-sizing: border-box;
}

.keycap-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  height: 82%;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f4ede3 55%, #dfd6c5 100%);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(0, 0, 0, 0.22);
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: clamp(0.68rem, 0.95vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3f392f;
  transition: background 0.08s ease, color 0.08s ease, box-shadow 0.08s ease;
}

.crt-channel-btn:hover .keycap-base {
  background: linear-gradient(to bottom, #ffffff 0%, #e6ddce 65%, #d1c7b3 100%);
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 5px 0 #807767,
    0 7px 0 #574f42,
    0 12px 18px rgba(0, 0, 0, 0.6);
}

.crt-channel-btn:active .keycap-base,
.crt-channel-btn.is-active .keycap-base {
  transform: translateY(3px);
  background: linear-gradient(to bottom, #22c55e 0%, #16a34a 65%, #15803d 100%);
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 0 #14532d,
    0 3px 0 #0f3d21,
    0 5px 10px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(34, 197, 94, 0.75);
}

.crt-channel-btn:active .keycap-top,
.crt-channel-btn.is-active .keycap-top {
  background: radial-gradient(ellipse at 50% 35%, #4ade80 0%, #22c55e 60%, #16a34a 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   BANDEJA DE DESCRIÇÃO EXTERNA (PURA TIPOGRAFIA ISOLADA EM GRID ESTÁVEL)
   ========================================================================== */
.bonus-external-desc-tray {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin-top: clamp(0.45rem, 1.4vh, 0.9rem);
  padding: 0 1.25rem;
  box-sizing: border-box;
  z-index: 15;
  display: grid;
  place-items: center;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bonus-external-desc-text {
  position: relative;
  grid-area: 1 / 1;
  padding: 0 0.75rem;
  font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(0.95rem, 3.6vw, 1.3rem);
  line-height: 1.36;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-align: center;
  text-wrap: balance;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  background: none !important;
  border: none !important;
}

.bonus-external-desc-text.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   NAVEGAÇÃO PREV / NEXT ENTRE OS BÔNUS (CÁPSULA RETRO ENAMEL / LATÃO)
   ========================================================================== */
.bonus-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: fit-content;
  margin-top: clamp(0.45rem, 1.2vh, 0.8rem);
  padding: 0.45rem 0.8rem 0.52rem;
  border: 1px solid #a39978;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #485b51, #182e29 18%, #10211e 80%, #35483c);
  box-shadow: inset 0 1px 0 #d9dfbb88, 0 3px 0 #101a16, 0 7px 14px #0006;
  position: relative;
  z-index: 60;
  pointer-events: auto;
}

.bonus-nav button {
  width: 2.65rem;
  height: 2.65rem;
  border: 3px solid #b4b59a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 22%, #668e7d, #285249 55%, #112c27 85%);
  color: #fff1c9;
  box-shadow: inset 0 1px 1px #e1f0cf88, inset 0 -3px 3px #061c17, 0 3px 0 #101b15, 0 4px 5px #0009;
  text-shadow: 0 1px 2px #000;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.bonus-nav button:hover {
  filter: brightness(1.18);
}

.bonus-nav button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px #061c17, 0 1px 0 #101b15;
}

.bonus-nav button:focus-visible {
  outline: 2px solid #ff7836;
  outline-offset: 4px;
}

.bonus-nav .bonus-count {
  display: grid;
  place-items: center;
  min-width: 3.6rem;
  min-height: 2.1rem;
  padding: 0.2rem 0.5rem;
  border: 2px solid #817754;
  border-radius: 0.28rem;
  background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px),
              linear-gradient(180deg, #101810, #293323 55%, #101810);
  color: #ffd58b;
  font-family: Paperlogy, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 5px #edaf4c88;
  box-shadow: inset 0 3px 7px #000c, inset 0 0 8px #50614144;
}

/* ==========================================================================
   DESKTOP: DESCRIÇÃO COMPLETA DENTRO DO CRT, TRAY EXTERNO OCULTO + PREV/NEXT VISÍVEL
   ========================================================================== */
@media (min-width: 901px) {
  .bonus-external-desc-tray {
    display: none !important;
  }
  .retro-terminal-device {
    width: min(82vw, 1080px, calc((100vh - 12.5rem) * 920 / 884)) !important;
    width: min(82vw, 1080px, calc((100dvh - 12.5rem) * 920 / 884)) !important;
    max-height: none !important;
  }
  .crt-screen-monitor {
    padding: 2.35cqw 3.4cqw !important;
  }
  .crt-screen-header {
    font-size: 1.55cqw !important;
    padding-bottom: 0.65cqw !important;
    margin-bottom: 0.7cqw !important;
  }
  .crt-prog-tag {
    font-size: 1.65cqw !important;
  }
  .crt-prog-free {
    font-size: 1.5cqw !important;
    padding: 0.25cqw 0.85cqw !important;
  }
  .crt-prog-title {
    font-size: 3.1cqw !important;
    line-height: 1.15 !important;
    margin: 0.3cqw 0 0.5cqw 0 !important;
  }
  .crt-desktop-desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    font-size: 1.9cqw !important;
    line-height: 1.38 !important;
    margin: 0 0 0.75cqw 0 !important;
  }
  .crt-price-pill {
    font-size: 1.52cqw !important;
    line-height: 1.3 !important;
    padding: 0.45cqw 1.0cqw !important;
  }
  .keycap-top {
    font-size: 1.55cqw !important;
  }
}

/* ==========================================================================
   MOBILE: TÍTULO 2 LINHAS, TERMINAL AMPLO SANGRANDO BORDAS, DESCRIÇÃO + PREV/NEXT
   ========================================================================== */
@media (max-width: 900px) {
  .bonus-scroller {
    height: 150svh !important; /* Entrada no scroll (ida e volta) sem prender os 5 bônus */
  }

  .bonus-sticky-stage {
    justify-content: center !important;
    padding: calc(3.6rem + env(safe-area-inset-top, 0px)) 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
  }

  .bonus-top-bar {
    margin-bottom: 0.15rem !important;
    padding: 0 0.5rem !important;
    z-index: 10 !important;
  }

  .br-mobile {
    display: inline !important; /* Quebra exatamente em 2 linhas */
  }

  .bonus-sticky-title {
    max-width: min(94vw, 24ch) !important;
    margin: 0 auto !important;
    font-size: clamp(1.26rem, 5.2vw, 1.68rem) !important;
    line-height: 1.16 !important;
    text-wrap: initial !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95) !important;
  }

  /* PALCO DO COMPUTADOR COM Z-INDEX SUPERIOR AO TEXTO DURANTE A ENTRADA */
  .retro-terminal-stage {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.15rem 0 0.1rem 0 !important;
    z-index: 35 !important;
  }

  /* COMPUTADOR GRANDE SANGRANDO AS BORDAS LATERAIS COM PROPORÇÃO EXATA 920/884 */
  .retro-terminal-device {
    width: min(122vw, 600px, calc((100vh - 19.2rem) * 920 / 884)) !important;
    width: min(122vw, 600px, calc((100dvh - 19.2rem) * 920 / 884)) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    z-index: 35 !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.7)) !important;
  }

  .crt-screen-monitor {
    top: 14.85% !important;
    left: 22.17% !important;
    width: 55.54% !important;
    height: 44.94% !important;
    padding: 0.85rem 1.2rem !important;
    border-radius: 26px 26px 22px 22px / 22px 22px 18px 18px !important;
  }

  .crt-screen-header {
    font-size: clamp(0.46rem, 2.0vw, 0.66rem) !important;
    letter-spacing: 0.04em !important;
    padding-bottom: 0.25rem !important;
    margin-bottom: 0.3rem !important;
  }

  .crt-programs-deck {
    transform: none !important;
    filter: none !important;
  }

  .crt-program-card {
    padding: 0.1rem 0.2rem !important;
    justify-content: space-evenly !important;
  }

  .crt-desktop-desc {
    display: none !important;
  }

  .crt-prog-title {
    font-size: clamp(0.92rem, 3.85vw, 1.24rem) !important;
    line-height: 1.18 !important;
    margin: 0.1rem 0 0.25rem 0 !important;
    transform: none !important;
  }

  .crt-prog-tag {
    font-size: clamp(0.56rem, 2.3vw, 0.76rem) !important;
  }

  .crt-prog-free {
    font-size: clamp(0.52rem, 2.15vw, 0.7rem) !important;
    padding: 0.1rem 0.42rem !important;
  }

  .crt-price-pill {
    font-size: clamp(0.54rem, 2.25vw, 0.72rem) !important;
    line-height: 1.32 !important;
    padding: 0.22rem 0.55rem !important;
    transform: none !important;
  }

  /* Teclas 3D no Mobile - Compactas e Não Agigantadas */
  .crt-hardware-controls {
    bottom: 8.5% !important;
    gap: 4px !important;
    left: 20% !important;
    right: 20% !important;
  }

  .crt-channel-btn {
    flex: 1 1 0 !important;
    max-width: 44px !important;
    height: 22px !important;
  }

  .keycap-base {
    min-width: 28px !important;
    width: 100% !important;
    max-width: 44px !important;
    height: 20px !important;
    padding: 1px 1px 2px 1px !important;
    border-radius: 3.5px !important;
    box-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 2.5px 0 #736b5c,
      0 4px 0 #4d463b,
      0 5px 6px rgba(0, 0, 0, 0.45) !important;
  }

  .keycap-top {
    font-size: 0.48rem !important;
    letter-spacing: 0.02em !important;
    padding: 0 1px !important;
    border-radius: 2.5px !important;
  }

  .crt-channel-btn.is-active .keycap-base {
    transform: translateY(1.5px) !important;
    box-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 1.5px 0 #14532d,
      0 0 10px rgba(34, 197, 94, 0.65) !important;
  }

  /* Texto externo inferior (Mobile) - Grid sem colapso e 100% visível */
  .bonus-external-desc-tray {
    position: relative !important;
    z-index: 50 !important;
    margin-top: 0.25rem !important;
    padding: 0 0.9rem !important;
    max-width: 420px !important;
    display: grid !important;
    place-items: center !important;
  }

  .bonus-external-desc-text {
    position: relative !important;
    grid-area: 1 / 1 !important;
    inset: auto !important;
    z-index: 50 !important;
    padding: 0 0.45rem !important;
    font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(0.88rem, 3.45vw, 1.06rem) !important;
    line-height: 1.34 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.85) !important;
    text-align: center !important;
  }

  .bonus-nav {
    margin-top: 0.35rem !important;
  }
}

/* ==========================================================================
   DESKTOP: HERO CARDS NO #COMO-FUNCIONA (INSPIRAÇÃO MARVEL / HEROIS)
   ========================================================================== */
@media (min-width: 601px) {
  #como-funciona.section {
    padding-top: 5rem;
    padding-bottom: 6.5rem;
    position: relative;
    background:
      linear-gradient(180deg, #071017 0%, transparent 18%, transparent 82%, #071017 100%),
      radial-gradient(ellipse 76% 42% at 50% 42%, rgba(29, 78, 216, 0.12) 0%, rgba(7, 16, 23, 0) 72%),
      #071017;
  }
  
  #como-funciona h2 {
    text-align: center;
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 auto 3.2rem;
    text-wrap: balance;
  }

  #como-funciona .steps {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.85rem !important;
    margin-top: 0 !important;
    list-style: none !important;
    padding: 0 !important;
  }

  .step-hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #101c28 0%, #0a131c 60%, #071017 100%);
    border: 1px solid rgba(90, 165, 220, 0.22);
    border-radius: 1.5rem;
    padding: 1.15rem 1.15rem 1.75rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 
                0 2px 8px rgba(0, 0, 0, 0.35),
                inset 0 1px 1px rgba(255, 255, 255, 0.14);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease;
    overflow: hidden;
    isolation: isolate;
  }

  .step-hero-card:hover {
    transform: translateY(-8px);
    border-color: rgba(94, 243, 196, 0.45);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.16),
      0 8px 20px rgba(0, 0, 0, 0.24),
      0 20px 42px rgba(0, 0, 0, 0.36),
      0 36px 70px rgba(0, 0, 0, 0.46),
      0 0 24px rgba(29, 78, 216, 0.2),
      inset 0 1px 1px rgba(255, 255, 255, 0.22);
  }

  /* Midia / Thumbnail no Topo com Canto Chanfrado e Badge */
  .step-card-media {
    position: relative;
    width: 100%;
    margin-bottom: 1.25rem;
  }

  /* Badge Flutuante no Topo Central: PASSO 01, PASSO 02, PASSO 03 */
  .step-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0.38rem 1.45rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(46, 58, 72, 0.96) 0%, rgba(19, 26, 36, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-family: 'Paperlogy', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  }

  /* Container da Imagem com Canto Chanfrado (Estilo Herois / Marvel da referencia) */
  .step-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 1.15rem 0 1.15rem 1.15rem;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    background: #060e15;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .step-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle at calc(100% - 12px) 12px, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  }

  .step-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 45%, rgba(7, 16, 23, 0.7) 100%);
    pointer-events: none;
  }

  .step-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  }

  .step-hero-card:hover .step-card-thumb img {
    transform: scale(1.05);
    filter: brightness(1.06);
  }

  /* Corpo de Conteudo Abaixo da Imagem */
  .step-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 0.35rem;
  }

  /* Linha de Metadados (Tag + Estatisticas) */
  .step-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.15rem;
    gap: 0.5rem;
  }

  .step-meta-tag {
    font-family: 'Paperlogy', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .step-meta-tag::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6a28;
    box-shadow: 0 0 8px #ff6a28;
  }

  .step-meta-stats {
    display: flex;
    align-items: center;
    gap: 0.95rem;
  }

  .step-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-family: 'Paperlogy', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .step-stat svg {
    color: #94a3b8;
    flex-shrink: 0;
  }

  /* Divisorias Elegantes */
  .step-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0.85rem 0 1.05rem;
  }

  .step-card-title-wrap {
    margin: 0;
  }

  .step-hero-card h3 {
    font-family: 'Paperlogy', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
  }

  .step-card-subdivider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0.95rem 0 1.05rem;
  }

  .step-hero-card p {
    font-family: 'Paperlogy', sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #9bb0c1;
    margin: 0;
  }
}

@media (min-width: 601px) and (max-width: 1220px) {
  #como-funciona .steps {
    gap: 1.15rem !important;
  }
  .step-hero-card {
    padding: 0.9rem 0.9rem 1.4rem;
  }
  .step-hero-card h3 {
    font-size: 1.08rem;
    min-height: 2.8rem;
  }
  .step-hero-card p {
    font-size: 0.85rem;
  }
  .step-meta-stats {
    gap: 0.48rem;
  }
  .step-meta-tag {
    font-size: 0.68rem;
  }
  .step-stat {
    font-size: 0.66rem;
  }
}

/* ==========================================================================
   GPU COMPOSITOR, VIEWPORT GATING UNIVERSAL (MOBILE + DESKTOP) & #PROFESSOR
   ========================================================================== */

/* Reveals e texto palavra-a-palavra puramente em opacity + transform (zero blur repaint) */
.reveal-header,
.reveal-body {
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-header.is-pending {
  filter: none;
  will-change: opacity, transform;
}
.scroll-word {
  filter: none !important;
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: auto;
}

/* Substitui backdrop-filter caro por fundo escuro limpo na barra de atos */
.apple-act-dots {
  background: rgba(11, 22, 32, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Pausa animações infinitas fora da tela em todos os dispositivos (.is-inview e :not(.paused)) */
.crt-led-dot,
.pilot-jewel,
.apple-scroll-bridge,
.retro-3d-button,
.btn-3d-glare::after {
  animation-play-state: paused;
}
.btn-lacquer-chassis {
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 22px rgba(224, 85, 26, 0.38));
}
body:not(.paused) #bonus.is-inview .crt-led-dot,
body:not(.paused) #oferta.is-inview .pilot-jewel,
body:not(.paused) #diferencial.is-inview .apple-scroll-bridge,
body:not(.paused) .retro-3d-button.is-inview,
body:not(.paused) .retro-3d-button.is-inview .btn-3d-glare::after {
  animation-play-state: running;
}
.retro-3d-button:hover {
  animation: none;
}
.retro-3d-button:hover .btn-lacquer-chassis {
  filter:
    drop-shadow(0 16px 32px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 32px rgba(255, 120, 50, 0.8))
    brightness(1.06);
}
body.paused .crt-led-dot,
body.paused .pilot-jewel,
body.paused .apple-scroll-bridge,
body.paused .retro-3d-button,
body.paused .btn-3d-glare::after {
  animation-play-state: paused !important;
}

/* Gating estrito de especificidade para animações do módulo #aulas fora da viewport */
#aulas .lesson-pinch .pinch-hand,
#aulas .lesson-pinch .pinch-index,
#aulas .lesson-pinch .pinch-thumb,
#aulas .lesson-pinch .pinch-cursor,
#aulas .lesson-mechanism .lesson-cog,
#aulas .lesson-mechanism .lesson-ratchet,
#aulas .lesson-typewriter::before,
#aulas .lesson-typewriter::after,
#aulas .typewriter-carriage,
#aulas .typewriter-paper,
#aulas .typewriter-paper > span {
  animation-play-state: paused !important;
}
@media (min-width: 601px) {
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-mechanism .lesson-cog,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-mechanism .lesson-ratchet,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-typewriter::before,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-typewriter::after,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .typewriter-carriage,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .typewriter-paper,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .typewriter-paper > span,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-hand,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-index,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-thumb,
  body:not(.paused) #aulas.aulas-inview .lessons li.is-center .lesson-pinch .pinch-cursor {
    animation-play-state: running !important;
  }
}
@media (max-width: 600px) {
  body:not(.paused) #aulas.aulas-inview.mechanism-visible .lesson-mechanism .lesson-cog,
  body:not(.paused) #aulas.aulas-inview.mechanism-visible .lesson-mechanism .lesson-ratchet,
  body:not(.paused) #aulas.aulas-inview.typewriter-visible .lesson-typewriter::before,
  body:not(.paused) #aulas.aulas-inview.typewriter-visible .lesson-typewriter::after,
  body:not(.paused) #aulas.aulas-inview.typewriter-visible .typewriter-carriage,
  body:not(.paused) #aulas.aulas-inview.typewriter-visible .typewriter-paper,
  body:not(.paused) #aulas.aulas-inview.typewriter-visible .typewriter-paper > span,
  body:not(.paused) #aulas.aulas-inview.pinch-visible .lesson-pinch .pinch-hand,
  body:not(.paused) #aulas.aulas-inview.pinch-visible .lesson-pinch .pinch-index,
  body:not(.paused) #aulas.aulas-inview.pinch-visible .lesson-pinch .pinch-thumb,
  body:not(.paused) #aulas.aulas-inview.pinch-visible .lesson-pinch .pinch-cursor {
    animation-play-state: running !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retro-3d-button,
  .btn-3d-glare::after,
  .flap-state.is-flipping .flap-char {
    animation: none !important;
  }
}

@media (min-width: 601px) {
  /* Retrato editorial do professor no #professor (era quadro vazio no desktop) */
  #professor.teacher {
    padding-block: clamp(4.5rem, 8vw, 6.5rem);
  }
  #professor .wrap {
    align-items: center;
  }
  #professor .portrait-reserve {
    position: relative;
    min-height: clamp(27rem, 48vh, 35rem);
    overflow: hidden;
    isolation: isolate;
  }
  #professor .portrait-reserve::before {
    content: '';
    position: absolute;
    inset: 4% 8% 12%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 56% 52% at 54% 44%, rgba(56, 189, 248, 0.22) 0%, rgba(14, 116, 144, 0.12) 48%, rgba(7, 16, 23, 0) 76%),
      radial-gradient(ellipse 42% 38% at 38% 36%, rgba(249, 115, 22, 0.14) 0%, rgba(7, 16, 23, 0) 72%);
  }
  #professor .portrait-reserve::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url('assets/matheus-crossed-arms-transparent.webp') center 2% / auto 138% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 64%, rgba(0, 0, 0, 0.45) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 64%, rgba(0, 0, 0, 0.45) 86%, transparent 100%);
  }
}

/* Tablet Portrait (601px-900px) & Celular Landscape (max-height: 540px) */
@media (min-width: 601px) and (max-width: 900px) {
  #aulas .lessons li {
    width: clamp(15.5rem, 42vw, 22rem);
  }
  #aulas .lessons li.is-prev {
    transform: translateX(calc(-50% - clamp(15.5rem, 36vw, 21rem))) scale(.84) rotateY(8deg)!important;
  }
  #aulas .lessons li.is-next {
    transform: translateX(calc(-50% + clamp(15.5rem, 36vw, 21rem))) scale(.84) rotateY(-8deg)!important;
  }
}

@media (max-height: 540px) {
  #bonus .bonus-scroller {
    height: auto !important;
  }
  #bonus .bonus-sticky-stage {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    padding: 1.75rem 1rem 2rem !important;
    gap: 0.55rem !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #bonus .retro-terminal-device {
    width: min(74vw, 390px) !important;
    transform: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7)) !important;
  }
  #bonus .crt-desktop-desc {
    display: none !important;
  }
  #bonus .bonus-external-desc-tray {
    display: grid !important;
    margin-top: 0.25rem !important;
  }
  .apple-top-bar {
    top: calc(1.65rem + env(safe-area-inset-top, 0px)) !important;
    gap: 0.25rem !important;
  }
  .apple-section-label {
    font-size: clamp(1.08rem, 3vw, 1.42rem) !important;
  }
  .apple-scene.scene-2 {
    padding-top: calc(5.8rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.75rem !important;
  }
  .apple-newspaper-stage {
    margin-bottom: 0.35rem !important;
  }
  .paper-flip-stage {
    max-width: min(310px, 43vh) !important;
  }
  .text-wrap-2 .apple-copy.apple-copy-prominent {
    font-size: clamp(0.92rem, 2.5vw, 1.12rem) !important;
    line-height: 1.3 !important;
  }
  .apple-scene.scene-3 {
    padding-top: calc(5.6rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.75rem !important;
  }
  .apple-statement-electric-stage {
    width: min(92vw, 34rem) !important;
  }
  .apple-statement-wrap {
    padding: 0.85rem 1.25rem !important;
    gap: 0.55rem !important;
    border-width: 14px !important;
    border-image-width: 16px !important;
  }
  .apple-hero-statement.scroll-reading-target {
    font-size: clamp(0.9rem, 2.4vw, 1.15rem) !important;
    line-height: 1.25 !important;
  }
  .apple-scroll-bridge {
    margin-top: 0.1rem !important;
    padding: 0.3rem 0.9rem !important;
  }
  .pix-stack-stage {
    margin-top: 8px !important;
  }
}

@media (max-width: 768px) and (max-height: 540px) {
  .apple-hands-stage {
    top: 26% !important;
    height: 142px !important;
  }
  .apple-hand-slot.hand-left,
  .apple-hand-slot.hand-right {
    transform: translateX(0);
  }
  .apple-hand-img {
    height: 142px !important;
  }
  .apple-hand-slot.hand-left .apple-hand-img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  }
  .apple-hand-slot.hand-right .apple-hand-img {
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(270deg, transparent 0%, #000 14%, #000 100%);
  }
  .text-wrap-1 {
    top: 52% !important;
    max-width: min(92vw, 30rem) !important;
  }
  .text-wrap-1 .apple-copy.apple-copy-prominent {
    font-size: clamp(0.92rem, 2.5vw, 1.12rem) !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 600px) and (max-height: 620px) {
  #bonus .bonus-sticky-stage {
    padding-top: calc(3.55rem + env(safe-area-inset-top, 0px)) !important;
    gap: 0.2rem !important;
  }
  #bonus .bonus-sticky-title {
    font-size: clamp(1.1rem, 4.7vw, 1.4rem) !important;
  }
  #bonus .retro-terminal-device {
    width: min(114vw, 600px, calc((100vh - 19.6rem) * 920 / 884)) !important;
    width: min(114vw, 600px, calc((100dvh - 19.6rem) * 920 / 884)) !important;
  }
  #bonus .crt-screen-monitor {
    padding: 0.44rem 0.72rem !important;
  }
  #bonus .crt-screen-header {
    font-size: clamp(0.41rem, 1.65vw, 0.54rem) !important;
    padding-bottom: 0.14rem !important;
    margin-bottom: 0.14rem !important;
  }
  #bonus .crt-programs-deck {
    justify-content: flex-start !important;
  }
  #bonus .crt-program-card {
    padding: 0.04rem 0.08rem !important;
    justify-content: space-between !important;
  }
  #bonus .crt-prog-top {
    margin-bottom: 0.08rem !important;
  }
  #bonus .crt-prog-tag,
  #bonus .crt-prog-free {
    font-size: clamp(0.44rem, 1.8vw, 0.58rem) !important;
    padding: 0.06rem 0.28rem !important;
  }
  #bonus .crt-prog-title {
    font-size: clamp(0.74rem, 3.1vw, 0.96rem) !important;
    line-height: 1.1 !important;
    margin: 0.04rem 0 0.12rem 0 !important;
  }
  #bonus .crt-price-pill {
    font-size: clamp(0.45rem, 1.85vw, 0.6rem) !important;
    line-height: 1.16 !important;
    padding: 0.12rem 0.36rem !important;
  }
  #bonus .bonus-external-desc-text {
    font-size: clamp(0.82rem, 3.2vw, 0.98rem) !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 601px) and (max-height: 540px) {
  #aulas.section {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  #aulas .lessons {
    height: 15.2rem !important;
    margin-top: 5.2rem !important;
  }
  #aulas .lessons li {
    height: 14.8rem !important;
    padding: 0.75rem 0.95rem !important;
    gap: 0.35rem !important;
  }
  #aulas .lessons li h3 {
    font-size: 1rem !important;
  }
  #aulas .lessons li p {
    font-size: 0.78rem !important;
    line-height: 1.32 !important;
  }
  #aulas .lessons .lesson-mechanism,
  #aulas .lessons .lesson-typewriter,
  #aulas .lessons .lesson-pinch,
  #aulas .lessons .lesson-camera,
  #aulas .lessons .lesson-tv,
  #aulas .lessons .lesson-mario,
  #aulas .lessons .lesson-domain {
    transform: translateX(-50%) scale(0.68) !important;
    transform-origin: center bottom !important;
  }
}

@media (min-width: 769px) and (min-height: 761px) {
  .pix-stack-stage {
    margin-top: clamp(26px, 3vh, 36px);
  }
}

@media (min-width: 901px) {
  .retro-terminal-device {
    filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.72));
  }
}