/* fx.css: camada de efeitos 3D. Tudo só entra com html.fx-ready (se o JS falhar, a página fica normal). */
.fx-host { position: relative; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.fx-ready [data-fx] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--fx-d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--fx-d, 0ms); }
.fx-ready [data-fx].fx-in { opacity: 1; transform: none; }
.fx-tilt { transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .25s ease-out; will-change: transform; }
.fx-tilt:hover { box-shadow: 0 26px 50px rgba(40, 28, 8, .22); }
@media (prefers-reduced-motion: reduce) { .fx-ready [data-fx] { opacity: 1; transform: none; transition: none; } .fx-tilt { transition: none; } }
@media (max-width: 760px) { .fx-canvas { opacity: .35; } }

/* ---- imagens 3D (Higgsfield) ---- */
.scene, .sec-img { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }
.vis { mix-blend-mode: multiply; pointer-events: none; user-select: none; -webkit-user-drag: none; }
@keyframes vis-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(.6deg); } }
.hero-stage { position: relative; display: grid; justify-items: center; min-width: 0; }
.hero-stage .scene { width: 88%; height: auto; justify-self: end; margin-bottom: -64px; position: relative; z-index: 0; animation: vis-float 8s ease-in-out infinite; }
.hero-stage .chat { position: relative; z-index: 1; width: 94%; justify-self: start; }
.steps4 .ico { width: 124px; height: 124px; margin: -14px 0 -4px -16px; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.steps4 li:hover .ico { transform: translateY(-5px) rotate(-5deg) scale(1.07); }
#aulas .head, #scripts .head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 40px; row-gap: 14px; align-items: center; }
#aulas .head > *:not(.sec-img), #scripts .head > *:not(.sec-img) { grid-column: 1; }
.sec-img { grid-column: 2; grid-row: 1 / span 3; width: 100%; height: auto; }
.offer { position: relative; }
.offer-cover { position: absolute; top: 24px; right: 24px; width: 88px; height: 88px; border-radius: 12px; object-fit: cover; box-shadow: 0 18px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(209,169,74,.55); transform: perspective(700px) rotateY(-16deg) rotateX(5deg); transition: transform .35s ease; }
.offer:hover .offer-cover { transform: perspective(700px) rotateY(-5deg) rotateX(2deg) translateY(-5px); }
.offer .tag, .offer h3 { padding-right: 112px; }
.author-photo img { box-shadow: 18px 18px 0 0 rgba(179,139,46,.22), 0 34px 54px -26px rgba(40,28,8,.5); }
.final { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; margin-top: 84px; padding: 88px 48px; color: #FFF8EA;
  background: linear-gradient(90deg, rgba(24,17,6,.86) 0%, rgba(24,17,6,.6) 52%, rgba(24,17,6,.22) 100%), url("img/s-skyline.webp?v=3") center 40% / cover no-repeat; }
.final h2 { color: #FFF8EA; }
.final .lead { color: #EADFC6; }
@media (max-width: 860px) {
  .hero-stage .scene { width: 78%; margin-bottom: -40px; justify-self: center; }
  .hero-stage .chat { width: 100%; }
  #aulas .head, #scripts .head { grid-template-columns: minmax(0, 1fr); }
  .sec-img { grid-column: 1; grid-row: auto; max-width: 420px; justify-self: center; }
  .final { padding: 56px 24px; }
}
@media (max-width: 560px) {
  .offer .tag, .offer h3 { padding-right: 0; }
  .offer-cover { position: static; margin-bottom: 4px; width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) { .hero-stage .scene { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vis { display: none; } }
:root[data-theme="dark"] .vis { display: none; }