/* ============================================================
   Proambientes - puente entre Elementor y el diseno del tema.

   La mayoria de las reglas del tema son de una sola clase
   (.section, .card, .cta-band, .page-hero...), asi que siguen
   funcionando solas cuando Elementor pone esa clase en su
   seccion o columna. Aqui se corrige lo unico que no calza:

   - Elementor mete un .elementor-container entre la seccion y
     sus columnas, asi que las grillas del tema hay que
     rearmarlas sobre ese contenedor.
   - Elementor pone su propio relleno en las columnas.
   - Algunas clases quedan en el envoltorio del widget y no en
     el elemento final (imagen enmarcada, lista con vistos).

   Se carga despues de theme.css.
   ============================================================ */

/* --- El respiro lateral del sitio --- */
.elementor-section:not(.elementor-inner-section) > .elementor-container {
	padding-inline: var(--gutter);
}

/* --- Bandas de seccion --- */
.elementor-section.section {
	padding-block: clamp(72px, 11vw, 150px);
}
.elementor-section.section--dark { background: var(--pine); color: var(--white); }
.elementor-section.section--steel { background: var(--steel); color: var(--white); }
.elementor-section.section--mist { background: var(--mist); }
.elementor-section.section--dark .elementor-heading-title,
.elementor-section.section--steel .elementor-heading-title { color: #fff; }

/* --- Las columnas no ponen relleno propio --- */
.elementor-section.section > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section.page-hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0;
}

/* --- Hero de paginas interiores --- */
.elementor-column.page-hero__inner {
	max-width: 70ch;
}
.elementor-column.page-hero__inner > .elementor-widget-wrap {
	padding-block: clamp(60px, 9vw, 110px) !important;
}
.elementor-section.page-hero .elementor-widget-heading.h-xl {
	margin: 16px 0 18px;
}

/* --- Dos columnas: imagen + texto --- */
.elementor-section.split { display: block; }
.elementor-section.split > .elementor-container {
	display: flex;
	gap: clamp(30px, 5vw, 70px);
	align-items: center;
}
.elementor-section.split > .elementor-container > .elementor-column {
	flex: 1 1 0;
	width: auto !important;
}
.elementor-section.split--rev > .elementor-container { flex-direction: row-reverse; }

/* --- Grillas de tarjetas --- */
.elementor-section.grid { display: block; }
.elementor-section.grid > .elementor-container {
	display: flex;
	gap: 24px;
	align-items: stretch;
	flex-wrap: wrap;
}
.elementor-section.grid > .elementor-container > .elementor-column {
	flex: 1 1 260px;
	width: auto !important;
}
.elementor-section.grid > .elementor-container > .elementor-column.card {
	padding: 34px 30px;
}

/* --- Banda de llamada a la accion (queda como columna) --- */
.elementor-column.cta-band > .elementor-widget-wrap {
	padding: clamp(40px, 6vw, 70px) !important;
	position: relative;
	z-index: 1;
}
.elementor-column.cta-band .elementor-heading-title,
.elementor-column.cta-band .elementor-widget-text-editor { color: #fff; }

/* --- Fila de botones --- */
.elementor-section.btnrow { margin-top: 28px; }
.elementor-section.btnrow > .elementor-container {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.elementor-section.btnrow > .elementor-container > .elementor-column {
	width: auto !important;
	flex: 0 0 auto;
}

/* --- Imagen enmarcada --- */
.elementor-widget-image.media-frame .elementor-widget-container { height: 100%; }
.elementor-widget-image.media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Listas con visto --- */
.elementor-widget-icon-list.checks .elementor-icon-list-items {
	display: grid;
	gap: 16px;
	margin-top: 26px;
}
.elementor-widget-icon-list.checks .elementor-icon-list-item {
	align-items: flex-start;
	font-size: 1.02rem;
}
.elementor-widget-icon-list.checks .elementor-icon-list-icon {
	width: 26px;
	margin-top: 2px;
}
.elementor-widget-icon-list.checks .elementor-icon-list-icon i,
.elementor-widget-icon-list.checks .elementor-icon-list-icon svg {
	color: var(--emerald);
	font-size: 19px;
	width: 22px;
	height: 22px;
}

/* --- Migas de pan --- */
.elementor-widget-text-editor.breadcrumb .elementor-widget-container {
	font-family: var(--font-alt);
	font-size: .8rem;
	color: var(--gray);
	letter-spacing: .04em;
}
.elementor-widget-text-editor.breadcrumb span { color: var(--acid); }
.elementor-widget-text-editor.breadcrumb p { margin: 0; }

/* --- Bloques que se conservaron tal cual --- */
.elementor-widget-html > .elementor-widget-container { display: contents; }

/* --- El formulario ya trae su propio margen --- */
.elementor-widget-shortcode .form-card { margin-top: 0; }
.elementor-widget-shortcode > .elementor-widget-container { display: contents; }

/* ============================================================
   Movil: mismo corte que usa el tema
   ============================================================ */
@media (max-width: 760px) {
	.elementor-section.split > .elementor-container,
	.elementor-section.grid > .elementor-container {
		flex-direction: column;
	}
	.elementor-section.split--rev > .elementor-container {
		flex-direction: column;
	}
	.elementor-section.split > .elementor-container > .elementor-column,
	.elementor-section.grid > .elementor-container > .elementor-column {
		width: 100% !important;
		flex: 1 1 auto;
	}
}

/* ============================================================
   Clases del tema que caen en el envoltorio del widget

   .btn y .eyebrow estan pensadas para el elemento final. Cuando
   Elementor las pone en el envoltorio, el estilo se dibuja dos
   veces (boton gigante, doble rayita). Se apaga en el
   envoltorio y se deja solo en el elemento de adentro.
   ============================================================ */
.elementor-widget-button.btn,
.elementor-widget-button[class*="btn--"] {
	display: block;
	background: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	overflow: visible;
}
.elementor-widget-button.btn::after,
.elementor-widget-button[class*="btn--"]::after { content: none; }
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: auto;
}
.elementor-widget-button.btn:hover { transform: none; box-shadow: none; }

.elementor-widget-text-editor.eyebrow {
	display: block;
	background: none;
}
.elementor-widget-text-editor.eyebrow::before { content: none; }

/* --- Hero: el texto va en blanco sobre la foto --- */
.elementor-section.page-hero,
.elementor-section.page-hero .elementor-heading-title,
.elementor-section.page-hero .elementor-widget-text-editor {
	color: #fff;
}
.elementor-section.page-hero .elementor-widget-text-editor.breadcrumb a { color: rgba(255,255,255,.75); }

/* --- Banda oscura: titulos y textos en blanco --- */
.elementor-section.section--dark .elementor-widget-text-editor,
.elementor-section.section--steel .elementor-widget-text-editor {
	color: rgba(255,255,255,.82);
}