/* OPOSIPLUS EXTREME LAUNCH SYSTEM · FASE 1 */
:root{
  --opx-black:#03060b;
  --opx-night:#07111f;
  --opx-panel:#0b1524;
  --opx-panel-2:#101c2d;
  --opx-gold:#ffd43b;
  --opx-gold-2:#f5b700;
  --opx-gold-3:#fff2a3;
  --opx-text:#f8fafc;
  --opx-muted:#bfd0e6;
  --opx-line:rgba(255,212,59,.24);
  --opx-glass:rgba(4,9,18,.76);
  --opx-shadow:0 24px 90px rgba(0,0,0,.48);
}

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

body.opxUnifiedBody,
body.opxPremiumBody{
  padding-top:82px!important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,212,59,.14), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(45,92,255,.14), transparent 30%),
    linear-gradient(180deg,#03060b 0%,#07111f 44%,#050910 100%)!important;
  color:var(--opx-text)!important;
}

/* HEADER ÚNICO, FIJO, SIEMPRE VISIBLE */
.opxUnifiedHeader{
  position:fixed!important;
  z-index:99999!important;
  top:12px!important;
  left:max(12px,env(safe-area-inset-left))!important;
  right:max(12px,env(safe-area-inset-right))!important;
  width:auto!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:10px 14px!important;
  border:1px solid rgba(255,212,59,.26)!important;
  border-radius:24px!important;
  background:
    linear-gradient(135deg,rgba(8,13,23,.92),rgba(8,13,23,.72)),
    radial-gradient(circle at 10% 0%,rgba(255,212,59,.16),transparent 38%)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  box-shadow:0 18px 70px rgba(0,0,0,.48)!important;
}

.opxUnifiedBrand{
  min-width:max-content!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  text-decoration:none!important;
}

.opxUnifiedBrand strong{
  color:#fff!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
  font-size:15px!important;
}

.opxUnifiedLogo{
  display:none!important;
}

.opxUnifiedLogoImg{
  width:42px!important;
  height:42px!important;
  border-radius:15px!important;
  object-fit:contain!important;
  background:rgba(255,255,255,.04)!important;
  box-shadow:0 0 0 1px rgba(255,212,59,.22),0 12px 36px rgba(0,0,0,.34)!important;
}

.opxUnifiedNav{
  flex:1!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px!important;
}

.opxUnifiedNav a,
.opxUnifiedMore summary{
  color:rgba(238,246,255,.82)!important;
  text-decoration:none!important;
  font-weight:800!important;
  font-size:13px!important;
  padding:10px 11px!important;
  border-radius:999px!important;
  transition:all .18s ease!important;
}

.opxUnifiedNav a:hover,
.opxUnifiedMore summary:hover{
  color:#050506!important;
  background:linear-gradient(135deg,var(--opx-gold-3),var(--opx-gold),var(--opx-gold-2))!important;
  box-shadow:0 12px 34px rgba(255,212,59,.20)!important;
}

.opxUnifiedActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  min-width:max-content!important;
}

.opxUnifiedActions a,
.opxUnifiedRegister,
.opxUnifiedLogin{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  border-radius:999px!important;
  text-decoration:none!important;
  font-weight:1000!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}

.opxUnifiedRegister{
  padding:0 18px!important;
  color:#050506!important;
  background:linear-gradient(135deg,#fff5b8,var(--opx-gold),#f0a900)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:0 14px 40px rgba(255,212,59,.22)!important;
}

.opxUnifiedLogin{
  padding:0 16px!important;
  color:#f8fafc!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.15)!important;
}

.opxUnifiedActions a:hover{
  transform:translateY(-1px)!important;
}

/* ELIMINAR BOTONES DUPLICADOS QUE SE MUEVEN POR LA PÁGINA */
.opxUnifiedFloating,
.sticky-cta,
.dl-sticky,
.opxStickyCta,
.opxFloatingCta,
.opxReserveSticky,
.opxMobileSticky,
body > a[href="/app/"],
body > a[href="/app/?auth=register"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* MEJORA VISUAL GENERAL SIN ROMPER PÁGINAS */
main,
.opxWrap,
.opxLegalWrap{
  position:relative;
}

.hero,
.opxHero,
.opxPikiHero,
.opxLegalHero,
.opxPageHero,
.opxPremiumHero{
  overflow:hidden!important;
}

.hero::before,
.opxHero::before,
.opxPikiHero::before,
.opxPageHero::before{
  content:""!important;
  position:absolute!important;
  inset:-20%!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,212,59,.16),transparent 28%),
    radial-gradient(circle at 86% 12%,rgba(80,140,255,.14),transparent 32%)!important;
  z-index:0!important;
}

.hero > *,
.opxHero > *,
.opxPikiHero > *,
.opxPageHero > *{
  position:relative!important;
  z-index:1!important;
}

img[src*="piki"],
img[src*="pinguino"],
img[src*="pinguina"],
img[src*="logo-oposiplus"]{
  image-rendering:auto!important;
}

a[href*="/app/"],
button{
  -webkit-tap-highlight-color:transparent!important;
}

/* MÓVIL: SOLO LOGO + DOS BOTONES DE ACCESO */
@media(max-width:820px){
  body.opxUnifiedBody,
  body.opxPremiumBody{
    padding-top:86px!important;
  }

  .opxUnifiedHeader{
    top:8px!important;
    left:8px!important;
    right:8px!important;
    min-height:60px!important;
    padding:8px!important;
    gap:8px!important;
    border-radius:20px!important;
  }

  .opxUnifiedBrand strong{
    display:none!important;
  }

  .opxUnifiedLogoImg{
    width:40px!important;
    height:40px!important;
    border-radius:14px!important;
  }

  .opxUnifiedNav,
  .opxUnifiedMore,
  .opxDrawer,
  .opxDrawerOverlay{
    display:none!important;
  }

  .opxUnifiedActions{
    flex:1!important;
    display:grid!important;
    grid-template-columns:1.1fr .9fr!important;
    gap:7px!important;
    min-width:0!important;
  }

  .opxUnifiedActions a,
  .opxUnifiedRegister,
  .opxUnifiedLogin{
    width:100%!important;
    min-height:42px!important;
    padding:0 8px!important;
    font-size:12px!important;
    letter-spacing:-.01em!important;
  }

  .opxUnifiedRegister{
    box-shadow:0 10px 28px rgba(255,212,59,.20)!important;
  }
}

@media(max-width:380px){
  .opxUnifiedActions a,
  .opxUnifiedRegister,
  .opxUnifiedLogin{
    font-size:11px!important;
  }
}



/* FASE 1.5 · Solo el header puede mostrar los botones de acceso */
body:not(.opxAllowInlineAuth) main a[href="/app/"],
body:not(.opxAllowInlineAuth) main a[href="/app/?auth=register"],
body:not(.opxAllowInlineAuth) aside a[href="/app/"],
body:not(.opxAllowInlineAuth) aside a[href="/app/?auth=register"],
body:not(.opxAllowInlineAuth) footer a[href="/app/"],
body:not(.opxAllowInlineAuth) footer a[href="/app/?auth=register"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.opxUnifiedHeader a[href="/app/"],
.opxUnifiedHeader a[href="/app/?auth=register"]{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

main .opxCTA:empty,
main .opxHeroButtons:empty,
main .opxHeroActions:empty,
main .opxProductActions:empty{
  display:none!important;
}