/*
 * Portada.
 *
 * Solo lo que aparece en la home. Las tarjetas, botones y distintivos que
 * también usan la tienda o el catálogo de autos viven en components.css.
 */

/* ══ Portada / hero ═══════════════════════════════════════════════════ */

.re-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(86vh, 760px);
	overflow: hidden;
}

.re-hero__fondo {
	position: absolute;
	inset: -5%;
	will-change: transform;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.re-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.re-hero__img.is-activa {
	opacity: 1;
}

/*
 * Dos degradados superpuestos: uno vertical que asienta el pie y otro
 * horizontal que despeja la columna del texto. Con uno solo, o el titular
 * queda ilegible o la foto se apaga entera.
 */
.re-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(11, 11, 12, 0.72) 0%,
			rgba(11, 11, 12, 0.46) 38%,
			rgba(11, 11, 12, 0.93) 100%
		),
		linear-gradient(
			90deg,
			rgba(11, 11, 12, 0.9) 0%,
			rgba(11, 11, 12, 0.45) 58%,
			rgba(11, 11, 12, 0.15) 100%
		);
}

.re-hero__cuerpo {
	position: relative;
	width: 100%;
	padding-block: clamp(90px, 12vw, 150px) clamp(64px, 7vw, 96px);
}

.re-hero__texto {
	max-width: 640px;
}

.re-hero__titulo {
	font-size: clamp(42px, 6vw, 88px);
	line-height: 0.94;
	letter-spacing: -0.019em;
	margin-bottom: 32px;
	max-width: 600px;
	text-wrap: balance;
}

.re-hero__bajada {
	font-size: 18.5px;
	line-height: 1.7;
	color: var(--re-claro-80);
	margin-bottom: 44px;
	max-width: 490px;
	text-wrap: pretty;
}

.re-hero__acciones {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.re-hero .re-boton {
	padding: 20px 34px;
	font-size: 14px;
}

.re-hero__puntos {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 52px;
}

.re-hero__punto {
	width: 14px;
	height: 4px;
	background: rgba(255, 255, 255, 0.32);
	transition: width var(--re-transicion), background var(--re-transicion);
}

.re-hero__punto.is-activo {
	width: 38px;
	background: var(--re-rojo);
}

/*
 * Líneas del titular partidas por SplitText (intro.js). La máscara la crea el
 * propio plugin; aquí solo se evita que el recorte se coma los descendentes.
 */
.re-hero__titulo .re-hero__linea {
	padding-bottom: 0.06em;
	margin-bottom: -0.06em;
}

/*
 * Indicador de scroll: una línea con un punto que la recorre en bucle
 * (intro.js). Decorativo y solo en pantallas donde sobra sitio.
 */
.re-hero__scroll {
	position: absolute;
	right: var(--re-medianil);
	bottom: clamp(32px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	pointer-events: none;
}

.re-hero__scroll-texto {
	font-family: var(--re-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--re-claro-45);
	writing-mode: vertical-rl;
}

.re-hero__scroll-linea {
	position: relative;
	width: 1px;
	height: 56px;
	background: var(--re-linea-oscura-fuerte);
	overflow: hidden;
}

.re-hero__scroll-punto {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 14px;
	background: var(--re-rojo);
	opacity: 0;
}

@media (max-width: 900px) {
	.re-hero__scroll {
		display: none;
	}
}

/* ══ Cifras ═══════════════════════════════════════════════════════════ */

.re-cifras {
	border-top: 1px solid var(--re-linea-oscura);
}

/*
 * El filete que separa dos cifras es el `border-right` de la anterior, así que
 * el aire a su izquierda lo tiene que poner la celda siguiente: sin
 * `padding-left` el número sale pegado a la línea.
 *
 * Ese mismo padding desalinearía la primera cifra de cada fila, que no tiene
 * filete que esquivar y debe arrancar en el medianil como los titulares del
 * resto de la página. Se compensa restándoselo al medianil del contenedor, en
 * vez de con un `:first-child`: así vale también para la primera de la segunda
 * fila cuando la retícula se parte (pasa entre 641 y ~814 px, donde caben tres
 * columnas y la cuarta cifra baja).
 */
.re-cifras__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	padding-left: calc(var(--re-medianil) - clamp(20px, 2.4vw, 36px));
	list-style: none;
}

.re-cifras__celda {
	padding: clamp(38px, 4vw, 56px) clamp(20px, 2.4vw, 36px);
	border-right: 1px solid var(--re-linea-oscura);
}

.re-cifras__celda:last-child {
	border-right: 0;
}

.re-cifras__numero {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: 36px;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--re-claro-100);
	margin: 0;
	/* Cifras de ancho fijo: durante el conteo el número no baila. */
	font-variant-numeric: tabular-nums;
}

.re-cifras__texto {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--re-claro-35);
	margin: 14px 0 0;
	max-width: 210px;
}

@media (max-width: 640px) {
	/* Apiladas no hay filetes verticales: el medianil vuelve al contenedor. */
	.re-cifras__grid {
		padding-left: var(--re-medianil);
	}

	.re-cifras__celda {
		border-right: 0;
		border-bottom: 1px solid var(--re-linea-oscura);
		padding-inline: 0;
	}
}

/* ══ Marcas de auto ═══════════════════════════════════════════════════ */

.re-marcas__titulo {
	font-size: clamp(28px, 3.1vw, 42px);
	line-height: 1.06;
	max-width: 15ch;
	text-wrap: balance;
}

.re-marcas__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--re-linea-clara);
	border-left: 1px solid var(--re-linea-clara);
	list-style: none;
}

.re-marcas__celda {
	display: grid;
	place-items: center;
	padding: 22px 16px;
	min-height: 104px;
	border-right: 1px solid var(--re-linea-clara);
	border-bottom: 1px solid var(--re-linea-clara);
}

.re-marcas__celda img {
	width: 100%;
	max-width: 66px;
	object-fit: contain;
	opacity: 0.72;
}

.re-marcas__celda--destacada {
	grid-column: span 2;
	grid-row: span 2;
	position: relative;
	background: #fafafa;
	padding: clamp(24px, 3vw, 44px);
	min-height: 210px;
}

.re-marcas__celda--destacada img {
	max-width: 168px;
	opacity: 1;
}

.re-marcas__sello {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--re-rojo);
	color: #fff;
	font-family: var(--re-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 8px 12px;
}

@media (max-width: 640px) {
	.re-marcas__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.re-marcas__celda--destacada {
		grid-row: span 1;
		min-height: 150px;
	}
}

/* ══ Servicios ════════════════════════════════════════════════════════ */

.re-servicios__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(296px, 100%), 1fr));
	gap: clamp(18px, 2.2vw, 30px);
	list-style: none;
}

.re-servicio {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--re-blanco);
	color: var(--re-oscuro-100);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.re-servicio:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
	color: var(--re-oscuro-100);
}

.re-servicio__art {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--re-placeholder);
	overflow: hidden;
}

.re-servicio__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.re-servicio__num {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--re-rojo);
	color: #fff;
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	padding: 9px 13px;
}

.re-servicio__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 13px;
	flex: 1;
	padding: 30px 30px 32px;
}

.re-servicio__titulo {
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.re-servicio__texto {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--re-oscuro-60);
	flex: 1;
}

/*
 * Dos componentes, no uno con variante de color: el servicio que lleva a los
 * planes de mantenimiento es la acción principal de la sección y se pinta como
 * botón sólido; los que llevan a WhatsApp, como enlace de texto.
 */
.re-servicio__cta {
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--re-rojo);
	margin-top: 6px;
}

.re-servicio__cta--boton {
	align-self: flex-start;
	margin-top: 10px;
	padding: 13px 20px;
	background: var(--re-tinta);
	color: var(--re-blanco);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	transition: background var(--re-transicion);
}

/*
 * El hover cuelga de la tarjeta, no del botón: la tarjeta entera es el enlace,
 * así que el puntero nunca está "sobre el botón" en el sentido que le daría un
 * `:hover` propio. Sin esto el botón se queda quieto mientras la tarjeta se
 * levanta, y se lee como decoración.
 */
.re-servicio:hover .re-servicio__cta--boton {
	background: var(--re-rojo);
}

/*
 * En teléfono los servicios van en 2×2, no apilados. Seis tarjetas de ancho
 * completo obligan a seis pantallazos para ver qué hace el taller; en dos
 * columnas se abarcan de un vistazo.
 *
 * Todo lo de dentro estaba dimensionado para una tarjeta de 296 px y aquí son
 * unos 169, así que hay que bajar padding y tipografía o el texto se ahoga.
 */
/*
 * Las dos columnas empiezan antes que la compactación tipográfica. Entre 641 y
 * 700 px el `auto-fill` volvía a una sola columna —dos pistas de 296 más el
 * hueco piden 610 y ahí solo hay 601 útiles— y quedaba una tarjeta gigantesca
 * justo por encima del corte de móvil. A esos anchos la tarjeta mide ya unos
 * 294 px, o sea su tamaño de diseño, así que el texto se queda como está.
 */
@media (max-width: 700px) {
	.re-servicios__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.re-servicio__cuerpo {
		padding: 14px 14px 16px;
		gap: 9px;
	}

	.re-servicio__num {
		font-size: 9.5px;
		padding: 6px 9px;
	}

	.re-servicio__titulo {
		font-size: 15px;
		line-height: 1.15;
	}

	.re-servicio__texto {
		font-size: 12.5px;
		line-height: 1.55;
	}

	.re-servicio__cta {
		font-size: 11px;
		letter-spacing: 0.05em;
	}

	/*
	 * El botón a todo el ancho de la tarjeta y centrado: «Ver planes por
	 * kilometraje ↓» no entra en una línea de 141 px, y es preferible que
	 * envuelva dentro de su caja a que se salga de ella.
	 */
	.re-servicio__cta--boton {
		align-self: stretch;
		text-align: center;
		padding: 10px 8px;
		font-size: 10px;
		letter-spacing: 0.04em;
	}
}

/* Cinta de insumos */

.re-insumos {
	border-top: 1px solid var(--re-linea-clara);
	padding: 36px 0 46px;
}

.re-insumos__titulo {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--re-oscuro-40);
	text-align: center;
	margin-bottom: 28px;
}

.re-servicios .re-marquee img {
	filter: grayscale(1);
	opacity: 0.62;
}

/* ══ Cómo trabajamos ══════════════════════════════════════════════════ */

.re-metodo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
	min-height: 640px;
}

.re-metodo__art {
	position: relative;
	background: var(--re-superficie);
	min-height: 440px;
	overflow: hidden;
}

.re-metodo__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.re-metodo__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11, 11, 12, 0.3), rgba(11, 11, 12, 0.72));
}

.re-metodo__cuerpo {
	display: flex;
	align-items: center;
	padding: clamp(72px, 9vw, 130px) var(--re-medianil) clamp(72px, 9vw, 130px)
		clamp(24px, 6vw, 96px);
}

.re-metodo__texto {
	max-width: 600px;
}

.re-metodo__titulo {
	font-size: clamp(33px, 4.2vw, 58px);
	line-height: 1.04;
	margin-bottom: 34px;
	max-width: 14ch;
	text-wrap: balance;
}

@media (max-width: 900px) {
	.re-metodo__cuerpo {
		padding-inline: var(--re-medianil);
	}
}

/* ══ Mantenimiento ════════════════════════════════════════════════════ */

.re-plan__riel {
	margin-bottom: 58px;
	padding-inline: clamp(34px, 5vw, 72px);
	touch-action: none;
	user-select: none;
}

.re-plan__pista {
	position: relative;
	height: 80px;
	cursor: pointer;
}

.re-plan__linea,
.re-plan__avance {
	position: absolute;
	top: 12px;
	left: 0;
	height: 4px;
	border-radius: 99px;
}

.re-plan__linea {
	right: 0;
	background: var(--re-linea-clara);
}

.re-plan__avance {
	width: 0;
	background: var(--re-rojo);
	transition: width var(--re-transicion);
}

.re-plan__mango {
	position: absolute;
	top: 1px;
	left: 0;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border-radius: 99px;
	background: #fff;
	border: 3px solid var(--re-rojo);
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
	pointer-events: none;
	transition: left var(--re-transicion);
}

.re-plan__parada {
	position: absolute;
	top: 0;
	left: var(--re-pos, 0%);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-top: 6px;
	width: max-content;
}

.re-plan__punto {
	width: 14px;
	height: 14px;
	border-radius: 99px;
	background: #fff;
	border: 2px solid rgba(0, 0, 0, 0.2);
	transition: background var(--re-transicion), border-color var(--re-transicion);
}

.re-plan__parada.is-hecha .re-plan__punto {
	background: var(--re-rojo);
	border-color: var(--re-rojo);
}

.re-plan__etiqueta {
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--re-oscuro-30);
	transition: color var(--re-transicion), font-size var(--re-transicion);
	white-space: nowrap;
}

.re-plan__parada.is-activa .re-plan__etiqueta {
	font-size: 19px;
	color: var(--re-oscuro-100);
}

.re-plan__pista-ayuda {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--re-oscuro-40);
	text-align: center;
	margin: 6px 0 0;
}

/*
 * Sin JavaScript ni el riel ni el desplegable pueden cambiar de panel, así que se
 * esconden los dos y se muestran todos los planes uno debajo de otro. Es la misma
 * información, en una disposición que no depende de nada.
 */
html:not(.js) .re-plan__riel,
html:not(.js) .re-plan__selector {
	display: none;
}

/* ── Desplegable de kilometraje (solo teléfono) ──────────────────────── */

/*
 * El riel funciona con un puntero, pero en un teléfono se queda sin sitio para
 * las etiquetas y acaba siendo cinco puntos mudos. Por debajo de 780 px se
 * cambia por un `<select>` nativo: abre el selector del sistema, se entiende sin
 * explicación y los kilometrajes se leen todos.
 */
.re-plan__selector {
	display: none;
	margin-bottom: 24px;
}

.re-plan__selector-label {
	display: block;
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--re-oscuro-40);
	margin-bottom: 10px;
}

.re-plan__selector-caja {
	position: relative;
}

/*
 * El caret es un `::after` del contenedor y no una imagen de fondo: evita meter
 * un SVG incrustado en la hoja por una flecha.
 */
.re-plan__selector-caja::after {
	content: "▾";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--re-rojo);
	font-size: 14px;
	pointer-events: none;
}

.re-plan__selector select {
	appearance: none;
	width: 100%;
	padding: 15px 40px 15px 16px;
	background: var(--re-blanco);
	border: 1px solid var(--re-linea-clara-fuerte);
	border-radius: 0;
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 17px;
	color: var(--re-oscuro-100);
	cursor: pointer;
}

.re-plan__selector select:focus-visible {
	outline: 2px solid var(--re-rojo);
	outline-offset: 2px;
}

.re-plan__panel {
	background: var(--re-blanco);
	display: grid;
	grid-template-columns: minmax(260px, 350px) 1fr;
}

html.js .re-plan__panel {
	display: none;
}

html.js .re-plan__panel.is-activo {
	display: grid;
}

html:not(.js) .re-plan__panel + .re-plan__panel {
	margin-top: 28px;
}

.re-plan__resumen {
	padding: clamp(32px, 3.4vw, 46px);
	border-right: 1px solid var(--re-linea-clara);
}

.re-plan__detalle {
	padding: clamp(32px, 3.4vw, 46px);
}

.re-plan__servicio {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--re-oscuro-40);
	margin-bottom: 14px;
}

.re-plan__km {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: clamp(40px, 4.2vw, 56px);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--re-rojo);
	margin: 0;
}

.re-plan__desc {
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--re-oscuro-60);
	margin: 24px 0 32px;
}

.re-plan__datos {
	display: flex;
	gap: 36px;
	border-top: 1px solid var(--re-linea-clara);
	padding-top: 24px;
	margin-bottom: 34px;
}

.re-plan__dato {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.re-plan__dato-label {
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--re-oscuro-40);
	margin: 8px 0 0;
}

.re-plan__cta {
	background: var(--re-tinta);
	color: #fff;
}

.re-plan__cta:hover {
	background: var(--re-rojo);
	color: #fff;
}

.re-plan__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 0 clamp(26px, 4vw, 56px);
	align-content: start;
	list-style: none;
}

.re-plan__items li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--re-oscuro-80);
}

.re-plan__items li::before {
	content: "✓";
	color: var(--re-rojo);
	font-size: 13px;
	line-height: 1.6;
}

@media (max-width: 780px) {
	.re-plan__panel {
		grid-template-columns: 1fr;
	}

	.re-plan__resumen {
		border-right: 0;
		border-bottom: 1px solid var(--re-linea-clara);
	}

	/*
	 * El riel entero deja paso al desplegable. Aquí no cabían las etiquetas de
	 * las paradas —se pisaban entre sí, y la de la última sobresalía por la
	 * derecha hasta desbordar la página—, y sin ellas quedaban cinco puntos que
	 * no decían nada.
	 *
	 * De paso desaparece un estorbo: `.re-plan__riel` lleva `touch-action: none`
	 * para poder arrastrar, y eso bloqueaba el desplazamiento vertical de la
	 * página al pasar el dedo por esa franja.
	 */
	.re-plan__riel {
		display: none;
	}

	html.js .re-plan__selector {
		display: block;
	}
}

/* ══ Autos en la portada ══════════════════════════════════════════════ */

/*
 * La portada enseña cuatro autos, así que aquí se fija cuántas columnas hay en
 * vez de dejarlo al `auto-fill` de `.re-grid-autos`.
 *
 * El motivo es que con cuatro tarjetas el reparto automático deja huérfanos: a
 * 1440 px el contenedor da 1.184 útiles y cuatro pistas de 270 con sus huecos
 * piden 1.188, así que por cuatro píxeles el cuarto auto caía solo a una segunda
 * fila; y entre 1024 y 1180 salían tres arriba y uno abajo. Con cuatro o dos
 * columnas la retícula siempre queda completa.
 */
@media (min-width: 1180px) {
	.re-autos-home .re-grid-autos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Desde 641 y no desde 620: por debajo de 640 la tarjeta de auto pasa a ser
 * horizontal (ver components.css) y va siempre a una columna. Si este bloque
 * empezara antes, entre 620 y 640 habría dos columnas de tarjeta horizontal.
 */
@media (min-width: 641px) and (max-width: 1179px) {
	.re-autos-home .re-grid-autos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ══ Encabezados con enlace lateral ═══════════════════════════════════ */

.re-encabezado--con-enlace {
	align-items: end;
}

.re-encabezado__acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.re-encabezado__doble {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

/* ══ Reseñas ══════════════════════════════════════════════════════════ */

.re-resenas {
	overflow: hidden;
	padding-top: var(--re-seccion);
}

.re-resenas__cabecera {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 60px;
	margin-bottom: 76px;
	flex-wrap: wrap;
}

.re-resenas__resumen {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 44px);
	flex-wrap: wrap;
}

.re-resenas__nota {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
}

.re-resenas__conteo {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--re-claro-25);
	margin: 8px 0 0;
}

.re-resenas__flechas {
	display: flex;
	gap: 10px;
}

.re-resenas__flecha {
	width: 52px;
	height: 52px;
	border: 1px solid var(--re-linea-oscura-fuerte);
	color: var(--re-claro-100);
	font-size: 17px;
	transition: background var(--re-transicion);
}

.re-resenas__flecha:hover {
	background: rgba(255, 255, 255, 0.08);
}

.re-resenas__flecha[disabled] {
	opacity: 0.35;
	cursor: default;
}

.re-resenas__carril {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 0 var(--re-medianil) 40px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.re-resenas__carril::-webkit-scrollbar {
	height: 5px;
}

.re-resenas__carril::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 99px;
}

/*
 * La tarjeta en sí vive en components.css: la reutiliza la sección de reseñas de
 * las fichas, que va sobre banda clara. Aquí solo queda lo que la convierte en
 * ítem del carril.
 */
.re-resenas__carril .re-resena {
	flex: none;
	width: clamp(300px, 86vw, 452px);
	scroll-snap-align: start;
}

.re-resenas__pie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px 32px;
	flex-wrap: wrap;
	padding-block: 16px var(--re-seccion);
}

/*
 * La atribución a Google que piden sus condiciones. En la voz de las etiquetas
 * del tema —mono, versalitas, tenue— y no con el logotipo multicolor del plugin,
 * que sobre la banda oscura parecía un anuncio.
 */
.re-resenas__fuente {
	margin: 0;
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--re-ink-tenue);
}

.re-resenas__fuente a {
	color: inherit;
	text-underline-offset: 3px;
}

.re-resenas__fuente a:hover {
	color: var(--re-ink);
}

/*
 * Estrellas de la nota media, rellenas en proporción: un 4,6 no son cinco
 * estrellas llenas. El relleno es un degradado recortado al texto; --nota lo
 * pone la plantilla con la nota que devuelve Google.
 */
.re-estrellas--nota span[aria-hidden] {
	/*
	 * Dos capas recortadas al texto: arriba un brillo que cruza cada 6 s (el
	 * loop), debajo el relleno proporcional a la nota. El brillo vive fuera del
	 * texto casi todo el ciclo, así que la mayor parte del tiempo no se ve.
	 */
	background:
		linear-gradient(
			110deg,
			transparent 40%,
			rgba(255, 255, 255, 0.75) 50%,
			transparent 60%
		) no-repeat,
		linear-gradient(
			90deg,
			var(--re-rojo) calc(var(--nota, 5) / 5 * 100%),
			var(--re-linea-oscura-fuerte) 0
		);
	background-size: 250% 100%, 100% 100%;
	background-position: 150% 0, 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: re-brillo 6s ease-in-out 2s infinite;
}

@keyframes re-brillo {
	0% {
		background-position: 150% 0, 0 0;
	}

	25%,
	100% {
		background-position: -50% 0, 0 0;
	}
}

/*
 * En teléfono esta sección pesaba el doble que sus vecinas: 1.215 px frente a los
 * ~1.000 de tienda o autos. No era el titular —ese es el mismo de todas las
 * secciones y bajarlo solo aquí rompería la escala— sino todo lo demás: un «5.0»
 * a 64 px, flechas de 52, 76 px de hueco bajo la cabecera y una tarjeta de 541 px
 * con 44 de padding. Aquí se recorta ese exceso, no la información.
 */
@media (max-width: 640px) {
	.re-resenas {
		padding-top: 56px;
	}

	.re-resenas__cabecera {
		gap: 24px;
		margin-bottom: 28px;
	}

	.re-resenas__resumen {
		gap: 16px;
	}

	.re-resenas__nota {
		font-size: 40px;
	}

	.re-resenas__flecha {
		width: 42px;
		height: 42px;
		font-size: 15px;
	}

	.re-resenas__carril {
		gap: 14px;
		padding-bottom: 24px;
	}

	/*
	 * 80 vw a propósito: deja asomar el borde de la siguiente tarjeta, que es la
	 * única señal de que el carril se desplaza. Con los 86 vw de antes y 32 px de
	 * hueco, la siguiente quedaba fuera de cuadro y el carril parecía estático.
	 */
	.re-resena {
		width: min(80vw, 320px);
		padding: 22px 22px 20px;
		gap: 16px;
	}

	.re-resena__texto {
		font-size: 15.5px;
		line-height: 1.6;
	}

	.re-resena__autor {
		gap: 12px;
		padding-top: 16px;
	}

	.re-resena__avatar {
		width: 36px;
		height: 36px;
	}

	.re-resenas__pie {
		padding-block: 8px 56px;
	}
}

/* ══ Ubicación ════════════════════════════════════════════════════════ */

/*
 * El apilado va al revés de lo que parece: el mapa es la capa de fondo y el
 * panel de texto es quien está en el flujo y define el alto.
 *
 * La alternativa —mapa de 620 px fijos y texto encima en absolute centrado— es
 * lo que hacía el prototipo, y tiene un fallo: el único aire alrededor del texto
 * es el que sobra del centrado. En cuanto el contenido crece (una dirección que
 * hace dos líneas, un horario más largo) ese aire se come solo y el botón acaba
 * pegado al borde de la banda. Con el panel en el flujo, el hueco está declarado
 * y la sección crece si hace falta en vez de desbordarse.
 */
.re-ubicacion {
	position: relative;
	overflow: hidden;
}

.re-ubicacion__mapa {
	position: absolute;
	inset: 0;
}

.re-ubicacion__mapa iframe {
	border: 0;
	width: 100%;
	height: 100%;
	display: block;
	filter: grayscale(0.4) contrast(1.04);
}

.re-ubicacion__velo {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(620px, 78%);
	background: linear-gradient(to right, rgba(11, 11, 12, 0.97) 60%, rgba(11, 11, 12, 0));
	pointer-events: none;
}

.re-ubicacion__panel {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	padding-block: clamp(64px, 8vw, 110px);
	/*
	 * El panel cubre toda la banda para poder centrar el texto, pero el mapa
	 * tiene que seguir siendo arrastrable donde no hay texto: los clics se
	 * desactivan aquí y se reactivan en el bloque de contenido.
	 */
	pointer-events: none;
}

.re-ubicacion__panel > .re-contenedor {
	width: 100%;
}

.re-ubicacion__texto {
	max-width: 430px;
	pointer-events: auto;
}

/*
 * Un punto por debajo de la escala global de titulares: el bloque está limitado
 * a 430 px para caber en la zona oscurecida del mapa, y a 62 px el titular se
 * parte en tres líneas y estira la banda de más.
 */
.re-ubicacion h2 {
	font-size: clamp(36px, 4vw, 54px);
	line-height: 1.02;
}

.re-ubicacion__datos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 34px 0 44px;
}

.re-ubicacion__datos dt {
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--re-claro-25);
	margin-bottom: 9px;
}

.re-ubicacion__datos dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--re-claro-90);
}

.re-ubicacion__acciones .re-boton {
	padding: 20px 34px;
	font-size: 14px;
}

@media (max-width: 780px) {
	/*
	 * En móvil el texto sobre el mapa deja de funcionar: el degradado no cubre
	 * y el mapa queda inutilizable. Se apilan, con el mapa arriba.
	 */
	.re-ubicacion__mapa {
		position: relative;
		height: 320px;
	}

	.re-ubicacion__velo {
		display: none;
	}

	.re-ubicacion__panel {
		min-height: 0;
		pointer-events: auto;
		padding-block: 48px 64px;
	}
}

/* ══ Nosotros ═════════════════════════════════════════════════════════ */

.re-nosotros__intro {
	padding-block: clamp(56px, 6.5vw, 96px) clamp(40px, 4.6vw, 64px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(32px, 4.5vw, 72px);
	align-items: center;
}

.re-nosotros__isologo {
	display: flex;
	justify-content: center;
}

.re-nosotros__isologo img {
	width: 100%;
	max-width: 290px;
	height: auto;
}

.re-nosotros__titulo {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.02;
	margin-bottom: 22px;
}

.re-nosotros__texto p {
	font-size: 16px;
	line-height: 1.78;
	color: var(--re-oscuro-60);
	max-width: 540px;
	text-wrap: pretty;
}

.re-nosotros__acciones {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 30px 0 0;
}

.re-nosotros__cierre {
	padding-bottom: clamp(56px, 6.5vw, 96px);
}

.re-nosotros__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
	gap: clamp(14px, 1.6vw, 20px);
	padding-top: clamp(26px, 2.8vw, 36px);
	border-top: 1px solid rgba(0, 0, 0, 0.13);
	list-style: none;
}

.re-nosotros__tarjeta {
	background: var(--re-banda);
	padding: clamp(20px, 2vw, 26px);
}

.re-nosotros__filete {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--re-rojo);
	margin-bottom: 14px;
}

.re-nosotros__tarjeta h3 {
	font-size: 17px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin-bottom: 10px;
}

.re-nosotros__tarjeta p {
	font-size: 14px;
	line-height: 1.68;
	color: var(--re-oscuro-60);
	margin: 0;
	text-wrap: pretty;
}

/*
 * En teléfono el isologo se ponía a 290 px de ancho y unos 370 de alto —casi los
 * 350 disponibles— y empujaba todo el texto por debajo del pliegue. Aquí comparte
 * fila con el antetítulo y el titular, y solo el cuerpo y los botones pasan a
 * ancho completo.
 *
 * El truco es el `display: contents` del envoltorio: sus hijos se convierten en
 * celdas de esta misma retícula, así que se pueden colocar uno a uno sin tocar el
 * marcado. Las filas van explícitas para que la composición aguante si el
 * antetítulo está vacío —es un campo de ajustes—: esa fila colapsa y ya está.
 */
@media (max-width: 640px) {
	.re-nosotros__intro {
		grid-template-columns: 34% 1fr;
		gap: 14px 18px;
		align-items: center;
	}

	.re-nosotros__col {
		display: contents;
	}

	.re-nosotros__isologo {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	/*
	 * Se limita el ancho, no el alto. Con `max-height` y `width: auto` la caja
	 * mide 0×0 hasta que la imagen se descarga, y como es `loading="lazy"` el
	 * navegador no la descarga precisamente porque su caja mide 0: se quedaba sin
	 * cargar nunca. Con un tope de ancho, los atributos `width`/`height` del
	 * `<img>` reservan el sitio desde el primer pintado.
	 */
	.re-nosotros__isologo img {
		max-width: 110px;
	}

	.re-nosotros__intro .re-antetitulo {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		margin-bottom: 0;
	}

	.re-nosotros__titulo {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		/* A 30 px se parte en cuatro líneas en una columna de ~210. */
		font-size: 24px;
		margin-bottom: 0;
	}

	.re-nosotros__texto {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.re-nosotros__acciones {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 0;
	}
}

/* ══ Modal del mapa ═══════════════════════════════════════════════════ */

.re-mapa {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--re-negro);
	display: flex;
	flex-direction: column;
	animation: re-aparecer 0.25s ease;
}

.re-mapa[hidden] {
	display: none;
}

@keyframes re-aparecer {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.re-mapa__barra {
	flex: none;
	padding: 22px clamp(16px, 2.4vw, 32px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	flex-wrap: wrap;
}

.re-mapa__logo {
	height: 36px;
	width: auto;
}

.re-mapa__titulo {
	flex: 1;
	min-width: 0;
}

.re-mapa__h {
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	margin: 0;
	text-transform: uppercase;
}

.re-mapa__dir {
	font-family: var(--re-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--re-claro-25);
	margin: 5px 0 0;
}

.re-mapa__cerrar {
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--re-claro-100);
	font-size: 21px;
	line-height: 1;
}

.re-mapa__cerrar:hover {
	background: rgba(255, 255, 255, 0.08);
}

.re-mapa__lienzo {
	flex: 1;
	position: relative;
}

/*
 * Selector con el padre por delante a propósito. MapLibre le pone al contenedor
 * su clase `.maplibregl-map`, que trae `position: relative`; si su hoja se
 * carga después de ésta —y se carga, porque es una dependencia externa— gana
 * por orden y el div se queda con altura cero. Un selector más específico deja
 * de depender de quién llegue primero.
 */
.re-mapa__lienzo > .re-mapa__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.re-mapa__leyenda,
.re-mapa__datos {
	position: absolute;
	z-index: 3;
	background: rgba(11, 11, 12, 0.92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.re-mapa__leyenda {
	top: 24px;
	left: 24px;
	padding: 22px 24px;
	min-width: 250px;
}

.re-mapa__leyenda-titulo {
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--re-claro-25);
	margin-bottom: 18px;
}

.re-mapa__clave {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	color: var(--re-claro-90);
	margin-bottom: 12px;
}

.re-mapa__clave--ruta {
	color: var(--re-claro-45);
	margin-bottom: 22px;
}

.re-mapa__punto {
	width: 11px;
	height: 11px;
	background: var(--re-rojo);
	display: block;
	flex: none;
}

.re-mapa__linea {
	width: 11px;
	height: 3px;
	background: #ff6b35;
	display: block;
	flex: none;
}

.re-mapa__datos {
	bottom: 24px;
	left: 24px;
	padding: 20px 26px;
	display: flex;
	gap: 36px;
	margin: 0;
}

.re-mapa__datos dd {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
	margin: 0;
}

.re-mapa__datos dt {
	font-family: var(--re-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--re-claro-25);
	margin-top: 6px;
}

.re-mapa__cargando {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--re-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--re-claro-35);
	z-index: 2;
}

.re-mapa__cargando[hidden] {
	display: none;
}

@media (max-width: 780px) {
	.re-mapa__leyenda {
		top: auto;
		bottom: 16px;
		left: 16px;
		right: 16px;
		min-width: 0;
		padding: 16px 18px;
	}

	.re-mapa__datos {
		display: none;
	}
}