/**
 * Home hero: móvil (max-width: 768px).
 * Header compacto: tablet/móvil con nav colapsada (max-width: 991px).
 */

/* =============================================================================
 * HEADER MÓVIL / TABLET (≤991px) — barra + sticky (navbar-reduce)
 *
 * Editá solo estos valores en #mainNav.navbar-b:
 *   --acr-mnav-pad-y           → padding vertical TOP de la barra (estado inicial / trans)
 *   --acr-mnav-pad-y-sticky    → padding vertical barra sticky al hacer scroll (.navbar-reduce)
 *   --acr-mnav-logo-max        → tamaño máximo del logo (cuadrado contenido; ≤ altura hamburguesa)
 *   --acr-mnav-logo-padding    → padding interno del <img> del logo
 *
 * Altura total aproximada de la barra ≈ max(logo, 36px hamburguesa) + pad-y×2
 *   (hamburguesa 36×36 en hamburger-menu.css; el logo puede ir un poco por encima si lo subís)
 * ============================================================================= */
@media screen and (max-width: 991.98px) {
	#mainNav.navbar-b {
		--acr-mnav-pad-y: 6px;
		--acr-mnav-pad-y-sticky: 4px;
		--acr-mnav-logo-max: 52px;
		--acr-mnav-logo-padding: 1px;

		height: auto !important;
		min-height: 0 !important;
		padding-top: var(--acr-mnav-pad-y) !important;
		padding-bottom: var(--acr-mnav-pad-y) !important;
		align-items: center;
	}

	#mainNav.navbar-b.navbar-reduce {
		padding-top: var(--acr-mnav-pad-y-sticky) !important;
		padding-bottom: var(--acr-mnav-pad-y-sticky) !important;
	}

	#mainNav .container {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	#mainNav .navbar-brand {
		position: relative;
		display: inline-flex;
		align-items: center;
		margin: 0;
		padding-left: 4px;
		padding-right: 0;
		height: auto;
		max-width: none;
		overflow: visible;
		flex-shrink: 0;
	}

	#mainNav .navbar-brand::before,
	#mainNav .navbar-brand::after {
		display: none !important;
		content: none !important;
		border: none !important;
		width: 0 !important;
		height: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	#mainNav .navbar-brand img {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: auto !important;
		max-width: var(--acr-mnav-logo-max) !important;
		max-height: var(--acr-mnav-logo-max) !important;
		height: auto !important;
		padding: var(--acr-mnav-logo-padding) !important;
		margin: 0;
		z-index: 10000;
		border-radius: 50%;
		object-fit: contain;
	}

	/* Alineación con flex: sin top fijo (evita huecos del layout 88px + top:28px) */
	#mainNav .navbar-toggler {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		margin: 0;
		flex-shrink: 0;
		z-index: 10001;
	}
}

@media screen and (max-width: 768px) {
	/* ---- Variables hero (móvil): flechas + bloque de texto del slider ---- */
	.home-hero-header {
		/* Flechas (no tocar si solo ajustás copy) */
		--hero-swiper-nav-top-pct: 60%;
		--hero-swiper-nav-translate-y: -50%;

		/*
		 * Copy del slider: .swiper-slide-caption (título h1 + .autoclub-hero-subtitle)
		 * --hero-caption-block-nudge-y: negativo = sube el bloque (.container con translateY)
		 * NO mueve botones/dots (siguen en .hero-buttons-container fuera del caption).
		 */
		--hero-caption-pad-top: 0.25rem;
		--hero-caption-pad-bottom: 3.85rem;
		--hero-caption-block-nudge-y: 0.35rem;
		--hero-caption-title-sub-gap: 1.1rem;
		--hero-caption-subtitle-margin-top: 0.85rem;
		--hero-caption-subtitle-margin-bottom: 1.05rem;
	}

	/* ---- Home hero: altura, fondo, copy, paginación ---- */
	.home-hero-header .swiper-container.swiper-slider,
	.home-hero-header .swiper-wrapper {
		min-height: 75vh;
	}

	/*
	 * Fondo: cover (hero a pantalla, sin bandas). Encuadre fino: posición Y
	 * ligeramente arriba del centro para mostrar un poco más de coche sin achicar la escala.
	 */
	.home-hero-header .swiper-slide {
		min-height: 78vh !important;
		height: auto;
		background-size: cover !important;
		background-position: center 46% !important;
	}

	/* Solo el caption del slide (no otras .section-lg fuera del slider) */
	.home-hero-header .swiper-slide-caption.section-lg {
		padding-top: var(--hero-caption-pad-top) !important;
		/* Menos espacio vertical en viewports bajos (landscape / emulador) */
		padding-bottom: clamp(2.1rem, 10vh, var(--hero-caption-pad-bottom)) !important;
		padding-bottom: clamp(2.1rem, 10svh, var(--hero-caption-pad-bottom)) !important;
	}

	.home-hero-header .swiper-slide-caption .container {
		padding-left: clamp(10px, 3.6vw, 18px);
		padding-right: clamp(10px, 3.6vw, 18px);
		transform: translateY(var(--hero-caption-block-nudge-y));
	}

	.home-hero-header .swiper-slide-caption h1 {
		/* Fluido entre SE/iPhone 5 angosto y phablets; evita saltos bruscos al cambiar emulador */
		font-size: clamp(1.42rem, 4.1vw + 0.82rem, 2.65rem);
		line-height: 1.1;
		font-weight: 700;
		letter-spacing: -0.02em;
		margin-bottom: var(--hero-caption-title-sub-gap);
		min-height: 3.4em;
		overflow-wrap: break-word;
	}

	/* Subtítulo corto (copy comercial ES) */
	.home-hero-header .swiper-slide-caption p.autoclub-hero-subtitle {
		display: block !important;
		font-size: clamp(0.8rem, 2.35vw + 0.58rem, 1.06rem) !important;
		line-height: 1.55;
		font-weight: 400;
		margin-top: var(--hero-caption-subtitle-margin-top);
		margin-bottom: var(--hero-caption-subtitle-margin-bottom);
		min-height: 3.1em;
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: min(22.5rem, calc(100vw - clamp(1.25rem, 6vw, 2rem)));
		margin-left: auto;
		margin-right: auto;
		opacity: 0.97;
		overflow-wrap: break-word;
	}

	/*
	 * Flechas: en el estilo base las nav están display:none hasta md.
	 * En móvil deben verse: flex, tamaño reducido, dentro del viewport.
	 */
	.home-hero-header .swiper-button-prev,
	.home-hero-header .swiper-button-next {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 40px !important;
		min-width: 40px;
		min-height: 40px;
		top: var(--hero-swiper-nav-top-pct) !important;
		margin-top: 0 !important;
		transform: translateY(var(--hero-swiper-nav-translate-y)) !important;
		z-index: 30 !important;
		opacity: 1;
		visibility: visible;
	}

	.home-hero-header .swiper-button-prev {
		left: 6px !important;
		right: auto !important;
	}

	.home-hero-header .swiper-button-next {
		right: 6px !important;
		left: auto !important;
	}

	.home-hero-header .swiper-button-prev::before,
	.home-hero-header .swiper-button-next::before {
		font-size: 17px !important;
		line-height: 1 !important;
	}

	.home-hero-header .swiper-button-prev,
	.home-hero-header .swiper-button-next {
		opacity: 0.72 !important;
	}

	.home-hero-header .swiper-container.swiper-slider {
		overflow: hidden;
	}

	/* Paginación nativa oculta (hero-manual-mobile.css + autoclub-hero.css) */
	.home-hero-header .swiper-pagination {
		display: none !important;
	}
}

/* Viewports bajos (landscape, emulador): menos aire vertical entre copy y CTAs */
@media screen and (max-width: 768px) and (max-height: 520px) {
	.home-hero-header {
		--hero-swiper-nav-top-pct: 58%;
		--hero-caption-title-sub-gap: 0.65rem;
		--hero-caption-subtitle-margin-top: 0.6rem;
		--hero-caption-subtitle-margin-bottom: 0.85rem;
	}

	.home-hero-header .swiper-slide-caption.section-lg {
		padding-bottom: clamp(1.65rem, 8vh, 2.5rem) !important;
	}

	.home-hero-header .swiper-slide-caption h1 {
		font-size: clamp(1.28rem, 3.6vw + 0.72rem, 2rem);
		min-height: 3em;
	}

	.home-hero-header .swiper-slide-caption p.autoclub-hero-subtitle {
		min-height: 2.8em;
	}
}

/*
 * Palabra clave en rojo (identidad Auto Club): variables en hero-manual-mobile.css (:root --acr-hero-btn-red-*).
 * Color principal del acento = --acr-hero-btn-red-intense (#c41f2b) + leve glow con --acr-hero-btn-red-hot.
 */
.home-hero-header .swiper-slide-caption h1 .hero-title-accent {
	color: var(--acr-hero-btn-red-intense, #c41f2b);
	font-weight: 800;
	text-shadow:
		0 0 22px rgba(255, 92, 106, 0.28),
		0 0 10px rgba(196, 31, 43, 0.35),
		0 1px 2px rgba(0, 0, 0, 0.5);
}