/*
 * Ajustes responsive que complementan los controles responsive nativos de
 * Elementor. IMPORTANTE: el Kit de este sitio usa breakpoints personalizados
 * (Elementor > Ajustes del sitio > Breakpoints): tablet <= 1099px / movil
 * <= 759px. Las media queries de abajo estan alineadas con esos valores;
 * si se cambian en el Kit, actualizar aqui tambien.
 * Mantener al minimo: lo que Elementor ya resuelve por breakpoint no deberia
 * duplicarse aqui.
 */

/* Sliver fotografico decorativo del hero: aria-hidden, sin contenido esencial.
   Se oculta cuando el hero pasa a una sola columna (<= tablet). */
@media (max-width: 1099px) {
	.sm-decorative-sliver {
		display: none !important;
	}
}

/*
 * Figuras (.figure--21x9 / --3x4 / --4x5): son contenedores con aspect-ratio
 * fijo pensados para alojar una <img>. Al pasar a una sola columna ocupan el
 * 100% del ancho y su proporcion los convierte en bloques desproporcionados
 * (un 3/4 a ancho completo supera los 1000px de alto). Hasta tablet/movil
 * limitamos la altura: si la figura lleva imagen, object-fit:cover la recorta
 * con naturalidad; si esta vacia, queda como una banda razonable.
 */
@media (max-width: 1099px) {
	.figure--21x9 { aspect-ratio: 16 / 9; max-height: 360px; }
	.figure--3x4  { aspect-ratio: 5 / 4;  max-height: 420px; }
	.figure--4x5  { aspect-ratio: 5 / 4;  max-height: 420px; }
}

@media (max-width: 759px) {
	.figure--21x9 { aspect-ratio: 16 / 10; max-height: 260px; }
	.figure--3x4,
	.figure--4x5  { aspect-ratio: 4 / 3;   max-height: 300px; }
}

/*
 * Rejillas de contenido en tablet/movil. Varias secciones usan un contenedor
 * Grid de 2 columnas cuyo control de filas quedo en "repeat(2, 1fr)". Al
 * colapsar a 1 columna, esas dos filas siguen siendo de igual altura: la fila
 * corta (un titular) se estira a la altura de la fila alta (una tarjeta de
 * formulario) y, con grid_align_items:center, el titular queda flotando en
 * mitad de una banda vacia (se ve sobre todo en las secciones oscuras de CTA
 * "Hablemos de tu caso" / "Empecemos por tu caso"). Al apilar, las filas
 * deben dimensionarse por contenido.
 */
@media (max-width: 1099px) {
	.elementor .e-con.e-grid > .e-con-inner,
	.elementor .e-con.e-grid {
		--e-con-grid-template-rows: auto;
	}
}