.preview-notice{background:#102b42;color:#a9c4d4;padding:10px 5vw;font:11px Arial,sans-serif;letter-spacing:1.3px;display:flex;justify-content:space-between;border-bottom:1px solid #254357}
.topbar{min-height:112px}.brand img{width:255px}
.hero{background:#071d33;isolation:isolate;min-height:730px;display:block;padding:100px 7vw 90px}
.hero::before{z-index:1;opacity:1;background:linear-gradient(90deg,#071d33 0%,rgba(7,29,51,.94) 30%,rgba(7,29,51,.47) 56%,rgba(7,29,51,.08) 100%);mask-image:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#071d33 0%,transparent 20%,transparent 85%,rgba(7,29,51,.35))}
.hero-copy{z-index:2;width:53%;max-width:650px}.hero h1{font-size:clamp(48px,5.1vw,74px)}
.hero .lead{max-width:540px;font-size:18px}.dashboard-background{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.panel{position:absolute;width:540px;box-shadow:0 30px 70px #0005;border-radius:15px;transform:rotate(-10deg) skewY(2deg);opacity:.5}
.p01{top:-95px;left:57%;opacity:.34}.p03{top:216px;left:49%;opacity:.47}.p04{top:426px;left:77%;opacity:.42}
@media(min-width:1600px){.panel{width:660px}.p03{top:190px}.p04{top:415px}}
@media(max-width:850px){.hero{padding:70px 28px 95px;min-height:800px}.hero-copy{width:100%;max-width:590px}.hero::before{background:linear-gradient(180deg,#071d33ed 0%,#071d33dd 57%,#071d3355 100%)}.panel{width:440px}.p01{left:30%;top:0}.p03{left:-18%;top:370px}.p04{left:42%;top:540px}.preview-notice span{display:none}.hero h1{font-size:54px}}

/* Vista dinámica: tres composiciones anónimas, sin mover el contenido. */
.hero::before{background:linear-gradient(90deg,rgba(7,29,51,.38),rgba(7,29,51,.67) 38%,rgba(7,29,51,.22) 72%,rgba(7,29,51,.14))}
.hero::after{background:linear-gradient(0deg,#071d33,transparent 17%,transparent 88%,#071d3377)}
.hero-copy{text-shadow:0 2px 12px #041525,0 0 30px #041525}
.dashboard-background .composition{position:absolute;inset:-24px;opacity:0;animation:dashboard-cycle 30s linear infinite;will-change:opacity,transform}
.dashboard-background .composition:nth-child(2){animation-delay:-20s}
.dashboard-background .composition:nth-child(3){animation-delay:-10s}
.dashboard-background .panel{width:clamp(420px,43vw,720px);opacity:.58;transform:rotate(-10deg);box-shadow:0 20px 65px #0003}
.dashboard-background .panel-left{left:-8%;top:34%;opacity:.42}
.dashboard-background .panel-center{left:29%;top:-17%;opacity:.44}
.dashboard-background .panel-right{left:65%;top:30%;opacity:.6}
@keyframes dashboard-cycle{0%,26%{opacity:1;transform:translate3d(0,0,0)}33.333%,93.333%{opacity:0;transform:translate3d(0,-14px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
.motion-toggle{position:absolute;right:28px;bottom:24px;z-index:3;background:#0a253ed9;border:1px solid #537086;color:#d3e3ef;border-radius:24px;padding:9px 15px;font:12px Arial,sans-serif;cursor:pointer}
.hero.motion-paused .composition{animation-play-state:paused}
@media(max-width:850px){.hero::before{background:linear-gradient(180deg,#071d3377,#071d33aa 42%,#071d3344)}.dashboard-background .panel{width:470px}.dashboard-background .panel-left{left:-48%;top:24%;opacity:.34}.dashboard-background .panel-center{left:20%;top:-9%;opacity:.35}.dashboard-background .panel-right{left:20%;top:64%;opacity:.52}.motion-toggle{bottom:20px;right:22px}}
@media(prefers-reduced-motion:reduce){.dashboard-background .composition{animation:none;opacity:0}.dashboard-background .composition:first-child{opacity:1}.motion-toggle{display:none}}