/* ==========================================================================
   Páginas: servicios, contacto, formularios.
   ========================================================================== */

.auto-pagina { padding-bottom: 4rem; }

.auto-pagina__ancho { width: min(100% - 2.5rem, 940px); }

.auto-pagina__hero {
	padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(760px 380px at 82% -20%, rgba(255, 122, 24, 0.15), transparent 62%),
		var(--fondo);
	border-bottom: 1px solid var(--borde-suave);
	margin-bottom: 1rem;
}

.auto-pagina__bajada {
	max-width: 60ch;
	font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.auto-pagina__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

.auto-pagina__cabecera { padding: 2.5rem 0 1.5rem; }

/* --- Pasos ---------------------------------------------------------------- */

.auto-pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.2rem;
	counter-reset: paso;
}

.auto-pasos li {
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.5rem;
	position: relative;
}

.auto-pasos__numero {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--acento);
	color: #14100c;
	font-family: var(--fuente-cifra);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.9rem;
}

.auto-pasos h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.auto-pasos p { margin: 0; font-size: 0.93rem; }

/* --- Formulario ----------------------------------------------------------- */

.auto-form {
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	margin: 2.5rem 0 0;
	scroll-margin-top: 92px;
}

.auto-form__intro h2 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.auto-form__intro p { margin-bottom: 1.5rem; }

.auto-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 1rem;
}

.auto-form__campo--ancho { grid-column: 1 / -1; }

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

.auto-form input,
.auto-form textarea {
	width: 100%;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: var(--radio-sm);
	color: var(--texto);
	padding: 0.72rem 0.85rem;
	font-family: inherit;
	font-size: 0.95rem;
}
.auto-form input:focus,
.auto-form textarea:focus { outline: none; border-color: var(--acento); }
.auto-form textarea { resize: vertical; }

.auto-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.auto-form__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

.auto-form__legal { font-size: 0.8rem; color: var(--texto-3); margin: 1rem 0 0; }

.auto-aviso--error { border-color: #f87171; background: rgba(248, 113, 113, 0.1); }

/* --- Contacto ------------------------------------------------------------- */

.auto-contacto__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 2rem;
	align-items: start;
}

.auto-contacto__datos { display: flex; flex-direction: column; gap: 1.2rem; }
.auto-contacto__datos .auto-bloque h2 { font-size: 1.1rem; }
.auto-contacto__datos a:hover { color: var(--acento); }

.auto-contacto__grid .auto-form { margin-top: 0; }

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

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