/* =========================================================
   OPOSIPLUS · PRODUCT PAGES PREMIUM
   ========================================================= */

.opxProductPage{
  background:
    radial-gradient(circle at 78% 8%, rgba(212,168,67,.16), transparent 25%),
    radial-gradient(circle at 12% 35%, rgba(126,184,224,.13), transparent 30%),
    linear-gradient(180deg,#020810 0%,#071324 52%,#030B17 100%) !important;
  color:#edf4ff !important;
}

.opxProductMain{
  position:relative;
  z-index:1;
  overflow:hidden;
}

.opxProductHero,
.opxProductSplit,
.opxProductSection,
.opxFinalPremiumCta{
  max-width:1220px;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}

.opxProductHero{
  min-height:calc(100vh - 78px);
  padding-top:54px;
  padding-bottom:70px;
  display:grid;
  grid-template-columns:minmax(350px,.9fr) minmax(520px,1.1fr);
  gap:38px;
  align-items:center;
}

.opxProductKicker{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:10px 15px;
  border-radius:999px;
  color:#f5c518;
  background:rgba(212,168,67,.10);
  border:1px solid rgba(212,168,67,.30);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:12px;
}

.opxProductHero h1,
.opxProductSection h2,
.opxFinalPremiumCta h2{
  margin:18px 0 14px;
  font-size:clamp(46px,7vw,104px);
  line-height:.88;
  letter-spacing:-2.8px;
  text-transform:uppercase;
  font-weight:1000;
}

.opxProductHero h1 span,
.opxProductSection h2 span{
  color:#f5c518;
}

.opxProductLead{
  max-width:760px;
  color:#b0c2d6;
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.55;
}

.opxProductActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.opxProductBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:1px;
  white-space:nowrap;
}

.opxProductBtn.gold{
  background:linear-gradient(135deg,#d4a843 0%,#f0c96a 52%,#d4a843 100%);
  color:#020810;
  box-shadow:0 14px 48px rgba(212,168,67,.20);
}

.opxProductBtn.dark{
  background:rgba(126,184,224,.08);
  color:#edf4ff;
  border:1px solid rgba(126,184,224,.18);
}

.opxProductBtn.ghost{
  background:transparent;
  color:#f5c518;
  border:1px solid rgba(212,168,67,.34);
}

.opxTrustRow{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.opxTrustRow span{
  padding:9px 12px;
  border-radius:999px;
  color:#b0c2d6;
  background:rgba(126,184,224,.055);
  border:1px solid rgba(126,184,224,.10);
  font-size:13px;
  font-weight:800;
}

/* Capturas como móviles en círculo */
.opxAppGalaxy{
  position:relative;
  min-height:720px;
  display:grid;
  place-items:center;
}

.opxAppGalaxy::before{
  content:"";
  position:absolute;
  width:min(92vw,620px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(245,197,24,.15), transparent 58%),
    conic-gradient(from 25deg, rgba(212,168,67,.58), rgba(126,184,224,.45), rgba(212,168,67,.58));
  opacity:.95;
  filter:drop-shadow(0 0 60px rgba(245,197,24,.14));
}

.opxAppGalaxy::after{
  content:"";
  position:absolute;
  width:min(82vw,530px);
  aspect-ratio:1;
  border-radius:50%;
  background:#071324;
  border:1px solid rgba(126,184,224,.22);
}

.opxPhoneBubble{
  position:absolute;
  z-index:3;
  margin:0;
  padding:11px;
  border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  border:1px solid rgba(245,197,24,.24);
  box-shadow:0 26px 90px rgba(0,0,0,.52);
}

.opxPhoneBubble img{
  display:block;
  width:100%;
  border-radius:26px;
  background:#071324;
}

.opxPhoneBubble figcaption{
  margin-top:8px;
  text-align:center;
  color:#f5c518;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:12px;
  font-weight:1000;
}

.opxPhoneCenter{width:250px;z-index:5;}
.opxPhoneA{width:160px;left:4%;top:7%;transform:rotate(-7deg);}
.opxPhoneB{width:166px;right:4%;top:8%;transform:rotate(8deg);}
.opxPhoneC{width:168px;left:-1%;bottom:12%;transform:rotate(7deg);}
.opxPhoneD{width:170px;right:0;bottom:12%;transform:rotate(-7deg);}
.opxPhoneE{width:150px;right:-2%;top:42%;transform:rotate(3deg);}

.opxProductSection{
  padding-top:72px;
  padding-bottom:72px;
}

.opxSectionIntro{
  max-width:820px;
  margin:0 auto 32px;
  text-align:center;
}

.opxSectionIntro p{
  color:#b0c2d6;
  font-size:18px;
  line-height:1.6;
}

.opxFeatureGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.opxPremiumFeature{
  position:relative;
  overflow:hidden;
  padding:24px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 70px rgba(0,0,0,.24);
}

.opxPremiumFeature.gold{
  border-color:rgba(245,197,24,.35);
}

.opxPremiumFeature.green{
  border-color:rgba(126,184,224,.28);
}

.opxPremiumFeature img.piki{
  position:absolute;
  right:10px;
  bottom:-10px;
  width:110px;
  max-height:130px;
  object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

.opxPremiumFeature h3{
  margin:0 0 10px;
  color:#f5c518;
  font-size:24px;
}

.opxPremiumFeature p,
.opxPremiumFeature li{
  color:rgba(255,255,255,.72);
  line-height:1.55;
}

.opxPremiumFeature ul{
  padding-left:18px;
  margin-bottom:0;
}

.opxScreenStory{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:center;
  margin:52px 0;
}

.opxScreenStory.reverse .opxScreenText{
  order:2;
}

.opxScreenText h3{
  margin:0 0 12px;
  color:#f5c518;
  font-size:clamp(30px,4vw,54px);
  text-transform:uppercase;
  line-height:.95;
}

.opxScreenText p{
  color:rgba(255,255,255,.72);
  font-size:17px;
  line-height:1.6;
}

.opxScreenText strong{
  color:#fff;
}

.opxScreenCircle{
  position:relative;
  width:min(100%,430px);
  aspect-ratio:1;
  margin:auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle,rgba(245,197,24,.14),transparent 60%),
    conic-gradient(from 10deg,rgba(212,168,67,.35),rgba(126,184,224,.25),rgba(212,168,67,.35));
  border:1px solid rgba(245,197,24,.22);
}

.opxScreenCircle::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:rgba(7,19,36,.88);
  border:1px solid rgba(255,255,255,.08);
}

.opxScreenCircle img{
  position:relative;
  z-index:2;
  max-height:78%;
  max-width:58%;
  border-radius:30px;
  padding:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(245,197,24,.22);
  box-shadow:0 26px 80px rgba(0,0,0,.52);
}

.opxPikiCloud{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.opxPikiCard{
  min-height:210px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
}

.opxPikiCard img{
  height:98px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.45));
}

.opxPikiCard h3{
  color:#f5c518;
  margin:10px 0 6px;
}

.opxPikiCard p{
  color:rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.4;
}

.opxSourceBox{
  padding:20px;
  border-radius:26px;
  background:rgba(126,184,224,.07);
  border:1px solid rgba(126,184,224,.22);
  color:rgba(255,255,255,.76);
  line-height:1.6;
}

.opxSourceBox a{
  color:#7eb8e0;
  font-weight:900;
}

.opxFinalPremiumCta{
  margin-top:40px;
  margin-bottom:90px;
  padding-top:44px;
  padding-bottom:44px;
  text-align:center;
  border-radius:34px;
  background:linear-gradient(135deg,rgba(212,168,67,.14),rgba(126,184,224,.08));
  border:1px solid rgba(245,197,24,.22);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}

.opxArticleGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.opxArticleCard{
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}

.opxArticleCard h3{
  color:#f5c518;
  margin-top:0;
}

.opxArticleCard p{
  color:rgba(255,255,255,.72);
  line-height:1.55;
}

@media(max-width:1080px){
  .opxProductHero,
  .opxScreenStory{
    grid-template-columns:1fr;
  }

  .opxAppGalaxy{
    min-height:650px;
  }

  .opxFeatureGrid,
  .opxArticleGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .opxPikiCloud{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .opxScreenStory.reverse .opxScreenText{
    order:0;
  }
}

@media(max-width:680px){
  .opxProductHero,
  .opxProductSection,
  .opxFinalPremiumCta{
    padding-left:16px;
    padding-right:16px;
  }

  .opxProductHero h1,
  .opxProductSection h2,
  .opxFinalPremiumCta h2{
    letter-spacing:-1.5px;
  }

  .opxProductActions .opxProductBtn{
    width:100%;
  }

  .opxAppGalaxy{
    min-height:540px;
    overflow:hidden;
  }

  .opxPhoneCenter{width:195px;}
  .opxPhoneA,.opxPhoneB,.opxPhoneC,.opxPhoneD,.opxPhoneE{width:112px;}
  .opxPhoneA{left:0;top:8%;}
  .opxPhoneB{right:0;top:8%;}
  .opxPhoneC{left:0;bottom:10%;}
  .opxPhoneD{right:0;bottom:10%;}
  .opxPhoneE{right:1%;top:43%;}

  .opxFeatureGrid,
  .opxArticleGrid,
  .opxPikiCloud{
    grid-template-columns:1fr;
  }

  .opxScreenCircle{
    width:min(100%,330px);
  }

  .opxScreenCircle img{
    max-width:64%;
  }
}