/* The art, subject, light and atmosphere each occupy an independent plane. */
.hero-image { background: #151413; animation: none; overflow: hidden; }
.hero-image::after { display: none; }
.hero-environment { position: absolute; inset: -65px; background: url('assets/img/landing/forja-hero-fondo-profundidad.webp') center / cover; transform: translate3d(var(--back-x,0px),var(--back-y,0px),0) scale(1.08); }
.hero-portrait { background: none; z-index: 2; filter: drop-shadow(-30px 20px 24px #0009); transform: translate3d(var(--front-x,0px),var(--front-y,0px),0) scale(var(--front-scale,1)); transform-origin: 76% 75%; }
.portrait-source,.portrait-live { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; aspect-ratio: 1672/941; }
.portrait-live { display: none; }
.gaze-ready .portrait-live { display: block; }
.gaze-ready .portrait-source { opacity: 0; }
.hero-halo { position: absolute; inset: -10%; z-index: 1; background: radial-gradient(ellipse at 77% 48%,#e8793166,transparent 34%); transform: translate3d(var(--halo-x,0px),0,0); mix-blend-mode: screen; }
.hero-atmosphere { position: absolute; inset: -50px; z-index: 3; opacity: .55; background: radial-gradient(ellipse at 90% 90%,#f59e4233,transparent 40%),radial-gradient(circle at 68% 72%,#ffb971 0 1px,transparent 2px),radial-gradient(circle at 88% 30%,#ffb971 0 1px,transparent 2px),radial-gradient(circle at 59% 55%,#ffb971 0 1px,transparent 2px); pointer-events:none; animation: atmospheric-drift 12s ease-in-out infinite alternate; }
@keyframes atmospheric-drift { from {transform:translate3d(-8px,15px,0);opacity:.3} to {transform:translate3d(12px,-18px,0);opacity:.65} }
main > .section, main > .dark-section, main > .diagnostic { content-visibility: visible; }
.dark-section,.diagnostic { isolation:isolate; background-image:none; perspective:1200px; overflow:hidden; }
.dark-section::before,.diagnostic::before { z-index:0; background:linear-gradient(90deg,#151413f0 0%,#151413b8 45%,#15141326 100%); }
.dark-section::after,.diagnostic::after { display:none; }
.dark-section > .scene-art,.diagnostic > .scene-art { position:absolute; z-index:-1; inset:-110px -45px; background:url('assets/img/landing/forja-hero-filosofia-digital.webp') 75% center / cover; transform:translate3d(0,var(--art-y,0px),0) scale(var(--art-scale,1.1)) rotateX(var(--art-rotate,0deg)); filter:blur(var(--art-blur,0px)); pointer-events:none; }
.action > .scene-art { background-image:url('assets/img/landing/forja-accion-movimiento.webp'); background-position:right top; }
.diagnostic > .scene-art { background-image:url('assets/img/landing/forja-diagnostico-lupa.webp'); }
.dark-section > .shell,.diagnostic > .shell { position:relative; z-index:1; }
.action .center { text-align:left; max-width:1180px; }
.action .center h2 { margin:0; max-width:720px; }
.action .center > p:not(.eyebrow) { margin:28px 0; max-width:600px; }
.action .sequence { justify-content:flex-start; }
.rodaje-grid,.about { perspective:1100px; }
.rodaje-image,.about img { opacity:1; clip-path:none; transform-origin:50% 70%; }
.cinema .rodaje-image,.cinema .about img { transform:translate3d(0,var(--depth-y,0px),0) rotateX(var(--depth-rotate,0deg)) scale(var(--depth-scale,1)); filter:blur(var(--depth-blur,0px)); box-shadow:0 28px 48px -24px #100b08aa; }
.rodaje-image img { object-position:center; }
.about::after { display:none; }
@media(max-width:760px) {
  .hero-portrait { display:block; }
  .hero-image { background:#151413; filter:none; top:64px; height:420px; }
  .hero-grid { padding-top:370px; padding-bottom:70px; }
  .hero-environment { inset:-35px; background-position:75% center; }
  .hero-portrait { opacity:1; }
  .portrait-source,.portrait-live { right:-20px; height:100%; top:0; }
  .hero::before { background:linear-gradient(180deg,transparent 300px,#151413 478px); }
  .hero-atmosphere { animation:none; }
  .dark-section > .scene-art,.diagnostic > .scene-art { inset:-60px -25px; background-position:70% top; }
  .dark-section::before,.diagnostic::before { background:linear-gradient(90deg,#151413eb,#151413ab); }
  .action .center h2 { font-size:clamp(31px,8.5vw,48px); }
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .hero-environment,.hero-portrait,.hero-halo,.hero-atmosphere,.cinema .rodaje-image,.cinema .about img,.dark-section > .scene-art,.diagnostic > .scene-art { transform:none; animation:none;filter:none; }
  .portrait-live {display:none!important}
  .portrait-source {opacity:1!important}
}
