/* OPOSIPLUS EXTREME GLOBAL UI · FASE 3 */
:root{
  --opx-x-bg:#020810;
  --opx-x-bg2:#07111f;
  --opx-x-card:rgba(13,22,38,.78);
  --opx-x-card2:rgba(7,13,23,.86);
  --opx-x-gold:#d4a843;
  --opx-x-gold2:#f0c96a;
  --opx-x-text:#edf4ff;
  --opx-x-muted:#b0c2d6;
  --opx-x-line:rgba(212,168,67,.24);
  --opx-x-cyan:rgba(126,184,224,.22);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}

body.opxUnifiedBody,
body.opxPremiumBody,
body{
  background:
    radial-gradient(circle at 18% -5%,rgba(212,168,67,.16),transparent 25%),
    radial-gradient(circle at 88% 8%,rgba(126,184,224,.16),transparent 32%),
    linear-gradient(180deg,#020810 0%,#071324 42%,#020810 100%)!important;
  color:var(--opx-x-text)!important;
  overflow-x:hidden!important;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%,rgba(212,168,67,.13),transparent 18%),
    radial-gradient(circle at 82% 18%,rgba(126,184,224,.12),transparent 22%),
    radial-gradient(circle at 50% 85%,rgba(126,184,224,.07),transparent 22%);
  animation:opxAurora 12s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 72%,transparent 100%);
}

@keyframes opxAurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1);filter:hue-rotate(0deg);}
  100%{transform:translate3d(2%,1.5%,0) scale(1.05);filter:hue-rotate(10deg);}
}

@keyframes opxFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

@keyframes opxShine{
  0%{transform:translateX(-140%) skewX(-16deg);}
  100%{transform:translateX(180%) skewX(-16deg);}
}

@keyframes opxPulseRing{
  0%{box-shadow:0 0 0 0 rgba(212,168,67,.22);}
  100%{box-shadow:0 0 0 28px rgba(212,168,67,0);}
}

.opxUnifiedHeader{
  top:12px!important;
  background:
    linear-gradient(135deg,rgba(7,14,28,.95),rgba(10,24,42,.80)),
    radial-gradient(circle at 8% 0%,rgba(212,168,67,.16),transparent 42%)!important;
  border-color:rgba(126,184,224,.24)!important;
  box-shadow:0 18px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.opxUnifiedHeader::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:translateX(-130%) skewX(-18deg);
  animation:opxShine 7s ease-in-out infinite;
}

.opxUnifiedRegister,
.opxUnifiedLogin,
a[class*="Button"],
button,
main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]){
  position:relative;
  overflow:hidden;
  text-decoration:none!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}

.opxUnifiedRegister::after,
.opxUnifiedLogin::after,
a[class*="Button"]::after,
main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"])::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -60%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);
  opacity:.0;
}

.opxUnifiedRegister:hover::after,
.opxUnifiedLogin:hover::after,
a[class*="Button"]:hover::after,
main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]):hover::after{
  opacity:1;
  animation:opxShine .9s ease;
}

main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(212,168,67,.24);
  color:#050506!important;
  background:linear-gradient(135deg,#f0c96a,#d4a843,#a07b2e);
  font-weight:1000;
  letter-spacing:.02em;
  box-shadow:0 14px 38px rgba(212,168,67,.16);
}

main a[href*="boe.es"],
main a[href*="mailto:"]{
  color:#f0c96a!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(212,168,67,.25)!important;
}

main a[href]:hover,
button:hover{
  transform:translateY(-2px);
}

main > section:first-child,
.hero,
.opxHero,
.opxPremiumHero,
.appHero,
.opxPageHero,
.opxLegalHero{
  padding-top:clamp(150px,14vw,210px)!important;
  overflow:visible!important;
}

h1,h2,h3,
.opxHero h1,
.opxPremiumHero h1,
.appHero h1,
.opxPageHero h1{
  text-wrap:balance;
}

h1,
.opxHero h1,
.opxPremiumHero h1,
.appHero h1,
.opxPageHero h1{
  letter-spacing:-.065em!important;
  line-height:.88!important;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.45));
}

h1 strong,
h2 strong,
.opxGold,
mark{
  color:var(--opx-x-gold)!important;
  background:transparent!important;
}

section[class*="Hero"] img,
.hero img,
.opxHero img,
.opxPremiumHero img,
.appHero img,
img[src*="piki"],
img[src*="pinguino"],
img[src*="pinguina"]{
  animation:opxFloat 5.5s ease-in-out infinite;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.48));
}

article,
.opxCard,
.opxTile,
.opxPremiumCards article,
.appModules article,
.screenGrid figure,
.opxBlogCard,
[class*="card"],
[class*="Card"]{
  position:relative;
  overflow:hidden;
  border-color:rgba(212,168,67,.22)!important;
  background:
    linear-gradient(180deg,rgba(16,27,45,.84),rgba(7,13,23,.78))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.30)!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}

article::before,
.opxCard::before,
.opxTile::before,
.opxPremiumCards article::before,
.appModules article::before,
.opxBlogCard::before,
[class*="card"]::before,
[class*="Card"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 0%,rgba(212,168,67,.12),transparent 28%),
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.04) 48%,transparent 70%);
  opacity:.75;
}

article:hover,
.opxCard:hover,
.opxTile:hover,
.opxPremiumCards article:hover,
.appModules article:hover,
.screenGrid figure:hover,
.opxBlogCard:hover,
[class*="card"]:hover,
[class*="Card"]:hover{
  transform:translateY(-5px);
  border-color:rgba(212,168,67,.42)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.42),0 0 60px rgba(212,168,67,.08)!important;
}

article img,
.opxCard img,
.opxTile img,
.opxPremiumCards article img,
.appModules article img{
  max-width:150px;
  object-fit:contain;
}

.opxHeroPill,
.appEyebrow,
.opxXBadge,
.opxXMini,
.opxPill,
.badge,
[class*="Pill"]{
  border:1px solid rgba(212,168,67,.30)!important;
  background:rgba(212,168,67,.10)!important;
  color:#f0c96a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

footer,
.opxPremiumFooter,
.appFooter,
.opxXFooter{
  border-top:1px solid rgba(212,168,67,.18)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(212,168,67,.08),transparent 28%),
    #020810!important;
}

footer a{
  color:#f0c96a!important;
  text-decoration:none!important;
  font-weight:900;
}

.opxExtremeTicker{
  width:100%;
  overflow:hidden;
  border-block:1px solid rgba(212,168,67,.16);
  background:rgba(212,168,67,.06);
  color:#f0c96a;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.opxExtremeTicker > div{
  display:inline-block;
  padding:12px 0;
  animation:opxTicker 24s linear infinite;
}

@keyframes opxTicker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

@media(max-width:820px){
  main > section:first-child,
  .hero,
  .opxHero,
  .opxPremiumHero,
  .appHero,
  .opxPageHero,
  .opxLegalHero{
    padding-top:118px!important;
  }

  h1,
  .opxHero h1,
  .opxPremiumHero h1,
  .appHero h1,
  .opxPageHero h1{
    font-size:clamp(42px,14vw,76px)!important;
    line-height:.9!important;
  }

  main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]){
    min-height:44px;
    padding:0 14px;
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}



/* FASE 4 · acabado premium adicional */
main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]){
  border-radius:999px!important;
  font-weight:1000!important;
}

main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"])::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent);
  opacity:.45;
}

main p + a,
main article a,
main .tile a,
main .card a{
  margin-top:10px;
}

.opxExtremeReady main section{
  animation:opxSectionIn .7s ease both;
}

@keyframes opxSectionIn{
  from{opacity:.72;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}