/* ==========================================================================
   Bloques compartidos entre portada, servicios, contacto y ficha.
   Se carga siempre, porque estas piezas aparecen en más de una plantilla.
   ========================================================================== */

/* --- Bloque de contenido -------------------------------------------------- */

.auto-bloque {
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.5rem;
}
.auto-bloque h2 { font-size: 1.18rem; margin-bottom: 1.1rem; }

/* --- Mapa ----------------------------------------------------------------- */

.auto-mapa {
	aspect-ratio: 4 / 3;
	border-radius: var(--radio-sm);
	overflow: hidden;
	border: 1px solid var(--borde);
	margin: 0.9rem 0;
}
.auto-mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.25) invert(0.9) hue-rotate(180deg);
}

/* --- Cabecera de sección en fila ------------------------------------------ */

.auto-seccion__titulo--fila {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	text-align: left;
	flex-wrap: wrap;
}
.auto-seccion__titulo--fila h2 { margin-bottom: 0; }

/* --- Tarjetas de servicio ------------------------------------------------- */

.auto-servicios { background: var(--fondo-2); border-block: 1px solid var(--borde-suave); }

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

.auto-servicio {
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 1.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: transform 0.18s ease, border-color 0.18s ease;
}
.auto-servicio:hover { transform: translateY(-4px); border-color: var(--acento); }
.auto-servicio h3 { margin: 0; font-size: 1.2rem; }
.auto-servicio p { margin: 0; font-size: 0.94rem; }

.auto-servicio__icono {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(255, 122, 24, 0.12);
	margin-bottom: 0.4rem;
}
.auto-servicio__icono svg { width: 24px; height: 24px; fill: var(--acento); }

.auto-servicio__mas {
	margin-top: auto;
	padding-top: 0.8rem;
	color: var(--acento);
	font-size: 0.9rem;
	font-weight: 650;
}

/* --- Bloque "por qué" + ventajas ------------------------------------------ */

.auto-porque__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 3rem;
	align-items: start;
}
.auto-porque__grid h2 { margin-bottom: 0.8rem; }
.auto-porque__grid > div > p { margin-bottom: 1.6rem; }

.auto-ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.auto-ventajas li {
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-left: 3px solid var(--acento);
	border-radius: var(--radio-sm);
	padding: 1.1rem 1.3rem;
}
.auto-ventajas h3 { font-size: 1.03rem; margin-bottom: 0.3rem; }
.auto-ventajas h3:only-child { margin-bottom: 0; }
.auto-ventajas p { margin: 0; font-size: 0.92rem; }

/* --- Cierre --------------------------------------------------------------- */

.auto-cierre {
	background: linear-gradient(135deg, rgba(255, 122, 24, 0.14), rgba(255, 122, 24, 0.03)), var(--fondo-2);
	border-top: 1px solid var(--borde-suave);
	padding: clamp(3rem, 6vw, 4.5rem) 0;
	text-align: center;
}
.auto-cierre p { max-width: 54ch; margin-inline: auto; }
.auto-cierre__acciones {
	display: flex;
	gap: 0.8rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1.6rem;
}

/* --- Descripción de texto largo ------------------------------------------- */

.auto-descripcion p { color: var(--texto-2); }
.auto-descripcion p:last-child { margin-bottom: 0; }
.auto-descripcion ul { color: var(--texto-2); padding-left: 1.2rem; }

/* --- Enlace de salto (accesibilidad) -------------------------------------- */

.auto-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--acento);
	color: #14100c;
	padding: 0.7rem 1.2rem;
	border-radius: 0 0 var(--radio-sm) 0;
	z-index: 200;
	font-weight: 650;
}
.auto-saltar:focus { left: 0; }

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

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