/* css/pages/home/process.css · HOME › Sección 5: «Tu proceso» (dos tarjetas con ilustración, divisor vertical, línea final y enlace «Conoce tu proceso») · solo la home
   Clase raíz: mt-home-process (+ -header, -kicker, -title, -cards, -card-1 / -2, -card-img / -title / -text, -divider, -closing, -cta). Escala con --u5.
*/

/* Sección 5 "Tu proceso" (ver scripts/archivo/pixel-seccion5.php): base 1920 x 1050 (Figma, nov 2026), toda la sección cabe en pantalla; sin pasar de su tamaño. Animaciones de entrada = las de Balancia.
   .mt-home-process-divider = las dos rayas verticales finas (#E9DFD2) entre las tarjetas, separadas 25 px. */
.mt-home-process { --u5: min(calc(100vw / 1920), calc(100svh / 1050), 1px); }

.mt-home-process .mt-home-process-divider {
	background:
		linear-gradient(#E9DFD2, #E9DFD2) left / calc(1 * var(--u5)) 100% no-repeat,
		linear-gradient(#E9DFD2, #E9DFD2) right / calc(1 * var(--u5)) 100% no-repeat;
}

.mt-home-process .elementor-widget-text-editor p { margin: 0; } /* Balancia les da margen inferior: descuadra el aire de la sección */

/* las ilustraciones traen fondo claro: multiply lo funde con el beige (la tarjeta lleva el mismo beige de fondo para que el efecto funcione aunque la animación cree su propio contexto) */
.mt-home-process .elementor-widget-image img { mix-blend-mode: multiply; filter: brightness(1.015); } /* el brillo sube el casi-blanco del papel (252) a blanco puro para que no se vea el cuadrado */

.mt-home-process h3.elementor-heading-title { padding-left: .3em; } /* el espaciado de letras también va tras la última: se compensa para que el antetítulo quede centrado */

/* CTAs en tablet: a 768-1024 el escalado en vw los dejaba en 7-12 px. "Descubrir" de la banda oscura (sección 4) a 14 px; "Conoce tu proceso" (5) y "Sobre mí" (6) a 13 px. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-process .mt-cta-link .elementor-button, .mt-home-process .mt-cta-link .elementor-button-text { font-size: 13px !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-process .elementor-widget-text-editor p { font-size: 15px !important; line-height: 1.5 !important; }
	/* sección 5: columnas de 300 px (los saltos de línea de PC caen igual); sección 6: el texto ocupa toda su columna (los saltos de línea se quitan en js/slides.js) */
	.mt-home-process-card-1, .mt-home-process-card-2, .mt-home-process-card-text { width: 300px !important; max-width: 100% !important; }
	.mt-home-process-closing { width: 640px !important; max-width: calc(100% - 80px) !important; }
}

/* vertical, secciones 5 y 6: textos a 14 px, títulos de las tarjetas (Terapia individual / de pareja) a 18 px, y más aire sobre la 5 y bajo la 6 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-home-process .elementor-widget-text-editor p { font-size: 14px !important; }
	.mt-home-process .mt-home-process-card-title .elementor-heading-title { font-size: 18px !important; }
	.mt-home-process { padding-top: 64px !important; }
}

/* Secciones 5 (Tu proceso) y 6 (Soy Maitane) en móvil: una sola columna. Títulos 34/30 px, textos 14 px, títulos de tarjeta 18 px, CTAs 13 px; las medidas fijas en u (tarjetas, líneas, columnas) pasan a ancho completo. */
@media (max-width: 767px) {
	.mt-home-process { padding: 64px 24px 56px !important; }
	.mt-home-process .mt-home-process-header { margin-top: 0 !important; }
	.mt-home-process .mt-home-process-kicker .elementor-heading-title { font-size: 34px !important; line-height: 1.1 !important; }
	.mt-home-process .mt-home-process-title { margin-top: 10px; }
	.mt-home-process .mt-home-process-title .elementor-heading-title { font-size: 11px !important; line-height: 1.3 !important; }
	.mt-home-process .mt-home-process-cards { margin-top: 40px !important; align-items: center !important; width: 100% !important; }
	.mt-home-process .mt-home-process-card-1, .mt-home-process .mt-home-process-card-2 { width: 100% !important; max-width: 320px !important; }
	.mt-home-process .mt-home-process-card-img { width: 56px !important; }
	.mt-home-process .mt-home-process-card-img img { width: 56px !important; height: 56px !important; }
	.mt-home-process .mt-home-process-card-title { width: auto !important; margin-top: 14px; }
	.mt-home-process .mt-home-process-card-title .elementor-heading-title { font-size: 18px !important; line-height: 1.2 !important; }
	.mt-home-process .mt-home-process-card-text { width: 100% !important; max-width: 300px !important; margin-top: 10px; }
	.mt-home-process .elementor-widget-text-editor p { font-size: 14px !important; line-height: 1.5 !important; }
	.mt-home-process .mt-home-process-divider { height: 28px !important; background: none !important; }
	.mt-home-process .mt-home-process-closing { width: 100% !important; max-width: 290px !important; margin-top: 28px; text-align: center; }
	.mt-home-process .mt-home-process-closing p { font-size: 12px !important; line-height: 1.5 !important; }
	.mt-home-process .mt-home-process-cta { margin-top: 26px; }
	.mt-home-process .mt-cta-link .elementor-button, .mt-home-process .mt-cta-link .elementor-button-text { font-size: 13px !important; }
}