/* ========================================================== MASCARADASTV HOME APP 022 Launcher superior móvil ========================================================== */ .mtv-home-launcher{ display:none; } @media(max-width:980px){ /* * El bloque superior deja de parecer landing page. */ #screen-home .home-intro-panel{ min-height:0 !important; padding: 13px 12px 14px !important; overflow:hidden !important; border-radius: 22px !important; background: linear-gradient( 145deg, rgba(16,16,16,.98), rgba(7,7,7,.98) ) !important; } /* * Ocultamos SOLO visualmente * el texto excesivo del hero móvil. */ #screen-home .home-intro-panel .status-pill, #screen-home .home-intro-panel .home-intro-copy, #screen-home .home-intro-panel .home-quick-row{ display:none !important; } /* * Lanzador. */ .mtv-home-launcher{ display:block; width:100%; } .mtv-home-launcher-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; padding:0 2px; } .mtv-home-launcher-head strong{ color:#fff; font-size:14px; line-height:1; font-weight:950; } .mtv-home-launcher-head small{ color:#747474; font-size:8px; font-weight:800; } /* * Zona horizontal. */ .mtv-home-launcher-scroll{ display:flex; gap:9px; width:100%; overflow-x:auto; overflow-y:hidden; padding: 2px 2px 7px; scroll-snap-type: x mandatory; scroll-padding: 2px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width:none; } .mtv-home-launcher-scroll::-webkit-scrollbar{ display:none; } /* * Cada acceso. */ .mtv-home-app-button{ flex: 0 0 calc( 33.333% - 6px ); min-width: 96px; min-height: 96px; scroll-snap-align: start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding: 10px 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 19px; background: rgba(255,255,255,.035); color:#fff; text-align:center; cursor:pointer; touch-action: manipulation; transition: transform .13s ease, border-color .16s ease, background .16s ease; } .mtv-home-app-button:active{ transform: scale(.94); background: rgba(237,17,28,.12); border-color: rgba(237,17,28,.34); } /* * Icono. */ .mtv-home-app-icon{ width:46px; height:46px; display:grid; place-items:center; flex:0 0 46px; border-radius: 16px; background: linear-gradient( 145deg, rgba(237,17,28,.24), rgba(237,17,28,.08) ); color: #ed111c; border: 1px solid rgba(237,17,28,.14); } .mtv-home-app-icon svg{ width:24px; height:24px; display:block; } .mtv-home-app-button strong{ max-width:100%; overflow:hidden; color:#f5f5f5; font-size:10px; line-height:1; font-weight:900; white-space:nowrap; text-overflow:ellipsis; } /* * Primer botón mapa un poco más fuerte. */ .mtv-home-app-button.primary{ background: linear-gradient( 145deg, rgba(237,17,28,.20), rgba(22,22,22,.90) ); border-color: rgba(237,17,28,.25); } /* * Indicadores inferiores. */ .mtv-home-launcher-dots{ display:flex; justify-content:center; gap:5px; margin-top:2px; } .mtv-home-launcher-dot{ width:5px; height:5px; padding:0; border:0; border-radius:50%; background:#393939; transition: width .18s ease, background .18s ease; } .mtv-home-launcher-dot.active{ width:17px; border-radius:999px; background:#ed111c; } /* * El mapa pasa a estar muy cerca * de los accesos. */ #screen-home .home-map-panel{ margin-top: 9px !important; } } @media(max-width:390px){ .mtv-home-app-button{ flex: 0 0 calc( 33.333% - 6px ); min-width:91px; min-height:91px; } .mtv-home-app-icon{ width:42px; height:42px; flex-basis:42px; border-radius:14px; } .mtv-home-app-icon svg{ width:22px; height:22px; } } /* * Desktop: * por ahora NO modificamos el hero. */ @media(min-width:981px){ .mtv-home-launcher{ display:none !important; } } /* ========================================================== HOME022 COMPACTO V2 cuadros pequeños / menos relleno / más accesos visibles ========================================================== */ @media(max-width:980px){ #screen-home .home-intro-panel{ padding: 8px 8px 9px !important; border-radius: 17px !important; } .mtv-home-launcher-head{ margin-bottom: 5px !important; padding: 0 2px !important; } .mtv-home-launcher-head strong{ font-size: 12px !important; } .mtv-home-launcher-head small{ font-size: 7px !important; } .mtv-home-launcher-scroll{ gap: 6px !important; padding: 1px 1px 4px !important; } /* * CUADROS MUCHO MAS PEQUEÑOS */ .mtv-home-app-button{ flex: 0 0 76px !important; min-width: 76px !important; width: 76px !important; min-height: 74px !important; height: 74px !important; padding: 6px 4px !important; gap: 5px !important; border-radius: 14px !important; } /* * ICONO MAS PEQUEÑO */ .mtv-home-app-icon{ width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 11px !important; } .mtv-home-app-icon svg{ width: 19px !important; height: 19px !important; } /* * TEXTO COMPACTO */ .mtv-home-app-button strong{ font-size: 8px !important; line-height: 1 !important; } /* * PUNTOS MAS PEQUEÑOS */ .mtv-home-launcher-dots{ gap: 4px !important; margin-top: 0 !important; } .mtv-home-launcher-dot{ width: 4px !important; height: 4px !important; } .mtv-home-launcher-dot.active{ width: 13px !important; } /* * MENOS ESPACIO ANTES DEL MAPA */ #screen-home .home-map-panel{ margin-top: 6px !important; } } @media(max-width:390px){ .mtv-home-app-button{ flex: 0 0 72px !important; min-width: 72px !important; width: 72px !important; min-height: 70px !important; height: 70px !important; } .mtv-home-app-icon{ width: 31px !important; height: 31px !important; flex-basis: 31px !important; } .mtv-home-app-icon svg{ width: 17px !important; height: 17px !important; } .mtv-home-app-button strong{ font-size: 7px !important; } } /* ========================================================== HOME022 CUADRO EXTERIOR REALMENTE PEQUEÑO V3 ========================================================== */ @media(max-width:980px){ .mtv-home-launcher-scroll{ gap:5px !important; padding: 1px 1px 3px !important; } /* * AQUÍ SE REDUCE EL RECUADRO EXTERIOR REAL. */ .mtv-home-launcher-scroll > .mtv-home-app-button{ flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 3px !important; gap: 3px !important; border-radius: 12px !important; } .mtv-home-launcher-scroll > .mtv-home-app-button .mtv-home-app-icon{ width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; max-width: 27px !important; max-height: 27px !important; flex: 0 0 27px !important; border-radius: 9px !important; } .mtv-home-launcher-scroll > .mtv-home-app-button .mtv-home-app-icon svg{ width: 15px !important; height: 15px !important; } .mtv-home-launcher-scroll > .mtv-home-app-button strong{ margin:0 !important; padding:0 !important; font-size: 7px !important; line-height: 8px !important; } /* * También reducimos el contenedor * para que no quede aire vacío. */ #screen-home .home-intro-panel{ padding: 6px 7px 6px !important; } .mtv-home-launcher-head{ margin-bottom: 4px !important; } .mtv-home-launcher-dots{ margin-top: 1px !important; } #screen-home .home-map-panel{ margin-top: 5px !important; } } @media(max-width:390px){ .mtv-home-launcher-scroll > .mtv-home-app-button{ flex-basis: 54px !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; } } /* ========================================================== HOME022 V4 - TAMAÑO MEDIO + SLIDE REAL ========================================================== */ @media(max-width:980px){ .mtv-home-launcher-scroll{ display:flex !important; flex-wrap:nowrap !important; gap:7px !important; width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; padding: 2px 3px 5px !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; } .mtv-home-launcher-scroll::-webkit-scrollbar{ display:none !important; } /* * RECUADRO EXTERIOR * ahora ligeramente más grande */ .mtv-home-launcher-scroll > .mtv-home-app-button{ flex: 0 0 68px !important; width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding: 5px !important; gap: 4px !important; border-radius: 14px !important; scroll-snap-align: start !important; scroll-snap-stop: normal; } /* * ICONO */ .mtv-home-launcher-scroll > .mtv-home-app-button .mtv-home-app-icon{ width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; max-width: 31px !important; max-height: 31px !important; flex: 0 0 31px !important; border-radius: 10px !important; } .mtv-home-launcher-scroll > .mtv-home-app-button .mtv-home-app-icon svg{ width: 17px !important; height: 17px !important; } /* * TEXTO */ .mtv-home-launcher-scroll > .mtv-home-app-button strong{ font-size: 7.5px !important; line-height: 9px !important; margin:0 !important; padding:0 !important; } /* * CONTENEDOR GENERAL */ #screen-home .home-intro-panel{ padding: 7px 8px 7px !important; } .mtv-home-launcher-head{ margin-bottom: 5px !important; } .mtv-home-launcher-dots{ margin-top: 2px !important; } } /* * TELÉFONOS MUY ANGOSTOS */ @media(max-width:390px){ .mtv-home-launcher-scroll > .mtv-home-app-button{ flex-basis: 64px !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; } }