/* ============================================================
   SLIDER — carrusel con drag + snap (Productos y, a futuro,
   cualquier otro widget que reutilice [data-slider]).
   Markup propio del widget nativo GEA_Widget_Slider; ver
   inc/elementor/widgets/class-widget-slider.php. Este stylesheet
   solo se carga en las páginas que realmente usan ese widget
   (ver GEA_Widget_Slider::get_style_depends()).
   ============================================================ */

/* Mismo motivo que en growth: el widget entero es un solo bloque de
   ancho completo (el track necesita llegar borde a borde), así que se
   fuerza a 100% por si el contenedor que lo envuelve es un flex en
   columna sin align-items:stretch. */
.elementor-widget-gea_slider,
.elementor-widget-gea_slider > .elementor-widget-container {
	width: 100%;
}

.gea-elementor-landing-template .slider {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-left: max(24px, calc((100vw - var(--container)) / 2));
	padding-right: 24px;
	scroll-padding-left: max(24px, calc((100vw - var(--container)) / 2));
	scrollbar-width: none;
	cursor: grab;
}

/* "Inicio del carrusel: desde la orilla" — the first card starts at the
   page gutter instead of lining up with the 1240px content column. */
.gea-elementor-landing-template .gea-slider--start-edge .slider {
	padding-left: 24px;
	scroll-padding-left: 24px;
}

.gea-elementor-landing-template .slider::-webkit-scrollbar {
	display: none;
	height: 0;
}

.gea-elementor-landing-template .slider.is-grabbing {
	cursor: grabbing;
	user-select: none;
	scroll-behavior: auto;
}

.gea-elementor-landing-template .slide {
	flex: 0 0 clamp(260px, 27vw, 360px);
	scroll-snap-align: start;
}

.gea-elementor-landing-template .slide__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.gea-elementor-landing-template .slide__media {
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	overflow: hidden;
	transform: translateZ(0);
	transition: border-radius 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.gea-elementor-landing-template .slide__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-user-drag: none;
	user-select: none;
}

/* Product cut-outs (media_style:product): whole piece, centered with air,
   multiplied onto the paper tone so white photo backgrounds disappear. */
.gea-elementor-landing-template .slide__media--product {
	background: var(--paper);
}

.gea-elementor-landing-template .slide__media--product img {
	object-fit: contain;
	padding: 14%;
	mix-blend-mode: multiply;
}

.gea-elementor-landing-template .slide:hover .slide__media {
	border-radius: 80px;
}

.gea-elementor-landing-template .slide:hover .slide__media img {
	transform: scale(1.06);
}

.gea-elementor-landing-template .slide__num {
	display: block;
	margin: 20px 0 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--slate);
}

.gea-elementor-landing-template .slide__link h3 {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--ink);
	transition: color 0.25s ease;
}

.gea-elementor-landing-template .slide:hover h3 {
	color: var(--accent);
}

.gea-elementor-landing-template .slide__link p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--slate);
	margin: 0;
}

/* Tarjetas de testimonio — mismo <div data-slider> y mecánica drag+snap
   que las tarjetas de producto, distinto marcado (cita + autor, sin
   imagen ni enlace). Ver GEA_Widget_Slider::render(), layout=testimonial. */
.gea-elementor-landing-template .quote-card {
	flex: 0 0 clamp(300px, 36vw, 520px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--white);
	border: 1px solid var(--mist-warm);
	border-radius: var(--r-card);
	padding: 34px 32px 30px;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.gea-elementor-landing-template .quote-card:hover {
	border-color: var(--ink);
	transform: translateY(-4px);
}

.gea-elementor-landing-template .quote-card__mark {
	font-size: 52px;
	line-height: 0.6;
	font-weight: 300;
	color: var(--accent);
}

.gea-elementor-landing-template .quote-card blockquote {
	flex: 1;
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
}

.gea-elementor-landing-template .quote-card footer {
	display: grid;
	gap: 3px;
	padding-top: 20px;
	border-top: 1px solid var(--mist-cool);
}

.gea-elementor-landing-template .quote-card footer strong {
	font-size: 14.5px;
	font-weight: 500;
}

.gea-elementor-landing-template .quote-card footer span {
	font-size: 13px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--slate);
}

/* Las flechas viven en su propio ancho capado (como .container en el
   resto del sitio), aunque el track del slider sea full-bleed. */
.gea-slider-nav-wrap {
	width: min(var(--container, 1240px), 100% - 48px);
	margin-inline: auto;
}

.gea-elementor-landing-template .slider__nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 28px;
}

.gea-elementor-landing-template .circle-btn {
	/* El Kit global de Elementor trae un estilo `button { padding: 15px 28px }`
	   (Site Settings → Theme Style → Botones) que aplica a cualquier <button>
	   del sitio — sin este reset, esa esquina hacía el círculo ovalado. */
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 1px solid var(--mist-cool);
	border-radius: 50%;
	font-size: 17px;
	color: var(--ink);
	background: transparent;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Carousel arrows (Productos, Testimonios): brand-blue buttons so they stand
   out, light on hover. Same values as the Slider widget's defaults; this
   also covers arrows moved out of the widget ("Mostrar las flechas en"),
   which its {{WRAPPER}} color controls no longer reach. Ubicaciones keeps
   its light arrows (.slider__nav--light). */
.gea-elementor-landing-template .slider__nav:not(.slider__nav--light) .circle-btn {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.gea-elementor-landing-template .slider__nav:not(.slider__nav--light) .circle-btn:hover {
	background: #fff;
	border-color: var(--accent);
	color: var(--accent);
}

@media (max-width: 640px) {
	.gea-elementor-landing-template .slide {
		flex-basis: min(78vw, 320px);
	}

	.gea-elementor-landing-template .quote-card {
		flex-basis: min(82vw, 420px);
	}
}

/* ============================================================
   Large screens (≥1800 px: QHD, 4K, ultra-wide) — design-mockup's
   "PANTALLAS GRANDES" layer. Below 1800 px nothing changes. Elementor
   content uses its own Widescreen breakpoint (Kit, 1800 px).
   ============================================================ */
@media (min-width: 1800px) {
	.gea-elementor-landing-template .slide {
		flex-basis: clamp(360px, 19vw, 480px);
	}

	.gea-elementor-landing-template .slide h3 {
		font-size: 24px;
	}

	.gea-elementor-landing-template .slide p {
		font-size: 16px;
	}

	.gea-elementor-landing-template .quote-card {
		flex-basis: clamp(520px, 27vw, 640px);
	}

	.gea-elementor-landing-template .quote-card blockquote {
		font-size: clamp(24px, 1.3vw, 30px);
	}
}

/* ============================================================
   Inicio · Productos (design-mockup #productos): button under the title,
   arrows top right under the intro (moved there by slider.js, widget's
   "Mostrar las flechas en"), compact cards so the section fits one screen
   (card width also follows the window's height).
   ============================================================ */
.gea-products-head .slider__nav {
	margin-top: 0;
}

.gea-products-head__cta .elementor-button {
	white-space: nowrap;
}

#productos .slide {
	flex-basis: clamp(200px, min(24vw, 32vh), 340px);
}

#productos .slide__num {
	margin: 14px 0 6px;
}

#productos .slide h3 {
	font-size: 18px;
	margin-bottom: 6px;
}

#productos .slide p {
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* title, text, then button and arrows on one row */
@media (max-width: 900px) {
	.gea-products-head.e-con {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "label label" "title title" "intro intro" "cta nav";
		align-items: center;
		gap: 14px 16px;
	}

	.gea-products-head > .e-con,
	.gea-products-head > .e-con > .e-con:not(.gea-products-head__nav) {
		display: contents;
	}

	.gea-products-head > .e-con > .e-con:first-child {
		grid-area: label;
		display: flex;
	}

	/* the label's own bottom margin: the grid gap spaces it now */
	#productos .gea-products-head > .e-con > .e-con:first-child .elementor-widget-heading {
		margin-bottom: 0;
	}

	.gea-products-head .elementor-widget-heading {
		grid-area: title;
	}

	#productos .gea-products-head .elementor-widget-text-editor {
		grid-area: intro;
		width: 100%;
		max-width: 560px;
		padding-bottom: 0;
	}

	#productos .gea-products-head .gea-products-head__cta {
		grid-area: cta;
		justify-self: start;
		margin-top: 4px;
	}

	.gea-products-head .gea-products-head__nav {
		grid-area: nav;
		margin-top: 4px;
	}

	#productos .slide {
		flex-basis: clamp(220px, min(36vw, 32vh), 300px);
	}
}

@media (max-width: 640px) {
	#productos .slide {
		flex-basis: min(64vw, 280px);
	}

	#productos .slide__media {
		aspect-ratio: 4 / 3;
	}

	#productos .slide p {
		-webkit-line-clamp: 2;
	}

	/* #productos: outranks the widgets' own Elementor typography/padding */
	#productos .gea-products-head .elementor-widget-text-editor,
	#productos .gea-products-head .elementor-widget-text-editor p {
		font-size: 14.5px;
	}

	#productos .gea-products-head__cta .elementor-button {
		padding-inline: 18px;
		font-size: 14px;
	}

	.gea-products-head .slider__nav {
		gap: 8px;
	}
}

/* short phones (e.g. 375×667): lower image, no text */
@media (max-width: 640px) and (max-height: 720px) {
	#productos .slide__media {
		aspect-ratio: 16 / 10;
	}

	#productos .slide p {
		display: none;
	}

	#productos .gea-products-head h2.elementor-heading-title {
		font-size: 28px;
	}

	.gea-products-head.e-con {
		gap: 10px 16px;
	}

	#productos .slide {
		flex-basis: min(56vw, 260px);
	}

	#productos .slide__num {
		margin-top: 10px;
	}
}

@media (min-width: 1800px) {
	#productos .slide {
		flex-basis: clamp(320px, min(18vw, 38vh), 460px);
	}
}