/* =================================================================================================
   NUESTRO MÉTODO - RESPONSIVE ONLY
   Proyecto: La Floristería Miriam Franco
================================================================================================= */

/**
 * Archivo:
 * nuestro-metodo.css
 *
 * Objetivo general:
 * - Ajustar la página "Nuestro método" en tablet y mobile.
 * - Mantener desktop aprobado desde Spectra/WordPress.
 * - No modificar colores establecidos.
 * - Evitar dependencia innecesaria de clases generadas por Spectra/Astra.
 * - Usar clases manuales propias con prefijo .lf-*.
 *
 * Criterios técnicos:
 * - No tocar desktop.
 * - Evitar selectores amplios tipo .seccion > * cuando existan shapes/decoraciones.
 * - Priorizar wrappers reales: .lf-section .lf-section-inner.
 * - Mantener reglas agrupadas por sección y breakpoint.
 *
 * Breakpoints usados:
 * - Tablet: 768px - 976px
 * - Mobile: <= 767px
 * - Mobile pequeño: <= 544px
 * - Mobile muy estrecho: <= 390px
 */


/* =================================================================================================
   01. INTRODUCCIÓN BREVE
   Sección: "Nuestro método"
================================================================================================= */

/**
 * Clases requeridas:
 * - .lf-method-intro
 * - .lf-method-intro-inner
 * - .lf-method-intro-title
 * - .lf-method-intro-subtitle
 * - .lf-method-intro-copy
 */


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-method-intro {
		padding-top: 72px !important;
		padding-bottom: 76px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-method-intro .lf-method-intro-inner {
		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: left !important;
	}

	.lf-method-intro .lf-method-intro-title h1 {
		max-width: 620px !important;

		margin-top: 0 !important;
		margin-bottom: 30px !important;

		font-size: clamp(42px, 5.2vw, 54px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.02em !important;

		text-align: left !important;
	}

	.lf-method-intro .lf-method-intro-subtitle h2 {
		max-width: 620px !important;

		margin-top: 0 !important;
		margin-bottom: 16px !important;

		font-size: clamp(30px, 4.2vw, 40px) !important;
		line-height: 1.18 !important;
		letter-spacing: -0.01em !important;

		text-align: left !important;
	}

	.lf-method-intro .lf-method-intro-copy p {
		margin-top: 0 !important;
		margin-bottom: 0 !important;

		font-size: 15.5px !important;
		line-height: 1.6 !important;

		text-align: left !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-method-intro {
		padding-top: 58px !important;
		padding-bottom: 64px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-method-intro .lf-method-intro-inner {
		width: 100% !important;
		max-width: 330px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: left !important;
	}

	.lf-method-intro .lf-method-intro-title h1 {
		max-width: 300px !important;

		margin-top: 0 !important;
		margin-bottom: 28px !important;

		font-size: clamp(38px, 10vw, 48px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.02em !important;

		text-align: left !important;
	}

	.lf-method-intro .lf-method-intro-subtitle h2 {
		max-width: 300px !important;

		margin-top: 0 !important;
		margin-bottom: 16px !important;

		font-size: clamp(29px, 8.5vw, 38px) !important;
		line-height: 1.14 !important;
		letter-spacing: -0.015em !important;

		text-align: left !important;
	}

	.lf-method-intro .lf-method-intro-copy p {
		max-width: 285px !important;

		margin-top: 0 !important;
		margin-bottom: 0 !important;

		font-size: 14px !important;
		line-height: 1.55 !important;

		text-align: left !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-method-intro {
		padding-top: 52px !important;
		padding-bottom: 58px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-method-intro .lf-method-intro-inner {
		max-width: 290px !important;
	}

	.lf-method-intro .lf-method-intro-title h1 {
		max-width: 270px !important;
		margin-bottom: 26px !important;

		font-size: clamp(36px, 10vw, 44px) !important;
		line-height: 1.08 !important;
	}

	.lf-method-intro .lf-method-intro-subtitle h2 {
		max-width: 270px !important;
		margin-bottom: 14px !important;

		font-size: clamp(27px, 8.8vw, 34px) !important;
		line-height: 1.14 !important;
	}

	.lf-method-intro .lf-method-intro-copy p {
		max-width: 260px !important;
		font-size: 13.5px !important;
		line-height: 1.55 !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-method-intro {
		padding-top: 48px !important;
		padding-bottom: 54px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-method-intro .lf-method-intro-inner {
		max-width: 270px !important;
	}

	.lf-method-intro .lf-method-intro-title h1 {
		max-width: 250px !important;
		font-size: 38px !important;
	}

	.lf-method-intro .lf-method-intro-subtitle h2 {
		max-width: 250px !important;
		font-size: 28px !important;
	}

	.lf-method-intro .lf-method-intro-copy p {
		max-width: 245px !important;
		font-size: 13px !important;
	}
}


/* =================================================================================================
   02. PASOS DEL MÉTODO
   Sección: 01 / 02 / 03 / 04
================================================================================================= */

/**
 * Clases requeridas:
 * - .lf-method-steps
 * - .lf-method-steps-inner
 * - .lf-method-step
 * - .lf-method-step-row
 * - .lf-method-step-number
 * - .lf-method-step-content
 * - .lf-method-step-title
 * - .lf-method-step-copy
 */


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-method-steps {
		padding-top: 78px !important;
		padding-bottom: 88px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-method-steps .lf-method-steps-inner {
		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.lf-method-steps .lf-method-step {
		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 76px !important;

		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.lf-method-steps .lf-method-step:last-child {
		margin-bottom: 0 !important;
	}

	.lf-method-steps .lf-method-step-row {
		display: grid !important;
		grid-template-columns: 82px minmax(0, 1fr) !important;
		column-gap: 24px !important;
		align-items: start !important;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-method-steps .lf-method-step-number {
		width: 82px !important;
		max-width: 82px !important;

		margin: 0 !important;
		padding: 0 !important;

		text-align: left !important;
	}

	.lf-method-steps .lf-method-step-number p {
		margin: 0 !important;
		padding: 0 !important;

		font-size: clamp(54px, 7vw, 72px) !important;
		line-height: 0.95 !important;
		letter-spacing: -0.04em !important;
		white-space: nowrap !important;

		text-align: left !important;
	}

	.lf-method-steps .lf-method-step-content {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		text-align: left !important;
	}

	.lf-method-steps .lf-method-step-title h2 {
		max-width: 480px !important;

		margin-top: 0 !important;
		margin-bottom: 8px !important;

		font-size: clamp(25px, 3.2vw, 32px) !important;
		line-height: 1.18 !important;

		text-align: left !important;
	}

	.lf-method-steps .lf-method-step-copy h2 {
		max-width: 520px !important;

		margin-top: 0 !important;
		margin-bottom: 0 !important;

		font-size: 15px !important;
		line-height: 1.55 !important;

		text-align: left !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-method-steps {
		padding-top: 58px !important;
		padding-bottom: 64px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-method-steps .lf-method-steps-inner {
		width: 100% !important;
		max-width: 330px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.lf-method-steps .lf-method-step {
		width: 100% !important;
		max-width: 330px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 46px !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: center !important;
	}

	.lf-method-steps .lf-method-step:last-child {
		margin-bottom: 0 !important;
	}

	/**
	 * Neutraliza el layout lateral heredado de Gutenberg/Spectra.
	 * En mobile priorizamos lectura vertical clara.
	 */
	.lf-method-steps .lf-method-step-row {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 14px !important;

		width: 100% !important;
		max-width: 100% !important;

		margin: 0 auto !important;
		padding: 0 !important;

		text-align: center !important;
	}

	.lf-method-steps .lf-method-step-number {
		width: auto !important;
		max-width: none !important;

		margin: 0 auto 12px auto !important;
		padding: 0 !important;

		text-align: center !important;
	}

	.lf-method-steps .lf-method-step-number p {
		margin: 0 auto !important;
		padding: 0 !important;

		font-size: clamp(42px, 13vw, 56px) !important;
		line-height: 0.95 !important;
		letter-spacing: -0.03em !important;
		white-space: nowrap !important;

		text-align: center !important;
	}

	.lf-method-steps .lf-method-step-content {
		width: 100% !important;
		max-width: 285px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;

		text-align: center !important;
	}

	.lf-method-steps .lf-method-step-title h2,
	.lf-method-steps .lf-method-step-copy h2 {
		margin-left: auto !important;
		margin-right: auto !important;

		text-align: center !important;
	}

	.lf-method-steps .lf-method-step-title h2 {
		max-width: 285px !important;

		margin-top: 0 !important;
		margin-bottom: 8px !important;

		font-size: clamp(25px, 7.2vw, 31px) !important;
		line-height: 1.15 !important;
	}

	.lf-method-steps .lf-method-step-copy h2 {
		max-width: 285px !important;

		margin-top: 0 !important;
		margin-bottom: 0 !important;

		font-size: 14px !important;
		line-height: 1.55 !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-method-steps {
		padding-top: 52px !important;
		padding-bottom: 58px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-method-steps .lf-method-steps-inner {
		max-width: 290px !important;
	}

	.lf-method-steps .lf-method-step {
		max-width: 290px !important;
		margin-bottom: 42px !important;
	}

	.lf-method-steps .lf-method-step-number p {
		font-size: clamp(40px, 13vw, 50px) !important;
		line-height: 0.95 !important;
	}

	.lf-method-steps .lf-method-step-content {
		max-width: 270px !important;
	}

	.lf-method-steps .lf-method-step-title h2 {
		max-width: 265px !important;
		font-size: clamp(24px, 7.4vw, 29px) !important;
		line-height: 1.16 !important;
	}

	.lf-method-steps .lf-method-step-copy h2 {
		max-width: 265px !important;
		font-size: 13.5px !important;
		line-height: 1.55 !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-method-steps {
		padding-top: 48px !important;
		padding-bottom: 54px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-method-steps .lf-method-steps-inner {
		max-width: 270px !important;
	}

	.lf-method-steps .lf-method-step {
		max-width: 270px !important;
		margin-bottom: 40px !important;
	}

	.lf-method-steps .lf-method-step-number p {
		font-size: 42px !important;
	}

	.lf-method-steps .lf-method-step-content {
		max-width: 255px !important;
	}

	.lf-method-steps .lf-method-step-title h2 {
		max-width: 250px !important;
		font-size: 25px !important;
	}

	.lf-method-steps .lf-method-step-copy h2 {
		max-width: 250px !important;
		font-size: 13px !important;
	}
}


/* =================================================================================================
   03. REFUERZO DE ATENCIÓN HUMANA
   Sección: "Atención humana en todo momento"
================================================================================================= */

/**
 * Clases requeridas:
 * - .lf-method-human
 * - .lf-method-human-inner
 * - .lf-method-human-title
 * - .lf-method-human-copy
 * - .lf-method-human-divider
 * - .lf-method-human-grid
 * - .lf-method-human-item
 * - .lf-method-human-item-title
 * - .lf-method-human-item-copy
 */


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-method-human {
		padding-top: 72px !important;
		padding-bottom: 78px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-method-human .lf-method-human-inner {
		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-title h2 {
		max-width: 620px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 18px !important;

		font-size: clamp(32px, 4vw, 42px) !important;
		line-height: 1.18 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-copy {
		margin-bottom: 40px !important;
	}

	.lf-method-human .lf-method-human-copy p {
		max-width: 560px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 0 !important;

		font-size: 15px !important;
		line-height: 1.6 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-divider {
		width: 100% !important;
		max-width: 600px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 42px !important;
	}

	.lf-method-human .lf-method-human-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 36px !important;
		row-gap: 0 !important;

		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.lf-method-human .lf-method-human-item {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		text-align: left !important;
	}

	.lf-method-human .lf-method-human-item-title h3 {
		margin-top: 0 !important;
		margin-bottom: 10px !important;

		font-size: 18px !important;
		line-height: 1.25 !important;

		text-align: left !important;
	}

	.lf-method-human .lf-method-human-item-copy p {
		margin: 0 !important;

		font-size: 13.5px !important;
		line-height: 1.5 !important;

		text-align: left !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-method-human {
		padding-top: 58px !important;
		padding-bottom: 62px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-method-human .lf-method-human-inner {
		width: 100% !important;
		max-width: 330px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-title,
	.lf-method-human .lf-method-human-title h2 {
		overflow: visible !important;
	}

	.lf-method-human .lf-method-human-title h2 {
		max-width: 310px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 18px !important;

		font-size: clamp(28px, 7.6vw, 34px) !important;
		line-height: 1.18 !important;
		letter-spacing: -0.01em !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-copy p {
		max-width: 290px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 26px !important;

		font-size: 14px !important;
		line-height: 1.55 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-divider {
		width: 100% !important;
		max-width: 280px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 28px !important;
	}

	.lf-method-human .lf-method-human-grid {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 22px !important;

		width: 100% !important;
		max-width: 290px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-item {
		width: 100% !important;
		max-width: 260px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding: 0 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-item-title h3 {
		margin-top: 0 !important;
		margin-bottom: 8px !important;

		font-size: 18px !important;
		line-height: 1.25 !important;

		text-align: center !important;
	}

	.lf-method-human .lf-method-human-item-copy p {
		max-width: 240px !important;

		margin: 0 auto !important;

		font-size: 13.5px !important;
		line-height: 1.5 !important;

		text-align: center !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-method-human {
		padding-top: 52px !important;
		padding-bottom: 56px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-method-human .lf-method-human-inner {
		max-width: 295px !important;
		margin-top: 30px !important;
	}

	.lf-method-human .lf-method-human-title h2 {
		max-width: 280px !important;
		margin-bottom: 16px !important;

		font-size: clamp(27px, 7.8vw, 31px) !important;
		line-height: 1.18 !important;
	}

	.lf-method-human .lf-method-human-copy p {
		max-width: 265px !important;
		margin-bottom: 24px !important;

		font-size: 13.5px !important;
		line-height: 1.55 !important;
	}

	.lf-method-human .lf-method-human-divider {
		max-width: 250px !important;
		margin-bottom: 26px !important;
	}

	.lf-method-human .lf-method-human-grid {
		max-width: 265px !important;
		gap: 20px !important;
	}

	.lf-method-human .lf-method-human-item {
		max-width: 245px !important;
	}

	.lf-method-human .lf-method-human-item-title h3 {
		font-size: 17px !important;
	}

	.lf-method-human .lf-method-human-item-copy p {
		max-width: 230px !important;
		font-size: 13px !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-method-human {
		padding-top: 48px !important;
		padding-bottom: 52px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-method-human .lf-method-human-inner {
		max-width: 270px !important;
	}

	.lf-method-human .lf-method-human-title h2 {
		max-width: 255px !important;

		font-size: 27px !important;
		line-height: 1.18 !important;
	}

	.lf-method-human .lf-method-human-copy p {
		max-width: 245px !important;
		font-size: 13px !important;
	}

	.lf-method-human .lf-method-human-grid {
		max-width: 245px !important;
		gap: 24px !important;
	}

	.lf-method-human .lf-method-human-item {
		max-width: 230px !important;
	}
}


/* =================================================================================================
   04. CTA SUAVE FINAL
   Sección: "Ahora que ya sabes cómo funciona"
================================================================================================= */

/**
 * Clases requeridas:
 * - .lf-method-cta
 * - .lf-method-cta-inner
 * - .lf-method-cta-title
 * - .lf-method-cta-subtitle
 * - .lf-method-cta-actions
 * - .lf-method-cta-primary
 * - .lf-method-cta-secondary
 * - .lf-method-cta-microcopy
 */


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-method-cta {
		padding-top: 72px !important;
		padding-bottom: 78px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-method-cta .lf-method-cta-inner {
		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-title h2 {
		max-width: 560px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 16px !important;

		font-size: clamp(34px, 4.2vw, 44px) !important;
		line-height: 1.16 !important;
		letter-spacing: -0.01em !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-subtitle p {
		max-width: 420px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 34px !important;

		font-size: 16px !important;
		line-height: 1.5 !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-actions .uagb-buttons__wrap {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 14px !important;

		width: 100% !important;
		max-width: 430px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 20px !important;
	}

	.lf-method-cta .lf-method-cta-primary,
	.lf-method-cta .lf-method-cta-secondary {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.lf-method-cta .lf-method-cta-primary a,
	.lf-method-cta .lf-method-cta-secondary a {
		min-width: 170px !important;
		min-height: 44px !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		padding-left: 22px !important;
		padding-right: 22px !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-microcopy p {
		max-width: 460px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 0 !important;

		font-size: 12.5px !important;
		line-height: 1.5 !important;

		text-align: center !important;
		white-space: normal !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-method-cta {
		padding-top: 58px !important;
		padding-bottom: 64px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-method-cta .lf-method-cta-inner {
		width: 100% !important;
		max-width: 330px !important;

		margin-top: 25px !important;
		margin-left: auto !important;
		margin-right: auto !important;

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-title h2 {
		max-width: 300px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 16px !important;

		font-size: clamp(30px, 8.4vw, 38px) !important;
		line-height: 1.16 !important;
		letter-spacing: -0.012em !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-subtitle p {
		max-width: 260px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 22px !important;

		font-size: 15px !important;
		line-height: 1.5 !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-actions .uagb-buttons__wrap {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;

		width: 100% !important;
		max-width: 260px !important;

		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 14px !important;
	}

	.lf-method-cta .lf-method-cta-primary,
	.lf-method-cta .lf-method-cta-secondary {
		width: 100% !important;
		max-width: 260px !important;
		margin: 0 !important;
	}

	.lf-method-cta .lf-method-cta-primary a,
	.lf-method-cta .lf-method-cta-secondary a {
		width: 100% !important;
		min-height: 44px !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		padding-left: 18px !important;
		padding-right: 18px !important;

		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-primary .uagb-button__link,
	.lf-method-cta .lf-method-cta-secondary .uagb-button__link {
		width: 100% !important;
		text-align: center !important;
	}

	.lf-method-cta .lf-method-cta-microcopy p {
		max-width: 240px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 0 !important;

		font-size: 11.8px !important;
		line-height: 1.5 !important;

		text-align: center !important;
		white-space: normal !important;
		opacity: 0.85 !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-method-cta {
		padding-top: 52px !important;
		padding-bottom: 58px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-method-cta .lf-method-cta-inner {
		max-width: 295px !important;
	}

	.lf-method-cta .lf-method-cta-title h2 {
		max-width: 275px !important;
		margin-bottom: 14px !important;

		font-size: clamp(28px, 8.4vw, 34px) !important;
		line-height: 1.16 !important;
	}

	.lf-method-cta .lf-method-cta-subtitle p {
		max-width: 245px !important;
		margin-bottom: 20px !important;

		font-size: 14px !important;
	}

	.lf-method-cta .lf-method-cta-actions .uagb-buttons__wrap {
		max-width: 240px !important;
		gap: 11px !important;
		margin-bottom: 13px !important;
	}

	.lf-method-cta .lf-method-cta-primary,
	.lf-method-cta .lf-method-cta-secondary {
		max-width: 240px !important;
	}

	.lf-method-cta .lf-method-cta-primary a,
	.lf-method-cta .lf-method-cta-secondary a {
		min-height: 42px !important;
	}

	.lf-method-cta .lf-method-cta-microcopy p {
		max-width: 220px !important;
		font-size: 11.5px !important;
		line-height: 1.5 !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-method-cta {
		padding-top: 48px !important;
		padding-bottom: 54px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-method-cta .lf-method-cta-inner {
		max-width: 270px !important;
	}

	.lf-method-cta .lf-method-cta-title h2 {
		max-width: 255px !important;
		font-size: 29px !important;
	}

	.lf-method-cta .lf-method-cta-subtitle p {
		max-width: 230px !important;
		font-size: 13.5px !important;
	}

	.lf-method-cta .lf-method-cta-actions .uagb-buttons__wrap {
		max-width: 225px !important;
	}

	.lf-method-cta .lf-method-cta-primary,
	.lf-method-cta .lf-method-cta-secondary {
		max-width: 225px !important;
	}

	.lf-method-cta .lf-method-cta-microcopy p {
		max-width: 205px !important;
		font-size: 11px !important;
	}
}