/* OPOSIPLUS APP PAGE PRO · solo /app-policia-nacional/ */
.opxAppProBody{
  background:
    radial-gradient(circle at 20% 0%,rgba(255,212,59,.14),transparent 26%),
    radial-gradient(circle at 84% 10%,rgba(20,80,180,.18),transparent 34%),
    linear-gradient(180deg,#03060b,#06101e 44%,#03060b)!important;
}

.opxAppProBody main{
  overflow:hidden;
}

.appHero{
  min-height:calc(100vh - 90px);
  padding:clamp(84px,10vw,132px) max(22px,5vw) 70px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(360px,1fr);
  align-items:center;
  gap:clamp(34px,5vw,80px);
  position:relative;
}

.appHero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,212,59,.16),transparent 28%),
    radial-gradient(circle at 72% 20%,rgba(39,122,255,.12),transparent 32%);
  pointer-events:none;
}

.appHeroCopy,
.appHeroVisual{
  position:relative;
  z-index:1;
}

.appEyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(255,212,59,.28);
  color:#ffe680;
  background:rgba(255,212,59,.08);
  font-weight:1000;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.appHero h1{
  margin:18px 0 22px;
  max-width:900px;
  color:#fff;
  font-size:clamp(44px,7vw,94px);
  line-height:.9;
  letter-spacing:-.07em;
}

.appHero p{
  max-width:720px;
  color:#c7d3e5;
  font-size:clamp(18px,2vw,24px);
  line-height:1.55;
}

.appTrust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.appTrust span{
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#edf6ff;
  font-weight:900;
}

.appHeroVisual{
  min-height:620px;
  display:grid;
  place-items:center;
}

.appGlow{
  position:absolute;
  width:min(560px,86vw);
  aspect-ratio:1;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,212,59,.22),transparent 58%),
    radial-gradient(circle at 50% 70%,rgba(0,190,120,.16),transparent 60%);
  filter:blur(2px);
}

.phone{
  position:absolute;
  margin:0;
  width:190px;
  aspect-ratio:500/919;
  border-radius:30px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 95px rgba(0,0,0,.50);
}

.phone img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.phoneMain{
  width:245px;
  z-index:4;
  transform:translateY(34px);
}

.phoneLeft{
  z-index:2;
  transform:translate(-210px,54px) rotate(-10deg);
}

.phoneRight{
  z-index:2;
  transform:translate(210px,54px) rotate(10deg);
}

.appMascotMain{
  position:absolute;
  z-index:5;
  width:min(180px,26vw);
  right:2%;
  bottom:24px;
  object-fit:contain;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.50));
}

.appIntro{
  padding:50px max(22px,5vw) 24px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  align-items:end;
}

.appIntro h2,
.screenText h2,
.appFinal h2{
  margin:16px 0 12px;
  color:#fff;
  font-size:clamp(34px,5vw,72px);
  line-height:.95;
  letter-spacing:-.055em;
}

.appIntro p,
.screenText p,
.appFinal p{
  color:#c2cee0;
  font-size:18px;
  line-height:1.65;
}

.appModules{
  padding:36px max(22px,5vw) 90px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.appModules article{
  min-height:250px;
  border:1px solid rgba(255,212,59,.22);
  border-radius:30px;
  padding:24px;
  background:linear-gradient(180deg,rgba(13,24,42,.84),rgba(7,13,23,.78));
  box-shadow:0 24px 80px rgba(0,0,0,.30);
  position:relative;
  overflow:hidden;
}

.appModules article::after{
  content:"";
  position:absolute;
  inset:auto -20% -50% -20%;
  height:130px;
  background:radial-gradient(circle,rgba(255,212,59,.10),transparent 60%);
}

.appModules img{
  width:112px;
  height:112px;
  object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.45));
}

.appModules h3{
  color:#fff;
  font-size:25px;
  margin:14px 0 8px;
}

.appModules p{
  color:#b9c8dc;
  line-height:1.55;
}

.screenStory{
  padding:90px max(22px,5vw);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:40px;
  border-block:1px solid rgba(255,212,59,.13);
  background:linear-gradient(180deg,rgba(255,212,59,.05),rgba(255,255,255,.02));
}

.screenStory figure{
  margin:0;
  justify-self:center;
  width:min(310px,78vw);
  border-radius:38px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 100px rgba(0,0,0,.46);
}

.screenStory img{
  width:100%;
  display:block;
}

.screenGrid{
  padding:80px max(22px,5vw);
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.screenGrid figure{
  flex:0 0 min(250px,72vw);
  margin:0;
  scroll-snap-align:center;
  border-radius:34px;
  overflow:hidden;
  background:#0a1220;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}

.screenGrid img{
  width:100%;
  display:block;
}

.screenGrid figcaption{
  color:#fff;
  font-weight:1000;
  padding:13px 16px;
  background:rgba(0,0,0,.24);
}

.appFinal{
  padding:90px max(22px,5vw);
  display:grid;
  grid-template-columns:.42fr 1fr;
  gap:34px;
  align-items:center;
}

.appFinal > img{
  width:min(330px,78vw);
  justify-self:center;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.52));
}

.appFinalLinks{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.appFinalLinks a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  color:#050506;
  background:linear-gradient(135deg,#fff5b8,#ffd43b,#f0a800);
  font-weight:1000;
  box-shadow:0 14px 38px rgba(255,212,59,.18);
}

.appFooter{
  padding:42px max(22px,5vw);
  border-top:1px solid rgba(255,212,59,.18);
  display:flex;
  justify-content:space-between;
  gap:24px;
  background:#03060b;
}

.appFooter strong{
  color:#fff;
  font-size:20px;
}

.appFooter p{
  max-width:720px;
  color:#b9c8dc;
  line-height:1.55;
}

.appFooter nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-content:flex-start;
}

.appFooter a{
  color:#f4df77;
  text-decoration:none;
  font-weight:900;
}

@media(max-width:1050px){
  .appHero,
  .appIntro,
  .screenStory,
  .appFinal{
    grid-template-columns:1fr;
  }

  .appModules{
    grid-template-columns:repeat(2,1fr);
  }

  .appFooter{
    flex-direction:column;
  }

  .appFooter nav{
    justify-content:flex-start;
  }
}

@media(max-width:720px){
  .appHero{
    padding-inline:18px;
    min-height:auto;
  }

  .appHero h1{
    font-size:clamp(42px,14vw,74px);
  }

  .appHeroVisual{
    min-height:455px;
  }

  .phone{
    width:132px;
    border-radius:23px;
  }

  .phoneMain{
    width:165px;
    transform:translateY(64px);
  }

  .phoneLeft{
    transform:translate(-114px,62px) rotate(-9deg);
  }

  .phoneRight{
    transform:translate(114px,62px) rotate(9deg);
  }

  .appMascotMain{
    width:118px;
    right:-6px;
    bottom:4px;
  }

  .appIntro,
  .appModules,
  .screenStory,
  .screenGrid,
  .appFinal{
    padding-inline:18px;
  }

  .appModules{
    grid-template-columns:1fr;
  }
}