/**
 * components.css - Estilos por componente del proyecto Zontes Blanes.
 *
 * Cada bloque corresponde a un componente reutilizable que se aplica desde
 * Elementor mediante su clase (Avanzado > CSS Classes). Solo añade reglas
 * cuando Elementor no pueda resolver el estilo de forma nativa.
 *
 * Organiza por componente y documenta brevemente cada uno. No mezcles todo
 * ni dependas de IDs autogenerados.
 *
 * Estos bloques se dejan como plantilla/esqueleto: rellénalos cuando se
 * construyan los componentes reales con Elementor.
 */

/* =========================================================================
 * Mega-menú de la cabecera (desplegable de "Modelos")
 * Clases Elementor: .zontes-mega (contenedor) / .zontes-mega__panel (panel)
 * ========================================================================= */
.zontes-mega {
	position: relative;
}
/* El disparador "Modelos" se comporta como botón */
.zontes-mega > .elementor-widget-heading {
	cursor: pointer;
	user-select: none;
}
/* Panel = recuadro blanco. Oculto por defecto SIN tocar el display:flex
   (usamos visibility/opacity para no romper la fila de 2 columnas). */
.zontes-mega__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	width: 1180px;
	max-width: 92vw;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
/* Se abre/cierra al hacer CLIC (clase alternada por main.js) */
.zontes-mega.zontes-mega--open .zontes-mega__panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
/* Columnas del panel: barra clara (izda) + rejilla oscura que rellena (dcha) */
.zontes-mega__side {
	width: 27%;
	flex-shrink: 0;
}
.zontes-mega__grid {
	width: 73%;
}
/* Con muchas motos (p. ej. los 13 scooters = 4 filas) el bloque supera la
 * altura de la pantalla. El SCROLL INTERNO va en el propio bloque de motos
 * (.zontes-mega__motos), NO en .zontes-mega__grid: ese grid centra su
 * contenido verticalmente (flex), y al recortar por overflow dejaba la
 * primera fila por encima del área visible e inalcanzable. La barra
 * "Descubre" (izquierda) permanece fija. */
.zontes-mega__motos.is-visible {
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.zontes-mega__motos.is-visible::-webkit-scrollbar {
	width: 8px;
}
.zontes-mega__motos.is-visible::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .24);
	border-radius: 8px;
}
.zontes-mega__motos.is-visible::-webkit-scrollbar-track {
	background: transparent;
}

/* --- Tarjetas de categoría del mega-menú (estilo catálogo premium) ---
 * Loop item "Tile Categoría". La foto LLENA la tarjeta (cover) y hace un
 * ligero zoom al pasar el ratón; el nombre se ilumina. Clases aplicadas
 * al loop item desde Elementor: .zontes-mega-tile / __img / __name */
.zontes-mega-tile {
	position: relative;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
	text-decoration: none;
}
.zontes-mega-tile:hover {
	transform: translateY(-3px);
	background-color: #2f3033 !important;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}
/* La imagen ocupa todo el ancho y se recorta (cover); el zoom vive aquí. */
.zontes-mega-tile__img {
	overflow: hidden;
}
.zontes-mega-tile__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.zontes-mega-tile:hover .zontes-mega-tile__img img {
	transform: scale(1.07);
}
/* Nombre de la categoría: color base tenue -> blanco vivo al hover. */
.zontes-mega-tile__name .elementor-heading-title {
	color: #e7e9ee;
	transition: color .25s ease;
}
.zontes-mega-tile:hover .zontes-mega-tile__name .elementor-heading-title {
	color: #fff;
}

/* Animación de apertura del panel: entra deslizando desde arriba con una
 * curva más marcada y las tarjetas aparecen en cascada muy sutil. */
.zontes-mega__panel {
	transform: translateY(14px) scale(.99);
	transition: opacity .28s cubic-bezier(.2, .7, .2, 1),
		transform .28s cubic-bezier(.2, .7, .2, 1),
		visibility .28s;
}
.zontes-mega.zontes-mega--open .zontes-mega__panel {
	transform: translateY(0) scale(1);
}

/* --- Interacción lista de categorías (izda) -> modelos (dcha) ---
 * La lista izquierda actúa como pestañas: al pasar el ratón por una categoría
 * se muestran solo sus modelos a la derecha (lo hace main.js). Aquí solo el
 * estado visual "activo" y transiciones. Clases: .zontes-mega__cats (lista) /
 * .zontes-mega__motos (rejilla de modelos). */
.zontes-mega__cats .e-loop-item {
	cursor: pointer;
	transition: background-color .2s ease, padding-left .2s ease;
}
/* Nombre de la categoría a la izquierda: pista de color al pasar/activar. */
.zontes-mega__cats .e-loop-item:hover .elementor-heading-title,
.zontes-mega__cats .e-loop-item.is-active .elementor-heading-title {
	color: #1E5DBA !important;
}
/* La categoría activa se resalta con una barra azul a la izquierda. */
.zontes-mega__cats .e-loop-item.is-active {
	box-shadow: inset 3px 0 0 0 #1E5DBA;
	padding-left: 10px;
}
/* Aparición suave de los modelos al cambiar de categoría. */
.zontes-mega__motos .e-loop-item {
	animation: bzMegaFade .35s ease both;
}
@keyframes bzMegaFade {
	from { transform: translateY(8px); }
	to   { transform: translateY(0); }
}
/* Las motos del mega siempre a plena opacidad (la animación solo desliza). */
.zontes-mega__motos .e-loop-item {
	opacity: 1 !important;
}

/* =========================================================================
 * Tema día / noche (botón sol-luna en la cabecera)
 * Clase Elementor/HTML: .zontes-theme-toggle  ·  <html class="zontes-dark">
 * ========================================================================= */
.zontes-theme-toggle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	padding: 0;
	flex: 0 0 auto;
	transition: border-color .2s, background .2s;
}
.zontes-theme-toggle:hover,
.zontes-theme-toggle:focus,
.zontes-theme-toggle:focus-visible {
	border-color: #fff;
	background-color: #000 !important; /* anula el rosa-rojo por defecto del botón */
	color: #fff;
}

/* --- Modo noche: oscurece las superficies claras (variables de la referencia) --- */
.zontes-dark .zontes-surface {
	background-color: #121316 !important;
}
.zontes-dark .zontes-surface .elementor-heading-title:not([style*="30, 93, 186"]):not([style*="1E5DBA"]) {
	color: #f0f0f0 !important;
}
.zontes-dark .zontes-surface p,
.zontes-dark .zontes-surface .elementor-widget-text-editor {
	color: rgba(255, 255, 255, .55) !important;
}
/* Tarjetas de la gama en modo noche */
.zontes-dark .zontes-card {
	background-color: #1c1d20 !important;
	border-color: rgba(255, 255, 255, .09) !important;
}
.zontes-dark .zontes-card .elementor-heading-title {
	color: #f0f0f0 !important;
}
/* La transición suave al cambiar de tema */
.zontes-surface,
.zontes-surface .elementor-heading-title,
.zontes-card {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* =========================================================================
 * Logo de marca (cabecera y pie)
 * El logo es un PNG transparente en negro; sobre los fondos OSCUROS lo
 * mostramos en blanco con un filtro. Clase Elementor: .zontes-logo
 * ========================================================================= */
.zontes-logo img {
	filter: brightness(0) invert(1);
	display: block;
	height: auto;
}

/* =========================================================================
 * Columnas del pie (proporción de la referencia: 1.4 / 1 / 1 / 1)
 * El control de "ancho" de contenedor de Elementor no siempre renderiza,
 * así que fijamos las columnas por flex aquí. Clases:
 *   .zontes-foot (fila) · .zontes-foot__brand (col logo) · .zontes-foot__col
 * ========================================================================= */
.zontes-foot {
	align-items: flex-start;
}
.zontes-foot__brand {
	flex: 1.4 1 260px;
}
.zontes-foot__col {
	flex: 1 1 160px;
}
/* Blindaje escritorio: el contenedor "boxed" de Elementor envuelve las columnas
 * en un `.e-con-inner`, que no siempre hereda `flex-direction:row` en todos los
 * renders y deja el pie apilado en vertical. Forzamos la fila en >=768px sobre
 * nuestra propia clase (sin tocar IDs de Elementor). */
@media (min-width: 768px) {
	.zontes-foot,
	.zontes-foot > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: flex-start;
		width: 100%;
	}
	/* Cada columna reparte el ancho: logo un poco más ancho, resto iguales. */
	.zontes-foot__brand {
		flex: 1.4 1 260px !important;
	}
	.zontes-foot__col {
		flex: 1 1 160px !important;
	}
}
@media (max-width: 767px) {
	.zontes-foot,
	.zontes-foot > .e-con-inner {
		flex-direction: column;
	}
	.zontes-foot__brand,
	.zontes-foot__col {
		flex-basis: 100%;
	}
}

/* Barra inferior: copyright a la izquierda y enlaces legales a la derecha en la
 * misma línea. Mismo blindaje del contenedor "boxed" de Elementor. */
.zontes-foot__bottom,
.zontes-foot__bottom > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 16px 24px;
}
/* El grupo de enlaces legales es un contenedor "boxed" que, sin un `flex`
 * explícito, se estira al 100% y tira el copyright a la línea de abajo.
 * En escritorio lo forzamos a ocupar solo el ancho de su contenido. */
.zontes-foot__legal,
.zontes-foot__legal > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
}
@media (min-width: 768px) {
	.zontes-foot__legal {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
	}
}
/* En móvil: copyright y enlaces apilados, y los enlaces envuelven sin
 * desbordar (evita el scroll horizontal). */
@media (max-width: 767px) {
	.zontes-foot__bottom > .e-con-inner {
		flex-direction: column !important;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.zontes-foot__legal {
		width: 100% !important;
		flex: 1 1 100% !important;
	}
}

/* =========================================================================
 * Hero de modelo de moto
 * Clase Elementor: .zontes-hero-model
 * ========================================================================= */
.zontes-hero-model {
	/* Ajustes finos no cubiertos por Elementor. */
}

/* =========================================================================
 * Catálogo de modelos (CPT "moto")
 * Plantillas Elementor: Archivo Modelos (archive), Ficha Modelo (single),
 * Tarjeta Modelo (loop-item). El diseño principal vive en Elementor; aquí
 * solo van los detalles que Elementor no cubre bien (hover, estado activo
 * del filtro, divisores de la ficha, enlaces de tarjeta sin subrayado).
 * ========================================================================= */

/* --- Tarjeta de moto (loop item) --- */
.zontes-card-moto {
	transition: transform .25s ease, box-shadow .25s ease;
}
.zontes-card-moto:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
/* La imagen y el título enlazan al modelo: sin subrayado y heredando color. */
.zontes-card-moto__image a,
.zontes-card-moto__title a {
	text-decoration: none;
	color: inherit;
	display: block;
}
.zontes-card-moto__image img {
	display: block;
	width: 100%;
}

/* --- Navegación por categorías (archivo) --- */
.zontes-modelos-filter__btn .elementor-button {
	background-color: transparent;
	border: 1px solid rgba(22, 22, 22, .18);
	color: #161616;
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.zontes-modelos-filter__btn .elementor-button:hover,
.zontes-modelos-filter__btn.is-active .elementor-button {
	background-color: #1E5DBA;
	border-color: #1E5DBA;
	color: #fff;
}

/* --- Ficha rápida (specs) en la single --- */
.zontes-spec {
	text-align: center;
	position: relative;
}
/* Divisor vertical entre specs en escritorio. */
@media (min-width: 768px) {
	.zontes-spec:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 1px;
		height: 42px;
		transform: translateY(-50%);
		background: rgba(255, 255, 255, .12);
	}
}

/* --- Imagen principal de la ficha --- */
.zontes-single-hero__image img {
	width: 100%;
	height: auto;
}

/* =========================================================================
 * CTA de contacto/concesionario en Blanes
 * Clase Elementor: .zontes-cta-blanes
 * ========================================================================= */
.zontes-cta-blanes {
	/* Ajustes finos no cubiertos por Elementor. */
}

/* =========================================================================
 * Grid de características/ventajas
 * Clase Elementor: .zontes-feature-grid
 * ========================================================================= */
.zontes-feature-grid {
	/* Ajustes finos no cubiertos por Elementor. */
}

/* =========================================================================
 * Hero de la HOME con vídeo de fondo
 * Container Elementor: .home-hero-video (Background = Vídeo nativo + overlay)
 * Contenido: .home-hero-video__content
 * El vídeo, la imagen fallback y el overlay se editan desde Elementor Pro.
 * Aquí solo reforzamos el recorte elegante y que no haya scroll horizontal.
 * ========================================================================= */
/* Guarda global anti scroll horizontal. `clip` (no `hidden`) NO crea contenedor
 * de scroll, así que no rompe el header sticky de Elementor Pro. */
html {
	overflow-x: clip;
}
.home-hero-video {
	position: relative;
	overflow: hidden;          /* recorta el vídeo sin generar scroll horizontal */
	width: 100%;
	max-width: 100%;
}

/* =========================================================================
 * Cabecera transparente sobre el vídeo del hero (efecto inmersivo)
 * Clase: .zontes-header-overlay (container raíz del Header Zontes)
 * - Al inicio: transparente → se ve el vídeo por detrás del menú.
 * - Al hacer scroll (.elementor-sticky--active): fondo sólido para que el
 *   menú se lea sobre las secciones claras.
 * - El hero se sube bajo la cabecera con margin-top negativo = alto cabecera.
 *   En móvil la cabecera es alta (~252px) → se mantiene sólida, sin superponer.
 * ========================================================================= */
/* Por defecto la cabecera es SÓLIDA oscura, para que se lea en CUALQUIER página
 * interior (los héroes interiores no se suben bajo el header, así que si fuera
 * transparente la letra blanca quedaría sobre el fondo blanco = invisible). */
.zontes-header-overlay {
	background-color: #0D0E10 !important;
	background-image: none !important;
	transition: background-color .3s ease;
}
/* Solo en la HOME (escritorio/tablet) la cabecera es transparente al inicio,
 * para el efecto inmersivo sobre el vídeo (que sí se sube por detrás). Al hacer
 * scroll (.is-scrolled) vuelve a sólida. En móvil siempre sólida. */
@media (min-width: 768px) {
	.home .zontes-header-overlay:not(.is-scrolled) {
		background-color: transparent !important;
	}
}
.zontes-header-overlay.is-scrolled {
	background-color: #0D0E10 !important;
}
/* Escritorio (>1024px): hero bajo la cabecera de 112px. */
.home-hero-video {
	margin-top: -112px;
}
/* Tablet (768–1024px): cabecera de 85px. */
@media (max-width: 1024px) {
	.home-hero-video {
		margin-top: -85px;
	}
}
/* Móvil (<768px): cabecera alta → sólida y sin superponer. */
@media (max-width: 767px) {
	.zontes-header-overlay {
		background-color: #0D0E10 !important;
	}
	.home-hero-video {
		margin-top: 0;
	}
}
/* Garantiza object-fit: cover en el vídeo de fondo (sin deformar). */
.home-hero-video .elementor-background-video-container,
.home-hero-video .elementor-background-video-embed,
.home-hero-video video.elementor-background-video-hosted {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Overlay oscuro premium (degradado) SIEMPRE presente, tanto con vídeo como
 * con la imagen fallback. El texto del hero va alineado ABAJO, así que el
 * velo se concentra en el tercio inferior y deja el vídeo limpio arriba.
 * Para más/menos oscuridad, ajusta las opacidades de abajo. */
.home-hero-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.18) 0%,
		rgba(0, 0, 0, 0.10) 40%,
		rgba(0, 0, 0, 0.55) 78%,
		rgba(0, 0, 0, 0.72) 100%
	);
}
/* El contenido siempre por encima del vídeo y del overlay. */
.home-hero-video__content {
	position: relative;
	z-index: 2;
}
/* Botón del hero: un pelín de realce para contraste premium. */
.home-hero-video__content .elementor-button {
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	transition: transform .2s ease, box-shadow .2s ease;
}
.home-hero-video__content .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* =========================================================================
 * Enlaces de la cabecera añadidos como widgets heading (zona izquierda)
 * Clase: .zontes-navlink — mismo aspecto/hover que el Nav Menu de la derecha.
 * ========================================================================= */
/* No encoger: si no, con nowrap el texto se desborda y se solapan entre sí. */
.zontes-navlink {
	flex: 0 0 auto !important;
	width: auto !important;
}
.zontes-navlink .elementor-heading-title {
	transition: color .2s ease;
	cursor: pointer;
	white-space: nowrap;
}
.zontes-navlink .elementor-heading-title a {
	color: #FFFFFF;
	text-decoration: none;
}
.zontes-navlink:hover .elementor-heading-title,
.zontes-navlink:hover .elementor-heading-title a {
	color: rgba(255,255,255,0.7);
}

/* La zona izquierda: que el contenedor de "Modelos" (mega-menú) ocupe solo el
 * ancho de su texto, para que "Solicita una prueba" quede pegado al lado. */
.zontes-header-overlay .zontes-mega {
	flex: 0 0 auto !important;
	width: max-content !important;
}

/* Flecha (chevron) junto a "Modelos" indicando desplegable. Gira al abrir.
 * El widget "Modelos" es el heading directo del contenedor mega (dentro de su
 * .e-con-inner); NO los headings del panel desplegable. */
.zontes-mega > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.zontes-mega > .elementor-widget-heading .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.zontes-mega > .e-con-inner > .elementor-widget-heading .elementor-heading-title::after,
.zontes-mega > .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s ease;
	flex: 0 0 auto;
}
.zontes-mega.zontes-mega--open > .e-con-inner > .elementor-widget-heading .elementor-heading-title::after,
.zontes-mega.zontes-mega--open > .elementor-widget-heading .elementor-heading-title::after {
	transform: rotate(-135deg) translateY(-2px);
}

/* =========================================================================
 * Rejilla de modelos DEL MEGA-MENÚ: cada moto en una TARJETA con borde sutil
 * (mismo estilo de recuadro que las tarjetas de categoría). Adaptada a los dos
 * temas: en DÍA el grid es oscuro → caja oscura + borde claro; en NOCHE
 * (.zontes-dark) el grid es blanco → caja clara + borde oscuro. Scoped a
 * .zontes-mega__motos para NO afectar al archivo de modelos (misma plantilla 115).
 * ========================================================================= */
.zontes-mega__motos .zontes-card-moto {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 6px;
	text-align: center;
	padding: 16px 14px 18px;
	box-shadow: none !important;
	transition: background-color .2s ease, border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.zontes-mega__motos .zontes-card-moto:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, .07) !important;
	border-color: rgba(255, 255, 255, .18);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .38) !important;
}
/* NOCHE: el grid del mega es blanco → cajas claras con borde oscuro. */
.zontes-dark .zontes-mega__motos .zontes-card-moto {
	background: #f4f5f6 !important;
	border-color: rgba(0, 0, 0, .08);
}
.zontes-dark .zontes-mega__motos .zontes-card-moto:hover {
	background: #ffffff !important;
	border-color: rgba(0, 0, 0, .14);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .12) !important;
}
.zontes-mega__motos .zontes-card-moto__image img {
	object-fit: contain !important;
	height: 140px !important;
	width: 100%;
	background: transparent !important;
}
.zontes-mega__motos .zontes-card-moto__title .elementor-heading-title {
	text-align: center;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	margin-top: 6px;
	/* Reserva SIEMPRE el alto de 2 líneas para que todas las tarjetas midan
	   igual, aunque el nombre ocupe 1 sola línea (p. ej. "G1-125" vs "GK-125 X").
	   El texto queda centrado en ese hueco. */
	min-height: 2.5em;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Blindaje: todas las tarjetas del grid del mega a la misma altura. */
.zontes-mega__motos .e-loop-item {
	display: flex;
}
.zontes-mega__motos .zontes-card-moto {
	width: 100%;
}
/* La referencia no muestra la categoría bajo el nombre. */
.zontes-mega__motos .zontes-card-moto__cat {
	display: none !important;
}

/* =========================================================================
 * MEGA-MENÚ v2 — panel por CATEGORÍAS (estilo referencia)
 * Izquierda (.zontes-mega__side): "Descubre" + lista de categorías.
 * Derecha (.zontes-mega__grid > .zontes-cattiles): 8 fichas de categoría en
 * 4 columnas (Toda la gama + 7), cada una con moto representativa + nombre.
 * ========================================================================= */
/* --- Lista de categorías (izquierda) --- */
.zontes-mega__kicker .elementor-heading-title {
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.zontes-mega__catlink .elementor-heading-title {
	padding: 13px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	transition: color .2s ease, padding-left .2s ease;
	cursor: pointer;
}
.zontes-mega__catlink .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	display: block;
}
.zontes-mega__catlink:hover .elementor-heading-title,
.zontes-mega__catlink:hover .elementor-heading-title a {
	color: #1E5DBA;
	padding-left: 4px;
}

/* --- Rejilla de fichas de categoría (derecha), 4 columnas --- */
.zontes-cattiles > .e-con-inner,
.zontes-cattiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 22px;
	width: 100%;
}
.zontes-cattile {
	text-decoration: none;
	cursor: pointer;
	/* Caja con borde alrededor de cada moto (DÍA: rejilla oscura → caja oscura
	   + borde claro). En NOCHE se invierte más abajo. */
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 8px;
	padding: 18px 14px 16px;
	transition: transform .25s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.zontes-cattile:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .20);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .38);
}
/* NOCHE: la rejilla derecha es blanca → caja clara + borde oscuro. */
.zontes-dark .zontes-cattile {
	background: #f4f5f6;
	border-color: rgba(0, 0, 0, .09);
}
.zontes-dark .zontes-cattile:hover {
	background: #ffffff;
	border-color: rgba(0, 0, 0, .16);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
}
.zontes-cattile__img img {
	width: 100%;
	height: 150px;
	object-fit: contain;
	display: block;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.zontes-cattile:hover .zontes-cattile__img img {
	transform: scale(1.06);
}
.zontes-cattile__name .elementor-heading-title {
	color: #fff;
	transition: color .2s ease;
	margin-top: 4px;
	/* Reserva 2 líneas para que las fichas queden a la misma altura aunque el
	   nombre ocupe 1 o 2 líneas (p. ej. "Sport Touring" / "Toda la gama"). */
	min-height: 2.4em;
	line-height: 1.15;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zontes-cattile:hover .zontes-cattile__name .elementor-heading-title {
	color: #cfe0ff;
}
/* Modo NOCHE: la rejilla derecha es blanca → nombres oscuros. */
.zontes-dark .zontes-cattile__name .elementor-heading-title {
	color: #121316 !important;
}
.zontes-dark .zontes-cattile:hover .zontes-cattile__name .elementor-heading-title {
	color: #1E5DBA !important;
}
/* Eslogan bajo el nombre (azul, ambas temáticas). */
.zontes-cattile__slogan .elementor-heading-title {
	color: #1E5DBA;
	line-height: 1.2;
}
/* Botón "Descubrir" — SOLO en la tarjeta destacada de Scooters (.--cta). */
.zontes-cattile__btn {
	margin-top: 10px;
	width: 100%;
}
.zontes-cattile__btn .elementor-button {
	background-color: #1E5DBA;
	color: #FFFFFF;
	border: 1px solid #1E5DBA;
	border-radius: 4px;
	padding: 9px 18px;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .6px;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.zontes-cattile__btn .elementor-button:hover {
	background-color: #FFFFFF;
	color: #1E5DBA;
	transform: translateY(-1px);
}
/* Responsive del panel (por si se estrecha). */
@media (max-width: 1024px) {
	.zontes-cattiles > .e-con-inner,
	.zontes-cattiles {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.zontes-cattiles > .e-con-inner,
	.zontes-cattiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Interacción: clic en categoría (izda) → modelos (dcha) ---
 * El grid de modelos está oculto por defecto; main.js muestra los de la
 * categoría clicada y oculta las fichas de categoría. Sin JS: las categorías
 * de la izquierda son enlaces normales al archivo (mejora progresiva). */
.zontes-mega__grid .zontes-mega__motos {
	display: none;
}
.zontes-mega__grid .zontes-mega__motos.is-visible {
	display: block;
}
.zontes-cattiles.is-hidden {
	display: none;
}
.zontes-mega__catlink.is-active .elementor-heading-title,
.zontes-mega__catlink.is-active .elementor-heading-title a {
	color: #1E5DBA;
}
.zontes-mega__catlink.is-active .elementor-heading-title {
	padding-left: 4px;
}
.zontes-mega__kicker {
	cursor: pointer;
}
/* Evita el recuadro de foco al clicar con ratón (mantiene el de teclado). */
.zontes-mega__side :focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================================
 * Página de MODELO (Ficha) — secciones tipo zontesmotos.es
 * ========================================================================= */
/* Banner lifestyle: overlay para legibilidad del título. */
.zontes-model-banner {
	position: relative;
	overflow: hidden;
}
.zontes-model-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.65) 100%);
	pointer-events: none;
	z-index: 1;
}
.zontes-model-banner > * {
	position: relative;
	z-index: 2;
}
.zontes-model-banner__title {
	text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
/* Tarjetas de color: leve realce e imagen que llena. */
.zontes-model-colors img {
	width: 100%;
	height: auto;
	display: block;
}

/* Forzar FILAS en las secciones de modelo (contenedores boxed que se apilan). */
.zontes-model-feature {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 48px;
}
.zontes-model-feature > .e-con,
.zontes-model-feature .zontes-model-feature__txt {
	flex: 1 1 420px !important;
	width: auto !important;
	max-width: 560px;
}
.zontes-model-feature__img {
	flex: 1 1 420px !important;
}
.zontes-model-colors > .e-con-inner,
.zontes-model-colors {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center;
}
.zontes-model-colors > .e-con-inner > .e-con {
	flex: 1 1 300px !important;
	width: auto !important;
	max-width: 380px;
}

/* Tiles de "Nuestra gama": moto completa (contain) con aire alrededor. */
.zontes-card .elementor-widget-image {
	padding: 14px 16px 0;
}
.zontes-card img {
	object-fit: contain !important;
}

/* Eslogan de categoría (azul) — azul también en modo noche. La regla noche
 * `.zontes-dark .zontes-surface .elementor-heading-title:not()...` tiene
 * especificidad (0,5,0) por los dos :not, así que subimos la nuestra a (0,6,0). */
.zontes-card__slogan .elementor-heading-title,
.zontes-dark .zontes-surface .zontes-card .zontes-card__slogan.elementor-widget .elementor-heading-title {
	color: #2E6FD1 !important;
}

/* Botón "Descubrir" en la tarjeta de categoría (sección "Nuestra gama").
 * Azul de marca con letra blanca SIEMPRE (también en hover). Se sube la
 * especificidad + !important para ganar al color del kit de Elementor
 * (.elementor-button { background: var(--e-global-color-accent) }). */
.zontes-card__btn {
	margin: 14px 16px 18px;
}
.zontes-card__btn .elementor-button,
.zontes-card__btn .elementor-button:hover,
.zontes-card__btn .elementor-button:focus,
.zontes-card__btn .elementor-button:active {
	background-color: #1E5DBA !important;
	color: #FFFFFF !important;
	border: 1px solid #1E5DBA !important;
	border-radius: 4px;
	padding: 10px 22px;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .6px;
	text-transform: uppercase;
	transition: background-color .2s ease, transform .2s ease;
}
.zontes-card__btn .elementor-button:hover {
	background-color: #17509F !important;   /* azul algo más oscuro; la letra sigue blanca */
	transform: translateY(-2px);
}
.zontes-card__btn .elementor-button .elementor-button-text {
	color: #FFFFFF !important;
}

/* En MODO NOCHE, la rejilla de motos del mega en blanco (coherente con el
 * sidebar claro). Los nombres pasan a oscuro para que se lean sobre blanco. */
.zontes-dark .zontes-mega__grid {
	background-color: #FFFFFF !important;
}
.zontes-dark .zontes-mega__motos .zontes-card-moto__title .elementor-heading-title {
	color: #121316 !important;
}

/* Icono del toggle (sol/luna): siempre blanco y en presentación de TEXTO
 * (evita que el sol ☀ se pinte como emoji amarillo). */
.zontes-theme-toggle__ico {
	color: #fff;
	font-variant-emoji: text;
}

/* =========================================================================
 * FICHA DE MODELO PREMIUM (landing tipo producto) — ejemplo 125X
 * Marco compartido en la plantilla single "Ficha Modelo" (119):
 *   .zontes-hero125 (hero) · .zontes-databar (barra verde) · .zontes-ctabar (CTA iconos)
 * Cuerpo único de cada moto (lienzo del post):
 *   .zontes-fullimg · .zontes-product · .zontes-greenblock · .zontes-mosaic
 *   .zontes-spectable · .zontes-accessories
 *
 * NOTA DE LAYOUT: los contenedores "boxed" de Elementor envuelven a sus hijos
 * en `.e-con-inner`, que en este render NO hereda `flex-direction:row` → se
 * apilan. Por eso forzamos la fila sobre `.clase > .e-con-inner` (mismo patrón
 * que el pie y las secciones de modelo existentes).
 * ========================================================================= */

/* --- Botones premium (borde blanco/fondo transparente; hover invertido) --- */
.zontes-btn .elementor-button {
	border-radius: 2px;
	padding: 14px 30px;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .4px;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.zontes-btn .elementor-button:hover {
	transform: translateY(-2px);
}
.zontes-btn--primary .elementor-button {
	background-color: #FFFFFF;
	color: #111111;
	border: 1px solid #FFFFFF;
}
.zontes-btn--primary .elementor-button:hover {
	background-color: rgba(255, 255, 255, .85);
	color: #111111;
}
.zontes-btn--ghost .elementor-button {
	background-color: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, .55);
}
.zontes-btn--ghost .elementor-button:hover {
	background-color: #FFFFFF;
	color: #111111;
	border-color: #FFFFFF;
}
/* Variante "light": botón blanco sólido sobre fondos verdes/oscuros. */
.zontes-btn--light .elementor-button {
	background-color: #FFFFFF;
	color: #173124;
	border: 1px solid #FFFFFF;
}
.zontes-btn--light .elementor-button:hover {
	background-color: transparent;
	color: #FFFFFF;
	border-color: #FFFFFF;
}

/* --- HERO 125X: texto a la izquierda, moto a la derecha --- */
.zontes-hero125__row,
.zontes-hero125__row > .e-con-inner {
	align-items: center;
}
@media (min-width: 768px) {
	.zontes-hero125__row,
	.zontes-hero125__row > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: wrap;
	}
	.zontes-hero125__text {
		flex: 1 1 46% !important;
	}
	.zontes-hero125__media {
		flex: 1 1 46% !important;
	}
}
.zontes-hero125__img img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
}
.zontes-hero125__price {
	margin-top: 4px;
}
.zontes-hero125__price .elementor-heading-title::before {
	content: "Desde ";
	font-weight: 400;
	font-size: .6em;
	color: #9AA0AB;
	vertical-align: middle;
	margin-right: 6px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* --- TAG DE DISPONIBILIDAD (stock) del hero -------------------------------
 * Lo pinta el shortcode [bz_stock] (ver inc/moto-fields.php) según la meta
 * bz_stock de cada moto. Píldora translúcida del color del estado + punto:
 * legible sobre la foto oscura del hero sin competir con los CTA.
 *   .zontes-stock--ok   = EN STOCK (verde)
 *   .zontes-stock--wait = RESERVA  (naranja)
 *   .zontes-stock--no   = SIN STOCK (rojo)
 */
.zontes-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--bz-stock-color);
	background-color: color-mix(in srgb, var(--bz-stock-color) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--bz-stock-color) 45%, transparent);
	backdrop-filter: blur(2px);
}
.zontes-stock__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--bz-stock-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bz-stock-color) 25%, transparent);
	flex: 0 0 auto;
}
/* Colores por estado (tonos claros: el hero es oscuro). */
.zontes-stock--ok   { --bz-stock-color: #3DD68C; }
.zontes-stock--wait { --bz-stock-color: #FF9F43; }
.zontes-stock--no   { --bz-stock-color: #FF5A5A; }

/* Navegadores sin color-mix (Safari < 16.2): color plano de respaldo. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.zontes-stock {
		background-color: rgba(0, 0, 0, .45);
		border-color: var(--bz-stock-color);
	}
}

/* El widget shortcode de Elementor es un bloque: que el tag no ocupe toda la
   columna ni herede el interlineado del hero. */
.zontes-hero125__stock {
	line-height: 1;
}

@media (max-width: 767px) {
	.zontes-stock {
		font-size: 11px;
		padding: 6px 12px;
	}
}

/* --- BARRA DE DATOS (4 columnas / 2 en móvil) --- */
/* Color de acento por modelo: cada moto puede fijar bz_accent (meta) y la ficha
   se tiñe con --bz-accent; sin valor cae al verde de marca. Ver inc/moto-fields
   (bz_moto_accent_css) y .zontes-greenblock. */
.zontes-databar {
	background-color: var(--bz-accent, #244D35) !important;
}
.zontes-databar__row,
.zontes-databar__row > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: stretch;
}
.zontes-databar__item {
	/* Base explícita: los contenedores Elementor traen width:100%; con basis
	   auto cada dato ocuparía la fila entera y se apilarían en vertical. */
	flex: 1 1 0 !important;
	width: auto !important;
	text-align: center;
	padding: 6px 10px;
	position: relative;
}
@media (min-width: 768px) {
	.zontes-databar__item + .zontes-databar__item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 46px;
		background: rgba(255, 255, 255, .18);
	}
}
@media (max-width: 767px) {
	.zontes-databar__item {
		flex: 1 1 40% !important;
		margin-bottom: 14px;
	}
}

/* --- IMAGEN FULL WIDTH (aparición al scroll vía animación Elementor) --- */
.zontes-fullimg {
	width: 100%;
	max-width: 100%;
}

/* --- SECCIÓN PRODUCTO (carrusel sobre blanco) --- */
.zontes-product__carousel {
	max-width: 960px !important;
	margin: 0 auto;
	width: 100%;
}
.zontes-product__carousel .elementor-image-carousel-wrapper {
	width: 100%;
}
/* Elementor/Swiper estira el slide a la altura de la imagen a ancho completo
   (llegaba a ~1400px). Constreñimos la imagen para una vista de catálogo. */
.zontes-product__carousel .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
}
.zontes-product__carousel .swiper-slide figure,
.zontes-product__carousel .swiper-slide .elementor-carousel-image {
	width: 100%;
	background: none !important;
}
.zontes-product__carousel .swiper-slide img {
	max-height: 520px;
	width: auto !important;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
	display: block;
}

/* Zoom suave de la imagen del carrusel al pasar el ratón (efecto catálogo). */
.zontes-product__carousel .swiper-slide img {
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.zontes-product__carousel .swiper-slide:hover img {
	transform: scale(1.05);
}

/* --- FLECHAS LATERALES DEL CARRUSEL DE COLOR (prev/next) ---
   Elementor ya renderiza .elementor-swiper-button-prev/next (navigation:both) y
   Swiper gestiona su funcionalidad; aquí SOLO les damos un aspecto discreto y
   elegante, en círculo semitransparente, centradas verticalmente junto a la
   imagen. Van ancladas al .elementor-image-carousel-wrapper (position:relative de
   Swiper), así que quedan a los lados de la foto activa de cada color. */
.zontes-product__carousel .elementor-image-carousel-wrapper .elementor-swiper-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .72);
	color: #161616;
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	backdrop-filter: blur(2px);
	cursor: pointer;
	opacity: .85;
	transition: opacity .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.zontes-product__carousel .elementor-image-carousel-wrapper .elementor-swiper-button-prev {
	left: 10px;
	right: auto;
}
.zontes-product__carousel .elementor-image-carousel-wrapper .elementor-swiper-button-next {
	right: 10px;
	left: auto;
}
.zontes-product__carousel .elementor-swiper-button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.zontes-product__carousel .elementor-swiper-button:hover {
	opacity: 1;
	background: #ffffff;
	color: var(--bz-accent, #244D35);   /* chevron con el acento del modelo */
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.zontes-product__carousel .elementor-swiper-button:focus-visible {
	outline: 2px solid var(--bz-accent, #244D35);
	outline-offset: 2px;
}
/* En el 1er/último slide Swiper marca la flecha como disabled (sin bucle infinito
   quedaría atenuada); aquí el carrusel es infinito, pero lo dejamos por si acaso. */
.zontes-product__carousel .elementor-swiper-button.swiper-button-disabled {
	opacity: .3;
	cursor: default;
	box-shadow: none;
}
/* Móvil: más pequeñas, más pegadas al borde y algo más translúcidas para no tapar
   la moto. */
@media (max-width: 767px) {
	.zontes-product__carousel .elementor-image-carousel-wrapper .elementor-swiper-button {
		width: 34px;
		height: 34px;
		background: rgba(255, 255, 255, .62);
	}
	.zontes-product__carousel .elementor-image-carousel-wrapper .elementor-swiper-button-prev { left: 4px; }
	.zontes-product__carousel .elementor-image-carousel-wrapper .elementor-swiper-button-next { right: 4px; }
	.zontes-product__carousel .elementor-swiper-button svg {
		width: 16px;
		height: 16px;
	}
}

/* Puntos inferiores en el color de acento del modelo (se mantienen los del carrusel). */
.zontes-product__carousel .swiper-pagination-bullet {
	background: #161616;
	opacity: .28;
	transition: opacity .2s ease, transform .2s ease;
}
.zontes-product__carousel .swiper-pagination-bullet-active {
	background: var(--bz-accent, #244D35);
	opacity: 1;
	transform: scale(1.2);
}

/* --- GALERÍA POR COLOR + SELECTOR DE COLOR (swatches) --- */
.zontes-colorblock {
	max-width: 1000px;
	margin: 0 auto;
}
.zontes-colorblock__label .elementor-heading-title {
	position: relative;
	padding-bottom: 10px;
}
.zontes-colorblock__label .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 3px;
	transform: translateX(-50%);
	background: var(--bz-accent, #244D35);   /* acento del modelo */
	border-radius: 2px;
}

/* Fila de swatches (círculos de color) — un carrusel visible cada vez. */
.zontes-colorpick__swatches {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 4px;
}
.zontes-colorpick__swatch {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .12);
	background-color: var(--sw, #cccccc);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform .15s ease, box-shadow .15s ease;
}
/* El color del círculo (--sw, fijado inline por cada modelo) manda SIEMPRE.
   Sin esto, una regla global de <button> del tema/Elementor gana por
   especificidad al pasar el ratón/enfocar/pulsar y tiñe el círculo de rosa,
   reflejando un color que no es el elegido. Fijamos el color en TODOS los
   estados para que siempre se vea el acabado real de la moto. */
.zontes-colorpick__swatch,
.zontes-colorpick__swatch:hover,
.zontes-colorpick__swatch:focus,
.zontes-colorpick__swatch:active,
.zontes-colorpick__swatch:focus-visible,
.zontes-colorpick__swatch.is-active {
	background-color: var(--sw, #cccccc) !important;
	background-image: none !important;
}
.zontes-colorpick__swatch:hover {
	transform: scale(1.08);
}
/* El anillo azul de .is-active ya marca el foco al pulsar; evitamos el anillo
   por defecto del navegador (que se veía en otro color) y damos uno de acento
   limpio solo para navegación por teclado. */
.zontes-colorpick__swatch:focus {
	outline: none;
}
.zontes-colorpick__swatch:focus-visible {
	outline: 2px solid var(--bz-accent, #244D35);
	outline-offset: 3px;
}
.zontes-colorpick__swatch.is-active {
	border-color: #ffffff;
	box-shadow: 0 0 0 3px var(--bz-accent, #244D35);
	transform: scale(1.08);
}
/* Solo con JS (html.bz-js) se oculta todo menos el color activo; sin JS se ven
   todos los carruseles (mejora progresiva, igual que .bz-reveal). */
.bz-js .zontes-colorpick .zontes-colorblock {
	display: none;
}
.bz-js .zontes-colorpick .zontes-colorblock.is-active {
	display: flex;
}

/* --- BLOQUES DE CONTENIDO (titular grande izq. + texto der.) --- */
/* Mismo acento por modelo que la barra de datos (var --bz-accent, verde por defecto). */
.zontes-greenblock {
	background-color: var(--bz-accent, #244D35) !important;
}
.zontes-greenblock__title .elementor-heading-title {
	white-space: pre-line;      /* respeta los saltos de línea del titular */
	letter-spacing: .5px;
}
@media (min-width: 768px) {
	.zontes-greenblock__row,
	.zontes-greenblock__row > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
	}
	.zontes-greenblock__head {
		flex: 1 1 40% !important;
	}
	.zontes-greenblock__body {
		flex: 1 1 50% !important;
	}
}
@media (max-width: 767px) {
	.zontes-greenblock__row,
	.zontes-greenblock__row > .e-con-inner {
		flex-direction: column !important;
	}
}

/* --- MOSAICO DE DETALLES (collage en grid) ---
 * El grid va SOLO en el .e-con-inner (que contiene las imágenes). Ponerlo
 * también en .zontes-mosaic creaba un grid dentro de otro y aplastaba el
 * mosaico a una sola fila (200px). */
.zontes-mosaic > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 200px;
	gap: 10px;
	width: 100%;
}
.zontes-mosaic__item {
	overflow: hidden;
	height: 100%;
}
.zontes-mosaic__item--1 {
	grid-column: span 2;
	grid-row: span 2;
}
.zontes-mosaic__item .elementor-widget-container,
.zontes-mosaic__item figure,
.zontes-mosaic__item a {
	height: 100%;
}
.zontes-mosaic__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 767px) {
	.zontes-mosaic > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
	}
	.zontes-mosaic__item--1 {
		grid-column: auto;
		grid-row: auto;
	}
}

/* --- TABLA DE FICHA TÉCNICA (líneas finas, minimalista) --- */
.zontes-spectable {
	border-top: 1px solid #e7e7e7;
}
.zontes-spectable__row,
.zontes-spectable__row > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.zontes-spectable__row {
	padding: 14px 4px;
	border-bottom: 1px solid #e7e7e7;
}
.zontes-spectable__v .elementor-heading-title {
	text-align: right;
}
/* Cabecera de grupo (Motor / Parte ciclo / ...), como la ficha oficial. */
.zontes-spectable__group .elementor-heading-title {
	margin-top: 34px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bz-accent, #244D35);
	color: var(--bz-accent, #244D35);
}
.zontes-spectable > *:first-child .zontes-spectable__group .elementor-heading-title,
.zontes-spectable > .zontes-spectable__group:first-child .elementor-heading-title {
	margin-top: 0;
}

/* --- ACCESORIOS (tarjetas; scroll horizontal en móvil) --- */
@media (min-width: 768px) {
	.zontes-acccards,
	.zontes-acccards > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap;
	}
	.zontes-acccard {
		flex: 1 1 0 !important;
	}
	/* Variante rejilla 4×2 (8 accesorios) — se envuelven en filas de 4. */
	.zontes-acccards--grid,
	.zontes-acccards--grid > .e-con-inner {
		flex-wrap: wrap !important;
	}
	.zontes-acccards--grid .zontes-acccard {
		flex: 0 0 calc(25% - 18px) !important;
		max-width: calc(25% - 18px);
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.zontes-acccards--grid .zontes-acccard {
		flex: 0 0 calc(50% - 12px) !important;
		max-width: calc(50% - 12px);
	}
}
@media (max-width: 767px) {
	.zontes-acccards {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.zontes-acccards > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap;
	}
	.zontes-acccard {
		flex: 0 0 74% !important;
	}
	/* En móvil, la rejilla también se desliza horizontalmente. */
	.zontes-acccards--grid > .e-con-inner {
		flex-wrap: nowrap !important;
	}
	.zontes-acccards--grid .zontes-acccard {
		flex: 0 0 74% !important;
		max-width: 74%;
	}
}
.zontes-acccard {
	background: #FFFFFF;
	text-align: left;
	transition: transform .25s ease, box-shadow .25s ease;
}
.zontes-acccard:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
}
.zontes-acccard__img {
	overflow: hidden;
}
.zontes-acccard__img img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid #eee;
	transition: transform .4s ease;
}
.zontes-acccard:hover .zontes-acccard__img img {
	transform: scale(1.04);
}

/* --- BARRA DE CTA CON ICONOS (4 accesos; 2x2 en móvil) --- */
.zontes-ctabar__row,
.zontes-ctabar__row > .e-con-inner {
	flex-direction: row !important;
	flex-wrap: wrap;
}
.zontes-ctabar__item {
	flex: 1 1 0 !important;
	width: auto !important;
	text-align: center;
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}
.zontes-ctabar__item:hover {
	transform: translateY(-3px);
	opacity: .85;
}
.zontes-ctabar__icon {
	text-align: center;
}
@media (max-width: 767px) {
	.zontes-ctabar__item {
		flex: 1 1 40% !important;
		margin-bottom: 18px;
	}
}

/* Titular "Encuentra tu Zontes" en azul de marca, también en modo noche
 * (la regla noche de .zontes-surface con :not() no debe grisearlo). */
.zontes-gama-title .elementor-heading-title,
html.zontes-dark .zontes-surface .zontes-gama-title.elementor-widget-heading .elementor-heading-title {
	color: #1E5DBA !important;
}

/* Kicker "NUESTRA GAMA" en BLANCO en modo noche (alta especificidad para
 * ganar al oscurecido (0,5,0) de .zontes-dark .zontes-surface). */
html.zontes-dark .zontes-surface .zontes-gama-kicker.elementor-widget-heading .elementor-heading-title {
	color: #FFFFFF !important;
}

/* =========================================================================
 * REVEAL al hacer scroll (ficha de modelo) — progressive enhancement.
 * El estado oculto SOLO existe cuando main.js añade <html class="bz-js">.
 * Sin JS, o con "reduce motion", el contenido se muestra siempre.
 * ========================================================================= */
.bz-js .bz-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	will-change: opacity, transform;
}
.bz-js .bz-reveal.bz-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bz-js .bz-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =========================================================================
 * SECCIÓN "MUNDO SCOOTER" — SOLO archivo de la categoría Scooters.
 * Marco premium oscuro/verde. Encapsulado bajo el prefijo .zontes-sco-*
 * (no afecta a ninguna otra parte de la web). Ver dev/build_scooters.php.
 * ========================================================================= */

/* Filas de 2 columnas (imagen + texto). Los contenedores boxed con
 * flex_direction:row apilan porque el .e-con-inner no hereda la fila →
 * la forzamos aquí (mismo patrón que .zontes-hero125 / .zontes-greenblock). */
.zontes-sco-hero__row,
.zontes-sco-hero__row > .e-con-inner,
.zontes-sco-row,
.zontes-sco-row > .e-con-inner {
	align-items: center;
}
@media (min-width: 768px) {
	.zontes-sco-hero__row,
	.zontes-sco-hero__row > .e-con-inner,
	.zontes-sco-row,
	.zontes-sco-row > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap;
	}
	.zontes-sco-hero__text,
	.zontes-sco-hero__media,
	.zontes-sco-col {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
	}
}
@media (max-width: 767px) {
	.zontes-sco-hero__row,
	.zontes-sco-hero__row > .e-con-inner,
	.zontes-sco-row,
	.zontes-sco-row > .e-con-inner {
		flex-direction: column !important;
	}
	/* En móvil, imagen SIEMPRE arriba aunque el bloque sea "flip". */
	.zontes-sco-cblock--flip .zontes-sco-row > .e-con-inner {
		flex-direction: column-reverse !important;
	}
}

/* Imágenes de las columnas (moto grande, contenida). */
.zontes-sco__img img,
.zontes-sco-hero__img img,
.zontes-sco-feat__img img {
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: contain;
	display: block;
}
.zontes-sco-hero__img img {
	max-height: 520px;
}

/* Banner lifestyle full-width. */
.zontes-sco-banner {
	width: 100%;
	max-width: 100%;
}

/* Rejilla de la gama (reusa la Tarjeta Modelo 115). */
.zontes-sco-gama__grid {
	width: 100%;
	max-width: 1200px;
}

/* Título de bloques de contenido con un sutil filete azul de marca. */
.zontes-sco-col--text .elementor-heading-title {
	position: relative;
}

/* Ajustes responsive finos. */
@media (max-width: 767px) {
	.zontes-sco-hero__text {
		text-align: left;
	}
	.zontes-sco-col--text {
		text-align: left;
	}
}

/* =========================================================================
 * SECCIÓN "MUNDO TRAIL" — SOLO archivo de la categoría Trail.
 * Réplica FIEL de zontesmotos.es/mundo-trail-zontes: tema CLARO, tipografía
 * Nunito Sans, azul de marca #1E5DBA, grises #F5F5F5/#E4E4E4, texto #232323.
 * Prefijo .zontes-trail-* (no afecta a ninguna otra parte). Ver dev/build_trail.php.
 * ========================================================================= */

.zontes-trail-wrap,
.zontes-trail-wrap .elementor-heading-title,
.zontes-trail-wrap p {
	font-family: "Nunito Sans", "Poppins", sans-serif;
}

/* --- 0) TELÓN OSCURO EN DEGRADADO para legibilidad del texto blanco ---------
 * Afecta a TODAS las secciones con imagen de fondo + texto de estas landings
 * (Trail, Scooter y todos los Mundos: Scrambler/Custom/Naked/Sport Touring).
 * Elementor pinta el overlay como pseudo-elemento ::before del contenedor, con
 * un color plano a opacidad 0.5 (efecto real ~0.22, casi invisible). Aquí lo
 * sustituimos por un degradado que refuerza el contraste sin apagar la foto.
 * !important es necesario: las reglas ::before de Elementor tienen más
 * especificidad, pero no usan !important, así que ganamos. */

/* HERO de los "Mundos": el título va alineado ABAJO (ver
 * dev/patch_hero_align_bottom.php) -> velo concentrado en la parte inferior,
 * dejando la foto despejada arriba. */
.zontes-trail-hero::before {
	background-color: transparent !important;
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.16) 0%,
		rgba(0, 0, 0, 0.10) 42%,
		rgba(0, 0, 0, 0.52) 76%,
		rgba(0, 0, 0, 0.68) 100%
	) !important;
	opacity: 1 !important;
}

/* Banner "TRAIL"/"SCOOTER" (franja fina): título centrado -> degradado radial. */
.zontes-trail-modelsbanner::before {
	background-color: transparent !important;
	background-image: radial-gradient(
		ellipse 95% 85% at 50% 50%,
		rgba(0, 0, 0, 0.62) 0%,
		rgba(0, 0, 0, 0.48) 42%,
		rgba(0, 0, 0, 0.20) 100%
	) !important;
	opacity: 1 !important;
}

/* BLOQUES EDITORIALES: texto a un lado y la moto (imagen de producto) al otro,
 * ambos sobre la foto de fondo -> velo vertical firme y uniforme. La foto queda
 * como ambiente, no compite: garantiza contraste caiga donde caiga el texto y
 * hace que la moto recortada resalte sobre el fondo. */
.zontes-trail-editorial::before {
	background-color: transparent !important;
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.70) 0%,
		rgba(0, 0, 0, 0.80) 100%
	) !important;
	opacity: 1 !important;
}

/* Sombra sutil en todos los textos sobre imagen: refuerza el contraste sobre
 * las zonas claras de la foto sin necesidad de más oscurecimiento. */
.zontes-trail-hero .elementor-heading-title,
.zontes-trail-modelsbanner .elementor-heading-title,
.zontes-trail-editorial .elementor-heading-title,
.zontes-trail-editorial p {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Móvil/tablet: la foto se recorta más; ampliamos el núcleo oscuro para que el
 * texto (más pequeño) siga leyéndose con holgura. */
@media (max-width: 767px) {
	.zontes-trail-hero::before {
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.22) 0%,
			rgba(0, 0, 0, 0.14) 38%,
			rgba(0, 0, 0, 0.58) 72%,
			rgba(0, 0, 0, 0.74) 100%
		) !important;
	}
	.zontes-trail-modelsbanner::before {
		background-image: radial-gradient(
			ellipse 130% 80% at 50% 50%,
			rgba(0, 0, 0, 0.66) 0%,
			rgba(0, 0, 0, 0.52) 55%,
			rgba(0, 0, 0, 0.30) 100%
		) !important;
	}
	.zontes-trail-editorial::before {
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.74) 0%,
			rgba(0, 0, 0, 0.84) 100%
		) !important;
	}
}

/* --- Botón azul de marca (DESCÚBRELA / VER MÁS) --- */
.zontes-trail-btn .elementor-button {
	background-color: #1E5DBA;
	color: #fff;
	border-radius: 4px;
	padding: 13px 34px;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	transition: background-color .2s ease, transform .2s ease;
}
.zontes-trail-btn .elementor-button:hover {
	background-color: #164a95;
	transform: translateY(-2px);
}

/* --- 1) Bloques editoriales: imagen + texto en 2 columnas --- */
.zontes-trail-ed__row > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	width: 100%;
}
.zontes-trail-ed__img img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}
@media (max-width: 900px) {
	.zontes-trail-ed__row > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: 26px;
	}
	/* La imagen siempre arriba, aunque la fila sea "flip". */
	.zontes-trail-ed__row--flip .zontes-trail-ed__media {
		order: -1;
	}
	.zontes-trail-ed__text {
		text-align: left;
	}
}

/* --- 2) Rejilla de modelos TRAIL (4 tarjetas) --- */
.zontes-trail-cards > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	width: 100%;
}
.zontes-trail-card {
	background: #F2F2F2;
	border-radius: 8px;
	padding: 26px 20px 28px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.zontes-trail-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.zontes-trail-card__img img {
	width: 100%;
	height: 190px;
	object-fit: contain;
	display: block;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.zontes-trail-cards > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
/* Móvil: 1 tarjeta de moto por fila (hasta 767px). */
@media (max-width: 767px) {
	.zontes-trail-cards > .e-con-inner { grid-template-columns: 1fr; }
}
/* Variante de 3 columnas (rejilla de 9 modelos de Mundo Scooter). */
.zontes-trail-cards--3 > .e-con-inner { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) and (max-width: 900px) {
	.zontes-trail-cards--3 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
/* Móvil: 1 tarjeta de moto por fila (hasta 767px). */
@media (max-width: 767px) {
	.zontes-trail-cards--3 > .e-con-inner { grid-template-columns: 1fr; }
}

/* --- 2b) Rejilla DINÁMICA de modelos (shortcode [bz_modelos]) ---
   Reproduce la rejilla de arriba sin depender del wrapper .e-con-inner de
   Elementor, para que el shortcode que rellena los archivos de categoría
   (Mundo Trail, Scooter, etc.) se vea idéntico a las tarjetas manuales que
   sustituye. Comparte el estilo de tarjeta .zontes-trail-card. */
.zontes-gama-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	width: 100%;
}
.zontes-gama-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) and (max-width: 1024px) {
	.zontes-gama-grid,
	.zontes-gama-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.zontes-gama-grid,
	.zontes-gama-grid--3 { grid-template-columns: 1fr; }
}

/* Nombre del modelo en la tarjeta dinámica (equivale al heading H3 manual). */
.zontes-trail-card__name {
	margin: 0;
	text-align: center;
	color: #232323;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
}
.zontes-trail-card__price {
	display: block;
	text-align: center;
	color: #1E5DBA;
	font-weight: 800;
	font-size: 18px;
}
.zontes-trail-card__price small {
	display: block;
	color: #6b6b6b;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.zontes-trail-card__btn { text-align: center; }
/* La tarjeta dinámica maqueta en columna centrada (como el container manual). */
.zontes-gama-grid .zontes-trail-card,
.zontes-geo-carousel .zontes-trail-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
/* El botón azul funciona con o sin la clase .elementor-button de Elementor. */
.zontes-trail-btn > a,
.zontes-trail-btn .elementor-button {
	display: inline-block;
	background-color: #1E5DBA;
	color: #fff;
	border-radius: 4px;
	padding: 13px 34px;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.zontes-trail-btn > a:hover,
.zontes-trail-btn .elementor-button:hover {
	background-color: #164a95;
	transform: translateY(-2px);
	color: #fff;
}

/* --- 3) "DESCUBRE": rejilla de 6 banners --- */
.zontes-trail-banners > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
}
.zontes-trail-banner {
	overflow: hidden;
	border-radius: 8px;
	line-height: 0;
}
.zontes-trail-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.zontes-trail-banner:hover img {
	transform: scale(1.05);
}
@media (max-width: 900px) {
	.zontes-trail-banners > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.zontes-trail-banners > .e-con-inner { grid-template-columns: 1fr; }
}

/* =========================================================================
 * PÁGINA "SOBRE ZONTES" (/sobre-zontes/) — réplica de zontesmotos.es/compania
 * Construida por dev/build_sobre_zontes.php. Prefijo .zontes-sz-*.
 * Diseño calcado del original: secciones alternas BLANCO/GRIS (#2D2D2D),
 * hero con foto a sangre + banda de título, timeline HORIZONTAL con eje de
 * años, y banner CTA final. Paleta original: gris #2D2D2D, azul #1E5DBA.
 * ========================================================================= */

/* --- Hero: foto a sangre (full-bleed) + banda de título gris --- */
.zontes-sz-hero__img img {
	width: 100%;
	height: auto;
	display: block;
}
.zontes-sz-titleband__h .elementor-heading-title {
	letter-spacing: .5px;
}

/* --- Filas a 2 columnas (imagen + texto), lado a lado en escritorio --- */
.zontes-sz-row > .e-con-inner {
	display: grid;
	gap: 50px;
	align-items: center;
	width: 100%;
}
.zontes-sz-row--mleft > .e-con-inner {
	grid-template-columns: 42% 1fr;
}
.zontes-sz-row--mright > .e-con-inner {
	grid-template-columns: 1fr 44%;
}
@media (max-width: 900px) {
	.zontes-sz-row > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: 28px;
	}
}

/* --- Secciones claras (Grupo Tayo, Turbimot) --- */
.zontes-sz-light .zontes-sz-h .elementor-heading-title {
	position: relative;
	padding-bottom: 14px;
}
.zontes-sz-light .zontes-sz-h .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 190px;
	max-width: 60%;
	height: 2px;
	background: #1E5DBA;
}
.zontes-sz-img-rounded img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Vídeo fábrica a ancho completo --- */
.zontes-sz-video {
	width: 100%;
}
.zontes-sz-video .elementor-widget-video,
.zontes-sz-video .e-con-inner {
	width: 100%;
}

/* --- Timeline HORIZONTAL "Nuestra historia" --- */
.zontes-sz-htimeline {
	width: 100%;
	max-width: 1200px;
}
.zontes-sz-hcols > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
}
.zontes-sz-hcol__kicker .elementor-heading-title {
	color: #1E5DBA;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.zontes-sz-hcol__text p {
	color: rgba(255, 255, 255, 0.80);
	font-size: 15px;
	line-height: 1.7;
}
/* Eje de años con línea horizontal y círculos azules. */
.zontes-sz-years {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin-top: 42px;
}
.zontes-sz-years > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
	align-items: center;
}
.zontes-sz-years::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: 50%;
	height: 2px;
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-50%);
	z-index: 0;
}
.zontes-sz-year {
	position: relative;
	z-index: 1;
	align-items: center !important;
}
.zontes-sz-year .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #1E5DBA;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 0 0 6px #2D2D2D;
}

/* --- Banner CTA final "Solicita una prueba" --- */
.zontes-sz-ctabanner {
	width: 100%;
	position: relative;
}
.zontes-sz-cta__title .elementor-heading-title {
	letter-spacing: 3px;
}
/* Botón oscuro del banner CTA (como el original). */
.zontes-sz-ctabanner .zontes-btn .elementor-button {
	background: #1b1b1b;
	color: #FFFFFF;
	border: none;
	padding: 15px 34px;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: .3px;
	transition: background .25s ease, transform .25s ease;
}
.zontes-sz-ctabanner .zontes-btn .elementor-button:hover {
	background: #000000;
	transform: translateY(-2px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.zontes-sz-hcols > .e-con-inner,
	.zontes-sz-years > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
	}
	.zontes-sz-years::before {
		display: none;
	}
}
@media (max-width: 600px) {
	.zontes-sz-hcols > .e-con-inner,
	.zontes-sz-years > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * SECCIÓN DE CONTACTO GLOBAL (#contacto) — vive en la plantilla Footer Zontes
 * (ver dev/patch_contact_footer.php), por lo que aparece en TODAS las páginas.
 * Clases: .zontes-contact (sección) · __row (2 columnas) · __intro (textos)
 *         · __formbox (caja blanca) · __phone (teléfono clicable)
 * ========================================================================= */
/* Al llegar por ancla (#contacto), deja aire para la cabecera sticky. */
.zontes-contact {
	scroll-margin-top: 96px;
}
/* Dos columnas en escritorio (mismo blindaje .e-con-inner del resto del sitio). */
@media (min-width: 768px) {
	.zontes-contact__row,
	.zontes-contact__row > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
	}
	.zontes-contact__intro {
		flex: 1 1 40% !important;
	}
	.zontes-contact__formbox {
		flex: 1 1 50% !important;
	}
}
@media (max-width: 767px) {
	.zontes-contact__row,
	.zontes-contact__row > .e-con-inner {
		flex-direction: column !important;
	}
	.zontes-contact__intro,
	.zontes-contact__formbox {
		width: 100% !important;
	}
}
/* Teléfono de la sección: blanco también como enlace, con subrayado al hover. */
.zontes-contact__phone .elementor-heading-title a {
	color: #FFFFFF;
	text-decoration: none;
	transition: opacity .2s ease;
}
.zontes-contact__phone .elementor-heading-title a:hover {
	opacity: .8;
	text-decoration: underline;
}

/* =========================================================================
 * MODO NOCHE — PÁGINAS INTERIORES
 * El toggle (main.js) pone <html class="zontes-dark">. Hasta ahora solo se
 * oscurecían las superficies de la home (.zontes-surface); aquí se extiende
 * a las zonas BLANCAS del resto del sitio. Las zonas de color (azul, acento
 * por modelo, fotos) no se tocan.
 *   - Ficha de moto: .zontes-product (carrusel de colores),
 *     .zontes-spectable-wrap (ficha técnica), .zontes-accessories.
 *   - Archivo de modelos: .zontes-modelos-filter y .zontes-modelos-wrap.
 *   - Sobre Zontes: secciones claras .zontes-sz-light.
 * ========================================================================= */
/* Fondo base de la página (asoma en secciones sin fondo propio). */
html.zontes-dark,
.zontes-dark body {
	background-color: #121316 !important;
}

/* Superficies blancas -> gris casi negro de la paleta del sitio. */
.zontes-dark .zontes-product,
.zontes-dark .zontes-spectable-wrap,
.zontes-dark .zontes-accessories,
.zontes-dark .zontes-modelos-filter,
.zontes-dark .zontes-modelos-wrap,
.zontes-dark .zontes-sz-light {
	background-color: #121316 !important;
}

/* Titulares y textos de esas superficies (traen colores oscuros inline). */
.zontes-dark .zontes-product .elementor-heading-title,
.zontes-dark .zontes-spectable-wrap .elementor-heading-title,
.zontes-dark .zontes-sz-light .elementor-heading-title {
	color: #f0f0f0 !important;
}
.zontes-dark .zontes-product p,
.zontes-dark .zontes-spectable-wrap p,
.zontes-dark .zontes-sz-light p,
.zontes-dark .zontes-sz-light .elementor-widget-text-editor {
	color: rgba(255, 255, 255, .62) !important;
}
/* Cabeceras de grupo de la ficha técnica: se mantiene el filete de acento,
 * pero el texto pasa a claro para leerse sobre el fondo oscuro. */
.zontes-dark .zontes-spectable__group .elementor-heading-title {
	color: #f0f0f0 !important;
}
/* Líneas de la tabla técnica: de gris claro a blanco translúcido. */
.zontes-dark .zontes-spectable {
	border-top-color: rgba(255, 255, 255, .16);
}
.zontes-dark .zontes-spectable__row {
	border-bottom-color: rgba(255, 255, 255, .10);
}

/* Accesorios: la sección se oscurece pero las TARJETAS quedan claras (las
 * fotos de producto tienen fondo blanco y así se integran, mismo criterio
 * que las tarjetas del mega-menú en modo noche). Solo se aclara el titular
 * general de la sección. */
.zontes-dark .zontes-accessories > .elementor-widget-heading .elementor-heading-title,
.zontes-dark .zontes-accessories > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
	color: #f0f0f0 !important;
}
.zontes-dark .zontes-acccard {
	background: #f4f5f6;
	border-radius: 6px;
}

/* Selector de color de la ficha: el nombre del color y los swatches ya se
 * resuelven arriba; el anillo activo gana contraste sobre oscuro. */
.zontes-dark .zontes-colorpick__swatch {
	border-color: rgba(255, 255, 255, .25);
}
.zontes-dark .zontes-colorpick__swatch.is-active {
	border-color: #121316;
}
/* Puntos del carrusel: de negro a blanco sobre el fondo oscuro. */
.zontes-dark .zontes-product__carousel .swiper-pagination-bullet {
	background: #ffffff;
}

/* Filtro del archivo de modelos: botones con borde/texto claros; el estado
 * activo/hover sigue siendo el azul de marca. */
.zontes-dark .zontes-modelos-filter__btn .elementor-button {
	border-color: rgba(255, 255, 255, .28);
	color: #f0f0f0;
}
.zontes-dark .zontes-modelos-filter__btn .elementor-button:hover,
.zontes-dark .zontes-modelos-filter__btn.is-active .elementor-button {
	background-color: #1E5DBA;
	border-color: #1E5DBA;
	color: #fff;
}

/* =========================================================================
 * FAQ (acordeón anidado de Elementor con clase .zontes-faq)
 * Las preguntas/respuestas se editan en Elementor; inc/seo.php genera el
 * schema FAQPage automáticamente a partir de este mismo acordeón.
 * Estilo: tarjetas blancas con borde fino sobre la superficie gris clara.
 * ========================================================================= */
.zontes-faq .e-n-accordion-item {
	background: #FFFFFF;
	border: 1px solid #E7E7E9;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}
.zontes-faq .e-n-accordion-item-title {
	padding: 18px 20px;
	cursor: pointer;
}
.zontes-faq .e-n-accordion-item > .e-con {
	padding: 0 20px 18px;
}
/* Modo noche: tarjetas oscuras y texto claro (la sección usa .zontes-surface). */
.zontes-dark .zontes-faq .e-n-accordion-item {
	background: #1c1d20;
	border-color: rgba(255, 255, 255, .09);
}
.zontes-dark .zontes-faq .e-n-accordion-item-title,
.zontes-dark .zontes-faq .e-n-accordion-item-title .e-n-accordion-item-title-text {
	color: #f0f0f0 !important;
}
.zontes-dark .zontes-faq .e-n-accordion-item p {
	color: rgba(255, 255, 255, .65) !important;
}

/* =========================================================================
 * BOTÓN FLOTANTE DE WHATSAPP — se pinta desde inc/whatsapp.php (wp_footer)
 * y se configura en Apariencia → Personalizar → "Contacto y WhatsApp".
 * Clase: .zontes-whatsapp
 * ========================================================================= */
.zontes-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;              /* por encima del contenido, debajo de modales admin */
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #25D366;   /* verde oficial WhatsApp */
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.zontes-whatsapp:hover,
.zontes-whatsapp:focus-visible {
	background-color: #1EBE5A;
	color: #FFFFFF;
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}
.zontes-whatsapp svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
	display: block;
}
/* Accesible pero invisible: etiqueta para lectores de pantalla. */
.zontes-whatsapp .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
@media (max-width: 767px) {
	.zontes-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 52px;
		height: 52px;
	}
}

/* Ancla de las FAQ de financiación (home): al llegar desde los iconos
   "Financiar" de las fichas, deja aire bajo la cabecera fija y no queda
   el título tapado. */
#financiacion {
	scroll-margin-top: 100px;
}

/* =========================================================================
 * LANDINGS SEO/GEO POR POBLACIÓN  (plantilla single-poblacion.php)
 * Namespace .zontes-geo-*  ·  reutiliza la identidad de la web (Poppins,
 * azul de marca #1E5DBA, oscuros #0D0E10/#121316) sin depender de Elementor.
 * ========================================================================= */
.zontes-geo {
	font-family: "Poppins", sans-serif;
	color: #1a1a1a;
}
.zontes-geo-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.zontes-geo-section {
	padding: 72px 0;
	background: #FFFFFF;
}
.zontes-geo-section--alt {
	background: #F5F6F8;
}
.zontes-geo-kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #1E5DBA;
	margin-bottom: 12px;
}
.zontes-geo-h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 18px;
	color: #0D0E10;
}
.zontes-geo-lead {
	font-size: 17px;
	line-height: 1.75;
	color: #444;
	max-width: 760px;
}

/* --- Botones --- */
.zontes-geo-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 2px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.zontes-geo-btn:hover { transform: translateY(-2px); }
.zontes-geo-btn--primary { background: #FFFFFF; color: #111111; border-color: #FFFFFF; }
.zontes-geo-btn--primary:hover { background: rgba(255,255,255,.85); color:#111; }
.zontes-geo-btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.zontes-geo-btn--ghost:hover { background: #FFFFFF; color: #111111; }
.zontes-geo-btn--blue { background: #1E5DBA; color: #FFFFFF; border-color: #1E5DBA; }
.zontes-geo-btn--blue:hover { background: #164a95; color:#fff; }

/* --- HERO --- */
.zontes-geo-hero {
	position: relative;
	background:
		radial-gradient(ellipse 90% 120% at 15% 10%, rgba(30,93,186,.35) 0%, rgba(30,93,186,0) 55%),
		linear-gradient(135deg, #0D0E10 0%, #121a2b 55%, #0D0E10 100%);
	color: #FFFFFF;
	padding: 96px 0 84px;
}
.zontes-geo-hero__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.zontes-geo-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.zontes-geo-hero__chip .dot { width:7px; height:7px; border-radius:50%; background:#3DD68C; box-shadow:0 0 0 3px rgba(61,214,140,.25); }
.zontes-geo-hero h1 {
	font-size: clamp(28px, 5vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 18px;
	max-width: 900px;
}
.zontes-geo-hero h1 .accent { color: #6ea8ff; }
.zontes-geo-hero__sub {
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255,255,255,.82);
	max-width: 680px;
	margin: 0 0 32px;
}
.zontes-geo-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Carrusel de modelos: 4 visibles en escritorio y 1 en móvil. --- */
.zontes-geo-carousel {
	position: relative;
	margin-top: 34px;
	padding: 0 52px;
}
.zontes-geo-carousel__viewport {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.zontes-geo-carousel__viewport::-webkit-scrollbar { display: none; }
.zontes-geo-carousel__track {
	display: flex;
	gap: 22px;
}
.zontes-geo-carousel__slide {
	flex: 0 0 calc((100% - 66px) / 4);
	scroll-snap-align: start;
}
.zontes-geo-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #1E5DBA;
	color: #fff;
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color .2s, opacity .2s, transform .2s;
}
.zontes-geo-carousel__arrow span { font-size: 34px; line-height: 1; transform: translateY(-2px); }
.zontes-geo-carousel__arrow--prev { left: 0; }
.zontes-geo-carousel__arrow--next { right: 0; }
.zontes-geo-carousel__arrow:hover { background: #164a95; transform: translateY(-50%) scale(1.06); }
.zontes-geo-carousel__arrow:focus-visible { outline: 3px solid rgba(30,93,186,.3); outline-offset: 3px; }
.zontes-geo-carousel__arrow:disabled { opacity: .3; cursor: default; transform: translateY(-50%); }
.zontes-geo-model {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #ececf0;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s, box-shadow .25s;
}
.zontes-geo-model:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.zontes-geo-model__img { aspect-ratio: 4/3; background: #f2f3f5; display: block; }
.zontes-geo-model__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zontes-geo-model__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zontes-geo-model__name { font-weight: 700; font-size: 17px; color: #0D0E10; }
.zontes-geo-model__price { font-size: 14px; color: #1E5DBA; font-weight: 600; }
.zontes-geo-model__price small { color:#8a8f99; font-weight:500; text-transform:uppercase; letter-spacing:.5px; font-size:11px; }
.zontes-geo-model__cta { margin-top: auto; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #0D0E10; }

/* --- Servicios --- */
.zontes-geo-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 34px;
}
.zontes-geo-service {
	background: #FFFFFF;
	border: 1px solid #ececf0;
	border-radius: 10px;
	padding: 26px 24px;
}
.zontes-geo-service h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: #0D0E10; }
.zontes-geo-service p { margin: 0; color: #555; font-size: 15px; line-height: 1.6; }
.zontes-geo-service__ico { width: 40px; height: 40px; border-radius: 8px; background: rgba(30,93,186,.1); color:#1E5DBA; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px; font-weight:800; }

/* --- Cómo llegar (mapa + dirección) --- */
.zontes-geo-map {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-top: 34px;
}
.zontes-geo-map__frame { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.zontes-geo-nap { list-style: none; margin: 20px 0 28px; padding: 0; }
.zontes-geo-nap li { padding: 8px 0; border-bottom: 1px solid #e7e8ec; font-size: 16px; color: #333; }
.zontes-geo-nap strong { color: #0D0E10; }

/* --- FAQs --- */
.zontes-geo-faqs { max-width: 860px; margin: 34px auto 0; }
.zontes-geo-faq {
	border: 1px solid #e3e4e8;
	border-radius: 10px;
	margin-bottom: 14px;
	background: #fff;
	overflow: hidden;
}
.zontes-geo-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	font-weight: 600;
	font-size: 17px;
	color: #0D0E10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.zontes-geo-faq summary::-webkit-details-marker { display: none; }
.zontes-geo-faq summary::after { content: "+"; font-size: 24px; color: #1E5DBA; font-weight: 400; line-height: 1; }
.zontes-geo-faq[open] summary::after { content: "\2212"; }
.zontes-geo-faq__a { padding: 0 24px 22px; color: #555; font-size: 16px; line-height: 1.7; }

/* --- Modo noche de las landings GEO ---
 * La plantilla no depende de los widgets de Elementor, así que necesita su
 * propia capa de color cuando <html> recibe .zontes-dark. Se cubren tanto las
 * superficies generales como tarjetas, títulos y textos internos para que no
 * sobrevivan colores oscuros sobre fondos oscuros. */
.zontes-dark .zontes-geo {
	background: #121316;
	color: #E9EBEF;
}
.zontes-dark .zontes-geo-section {
	background: #121316;
}
.zontes-dark .zontes-geo-section--alt {
	background: #181A1F;
}
.zontes-dark .zontes-geo-h2,
.zontes-dark .zontes-geo-service h3,
.zontes-dark .zontes-geo-faq summary,
.zontes-dark .zontes-geo-nap strong {
	color: #F5F6F8;
}
.zontes-dark .zontes-geo-kicker {
	color: #79ACFF;
}
.zontes-dark .zontes-geo-lead,
.zontes-dark .zontes-geo-service p,
.zontes-dark .zontes-geo-faq__a,
.zontes-dark .zontes-geo-nap li {
	color: #C5C9D1;
}

/* Tarjetas de modelos y servicios. */
.zontes-dark .zontes-geo-model,
.zontes-dark .zontes-geo-service {
	background: #202228;
	border-color: rgba(255,255,255,.11);
}
.zontes-dark .zontes-geo-model__img {
	background: #EAECF0;
}
.zontes-dark .zontes-geo-model__name,
.zontes-dark .zontes-geo-model__cta {
	color: #F5F6F8;
}
.zontes-dark .zontes-geo-model__price {
	color: #79ACFF;
}
.zontes-dark .zontes-geo-model__price small {
	color: #B4B9C2;
}
.zontes-dark .zontes-geo-service__ico {
	background: rgba(121,172,255,.14);
	color: #79ACFF;
}

/* Cómo llegar y preguntas frecuentes. */
.zontes-dark .zontes-geo-nap li {
	border-bottom-color: rgba(255,255,255,.12);
}
.zontes-dark .zontes-geo-nap a {
	color: #79ACFF !important;
}
.zontes-dark .zontes-geo-faq {
	background: #202228;
	border-color: rgba(255,255,255,.12);
}
.zontes-dark .zontes-geo-faq summary::after {
	color: #79ACFF;
}
.zontes-dark .zontes-geo-faq[open] {
	border-color: rgba(121,172,255,.4);
}

/* --- CTA final --- */
.zontes-geo-cta {
	background: linear-gradient(135deg, #1E5DBA 0%, #12305f 100%);
	color: #fff;
	text-align: center;
	padding: 72px 24px;
}
.zontes-geo-cta h2 { font-size: clamp(24px,3.4vw,32px); font-weight: 800; margin: 0 0 14px; }
.zontes-geo-cta p { font-size: 17px; color: rgba(255,255,255,.85); margin: 0 auto 28px; max-width: 620px; }
.zontes-geo-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- Responsive --- */
@media (max-width: 1024px) {
	.zontes-geo-carousel__slide { flex-basis: calc((100% - 44px) / 3); }
	.zontes-geo-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.zontes-geo-section { padding: 52px 0; }
	.zontes-geo-hero { padding: 72px 0 60px; }
	.zontes-geo-carousel { padding: 0 42px; }
	.zontes-geo-carousel__track { gap: 14px; }
	.zontes-geo-carousel__slide { flex-basis: 100%; }
	.zontes-geo-carousel__arrow { width: 34px; height: 34px; }
	.zontes-geo-carousel__arrow span { font-size: 29px; }
	.zontes-geo-services { grid-template-columns: 1fr; }
	.zontes-geo-map { grid-template-columns: 1fr; gap: 24px; }
	.zontes-geo-hero__btns .zontes-geo-btn,
	.zontes-geo-cta__btns .zontes-geo-btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Enlaces GEO en el pie (shortcode [bz_pob_footer]) --- */
.zontes-geo-footlinks {
	width: 100%;
	border-top: 1px solid rgba(255,255,255,.12);
	padding: 26px 0 4px;
	margin-top: 8px;
}
.zontes-geo-footlinks__title {
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
	margin-bottom: 14px;
}
.zontes-geo-footlinks__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.zontes-geo-footlinks__item {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	color: rgba(255,255,255,.7);
	text-decoration: none;
	transition: color .2s;
}
.zontes-geo-footlinks__item:hover { color: #FFFFFF; }