/* OPOSIPLUS FASE 5 · encuadre real + no huecos + botones premium */

/* El ticker global solo en home/landing moat; fuera molesta y crea hueco visual. */
body:not(.opxMoatBody) .opxExtremeTicker{
  display:none!important;
}

/* Header fijo sin comerse los títulos */
html{
  scroll-padding-top:112px!important;
}

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

/* Reducir huecos enormes de los héroes antiguos */
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{
  min-height:auto!important;
  padding-top:clamp(92px,8vw,132px)!important;
  padding-bottom:clamp(46px,6vw,82px)!important;
}

/* Si la página tiene personaje lateral absoluto, no puede abrir un vacío de media pantalla */
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:min(230px,24vw)!important;
  max-height:300px!important;
  object-fit:contain!important;
}

/* Encaje general de héroes antiguos: contenido al centro y no abajo del todo */
body:not(.opxMoatBody) main > section:first-child{
  display:grid!important;
  align-items:center!important;
}

/* Bloques con demasiado aire */
body:not(.opxMoatBody) section{
  margin-top:0!important;
}

body:not(.opxMoatBody) section + section{
  padding-top:clamp(52px,7vw,92px)!important;
}

/* Títulos menos gigantes en páginas internas, landing mantiene fuerza */
body:not(.opxMoatBody) h1{
  font-size:clamp(42px,6.2vw,86px)!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
}

body:not(.opxMoatBody) h2{
  font-size:clamp(30px,4.5vw,58px)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}

/* Cards más cerradas y homogéneas */
body:not(.opxMoatBody) article,
body:not(.opxMoatBody) .opxCard,
body:not(.opxMoatBody) .card,
body:not(.opxMoatBody) [class*="Card"]{
  border-radius:28px!important;
}

/* Botones: evitar pegados y "leer guía" cutre */
main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]){
  margin:6px 8px 6px 0!important;
  gap:8px!important;
  min-width:max-content;
}

main article a,
main .card a,
main [class*="Card"] a,
main a.opxGuideButton{
  display:inline-flex!important;
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  color:#050506!important;
  background:linear-gradient(135deg,#fff6bf,#ffd43b,#eda900)!important;
  border:1px solid rgba(255,212,59,.35)!important;
  box-shadow:0 14px 38px rgba(255,212,59,.16)!important;
  font-weight:1000!important;
  text-decoration:none!important;
}

/* Footer legal más limpio */
footer nav,
.appFooter nav,
.moatFooter nav{
  row-gap:10px!important;
}

/* Evitar personajes gigantes pegados al borde izquierdo */
img[src*="piki-personajes-final"]{
  object-fit:contain!important;
}

body:not(.opxMoatBody) main > section:first-child > img:first-child,
body:not(.opxMoatBody) main > section:first-child picture:first-child img{
  justify-self:center!important;
  align-self:center!important;
}

/* Páginas legales/contacto: menos hueco y caja centrada */
.opxLegalWrap,
.legalWrap,
main:has(.legalNav){
  padding-top:clamp(92px,8vw,130px)!important;
}

/* Móvil */
@media(max-width:820px){
  body.opxUnifiedBody,
  body.opxPremiumBody{
    padding-top:78px!important;
  }

  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-top:92px!important;
  }

  body:not(.opxMoatBody) h1{
    font-size:clamp(38px,12vw,66px)!important;
  }

  main a[href]:not(.opxUnifiedBrand):not(.opxUnifiedRegister):not(.opxUnifiedLogin):not([href^="mailto:"]):not([href^="#"]){
    white-space:normal!important;
    min-width:0!important;
  }
}

/* FASE 6 · performance móvil */
@media(max-width: 820px){
  body::before,
  body::after,
  .moatHeroBg,
  .appGlow{
    animation:none!important;
    filter:none!important;
  }

  section[class*="Hero"] img,
  .hero img,
  .opxHero img,
  .opxPremiumHero img,
  .appHero img,
  img[src*="piki"],
  img[src*="pinguino"],
  img[src*="pinguina"]{
    animation:none!important;
  }

  .opxUnifiedHeader::after{
    animation:none!important;
    display:none!important;
  }
}

main > section:not(:first-child){
  content-visibility:auto;
  contain-intrinsic-size: 1px 720px;
}

img{
  max-width:100%;
  height:auto;
}