/*========================================================== RESPONSIVE GENERAL ITEMCOL S.A.S Cargar SIEMPRE de ultimo en el ==========================================================*/ /*========================================================== BASE - EVITA DESBORDES HORIZONTALES ==========================================================*/ *, *::before, *::after{ box-sizing:border-box; } html, body{ max-width:100%; overflow-x:hidden; } img, video, iframe{ max-width:100%; } /*========================================================== TITULOS FLUIDOS (se ajustan solos a cualquier pantalla) ==========================================================*/ .titulo h2{ font-size:clamp(1.9rem, 5vw, 3rem); line-height:1.2; } .titulo p{ font-size:clamp(.95rem, 2vw, 1.05rem); } .titulo span{ font-size:clamp(.75rem, 2vw, .9rem); letter-spacing:2px; } /*========================================================== NUMEROS DECORATIVOS DE FONDO (en movil se salian de la pantalla) ==========================================================*/ .empresa::before, .servicios::before, .proyectos::before, .galeria::before, .maquinaria::before, .valores::before, .porque::before, .clientes::before, .contacto::before{ font-size:clamp(90px, 22vw, 260px); pointer-events:none; } /*========================================================== TABLET (hasta 1024px) ==========================================================*/ @media (max-width:1024px){ section{ padding-left:6%; padding-right:6%; } .titulo{ margin-bottom:50px; } /* GRIDS A 2 COLUMNAS */ .contenedor-servicios, .contenedor-servicos, .maquinas-grid, .porque-grid, .galeria-grid, .contenedor-proyectos{ grid-template-columns:repeat(2,1fr); } .contacto-grid, .empresa .container, .hero-container{ grid-template-columns:1fr; display:grid; gap:40px; } .footer-grid{ grid-template-columns:repeat(2,1fr); gap:35px; } .mision-vision{ grid-template-columns:1fr; } } /*========================================================== TABLET PEQUENA / MOVIL GRANDE (hasta 800px) Coincide con el breakpoint del menu ==========================================================*/ @media (max-width:800px){ section{ padding-top:80px; padding-bottom:80px; } /* TODO A UNA COLUMNA */ .contenedor-servicios, .contenedor-servicos, .maquinas-grid, .porque-grid, .contenedor-proyectos, .empresa-cajas{ grid-template-columns:1fr; gap:25px; } .galeria-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } .contenedor-valores{ grid-template-columns:repeat(3,1fr); } .clientes-contenedor{ flex-wrap:wrap; justify-content:center; gap:25px; } /* HERO */ .hero{ min-height:auto; padding:140px 6% 80px; text-align:center; } .hero h1{ font-size:clamp(2rem, 7vw, 3rem); } .hero-buttons{ justify-content:center; flex-wrap:wrap; } /* MISION Y VISION */ .mision-vision{ display:grid; grid-template-columns:1fr; gap:25px; } } /*========================================================== MOVIL (hasta 576px) ==========================================================*/ @media (max-width:576px){ section{ padding-left:5%; padding-right:5%; padding-top:70px; padding-bottom:70px; } .container{ width:100%; } .titulo{ margin-bottom:40px; } /* ABSOLUTAMENTE TODO A UNA COLUMNA */ .galeria-grid, .contenedor-valores, .footer-grid{ grid-template-columns:1fr; gap:20px; } /* TARJETAS MAS COMPACTAS */ .servicio, .maquina-info, .razon, .caja, .check, .info-box{ padding:25px 20px; } .maquina-imagen, .proyecto-imagen, .galeria-item img, .galeria-item video{ height:220px; } /* HERO */ .hero{ padding:120px 5% 60px; } .hero-subtitle{ font-size:12px; } .hero-buttons a{ width:100%; text-align:center; } /* BOTONES Y FORMULARIO */ .btn-primary, .btn-secondary{ display:block; width:100%; } .formulario input, .formulario textarea, .formulario button{ width:100%; } /* MAPA */ .mapa iframe{ width:100%; height:260px; } /* FOOTER */ .footer-grid{ text-align:center; } .redes{ justify-content:center; } .footer-bottom{ text-align:center; font-size:.85rem; } /* TEXTO MAS LEGIBLE */ p, li{ font-size:15px; line-height:1.7; } } /*========================================================== MOVIL MUY PEQUENO (hasta 400px) ==========================================================*/ @media (max-width:400px){ .titulo h2{ font-size:1.6rem; } .maquina-imagen, .galeria-item img, .galeria-item video{ height:190px; } .servicio, .razon, .caja{ padding:22px 16px; } }