/*
 * Piezas que se repiten en más de una vista: cabecera, pie, botones, tarjetas,
 * distintivos y encabezados de sección.
 *
 * Lo que solo aparece en una vista vive en assets/css/views/. La regla para
 * decidir es simple: si lo usa una sola plantilla, no es un componente.
 */

/* ══ Barra superior ═══════════════════════════════════════════════════ */

/*
 * El hueco va separado en filas y columnas a propósito. Con el atajo `gap: 34px`
 * ese valor se aplicaba también entre líneas, así que en cuanto el horario y la
 * dirección dejaban de caber en una sola —entre 640 y 880 px— se abría un
 * agujero de 34 px y la banda roja se disparaba de alto.
 *
 * Los dos textos los edita el cliente y pueden crecer, así que el `row-gap`
 * pequeño es la red de seguridad: si algún día se parte a cualquier ancho, las
 * dos líneas quedan juntas.
 */
.re-topbar {
	background: var(--re-rojo);
	color: #fff;
	font-family: var(--re-mono);
	font-size: clamp(10px, 0.9vw, 11px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: clamp(14px, 1.8vw, 34px);
	row-gap: 4px;
	padding: 11px 24px;
	flex-wrap: wrap;
	text-align: center;
}

.re-topbar__sep {
	width: 1px;
	height: 13px;
	background: rgba(255, 255, 255, 0.5);
	display: block;
}

/*
 * Medido: con el contenido actual la línea se parte justo por debajo de 770 px.
 * Quitando aquí el separador —él y sus dos huecos suman unos 30 px— la línea
 * aguanta entera hasta ~740, y de ahí para abajo se apila en dos líneas juntas,
 * sin el separador colgando al final de la primera.
 *
 * El horario y la dirección los edita el cliente, así que un texto bastante más
 * largo adelantaría ese punto. No sería grave —el `row-gap` de 4 px mantiene las
 * dos líneas pegadas— pero si ocurre, este número es el que hay que subir.
 */
@media (max-width: 770px) {
	.re-topbar__sep {
		display: none;
	}
}

/* ══ Cabecera ═════════════════════════════════════════════════════════ */

.re-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(11, 11, 12, 0.92);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--re-linea-oscura);
}

.re-header__inner {
	max-width: var(--re-ancho);
	margin: 0 auto;
	padding: 13px var(--re-medianil);
	min-height: var(--re-cabecera);
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.6vw, 44px);
}

.re-logo {
	flex: none;
	display: block;
}

.re-logo img {
	height: 46px;
	width: auto;
}

.re-nav {
	display: flex;
	align-items: center;
	gap: clamp(13px, 2vw, 32px);
	flex-wrap: wrap;
	list-style: none;
}

.re-nav a {
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--re-claro-60);
}

.re-nav a:hover,
.re-nav .current-menu-item > a,
.re-nav .current_page_parent > a {
	color: #fff;
}

.re-header__acciones {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.9vw, 26px);
	margin-left: auto;
}

/* Buscador de la cabecera */

.re-buscador {
	position: relative;
}

.re-buscador input {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--re-linea-oscura-fuerte);
	outline: none;
	color: var(--re-claro-100);
	font-family: var(--re-texto);
	font-size: 14px;
	width: clamp(120px, 12vw, 190px);
	padding: 9px 2px;
	transition: border-color var(--re-transicion);
}

.re-buscador input:focus {
	border-color: var(--re-rojo);
}

.re-buscador input::placeholder {
	color: var(--re-claro-35);
}

/* Sugerencias del typeahead */

.re-buscador__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 320px;
	max-width: 90vw;
	background: var(--re-superficie);
	border: 1px solid var(--re-linea-oscura);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	padding: 8px 0;
	z-index: 70;
}

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

.re-buscador__grupo {
	font-family: var(--re-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--re-claro-25);
	padding: 12px 20px 6px;
}

.re-buscador__item {
	display: block;
	padding: 9px 20px;
	color: var(--re-claro-90);
	font-size: 14.5px;
	line-height: 1.4;
}

.re-buscador__item:hover,
.re-buscador__item[aria-selected="true"] {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

/* Menú móvil */

.re-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--re-claro-100);
	border: 1px solid var(--re-linea-oscura-fuerte);
}

.re-menu-toggle span,
.re-menu-toggle span::before,
.re-menu-toggle span::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--re-transicion), opacity var(--re-transicion);
}

.re-menu-toggle span::before,
.re-menu-toggle span::after {
	content: "";
	position: relative;
}

.re-menu-toggle span::before {
	top: -6px;
}

.re-menu-toggle span::after {
	top: 4px;
}

.re-menu-toggle[aria-expanded="true"] span {
	background: transparent;
}

.re-menu-toggle[aria-expanded="true"] span::before {
	transform: translateY(6px) rotate(45deg);
}

.re-menu-toggle[aria-expanded="true"] span::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.re-menu-toggle {
		display: flex;
		order: 3;
		margin-left: auto;
	}

	.re-header__acciones {
		margin-left: 0;
	}

	/*
	 * Por debajo de 1024 la navegación y las acciones se esconden tras el
	 * botón. El prototipo no tenía menú móvil: el <nav> era un flex que
	 * envolvía y en un teléfono ocupaba media pantalla.
	 */
	.re-header__panel {
		display: none;
		flex-basis: 100%;
		order: 4;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		padding: 24px 0 30px;
		border-top: 1px solid var(--re-linea-oscura);
		margin-top: 13px;
	}

	.re-header__panel.is-abierto {
		display: flex;
	}

	.re-header__inner {
		flex-wrap: wrap;
	}

	.re-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.re-nav a {
		font-size: 19px;
	}

	.re-header__acciones {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.re-buscador input {
		width: 100%;
	}
}

@media (min-width: 1025px) {
	.re-header__panel {
		display: contents;
	}
}

/* ══ Botones ══════════════════════════════════════════════════════════ */

.re-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 19px 32px;
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background var(--re-transicion), color var(--re-transicion),
		border-color var(--re-transicion);
}

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

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

/* Contorno sobre banda oscura */
.re-boton--fantasma {
	background: rgba(11, 11, 12, 0.4);
	color: var(--re-claro-100);
	border-color: rgba(255, 255, 255, 0.32);
	backdrop-filter: blur(6px);
}

.re-boton--fantasma:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--re-claro-100);
	color: var(--re-claro-100);
}

/* Contorno sobre banda clara */
.re-boton--contorno {
	background: transparent;
	color: var(--re-oscuro-100);
	border-color: var(--re-linea-clara-fuerte);
}

.re-boton--contorno:hover {
	background: var(--re-tinta);
	color: var(--re-banda);
	border-color: var(--re-tinta);
}

.re-boton--claro {
	background: var(--re-banda);
	color: var(--re-oscuro-100);
}

.re-boton--claro:hover {
	background: #fff;
	color: var(--re-oscuro-100);
}

.re-boton--waze {
	background: #33ccff;
	color: #062a33;
}

.re-boton--waze:hover {
	background: #5bd8ff;
	color: #062a33;
}

.re-boton--whatsapp {
	background: var(--re-whatsapp);
	color: var(--re-negro);
}

.re-boton--whatsapp:hover {
	background: var(--re-whatsapp-oscuro);
	color: var(--re-negro);
}

.re-boton--cabecera {
	height: 46px;
	padding: 0 26px;
}

.re-boton--sm {
	padding: 13px 22px;
	font-size: 12px;
}

.re-boton--bloque {
	width: 100%;
}

.re-boton[disabled],
.re-boton--inerte {
	opacity: 0.5;
	pointer-events: none;
}

/* ══ Encabezados de sección ═══════════════════════════════════════════ */

/*
 * Sin filete. El antetítulo llevaba un rectángulo rojo de 26 × 2 px por delante,
 * como en el prototipo; se retiró porque duplicaba el acento que ya da el propio
 * texto en rojo y desalineaba el arranque del bloque respecto del titular que
 * viene debajo.
 *
 * Al no haber ya dos hijos que colocar, esto vuelve a ser un bloque normal: un
 * `<p>` con `display: flex` solo consigue envolver su propio texto en una caja
 * anónima de flex.
 */
.re-antetitulo {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--re-rojo);
	margin-bottom: 18px;
}

.re-antetitulo--claro {
	color: var(--re-claro-100);
}

.re-encabezado {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(24px, 3vw, 48px);
	align-items: end;
	margin-bottom: clamp(44px, 5vw, 76px);
}

/*
 * El titular de una página de archivo usa la escala de los titulares de sección,
 * no la del hero: "Autos revisados por nosotros mismos" a 92 px ocupa cinco
 * líneas y empuja el catálogo fuera de la primera pantalla.
 */
.re-encabezado h1 {
	font-size: var(--re-h2);
	line-height: 1;
}

.re-encabezado__intro {
	font-size: var(--re-cuerpo);
	line-height: 1.8;
	color: var(--re-ink-suave);
	max-width: 460px;
	margin: 0;
}

/* ══ Etiquetas y distintivos ══════════════════════════════════════════ */

.re-etiqueta {
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--re-rojo);
}

.re-badge {
	display: inline-block;
	font-family: var(--re-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 7px 12px;
	background: var(--re-rojo);
	color: #fff;
	white-space: nowrap;
}

/*
 * Estados de un auto. En el prototipo los colores los calculaba badgeColors()
 * en JavaScript y venían duplicados para fondo claro y oscuro; aquí es una
 * clase por estado y el contexto lo resuelve la cascada.
 */
.re-badge--revisado {
	background: var(--re-rojo);
	color: #fff;
}

.re-badge--recien-ingresado {
	background: var(--re-badge-nuevo-fondo);
	color: var(--re-badge-nuevo-ink);
}

.re-badge--consignacion {
	background: var(--re-superficie-tenue);
	color: var(--re-ink-suave);
}

.re-badge--vendido {
	background: var(--re-superficie-tenue);
	color: var(--re-ink-media);
}

/* Estado de inventario de un repuesto */

.re-stock {
	font-family: var(--re-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.re-stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: currentColor;
	flex: none;
}

.re-stock--instock {
	color: var(--re-verde);
}

.re-stock--onbackorder {
	color: var(--re-ambar);
}

.re-stock--outofstock {
	color: var(--re-ink-media);
}

/* ══ Fichas técnicas (clave / valor) ══════════════════════════════════ */

/*
 * Los filetes van en cada celda, no como hueco de la retícula sobre un fondo
 * coloreado: cuando el número de filas no llena la última línea, ese fondo
 * asomaría como un bloque gris suelto.
 */
.re-ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	border-top: 1px solid var(--re-linea);
	border-left: 1px solid var(--re-linea);
	list-style: none;
}

.re-ficha > li {
	background: var(--re-superficie-caja);
	padding: 18px 20px;
	border-right: 1px solid var(--re-linea);
	border-bottom: 1px solid var(--re-linea);
}

.re-ficha dt,
.re-ficha__clave {
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--re-ink-tenue);
	margin-bottom: 8px;
}

.re-ficha dd,
.re-ficha__valor {
	margin: 0;
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: var(--re-ink);
}

/* Lista de comprobaciones con visto verde */

.re-checks {
	list-style: none;
	display: grid;
	gap: 14px;
}

.re-checks li {
	display: flex;
	gap: 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--re-ink-suave);
}

.re-checks li::before {
	content: "✓";
	color: var(--re-ink-ok);
	font-weight: 700;
	flex: none;
}

/* ══ Tarjeta de repuesto ══════════════════════════════════════════════ */

.re-card-producto {
	display: flex;
	flex-direction: column;
	/* Ancla del enlace estirado de más abajo. */
	position: relative;
}

/*
 * Toda la tarjeta lleva a la ficha, no solo la foto y el título. Se hace con una
 * capa transparente colgada del enlace del título en vez de envolviendo la
 * tarjeta en otro `<a>`: anidar enlaces es marcado inválido y deja al lector de
 * pantalla anunciando el mismo destino tres veces.
 *
 * La imagen y el botón quedan por debajo de esa capa, pero apuntan al mismo
 * sitio, así que el resultado de pulsar es idéntico.
 */
.re-card-producto__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.re-card-producto__art {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--re-superficie-art);
	overflow: hidden;
	margin-bottom: 20px;
	display: block;
}

.re-card-producto__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.re-card-producto:hover .re-card-producto__art img {
	transform: scale(1.04);
}

.re-card-producto__stock {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--re-velo);
	padding: 5px 9px;
}

.re-card-producto__marca {
	margin-bottom: 11px;
}

/*
 * Dos líneas reservadas, por el mismo motivo que en la tarjeta de auto: los
 * nombres de repuesto son largos y desiguales («Filtro antipolen de cabina con
 * carbón activado» frente a «Bujías NGK Iridium»), y sin la reserva los precios
 * de una misma fila quedan a distinta altura.
 */
.re-card-producto__titulo {
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 10px;
	min-height: calc(1.35em * 2);
}

.re-card-producto__titulo a {
	color: inherit;
}

.re-card-producto__titulo a:hover {
	color: var(--re-rojo);
}

/*
 * El ancla al fondo va en el precio, no en el botón: así el bloque precio + CTA
 * baja entero y los precios de la fila quedan a la misma altura. Con el
 * `margin-top: auto` en el botón, el precio seguía pegado al título y bailaba.
 */
.re-card-producto__precio {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.015em;
	margin-bottom: 18px;
	margin-top: auto;
}

/*
 * Si el repuesto no tiene precio, el botón queda como último elemento y es él
 * quien tiene que anclarse. El selector solo acierta en ese caso: cuando hay
 * precio, el botón no es hermano inmediato del título.
 */
.re-card-producto__titulo + .re-card-producto__cta {
	margin-top: auto;
}


/* ══ Tarjeta de auto ══════════════════════════════════════════════════ */

/*
 * Columna flex para poder anclar el pie. En una retícula, si la tarjeta es un
 * bloque en flujo normal, un título de dos líneas empuja hacia abajo los chips,
 * el precio y el «Ver ficha» solo en esa tarjeta, y la fila entera queda
 * escalonada. `.re-grid-autos` no declara `align-items`, así que las tarjetas ya
 * se estiran a toda la altura de la fila y el `margin-top: auto` del pie tiene
 * contra qué empujar.
 */
.re-card-auto {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Ancla del enlace estirado. */
	position: relative;
}

/*
 * Envoltorio de título, datos y pie. En vertical se limita a ser la columna que
 * ocupa el hueco que deja la foto, para que el `margin-top: auto` del pie tenga
 * contra qué empujar; en móvil es la segunda columna de la tarjeta horizontal.
 */
.re-card-auto__info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/*
 * Toda la tarjeta lleva a la ficha. Aquí importa más que en la de repuesto:
 * en la disposición horizontal de móvil el «Ver ficha →» es un `<span>`, no un
 * enlace, así que sin esto solo serían pulsables la foto y el título.
 */
.re-card-auto__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.re-card-auto__art {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--re-superficie-art);
	overflow: hidden;
	margin-bottom: 24px;
	display: block;
	/* Sin esto la caja 4:3 se comprime si el resto del contenido aprieta. */
	flex: none;
}

/*
 * `contain`, no `cover`: en un listado de autos usados la foto es la mitad de la
 * decisión de compra y recortarla esconde justo lo que se mira (el frontal, el
 * estado de las llantas, si le falta un espejo). Cuando la proporción no encaja
 * con la caja quedan franjas del fondo, y eso es aceptable; un parachoques
 * cortado no.
 */
.re-card-auto__art img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.re-card-auto:hover .re-card-auto__art img {
	transform: scale(1.04);
}

.re-card-auto__badge {
	position: absolute;
	top: 16px;
	left: 16px;
}

/*
 * Se reservan dos líneas siempre. Los nombres de auto —«Subaru Outback 2.5i
 * Limited»— caen unos en una línea y otros en dos, y sin esta reserva los chips
 * y el precio de cada tarjeta arrancan a una altura distinta. En `em` para que
 * siga al tamaño de fuente si algún día cambia; el 1.2 es su `line-height`.
 */
.re-card-auto__titulo {
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin-bottom: 14px;
	min-height: calc(1.2em * 2);
}

.re-card-auto__titulo a {
	color: inherit;
}

.re-card-auto__titulo a:hover {
	color: var(--re-rojo);
}

.re-card-auto__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin-bottom: 20px;
	font-family: var(--re-mono);
	font-size: 12px;
	color: var(--re-ink-media);
}

/*
 * El pie va clavado al fondo. Es la red que cubre lo que la reserva de dos
 * líneas del título no alcanza: si los chips envuelven —`re_auto_chips()`
 * devuelve entre 0 y 4— o un nombre se va a tres líneas, los precios de la fila
 * siguen alineados entre sí.
 */
.re-card-auto__pie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

.re-card-auto__precio {
	font-family: var(--re-titulo);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.015em;
	color: var(--re-rojo);
}

.re-card-auto__ver {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--re-ink-tenue);
}


/* ══ Tarjeta de artículo ══════════════════════════════════════════════ */

.re-card-post__art {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--re-superficie);
	overflow: hidden;
	margin-bottom: 22px;
}

.re-card-post__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.re-card-post:hover .re-card-post__art img {
	transform: scale(1.04);
}

.re-card-post__meta {
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--re-ink-tenue);
	margin-bottom: 12px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.re-card-post__titulo {
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	margin-bottom: 12px;
	text-transform: none;
}

.re-card-post__titulo a {
	color: inherit;
}

.re-card-post__titulo a:hover {
	color: var(--re-rojo);
}

.re-card-post__extracto {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--re-ink-suave);
	margin-bottom: 16px;
}

/* ══ Retículas de tarjetas ════════════════════════════════════════════ */

/*
 * El `min(Npx, 100%)` dentro del `minmax` no es adorno: sin él estas retículas
 * desbordan la página en móvil.
 *
 * `auto-fit` colapsa a una sola columna cuando no caben dos, pero el mínimo del
 * `minmax` se sigue respetando: una pista de `minmax(300px, 1fr)` mide 300 px
 * aunque el contenedor tenga 280, y el `1fr` solo actúa de máximo. Envolviendo
 * el mínimo en `min(..., 100%)` la pista puede encoger por debajo de N cuando no
 * hay sitio, que es justo lo que se espera.
 *
 * Vale para todos los `repeat(auto-fit|auto-fill, minmax(...))` del tema; si se
 * añade una retícula nueva, que siga el mismo patrón.
 */
.re-grid-productos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: clamp(22px, 2.6vw, 36px);
	list-style: none;
}

.re-grid-autos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
	gap: clamp(22px, 2.6vw, 36px);
	list-style: none;
}

.re-grid-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(28px, 3.4vw, 48px);
	list-style: none;
}

/* ══ Las dos tarjetas en teléfono ═════════════════════════════════════ */

/*
 * Este bloque va DESPUÉS de las retículas a propósito. Las reglas de arriba
 * tienen la misma especificidad, así que si estuviera antes —pegado a cada
 * tarjeta, que es donde apetece ponerlo— el `auto-fill` de `.re-grid-productos`
 * ganaría por orden y el número de columnas no cambiaría. Ya pasó.
 *
 * Dos tratamientos distintos porque el contenido lo pide: el repuesto es un
 * artículo de catálogo y va de dos en dos, como en cualquier tienda pensada para
 * el móvil; el auto se tumba y ocupa el ancho, porque su foto y sus datos son la
 * mitad de la decisión de compra y no caben en media pantalla.
 */
@media (max-width: 640px) {

	/* --- Repuestos: dos por fila, compactos ---------------------------- */

	.re-grid-productos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 10px;
	}

	.re-card-producto__art {
		margin-bottom: 12px;
	}

	.re-card-producto__stock {
		top: 8px;
		right: 8px;
		padding: 4px 7px;
	}

	.re-card-producto__marca {
		font-size: 9.5px;
		margin-bottom: 6px;
	}

	/* La reserva de dos líneas está en `em`: se ajusta sola al cuerpo nuevo. */
	.re-card-producto__titulo {
		font-size: 13.5px;
		margin-bottom: 8px;
	}

	.re-card-producto__precio {
		font-size: 17px;
		margin-bottom: 10px;
	}

	/*
	 * El botón se queda, pero reducido: la tarjeta entera ya es pulsable, así
	 * que aquí hace de refuerzo y no de única vía.
	 */
	.re-card-producto__cta .re-boton {
		padding: 9px 10px;
		font-size: 10.5px;
		letter-spacing: 0.04em;
	}

	/* --- Autos: tarjeta horizontal ------------------------------------- */

	/*
	 * Una sola columna, siempre. La regla base es `auto-fill` con mínimo de
	 * 270 px, que entre 600 y 640 daría dos columnas de tarjeta ya tumbada.
	 */
	.re-grid-autos {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.re-card-auto {
		display: grid;
		grid-template-columns: 40% 1fr;
		column-gap: 14px;
		align-items: center;
		height: auto;
	}

	.re-card-auto__art {
		margin-bottom: 0;
	}

	.re-card-auto__badge {
		top: 8px;
		left: 8px;
		font-size: 8.5px;
		padding: 5px 7px;
		letter-spacing: 0.08em;
	}

	/*
	 * Sin reserva de dos líneas: en una sola columna cada tarjeta es
	 * independiente y esa reserva solo dejaría hueco muerto bajo el título.
	 */
	.re-card-auto__titulo {
		font-size: 16px;
		margin-bottom: 8px;
		min-height: 0;
	}

	.re-card-auto__specs {
		gap: 4px 10px;
		font-size: 11px;
		margin-bottom: 10px;
	}

	.re-card-auto__pie {
		gap: 10px;
		margin-top: 0;
	}

	.re-card-auto__precio {
		font-size: 20px;
	}

	/*
	 * Fuera el «Ver ficha →». En la columna de información quedan unos 195 px y
	 * el precio ya se los lleva: con los dos, ambos se partían en dos líneas. La
	 * tarjeta entera es pulsable, así que la etiqueta no aportaba nada que no
	 * dijera ya el conjunto.
	 */
	.re-card-auto__ver {
		display: none;
	}

	/*
	 * Un filete entre tarjetas. Apiladas y sin fondo propio, con solo 12 px de
	 * separación, la lista se lee como un bloque continuo; la línea le devuelve
	 * el ritmo sin añadir cajas.
	 */
	.re-grid-autos .re-card-auto {
		padding-bottom: 12px;
		border-bottom: 1px solid var(--re-linea);
	}

	.re-grid-autos .re-card-auto:last-child {
		border-bottom: 0;
	}
}

/* ══ Enlace subrayado ═════════════════════════════════════════════════ */

.re-enlace-subrayado {
	display: inline-block;
	padding: 10px 0;
	border-bottom: 1px solid var(--re-linea-campo);
	color: var(--re-ink);
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.re-enlace-subrayado:hover {
	border-color: var(--re-rojo);
	color: var(--re-rojo);
}

.re-enlace-subrayado--rojo {
	color: var(--re-rojo);
	border-color: rgba(225, 27, 34, 0.45);
}

/* ══ Estrellas ════════════════════════════════════════════════════════ */

.re-estrellas {
	color: var(--re-rojo);
	font-size: 15px;
	letter-spacing: 3px;
	margin: 0;
	line-height: 1;
}

/* ══ Presencia de JavaScript ══════════════════════════════════════════ */

/*
 * `.js` la pone un script en línea del <head> antes del primer pintado. Estas
 * dos clases evitan tener que insertar o borrar nodos desde el script: el HTML
 * lleva las dos versiones y la cascada decide cuál se ve.
 */
.re-solo-js {
	display: none;
}

html.js .re-solo-js {
	display: inline-flex;
}

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

/* ══ Chips de filtro ══════════════════════════════════════════════════ */

.re-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin-bottom: 28px;
}

.re-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	background: var(--re-tinta);
	color: var(--re-banda);
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

.re-chip__x {
	font-size: 14px;
	line-height: 1;
}

/* ══ Migas y paginación ═══════════════════════════════════════════════ */

.re-migas {
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--re-ink-tenue);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.re-migas a {
	color: inherit;
}

.re-migas a:hover {
	color: var(--re-rojo);
}

.re-paginacion {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: clamp(40px, 5vw, 72px);
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 15px;
}

.re-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--re-linea);
	color: var(--re-ink-suave);
}

.re-paginacion .page-numbers:hover {
	border-color: var(--re-tinta);
	color: var(--re-oscuro-100);
}

.re-paginacion .page-numbers.current {
	background: var(--re-rojo);
	border-color: var(--re-rojo);
	color: #fff;
}

/* ══ Estado vacío ═════════════════════════════════════════════════════ */

.re-vacio {
	padding: clamp(60px, 8vw, 110px) 20px;
	text-align: center;
}

.re-vacio__titulo {
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 14px;
}

.re-vacio p {
	color: var(--re-ink-suave);
	margin-bottom: 24px;
}

/* ══ Marquee de marcas ════════════════════════════════════════════════ */

.re-marquee {
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.re-marquee__pista {
	display: flex;
	align-items: center;
	gap: clamp(48px, 6vw, 96px);
	width: max-content;
	animation: re-marquee 34s linear infinite;
}

.re-marquee:hover .re-marquee__pista {
	animation-play-state: paused;
}

.re-marquee img {
	height: 34px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(1.6);
	opacity: 0.65;
	transition: opacity var(--re-transicion), filter var(--re-transicion);
}

.re-marquee img:hover {
	filter: none;
	opacity: 1;
}

@keyframes re-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ══ Pie ══════════════════════════════════════════════════════════════ */

.re-footer {
	background: var(--re-negro);
	color: var(--re-claro-100);
	border-top: 1px solid var(--re-linea-oscura);
}

.re-footer__grid {
	max-width: var(--re-ancho);
	margin: 0 auto;
	padding: 96px var(--re-medianil) 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: clamp(36px, 4vw, 64px);
}

.re-footer__logo img {
	height: 50px;
	width: auto;
	margin-bottom: 26px;
}

.re-footer__lema {
	font-size: 15px;
	line-height: 1.75;
	color: var(--re-claro-35);
	max-width: 290px;
	margin-bottom: 28px;
}

.re-footer__social {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.re-footer__social a {
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 14px;
	color: var(--re-claro-60);
}

.re-footer__social a:hover {
	color: var(--re-rojo);
}

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

.re-footer__lista {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 15px;
	color: var(--re-claro-45);
	line-height: 1.6;
}

.re-footer__lista a {
	color: var(--re-claro-45);
}

.re-footer__lista a:hover {
	color: var(--re-claro-100);
}

.re-footer__contacto a {
	color: var(--re-claro-100);
}

/*
 * El hueco inferior es generoso a propósito: el botón flotante de WhatsApp es
 * `position: fixed` en la esquina y taparía la última línea legal.
 */
.re-footer__legal {
	max-width: var(--re-ancho);
	margin: 0 auto;
	padding: 30px var(--re-medianil) 104px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--re-claro-25);
}

/* ══ Botón flotante de WhatsApp ═══════════════════════════════════════ */

.re-fab {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 70;
	height: 58px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 28px;
	background: var(--re-whatsapp);
	color: var(--re-negro);
	border-radius: 99px;
	font-family: var(--re-titulo);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	box-shadow: 0 12px 36px rgba(37, 211, 102, 0.3);
}

.re-fab:hover {
	background: var(--re-whatsapp-oscuro);
	color: var(--re-negro);
}

@media (max-width: 640px) {
	.re-fab {
		right: 16px;
		bottom: 16px;
		height: 52px;
		padding: 0 22px;
	}
}

/*
 * CF7 envuelve el botón en un `<p>` suelto, sin nuestras clases, que se lleva
 * los `1.2em` de margen que base.css da a cualquier párrafo. Ahí abajo eso es
 * hueco muerto: el aviso de respuesta que va después está oculto hasta que se
 * envía algo.
 */
.wpcf7-form > p:last-child {
	margin-bottom: 0;
}

/* ── Contact Form 7 ───────────────────────────────────────────────────
 *
 * La hoja de CF7 no se carga (ver inc/forms.php): el formulario lleva las
 * clases del tema. Lo que sigue es lo poco que CF7 pinta por su cuenta.
 *
 * Las dos primeras reglas son el peaje de no cargar su hoja: CF7 mete sus
 * campos ocultos dentro de un `<fieldset>` y su resumen para lectores de
 * pantalla en un `<div>`, y cuenta con que su CSS los esconda. Sin ellas, el
 * fieldset se pinta como una caja con borde encima del primer campo.
 */
.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 .screen-reader-response {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wpcf7 form .wpcf7-response-output {
	padding: 16px 20px;
	margin: 24px 0 0;
	font-size: 15px;
	border: 0;
	border-left: 3px solid var(--re-rojo);
	background: rgba(225, 27, 34, 0.08);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--re-verde);
	background: rgba(62, 158, 99, 0.1);
}

/* Mientras se envía y cuando no hay nada que decir, no ocupa sitio. */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output {
	display: none;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 7px;
	font-family: var(--re-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--re-rojo-claro);
}

.re-campo input.wpcf7-not-valid,
.re-campo textarea.wpcf7-not-valid {
	border-bottom-color: var(--re-rojo);
}

/*
 * El indicador de envío. CF7 lo dibuja con su hoja, que aquí no se carga, así
 * que se rehace: un punto que late, sin animación para quien no la quiere.
 */
.wpcf7-spinner {
	display: none;
	width: 14px;
	height: 14px;
	margin: 0 0 0 12px;
	border-radius: 50%;
	background: var(--re-ink-tenue);
	vertical-align: middle;
	animation: re-latido 1s ease-in-out infinite;
}

.wpcf7 form.submitting .wpcf7-spinner {
	display: inline-block;
}

@keyframes re-latido {
	0%,
	100% {
		opacity: 0.25;
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner {
		animation: none;
		opacity: 0.6;
	}
}

/* ══ Pasos numerados ══════════════════════════════════════════════════ */

/*
 * Vive aquí y no en views/home.css porque lo usan dos vistas: el "cómo
 * trabajamos" de la portada y el "vende tu auto" del listado de autos y de cada
 * ficha. Mientras estuvo en la hoja de la portada, las vistas de autos pintaban
 * el `<ol>` sin estilo: el marcador decimal del navegador se sumaba al número
 * manual del span y se leía "1. 01", "2. 02", "3. 03".
 */
.re-pilares {
	list-style: none;
	border-bottom: 1px solid var(--re-linea);
}

.re-pilar {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 20px;
	padding: 24px 0;
	border-top: 1px solid var(--re-linea);
}

.re-pilar__num {
	font-family: var(--re-mono);
	font-size: 12px;
	color: var(--re-rojo);
	padding-top: 5px;
}

.re-pilar__titulo {
	font-size: 20px;
	letter-spacing: 0.005em;
	margin-bottom: 9px;
}

.re-pilar__texto {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--re-ink-media);
	margin: 0;
	max-width: 460px;
}

/* ══ Formularios ══════════════════════════════════════════════════════ */

/*
 * El ritmo vertical de un formulario no es decoración: es lo que dice qué
 * etiqueta pertenece a qué campo. El hueco de la etiqueta a su propio subrayado
 * tiene que ser claramente menor que el que hay hasta la etiqueta siguiente. Al
 * revés —que es como estaba— el ojo agrupa cada subrayado con el rótulo
 * equivocado y parece que las etiquetas no se distinguen de los campos.
 */
.re-campo {
	display: block;
	margin-bottom: 26px;
}

/*
 * Red de seguridad. La plantilla del formulario vive en la base de datos y se
 * puede editar desde el escritorio de CF7, que la formatea con `auto_br`: basta
 * un salto de línea dentro del `<p>` para que reaparezca un `<br />` y con él
 * 30 px de caja de línea vacía. Aquí no hay ningún `<br />` legítimo.
 */
.re-campo br {
	display: none;
}

.re-campo__label {
	display: block;
	font-family: var(--re-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/*
	 * Un escalón por encima del marcador de posición. Compartían token, así que
	 * el rótulo y el texto de ejemplo salían del mismo gris exacto y no había
	 * forma de saber cuál era cuál. El rótulo manda: va más claro.
	 */
	color: var(--re-ink-suave);
	margin-bottom: 6px;
}

.re-campo input,
.re-campo textarea,
.re-campo select {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--re-linea-campo);
	padding: 14px 2px;
	color: var(--re-ink);
	/*
	 * El 1.8 del cuerpo lo hereda el control por el `font: inherit` del reinicio.
	 * Está pensado para párrafos y en un campo de una línea son 28 px de
	 * interlineado que solo sirven para engordar la caja.
	 */
	line-height: 1.4;
	/*
	 * El prototipo declaraba la fuente en cada campo. Sin esto los inputs caen a
	 * la del sistema —el `font: inherit` del reinicio no alcanza aquí— y el
	 * formulario se lee con otra tipografía que el resto de la página.
	 */
	font-family: var(--re-texto);
	font-size: 15.5px;
	outline: none;
	transition: border-color var(--re-transicion);
}

/* Un escalón por debajo de la etiqueta: es texto de ejemplo, no un rótulo. */
.re-campo input::placeholder,
.re-campo textarea::placeholder {
	color: var(--re-ink-media);
	opacity: 1;
}

/* Solo en vertical: a lo ancho rompería la retícula del formulario. */
.re-campo textarea {
	resize: vertical;
}

.re-campo input:focus,
.re-campo textarea:focus,
.re-campo select:focus {
	border-color: var(--re-rojo);
}

/* La trampa para robots: invisible para personas, presente en el DOM. */
.re-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.re-aviso {
	padding: 16px 20px;
	margin-bottom: 24px;
	font-size: 15px;
	border-left: 3px solid var(--re-rojo);
	background: rgba(225, 27, 34, 0.08);
}

.re-aviso--ok {
	border-left-color: var(--re-verde);
	background: rgba(62, 158, 99, 0.1);
}

/* ══ Tarjeta de reseña ════════════════════════════════════════════════ */

/*
 * Consume roles de tinta (--re-ink, --re-linea) y no rampas, que es lo que le
 * permite funcionar igual en la banda oscura del carril de la portada y en la
 * banda clara de las fichas. El README lo dice sin rodeos: «los componentes
 * consumen roles, no rampas». Antes usaba --re-claro-90 y --re-linea-oscura, y
 * sobre fondo claro habría quedado ilegible.
 *
 * `position: relative` para que la tarjeta sea el bloque contenedor de sus
 * propios absolutos. Sin esto, el `.sr-only` de la valoración se colgaba del
 * bloque contenedor inicial, se escapaba del `overflow` del carril y de la
 * sección, y arrastraba la página 2.100 px a la derecha. Ver la nota de
 * `.sr-only` en base.css.
 */
.re-resena {
	position: relative;
	padding: 44px 44px 40px;
	background: var(--re-superficie-caja);
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.re-resena__texto {
	font-size: 19px;
	line-height: 1.65;
	color: var(--re-ink);
	margin: 0;
	flex: 1;
	text-wrap: pretty;
}

.re-resena__autor {
	display: flex;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--re-linea);
	padding-top: 24px;
}

.re-resena__avatar {
	width: 44px;
	height: 44px;
	border-radius: 99px;
	object-fit: cover;
	background: var(--re-superficie-tenue);
	flex: none;
}

.re-resena__nombre {
	display: block;
	font-family: var(--re-titulo);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--re-ink);
}

.re-resena__fecha {
	display: block;
	font-family: var(--re-mono);
	font-size: 11px;
	color: var(--re-ink-tenue);
	margin-top: 4px;
}

/* ══ Reseñas al pie de una ficha ══════════════════════════════════════ */

.re-resenas-entrada__titulo {
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.1;
	max-width: 18ch;
	text-wrap: balance;
}

.re-resenas-entrada__resumen {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--re-ink-suave);
	margin: 0;
}

.re-resenas-entrada__lista {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: clamp(18px, 2.2vw, 28px);
	margin: 0 0 clamp(40px, 5vw, 64px);
}

.re-resenas-entrada__form {
	max-width: 620px;
}

.re-resenas-entrada__subtitulo {
	font-size: 22px;
	margin-bottom: 8px;
}

.re-resenas-entrada__aviso {
	font-size: 14px;
	color: var(--re-ink-media);
	margin: 0 0 28px;
}

/*
 * Las estrellas del formulario: radios reales con la etiqueta encima, para que
 * funcionen con teclado y sin JavaScript. El truco del relleno es el orden
 * inverso en el marcado (de 5 a 1) más el combinador `~`: al marcar una, se
 * pintan ella y todas las que le siguen en el DOM, que son las de menor valor.
 */
.re-resena-form__notas {
	/*
	 * `position: relative` es obligatorio, no decorativo. Los radios se ocultan
	 * con `.sr-only`, que es `position: absolute; top: 0; left: 0`: sin un bloque
	 * contenedor propio se cuelgan del bloque contenedor inicial, o sea del
	 * origen del documento. Al pulsar una estrella el navegador enfoca su radio y
	 * lo desplaza a la vista — y como vivía en el origen, la página saltaba
	 * entera al principio. Es la misma trampa que ya documenta `.re-resena`, pero
	 * en vertical en lugar de en horizontal.
	 */
	position: relative;
	border: 0;
	padding: 0;
	margin: 0 0 26px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.re-resena-form__notas legend {
	width: 100%;
	margin-bottom: 10px;
}

.re-resena-form__estrella {
	font-size: 30px;
	line-height: 1;
	color: var(--re-linea);
	cursor: pointer;
	padding: 0 2px;
	transition: color 0.12s ease;
}

.re-resena-form__radio:checked ~ .re-resena-form__estrella,
.re-resena-form__estrella:hover,
.re-resena-form__estrella:hover ~ .re-resena-form__estrella {
	color: var(--re-rojo);
}

.re-resena-form__radio:focus-visible + .re-resena-form__estrella {
	outline: 2px solid var(--re-rojo);
	outline-offset: 2px;
}

/* ══ Preguntas frecuentes ═════════════════════════════════════════════ */

.re-preguntas__titulo {
	margin: 0 0 clamp(28px, 3vw, 44px);
}

.re-preguntas__lista {
	max-width: 860px;
	border-top: 1px solid var(--re-linea);
}

.re-pregunta {
	border-bottom: 1px solid var(--re-linea);
}

.re-pregunta__q {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 22px 0;
	font-family: var(--re-titulo);
	font-size: clamp(18px, 1.6vw, 21px);
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.re-pregunta__q::-webkit-details-marker {
	display: none;
}

/* Un «+» que gira a «×» al abrir: pista de que se despliega sin necesitar icono. */
.re-pregunta__q::after {
	content: "+";
	flex: none;
	font-family: var(--re-mono);
	font-size: 22px;
	line-height: 1;
	color: var(--re-rojo);
	transition: transform 0.15s ease;
}

.re-pregunta[open] .re-pregunta__q::after {
	transform: rotate(45deg);
}

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

.re-pregunta__a {
	/* Para que la animación de altura de motion.js recorte, no desborde. */
	overflow: hidden;
	padding: 0 0 24px;
	max-width: 70ch;
	font-size: var(--re-cuerpo);
	line-height: 1.75;
	color: var(--re-ink-suave);
}

.re-pregunta__a p {
	margin: 0 0 12px;
}

.re-pregunta__a p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.re-pregunta__q::after {
		transition: none;
	}
}

/* ══ Movimiento ═══════════════════════════════════════════════════════ */

/*
 * Todo lo animado lo lleva GSAP (assets/js/motion.js e intro.js). Aquí solo:
 * el estado previo del hero, las micro-interacciones que resuelve CSS y los
 * loops que no necesitan JavaScript. Las transformaciones de hover usan las
 * propiedades sueltas `translate` y `scale`, no `transform`: así se suman a las
 * que GSAP escribe en línea (efecto magnético, apariciones) en vez de pisarse.
 */

/*
 * Estado previo de la entrada del hero. Solo con `re-motion` (hay JS y no se
 * pidió menos movimiento) y hasta `re-motion-listo`, que pone intro.js al tomar
 * el control o header.php a los 3 s si GSAP no llega.
 */
html.re-motion:not(.re-motion-listo) [data-intro] {
	opacity: 0;
}

/* --- Botones ----------------------------------------------------------- */

.re-boton {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: background var(--re-transicion), color var(--re-transicion),
		border-color var(--re-transicion), scale 0.2s ease;
}

/* Un brillo diagonal que cruza el botón al pasar el cursor. */
.re-boton::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 70%
	);
	translate: -120% 0;
	transition: translate 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
	pointer-events: none;
}

.re-boton:hover::after {
	translate: 120% 0;
}

.re-boton:active,
.re-fab:active {
	scale: 0.97;
}

/* --- Enlaces: el subrayado se dibuja de izquierda a derecha ------------ */

.re-enlace-subrayado {
	background: linear-gradient(var(--re-rojo), var(--re-rojo)) no-repeat left bottom / 0% 1px;
	transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), border-color var(--re-transicion);
}

.re-enlace-subrayado:hover {
	background-size: 100% 1px;
}

.re-nav a {
	background: linear-gradient(var(--re-rojo), var(--re-rojo)) no-repeat left bottom / 0% 1px;
	padding-bottom: 4px;
	transition: color var(--re-transicion), background-size 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.re-nav a:hover,
.re-nav .current-menu-item > a,
.re-nav .current_page_parent > a {
	background-size: 100% 1px;
}

/* --- Tarjetas ---------------------------------------------------------- */

.re-card-auto,
.re-card-producto,
.re-card-post {
	transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.re-card-auto:hover,
.re-card-producto:hover,
.re-card-post:hover {
	translate: 0 -4px;
}

.re-card-post__art {
	position: relative;
}

/*
 * Foco: un degradado radial que sigue al cursor. motion.js añade `.re-foco` y
 * escribe --mx/--my; sin puntero fino o con menos movimiento no se añade y
 * esto no aplica. En las tarjetas de catálogo va sobre la foto, que es la única
 * superficie que tienen.
 */
.re-foco:is(.re-resena, .re-servicio, .re-plan__panel),
.re-foco :is(.re-card-auto__art, .re-card-producto__art, .re-card-post__art) {
	position: relative;
}

.re-foco:is(.re-resena, .re-servicio, .re-plan__panel)::before,
.re-foco :is(.re-card-auto__art, .re-card-producto__art, .re-card-post__art)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		380px circle at var(--mx, 50%) var(--my, 50%),
		var(--re-foco-color, rgba(225, 27, 34, 0.07)),
		transparent 65%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.re-foco:hover::before,
.re-foco:hover :is(.re-card-auto__art, .re-card-producto__art, .re-card-post__art)::before {
	opacity: 1;
}

.re-banda--oscura .re-foco,
.re-banda--superficie .re-foco {
	--re-foco-color: rgba(255, 255, 255, 0.07);
}

/* --- Cabecera al hacer scroll ------------------------------------------ */

.re-header {
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.re-header.is-scrolled {
	background: rgba(11, 11, 12, 0.97);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* --- WhatsApp: un anillo que late cada pocos segundos ------------------- */

.re-fab {
	transition: background var(--re-transicion), scale 0.2s ease;
}

.re-fab::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--re-whatsapp);
	pointer-events: none;
	opacity: 0;
	animation: re-anillo 4s cubic-bezier(0.2, 0.7, 0.3, 1) 3s infinite;
}

@keyframes re-anillo {
	0% {
		opacity: 0.55;
		scale: 1;
	}

	35%,
	100% {
		opacity: 0;
		scale: 1.25 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.re-boton::after,
	.re-fab::before {
		display: none;
	}
}