/*
Theme Name:   Hello Elementor Child
Theme URI:    http://example.com/hello-elementor-child/
Description:  Tema hijo para Hello Elementor.
Author:       Piña
Author URI:   http://example.com
Template:     hello-elementor
Version:      1.0.0
*/

/*@import url("../hello-elementor/style.css");*/

/* Fondo para todo el sitio */
body {
    font-family: 'Poppins', sans-serif;
    background-image: url('https://pourtau.com.ar/wp-content/uploads/2024/10/fondo_red.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
		margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

 .site-main {
    max-width: none !important;
  }

link[rel="icon"] {
    background-color: black;
  }

/* Excluir titulo */
.page-header{
	display:none;
}



/*Cabecera*/


#masthead {
  background-color: rgba(0, 0, 0, 0.5);
}

.e-con > .e-con-inner {
	
	max-width: none !important;
	
}

/* Ocultar el logo de móvil en escritorio */
.logo-mobile {
    display: none;
}



/* Mostrar el logo de escritorio en pantallas grandes */
.logo-desktop {
    display: block;
}





/* El menú hamburguesa solo será visible en pantallas pequeñas */
.menu-toggle {
    display: none;
    
    
}



.custom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho de la pantalla */
   
    padding: 0 20px; /* Espacio en los laterales */
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

.custom-column {
    flex: 1; /* Hace que las columnas ocupen el espacio disponible */
    padding: 20px; /* Espacio interior */
}

.custom-column.left,
.custom-column.right {
    max-width: 25%; /* Mantén las imágenes en 25% de ancho */
	display: block;
}

.custom-column.right img{
	width: 75%;
}

.custom-column.left img{
	
	margin-top: 4%;
}

.custom-column.center {
    flex: 2; /* La columna del medio ocupa el doble de espacio */
    text-align: center;
		display: block;
}

.custom-menu {
    list-style-type: none;
    padding: 0;
    margin-top: 2%;
    font-size: 1.2rem; /* Aumenta el tamaño del texto */
	 /*margin-top: -20px;*/ /* Levanta solo el menú */
	display: flex; /* Hace el menú horizontal */
    justify-content: center;
    flex-wrap: nowrap; /* Asegura que los elementos no se muevan a la siguiente línea */
    overflow: hidden; /* Evita que el contenido se desborde */
}

.custom-menu li {
    /*display: inline;*/
    margin: 0 2%; /* Más espacio entre los enlaces */
}

.custom-menu li a {
    color: white; /* Color blanco para los textos */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem; /* Aumenta el tamaño del texto del menú */
}

.custom-column img {
    width: 80%; /* Asegura que la imagen ocupe el 100% del ancho de la columna */
    height: auto;
    max-width: 100%; /* Evita que la imagen sea más grande que el contenedor */
	margin-left: 8%;
}



.custom-menu.mobile-menu {
    display: none; /* Ocultamos el menú por defecto */
    flex-direction: column;
    align-items: center;
    position: absolute; /* Posicionamos el menú de manera absoluta */
    top: 50px; /* Ajustamos la distancia desde la parte superior para que se despliegue abajo */
    right: 20px; /* Lo posicionamos desde el lado derecho (ajústalo a tu gusto) */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro para el menú */
    width: 100%; /* Aseguramos que ocupe todo el ancho */
    box-sizing: border-box; /* Para incluir el padding en el tamaño total */
    padding: 10px 0;
    border-radius: 5px; /* Opcional, si deseas bordes redondeados */
}

/* Ajustes para pantallas más pequeñas */

/* Fondo específico para dispositivos móviles */
@media only screen and (max-width: 768px) {
    body {
        background-image: url('https://pourtau.com.ar/wp-content/uploads/2024/10/pikaso_embed.jpeg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
	.custom-container {
        flex-direction: row; /* Mantiene los elementos en fila en lugar de columna */
         align-items: center;
        justify-content: space-between; /* Separa los elementos */
        width: 100%;
        padding: 10px 20px;
    }

    .custom-column.left,
    .custom-column.right {
        display: none;
    }

     
	.custom-column.center {
				display: none;
		}

	.hamburger-icon {
			padding: 5px;
			color: white;
		}

    /* Mostrar el logo de móvil cuando sea pantalla pequeña */
    .logo-mobile {
        display: block;
		width: 90%;
    }

    /* Menú hamburguesa solo será visible en pantallas pequeñas */


.custom-menu.mobile-menu.active {
    display: flex; /* Lo mostramos solo cuando tiene la clase 'active' */
}

/* Aseguramos que el icono de hamburguesa esté en la parte superior */
.menu-toggle {
    display: block;
    font-size: 30px;
    cursor: pointer;
    color: white;
    z-index: 1000; /* Asegura que el ícono de hamburguesa esté sobre el menú */
}

}

/*cuerpo*/
/* Asegura que el contenedor principal (#content) ocupe todo el ancho */
#content {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  width: 100%; /* Garantiza que ocupe todo el ancho */
  position: relative;
  padding: 1.5% 0 0 0;
  box-sizing: border-box;
}



.page-content {
  width: 100%; /* También aseguramos que el contenido ocupe todo el ancho */
}


/*Pie*/
/* Excluir el footer del fondo */
footer {
    background: #000000 !important; /* Color de fondo del footer */
    background-image: none !important;
}

.image-container-contacto {
	display: flex;              /* Usa Flexbox para alinear las imágenes */
	justify-content: center;    /* Centra las imágenes horizontalmente */
	flex-wrap: wrap;           /* Permite que las imágenes se ajusten en varias filas si es necesario */
	margin-top: 0%;            /* Centra el contenedor en la página */
	align-items: center;
	/*margin: 0 30% 0 0;*/
}



.image-item-telefono {
	flex: 0 1 50%;              
	justify-content: center;
	display: inline;
	padding: 50px;             /* Espaciado entre las imágenes */
	text-align: right;
}

.image-item-telefono img {   
	width: 200px;               /* Hace que la imagen ocupe todo el ancho del contenedor */
	height: auto;              /* Mantiene la proporción de la imagen */
}

.image-item-telefono .img-telefono {
	width: 25px;
	margin-bottom: 1.5%;
}

.image-item-contacto {   
	flex: 0 1 50%;              	
	/*justify-content: center;*/
	display: flex;   
	/*display: contents; */
	padding: 3%;          /* Espaciado entre las imágenes */
	/*text-align: left;*/
}

.image-item-contacto .img-sobre {
	width: 30px;
	margin-bottom: 2.5%;
}


.image-item-contacto .img-mail { 
	width: 300px;               /* Hace que la imagen ocupe todo el ancho del contenedor */
	height: auto;              /* Mantiene la proporción de la imagen */
}


/*home*/

.post-17 {
  
  margin-top: 7%;
  margin-bottom: 10%;
}

.image-container {   
	display: flex;              /* Usa Flexbox para alinear las imágenes */
	justify-content: center;    /* Centra las imágenes horizontalmente */
	flex-wrap: wrap;
	  margin-top: -20px;
	  align-items: center;
}

.image-item-marca {    
	flex: 0 1 25%;              /* Cada imagen ocupa el 25% del ancho (4 en total) */
	max-width: 200px;          /* Establece un ancho máximo para las imágenes */
	padding: 40px;
  margin-left: 20px;
  margin-right: 20px;
}


.image-item-marca img {
	width: 100%;               /* Hace que la imagen ocupe todo el ancho del contenedor */
	height: auto;              /* Mantiene la proporción de la imagen */
}


.image-container-visite {
	display: flex;              /* Usa Flexbox para alinear las imágenes */
	justify-content: center;    /* Centra las imágenes horizontalmente */
	flex-wrap: wrap;           /* Permite que las imágenes se ajusten en varias filas si es necesario */
	/*margin-top: 200px;    */        /* Centra el contenedor en la página */
	align-items: center;
}

.image-item-visite { 
	flex: 0 1 100%;             
	justify-content: center;
	display: flex;
}

.image-item-visite img {    
	width: 350px;               /* Hace que la imagen ocupe todo el ancho del contenedor */
	height: auto;              /* Mantiene la proporción de la imagen */
}

	#img_renaultHome{
		width:90%
		
	}
	#img_citroenHome{
		width:95%
		
	}

@media only screen and (max-width: 768px) {
	.image-container-contacto { 
		margin-top: 50px;            /* Centra el contenedor en la página */
	}
	
	.image-container {
		margin-top: 20px;            /* Centra el contenedor en la página */
	}
	
	.image-item-marca {
		flex: 1 1 calc(50% - 20px); /* 50% del ancho con espacio entre ellos */
    display: flex;
		max-width: 200px;          /* Establece un ancho máximo para las imágenes */
		padding: 45px;             /* Espaciado entre las imágenes */
		/*margin-left: 0px;*/
		margin-right: 0px;
		margin-top: -50px;
	}
	
	.image-item-marca img {
		width: 70%;               /* Hace que la imagen ocupe todo el ancho del contenedor */
		height: auto;              /* Mantiene la proporción de la imagen */
	}
	#img_renaultHome, #img_citroenHome{
		width:50%;
		margin-left: 8%;
	}
	
	.image-item-telefono {
		flex: 0 1 100%;              
		justify-content: center;
		display: inline;
		padding: 0px;             /* Espaciado entre las imágenes */
		text-align: center;
	}

	.image-item-contacto {
		flex: 0 1 100%;              	
		justify-content: center;  
		display: inline;    
		/*padding: 50px; */            /* Espaciado entre las imágenes */
		text-align: center;
	}

	.image-item-contacto .img-sobre {
		width: 25px;  
		vertical-align: baseline;
		margin-bottom: 1.5%;
	}

	.image-item-contacto .img-mail {    
		width: 250px;               /* Hace que la imagen ocupe todo el ancho del contenedor */   
		height: auto;              /* Mantiene la proporción de la imagen */
	}
}

/* Media query para iPad 810 x 1080 */
@media (min-width: 810px) and (max-width: 1080px) {    
	.image-item-marca {   
		flex: 0 1 22%;              /* Cada imagen ocupa el 25% del ancho (4 en total) */   
	}
}

/*quienes somos*/
.custom-container-quienes {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho de la pantalla */
   
    padding: 0 20px; /* Espacio en los laterales */
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}
.custom-quienes {
    flex: 1; /* Hace que las columnas ocupen el espacio disponible */
    padding: 0; /* Espacio interior */
	margin: 0;
}

.custom-quienes.left,
.custom-quienes.right {
    max-width: 25%; /* Mantén las imágenes en 25% de ancho */
	
}

.custom-quienes.center {
    flex: 2; /* La columna del medio ocupa el doble de espacio */
    
	background-color: white !important;	
}

.custom-quienes.left img {
    width: 100%; /* Ajusta el ancho de la imagen */
    height: 100%; /* Hace que la imagen ocupe el mismo alto que el texto */
    object-fit: cover; /* Asegura que la imagen mantenga su proporción y no se deforme */
}

.custom-quienes.right {
    position: relative;
	background-color:white;
}

.marcas-container {
    position: relative;
    width: 100%;
    height: auto;
}

.marcas-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	background-color: white;
}

.marca {
    position: absolute;
    display: block;
    /*background: rgba(255, 0, 0, 0.3);*/ /* Color rojo transparente para ver las áreas */
    border-radius: 5px;
}

/* Ubicación de cada marca (ajusta según la imagen real) */
.renault { top: 38%; left: 17%; width: 18%; height: 18%; }
.peugeot { top: 68%; left: 16%; width: 23%; height: 18%; }
.fiat { top: 38%; left: 49%; width: 25%; height: 18%; }
.citroen { top: 68%; left: 52%; width: 20%; height: 18%; }


.quienes-texto {
  margin: 8%;
  text-align: justify;
}

.titulo{
	font-weight:700;
}

@media only screen and (max-width: 768px) {
  
	.custom-container-quienes {
        flex-direction: column; 
        /* align-items: center;
        justify-content: space-between; */
        width: 100%;
        padding: 10px 20px;
    }
	
	
	.custom-quienes.left,
	.custom-quienes.right {
		max-width: 100%; 

	}
	
	.custom-quienes.left img {
        width: 100%;
        height: auto;
        max-height: 200px; /* Reduce la altura de la imagen */
        object-fit: cover; /* Ajusta la imagen sin distorsionarla */
    }
	
	.custom-quienes.left {
        order: 3; /* Mueve la galería al final */
    }
	
	
}

/*concesionarios*/

.mapa-grid-conce {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 10px;
        background: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
    }

    .columna-conce {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra todo el contenido */
        text-align: center;
        gap: 10px; /* Espacio entre elementos */
    }


.custom-container-concesionarios {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho de la pantalla */
   
    padding: 0 20px; /* Espacio en los laterales */
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
	/*height: 100vh;*/ /* Asigna la altura completa de la ventana */
}
.custom-concesionarios {
    flex: 1; /* Hace que las columnas ocupen el espacio disponible */
    padding: 0; /* Espacio interior */
	margin: 0;
}

.custom-concesionarios.left {
    max-width: 35%; /* Mantén las imágenes en 25% de ancho */
	display: flex;
    flex-direction: column;
}



.custom-concesionarios.right {
    position: relative;
	background-color:white;
	width: 100%; /* Ajusta el ancho de la imagen */
    height: 100%; /* Hace que la imagen ocupe el mismo alto que el texto */
    /*object-fit: cover;*/ /* Asegura que la imagen mantenga su proporción y no se deforme */
	/*display:block*/
	display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
}

/* Asegurar que las imágenes en la columna izquierda se ajusten bien */
.custom-concesionarios.left img {
    width: 100%;
    height: 100%; /* Asegura que la imagen ocupe todo el alto disponible */
    object-fit: cover; /* Mantiene la proporción de la imagen sin deformarla */
}

.custom-concesionarios.left,
.custom-concesionarios.right {
    height: auto;
}





@media only screen and (max-width: 768px) {
  
	.mapa-grid-conce {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    }
	.custom-container-concesionarios {
        flex-direction: column; 
        /* align-items: center;
        justify-content: space-between; */
        width: 100%;
        padding: 10px 20px;
    }
	
	
	.custom-concesionarios.left {
		max-width: 100%; 

	}
	.custom-container-concesionarios {
        display: flex;
        flex-direction: column;
    }

    .custom-concesionarios.left {
        order: 3; /* Mueve la galería al final */
    }

    
	
	
}

/*contacto*/
.custom-container-contacto {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho de la pantalla */
   
    padding: 0 20px; /* Espacio en los laterales */
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}
.custom-contacto {
    flex: 1; /* Hace que las columnas ocupen el espacio disponible */
    padding: 0; /* Espacio interior */
	margin: 0;
}

.custom-contacto.left, .custom-contacto.right {
    max-width: 33%; /* Mantén las imágenes en 25% de ancho */
	
}

.custom-contacto.right, .custom-contacto.center {
    
    
	background-color: white !important;	
}

.custom-contacto.left img {
    width: 100%; /* Ajusta el ancho de la imagen */
    height: 100%; /* Hace que la imagen ocupe el mismo alto que el texto */
    object-fit: cover; /* Asegura que la imagen mantenga su proporción y no se deforme */
}

.contacto-texto {
  margin: 10%;
  text-align: justify;
}

.contacto-texto a{
  text-decoration: none !important;
	color:#7A7A7A;
	
}

.img-contacto-mail {
	margin-top: 10%;
    display: flex;
    align-items: center; /* Alinear verticalmente */
    gap: 10px; /* Espacio entre la imagen y el texto */
}

.img-contacto-mail img {
    width: 25px; /* Ajusta el tamaño del icono */
    height: auto;
	vertical-align: middle;
	margin-right: 10px;
}

.img-contacto-phone {
  margin-top: 10%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.img-contacto-phone img {
    width: 25px; /* Ajusta el tamaño del icono */
    height: auto;
	vertical-align: middle;
	margin-right: 10px;
}

.contact-form-7 {
  padding: 10% 30% 10% 10%;
}

.wpcf7-form-control {
    height: 25px;
	  padding: 0 10px !important;
	  border-radius: 5px !important;
	  border: 2px solid #ccc !important;
	margin-top: 10px; /* Aumenta este valor para más separación */
	background-color:white;
}

p label {
    display: block; /* Hace que el texto del label esté en su propia línea */
    margin-bottom: 5px; /* Espacio entre el label y el input */
}

/* Ajuste específico para `textarea` */
.wpcf7-textarea {
    height: 160px; /* Define una altura estándar para que no sea tan grande */
	
    resize: none; /* Evita que el usuario lo redimensione */
}

.wpcf7-submit {
    background-color: #555 !important; /* Gris oscuro */
    color: #fff  !important; /* Letras blancas */
    border: none  !important; /* Sin bordes */
    width: 80px !important;
  font-weight: 300 !important;
  text-transform: uppercase;
    border-radius: 5px  !important; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
    transition: background 0.3s ease, color 0.3s ease; /* Transición suave */
}

.wpcf7-submit:hover {
    background-color: #fff  !important; /* Fondo blanco */
    color: #555  !important; /* Letras grises */
    border: 1px solid #555  !important; /* Borde gris */
}

@media only screen and (max-width: 768px) {
  
	.custom-container-contacto {
        flex-direction: column; 
        /* align-items: center;
        justify-content: space-between; */
        width: 100%;
        padding: 10px 20px;
    }
	
	.contact-form-7 {
	  padding: 10% 10% 10% 10%;
	}
	
	.custom-contacto.left,
	.custom-contacto.right {
		max-width: 100%; 

	}
	.custom-container-contacto {
        display: flex;
        flex-direction: column;
    }

    .custom-contacto.left {
        order: 3; /* Mueve la galería al final */
    }

    .swiper-container {
        height: 200px; /* Reduce la altura de la galería */
    }

    .swiper-slide img {
        height: 100%; 
        width: auto; 
        object-fit: cover; /* Ajusta las imágenes */
    }
}



/*mapa*/

.custom-container-mapa {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho de la pantalla */
   
    padding: 0 20px; /* Espacio en los laterales */
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}
.custom-mapa {
    flex: 1; /* Hace que las columnas ocupen el espacio disponible */
    padding: 0; /* Espacio interior */
	margin: 0;
}

.custom-mapa.mobil, .custom-mapa.mobil-footer {
    display:none;
	
}


.custom-mapa.left {
    max-width: 30%; /* Mantén las imágenes en 25% de ancho */
	display:block;
	background: url('https://pourtau.com.ar/wp-content/uploads/2025/03/fondo-concesionarios.jpg') no-repeat center center;
	background-size: cover;
   
}

	.mapa-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 10px;
        background: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
    }

    .columna {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra todo el contenido */
        text-align: center;
        gap: 10px; /* Espacio entre elementos */
    }

   

    /* Redes sociales */
    .socialDesktop {
        display: flex;
        gap: 15px; /* Espacio entre iconos */
        justify-content: center;
    }

    .socialDesktop img {
        width: 24px; /* Tamaño de los íconos */
        height: auto;
    }

    /* Ubicación */
    .ubicacionDesktop {
        font-size: 16px;
        font-weight: bold;
        color: #007bff;
    }



    .marcaDesktop img:hover {
        transform: scale(1.1);
    }

	.marcaDesktop img {
        width:45%;
    }

	.marcaDesktop .imgRenault {
        width:35%;
    }

	.marcaDesktop .imgCitroen {
        width:39%;
    }

	.marcaDesktop .imgFiat {
        margin-top:13%;
    }

	.socialRenault{
		margin-top:3.5%;
	}	

	.socialPeugeot{
		margin-top:0%;
	}	

	.socialFiat{
		margin-top:5%;
	}	

	.socialCitroen{
		margin-top:1%;
	}	

	@media only screen and (min-width: 900px) and (max-width: 1099px) {
			
		.socialFiat {
			margin-top:7%;
		}
		
	}
	@media only screen and (min-width: 1100px) and (max-width: 1299px) {
		.socialRenault{
			margin-top:3%;
		}
		.socialFiat {
			margin-top:8%;
		}
		.socialCitroen{
			margin-top:1%;
		}
	}

	@media only screen and (min-width: 1300px) and (max-width: 1499px) {
		.socialPeugeot{
			margin-top:0%;
		}	
		.socialFiat {
				margin-top:7%;
			}
	}
	

	

	.ubicaciones {
		display: grid;
		gap: 10px; /* Espacio entre los elementos */
		/*justify-content: center;*/
		width:70%;
		
	}

	/* Distribución flexible */
	.ubicaciones .box {
		/*width: 250px;
		height: 200px;*/
		border: 1px solid black;
		border-radius: 15px; /* Bordes redondeados */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/*display: flex;*/
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: left;
		padding-left:5%;
	}

	.box a {
		text-decoration: none !important;
	}

	.location {
		display: flex;
		align-items: center;
		/*justify-content: center;*/
		gap: 1px; /* Espacio entre el ícono y el texto */
		padding: 2%;
	}

	.icon {
		width: 20px; /* Tamaño más pequeño para el ícono */
		height: 20px; /* Tamaño más pequeño para el ícono */
		margin-right: 2%;
	}

	.box p {
		font-size: 10px;
		color: #333; /* Color del texto */
		margin: 5px 0; /* Espacio entre los párrafos */
	}

#map{
	width:100%;
	height:100%;
}



@media only screen and (max-width: 768px) {
  
	.custom-container-mapa {
        flex-direction: column; 
        /* align-items: center;
        justify-content: space-between; */
        width: 100%;
        padding: 10px 20px;
    }
	
	#map {
        height: 250px; /* Reduce la altura del mapa en pantallas pequeñas */
    }
    .gm-style img {
        width: 30px;  /* Reduce el tamaño del marcador en pantallas pequeñas */
        height: 30px;
    }

	.custom-mapa.mobil {
		background-color: white;
	}
	
	.custom-mapa.mobil,  .custom-mapa.mobil-footer{
		display:block;

	}

	.custom-mapa.left {
	
		display:none;

	}
	
	.custom-mapa.left,
	.custom-mapa.right {
		max-width: 100%; 

	}
	
	.logos-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px; /* Ajusta el espacio entre las imágenes */
		margin-top: 5%;
		align-items: center; /* Centra los elementos verticalmente */
    	
	}

	.logos-container div {
		flex: 1 1 1%; /* Esto permite que cada logo tenga un ancho flexible y se ajuste al tamaño de la pantalla */
		text-align: center;
	}

	img {
		width: 100%; /* Las imágenes ocuparán el 100% del ancho de su contenedor */
		max-width: 150px; /* Puedes ajustar el tamaño máximo si lo necesitas */
		height: auto; /* Mantiene la proporción de la imagen */
	}
	
	#img_renault {
	  width: 80% !important;
	}
	
	#img_peugeot, #img_fiat, #img_citroen {
	  width: 90% !important;
	}
	
	
	.ubicaciones .box {
		background-color: #f4f4f4;
		border: none;
	}
	
	.mobil .ubicaciones {
		gap: 20px;
		padding: 20px;
	
	}

	/* Cuando haya 4 elementos, mostrar en 2 filas x 2 columnas */
	.mobil .ubicaciones:has(.box:nth-child(4)) {
		grid-template-columns: repeat(2, 1fr); /* 2 columnas */
	}

	/* Cuando hay menos de 4, mantener en una sola fila */
	.mobil .ubicaciones:not(:has(.box:nth-child(4))) {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
	
	


	
	
}

/* Ocultar imágenes antes de que Swiper se cargue */
.swiper-container {
    overflow: hidden;
    max-width: 100%;
	height: 100%; /* Asegura que el carrusel ocupe toda la altura */
}

.swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
	height: 100%; /* Asegura que los elementos dentro del wrapper ocupen toda la altura */
}

.swiper-container.swiper-initialized {
    visibility: visible;
    opacity: 1;
}

/* Ajustar imágenes dentro del carrusel */
.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Asegurar que el carrusel no tenga flechas */
.swiper-button-next,
.swiper-button-prev, .swiper-pagination{
    display: none !important;
}

/* Ocultar imágenes antes de que Swiper se inicialice */
.swiper-container:not(.swiper-initialized) {
    visibility: hidden;
}