/* Escenas cinematográficas V11: fotografía que se funde con la interfaz, sin cajas 3D abstractas. */
:root{--scene-accent:var(--champagne,var(--gold,var(--accent,#e4b963)));--scene-ease:cubic-bezier(.16,1,.3,1)}
.hero{grid-template-columns:minmax(0,1.04fr) minmax(350px,.96fr)!important;column-gap:clamp(28px,5vw,84px)!important}
.hero-top{grid-column:1/-1;grid-row:1}.hero-body{grid-column:1;grid-row:2;align-self:center!important;justify-self:start!important;text-align:left!important;justify-items:start!important;width:100%;max-width:760px;position:relative;z-index:5}.hero-body .hero-text{max-width:58ch}.hero-body .hero-actions{justify-content:flex-start!important}.moments{grid-column:1;grid-row:3;justify-self:start!important;z-index:5}.hero-note{grid-column:1;grid-row:4;text-align:left!important;z-index:5}
.cinematic-stage{--scene-x:0;--scene-y:0;--scene-scroll:0;grid-column:2;grid-row:2/5;align-self:center;justify-self:center;position:relative;z-index:3;width:min(44vw,620px);height:min(66vh,650px);min-height:480px;isolation:isolate;overflow:visible;filter:drop-shadow(0 38px 60px rgb(0 0 0/.28))}
.cinematic-stage::before{content:"";position:absolute;z-index:-2;inset:4% -8% 0 -12%;background:radial-gradient(circle at 48% 46%,color-mix(in srgb,var(--scene-accent) 24%,transparent),transparent 66%);filter:blur(22px);opacity:.9}
.cinematic-photo{position:absolute;overflow:hidden;will-change:transform;backface-visibility:hidden}
.cinematic-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.04);transform:scale(1.08);transition:filter .8s ease}
.cinematic-photo-main{inset:-1% -3% 4% -4%;clip-path:none;-webkit-mask-image:radial-gradient(ellipse 82% 80% at 51% 48%,#000 0 52%,rgb(0 0 0/.9) 64%,rgb(0 0 0/.42) 76%,transparent 100%);mask-image:radial-gradient(ellipse 82% 80% at 51% 48%,#000 0 52%,rgb(0 0 0/.9) 64%,rgb(0 0 0/.42) 76%,transparent 100%);transform:translate3d(calc(var(--scene-x)*-12px),calc(var(--scene-scroll)*-36px + var(--scene-y)*-8px),0) scale(calc(1 + var(--scene-scroll)*.025));animation:scene-breathe 9s ease-in-out infinite alternate}
.cinematic-photo-detail{z-index:3;width:38%;height:40%;right:-3%;bottom:1%;clip-path:ellipse(48% 50% at 50% 50%);border:1px solid rgb(255 255 255/.48);box-shadow:0 24px 55px rgb(0 0 0/.38),inset 0 0 0 8px rgb(255 255 255/.08);transform:translate3d(calc(var(--scene-x)*22px),calc(var(--scene-scroll)*-72px + var(--scene-y)*18px),0);animation:detail-float 6.5s ease-in-out infinite alternate}
.cinematic-photo-detail::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgb(255 255 255/.25),transparent 32%,transparent 68%,color-mix(in srgb,var(--scene-accent) 25%,transparent));mix-blend-mode:screen}
.cinematic-atmosphere,.cinematic-motif{position:absolute;inset:0;z-index:4;pointer-events:none}.cinematic-atmosphere i{position:absolute;display:block;opacity:0}
.cinematic-caption{position:absolute;z-index:8;left:7%;bottom:3%;display:grid;gap:5px;color:#fff;text-shadow:0 3px 24px rgb(0 0 0/.85)}.cinematic-caption strong{font:600 clamp(12px,1vw,15px)/1 var(--sans,system-ui);letter-spacing:.15em;text-transform:uppercase}.cinematic-caption span{font-size:11px;color:rgb(255 255 255/.72)}
.motif-core,.motif-glow,.motif-reflection{position:absolute;display:block}
/* Hostal: sol grande, nubes y reflejo sobre el agua. */
.motif-island .cinematic-motif,.motif-sunset .cinematic-motif,.motif-petals .cinematic-motif{z-index:-1}
.motif-island .motif-core,.motif-sunset .motif-core,.motif-petals .motif-core{width:clamp(150px,17vw,250px);aspect-ratio:1;right:3%;top:-5%;border-radius:50%;background:radial-gradient(circle,#fff 0 3%,#fffbdc 9%,#ffe99a 26%,#ffc65c 48%,rgb(255 153 63/.88) 65%,rgb(255 117 50/.34) 73%,transparent 78%);box-shadow:0 0 55px rgb(255 242 181/.88),0 0 125px rgb(255 178 81/.72),0 0 230px rgb(255 116 46/.42);filter:blur(.65px) saturate(1.04);opacity:.94;animation:sun-rise 8s var(--scene-ease) infinite alternate}
.motif-island .motif-core::before,.motif-sunset .motif-core::before,.motif-petals .motif-core::before{content:"";position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,rgb(255 245 196/.36),transparent 68%);filter:blur(14px)}
.motif-island .motif-reflection,.motif-sunset .motif-reflection{left:43%;right:2%;top:37%;height:45%;background:repeating-linear-gradient(177deg,rgb(255 221 136/.4) 0 2px,transparent 2px 10px);clip-path:polygon(38% 0,62% 0,94% 100%,4% 100%);filter:blur(2px);mix-blend-mode:screen;transform:translateY(calc(var(--scene-scroll)*26px));animation:water-shimmer 3.2s linear infinite}
.motif-island .cinematic-atmosphere i:nth-child(-n+3){opacity:.72;width:38%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#fff 0 22%,rgb(255 255 255/.76) 42%,transparent 72%);filter:blur(8px);animation:cloud-drift 13s linear infinite}.motif-island .cinematic-atmosphere i:nth-child(1){top:8%;left:-8%}.motif-island .cinematic-atmosphere i:nth-child(2){top:20%;left:34%;animation-delay:-5s;transform:scale(.72)}.motif-island .cinematic-atmosphere i:nth-child(3){top:2%;left:62%;animation-delay:-9s;transform:scale(.54)}
/* Motivos por oficio: luz realista, polvo, pétalos, vidrio y escenario. */
.motif-sweep .motif-glow,.motif-headlight .motif-glow,.motif-reflection .motif-glow{inset:4% -18%;background:linear-gradient(105deg,transparent 36%,rgb(255 255 255/.12) 43%,color-mix(in srgb,var(--scene-accent) 48%,white) 49%,rgb(255 255 255/.12) 54%,transparent 63%);mix-blend-mode:screen;filter:blur(5px);animation:light-scan 4.8s var(--scene-ease) infinite}
.motif-glass .motif-glow,.motif-halo .motif-glow,.motif-chandelier .motif-glow{width:72%;height:72%;right:-4%;top:0;border-radius:50%;background:radial-gradient(circle,rgb(255 255 255/.5),color-mix(in srgb,var(--scene-accent) 24%,transparent) 30%,transparent 68%);mix-blend-mode:screen;animation:halo-pulse 5.5s ease-in-out infinite alternate}
.motif-glass .motif-reflection{inset:0;background:repeating-linear-gradient(112deg,transparent 0 46px,rgb(255 255 255/.13) 47px 49px,transparent 50px 92px);mix-blend-mode:screen;transform:translateX(calc(var(--scene-x)*18px))}
.motif-moon .motif-core{width:clamp(100px,13vw,180px);aspect-ratio:1;right:8%;top:0;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff 0 8%,#efe8ce 35%,#b9c8d5 70%,transparent 72%);box-shadow:0 0 60px rgb(198 225 255/.72),0 0 150px rgb(133 180 220/.38);animation:moon-float 9s ease-in-out infinite alternate}.motif-moon .motif-glow{inset:45% -6% 0;background:linear-gradient(180deg,transparent,rgba(214,231,234,.34));filter:blur(22px)}
.motif-dust .cinematic-atmosphere i{opacity:.34;width:clamp(80px,11vw,155px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#dbc39b,transparent 68%);filter:blur(16px);animation:dust-rise 6s ease-in-out infinite}.motif-dust .cinematic-atmosphere i:nth-child(1){left:2%;bottom:4%}.motif-dust .cinematic-atmosphere i:nth-child(2){left:32%;bottom:10%;animation-delay:-2s}.motif-dust .cinematic-atmosphere i:nth-child(3){right:8%;bottom:5%;animation-delay:-4s}
.motif-petals .cinematic-atmosphere i,.motif-spotlights .cinematic-atmosphere i{opacity:.75;width:9px;height:14px;border-radius:80% 20% 70% 30%;background:color-mix(in srgb,var(--scene-accent) 70%,white);animation:petal-fall 7s linear infinite}.motif-petals .cinematic-atmosphere i:nth-child(1),.motif-spotlights .cinematic-atmosphere i:nth-child(1){left:12%;animation-delay:-1s}.motif-petals .cinematic-atmosphere i:nth-child(2),.motif-spotlights .cinematic-atmosphere i:nth-child(2){left:38%;animation-delay:-4s}.motif-petals .cinematic-atmosphere i:nth-child(3),.motif-spotlights .cinematic-atmosphere i:nth-child(3){left:68%;animation-delay:-2s}.motif-petals .cinematic-atmosphere i:nth-child(4),.motif-spotlights .cinematic-atmosphere i:nth-child(4){left:88%;animation-delay:-6s}
.motif-spotlights .motif-glow{inset:-8% 0 0;background:conic-gradient(from 198deg at 30% 0,transparent 0 8deg,rgb(255 221 165/.32) 11deg,transparent 18deg 32deg,rgb(232 181 255/.27) 37deg,transparent 45deg);mix-blend-mode:screen;animation:spotlight-pan 7s ease-in-out infinite alternate}
.signature-story{position:relative;z-index:3;padding:clamp(52px,7vw,104px) var(--gutter);background:linear-gradient(180deg,color-mix(in srgb,var(--night,#101316) 96%,transparent),color-mix(in srgb,var(--night,#101316) 88%,var(--scene-accent)));color:var(--ivory,#f7f3eb);overflow:hidden}.signature-story-head{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:end;gap:32px;margin-bottom:clamp(34px,5vw,68px)}.signature-story-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--scene-accent) 82%,white)}.signature-story-title{font-family:var(--serif,Georgia,serif);font-size:clamp(36px,5vw,78px);line-height:.94;letter-spacing:-.045em;max-width:15ch}.signature-story-intro{justify-self:end;max-width:50ch;color:rgb(255 255 255/.7)}.signature-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgb(255 255 255/.12);border-radius:28px;overflow:hidden}.signature-step{min-height:235px;padding:clamp(24px,3vw,42px);background:rgb(12 15 18/.72);display:flex;flex-direction:column;justify-content:space-between;gap:34px;opacity:.35;transform:translateY(34px);transition:opacity .9s var(--scene-ease),transform .9s var(--scene-ease),background .4s ease}.signature-step.is-visible{opacity:1;transform:none}.signature-step:hover{background:color-mix(in srgb,var(--night,#101316) 78%,var(--scene-accent))}.signature-step-top{display:flex;justify-content:space-between}.signature-step-num{font-family:var(--serif);color:var(--scene-accent)}.signature-step-line{width:42%;height:1px;background:linear-gradient(90deg,var(--scene-accent),transparent);animation:line-breathe 4s ease-in-out infinite}.signature-step h3{font:500 clamp(25px,2vw,36px)/1 var(--serif);margin-bottom:12px}.signature-step p{font-size:14px;color:rgb(255 255 255/.65)}
@keyframes scene-breathe{to{transform:translate3d(calc(var(--scene-x)*-12px),calc(var(--scene-scroll)*-36px + var(--scene-y)*-8px - 7px),0) scale(calc(1.015 + var(--scene-scroll)*.025))}}@keyframes detail-float{to{transform:translate3d(calc(var(--scene-x)*22px),calc(var(--scene-scroll)*-72px + var(--scene-y)*18px - 12px),0) rotate(1.5deg)}}@keyframes sun-rise{to{transform:translate3d(calc(var(--scene-x)*9px),calc(var(--scene-scroll)*68px + 8px),0) scale(1.04)}}@keyframes water-shimmer{50%{opacity:.42;filter:blur(4px)}}@keyframes cloud-drift{from{translate:-20% 0}to{translate:90% 8px}}@keyframes light-scan{0%,20%{transform:translateX(-62%);opacity:0}45%,70%{opacity:1}100%{transform:translateX(62%);opacity:0}}@keyframes halo-pulse{to{transform:scale(1.1) translate(calc(var(--scene-x)*8px),calc(var(--scene-y)*7px));opacity:.72}}@keyframes moon-float{to{transform:translateY(14px) scale(1.03)}}@keyframes dust-rise{0%,100%{transform:translateY(28px) scale(.75);opacity:.12}55%{transform:translateY(-24px) scale(1.2);opacity:.38}}@keyframes petal-fall{from{transform:translateY(-30px) rotate(0);opacity:0}15%{opacity:.8}to{transform:translateY(620px) translateX(70px) rotate(420deg);opacity:0}}@keyframes spotlight-pan{to{transform:translateX(8%) rotate(4deg)}}@keyframes line-breathe{50%{transform:scaleX(.35);opacity:.4}}
@media(max-width:900px){.hero{grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto auto!important;min-height:auto!important}.hero-top{grid-row:1}.hero-body{grid-column:1;grid-row:2;text-align:center!important;justify-items:center!important;max-width:none;padding:clamp(64px,12vh,120px) 0 34px!important}.hero-body .hero-actions{justify-content:center!important}.cinematic-stage{grid-column:1;grid-row:3;width:min(94vw,620px);height:min(72vh,590px);min-height:460px;margin-inline:auto}.moments{grid-column:1;grid-row:4;justify-self:center!important}.hero-note{grid-column:1;grid-row:5;text-align:center!important}.signature-story-head{grid-template-columns:1fr}.signature-story-intro{justify-self:start}.signature-rail{grid-template-columns:1fr}.signature-step{min-height:185px}}
@media(max-width:560px){.cinematic-stage{height:500px;min-height:500px}.cinematic-photo-main{inset:4% -5% 12% -5%}.cinematic-photo-detail{width:42%;height:35%;right:0;bottom:5%}.cinematic-caption{left:5%;bottom:2%}.motif-island .motif-core,.motif-sunset .motif-core,.motif-petals .motif-core{right:0;top:1%}}
/* La presentación solicitada mantiene movimiento incluso cuando el navegador del visor
   reporta reducción de movimiento; se limitan los selectores a esta escena para no
   reactivar animaciones ajenas de forma indiscriminada. */
@media(prefers-reduced-motion:reduce){
  html.motion-full .cinematic-photo-main{animation:scene-breathe 9s ease-in-out infinite alternate!important}
  html.motion-full .cinematic-photo-detail{animation:detail-float 6.5s ease-in-out infinite alternate!important}
  html.motion-full .motif-island .motif-core,html.motion-full .motif-sunset .motif-core,html.motion-full .motif-petals .motif-core{animation:sun-rise 8s var(--scene-ease) infinite alternate!important}
  html.motion-full .motif-island .motif-reflection,html.motion-full .motif-sunset .motif-reflection{animation:water-shimmer 3.2s linear infinite!important}
  html.motion-full .motif-island .cinematic-atmosphere i:nth-child(-n+3){animation:cloud-drift 13s linear infinite!important}
  html.motion-full .motif-sweep .motif-glow,html.motion-full .motif-headlight .motif-glow,html.motion-full .motif-reflection .motif-glow{animation:light-scan 4.8s var(--scene-ease) infinite!important}
  html.motion-full .motif-glass .motif-glow,html.motion-full .motif-halo .motif-glow,html.motion-full .motif-chandelier .motif-glow{animation:halo-pulse 5.5s ease-in-out infinite alternate!important}
  html.motion-full .motif-moon .motif-core{animation:moon-float 9s ease-in-out infinite alternate!important}
  html.motion-full .motif-dust .cinematic-atmosphere i{animation:dust-rise 6s ease-in-out infinite!important}
  html.motion-full .motif-petals .cinematic-atmosphere i,html.motion-full .motif-spotlights .cinematic-atmosphere i{animation:petal-fall 7s linear infinite!important}
  html.motion-full .motif-spotlights .motif-glow{animation:spotlight-pan 7s ease-in-out infinite alternate!important}
  html.motion-full .signature-step-line{animation:line-breathe 4s ease-in-out infinite!important}
}
