/* css/pages/sobre-mi/sobre-mi.css · PÁGINA Sobre mí (/sobre-mi/) · solo en esa página
   Diseño de Figma «Sobre mí — Desktop 1920» (captura design/referencias/sobre-mi-completo.png). Bloques de arriba abajo, cada uno con su fondo:
     1 cabecera (mt-about-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 fundadora (mt-about-founder) · fondo blanco · texto 760 u (título naranja, biografía, formación) | retrato 680 x 860 con isotipo y botón
     3 valores (mt-about-values) · fondo beige · foto 680 x 835 con «juntos» | tres bloques de texto de 800 u separados por una línea
     4 «Una mirada humana…» (mt-about-why) · fondo beige · anillo de 1000 u, arco con foto y botón, y cuatro características alrededor; después va el pie del sitio (plantilla Footer)
   Misma familia de bloques que Tu proceso y Mi enfoque: cabecera, foto con degradado inferior y botones dorados (mt-cta-pill).
   1 u = 1 px del diseño a 1920 px (--us = 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-sobre-mi 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 y enlaces se editan en Elementor; tamaños, colores, espacios y la posición de las cuatro características viven aquí.
*/

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

/* ---------- comunes ---------- */
.mt-page-sobre-mi .elementor :is(.mt-about-hero, .mt-about-founder, .mt-about-values, .mt-about-why).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-sobre-mi .elementor :is(.mt-about-hero, .mt-about-founder, .mt-about-values, .mt-about-why) :where(.elementor-widget) { margin: 0; }
.mt-page-sobre-mi .elementor :is(.mt-about-h1, .mt-about-founder-title, .mt-about-cred-title, .mt-about-block-title, .mt-about-why-title, .mt-about-why-item-title, .mt-about-juntos) .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-sobre-mi .elementor :is(.mt-about-founder-title, .mt-about-why-title) .elementor-heading-title i { font-style: italic; }
.mt-page-sobre-mi .elementor :is(.mt-about-kicker, .mt-about-why-kicker) .elementor-heading-title {
	font-family: 'Manrope', sans-serif; font-weight: 600; font-size: calc(24 * var(--us)); line-height: calc(33 * var(--us)); 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 */
}
.mt-page-sobre-mi .elementor :is(.mt-about-h1, .mt-about-why-title) .elementor-heading-title { font-size: calc(96 * var(--us)); line-height: calc(88 * var(--us)); text-align: center; }

/* ---------- 1 · cabecera ---------- */
.mt-page-sobre-mi .elementor .mt-about-hero.mt-about-hero { flex-direction: column; align-items: center; gap: calc(24 * var(--us)); padding: calc(120 * var(--us)) calc(160 * var(--us)) calc(100 * var(--us)); background: none; }

/* ---------- 2 · fundadora ---------- */
.mt-page-sobre-mi .elementor .mt-about-founder.mt-about-founder {
	flex-direction: column; align-items: center; padding: calc(140 * var(--us)) calc(160 * var(--us));
	/* el olive del diseño es una capa por encima de todo hasta los 599 u: cruza los primeros 107 u de este bloque (alfa .14 → 0) */
	background: linear-gradient(180deg, rgba(189, 177, 102, .143), rgba(189, 177, 102, 0)) top / 100% calc(107 * var(--us)) no-repeat, linear-gradient(180deg, #fff, rgba(255, 255, 255, .91));
}
.mt-page-sobre-mi .elementor .mt-about-founder-row.mt-about-founder-row { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: calc(120 * var(--us)); width: calc(1600 * var(--us)); max-width: 100%; margin: 0; padding: 0; --gap: calc(120 * var(--us)); --column-gap: calc(120 * var(--us)); min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-founder-col.mt-about-founder-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex: none; gap: 0; width: calc(800 * var(--us)); padding: 0; margin: 0; --gap: 0px; min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-founder-title { width: 100%; max-width: 100%; margin: 0 0 calc(24 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-founder-title .elementor-heading-title { font-size: calc(56 * var(--us)); line-height: calc(64 * var(--us)); text-align: left; color: var(--orange); }
.mt-page-sobre-mi .elementor .mt-about-founder-kicker { margin: 0 0 calc(32 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-founder-kicker .elementor-heading-title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: calc(16 * var(--us)); line-height: calc(22 * var(--us)); letter-spacing: .35em; text-transform: uppercase; text-align: left; color: var(--brown); margin: 0; }
.mt-page-sobre-mi .elementor .mt-about-founder-bio { width: 100%; margin: 0 0 calc(32 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-founder-bio p, .mt-page-sobre-mi .elementor .mt-about-block-text p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: calc(24 * var(--us)); line-height: calc(34 * var(--us)); color: var(--brown); margin: 0 0 calc(10 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-founder-bio p { font-size: calc(23 * var(--us)); line-height: calc(32 * var(--us)); } /* la biografía de la fundadora, un punto menor que los textos de los valores, para que el bloque mida lo mismo que la foto */
.mt-page-sobre-mi .elementor .mt-about-founder-bio p:last-child, .mt-page-sobre-mi .elementor .mt-about-block-text p:last-child { margin-bottom: 0; }
.mt-page-sobre-mi .elementor .mt-about-sep.mt-about-sep { flex: none; width: 100%; height: 1px; min-height: 1px; padding: 0; margin: 0; background: rgba(47, 31, 20, .2); }
.mt-page-sobre-mi .elementor .mt-about-founder-col .mt-about-sep { margin-bottom: calc(32 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-cred-title { margin: 0 0 calc(12 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-cred-title .elementor-heading-title { font-size: calc(32 * var(--us)); line-height: calc(38 * var(--us)); text-align: left; }
.mt-page-sobre-mi .elementor .mt-about-cred-text { width: 100%; margin: 0; }
.mt-page-sobre-mi .elementor .mt-about-cred-text p { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: calc(19 * var(--us)); line-height: calc(30 * var(--us)); color: var(--brown); margin: 0; }

/* foto con esquinas de 8 u y degradado inferior de 360 u (retrato 680 x 860; valores 680 x 835) */
.mt-page-sobre-mi .elementor .mt-about-photo.mt-about-photo { position: relative; flex: none; width: calc(680 * var(--us)); height: calc(860 * var(--us)); padding: 0; margin: 0; border-radius: calc(8 * var(--us)); overflow: hidden; min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo { width: calc(640 * var(--us)); height: calc(810 * var(--us)); } /* retrato de la fundadora: 640 x 810 (el diseño trae 680 x 860); el texto de al lado mide lo mismo */
.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo { height: calc(835 * var(--us)); margin-top: calc(16 * var(--us)); translate: calc(3 * var(--us)) 0; /* en el diseño la foto está 16 u más baja y 3 u a la derecha que el hueco de la fila. Con `translate` y no `transform`: el reveal (fadeInUp) anima `transform` y con él la foto perdía los 3 u y los recuperaba de golpe al acabar */
	/* la foto se queda fija (centrada en la pantalla) mientras pasan los tres textos de la derecha; al acabar la columna se suelta y la página sigue */
	position: sticky; top: max(24px, calc(50svh - 417.5 * var(--us))); }
.mt-page-sobre-mi .elementor .mt-about-photo > .e-con { width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; position: static; }
.mt-page-sobre-mi .elementor .mt-about-photo > .e-con > .e-con:first-child { position: relative; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; background-size: cover; background-position: center center; border-radius: 0; }
.mt-page-sobre-mi .elementor .mt-about-photo .content-bg-blur { display: none; }
.mt-page-sobre-mi .elementor .mt-about-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(360 * var(--us)); pointer-events: none; background: linear-gradient(180deg, rgba(245, 245, 240, 0), rgba(245, 245, 240, .9)); }
.mt-page-sobre-mi .elementor .mt-about-isotype { position: absolute; z-index: 2; left: calc(48 * var(--us)); top: calc(40 * var(--us)); width: calc(81 * var(--us)); margin: 0; }
.mt-page-sobre-mi .elementor .mt-about-isotype img { display: block; width: 100%; height: auto; }
.mt-page-sobre-mi .elementor .mt-about-founder-photo .mt-about-cta { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(40 * var(--us)); width: fit-content; margin: 0 auto; } /* centrado sin transform: el reveal (fadeInUp) anima el transform del propio botón y un translateX(-50%) lo descentraba mientras aparecía */

/* botones dorados (mt-cta-pill, barrido beige en hover). mt-about-cta-end es el segundo botón de la fundadora (móvil y tablet vertical): lleva el mismo estilo */
.mt-page-sobre-mi .elementor :is(.mt-about-cta, .mt-about-cta-end) .elementor-button.elementor-button {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: calc(46 * var(--us)); padding: 0 calc(24 * var(--us)); margin: 0; white-space: nowrap;
	border-radius: 999px; border: 0; box-shadow: none; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: calc(16 * var(--us)); line-height: calc(22 * var(--us)); text-transform: uppercase; letter-spacing: 0;
}
.mt-page-sobre-mi .elementor :is(.mt-about-cta, .mt-about-cta-end) .elementor-button-text { font: inherit; text-transform: inherit; }
.mt-page-sobre-mi .elementor :is(.mt-about-cta, .mt-about-cta-end) .elementor-button-icon { display: none; }

/* ---------- 3 · valores ---------- */
.mt-page-sobre-mi .elementor .mt-about-values.mt-about-values { flex-direction: column; align-items: center; padding: calc(140 * var(--us)) calc(160 * var(--us)) calc(160 * var(--us)); background: none; }
.mt-page-sobre-mi .elementor .mt-about-values-row.mt-about-values-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: calc(120 * var(--us)); width: calc(1600 * var(--us)); max-width: 100%; margin: 0; padding: 0; --gap: calc(120 * var(--us)); --column-gap: calc(120 * var(--us)); min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-values-col.mt-about-values-col { display: flex; flex-direction: column; align-items: stretch; flex: none; gap: calc(56 * var(--us)); width: calc(800 * var(--us)); padding: 0; margin: 0; --gap: calc(56 * var(--us)); min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-block.mt-about-block { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--us)); width: 100%; padding: 0; margin: 0; --gap: calc(24 * var(--us)); min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-block-title { margin: 0; }
.mt-page-sobre-mi .elementor .mt-about-block-title .elementor-heading-title { font-size: calc(48 * var(--us)); line-height: calc(56 * var(--us)); text-align: left; }
.mt-page-sobre-mi .elementor .mt-about-block-1 .mt-about-block-title { width: calc(800 * var(--us)); max-width: 100%; }
.mt-page-sobre-mi .elementor .mt-about-block-2 .mt-about-block-title { width: calc(504 * var(--us)); max-width: 100%; }
.mt-page-sobre-mi .elementor .mt-about-block-3 .mt-about-block-title { width: calc(610 * var(--us)); max-width: 100%; }
.mt-page-sobre-mi .elementor .mt-about-block-text { width: 100%; margin: 0; }
/* «juntos»: CS Calistha cursiva de 128 u en blanco, centrada sobre la foto (a 422 u del borde superior de la foto) */
.mt-page-sobre-mi .elementor .mt-about-juntos { position: absolute; left: 0; right: 0; top: calc(422 * var(--us)); translate: 0 -50%; margin: 0; z-index: 2; }
.mt-page-sobre-mi .elementor .mt-about-juntos .elementor-heading-title { font-size: calc(128 * var(--us)); line-height: calc(128 * var(--us)); font-style: italic; text-align: center; color: #fff; }

/* ---------- 4 · Una mirada humana, sostenida por una formación continua ---------- */
.mt-page-sobre-mi .elementor .mt-about-why.mt-about-why { flex-direction: column; align-items: center; gap: calc(80 * var(--us)); padding: calc(160 * var(--us)) calc(160 * var(--us)) calc(200 * var(--us)); background: none; --gap: calc(80 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-why-head.mt-about-why-head { display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--us)); width: calc(1300 * var(--us)); max-width: 100%; padding: 0; margin: 0; --gap: calc(24 * var(--us)); min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-why-title { width: 100%; margin: 0; }
/* composición de 1600 x 1000 u: todo va colocado en u desde su esquina superior izquierda */
.mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { position: relative; display: block; width: calc(1600 * var(--us)); height: calc(1000 * var(--us)); max-width: 100%; margin: 0; padding: 0; min-height: 0; }
.mt-page-sobre-mi .elementor .mt-about-why-ring.mt-about-why-ring { position: absolute; left: calc(300 * var(--us)); top: 0; width: calc(1000 * var(--us)); height: calc(1000 * var(--us)); box-sizing: border-box; border: 1px solid var(--line); border-radius: 50%; padding: 0; margin: 0; min-height: 0; pointer-events: none; }
.mt-page-sobre-mi .elementor .mt-about-why-arch.mt-about-why-arch { position: absolute; left: calc(560 * var(--us)); top: calc(145 * var(--us)); width: calc(480 * var(--us)); height: calc(710 * var(--us)); box-sizing: border-box; border: 1px solid var(--line); border-radius: calc(240 * var(--us)); padding: 0; margin: 0; min-height: 0; pointer-events: none; }
.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { position: absolute; left: calc(600 * var(--us)); top: calc(185 * var(--us)); width: calc(400 * var(--us)); height: calc(620 * var(--us)); box-sizing: border-box; border-radius: calc(200 * var(--us)); padding: 0; margin: 0; min-height: 0; background-size: cover; background-position: center center; }
.mt-page-sobre-mi .elementor .mt-about-why-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(260 * var(--us)); border-radius: 0 0 calc(200 * var(--us)) calc(200 * var(--us)); pointer-events: none; background: linear-gradient(180deg, rgba(245, 245, 240, 0), var(--beige)); }
.mt-page-sobre-mi .elementor .mt-about-why-photo .mt-about-cta { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(56 * var(--us)); width: fit-content; margin: 0 auto; } /* dentro de la foto, centrado, como el retrato de la fundadora. El pie de la foto es un semicírculo de 200 u: a 56 u del borde cabe un botón de ~226 u con ~25 u de aire a cada lado (el diseño lo cruzaba por el borde, mitad dentro y mitad fuera) */
.mt-page-sobre-mi .elementor .mt-about-why-item.mt-about-why-item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--us)); width: calc(360 * var(--us)); padding: 0; margin: 0; --gap: calc(16 * var(--us)); min-height: 0; text-align: center; }
.mt-page-sobre-mi .elementor .mt-about-why-item-1 { left: calc(223 * var(--us)); top: calc(168 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-why-item-2 { left: calc(1017 * var(--us)); top: calc(168 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-why-item-3 { left: calc(132 * var(--us)); top: calc(590 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-why-item-4 { left: calc(1108 * var(--us)); top: calc(590 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-why-icon .elementor-icon { width: calc(48 * var(--us)); height: calc(48 * var(--us)); display: flex; align-items: center; justify-content: center; font-size: calc(29 * var(--us)); line-height: 1; color: var(--brown); }
.mt-page-sobre-mi .elementor .mt-about-why-icon .elementor-icon i { font-size: calc(29 * var(--us)); transform: translateY(calc(2 * var(--us))); }
.mt-page-sobre-mi .elementor .mt-about-why-icon .elementor-icon svg { width: calc(29 * var(--us)); height: calc(29 * var(--us)); }
.mt-page-sobre-mi .elementor .mt-about-why-item-title, .mt-page-sobre-mi .elementor .mt-about-why-icon, .mt-page-sobre-mi .elementor .mt-about-why-item-text { margin: 0; }
.mt-page-sobre-mi .elementor .mt-about-why-item-title .elementor-heading-title { font-size: calc(32 * var(--us)); line-height: calc(38 * var(--us)); text-align: center; }
.mt-page-sobre-mi .elementor .mt-about-why-item-text p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: calc(18 * var(--us)); line-height: calc(27 * var(--us)); text-align: center; color: var(--brown); margin: 0; }

/* ============ TABLET Y MÓVIL (hasta 1024 px): sin diseño en Figma, adaptación apilada ============
   Las medidas pasan a px (--us = 1px); los títulos de 96 u se reducen con clamp(). En pantalla la foto va antes del texto (orden que ya traía Balancia). */
@media (max-width: 1024px) {
	.mt-page-sobre-mi { --us: 1px; }
	.mt-page-sobre-mi .elementor :is(.mt-about-h1, .mt-about-why-title) .elementor-heading-title { font-size: clamp(36px, 8.6vw, 64px); line-height: 1.08; }
	.mt-page-sobre-mi .elementor :is(.mt-about-kicker, .mt-about-why-kicker) .elementor-heading-title { font-size: clamp(13px, 2.6vw, 18px); line-height: 1.5; letter-spacing: .28em; padding-left: .28em; }
	.mt-page-sobre-mi .elementor .mt-about-hero.mt-about-hero { gap: 16px; padding: 120px 24px 88px; } /* tablet: 120 px entre el navbar y el título y entre el subtítulo y la sección de abajo (esta le suma su padding de 32 px); el móvil usa 104 */
	/* el degradado olive del body mide 599 px y la cabecera apilada es más corta: cortaba en seco contra el fondo de la fundadora. Fundido a blanco al pie de la cabecera (igual que Mi enfoque y Tu proceso) y sin la capa olive de la fundadora, que solo vale en PC */
	.mt-page-sobre-mi .elementor .mt-about-hero.mt-about-hero { position: relative; }
	.mt-page-sobre-mi .elementor .mt-about-hero.mt-about-hero > * { position: relative; z-index: 1; }
	.mt-page-sobre-mi .elementor .mt-about-hero.mt-about-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-sobre-mi .elementor .mt-about-founder.mt-about-founder { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .91)); }

	.mt-page-sobre-mi .elementor .mt-about-founder.mt-about-founder { padding: 32px 24px 64px; }
	.mt-page-sobre-mi .elementor :is(.mt-about-founder-row, .mt-about-values-row).e-con { flex-direction: column; align-items: center; gap: 32px; --gap: 32px; width: 100%; max-width: 680px; }
	.mt-page-sobre-mi .elementor :is(.mt-about-founder-col, .mt-about-values-col).e-con { width: 100%; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title { width: 100%; margin-bottom: 16px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title .elementor-heading-title { font-size: clamp(30px, 7vw, 48px); line-height: 1.15; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker { margin-bottom: 24px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker .elementor-heading-title { font-size: 13px; line-height: 20px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio { margin-bottom: 28px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio p, .mt-page-sobre-mi .elementor .mt-about-block-text p { font-size: 17px; line-height: 1.65; margin-bottom: 14px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col .mt-about-sep { margin-bottom: 28px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title .elementor-heading-title { font-size: 26px; line-height: 1.25; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text p { font-size: 17px; line-height: 28px; }
	.mt-page-sobre-mi .elementor .mt-about-photo.mt-about-photo, .mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo { width: 100%; max-width: 560px; height: auto; aspect-ratio: 680 / 860; border-radius: 8px; margin-top: 0; translate: none; transform: none; position: relative; top: auto; } /* apilado: la foto no se fija */
	.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo { aspect-ratio: 680 / 835; }
	.mt-page-sobre-mi .elementor .mt-about-photo::after { height: 32%; }
	.mt-page-sobre-mi .elementor .mt-about-isotype { left: 24px; top: 24px; width: 56px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo .mt-about-cta { bottom: 24px; }
	.mt-page-sobre-mi .elementor .mt-about-juntos .elementor-heading-title { font-size: clamp(56px, 14vw, 100px); line-height: 1; }
	.mt-page-sobre-mi .elementor .mt-about-juntos { top: 51%; }

	.mt-page-sobre-mi .elementor .mt-about-values.mt-about-values { padding: 56px 24px 64px; }
	.mt-page-sobre-mi .elementor .mt-about-values-col.mt-about-values-col { gap: 32px; --gap: 32px; }
	.mt-page-sobre-mi .elementor .mt-about-block.mt-about-block { gap: 16px; --gap: 16px; }
	.mt-page-sobre-mi .elementor .mt-about-block-title { width: 100% !important; }
	.mt-page-sobre-mi .elementor .mt-about-block-title .elementor-heading-title { font-size: clamp(26px, 5.6vw, 36px); line-height: 1.2; }

	/* composición apilada: arco con foto y botón, y debajo las cuatro características; sin anillo ni contorno del arco */
	.mt-page-sobre-mi .elementor .mt-about-why.mt-about-why { gap: 40px; --gap: 40px; padding: 64px 24px 80px; }
	.mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { display: flex; flex-direction: column; align-items: center; gap: 32px; --gap: 32px; width: 100%; max-width: 480px; height: auto; }
	.mt-page-sobre-mi .elementor :is(.mt-about-why-ring, .mt-about-why-arch).e-con { display: none; }
	.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { position: relative; left: auto; top: auto; width: min(300px, 80vw); height: auto; aspect-ratio: 400 / 620; border-radius: 8px 8px 0 0; margin-bottom: 0; } /* tablet y móvil: rectángulo de esquinas de 8 px, como la foto de la fundadora (en PC conserva la forma de arco) */
	.mt-page-sobre-mi .elementor .mt-about-why-photo::after { height: 42%; border-radius: 0; bottom: -1px; } /* abajo la foto se funde con el fondo: sin esquinas redondeadas (dibujaban una línea oscura fina) */
	.mt-page-sobre-mi .elementor .mt-about-why-photo .mt-about-cta { bottom: 28px; } /* dentro de la foto, centrado y a 28 px del borde inferior */
	.mt-page-sobre-mi .elementor .mt-about-why-item.mt-about-why-item { position: static; width: 100%; gap: 12px; --gap: 12px; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-title .elementor-heading-title { font-size: 28px; line-height: 1.25; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-text p { font-size: 17px; line-height: 1.6; }
}
@media (max-width: 767px) {
	.mt-page-sobre-mi .elementor .mt-about-hero.mt-about-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-sobre-mi .elementor .mt-about-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-sobre-mi .elementor :is(.mt-about-founder.mt-about-founder, .mt-about-values.mt-about-values, .mt-about-why.mt-about-why) { padding-left: 20px; padding-right: 20px; }
	.mt-page-sobre-mi .elementor :is(.mt-about-founder-bio p, .mt-about-block-text p, .mt-about-cred-text p, .mt-about-why-item-text p) { font-size: 16px; }
}

/* ============ FUNDADORA en móvil (hasta 767) ============
   Igual que en tablet vertical pero más pequeño: foto centrada de 310 x 370 px con esquinas de 8 px y fundido abajo, el título (28 px) en su pie, antetítulo, biografía, «Formación y recorrido» siempre visible y el botón al final.
   La columna de texto pasa a display:contents y la sección a cuadrícula (foto y título comparten la celda 1), como en los pilares de Mi enfoque. El botón del final es un segundo botón (mt-about-cta-end) que Elementor
   muestra solo en móvil; el de la foto (mt-about-cta) se oculta en móvil: así PC y tablet horizontal conservan el botón dentro de la foto. */
@media (max-width: 767px) {
	.mt-page-sobre-mi .elementor .mt-about-founder.mt-about-founder { padding: 32px 0 72px; } /* 72 de la cabecera + 32 = 104 px entre el subtítulo y la foto, igual que entre el navbar y el título */
	.mt-page-sobre-mi .elementor .mt-about-founder-row.mt-about-founder-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: stretch; gap: 0; --gap: 0px; width: 100%; max-width: none; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col.mt-about-founder-col { display: contents; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo { --fw: min(310px, calc(100% - 40px)); grid-area: 1 / 1; width: 100%; max-width: none; height: 370px; aspect-ratio: auto; border-radius: 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo > .e-con > .e-con:first-child { width: var(--fw); margin: 0 auto; background-position: center 30%; border-radius: 8px 8px 0 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo::after { left: 50%; right: auto; bottom: -1px; width: var(--fw); height: 100%; transform: translateX(-50%); border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .85) 86%, #fff 99%); }
	.mt-page-sobre-mi .elementor .mt-about-isotype { left: calc(50% - var(--fw) / 2 + 18px); top: 18px; width: 44px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title.mt-about-founder-title { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; width: 100%; margin: 0; padding: 0 24px 6px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title .elementor-heading-title { font-size: 28px; line-height: 1.15; text-align: center; text-wrap: balance; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker.mt-about-founder-kicker { grid-row: 2; margin: 20px 0 18px; padding: 0 24px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker .elementor-heading-title { font-size: 12px; line-height: 1.6; text-align: center; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio.mt-about-founder-bio { grid-row: 3; margin: 0; padding: 0 24px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col .mt-about-sep.mt-about-sep { grid-row: 4; width: auto; margin: 14px 24px 18px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title.mt-about-cred-title { grid-row: 5; width: auto; margin: 0 24px 8px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title .elementor-heading-title { font-size: 22px; line-height: 1.2; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text.mt-about-cred-text { grid-row: 6; width: auto; margin: 0 24px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text p { font-size: 14px; line-height: 1.9; }
	.mt-page-sobre-mi .elementor .mt-about-cta-end.mt-about-cta-end { grid-row: 7; justify-self: center; align-self: start; margin: 28px 0 0; }
}

/* ============ FUNDADORA en tablet (768-1024) ============
   El título y el antetítulo ocupan todo el ancho; debajo, texto a la izquierda y foto a la derecha. La foto ocupa todas las filas del texto (biografía, línea y formación), así que mide siempre lo mismo que el contenido,
   con un tope de 680 px por si el texto crece mucho cuando se rellenen los datos reales. El botón se queda dentro de la foto. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-page-sobre-mi .elementor .mt-about-founder.mt-about-founder { padding: 56px 40px 88px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-row.mt-about-founder-row { --pw: clamp(250px, 34vw, 320px); display: grid; grid-template-columns: minmax(0, 1fr) var(--pw); column-gap: 36px; row-gap: 0; align-items: start; justify-items: stretch; width: 100%; max-width: 880px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col.mt-about-founder-col { display: contents; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title.mt-about-founder-title { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 640px; margin: 0 0 14px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title .elementor-heading-title { font-size: clamp(34px, 4.6vw, 40px); line-height: 1.15; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker.mt-about-founder-kicker { grid-column: 1 / -1; grid-row: 2; margin: 0 0 28px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio.mt-about-founder-bio { grid-column: 1; grid-row: 3; margin: 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio p { font-size: 15.5px; line-height: 1.6; margin-bottom: 12px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text p { font-size: 14.5px; line-height: 1.75; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title .elementor-heading-title { font-size: 24px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col .mt-about-sep.mt-about-sep { grid-column: 1; grid-row: 4; margin: 6px 0 18px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title.mt-about-cred-title { grid-column: 1; grid-row: 5; margin: 0 0 10px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text.mt-about-cred-text { grid-column: 1; grid-row: 6; margin: 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo { grid-column: 2; grid-row: 3 / span 4; align-self: stretch; width: 100%; max-width: none; height: auto; min-height: 0; max-height: 680px; aspect-ratio: auto; border-radius: 8px; }
}

/* ============ VALORES («juntos») en tablet y móvil (hasta 1024) ============
   La foto pasa a ser una banda de borde a borde, pegada al borde superior de su sección, con «juntos» en el centro. Arriba el degradado parte del blanco de la sección anterior (sin costura) y abajo se funde a beige;
   los tres textos quedan debajo, con margen lateral. La sección anterior (fundadora) lleva más padding inferior para separarse de la banda.
   Lo importante de la foto es el gesto de darse las manos: está entre el 28 % y el 85 % de su alto. La banda tiene proporción 560 x 480 y crece con el ancho hasta 640 px de alto, y el encuadre arranca al 62 %,
   para que al ensancharse (y ampliarse la foto) las manos sigan a la vista. La foto deja de ser sticky (ya lo era solo en PC). */
@media (max-width: 1024px) {
	.mt-page-sobre-mi .elementor .mt-about-values.mt-about-values { padding: 0 0 64px; }
	.mt-page-sobre-mi .elementor .mt-about-values-row.mt-about-values-row { max-width: none; gap: 36px; --gap: 36px; }
	.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo { width: 100%; max-width: none; height: auto; max-height: 640px; aspect-ratio: 560 / 480; margin: 0; border-radius: 0; }
	.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo > .e-con > .e-con:first-child { background-position: center 62%; }
	.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo::after { height: 100%; background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, .55) 14%, rgba(255, 255, 255, 0) 34%, rgba(245, 245, 240, 0) 84%, var(--beige) 100%); }
	.mt-page-sobre-mi .elementor .mt-about-values-col.mt-about-values-col { width: 100%; max-width: 680px; padding: 0 40px; }
	.mt-page-sobre-mi .elementor .mt-about-juntos { top: 50%; }
}
@media (max-width: 767px) {
	.mt-page-sobre-mi .elementor .mt-about-values.mt-about-values { padding-left: 0; padding-right: 0; }
	.mt-page-sobre-mi .elementor .mt-about-values-col.mt-about-values-col { padding: 0 24px; }
	.mt-page-sobre-mi .elementor .mt-about-juntos .elementor-heading-title { font-size: clamp(52px, 14vw, 72px); }
}

/* ============ FUNDADORA en tablet HORIZONTAL (768-1024) ============
   Foto a la izquierda a sangre (toca el borde de la pantalla, arriba y abajo) y texto a la derecha: título, antetítulo, biografía y «Formación y recorrido» en dos columnas.
   La foto no tiene marco: su borde derecho, el superior y el inferior se funden con el fondo con un degradado suave y escalonado (sin un blanco marcado). Mide lo mismo que el texto porque ocupa todas sus filas.
   La tablet vertical conserva el diseño de arriba (título a todo el ancho y foto a la derecha). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-page-sobre-mi .elementor .mt-about-founder.mt-about-founder { padding: 56px 40px 48px 0; } /* 88 de la cabecera + 56 = 144 px entre el subtítulo y la foto, igual que en tablet vertical */
	.mt-page-sobre-mi .elementor .mt-about-founder-row.mt-about-founder-row { --pw: clamp(300px, 38vw, 400px); grid-template-columns: var(--pw) minmax(0, 1fr); column-gap: 48px; max-width: none; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo { grid-column: 1; grid-row: 1 / span 6; max-height: none; border-radius: 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo::after { height: 100%; background:
		linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 9%, rgba(255, 255, 255, 0) 86%, #fff 100%),
		linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .3) 78%, rgba(255, 255, 255, .75) 91%, #fff 100%); }
	.mt-page-sobre-mi .elementor .mt-about-founder-title.mt-about-founder-title { grid-column: 2; grid-row: 1; max-width: none; margin: 32px 0 12px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker.mt-about-founder-kicker { grid-column: 2; grid-row: 2; margin: 0 0 24px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker .elementor-heading-title { text-wrap: balance; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio.mt-about-founder-bio { grid-column: 2; grid-row: 3; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col .mt-about-sep.mt-about-sep { grid-column: 2; grid-row: 4; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title.mt-about-cred-title { grid-column: 2; grid-row: 5; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text.mt-about-cred-text { grid-column: 2; grid-row: 6; margin: 0 0 24px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text > .elementor-widget-container { columns: 2; column-gap: 24px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text p { break-inside: avoid; }
}

/* ============ BANNER «juntos» en tablet (768-1024): proporción 540 x 330 ============
   Más baja que la de móvil+tablet anterior (560 x 480 hasta 640 px): enseña sobre todo la pareja de manos de abajo (la del anillo), que es donde está el gesto, y recorta la de arriba.
   Tope de 520 px de alto para que no crezca en pantallas de 1024. El móvil conserva su banda. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo { aspect-ratio: 540 / 330; max-height: 520px; }
	.mt-page-sobre-mi .elementor .mt-about-values-photo.mt-about-photo > .e-con > .e-con:first-child { background-position: center 74%; }
}

/* ============ «Una mirada humana…» en tablet HORIZONTAL (768-1024) ============
   En vez de apilar las cuatro características bajo la foto (como en móvil y tablet vertical): tres columnas, con la foto en arco en el centro, dos tarjetas a su izquierda (1 y 2) y dos a su derecha (3 y 4).
   Se lee la columna izquierda de arriba abajo y después la derecha. Sin anillo ni contorno del arco (como en el resto de tablet y móvil). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { --pw: clamp(250px, 29vw, 300px); display: grid; grid-template-columns: minmax(0, 1fr) var(--pw) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 36px; row-gap: 24px; align-items: center; justify-items: center; width: 100%; max-width: 940px; }
	.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { grid-column: 2; grid-row: 1 / span 2; width: var(--pw); margin: 0; }
	.mt-page-sobre-mi .elementor .mt-about-why-item.mt-about-why-item { width: 100%; max-width: 300px; align-self: start; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-1, .mt-page-sobre-mi .elementor .mt-about-why-item-3 { margin-top: 12px; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-2, .mt-page-sobre-mi .elementor .mt-about-why-item-4 { margin-top: 36px; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-1 { grid-column: 1; grid-row: 1; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-2 { grid-column: 1; grid-row: 2; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-3 { grid-column: 3; grid-row: 1; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-4 { grid-column: 3; grid-row: 2; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-title .elementor-heading-title { font-size: 24px; }
	.mt-page-sobre-mi .elementor .mt-about-why-item-text p { font-size: 15.5px; line-height: 1.55; }
}

/* ============ FUNDADORA en tablet VERTICAL (768-1024) ============
   El diseño del móvil ampliado, con la foto de 470 px de ancho CENTRADA (no de borde a borde), 560 px de alto y esquinas de 8 px: así se ve a la fundadora hasta las manos con la flor. Abajo la foto se funde con el blanco
   para que el título entre en su pie. Una sola columna de texto centrada (620 px) y «Formación y recorrido» siempre visible en dos columnas.
   El botón de la foto se oculta y se muestra el del final (mt-about-cta-end): Elementor los oculta por dispositivo, no por orientación, así que aquí se fuerza con !important solo en vertical.
   Va después de los bloques de tablet de arriba y los sustituye en vertical; la tablet horizontal conserva el suyo (foto a sangre a la izquierda). */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-sobre-mi .elementor .mt-about-founder.mt-about-founder { padding: 56px 0 88px; } /* 88 de la cabecera + 56 = 144 px entre el subtítulo y la foto */
	.mt-page-sobre-mi .elementor .mt-about-founder-row.mt-about-founder-row { grid-template-columns: minmax(0, 1fr); column-gap: 0; max-width: none; width: 100%; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo { grid-area: 1 / 1; align-self: start; width: 100%; height: 560px; max-height: none; aspect-ratio: auto; border-radius: 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo > .e-con > .e-con:first-child { width: 470px; margin: 0 auto; background-position: center 30%; border-radius: 8px 8px 0 0; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo.mt-about-photo::after { height: 100%; bottom: -1px; left: 50%; width: 470px; transform: translateX(-50%); border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .85) 88%, #fff 99%); }
	.mt-page-sobre-mi .elementor .mt-about-isotype { left: calc(50% - 211px); top: 28px; width: 52px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-photo .mt-about-cta { display: none !important; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title.mt-about-founder-title { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; padding: 0 40px 8px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-title .elementor-heading-title { font-size: 40px; line-height: 1.15; text-align: center; text-wrap: balance; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker.mt-about-founder-kicker { grid-area: 2 / 1; margin: 18px 0 22px; padding: 0 40px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-kicker .elementor-heading-title { font-size: 12px; text-align: center; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio.mt-about-founder-bio { grid-area: 3 / 1; margin: 0; padding: 0 80px; }
	.mt-page-sobre-mi .elementor .mt-about-founder-bio p { font-size: 16px; line-height: 1.65; }
	.mt-page-sobre-mi .elementor .mt-about-founder-col .mt-about-sep.mt-about-sep { grid-area: 4 / 1; width: auto; margin: 14px 80px 20px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-title.mt-about-cred-title { grid-area: 5 / 1; width: auto; margin: 0 80px 8px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text.mt-about-cred-text { grid-area: 6 / 1; width: auto; margin: 0 80px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text > .elementor-widget-container { columns: 2; column-gap: 32px; }
	.mt-page-sobre-mi .elementor .mt-about-cred-text p { font-size: 15px; line-height: 1.8; break-inside: avoid; }
	.mt-page-sobre-mi .elementor .mt-about-cta-end.mt-about-cta-end { display: flex !important; grid-area: 7 / 1; justify-self: center; align-self: start; margin: 32px 0 0; }
}

/* «Una mirada humana…»: la foto con las mismas medidas que la de la fundadora (más ancha y menos alta que el 400 x 620 del diseño de PC), en móvil y en tablet vertical.
   La tablet horizontal conserva la columna central de la composición de tres columnas. */
@media (max-width: 767px) {
	.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { width: min(310px, calc(100vw - 40px)); aspect-ratio: 310 / 370; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { max-width: 520px; }
	.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { width: min(470px, calc(100vw - 80px)); aspect-ratio: 470 / 560; }
}

/* «Una mirada humana…» en tablet HORIZONTAL (768-1024): como en PC. Foto ovalada en el centro (400 x 620 del diseño, aquí --pw de ancho y 1,55 veces eso de alto), el contorno en arco alrededor de la foto
   y el círculo grande de fondo, con las cuatro tarjetas a los lados (1 y 2 a la izquierda, 3 y 4 a la derecha). Las líneas pasan por detrás de los textos, como en el diseño de PC.
   Las líneas se centran con left/top 50% y `translate` (no `transform`: tienen reveal propio y fadeInUp animaría `transform`). La foto se funde abajo con una capa que sobresale 1 px para tapar el borde de la foto. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { position: relative; min-height: 720px; grid-template-rows: 1fr 1fr; align-items: center; }
	.mt-page-sobre-mi .elementor :is(.mt-about-why-ring, .mt-about-why-arch).e-con { display: block !important; position: absolute; left: 50%; top: 50%; translate: -50% -50%; box-sizing: border-box; padding: 0; margin: 0; pointer-events: none; border: 1px solid var(--line); }
	.mt-page-sobre-mi .elementor .mt-about-why-ring.mt-about-why-ring { width: 700px; height: 700px; border-radius: 50%; }
	.mt-page-sobre-mi .elementor .mt-about-why-arch.mt-about-why-arch { width: calc(var(--pw) + 60px); height: calc(var(--pw) * 1.55 + 60px); border-radius: calc((var(--pw) + 60px) / 2); }
	.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { height: calc(var(--pw) * 1.55); aspect-ratio: auto; border-radius: calc(var(--pw) / 2); }
	.mt-page-sobre-mi .elementor .mt-about-why-photo::after { left: -1px; right: -1px; bottom: -1px; height: 42%; border-radius: 0 0 calc(var(--pw) / 2 + 1px) calc(var(--pw) / 2 + 1px); }
	.mt-page-sobre-mi .elementor .mt-about-why-photo .mt-about-cta { bottom: 56px; }
	.mt-page-sobre-mi .elementor .mt-about-why-item.mt-about-why-item { position: relative; z-index: 1; align-self: start; margin-top: 78px; }
	.mt-page-sobre-mi .elementor :is(.mt-about-why-item-1, .mt-about-why-item-2, .mt-about-why-item-3, .mt-about-why-item-4) { margin-top: 78px; left: auto; top: auto; } /* anulan los left/top de la composición de PC (con position: relative serían desplazamientos) */
}

/* «Una mirada humana…» en móvil y tablet VERTICAL: la foto vuelve a ser ovalada (arco) con las dos líneas de fondo (el círculo grande y el contorno en arco), como en tablet horizontal y en PC.
   Las tarjetas siguen apiladas debajo. El óvalo mide --pw x 1,55 --pw (la proporción del diseño: 400 x 620) y lleva solo el contorno en arco (sin el círculo grande); el contorno se centra en la foto con left/top + `translate` (no `transform`, que anima el reveal). */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-page-sobre-mi .elementor .mt-about-why.mt-about-why { overflow-x: clip; }
	.mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { --ph: calc(var(--pw) * 1.55); position: relative; max-width: 560px; gap: 40px; --gap: 40px; margin-top: 32px; }
	.mt-page-sobre-mi .elementor :is(.mt-about-why-ring, .mt-about-why-arch).e-con { display: block !important; position: absolute; left: 50%; top: calc(var(--ph) / 2); translate: -50% -50%; box-sizing: border-box; padding: 0; margin: 0; pointer-events: none; border: 1px solid var(--line); }
	.mt-page-sobre-mi .elementor .mt-about-why-ring.mt-about-why-ring { display: none !important; } /* en móvil y tablet vertical solo queda el contorno en arco; el círculo grande se ve únicamente desde tablet horizontal */
	.mt-page-sobre-mi .elementor .mt-about-why-arch.mt-about-why-arch { width: calc(var(--pw) + 56px); height: calc(var(--ph) + 56px); border-radius: calc((var(--pw) + 56px) / 2); }
	.mt-page-sobre-mi .elementor .mt-about-why-photo.mt-about-why-photo { position: relative; z-index: 1; width: var(--pw); max-width: none; height: var(--ph); aspect-ratio: auto; border-radius: calc(var(--pw) / 2); margin: 0; }
	.mt-page-sobre-mi .elementor .mt-about-why-photo::after { left: -1px; right: -1px; bottom: -1px; height: 42%; border-radius: 0 0 calc(var(--pw) / 2 + 1px) calc(var(--pw) / 2 + 1px); }
	.mt-page-sobre-mi .elementor .mt-about-why-photo .mt-about-cta { bottom: 50px; }
	.mt-page-sobre-mi .elementor .mt-about-why-item.mt-about-why-item { position: relative; z-index: 1; }
	.mt-page-sobre-mi .elementor :is(.mt-about-why-item-1, .mt-about-why-item-2, .mt-about-why-item-3, .mt-about-why-item-4) { left: auto; top: auto; margin-top: 0; } /* anulan los left/top de la composición de PC (con position: relative serían desplazamientos) */
}
@media (max-width: 767px) { .mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { --pw: 250px; } }
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .mt-page-sobre-mi .elementor .mt-about-why-comp.mt-about-why-comp { --pw: 320px; } }