/* OPOSIPLUS FASE 7 · MOBILE FINAL */

/* Desktop: el botón hamburguesa no existe visualmente */
.opxMobileMenuToggle{
  display:none;
}

/* Pulido general */
button,
a{
  -webkit-tap-highlight-color: transparent;
}

main a,
button{
  touch-action: manipulation;
}

/* MOBILE */
@media(max-width: 860px){

  html{
    scroll-padding-top: 92px!important;
  }

  body.opxUnifiedBody,
  body.opxPremiumBody{
    padding-top: 74px!important;
  }

  /* Header móvil limpio */
  .opxUnifiedHeader{
    top:8px!important;
    left:10px!important;
    right:10px!important;
    min-height:58px!important;
    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:center!important;
    gap:10px!important;
    border-radius:22px!important;
    overflow:visible!important;
  }

  .opxUnifiedBrand{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .opxUnifiedBrand strong{
    font-size:13px!important;
    letter-spacing:.16em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .opxUnifiedLogoImg{
    width:38px!important;
    height:38px!important;
    flex:0 0 auto!important;
  }

  .opxMobileMenuToggle{
    display:inline-flex!important;
    width:46px!important;
    height:46px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:5px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,212,59,.32)!important;
    background:rgba(255,255,255,.06)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
    cursor:pointer!important;
    z-index:100004!important;
  }

  .opxMobileMenuToggle span{
    width:20px!important;
    height:2px!important;
    border-radius:999px!important;
    background:#ffd43b!important;
    display:block!important;
    transition:transform .18s ease, opacity .18s ease!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(1){
    transform:translateY(7px) rotate(45deg)!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(2){
    opacity:0!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)!important;
  }

  /* El menú de escritorio se convierte en panel móvil */
  .opxUnifiedNav,
  .opxUnifiedActions{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    z-index:100002!important;
    opacity:0!important;
    transform:translateY(-10px) scale(.98)!important;
    pointer-events:none!important;
    visibility:hidden!important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease!important;
  }

  body.opxMobileMenuOpen .opxUnifiedNav,
  body.opxMobileMenuOpen .opxUnifiedActions{
    opacity:1!important;
    transform:translateY(0) scale(1)!important;
    pointer-events:auto!important;
    visibility:visible!important;
  }

  .opxUnifiedActions{
    top:78px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:12px!important;
    border:1px solid rgba(255,212,59,.22)!important;
    border-radius:22px 22px 0 0!important;
    background:
      radial-gradient(circle at 20% 0%,rgba(255,212,59,.14),transparent 36%),
      rgba(5,10,18,.98)!important;
    box-shadow:0 22px 70px rgba(0,0,0,.55)!important;
  }

  .opxUnifiedRegister,
  .opxUnifiedLogin{
    width:100%!important;
    min-height:46px!important;
    padding:0 10px!important;
    margin:0!important;
    font-size:12px!important;
    letter-spacing:.04em!important;
    white-space:nowrap!important;
    border-radius:999px!important;
  }

  .opxUnifiedNav{
    top:150px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    padding:12px!important;
    max-height:calc(100vh - 166px)!important;
    overflow:auto!important;
    border:1px solid rgba(255,212,59,.22)!important;
    border-top:0!important;
    border-radius:0 0 22px 22px!important;
    background:
      linear-gradient(180deg,rgba(7,14,25,.98),rgba(3,7,13,.98))!important;
    box-shadow:0 30px 90px rgba(0,0,0,.60)!important;
  }

  .opxUnifiedNav a,
  .opxUnifiedMore summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    box-sizing:border-box!important;
    min-height:46px!important;
    padding:0 14px!important;
    margin:0!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    background:rgba(255,255,255,.045)!important;
    color:#eef5ff!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:1000!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .opxUnifiedMore{
    width:100%!important;
  }

  .opxUnifiedMore summary{
    list-style:none!important;
    cursor:pointer!important;
  }

  .opxUnifiedMore summary::-webkit-details-marker{
    display:none!important;
  }

  .opxUnifiedMore div{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:8px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body.opxMobileMenuOpen::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:100000!important;
    background:rgba(0,0,0,.46)!important;
    backdrop-filter:blur(4px)!important;
  }

  body.opxMobileMenuOpen{
    overflow:hidden!important;
  }

  /* Tipografía móvil con aire */
  body{
    font-size:16px!important;
    line-height:1.62!important;
  }

  p,
  li,
  textarea,
  input{
    line-height:1.62!important;
  }

  .moatHero h1,
  .appHero h1,
  h1{
    font-size:clamp(36px,10.8vw,58px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    max-width:100%!important;
  }

  h2,
  .moatHead h2,
  .pikiSquad h2,
  .finalMoat h2,
  .appIntro h2,
  .screenText h2,
  .appFinal h2{
    font-size:clamp(28px,8.2vw,46px)!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
  }

  h3{
    line-height:1.12!important;
  }

  .moatHero p,
  .appHero p,
  .moatHead p,
  .pikiSquad p,
  .finalMoat p,
  .appIntro p,
  .screenText p,
  .appFinal p{
    font-size:16.5px!important;
    line-height:1.68!important;
  }

  /* Home móvil */
  .moatHero{
    min-height:auto!important;
    grid-template-columns:1fr!important;
    padding:96px 18px 52px!important;
    gap:24px!important;
  }

  .moatHeroTrust{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .moatHeroTrust span{
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:12px!important;
    padding:8px!important;
  }

  .moatHeroDemo,
  .pikiAsk,
  .diagnosticCard{
    border-radius:26px!important;
    padding:18px!important;
  }

  .demoTop,
  .widgetHead{
    align-items:flex-start!important;
    gap:10px!important;
  }

  .demoTop img,
  .widgetHead img{
    width:54px!important;
    height:54px!important;
    flex:0 0 auto!important;
  }

  .widgetHead h2,
  .demoTop b{
    font-size:clamp(24px,7vw,34px)!important;
    line-height:1.05!important;
  }

  .pikiAsk textarea{
    min-height:110px!important;
    font-size:16px!important;
  }

  .pikiAnswer,
  .quizFeedback,
  .diagBox{
    font-size:15.5px!important;
    line-height:1.62!important;
    border-radius:20px!important;
  }

  .moatWidgets{
    grid-template-columns:1fr!important;
    padding:52px 18px!important;
    gap:18px!important;
  }

  .diagActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .diagActions button,
  .diagActions a,
  #pikiAskButton,
  #diagNext{
    width:100%!important;
    min-height:48px!important;
    margin:0!important;
    font-size:13px!important;
  }

  .answers button{
    min-height:48px!important;
    font-size:14px!important;
  }

  .moatSection,
  .pikiSquad,
  .comparison,
  .freeTools,
  .finalMoat{
    padding:58px 18px!important;
  }

  .moatCards,
  .compareGrid,
  .toolGrid{
    grid-template-columns:1fr!important;
  }

  .pikiSquad{
    grid-template-columns:1fr!important;
  }

  .pikiSquadGrid{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .pikiSquadGrid article{
    padding:12px!important;
    border-radius:22px!important;
  }

  .pikiSquadGrid img{
    height:82px!important;
  }

  .finalMoat{
    grid-template-columns:1fr!important;
    text-align:left!important;
  }

  .finalMoat img{
    max-width:190px!important;
  }

  .finalLinks{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .finalLinks a,
  .toolGrid a,
  main article a,
  main .card a,
  main [class*="Card"] a,
  main a.opxGuideButton{
    width:100%!important;
    box-sizing:border-box!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    margin:0!important;
  }

  /* Páginas internas móvil */
  body:not(.opxMoatBody) main > section:first-child,
  body:not(.opxMoatBody) .hero,
  body:not(.opxMoatBody) .opxHero,
  body:not(.opxMoatBody) .opxPremiumHero,
  body:not(.opxMoatBody) .opxPageHero,
  body:not(.opxMoatBody) .opxLegalHero,
  body:not(.opxMoatBody) .appHero{
    padding:92px 18px 46px!important;
    gap:20px!important;
  }

  body:not(.opxMoatBody) main > section:first-child img[src*="piki"],
  body:not(.opxMoatBody) main > section:first-child img[src*="pinguino"],
  body:not(.opxMoatBody) main > section:first-child img[src*="pinguina"]{
    max-width:150px!important;
    max-height:170px!important;
    justify-self:center!important;
    margin:0 auto 8px!important;
  }

  .appHeroVisual{
    min-height:360px!important;
  }

  .phoneMain{
    width:150px!important;
  }

  .phoneLeft,
  .phoneRight{
    width:118px!important;
  }

  .appMascotMain{
    width:92px!important;
  }

  .screenGrid{
    padding:52px 18px!important;
  }

  .screenGrid figure{
    flex-basis:76vw!important;
  }

  footer,
  .appFooter,
  .moatFooter{
    padding:34px 18px!important;
  }

  footer nav,
  .appFooter nav,
  .moatFooter nav{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    justify-content:stretch!important;
  }

  footer nav a,
  .appFooter nav a,
  .moatFooter nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,212,59,.16)!important;
    text-align:center!important;
  }
}

/* Móvil muy pequeño */
@media(max-width: 420px){
  .opxUnifiedRegister,
  .opxUnifiedLogin{
    font-size:11px!important;
    padding-inline:8px!important;
  }

  .moatHeroTrust{
    grid-template-columns:1fr!important;
  }

  .pikiSquadGrid{
    grid-template-columns:1fr!important;
  }

  h1,
  .moatHero h1,
  .appHero h1{
    font-size:clamp(34px,12vw,50px)!important;
  }
}

/* FASE 7.3 · FIX REAL MENU MÓVIL + BOTONES */

/* Botones genéricos que se habían quedado sin maquetar */
main a:not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([class]),
main button:not([class]),
main input[type="submit"],
main input[type="button"],
main .btn,
main .button,
main [role="button"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:46px!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,212,59,.30)!important;
  background:linear-gradient(135deg,#ffd43b,#ffb703)!important;
  color:#07101d!important;
  font-weight:1000!important;
  text-decoration:none!important;
  box-shadow:0 14px 35px rgba(255,183,3,.18)!important;
  cursor:pointer!important;
}

main a:not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([class]):hover,
main button:not([class]):hover,
main .btn:hover,
main .button:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.03)!important;
}

/* El header debe estar por encima de cualquier capa */
.opxUnifiedHeader{
  z-index:2147483000!important;
}

/* Móvil: menú sólido, visible, sin blur encima */
@media(max-width: 860px){

  body.opxMobileMenuOpen::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:2147482000!important;
    background:rgba(0,0,0,.72)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:auto!important;
  }

  .opxUnifiedHeader{
    z-index:2147483000!important;
    overflow:visible!important;
    isolation:isolate!important;
    background:
      radial-gradient(circle at 10% 0%, rgba(255,212,59,.16), transparent 34%),
      linear-gradient(180deg, rgba(7,13,23,1), rgba(3,7,13,1))!important;
    border:1px solid rgba(255,212,59,.26)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.62)!important;
  }

  .opxMobileMenuToggle{
    position:relative!important;
    z-index:2147483640!important;
    background:rgba(255,212,59,.12)!important;
    border-color:rgba(255,212,59,.55)!important;
  }

  .opxUnifiedActions,
  .opxUnifiedNav{
    z-index:2147483500!important;
    color:#f4f8ff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.opxMobileMenuOpen .opxUnifiedActions,
  body.opxMobileMenuOpen .opxUnifiedNav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  .opxUnifiedActions{
    position:fixed!important;
    top:82px!important;
    left:12px!important;
    right:12px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:24px 24px 0 0!important;
    border:1px solid rgba(255,212,59,.30)!important;
    border-bottom:0!important;
    background:#050a12!important;
    box-shadow:0 24px 75px rgba(0,0,0,.72)!important;
  }

  .opxUnifiedNav{
    position:fixed!important;
    top:154px!important;
    left:12px!important;
    right:12px!important;
    bottom:18px!important;
    max-height:none!important;
    overflow:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    padding:12px!important;
    border-radius:0 0 24px 24px!important;
    border:1px solid rgba(255,212,59,.30)!important;
    border-top:0!important;
    background:#050a12!important;
    box-shadow:0 30px 85px rgba(0,0,0,.76)!important;
  }

  .opxUnifiedRegister,
  .opxUnifiedLogin{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:48px!important;
    width:100%!important;
    max-width:none!important;
    opacity:1!important;
    visibility:visible!important;
    color:#07101d!important;
    background:linear-gradient(135deg,#ffd43b,#ffb703)!important;
    border:1px solid rgba(255,212,59,.55)!important;
    box-shadow:0 12px 28px rgba(255,183,3,.20)!important;
    border-radius:999px!important;
    font-size:12px!important;
    font-weight:1000!important;
    text-align:center!important;
    text-decoration:none!important;
  }

  .opxUnifiedLogin{
    color:#f7fbff!important;
    background:rgba(255,255,255,.075)!important;
    border-color:rgba(255,255,255,.18)!important;
    box-shadow:none!important;
  }

  .opxUnifiedNav a,
  .opxUnifiedMore summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:48px!important;
    width:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#f4f8ff!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    box-shadow:none!important;
    text-shadow:none!important;
  }

  .opxUnifiedNav a:active,
  .opxUnifiedNav a:hover,
  .opxUnifiedMore summary:hover{
    background:rgba(255,212,59,.13)!important;
    border-color:rgba(255,212,59,.28)!important;
  }

  .opxUnifiedMore[open] summary{
    color:#ffd43b!important;
    background:rgba(255,212,59,.12)!important;
  }

  .opxUnifiedMore div{
    display:grid!important;
    gap:8px!important;
    padding:8px 0 0!important;
  }

  /* Los botones del contenido en móvil, ancho completo y sin apelotonar */
  main a:not(.opxUnifiedRegister):not(.opxUnifiedLogin),
  main button,
  main input[type="submit"],
  main input[type="button"]{
    max-width:100%!important;
    white-space:normal!important;
    text-align:center!important;
  }

  .finalLinks,
  .diagActions,
  .heroActions,
  .ctaActions,
  .actions,
  .buttons,
  .appHeroActions,
  .opxHeroActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:stretch!important;
  }

  .finalLinks a,
  .diagActions a,
  .diagActions button,
  .heroActions a,
  .ctaActions a,
  .actions a,
  .buttons a,
  .appHeroActions a,
  .opxHeroActions a{
    width:100%!important;
    box-sizing:border-box!important;
    min-height:48px!important;
  }

  /* Más aire para textos compactos */
  .moatHero p,
  .moatCard p,
  .toolGrid p,
  .compareGrid p,
  .pikiAsk p,
  .diagnosticCard p,
  main p{
    line-height:1.68!important;
  }
}

@media(max-width:420px){
  .opxUnifiedActions{
    grid-template-columns:1fr!important;
    top:78px!important;
  }

  .opxUnifiedNav{
    top:190px!important;
  }

  .opxUnifiedRegister,
  .opxUnifiedLogin{
    font-size:12px!important;
    min-height:48px!important;
  }
}


/* FASE 7.4 · MENÚ MÓVIL COMPLETO: AUTH + TODAS LAS PESTAÑAS */

.opxMobilePanel{
  display:none;
}

@media(max-width:860px){

  /* En móvil usamos panel propio. Ocultamos nav/actions originales para que no compitan */
  .opxUnifiedHeader > .opxUnifiedNav,
  .opxUnifiedHeader > .opxUnifiedActions{
    display:none!important;
  }

  .opxMobilePanel{
    position:fixed!important;
    top:78px!important;
    left:12px!important;
    right:12px!important;
    bottom:18px!important;
    z-index:2147483500!important;
    display:grid!important;
    grid-template-rows:auto 1fr!important;
    gap:12px!important;
    padding:12px!important;
    border-radius:26px!important;
    border:1px solid rgba(255,212,59,.34)!important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255,212,59,.14), transparent 34%),
      linear-gradient(180deg,#07101d,#03070d)!important;
    box-shadow:0 32px 90px rgba(0,0,0,.78)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease!important;
    overflow:hidden!important;
  }

  body.opxMobileMenuOpen .opxMobilePanel{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  .opxMobilePanelAuth{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding-bottom:12px!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
  }

  .opxMobilePanelLinks{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    overflow:auto!important;
    padding-right:2px!important;
    overscroll-behavior:contain!important;
  }

  .opxMobilePanelLink{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:48px!important;
    box-sizing:border-box!important;
    padding:0 14px!important;
    border-radius:17px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    background:rgba(255,255,255,.065)!important;
    color:#f4f8ff!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:1000!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
    line-height:1.2!important;
  }

  .opxMobilePanelLink::after{
    content:"›"!important;
    color:#ffd43b!important;
    font-size:20px!important;
    line-height:1!important;
    margin-left:10px!important;
  }

  .opxMobilePanelLink.isRegister{
    justify-content:center!important;
    background:linear-gradient(135deg,#ffd43b,#ffb703)!important;
    color:#06101d!important;
    border-color:rgba(255,212,59,.60)!important;
    box-shadow:0 14px 32px rgba(255,183,3,.22)!important;
  }

  .opxMobilePanelLink.isRegister::after{
    display:none!important;
  }

  .opxMobilePanelLink.isLogin{
    justify-content:center!important;
    background:rgba(255,255,255,.085)!important;
    color:#f7fbff!important;
    border-color:rgba(255,255,255,.20)!important;
  }

  .opxMobilePanelLink.isLogin::after{
    display:none!important;
  }

  .opxMobilePanelLink:hover,
  .opxMobilePanelLink:active{
    background:rgba(255,212,59,.13)!important;
    border-color:rgba(255,212,59,.30)!important;
  }

  .opxMobilePanelLink.isRegister:hover,
  .opxMobilePanelLink.isRegister:active{
    background:linear-gradient(135deg,#ffe16a,#ffbe0b)!important;
  }
}

@media(max-width:420px){
  .opxMobilePanel{
    top:74px!important;
    left:10px!important;
    right:10px!important;
    bottom:12px!important;
    padding:10px!important;
    border-radius:24px!important;
  }

  .opxMobilePanelAuth{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .opxMobilePanelLink{
    min-height:46px!important;
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}


/* FASE 7.5 · FIX DEFINITIVO MENU MÓVIL COMPLETO */

@media(max-width:860px){

  body.opxMobileMenuOpen{
    overflow:hidden!important;
  }

  body.opxMobileMenuOpen::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:2147482000!important;
    background:rgba(0,0,0,.66)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .opxUnifiedHeader{
    z-index:2147483000!important;
    overflow:visible!important;
  }

  .opxUnifiedHeader > .opxUnifiedNav,
  .opxUnifiedHeader > .opxUnifiedActions{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .opxMobileMenuToggle{
    display:inline-flex!important;
    position:absolute!important;
    right:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2147483640!important;
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:6px!important;
    background:rgba(255,212,59,.10)!important;
    border:1px solid rgba(255,212,59,.48)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.35)!important;
  }

  .opxMobileMenuToggle span{
    display:block!important;
    width:23px!important;
    height:2px!important;
    border-radius:99px!important;
    background:#ffd43b!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(1){
    transform:translateY(8px) rotate(45deg)!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(2){
    opacity:0!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg)!important;
  }

  .opxMobilePanel{
    position:fixed!important;
    top:92px!important;
    left:14px!important;
    right:14px!important;
    bottom:18px!important;
    z-index:2147483500!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:12px!important;
    padding:12px!important;
    border-radius:26px!important;
    border:1px solid rgba(255,212,59,.34)!important;
    background:linear-gradient(180deg,#07101d,#03070d)!important;
    box-shadow:0 32px 90px rgba(0,0,0,.82)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
    overflow:hidden!important;
  }

  body.opxMobileMenuOpen .opxMobilePanel{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  .opxMobilePanelAuth{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-bottom:12px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }

  .opxMobilePanelLinks{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:2px 2px 10px!important;
    overscroll-behavior:contain!important;
  }

  .opxMobilePanelLink{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:48px!important;
    flex:0 0 auto!important;
    box-sizing:border-box!important;
    padding:0 14px!important;
    border-radius:17px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    background:rgba(255,255,255,.065)!important;
    color:#f4f8ff!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:1000!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
    line-height:1.2!important;
  }

  .opxMobilePanelLink::after{
    content:"›"!important;
    color:#ffd43b!important;
    font-size:20px!important;
    margin-left:10px!important;
  }

  .opxMobilePanelLink.isRegister{
    justify-content:center!important;
    background:linear-gradient(135deg,#ffd43b,#ffb703)!important;
    color:#06101d!important;
    border-color:rgba(255,212,59,.62)!important;
    box-shadow:0 14px 32px rgba(255,183,3,.22)!important;
  }

  .opxMobilePanelLink.isLogin{
    justify-content:center!important;
    background:rgba(255,255,255,.09)!important;
    color:#f7fbff!important;
    border-color:rgba(255,255,255,.22)!important;
  }

  .opxMobilePanelLink.isRegister::after,
  .opxMobilePanelLink.isLogin::after{
    display:none!important;
  }
}

@media(max-width:420px){
  .opxMobilePanel{
    top:86px!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    border-radius:22px!important;
    padding:10px!important;
  }

  .opxMobilePanelLink{
    min-height:46px!important;
    font-size:12px!important;
  }
}


/* FASE 7.6 · FIX REAL: PANEL MÓVIL EN BODY, NO DENTRO DEL HEADER */

#opxMobilePanel{
  display:none;
}

@media(max-width:860px){

  body.opxMobileMenuOpen{
    overflow:hidden!important;
  }

  body.opxMobileMenuOpen::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:2147482000!important;
    background:rgba(0,0,0,.62)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .opxUnifiedHeader{
    z-index:2147483000!important;
    overflow:visible!important;
  }

  .opxUnifiedHeader > .opxUnifiedNav,
  .opxUnifiedHeader > .opxUnifiedActions{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .opxMobileMenuToggle{
    display:inline-flex!important;
    position:absolute!important;
    right:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2147483640!important;
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:6px!important;
    background:rgba(255,212,59,.10)!important;
    border:1px solid rgba(255,212,59,.50)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.35)!important;
  }

  .opxMobileMenuToggle span{
    display:block!important;
    width:23px!important;
    height:2px!important;
    border-radius:99px!important;
    background:#ffd43b!important;
    transition:transform .16s ease, opacity .16s ease!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(1){
    transform:translateY(8px) rotate(45deg)!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(2){
    opacity:0!important;
  }

  body.opxMobileMenuOpen .opxMobileMenuToggle span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg)!important;
  }

  #opxMobilePanel{
    position:fixed!important;
    top:92px!important;
    left:14px!important;
    right:14px!important;
    height:calc(100dvh - 110px)!important;
    max-height:calc(100vh - 110px)!important;
    z-index:2147483600!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:12px!important;
    padding:12px!important;
    box-sizing:border-box!important;
    border-radius:26px!important;
    border:1px solid rgba(255,212,59,.36)!important;
    background:linear-gradient(180deg,#07101d,#03070d)!important;
    box-shadow:0 32px 90px rgba(0,0,0,.84)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
    overflow:hidden!important;
  }

  body.opxMobileMenuOpen #opxMobilePanel{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  #opxMobilePanel .opxMobilePanelAuth{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-bottom:12px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    min-height:0!important;
  }

  #opxMobilePanel .opxMobilePanelLinks{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:2px 2px 10px!important;
    overscroll-behavior:contain!important;
  }

  #opxMobilePanel .opxMobilePanelLink{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:48px!important;
    flex:0 0 auto!important;
    box-sizing:border-box!important;
    padding:0 14px!important;
    border-radius:17px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:rgba(255,255,255,.075)!important;
    color:#f4f8ff!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:1000!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
    line-height:1.2!important;
    box-shadow:none!important;
  }

  #opxMobilePanel .opxMobilePanelLink::after{
    content:"›"!important;
    color:#ffd43b!important;
    font-size:20px!important;
    margin-left:10px!important;
    line-height:1!important;
  }

  #opxMobilePanel .opxMobilePanelLink.isRegister{
    justify-content:center!important;
    background:linear-gradient(135deg,#ffd43b,#ffb703)!important;
    color:#06101d!important;
    border-color:rgba(255,212,59,.62)!important;
    box-shadow:0 14px 32px rgba(255,183,3,.22)!important;
  }

  #opxMobilePanel .opxMobilePanelLink.isLogin{
    justify-content:center!important;
    background:rgba(255,255,255,.10)!important;
    color:#f7fbff!important;
    border-color:rgba(255,255,255,.24)!important;
  }

  #opxMobilePanel .opxMobilePanelLink.isRegister::after,
  #opxMobilePanel .opxMobilePanelLink.isLogin::after{
    display:none!important;
  }
}

@media(max-width:420px){
  #opxMobilePanel{
    top:86px!important;
    left:10px!important;
    right:10px!important;
    height:calc(100dvh - 98px)!important;
    max-height:calc(100vh - 98px)!important;
    border-radius:22px!important;
    padding:10px!important;
  }

  #opxMobilePanel .opxMobilePanelLink{
    min-height:46px!important;
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}


/* FASE 7.7 · CENTRADO REAL MÓVIL + CERO OVERFLOW HORIZONTAL */

@media(max-width:860px){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body{
    position:relative!important;
  }

  main,
  main > section,
  section,
  .moatHero,
  .moatWidgets,
  .moatSection,
  .pikiSquad,
  .comparison,
  .freeTools,
  .finalMoat,
  .appHero,
  .appIntro,
  .screenGrid,
  .appFinal{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  .opxUnifiedHeader{
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
    box-sizing:border-box!important;
  }

  .moatHero{
    display:block!important;
    margin:0 auto!important;
    padding:92px 20px 48px!important;
    min-height:auto!important;
    text-align:left!important;
  }

  .moatHero > *,
  .moatHeroContent,
  .moatHeroVisual,
  .moatHeroDemo,
  .moatHeroCopy,
  .heroContent,
  .heroCopy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .moatHero h1,
  .moatHeroTitle,
  body.opxMoatBody h1{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    font-size:clamp(38px,10.8vw,54px)!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:balance!important;
  }

  .moatHero p,
  .moatHeroSubtitle,
  .moatHeroContent p{
    width:100%!important;
    max-width:100%!important;
    font-size:16.5px!important;
    line-height:1.68!important;
  }

  .moatHeroTrust,
  .heroStats,
  .heroTrust,
  .statsGrid{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  .moatHeroTrust span,
  .heroStats span,
  .statsGrid span{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }

  /* Franja tipo AGENDA · EXPEDIENTE · FÍSICAS que se estaba saliendo */
  [class*="ticker"],
  [class*="Ticker"],
  [class*="marquee"],
  [class*="Marquee"],
  .moatTicker,
  .opxTicker{
    width:100%!important;
    max-width:100vw!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  [class*="ticker"] *,
  [class*="Ticker"] *,
  [class*="marquee"] *,
  [class*="Marquee"] *,
  .moatTicker *,
  .opxTicker *{
    max-width:none!important;
    white-space:nowrap!important;
    font-size:clamp(16px,5.2vw,24px)!important;
  }

  .moatHero img,
  .moatHero picture,
  .moatHero svg{
    max-width:100%!important;
  }

  .moatHero .pill,
  .moatHero [class*="Pill"],
  .moatHero [class*="Badge"],
  .moatHero [class*="badge"]{
    max-width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
    white-space:normal!important;
  }

  .moatHeroDemo,
  .pikiAsk,
  .diagnosticCard,
  .liveQuestion,
  .quizFeedback{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .answers{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .answers button{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

@media(max-width:420px){

  .moatHero{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .moatHero h1,
  .moatHeroTitle,
  body.opxMoatBody h1{
    font-size:clamp(35px,10.4vw,47px)!important;
    line-height:1.05!important;
    letter-spacing:-.028em!important;
  }

  .moatHero p,
  .moatHeroSubtitle,
  .moatHeroContent p{
    font-size:16px!important;
    line-height:1.66!important;
  }
}


/* FASE 7.8 · HEADER MÓVIL: LOGO + OPOSIPLUS + MENÚ */

.opxMobileBrandText{
  display:none;
}

@media(max-width:860px){

  .opxUnifiedHeader{
    display:grid!important;
    grid-template-columns:56px 1fr 64px!important;
    align-items:center!important;
    gap:8px!important;
    min-height:68px!important;
    padding:8px 10px!important;
  }

  .opxUnifiedBrand{
    grid-column:1!important;
    justify-self:start!important;
    width:52px!important;
    max-width:52px!important;
    min-width:52px!important;
    overflow:visible!important;
  }

  .opxUnifiedBrand strong,
  .opxUnifiedBrand span:not(.opxMobileBrandText){
    display:none!important;
  }

  .opxUnifiedLogoImg,
  .opxUnifiedBrand img{
    width:44px!important;
    height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }

  .opxMobileBrandText{
    display:flex!important;
    grid-column:2!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    color:#f7fbff!important;
    font-family:inherit!important;
    font-size:15px!important;
    font-weight:1000!important;
    letter-spacing:.18em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-shadow:0 2px 16px rgba(255,212,59,.18)!important;
    pointer-events:none!important;
  }

  .opxMobileMenuToggle{
    grid-column:3!important;
    position:relative!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    justify-self:end!important;
    margin:0!important;
  }
}

@media(max-width:380px){
  .opxMobileBrandText{
    font-size:13px!important;
    letter-spacing:.14em!important;
  }

  .opxUnifiedHeader{
    grid-template-columns:52px 1fr 60px!important;
  }
}