/* ===================================================================== Hamilton Colombia — capa de correcciones de UI/UX y mobile Se carga DESPUÉS del CSS de Next.js, así que gana en la cascada. Todo son ajustes de presentación: no altera el HTML ni el JS. Para revertir cualquier bloque, coméntalo o borra el del . ===================================================================== */ /* --------------------------------------------------------------------- 1. Base móvil --------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; /* iOS no reescala el texto al girar */ text-size-adjust: 100%; } html, body { max-width: 100%; overflow-x: hidden; /* red de seguridad contra desbordes */ } /* Feedback táctil discreto en vez del recuadro azul por defecto */ a, button, [role="button"] { -webkit-tap-highlight-color: rgba(180, 83, 9, 0.15); } /* --------------------------------------------------------------------- 2. Anclas del menú bajo la barra fija Antes: al pulsar "Productos" el título quedaba tapado por la barra. --------------------------------------------------------------------- */ section[id], footer[id] { scroll-margin-top: 88px; } @media (max-width: 767px) { section[id], footer[id] { scroll-margin-top: 80px; } } /* --------------------------------------------------------------------- 3. Cabecera: en móvil medía 96 px (más que en escritorio, 64 px) --------------------------------------------------------------------- */ @media (max-width: 767px) { nav .h-24 { height: 4.5rem !important; /* 96px -> 72px */ } nav a img { height: 2.75rem !important; /* logo 56px -> 44px */ } nav .text-lg { font-size: 1.0625rem; line-height: 1.2; } } /* --------------------------------------------------------------------- 4. Hero / carrusel en móvil Antes: la imagen llevaba scale(1.2) dentro de una caja de 250 px con object-contain. Resultado: se recortaban ~37 px por cada lado (el texto del banner quedaba cortado) y sobraban ~170 px de espacio vacío. Ahora: banner completo, sin recorte y sin hueco. --------------------------------------------------------------------- */ @media (max-width: 767px) { #inicio .h-\[250px\] { height: auto !important; } #inicio .h-\[250px\] > div { height: auto !important; } #inicio img { transform: none !important; /* quita scale-[1.2] */ width: 100% !important; height: auto !important; aspect-ratio: 3 / 1; /* reserva el espacio: evita saltos (CLS) */ object-fit: contain; display: block; } #inicio section, #inicio { padding-top: 0.75rem; padding-bottom: 0.75rem; } } /* La imagen del hero es la LCP: reserva su espacio también en escritorio */ #inicio img { aspect-ratio: 3 / 1; } /* --------------------------------------------------------------------- 5. Áreas táctiles de 44x44 px (Google Mobile Usability / WCAG 2.5.8) Eran 39 elementos por debajo del mínimo; los puntos del carrusel, 12 px. Se agranda el área de toque SIN cambiar el aspecto visual. --------------------------------------------------------------------- */ /* --- Puntos de los carruseles ------------------------------------- */ /* Se agrandan un poco y, sobre todo, se les da un área de toque alta. El ensanchado horizontal se mantiene por debajo del hueco entre puntos para que dos vecinos nunca se roben la pulsación. */ [aria-label^="Ir a slide"], [aria-label^="Ir al video"], .flex.justify-center.gap-2.mt-8 > button { position: relative; } [aria-label^="Ir a slide"]::after, [aria-label^="Ir al video"]::after, .flex.justify-center.gap-2.mt-8 > button::after { content: ""; position: absolute; inset: -14px -5px; border-radius: 9999px; } @media (max-width: 767px) { [aria-label^="Ir a slide"], .flex.justify-center.gap-2.mt-8 > button { width: 1rem !important; height: 1rem !important; } [aria-label^="Ir al video"] { height: 0.75rem !important; } [aria-label^="Ir al video"]:not(.w-6) { width: 0.75rem !important; } /* Un poco más de separación para poder ensanchar el área sin solapes */ .absolute.bottom-4.flex.gap-2 { gap: 0.75rem; } [aria-label^="Ir al video"]::after { inset: -14px -6px; } } /* --- Flechas de los carruseles ------------------------------------ */ [aria-label="Imagen anterior"], [aria-label="Siguiente imagen"], [aria-label="Video anterior"], [aria-label="Siguiente video"], #productos .rounded-2xl > button, nav button, [aria-haspopup="dialog"] { min-width: 44px; min-height: 44px; } /* --- Cabecera y pie ----------------------------------------------- */ nav a.text-lg { display: inline-flex; align-items: center; min-height: 44px; } footer a[aria-label] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } footer .hover\:text-yellow-400 { display: inline-flex; align-items: center; min-height: 44px; } /* Botones y enlaces de acción: altura cómoda para el pulgar */ @media (max-width: 767px) { a > button, button.h-10 { min-height: 48px; } } /* --------------------------------------------------------------------- 6. Contraste de texto (WCAG AA) El sitio forzaba `color:#f59e0b !important` para todo el texto naranja: 2,03:1 sobre el fondo claro — muy por debajo del mínimo (4,5:1 / 3:1). Se sustituye por ámbar 700, que mantiene el tono de marca y cumple. Solo afecta al texto sobre fondo claro: la cabecera azul no se toca. --------------------------------------------------------------------- */ main .text-orange-600, main .text-orange-600 span, main h2 .text-orange-600, main h3.text-orange-600, main h4.text-orange-600, section .text-orange-600, section .text-orange-600 span { color: #b45309 !important; /* 4,86:1 sobre el fondo — AA */ } /* Nombres de los testimonios (20 px, sin negrita: necesitan 4,5:1) */ main .text-yellow-500, section .text-yellow-500 { color: #b45309 !important; } /* Texto secundario: estaba en 4,49:1, justo por debajo del mínimo */ :root { --muted-foreground: 215 25% 35%; /* 4,49:1 -> 7,3:1 */ } /* Botones de acción con texto blanco: los fondos eran demasiado claros. Se oscurecen un paso manteniendo el color. Si prefieres el tono original, borra este bloque (perderás el cumplimiento AA). */ button.bg-blue-500, .fixed.bottom-6 button.bg-blue-500 { background-color: #1d4ed8 !important; /* 3,68:1 -> 6,3:1 */ } button.bg-blue-500:hover, .fixed.bottom-6 button.bg-blue-500:hover { background-color: #1e40af !important; } /* Botón flotante de WhatsApp. Usa el verde exacto del icono whats.png (#00DB40, el 72 % de sus píxeles), para que botón e icono no desentonen. El contraste se resuelve oscureciendo el texto en vez del fondo: el blanco sobre ese verde daba 1,98:1; este verde muy oscuro sobre el mismo fondo da 7,96:1. */ .fixed.bottom-6 > a > button { background-color: #00db40 !important; /* Llevaba justify-between: el texto pegado a la izquierda y el icono a la derecha, separados por todo el ancho. Se agrupan en el centro. */ justify-content: center !important; gap: 0.5rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } .fixed.bottom-6 > a > button:hover { background-color: #00c438 !important; } .fixed.bottom-6 > a > button span { color: #052e16 !important; /* 1,98:1 -> 7,96:1 */ font-weight: 600; } /* El aro que late alrededor del botón iba en #25D366: mismo verde que el botón */ .fixed.bottom-6 .animate-ping { background-color: #00db40 !important; } .fixed.bottom-6 button.bg-green-500 { background-color: #15803d !important; } .fixed.bottom-6 button.bg-purple-500 { background-color: #7e22ce !important; /* 3,0:1 -> 7,0:1 */ } /* --------------------------------------------------------------------- 7. Foco visible para teclado (no había indicador propio) --------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; border-radius: 8px; } /* --------------------------------------------------------------------- 8. El botón flotante de WhatsApp tapaba el final del pie de página --------------------------------------------------------------------- */ footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem) !important; } .fixed.bottom-6 { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important; } /* --------------------------------------------------------------------- 9. Respeto por "reducir movimiento" (accesibilidad del sistema) El sitio anima 19 bloques durante 1 s y el carrusel gira cada 3 s. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Que nada quede invisible si la animación de entrada no llega a correr */ .opacity-0.translate-y-10 { opacity: 1 !important; transform: none !important; } .animate-ping, .animate-pulse, .animate-bounce { animation: none !important; } } /* --------------------------------------------------------------------- 10. Vídeos: que no ocupen toda la pantalla en móvil --------------------------------------------------------------------- */ @media (max-width: 767px) { video { max-height: 65vh; height: auto; } } /* --------------------------------------------------------------------- 11. Detalles de legibilidad --------------------------------------------------------------------- */ @media (max-width: 767px) { p, li { line-height: 1.6; } /* Evita palabras cortadas de forma rara en pantallas estrechas */ h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; } } /* El aro decorativo `animate-ping` se salía 68 px del viewport */ .animate-ping { max-width: 100%; }