/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* =========================================================================
ÍNDICE
1. PLUGINS Y TERCEROS
2. COMPONENTES COMPARTIDOS
2.1  Titular con fundido al entrar en pantalla
2.2  Contadores con línea roja
2.3  Formularios Contact Form 7
3. HOME
3.1  Hero — insignias ISO / GDP
3.2  Filas de servicio (Servicios y Grúas)
3.3  Tablas de flota
3.4  Cuadrícula de vehículos
4. SOBRE NOSOTROS
5. SERVICIOS
6. TRABAJA CON NOSOTROS
7. CONTACTO
8. RESPONSIVE Y ACCESIBILIDAD
8.1  Tablet y táctil (≤1024px / sin hover)
8.2  Tarjetas en táctil
8.3  Móvil (≤600px)
8.4  Movimiento reducido
========================================================================= */


/* =========================================================================
1. PLUGINS Y TERCEROS
========================================================================= */

.cmplz-cookiebanner .cmplz-buttons {
	flex-direction: row-reverse;
}

.grecaptcha-badge {
	visibility: hidden;
}


/* =========================================================================
2. COMPONENTES COMPARTIDOS
========================================================================= */

/*html{
	overflow-x: hidden;
}*/

.iso-white{
	filter: brightness(0) invert(1);
}
.full-width-img img{
	width: 100% !important;
}
.full-height-wpb .vc_column-inner>.wpb_wrapper, .full-height-wpb{
	height: 100%;
}

.slide-btn .w-btn-label>span::after{
	content: "→";
	margin-left: 0.5rem;
}

.slide-btn.red-arrow .w-btn-label>span::after{
	color: #fe2626;
}

.slide-btn .w-btn-label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	line-height: 1;
}

.slide-btn .w-btn-label .roll-in,
.slide-btn .w-btn-label .roll-out {
	display: block;
	transition: transform .38s cubic-bezier(.22,1,.36,1);
}

.slide-btn .w-btn-label .roll-out {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	transform: translateY(100%);
}

.slide-btn.w-btn:hover .w-btn-label .roll-in,
.slide-btn.w-btn:focus-visible .w-btn-label .roll-in { transform: translateY(-100%); }

.slide-btn.w-btn:hover .w-btn-label .roll-out,
.slide-btn.w-btn:focus-visible .w-btn-label .roll-out { transform: translateY(0); }

/* Cabeceras internas */
#secondary-header{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 60vh;
	background: linear-gradient(45deg, rgba(23, 23, 23, 1) 0%, rgba(23, 23, 23, 1) 40%, rgba(54, 54, 54, 1) 100%) !important;
}

/* Header */
header .main-wrapper .w-nav-title{
	padding: 5px 12px;
	border-radius: 6px;
}
header .menu-item-type-post_type.menu-item-object-us_page_block .link-text{
	padding: 8px 12px;
	transition: .3s ease !important;
}

header .menu-item-type-post_type.menu-item-object-us_page_block .link-text:hover{
	background-color: rgba(254, 38, 38, .06);
	color: #fe2626 !important;
}

header .main-wrapper .w-nav-title:hover{
	background-color: #171717;
	color: #fff;
}

header .w-nav.type_mobile>.w-nav-list.level_1{
	background: #ffffff !important;
}


/* Footer */
footer .main-row>.l-section-h.i-cf>.g-cols{
	display: grid;
	grid-template-columns: 35% 20% 20% 25%;
}
footer .main-row>.l-section-h.i-cf>.g-cols>.wpb_column{
	width: 100% !important;
}



@media (prefers-reduced-motion: reduce) {
	.slide-btn .w-btn-label .roll-in,
	.slide-btn .w-btn-label .roll-out { transition: none; }
}




/* -------------------------------------------------------------------------
2.1  Titular con fundido al entrar en pantalla
Usado en: Home (Quiénes somos) · Sobre nosotros (La empresa)
------------------------------------------------------------------------- */

/*.dsp-fadein {
color: #fcfcfa;
}

@supports (animation-timeline: view()) {
.dsp-fadein {
animation: dspFadeIn linear both;
animation-timeline: view();
animation-range: cover 10% cover 50%;
}
@keyframes dspFadeIn {
from { color: rgba(252, 252, 250, .28); }
to   { color: rgba(252, 252, 250, 1); }
}
}
*/

/* -------------------------------------------------------------------------
2.2  Contadores con línea roja
Usado en: Home (Por qué elegirnos) · Sobre nosotros (Cifras)
------------------------------------------------------------------------- */

#por-que .dsp-stat {
	border-left: 2px solid #fe2626;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

#por-que .dsp-stat .w-counter-value{
	font-weight: 700;
	font-size: clamp(3rem, 5vw, 4rem);
	line-height: 1.1;
	text-wrap-mode: nowrap;
}
#por-que .wpb_wrapper>.g-cols.wpb_row>.wpb_column>.vc_column-inner>.wpb_wrapper{
	height: 100%;
}
#por-que .dsp-stat.small-measure .w-counter-value>.w-counter-value-part.type_text{
	font-size: 1.5rem;
}
#por-que .dsp-stat .w-counter-title{
	font-size: 0.9rem;
	font-weight: 400;
	margin-top: auto;
}

/* -------------------------------------------------------------------------
2.3  Formularios Contact Form 7
Usado en: Contacto · Trabaja con nosotros
------------------------------------------------------------------------- */

.dsp-form .dsp-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}
.dsp-form .dsp-field {
	margin: 0 0 20px;
}

.dsp-form label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	color: #171717;
	margin-bottom: 8px;
}

.dsp-form input[type="text"],
.dsp-form input[type="email"],
.dsp-form input[type="tel"],
.dsp-form select,
.dsp-form textarea,
.dsp-form input[type="file"] {
	width: 100%;
	background: #fcfcfa;
	border: 1px solid #d2d2d2;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1;
	color: #171717;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dsp-form input:focus,
.dsp-form select:focus,
.dsp-form textarea:focus {
	outline: none;
	border-color: #fe2626;
}
.dsp-form ::placeholder {
	color: #8a8a8a;
	opacity: 1;
}
.dsp-form textarea {
	min-height: 140px;
	resize: vertical;
}
.dsp-form select {
	appearance: auto;
	cursor: pointer;
}
.dsp-form input[type="file"] {
	padding: 11px 16px;
	cursor: pointer;
}

/* CF7 envuelve cada campo en un span que rompe el ancho */
.dsp-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* casilla de consentimiento */
.dsp-form .dsp-acepto {
	font-size: .9rem;
	color: #4b4b4b;
}
.dsp-form .dsp-acepto .wpcf7-list-item {
	margin: 0;
}
.dsp-form .dsp-acepto a {
	color: #fe2626;
	text-decoration: underline;
}
.dsp-form .dsp-acepto input[type="checkbox"]{
	width: 16px;
	height: 16px;
	background-color: transparent;
	border: 1px solid #d2d2d2;
	border-radius: 2px;
	font-size: 12px;
}
/* botón de envío */
.dsp-form .dsp-submit {
	margin-top: 4px;
}
.dsp-form input[type="submit"] {
	background: #fe2626;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 15px 30px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease;
}
.dsp-form input[type="submit"]:hover {
	background: #171717;
}

/* estados de validación y respuesta */
.dsp-form .wpcf7-not-valid {
	border-color: #fe2626;
}
.dsp-form .wpcf7-not-valid-tip {
	color: #fe2626;
	font-size: .85rem;
	margin-top: 6px;
}
.dsp-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border-radius: 8px;
	border: 1px solid #d2d2d2;
	font-size: .95rem;
}
.dsp-form .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* limpieza de párrafos que mete wpautop */
.dsp-form p:empty {
	display: none;
	margin: 0;
}


/* =========================================================================
3. HOME
========================================================================= */

/* -------------------------------------------------------------------------
3.1  Hero — insignias ISO / GDP arriba a la derecha
------------------------------------------------------------------------- */

/* neutraliza el posicionamiento de la sección y la columna para que la
insignia se ancle a la sección completa */
#hero .l-section-h.i-cf,
#hero .vc_col-sm-4.wpb_column,
#hero .vc_col-sm-4.wpb_column > .vc_column-inner {
	position: static;
}
#hero .l-section-h.i-cf > .g-cols {
	align-items: flex-end;
}

.dsp-hero-badges {
	position: absolute;
	top: calc(var(--header-height) + 3rem);
	right: 3rem;
	z-index: 5;
	width: auto !important;
}


/* -------------------------------------------------------------------------
3.2  Filas de servicio (Servicios y Grúas)
Cuadrado rojo que se expande en la foto al hacer hover
------------------------------------------------------------------------- */

#servicios .service-title .w-text-value>span:first-child{
	color: #fe2626;
}

.dsp-srow {
	transition: border-color .45s ease;
	flex-wrap: nowrap !important;
}
.dsp-srow:hover {
	border-color: #fe2626 !important;
	background-color: #f0f0f0;
}
.dsp-srow:hover .dsp-body .wpb_wrapper>.w-hwrapper>.w-text{
	background-color: #fcfcfa !important;
}

.dsp-srow.dark:hover{
	background: rgba(255, 255, 255, .04);
}
.dsp-srow.dark:hover .dsp-body .wpb_wrapper>.w-hwrapper>.w-text{
	background-color: rgba(255,255,255,0.08)!important
}

/* la fila pasa a flex: media a la izquierda, cuerpo a la derecha */
.dsp-srow > div {
	display: flex !important;
	align-items: flex-start;
	gap: 0 !important;
}

/* columna de la imagen: 16px en reposo, 198px al hover */
.dsp-media {
	flex: 0 0 16px;
	width: 16px;
	max-width: none;
	transition: .55s cubic-bezier(.22, 1, .36, 1);
}
.dsp-srow:hover .dsp-media {
	flex-basis: 198px;
	width: 198px;
}

/* anula el padding interno de columna de Impreza y estira el wrapper */
.dsp-srow .dsp-media > .vc_column-inner {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.dsp-srow .dsp-media > .vc_column-inner > .wpb_wrapper {
	height: 100%;
	width: 100%;
}

/* columna de texto: ocupa el resto y se corre sola */
.dsp-body {
	flex: 1 1 auto;
	min-width: 0;
}
.dsp-body .wpb_wrapper>.w-hwrapper{
	row-gap: 0.75rem;
}
/* el cuadrado rojo que se convierte en la foto */
.dsp-reveal {
	position: relative;
	width: 17px;
	height: 20px;
	border-radius: 4px;
	background: #fe2626;
	overflow: hidden;
	transition: .55s cubic-bezier(.22, 1, .36, 1);
}
.dsp-srow:hover .dsp-reveal {
	height: 100%;
	width: 100%;
	border-radius: 8px;
}
.dsp-reveal img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
/* velo rojo que tapa la foto en reposo */
.dsp-reveal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fe2626;
	transition: opacity .28s ease-out;
}
.dsp-srow:hover .dsp-reveal::after {
	opacity: 0;
}

/* tabla de flota: colapsada hasta el hover */
.dsp-fleet-wrap {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .55s cubic-bezier(.22, 1, .36, 1),
		opacity .45s ease .08s,
		margin-top .55s cubic-bezier(.22, 1, .36, 1);
}
.dsp-srow:hover .dsp-fleet-wrap {
	max-height: 360px;
	opacity: 1;
	margin-top: 20px;
}


/* -------------------------------------------------------------------------
3.3  Tablas de flota
------------------------------------------------------------------------- */

table.dsp-fleet {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 0;
}
table.dsp-fleet th {
	text-align: left;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: #8a8a8a;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}
table.dsp-fleet td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	vertical-align: top;
}
table.dsp-fleet td:first-child {
	color: #fe2626;
	font-weight: 600;
	white-space: nowrap;
}

/* variante sobre el fondo oscuro de Grúas */
#gruas table.dsp-fleet th {
	color: rgba(255, 255, 255, .5);
	border-bottom-color: rgba(255, 255, 255, .2);
}
#gruas table.dsp-fleet td {
	border-bottom-color: rgba(255, 255, 255, .1);
}

#gruas>.l-section-h.i-cf>.g-cols>.wpb_column>.vc_column-inner>.wpb_wrapper{
	display: flex;
	flex-direction: column;
}

.with-red-square .fa-check:before, #secondary-header .info-wrapper.with-red-square .fa-check:before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	border-radius: 4px;
	background: #fe2626;
}


/* -------------------------------------------------------------------------
3.4  Cuadrícula de vehículos
------------------------------------------------------------------------- */

.dsp-tile {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: 12px;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px !important;
	isolation: isolate;
}

/* foto de fondo */
.dsp-tile-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	margin: 0 !important;
}
.dsp-tile-img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.dsp-tile:hover .dsp-tile-img img {
	transform: scale(1.06);
}

/* velo oscuro que se intensifica al hover */
.dsp-tile::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(23,23,23,.92) 0%, rgba(23,23,23,.55) 55%, rgba(23,23,23,.25) 100%);
	opacity: 0;
	transition: opacity .35s ease
}
.dsp-tile:hover::after {
	opacity: 1;
}

/* chip anclado abajo a la izquierda: solo se desvanece */
.dsp-tile-chip {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	margin: 0 !important;
	background: rgba(23, 23, 23, .85);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	padding: 9px 16px;
	border-radius: 8px;
	transition: opacity .3s ease;
}
.dsp-tile:hover .dsp-tile-chip {
	opacity: 0;
	pointer-events: none;
}

/* título, descripción y botón: ocultos en reposo */
.dsp-tile-title,
.dsp-tile-desc,
.dsp-tile-btn {
	position: relative;
	z-index: 2;
	color: #fff;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(12px);
	transition: opacity .4s ease,
		transform .5s cubic-bezier(.22, 1, .36, 1),
		max-height .5s cubic-bezier(.22, 1, .36, 1),
		margin .5s ease;
}
.dsp-tile:hover .dsp-tile-title,
.dsp-tile:hover .dsp-tile-desc,
.dsp-tile:hover .dsp-tile-btn {
	opacity: 1;
	transform: none;
	overflow: visible;
}
.dsp-tile:hover .dsp-tile-title { max-height: 4em; margin-bottom: 8px; }
.dsp-tile:hover .dsp-tile-desc  { max-height: 8em; margin-bottom: 18px; }
.dsp-tile:hover .dsp-tile-btn   { max-height: 4em; }

.dsp-tile-title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}
.dsp-tile-desc {
	font-size: .95rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .85);
}
.dsp-tile-btn {
	align-self: flex-start;
}
.dsp-tile-btn .w-btn {
	background: #fff !important;
	color: #171717 !important;
}
.dsp-tile-btn .w-btn:hover {
	background: #fe2626 !important;
	color: #fff !important;
}
#transportes .transports-inner-row{
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 1.5rem;
	margin: 0;
}
#transportes .transports-inner-row .wpb_column{
	width: 100% !important;
}
#transportes .transports-inner-row .wpb_column>.vc_column-inner{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#testimonios .ti-widget.ti-goog .ti-inner{
	background-color: rgba(255, 255, 255, .05) !important;
	color: #ffffffe0 !important;
}

#testimonios .ti-widget.ti-goog .ti-name{
	color: #ffffffe0 !important;
}

/* =========================================================================
4. QUIÉNES SOMOS
========================================================================= */

/* tarjetas de área (Transporte convencional / especial / Grúas) */
.dsp-area {
	height: 100%;
	background: #fcfcfa;
	border: 1px solid #d2d2d2;
	border-radius: 12px;
	padding: 32px !important;
	transition: border-color .35s ease, transform .35s ease;
}
.dsp-area:hover {
	border-color: #fe2626;
	transform: translateY(-4px);
}
.dsp-area-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* tarjetas de certificación */
.dsp-cert {
	height: 100%;
	border: 1px solid #d2d2d2;
	border-radius: 12px;
	min-height: 14rem;
	padding: 28px !important;
}

#objetivos .objectives-cards .w-iconbox-title{
	color: #171717;
}

#cta #cta-reusable{
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* =========================================================================
5. SERVICIOS
Fichas del CPT `servicio`: nacional e internacional, frigorífico,
urgentes · furgonetas, plataformas y góndolas, camión grúa,
grúas autopropulsadas.
========================================================================= */

#flota .vehicles-grid .especificaciones .repeater-row {
	display: flex;
	border-bottom: 1px solid gray;
	padding: .6rem .8rem .6rem;
}


#flota .vehicles-grid .especificaciones .repeater-row>.repeater-field.etiqueta{
	flex: 0 0 42%;
	font-size: .8rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 700;
	color: #4b4b4b;
}

#flota .vehicles-grid .especificaciones .repeater-row>.repeater-field.valor{
	flex: 0.9;
	text-align: right;
	font-size: .95rem;
	color: #4b4b4b;
}
.other-services-grid{
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0 1.5rem;
}
.other-services-grid .wpb_column{
	width: 100%;
}
.other-services-grid .wpb_column>.vc_column-inner{
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.other-services-grid .wpb_column>.vc_column-inner>.wpb_wrapper{
	height: 100%;
}
.other-services-grid .dsp-area>p.w-text{
	margin-bottom: auto !important;
}

.other-services-grid .dsp-area>.w-btn-wrapper{
	margin-top: 1rem;
}

/* =========================================================================
6. TRABAJA CON NOSOTROS
Los estilos del formulario están en 2.3 (compartidos con Contacto).
========================================================================= */




/* =========================================================================
7. CONTACTO
Los estilos del formulario están en 2.3 (compartidos con Trabaja con
nosotros).
========================================================================= */




/* =========================================================================
8. RESPONSIVE Y ACCESIBILIDAD
========================================================================= */

/* -------------------------------------------------------------------------
8.1  Tablet y táctil — filas de servicio apiladas y siempre visibles
------------------------------------------------------------------------- */

@media (max-width: 1024px)/*, (hover: none)*/ {
	.dsp-srow{
		flex-wrap: wrap !important;
	}
	.dsp-srow > div {
		display: block !important;
	}
	.dsp-media {
		width: 100% !important;
		flex: none;
	}
	.dsp-body {
		padding-left: 0;
	}

	.dsp-reveal {
		height: auto;
		width: 100%;
		aspect-ratio: 16/9;
		border-radius: 8px;
		margin-bottom: 18px;
	}
	.dsp-reveal::after {
		opacity: 0;
	}
	.dsp-fleet-wrap {
		max-height: none;
		opacity: 1;
		overflow: visible;
		margin-top: 18px;
	}
	#por-que>.l-section-h.i-cf>.g-cols{
		flex-direction: column-reverse;
		gap: 2rem;
	}
	#por-que>.l-section-h.i-cf>.g-cols>.wpb_column{
		width: 100% !important;
	}
	footer .main-row>.l-section-h.i-cf>.g-cols{
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}


/* -------------------------------------------------------------------------
8.2  Tarjetas en táctil — se quedan en reposo, sin zoom ni velo extra
------------------------------------------------------------------------- */

@media (hover: none) {
	/*.dsp-tile:hover .dsp-tile-chip {
	opacity: 1;
}
	.dsp-tile:hover .dsp-tile-title,
	.dsp-tile:hover .dsp-tile-desc,
	.dsp-tile:hover .dsp-tile-btn {
	opacity: 0;
	max-height: 0;
}
	.dsp-tile-img img {
	transform: none !important;
}*/
}


/* -------------------------------------------------------------------------
8.3  Móvil
------------------------------------------------------------------------- */

@media (max-width: 600px) {
	header .l-subheader.at_middle{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	/* hero */
	.dsp-hero-badges {
		position: relative;
		top: unset !important;
		right: unset !important;
		left: unset !important;
		justify-content: flex-start !important;
		margin: 1rem 0 2rem;
	}
	.dsp-hero-badges img {
		width: 75px !important;
		height: 75px !important;
	}

	.dsp-body>.vc_column-inner{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#gruas>.l-section-h.i-cf>.g-cols>.wpb_column>.vc_column-inner>.wpb_wrapper{
		display: block;
	}

	#transportes .transports-inner-row{
		display: flex !important;
		flex-direction: column;
	}
	#transportes .transports-inner-row .wpb_column{
		margin: 0 !important;
	}
	#transportes .dsp-tile{
		aspect-ratio: unset;
		min-height: 15rem;
	}
	/* contadores */
	.dsp-stat {
		padding-left: 14px;
	}

	/* formularios */
	.dsp-form .dsp-row {
		grid-template-columns: 1fr;
	}
	footer .main-row>.l-section-h.i-cf>.g-cols{
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	table.dsp-fleet thead { display: none; }

	table.dsp-fleet,
	table.dsp-fleet tbody,
	table.dsp-fleet tr,
	table.dsp-fleet td { display: block; width: 100%; }

	table.dsp-fleet tr {
		padding: 14px 0;
		border-bottom: 1px solid rgba(0,0,0,.08);
	}
	table.dsp-fleet td { border: 0; padding: 3px 0; }

	/* el nombre de la columna, delante del valor */
	table.dsp-fleet td::before {
		content: "-";
		display: inline-block;
		margin-right: 0.3rem;
		font-size: .7rem;
		letter-spacing: .07em;
		text-transform: uppercase;
		font-weight: 700;
		color: #8a8a8a;
	}

	/* la capacidad, destacada como título de la tarjeta */
	table.dsp-fleet td:first-child {
		font-size: 1.1rem;
		margin-bottom: 6px;
	}
	table.dsp-fleet td:first-child::before { display: none; }

	#gruas table.dsp-fleet tr { border-bottom-color: rgba(255,255,255,.12); }
	#gruas table.dsp-fleet td::before { color: rgba(255,255,255,.5); }
}

/* -------------------------------------------------------------------------
8.4  Movimiento reducido
------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.dsp-media,
	.dsp-reveal,
	.dsp-reveal::after,
	.dsp-fleet-wrap,
	.dsp-tile::after,
	.dsp-tile-img img,
	.dsp-tile-chip,
	.dsp-tile-title,
	.dsp-tile-desc,
	.dsp-tile-btn,
	.dsp-area {
		transition: none;
	}
	.dsp-fadein {
		animation: none;
		color: #fcfcfa;
	}
}