/*--------------------------------------------------------------
# Explorá el simulador (market3/sim-explorer)
--------------------------------------------------------------*/

.m3-simx {
	--simx-accent: var(--wp--preset--color--accent, #E3181C);
	--simx-line: rgba(255, 255, 255, 0.10);
	--simx-card: #0d0d0f;
	--simx-x: 50%;
	--simx-y: 50%;
	position: relative;
	color: var(--wp--preset--color--contrast, #FDFDFD);
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
}

.m3-simx__heading { text-align: center; }
.m3-simx__intro { text-align: center; max-width: 860px; margin-left: auto; margin-right: auto; }

.m3-simx__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	margin-top: 40px;
}

/* Foto
--------------------------------------------- */
.m3-simx__photo {
	position: relative;
	width: max-content;
	max-width: 100%;
	justify-self: center;
	border-radius: 1.4rem;
	overflow: hidden;
	background: #000;
	isolation: isolate;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.m3-simx__img {
	/* La foto nunca se recorta: los puntos se ubican en % sobre la imagen completa. */
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(88vh, 960px);
}
/* Vinieta: el fondo se atenua y la cabina queda protagonista */
.m3-simx__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 62% at 50% 52%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.45) 100%);
	z-index: 1;
}
/* Foco: oscurece todo menos la zona de la parte elegida */
.m3-simx__spot {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: radial-gradient(circle 150px at var(--simx-x) var(--simx-y), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 60px, rgba(0, 0, 0, 0.62) 150px);
	opacity: 0;
	transition: opacity .45s ease;
}
.m3-simx.has-active .m3-simx__spot { opacity: 1; }

/* Puntos
--------------------------------------------- */
.m3-simx__points { list-style: none; margin: 0; padding: 0; }
.m3-simx__point {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	z-index: 3;
	margin: 0;
}
.m3-simx__dot {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
	box-shadow: 0 0 0 0 rgba(227, 24, 28, 0);
}
.m3-simx__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #fff;
	transition: background-color .25s ease, transform .25s ease;
}
.m3-simx__ring {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.55);
	animation: m3simx-pulse 2.2s ease-out infinite;
	pointer-events: none;
}
.m3-simx__point:nth-child(2n) .m3-simx__ring { animation-delay: .7s; }
.m3-simx__point:nth-child(3n) .m3-simx__ring { animation-delay: 1.3s; }
@keyframes m3simx-pulse {
	0%   { transform: scale(1);   opacity: .9; }
	70%  { transform: scale(2.1); opacity: 0; }
	100% { transform: scale(2.1); opacity: 0; }
}
.m3-simx__dot:hover, .m3-simx__dot:focus-visible {
	transform: scale(1.12);
	border-color: var(--simx-accent);
	outline: none;
}
.m3-simx__dot[aria-selected="true"] {
	background: var(--simx-accent);
	border-color: var(--simx-accent);
	box-shadow: 0 0 0 6px rgba(227, 24, 28, 0.25), 0 0 24px rgba(227, 24, 28, 0.6);
	transform: scale(1.15);
}
.m3-simx__dot[aria-selected="true"] .m3-simx__ring { animation: none; opacity: 0; }
.m3-simx__dot[aria-selected="true"]::before { transform: scale(1.2); }

/* Etiqueta flotante del punto */
.m3-simx__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translate(-50%, 4px);
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.m3-simx__dot:hover .m3-simx__tip, .m3-simx__dot:focus-visible .m3-simx__tip { opacity: 1; transform: translate(-50%, 0); }
.m3-simx__dot[aria-selected="true"] .m3-simx__tip { opacity: 1; transform: translate(-50%, 0); border-color: rgba(227, 24, 28, 0.6); }

/* Linea
--------------------------------------------- */
.m3-simx__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
	overflow: visible;
}
.m3-simx__line-path {
	fill: none;
	stroke: var(--simx-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 6px rgba(227, 24, 28, 0.7));
	opacity: 0;
}
.m3-simx__line-end { fill: var(--simx-accent); opacity: 0; filter: drop-shadow(0 0 6px rgba(227, 24, 28, 0.9)); }
.m3-simx.has-active .m3-simx__line-path { opacity: 1; }
.m3-simx.has-active .m3-simx__line-end  { opacity: 1; transition: opacity .2s ease .45s; }

/* Tarjeta
--------------------------------------------- */
.m3-simx__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--simx-card);
	border: 1px solid var(--simx-line);
	border-radius: 1.2rem;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
	z-index: 5;
}
.m3-simx__card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--simx-accent);
	box-shadow: 0 0 14px rgba(227, 24, 28, 0.8);
	z-index: 1;
}
.m3-simx__card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #111 radial-gradient(circle at 50% 40%, #1c1c20 0, #0c0c0e 70%);
	overflow: hidden;
}
.m3-simx__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .35s ease, transform .6s ease;
}
.m3-simx__card-media.no-image .m3-simx__card-img { opacity: 0; }
.m3-simx__card-icon {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
}
.m3-simx__card-media.no-image .m3-simx__card-icon { display: flex; }
.m3-simx__card-body { padding: 22px 26px 24px; }
.m3-simx__card-label {
	display: inline-block;
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--simx-accent);
}
.m3-simx__card-title {
	margin: 6px 0 10px;
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 800;
	font-size: clamp(22px, 2.1vw, 30px);
	line-height: 1.1;
}
.m3-simx__card-text { margin: 0; font-size: 15px; line-height: 1.55; opacity: .9; }
.m3-simx__nav {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
}
.m3-simx__prev, .m3-simx__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0 0 4px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.m3-simx__prev:hover, .m3-simx__next:hover { background: var(--simx-accent); border-color: var(--simx-accent); transform: scale(1.08); }
.m3-simx__count {
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
	min-width: 34px;
	text-align: center;
}
/* Anchos intermedios: la tarjeta cede espacio para que la foto se vea más grande */
@media (min-width: 982px) and (max-width: 1300px) {
	.m3-simx__stage { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 36px; }
}

/* Entrada del contenido */
.m3-simx__card.is-swapping .m3-simx__card-body { animation: m3simx-in .45s cubic-bezier(.2,.8,.2,1) both; }
.m3-simx__card.is-swapping .m3-simx__card-img { animation: m3simx-zoom .6s ease both; }
@keyframes m3simx-in   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m3simx-zoom { from { opacity: 0; transform: scale(1.06); }    to { opacity: 1; transform: none; } }

/* Tablet y celular: una columna, tarjeta debajo, sin linea
--------------------------------------------- */
@media (max-width: 981px) {
	.m3-simx__stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.m3-simx__photo { width: auto; display: inline-block; }
	.m3-simx__line { display: none; }
	.m3-simx__photo { justify-self: center; max-width: 100%; }
	.m3-simx__img { max-height: min(80vh, 760px); }
	.m3-simx__card { grid-template-columns: 2fr 3fr; }
	.m3-simx__card-media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 600px) {
	.m3-simx__card { grid-template-columns: 1fr; }
	.m3-simx__card-media { aspect-ratio: 16 / 9; }
	.m3-simx__dot { width: 26px; height: 26px; }
	.m3-simx__tip { display: none; }
	.m3-simx__card-body { padding: 18px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.m3-simx__ring { animation: none; opacity: 0; }
	.m3-simx__card.is-swapping .m3-simx__card-body, .m3-simx__card.is-swapping .m3-simx__card-img { animation: none; }
	.m3-simx__spot, .m3-simx__dot { transition: none; }
}