/* css/pages/home/intro-panels.css · HOME › Sección 2: dos paneles apilados («Puede que te reconozcas aquí» / «¿La buena noticia?») · solo la home
   Clases: mt-home-panels (contenedor), mt-home-panel + mt-home-panel-1 / -2. El primer panel queda fijo y el segundo sube y lo tapa; js/home.js calcula --mt-p. Los textos usan mt-fx-1…4 (components/reveal.css).
*/

/* Sección 2 de Inicio: dos paneles apilados. El primero queda fijo y el segundo sube y lo tapa.
   - Antes de tapar, el segundo panel entra con un degradado de 28vh (no con un borde recto).
   - Mientras sube, el contenido del primero se apaga, se desenfoca y se aleja un poco.
   El margen superior del segundo panel (en Elementor) deja un tramo de scroll con el primero entero a la vista. */
.mt-home-panel-2 { position: relative; }

.mt-home-panel-2::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 28vh;
	pointer-events: none;
	background: linear-gradient(to top, #F5F5F0 0%, rgba(245, 245, 240, .9) 20%, rgba(245, 245, 240, .6) 50%, rgba(245, 245, 240, .25) 78%, rgba(245, 245, 240, 0) 100%);
}

/* --mt-p (0 a 1) = parte del segundo panel que ya ha subido; lo calcula js/home.js */
.mt-home-panel-1 > * {
	opacity: calc(1 - .75 * var(--mt-p, 0));
	filter: blur(calc(6px * var(--mt-p, 0)));
	transform: scale(calc(1 - .03 * var(--mt-p, 0)));
}

/* Pantallas de más de 1920 px: el contenido conserva su tamaño de diseño (las medidas llevan tope a 1920) y se centra; los fondos siguen rellenando. */
@media (min-width: 1921px) {
	/* paneles de la sección 2: si la pantalla es más alta que 1080, el bloque de 1080 queda centrado en vertical */
	.mt-home-panel-1 { --padding-top: calc(83px + max(0px, (100vh - 1080px) / 2)) !important; }
	.mt-home-panel-2 { --padding-top: calc(121px + max(0px, (100vh - 1080px) / 2)) !important; }
}

/* Sección 2 en tablet: en PC el bloque de slides sube sobre el hero con un margen negativo en vw; en tablet el hero ya mide 100svh y ese solape
   dejaba el arco del primer panel bajo el degradado inferior del hero. Sin solape, el primer panel empieza donde acaba el hero. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-panels { margin-top: 0 !important; }
}

/* y cada panel detiene su contenido (arco, antetítulo, título, párrafo) centrado en vertical, en vez de pegado arriba */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-panel { justify-content: center !important; --padding-top: 0px !important; --padding-bottom: 0px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Párrafos en tablet (todos menos el del hero): con el escalado en vw salían entre 6 y 13 px. 15 px, y se ensanchan las cajas que en PC miden pocos px escalados. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-panel .mt-fx-4 { width: 420px !important; max-width: calc(100% - 80px) !important; }
	.mt-home-panel .mt-fx-4, .mt-home-panel .mt-fx-4 p { font-size: 15px !important; line-height: 1.5 !important; }
}

/* Sección 2 en tablet (los dos paneles): arco un 25 % más grande (en vw, como el original: 16,6 vw -> 20,8 vw) y antetítulo 2 px más (2,5 vw = 48u escalados). */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-panel > .e-con:first-child { height: 23.6vw !important; min-height: 0 !important; }
	.mt-home-panel .mt-fx-1 img { width: 20.8vw !important; height: 23.6vw !important; max-width: none !important; }
	.mt-home-panel .mt-fx-2, .mt-home-panel .mt-fx-2 :is(h1, h2, h3, h4, h5, h6) { font-size: calc(2.5vw + 2px) !important; }
}

/* horizontal: el arco más grande aún (28 vw de ancho), con tope por altura de pantalla (el resto del bloque mide unos 225 px) para que siga cabiendo centrado en pantallas bajas */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-home-panel { --arch-w: min(28vw, calc((100svh - 285px) / 1.136)); }
	.mt-home-panel > .e-con:first-child { height: calc(var(--arch-w) * 1.136) !important; }
	.mt-home-panel .mt-fx-1 img { width: var(--arch-w) !important; height: calc(var(--arch-w) * 1.136) !important; }
}

/* vertical: el arco mide lo mismo que en horizontal a 1024x768 (287 x 326 px); aquí la altura de pantalla sobra, no hace falta tope */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-home-panel { --arch-w: 287px; }
	.mt-home-panel > .e-con:first-child { height: calc(var(--arch-w) * 1.136) !important; }
	.mt-home-panel .mt-fx-1 img { width: var(--arch-w) !important; height: calc(var(--arch-w) * 1.136) !important; }
}

/* Sección 2 en móvil: sin solape con el hero, contenido de cada panel centrado en vertical, arco de 200 x 227, antetítulo 18 px, título 28 px (bajan con el ancho en pantallas de 320 a 400 px), párrafo 15 px a todo el ancho. */
@media (max-width: 767px) {
	.mt-home-panels { margin-top: 0 !important; }
	.mt-home-panel { --arch-w: 200px; justify-content: center !important; --padding-top: 0px !important; --padding-bottom: 0px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
	.mt-home-panel > .e-con:first-child { height: calc(var(--arch-w) * 1.136) !important; min-height: 0 !important; }
	.mt-home-panel .mt-fx-1 img { width: var(--arch-w) !important; height: calc(var(--arch-w) * 1.136) !important; max-width: none !important; }
	.mt-home-panel .mt-fx-2, .mt-home-panel .mt-fx-3, .mt-home-panel .mt-fx-4 { width: 100% !important; max-width: 100% !important; }
	.mt-home-panel .mt-fx-2 .elementor-heading-title { font-size: 18px !important; line-height: 1.2 !important; }
	.mt-home-panel .mt-fx-3 .elementor-heading-title { font-size: min(28px, 6.9vw) !important; line-height: 1.1 !important; }
	.mt-home-panel .mt-fx-4, .mt-home-panel .mt-fx-4 p { font-size: 15px !important; line-height: 1.5 !important; }
	.mt-home-panel .mt-fx-4 { padding: 0 14px; }
}