#site-header,
#site-footer {
	display: none;
}

:root {
	--bs-font-family-base: "MazdaType";
	--bs-gray: #676565;
	--bs-gray-100: #fbfbfb;
	--bs-gray-200: #e7e7e7;
	--bs-gray-300: #d5d5d5;
	--bs-gray-400: #a9a9a9;
	--bs-black: #101010;
	--bs-black-100: #2b2b2b;
	--bs-blue: #263854;
	--bs-blue-100: #e1e6ea;

	--bs-border-primary: #e7e7e7;
	--bs-border-secondary: #676565;
}

.text-gray {
	color: var(--bs-gray) !important;
}

.text-gray-100 {
	color: var(--bs-gray-100) !important;
}

.text-gray-200 {
	color: var(--bs-gray-200) !important;
}

.text-gray-300 {
	color: var(--bs-gray-300) !important;
}

.text-gray-400 {
	color: var(--bs-gray-400) !important;
}

.text-black {
	color: var(--bs-black) !important;
}

.text-blue {
	color: var(--bs-blue) !important;
}

.bg-gray {
	background-color: var(--bs-gray) !important;
}

.bg-gray-100 {
	background-color: var(--bs-gray-100) !important;
}

.bg-gray-200 {
	background-color: var(--bs-gray-200) !important;
}

.bg-gray-300 {
	background-color: var(--bs-gray-300) !important;
}

.bg-black {
	background-color: var(--bs-black) !important;
}

.bg-black-100 {
	background-color: var(--bs-black-100) !important;
}

.bg-blue-100 {
	background-color: var(--bs-blue-100) !important;
}

.border-primary {
	border-color: var(--bs-border-primary) !important;
}

.border-secondary {
	border-color: var(--bs-border-secondary) !important;
}

.letter-spacing-1 {
	letter-spacing: 1.6px !important;
}

.letter-spacing-2 {
	letter-spacing: 2.4px !important;
}

.letter-spacing-5 {
	letter-spacing: 5px !important;
}

.small-lg {
	font-size: 13px !important;
}

.small-md {
	font-size: 12px !important;
}

.small-xs {
	font-size: 11px !important;
}

.small-xxs {
	font-size: 10px !important;
}

@media only screen and (min-width: 992px) {
	.position-lg-absolute {
		position: absolute;
	}
}

/* Botones */
.customBoton {
	display: inline-block;
	font-size: 13px;
	font-weight: 700 !important;
	padding: 14px 26px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: 1px solid transparent;
	transition: all 0.5s ease;
	cursor: pointer;
}

.customBoton-blanco {
	background-color: var(--bs-white);
	color: var(--bs-black);
}

.customBoton-negro {
	background-color: var(--bs-black);
	color: var(--bs-white);
}

.customBoton-blanco:hover {
	background-color: var(--bs-black);
	color: var(--bs-white);
}

.customBoton-negro:hover {
	background-color: var(--bs-white) !important;
	color: var(--bs-black) !important;
	border: 1px solid var(--bs-black) !important;
}

.customBoton-hover-linea-blanco:hover {
	background-color: transparent;
	color: var(--bs-white);
	border: 1px solid var(--bs-white);
}

.customBoton-hover-linea-negra:hover {
	background-color: transparent;
	color: var(--bs-black);
	border: 1px solid var(--bs-black);
}

/* Header */
.customHeader {
	z-index: 9999;
}

.customHeader__toggle span {
	width: 18px;
	height: 2px;
	transition: all .3s ease;
}

.customHeader__toggle.activo span:nth-child(1) {
	transform: translate3d(0px, 7px, 0) rotate(40deg);
}

.customHeader__toggle.activo span:nth-child(2) {
	opacity: 0;
}

.customHeader__toggle.activo span:nth-child(3) {
	transform: translate3d(0px, -5px, 0) rotate(-40deg);
}

.customHeader__mobile {
	transition: all .3s ease;
	transform: translate3d(100%, 0, 0);
}

.customHeader__mobile.activo {
	transform: translate3d(0, 0, 0);
}

.customHeader__mobile [data-bs-toggle="collapse"] {
	color: var(--bs-white);
	background-color: var(--bs-black) !important;
}

.customHeader__mobile button.collapsed {
	color: var(--bs-black);
	background-color: transparent !important;
}



/* Submenu */
.submenu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transform: translateY(-150%);
	transition: all 300ms ease-in-out;
	z-index: 1000;
	visibility: hidden;
}

.submenu.active {
	transform: translateY(0);
	transition: all 800ms ease-in-out;
	z-index: -1;
	visibility: visible;
}

.submenu__container {
	display: grid;
	grid-template-columns: 400px 1fr;
}

/* Grid sin sidebar (ocupa todo el ancho) */
.submenu__grid.w-100 {
	max-width: 100%;
}

/* Submenu sidebar */
.submenu__sidebar {
	width: 400px;
	z-index: 2;
}

.scroll-y {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE y Edge */
	overflow: scroll;
	height: 100vh;
}

.scroll-y::-webkit-scrollbar {
	display: none; /* Chrome, Safari y Opera */
	background: transparent;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

.scroll-x {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE y Edge */
	overflow: scroll;
}

.scroll-x::-webkit-scrollbar {
	display: none; /* Chrome, Safari y Opera */
	background: transparent;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* Hover */
.hover-img {
	opacity: 1;
	visibility: visible;
	transition: all 0.3s ease;
}

.hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 0;
}

.hover-text {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.submenu__close {
	top: 88px;
	right: 43px;
}

/* Submenu grid */
.submenu__grid:before {
	content: "";
	display: block;
	position: fixed;
	top: 83px;
	left: 0;
	width: 100%;
	height: 64px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #fff 100%);
	z-index: 1;
}

.submenu__grid.submenuSimple:before {
	display: none;
}

.submenu__grid-item:hover {
	background-color: var(--bs-blue-100);
}

.bloqueSlider .swiper-slide:hover .hover-img,
.submenu__grid-item:hover .hover-img {
	opacity: 0;
	visibility: hidden;
}

.bloqueSlider .swiper-slide:hover .hover,
.submenu__grid-item:hover .hover,
.submenu__grid-item:hover .hover-text {
	opacity: 1;
	visibility: visible;
}

.submenu__grid-item:hover .submenu__grid-bottom p:not(.hover-text) {
	opacity: 0;
	visibility: hidden;
}

/* Submenu sidebar filtro */
.submenu__sidebar-filtro button:hover {
	background-color: transparent;
}

.hoverButtonAfter:after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	border-bottom: 2px solid var(--bs-black);
	transition: all 0.3s ease;
}

.hoverButton:hover.hoverButtonAfter:after,
.hoverButton.activo.hoverButtonAfter:after {
	width: 100%;
}

.hoverButtonAfter-fijo-blanco {
	width: 100%;
	border-bottom: 2px solid var(--bs-white);
}

/* Botón de cierre del submenú */
.close-submenu {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 24px;
	color: var(--bs-gray);
	cursor: pointer;
	z-index: 10;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.close-submenu:hover {
	background-color: var(--bs-gray-200);
	color: var(--bs-black);
	transform: scale(1.1);
}

/* bloqueHero */
@media only screen and (min-width: 992px) {
	.bloqueHero.hero {
		height: 500px;
	}
}

/* bloqueTarjetaEspecificaciones */
.bloqueTarjetaEspecificaciones h3 {
	font-size: 18px !important;
	letter-spacing: 1.6px !important;
}

.bloqueTarjetaEspecificaciones h3,
.bloqueTarjetaEspecificaciones p {
	margin: 0;
	font-weight: 400 !important;
}

.bloqueTarjetaEspecificaciones .col-6 .horizontal {
	border: 1px solid var(--bs-border-primary);
}

.bloqueTarjetaEspecificaciones .col-6:nth-child(1) .horizontal,
.bloqueTarjetaEspecificaciones .col-6:nth-child(2) .horizontal,
.bloqueTarjetaEspecificaciones .col-6:nth-child(3) .horizontal {
	border-right: none;
}

.bloqueTarjetaEspecificaciones .col-6:nth-child(1) .horizontal,
.bloqueTarjetaEspecificaciones .col-6:nth-child(3) .horizontal {
	border-left: none;
}

.bloqueTarjetaEspecificaciones .col-6:nth-child(4) .horizontal {
	border-right: none;
}

.bloqueTarjetaEspecificaciones .col-6:nth-child(1) .horizontal,
.bloqueTarjetaEspecificaciones .col-6:nth-child(2) .horizontal {
	border-bottom: none;
}

.bloqueTarjetaEspecificaciones .col-6:nth-child(1),
.bloqueTarjetaEspecificaciones .col-6:nth-child(3) {
	padding-right: 0 !important;
}

.bloqueTarjetaEspecificaciones .col-6:nth-child(2),
.bloqueTarjetaEspecificaciones .col-6:nth-child(4) {
	padding-left: 0 !important;
}

.bloqueTarjetaEspecificaciones .col-12 .vertical {
	border-bottom: 1px solid var(--bs-border-primary);
}

.bloqueTarjetaEspecificaciones .col-12:last-child .vertical {
	border-bottom: none !important;
}

.bloqueTarjetaEspecificaciones .px-0:last-child .vertical {
	border-bottom: none !important;
}

@media only screen and (min-width: 992px) {
	.bloqueTarjetaEspecificaciones .col-6:nth-child(1) .horizontal,
	.bloqueTarjetaEspecificaciones .col-6:nth-child(3) .horizontal,
	.bloqueTarjetaEspecificaciones .col-6:nth-child(4) .horizontal {
		border-left: 1px solid var(--bs-border-primary);
	}
	.bloqueTarjetaEspecificaciones .col-6:nth-child(1) .horizontal,
	.bloqueTarjetaEspecificaciones .col-6:nth-child(2) .horizontal {
		border-bottom: 1px solid var(--bs-border-primary);
	}

	.bloqueTarjetaEspecificaciones .col-6:nth-child(4) .horizontal {
		border-right: 1px solid var(--bs-border-primary);
	}

	.bloqueTarjetaEspecificaciones h3 {
		font-size: 22px !important;
		letter-spacing: 2.4px !important;
	}
}

/* bloqueCajaTexto */
.bloqueCajaTexto p {
	margin: 0;
}

.bloqueCajaTexto h2,
.bloqueCajaTexto h3,
.bloqueCajaTexto h4,
.bloqueCajaTexto h5,
.bloqueCajaTexto h6 {
	display: flex;
	align-items: center;
	margin: 0;
	letter-spacing: 5.2px !important;
}

/* bloqueSlider */
.swiper-button-next,
.swiper-button-prev {
	background-color: var(--bs-black);
}

.swiper-button-prev:after,
.swiper-button-next:after {
	font-size: 14px !important;
	color: var(--bs-white);
}

.swiperSliderTarjetas + .swiper-button-prev,
.swiperSliderTarjetas + button + .swiper-button-next {
	top: 36% !important;
}

.swiperSliderTarjetas img {
	max-width: 80%;
}

@media only screen and (min-width: 992px) {
	.border-start-end {
		border-left: 1px solid var(--bs-border-primary);
		border-right: 1px solid var(--bs-border-primary);
	}
}

/* bloqueTextoImagen */
.bloqueTextoImagen .row .row.g-lg-0,
.bloqueTextoImagen .row .row.gx-lg-0 {
	--bs-gutter-x: 0;
}

.bloqueTextoImagen .masonry {
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"one one"
		"one one"
		"two three";
	grid-template-rows: 30vw 30vw 0;
	max-width: unset;
}

.bloqueTextoImagen .masonry.masonry-invertida {
	grid-template-areas:
		"two one one"
		"three one one";
}

.bloqueTextoImagen .masonry .masonryOne {
	grid-area: one;
}

.gslide-desc {
	font-family: var(--bs-font-family-base) !important;
}

.glightbox-mobile .glightbox-container .gslide-description {
	position: relative !important;
}

.iconoExpandir:after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	padding: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;opacity:0;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eexpand%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='expand'%3E%3Cg id='expand-2' data-name='expand'%3E%3Crect class='cls-1' width='24' height='24' transform='translate(24 24) rotate(180)'/%3E%3Cpath class='cls-2' d='M20,5a1,1,0,0,0-1-1L14,4h0a1,1,0,0,0,0,2h2.57L13.29,9.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L18,7.42V10a1,1,0,0,0,1,1h0a1,1,0,0,0,1-1Z'/%3E%3Cpath class='cls-2' d='M10.71,13.29a1,1,0,0,0-1.42,0L6,16.57V14a1,1,0,0,0-1-1H5a1,1,0,0,0-1,1l0,5a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H7.42l3.29-3.29A1,1,0,0,0,10.71,13.29Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-color: var(--bs-black);
	background-size: 24px;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.bloqueTextoImagen .masonry img {
	height: 100%;
}

@media only screen and (min-width: 992px) {
	.bloqueTextoImagen .masonry {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"one one two"
			"one one three";
		grid-template-rows: repeat(2, 20vw);
		max-width: unset;
	}
}

/* sliderVideo */
.sliderVideo .swiper-button-next,
.sliderVideo .swiper-button-prev {
	top: 30%;
}

@media only screen and (min-width: 992px) {
	.sliderVideo .swiper-button-next,
	.sliderVideo .swiper-button-prev {
		top: 45%;
	}
}

.bloqueAcordeon .accordion-header > button {
	position: relative;
	padding-right: 32px;
}

.bloqueAcordeon .accordion-header > button::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 18px;
	height: 18px;
	color: var(--bs-black);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='45' width='80' height='10' fill='%23000'/%3E%3C/svg%3E");
	transform: translateY(-50%);
}

.bloqueAcordeon .accordion-header > button.collapsed::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 45h80v10H10z'/%3E%3Cpath d='M45 10h10v80H45z'/%3E%3C/svg%3E");
}

.bloqueAcordeon .accordion:last-child {
	border-bottom: 1px solid var(--bs-border-primary);
}

@media only screen and (min-width: 992px) {
	.bloqueAcordeon .accordion-header > button::after {
		right: 40px;
	}
}
/* bloque360 */
.bloque360 .btn-group {
	border-radius: 30px;
}

.visor-360 {
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.visor-360 img,
.visor-360 canvas {
	pointer-events: none;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.visor-360:active {
	cursor: grabbing !important;
}

.visor-360 * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dropdown button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23101010' fill-rule='evenodd' d='M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 16px;
	background-position: right 18px center;
	background-repeat: no-repeat;
	padding-right: 24px;
}

/* Estilos para selector de colores 360° */
.color-selector {
	position: relative;
	display: inline-block;
}

.color-circle {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid #fff;
	border-radius: 50%;
	transition: all 0.3s ease;
	cursor: pointer;
}

.color-selector input:checked + label .color-circle {
	border-color: #fff;
	border-width: 2px;
	box-shadow: 0 0 0 2px rgb(0, 0, 0);
	transform: scale(1.19);
}

/* Botones de vista INTERIOR/EXTERIOR */
.btn-check:checked + .customBoton {
	background-color: var(--bs-white) !important;
	color: var(--bs-black) !important;
}

/* Loading Spinner para el explorador 360° */
.loading-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.loading-spinner .spinner-border {
	width: 3rem;
	height: 3rem;
	border-width: 0.3rem;
}

.loading-spinner p {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 500;
}

/* Bloque Categorías de Vehículos - Nomenclatura BEM */
.bloqueCatVehiculo {
	position: relative;
}

.bloqueCatVehiculo__swiper {
	width: 100%;
	overflow: hidden;
}

.bloqueCatVehiculo__swiper .swiper-wrapper {
	display: flex;
	width: 100%;
}

.bloqueCatVehiculo__filtro {
	position: relative;
	z-index: 2;
}

/* Línea deslizante para filtros */
.bloqueCatVehiculo__linea {
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 3px;
	background: var(--bs-black);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
	opacity: 0;
}

.bloqueCatVehiculo__linea.active {
	opacity: 1;
}

/* Video hover para tarjetas de vehículos */
.bloqueCatVehiculo__slide {
	position: relative;
	overflow: hidden;
}

.bloqueCatVehiculo__slide a {
	position: relative;
	display: block;
}

.bloqueCatVehiculo__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	pointer-events: none;
}

.bloqueCatVehiculo__slide:hover .bloqueCatVehiculo__video {
	opacity: 1;
	visibility: visible;
}

.bloqueCatVehiculo__slide:hover .bloqueCatVehiculo__imagen {
	opacity: 0;
	transition: opacity 0.3s ease;
}


/* Navegación del swiper */
.swiper-nav-menu {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	transition: all 0.3s ease;
}

.swiper-nav-menu:hover {
	background-color: var(--bs-blue);
	transform: scale(1.1);
}

.swiper-nav-menu.swiper-button-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}


.autoplay-progress {
	font-size: 12px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--bs-white);
}

.autoplay-progress svg {
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0px;
	z-index: 10;
	width: 100%;
	height: 100%;
	stroke-width: 4px;
	stroke: var(--bs-white);
	fill: none;
	stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
	stroke-dasharray: 125.6;
	transform: rotate(-90deg);
}

.autoplay-progress span {
	font-family: var(--bs-font-family-base);
}

@media only screen and (min-width: 992px) {
	.autoplay-progress {
		width: 48px;
		height: 48px;
		font-size: 16px;
	}

	.bloqueCatVehiculo__swiper .swiper-wrapper {
	}
}

/* swiperCatVehiculos */
.swiperCatVehiculos .swiper-button-prev::after,
.swiperCatVehiculos .swiper-button-next::after {
	color: var(--bs-black);
}

/* Bloque Cat Vehículos - Swiper específico */
.bloqueCatVehiculo__swiper .swiper-button-prev::after,
.bloqueCatVehiculo__swiper .swiper-button-next::after {
	color: var(--bs-black);
}

.bloqueCatVehiculo__swiper .swiper-slide {
	width: auto;
	flex-shrink: 0;
}

/* Video hover para tarjetas de vehículos */
.vehiculo-slide {
	position: relative;
	overflow: hidden;
}

.vehiculo-slide a {
	position: relative;
	display: block;
}

.video-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	pointer-events: none;
}

.vehiculo-slide:hover .video-hover {
	opacity: 1;
	visibility: visible;
}

.vehiculo-slide:hover img {
	opacity: 0;
	transition: opacity 0.3s ease;
}

@media only screen and (min-width: 992px) {
	.border-lg-end {
		border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}
}