/* ===========================================================
   REVIGAL — custom.css
   Productos para el cuidado del auto. Tenant demo (rediseño).
   Paleta: Rojo de marca #ED1C24 (primario) + Azul acero #305275
   (secundario / header) + footer oscuro #0F1319.
   El sistema inyecta --color-primario / --color-secundario en :root
   desde `parametros`. Tipografías: Montserrat (títulos) + Roboto (cuerpo),
   registradas en head.php ($google_fonts_por_proyecto["revigal"]).
   =========================================================== */

:root {
	--revigal-rojo: #ED1C24;
	--revigal-rojo-osc: #CA151C;
	--revigal-azul: #305275;
	--revigal-azul-osc: #243f5b;
	--revigal-oscuro: #0F1319;
}

/* === Tipografía === */
:root {
	--bs-font-sans-serif: 'Roboto', sans-serif;
	--bs-body-font-family: 'Roboto', sans-serif;
}
body,
.lead, .btn, .nav-link, .navbar-nav, .dropdown-item,
input, textarea, select, button, optgroup {
	font-family: 'Roboto', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .card-title, .bloque-titulo, blockquote {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600;
}

/* === Botón primario === */
.btn-primary {
	border-color: var(--color-secundario) !important;
	background: linear-gradient(to right, var(--color-secundario) 18%, #4c7bac 69%);
}
.swiper-hero-con-barra .btn-primary {
	background: var(--color-primario);
	border-color: var(--color-primario) !important;
}

/* === Carrito / Favoritos === */
#carritoMenu,
#favoritosMenu {
	width: 20rem;
	background: #ffffff;
}
#carritoMenu .btn i {
	color: #ffffff !important;
}

/* === Logos === */
.navbar-brand img { width: 185px; }
.footer-logo { width: 210px; filter: brightness(100); }
.logo-menu-mobile { width: 175px; }
.img-logo-nosotros, .img-logo-contacto { width: 230px; }

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

/* === Barra superior (topbar degradé secundario → rojo) === */
#divBarraSuperior {
	background-image: linear-gradient(270deg, var(--color-secundario), var(--revigal-rojo)) !important;
}
#divBarraSuperior .container {
	padding-top: 0.3rem !important;
	padding-bottom: 0.3rem !important;
}
#divBarraSuperior, #divBarraSuperior a, #divBarraSuperior .link-dark {
	color: #ffffff !important;
}
.follow-link:hover { color: #ffffff; opacity: .75; }

/* === Navbar blanca con texto oscuro === */
.navbar {
	background-color: #ffffff !important;
}
.navbar .nav-link,
.navbar-nav .nav-link,
.navbar .dropdown-toggle,
.navbar .navbar-toggler,
.navbar .material-symbols-rounded,
.navbar .uil {
	color: #3c3c3b !important;
}
.navbar-dark .navbar-nav .nav-link,
.dropdown-item {
	font-weight: 500;
	text-transform: uppercase;
}
.nav-link {
	font-size: .75rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
	color: var(--color-primario) !important;
}
.navbar .btn-icon {
	color: #ffffff !important;
}
#boton-extranet i {
	color: #ffffff !important;
}
.boton-extranet {
	font-weight: 500;
}
#mobileMenu {
	background: #ffffff;
}

/* 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.5rem;
		padding-bottom: 1.5rem;
	}
}

@media (max-width: 991.98px) {
	.navbar-brand img {
		padding: 25px 10px 25px 0px !important;
	}
	#mobileMenu .mobile-menu-panel {
		background: #ffffff;
	}
	#mobileMenu .mobile-menu-header,
	#mobileMenu .mobile-menu-header .mobile-menu-title,
	#mobileMenu .mobile-menu-header .mobile-menu-back {
		color: var(--color-primario);
	}
}

/* === Portada de secciones === */
.image-wrapper h3.display-1.fs-30 {
	font-size: 2.5rem !important;
}
.image-wrapper .overflow-hidden {
	background-color: #ffffff;
}

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

/* === Categorías: nombre superpuesto abajo (estilo avip/impomotors) === */
#divBloqueCategorias h4 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.35rem !important;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	color: #ffffff;
	width: 100%;
	padding: .6rem .7rem;
	cursor: pointer;
	user-select: none;
	pointer-events: none;
	z-index: 10;
	letter-spacing: .3px;
}
#divBloqueCategorias .project.item,
#divBloqueCategorias .swiper-slide { position: relative; }
#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, rgba(15,19,25,.85), transparent 55%);
	pointer-events: none;
	z-index: 1;
}
@media (max-width: 1199.98px){ #divBloqueCategorias h4 { font-size: 1.1rem !important; } }
@media (max-width: 767.98px){ #divBloqueCategorias h4 { font-size: 1.05rem !important; } }
@media (max-width: 575.98px){
	#divBloqueCategorias h4 {
		font-size: 0.82rem !important;
		padding: 5px 20px;
	}
}

/* === CTAs / Newsletter / Franquicias → degradé rojo de marca === */
#divBloquePuntosAutorizados .card,
#divBloqueFranquicias .card,
#divBloqueNewsletter .card,
#divBloqueReferidos .card,
#divBloqueDudasContacto .card {
	background-image: linear-gradient(270deg, var(--color-secundario), var(--revigal-rojo)) !important;
}
#divBloquePuntosAutorizados h3, #divBloqueFranquicias h3,
#divBloqueNewsletter h2, #divBloqueReferidos h2,
#divBloqueDudasContacto h2, #divBloqueDudasContacto p {
	color: #ffffff !important;
}
#divBloqueNewsletter p { text-align: center; font-size: 0.9rem !important; }
#divBloqueDudasContacto .btn-secundario {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--revigal-rojo) !important;
}

/* === Bloque institucional como tarjeta roja === */
#divBloqueInstitucional { background-image: none !important; }
#divBloqueInstitucional .container {
	background-image: linear-gradient(135deg, var(--revigal-rojo-osc), var(--revigal-rojo)) !important;
	border-radius: 0.4rem;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
	margin: 0 20px;
	max-width: calc(100% - 40px);
}
#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;
}

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

/* === Hamburger / Megamenu === */
.hamburger span, .hamburger:after, .hamburger:before,
.megamenu span, .megamenu:after, .megamenu:before {
	background: var(--color-primario);
}

/* === Links globales === */
a {
	color: #3c3c3b;
}
.ver-mas {
	color: var(--color-secundario);
}

/* === Accordion === */
.accordion-wrapper .card-header button {
	color: var(--color-secundario);
}
.accordion-wrapper .card-header button:hover {
	color: #ffffff;
}
.accordion-wrapper .card-header button:before {
	margin-top: -3px;
	color: var(--color-primario);
}

/* === Ficha de producto: h3 chico === */
[id^="divProducto_"] h3 {
	font-size: .7rem !important;
}

/* === Mapa puntos de venta === */
#divBloquePuntosVenta iframe {
	border-radius: .4rem;
}

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

/* === Nosotros: máscara SVG wordmark === */
.img-mask-nosotros {
	-webkit-mask-image: url(../../../../assets/img/revigal/svg/nosotros.svg);
	mask-image: url(../../../../assets/img/revigal/svg/nosotros.svg);
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 100%;
	height: auto;
}

/* === GothamNarrow (self-hosted) — usada en el catálogo interactivo === */
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-Book.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-Ultra.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'GothamNarrow';
	src: url('../../../fonts/custom/GothamNarrow-UltraItalic.woff') format('woff');
	font-weight: 800;
	font-style: italic;
}

/* === Catálogo interactivo === */
#divPreviewCatalogo {
	font-family: 'GothamNarrow', sans-serif;
}
#divPreviewCatalogo .catalogo-footer .img-logo-footer {
	/* width: 64px; */
	height: 30px;
}
#divPreviewCatalogo .catalogo-footer .separador-footer {
	display: none;
}