/* =========================================================================
 * Home — Hero (Prime Slider, widget .elementor-element-26ad892)
 * Bloque de contenido: alineado a la izquierda, arranca en el borde izquierdo
 * del body (var(--ancho-body)), ancho por breakpoint, y reordenado
 * eyebrow -> título -> texto -> botón.
 * ====================================================================== */

/* El wrapper de texto del slider colapsa a fit-content; se lleva al ancho
   completo del slide para poder alinear el contenido como el resto del sitio
   sin depender de 100vw (que incluye la scrollbar y desalinea ~8px). */
.elementor-element-26ad892 .bdt-prime-slider-wrapper {
	width: 100%;
	max-width: none;
}

/* Opción B — alto automático por contenido (ratio 16:9 desactivado en el
   widget: data-bdt-slideshow ratio:false, min-height:false).
   Stacking por grid: todos los slides ocupan la misma celda (1/1) → se
   superponen como con absolute (el fade de UIkit cruza sin blanco) Y el track
   toma la altura del slide más alto → altura automática = padding + contenido. */
.elementor-element-26ad892 .bdt-slideshow-items {
	display: grid;
	height: auto;
}
/* El slide lleva la imagen de fondo (.bdt-ps-slide-img, absolute cover):
   padding 0 → imagen edge-to-edge, sin franja blanca arriba.
   grid-area:1/1 + position:relative → se apilan (superpuestos) y aportan alto.
   align-items:flex-start → contenido anclado arriba, padding desde el borde. */
.elementor-element-26ad892 .bdt-slideshow-item {
	grid-area: 1 / 1;
	position: relative;
	align-items: flex-start;
	padding: 0;
}

.elementor-element-26ad892 .bdt-prime-slider-content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 20px;
	/* Padding del contenido (define el alto de la sección junto al contenido).
	   Desktop: 180px arriba, 60px abajo. */
	padding: 180px 0 60px;
	margin-block: 0;
	/* Borde izquierdo exactamente en el borde del contenido del sitio:
	   (ancho de contenido − ancho-body) / 2. 100% = ancho sin scrollbar,
	   igual que el centrado por margin:auto del header/footer. */
	width: 60vw;                       /* desktop */
	max-width: var(--ancho-body);
	margin-left: calc((100% - var(--ancho-body)) / 2);
	margin-right: 0;
}

/* Promueve los hijos del wrapper de texto al flex del bloque para poder
   intercalar el excerpt entre el título y el botón. margin-top:0 anula el
   margin-top:40px heredado de Prime Slider (espacio extra arriba). */
.elementor-element-26ad892 .bdt-prime-slider-desc {
	display: contents;
	margin-top: 0;
}

/* Orden: eyebrow -> título -> texto -> botón.
   El botón vive en un <div> sin clase (hijo de .bdt-prime-slider-desc); con
   display:contents ese div queda como flex item y hay que ordenarlo. */
.elementor-element-26ad892 .bdt-prime-slider-desc > .bdt-sub-title { order: 1; margin: 0; }
.elementor-element-26ad892 .bdt-prime-slider-desc > .bdt-main-title { order: 2; margin: 0; }
.elementor-element-26ad892 .bdt-slider-excerpt { order: 3; margin: 0; }
.elementor-element-26ad892 .bdt-prime-slider-desc > div:not(.bdt-sub-title):not(.bdt-main-title) { order: 4; margin: 0; }

/* El contenido nunca desborda el ancho del body. */
.elementor-element-26ad892 .bdt-sub-title,
.elementor-element-26ad892 .bdt-main-title,
.elementor-element-26ad892 .bdt-slider-excerpt {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Tablet (768–1023px): ancho 50vw, padding 90px 0 40px. */
@media (max-width: 1023px) {
	.elementor-element-26ad892 .bdt-prime-slider-content {
		width: 50vw;
		padding: 90px 0 40px;
	}
}

/* Móvil (<768px): ancho 70vw, padding 90px 0 30px. */
@media (max-width: 767px) {
	.elementor-element-26ad892 .bdt-prime-slider-content {
		width: 70vw;
		padding: 90px 0 30px;
	}
}

/* Desktop (≥1024px): columna 50% del ancho del body, padding-bottom 80px
   (padding-top queda en 180px). El título 75px se setea en el widget
   (title_typography_font_size), no por CSS: el CSS generado por Elementor
   (selector de 7 clases) no se puede vencer limpio desde acá. */
@media (min-width: 1024px) {
	.elementor-element-26ad892 .bdt-prime-slider-content {
		width: calc(var(--ancho-body) * 0.5);
		max-width: calc(var(--ancho-body) * 0.5);
		padding-bottom: 80px;
	}
}
