/**
 * Renta de autos blindados — listado.
 *
 * Adaptado de la maqueta "T-GUARD · CAMBIOS DE DIRECCIÓN" (Patrick Macip),
 * vista Renta. Misma convención que assets/css/fleet-grid.css: todas las clases
 * con prefijo tg- porque esta hoja convive con el header, el footer y el resto
 * del tema, y las genéricas del export (.container, .button, .fleet, .fcard)
 * habrían chocado con ellos.
 *
 * Correspondencia con el export:
 *   .fleet-hero    → .tg-renta-hero
 *   .fleet-brands  → .tg-renta-brands
 *   .fleet         → .tg-renta-fleet
 *   .fleet__grid   → .tg-renta-grid
 *   .fcard         → .tg-rcard
 *   .button        → .tg-renta-btn
 */

@font-face {
	font-family: 'Michroma';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/michroma.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter.woff2') format('woff2');
}

@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/bebas-neue.woff2') format('woff2');
}

.tg-renta,
.tg-renta-city,
.tg-renta-faq {
	--tg-bg: #0e0e0e;
	--tg-surface: #202020;
	--tg-surface-2: #181818;
	--tg-section: #121212;
	--tg-accent: #295bcc;
	--tg-accent-hover: #36d;
	--tg-accent-light: #5c8eff;
	--tg-glow: #002f9a;
	--tg-text: #fff;
	--tg-text-soft: #eee;
	--tg-ui: 'Inter', -apple-system, Helvetica, Arial, sans-serif;
	--tg-display: 'Michroma', sans-serif;
	--tg-title: 'Bebas Neue', sans-serif;
	--tg-easing: cubic-bezier(.22, 1, .36, 1);
	--tg-duration: 320ms;

	box-sizing: border-box;
	background: var(--tg-bg);
	color: var(--tg-text);
	font-family: var(--tg-ui);
	font-size: 20px;
	font-weight: 200;
	line-height: 24px;
}

.tg-renta *,
.tg-renta *::before,
.tg-renta *::after {
	box-sizing: inherit;
}

.tg-renta a {
	color: inherit;
	text-decoration: none;
}

.tg-renta img,
.tg-renta svg {
	display: block;
}

/* ==================== BOTÓN ==================== */

.tg-renta-btn {
	position: relative;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 35px;
	border: 2px solid var(--tg-text);
	border-radius: 30px;
	font-size: 20px;
	font-weight: 200;
	line-height: 24px;
	white-space: nowrap;
	transition:
		background var(--tg-duration) var(--tg-easing),
		color var(--tg-duration) var(--tg-easing),
		border-color var(--tg-duration) var(--tg-easing),
		top var(--tg-duration) var(--tg-easing);
}

.tg-renta-btn:hover {
	background: var(--tg-text);
	color: #000;
}

.tg-renta-btn--accent {
	background: var(--tg-accent);
	border-color: var(--tg-accent);
	font-weight: 500;
	line-height: 30px;
}

.tg-renta-btn--accent:hover,
.tg-renta-btn--accent:focus-visible {
	top: -2px;
	background: var(--tg-accent-hover);
	border-color: var(--tg-accent-hover);
	color: var(--tg-text);
}

.tg-renta-btn--accent:active {
	top: 0;
}

/* ==================== HERO ==================== */

/*
 * El padding superior sube de los 83px del export: ahí la cabecera flotaba
 * sobre el hero, y en el sitio es una barra negra opaca de 150px en flujo, así
 * que con 83px el titular quedaba pegado a ella.
 */
.tg-renta-hero {
	position: relative;
	padding: 130px min(245px, 13.6vw) 56px;
	background: linear-gradient(180deg, #101010 -0.92%, #171717 12.37%, #0e0e0e 79.42%);
	overflow: hidden;
}

.tg-renta-hero__glow {
	position: absolute;
	top: 58px;
	left: -170px;
	width: 339px;
	height: 339px;
	border-radius: 50%;
	background: var(--tg-glow);
	filter: blur(97.55px);
	pointer-events: none;
}

.tg-renta-hero__mark {
	position: absolute;
	top: 40px;
	right: 204px;
	width: 480px;
	height: 373px;
	pointer-events: none;
}

.tg-renta-hero__mark svg {
	width: 100%;
	height: 100%;
}

.tg-renta-hero__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 17px;
	max-width: 822px;
}

.tg-renta-hero__title {
	margin: 0;
	font-family: var(--tg-display);
	font-size: 47px;
	font-weight: 400;
	line-height: 70px;
}

.tg-renta-hero__text {
	margin: 0;
	max-width: 822px;
	color: var(--tg-text-soft);
	font-size: 20px;
	font-weight: 200;
	line-height: 34px;
}

.tg-renta-hero__perks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 15px;
	margin: 0;
	padding: 23px 5px;
	list-style: none;
}

.tg-renta-hero__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 -5px;
	padding: 0 10px;
	font-size: 16px;
	font-weight: 200;
	letter-spacing: 1px;
	line-height: 24px;
}

.tg-renta-hero__perks li::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--tg-accent);
}

/* ==================== BARRA DE MARCAS ==================== */

.tg-renta-brands {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: 62px;
	padding: 19px min(306px, 17vw);
	background: var(--tg-bg);
}

.tg-renta-brands__tab {
	color: var(--tg-text-soft);
	font-size: 20px;
	font-weight: 200;
	letter-spacing: 1.24278px;
	line-height: 24px;
	transition: color var(--tg-duration) var(--tg-easing);
}

.tg-renta-brands__tab:hover,
.tg-renta-brands__tab:focus-visible {
	color: var(--tg-text);
}

.tg-renta-brands__tab.is-active {
	color: var(--tg-text);
	font-weight: 400;
}

/* ==================== GRID ==================== */

.tg-renta-fleet {
	padding: 57px 0 56px;
	background: var(--tg-bg);
}

.tg-renta-grid {
	display: grid;
	grid-template-columns: repeat(3, 403.05px);
	justify-content: space-between;
	gap: 90px 10px;
	width: min(1311px, 100%);
	margin: 0 auto;
}

.tg-renta-fleet[aria-busy="true"] .tg-renta-grid {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 260ms var(--tg-easing), transform var(--tg-duration) var(--tg-easing);
}

/* ==================== TARJETA ==================== */

.tg-rcard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform var(--tg-duration) var(--tg-easing);
}

.tg-rcard:hover {
	transform: translateY(-4px);
}

.tg-rcard:active {
	transform: translateY(-2px);
}

.tg-rcard__media {
	position: relative;
	height: 267px;
	border-radius: 12px;
	background: var(--tg-section);
	overflow: hidden;
}

.tg-rcard__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--tg-easing);
}

.tg-rcard:hover .tg-rcard__image {
	transform: scale(1.04);
}

.tg-rcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0) 71.91%, #121212 116.67%);
}

.tg-rcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 29px;
	padding: 28px 31px 40px 26px;
	border-radius: 12px;
	background: var(--tg-surface);
	transition:
		background var(--tg-duration) var(--tg-easing),
		box-shadow var(--tg-duration) var(--tg-easing);
}

.tg-rcard:hover .tg-rcard__body {
	background: #262626;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

/*
 * La cadena de `flex: 1` desde el panel hasta el bloque de detalles es lo que
 * alinea entre sí las tarjetas de una fila: el panel se estira a la altura de
 * la fila, el bloque de detalles ocupa lo que sobra, y el `margin-top: auto`
 * del recuadro de blindaje lo empuja abajo. Así la fila de escudos y el botón
 * quedan a la misma altura aunque un auto tenga una descripción más larga.
 */
.tg-rcard__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
}

.tg-rcard__title {
	margin: 0;
	padding: 10px 10px 10px 0;
	font-family: var(--tg-title);
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 1.85705px;
	line-height: 31px;
}

.tg-rcard__details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 23px;
}

.tg-rcard__specs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 10px;
}

.tg-rcard__cap {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
}

/*
 * Se recorta a cuatro líneas: una descripción larga estiraría la fila entera,
 * y en la tarjeta solo hace falta la entrada — el texto completo está en la
 * ficha, a un clic.
 */
.tg-rcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin: 0;
	color: var(--tg-text-soft);
	font-size: 16px;
	font-weight: 200;
	line-height: 24px;
}

.tg-rcard__armor {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: auto;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--tg-surface-2);
}

.tg-rcard__armor-label {
	font-size: 20px;
	font-weight: 200;
	line-height: 24px;
	white-space: nowrap;
}

.tg-rcard__shields {
	display: flex;
	align-items: flex-end;
	gap: 27px;
}

.tg-rcard__shields svg {
	width: 30.6px;
	height: 33.5px;
	color: #fff;
}

/* El margen automático vive en el envoltorio, que es el hijo flex del panel. */
.tg-rcard__foot {
	margin-top: auto;
}

.tg-rcard__btn {
	width: 100%;
}

/* ==================== VACÍO Y PAGINACIÓN ==================== */

.tg-renta-empty {
	margin: 0;
	padding: 48px min(306px, 17vw);
	color: var(--tg-text-soft);
}

.tg-renta-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: min(1311px, 100%);
	margin: 60px auto 0;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.tg-renta-pagination a,
.tg-renta-pagination span {
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	font-size: 16px;
	text-align: center;
}

.tg-renta-pagination .current {
	background: var(--tg-accent);
	border-color: var(--tg-accent);
}

/* ==================== BANDA DE CIUDAD ==================== */

.tg-renta-city {
	height: 587px;
	overflow: hidden;
}

.tg-renta-city img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==================== PREGUNTAS FRECUENTES ==================== */

.tg-renta-faq {
	background: var(--tg-section);
	color: var(--tg-text);
	font-family: var(--tg-ui);
	padding: 105px clamp(24px, 8.833vw, 159.3px) 150px;
}

.tg-renta-faq__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
	width: min(1482px, 100%);
	margin-inline: auto;
}

.tg-renta-faq__title {
	margin: 0;
	padding: 0 37px;
	font-family: var(--tg-display);
	font-size: 47px;
	font-weight: 400;
	letter-spacing: -.7px;
	line-height: 76px;
}

.tg-renta-faq__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 0 55px;
}

.tg-renta-faq__item {
	margin: 0 16px;
	padding-bottom: 28px;
	border-bottom: .5px solid #404040;
	transition: border-color var(--tg-duration) var(--tg-easing);
}

.tg-renta-faq__item:hover {
	border-color: #6a6a6a;
}

.tg-renta-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin: 0 -16px;
	padding: 10px 16px;
	border-radius: 10px;
	list-style: none;
	cursor: pointer;
	font-size: 24px;
	font-weight: 400;
	line-height: 35px;
	transition:
		background var(--tg-duration) var(--tg-easing),
		color var(--tg-duration) var(--tg-easing),
		padding-left var(--tg-duration) var(--tg-easing);
}

.tg-renta-faq__item summary::-webkit-details-marker {
	display: none;
}

/*
 * El encabezado de la pregunta no pinta nada por su cuenta: hereda el tamaño y
 * el peso del `summary`, donde estaba definida la tipografía, para que el
 * acordeón se vea igual que antes de convertirlo en h3.
 *
 * Es el ÚNICO hijo del `summary` y lleva dentro el texto y la flecha. Así el
 * marcado cumple el modelo de contenido de `<summary>` —contenido en línea, o
 * un encabezado— y, de paso, `wpautop` no tiene contenido suelto que envolver:
 * con la flecha fuera del h3 metía un `<p>` de más. Medido.
 */
.tg-renta-faq__pregunta {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

.tg-renta-faq__item summary:hover {
	background: rgba(255, 255, 255, .04);
	padding-left: 24px;
}

/*
 * `margin-left: auto` y no `space-between`: si algún día se cuela otro nodo en
 * el summary, el reparto del espacio lo mandaría al centro. Con el margen
 * automático la flecha se queda pegada a la derecha pase lo que pase.
 */
.tg-renta-faq__item summary svg {
	width: 24px;
	height: 12px;
	flex: none;
	margin: 12px 6px 0 auto;
	color: var(--tg-text);
	transition: transform var(--tg-duration) var(--tg-easing), color var(--tg-duration) var(--tg-easing);
}

.tg-renta-faq__item summary:hover svg,
.tg-renta-faq__item[open] summary svg {
	color: var(--tg-accent-light, #5c8eff);
}

.tg-renta-faq__item[open] summary {
	color: var(--tg-accent-light, #5c8eff);
}

.tg-renta-faq__item[open] summary svg {
	transform: rotate(180deg);
}

.tg-renta-faq__answer {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 17px 8px;
}

.tg-renta-faq__answer p,
.tg-renta-faq__answer li {
	margin: 0;
	color: var(--tg-text-soft);
	font-size: 20px;
	font-weight: 200;
	line-height: 34px;
}

.tg-renta-faq__answer ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-left: 22px;
}

/* ==================== INTERMEDIO ==================== */

@media (max-width: 1480px) {
	.tg-renta-grid {
		grid-template-columns: repeat(3, minmax(0, 403.05px));
		gap: 60px 24px;
		padding: 0 24px;
	}

	.tg-renta-hero__mark {
		right: 24px;
		width: 340px;
		height: 264px;
	}

	.tg-renta-pagination {
		padding-inline: 24px;
	}
}

@media (max-width: 1100px) and (min-width: 900px) {
	.tg-renta-grid {
		grid-template-columns: repeat(2, minmax(0, 403.05px));
		justify-content: center;
	}
}

/* ==================== MÓVIL ==================== */

@media (max-width: 899px) {
	.tg-renta-hero {
		min-height: 0;
		padding: 90px 21px 40px;
	}

	.tg-renta-hero__title {
		font-size: 28px;
		line-height: 42px;
	}

	.tg-renta-hero__mark {
		display: none;
	}

	.tg-renta-brands {
		justify-content: flex-start;
		gap: 9px;
		min-height: 0;
		padding: 14px 21px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tg-renta-brands::-webkit-scrollbar {
		display: none;
	}

	.tg-renta-brands__tab {
		flex: none;
		padding: 8px 12px;
	}

	.tg-renta-fleet {
		padding: 36px 0 48px;
	}

	.tg-renta-grid {
		grid-template-columns: minmax(0, 403px);
		justify-content: center;
		gap: 31px;
		width: 100%;
		padding: 0 18px;
	}

	.tg-renta-empty {
		padding: 36px 21px;
	}

	.tg-renta-pagination {
		padding-inline: 18px;
	}

	.tg-renta-city {
		height: 220px;
	}

	.tg-renta-faq {
		padding: 86px 25px 120px;
	}

	.tg-renta-faq__inner {
		gap: 60px;
	}

	.tg-renta-faq__title {
		padding: 0;
		font-size: 26px;
		line-height: 34px;
	}

	.tg-renta-faq__list {
		gap: 16px;
		padding: 0;
	}

	.tg-renta-faq__item {
		margin: 0;
		padding-bottom: 16px;
	}

	.tg-renta-faq__item summary {
		margin: 0 -8px;
		padding: 6px 8px;
		font-size: 18px;
		line-height: 26px;
	}

	.tg-renta-faq__item summary:hover {
		padding-left: 12px;
	}

	.tg-renta-faq__item summary svg {
		margin-top: 7px;
	}

	.tg-renta-faq__answer {
		padding: 12px 0 4px;
	}

	.tg-renta-faq__answer p,
	.tg-renta-faq__answer li {
		font-size: 15px;
		line-height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-renta *,
	.tg-renta *::before,
	.tg-renta *::after {
		transition-duration: 1ms !important;
	}
}