/**
 * Movento Oferta Card — estilos portados del prototipo propuesta-card-vehiculos.html
 * Scope: .mecw-oferta-card
 */

.mecw-oferta-card {
	--azul: #004680;
	--azul-oscuro: #00365F;
	--dark: #212322;
	--grey-1: #464B48;
	--grey-2: #808683;
	--grey-3: #C9CDCB;
	--light: #F1F3F2;
	--rojo: #DA291C;
	--naranja: #FF6A14;
	--white: #FFFFFF;
	--shadow: #2123221C;
	--font-heading: "Noto Sans", system-ui, sans-serif;
	--font-body: "Poppins", system-ui, sans-serif;
	--demo-text: var(--dark);
	--demo-bg-card: var(--white);
	--demo-success: #2A7D50;
	--radius-lg: 15px;
	--shadow-card: 0 10px 28px var(--shadow);
	--mecw-card-height: 580px;
	--mecw-card-width: 380px;
	width: 100%;
	max-width: var(--mecw-card-width);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	font-family: var(--font-body);
	color: var(--dark);
	line-height: 1.5;
}

.mecw-oferta-card *,
.mecw-oferta-card *::before,
.mecw-oferta-card *::after {
	box-sizing: border-box;
}

.mecw-oferta-card .vehicle-flip-card {
	width: 100%;
	height: var(--mecw-card-height);
	perspective: 1100px;
	perspective-origin: 50% 42%;
	position: relative;
	overflow: visible;
}

.mecw-oferta-card .vehicle-flip-card.is-flipped .vehicle-flip-inner {
	transform: rotateY(180deg);
}

.mecw-oferta-card .vehicle-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: center center;
	transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.mecw-oferta-card .vehicle-flip-card.is-flipping .vehicle-flip-inner {
	will-change: transform;
}

.mecw-oferta-card .vehicle-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: var(--radius-lg);
	overflow: visible;
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-flip-card.is-flipping .vehicle-face {
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
}

.mecw-oferta-card .vehicle-face-surface {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	background: var(--demo-bg-card);
	/* No translateZ(0): aplanaría los hijos con lift 3D */
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-front-surface,
.mecw-oferta-card .vehicle-back-surface {
	display: flex;
	flex-direction: column;
	height: 100%;
	pointer-events: auto;
	border-radius: inherit;
}

/* Cara frontal: overflow visible + preserve-3d para lift Z de badges/tags */
.mecw-oferta-card .vehicle-front-surface {
	overflow: visible;
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-face-surface.vehicle-front-surface {
	overflow: visible;
}

/* Cara trasera: clip al radio (sin floats 3D) */
.mecw-oferta-card .vehicle-back-surface {
	overflow: hidden;
}

.mecw-oferta-card .vehicle-face-front {
	transform: rotateY(0deg) translateZ(1px);
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-face-back {
	transform: rotateY(180deg) translateZ(1px);
	color: var(--demo-text);
	overflow: visible;
}

.mecw-oferta-card .vehicle-flip-card.is-flipped .vehicle-face-back {
	z-index: 3;
	pointer-events: auto;
}

.mecw-oferta-card .vehicle-flip-card.is-flipped .vehicle-face-front {
	z-index: 1;
	pointer-events: none;
}

.mecw-oferta-card .vehicle-flip-card:not(.is-flipped) .vehicle-face-front {
	z-index: 2;
}

.mecw-oferta-card .vehicle-flip-card:not(.is-flipped) .vehicle-face-back {
	pointer-events: none;
}

.mecw-oferta-card .vehicle-float-3d {
	--badge-lift: 44;
	--badge-perspective: 1100;
	position: absolute;
	z-index: 12;
	transform-style: preserve-3d;
	transform:
		translate3d(0, 0, calc(var(--badge-lift) * 1px))
		scale(calc((var(--badge-perspective) - var(--badge-lift)) / var(--badge-perspective)));
	pointer-events: none;
}

.mecw-oferta-card .vehicle-badges-3d {
	top: 0.85rem;
	left: 0.85rem;
	transform-origin: left top;
}

.mecw-oferta-card .vehicle-eco-badge-3d {
	right: 0.85rem;
	bottom: 0.85rem;
	transform-origin: right bottom;
}

.mecw-oferta-card .vehicle-price-tags-3d {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0.3rem;
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(11.5rem, 46%);
	transform-origin: right center;
	z-index: 12;
}

.mecw-oferta-card .vehicle-front-badges {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mecw-oferta-card .vehicle-float-3d .vehicle-front-badge,
.mecw-oferta-card .vehicle-float-3d .vehicle-eco-badge,
.mecw-oferta-card .vehicle-float-3d .vehicle-availability {
	box-shadow:
		0 4px 12px rgb(33 35 34 / 0.2),
		0 1px 0 rgb(255 255 255 / 0.22) inset;
}

.mecw-oferta-card .vehicle-flip-card.is-flipping .vehicle-float-3d {
	will-change: transform;
}

.mecw-oferta-card .vehicle-front-header,
.mecw-oferta-card .vehicle-back-header {
	flex-shrink: 0;
	padding: 15px;
	background: var(--white);
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	overflow: hidden;
	min-width: 0;
}

.mecw-oferta-card .vehicle-title {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--dark);
	margin: 0;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.mecw-oferta-card .vehicle-version {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--grey-2);
	margin: 0.25rem 0 0;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.mecw-oferta-card .vehicle-media {
	--mecw-media-inner-height: 180px;
	--mecw-media-pad-top: 15px;
	--mecw-media-pad-bottom: 15px;
	--mecw-media-pad-left: 15px;
	--mecw-media-pad-right: 15px;
	position: relative;
	flex: 0 0 auto;
	height: calc(var(--mecw-media-inner-height) + var(--mecw-media-pad-top) + var(--mecw-media-pad-bottom));
	min-height: 0;
	margin: 0 15px 15px;
	border-radius: 15px;
	overflow: visible;
	background: var(--light);
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-media-inner {
	position: absolute;
	top: var(--mecw-media-pad-top);
	right: var(--mecw-media-pad-right);
	bottom: auto;
	left: var(--mecw-media-pad-left);
	width: auto;
	height: var(--mecw-media-inner-height);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.mecw-oferta-card .vehicle-eco-badge {
	position: relative;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--white);
	border: 2px solid var(--white);
}

.mecw-oferta-card .vehicle-eco-badge .vehicle-eco-leaf {
	font-size: 0.45rem;
	line-height: 1;
	opacity: 0.9;
}

.mecw-oferta-card .vehicle-eco-badge--cero { background: #0B7A3E; }
.mecw-oferta-card .vehicle-eco-badge--eco { background: #1FAA59; }
.mecw-oferta-card .vehicle-eco-badge--c { background: #8BC34A; color: var(--dark); }
.mecw-oferta-card .vehicle-eco-badge--b { background: #FBC02D; color: var(--dark); }
.mecw-oferta-card .vehicle-eco-badge--none { background: var(--grey-2); font-size: 0.55rem; }

.mecw-oferta-card .vehicle-icon {
	flex-shrink: 0;
	line-height: 1;
}

.mecw-oferta-card .vehicle-icon--sm { font-size: 0.65rem; }
.mecw-oferta-card .vehicle-icon--md { font-size: 0.8rem; }

.mecw-oferta-card .vehicle-front-badge {
	font-family: var(--font-body);
	font-size: 0.55rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.24rem 0.5rem;
	border-radius: 15px;
	color: var(--white);
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mecw-oferta-card .vehicle-front-badge--naranja { background: var(--naranja); }

.mecw-oferta-card .vehicle-front-details {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 15px;
	color: var(--demo-text);
	overflow: visible;
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-rating {
	display: flex;
	gap: 0.15rem;
	font-size: 0.85rem;
	color: #F5D76E;
}

.mecw-oferta-card .vehicle-rating .fa-regular {
	opacity: 0.45;
}

.mecw-oferta-card .vehicle-desc {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--grey-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

.mecw-oferta-card .vehicle-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.mecw-oferta-card .vehicle-meta-chip {
	font-size: 0.62rem;
	font-weight: 500;
	padding: 0.2rem 0.5rem;
	border-radius: 15px;
	background: var(--light);
	color: var(--grey-1);
	border: 1px solid var(--grey-3);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mecw-oferta-card .vehicle-price-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 15px;
	border-radius: 15px;
	background: var(--light);
	border: 1px solid var(--grey-3);
	transform-style: preserve-3d;
}

.mecw-oferta-card .vehicle-price-main {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 1 1 auto;
	min-width: 0;
}

.mecw-oferta-card .vehicle-price-icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--azul) 12%, var(--white));
	color: var(--azul);
	font-size: 0.75rem;
}

.mecw-oferta-card .vehicle-price-copy {
	min-width: 0;
}

.mecw-oferta-card .vehicle-price {
	line-height: 1.1;
}

.mecw-oferta-card .vehicle-price-value {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--azul);
	line-height: 1.1;
}

.mecw-oferta-card .vehicle-price-note {
	display: block;
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 500;
	color: var(--grey-2);
	margin-top: 0.1rem;
	/* Evita heredar tipografía/color del importe cuando Elementor estiliza .vehicle-price-value */
	font-style: normal;
}

.mecw-oferta-card .vehicle-availability {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 0.6rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.32rem 0.55rem;
	border-radius: 15px;
	white-space: nowrap;
	background: color-mix(in srgb, var(--demo-success) 18%, transparent);
	color: var(--demo-success);
}

.mecw-oferta-card .vehicle-availability--urgente {
	background: color-mix(in srgb, var(--rojo) 15%, transparent);
	color: var(--rojo);
}

.mecw-oferta-card .vehicle-availability--entrega {
	background: color-mix(in srgb, var(--azul) 14%, transparent);
	color: var(--azul);
}

.mecw-oferta-card .vehicle-availability .vehicle-icon {
	flex-shrink: 0;
	font-size: 0.62rem;
}

.mecw-oferta-card .vehicle-availability span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mecw-oferta-card .vehicle-front-actions,
.mecw-oferta-card .vehicle-back-actions {
	flex-shrink: 0;
	display: flex;
	margin-top: auto;
	position: relative;
	z-index: 10;
}

.mecw-oferta-card .vehicle-btn-split {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 2.85rem;
	padding: 15px;
	border: none;
	font-family: var(--font-heading);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
	color: var(--white);
}

.mecw-oferta-card .vehicle-btn-split:hover { filter: brightness(1.08); color: var(--white); }

.mecw-oferta-card .vehicle-btn-split--dark {
	background: var(--dark);
	color: var(--white);
}

.mecw-oferta-card .vehicle-btn-split--blue {
	background: var(--azul);
	color: var(--white);
}

.mecw-oferta-card .vehicle-front-actions .vehicle-btn-split:first-child,
.mecw-oferta-card .vehicle-back-actions .vehicle-btn-split:first-child {
	border-bottom-left-radius: var(--radius-lg);
}

.mecw-oferta-card .vehicle-front-actions .vehicle-btn-split:last-child,
.mecw-oferta-card .vehicle-back-actions .vehicle-btn-split:last-child {
	border-bottom-right-radius: var(--radius-lg);
}

.mecw-oferta-card .vehicle-front-actions .vehicle-btn-split:only-child,
.mecw-oferta-card .vehicle-back-actions .vehicle-btn-split:only-child {
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

.mecw-oferta-card .vehicle-back-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 15px;
	overflow: hidden;
}

.mecw-oferta-card .vehicle-back-specs {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 0.2rem;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--grey-3) transparent;
}

.mecw-oferta-card .vehicle-back-section-label {
	font-family: var(--font-heading);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--azul);
	margin: 0 0 0.45rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.mecw-oferta-card .vehicle-back-section-label + .vehicle-back-section-label,
.mecw-oferta-card .vehicle-tech-grid + .vehicle-back-section-label,
.mecw-oferta-card .vehicle-spec-list + .vehicle-back-section-label {
	margin-top: 0.65rem;
}

.mecw-oferta-card .vehicle-tech-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem;
	margin-bottom: 0.65rem;
}

.mecw-oferta-card .vehicle-tech-item {
	background: var(--light);
	border-radius: 15px;
	padding: 15px;
	border: 1px solid var(--grey-3);
}

.mecw-oferta-card .vehicle-tech-item strong {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.58rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--grey-2);
	margin-bottom: 0.15rem;
}

.mecw-oferta-card .vehicle-tech-item span {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--dark);
}

.mecw-oferta-card .vehicle-equipment {
	margin-bottom: 0.5rem;
}

.mecw-oferta-card .vehicle-equipment ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.mecw-oferta-card .vehicle-equipment li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-size: 0.7rem;
	color: var(--grey-1);
}

.mecw-oferta-card .vehicle-equipment li .vehicle-icon {
	margin-top: 0.1rem;
	color: var(--azul);
}

.mecw-oferta-card .vehicle-spec-list {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.mecw-oferta-card .vehicle-spec-list li {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.72rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--grey-3);
}

.mecw-oferta-card .vehicle-spec-list li:last-child {
	border-bottom: none;
}

.mecw-oferta-card .vehicle-spec-list .label {
	color: var(--grey-2);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mecw-oferta-card .vehicle-spec-list .value {
	font-weight: 500;
	text-align: right;
	color: var(--dark);
}

@media (max-width: 480px) {
	.mecw-oferta-card {
		--mecw-card-height: 560px;
	}
	.mecw-oferta-card .vehicle-title { font-size: 0.88rem; }
	.mecw-oferta-card .vehicle-price-value { font-size: 1.3rem; }
	.mecw-oferta-card .vehicle-availability { font-size: 0.58rem; padding: 0.3rem 0.45rem; }
}