/* ============================================================ ITAFE · RED DE SEGURIDAD MÓVIL (global) Se enlaza en TODAS las páginas, la ÚLTIMA en el para ganar a los estilos propios de cada página. Objetivo: que nunca haya scroll horizontal ni frases cortadas en móvil, pase lo que pase en el CSS de cada landing. (El menú desplegable móvil va aparte, en assets/js/itafe-menu.js) ============================================================ */ @media (max-width: 768px) { /* 1) Nada puede provocar scroll horizontal (clip no rompe headers sticky) */ html, body { overflow-x: clip; max-width: 100%; } /* 2) Titulares largos en Archivo Black: que partan, nunca que se corten */ h1, h2, h3, h4 { overflow-wrap: break-word; word-wrap: break-word; } /* 3) Medios y bloques anchos no se salen del ancho de pantalla */ img, svg, video, iframe, table, pre { max-width: 100%; } /* 4) Bug clásico de CSS grid/flex: un hijo (imagen, tarjeta, texto) ensancha la columna más que la pantalla. min-width:0 deja que encoja. Incluye los heroes flex (.hero > .hero__inner), que sin esto desbordan y, con overflow:hidden del hero, se ven CORTADOS por la derecha. */ [class*="grid"] > *, [class*="cols"] > *, [class*="row"] > *, .hero, .hero > *, [class*="hero__inner"], [class*="hero__content"], [class*="hero__"] { min-width: 0; } } /* ============================================================ AÑADIDOS · auditoría móvil (iOS zoom + tarjetas legibles) ============================================================ */ @media (max-width: 640px) { /* CRÍTICO: con font-size < 16px iOS hace zoom al enfocar un campo. 16px lo evita; min-height 44px = tap-target cómodo (guía Apple/Google). */ input, select, textarea, .form-row input, .form-row select, .form-row textarea, .form-field input, .form-field select, .form-field textarea { font-size: 16px; min-height: 44px; } textarea { min-height: 100px; } /* Botones y CTA: altura mínima cómoda para el dedo */ button, .btn, [class*="cta"] a, a[class*="btn"] { min-height: 44px; } } @media (max-width: 560px) { /* Rejillas de tarjetas → 1 columna: nada de micro-columnas ilegibles. Solo en móvil pequeño; desktop y tablet intactos. */ [class*="grid"] { grid-template-columns: 1fr !important; } .trust-bar, .process__steps, .form-row, .form-row-grid, .pro-hook__cards, .mant-elec__cols, .alta__checks { grid-template-columns: 1fr !important; } }