<style>
/* ============================================================
CARRUSEL SCROLLABLE HORIZONTAL - HTML / CSS
------------------------------------------------------------
- Centrado en escritorio (desde 1024px)
- Scroll táctil natural en móvil
- Cards alineadas vertical y horizontalmente
- Espaciado de 0.5em entre ícono y título
- Efecto de zoom en PC (hover) y móvil (tap)
============================================================ */
/* ---------- CONTENEDOR PRINCIPAL ---------- */
.carousel {
display: flex; /* Flex layout para scroll horizontal */
overflow-x: auto; /* Habilita desplazamiento horizontal */
overflow-y: visible; /* Evita recortes en hover */
list-style: none; /* Elimina viñetas */
scroll-behavior: smooth; /* Desplazamiento suave */
gap: 12px; /* Espacio entre cards */
margin: 0 auto;
padding: 10px 0.3em 1em; /* Laterales 0.3em / inferior 1em */
background: transparent;
justify-content: flex-start; /* Base móvil (inicio a la izquierda) */
scrollbar-color: #d9dee2 #f3f5f6; /* Scrollbar color (Firefox) */
scrollbar-width: thin;
}
/* ---------- Scrollbar (WebKit: Chrome, Edge, Safari) ---------- */
.carousel::-webkit-scrollbar { height: 10px; }
.carousel::-webkit-scrollbar-thumb {
background: #d9dee2;
border-radius: 4px;
}
.carousel::-webkit-scrollbar-thumb:hover { background: #b8bfc4; }
.carousel::-webkit-scrollbar-track {
background: #f3f5f6;
border-radius: 4px;
margin: 4px;
}
/* ---------- CARDS ---------- */
.carousel li {
flex: 0 0 160px; /* Ancho fijo card */
background: #012436; /* Fondo azul oscuro */
border-radius: 14px;
text-align: center;
box-sizing: border-box;
padding: 14px 8px 12px;
transition: transform 0.25s ease; /* Animación de escala */
display: flex; /* Alineación vertical */
flex-direction: column;
justify-content: center; /* Centra verticalmente ícono + texto */
align-items: center; /* Centra horizontalmente */
z-index: 0;
}
/* Márgenes laterales (para evitar cortes en extremos) */
.carousel li:first-child { margin-left: 0.3em; }
.carousel li:last-child { margin-right: 0.3em; }
/* Hover (solo PC) */
@media (hover:hover) {
.carousel li:hover {
transform: scale(1.05);
z-index: 1;
}
}
/* Tap/Active para móviles (simula hover) */
@media (hover:none) {
.carousel li:active {
transform: scale(1.05);
transition: transform 0.25s ease;
z-index: 1;
}
}
/* ---------- ENLACES Y CONTENIDO INTERNO ---------- */
.carousel a {
text-decoration: none; /* Elimina subrayado */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Imagen en la card */
.carousel img {
width: 78px;
height: 78px;
object-fit: contain;
margin-bottom: 0.5em; /* Espacio entre ícono y texto */
}
/* Texto en la card */
.carousel span {
color: #fff;
font-size: 15px;
line-height: 1.2;
font-weight: 600;
}
/* ---------- CENTRADO SOLO EN ESCRITORIO ---------- */
@media (min-width:1024px) {
.carousel {
justify-content: center; /* Centra las cards horizontalmente */
}
}
/* ---------- RESPONSIVE (MÓVIL) ---------- */
@media (max-width:600px) {
.carousel li {
flex: 0 0 105px; /* Cards más compactas */
padding: 8px 4px;
}
.carousel img {
width: 42px;
height: 42px;
margin-bottom: 0.5em; /* Mantiene armonía visual */
}
.carousel span {
font-size: 12px;
}
}
</style>
<!-- ============================================================
ESTRUCTURA HTML.
Cada <li> = una card con imagen e ítem enlazado
============================================================ -->
<ul class="carousel">
<li><a href="#"><img src="https://blexa.com.ar/wp-content/uploads/2025/08/Semillas.png" alt="Semillas"><span>Semillas</span></a></li>
<li><a href="#"><img src="https://blexa.com.ar/wp-content/uploads/2025/08/Proteccion-de-cultivos-BLEXA.png" alt="Protección de Cultivos"><span>Protección de Cultivos</span></a></li>
<li><a href="#"><img src="https://blexa.com.ar/wp-content/uploads/2025/08/Nutricion-de-cultivos-BLEXA.png" alt="Nutrición de Cultivos"><span>Nutrición de Cultivos</span></a></li>
<li><a href="#"><img src="https://blexa.com.ar/wp-content/uploads/2025/08/Lubricantes.png" alt="Lubricantes"><span>Lubricantes</span></a></li>
<li><a href="#"><img src="https://blexa.com.ar/wp-content/uploads/2025/08/Combustibles.png" alt="Combustibles"><span>Combustibles</span></a></li>
<li><a href="#"><img src="https://blexa.com.ar/wp-content/uploads/2025/08/Almacenaje.png" alt="Almacenaje"><span>Almacenaje</span></a></li>
</ul>
0 Comentarios