/* css/pages/home/hero.css · HOME › Hero (portada: «Un espacio para volver a llenarte de vida») · solo la home
   Tres degradados beige que funden la foto (mt-home-hero-fade) y los ajustes de tablet y móvil. El contenedor del hero es mt-home-hero; en los selectores va repetida 3 veces (.mt-home-hero.mt-home-hero.mt-home-hero) para conservar el peso que tenía el selector antiguo (por posición).
*/

/* Hero de Inicio (Figma 44:91, base 1920 px). Tres degradados beige que funden la foto: superior (bajo el navbar), inferior y horizontal
   (de izquierda a derecha). Medidos sobre docs/secciones/navbar+hero.png; los porcentajes escalan solos con el ancho. */
.mt-home-hero-fade {
	background-image:
		linear-gradient(to bottom, #F5F5F0 8.8%, rgba(245, 245, 240, 0) 16%),
		linear-gradient(to bottom, rgba(245, 245, 240, 0) 59%, #F5F5F0 96.2%),
		linear-gradient(to right, #F5F5F0 20.8%, rgba(245, 245, 240, .96) 26%, rgba(245, 245, 240, .92) 31.3%, rgba(245, 245, 240, .88) 36.5%,
			rgba(245, 245, 240, .835) 41.7%, rgba(245, 245, 240, .7) 46.9%, rgba(245, 245, 240, .54) 52.1%, rgba(245, 245, 240, .4) 57.3%,
			rgba(245, 245, 240, .22) 62.5%, rgba(245, 245, 240, .07) 67.7%, rgba(245, 245, 240, 0) 72.9%);
}

/* Hero en tablet (768 a 1024). Misma regla que arriba: solo dentro de las media queries de tablet, los PC no cambian.
   La barra de tablet mide 112 px y el hero sube bajo ella (en PC ya lo hace con un margen negativo en vw). */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-hero.mt-home-hero.mt-home-hero { margin-top: -103.6px !important; min-height: 100svh !important; }
	.mt-home-hero.mt-home-hero.mt-home-hero .mt-cap .elementor-widget-spacer .elementor-spacer-inner { height: 190px !important; }
}

/* vertical: texto arriba y la flor abajo, que aparece desde el beige (una sola capa de fondo, sin tocar la foto) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-home-hero.mt-home-hero.mt-home-hero {
		background-color: #F5F5F0;
		background-image: linear-gradient(to bottom, #F5F5F0 0, #F5F5F0 36%, rgba(245, 245, 240, 0) 58%), linear-gradient(to top, #F5F5F0 0, rgba(245, 245, 240, 0) 14%), url(../../../images/hero-flor-scaled.jpg) !important;
		background-size: 100% 100%, 100% 100%, max(100%, 84svh) auto !important;
		background-position: 0 0, 0 0, 62% 100% !important;
		background-repeat: no-repeat !important;
	}
	.mt-home-hero.mt-home-hero.mt-home-hero .mt-home-hero-fade { background-image: none !important; }
	.mt-home-hero.mt-home-hero.mt-home-hero .mt-cap > .e-con { width: calc(100% - 128px) !important; max-width: none !important; }
	.mt-home-hero.mt-home-hero.mt-home-hero .elementor-widget-text-editor { width: 470px !important; max-width: 100%; }
	.mt-home-hero.mt-home-hero.mt-home-hero .elementor-widget-text-editor, .mt-home-hero.mt-home-hero.mt-home-hero .elementor-widget-text-editor p { font-size: 21px !important; line-height: 1.5 !important; }
}

/* horizontal: el degradado y la foto son los de PC; solo se ensancha el párrafo y se sube un poco el texto (la barra de tablet mide más que la de PC) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-home-hero.mt-home-hero.mt-home-hero .elementor-widget-text-editor { width: 430px !important; max-width: 100%; }
	.mt-home-hero.mt-home-hero.mt-home-hero .elementor-widget-text-editor, .mt-home-hero.mt-home-hero.mt-home-hero .elementor-widget-text-editor p { font-size: 20px !important; line-height: 1.5 !important; }
}

/* Hero en móvil: la altura de Elementor es 170vw (1304 px a 767 px de ancho, o 1134 px en un móvil apaisado): se limita a una pantalla, con mínimo 620 px para que quepa el texto. El título (52 px) baja con el ancho en pantallas de menos de 390 px para no partirse en 6 líneas. */
@media (max-width: 767px) {
	.mt-home-hero.mt-home-hero.mt-home-hero { min-height: min(170vw, max(100svh, 620px)) !important; }
	.mt-home-hero.mt-home-hero.mt-home-hero .mt-home-hero-title .elementor-heading-title { font-size: min(52px, 13.34vw) !important; }
}