/* ============================================================ MOBILE FIX — Studio By Cote Elimina el scroll horizontal de la página en móvil (360–430px) sin cambiar el diseño de escritorio. Causa raíz del problema: 1) Stickers decorativos posicionados FUERA del borde derecho/izquierdo (right:-240px, right:-10vw, left:-320px, etc.). Los que cuelgan a la DERECHA ensanchan la página en móvil → la página entera se corre y aparece el borde negro. 2) body tenía overflow-x:hidden pero no: en iOS/Android eso no basta y el navegador permite "panear" lateralmente. 3) El riel "Nuestro Equipo" (.team-selector) no contenía el gesto: al llegar al final del riel, el swipe seguía moviendo la página. Este archivo se carga AL FINAL para ganar en cascada. Solo usa overrides: no toca lógica ni HTML. ============================================================ */ /* --- 1) La página nunca se desplaza hacia los lados ---------------- */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* 'clip' es mejor que 'hidden' (no crea contenedor de scroll y el navegador no puede panear). Se aplica solo si el navegador lo soporta. */ @supports (overflow: clip) { html, body { overflow-x: clip; } } *, *::before, *::after { box-sizing: border-box; } /* --- 2) Medios nunca ensanchan el layout --------------------------- */ img, video, canvas, svg { max-width: 100%; } /* --- 3) Secciones y contenedores dentro del viewport --------------- */ .section, .container, footer { max-width: 100%; } /* Recorte horizontal por sección (el vertical queda intacto): mata en origen el ancho extra de cualquier adorno absoluto que cuelgue del borde. Progresivo: navegadores antiguos lo ignoran y quedan cubiertos por la regla 4. */ @supports (overflow-x: clip) { .section, footer, .team-section { overflow-x: clip; } } /* Overlay del modal: 100vw incluye la barra de scroll en escritorio; 100% cubre lo mismo sin ese riesgo (position:fixed). */ .global-modal-overlay { width: 100%; } /* --- 4) Stickers decorativos: en móvil se pegan al borde, no cuelgan fuera (en escritorio quedan EXACTAMENTE igual que hoy) --------- */ @media (max-width: 768px) { .st-a, .st-d, .st-f { right: 0; } .st-e { right: 0; } .st-b, .st-c { left: 0; } .sticker--equipo-right, .sticker--insta-espacio-right { right: 0; } .sticker--resultados-left, .sticker--espacio-left-venus { left: 0; } } /* --- 5) Carruseles / rieles: el swipe vive DENTRO del riel ---------- */ .team-selector { max-width: 100%; overscroll-behavior-x: contain; touch-action: pan-x pan-y; } .swiper, .product-swiper { max-width: 100%; overscroll-behavior-x: contain; } /* Cualquier otro riel horizontal propio de la home */ [class*="carousel"], [class*="-rail"] { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* --- 6) Detalles móviles (360–430px) ------------------------------- */ @media (max-width: 430px) { /* Las cards de rieles nunca más anchas que la pantalla */ .team-selector-btn, .swiper-slide { max-width: calc(100vw - 32px); } /* Títulos largos no revientan el ancho */ .section-title, h1, h2 { overflow-wrap: break-word; } /* Botón flotante de WhatsApp más contenido (no causa overflow por ser fixed, pero así no tapa contenido en pantallas chicas) */ .float-wa { right: 16px; bottom: 16px; width: 54px; height: 54px; font-size: 30px; } }