/* ═══════════════════════════════════════════════════════════════ AIMA · assets/aima-movil.css UNA sola hoja para el comportamiento en móvil de TODA la web. Se carga la última del en las 30 páginas. ── POR QUÉ ESTA HOJA ES CORTA ──────────────────────────────── Antes de escribirla medí la web de verdad, con el navegador a ancho de móvil. Lo que salió: · Los títulos NO son grandes de más. En el portafolio un h1 mide 21 px en pantalla estrecha. Estuve a punto de forzarlos a 38 px "para arreglarlos" — los habría hecho el doble de grandes y habría roto el diseño. No se tocan. · La letra pequeña (10-10,5 px) son etiquetas y notas al pie, no texto de leer. Están así a propósito. No se tocan. · Lo que SÍ estaba mal: el rebote infinito al llegar abajo, los campos de formulario que hacen que iOS te dé zoom, y el asistente pegado a la barra de inicio del iPhone. Así que esta hoja arregla eso y no se mete en el diseño. Si en el futuro hay que retocar el móvil, se retoca AQUÍ y cambia en todas las páginas de golpe. ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 1 · EL TOPE — la página no baja más allá del final ══════════════════════════════════════════════════════════════ Esto es lo que arreglaba el "sigo bajando y solo hay blanco". No era un hueco en el diseño: no había nada de más al final. Era el rebote elástico del navegador (overscroll), que en móvil te deja arrastrar la página más allá del final y enseña el fondo del sistema. Se apaga. Y por si algún navegador viejo lo ignora, al se le da el mismo color con el que acaba el pie, así lo que asomaría es color de marca y no blanco. */ html{ overscroll-behavior:none; /* ni rebote ni "tirar para recargar" */ overscroll-behavior-y:none; background:var(--bone,#F2F2F0); /* el color con el que acaba el pie */ -webkit-text-size-adjust:100%; /* Safari no agranda la letra por su cuenta */ text-size-adjust:100%; } body{ overscroll-behavior-y:none; min-height:100dvh; /* páginas cortas: el fondo llega abajo del todo */ } /* El corte horizontal, en los DOS. Si solo se pone en , iOS lo ignora y aparece una franja lateral gris al arrastrar de lado. Se usa "clip" y no "hidden" a propósito: hidden convertiría al en una caja con scroll propio y rompería el recorrido de la portada. clip corta y ya. */ html,body{ max-width:100%; overflow-x:clip; } @supports not (overflow:clip){ body{overflow-x:hidden} } /* Nada puede sobresalir a lo ancho */ img,video,canvas,iframe{max-width:100%} /* ══════════════════════════════════════════════════════════════ 2 · MÓVIL — los detalles que separan "web" de "app" ══════════════════════════════════════════════════════════════ */ @media (max-width:560px){ /* ── 2.1 · Tacto ────────────────────────────────────────────── Sin el destello gris de Android al tocar, y sin el retardo del doble toque para hacer zoom. Es lo que hace que responda como una app y no como una página. */ a,button,summary,label,[role=button], input,select,textarea{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } button,a.btn,a.cta,.boton,[role=button]{ -webkit-user-select:none; user-select:none; } /* ── 2.2 · Los campos, a 16 px ──────────────────────────────── Este es de los que más se notan. Si un campo tiene la letra por debajo de 16 px, Safari hace zoom automático al tocarlo y te descoloca la pantalla entera; y al salir no siempre vuelve. En el portafolio había 15 campos así. */ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; } /* ── 2.3 · Botones de acción bajo el dedo ───────────────────── Solo los botones de VERDAD (enviar, reservar, comprar). Ojo: esto NO toca los botones redondos de icono (menú, cerrar, mudo), que miden 38×38 a propósito — estirarlos los volvería óvalos. Y tampoco toca los enlaces dentro de un párrafo: forzarles altura rompería el texto. */ a.btn, a.cta, .btn, .cta, .boton, .p-ops button, .p-ops a, button[type=submit], input[type=submit], input[type=button]{ min-height:44px; } /* ── 2.4 · Aire lateral con muesca ──────────────────────────── Que el contenido no se meta debajo de la muesca ni de las esquinas redondeadas cuando el móvil está tumbado. */ .wrap, .contenedor, .container, .inner, #pie .wrap{ padding-left:calc(clamp(16px,4.6vw,22px) + env(safe-area-inset-left)); padding-right:calc(clamp(16px,4.6vw,22px) + env(safe-area-inset-right)); } /* ── 2.5 · Palabras que se salían ───────────────────────────── Correos, URLs y nombres largos partiendo la caja. No cambia ningún tamaño de letra: solo permite partir la palabra. */ p,li,td,dd,figcaption,.pie-col a{ overflow-wrap:anywhere; } /* ── 2.6 · El pie, a una columna ────────────────────────────── Es la única rejilla que de verdad se quedaba estrecha. */ .pie-cols{grid-template-columns:1fr !important} .pie-mid, .pie-base{ flex-direction:column; align-items:flex-start; gap:14px; } .pie-base-links{gap:10px} .pie-base-links i.sep{display:none} /* sitio para la barra de inicio del iPhone */ #pie, footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))} /* ── 2.7 · Tablas que no caben ──────────────────────────────── Se deslizan solas en vez de romper el ancho de la página. */ .tabla, .tabla-envoltorio{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; /* al llegar al borde no arrastra la página */ } /* ── 2.8 · Cajas con scroll propio, contenidas ──────────────── Así el gesto no se "escapa" y arrastra la página de fondo cuando llegas al final del chat o de una lista. */ .po-scroll, .ami-msgs, #ami-msgs, .re-pista, .amiv-stage{ overscroll-behavior:contain; } /* ── 2.9 · El asistente AMI, por encima de la barra de inicio ─ Estaba quedando justo debajo del dedo de "volver al inicio". */ #ami-widget{ right:max(14px, env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); } .ami-panel{ bottom:calc(12px + env(safe-area-inset-bottom)) !important; height:min(72dvh,600px) !important; } .amiv-card{height:min(80dvh,720px)} } /* ══════════════════════════════════════════════════════════════ 3 · MÓVIL TUMBADO — que la cabecera no se coma la pantalla ══════════════════════════════════════════════════════════════ */ @media (max-height:480px) and (orientation:landscape){ .promo{display:none} .ami-panel{height:min(88dvh,420px) !important} } /* ══════════════════════════════════════════════════════════════ 4 · QUIEN PREFIERE MENOS MOVIMIENTO (ajuste del sistema operativo, no del navegador) ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }