/*
Theme Name: Deutsche Cars
Theme URI: https://www.deutschecars.com/
Author: KM A Disseny
Description: Tema a medida para Deutsche Cars. Expositor de vehículos con modalidades de compra directa, reserva y subasta. Estética cuadrada, sin esquinas redondeadas.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: deutschecars
*/


/* ==========================================================================
   0. Tipografía de titulares
   Russo One (SIL Open Font License), alojada en el tema para no depender
   de un servicio externo. La licencia va junto al archivo.
   ========================================================================== */

@font-face {
	font-family: "Russo One";
	src: url("assets/fuentes/russo-one.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Rubik variable: un solo archivo cubre de 300 a 900. */
@font-face {
	font-family: "Rubik";
	src: url("assets/fuentes/rubik.woff2") format("woff2-variations"),
	     url("assets/fuentes/rubik.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1. Fundamentos
   ========================================================================== */

/* Los colores están muestreados directamente de los mockups aprobados. */
:root {
	--dc-acento:        #e6101a; /* rojo del logotipo */
	--dc-acento-oscuro: #b90d15;
	--dc-acento-tenue:  #fdecec;

	--dc-negro:    #15191b; /* barra de navegación */
	--dc-negro-alt:#1f2226;
	--dc-hero:     #060709; /* fondo del hero */
	--dc-panel:    #131618; /* tarjetas oscuras */
	--dc-prefooter:#0f1011;
	--dc-carbon:   #232527;
	--dc-gris:     #6f757b;
	--dc-tenue:    #9aa0a6;

	--dc-papel:    #ffffff;
	--dc-caja:     #f3f4f5; /* franja de destacados */
	--dc-caja-alt: #f8f8f8; /* franja de marcas */
	--dc-linea:    #e2e2e5;
	--dc-linea-osc:rgba(255, 255, 255, .12);

	--dc-directa: #16171a;
	--dc-reserva: #9a5b00;
	--dc-subasta: #e6101a;

	--dc-contenedor: 1240px;
	--dc-gutter:     clamp(16px, 4vw, 34px);
	--dc-ritmo:      clamp(44px, 5.5vw, 78px);

	--dc-display: "Russo One", "Rubik", Arial, sans-serif;
	--dc-titulo:  "Rubik", "Helvetica Neue", Arial, sans-serif;
	--dc-texto:   "Rubik", "Helvetica Neue", Arial, sans-serif;
	--dc-mono:    ui-monospace, Consolas, monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	/* Decisión de diseño: nada redondeado en todo el sitio. */
	border-radius: 0;
}

body {
	margin: 0;
	background: var(--dc-papel);
	color: var(--dc-gris);
	font-family: var(--dc-texto);
	font-size: 14.5px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dc-acento); }

h1, h2, h3, h4 {
	margin: 0 0 .45em;
	font-family: var(--dc-display);
	font-weight: 400;
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--dc-negro);
}

h1 { font-size: clamp(27px, 3.9vw, 44px); }
h2 { font-size: clamp(22px, 2.8vw, 34px); }
h3 { font-size: clamp(16px, 1.6vw, 19px); }

p { margin: 0 0 1em; }

.dc-icono { display: block; flex: 0 0 auto; }

/* ==========================================================================
   2. Contenedor y franjas
   ========================================================================== */

.dc-limite {
	width: 100%;
	max-width: var(--dc-contenedor);
	margin-inline: auto;
	padding-inline: var(--dc-gutter);
}

.dc-seccion { padding-block: var(--dc-ritmo); }

.dc-franja { width: 100%; background-size: cover; background-position: center; }
.dc-franja--caja { background-color: var(--dc-caja); }
.dc-franja--negra { background-color: var(--dc-negro); color: #fff; }


.dc-titulo-seccion {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.dc-titulo-seccion h1,
.dc-titulo-seccion h2 { margin: 0; }

/* Enlace con flecha, el remate de sección del diseño. */
.dc-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--dc-negro);
	font-family: var(--dc-titulo);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dc-negro);
}

.dc-enlace-flecha:hover { color: var(--dc-acento); border-bottom-color: var(--dc-acento); }

.dc-conteo {
	font-family: var(--dc-titulo);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dc-tenue);
}

/* Número de marca de agua al fondo de la sección. */
.dc-seccion--numerada { position: relative; overflow: hidden; }
.dc-seccion--numerada .dc-titulo-seccion { padding-top: 26px; }

.dc-numero-fantasma {
	position: absolute;
	top: var(--dc-ritmo);
	left: var(--dc-gutter);
	z-index: 0;
	/* Se centra sobre el titular para que quede detrás, no encima de un hueco. */
	transform: translateY(-46%);
	font-family: var(--dc-display);
	font-size: clamp(130px, 17vw, 260px);
	font-weight: 400;
	line-height: .72;
	letter-spacing: -.03em;
	color: rgba(21, 25, 27, .055);
	pointer-events: none;
	user-select: none;
}

.dc-seccion--numerada > *:not(.dc-numero-fantasma) { position: relative; z-index: 1; }

/* ==========================================================================
   3. Cabecera
   ========================================================================== */

.dc-cabecera { position: relative; z-index: 50; }

/* Piso superior: marca, datos y llamada a la acción. */
.dc-cabecera__superior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	padding-block: 12px;
}

.custom-logo-link,
.dc-marca { flex: 0 0 auto; display: flex; align-items: center; }
/* El logotipo es un ovalo apaisado: con 56 px de alto se quedaba diminuto. */
.custom-logo { max-height: 62px; width: auto; object-fit: contain; }

/* En el pie, sobre fondo oscuro, el ovalo negro se fundiria con el fondo. */
.dc-pie__marca .custom-logo-link { display: inline-block; padding: 8px 12px; background: #fff; }
.dc-pie__marca .custom-logo { max-height: 54px; }

/* Logotipo vectorial del tema. */
.dc-marca--svg img { display: block; width: auto; height: 46px; }
.dc-marca--svg .dc-logo-iso { display: none; height: 42px; }
.dc-pie__marca .dc-marca--svg { margin-bottom: 18px; }
.dc-pie__marca .dc-marca--svg img { height: 54px; }

/* En pantallas estrechas manda el isotipo, que ocupa un tercio. */
@media (max-width: 620px) {
	.dc-cabecera__superior .dc-logo-completo { display: none; }
	.dc-cabecera__superior .dc-logo-iso { display: block; height: 38px; }
}

.dc-marca {
	font-family: var(--dc-display);
	font-size: 27px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--dc-negro);
}

.dc-datos-cabecera {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-left: auto;
}

.dc-dato {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--dc-tenue);
	line-height: 1.3;
}

.dc-dato .dc-icono { color: var(--dc-acento); }

.dc-dato b {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 15px;
	font-weight: 700;
	color: var(--dc-negro);
	letter-spacing: .01em;
}

/* Piso inferior: barra negra de navegación. */
.dc-barra-nav { background: var(--dc-negro); }

.dc-barra-nav__fila {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
}

.dc-nav { flex: 1 1 auto; min-width: 0; display: flex; }

.dc-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-nav > ul > li { position: relative; display: flex; }

.dc-nav > ul > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 15px 14px;
	font-family: var(--dc-titulo);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .045em;
	white-space: nowrap;
	color: #d8d9db;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}

.dc-nav > ul > li > a:hover,
.dc-nav > ul > li:focus-within > a { color: #fff; }

.dc-nav > ul > li.current-menu-item > a,
.dc-nav > ul > li.current-menu-ancestor > a {
	color: #fff;
	border-bottom-color: var(--dc-acento);
}

/* Angulo pequeno en los apartados con submenu. */
.dc-nav .menu-item-has-children > a::after {
	content: "";
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg);
	opacity: .5;
}

/* Submenu. Va en la tipografia de texto y no en la display: un desplegable
   con titulares cuadrados en versalitas pesa mucho y se lee peor. El texto
   arranca justo debajo del del apartado padre. */
.dc-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 250px;
	white-space: nowrap;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--dc-negro);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 10px 24px rgba(6, 7, 9, .4);
}

.dc-nav li:hover > .sub-menu,
.dc-nav li:focus-within > .sub-menu { display: block; }

.dc-nav .sub-menu a {
	display: block;
	padding: 10px 16px 10px 14px;
	font-family: var(--dc-texto);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #b9bec3;
	transition: color .15s, background .15s;
}

.dc-nav .sub-menu a:hover,
.dc-nav .sub-menu a:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); }
.dc-nav .sub-menu .current-menu-item > a { color: #fff; }

.dc-buscador {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 16px;
	border-left: 1px solid var(--dc-linea-osc);
}

.dc-buscador input {
	width: 0;
	padding: 0;
	border: none;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 14px;
	opacity: 0;
	transition: width .25s, opacity .2s, padding .25s;
}

.dc-buscador.esta-abierto input {
	width: clamp(120px, 18vw, 200px);
	padding: 6px 8px;
	border-bottom: 1px solid var(--dc-linea-osc);
	opacity: 1;
}

.dc-buscador button {
	appearance: none;
	display: flex;
	align-items: center;
	padding: 8px;
	background: none;
	border: none;
	color: #d8d9db;
	cursor: pointer;
}

.dc-buscador button:hover { color: var(--dc-acento); }

.dc-menu-toggle {
	display: none;
	appearance: none;
	align-items: center;
	gap: 9px;
	align-self: center;
	padding: 9px 14px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--dc-linea-osc);
	font-family: var(--dc-titulo);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #fff;
	cursor: pointer;
}

.dc-menu-toggle__cerrar { display: none; }
.dc-menu-toggle.esta-abierto .dc-menu-toggle__abrir { display: none; }
.dc-menu-toggle.esta-abierto .dc-menu-toggle__cerrar { display: block; }

.dc-menu-toggle.esta-abierto { background: var(--dc-acento); border-color: var(--dc-acento); }

/* Palanca de los submenus en movil: se inyecta desde el script. */
.dc-sub-toggle { display: none; }

/* Acciones rapidas: solo aparecen en movil, junto al logotipo. */
.dc-acciones-movil { display: none; }

/* Panel de busqueda de movil: se despliega bajo la cabecera. */
.dc-buscador-movil { display: none; }

@media (max-width: 1150px) {

	/* Una sola linea: logotipo a un lado, llamar y menu al otro. El resto de
	   datos de la cabecera se recogen dentro del panel. */
	.dc-cabecera__superior {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.dc-datos-cabecera { display: none; }

	.dc-acciones-movil {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		flex: 0 0 auto;
	}

	.dc-accion-movil {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid var(--dc-linea);
		color: var(--dc-negro);
	}

	.dc-accion-movil:hover { background: var(--dc-acento); border-color: var(--dc-acento); color: #fff; }

	.dc-menu-toggle {
		display: flex;
		height: 42px;
		padding: 0 14px;
		background: var(--dc-negro);
		border-color: var(--dc-negro);
	}

	.dc-buscar-toggle.esta-abierto { background: var(--dc-negro); border-color: var(--dc-negro); color: #fff; }

	.dc-buscador-movil {
		display: flex;
		align-items: center;
		background: var(--dc-negro);
	}

	.dc-buscador-movil[hidden] { display: none; }

	.dc-buscador-movil input {
		flex: 1 1 auto;
		min-width: 0;
		padding: 14px var(--dc-gutter);
		background: none;
		border: 0;
		font: inherit;
		font-size: 15px;
		color: #fff;
	}

	.dc-buscador-movil input::placeholder { color: #8b9096; }
	.dc-buscador-movil input:focus { outline: none; }

	.dc-buscador-movil button {
		display: flex;
		align-items: center;
		padding: 14px var(--dc-gutter);
		background: none;
		border: 0;
		color: #d8d9db;
		cursor: pointer;
	}

	/* Dentro del panel del menu ya no hace falta: esta arriba, en la lupa. */
	.dc-barra-nav .dc-buscador { display: none; }

	/* La barra negra solo existe cuando el menu esta desplegado. */
	.dc-barra-nav { display: none; }
	.dc-barra-nav.esta-abierto { display: block; }
	.dc-barra-nav__fila { flex-wrap: wrap; min-height: 0; }

	/* El panel ocupa todo el ancho bajo la barra y se desplaza solo si hace
	   falta. Antes los apartados se ajustaban a su texto y cada filete medía
	   un ancho distinto. */
	.dc-nav {
		display: none;
		flex-basis: 100%;
		max-height: calc(100vh - 190px);
		overflow-y: auto;
		margin: 0 calc(var(--dc-gutter) * -1);
		padding: 4px 0 8px;
		background: var(--dc-negro);
	}

	.dc-nav.esta-abierto { display: block; }

	.dc-nav > ul { display: block; }

	.dc-nav > ul > li,
	.dc-nav .sub-menu li {
		position: relative;
		display: block;
		width: 100%;
	}

	.dc-nav > ul > li > a {
		display: block;
		padding: 15px var(--dc-gutter);
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
		font-size: 14px;
		white-space: normal;
	}

	.dc-nav > ul > li.current-menu-item > a,
	.dc-nav > ul > li.current-menu-ancestor > a {
		box-shadow: inset 3px 0 0 var(--dc-acento);
		color: #fff;
	}

	/* El angulo del escritorio sobra: en movil manda la palanca. */
	.dc-nav .menu-item-has-children > a::after { display: none; }

	.dc-sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 52px;
		padding: 0;
		background: none;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, .07);
		color: #d8d9db;
		cursor: pointer;
	}

	.dc-sub-toggle span {
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 1.6px solid currentColor;
		border-bottom: 1.6px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s;
	}

	.dc-sub-abierto > .dc-sub-toggle span { transform: rotate(-135deg); margin-top: 2px; }
	.dc-sub-abierto > .dc-sub-toggle { color: var(--dc-acento); }

	/* El submenu entra en el flujo, sangrado y sobre fondo algo mas claro. */
	.dc-nav .sub-menu {
		display: none;
		position: static;
		min-width: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: rgba(255, 255, 255, .05);
		box-shadow: none;
		white-space: normal;
	}

	/* En movil manda la palanca, no el raton. El selector lleva `:hover`
	   a proposito: sin el, la regla de escritorio gana por especificidad y
	   el submenu se cerraba justo al tocarlo. */
	.dc-nav li:hover > .sub-menu,
	.dc-nav li:focus-within > .sub-menu { display: none; }

	.dc-nav li.dc-sub-abierto > .sub-menu,
	.dc-nav li.dc-sub-abierto:hover > .sub-menu,
	.dc-nav li.dc-sub-abierto:focus-within > .sub-menu { display: block; }

	.dc-nav .sub-menu a {
		padding: 13px var(--dc-gutter) 13px calc(var(--dc-gutter) + 16px);
		border-bottom: 1px solid rgba(255, 255, 255, .06);
	}

	.dc-nav .sub-menu li:last-child a { border-bottom: 0; }

	/* El buscador deja de ser una lupa que se despliega y pasa a ser un campo
	   normal al pie del panel, que es donde se espera en un movil. */
	.dc-buscador {
		flex-basis: 100%;
		gap: 0;
		margin: 0 calc(var(--dc-gutter) * -1);
		padding: 0;
		border-left: 0;
		border-top: 1px solid var(--dc-linea-osc);
	}

	.dc-buscador input,
	.dc-buscador.esta-abierto input {
		width: 100%;
		padding: 14px var(--dc-gutter);
		border: 0;
		opacity: 1;
	}

	.dc-buscador button { padding: 14px var(--dc-gutter); }

	.dc-datos-cabecera { gap: 16px; }

	/* Con el menu abierto, el fondo no se desplaza detras del panel. */
	body.dc-menu-abierto { overflow: hidden; }
}

@media (max-width: 620px) {
	.dc-cabecera__superior { padding-block: 10px; }
	.dc-datos-cabecera .dc-dato { display: none; }
	.dc-datos-cabecera .dc-dato:first-child { display: flex; }
}

/* ==========================================================================
   4. Botones
   ========================================================================== */

.dc-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 26px;
	background: var(--dc-acento);
	border: 2px solid var(--dc-acento);
	color: #fff;
	font-family: var(--dc-titulo);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.dc-boton .dc-icono { transition: transform .18s; }
.dc-boton:hover .dc-icono { transform: translateX(4px); }

.dc-boton:hover { background: var(--dc-acento-oscuro); border-color: var(--dc-acento-oscuro); color: #fff; }
.dc-boton:focus-visible { outline: 2px solid var(--dc-negro); outline-offset: 2px; }

.dc-boton--fantasma { background: transparent; border-color: var(--dc-negro); color: var(--dc-negro); }
.dc-boton--fantasma:hover { background: var(--dc-negro); border-color: var(--dc-negro); color: #fff; }

.dc-boton--claro { background: #fff; border-color: #fff; color: var(--dc-negro); }
.dc-boton--claro:hover { background: var(--dc-acento); border-color: var(--dc-acento); color: #fff; }

.dc-boton--subasta { background: var(--dc-subasta); border-color: var(--dc-subasta); }
.dc-boton--subasta:hover { background: var(--dc-acento-oscuro); border-color: var(--dc-acento-oscuro); }

.dc-boton--bloque { width: 100%; }
.dc-boton--pequeno { padding: 10px 15px; font-size: 12px; letter-spacing: .05em; white-space: nowrap; }

/* ==========================================================================
   5. Portada: franja principal
   ========================================================================== */

.dc-hero {
	position: relative;
	background-color: var(--dc-hero);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

/* Velo degradado: opaco a la izquierda, para que el texto siempre se lea. */
.dc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, #060709 0%, rgba(6, 7, 9, .94) 26%, rgba(6, 7, 9, .62) 52%, rgba(6, 7, 9, .18) 100%),
		linear-gradient(0deg, rgba(6, 7, 9, .55) 0%, rgba(6, 7, 9, 0) 45%);
}

.dc-hero__fila {
	position: relative;
	z-index: 1;
	display: block;
	/* Franja mas baja a proposito: el cliente quiere que los coches se vean
	   sin tener que bajar. Antes sumaba 520 px de alto en un portatil. */
	padding-block: clamp(34px, 4.4vw, 60px);
}

.dc-hero__texto { max-width: 560px; }

.dc-hero h1 {
	margin: 0 0 12px;
	font-size: clamp(27px, 3.9vw, 44px);
	line-height: 1.04;
	letter-spacing: -.015em;
	color: #fff;
}

.dc-hero h1 span { display: block; }


.dc-hero__texto p {
	margin-bottom: 26px;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .8);
	max-width: 46ch;
}


@media (max-width: 900px) {
	.dc-hero::before { background: rgba(6, 7, 9, .86); }
}

/* ==========================================================================
   6. Franja de garantías
   ========================================================================== */

.dc-ventajas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-block: 26px;
}

.dc-ventaja {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 22px;
	border-left: 1px solid var(--dc-linea);
}

.dc-ventaja:first-child { border-left: none; padding-left: 0; }

.dc-ventaja .dc-icono { color: var(--dc-acento); }

.dc-ventaja strong {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 15px;
	font-weight: 700;
	color: var(--dc-negro);
	letter-spacing: .01em;
}

.dc-ventaja span { font-size: 13px; color: var(--dc-tenue); }

@media (max-width: 780px) {
	.dc-ventaja { border-left: none; padding-left: 0; }
}

/* ==========================================================================
   7. Tarjeta de vehículo
   ========================================================================== */

/* Tres por fila en escritorio, fijo. Con `auto-fill` la cuenta cambiaba con
   el ancho de la ventana y en portatiles salian dos. */
.dc-rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 980px) {
	.dc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.dc-rejilla { grid-template-columns: 1fr; }
}

.dc-tarjeta {
	display: flex;
	flex-direction: column;
	background: var(--dc-papel);
	border: 1px solid var(--dc-linea);
	transition: border-color .18s, box-shadow .18s, transform .18s;
}

.dc-tarjeta:hover {
	border-color: var(--dc-acento);
	box-shadow: 0 6px 22px rgba(22, 23, 26, .1);
	transform: translateY(-2px);
}

.dc-tarjeta__medio {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	overflow: hidden;
	background: var(--dc-caja);
}

.dc-tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.dc-tarjeta:hover .dc-tarjeta__medio img { transform: scale(1.06); }

.dc-tarjeta__cinta {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.dc-modalidad {
	display: inline-block;
	padding: 6px 12px;
	background: var(--dc-directa);
	color: #fff;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.dc-modalidad--reserva { background: var(--dc-reserva); }
.dc-modalidad--subasta { background: var(--dc-subasta); }

.dc-vendido {
	display: inline-block;
	padding: 6px 12px;
	background: var(--dc-negro);
	color: #fff;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
}

/* Etiqueta de precio anclada a la foto, con filo naranja arriba. */
.dc-tarjeta__precio {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 9px 15px;
	background: #16181b;
	color: #fff;
	font-family: var(--dc-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .01em;
}

.dc-tarjeta__precio small {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--dc-acento);
}

.dc-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 16px 16px;
}

.dc-tarjeta__marca {
	margin: 0 0 4px;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--dc-acento);
}

.dc-tarjeta__acabado {
	margin: -2px 0 12px;
	font-size: 14px;
	color: var(--dc-tenue);
}

/* Excepción: el nombre del coche lo pone el fabricante —«sDrive18i», «xDrive»,
   «S-tronic»— y en versalitas se pierde esa grafía. */
.dc-tarjeta__titulo {
	margin: 0 0 12px;
	font-family: var(--dc-titulo);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dc-negro);
}

.dc-tarjeta__titulo a:hover { color: var(--dc-acento); }

/* Equipamiento: cuatro apoyos en fila, más discretos que la ficha. */
.dc-equipo {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 14px;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px solid var(--dc-linea);
}

/* Cada apoyo ocupa lo que necesita: repartir en columnas iguales cortaba
   las etiquetas largas como «Llantas aleación». */
.dc-equipo li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10.5px;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--dc-tenue);
}

.dc-equipo .dc-icono { color: var(--dc-tenue); flex: 0 0 auto; }

/* Fila de datos con icono: rótulo arriba, valor debajo. */
.dc-datos-icono {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 12px;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px solid var(--dc-linea);
}

.dc-datos-icono li {
	min-width: 0;
	padding-right: 6px;
}

.dc-datos-icono li + li {
	padding-left: 7px;
	border-left: 1px solid var(--dc-linea);
}

.dc-datos-icono__rotulo {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 2px;
	font-family: var(--dc-titulo);
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dc-tenue);
}

.dc-datos-icono__rotulo .dc-icono { color: var(--dc-tenue); flex: 0 0 auto; }

.dc-datos-icono__valor {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--dc-negro);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 380px) {
	.dc-datos-icono { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
	.dc-datos-icono li:nth-child(odd) { padding-left: 0; border-left: none; }
}

.dc-tarjeta__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--dc-linea);
}

.dc-tarjeta__pie .dc-boton { flex: 0 0 auto; }

.dc-cuenta-atras {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dc-titulo);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	color: var(--dc-subasta);
	text-transform: uppercase;
}

.dc-cuenta-atras--neutra { color: var(--dc-tenue); }

/* ==========================================================================
   8. Filtros
   ========================================================================== */

.dc-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 28px;
	padding: 18px 20px;
	background: var(--dc-caja);
	border-top: 3px solid var(--dc-acento);
}

.dc-campo { display: flex; flex-direction: column; gap: 6px; min-width: 148px; flex: 1 1 148px; }

.dc-campo label {
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dc-negro);
}

.dc-campo select,
.dc-campo input {
	appearance: none;
	width: 100%;
	padding: 11px 12px;
	background: #fff;
	border: 1px solid var(--dc-linea);
	font: inherit;
	font-size: 14px;
	color: var(--dc-negro);
}

.dc-campo select:focus,
.dc-campo input:focus { outline: 2px solid var(--dc-acento); outline-offset: -1px; }

/* ==========================================================================
   9. Ficha del vehículo
   ========================================================================== */

.dc-ficha {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr);
	gap: 34px;
	align-items: start;
}

@media (max-width: 960px) { .dc-ficha { grid-template-columns: 1fr; gap: 26px; } }

.dc-ficha__galeria img { width: 100%; border: 1px solid var(--dc-linea); }

.dc-ficha__miniaturas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	gap: 6px;
	margin-top: 6px;
}

.dc-ficha__miniaturas img { aspect-ratio: 4 / 3; object-fit: cover; cursor: pointer; }
.dc-ficha__miniaturas img:hover { border-color: var(--dc-acento); }

.dc-panel-venta { position: sticky; top: 16px; }

.dc-caja { background: var(--dc-papel); border: 1px solid var(--dc-linea); }

.dc-caja__titulo {
	margin: 0;
	padding: 14px 18px;
	background: var(--dc-negro);
	color: #fff;
	font-family: var(--dc-titulo);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.dc-caja__titulo em { font-style: normal; color: inherit; }

.dc-caja__cuerpo { padding: 18px; }

.dc-precio {
	display: block;
	font-family: var(--dc-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--dc-negro);
}

.dc-precio__nota {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--dc-acento);
}

.dc-reloj { display: flex; gap: 5px; margin: 12px 0 18px; }

.dc-reloj > span {
	flex: 1;
	padding: 9px 4px;
	background: var(--dc-negro);
	color: #fff;
	text-align: center;
	font-family: var(--dc-mono);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.1;
}

.dc-reloj > span small {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dc-tenue);
}

.dc-especificaciones { width: 100%; border-collapse: collapse; font-size: 14px; }

.dc-especificaciones th,
.dc-especificaciones td { padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--dc-linea); }
.dc-especificaciones tr:last-child th,
.dc-especificaciones tr:last-child td { border-bottom: none; }
.dc-especificaciones th { width: 44%; font-weight: 400; color: var(--dc-gris); }
.dc-especificaciones td { font-weight: 700; color: var(--dc-negro); }

.dc-adjunto {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	margin-bottom: 12px;
	background: var(--dc-caja);
	border-left: 3px solid var(--dc-acento);
	font-size: 14px;
	font-weight: 700;
	color: var(--dc-negro);
}

.dc-adjunto small { display: block; font-weight: 400; color: var(--dc-tenue); }

/* ==========================================================================
   10. Banner y cartel
   ========================================================================== */

.dc-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 240px;
	padding-block: 46px;
	background-color: var(--dc-negro);
	color: #fff;
}

.dc-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 19, 22, .94) 0%, rgba(18, 19, 22, .45) 100%);
}

.dc-banner--sin-imagen::after { background: none; }
.dc-banner__contenido { position: relative; z-index: 1; }
.dc-banner__contenido > * { max-width: 560px; }
.dc-banner h2 { color: #fff; }
.dc-banner p { color: rgba(255, 255, 255, .82); margin-bottom: 22px; }

/* Prefooter: la imagen ocupa la franja y una lámina oscura con el borde
   inclinado se superpone por la izquierda, dejando el texto sobre negro. */
/* El cartel del viaje: la foto a la izquierda y el recuadro oscuro pegado a
   ella, a la derecha. Como banda a todo el ancho no se leia como una oferta
   concreta, y con la foto de fondo del propio recuadro quedaba en negro liso
   —la imagen caia por detras del color de fondo de su contenedor—. */
.dc-prefooter {
	background-color: var(--dc-caja);
	padding-block: 52px;
}

.dc-prefooter__fila {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
	align-items: stretch;
	gap: 0;
}

.dc-prefooter__foto {
	display: block;
	min-height: 300px;
	background-size: cover;
	background-position: center;
}

.dc-prefooter__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 34px 36px;
	background: var(--dc-prefooter);
	color: #fff;
	max-width: none;
}

/* Sin foto, el recuadro se queda solo y no necesita la columna vacia. */
.dc-prefooter--sin-imagen .dc-prefooter__fila { grid-template-columns: minmax(0, 1fr); }

.dc-prefooter h2 {
	margin: 0 0 12px;
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.16;
	color: #fff;
}

.dc-prefooter h2 span { display: block; }

.dc-prefooter__entrada {
	margin: 0 0 22px;
	font-size: 13.5px;
	line-height: 1.66;
	color: rgba(255, 255, 255, .84);
}

.dc-prefooter .dc-boton { align-self: flex-start; }

@media (max-width: 860px) {
	.dc-prefooter { padding-block: 36px; }
	.dc-prefooter__fila { grid-template-columns: minmax(0, 1fr); }
	.dc-prefooter__foto { min-height: 200px; }
}

/* ==========================================================================
   11. Marcas
   ========================================================================== */

.dc-franja--marcas { background-color: var(--dc-caja-alt); }

.dc-subtitulo { margin: 8px 0 0; font-size: 14px; color: var(--dc-gris); }

.dc-dato-suelto {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--dc-titulo);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dc-negro);
}

.dc-dato-suelto b { color: var(--dc-acento); }

.dc-marcas {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) { .dc-marcas { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 820px)  { .dc-marcas { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px)  { .dc-marcas { grid-template-columns: repeat(2, 1fr); } }

.dc-marca-tarjeta {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--dc-papel);
	border: 1px solid var(--dc-linea);
	transition: border-color .15s, box-shadow .15s;
}

.dc-marca-tarjeta:hover { border-color: var(--dc-acento); box-shadow: 0 4px 16px rgba(21, 25, 27, .09); }

.dc-marca-tarjeta__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 10px 14px;
	color: var(--dc-negro);
}

.dc-marca-tarjeta__pie {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 10px;
}

.dc-marca-tarjeta__nombre {
	flex: 1;
	min-width: 0;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--dc-negro);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dc-marca-tarjeta__cifra {
	font-family: var(--dc-titulo);
	font-size: 12px;
	font-weight: 700;
	color: var(--dc-acento);
	flex: 0 0 auto;
}

.dc-marca-tarjeta__pie .dc-icono { color: var(--dc-tenue); }
.dc-marca-tarjeta:hover .dc-icono { color: var(--dc-acento); }

/* Última celda: acceso a todo el inventario. */
.dc-marca-tarjeta--todas {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #f4f4f4;
	border-color: #f4f4f4;
}

/* La última celda ocupa dos columnas: el elemento de rejilla es el <li>. */
.dc-marcas li:last-child { grid-column: span 2; }
.dc-marcas li { display: flex; }

.dc-marca-tarjeta--todas:hover { background: #fff; border-color: var(--dc-acento); }

.dc-marca-tarjeta--todas .dc-marca-tarjeta__nombre {
	flex: 1;
	max-width: 12ch;
	white-space: normal;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: .04em;
}

.dc-marca-tarjeta__mas {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: 1px solid #c9c9cc;
	border-radius: 50%;
	font-family: var(--dc-texto);
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	color: var(--dc-negro);
}

.dc-marca-tarjeta--todas:hover .dc-marca-tarjeta__mas { border-color: var(--dc-acento); color: var(--dc-acento); }

@media (max-width: 520px) { .dc-marcas li:last-child { grid-column: span 2; } }


/* ==========================================================================
   12. Pie
   ========================================================================== */

.dc-pie {
	position: relative;
	overflow: hidden;
	padding-block: var(--dc-ritmo) 22px;
	background: var(--dc-negro);
	color: #9aa0a6;
	font-size: 14px;
}

/* Marca de agua: el isotipo recortado como máscara, así queda blanco puro
   sin necesidad de una segunda versión del archivo. */
.dc-pie::before {
	content: "";
	position: absolute;
	right: -3%;
	bottom: -22%;
	z-index: 0;
	width: min(720px, 82%);
	aspect-ratio: 149 / 65;
	background: #fff;
	-webkit-mask: url("assets/logo-iso.svg") no-repeat center / contain;
	mask: url("assets/logo-iso.svg") no-repeat center / contain;
	opacity: .06;
	pointer-events: none;
}

.dc-pie > * { position: relative; z-index: 1; }

.dc-pie__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--dc-linea-osc);
}

.dc-pie h3 {
	font-family: var(--dc-titulo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .13em;
	color: #fff;
	margin-bottom: 16px;
}

.dc-pie h3 em { font-style: normal; color: inherit; }
.dc-pie ul { margin: 0; padding: 0; list-style: none; }
.dc-pie li { margin-bottom: 8px; }
.dc-pie a:hover { color: var(--dc-acento); }

.dc-pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding-top: 18px;
	font-size: 13px;
	color: #6f757b;
}

/* ==========================================================================
   13. Paginación y utilidades
   ========================================================================== */

.dc-paginacion { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 36px; }

.dc-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 11px;
	background: #fff;
	border: 1px solid var(--dc-linea);
	font-family: var(--dc-titulo);
	font-size: 15px;
	font-weight: 700;
	color: var(--dc-negro);
}

.dc-paginacion .page-numbers:hover,
.dc-paginacion .page-numbers.current { background: var(--dc-acento); border-color: var(--dc-acento); color: #fff; }

.dc-vacio { padding: 48px 24px; background: var(--dc-caja); text-align: center; }

.dc-contenido { max-width: 74ch; }
.dc-contenido h2 { margin-top: 1.4em; }

.dc-saltar { position: absolute; left: -9999px; }
.dc-saltar:focus { left: 8px; top: 8px; z-index: 100; padding: 11px 16px; background: var(--dc-negro); color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

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

/* ==========================================================================
   14. Animación de los botones
   Barrido inclinado que entra por la izquierda; el texto y la flecha se
   adelantan un poco. Nada de un simple cambio de color.
   ========================================================================== */

.dc-boton {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dc-boton::before {
	content: "";
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -25%;
	width: 150%;
	z-index: -1;
	background: var(--dc-negro);
	transform: translateX(-105%) skewX(-16deg);
	transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}

.dc-boton:hover::before { transform: translateX(0) skewX(-16deg); }

.dc-boton:hover {
	background: var(--dc-acento);
	border-color: var(--dc-negro);
	color: #fff;
}

.dc-boton span,
.dc-boton .dc-icono { transition: transform .34s cubic-bezier(.4, 0, .2, 1); }
.dc-boton:hover .dc-icono { transform: translateX(5px); }

/* Sobre fondo oscuro el barrido es blanco. */
.dc-boton--claro::before { background: var(--dc-acento); }
.dc-boton--claro:hover { background: #fff; border-color: var(--dc-acento); color: #fff; }

.dc-boton--fantasma::before { background: var(--dc-negro); }
.dc-boton--fantasma:hover { background: transparent; border-color: var(--dc-negro); color: #fff; }

.dc-boton--subasta::before { background: var(--dc-negro); }
.dc-boton--subasta:hover { background: var(--dc-subasta); border-color: var(--dc-negro); }

/* El enlace con flecha subraya de izquierda a derecha. */
.dc-enlace-flecha { position: relative; border-bottom-color: transparent; }

.dc-enlace-flecha::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--dc-negro);
	transform-origin: right;
	transition: transform .3s ease, background .2s;
}

.dc-enlace-flecha:hover::after { background: var(--dc-acento); animation: dc-subrayado .45s ease; }
.dc-enlace-flecha .dc-icono { transition: transform .3s ease; }
.dc-enlace-flecha:hover .dc-icono { transform: translateX(4px); }

@keyframes dc-subrayado {
	0%   { transform: scaleX(1); transform-origin: right; }
	45%  { transform: scaleX(0); transform-origin: right; }
	55%  { transform: scaleX(0); transform-origin: left; }
	100% { transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   15. Favorito de la tarjeta
   ========================================================================== */

.dc-tarjeta { position: relative; }

.dc-favorito {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
	transition: color .16s, transform .16s;
}

.dc-favorito:hover { transform: scale(1.12); }

.dc-favorito[aria-pressed="true"] { color: var(--dc-acento); }

.dc-favorito[aria-pressed="true"] .dc-icono { fill: currentColor; }

/* ==========================================================================
   15b. Piezas comunes: rótulos, cajas, pie, páginas y listados
   ========================================================================== */

/* --- Rótulo de sección: versalitas con un filete rojo delante --- */

.dc-etiqueta {
	position: relative;
	margin: 0 0 10px;
	padding-left: 15px;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--dc-gris);
}

.dc-etiqueta::before {
	content: "";
	position: absolute;
	top: .28em;
	bottom: .28em;
	left: 0;
	width: 3px;
	background: var(--dc-acento);
}

/* Cuando se anula el sangrado, el filete sobra. */
.dc-etiqueta[style*="padding-left:0"]::before,
.dc-etiqueta[style*="padding-left: 0"]::before { display: none; }

/* --- Migas de pan --- */

.dc-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-family: var(--dc-titulo);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #8b9096;
}

.dc-migas a { color: #b9bec3; }
.dc-migas a:hover { color: var(--dc-acento); }
.dc-migas i { font-style: normal; color: #5a5f64; }
.dc-migas [aria-current] { color: var(--dc-acento); }

/* --- Cabecera oscura de las páginas informativas --- */

.dc-pagina__cabecera {
	padding-block: clamp(28px, 4vw, 48px);
	background: var(--dc-negro);
	color: #fff;
}

.dc-pagina__cabecera h1 { margin: 0; color: #fff; }

.dc-pagina__cabecera-nota {
	margin: 10px 0 0;
	max-width: 620px;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .74);
}

/* --- Página con columna lateral --- */

.dc-pagina {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
	gap: 46px;
}

.dc-pagina__lateral {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 22px;
}

/* --- Caja de stock del lateral --- */

.dc-caja--stock { background: var(--dc-negro); color: #fff; }

.dc-caja--stock__cifra {
	margin: 0 0 6px;
	font-family: var(--dc-titulo);
	font-size: 46px;
	line-height: 1;
	font-style: italic;
	color: var(--dc-acento);
}

.dc-caja--stock__texto {
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.58;
	color: rgba(255, 255, 255, .82);
}

/* --- Lista de datos de contacto --- */

.dc-lista-contacto {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.dc-lista-contacto li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	line-height: 1.5;
}

.dc-lista-contacto .dc-icono { flex: 0 0 auto; margin-top: 2px; color: var(--dc-acento); }
.dc-lista-contacto a { color: inherit; }
.dc-lista-contacto a:hover { color: var(--dc-acento); }

/* --- Hueco reservado para una imagen que aún no existe --- */

.dc-hueco {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 1.6em 0;
	padding: 28px 20px;
	min-height: 200px;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: var(--dc-caja);
	border: 1px dashed #c7c8cb;
	color: #b6b8bc;
}

.dc-hueco .dc-icono { color: #b6b8bc; }

.dc-hueco span {
	font-family: var(--dc-titulo);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.dc-hueco--ancho { aspect-ratio: 21 / 9; }

/* --- Miniaturas de la galería de la ficha --- */

.dc-miniatura {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: pointer;
	opacity: .72;
	transition: opacity .16s, outline-color .16s;
	outline: 2px solid transparent;
	outline-offset: -2px;
}

.dc-miniatura:hover,
.dc-miniatura.esta-activa { opacity: 1; outline-color: var(--dc-acento); }

/* --- Logotipo de marca --- */

.dc-marca-logo { display: block; object-fit: contain; }

/* --- Buscador de la página de resultados y del 404 --- */

.dc-filtros--busqueda { align-items: flex-end; }

.dc-resultados {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-resultados li {
	padding: 20px 0;
	border-bottom: 1px solid var(--dc-linea);
}

.dc-resultados li:first-child { border-top: 1px solid var(--dc-linea); }

.dc-resultados h2 { margin: 0 0 6px; font-size: 19px; }
.dc-resultados p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--dc-gris); }

.dc-resultados__tipo {
	margin: 0 0 6px !important;
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--dc-acento) !important;
}

.dc-404 { max-width: 620px; }

.dc-lista-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.dc-lista-enlaces a { color: var(--dc-carbon); text-decoration: underline; text-underline-offset: 3px; }
.dc-lista-enlaces a:hover { color: var(--dc-acento); }

/* --- Listado del blog --- */

.dc-rejilla-entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
}

.dc-entrada {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--dc-linea);
}

.dc-entrada__medio { display: block; overflow: hidden; }

.dc-entrada__medio img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .3s;
}

.dc-entrada:hover .dc-entrada__medio img { transform: scale(1.04); }

.dc-entrada__cuerpo { padding: 20px 22px 24px; }

.dc-entrada__fecha {
	margin: 0 0 8px;
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--dc-acento);
}

.dc-entrada__titulo { margin: 0 0 10px; font-size: 19px; line-height: 1.25; }
.dc-entrada__titulo a { color: inherit; }
.dc-entrada__titulo a:hover { color: var(--dc-acento); }

.dc-entrada__extracto { margin: 0; font-size: 14px; line-height: 1.66; color: var(--dc-gris); }

/* --- Pie --- */

.dc-pie__lema {
	margin: 16px 0 18px;
	max-width: 280px;
	font-size: 13.5px;
	line-height: 1.62;
	color: #9aa0a6;
}

.dc-pie__contacto {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: #b9bec3;
}

.dc-pie__contacto li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.dc-pie__contacto .dc-icono { flex: 0 0 auto; margin-top: 2px; color: var(--dc-acento); }
.dc-pie__contacto a { color: inherit; }
.dc-pie__contacto a:hover { color: #fff; }
.dc-pie__direccion { white-space: pre-line; }

.dc-pie__widget { font-size: 13.5px; color: #b9bec3; }

.dc-redes {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--dc-linea-osc);
	color: #d8d9db;
	transition: background .16s, border-color .16s, color .16s;
}

.dc-redes a:hover { background: var(--dc-acento); border-color: var(--dc-acento); color: #fff; }

.dc-pie__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--dc-linea-osc);
}

.dc-pie__copy { margin: 0; font-size: 12.5px; color: #8b9096; }

.dc-sello { display: flex; align-items: center; gap: 12px; }

.dc-sello strong {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #d8d9db;
}

.dc-sello span span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8b9096; }

/* Bandera alemana en tres franjas. Se estira hasta igualar el alto de las
   dos líneas de texto con las que va, en lugar de flotar en medio. */
.dc-bandera {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 34px;
	min-height: 22px;
	flex: 0 0 34px;
}

.dc-bandera span { display: block; flex: 1 1 0; min-height: 4px; }
.dc-bandera span:nth-child(1) { background: #000; }
.dc-bandera span:nth-child(2) { background: #dd0000; }
.dc-bandera span:nth-child(3) { background: #ffce00; }

.dc-pie__cierre { display: flex; align-items: center; gap: 14px; }

.dc-pie__cierre span {
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #8b9096;
}

/* Volver arriba: flota en la esquina inferior derecha de toda la web. */
.dc-arriba {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--dc-negro);
	border: 0;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(6, 7, 9, .28);
	transition: background .16s, transform .16s;
}

.dc-arriba:hover { background: var(--dc-acento); transform: translateY(-2px); }
.dc-arriba:focus-visible { outline: 2px solid var(--dc-acento); outline-offset: 3px; }

@media (max-width: 560px) {
	.dc-arriba { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* --- Contenido añadido al final de una plantilla a medida --- */

.dc-contenido--anexo { padding-top: 8px; }

@media (max-width: 980px) {
	.dc-pagina { grid-template-columns: 1fr; gap: 34px; }
	.dc-pagina__lateral { position: static; }
}

/* ==========================================================================
   16. Página «Cómo comprar»
   Franjas a lo ancho que van contando el proceso. Sin columna lateral: cada
   bloque ocupa todo el contenedor y el orden de lectura es el orden real de
   la compra.
   ========================================================================== */

/* La página entera va sobre gris claro, para que las tarjetas blancas se
   despeguen del fondo. */
.dc-pagina-clara { background: #f2f3f4; padding-bottom: 56px; }

.dc-franja--blanca { background-color: #fff; }

.dc-envoltura-buscadores { padding-bottom: 58px; }

/* --- 16.0 Cabecera clara --- */

.dc-portada-pagina { padding-block: clamp(26px, 3.6vw, 42px) 30px; }

.dc-portada-pagina__fila {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.dc-portada-pagina h1 {
	margin: 0 0 12px;
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.05;
	font-style: italic;
	color: var(--dc-negro);
}

.dc-portada-pagina__entrada {
	max-width: 520px;
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--dc-gris);
}

/* Las migas, sobre fondo claro, invierten los colores del pie oscuro. */
.dc-portada-pagina .dc-migas { color: var(--dc-gris); }
.dc-portada-pagina .dc-migas a { color: var(--dc-acento); }
.dc-portada-pagina .dc-migas i { color: #b6b8bc; }
.dc-portada-pagina .dc-migas [aria-current] { color: var(--dc-carbon); }

/* Procedencia: banderita y dos líneas, alineadas a la derecha del título. */
.dc-origen {
	display: flex;
	align-items: stretch;
	gap: 11px;
	margin: 0 0 6px;
	flex: 0 0 auto;
}

.dc-origen > span:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
	line-height: 1.25;
	color: var(--dc-carbon);
}

/* --- 16.1 Las dos vías, una al lado de la otra --- */

.dc-vias {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 56px;
}

.dc-via {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 16, 17, .06), 0 8px 26px rgba(15, 16, 17, .07);
}

.dc-via__cuerpo { padding: 28px 32px 30px; }

.dc-via__encabezado {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 18px;
}

.dc-via__numero {
	font-family: var(--dc-titulo);
	font-size: 19px;
	font-style: italic;
	color: var(--dc-acento);
	letter-spacing: .02em;
}

/* La regla rellena el hueco entre el número y el epígrafe. */
.dc-via__regla { flex: 1 1 auto; height: 1px; background: var(--dc-linea); }

.dc-via__epigrafe {
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--dc-carbon);
	white-space: nowrap;
}

.dc-via__titulo {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.3vw, 28px);
	line-height: 1.14;
	font-style: italic;
}

.dc-via__titulo span { display: block; }

.dc-via__texto { margin-bottom: 24px; }

.dc-via__texto p {
	margin: 0 0 13px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--dc-gris);
}

.dc-via__texto p:last-child { margin-bottom: 0; }

/* El botón se ciñe a su texto y queda anclado a la izquierda. */
.dc-via .dc-boton { align-self: flex-start; }

/* Variante en caja normal: el boceto pide frase, no versalitas. */
.dc-boton--frase {
	padding: 13px 22px;
	font-size: 13.5px;
	text-transform: none;
	letter-spacing: .01em;
	gap: 16px;
}

.dc-boton--negro { background: var(--dc-negro); border-color: var(--dc-negro); }
.dc-boton--negro:hover { background: var(--dc-acento); border-color: var(--dc-negro); }

/* La foto sangra a los tres lados y entra con un corte en diagonal. Se estira
   para llenar lo que le sobre a la tarjeta, así las dos columnas acaban a la
   misma altura aunque una lleve más texto. */
.dc-via__foto {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 240px;
	margin-top: 26px;
	object-fit: cover;
	clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%);
}

.dc-hueco.dc-via__foto { aspect-ratio: auto; margin-inline: 0; }

/* --- 16.2 Buscadores alemanes --- */

.dc-buscadores {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) auto minmax(0, .95fr);
	align-items: center;
	gap: 44px;
	padding: 34px 36px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 16, 17, .06), 0 8px 26px rgba(15, 16, 17, .07);
}

.dc-buscadores__intro { display: flex; align-items: flex-start; gap: 20px; }

.dc-disco {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border: 1.5px solid var(--dc-negro);
	border-radius: 50%;
	color: var(--dc-negro);
}

.dc-buscadores__intro h2 {
	margin: 0 0 9px;
	font-size: 19px;
	line-height: 1.22;
	font-style: italic;
}

.dc-buscadores__intro p,
.dc-buscadores__nota {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--dc-gris);
}

/* Separadores verticales entre las tres partes de la franja. */
.dc-buscadores__portal,
.dc-buscadores__nota { position: relative; }

.dc-buscadores__portal::before,
.dc-buscadores__nota::before {
	content: "";
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: -22px;
	width: 1px;
	background: var(--dc-linea);
}

.dc-buscadores__portal .dc-etiqueta { margin: 0 0 12px; padding-left: 0; }

.dc-portal { display: inline-flex; align-items: center; gap: 14px; }

/* El rótulo del portal imita su propia marca: barra naranja y nombre en
   negro, encajados en una placa blanca con borde. */
.dc-portal__nombre {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 8px 15px 8px 11px;
	background: #fff;
	border: 1px solid #d8d9dc;
	font-family: var(--dc-texto);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #4b0076;
	white-space: nowrap;
}

/* El cuadrado naranja del distintivo de mobile.de. */
.dc-portal__nombre::before {
	content: "";
	width: 15px;
	height: 15px;
	margin-right: 9px;
	background: #ff5a00;
}

.dc-portal__nombre em { font-style: normal; color: #4b0076; }

.dc-portal__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--dc-negro);
	border-radius: 50%;
	color: var(--dc-negro);
	transition: background .16s, color .16s;
}

.dc-portal:hover .dc-portal__flecha { background: var(--dc-negro); color: #fff; }

/* --- 16.3 Marcas que importamos --- */

.dc-marcas-fila .dc-etiqueta { padding-left: 0; margin: 0 0 12px; }

.dc-marcas-fila__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 38px;
}

.dc-marcas-fila__encabezado h2 {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	font-style: italic;
}

.dc-marcas-fila__encabezado h2 span { display: block; }

/* El guion rojo delante del apunte lo pidió el cliente en el boceto. */
.dc-marcas-fila__apunte {
	position: relative;
	max-width: 210px;
	margin: 0 0 4px;
	padding-left: 34px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dc-gris);
}

.dc-marcas-fila__apunte::before {
	content: "";
	position: absolute;
	top: .7em;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--dc-acento);
}

.dc-marcas-fila__lista {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-marcas-fila__lista li { display: flex; justify-content: center; }

.dc-marcas-fila__lista a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	transition: transform .16s;
}

.dc-marcas-fila__lista a:hover { transform: translateY(-2px); }

/* Cada logotipo conserva su proporción y se limita por el alto, que es lo
   que iguala ópticamente marcas tan distintas como Audi y BMW. */
.dc-marcas-fila__lista img,
.dc-marcas-fila__lista svg {
	max-height: 46px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* --- 16.4 El proceso --- */

.dc-proceso { padding: 72px 0 56px; }

.dc-proceso__encabezado {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.dc-proceso__encabezado h2 {
	margin: 0;
	font-size: clamp(21px, 2.2vw, 27px);
	font-style: italic;
}

.dc-proceso__encabezado .dc-etiqueta { margin: 0; padding-left: 0; }

.dc-proceso__pasos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Filetes finos entre pasos, como en el boceto. */
.dc-proceso__pasos li { position: relative; padding: 0 14px; }

.dc-proceso__pasos li + li::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: -14px;
	width: 1px;
	background: var(--dc-linea);
}

.dc-proceso__pasos .dc-icono { color: var(--dc-negro); margin: 0 auto 18px; }

.dc-proceso__pasos h3 {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--dc-carbon);
}

.dc-proceso__pasos p {
	margin: 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--dc-gris);
}

/* --- 16.5 Remate: contacto, stock y viaje --- */

.dc-remate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
	gap: 22px;
}

.dc-remate__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 262px;
	padding: 30px 30px 32px;
	background-color: var(--dc-panel);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

/* Velo oscuro sobre la foto: sin él, el texto blanco se pierde. */
.dc-remate__caja--stock::before,
.dc-remate__caja--viaje::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(6, 7, 9, .93) 26%, rgba(6, 7, 9, .55) 100%);
}

.dc-remate__caja h2 {
	margin: 0 0 14px;
	font-size: 21px;
	line-height: 1.18;
	font-style: italic;
	color: #fff;
}

.dc-remate__caja h2 span { display: block; }

.dc-remate__caja--contacto { background-color: var(--dc-negro); }
.dc-remate__caja--contacto .dc-lista-contacto { margin: 0; }

.dc-remate__cifra {
	margin: auto 0 6px;
	font-family: var(--dc-titulo);
	font-size: 50px;
	line-height: 1;
	font-style: italic;
	color: #fff;
}

.dc-remate__texto {
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

.dc-remate__caja--stock .dc-remate__texto { font-weight: 600; color: #fff; }

.dc-remate__caja .dc-boton { align-self: flex-start; }
.dc-remate__caja--stock .dc-boton { margin-top: 0; }

.dc-remate__apoyos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: auto 0 0;
	padding: 22px 0 0;
	list-style: none;
}

.dc-remate__apoyos li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	white-space: pre-line;
	color: rgba(255, 255, 255, .86);
}

.dc-remate__apoyos .dc-icono { flex: 0 0 auto; color: #fff; }

/* --- 16.7 Ajustes al boceto aprobado --- */

/* En esta pagina los titulares van en caja mixta, no en versalitas: es lo
   que pide el boceto y lo que hace legibles los titulos de dos lineas. */
.dc-pagina-clara h1,
.dc-pagina-clara h2,

/* Los rotulos de seccion de esta pagina van sin el filete rojo. */
.dc-pagina-clara .dc-etiqueta { padding-left: 0; }
.dc-pagina-clara .dc-etiqueta::before { display: none; }

/* La foto mide siempre lo mismo en las dos tarjetas; la diferencia de texto
   la absorbe el cuerpo, que es quien crece. */
.dc-via__cuerpo { flex: 1 1 auto; }

.dc-via__foto {
	flex: 0 0 auto;
	height: 340px;
	min-height: 0;
	object-position: center 54%;
	clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
}

/* Los logotipos se igualan opticamente: los anchos (Audi, MINI, Toyota) se
   limitan por ancho y los redondos por alto. */
.dc-marcas-fila__lista img,
.dc-marcas-fila__lista svg { max-height: 52px; max-width: 132px; }

/* --- 16.8 Texto de apoyo al final de la pagina --- */

.dc-seo { padding: 44px 0 50px; }

.dc-seo .dc-etiqueta { margin-bottom: 20px; }

/* A dos columnas, en letra menuda: acompana sin competir con las tarjetas. */
.dc-seo__texto {
	column-count: 2;
	column-gap: 54px;
	font-size: 13.5px;
	line-height: 1.78;
	color: var(--dc-gris);
}

.dc-seo__texto > * { break-inside: avoid; }

.dc-seo__texto p { margin: 0 0 1.1em; }

.dc-seo__texto h2,
.dc-seo__texto h3 {
	margin: 0 0 .7em;
	font-size: 14px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dc-carbon);
}

.dc-seo__texto hr {
	margin: 1.4em 0;
	border: 0;
	border-top: 1px solid var(--dc-linea);
}

/* Aqui abajo los botones rescatados no deben gritar: pasan a ser enlaces. */
.dc-seo__texto .dc-acciones { margin: 1em 0 1.4em; }

.dc-seo__texto .dc-boton--heredado {
	padding: 0;
	background: none;
	border: 0;
	color: var(--dc-acento);
}

.dc-seo__texto .dc-boton--heredado::before { display: none; }
.dc-seo__texto .dc-boton--heredado:hover { color: var(--dc-negro); }
.dc-seo__texto .dc-boton__rotulo { font-size: 12.5px; }
.dc-seo__texto .dc-boton__apunte { color: var(--dc-gris); }
.dc-seo__texto .dc-paso { margin: 1.2em 0 .8em; }

/* Los huecos de imagen reservados no pintan nada en un bloque de texto. */
.dc-seo__texto .dc-hueco { display: none; }

@media (max-width: 780px) {
	.dc-seo__texto { column-count: 1; }
}

/* --- 16.6 Estrecho --- */

@media (max-width: 980px) {
	.dc-portada-pagina__fila { flex-direction: column; align-items: flex-start; gap: 22px; }
	.dc-vias { grid-template-columns: 1fr; gap: 26px; }
	.dc-buscadores { grid-template-columns: 1fr; gap: 26px; }
	.dc-buscadores__portal::before,
	.dc-buscadores__nota::before { display: none; }
	.dc-proceso__pasos { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
	.dc-proceso__pasos li + li::before { display: none; }
	.dc-remate { grid-template-columns: 1fr; }
	.dc-marcas-fila__lista { grid-template-columns: repeat(3, 1fr); gap: 28px; }
	.dc-marcas-fila__encabezado { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 560px) {
	.dc-proceso__pasos { grid-template-columns: repeat(2, 1fr); }
	.dc-remate__apoyos { grid-template-columns: 1fr; }
	.dc-via__cuerpo { padding: 24px 22px 26px; }
}

/* ==========================================================================
   17. Botones y rótulos rescatados del contenido antiguo
   ========================================================================== */

.dc-acciones { margin: 1.8em 0; }

.dc-boton--heredado { padding: 12px 24px; text-align: left; }

.dc-boton__texto { display: flex; flex-direction: column; gap: 2px; }

.dc-boton__rotulo {
	font-family: var(--dc-titulo);
	font-size: 14px;
	letter-spacing: .04em;
}

.dc-boton__apunte {
	font-size: 10.5px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: .04em;
	opacity: .82;
}

/* Sin enlace no hay nada que pulsar: se pinta apagado y no reacciona. */
.dc-boton--inerte { cursor: default; background: var(--dc-negro); border-color: var(--dc-negro); }
.dc-boton--inerte::before { display: none; }

.dc-paso {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 2em 0 1em;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--dc-negro);
}

.dc-paso__numero {
	font-family: var(--dc-titulo);
	font-size: 19px;
	font-style: italic;
	color: var(--dc-acento);
}

.dc-paso__rotulo {
	font-family: var(--dc-titulo);
	font-size: 17px;
	font-style: italic;
	color: var(--dc-negro);
}

.dc-paso__rotulo a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.dc-paso__rotulo a:hover { color: var(--dc-acento); }

/* ==========================================================================
   18. Página «Nosotros»
   Mismo sistema tipográfico que el resto del sitio: Russo One en cursiva para
   los titulares. Lo que cambia aquí es el ritmo, no la voz.
   ========================================================================== */

.dc-pagina-clara--nosotros { background: #fff; }

/* Rótulos de sección propios de esta página. */

.dc-rotulo-espaciado {
	margin: 0 0 18px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3em;
	color: var(--dc-gris);
}

/* Guion rojo seguido de rótulo: el remate que pidió el cliente en el boceto. */
.dc-rotulo-guion {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .26em;
	color: var(--dc-gris);
}

.dc-rotulo-guion::before {
	content: "";
	width: 30px;
	height: 2px;
	flex: 0 0 auto;
	background: var(--dc-acento);
}

/* --- 18.1 Hero --- */

.dc-nosotros-hero {
	position: relative;
	background-color: #e9eaec;
	background-size: cover;
	background-position: center right;
	isolation: isolate;
}

/* Velo claro que se desvanece hacia la derecha: deja leer el texto oscuro
   sin tapar la foto. */
.dc-nosotros-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, #f7f7f8 0%, rgba(247, 247, 248, .95) 30%, rgba(247, 247, 248, .55) 46%, rgba(247, 247, 248, 0) 62%);
}

.dc-nosotros-hero--sin-foto { background-color: #f2f3f4; }

.dc-nosotros-hero__fila { padding-block: clamp(40px, 5.6vw, 74px); }

.dc-nosotros-hero__texto { max-width: 460px; }

.dc-nosotros-hero h1 {
	margin: 0 0 10px;
	font-size: clamp(34px, 4.8vw, 56px);
	font-style: italic;
	line-height: 1.04;
	color: var(--dc-negro);
}

.dc-nosotros-hero h1 span { display: block; }

.dc-nosotros-hero__lema {
	margin: 0 0 30px;
	font-size: clamp(19px, 2.2vw, 26px);
	font-weight: 300;
	line-height: 1.22;
	color: #8b9096;
}

.dc-nosotros-hero__lema span { display: block; }

.dc-nosotros-hero__entrada {
	margin: 0 0 26px;
	padding-top: 24px;
	border-top: 1px solid rgba(35, 37, 39, .16);
	font-size: 14px;
	line-height: 1.72;
	color: var(--dc-carbon);
}

/* --- 18.2 Experiencia y compromiso --- */

.dc-historia {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 58px;
	padding-block: clamp(44px, 5vw, 70px);
}

/* La foto acompana al alto del texto en lugar de imponer su proporcion: el
   original es 9:16 y con una caja fija se le comia media imagen. */
.dc-historia__foto {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 470px;
	object-fit: cover;
	object-position: center 58%;
}

.dc-historia__texto { align-self: center; }

.dc-hueco.dc-historia__foto { margin: 0; height: auto; }

.dc-historia__texto h2 {
	margin: 0 0 22px;
	font-size: clamp(25px, 3vw, 35px);
	font-style: italic;
	line-height: 1.12;
}

.dc-historia__texto h2 span { display: block; }

.dc-historia__texto p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.76;
	color: var(--dc-gris);
}

/* Tres cifras separadas por filetes, al pie del bloque. */
.dc-cifras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.dc-cifras li { position: relative; padding-right: 20px; }

.dc-cifras li + li { padding-left: 26px; }

.dc-cifras li + li::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	width: 1px;
	background: var(--dc-linea);
}

.dc-cifras strong {
	display: block;
	margin-bottom: 8px;
	font-family: var(--dc-titulo);
	font-size: 27px;
	font-style: italic;
	letter-spacing: .01em;
	color: var(--dc-negro);
}

.dc-cifras span {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .1em;
	white-space: pre-line;
	color: var(--dc-gris);
}

/* --- 18.3 Valores --- */

.dc-valores {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr);
	align-items: center;
	gap: 50px;
	padding-block: clamp(38px, 4.4vw, 58px);
}

.dc-valores__encabezado h2 {
	margin: 0;
	font-size: clamp(23px, 2.7vw, 32px);
	font-style: italic;
	line-height: 1.12;
}

.dc-valores__encabezado h2 span { display: block; }

.dc-valores__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-valores__lista li {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 4px 26px;
}

.dc-valores__lista li + li { border-left: 1px solid var(--dc-linea); }

/* Icono grande sobre placa: le da peso a cada valor y los alinea entre si. */
.dc-valores__placa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	background: var(--dc-caja);
	color: var(--dc-negro);
}

.dc-valores__lista .dc-icono { color: inherit; }

.dc-valores__lista h3 {
	margin: 0 0 7px;
	font-family: var(--dc-titulo);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	white-space: pre-line;
	color: var(--dc-negro);
}

.dc-valores__lista p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--dc-gris);
}

/* --- 18.4 Partners --- */

.dc-partners { padding-block: clamp(38px, 4.4vw, 58px); }

.dc-partners__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 36px;
}

.dc-partners__encabezado h2 {
	margin: 0;
	font-size: clamp(21px, 2.4vw, 29px);
	font-style: italic;
}

.dc-partners__encabezado .dc-rotulo-espaciado { margin: 0 0 6px; }

.dc-partners__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-partners__lista li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
}

.dc-partners__lista li + li { border-left: 1px solid var(--dc-linea); }

/* Se igualan por ancho: EUROCOC es solo texto y por alto saldria enorme. */
.dc-partners__lista img {
	max-width: 176px;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.dc-partners__nombre {
	font-family: var(--dc-titulo);
	font-size: 15px;
	color: var(--dc-carbon);
}

.dc-partners__lista li {
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

.dc-partners__lista p {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--dc-gris);
}

/* --- 18.5 La cita --- */

.dc-cita {
	position: relative;
	background-color: var(--dc-hero);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

.dc-cita::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, rgba(6, 7, 9, .94) 22%, rgba(6, 7, 9, .55) 62%, rgba(6, 7, 9, .3) 100%);
}

.dc-cita blockquote {
	margin: 0;
	padding-block: clamp(52px, 6.4vw, 88px);
	max-width: 620px;
}

.dc-cita__filete {
	display: block;
	width: 34px;
	height: 2px;
	margin-bottom: 22px;
	background: var(--dc-acento);
}

.dc-cita p {
	margin: 0;
	font-size: clamp(17px, 2vw, 23px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	color: #fff;
}

.dc-cita p span { display: block; }

/* --- 18.6 Estrecho --- */

@media (max-width: 980px) {
	.dc-nosotros-hero::before {
		background: linear-gradient(180deg, rgba(247, 247, 248, .97) 0%, rgba(247, 247, 248, .9) 55%, rgba(247, 247, 248, .7) 100%);
	}

	.dc-nosotros-hero__texto { max-width: none; }
	.dc-historia { grid-template-columns: 1fr; gap: 34px; }
	.dc-valores { grid-template-columns: 1fr; gap: 30px; }
	.dc-valores__lista { grid-template-columns: 1fr; }
	.dc-valores__lista li { padding: 16px 0; }
	.dc-valores__lista li + li { border-left: 0; border-top: 1px solid var(--dc-linea); }
	.dc-partners__lista { grid-template-columns: repeat(2, 1fr); }
	.dc-partners__lista li:nth-child(3) { border-left: 0; }
	.dc-partners__lista li:nth-child(n+3) { border-top: 1px solid var(--dc-linea); }
	.dc-partners__encabezado { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 560px) {
	.dc-cifras { grid-template-columns: 1fr; gap: 18px; }
	.dc-cifras li + li { padding-left: 0; padding-top: 18px; }
	.dc-cifras li + li::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}

/* ==========================================================================
   19. Páginas «Pagos» y «Lea esto antes de comprar»
   ========================================================================== */

/* --- 19.1 Formas de pago, en lista --- */

.dc-medios { padding-block: 10px 60px; }

.dc-medios__lista { margin: 0; padding: 0; list-style: none; }

.dc-medio {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	padding: 26px 0;
}

.dc-medio + .dc-medio { border-top: 1px solid var(--dc-linea); }

/* Placa gris con el icono. Cuadrada, como todo en esta web. */
.dc-medio__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
	background: var(--dc-caja);
	color: var(--dc-negro);
}

.dc-medio__cuerpo { padding-top: 4px; }

.dc-medio h2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 9px;
	font-family: var(--dc-texto);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--dc-negro);
}

/* Distintivo de la opcion recomendada, junto al titulo. */
.dc-medio__marca {
	padding: 4px 9px;
	border: 1px solid var(--dc-linea);
	font-family: var(--dc-titulo);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--dc-carbon);
}

.dc-medio p {
	margin: 0;
	max-width: 640px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--dc-gris);
}

/* Datos bancarios: el IBAN pesa mas que el resto del parrafo. */
.dc-cuenta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 16px !important;
	color: var(--dc-negro) !important;
}

.dc-cuenta__banco { font-weight: 700; font-size: 15px; }

.dc-cuenta__iban {
	font-size: 15px;
	letter-spacing: .02em;
}

.dc-cuenta__bic {
	flex-basis: 100%;
	font-size: 15px;
	color: var(--dc-carbon);
}

.dc-copiar {
	padding: 4px 11px;
	background: none;
	border: 1px solid var(--dc-linea);
	font-family: var(--dc-titulo);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dc-gris);
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s;
}

.dc-copiar:hover { background: var(--dc-negro); border-color: var(--dc-negro); color: #fff; }
.dc-copiar.esta-copiado { background: var(--dc-acento); border-color: var(--dc-acento); color: #fff; }

/* --- 19.3 Las razones para comprar usado --- */

.dc-razones { padding-block: 8px 56px; }

.dc-razones__encabezado { margin-bottom: 34px; }

.dc-razones__encabezado h2 {
	margin: 0;
	font-size: clamp(25px, 3vw, 35px);
	font-style: italic;
	line-height: 1.12;
}

.dc-razones__encabezado h2 span { display: block; }

.dc-razones__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-razones__lista li {
	position: relative;
	padding: 26px 26px 30px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 16, 17, .06), 0 8px 26px rgba(15, 16, 17, .07);
}

/* Número gigante de marca de agua, el recurso que ya usa la portada. */
.dc-razones__numero {
	position: absolute;
	top: -12px;
	right: 4px;
	font-family: var(--dc-titulo);
	font-size: 62px;
	font-style: italic;
	line-height: 1;
	color: rgba(35, 37, 39, .06);
	pointer-events: none;
}

.dc-razones__lista .dc-icono { position: relative; color: var(--dc-acento); margin-bottom: 16px; }

.dc-razones__lista h3 {
	margin: 0 0 10px;
	font-size: 15.5px;
	font-style: italic;
	line-height: 1.25;
	letter-spacing: 0;
}

.dc-razones__lista p {
	margin: 0;
	font-size: 13px;
	line-height: 1.68;
	color: var(--dc-gris);
}

/* --- 19.4 El argumento de fondo --- */

.dc-argumento {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: 54px;
}

.dc-argumento__texto h2 {
	margin: 0 0 18px;
	font-size: clamp(22px, 2.5vw, 30px);
	font-style: italic;
	line-height: 1.16;
}

.dc-argumento__texto p {
	margin: 0 0 15px;
	font-size: 14.5px;
	line-height: 1.74;
	color: var(--dc-gris);
}

.dc-argumento__texto .dc-boton { margin-top: 10px; }

/* La frase de cierre, del tamaño de un titular y con el filete rojo. */
.dc-lema-grande {
	margin: 0;
	padding-left: 30px;
	border-left: 3px solid var(--dc-acento);
	font-family: var(--dc-titulo);
	font-size: clamp(21px, 2.5vw, 30px);
	font-style: italic;
	line-height: 1.18;
	color: var(--dc-negro);
}

.dc-lema-grande span { display: block; }

/* --- 19.5 Estrecho --- */

@media (max-width: 980px) {
	.dc-pagos-pasos { grid-template-columns: 1fr; }
	.dc-medios__lista { grid-template-columns: 1fr; }
	.dc-razones__lista { grid-template-columns: repeat(2, 1fr); }
	.dc-argumento { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
	.dc-razones__lista { grid-template-columns: 1fr; }
	.dc-cuenta { gap: 16px; }
}

/* ==========================================================================
   20. Página «Contacto»
   ========================================================================== */

/* --- 20.1 Cabecera oscura --- */

.dc-contacto-hero {
	position: relative;
	background-color: var(--dc-hero);
	background-size: cover;
	background-position: center 62%;
	color: #fff;
	isolation: isolate;
}

/* El velo se abre hacia la derecha para que la foto respire tras el titular. */
.dc-contacto-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(96deg, rgba(6, 7, 9, .96) 26%, rgba(6, 7, 9, .72) 58%, rgba(6, 7, 9, .42) 100%);
}

.dc-contacto-hero__fila {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding-block: clamp(26px, 3.4vw, 40px);
}

.dc-contacto-hero h1 {
	margin: 0 0 6px;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1;
	color: #fff;
}

.dc-contacto-hero .dc-migas { color: #8b9096; }
.dc-contacto-hero .dc-migas a { color: var(--dc-acento); }
.dc-contacto-hero .dc-rotulo-espaciado { margin: 0; color: #9aa0a6; }

/* Rótulo en columna, alineado a la derecha, con filete debajo. */
.dc-lema-vertical {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin: 4px 0 0;
	flex: 0 0 auto;
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .26em;
	color: #b9bec3;
}

.dc-lema-vertical::after {
	content: "";
	width: 34px;
	height: 1px;
	margin-top: 8px;
	background: rgba(255, 255, 255, .35);
}

/* --- 20.2 Las tres columnas --- */

.dc-contacto {
	display: grid;
	grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr) minmax(0, .78fr);
	align-items: start;
	gap: 28px;
	padding-block: 40px 34px;
}

/* Cartel de marca sobre la foto vertical. */
.dc-cartel-marca {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 430px;
	padding: 26px 24px;
	background-color: var(--dc-panel);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

.dc-cartel-marca::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.dc-cartel-marca { position: relative; }

.dc-cartel-marca::before {
	background: linear-gradient(180deg, rgba(6, 7, 9, .82) 0%, rgba(6, 7, 9, .25) 42%, rgba(6, 7, 9, .88) 100%);
}

.dc-cartel-marca__nombre {
	margin: 0 0 10px;
	font-family: var(--dc-titulo);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #fff;
}

/* Bandera en tres barras horizontales, versión pequeña y tendida. */
.dc-bandera--tendida {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	width: 46px;
	height: 5px;
	min-height: 0;
	flex: 0 0 auto;
	margin-bottom: 14px;
}

.dc-bandera--tendida span { flex: 1 1 0; min-height: 0; }

.dc-cartel-marca__lema,
.dc-cartel-marca__pie {
	margin: 0;
	font-family: var(--dc-titulo);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.9;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, .82);
}

.dc-cartel-marca__lema span,
.dc-cartel-marca__pie span { display: block; }

/* --- 20.3 Columna central --- */

.dc-rotulo-guion--solo {
	display: block;
	width: 40px;
	height: 3px;
	margin: 0 0 18px;
	background: var(--dc-acento);
}

.dc-rotulo-guion--solo::before { display: none; }

.dc-contacto__titulo {
	margin: 0 0 14px;
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.1;
}

.dc-contacto__entrada {
	margin: 0 0 26px;
	font-size: 14.5px;
	line-height: 1.72;
	color: var(--dc-gris);
}

/* --- 20.4 Formulario --- */

.dc-formulario__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.dc-campo-form { margin: 0 0 14px; }

.dc-campo-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dc-gris);
}

.dc-campo-form label b { color: var(--dc-acento); }

/* Blancos y con filete: sobre el gris de la pagina, un campo gris claro
   desaparecia y no se veia donde habia que escribir. */
.dc-campo-form input,
.dc-campo-form textarea {
	width: 100%;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--dc-linea);
	font: inherit;
	font-size: 14.5px;
	color: var(--dc-negro);
	transition: border-color .16s, box-shadow .16s;
}

.dc-campo-form textarea { resize: vertical; min-height: 132px; }

.dc-campo-form input::placeholder,
.dc-campo-form textarea::placeholder { color: #9aa0a6; }

.dc-campo-form input:focus,
.dc-campo-form textarea:focus {
	outline: none;
	border-color: var(--dc-negro);
	box-shadow: inset 0 0 0 1px var(--dc-negro);
}

/* La trampa antispam se saca de la vista sin usar `display:none`, que algunos
   robots detectan y saltan. */
.dc-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dc-formulario__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 8px;
}

.dc-consentimiento {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dc-gris);
}

.dc-consentimiento input {
	margin-top: 2px;
	width: 15px;
	height: 15px;
	accent-color: var(--dc-acento);
	flex: 0 0 auto;
}

.dc-consentimiento a { color: var(--dc-acento); text-decoration: underline; text-underline-offset: 2px; }
.dc-consentimiento b { color: var(--dc-acento); }

/* Avisos de resultado del envío. */
.dc-aviso--bien,
.dc-aviso--mal {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0 0 22px;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.6;
}

.dc-aviso--bien {
	background: #eaf6ec;
	border-left: 3px solid #2c7a3f;
	color: #1c4d28;
}

.dc-aviso--bien .dc-icono { color: #2c7a3f; flex: 0 0 auto; }

.dc-aviso--mal {
	background: var(--dc-acento-tenue);
	border-left: 3px solid var(--dc-acento);
	color: #8c1219;
}

.dc-aviso--mal .dc-icono { color: var(--dc-acento); flex: 0 0 auto; }

/* --- 20.5 Columna de datos --- */

.dc-contacto__lateral { display: flex; flex-direction: column; gap: 18px; }

.dc-tarjeta-oscura {
	position: relative;
	background-color: var(--dc-negro);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

.dc-tarjeta-oscura h2 {
	margin: 0;
	padding: 14px 22px;
	background: rgba(255, 255, 255, .06);
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
}

.dc-tarjeta-oscura__cuerpo { padding: 20px 22px 24px; }

.dc-tarjeta-oscura--stock::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, rgba(6, 7, 9, .94) 30%, rgba(6, 7, 9, .6) 100%);
}

.dc-tarjeta-oscura--stock .dc-remate__cifra { margin-top: 0; }

.dc-direccion { margin: 0 0 18px; font-size: 13.5px; line-height: 1.62; color: rgba(255, 255, 255, .82); }
.dc-direccion strong { display: block; margin-bottom: 4px; color: #fff; }
.dc-direccion span { display: block; white-space: pre-line; }

/* --- 20.6 Los tres apoyos --- */

.dc-apoyos-contacto {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 0 60px;
	padding: 26px 0 0;
	border-top: 1px solid var(--dc-linea);
	list-style: none;
}

.dc-apoyos-contacto li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 6px 28px;
}

.dc-apoyos-contacto li + li { border-left: 1px solid var(--dc-linea); }
.dc-apoyos-contacto li:first-child { padding-left: 0; }

.dc-apoyos-contacto__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	background: var(--dc-caja);
	color: var(--dc-negro);
}

.dc-apoyos-contacto h3 {
	margin: 4px 0 7px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dc-carbon);
}

.dc-apoyos-contacto p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--dc-gris); }

/* --- 20.7 Estrecho --- */

@media (max-width: 1100px) {
	.dc-contacto { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
	.dc-cartel-marca { grid-column: 1 / -1; min-height: 260px; }
}

@media (max-width: 820px) {
	.dc-contacto { grid-template-columns: 1fr; }
	.dc-contacto-hero__fila { flex-direction: column; gap: 18px; }
	.dc-lema-vertical { align-items: flex-start; }
	.dc-formulario__fila { grid-template-columns: 1fr; }
	.dc-apoyos-contacto { grid-template-columns: 1fr; gap: 22px; }
	.dc-apoyos-contacto li { padding: 0; }
	.dc-apoyos-contacto li + li { border-left: 0; }
}

/* --- 20.8 Solicitud desde la ficha del vehiculo --- */

.dc-solicitud-ficha {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: 54px;
}

.dc-solicitud-ficha__intro h2 {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.6vw, 31px);
	line-height: 1.14;
}

.dc-solicitud-ficha__intro p {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.72;
	color: var(--dc-gris);
}

.dc-solicitud-ficha__ref {
	padding-top: 14px;
	border-top: 1px solid var(--dc-linea);
	font-size: 13px !important;
}

.dc-solicitud-ficha__ref strong { color: var(--dc-negro); }

/* Sobre la franja gris, los campos van en blanco para que se distingan. */
.dc-solicitud-ficha .dc-campo-form input,
.dc-solicitud-ficha .dc-campo-form textarea { background: #fff; }

@media (max-width: 900px) {
	.dc-solicitud-ficha { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   21. Blog
   ========================================================================== */

.dc-blog { padding-bottom: 56px; }

/* --- 21.1 La entrada destacada abre el listado --- */

.dc-destacada {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
	margin-bottom: 44px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 16, 17, .06), 0 8px 26px rgba(15, 16, 17, .07);
}

/* Se acota el alto: sin tope, una foto vertical estiraba la tarjeta entera y
   dejaba el texto perdido en medio de un mar de imagen. */
.dc-destacada__medio {
	display: block;
	overflow: hidden;
	max-height: 380px;
}

.dc-destacada__medio img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	max-height: 380px;
	object-fit: cover;
	transition: transform .4s;
}

.dc-destacada:hover .dc-destacada__medio img { transform: scale(1.03); }

.dc-destacada__cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 38px 42px;
}

.dc-destacada__titulo {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.5vw, 30px);
	line-height: 1.16;
}

.dc-destacada__titulo a { color: inherit; }
.dc-destacada__titulo a:hover { color: var(--dc-acento); }

.dc-destacada__extracto {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.74;
	color: var(--dc-gris);
}

/* --- 21.2 Rejilla --- */

.dc-rejilla-entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
	gap: 26px;
}

.dc-entrada {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 0;
	box-shadow: 0 1px 2px rgba(15, 16, 17, .06), 0 6px 20px rgba(15, 16, 17, .06);
	transition: transform .18s, box-shadow .18s;
}

.dc-entrada:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(15, 16, 17, .08), 0 14px 32px rgba(15, 16, 17, .12);
}

.dc-entrada__medio { display: block; overflow: hidden; }

.dc-entrada__medio img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .4s;
}

.dc-entrada:hover .dc-entrada__medio img { transform: scale(1.04); }

.dc-entrada__medio .dc-hueco,
.dc-destacada__medio .dc-hueco {
	margin: 0;
	width: 100%;
	min-height: 180px;
	aspect-ratio: 16 / 10;
	border: 0;
}

.dc-entrada__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 24px 26px;
}

/* Fecha y minutos de lectura, separados por un punto. */
.dc-entrada__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 11px;
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dc-gris);
}

.dc-entrada__meta > span + span { position: relative; padding-left: 18px; }

.dc-entrada__meta > span + span::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1px;
	background: var(--dc-linea);
}

/* Distintivo de la entrada mas reciente. */
.dc-entrada__marca {
	padding: 4px 9px;
	background: var(--dc-acento);
	color: #fff;
	letter-spacing: .11em;
}

.dc-entrada__marca + span { padding-left: 0 !important; }
.dc-entrada__marca + span::before { display: none !important; }

.dc-entrada__titulo {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.24;
	text-transform: none;
	letter-spacing: 0;
}

.dc-entrada__titulo a { color: inherit; }
.dc-entrada__titulo a:hover { color: var(--dc-acento); }

.dc-entrada__extracto {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.68;
	color: var(--dc-gris);
}

/* --- 21.3 El artículo --- */

.dc-articulo__cabecera { max-width: 860px; }

.dc-articulo__cabecera h1 {
	margin: 0 0 14px;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.1;
}

.dc-articulo__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--dc-titulo);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dc-gris);
}

.dc-articulo__meta i { font-style: normal; color: var(--dc-linea); }

/* La foto entra con el corte diagonal que remata el resto de la web. */
.dc-articulo__foto {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	margin-bottom: 40px;
	clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

.dc-articulo { padding-block: 46px 40px; }

/* Columna estrecha: son textos largos y a 1240 px no se leen. */
.dc-articulo__texto { max-width: 740px; margin-inline: auto; }

.dc-articulo__texto p { font-size: 16px; line-height: 1.82; }

.dc-articulo__texto h2 {
	margin: 1.7em 0 .6em;
	font-size: clamp(20px, 2.2vw, 26px);
	text-transform: none;
}

.dc-articulo__texto h3 { margin: 1.5em 0 .5em; text-transform: none; }
.dc-articulo__texto img { display: block; margin: 1.8em 0; }
.dc-articulo__texto ul,
.dc-articulo__texto ol { margin: 0 0 1.4em; padding-left: 1.3em; line-height: 1.8; }
.dc-articulo__texto li { margin-bottom: .5em; }

.dc-articulo__texto blockquote {
	margin: 1.8em 0;
	padding-left: 24px;
	border-left: 3px solid var(--dc-acento);
	font-size: 17px;
	font-style: italic;
	line-height: 1.7;
	color: var(--dc-carbon);
}

.dc-articulo__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	max-width: 740px;
	margin: 34px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--dc-linea);
}

.dc-articulo__etiquetas a {
	padding: 6px 13px;
	border: 1px solid var(--dc-linea);
	font-family: var(--dc-titulo);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dc-gris);
	transition: border-color .15s, color .15s;
}

.dc-articulo__etiquetas a:hover { border-color: var(--dc-negro); color: var(--dc-negro); }

/* --- 21.4 Salto al artículo anterior o siguiente --- */

.dc-salto-articulo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	padding-block: 40px;
}

.dc-salto-articulo__enlace {
	display: block;
	padding: 22px 26px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 16, 17, .06), 0 6px 20px rgba(15, 16, 17, .06);
	transition: transform .18s;
}

.dc-salto-articulo__enlace:hover { transform: translateY(-3px); }
.dc-salto-articulo__enlace--der { text-align: right; }

.dc-salto-articulo__enlace .dc-etiqueta { margin-bottom: 8px; padding-left: 0; }
.dc-salto-articulo__enlace .dc-etiqueta::before { display: none; }

.dc-salto-articulo__enlace strong {
	display: block;
	font-family: var(--dc-titulo);
	font-size: 15px;
	line-height: 1.3;
	color: var(--dc-negro);
}

.dc-salto-articulo__enlace:hover strong { color: var(--dc-acento); }

.dc-relacionadas { padding-bottom: 20px; }

/* --- 21.5 Estrecho --- */

@media (max-width: 900px) {
	.dc-destacada { grid-template-columns: 1fr; }
	.dc-destacada__medio img { min-height: 220px; }
	.dc-destacada__cuerpo { padding: 28px 26px 32px; }
	.dc-salto-articulo { grid-template-columns: 1fr; }
	.dc-salto-articulo__enlace--der { text-align: left; }
}

/* ==========================================================================
   22. Proceso de subasta en la ficha del vehiculo
   ========================================================================== */

.dc-proceso-subasta__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 36px;
}

.dc-proceso-subasta__encabezado h2 {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 31px);
	line-height: 1.14;
}

/* El aviso de que la puja es telefonica: es lo que mas se malinterpreta. */
.dc-proceso-subasta__nota {
	max-width: 330px;
	margin: 0 0 4px;
	padding-left: 18px;
	border-left: 3px solid var(--dc-acento);
	font-size: 13px;
	line-height: 1.62;
	color: var(--dc-gris);
}

.dc-proceso-subasta__pasos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}

.dc-proceso-subasta__pasos li {
	position: relative;
	padding: 24px 22px 26px;
	background: var(--dc-caja);
}

.dc-proceso-subasta__numero {
	position: absolute;
	top: 10px;
	right: 14px;
	font-family: var(--dc-titulo);
	font-size: 30px;
	font-style: italic;
	line-height: 1;
	color: rgba(35, 37, 39, .1);
}

.dc-proceso-subasta__pasos .dc-icono { color: var(--dc-acento); margin-bottom: 14px; }

.dc-proceso-subasta__pasos h3 {
	margin: 0 0 9px;
	font-size: 13px;
	line-height: 1.25;
	letter-spacing: .02em;
}

.dc-proceso-subasta__pasos p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.62;
	color: var(--dc-gris);
}

/* --- Documentos descargables --- */

.dc-documentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.dc-documento {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border: 2px solid var(--dc-negro);
	color: var(--dc-negro);
	transition: background .16s, color .16s;
}

.dc-documento > .dc-icono:first-child { flex: 0 0 auto; }
.dc-documento > .dc-icono:last-child { flex: 0 0 auto; margin-left: auto; transition: transform .18s; }
.dc-documento:hover > .dc-icono:last-child { transform: translateX(4px); }

.dc-documento span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.dc-documento strong {
	font-family: var(--dc-titulo);
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.dc-documento span span { font-size: 12px; color: var(--dc-gris); }

.dc-documento:hover { background: var(--dc-negro); color: #fff; }
.dc-documento:hover span span { color: rgba(255, 255, 255, .75); }

@media (max-width: 1100px) {
	.dc-proceso-subasta__pasos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.dc-proceso-subasta__pasos { grid-template-columns: 1fr; }
	.dc-proceso-subasta__encabezado { flex-direction: column; align-items: flex-start; gap: 18px; }
	.dc-proceso-subasta__nota { max-width: none; }
}

/* ==========================================================================
   23. Buscador a pantalla completa
   ========================================================================== */

.dc-buscador-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 7vh, 90px) 20px 20px;
	overflow-y: auto;
}

.dc-buscador-modal[hidden] { display: none; }

body.dc-modal-abierto { overflow: hidden; }

.dc-buscador-modal__velo {
	position: fixed;
	inset: 0;
	background: rgba(6, 7, 9, .82);
	backdrop-filter: blur(3px);
}

.dc-buscador-modal__caja {
	position: relative;
	width: 100%;
	max-width: 760px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(6, 7, 9, .5);
	animation: dc-entrar .18s ease-out;
}

@keyframes dc-entrar {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-buscador-modal__caja { animation: none; }
}

/* --- El campo --- */

.dc-buscador-modal__campo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
	border-bottom: 2px solid var(--dc-negro);
}

.dc-buscador-modal__campo > .dc-icono { flex: 0 0 auto; color: var(--dc-gris); }

.dc-buscador-modal__campo input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 22px 0;
	border: 0;
	background: none;
	font-family: var(--dc-titulo);
	font-size: clamp(17px, 2.2vw, 22px);
	color: var(--dc-negro);
}

.dc-buscador-modal__campo input:focus { outline: none; }

/* El aspa que pinta el propio navegador en los campos de busqueda duplicaba
   el boton de cerrar y confundia. */
.dc-buscador-modal__campo input::-webkit-search-cancel-button,
.dc-buscador-modal__campo input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.dc-buscador-modal__campo input::placeholder { color: #b6b8bc; font-weight: 400; }

.dc-buscador-modal__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 1px solid var(--dc-linea);
	color: var(--dc-gris);
	cursor: pointer;
	transition: background .15s, color .15s;
}

.dc-buscador-modal__cerrar:hover { background: var(--dc-negro); border-color: var(--dc-negro); color: #fff; }

/* --- Cuerpo --- */

.dc-buscador-modal__cuerpo {
	max-height: min(58vh, 520px);
	overflow-y: auto;
	padding: 22px 22px 8px;
}

/* Dentro del buscador los rotulos van desnudos: el filete rojo del resto del
   sitio aqui se lee como una raya suelta al lado de cada grupo. */
.dc-buscador-modal__cuerpo .dc-etiqueta { margin: 0 0 12px; padding-left: 0; }
.dc-buscador-modal__cuerpo .dc-etiqueta::before { display: none; }
.dc-buscador-modal__cuerpo .dc-etiqueta:not(:first-child) { margin-top: 26px; }

/* Atajos del estado inicial. */
.dc-buscador-modal__sugerencias ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-buscador-modal__sugerencias button,
.dc-buscador-modal__sugerencias a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px;
	background: var(--dc-caja);
	border: 1px solid transparent;
	font-family: var(--dc-titulo);
	font-size: 12.5px;
	color: var(--dc-negro);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.dc-buscador-modal__sugerencias button:hover,
.dc-buscador-modal__sugerencias a:hover { background: #fff; border-color: var(--dc-negro); }

.dc-buscador-modal__sugerencias button span {
	font-size: 11px;
	color: var(--dc-acento);
}

/* Atajo de marca: logotipo, nombre y numero de coches. */
.dc-atajo-marca { padding-left: 11px !important; }

.dc-atajo-marca img,
.dc-atajo-marca svg {
	flex: 0 0 auto;
	max-width: 30px;
	max-height: 22px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- Resultados --- */

.dc-resultados-coches,
.dc-resultados-paginas { margin: 0; padding: 0; list-style: none; }

.dc-resultados-coches a {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px;
	color: inherit;
	transition: background .14s;
}

.dc-resultados-coches a:hover { background: var(--dc-caja); }

.dc-resultados-coches img,
.dc-resultado__sinfoto {
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	object-fit: cover;
	background: var(--dc-caja);
}

.dc-resultado__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }

.dc-resultado__texto .dc-modalidad {
	align-self: flex-start;
	padding: 2px 7px;
	font-size: 9px;
	letter-spacing: .1em;
}

.dc-resultado__titulo {
	font-family: var(--dc-titulo);
	font-size: 14px;
	line-height: 1.25;
	color: var(--dc-negro);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dc-resultado__datos { font-size: 12px; color: var(--dc-gris); }

.dc-resultado__precio {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
}

.dc-resultado__precio strong {
	font-family: var(--dc-titulo);
	font-size: 15px;
	color: var(--dc-negro);
}

/* En subasta el importe es puja de salida: se dice, no se disfraza de precio. */
.dc-resultado__salida { font-size: 11.5px; color: var(--dc-gris); white-space: nowrap; }

.dc-resultado__vendido {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dc-acento);
}

.dc-resultados-paginas a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 10px;
	font-size: 14px;
	color: var(--dc-carbon);
	transition: background .14s;
}

.dc-resultados-paginas a:hover { background: var(--dc-caja); color: var(--dc-negro); }

.dc-resultados-paginas span {
	flex: 0 0 auto;
	padding: 3px 8px;
	border: 1px solid var(--dc-linea);
	font-family: var(--dc-titulo);
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--dc-gris);
}

.dc-buscador-modal__vacio,
.dc-buscador-modal__cargando {
	margin: 0;
	padding: 30px 4px;
	font-size: 14px;
	line-height: 1.66;
	color: var(--dc-gris);
}

.dc-buscador-modal__cargando { color: #b6b8bc; }

/* --- Pie --- */

.dc-buscador-modal__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	border-top: 1px solid var(--dc-linea);
	font-size: 12px;
	color: var(--dc-gris);
}

.dc-buscador-modal__pie kbd {
	padding: 2px 7px;
	background: var(--dc-caja);
	border: 1px solid var(--dc-linea);
	font-family: var(--dc-titulo);
	font-size: 10.5px;
}

.dc-buscador-modal__todos {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dc-titulo);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dc-negro);
}

.dc-buscador-modal__todos:hover { color: var(--dc-acento); }
.dc-buscador-modal__todos[hidden] { display: none; }

@media (max-width: 560px) {
	.dc-buscador-modal { padding: 0; }
	.dc-buscador-modal__caja { max-width: none; min-height: 100vh; }
	.dc-buscador-modal__cuerpo { max-height: none; }
	.dc-resultados-coches img,
	.dc-resultado__sinfoto { width: 72px; height: 56px; }
	.dc-resultado__precio { display: none; }
}

/* ==========================================================================
   24. Contacto y redes en la ficha del vehiculo
   ========================================================================== */

.dc-contacto-ficha { font-size: 14px; }

.dc-contacto-ficha a { display: flex; flex-direction: column; gap: 1px; color: var(--dc-carbon); }
.dc-contacto-ficha strong { font-size: 16px; color: var(--dc-negro); }

.dc-contacto-ficha small {
	font-family: var(--dc-titulo);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--dc-gris);
}

.dc-contacto-ficha a:hover strong { color: var(--dc-acento); }

/* --- Botones de red --- */

.dc-redes-vehiculo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--dc-linea);
}

.dc-red-vehiculo {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	font-family: var(--dc-titulo);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	transition: filter .15s;
}

.dc-red-vehiculo:hover { filter: brightness(1.12); color: #fff; }

/* Cada red con su color, que es como se reconocen de un vistazo. */
.dc-red-vehiculo--whatsapp { background: #25d366; }
.dc-red-vehiculo--facebook { background: #1877f2; }

.dc-red-vehiculo--instagram {
	background: linear-gradient(45deg, #f09433 0%, #dc2743 45%, #bc1888 100%);
}

/* Facebook e Instagram van al perfil, no al coche: pesan menos. */
.dc-red-vehiculo--facebook,
.dc-red-vehiculo--instagram { font-size: 11px; padding: 9px 14px; }

/* ==========================================================================
   25. Video de actualidad de la portada
   ========================================================================== */

.dc-video__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 26px;
}

.dc-video__encabezado h2 { margin: 0; font-size: clamp(22px, 2.6vw, 31px); }
.dc-video__texto { max-width: 420px; margin: 0 0 4px; font-size: 14px; line-height: 1.66; color: var(--dc-gris); }

.dc-video__marco {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--dc-negro);
	overflow: hidden;
}

.dc-video__marco iframe { width: 100%; height: 100%; border: 0; display: block; }

.dc-video__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background-color: var(--dc-negro);
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.dc-video__boton::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(6, 7, 9, .3);
	transition: background .2s;
}

.dc-video__boton:hover::before { background: rgba(6, 7, 9, .12); }

/* Triangulo de reproduccion sobre la placa roja de la marca. */
.dc-video__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	background: var(--dc-acento);
	transition: transform .2s;
}

.dc-video__play::after {
	content: "";
	margin-left: 5px;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 21px solid #fff;
}

.dc-video__boton:hover .dc-video__play { transform: scale(1.07); }

.dc-video__aviso { margin: 12px 0 0; font-size: 11.5px; color: var(--dc-gris); }

@media (max-width: 760px) {
	.dc-video__encabezado { flex-direction: column; align-items: flex-start; gap: 14px; }
	.dc-video__texto { max-width: none; }
	.dc-video__play { width: 60px; height: 60px; }
}