/* ===========================================================
   IMPOMOTORS — custom.css
   Tenant demo (autopartes mayorista). Paleta azul navy #334990.
   El sistema inyecta --color-primario / --color-secundario en :root
   desde `parametros`. Acá van solo overrides propios del tenant.
   El tema fino se completa en Fase 2.
   =========================================================== */

:root {
	--impomotors-navy: #334990;
	--impomotors-navy-dark: #25356b;
}

/* Tamaño de los logos (navbar + footer) */
.navbar-brand img {
	width: 230px;
}

@media (max-width: 575.98px){
	.navbar-brand img {
		width: 150px;
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}
}

@media (max-width: 575.98px){
	.swiper-hero-con-barra, .swiper-hero-con-barra .swiper-slide {
		height: calc(100vw / 1.25) !important;
	}
}

@media (max-width: 991.98px) {
    #mobileMenu .mobile-menu-header, #mobileMenu .mobile-menu-header .mobile-menu-title, #mobileMenu .mobile-menu-header .mobile-menu-back {
        color: #ffffff;
    }
}

.logo-menu-mobile {
    width: 200px;
}

.footer-logo {
	width: 250px;
}

/* Botonera del header (Mayoristas + buscar + hamburguesa) en una fila alineada (como avip) */
.navbar-other div {
	display: flex;
	align-items: center;
	gap: 10px;
}

.boton-extranet {
	margin-bottom: 0px !important;
}

/* === Galerías de marcas: #divBloqueMarcas (repuestos) + #divBloqueMarcasdevehiculos (vehículos) === */
/* Recuadro blanco redondeado en ambas */
#divBloqueMarcas .swiper-container,
#divBloqueMarcasdevehiculos .swiper-container {
	background: #ffffff;
	border-radius: 0.5rem;
	padding: 0rem;
}
/* Velocidad uniforme (lineal) */
#divBloqueMarcas .swiper-wrapper,
#divBloqueMarcasdevehiculos .swiper-wrapper {
	transition-timing-function: linear !important;
}
/* Sin labels debajo de los logos + controles ocultos */
#divBloqueMarcas .swiper-slide h4, #divBloqueMarcas .swiper-slide .meta, #divBloqueMarcas .swiper-controls,
#divBloqueMarcasdevehiculos .swiper-slide h4, #divBloqueMarcasdevehiculos .swiper-slide .meta, #divBloqueMarcasdevehiculos .swiper-controls {
	display: none !important;
}
/* Logos centrados (tamaño por defecto, como la galería que ya funciona bien) */
#divBloqueMarcas .swiper-slide,
#divBloqueMarcasdevehiculos .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Alto vertical de los ítems del menú en desktop */
@media (min-width: 992px) {
	.navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}
}

/* Barra superior más finita */
#divBarraSuperior .container {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}

/* Alto del hero (portadas) acorde al ratio del video */
.swiper-hero-con-barra, .swiper-hero-con-barra .swiper-slide {
	height: calc(100vw / 2.58);
}

/* La portada de video (mp4) no debe capturar el arrastre del hero (espejo del iframe de YouTube,
   que ya tiene pointer-events:none). Sin esto se dispara el drag nativo del <video> y "se engancha"
   al mouse. El botón de mute y el CTA siguen clickeables (son elementos hermanos con pointer-events:auto). */
.mp4-video-container video {
	pointer-events: none;
}

/* Banner CTA de contacto (DudasContacto, modelo 7 = misma estructura que franquicias de 3dproductos) */
#divBloquePuntosAutorizados .card, #divBloqueFranquicias .card, #divBloqueDudasContacto .card {
	background-image: linear-gradient(90deg, #1b2547, #334990) !important;
}
#divBloqueDudasContacto h2, #divBloqueDudasContacto p {
	color: #ffffff !important;
}
#divBloqueDudasContacto .btn-secundario {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: #334990 !important;
}

/* Bloque institucional como tarjeta navy: mismo padding (py-7=1.75rem) y border-radius (.4rem) que el CTA DudasContacto */
#divBloqueInstitucional {
	background-image: none !important;
}
#divBloqueInstitucional .container {
	background-image: linear-gradient(135deg, #1b2547, #334990) !important;
	border-radius: 0.4rem;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;    margin: 0 20px;
    max-width: calc(100% - 40px);
}
/* padding-top con mayor especificidad: le gana a 'section.wrapper:not(#divPortadas) + section.wrapper' */
section.wrapper:not(#divPortadas) + section.wrapper#divBloqueInstitucional {
	padding-top: 1.5rem !important;
}
#divBloqueInstitucional .row {
	justify-content: center !important;
	margin-bottom: 0 !important;
}
#divBloqueInstitucional [class*="col-lg-"]:first-child {
	flex: 0 0 auto;
	width: 100%;
	max-width: 860px;
	text-align: center;
	position: static !important;
}
#divBloqueInstitucional [class*="col-lg-"]:last-child {
	display: none;
}
#divBloqueInstitucional .bloque-titulo,
#divBloqueInstitucional h3,
#divBloqueInstitucional h4,
#divBloqueInstitucional p {
	color: #ffffff !important;
}

/* Ícono de Twitter -> X (barra superior + footer): reemplaza el glifo por la X via mask SVG */
.fa-twitter::before {
	content: "" !important;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.742 21.75l-7.563-11.179 7.056-8.321h-2.456l-5.691 6.714-4.54-6.714H2.359l7.29 10.776L2.25 21.75h2.456l6.035-7.118 4.818 7.118h6.191-.008zM7.739 3.818L18.81 20.182h-2.447L5.29 3.818h2.447z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.742 21.75l-7.563-11.179 7.056-8.321h-2.456l-5.691 6.714-4.54-6.714H2.359l7.29 10.776L2.25 21.75h2.456l6.035-7.118 4.818 7.118h6.191-.008zM7.739 3.818L18.81 20.182h-2.447L5.29 3.818h2.447z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Bloque Newsletter — imitado de 3dproductos, adaptado a la paleta navy */
#divBloquePuntosAutorizados .card, #divBloqueFranquicias .card, #divBloqueNewsletter .card, #divBloqueReferidos .card{
	background-image: linear-gradient(90deg, #1b2547, #334990) !important;
}

#divBloqueNewsletter p {
	text-align: center;
	font-size: 0.9rem !important;
}

#divBloquePuntosAutorizados h3, #divBloqueFranquicias h3, #divBloqueNewsletter h2, #divBloqueReferidos h2{
	color: #ffffff !important;
	background-image: linear-gradient(to right, #ffffff 18%, #ffffff 69%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

/* Hover de las redes (barra/footer) */
.follow-link:hover {
	color: var(--color-secundario);
}

/* Autocomplete del buscador sobre fondo navy */
#divSugerenciasBuscar .link-dark {
	color: #ffffff;
	font-weight: 500;
}

#divSugerenciasBuscar h3 {
	color: #959ca9;
}

#divBloqueDestacados .swiper-container{
	margin-bottom: 0px !important;
}

/* Portada de video: el video va de fondo (absolute) para que los componentes (texto/CTA) se vean encima.
   Sin esto, el .mp4-video-container (position:relative, alto 100%) empuja el contenido fuera de vista. */
.mp4-video-container {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.mp4-video-container ~ .swiper-content {
	position: relative;
	z-index: 2;
}

/* Categorías estilo avip: nombre superpuesto abajo de la imagen (mayúscula, blanco, barra inferior) */
#divBloqueCategorias h4 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.5rem !important;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	color: white;
	opacity: 0.85;
	width: 100%;
	padding: .5rem;
	cursor: pointer;
	user-select: none;
	pointer-events: none;
	z-index: 10;
}
/* El h4 es absolute; fijamos el contexto en cada tarjeta para que se ancle por imagen */
#divBloqueCategorias .project.item,
#divBloqueCategorias .swiper-slide {
	position: relative;
}
@media (max-width: 1199.98px){
	#divBloqueCategorias h4 { font-size: 1.15rem !important; }
}
@media (max-width: 767.98px){
	#divBloqueCategorias h4 { font-size: 1.15rem !important; }
}
@media (max-width: 575.98px){
	#divBloqueCategorias h4 { font-size: 1.15rem !important; }
}

@media (max-width: 575.98px){
	.cls-componente-14 {
		font-size: 1.5rem !important;
	}

	.cls-componente-15 {
		display: none;
	}
}

.img-logo-nosotros, .img-logo-contacto {
    width: 250px;
}

/* Overlay oscuro sobre la imagen de cada categoría (detrás del nombre, para que el blanco se lea) */
#divBloqueCategorias figure.card-img-top {
	position: relative;
	overflow: hidden;
}
#divBloqueCategorias figure.card-img-top::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #000000, transparent 50%), linear-gradient(to right, #000000, transparent 50%);
	pointer-events: none;
	z-index: 1;
}

/* === Fuente del sitio: Rubik (registrada en head.php $google_fonts_por_proyecto) === */
:root {
	--bs-font-sans-serif: 'Rubik', sans-serif;
	--bs-body-font-family: 'Rubik', sans-serif;
}
body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.lead, .btn, .nav-link, .navbar-nav, .navbar-brand, .dropdown-item, .card-title, blockquote,
input, textarea, select, button, optgroup {
	font-family: 'Rubik', sans-serif !important;
}

/* Contacto: sin margen superior */
#divContacto {
	margin-top: 0px !important;
}
#divContacto .col-12 {
	margin-top: 0px !important;
}