/* Importo la fuente Poppins desde Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap");
/* ===== Reset y estilos base ===== */
/* Aplica box sizing border-box para que padding y borde no afecten el ancho/alto */
* {
box-sizing: border-box; /* Asegura que el padding y el borde no agranden el elemento */
padding: 0; /* Elimina padding por defecto */
margin: 0; /* Elimina márgenes por defecto */
}
/* Suaviza el scroll al navegar por anclas internas */
html {
scroll-behavior: smooth;
}
/* Estilo base del */
body {
margin: 2rem 0 0 0; /* Margen superior de 2rem */
font-family: "Poppins", sans-serif; /* Fuente base del sitio */
font-size: 1rem; /* Tamaño de texto por defecto */
background: linear-gradient(90deg, #183da4 0%, #08174a 50%); /* Fondo degradado horizontal azul */
color: #fff; /* Texto blanco predeterminado */
}
/* Encabezado principal (h1) */
h1 {
color: #fff; /* Color blanco */
font-weight: 600; /* Peso seminegrita */
}
/* Encabezados secundarios (h2, h3, h4) */
h2,
h3,
h4 {
color: #fff; /* Color blanco */
font-weight: 600; /* Peso seminegrita */
}
/* Elimina viñetas en listas */
ul {
list-style: none;
}
/* Elimina subrayado en enlaces */
a {
text-decoration: none;
}
/* Imágenes responsivas: nunca más anchas que su contenedor */
img { max-width: 100%; height: auto; }
/* Quita bordes y resaltes en botones e inputs */
button,
input {
border: none;
outline: none;
}
/* Botones básicos: interactividad y fuente */
button {
cursor: pointer; /* Cambia el cursor al pasar por encima */
font-family: "Poppins", sans-serif; /* Fuente igual que el resto del sitio */
font-size: 0.938rem; /* Tamaño levemente menor a 1rem */
}
/* =================================== */
/* ===== Secciones reutilizables ===== */
/* =================================== */
/* Define el padding superior e inferior para secciones del sitio */
.section {
padding: 2rem 0 2rem;
}
/* Títulos de sección: centrados, grandes y con separación */
.sectiontitle {
font-size: 2.25rem !important; /* Tamaño grande, con !important por seguridad */
margin-bottom: 2rem; /* Separación inferior */
text-align: center; /* Centrado horizontal */
}
/* Contenedor con ancho máximo y márgenes laterales */
.container {
max-width: 968px; /* Anchura máxima */
margin-left: 1.5rem; /* Espaciado lateral izquierdo */
margin-right: 1.5rem; /* Espaciado lateral derecho */
}
/* Clase utilitaria para aplicar display: grid */
.grid {
display: grid;
}
/* Contenedor principal del sitio */
.main {
overflow: hidden; /* Oculta desbordes de contenido */
}
/* ===================================================== */
/* =================================== */
/* ===== Encabezado y navegación ===== */
/* =================================== */
/* Barra fija superior con fondo degradado, Encabezado */
.header {
width: 100%; /* Ocupa todo el ancho del viewport */
background: linear-gradient(90deg, #183da4 0%, #08174a 50%); /* Fondo con degradado azul */
position: fixed; /* Permanece fijo en la parte superior */
top: 0; /* Alineado al borde superior */
left: 0; /* Alineado al borde izquierdo */
z-index: 100; /* Se asegura de estar por encima de otros elementos */
}
/* Nav interna: alto fijo, flexbox centrado y distribuido */
.nav {
height: 2.5rem; /* Altura del área de navegación */
display: flex; /* Layout en fila */
justify-content: space-between; /* Espacio entre los elementos extremos */
align-items: center; /* Centra verticalmente los elementos */
}
/* Logo e ícono dentro del nav alineados */
.navL {
display: flex; /* Organiza el logo e ícono en una fila */
align-items: center; /* Alineación vertical centrada */
column-gap: 0.5rem; /* Espacio horizontal entre logo y texto */
font-weight: 800; /* Grosor de fuente medio */
}
/* Tamaño del ícono del logo */
.navL-img {
width: 0.925rem; /* Define el ancho del logo */
}
/* Color blanco para enlaces e icono de navegación */
.navLink,
.navL,
.navToggle,
.navclose {
color: #fff; /* Blanco para íconos y enlaces */
}
/* Ícono del toggle del menú (mobile) */
.navToggle {
font-size: 1.25rem; /* Tamaño del icono */
cursor: pointer; /* Muestra que es clickeable */
}
/* Estilo mobile: menú oculto arriba, transición */
@media (max-width: 767px) {
.navM {
position: fixed; /* Permanece fijo cuando se abre */
width: 100%; /* Ocupa todo el ancho */
background: #000c32; /* Fondo azul oscuro */
top: -150%; /* Inicialmente oculto fuera de la vista */
left: 0; /* Alineado al borde izquierdo */
padding: 2.5rem 0; /* Espaciado interno superior e inferior */
transition: 0.4s; /* Transición suave al mostrar/ocultar */
z-index: 100; /* Encima de otros elementos */
border-radius: 0 0 1.5rem 1.5rem; /* Bordes redondeados en la parte inferior */
}
}
/* Icono de cierre del menú */
.navclose {
font-size: 1.8rem; /* Tamaño del icono */
position: relative; /* Posicionamiento dentro del menú */
top: 0.5rem; /* Desde arriba */
right: 0.7rem; /* Desde la derecha */
cursor: pointer; /* Interactivo */
}
/* Lista vertical de enlaces en móvil */
.navList {
display: flex; /* Layout en columna */
flex-direction: column; /* Dirección vertical */
align-items: center; /* Centrado horizontal */
row-gap: 1.5rem; /* Espaciado vertical entre elementos */
}
/* Estilo de enlaces: uppercase y transición */
.navLink {
text-transform: uppercase; /* Mayúsculas */
font-weight: 900; /* Negrita fuerte */
transition: 0.4s; /* Transición suave al interactuar */
}
/* Hover sobre enlaces */
.navLink:hover {
color: #ec4d4d; /* Rojo al pasar el mouse */
}
/* Muestra el menú cuando tiene clase show-menu */
.show-menu {
top: 0; /* Lo baja para que sea visible */
}
/* Cambia el fondo del header cuando se hace scroll */
.scroll-header {
background: #000c32; /* Aplica fondo sólido cuando se activa scroll */
}
/* Estilos para el enlace activo (subrayado circular) */
.active-link {
position: relative; /* Necesario para colocar el pseudo-elemento */
}
.active-link::before {
content: ""; /* Elemento decorativo */
position: relative; /* Posicionado relativo al enlace */
bottom: -0.75rem; /* Debajo del enlace */
left: 45%; /* Centrado horizontalmente */
width: 10px; /* Ancho del punto */
height: 10px; /* Alto del punto */
background-color: rgba(0, 0, 0, 0.0); /* transparente o puedo elegir color */
border-radius: 50%; /* Hace que sea un círculo */
}
/* ===== Submenú desplegable ===== */
.nav-dropdown{ position: relative; }
/* base (desktop por defecto) */
.nav-submenu{
display: none;
position: absolute;
top: 0%; /* estaba en 150% -> lo bajaba demasiado */
left: 0;
background-color: #000c32;
padding: .75rem 1rem;
border-radius: 0 0 .5rem .5rem;
z-index: 1000;
min-width: 520px; /* ancho cómodo */
max-width: min(80vw, 900px);
max-height: 70vh; /* scroll interno si es muy alto */
overflow-y: auto;
box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.nav-dropdown.open > .nav-submenu{ display:block; }
.nav-submenu li{ margin: .1rem 0; }
.nav-submenu .navLink{
display:flex; align-items:center; gap:.6rem;
padding:.55rem .6rem; border-radius:.5rem;
color:#fff; font-weight:400; text-transform:none;
white-space:normal; /* permite 2 líneas */
}
.nav-submenu .navLink:hover{ background:#1a275c; }
.nav-icon{ width:24px; height:24px; object-fit:contain; flex-shrink:0; }
/* === Móvil (≤767px): el submenú se vuelve “en línea” dentro del panel */
@media (max-width: 767px){
.navM{ padding:3.5rem 1rem 1.25rem; max-height:100vh; overflow-y:auto; }
.navList{ flex-direction:column; align-items:stretch; row-gap:.75rem; }
.nav-dropdown{ position: static; }
.nav-submenu{
position: static;
display: none;
background: transparent;
box-shadow: none;
border-radius: 0;
padding: .25rem 0 0;
min-width: 0; max-width:none; max-height:none; overflow:visible;
}
.nav-dropdown.open > .nav-submenu{ display:block; }
.nav-submenu .navLink{ padding:.6rem 0 .6rem 2rem; }
.nav-submenu .nav-icon{ width:22px; height:22px; }
.dropbtn::after{ content:"▾"; margin-left:.35rem; font-size:.85em; }
}
/* ===================================================== */
/* ================================= */
/* ===== Sección HOME (Inicio) ===== */
/* ================================= */
/* Espacio entre filas dentro del contenedor home */
.homecont {
row-gap: 1rem; /* Separa verticalmente los elementos del grid dentro de home */
}
/* Grupo contenido: grid con padding superior */
.homegroup {
display: grid; /* Usa grid layout para el grupo de elementos */
position: relative; /* Permite posicionar elementos hijos de forma absoluta si se desea */
padding-top: 1rem; /* Espacio superior dentro del contenedor */
}
/* Imagen principal ajustada al contenedor */
.homeimg {
height: 350px; /* Altura fija para la imagen principal */
width: 100%; /* Ocupa el 100% del ancho de su contenedor */
justify-self: center; /* Centra horizontalmente la imagen dentro de la celda */
}
/* Título principal con tamaño grande y peso 900 */
.hometitle {
font-size: 3.5rem; /* Tamaño muy grande del texto */
font-weight: 800; /* Grosor máximo de fuente (negrita fuerte) */
line-height: 50%; /* Altura de línea relativa al tamaño de fuente */
margin-bottom: 0rem; /* Espacio debajo del título */
vertical-align: middle;
}
/* Texto descriptivo con margen inferior */
.homedes {
margin-bottom: 0.5rem; /* Espacio debajo del párrafo descriptivo */
}
.home-icon {
width: 70px;
height: auto;
vertical-align: middle;
margin-right: 0.2px;
}
/* === FIX HERO IMAGE (no más achatada) === */
.homecont {
align-items: center; /* centra verticalmente texto e imagen */
}
.homeimg, .homeimg1 { /* unificamos ambas clases por las dudas */
width: min(48vw, 620px); /* limita el ancho responsivo */
height: auto; /* mantiene proporción (clave) */
max-height: 60vh; /* opcional: nunca más alta que 60% del viewport */
object-fit: contain; /* por si en algún breakpoint queda caja más grande */
}
/* Si en media queries tenías alturas fijas, las anulamos */
@media (min-width: 767px){
.homeimg, .homeimg1 { height: auto; }
}
@media (min-width: 992px){
.homeimg, .homeimg1 { height: auto; transform: none; }
}
/* ===================================================== */
/* Botones alinear en fila */
.homebut {
display: flex; /* Los botones hijos se disponen en fila (horizontal) */
}
.homebut a {
margin-left: 8px; /* Espacio a la izquierda entre botones */
}
/* Estilos de paginación del slider */
.swiper-pagination {
position: initial; /* Posición normal (por defecto), no se posiciona absolutamente */
margin-top: 1rem; /* Espacio superior respecto al contenido anterior */
}
.swiper-pagination-bullet {
width: 5px; /* Ancho de los puntitos del slider */
height: 5px; /* Alto de los puntitos del slider */
background-color: #fff; /* Color blanco */
opacity: 1; /* Totalmente visible */
}
.swiper-pagination-horizontal.swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 0.5rem; /* Separación horizontal entre bullets */
}
.swiper-pagination-bullet-active {
width: 1.5rem; /* El bullet activo se hace más largo */
height: 5px; /* Mantiene la altura */
border-radius: 0.5rem; /* Bordes redondeados para parecer una "píldora" */
}
/* ===================================================== */
/* =========================== */
/* ===== Botones comunes ===== */
/* =========================== */
.button {
display: inline-block; /* Hace que el botón se comporte como un elemento en línea pero con posibilidad de aplicar dimensiones */
background-color: #3678ff; /* Color de fondo del botón */
color: #fff; /* Color del texto (blanco) */
padding: 1rem 1.75rem; /* Espaciado interno: 1rem arriba/abajo, 1.75rem izquierda/derecha */
border-radius: 0.5rem; /* Bordes redondeados */
font-weight: 800; /* Grosor del texto medio */
transition: .3s; /* Suaviza los cambios de estilo (como el hover) en 0.3 segundos */
}
.button:hover {
background-color: #0557fc; /* Color del fondo cuando el mouse pasa sobre el botón */
}
.buttonicon {
font-size: 1.25rem; /* Tamaño de icono dentro del botón */
}
/* ===================================================== */
/* =========================== */
/* === Sección Categorías ==== */
/* =========================== */
.categorycontainer {
display: grid; /* Usa el sistema de grid CSS para organizar las categorías */
grid-template-columns: repeat(5, 1fr); /* Crea 5 columnas de igual ancho */
gap: 0.5rem; /* Espacio entre las columnas y filas */
justify-content: center; /* Centra horizontalmente el grid dentro del contenedor */
align-items: start; /* Alinea los ítems al inicio de cada celda (parte superior) */
}
.categorydata {
text-align: left; /* Alinea el texto a la izquierda dentro del bloque */
background-color: rgba(0, 0, 0, 0.0); /* Fondo completamente transparente */
padding: 0.01rem; /* Mínimo espacio interno para evitar bugs visuales */
border-radius: 0.5rem; /* Bordes redondeados del contenedor */
min-height: 100px; /* Altura mínima para asegurar tamaño uniforme */
display: flex; /* Flexbox para alinear verticalmente los elementos hijos */
flex-direction: column; /* Alinea los elementos en una columna */
align-items: center; /* Centra horizontalmente los elementos hijos */
justify-content: flex-start; /* Alinea los elementos en la parte superior */
}
.categoryimg {
width: 100px; /* Ancho fijo de la imagen */
height: 100px; /* Alto fijo de la imagen */
object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
margin-bottom: 0.5rem; /* Espacio debajo de la imagen */
display: block; /* Hace que se comporte como un bloque para mejor control */
}
.categorytitle {
font-size: 1.2rem; /* Tamaño de fuente del título */
font-weight: 140; /* Grosor de fuente (inusual, puede que no tenga efecto según la fuente usada) */
margin-bottom: 1rem; /* Espacio debajo del título */
}
.categorydescription {
font-size: 0.95rem; /* Tamaño de letra para la descripción */
line-height: 2; /* Altura de línea para mayor legibilidad */
}
/* ===================================================== */
/* ===== SECCIÓN SECTORES ===== */
.sectores-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
justify-items: start;
align-items: center;
}
.sector-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #fff;
font-size: 0.9rem;
}
.sector-item i {
font-size: 1.5rem;
color: #3678ff;
}
/* Responsive si querés ajustar tamaños */
@media (min-width: 992px) {
.sectores-container {
grid-template-columns: repeat(4, 1fr);
}
}
.sector-item img {
width: 24px;
height: auto;
}
/* ================================= */
/* === Sección Nosotros (About) ==== */
/* ================================= */
.about {
background-image: url("../img/about-img.png"); /* Imagen de fondo para la sección */
background-size: cover; /* Asegura que la imagen cubra todo el fondo sin distorsión */
background-position: center; /* Centra la imagen horizontal y verticalmente */
background-repeat: no-repeat; /* Evita que la imagen se repita */
position: relative; /* Necesario para colocar la superposición oscura encima */
padding: 5rem 2rem; /* Espacio interno (superior/inferior y laterales) */
}
.about::before {
content: ""; /* Crea un pseudo-elemento vacío para aplicar la superposición */
position: relative; /* Posicionamiento absoluto dentro del .about */
top: 0; left: 0; /* Empieza desde la esquina superior izquierda */
width: 100%; /* Cubre todo el ancho */
height: 100%; /* Cubre todo el alto */
background-color: rgba(0,0,0,0.9); /* Capa semitransparente para oscurecer el fondo */
z-index: 0; /* Ubica esta capa por debajo del contenido */
}
.aboutcontainer {
position: relative; /* Necesario para posicionar correctamente sobre el fondo */
z-index: 1; /* Coloca el contenido por encima de la superposición oscura */
background-color: rgba(0,0,0,0.8); /* Fondo oscuro con transparencia para destacar el texto */
border-radius: 1rem; /* Bordes redondeados */
padding: 2rem; /* Espaciado interno */
color: #fff; /* Texto en color blanco */
}
.aboutdata {
text-align: center; /* Centra horizontalmente el contenido de texto */
}
.aboutdescription {
margin-bottom: 2rem; /* Espacio debajo del párrafo */
line-height: 1.7; /* Altura de línea para mejorar la legibilidad */
text-align: justify; /* Alinea el texto de forma justificada en los márgenes */
}
.abouttitle {
margin-bottom: 1.5rem; /* Espacio debajo del título principal */
}
/* ==================================== */
/* === Sección Productos (product) ==== */
/* ==================================== */
/* Contenedor flexible con grid adaptativo */
.productcontainer {
display: grid; /* Usa el modelo de grid CSS para organizar los elementos en filas y columnas */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Crea tantas columnas como entren en el ancho disponible, cada una con un ancho mínimo de 220px y máximo de 1fr (fracción del espacio disponible) */
gap: 1.5rem; /* Espacio entre columnas y filas del grid */
justify-content: center; /* Centra las columnas horizontalmente dentro del contenedor si hay espacio adicional */
align-items: start; /* Alinea todos los elementos hijos en la parte superior de cada celda del grid */
margin: 0 auto; /* Centra todo el contenedor horizontalmente en la página (usando margen automático a los lados) */
max-width: 1200px; /* Limita el ancho máximo del contenedor a 1200px, útil para pantallas grandes */
padding: 0 1rem; /* Agrega un pequeño espacio a la izquierda y derecha del contenedor para evitar que el contenido toque los bordes */
}
/* Diseño uniforme de cada tarjeta */
.productcontent {
background: #000c32; /* Color de fondo oscuro */
border-radius: 1rem; /* Esquinas redondeadas */
padding: 1.2rem; /* Espacio interno */
max-width: 240px; /* Ancho máximo de cada tarjeta */
width: 100%; /* Que ocupe todo el ancho disponible dentro de su celda */
text-align: center; /* Centra el contenido de texto */
display: flex; /* Usa Flexbox para alinear contenido */
flex-direction: column; /* Alinea verticalmente los elementos internos */
align-items: center; /* Centra horizontalmente los elementos internos */
}
/* Imagen dentro de la tarjeta */
.productimg {
width: 100px; /* Ancho de la imagen */
height: 100px; /* Alto de la imagen */
object-fit: contain; /* Asegura que la imagen se escale sin deformarse */
margin-bottom: 0.8rem; /* Espacio debajo de la imagen */
}
/* Título destacado del producto */
.producttitle {
color: #ffffff; /* Texto blanco */
font-size: 1.1rem; /* Tamaño de fuente medio */
font-weight: 600; /* Negrita */
margin-bottom: 0.5rem; /* Espacio debajo del título */
}
/* Descripción o subtítulo del producto */
.productsubtitle {
font-size: 0.9rem; /* Tamaño de fuente más pequeño */
color: #fff; /* Color blanco */
line-height: 1.4; /* Espaciado entre líneas para facilitar lectura */
}
/* Define padding vertical para la sección de productos */
.section.product {
padding: 4rem 0; /* Espacio superior e inferior */
}
/* Estilo del título general de la sección */
.sectiontitle {
text-align: center; /* Centra el texto */
margin-bottom: 2rem; /* Espacio debajo del título */
}
/* Botón de acción dentro del producto (como agregar al carrito, si se usa) */
.productbutton {
display: inline-flex; /* Botón con layout flexible */
padding: .5rem; /* Relleno interno */
border-radius: .25rem .25rem .75rem .25rem; /* Bordes redondeados asimétricos */
position: relative; /* Posicionado relativo al contenedor padre */
right: -3rem; /* Inicialmente fuera de vista a la derecha */
bottom: 0; /* Alineado al fondo */
}
/* Icono dentro del botón */
.producticon {
font-size: 1.25rem; /* Tamaño del ícono */
color: #fff; /* Ícono blanco */
}
/* Efecto hover: imagen se levanta */
.productcontent:hover .productimg {
transform: translateY(-.5rem); /* Mueve la imagen hacia arriba al pasar el mouse */
}
/* Efecto hover: muestra el botón deslizando desde la derecha */
.productcontent:hover .productbutton {
right: 0; /* Trae el botón al borde derecho visible */
}
/* Variante con fondo de imagen personalizado */
.productcontent {
position: relative; /* Requiere para posicionar fondo y contenido */
border-radius: 1rem; /* Esquinas redondeadas */
padding: 1.2rem; /* Espacio interno */
max-width: 240px;
width: 100%;
text-align: left; /* Alineación del texto a la izquierda */
display: flex;
flex-direction: column;
align-items: center;
/* Imagen de fondo de cada tarjeta */
/* background-image: url('../img/fondo_producto-img.png'); /* Imagen de fondo personalizada */*/
background-size: cover; /* Asegura que la imagen cubra toda la tarjeta */
background-position: center; /* Centra la imagen de fondo */
/* Superposición oscura para facilitar lectura del texto */
background-color: rgba(0, 0, 0, 0.7); /* Color oscuro semi-transparente encima de la imagen */
background-blend-mode: darken; /* Mezcla el color oscuro con la imagen */
}
#bombas-engranajes .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#bombas-doble-tornillo .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#bombas-triple-tornillo .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#acoplamientos .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 1rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 1.5rem;
}
#reductores .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 0.5rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 0.5rem;
}
#reductores-sobre-eje .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#reductores-coaxiales .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#reductores-sinfin-corona .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#planetarios .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
#multiplicadores .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 1rem;
}
#repuestos .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 1rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 1rem;
}
#mantenimiento .productcontainer {
grid-template-columns: repeat(auto-fit, minmax(250px, 3rem));
max-width: 1100px;
margin: 0 auto;
justify-content: center;
gap: 2rem;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
}
/* ========================================================= */
/* ============================================== */
/* === Mapa de ubicación y datos de contacto ==== */
/* ============================================== */
.map-section {
padding: 1rem 1rem; /* Espacio interno alrededor del bloque completo */
background-color: rgba(0, 0, 0, 0.1); /* Fondo transparente para sobreponer sobre el fondo general */
color: white; /* Color de texto blanco para contraste */
}
/* CONTENEDOR FLEXIBLE QUE ADAPTA MAPA Y TEXTO */
.map-grid {
display: flex; /* Usa flexbox para organizar mapa y texto en línea */
flex-wrap: wrap; /* Permite que los elementos bajen en columnas en pantallas pequeñas */
gap: 2rem; /* Espacio entre los elementos hijos */
align-items: center; /* Alinea verticalmente al centro */
justify-content: center; /* Centra los elementos horizontalmente */
}
/* CONTENEDOR RESPONSIVO DEL MAPA */
.map-responsive {
flex: 1 1 500px; /* Permite crecer hasta ocupar espacio disponible mínimo 500px */
position: relative; /* Para posicionar el iframe dentro */
padding-bottom: 30%; /* Aspect ratio (proporción) para ajuste horizontal/vertical */
height: 0; /* Altura manejada solo por padding-bottom */
border-radius: 1rem; /* Bordes redondeados */
overflow: hidden; /* Oculta contenido que sobrepase el contenedor */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.0); /* Sombra suave alrededor */
}
/* IFRAME DEL MAPA AJUSTADO AL CONTENEDOR */
.map-responsive iframe {
position: absolute; /* Posición absoluta dentro del contenedor relative */
top: 0;
left: 0;
width: 100%; /* Ocupa todo el ancho del contenedor */
height: 100%; /* Ocupa toda la altura del contenedor */
border: 0; /* Sin borde alrededor del iframe */
}
/* CONTENEDOR DEL TEXTO DE LA DIRECCIÓN */
.map-info {
flex: 1 1 300px; /* Tamaño flexible con ancho mínimo de 300px */
max-width: 400px; /* Ancho máximo limitado para comodidad visual */
}
/* TÍTULO DE LA DIRECCIÓN */
.map-info h3 {
font-size: 1.5rem; /* Tamaño de título destacado */
margin-bottom: 1rem; /* Espacio abajo del título */
}
/* DETALLES DE LA DIRECCIÓN */
.map-info p {
font-size: 1rem; /* Tamaño de texto estándar legible */
line-height: 1.6; /* Interlinea espaciosa para buena lectura */
}
/* ========================================================= */
/* ============================================== */
/* === Sección de noticias (nuevo contenido) ==== */
/* ============================================== */
.newcontainer {
display: flex;
justify-content: center;
align-items: center;
}
.newcontent {
position: relative; /* Permite la posición del tag dentro */
background: #3c9ad0; /* Fondo con tono oscuro */
width: 242px; /* Ancho fijo para uniformidad */
padding: 2rem 0 1.5rem 0; /* Espacio vertical interno */
border-radius: .75rem; /* Bordes redondeados suaves */
text-align: center; /* Centra el texto, título e imagen */
overflow: hidden; /* Oculta elementos que sobresalgan */
}
.newtag {
position: relative; /* Posición relativa dentro del contenido */
top: 8%; /* Cordena vertical desde el top */
left: 8%; /* Coordenada horizontal desde el left */
background-color: rgba(0, 0, 0, 0.3); /* Fondo transparente para destacar etiqueta */
color: #ffffff; /* Texto blanco */
font-size: .813rem; /* Tamaño de fuente pequeño */
padding: .25rem .5rem; /* Espacio interno en la etiqueta */
border-radius: .25rem; /* Bordes redondeados pequeños */
}
.newtitle {
font-size: .938rem; /* Título de producto estilo compacto */
font-weight: 500; /* Seminegrita para destacar */
}
.newsubtitle {
display: block; /* Se acomoda en bloque independiente */
font-size: .813rem; /* Fuente más pequeña para subtítulo */
margin-bottom: .5rem; /* Separación inferior */
}
.newicon {
font-size: 1.25rem; /* Ícono con tamaño visible */
}
.newcontent:hover .newimg {
transform: translateY(-.5rem); /* Al pasar hover, la imagen sube ligeramente */
}
.newcontent:hover .newbutton {
right: 0; /* El botón se desliza hacia la vista al hacer hover */
}
/* ========================================================= */
/* =========================== */
/* === Sección Newsletter ==== */
/* =========================== */
.newsld {
text-align: center; /* Centra el texto */
margin-bottom: 1.5rem; /* Espacio inferior antes del formulario */
}
.newslf {
background: #3678ff; /* Fondo azul */
padding: 1rem; /* Espacio interno */
display: flex; /* Layout horizontal para inputs y botón */
justify-content: space-between; /* Ubica items en extremos */
border-radius: .75rem; /* Bordes redondeados */
}
.newslin {
width: 70%; /* Input ocupa el 70% del contenedor */
padding: 0 .5rem; /* Espacio interno horizontal */
background: none; /* Sin fondo para combinar */
color: #fff; /* Texto blanco */
}
.button2 {
display: inline-block;
background: #0557fc; /* Azul oscuro para botón */
color: #fff; /* Texto blanco */
padding: 1rem 1.75rem; /* Espacio interno amplio */
border-radius: 0.5rem; /* Bordes redondeados */
font-weight: 500; /* Seminegrita */
transition: .3s; /* Transición suave al hover */
}
.newslin::placeholder {
color: #fff; /* Color del placeholder en el input */
}
/* ========================================================= */
/* ====================== */
/* === Pie de Página ==== */
/* ====================== */
.footer {
position: relative; /* Posibles elementos internos absolutos */
overflow: hidden; /* Oculta overflow */
background-color: rgba(0, 0, 0, 0.0);
}
.footercontainer {
row-gap: 2rem; /* Espacio entre filas del grid */
}
.footerL {
display: flex;
align-items: center;
column-gap: .5rem;
margin-bottom: 3rem; /* antes era 1rem → ahora más espacio */
font-weight: 500;
color: #fff;
}
.footerL-img {
width: 170px; /* Tamaño específico del logo azul */
}
.footerdescription {
margin-bottom: 1rem; /* Separación entre descripción y redes */
}
.footersocial {
display: flex; /* Íconos de redes horizontales */
column-gap: 2.75rem; /* Espacio entre íconos */
}
.footersocial-link {
display: inline-flex; /* Ícono con contenedor estilo botón */
background: #365cd8; /* Fondo azul para cada ícono */
padding: 0.25rem; /* Espacio interno */
border-radius: 0.25rem; /* Bordes redondeados */
color: #fff; /* Ícono blanco */
font-size: 1rem;
}
.footertitle {
font-size: 1rem; /* Tamaño de título del bloque */
margin-bottom: 1rem;
}
.footerlinks {
display: grid; /* Lista como grid vertical */
row-gap: 0.2rem; /* Espacio entre links */
}
.footerlink {
font-size: 0.813rem; /* Tamaño pequeño */
color: #fff; /* Enlace blanco */
transition: .3s; /* Transición suave en hover */
}
.footerlink:hover {
color: #fff; /* Sin cambio (contraste mantiene) */
}
.footercopy {
display: block;
text-align: center;
font-size: .75rem; /* Texto más pequeño */
margin-top: 4.5rem; /* Espacio arriba */
}
/* ========================================================= */
/* ================================== */
/* === Botón Scroll hacia arriba ==== */
/* ================================== */
/*scroll up, color de flecha que va para arriba */
.scrollup{
position: fixed;
background: #8d8f96;
right: 3rem;
bottom: -20%;
display: inline-flex;
padding: 0.3rem;
border-radius: 0.25rem;
z-index:10;
opacity: 0.8;
transition: 0.4s;
}
/*scroll up, tamaño de flecha que va para arriba */
.scrollupicon{
font-size: 2.25rem;
color: #fff;
}
.scrollup:hover{
background: #000C32;
opacity: 1;
}
/*scroll up, altura desde borde horizontal*/
.show-scroll{
bottom: 3rem;
}
/* ========================================================= */
/* ===================== */
/* === Barra Scroll ==== */
/* ===================== */
/*scroll barra, espesor y color de fondo barra que scrollea*/
::-webkit-scrollbar {
width: 1rem;
background: #3e4141;
}
/*scroll barra, radios y color de barra que scrollea*/
::-webkit-scrollbar-thumb {
background: #e0d6d6;
border-radius: 0.5rem;
}
/* ========================================================= */
/* ====================================== */
/* === Responsive – Móviles pequeños ==== */
/* ======================================= */
@media (max-width: 320px) {
.container {
margin-left: 1rem;
margin-right: 1rem;
}
.homeimg {
height: 200px;
}
.homebut {
flex-direction: column;
width: max-content;
row-gap: 1rem;
}
.categorycontainer,
.productcontainer {
grid-template-columns: 0.8fr;
justify-content: center;
}
}
/* ========================================================= */
/* ============================ */
/* === Responsive – Tablet ==== */
/* ============================ */
@media (min-width: 576px) {
.aboutcontainer {
grid-template-columns: 0.8fr;
justify-content: center;
}
.newslc{
display: grid;
grid-template-columns: .7fr;
justify-content: center;
}
.newsld {
padding: 0 3rem;
}
}
/* ========================================================= */
/* ========================================= */
/* === Responsive – Escritorio pequeño ==== */
/* ========================================== */
@media (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 1rem 0 1rem;
}
.nav {
height: calc(3.5rem + 1.5rem);
}
.navclose,
.navToggle {
display: none;
}
.navList {
flex-direction: row;
column-gap: 3rem;
}
.navLink {
text-transform: initial;
font-weight: initial;
}
.homecont {
padding: 7rem 0 0rem;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.homeimg {
height: 500px;
}
.swiper-pagination {
margin-top: 1rem;
}
.categorycontainer {
grid-template-columns: repeat(5, 150px);
justify-content: center;
}
.aboutcontainer {
grid-template-columns: repeat(1, 1fr);
align-items: center;
}
.abouttitle,
.aboutdata {
text-align: initial;
}
.aboutimg {
width: 350px;
}
.productcontainer {
grid-template-columns: repeat(6,200px);
justify-content: center;
gap: 0.5rem;
}
.discountcontainer {
grid-template-columns: repeat(2, max-content);
justify-content: center;
align-items: center;
column-gap: 3rem;
padding: 3rem 0;
border-radius: 3rem;
}
.discountimg {
width: 350px;
order: -1;
}
.discountdata {
padding-right: 6rem;
}
.newslc {
grid-template-columns: .5fr;
}
.footercontainer {
grid-template-columns: repeat(4, 1fr);
justify-items: center;
column-gap: 1rem;
}
}
/* ========================================================= */
/* ========================================= */
/* === Responsive – Escritorio estandar ==== */
/* ========================================== */
@media (min-width: 992px) {
.container {
margin-left: auto;
margin-right: auto;
}
.sectiontitle {
font-size: 1.5rem;
margin-bottom: 3rem;
}
.homecont {
padding-top: 9rem;
gap: 3rem;
}
.homegroup {
padding-top: 0;
}
.homeimg {
height: 400px;
transform: translateY(-3rem);
}
.homeindicator {
top: initial;
right: initial;
bottom: 15%;
left: 45%;
}
.homeindicator::after {
top: 0;
height: 75px;
}
.homedetails-img {
bottom: 0;
right: 58%;
}
.hometitle {
margin-bottom: 1.5rem;
}
.homedes {
margin-bottom: 2.5rem;
padding-right: 2rem;
}
.categorycontainer {
column-gap: 3rem;
}
.categoryimg {
width: 200px;
}
.aboutcontainer {
column-gap: 7rem;
}
.aboutimg {
width: 250px;
}
.aboutdescription {
padding-right: 2rem;
}
.productcontainer {
gap: 0.8rem;
}
.productcontent {
border-radius: 1.5rem;
}
.productimg {
width: 190px;
}
.producttitle {
font-size: 1rem;
}
.discountcontainer {
column-gap: 7rem;
}
.newcontent {
width: 310px;
border-radius: 1rem;
padding: 2rem 0;
}
.newimg {
width: 150px;
}
.newimg,
.newsubtitle {
margin-bottom: 1rem;
}
.newtitle {
font-size: 1rem;
}
.footercopy {
margin-top: 6rem;
}
}
/* ========================================================= */
/* ============================================= */
/* === Responsive – Escritorio muy grandes ==== */
/* ============================================= */
.homeimg, .homeimg1{
width: clamp(1420px, 55vw, 880px); /* más grande sin pasarte */
height: auto; /* mantiene proporción */
max-height: 100vh; /* si querés aun más alta, subí a 85vh */
object-fit: contain;
}
/* Contenedor con altura responsiva para que las imágenes absolutas no colapsen */
.hero-rotator{
position: relative;
height: clamp(260px, 48vw, 540px); /* ajustá a gusto */
}
/* Imágenes apiladas, una visible (active), otra oculta */
.hero-slide{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity .9s ease;
}
.hero-slide.active{ opacity: 1; }
/* El contenedor define el alto visible del hero */
.hero-rotator{
position: relative;
/* elegí uno (o combiná): */
/* 1) altura responsiva por viewport: */
height: clamp(320px, 50vh, 680px);
/* 2) o relación de aspecto fija (quita la línea de height si usás esto): */
/* aspect-ratio: 16 / 9; max-height: 78vh; */
}
/* Las imágenes nunca se pasan del contenedor y no se deforman */
.hero-slide{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; /* muestra todo, con “barras” si hace falta */
/* Si preferís que “llene” recortando un poco, usá cover: */
/* object-fit: cover; object-position: center; */
}
/* Categorías: 6 columnas en 1 fila (desktop) */
@media (min-width: 992px){
.categorycontainer{
display: grid;
grid-template-columns: repeat(6, minmax(150px, 1fr)); /* 6 items */
gap: 1.25rem;
justify-content: center;
align-items: start;
}
.categorydata{ text-align: center; align-items: center; }
.categoryimg{ width: 150px; height: auto; object-fit: contain; }
}
/* === CATEGORÍAS: alineación y respuesta === */
/* Grilla responsive (2 / 3 / 4 / 6 columnas) */
.categorycontainer{
display: grid;
gap: 1rem 2rem;
justify-items: center; /* centra cada tarjeta */
align-items: start; /* arranca todas arriba */
}
/* móvil chico */
@media (max-width: 575px){
.categorycontainer{ grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
/* tablet */
@media (min-width: 576px) and (max-width: 991px){
.categorycontainer{ grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}
/* desktop */
@media (min-width: 992px){
.categorycontainer{ grid-template-columns: repeat(6, minmax(160px, 1fr)); }
}
/* Tarjeta: columna, centrado */
.categorydata{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .5rem;
}
/* Miniaturas: mismo alto para todas, sin deformar */
.categorydata img, /* por si no pusiste class en el ![]()
*/
.categoryimg{ /* por si usás class="categoryimg" */
height: 120px; /* ajustá 110–140px si querés */
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
/* Título: misma “caja” para alinear las bases aunque haya 1 o 2 líneas */
.categorytitle{
font-size: 1.1rem;
font-weight: 600;
line-height: 1.2;
min-height: 2.4em; /* ≈ 2 líneas; mantiene alineación entre tarjetas */
display: flex;
align-items: flex-start; /* una línea queda arriba de esa caja */
justify-content: center;
}
/* === Portada de catálogo centrada y alineada con las tarjetas === */
:root{ --content-max: 1100px; } /* mismo ancho que usás en .productcontainer */
.productcontainer{ /* por si algún bloque no lo tenía */
max-width: var(--content-max);
margin: 0 auto;
}
.catalog-cover-wrap{
max-width: var(--content-max); /* igual a las tarjetas */
margin: 1.25rem auto 0; /* centrado */
padding: 0 1rem; /* mismo “gutter” lateral */
display: flex;
justify-content: center;
}
.catalog-cover-link{ /* garantiza área clickeable limpia */
display: inline-block;
border-radius: 1rem;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.18);
transition: transform .2s ease, box-shadow .2s ease;
}
.catalog-cover-link:hover{
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.catalog-cover img{
width: min(220px, 90vw);
height: auto;
display: block;
}
.catalog-caption{ text-align:center; margin-top:0rem; }
/* ===== Submenú: alineado a "Productos" y más grande ===== */
@media (min-width: 768px){
.nav-dropdown{ position: relative; } /* ya lo tenés, pero lo reafirmo */
.nav-submenu{
/* ALINEACIÓN: debajo del botón "Productos" */
left: 0; /* ← arranca en el borde izquierdo del */
right: auto;
transform: none; /* ← quita el centrado anterior */
top: 150%;
margin-top: .4rem;
/* TAMAÑO / LAYOUT */
min-width: 600px; /* más ancho por defecto */
max-width: min(80vw, 900px); /* no se pasa de la pantalla */
max-height: 70vh; /* scroll interno si es muy alto */
overflow-y: auto;
padding: .75rem 1rem; /* más aire */
font-size: 1.05rem; /* texto un poco más grande */
line-height: 1.25;
z-index: 1000;
}
/* textos largos con salto de línea y más cómodo para click */
.nav-submenu a{
white-space: normal; /* IMPORTANT: permite 2 líneas */
display: flex; align-items: center; gap: .6rem;
padding: .55rem .6rem;
}
/* iconos más visibles */
.nav-icon{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
}
/* === NAV: submenú en MÓVIL (≤ 767px) === */
@media (max-width: 767px){
/* Panel móvil: scroll si hay muchos ítems */
.navM{
padding: 3.5rem 1rem 1.25rem;
max-height: 100vh;
overflow-y: auto;
}
.navList{ flex-direction: column; align-items: stretch; row-gap: .75rem; }
.navItem{ width: 100%; }
/* El de Productos no flota */
.nav-dropdown{ position: static; }
/* El submenú se vuelve “en línea”, ocupa 100% y sin caja flotante */
.nav-submenu{
position: static;
display: none; /* se muestra al abrir */
background: transparent;
border-radius: 0;
box-shadow: none;
padding: .25rem 0 0;
min-width: 0;
max-width: none;
max-height: none;
overflow: visible;
}
.nav-dropdown.open > .nav-submenu{ display: block; }
/* Enlaces del submenú: sangría y área de toque cómodas */
.nav-submenu a{
padding: .6rem 0 .6rem 2rem; /* sangría a la izquierda */
white-space: normal; /* permite salto de línea */
border-radius: .25rem;
}
.nav-submenu a:hover{ background: rgba(255,255,255,.08); }
/* Íconos más chicos en móvil */
.nav-submenu .nav-icon{ width: 22px; height: 22px; }
/* Flechita en “Productos” solo en móvil (opcional) */
.dropbtn::after{
content: "▾";
margin-left: .35rem;
font-size: .85em;
}
}
/* Fila horizontal de tarjetas (con scroll si no entran) */
.row-scroll{
display: grid;
grid-auto-flow: column; /* pone los ítems en fila */
grid-auto-columns: clamp(220px, 24vw, 260px); /* ancho de cada tarjeta */
gap: 1rem;
overflow-x: auto; /* permite desplazamiento horizontal */
overscroll-behavior-x: contain;
padding-bottom: .5rem; /* respira sobre la barra */
}
/* Opcional: estética de la barra de desplazamiento */
.row-scroll::-webkit-scrollbar{ height: .6rem; }
.row-scroll::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.35);
border-radius: .5rem;
}
/* Forzá ancho completo de las tarjetas dentro de la grilla */
.product-grid .productcontent{
max-width: unset;
width: 100%;
}
/* Ajustes de los catálogos en grilla */
.catalog-grid .catalog-cover-wrap{ margin:0; }
.catalog-grid .catalog-cover{ height: 100%; }
.catalog-grid .catalog-cover img{ width:100%; height:auto; display:block; }
.catalog-grid .catalog-caption{ padding:.75rem; }
/* === Grillas para secciones de productos === */
.productcontainer{ max-width: var(--content-max,1100px); margin:0 auto; }
.product-grid,
.catalog-grid{
display:grid;
grid-template-columns: repeat(4, minmax(240px,1fr));
gap: 1.25rem;
align-items: start;
}
/* Las tarjetas ocupan 100% de su columna */
.product-grid .productcontent{ width:100%; max-width: unset; }
/* Catálogos: imagen a ancho completo */
.catalog-grid .catalog-cover-wrap{ margin:0; }
.catalog-grid .catalog-cover{ height:100%; }
.catalog-grid .catalog-cover img{ width:100%; height:auto; display:block; }
.catalog-grid .catalog-caption{ padding:.75rem; }
/* Responsive */
@media (max-width: 991px){
.product-grid, .catalog-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 575px){
.product-grid, .catalog-grid{ grid-template-columns: 1fr; }
}
/* ====== TRIPLE TORNILLO: grilla responsive ====== */
#bombas-triple-tornillo .productcontainer{
display: grid !important;
grid-template-columns: repeat(4, minmax(220px,1fr)) !important;
gap: 18px !important;
align-items: start !important;
justify-items: stretch !important;
}
#bombas-triple-tornillo .productcontent{
max-width: none !important; /* sin tope de 240px */
width: 100% !important;
}
#bombas-triple-tornillo .productimg{
width: 140px; /* opcional: mantené las imágenes parejas */
height: auto;
}
/* Tablet */
@media (max-width: 991px){
#bombas-triple-tornillo .productcontainer{
grid-template-columns: repeat(2, minmax(220px,1fr)) !important;
}
}
/* Móvil */
@media (max-width: 575px){
#bombas-triple-tornillo .productcontainer{
grid-template-columns: 1fr !important;
}
}
/* SECTORES: poner los íconos en blanco */
.sector-item .sector-icon {
filter: brightness(0) invert(1); /* vuelve blanco cualquier png con fondo transparente */
opacity: 1;
}
/* (si alguno es un de Boxicons, que salga blanco también) */
.sector-item i { color:#fff !important; }
.sector-item:hover .sector-icon { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
:root { --header-h: 72px; } /* ajustá a tu alto real */
[id] { scroll-margin-top: calc(var(--header-h) + 10px); }
.header{ transition: background .25s, box-shadow .25s; }
.scroll-header{ box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.productcontent{
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.productcontent:hover{
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.productcontent .productimg{ transition: transform .25s ease; }
.productcontent:hover .productimg{ transform: translateY(-6px) scale(1.03); }
.sector-item .sector-icon{ filter: brightness(0) invert(1); }
.sector-item{ transition: transform .15s ease; }
.sector-item:hover{ transform: translateY(-4px); }
.button{ position: relative; overflow: hidden; }
.button::after{
content:""; position:absolute; inset:0; border-radius:inherit;
box-shadow: 0 0 0 0 rgba(255,255,255,.35); transition: box-shadow .25s;
}
.button:hover::after{ box-shadow: 0 0 0 6px rgba(255,255,255,.15) inset; }
.nav-dropdown .dropbtn{ position:relative; padding-right:1rem; }
.nav-dropdown .dropbtn::after{
content:""; border:.35rem solid transparent; border-top-color:#fff;
position:absolute; right:.2rem; top:50%; transform:translateY(-50%); transition:transform .2s;
}
.nav-dropdown.open .dropbtn::after{ transform:translateY(-50%) rotate(180deg); }
:focus-visible{
outline:2px solid #6aa6ff; outline-offset:2px; border-radius:.4rem;
}
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; }
}
#bombas-triple-tornillo .productcontainer{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
gap:1.25rem;
}
/* --- Engranaje grande, fijo y siempre girando --- *//* Engranaje grande, fijo y centrado */
.gear-rotor{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* centro exacto del viewport */
width: clamp(420px, 55vmin, 1100px);
pointer-events: none;
z-index: 0; /* tu contenido encima (ver .main) */
opacity: .14;
filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
.gear-rotor img{
display: block;
width: 100%;
height: auto;
transform-origin: 50% 50%;
animation: gear-spin 00s linear infinite; /* 00s = giro nulo */
}
@keyframes gear-spin { to { transform: rotate(1turn); } }
/* Tu contenido por encima del engranaje */
.main{ position: relative; z-index: 1; }
.header{ z-index: 100; }
/* Ocultar en móviles chicos (si querés) */
@media (max-width: 480px){
.gear-rotor{ display:none; }
}
/* ===== Clientes: carrusel infinito ===== */
.clients{ padding-top: 1rem; padding-bottom: 1rem; }
.clients-marquee{
position: relative;
overflow: hidden;
/* desvanecido en bordes (mejora estética) */
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients-track{
--speed: 35s; /* velocidad (↓ más lento / ↑ más rápido) */
display: inline-flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);/* separación entre logos */
width: max-content; /* ancho según contenido */
will-change: transform;
animation: clients-scroll var(--speed) linear infinite;
}
@keyframes clients-scroll{
from{ transform: translateX(0); }
to { transform: translateX(-50%); } /* movemos media pista (porque está duplicada) */
}
.clients .logo{ flex: 0 0 auto; }
.clients .logo img{
height: clamp(32px, 6vw, 64px); /* alto adaptable */
width: auto;
display: block;
/* “blanquear” los PNGs y bajarlos un toque */
filter: grayscale(1) brightness(0) invert(1) opacity(.85);
transition: transform .2s ease, filter .2s ease;
}
/* al pasar el mouse: pausa y muestra el logo nítido */
.clients-marquee:hover .clients-track{ animation-play-state: paused; }
.clients .logo img:hover{ filter: invert(1); transform: scale(1.06); }
/* si preferís que nunca se pause, borrá el :hover de arriba */
/* Respeto accesibilidad: sin motion si el usuario lo pidió */
@media (prefers-reduced-motion: reduce){
.clients-track{ animation: none; }
}
/* ===== Clientes: tamaños consistentes, sin estirar ===== */
.clients{
/* alto y ancho “base” de cada celda de logo */
--logo-h: clamp(34px, 5.5vw, 68px);
--logo-w: clamp(110px, 16vw, 180px);
}
.clients-track{
gap: clamp(1rem, 3vw, 2rem); /* separación entre logos */
}
/* Cada logo va en una cajita fija, centrado */
.clients .logo{
flex: 0 0 var(--logo-w); /* ancho fijo de la celda */
height: var(--logo-h); /* alto fijo de la celda */
display: flex;
align-items: center;
justify-content: center;
padding: .25rem 0; /* aire vertical */
}
/* La imagen nunca se deforma ni empuja a las demás */
.clients .logo img{
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain; /* encaja dentro de la cajita */
display: block;
/* “blanquear” y suavizar (podés ajustarlo o quitarlo) */
filter: grayscale(1) brightness(0) invert(1) opacity(.85);
transition: transform .2s ease, filter .2s ease;
}
/* Pausa al pasar el mouse + logo nítido */
.clients-marquee:hover .clients-track{ animation-play-state: paused; }
.clients .logo img:hover{ filter: invert(1); transform: scale(1.06); }
/* Opcional: tamaños un toque más chicos en móvil */
@media (max-width: 575px){
.clients{
--logo-h: 40px;
--logo-w: 120px;
}
}
/* ===== Clientes: colores originales, sin filtros ===== */
.clients .logo img{
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
filter: none !important; /* sin invertir ni desaturar */
transition: transform .1s ease;
}
.clients .logo img:hover{
transform: scale(1.06); /* opcional: pequeño zoom al hover */
}
/* ===== Hero más cerca del encabezado fijo ===== */
/* altura de la barra (tu .nav): 2.5rem en móvil, ~5rem en desktop */
:root{
--header-h-mobile: 2.5rem;
--header-h-desktop: 5rem;
}
/* quitamos margen superior global */
body{ margin-top: 0 !important; }
/* separamos el hero sólo lo necesario para que no lo tape el header */
.home{ padding-top: calc(var(--header-h-mobile) + .5rem); }
@media (min-width: 768px){
.home{ padding-top: calc(var(--header-h-desktop) + .25rem); }
}
/* anulamos el padding grande que tenías en .homecont */
.homecont{ padding-top: 0 !important; }
/* cuando hacés click en un ancla, compensa la barra fija */
section[id]{ scroll-margin-top: var(--header-h-mobile); }
@media (min-width: 768px){
section[id]{ scroll-margin-top: var(--header-h-desktop); }
}
/* Texto centrado debajo del hero */
.center-text {
text-align: left;
line-height: 1.7;
margin: 1.5rem auto 0;
font-size: 1rem;
max-width: 1000px; /* respirito y columnas cómodas */
padding: 0 1rem; /* gutter lateral en mobile */
}
/* Centrar copyright en el footer */
.footercontainer{
/* ya es grid en tu sitio, sólo aseguro centrado */
justify-items: center;
}
.footercopy{
grid-column: 1 / -1; /* ocupa todo el ancho de la grilla */
justify-self: center; /* centra el propio span en la grilla */
text-align: center; /* centra el texto */
width: 100%;
margin: 1rem 0 0; /* menos aire arriba (ajustá a gusto) */
font-size: .85rem; /* opcional: un pelín más grande */
}
/* Carrusel Servicio Técnico */
.st-swiper{
--swiper-navigation-color: #fff;
--swiper-pagination-color: #fff;
max-width: 700px;
margin: 0 auto;
}
.st-slide{
position: relative;
border-radius: 1rem;
overflow: hidden;
background: #e8eaf1; /* combina con tu paleta */
}
/* Imagen: no se deforma; se “contiene” dentro de la altura */
.st-slide img{
width: 100%;
height: clamp(260px, 42vw, 520px);
object-fit: contain; /* si preferís que llene recortando, cambiá a cover */
display: block;
background: #0a1a55; /* “lienzo” detrás cuando la imagen no cubre */
}
/* Texto sobre la imagen (pie) */
.st-slide figcaption{
position: absolute;
left: 0rem; right: 0rem; bottom: 0rem;
padding: 1rem 1.25rem;
color: #ffffff;
background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
}
.st-slide figcaption h3{
margin: 0 0 .25rem 0;
font-size: 1.05rem;
font-weight: 300;
}
.st-slide figcaption p{
margin: 0;
font-size: .95rem;
line-height: 1.35;
}
/* Paginación un toque más discreta */
.st-swiper .swiper-pagination-bullet{ opacity: .5; }
.st-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1; }
/* Tamaño de flechas cómodo en desktop */
@media (min-width: 100px){
.st-swiper .swiper-button-prev,
.st-swiper .swiper-button-next{ transform: scale(1.1); }
}
/* === Mejora de legibilidad en el carrusel de Servicio Técnico === */
.st-slide{ position:relative; }
/* Oscurece la parte baja de la imagen para que el texto se lea siempre */
.st-slide::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(
180deg,
rgba(0,0,0,0) 45%,
rgba(0,0,0,.35) 65%,
rgba(0,0,0,.78) 100%
);
pointer-events:none;
z-index:0;
}
/* Barra de texto con leve blur y más contraste */
.st-slide figcaption{
position:absolute; left:0; right:0; bottom:2rem;
padding: clamp(.75rem, 1.8vw, 1.25rem) clamp(1rem, 2.2vw, 1.5rem);
background: rgba(0,0,0,.65); /* subí a .55 si querés aún más fuerte */
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index:1;
display:grid; gap:.25rem;
color:#fff;
}
.st-slide figcaption h3{
margin:0;
font-weight:800;
font-size:clamp(1rem, 2.1vw, 1.25rem);
line-height:1.1;
text-shadow: 0 2px 12px rgba(0,0,0,1.85), 0 0 1px rgba(0,0,0,1.6);
}
.st-slide figcaption p{
margin:0;
font-size:clamp(.9rem, 1.6vw, 1rem);
line-height:1.35;
color:#f5f7ff;
text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
/* Asegura que las flechas y bullets sigan viéndose bien sobre imágenes claras */
.st-swiper .swiper-button-prev,
.st-swiper .swiper-button-next{
filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.st-swiper .swiper-pagination-bullet{
box-shadow: 0 2px 6px rgba(0,0,0,1.45);
}
/* Botones en la sección Categorías */
.category-actions{
display: flex;
gap: .6rem;
flex-wrap: wrap;
justify-content: center; /* centrado */
margin-bottom: 1rem; /* separación con la grilla */
}
.category-actions .button{
padding: .7rem 1.2rem;
font-weight: 700;
}
/* Opcional: un poco más de aire en mobile */
@media (max-width: 575px){
.category-actions{ margin-bottom: 1.25rem; }
}
/* botón global */
.button{ font-weight: 600; }
/* y estos también, que los tenías en 700 */
.category-actions .button{ font-weight: 600; } /* o 500 si los querés aún más finos */
.map-info a {
color: #fff; /* blanco */
text-decoration: underline; /* subrayado */
font-weight: 500; /* opcional: un poco más grueso */
}
.map-info a:hover {
color: #3678ff; /* opcional: azul al pasar el mouse */
text-decoration: underline;
}
/* QR en pie de página alineado a la derecha */
.footerqr {
text-align: right; /* lo manda a la derecha */
margin-top: 0.3rem;
grid-column: -2 / -1; /* lo ubica en la última columna si usás grid */
}
.footerqr img {
width: 65px; /* más chico */
height: auto;
background: #fff; /* fondo blanco */
border-radius: 0.25rem;
padding: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
transition: transform .2s ease;
}
.footerqr img:hover {
transform: scale(1.05);
}
.footer {
position: relative;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.0);
padding-top: 0.3rem; /* espacio extra arriba */
}