/* ==========================================================================
   Portada: hero con buscador, tipos, servicios, ventajas y cierre.
   ========================================================================== */

.auto-hero {
	position: relative;
	padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
	background:
		radial-gradient(900px 420px at 78% -10%, rgba(255, 122, 24, 0.16), transparent 62%),
		radial-gradient(700px 380px at 8% 8%, rgba(80, 130, 255, 0.09), transparent 60%),
		var(--fondo);
	border-bottom: 1px solid var(--borde-suave);
	overflow: hidden;
}

.auto-hero h1 { max-width: 18ch; }

.auto-hero__bajada {
	max-width: 56ch;
	font-size: clamp(1rem, 1.5vw, 1.12rem);
	margin-bottom: 2.2rem;
}

/* --- Buscador ------------------------------------------------------------- */

.auto-buscador {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 0.8rem;
	align-items: end;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.1rem;
	box-shadow: var(--sombra);
	max-width: 880px;
}

.auto-buscador__campo label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texto-3);
	font-weight: 650;
	margin-bottom: 0.35rem;
}

.auto-buscador select {
	width: 100%;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	color: var(--texto);
	border-radius: var(--radio-sm);
	padding: 0.7rem 0.8rem;
	font-family: inherit;
	font-size: 0.95rem;
}
.auto-buscador select:focus { outline: none; border-color: var(--acento); }

.auto-buscador__enviar { height: 46px; }
.auto-buscador__enviar svg { width: 17px; height: 17px; }

/* --- Cifras --------------------------------------------------------------- */

.auto-hero__cifras {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin: 2.2rem 0 0;
	padding: 0;
}
.auto-hero__cifras li { display: flex; flex-direction: column; }
.auto-hero__cifras strong {
	font-family: var(--fuente-cifra);
	font-size: 2.3rem;
	line-height: 1;
	color: var(--acento);
}
.auto-hero__cifras span { font-size: 0.87rem; color: var(--texto-2); margin-top: 0.2rem; }

/* --- Tipos de carrocería -------------------------------------------------- */

.auto-tipos { padding: 2.2rem 0 0; }

.auto-tipos__lista {
	display: flex;
	gap: 0.7rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
}

.auto-tipo {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	font-size: 0.93rem;
	font-weight: 600;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.auto-tipo:hover { border-color: var(--acento); transform: translateY(-2px); }
.auto-tipo__conteo {
	background: var(--superficie-2);
	border-radius: 999px;
	padding: 0.05rem 0.5rem;
	font-size: 0.78rem;
	color: var(--texto-3);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	.auto-buscador { grid-template-columns: 1fr 1fr; }
	.auto-buscador__enviar { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.auto-buscador { grid-template-columns: 1fr; }
	.auto-hero__cifras { gap: 1.6rem; }
	.auto-hero__cifras strong { font-size: 1.9rem; }
}