/* Mimi Play 11.2.9 · Integración directa de la referencia visual aprobada
   Objetivo: que el Inicio se vea como la composición de referencia, sin reconstruir
   el banner ni el teaser de combo con bloques CSS separados. */

:root{--mp129-home-max:941px}

/* ===== Cabecera: solo marca + búsqueda + carrito + perfil ===== */
@media(min-width:761px){
  .mp125-header{background:#020b19!important;border-bottom:1px solid rgba(116,174,255,.08)!important}
  .mp125-nav-wrap{
    width:min(var(--mp129-home-max),calc(100% - 28px))!important;
    max-width:var(--mp129-home-max)!important;
    min-height:96px!important;
    padding:13px 0!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(250px,315px) minmax(280px,1fr) auto!important;
    align-items:center!important;
    gap:22px!important;
  }
  .mp7-nav{display:none!important}
  .mp125-brand{position:relative!important;display:block!important;width:315px!important;height:70px!important;overflow:visible!important}
  .mp125-brand img{width:315px!important;max-width:315px!important;max-height:66px!important;height:auto!important;object-fit:contain!important;object-position:left center!important}
  .mp125-brand::after{
    content:"ENTRETENIMIENTO SIN LÍMITES";
    position:absolute;left:84px;bottom:-1px;
    color:#fff;font-size:8.5px;font-weight:750;letter-spacing:.34em;white-space:nowrap;opacity:.94
  }
  .mp125-desktop-search{display:block!important;min-width:0!important}
  .mp125-desktop-search .mp9-global-search{height:52px!important;border-radius:16px!important;background:#071936!important;border:1px solid rgba(71,139,255,.34)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)!important}
  .mp125-desktop-search .mp9-global-search input{font-size:12px!important;color:#dce8f7!important}
  .mp125-desktop-search .mp9-global-search button{width:40px!important;height:40px!important;margin-right:5px!important;border-radius:11px!important}
  .mp125-actions{gap:9px!important}
  .mp125-actions .mp7-icon-btn{width:50px!important;height:50px!important;border-radius:14px!important;background:#07172e!important;border:1px solid rgba(88,156,255,.29)!important}
  .mp125-actions .mp7-icon-btn svg{width:25px!important;height:25px!important;stroke-width:1.7!important}
  .mp125-search-action{display:none!important}
}

/* La portada usa la misma anchura visual que la referencia. */
.mp7-screen-inicio .mp125-main{width:min(var(--mp129-home-max),100%)!important;max-width:var(--mp129-home-max)!important;margin-inline:auto!important}

/* ===== Hero: el primer banner ES la imagen de referencia ===== */
.mp128-hero-carousel{
  border:0!important;
  border-radius:22px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  margin:14px 0 18px!important;
}
.mp128-hero-viewport{border-radius:22px!important;background:#030a18!important}
.mp128-hero-track{align-items:stretch!important}
.mp128-hero-slide{
  aspect-ratio:885/296!important;
  min-height:0!important;
  height:auto!important;
}
.mp129-reference-hero{display:block!important;padding:0!important;background:transparent!important;isolation:auto!important}
.mp129-reference-hero::before,.mp129-reference-hero::after{display:none!important}
.mp129-reference-hero-link,.mp129-reference-hero-link picture{display:block!important;width:100%!important;height:100%!important}
.mp129-reference-hero-link{position:absolute!important;inset:0!important;text-decoration:none!important}
.mp129-reference-hero-link img{display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;border:0!important}
.mp129-runtime-hook{display:none!important}

/* Los otros banners conservan el carrusel, pero usan la misma altura/ritmo del diseño aprobado. */
.mp128-hero-combo,.mp128-hero-top{border:1px solid rgba(52,181,255,.34)!important;border-radius:22px!important}
.mp128-hero-copy{padding:24px 34px!important;max-width:620px!important}
.mp128-hero-copy h1,.mp128-hero-copy h2{font-size:clamp(34px,4.4vw,52px)!important;line-height:.98!important;margin:9px 0 8px!important}
.mp128-hero-copy p{font-size:12px!important;line-height:1.4!important;margin-bottom:14px!important}
.mp128-hero-art{min-height:0!important;height:100%!important}
.mp128-hero-cta{min-height:39px!important;padding:0 15px!important;border-radius:11px!important}
.mp128-hero-arrow{width:30px!important;height:30px!important;margin-top:-15px!important;font-size:21px!important;background:rgba(3,12,28,.70)!important}
.mp128-hero-prev{left:10px!important}.mp128-hero-next{right:10px!important}
.mp128-hero-dots{bottom:9px!important;padding:4px 6px!important;gap:5px!important;background:rgba(1,7,18,.38)!important}
.mp128-hero-dots button{width:5px!important;height:5px!important}.mp128-hero-dots button.active{width:15px!important}

/* ===== Arma tu combo: imagen completa de referencia, sin piezas chocando ===== */
.mp129-reference-combo{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:22px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.mp129-reference-combo::before,.mp129-reference-combo::after{display:none!important}
.mp129-reference-combo-link,.mp129-reference-combo-link picture{display:block!important;width:100%!important}
.mp129-reference-combo-link{position:relative!important;z-index:2!important;text-decoration:none!important;border-radius:22px!important;overflow:hidden!important}
.mp129-reference-combo-link img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:885/230!important;object-fit:fill!important;border:0!important}
.mp129-reference-combo-link:focus-visible{outline:3px solid #59d9ff!important;outline-offset:3px!important}

/* Secciones: respiración parecida a la referencia, sin "cuadros dentro de cuadros". */
.mp128-section{margin:24px 0!important}
.mp128-section-head{margin-bottom:10px!important}
.mp128-section-head h2{font-size:21px!important}
.mp128-section-head p{font-size:10px!important}
.mp128-discord-banner{margin:23px 0!important}

/* ===== Tablet / móvil ===== */
@media(max-width:760px){
  .mp125-header{background:#020b19!important}
  .mp125-nav-wrap{height:64px!important;min-height:64px!important;max-height:64px!important;padding:7px 13px!important}
  .mp125-brand{height:auto!important}
  .mp125-brand::after{display:none!important}
  .mp125-brand img{width:132px!important;max-width:132px!important;max-height:36px!important}
  .mp7-screen-inicio .mp125-main{padding-left:10px!important;padding-right:10px!important;padding-top:0!important}

  .mp128-hero-carousel{margin:7px 0 12px!important;border-radius:14px!important}
  .mp128-hero-viewport{border-radius:14px!important}
  .mp128-hero-slide{aspect-ratio:885/296!important;min-height:0!important}
  .mp128-hero-combo,.mp128-hero-top{border-radius:14px!important}
  .mp128-hero-copy{padding:10px 11px!important;max-width:66%!important}
  .mp128-hero-kicker{min-height:15px!important;padding:0 5px!important;font-size:5.6px!important}
  .mp128-hero-copy h1,.mp128-hero-copy h2{font-size:clamp(17px,5.6vw,24px)!important;margin:5px 0 4px!important;line-height:.98!important}
  .mp128-hero-copy p{display:none!important}
  .mp128-hero-cta{min-height:28px!important;padding:0 9px!important;border-radius:8px!important;font-size:7px!important}
  .mp128-hero-art-combo>b{font-size:48px!important;top:20%!important}
  .mp128-hero-combo-logo{width:44px!important;height:35px!important;border-radius:8px!important}
  .mp128-hero-poster{width:48px!important;border-radius:7px!important}
  .mp128-hero-dots{bottom:4px!important;padding:3px 5px!important;gap:4px!important}
  .mp128-hero-dots button{width:4px!important;height:4px!important}.mp128-hero-dots button.active{width:12px!important}

  .mp129-reference-combo{border-radius:14px!important}
  .mp129-reference-combo-link{border-radius:14px!important}
  .mp128-section{margin:18px 0!important}
  .mp128-section-head h2{font-size:17px!important}
}

@media(max-width:390px){
  .mp7-screen-inicio .mp125-main{padding-left:8px!important;padding-right:8px!important}
  .mp128-hero-carousel{border-radius:12px!important}
  .mp128-hero-viewport,.mp128-hero-combo,.mp128-hero-top{border-radius:12px!important}
  .mp129-reference-combo,.mp129-reference-combo-link{border-radius:12px!important}
}

/* Neutraliza reglas heredadas de botones dentro del teaser: aquí el enlace contiene la imagen completa. */
.mp129-reference-combo>.mp129-reference-combo-link{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  align-items:initial!important;
  justify-content:initial!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:normal!important;
}
.mp129-reference-combo>.mp129-reference-combo-link picture{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
.mp129-reference-combo>.mp129-reference-combo-link img{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
}
#mp7ComboTeaser>#mp7ComboArt,
#mp7ComboTeaser>#mp112ComboRules{display:none!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important}