/* css/components/buttons.css · COMPONENTE · botones con hover «Barrido de color» · todas las páginas
   Clases (en el widget Botón → Avanzado → Clases CSS): mt-cta-link = enlace con flecha («Descubrir ›», «Sobre mí ›»; el naranja barre el texto) · mt-cta-pill = botón píldora («Hablemos»; el beige barre al verde).
   También quita el halo verde, el subrayado y el fondo que el kit de Elementor y Balancia dan a los botones.
*/

/* CTA con hover "Barrido de color" (opción 3 elegida). Se activa añadiendo la clase al widget Botón de Elementor:
   .mt-cta-link = enlace con flecha ("Descubrir ›", "Sobre mí ›", "Conoce tu proceso ›"); el naranja entra de izquierda a derecha.
   .mt-cta-pill = botón verde ("Hablemos"); el beige barre al verde. */
.elementor-widget-button.mt-cta-link .elementor-button { background: transparent !important; box-shadow: none; cursor: pointer; }

.elementor-widget-button.mt-cta-link .elementor-button-text {
	display: inline-block;
	color: transparent;
	background: linear-gradient(90deg, #D35822 50%, #301F15 50%) 100% 0 / 200% 100%;
	padding-top: .3em; margin-top: -.3em; /* el degradado solo pinta dentro de la caja: sin esto se recorta la tilde de "SOBRE MÍ" */
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-position .45s ease;
}

/* flecha dibujada (SVG como máscara) con la altura de las mayúsculas (.72em) y apoyada en la línea base; mismo barrido de color, un poco después que el texto */
.elementor-widget-button.mt-cta-link .elementor-button-text::after {
	content: '';
	display: inline-block;
	width: .5em;
	height: .72em;
	margin-left: .55em;
	vertical-align: baseline;
	background-color: #301F15;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M1 1l4.6 4L1 9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M1 1l4.6 4L1 9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color .3s ease .15s, margin-left .3s ease;
}

.elementor-widget-button.mt-cta-link .elementor-button:hover .elementor-button-text,
.elementor-widget-button.mt-cta-link .elementor-button:focus-visible .elementor-button-text { background-position: 0 0; }

.elementor-widget-button.mt-cta-link .elementor-button:hover .elementor-button-text::after,
.elementor-widget-button.mt-cta-link .elementor-button:focus-visible .elementor-button-text::after { background-color: #D35822; margin-left: .8em; }

.elementor-widget-button.mt-cta-pill .elementor-button.elementor-button {
	background: linear-gradient(90deg, #E9DFD2 50%, #BDB166 50%) 100% 0 / 200% 100% no-repeat;
	color: #fff;
	cursor: pointer;
	border-radius: 999px;
	padding: calc(14.2 * var(--u8, 1px)) calc(24.1 * var(--u8, 1px)); /* 134,6 x 44,4 u con texto de 16 u */
	transition: background-position .45s ease, color .3s ease .1s;
}

.elementor-widget-button.mt-cta-pill .elementor-button.elementor-button:hover,
.elementor-widget-button.mt-cta-pill .elementor-button.elementor-button:focus-visible { background-position: 0 0; color: #301F15; }

/* el kit de Elementor da a todos los botones, al pasar el ratón o enfocar, un halo verde (box-shadow #E9FFF4) y un color de fondo propios: aquí no */
.elementor-widget-button.mt-cta-link .elementor-button:is(:hover, :focus, :focus-visible, :active), .elementor-widget-button.mt-cta-pill .elementor-button:is(:hover, :focus, :focus-visible, :active) { box-shadow: none !important; outline: 0; }

.elementor-widget-button.mt-cta-link .elementor-button:is(:hover, :focus, :active) { background-color: transparent !important; }

.elementor-widget-button.mt-cta-link .elementor-button, .elementor-widget-button.mt-cta-pill .elementor-button, .elementor-widget-button.mt-cta-link .elementor-button *, .elementor-widget-button.mt-cta-pill .elementor-button * { text-decoration: none !important; }

/* y la raya animada de Balancia bajo el texto del botón (.vamtam-btn-text, un degradado de 1px) */
.elementor-widget-button.mt-cta-link .vamtam-btn-text, .elementor-widget-button.mt-cta-pill .vamtam-btn-text { background-image: none !important; }

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-button.mt-cta-link .elementor-button-text, .elementor-widget-button.mt-cta-link .elementor-button-text::after, .elementor-widget-button.mt-cta-pill .elementor-button.elementor-button { transition: none; }
}


/* ---------- ALTO Y LETRA ÚNICOS de los botones píldora (Figma: todos 46 u de alto con texto de 16 u y relleno de 24 u a los lados) ----------
   Vale para «Hablemos», los CTA de las páginas, «Enviar mensaje», «Ir a la ubicación», los botones de teléfono y correo de Contacto y «Volver al inicio» de la 404.
   En PC alto, letra y relleno escalan con el ancho de pantalla como todo el diseño (46 / 16 / 24 px a 1920) y en tablet y móvil (hasta 1024 px) miden 46 / 16 / 24 px. El ancho lo sigue dando el texto y el relleno lateral de cada uno.
   Los enlaces con flecha (mt-cta-link: «Descubrir», «Conoce tu proceso», «Sobre mí») no son píldoras y no entran aquí. */
:root { --mt-pill-h: calc(46 * min(100vw / 1920, 1px)); --mt-pill-fs: calc(16 * min(100vw / 1920, 1px)); --mt-pill-px: calc(24 * min(100vw / 1920, 1px)); }
@media (max-width: 1024px) { :root { --mt-pill-h: 38px; --mt-pill-fs: 14px; --mt-pill-px: 20px; } } /* tablet y móvil: 46 px de alto se veían grandes (aprobado en móvil; en tablet 42 px seguía grande) */
body .elementor-widget-button.mt-cta-pill .elementor-button.elementor-button,
body .elementor .mt-contact .mt-contact-submit,
body .elementor .mt-contact :is([data-id="a1f0c003"], [data-id="a1f0c004"]).e-button-base {
	box-sizing: border-box !important; height: var(--mt-pill-h) !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
	font-size: var(--mt-pill-fs) !important; line-height: 1 !important;
	display: inline-flex; align-items: center; justify-content: center;
}
body .elementor-widget-button.mt-cta-pill .elementor-button .elementor-button-text { font-size: inherit !important; line-height: inherit !important; }
body .elementor-widget-button.mt-cta-pill .elementor-button.elementor-button { padding-left: var(--mt-pill-px) !important; padding-right: var(--mt-pill-px) !important; } /* relleno lateral de 24 u en todos los CTA (no en teléfono/correo ni «Enviar mensaje», que llevan icono o ancho propio) */