/* css/pages/enfoque/enfoque.css · PÁGINA Mi enfoque (/mi-enfoque/) · solo en esa página
   Diseño de Figma «Mi enfoque — Desktop 1920» (captura design/referencias/mi-enfoque-completo.png). Bloques de arriba abajo, cada uno con su fondo:
     1 cabecera (mt-approach-hero) · el olive (#BDB166 al 80 % → transparente, 599 u) y el degradado beige → blanco van en el fondo del body para que pasen por detrás del menú
     2 intro (mt-approach-intro) · degradado blanco → #F5F5F0 · texto 700 u | línea con isotipo (62 u) | foto 680 x 600
     3 cuatro pilares A (mt-approach-pillars-a) · foto a la izquierda + acordeón de 800 u · degradado beige → blanco → beige
     4 cuatro pilares B (mt-approach-pillars-b) · lo mismo con el acordeón a la izquierda y fondo blanco (el diseño trae las dos variantes)
     5 «¿Cómo se traduce todo esto en tu proceso?» (mt-approach-process) · fondo #F5F5F0 · 4 tarjetas blancas de 382 u
     6 «Cada proceso tiene su propio ritmo» (mt-approach-rhythm) · foto de fondo con degradado; después va el pie del sitio (plantilla Footer)
   Es la misma familia de bloques que Tu proceso (css/pages/proceso/proceso.css): cabecera, foto con degradado inferior, tarjetas y botones dorados (mt-cta-pill).
   1 u = 1 px del diseño a 1920 px (--ua = min(100vw / 1920, 1px)): escala con el ancho y no pasa de su tamaño. Hasta 1024 px se apila y las medidas pasan a px (final del archivo).
   Los selectores llevan .mt-page-enfoque delante (peso 0,4,0): los ajustes de los widgets de Balancia pesan lo mismo que .elementor .clase y, cargando después, ganaban.
   Textos, imágenes, enlaces y los pilares del acordeón se editan en Elementor; tamaños, colores y espacios viven aquí.
*/

.mt-page-enfoque {
	--ua: min(calc(100vw / 1920), 1px);
	--brown: #301F15;
	--gold: #BDB166;
	--orange: #D35822;
	--beige: #F5F5F0;
	--line: #E9DFD2;
	background:
		linear-gradient(180deg, rgba(189, 177, 102, .8), rgba(189, 177, 102, 0)) top / 100% calc(599 * var(--ua)) no-repeat,
		linear-gradient(180deg, var(--beige) calc(127 * var(--ua)), #fff calc(492 * var(--ua)), #fff) top / 100% calc(492 * var(--ua)) no-repeat,
		var(--beige);
}

/* ---------- comunes ---------- */
.mt-page-enfoque .elementor :is(.mt-approach-hero, .mt-approach-intro, .mt-approach-pillars, .mt-approach-process, .mt-approach-rhythm).e-con {
	box-sizing: border-box; display: flex; margin: 0; gap: 0; --gap: 0px; --row-gap: 0px; --column-gap: 0px; min-height: 0;
}
.mt-page-enfoque .elementor :is(.mt-approach-hero, .mt-approach-intro, .mt-approach-pillars, .mt-approach-process, .mt-approach-rhythm) :where(.elementor-widget) { margin: 0; }
.mt-page-enfoque .elementor :is(.mt-approach-h1, .mt-approach-intro-title, .mt-approach-pillars-title, .mt-approach-process-title, .mt-approach-card-title, .mt-approach-rhythm-title) .elementor-heading-title {
	font-family: 'CS Calistha', serif; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--brown); margin: 0;
}
.mt-page-enfoque .elementor :is(.mt-approach-h1, .mt-approach-intro-title, .mt-approach-pillars-title, .mt-approach-process-title, .mt-approach-rhythm-title) .elementor-heading-title i { font-style: italic; }
.mt-page-enfoque .elementor :is(.mt-approach-h1, .mt-approach-pillars-title, .mt-approach-process-title, .mt-approach-rhythm-title) .elementor-heading-title { font-size: calc(96 * var(--ua)); line-height: calc(88 * var(--ua)); text-align: center; }

/* ---------- 1 · cabecera: título 96/88 y antetítulo 24/33 con letra espaciada ---------- */
.mt-page-enfoque .elementor .mt-approach-hero.mt-approach-hero { flex-direction: column; align-items: center; gap: calc(24 * var(--ua)); padding: calc(120 * var(--ua)) calc(160 * var(--ua)) calc(100 * var(--ua)); background: none; }
.mt-page-enfoque .elementor .mt-approach-kicker .elementor-heading-title {
	font-family: 'Manrope', sans-serif; font-weight: 600; font-size: calc(24 * var(--ua)); line-height: calc(33 * var(--ua)); letter-spacing: .35em; text-transform: uppercase; text-align: center; color: var(--brown); margin: 0;
	padding-left: .35em; /* el espaciado de letras también va tras la última: se compensa para que quede centrado */
}

/* ---------- 2 · intro ---------- */
.mt-page-enfoque .elementor .mt-approach-intro.mt-approach-intro { flex-direction: column; align-items: center; padding: calc(40 * var(--ua)) calc(160 * var(--ua)) calc(160 * var(--ua));
	/* arriba sigue el olive del diseño: es una capa por encima de todo que llega hasta los 599 u, así que cruza los primeros 107 u de la intro (alfa .14 → 0) */
	background: linear-gradient(180deg, rgba(189, 177, 102, .143), rgba(189, 177, 102, 0)) top / 100% calc(107 * var(--ua)) no-repeat, linear-gradient(180deg, #fff, var(--beige)); }
.mt-page-enfoque .elementor .mt-approach-intro-row.mt-approach-intro-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: calc(80 * var(--ua)); width: calc(1602 * var(--ua)); max-width: 100%; margin: 0; padding: 0; --gap: calc(80 * var(--ua)); --column-gap: calc(80 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-intro-col.mt-approach-intro-col { display: flex; flex-direction: column; align-items: flex-start; flex: none; gap: calc(40 * var(--ua)); width: calc(700 * var(--ua)); padding: calc(60 * var(--ua)) 0 0; margin: 0; --gap: calc(40 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-intro-title .elementor-heading-title { font-size: calc(40 * var(--ua)); line-height: calc(50 * var(--ua)); text-align: left; }
.mt-page-enfoque .elementor .mt-approach-intro-text p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: calc(24 * var(--ua)); line-height: calc(34 * var(--ua)); color: var(--brown); margin: 0 0 calc(54 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-intro-text p:last-child { margin-bottom: 0; }
/* línea vertical con el isotipo arriba: 62 u de ancho, línea de 1 x 499 u */
.mt-page-enfoque .elementor .mt-approach-divider.mt-approach-divider { display: flex; flex-direction: column; align-items: center; flex: none; gap: calc(24 * var(--ua)); width: calc(62 * var(--ua)); padding: 0; margin: 0; --gap: calc(24 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-divider-icon { width: calc(62 * var(--ua)); margin: 0; }
.mt-page-enfoque .elementor .mt-approach-divider-icon img { display: block; width: 100%; height: auto; }
.mt-page-enfoque .elementor .mt-approach-divider-line.mt-approach-divider-line { flex: none; width: 1px; min-width: 1px; height: calc(499 * var(--ua)); min-height: 0; padding: 0; margin: 0; background: var(--line); }

/* ---------- foto 680 u con esquinas de 8 u y degradado inferior de 220 u (intro: 680 x 600; pilares: 680 x 680) ---------- */
.mt-page-enfoque .elementor .mt-approach-photo.mt-approach-photo { position: relative; flex: none; width: calc(680 * var(--ua)); height: calc(680 * var(--ua)); padding: 0; margin: 0; border-radius: calc(8 * var(--ua)); overflow: hidden; min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo { height: calc(600 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-photo > .e-con { width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; position: static; }
.mt-page-enfoque .elementor .mt-approach-photo > .e-con > .e-con:first-child { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; background-size: cover; background-position: center center; border-radius: 0; }
.mt-page-enfoque .elementor .mt-approach-photo .content-bg-blur { display: none; }
.mt-page-enfoque .elementor .mt-approach-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(220 * var(--ua)); pointer-events: none; background: linear-gradient(180deg, rgba(245, 245, 240, 0), rgba(245, 245, 240, .9)); }

/* ---------- botones dorados (mt-cta-pill, barrido beige en hover) ---------- */
.mt-page-enfoque .elementor .mt-approach-cta .elementor-button.elementor-button {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: calc(46 * var(--ua)); padding: 0 calc(24 * var(--ua)); margin: 0;
	border-radius: 999px; border: 0; box-shadow: none; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: calc(16 * var(--ua)); line-height: calc(22 * var(--ua)); text-transform: uppercase; letter-spacing: 0;
}
.mt-page-enfoque .elementor .mt-approach-cta .elementor-button-text { font: inherit; text-transform: inherit; }
.mt-page-enfoque .elementor .mt-approach-cta .elementor-button-icon { display: none; }

/* ---------- 3 y 4 · cuatro pilares ---------- */
.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { flex-direction: column; align-items: center; gap: calc(100 * var(--ua)); padding: calc(120 * var(--ua)) calc(160 * var(--ua)) calc(160 * var(--ua)); --gap: calc(100 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-pillars-a.mt-approach-pillars { background: linear-gradient(180deg, var(--beige), #fff 50%, var(--beige)); }
.mt-page-enfoque .elementor .mt-approach-pillars-b.mt-approach-pillars { background: #fff; }
.mt-page-enfoque .elementor .mt-approach-pillars-title { width: calc(1300 * var(--ua)); max-width: 100%; margin: 0; }
.mt-page-enfoque .elementor .mt-approach-pillars-row.mt-approach-pillars-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: calc(120 * var(--ua)); width: calc(1600 * var(--ua)); max-width: 100%; margin: 0; padding: 0; --gap: calc(120 * var(--ua)); --column-gap: calc(120 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-pillars-b .mt-approach-pillars-row.mt-approach-pillars-row { flex-direction: row-reverse; }

/* acordeón (widget Acordeón de Elementor: details + summary): títulos en CS Calistha 32/38 naranja, flecha de 24 u, separador de 1 px entre pilares */
.mt-page-enfoque .elementor .mt-approach-acc { width: calc(800 * var(--ua)); max-width: 100%; flex: none; margin: 0; }
/* Altura estable al abrir/cerrar: Elementor anima la altura del pilar hasta la del título y, al terminar, quita el estilo. Si el título cambiara de padding entre abierto y cerrado, el pilar daría un saltito al final.
   Por eso el título lleva siempre 28 u arriba y 0 abajo, los 28 u de abajo son el gap entre pilares (y 28 u de padding al final del acordeón), y el separador va en el propio título (así cuenta en su altura). */
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion { display: flex; flex-direction: column; gap: calc(28 * var(--ua)); padding-bottom: calc(28 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--ua)); padding: calc(28 * var(--ua)) 0 0; margin: 0; background: none; border: 0; cursor: pointer; }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item + .e-n-accordion-item > .e-n-accordion-item-title { border-top: 1px solid rgba(47, 31, 20, .2); }
.mt-page-enfoque .elementor .mt-approach-pillars-b .mt-approach-acc .e-n-accordion-item + .e-n-accordion-item > .e-n-accordion-item-title { border-top-color: var(--brown); }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title-header { margin: 0; }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title-text { font-family: 'CS Calistha', serif; font-weight: 400; font-size: calc(32 * var(--ua)); line-height: calc(38 * var(--ua)); text-transform: none; letter-spacing: 0; color: var(--orange); margin: 0; }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title-icon { display: flex; align-items: center; justify-content: center; width: calc(24 * var(--ua)); height: calc(24 * var(--ua)); color: var(--brown); }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title-icon i { font-size: calc(18 * var(--ua)); color: var(--brown); }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title-icon > span { align-items: center; justify-content: center; }
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item:not([open]) .e-opened, .mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item[open] .e-closed { display: none; } /* una sola flecha: hacia abajo cerrado, hacia arriba abierto */
.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item:not([open]) .e-closed, .mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item[open] .e-opened { display: flex; }
.mt-page-enfoque .elementor .mt-approach-acc-panel.mt-approach-acc-panel { display: flex; flex-direction: column; gap: calc(16 * var(--ua)); padding: calc(16 * var(--ua)) 0 0; margin: 0; background: none; border: 0; --gap: calc(16 * var(--ua)); min-height: 0; } /* 16 u entre el título y el contenido; los 28 u de abajo son el gap del acordeón */
.mt-page-enfoque .elementor .mt-approach-acc-kicker .elementor-heading-title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: calc(16 * var(--ua)); line-height: calc(22 * var(--ua)); letter-spacing: .35em; text-transform: uppercase; text-align: left; color: var(--brown); margin: 0; }
.mt-page-enfoque .elementor .mt-approach-acc-text p { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: calc(20 * var(--ua)); line-height: calc(32 * var(--ua)); color: var(--brown); margin: 0 0 calc(32 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-acc-text p:last-child { margin-bottom: 0; }

/* ---------- 5 · ¿Cómo se traduce todo esto en tu proceso? ---------- */
.mt-page-enfoque .elementor .mt-approach-process.mt-approach-process { flex-direction: column; align-items: center; gap: calc(80 * var(--ua)); padding: calc(160 * var(--ua)); background: var(--beige); --gap: calc(80 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-process-title { width: calc(1300 * var(--ua)); max-width: 100%; margin: 0; }
.mt-page-enfoque .elementor .mt-approach-cards.mt-approach-cards { display: flex; flex-direction: row; align-items: stretch; gap: calc(24 * var(--ua)); width: calc(1600 * var(--ua)); max-width: 100%; margin: 0; padding: 0; --gap: calc(24 * var(--ua)); --column-gap: calc(24 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-card.mt-approach-card { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex: 1 1 0; gap: calc(40 * var(--ua)); width: auto; margin: 0; padding: calc(32 * var(--ua)); background: #fff; border: 0; border-radius: calc(4 * var(--ua)); box-shadow: none; --gap: calc(40 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-card-icon { width: calc(43 * var(--ua)); margin: 0; }
.mt-page-enfoque .elementor .mt-approach-card-icon img { display: block; width: 100%; height: auto; }
.mt-page-enfoque .elementor .mt-approach-card > .e-con { display: flex; flex-direction: column; gap: calc(12 * var(--ua)); width: 100%; margin: 0; padding: 0; --gap: calc(12 * var(--ua)); min-height: 0; }
.mt-page-enfoque .elementor .mt-approach-card-title .elementor-heading-title { font-size: calc(32 * var(--ua)); line-height: calc(38 * var(--ua)); text-align: left; }
.mt-page-enfoque .elementor .mt-approach-card-text p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: calc(18 * var(--ua)); line-height: calc(27 * var(--ua)); color: var(--brown); margin: 0; }
.mt-page-enfoque .elementor .mt-approach-card-title, .mt-page-enfoque .elementor .mt-approach-card-text { margin: 0; }

/* ---------- 6 · cierre con foto de fondo: la foto la pone Elementor (fondo del contenedor); el degradado del diseño va encima ---------- */
.mt-page-enfoque .elementor .mt-approach-rhythm.mt-approach-rhythm { position: relative; isolation: isolate; flex-direction: column; align-items: center; gap: calc(40 * var(--ua)); padding: calc(160 * var(--ua)) calc(160 * var(--ua)) calc(200 * var(--ua)); --gap: calc(40 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-rhythm.mt-approach-rhythm::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--beige) 3.3%, rgba(255, 255, 255, .8) 50%, var(--beige) 100%); }
.mt-page-enfoque .elementor .mt-approach-rhythm-title { margin: 0; }
.mt-page-enfoque .elementor .mt-approach-rhythm-text { width: calc(900 * var(--ua)); max-width: 100%; margin: 0; }
.mt-page-enfoque .elementor .mt-approach-rhythm-text p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: calc(24 * var(--ua)); line-height: calc(34 * var(--ua)); text-align: center; color: var(--brown); margin: 0 0 calc(10 * var(--ua)); }
.mt-page-enfoque .elementor .mt-approach-rhythm-text p:last-child { margin-bottom: 0; }
.mt-page-enfoque .elementor .mt-approach-rhythm-buttons.mt-approach-rhythm-buttons { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: calc(16 * var(--ua)); width: auto; margin: 0; padding: 0; --gap: calc(16 * var(--ua)); min-height: 0; }

/* ============ TABLET Y MÓVIL (hasta 1024 px): sin diseño en Figma, adaptación apilada ============
   Las medidas pasan a px (--ua = 1px); los títulos de 96 u se reducen con clamp(). En pantalla la foto va antes del texto en la intro (orden de Balancia). */
@media (max-width: 1024px) {
	.mt-page-enfoque { --ua: 1px; }
	.mt-page-enfoque .elementor :is(.mt-approach-h1, .mt-approach-pillars-title, .mt-approach-process-title, .mt-approach-rhythm-title) .elementor-heading-title { font-size: clamp(36px, 8.6vw, 64px); line-height: 1.08; }
	/* títulos de «¿Cómo se traduce…?» y «Cada proceso…»: líneas equilibradas y ancho máximo de 13 em, para que no lleguen hasta el borde de la pantalla */
	.mt-page-enfoque .elementor :is(.mt-approach-process-title, .mt-approach-rhythm-title) .elementor-heading-title { text-wrap: balance; max-width: 13em; margin-inline: auto; }
	.mt-page-enfoque .elementor .mt-approach-hero.mt-approach-hero { gap: 16px; padding: 120px 24px 88px; } /* tablet: igual que Sobre mí (120 arriba, 88 abajo + 32 de la intro = 120 hasta el contenido) */
	.mt-page-enfoque .elementor .mt-approach-kicker .elementor-heading-title { font-size: clamp(13px, 2.6vw, 18px); line-height: 1.5; letter-spacing: .28em; padding-left: .28em; }
	/* el degradado olive del body mide 599 px y la cabecera apilada solo ~290: cortaba en seco contra el blanco de la intro. Fundido a blanco al pie de la cabecera (igual que Tu proceso) y sin la capa olive de la intro, que solo vale en PC */
	.mt-page-enfoque .elementor .mt-approach-hero.mt-approach-hero { position: relative; }
	.mt-page-enfoque .elementor .mt-approach-hero.mt-approach-hero > * { position: relative; z-index: 1; }
	.mt-page-enfoque .elementor .mt-approach-hero.mt-approach-hero::after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: min(280px, 100%); pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 92%); }
	.mt-page-enfoque .elementor .mt-approach-intro.mt-approach-intro { background: linear-gradient(180deg, #fff, var(--beige)); }

	.mt-page-enfoque .elementor .mt-approach-intro.mt-approach-intro { padding: 32px 24px 40px; }
	/* intro: la columna de texto pasa a display:contents para que título, texto y botón se ordenen junto al isotipo y la foto. El diseño de cada rango está más abajo (móvil ≤767 y tablet 768-1024) */
	.mt-page-enfoque .elementor .mt-approach-intro-row.mt-approach-intro-row { width: 100%; --gap: 0px; --column-gap: 0px; --row-gap: 0px; gap: 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-col.mt-approach-intro-col { display: contents; }
	.mt-page-enfoque .elementor .mt-approach-divider-icon { width: 44px; }
	.mt-page-enfoque .elementor .mt-approach-intro-title .elementor-heading-title { line-height: 1.25; }
	.mt-page-enfoque .elementor .mt-approach-intro-text p, .mt-page-enfoque .elementor .mt-approach-rhythm-text p { font-size: 17px; line-height: 1.65; margin-bottom: 16px; }

	.mt-page-enfoque .elementor .mt-approach-photo.mt-approach-photo, .mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo { width: 100%; max-width: 560px; height: auto; aspect-ratio: 680 / 680; border-radius: 8px; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo { aspect-ratio: 680 / 600; }
	.mt-page-enfoque .elementor .mt-approach-photo::after { height: 32%; }

	.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { gap: 40px; --gap: 40px; padding: 64px 24px; }
	.mt-page-enfoque .elementor .mt-approach-pillars-row.mt-approach-pillars-row, .mt-page-enfoque .elementor .mt-approach-pillars-b .mt-approach-pillars-row.mt-approach-pillars-row { flex-direction: column; align-items: center; gap: 32px; --gap: 32px; width: 100%; max-width: 680px; }
	.mt-page-enfoque .elementor .mt-approach-acc { width: 100%; }
	.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion { gap: 22px; padding-bottom: 22px; }
	.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title { padding: 22px 0 0; }
	.mt-page-enfoque .elementor .mt-approach-acc .e-n-accordion-item-title-text { font-size: 26px; line-height: 1.25; }
	.mt-page-enfoque .elementor .mt-approach-acc-text p { font-size: 17px; line-height: 1.65; margin-bottom: 16px; }
	.mt-page-enfoque .elementor .mt-approach-acc-kicker .elementor-heading-title { font-size: 13px; line-height: 20px; }

	.mt-page-enfoque .elementor .mt-approach-process.mt-approach-process { gap: 40px; --gap: 40px; padding: 64px 24px; }
	.mt-page-enfoque .elementor .mt-approach-cards.mt-approach-cards { flex-direction: column; gap: 16px; --gap: 16px; width: 100%; max-width: 680px; }
	.mt-page-enfoque .elementor .mt-approach-card.mt-approach-card { flex: none; width: 100%; gap: 24px; --gap: 24px; padding: 28px; }
	.mt-page-enfoque .elementor .mt-approach-card-title .elementor-heading-title { font-size: 28px; line-height: 1.25; }
	.mt-page-enfoque .elementor .mt-approach-card-text p { font-size: 17px; line-height: 1.6; }

	.mt-page-enfoque .elementor .mt-approach-rhythm.mt-approach-rhythm { gap: 28px; --gap: 28px; padding: 64px 24px 80px; }
}
@media (max-width: 767px) {
	.mt-page-enfoque .elementor .mt-approach-hero.mt-approach-hero { padding: 104px 20px 72px; } /* móvil: 104 px de aire entre el navbar y el título y entre el subtítulo y la sección de abajo (esta le suma su propio padding superior) */
	.mt-page-enfoque .elementor .mt-approach-h1 .elementor-heading-title { font-size: clamp(44px, 9vw, 64px); } /* título de la cabecera en móvil: mínimo 44 px (antes 36-38) y sigue creciendo con el ancho */
	.mt-page-enfoque .elementor :is(.mt-approach-intro.mt-approach-intro, .mt-approach-pillars.mt-approach-pillars, .mt-approach-process.mt-approach-process, .mt-approach-rhythm.mt-approach-rhythm) { padding-left: 20px; padding-right: 20px; }
	.mt-page-enfoque .elementor :is(.mt-approach-intro-text, .mt-approach-acc-text, .mt-approach-card-text, .mt-approach-rhythm-text) p { font-size: 16px; }
}

/* intro (propuesta A): móvil y tablet VERTICAL. Foto en arco arriba, título entrando en su pie (que ya se funde a beige), isotipo con una línea a cada lado, texto y botón; todo centrado. El móvil lleva estas medidas; la tablet vertical las agranda en el bloque siguiente */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-enfoque .elementor .mt-approach-intro-row.mt-approach-intro-row { flex-direction: column; align-items: center; max-width: 680px; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo { order: 1; width: min(280px, 100%); max-width: none; height: auto; aspect-ratio: 280 / 350; border-radius: 140px 140px 8px 8px; }
	.mt-page-enfoque .elementor .mt-approach-intro-title.mt-approach-intro-title { order: 2; position: relative; z-index: 1; width: 100%; margin: -24px 0 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-title .elementor-heading-title { font-size: 22px; text-align: center; }
	/* isotipo (44) con 80 px de línea a cada lado: la izquierda es el fondo del contenedor, la derecha el elemento línea */
	.mt-page-enfoque .elementor .mt-approach-divider.mt-approach-divider { order: 3; flex-direction: row; align-items: center; width: 232px; max-width: 100%; height: auto; margin: 18px 0; padding: 0 0 0 94px; gap: 14px; --gap: 14px; background: linear-gradient(var(--line), var(--line)) left center / 80px 1px no-repeat; }
	.mt-page-enfoque .elementor .mt-approach-divider-line.mt-approach-divider-line { flex: 1; width: auto; height: 1px; min-width: 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-text.mt-approach-intro-text { order: 4; width: 100%; margin: 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-text p { font-size: 15px; line-height: 1.55; margin-bottom: 12px; text-align: center; }
	.mt-page-enfoque .elementor .mt-approach-intro-text p:last-child { margin-bottom: 8px; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-cta.mt-approach-cta { order: 5; align-self: center; width: auto; margin: 12px 0 0; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo::after { height: 45%; background: linear-gradient(180deg, rgba(245, 245, 240, 0), rgba(245, 245, 240, .96)); }
}
/* tablet vertical: mismo diseño con medidas mayores (foto 340 x 430, título 30 px, texto 17 px) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-enfoque .elementor .mt-approach-intro.mt-approach-intro { padding: 32px 40px 48px; }
	.mt-page-enfoque .elementor .mt-approach-intro-row.mt-approach-intro-row { max-width: 600px; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo { width: min(340px, 100%); aspect-ratio: 340 / 430; border-radius: 170px 170px 8px 8px; }
	.mt-page-enfoque .elementor .mt-approach-intro-title.mt-approach-intro-title { margin-top: -32px; }
	.mt-page-enfoque .elementor .mt-approach-intro-title .elementor-heading-title { font-size: 30px; }
	.mt-page-enfoque .elementor .mt-approach-divider.mt-approach-divider { margin: 24px 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-text p { font-size: 17px; margin-bottom: 14px; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-cta.mt-approach-cta { margin-top: 16px; }
}

/* intro tablet HORIZONTAL (768-1024): el diseño de PC (texto | línea vertical con isotipo | foto rectangular de esquinas de 8 px) con medidas de tablet en px: a 1920 px el diseño escala con el ancho, pero aquí quedaría diminuto */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-page-enfoque .elementor .mt-approach-intro.mt-approach-intro { padding: 32px 40px 56px; }
	.mt-page-enfoque .elementor .mt-approach-intro-row.mt-approach-intro-row { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 36px; --gap: 36px; max-width: 920px; }
	.mt-page-enfoque .elementor .mt-approach-intro-col.mt-approach-intro-col { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 0; min-width: 0; width: auto; gap: 18px; --gap: 18px; padding: 16px 0 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-title.mt-approach-intro-title { margin: 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-title .elementor-heading-title { font-size: clamp(24px, 3vw, 32px); text-align: left; }
	.mt-page-enfoque .elementor .mt-approach-intro-text.mt-approach-intro-text { margin: 0; }
	.mt-page-enfoque .elementor .mt-approach-intro-text p { font-size: 16px; line-height: 1.55; margin-bottom: 12px; text-align: left; }
	.mt-page-enfoque .elementor .mt-approach-intro-text p:last-child { margin-bottom: 4px; }
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-cta.mt-approach-cta { align-self: flex-start; margin: 0; }
	/* línea vertical con el isotipo arriba (como en PC) */
	.mt-page-enfoque .elementor .mt-approach-divider.mt-approach-divider { flex-direction: column; align-items: center; align-self: stretch; flex: none; width: 48px; height: auto; margin: 0; padding: 0; gap: 16px; --gap: 16px; background: none; }
	.mt-page-enfoque .elementor .mt-approach-divider-icon { width: 48px; }
	.mt-page-enfoque .elementor .mt-approach-divider-line.mt-approach-divider-line { display: block; flex: 1; width: 1px; min-width: 1px; height: auto; min-height: 60px; }
	/* foto rectangular 680 x 600 de PC, sin arco */
	.mt-page-enfoque .elementor .mt-approach-intro .mt-approach-photo.mt-approach-photo { flex: none; align-self: flex-start; width: clamp(300px, 40vw, 420px); max-width: none; height: auto; aspect-ratio: 680 / 600; border-radius: 8px; }
}

/* ============ PILARES en móvil y tablet VERTICAL (la tablet horizontal usa el estilo de PC, al final): la foto llega de borde a borde y el título va encima, en su pie (que se funde con el fondo de la sección); el acordeón queda debajo con 48 px de aire ============
   La fila (foto + acordeón) pasa a display:contents y la sección a cuadrícula: foto y título comparten la celda 1 y el acordeón va en la 2, así el orden del HTML (variante A o B) da igual.
   Móvil: foto de 300 px, título 28 px, acordeón a todo el ancho con 24 px de margen. Tablet (768+): foto de 280 px, título hasta 44 px, acordeón centrado de 600 px. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { --fade: var(--beige); display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: stretch; gap: 48px 0; --gap: 48px; --pt: 64px; padding: var(--pt) 0 64px; }
	.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { --ph: calc(var(--pt) + 300px); background: linear-gradient(180deg, var(--beige) var(--ph), #fff 55%, var(--beige)); } /* beige liso hasta el pie de la foto: sin costura con el fundido. Vale para las dos variantes (A y B): así la B continúa el beige donde acaba la A y no queda franja blanca entre ellas */
	.mt-page-enfoque .elementor .mt-approach-pillars-row.mt-approach-pillars-row, .mt-page-enfoque .elementor .mt-approach-pillars-b .mt-approach-pillars-row.mt-approach-pillars-row { display: contents; }
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-photo.mt-approach-photo { grid-area: 1 / 1; width: 100%; max-width: none; height: 300px; aspect-ratio: auto; border-radius: 0; }
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-photo.mt-approach-photo::after { height: 100%; background: linear-gradient(180deg, var(--fade), transparent 24%, color-mix(in srgb, var(--fade) 75%, transparent) 62%, var(--fade) 96%); }
	.mt-page-enfoque .elementor .mt-approach-pillars-title.mt-approach-pillars-title { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; padding: 0 24px 6px; }
	.mt-page-enfoque .elementor .mt-approach-pillars-title .elementor-heading-title { font-size: 28px; line-height: 1.15; text-wrap: balance; }
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-acc { grid-row: 2; grid-column: 1; width: auto; max-width: none; margin: 0 24px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { --pt: 80px; }
	.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { --ph: calc(var(--pt) + 280px); }
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-photo.mt-approach-photo { height: 280px; }
	.mt-page-enfoque .elementor .mt-approach-pillars-title.mt-approach-pillars-title { padding: 0 40px 10px; }
	.mt-page-enfoque .elementor .mt-approach-pillars-title .elementor-heading-title { font-size: clamp(34px, 5vw, 44px); line-height: 1.12; }
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-acc { justify-self: center; width: min(600px, calc(100% - 80px)); margin: 0; }
}

/* ============ PILARES en tablet HORIZONTAL (768-1024): el estilo de PC (título centrado y, debajo, foto cuadrada + acordeón; la variante B con la foto a la derecha) con medidas de tablet en px ============
   Los fondos son los de PC (A: beige → blanco → beige, B: blanco). Aquí no entra nada del bloque de móvil / tablet vertical (foto a sangre con el título encima). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-page-enfoque .elementor .mt-approach-pillars.mt-approach-pillars { gap: 48px; --gap: 48px; padding: 72px 40px 88px; }
	.mt-page-enfoque .elementor .mt-approach-pillars-title .elementor-heading-title { font-size: clamp(30px, 3.9vw, 40px); line-height: 1.1; text-wrap: balance; }
	.mt-page-enfoque .elementor .mt-approach-pillars-row.mt-approach-pillars-row, .mt-page-enfoque .elementor .mt-approach-pillars-b .mt-approach-pillars-row.mt-approach-pillars-row { flex-direction: row; align-items: flex-start; justify-content: center; gap: 48px; --gap: 48px; --column-gap: 48px; width: 100%; max-width: 920px; }
	.mt-page-enfoque .elementor .mt-approach-pillars-b .mt-approach-pillars-row.mt-approach-pillars-row { flex-direction: row-reverse; }
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-photo.mt-approach-photo { --pw: clamp(300px, 38vw, 400px); flex: none; align-self: stretch; width: var(--pw); min-height: var(--pw); max-width: none; height: auto; aspect-ratio: auto; border-radius: 8px; } /* la foto llega hasta el final del acordeón (y lo sigue al abrir/cerrar un pilar); como mínimo es un cuadrado */
	.mt-page-enfoque .elementor .mt-approach-pillars .mt-approach-acc { flex: 1 1 0; min-width: 0; width: auto; }
	.mt-page-enfoque .elementor .mt-approach-acc-text p { font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
}