/* Portadas del sitio con el hero del kit de seguridad.
   Se carga después de kit.css; solo agrega lo que las portadas necesitan. */
@keyframes nmrGrid{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
@keyframes nmrDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-120px,80px,0) scale(1.15)}66%{transform:translate3d(60px,-60px,0) scale(.95)}}
@keyframes nmrSpin{to{transform:rotate(360deg)}}
@keyframes nmrLensScan{0%,100%{transform:translateY(-70px)}50%{transform:translateY(70px)}}
@keyframes nmrLayer{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.28);opacity:0}}
@keyframes nmrBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.07)}30%{transform:scale(1)}45%{transform:scale(1.05)}}
@keyframes nmrStampIn{0%,100%{transform:scale(1);opacity:.9}8%{transform:scale(1.12);opacity:1}14%{transform:scale(1)}}
@keyframes nmrUp{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}

.hero-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-fx .blob{position:absolute;top:-260px;right:-180px;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.55),transparent 65%);filter:blur(40px);animation:nmrDrift 18s ease-in-out infinite}
.hero-fx .blob.b2{top:auto;right:auto;bottom:-380px;left:-260px;width:700px;height:700px;background:radial-gradient(circle,rgba(91,33,182,.6),transparent 65%);animation-duration:24s;animation-direction:reverse}
.hero-fx .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.4px),radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:24px 24px,72px 72px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 70% 45%,#000 30%,transparent 80%);animation:nmrGrid 12s linear infinite}

.nmr-hero .hero-in{z-index:1;align-items:center}
.nmr-hero .copy{padding-bottom:clamp(48px,8vh,96px)}
.nmr-hero .art{align-self:center;margin:0 0 clamp(24px,5vh,64px);position:relative;top:auto}
.nmr-hero .lead{font-size:clamp(17px,1.25vw,19px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cta a{display:inline-flex;align-items:center;gap:8px;padding:16px 28px;border-radius:999px;font-weight:600;font-size:15.5px;transition:transform .2s cubic-bezier(.23,1,.32,1),background .2s,color .2s}
.hero-cta a:active{transform:scale(.97)}
.hero-cta .pri{background:#fff;color:#6D28D9;box-shadow:0 14px 30px -12px rgba(14,16,35,.55)}
.hero-cta .pri:hover{color:#5B21B6;transform:translateY(-2px)}
.hero-cta .ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.hero-cta .ghost:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)}
.hero-dots{display:flex;gap:8px;margin-top:34px}
.hero-dots{gap:0;margin-left:-10px}
.hero-dots button{box-sizing:content-box;height:6px;min-height:0;border-radius:99px;border:10px solid transparent;background-clip:padding-box;cursor:pointer;padding:0;transition:width .3s cubic-bezier(.23,1,.32,1),background .3s}
.hero-anim{animation:nmrUp .6s cubic-bezier(.23,1,.32,1) both}

/* escritorio: el hero arranca más arriba para que la ilustración entre en pantalla
   (gana al padding que calcula el script del header) */
@media (min-width:1001px){.nmr-hero{padding-top:clamp(120px,17vh,170px)!important}}
@media (max-width:1000px){
  .nmr-hero .art{max-width:560px;margin:0 auto 32px}
  .nmr-hero .copy{padding-bottom:8px}
}
@media (max-width:760px){
  .nmr-hero{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .hero-cta a{flex:1 1 100%;justify-content:center}
  .hero-fx .blob{width:420px;height:420px}
  footer .ft{padding-bottom:env(safe-area-inset-bottom)}
}