/* ==========================================================================
   El Maletero — Puente con Elementor
   Asegura que lo construido en Elementor herede el lenguaje del tema
   y que los widgets propios se vean igual dentro y fuera del editor.
   ========================================================================== */

/* El tema no impone su contenedor dentro de Elementor */
.elementor-page .em-main,
.elementor-template-full-width .em-main { padding-block: 0; }

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con { max-width: var(--em-container); }

/* Tipografia coherente en los widgets de texto */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--em-font-display);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.elementor-widget-text-editor { font-family: var(--em-font-body); }

/* Botones nativos de Elementor con el acabado del tema */
.elementor-button {
	border-radius: var(--em-radius);
	font-family: var(--em-font-label);
	font-size: var(--em-fs-micro);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background-color 0.45s var(--em-ease), color 0.45s var(--em-ease);
}

/* Widgets WooCommerce de Elementor Pro: reutilizan la tarjeta del tema */
.elementor-widget-woocommerce-products ul.products { gap: clamp(1.75rem, 3vw, 3.25rem) clamp(0.75rem, 2vw, 1.75rem); }

/* --------------------------------------------------------------------------
   Widget: Hero editorial
   -------------------------------------------------------------------------- */

.em-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--em-hero-h, 88svh);
	overflow: hidden;
	color: var(--em-canvas);
}

.em-hero__bg { position: absolute; inset: 0; }

.em-hero__bg img,
.em-hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(var(--em-primary-rgb), 0.62) 0%, rgba(var(--em-primary-rgb), 0.12) 45%, rgba(var(--em-primary-rgb), 0.28) 100%);
}

.em-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--em-container);
	margin-inline: auto;
	padding: var(--em-space-lg) var(--em-gutter) clamp(2.5rem, 7vw, 5rem);
}

.em-hero--center { align-items: center; text-align: center; }
.em-hero--center .em-hero__inner { display: grid; justify-items: center; }

.em-hero__eyebrow { margin: 0 0 1.25rem; color: rgba(var(--em-canvas-rgb), 0.78); }

.em-hero__title {
	margin: 0;
	font-family: var(--em-font-display);
	font-size: var(--em-fs-mega);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.035em;
	max-width: 16ch;
}

.em-hero--center .em-hero__title { max-width: 20ch; }

.em-hero__text {
	margin: 1.5rem 0 0;
	max-width: 44ch;
	font-size: var(--em-fs-lead);
	color: rgba(var(--em-canvas-rgb), 0.85);
}

.em-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.em-hero .em-btn--ghost { color: var(--em-canvas); border-color: rgba(var(--em-canvas-rgb), 0.45); }
.em-hero .em-btn--ghost::before { background: var(--em-canvas); }
.em-hero .em-btn--ghost:hover { color: var(--em-primary); border-color: var(--em-canvas); }

.em-hero .em-btn--solid { background: var(--em-canvas); color: var(--em-primary); border-color: var(--em-canvas); }
.em-hero .em-btn--solid::before { background: var(--em-sand); }

.em-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	z-index: 3;
	transform: translateX(-50%);
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	color: rgba(var(--em-canvas-rgb), 0.75);
}

.em-hero__scroll::after {
	content: "";
	width: 1px;
	height: 40px;
	background: currentColor;
	transform-origin: top;
	animation: em-scrollhint 2.4s var(--em-ease) infinite;
}

@keyframes em-scrollhint {
	0% { transform: scaleY(0); opacity: 0; }
	40% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Widget: Historia partida
   -------------------------------------------------------------------------- */

.em-split {
	display: grid;
	gap: var(--em-space-md);
	align-items: center;
}

@media (min-width: 900px) {
	.em-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
	.em-split--reverse .em-split__media { order: 2; }
}

.em-split__media { position: relative; overflow: hidden; border-radius: var(--em-radius); }

.em-split__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1.3s var(--em-ease-out);
}

.em-split:hover .em-split__media img { transform: scale(1.04); }

.em-split__eyebrow { margin: 0 0 1.25rem; }
.em-split__title { margin: 0 0 1.25rem; font-size: var(--em-fs-h2); font-weight: 300; }
.em-split__text { max-width: 48ch; color: var(--em-muted); font-size: var(--em-fs-lead); }
.em-split__cta { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Widget: Marquesina
   -------------------------------------------------------------------------- */

.em-marquee {
	display: flex;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.em-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-right: clamp(1.5rem, 4vw, 4rem);
	animation: em-marquee var(--em-marquee-speed, 34s) linear infinite;
}

.em-marquee:hover .em-marquee__track { animation-play-state: paused; }

@keyframes em-marquee {
	to { transform: translateX(-100%); }
}

.em-marquee__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--em-font-display);
	font-size: clamp(2rem, 6vw, 4.5rem);
	font-weight: 300;
	line-height: 1;
	white-space: nowrap;
}

.em-marquee__item::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--em-sand);
	flex: 0 0 auto;
}

.em-marquee--products .em-marquee__item {
	font-family: var(--em-font-body);
	font-size: var(--em-fs-sm);
}

.em-marquee--products .em-marquee__item img {
	width: 88px;
	aspect-ratio: var(--em-card-ratio);
	object-fit: cover;
	border-radius: var(--em-radius);
}

@media (prefers-reduced-motion: reduce) {
	.em-marquee__track { animation: none; }
	.em-marquee { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Widget: Rejilla de colecciones
   -------------------------------------------------------------------------- */

.em-colgrid {
	display: grid;
	gap: clamp(0.5rem, 1.5vw, 1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.em-colgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.em-colgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* Ritmo editorial: la primera celda ocupa dos filas */
	.em-colgrid--editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); }
	.em-colgrid--editorial > :first-child { grid-row: span 2; }
	.em-colgrid--editorial > :first-child .em-coltile__frame { aspect-ratio: 3 / 4; height: 100%; }
}

.em-coltile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--em-radius);
	color: var(--em-canvas);
}

.em-coltile__frame {
	display: block;
	aspect-ratio: var(--em-card-ratio);
	background: rgba(var(--em-ink-rgb), 0.06);
}

.em-coltile__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.25s var(--em-ease-out);
}

.em-coltile:hover .em-coltile__frame img { transform: scale(1.06); }

.em-coltile__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(var(--em-primary-rgb), 0.68), transparent 55%);
	transition: opacity 0.6s var(--em-ease);
}

.em-coltile:hover .em-coltile__veil { opacity: 0.85; }

.em-coltile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1rem, 2.5vw, 2rem);
}

.em-coltile__count { color: rgba(var(--em-canvas-rgb), 0.7); margin: 0 0 0.5rem; }

.em-coltile__name {
	margin: 0;
	font-family: var(--em-font-display);
	font-size: clamp(1.25rem, 2.6vw, 2.25rem);
	font-weight: 300;
	line-height: 1.05;
}

.em-coltile__go {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-family: var(--em-font-label);
	font-size: var(--em-fs-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s var(--em-ease), transform 0.45s var(--em-ease);
}

.em-coltile:hover .em-coltile__go { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Widget: Fila de valores
   -------------------------------------------------------------------------- */

.em-values {
	display: grid;
	gap: 1px;
	background: var(--em-line);
	border-block: 1px solid var(--em-line);
}

@media (min-width: 700px) {
	.em-values--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.em-values--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.em-values--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.em-value {
	display: grid;
	gap: 0.75rem;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
	background: var(--em-canvas);
	transition: background-color 0.5s var(--em-ease);
}

.em-value:hover { background: rgba(var(--em-sand-rgb), 0.22); }

.em-value__icon { color: var(--em-primary); }

.em-value__title {
	margin: 0;
	font-family: var(--em-font-body);
	font-size: var(--em-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.em-value__text { margin: 0; font-size: var(--em-fs-xs); color: var(--em-muted); }