/* EME Servicio Galería — estilos del front-end */

.esg-gallery-widget {
	width: 100%;
}

.esg-main-media {
	position: relative;
	width: 100%;
	height: 520px;
	border-radius: 14px;
	overflow: hidden;
	background: #eef1f2;
}

.esg-main-media-inner {
	width: 100%;
	height: 100%;
}

/* Imagen fija al hacer scroll (sticky) — solo en escritorio.
   DESACTIVADO A PROPÓSITO desde la v1.12.1: en la estructura real de
   columnas de Elementor (ver incidente reportado por el cliente) el sticky
   no se sostenía — la imagen se despegaba casi enseguida en vez de acompañar
   el scroll, dejando un hueco en blanco debajo. Elementor arma las columnas
   con contenedores flex y, según la versión/tema, algún ancestro con
   overflow no-visible o sin la altura correcta, lo cual rompe position:sticky
   de forma que no se puede resolver únicamente desde el CSS de este widget
   sin ver/controlar esa estructura. El control "Fijar imagen al hacer
   scroll" queda en el panel de Elementor (no se quitó, para no romper nada
   de lo ya guardado en las páginas), pero el selector de abajo está
   comentado — es decir, activarlo hoy no aplica ningún estilo, la imagen se
   comporta igual que si estuviera desactivado. Si en el futuro se resuelve
   la causa de raíz (por ejemplo ajustando overflow en la sección/columna de
   Elementor), esta regla se puede reactivar sacando el comentario.
@media (min-width: 1025px) {
	.esg-gallery--sticky-yes .esg-main-media {
		position: sticky;
		top: 24px;
	}
}
*/

/* Reset defensivo: muchos temas de WordPress traen reglas globales tipo
   `img { height: auto; max-width: 100%; }` que pueden ganarle a nuestro
   height:100% según el orden de carga de los estilos, dejando la imagen con
   su alto natural en vez de estirarse a cubrir todo el contenedor (se ve
   como una franja del fondo gris de .esg-main-media asomando debajo de la
   imagen). Forzamos acá explícitamente para que siempre cubra el 100% del
   contenedor sin importar qué reset traiga el tema. */
.esg-main-media .esg-main-el {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	display: none;
	border: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.esg-main-el.is-active {
	display: block;
}

/* Video vertical (celular / 9:16): cuando el item activo es un video marcado
   como vertical en el editor del producto, el contenedor principal cambia de
   proporción angosta y alta en vez de la caja ancha por defecto, y el video
   se ve completo (sin recortar los costados como hace object-fit:cover). La
   altura fija que venga de Elementor (control "Altura" del widget) queda
   anulada acá a propósito: con un video vertical, dejar esa altura fija
   ancha volvería a producir el mismo recorte que se quiere evitar. */
.esg-main-media.esg-main-media--vertical {
	/* !important acá a propósito: el control "Altura" de Elementor genera
	   su propio CSS con `height: {{SIZE}}{{UNIT}}` sobre `.esg-main-media`
	   con la misma especificidad, y según el orden de carga puede ganarle
	   a esta regla. Como este es un caso explícito de "anular esa altura
	   fija cuando el video activo es vertical", forzamos acá para que
	   siempre se respete sin importar el orden de encolado. */
	height: auto !important;
	aspect-ratio: 9 / 16;
	max-height: 80vh;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.esg-main-media--vertical .esg-main-el {
	object-fit: contain;
	background: #000;
}

@media (max-width: 640px) {
	.esg-main-media.esg-main-media--vertical {
		max-height: 70vh;
	}
}

.esg-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 3;
	background: #ffffff;
	color: #12384f;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.esg-thumb-row {
	display: flex;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.esg-thumb {
	position: relative;
	width: 88px;
	height: 88px;
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid transparent;
	opacity: 0.65;
	cursor: pointer;
	padding: 0;
	background: none;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.esg-thumb:hover {
	opacity: 0.9;
}

.esg-thumb.is-active {
	opacity: 1;
	border-color: #2f8fb3;
}

.esg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.esg-thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 56, 79, 0.35);
	color: #fff;
	font-size: 16px;
}

@media (max-width: 640px) {
	.esg-main-media {
		height: 320px;
	}
	.esg-thumb {
		width: 64px;
		height: 64px;
	}
}

/* ===== Datos Rápidos con Ícono (esg-meta-icons) =====
   Estructura mínima: todo lo visual (colores, tamaños, tipografía,
   espaciados, bordes) se controla desde el panel de estilos de Elementor. */

.esg-meta-grid {
	display: grid;
	border-left: none;
	border-right: none;
}

.esg-meta-item {
	display: flex;
	align-items: center;
}

.esg-meta-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.esg-meta-icon.shape-circle {
	border-radius: 50%;
}

.esg-meta-icon.shape-none {
	background: none !important;
}

.esg-meta-icon svg {
	fill: none;
}

.esg-meta-text {
	display: flex;
	flex-direction: column;
}

.esg-meta-title {
	display: block;
}

.esg-meta-value {
	display: block;
}

/* ===== Precio + Cotizar por WhatsApp (esg-price-cta) =====
   Estructura mínima: todo lo visual se controla desde Elementor. */

.esg-price-cta-widget {
	display: flex;
	flex-direction: column;
}

.esg-price-block {
	display: flex;
	flex-direction: column;
}

.esg-price-title {
	margin: 0;
}

.esg-price-note {
	margin: 0;
}

.esg-whatsapp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.esg-whatsapp-btn svg {
	flex-shrink: 0;
}

.esg-location-note {
	display: flex;
	align-items: center;
	gap: 6px;
}

.esg-location-note svg {
	flex-shrink: 0;
}

/* ===== Experiencia + Preguntas Frecuentes (esg-experience-faq) =====
   Estructura mínima: todo lo visual se controla desde Elementor. */

.esg-experience-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}

.esg-exp-copy {
	display: flex;
	flex-direction: column;
}

.esg-exp-title-regular,
.esg-exp-title-italic {
	margin: 0;
}

.esg-exp-paragraph {
	margin: 12px 0 0;
}

.esg-faq {
	display: flex;
	flex-direction: column;
}

.esg-faq-heading {
	margin: 0 0 18px;
}

.esg-faq .esg-faq-item {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.esg-faq .esg-faq-question-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	user-select: none;
}

.esg-faq .esg-faq-question {
	margin: 0;
}

.esg-faq .esg-faq-icon {
	flex-shrink: 0;
	font-weight: 300;
	transition: transform 0.2s ease;
	line-height: 1;
}

.esg-faq .esg-faq-item.is-open .esg-faq-icon {
	transform: rotate(45deg);
}

.esg-faq .esg-faq-answer-wrap {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.esg-faq .esg-faq-item.is-open .esg-faq-answer-wrap {
	max-height: 500px;
}

.esg-faq .esg-faq-answer {
	margin: 0 0 18px;
}

@media (max-width: 780px) {
	.esg-experience-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Descripción Larga (esg-long-description) =====
   Estructura mínima: todo lo visual se controla desde Elementor. */

.esg-description-heading {
	margin: 0;
}

.esg-description-content p:last-child {
	margin-bottom: 0 !important;
}

/* ===== Secciones: Descripción, Beneficios y FAQ (esg-tabs) =====
   3 secciones apiladas y siempre visibles (sin pestañas). Estructura
   mínima: todo lo visual se controla desde Elementor. */

.esg-tabs-widget {
	width: 100%;
}

/* Alineación centrada: el texto ya queda centrado por text-align (inline en
   el widget), acá solo hace falta centrar los elementos que son bloques con
   ancho propio (tarjetas de beneficio dentro del grid, íconos, botón/CTA
   dentro de cada card) para que no quede el texto centrado pero la caja
   pegada a la izquierda. */
.esg-stack-align-center .esg-benefit-card {
	align-items: center;
}

.esg-stack-align-center .esg-tab-description {
	margin-left: auto;
	margin-right: auto;
}

.esg-stack-align-center .esg-stack-title-row {
	justify-content: center;
}

/* --- Fila título + línea (Beneficios y FAQ) --- */
.esg-stack-title-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.esg-stack-title-row h2 {
	margin: 0;
}

.esg-stack-title-line {
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: #e4eaec;
	transform: translateY(-8px);
}

.esg-stack-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.esg-stack-kicker-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.esg-stack-kicker-text {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 11px;
	font-weight: 700;
}

.esg-stack-accent {
	font-style: italic;
}

.esg-tab-description p:last-child {
	margin-bottom: 0 !important;
}

.esg-tab-empty {
	color: inherit;
}

/* --- Beneficios: tarjetas con ícono --- */
.esg-benefits-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.esg-benefit-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.esg-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 18px;
}

.esg-benefit-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
}

/* Tarjetas de Pasos: el círculo de "ícono" reutilizado muestra el número del
   paso (1, 2, 3...) en vez de un SVG — mismo contenedor, mismo estilo de
   fondo/tamaño que el ícono de Beneficios, solo cambia el contenido. */
.esg-step-number {
	font-weight: 600;
	line-height: 1;
	font-size: 16px;
}

.esg-benefit-title {
	margin: 0 0 8px;
}

.esg-benefit-text {
	margin: 0;
}

/* --- FAQ: tarjetas con chevron --- */
.esg-tab-faq .esg-faq-item {
	overflow: hidden;
}

.esg-tab-faq .esg-faq-question-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	user-select: none;
}

.esg-tab-faq .esg-faq-question {
	margin: 0;
}

.esg-tab-faq .esg-faq-chevron {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	transition: transform 0.25s ease;
}

.esg-tab-faq .esg-faq-item.is-open .esg-faq-chevron {
	transform: rotate(180deg);
}

.esg-tab-faq .esg-faq-answer-wrap {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}


.esg-tab-faq .esg-faq-answer {
	margin: 0;
}



/* Mobile safety for Descripción / Beneficios / FAQ. Elementor keeps control of
   the visual values; these rules only prevent overflow and awkward accordion
   behavior on narrow screens. */
.esg-tab-description,
.esg-benefit-card,
.esg-tab-faq,
.esg-faq-question,
.esg-faq-answer {
	min-width: 0;
	overflow-wrap: anywhere;
}

.esg-tab-description img,
.esg-tab-description video,
.esg-tab-description iframe,
.esg-tab-description figure {
	max-width: 100%;
}

.esg-tab-description img,
.esg-tab-description video {
	height: auto;
}

.esg-tab-description table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.esg-benefits-grid {
	min-width: 0;
}

.esg-tab-faq .esg-faq-answer-wrap {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

/* La altura abierta se calcula desde JS (scrollHeight), para que una respuesta
   larga nunca quede cortada en móvil. */
.esg-tab-faq .esg-faq-item.is-open .esg-faq-answer-wrap {
	max-height: none;
}

@media (max-width: 767px) {
	.esg-tabs-widget,
	.esg-stack-description,
	.esg-stack-benefits,
	.esg-stack-steps,
	.esg-stack-faq,
	.esg-tab-description,
	.esg-tab-faq {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.esg-stack-title-row {
		align-items: flex-start;
		gap: 10px;
	}

	.esg-stack-title-row h2 {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	/* En una pantalla angosta, la línea decorativa pasa debajo del título en
	   vez de comprimirlo lateralmente. */
	.esg-stack-title-line {
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		transform: none;
	}

	.esg-tab-description ul,
	.esg-tab-description ol {
		padding-left: 1.25em;
	}

	.esg-tab-faq .esg-faq-question-row {
		align-items: flex-start;
		gap: 12px;
	}

	.esg-tab-faq .esg-faq-question {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.35;
	}

	.esg-tab-faq .esg-faq-chevron {
		margin-top: 0.15em;
	}

	.esg-tab-faq .esg-faq-answer {
		line-height: 1.55;
	}
}

/* ===== Carrusel: Sigue Explorando (esg-related-carousel) =====
   Estructura mínima: todo lo visual se controla desde Elementor. */

.esg-carousel-widget {
	width: 100%;
}

.esg-carousel-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.esg-carousel-eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
}

.esg-carousel-title {
	margin: 8px 0 0;
}

.esg-carousel-subtitle {
	margin: 0;
	max-width: 320px;
	text-align: right;
}

.esg-carousel-body {
	display: flex;
	align-items: center;
	gap: 16px;
}

.esg-carousel-arrow {
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.esg-carousel-arrow svg {
	width: 18px;
	height: 18px;
}

.esg-carousel-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.esg-carousel-viewport {
	flex: 1;
	overflow: hidden;
}

.esg-carousel-track {
	--esg-cards-visible: 3;
	--esg-cards-gap: 24px;
	display: flex;
	gap: var(--esg-cards-gap);
	transition: transform 0.35s ease;
}

.esg-carousel-card {
	flex: 0 0 calc((100% - (var(--esg-cards-visible) - 1) * var(--esg-cards-gap)) / var(--esg-cards-visible));
	text-decoration: none;
	display: block;
}

.esg-carousel-card-image {
	width: 100%;
	background-size: cover;
	background-position: center;
	margin-bottom: 16px;
}

.esg-carousel-card-title {
	margin: 0 0 6px;
}

.esg-carousel-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.esg-carousel-card-link svg {
	width: 15px;
	height: 15px;
	transition: transform 0.2s ease;
}

.esg-carousel-card:hover .esg-carousel-card-link svg {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.esg-carousel-track {
		--esg-cards-visible: 2;
	}
}

@media (max-width: 600px) {
	.esg-carousel-track {
		--esg-cards-visible: 1;
	}
	.esg-carousel-subtitle {
		display: none;
	}
}

/* ===== Catálogo de Servicios + Filtros — v1.18 ===== */
.esg-service-catalog {
	--esg-catalog-accent: #15566a;
	--esg-catalog-text: #173b46;
	--esg-catalog-border: #cbd7d7;
	--esg-catalog-bg: #faf9f4;
	position: relative;
	width: 100%;
	color: var(--esg-catalog-text);
}

/* El widget no imprime título: el encabezado de la sección se arma afuera
   con Elementor. Si se muestra el contador, queda solo y alineado a la derecha. */
.esg-catalog-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	margin: 0 0 18px;
}

.esg-catalog-count {
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	color: #5c737a;
}

.esg-catalog-experience {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.esg-catalog-chip {
	appearance: none;
	-webkit-appearance: none;
	min-height: 44px;
	padding: 12px 22px;
	border: 1px solid var(--esg-catalog-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 15px;
	line-height: 1.1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.esg-catalog-chip:hover {
	border-color: var(--esg-catalog-accent);
}

.esg-catalog-chip.is-active {
	background: var(--esg-catalog-accent);
	border-color: var(--esg-catalog-accent);
	color: #fff;
}

/* En desktop el contenedor del modal se vuelve transparente para que los
   filtros sigan ocupando su lugar normal. En móvil se transforma en bottom sheet. */
.esg-catalog-mobile-filter-trigger {
	display: none;
}

/* Las opciones de experiencia duplicadas para el popup móvil no deben
   aparecer en escritorio. */
.esg-catalog-mobile-experience {
	display: none;
}

.esg-catalog-mobile-filter-shell,
.esg-catalog-mobile-filter-panel,
.esg-catalog-mobile-filter-panel-body {
	display: contents;
}

.esg-catalog-mobile-filter-backdrop,
.esg-catalog-mobile-filter-panel-header,
.esg-catalog-mobile-filter-panel-footer {
	display: none;
}

.esg-catalog-toolbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	position: relative;
	z-index: 20;
}

/* Dropdown personalizado: NO es un <select>. */
.esg-catalog-dropdown {
	position: relative;
	min-width: 180px;
}

.esg-catalog-dropdown.is-open {
	z-index: 10000;
}

.esg-catalog-dropdown-trigger {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	min-height: 50px;
	padding: 0 16px;
	border: 1px solid var(--esg-catalog-border);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 15px;
	line-height: 1.15;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.esg-catalog-dropdown-trigger:hover,
.esg-catalog-dropdown.is-open .esg-catalog-dropdown-trigger,
.esg-catalog-dropdown.has-value .esg-catalog-dropdown-trigger {
	border-color: var(--esg-catalog-accent);
	background: #fff;
}

.esg-catalog-dropdown.is-open .esg-catalog-dropdown-trigger {
	box-shadow: 0 0 0 3px rgba(21, 86, 106, .08);
}

.esg-catalog-dropdown-trigger:focus-visible,
.esg-catalog-chip:focus-visible,
.esg-catalog-dropdown-option:focus-visible {
	outline: 2px solid rgba(21, 86, 106, .3);
	outline-offset: 2px;
}

.esg-catalog-dropdown-chevron {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	pointer-events: none;
	transition: transform .18s ease;
}

.esg-catalog-dropdown.is-open .esg-catalog-dropdown-chevron {
	transform: rotate(180deg);
}

.esg-catalog-dropdown-menu {
	position: absolute;
	z-index: 9999;
	top: calc(100% + 8px);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: min(360px, calc(100vw - 32px));
	max-height: min(360px, 55vh);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 7px;
	border: 1px solid #d9e1e2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 42px rgba(18, 57, 67, .15), 0 4px 12px rgba(18, 57, 67, .08);
	scrollbar-width: thin;
	scrollbar-color: rgba(21, 86, 106, .28) transparent;
}

.esg-catalog-dropdown-menu[hidden] {
	display: none !important;
}

.esg-catalog-dropdown-menu::-webkit-scrollbar {
	width: 8px;
}

.esg-catalog-dropdown-menu::-webkit-scrollbar-track {
	background: transparent;
}

.esg-catalog-dropdown-menu::-webkit-scrollbar-thumb {
	background: rgba(21, 86, 106, .22);
	border: 2px solid transparent;
	border-radius: 999px;
	background-clip: padding-box;
}

.esg-catalog-dropdown-option {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	min-height: 42px;
	padding: 10px 11px 10px 13px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--esg-catalog-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.25;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background .14s ease, color .14s ease;
}

.esg-catalog-dropdown-option:hover,
.esg-catalog-dropdown-option:focus-visible {
	background: #f1f6f7;
	outline: none;
}

.esg-catalog-dropdown-option.is-selected {
	background: #eaf3f5;
	color: var(--esg-catalog-accent);
	font-weight: 600;
}

.esg-catalog-dropdown-check {
	width: 18px;
	flex: 0 0 18px;
	opacity: 0;
	color: var(--esg-catalog-accent);
	font-size: 14px;
	text-align: center;
}

.esg-catalog-dropdown-option.is-selected .esg-catalog-dropdown-check {
	opacity: 1;
}

.esg-catalog-toolbar-separator {
	width: 1px;
	height: 30px;
	background: var(--esg-catalog-border);
	margin: 0 2px;
}

.esg-catalog-sort-wrap {
	margin-left: auto;
}

.esg-catalog-sort-wrap .esg-catalog-dropdown {
	min-width: 220px;
}

.esg-catalog-clear {
	appearance: none;
	-webkit-appearance: none;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--esg-catalog-accent);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.esg-catalog-divider {
	height: 1px;
	background: var(--esg-catalog-border);
	margin: 20px 0 32px;
	opacity: .85;
}

.esg-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 36px;
}

.esg-catalog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

.esg-catalog-card[hidden] {
	display: none !important;
}

.esg-catalog-card-image-link {
	display: block;
	margin-bottom: 16px;
}

.esg-catalog-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 1.32 / 1;
	object-fit: cover;
	border-radius: 12px;
}

.esg-catalog-card-eyebrow {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: #5c737a;
}

.esg-catalog-card-title {
	margin: 0 0 14px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(25px, 2.3vw, 33px);
	font-weight: 500;
	line-height: 1.05;
	color: var(--esg-catalog-accent);
}

.esg-catalog-card-title a {
	color: inherit;
	text-decoration: none;
}

.esg-catalog-card-price {
	min-height: 32px;
	margin-bottom: 14px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--esg-catalog-accent);
}

.esg-catalog-card-button {
	display: flex;
	margin-top: auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 0;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--esg-catalog-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 16px;
	text-align: center;
	transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}

.esg-catalog-card-button:hover {
	opacity: .94;
	transform: translateY(-1px);
}

.esg-catalog-load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 36px;
}

.esg-catalog-load-more-wrap[hidden] {
	display: none !important;
}

.esg-catalog-load-more {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	max-width: 100%;
	padding: 14px 28px;
	border: 1px solid var(--esg-catalog-accent);
	border-radius: 10px;
	background: var(--esg-catalog-accent);
	color: #fff;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

.esg-catalog-load-more:hover {
	opacity: .94;
	transform: translateY(-1px);
}

.esg-catalog-load-more:focus-visible {
	outline: 2px solid rgba(21, 86, 106, .3);
	outline-offset: 2px;
}

.esg-catalog-empty {
	padding: 36px 20px;
	text-align: center;
	border: 1px solid var(--esg-catalog-border);
	border-radius: 12px;
	margin-top: 8px;
}

/* Elementor y algunos temas aplican estilos globales agresivos a button.
   Estos selectores mantienen el dropdown con aspecto controlado por el widget. */
.esg-service-catalog button.esg-catalog-dropdown-trigger,
.esg-service-catalog button.esg-catalog-dropdown-option,
.esg-service-catalog button.esg-catalog-chip,
.esg-service-catalog button.esg-catalog-clear,
.esg-service-catalog button.esg-catalog-mobile-filter-trigger,
.esg-service-catalog button.esg-catalog-mobile-filter-close,
.esg-service-catalog button.esg-catalog-mobile-filter-apply,
.esg-service-catalog button.esg-catalog-load-more {
	text-transform: none;
	letter-spacing: normal;
}

@media (max-width: 900px) {
	.esg-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.esg-catalog-toolbar-separator { display: none; }
	.esg-catalog-sort-wrap { margin-left: 0; }
}

@media (max-width: 767px) {
	.esg-catalog-header { margin-bottom: 14px; }

	/* En móvil la fila horizontal de experiencia se oculta: las mismas opciones
	 * viven dentro del panel de Filtros, evitando que el usuario tenga que
	 * descubrir un scroll lateral. */
	.esg-catalog-experience { display: none !important; }

	.esg-catalog-mobile-experience {
		display: block;
		margin: 0 0 20px;
		padding: 0 0 18px;
		border-bottom: 1px solid rgba(23, 59, 70, .10);
	}

	.esg-catalog-mobile-experience-title {
		margin: 0 0 12px;
		color: var(--esg-catalog-text);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
	}

	.esg-catalog-mobile-experience-options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.esg-catalog-mobile-experience-options .esg-catalog-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
		min-height: 44px;
		padding: 10px 12px;
		white-space: normal;
		text-align: center;
	}

	.esg-catalog-mobile-experience-options .esg-catalog-chip:first-child {
		grid-column: 1 / -1;
	}

	.esg-catalog-mobile-filter-trigger {
		appearance: none;
		-webkit-appearance: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 50px;
		margin: 4px 0 0;
		padding: 14px 18px;
		border: 1px solid var(--esg-catalog-border);
		border-radius: 12px;
		background: #fff;
		color: var(--esg-catalog-text);
		font: inherit;
		font-size: 15px;
		line-height: 1.1;
		text-align: left;
		cursor: pointer;
	}

	.esg-catalog-mobile-filter-trigger-label { flex: 1 1 auto; }
	.esg-catalog-mobile-filter-icon { width: 21px; height: 21px; flex: 0 0 21px; }

	.esg-catalog-mobile-filter-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		height: 24px;
		padding: 0 7px;
		border-radius: 999px;
		background: var(--esg-catalog-accent);
		color: #fff;
		font-size: 12px;
		font-weight: 600;
	}
	.esg-catalog-mobile-filter-count[hidden] { display: none !important; }

	.esg-catalog-mobile-filter-shell {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 999999;
	}
	.esg-catalog-mobile-filter-shell.is-open { display: block; }

	.esg-catalog-mobile-filter-backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(7, 24, 31, .48);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}

	.esg-catalog-mobile-filter-panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: min(86vh, 760px);
		border-radius: 22px 22px 0 0;
		background: #faf9f4;
		box-shadow: 0 -18px 60px rgba(7, 24, 31, .18);
		overflow: hidden;
		animation: esgCatalogSheetIn .22s ease-out;
	}

	.esg-catalog-mobile-filter-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 18px 14px;
		border-bottom: 1px solid rgba(23, 59, 70, .10);
	}

	.esg-catalog-mobile-filter-title {
		font-size: 21px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--esg-catalog-text);
	}

	.esg-catalog-mobile-filter-close {
		appearance: none;
		-webkit-appearance: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: rgba(23, 59, 70, .06);
		color: var(--esg-catalog-text);
		cursor: pointer;
	}
	.esg-catalog-mobile-filter-close svg { width: 20px; height: 20px; }

	.esg-catalog-mobile-filter-panel-body {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 18px;
	}

	.esg-catalog-toolbar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		z-index: auto;
	}

	.esg-catalog-dropdown,
	.esg-catalog-sort-wrap,
	.esg-catalog-sort-wrap .esg-catalog-dropdown {
		width: 100% !important;
		min-width: 0 !important;
		margin-left: 0;
	}
	.esg-catalog-toolbar-separator { display: none; }

	.esg-catalog-dropdown-menu,
	.esg-catalog-dropdown.is-open-up .esg-catalog-dropdown-menu {
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		max-width: none;
		max-height: 260px;
		margin-top: 8px;
		box-shadow: 0 8px 24px rgba(18, 57, 67, .10);
	}

	.esg-catalog-clear { display: inline-flex; margin-top: 16px; }
	.esg-catalog-clear[hidden] { display: none !important; }

	.esg-catalog-mobile-filter-panel-footer {
		display: block;
		padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
		border-top: 1px solid rgba(23, 59, 70, .10);
		background: inherit;
	}

	.esg-catalog-mobile-filter-apply {
		appearance: none;
		-webkit-appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 50px;
		padding: 14px 18px;
		border: 0;
		border-radius: 12px;
		background: var(--esg-catalog-accent);
		color: #fff;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		transition: background .18s ease, transform .18s ease;
	}
	.esg-catalog-mobile-filter-apply:hover { background: #104a5c; }
	.esg-catalog-mobile-filter-apply:active { transform: translateY(1px); }

	.esg-catalog-divider { margin: 18px 0 24px; }
	.esg-catalog-grid { grid-template-columns: 1fr; gap: 34px; }
	.esg-catalog-card-title { font-size: 29px; }
	.esg-catalog-load-more { width: 100%; }
}

@keyframes esgCatalogSheetIn {
	from { transform: translateY(18px); opacity: .65; }
	to { transform: translateY(0); opacity: 1; }
}

html.esg-catalog-modal-open,
html.esg-catalog-modal-open body {
	overflow: hidden !important;
}


.esg-catalog-dropdown.is-open-up .esg-catalog-dropdown-menu {
	top: auto;
	bottom: calc(100% + 8px);
}


/* ================================================================
   CATEGORÍAS DE LA TIENDA
   ================================================================ */

.esg-category-list {
	--esg-category-columns: 3;
	--esg-category-overlay: rgba(8, 37, 45, .88);
	width: 100%;
	color: #173b46;
}

.esg-category-header {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
	align-items: end;
	gap: 28px 56px;
	margin-bottom: 36px;
}

.esg-category-header-main {
	min-width: 0;
}

.esg-category-eyebrow {
	margin-bottom: 10px;
	color: #2f8fb3;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.esg-category-title {
	max-width: 780px;
	margin: 0;
	color: #173b46;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(36px, 4.3vw, 62px);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.025em;
}

.esg-category-subtitle {
	max-width: 440px;
	margin: 0 0 5px;
	color: #5c737a;
	font-size: 16px;
	line-height: 1.65;
}

.esg-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--esg-category-columns), minmax(0, 1fr));
	gap: 24px;
}

.esg-category-card {
	position: relative;
	isolation: isolate;
	display: flex;
	min-width: 0;
	min-height: 360px;
	overflow: hidden;
	border-radius: 18px;
	background-color: #dbe8e7;
	color: #fff;
	text-decoration: none !important;
	box-shadow: 0 12px 34px rgba(18, 57, 67, .08);
	transition: transform .35s ease, box-shadow .35s ease;
}

.esg-category-card::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 37, 45, .04) 24%, var(--esg-category-overlay) 100%);
	pointer-events: none;
}

.esg-category-card--no-image {
	background-image:
		radial-gradient(circle at 78% 16%, rgba(255,255,255,.42), transparent 26%),
		radial-gradient(circle at 18% 78%, rgba(47,143,179,.26), transparent 35%),
		linear-gradient(145deg, #edf3ef 0%, #a9c8c7 100%);
}

.esg-category-card-image {
	position: absolute;
	z-index: -2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform .65s cubic-bezier(.2,.65,.3,1);
}

.esg-category-card-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-self: stretch;
	width: 100%;
	padding: 28px;
}

.esg-category-card-count {
	display: block;
	margin-bottom: 9px;
	color: rgba(255,255,255,.82);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.esg-category-card-title {
	display: block;
	max-width: calc(100% - 54px);
	margin: 0;
	color: #fff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(27px, 2.5vw, 36px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.015em;
}

.esg-category-card-description {
	display: block;
	max-width: 90%;
	margin-top: 12px;
	color: rgba(255,255,255,.82);
	font-size: 14px;
	line-height: 1.55;
}

.esg-category-card-arrow {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: #173b46;
	box-shadow: 0 8px 22px rgba(8, 37, 45, .14);
	transition: transform .3s ease, background-color .25s ease, color .25s ease;
}

.esg-category-card-arrow svg {
	display: block;
	width: 21px;
	height: 21px;
}

.esg-category-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 46px rgba(18, 57, 67, .17);
}

.esg-category-card:hover .esg-category-card-image {
	transform: scale(1.065);
}

.esg-category-card:hover .esg-category-card-arrow {
	transform: translate(2px, -2px);
}

.esg-category-card:focus-visible {
	outline: 3px solid #2f8fb3;
	outline-offset: 4px;
}

@media (max-width: 900px) {
	.esg-category-list { --esg-category-columns: 2; }
	.esg-category-header { grid-template-columns: 1fr; }
	.esg-category-subtitle { max-width: 620px; }
}

@media (max-width: 767px) {
	.esg-category-list { --esg-category-columns: 1; }
	.esg-category-header { gap: 18px; margin-bottom: 28px; }
	.esg-category-title { font-size: clamp(34px, 11vw, 48px); }
	.esg-category-card { min-height: 320px; }
	.esg-category-card-content { padding: 24px; }
	.esg-category-card-title { font-size: 31px; }
	.esg-category-card-arrow { top: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.esg-category-card,
	.esg-category-card-image,
	.esg-category-card-arrow {
		transition: none;
	}
}


/* ================================================================
   MENÚ VERTICAL DE CATEGORÍAS DE LA TIENDA
   ================================================================ */

.esg-category-menu {
	width: 100%;
	overflow: hidden;
	padding: 12px;
	border: 1px solid #d7e1e1;
	border-radius: 16px;
	background: #fff;
	color: #173b46;
}

.esg-category-menu-title {
	margin: 0;
	padding: 12px 14px 18px;
	color: #173b46;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.015em;
}

.esg-category-menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.esg-category-menu-shop-list {
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #d7e1e1;
}

.esg-category-menu-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.esg-category-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding: 14px;
	border: 0;
	border-bottom: 1px solid #e1e9e9;
	border-radius: 10px;
	background: transparent;
	color: #173b46;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none !important;
	transition: color .2s ease, background-color .2s ease, padding-left .2s ease;
}

.esg-category-menu-list > .esg-category-menu-item:last-child > .esg-category-menu-link {
	border-bottom-color: transparent;
}

.esg-category-menu-link:hover {
	padding-left: 18px;
	background: #f1f6f7;
	color: #15566a;
}

.esg-category-menu-link:focus-visible {
	outline: 2px solid #2f8fb3;
	outline-offset: -2px;
}

.esg-category-menu-item.is-current > .esg-category-menu-link {
	border-bottom-color: transparent;
	background: #15566a;
	color: #fff;
	font-weight: 600;
}

.esg-category-menu-item.is-current > .esg-category-menu-link:hover {
	padding-left: 14px;
}

.esg-category-menu-name {
	min-width: 0;
}

.esg-category-menu-end {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.esg-category-menu-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 27px;
	height: 25px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(23, 59, 70, .07);
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.esg-category-menu-item.is-current > .esg-category-menu-link .esg-category-menu-count {
	background: rgba(255, 255, 255, .16);
}

.esg-category-menu-arrow {
	display: block;
	width: 18px;
	height: 18px;
	opacity: .7;
	transition: transform .2s ease, opacity .2s ease;
}

.esg-category-menu-link:hover .esg-category-menu-arrow {
	transform: translateX(2px);
	opacity: 1;
}

.esg-category-menu-children {
	margin: 3px 0 5px 18px;
	padding-left: 8px;
	border-left: 1px solid #d7e1e1;
}

.esg-category-menu-children .esg-category-menu-link {
	min-height: 43px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	font-weight: 400;
}

.esg-category-menu-children .esg-category-menu-children .esg-category-menu-link {
	font-size: 13px;
}

@media (max-width: 767px) {
	.esg-category-menu { padding: 10px; }
	.esg-category-menu-title { font-size: 28px; }
	.esg-category-menu-link { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.esg-category-menu-link,
	.esg-category-menu-arrow {
		transition: none;
	}
}

.esg-category-menu-mobile-trigger {
	display: none;
}

.esg-category-menu-mobile-shell,
.esg-category-menu-mobile-panel,
.esg-category-menu-mobile-body {
	display: contents;
}

.esg-category-menu-mobile-backdrop,
.esg-category-menu-mobile-header {
	display: none;
}

@media (max-width: 767px) {
	.esg-category-menu-mobile-trigger {
		appearance: none;
		-webkit-appearance: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 54px;
		padding: 15px 18px;
		border: 1px solid #cbd7d7;
		border-radius: 12px;
		background: #fff;
		color: #173b46;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		box-shadow: 0 8px 22px rgba(18, 57, 67, .07);
	}

	.esg-category-menu-mobile-trigger svg {
		display: block;
		width: 23px;
		height: 23px;
		flex: 0 0 auto;
	}

	.esg-category-menu-mobile-shell {
		display: none;
		position: fixed;
		z-index: 999999;
		inset: 0;
	}

	.esg-category-menu-mobile-shell.is-open {
		display: block;
	}

	.esg-category-menu-mobile-backdrop {
		position: absolute;
		display: block;
		inset: 0;
		background: rgba(7, 24, 31, .48);
		backdrop-filter: blur(2px);
	}

	.esg-category-menu-mobile-panel {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: min(84vh, 760px);
		overflow: hidden;
		border-radius: 22px 22px 0 0;
		background: #faf9f4;
		box-shadow: 0 -18px 60px rgba(7, 24, 31, .22);
		animation: esgCategoryMenuSheetIn .25s ease both;
	}

	.esg-category-menu-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		padding: 18px 18px 14px;
		border-bottom: 1px solid rgba(23, 59, 70, .10);
	}

	.esg-category-menu-mobile-title {
		color: #173b46;
		font-family: "Playfair Display", Georgia, serif;
		font-size: 26px;
		font-weight: 500;
		line-height: 1.15;
	}

	.esg-category-menu-mobile-close {
		appearance: none;
		-webkit-appearance: none;
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(23, 59, 70, .07);
		color: #173b46;
		cursor: pointer;
	}

	.esg-category-menu-mobile-close svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	.esg-category-menu-mobile-body {
		display: block;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px 12px calc(18px + env(safe-area-inset-bottom));
		-webkit-overflow-scrolling: touch;
	}

	.esg-category-menu-mobile-panel .esg-category-menu {
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.esg-category-menu-mobile-panel .esg-category-menu-title {
		display: none;
	}
}

@keyframes esgCategoryMenuSheetIn {
	from { transform: translateY(20px); opacity: .7; }
	to { transform: translateY(0); opacity: 1; }
}

html.esg-category-menu-modal-open,
html.esg-category-menu-modal-open body {
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	.esg-category-menu-mobile-panel {
		animation: none;
	}
}