/* css/pages/home/values.css · HOME › Sección 3: «Propuesta de valor» (círculo con foto, cuatro palabras a cada lado y «Descubrir») · solo la home
   Clase raíz: mt-home-values (+ -header, -kicker, -title, -circle, -word, -photo, -cta). Escala con --u3. En móvil el brillo y los anillos del círculo son un SVG en un ::before de mt-home-values-circle.
*/

/* Sección 3 de Inicio (Figma, 1920 px): fondo blanco, degradado radial verde #E5E0C2 (sólido hasta r=384, blanco en r=709) y dos circunferencias finas
   (r=631 y r=360). Centro a 802 px del borde superior de la sección. --u3 hace que todo (también el contenido, ver scripts/archivo/pixel-seccion3.php) escale para que la sección quepa en pantalla. */
.mt-home-values {
	--u3: min(calc(100vw / 1920), calc(100svh / 1503), 1px); /* 1px de diseño: la sección (1920 x 1503) cabe entera en la pantalla, sin pasar de su tamaño */
	background-image:
		radial-gradient(circle calc(631 * var(--u3)) at 50% calc(802 * var(--u3)), transparent calc(100% - 1.2px), rgba(190, 160, 130, .28) calc(100% - 1.2px), rgba(190, 160, 130, .28) 100%, transparent 100%),
		radial-gradient(circle calc(360.5 * var(--u3)) at 50% calc(802 * var(--u3)), transparent calc(100% - 1.2px), rgba(170, 150, 100, .25) calc(100% - 1.2px), rgba(170, 150, 100, .25) 100%, transparent 100%),
		radial-gradient(circle calc(709 * var(--u3)) at 50% calc(802 * var(--u3)), rgba(229, 224, 194, 1) 54.2%, rgba(229, 224, 194, 0.97) 58.3%, rgba(229, 224, 194, 0.92) 62.5%, rgba(229, 224, 194, 0.82) 66.7%, rgba(229, 224, 194, 0.69) 70.8%, rgba(229, 224, 194, 0.52) 75.0%, rgba(229, 224, 194, 0.36) 79.1%, rgba(229, 224, 194, 0.21) 83.4%, rgba(229, 224, 194, 0.115) 87.4%, rgba(229, 224, 194, 0.05) 91.7%, rgba(229, 224, 194, 0.02) 95.8%, rgba(229, 224, 194, 0) 100.0%);
}

/* Sección 3 en tablet: etiquetas (Escucha, Confianza, Diálogo, Historia) y "Descubrir" 1 px por encima de su tamaño escalado (24u). */
@media (min-width: 768px) and (max-width: 1024px) {
	.mt-home-values .mt-home-values-word .elementor-heading-title, .mt-home-values .mt-cta-link .elementor-button, .mt-home-values .mt-cta-link .elementor-button-text { font-size: calc(24 * var(--u3) + 1px) !important; }
}

/* vertical, sección 3: etiquetas (Escucha, Confianza, Diálogo, Historia) y "Descubrir" a 13 px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.mt-home-values .mt-home-values-word .elementor-heading-title, .mt-home-values .mt-cta-link .elementor-button, .mt-home-values .mt-cta-link .elementor-button-text { font-size: 13px !important; }
}

/* Sección 3 en móvil: el círculo de PC pasa a px (foto de 104, anillos y brillo centrados en ella con un pseudo-elemento) y las etiquetas, a 11 px, quedan a cada lado entre el anillo interior y el exterior.
   El fondo en u3 (anillos de PC) se quita aquí; el título a 28 px. */
@media (max-width: 767px) {
	.mt-home-values { background-image: none !important; overflow-x: clip; padding-top: 72px !important; padding-bottom: 140px !important; }
	.mt-home-values .mt-home-values-header { margin-top: 0 !important; position: relative; z-index: 1; } /* por encima del brillo del círculo */
	.mt-home-values .mt-home-values-kicker, .mt-home-values .mt-home-values-title { width: 100% !important; max-width: 100% !important; }
	.mt-home-values .mt-home-values-kicker .elementor-heading-title { font-size: 17px !important; line-height: 1.2 !important; }
	.mt-home-values .mt-home-values-title { padding: 0 24px; }
	.mt-home-values .mt-home-values-title .elementor-heading-title { font-size: min(28px, 7vw) !important; line-height: 1.1 !important; }
	.mt-home-values .mt-home-values-circle { position: relative; flex-wrap: nowrap !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 0 26px !important; margin-top: 40px !important; }
	.mt-home-values .mt-home-values-circle::before {
		content: ''; position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; pointer-events: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0.542' stop-color='%23E5E0C2' stop-opacity='1'/%3E%3Cstop offset='0.583' stop-color='%23E5E0C2' stop-opacity='0.97'/%3E%3Cstop offset='0.625' stop-color='%23E5E0C2' stop-opacity='0.92'/%3E%3Cstop offset='0.667' stop-color='%23E5E0C2' stop-opacity='0.82'/%3E%3Cstop offset='0.708' stop-color='%23E5E0C2' stop-opacity='0.69'/%3E%3Cstop offset='0.75' stop-color='%23E5E0C2' stop-opacity='0.52'/%3E%3Cstop offset='0.791' stop-color='%23E5E0C2' stop-opacity='0.36'/%3E%3Cstop offset='0.834' stop-color='%23E5E0C2' stop-opacity='0.21'/%3E%3Cstop offset='0.874' stop-color='%23E5E0C2' stop-opacity='0.115'/%3E%3Cstop offset='0.917' stop-color='%23E5E0C2' stop-opacity='0.05'/%3E%3Cstop offset='0.958' stop-color='%23E5E0C2' stop-opacity='0.02'/%3E%3Cstop offset='1' stop-color='%23E5E0C2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='200' cy='200' r='200' fill='url(%23g)'/%3E%3Ccircle cx='200' cy='200' r='175.4' fill='none' stroke='%23BEA082' stroke-opacity='.28' stroke-width='1.2'/%3E%3Ccircle cx='200' cy='200' r='65.4' fill='none' stroke='%23AA9664' stroke-opacity='.25' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; /* SVG y no radial-gradient: los anillos con paradas `transparent` duras se pintaban negros en un iPhone 12 mini */
	}
	.mt-home-values .mt-home-values-circle .e-con, .mt-home-values .mt-home-values-circle .elementor-widget-heading, .mt-home-values .mt-home-values-circle .elementor-widget-icon { width: auto !important; max-width: none !important; flex: none !important; }
	.mt-home-values .mt-home-values-circle .e-con { margin-top: 0 !important; flex-wrap: nowrap !important; }
	.mt-home-values .mt-home-values-circle .elementor-heading-title { font-size: 11px !important; line-height: 1.5 !important; white-space: nowrap; }
	.mt-home-values .mt-home-values-circle .elementor-icon { font-size: 10px !important; }
	.mt-home-values .mt-home-values-circle .elementor-icon svg { width: 10px !important; height: 10px !important; }
	.mt-home-values .mt-home-values-photo, .mt-home-values .mt-home-values-photo img { width: 104px !important; height: 104px !important; max-width: none !important; }
	.mt-home-values .mt-home-values-cta { margin-top: 44px !important; }
	.mt-home-values .mt-cta-link .elementor-button, .mt-home-values .mt-cta-link .elementor-button-text { font-size: 13px !important; }
}