/**
 * Widget "Zonas (grid)" — estilos base.
 * Valores por defecto tomados del diseño `widgets/zonas/zonas.png`:
 * imagen 2:1, badge navy #012148 con texto dorado #C9A96E pegado a la esquina
 * inferior izquierda de la imagen, título serif y descripción sans debajo.
 *
 * Todos los colores salen de variables con selector de 1 clase, para que los
 * controles de Elementor (.elementor-widget-… .vr-…, 2 clases) siempre ganen.
 */

.vr-zonas {
	--vr-zonas-cols: 4;
	--vr-zonas-zoom: 1.06;
	--vr-zonas-elevacion: 0px;
	--vr-zona-serif: "Times New Roman MT", "Times New Roman", Times, serif;
	--vr-zona-sans: "Open Sauce Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--vr-zona-titulo: #012148;
	--vr-zona-desc: #015AB2;
	--vr-zona-conteo: #6B7280;
	--vr-zona-flecha: #012148;

	display: grid;
	grid-template-columns: repeat(var(--vr-zonas-cols), minmax(0, 1fr));
	gap: 40px 30px;
}

.vr-zonas--overlay {
	--vr-zona-titulo: #FFFFFF;
	--vr-zona-desc: rgba(255, 255, 255, 0.75);
}

.vr-zonas__vacio {
	margin: 0;
	color: #6B7280;
}

/* ---------- Tarjeta ---------- */

.vr-zona {
	position: relative;
	display: flex;
	overflow: hidden;
	background-color: transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vr-zona:hover {
	transform: translateY(var(--vr-zonas-elevacion));
}

.vr-zona__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.vr-zona__link:focus-visible {
	outline: 2px solid #C9A96E;
	outline-offset: 2px;
}

/* ---------- Imagen ---------- */

.vr-zona__media {
	position: relative;
	flex: none;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background-color: #EEF1F5;
}

.vr-zona__media img,
.vr-zona__media-vacia {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Velo plano (color por control; vacío = imagen limpia) */
.vr-zona__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Degradado inferior: oculto salvo que el control lo active */
.vr-zona__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 75%);
}

.vr-zonas--zoom .vr-zona:hover .vr-zona__media img {
	transform: scale(var(--vr-zonas-zoom));
}

/* ---------- Textos ---------- */

.vr-zona__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 18px 20px;
}

.vr-zona__cuerpo {
	padding: 12px 0 0;
}

.vr-zona__titulo {
	margin: 0 0 4px;
	color: var(--vr-zona-titulo);
	font-family: var(--vr-zona-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.vr-zona__desc {
	margin: 0;
	color: var(--vr-zona-desc);
	font-family: var(--vr-zona-sans);
	font-size: 15px;
	line-height: 1.45;
}

/* ---------- Contador ---------- */

.vr-zona__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 12px 0 0;
}

.vr-zona__conteo {
	color: var(--vr-zona-conteo);
	font-family: var(--vr-zona-sans);
	font-size: 13px;
	line-height: 1.2;
}

/* Badge del diseño: navy, texto dorado, esquinas rectas, pegado a la imagen. */
.vr-zona__conteo--badge {
	position: absolute;
	inset: auto auto 0 0;
	z-index: 2;
	max-width: calc(100% - 20px);
	padding: 7px 14px;
	border-radius: 0;
	background-color: #012148;
	color: #C9A96E;
	font-family: var(--vr-zona-serif);
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

.vr-zona__conteo--hueco {
	flex: 1;
}

/* ---------- Flecha ---------- */

.vr-zona__flecha {
	display: inline-flex;
	align-items: center;
	color: var(--vr-zona-flecha);
	font-size: 16px;
	line-height: 1;
	transition: transform 0.3s ease;
}

.vr-zona__flecha svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.vr-zona:hover .vr-zona__flecha {
	transform: translateX(4px);
}