/* ============================================================================ BOOST HN — Correcciones de responsividad Cada bloque arregla un desborde medido con database/auditar-responsive.js, no una sospecha. Se carga último para ganarle a lo anterior. ========================================================================= */ /* ── 1. Nada puede sacar la página de cuadro ──────────────────────────────── */ /* body ya tenía overflow-x:hidden, pero el clip no sirve si también crece: el navegador termina mostrando barra horizontal igual. */ html { overflow-x: clip; } /* ── 2. Hijos de grid y flex que no se dejan achicar ──────────────────────── */ /* `1fr` es `minmax(auto, 1fr)`: con contenido largo la columna se niega a encoger y arrastra la fila fuera de pantalla. min-width:0 lo destraba. */ .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-productos > *, .pie-grid > *, .nav-panel-grid > * { min-width: 0; } /* ── 3. Formulario del boletín ────────────────────────────────────────────── */ /* En la columna angosta del pie el input no encogía (min-width:auto) y el botón lleva white-space:nowrap: entre los dos empujaban fuera del ancho. */ .boletin-form { flex-wrap: wrap; max-width: 100%; } .boletin-form input { min-width: 0; flex: 1 1 11rem; } .boletin-form .btn { flex: 1 1 auto; min-width: max-content; } /* ── 4. Menú móvil cerrado ────────────────────────────────────────────────── */ /* Estaba fuera de pantalla con translateX(100%): seguía ocupando espacio de desplazamiento y era alcanzable con el tabulador estando invisible. visibility lo saca del flujo y del foco; vuelve al abrirse. */ @media (max-width: 1080px) { .nav-principal { visibility: hidden; transition: transform var(--normal) var(--curva), visibility var(--normal) var(--curva); } .nav-principal.abierto { visibility: visible; } } /* ── 5. Cinta roja rotada ─────────────────────────────────────────────────── */ /* El rotate(-1.6deg) scale(1.03) es intencional, pero hace que las puntas sobresalgan. Se envuelve el efecto en su propio recorte. */ .cinta { max-width: 100vw; overflow: hidden; } /* ── 6. Estado inicial de las animaciones de entrada ──────────────────────── */ /* .revelar-izq/-der arrancan desplazados 32px. Antes de que el observador los active, ese desplazamiento asomaba fuera del viewport. Se recorta en el contenedor y se achica el recorrido en pantallas chicas. */ @media (max-width: 700px) { .revelar-izq { transform: translateX(-16px); } .revelar-der { transform: translateX(16px); } } .seccion, .seccion-sm { overflow-x: clip; } /* ── 7. Tablas y bloques anchos ───────────────────────────────────────────── */ /* Una tabla nunca debe estirar la página: se desplaza dentro de su caja. */ .tabla-scroll, .admin-tabla-caja { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } pre, code { overflow-x: auto; max-width: 100%; } /* Palabras muy largas (URLs, SKU) no rompen la caja */ .card-prod-titulo, .drawer-linea-titulo, .articulo-cuerpo p, .articulo-cuerpo li { overflow-wrap: anywhere; } /* ── 8. Objetivos táctiles ────────────────────────────────────────────────── */ /* Debajo de 44px el dedo falla. Se agranda el área sin mover el diseño. */ @media (max-width: 480px) { .pie-lista a, .migas a { display: inline-block; padding-block: 4px; } .card-prod-add { width: 38px; height: 38px; } .drawer-cantidad button { width: 32px; height: 32px; } .drawer-quitar { width: 32px; height: 32px; } } /* ── 9. Imágenes y medios ─────────────────────────────────────────────────── */ img, video, iframe, svg { max-width: 100%; } /* ── 10. El hero en teléfonos apaisados ───────────────────────────────────── */ /* Con el teléfono acostado, 92svh deja el titular sin aire. */ @media (max-width: 900px) and (orientation: landscape) { .home-hero { min-height: 560px; padding-block: 5rem 3rem; } } /* ── 11. Objetivos táctiles medidos como chicos ───────────────────────────── */ /* Detectados por la auditoría: enlaces de texto con menos de 32 px de alto. Se agranda el área tocable con padding, sin correr nada de sitio. */ @media (max-width: 480px) { .logo { padding-block: 6px; } .enlace-linea { padding-block: 7px; } .faq-indice a, .faq-indice-ayuda { display: inline-block; padding-block: 6px; } /* Los chips de marca son informativos, pero el de ROKI es un enlace real */ a.marca-chip { min-height: 32px; } .pie-social a { width: 44px; height: 44px; } } /* ── 12. Grillas de página que no encogían ────────────────────────────────── */ /* Mismo problema que el bloque 2, pero en las grillas propias de cada sección: `1fr` se niega a bajar del ancho mínimo del contenido. En los combos, el nombre largo de un producto ("Pre-entreno BUM X RAW Pump Non-Stim…") estiraba la tarjeta a 660 px dentro de una pantalla de 360. */ .home-combos, .home-cats, .home-col, .home-banner, .home-boletin-interior, .cuenta-beneficios { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1081px) { .home-combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .home-combo, .home-combo > *, .home-combo-cuerpo > *, .home-combo-items, .home-combo-item, .home-combo-item-txt { min-width: 0; } .home-combo-titulo, .home-combo-desc, .home-combo-item-txt, .home-combo-item-txt a, .home-combo-item-txt span { overflow-wrap: anywhere; } /* Red de seguridad: cualquier hijo directo de una grilla puede encogerse. Se aplica con :where() para no subir la especificidad y no pisar reglas deliberadas de las páginas. */ :where( .home-combos, .home-cats, .home-col, .home-banner, .home-destacados, .tienda-grid, .catalogo-grid, .blog-grid, .colecciones-grid, .combos-grid, .admin-grid, .checkout-grid, .carrito-grid, .producto-grid ) > * { min-width: 0; } /* ── 13. Táctiles restantes medidos en móvil ──────────────────────────────── */ @media (max-width: 480px) { .home-combo-item-txt a { display: inline-block; padding-block: 5px; } .home-enlace-tenue { display: inline-block; padding-block: 8px; } .marquesina-item { padding-block: 4px; } }