/* =========================================================
   La Floristería — Catálogo Arreglos
   Archivo: arreglos.css
   Scope principal: .lf-arreglos-products
   Card propia: .lf-product-card

   Nota técnica:
   La clase .lf-product-card se agrega desde:
   /inc/mf-arreglos-assets.php

   Esto permite estilizar las cards del catálogo sin depender
   únicamente de selectores internos de WooCommerce/Astra.
   ========================================================= */


/* =========================================================
   1. Sección general de productos
   ========================================================= */

.lf-arreglos-products {
  background-color: #ffffff; 
  padding-top: 32px;
  padding-right: 20px;
  padding-bottom: 110px;
  padding-left: 20px;
}

.lf-arreglos-products__container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}


/* =========================================================
   2. Encabezado de sección
   ========================================================= */

.lf-arreglos-products__header {
  max-width: 680px;
  margin-bottom: 42px;
}

.lf-arreglos-products__title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 12px;
  margin-left: 0;
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: #1E1E1E;
}

.lf-arreglos-products__text {
  max-width: 520px;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  color: #7A7A7A;
}


/* =========================================================
   3. Grid WooCommerce
   ========================================================= */

.lf-arreglos-products .woocommerce {
  width: 100%;
}

.lf-arreglos-products .woocommerce ul.products::before,
.lf-arreglos-products .woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

.lf-arreglos-products .woocommerce ul.products,
.lf-arreglos-products ul.products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   4. Card individual de producto
   ========================================================= */

.lf-arreglos-products .lf-product-card {
  cursor: pointer;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 14px 14px 18px !important;
  list-style: none;
  background-color: #F0F0ED;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: solid 1px #C6A15B33;
  min-height: auto;
}

.lf-arreglos-products .lf-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #C6A15B66
}


/* =========================================================
   5. Link principal del producto
   ========================================================= */

.lf-arreglos-products .lf-product-card a.woocommerce-LoopProduct-link,
.lf-arreglos-products .lf-product-card a.woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  
}


/* =========================================================
   6. Imagen del producto
   ========================================================= */

.lf-arreglos-products .lf-product-card img {
  display: block;
  width: 100% !important;
  height: 280px;
  margin: 0 0 18px;
  object-fit: cover;
  object-position: center center;
  border-radius: 10px;
}



/* =========================================================
   8. Nombre del producto
   ========================================================= */

.lf-arreglos-products .lf-product-card .woocommerce-loop-product__title {
  min-height: 52px;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: "inter", serif;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.25;
  color: #1E1E1E;
}


/* =========================================================
   9. Precio
   ========================================================= */

.lf-arreglos-products .lf-product-card .price {
  display: block;
  min-height: 42px;
  margin: 0 0 16px !important;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: #1E1E1E;
  word-spacing: 2px;
}

.lf-arreglos-products .lf-product-card .price span,
.lf-arreglos-products .lf-product-card .price bdi {
  color: #1E1E1E;
}

.lf-arreglos-products .lf-product-card .price .woocommerce-Price-amount {
  display: inline-block;
  white-space: nowrap;
}



/* =========================================================
   11. Elementos extra de WooCommerce
   ========================================================= */

.lf-arreglos-products .lf-product-card .added_to_cart {
  display: block;
  margin-top: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #7A7A7A;
  text-decoration: none;
}

.lf-arreglos-products .lf-product-card .onsale {
  display: none !important;
}


/* =========================================================
   12. Responsive
   ========================================================= */

/* Tablet */
@media (min-width: 768px) {
  .lf-arreglos-products {
    padding-top: 40px;
    padding-right: 32px;
    padding-bottom: 110px;
    padding-left: 32px;
  }

  .lf-arreglos-products__title {
    font-size: 32px;
  }

  .lf-arreglos-products .woocommerce ul.products,
  .lf-arreglos-products ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 36px;
  }

  .lf-arreglos-products .lf-product-card img {
    height: 320px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .lf-arreglos-products {
    padding-top: 48px;
    padding-bottom: 120px;
  }

  .lf-arreglos-products__title {
    font-size: 36px;
  }

  .lf-arreglos-products .woocommerce ul.products,
  .lf-arreglos-products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px;
  }

  .lf-arreglos-products .lf-product-card img {
    height: 280px;
  }
}

/* Desktop amplio */
@media (min-width: 1280px) {
  .lf-arreglos-products .lf-product-card img {
    height: 300px;
  }
}


/* =========================================================
   La Floristería — Micro-enlace en card de catálogo
   Página: Arreglos
   Objetivo:
   - Indicar que la card completa lleva al detalle.
   - Evitar botón duplicado.
   - Mantener una señal visual discreta y editorial.
   ========================================================= */

.lf-arreglos-products .lf-product-card::after {
  content: "Ver detalle \2192";
  display: inline-block;
  margin-top: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #C6A15B;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}

.lf-arreglos-products .lf-product-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.lf-arreglos-products .lf-product-card {
  cursor: pointer;
}

/* En móvil no hay hover, por eso se muestra siempre */
@media (max-width: 767px) {
  .lf-arreglos-products .lf-product-card::after {
    opacity: 1;
    transform: none;
    margin-top: 10px;
  }
}


/* =========================================================
   LF — Ocultar acción rápida flotante de Astra en catálogo
   Página: Arreglos

   Motivo:
   - Astra renderiza un botón/icono flotante sobre la imagen del producto.
   - En esta página la card completa ya funciona como enlace al detalle.
   - Ocultarlo evita duplicar acciones y mantiene el catálogo limpio.
   ========================================================= */

.lf-arreglos-products .lf-product-card .ast-on-card-button,
.lf-arreglos-products .lf-product-card .ast-card-action-tooltip,
.lf-arreglos-products .lf-product-card .ast-select-options-trigger,
.lf-arreglos-products .lf-product-card .ahfb-svg-iconset,
.lf-arreglos-products .lf-product-card .add_to_cart_button,
.lf-arreglos-products .lf-product-card .product_type_variable {
  display: none !important;
}

/* ================================================================================================= =================================================================================================
   03. ETIQUETAS DE VALIDACIÓN
   Sección: "Elige con confianza"
   Responsive only
=================================================================================================  =================================================================================================*/

/**
 * Clases requeridas:
 * - .lf-arreglos-validation
 * - .lf-arreglos-validation-title
 * - .lf-arreglos-validation-grid
 * - .lf-arreglos-validation-card
 * - .lf-arreglos-validation-image
 * - .lf-arreglos-validation-content
 * - .lf-arreglos-validation-card-title
 * - .lf-arreglos-validation-card-copy
 * - .lf-arreglos-validation-action
 * - .lf-arreglos-validation-button
 */


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-arreglos-validation {
		padding-top: 66px !important;
		padding-bottom: 72px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-title h2 {
		max-width: 420px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 30px !important;

		font-size: 25px !important;
		line-height: 1.2 !important;

		text-align: center !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: center !important;
		gap: 16px !important;

		width: 100% !important;
		max-width: 696px !important;

		margin-left: auto !important;
		margin-right: auto !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card {
		display: flex !important;
		flex-direction: column !important;

		width: calc((100% - 32px) / 3) !important;
		max-width: 220px !important;
		min-width: 0 !important;

		margin: 0 !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-image,
	.lf-arreglos-validation .lf-arreglos-validation-image figure {
		width: 100% !important;
		margin: 0 !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-image img {
		display: block !important;
		width: 100% !important;
		height: 160px !important;
		object-fit: cover !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-content {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;

		padding-top: 10px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-bottom: 16px !important;
		column-gap: 15px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-title h3 {
		margin-top: 0 !important;
		margin-bottom: 0px !important;

		font-size: 17px !important;
		line-height: 1.24 !important;

		text-align: left !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-title h3 {
	min-height: 43px !important;

	margin-top: 0 !important;
	margin-bottom: 0px !important;

	font-size: 17px !important;
	line-height: 1.24 !important;

	text-align: left !important;
}

	.lf-arreglos-validation .lf-arreglos-validation-action {
		margin-top: auto !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-action .uagb-buttons__wrap {
		justify-content: flex-start !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-button .uagb-button__link {
	    
		font-size: 11px !important;
		line-height: 1.2 !important;
	}
	
    .lf-arreglos-validation .lf-arreglos-validation-button  a{
	     padding-top: 14px !important;
	     padding-bottom: 14px !important;
	}
	
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-arreglos-validation {
		padding-top: 56px !important;
		padding-bottom: 64px !important;
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-title h2 {
		max-width: 245px !important;

		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 28px !important;

		font-size: 26px !important;
		line-height: 1.18 !important;

		text-align: center !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-grid {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 18px !important;

		width: 100% !important;
		max-width: 295px !important;

		margin-left: auto !important;
		margin-right: auto !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		max-width: 275px !important;
		min-width: 0 !important;

		margin-left: auto !important;
		margin-right: auto !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-image,
	.lf-arreglos-validation .lf-arreglos-validation-image figure {
		width: 100% !important;
		margin: 0 !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-image img {
		display: block !important;
		width: 100% !important;
		height: 145px !important;
		object-fit: cover !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-content {
		display: flex !important;
		flex-direction: column !important;

		padding-top: 10px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		padding-bottom: 10px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-title h3 {
		max-width: 225px !important;

		margin-top: 0 !important;
		margin-bottom: 0px !important;

		font-size: 20px !important;
		line-height: 1.2 !important;

		text-align: left !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-copy p {
		max-width: 225px !important;

		margin-top: 0 !important;
		margin-bottom: 18px !important;

		font-size: 13px !important;
		line-height: 1.52 !important;

		text-align: left !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-action .uagb-buttons__wrap {
		justify-content: flex-start !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-button .uagb-button__link {
		font-size: 11.5px !important;
		line-height: 1.2 !important;
	}
	.lf-arreglos-validation .lf-arreglos-validation-button  a{
	     padding-top: 10px !important;
	     padding-bottom: 10px !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-arreglos-validation {
		padding-top: 52px !important;
		padding-bottom: 58px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-title h2 {
		max-width: 230px !important;
		margin-bottom: 26px !important;

		font-size: 25px !important;
		line-height: 1.18 !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-grid {
		max-width: 270px !important;
		gap: 16px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card {
		max-width: 255px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-image img {
		height: 140px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-content {
		padding-top: 10px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-bottom: 10px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-title h3 {
		max-width: 210px !important;
		font-size: 19px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-copy p {
		max-width: 210px !important;
		font-size: 12.8px !important;
	}
}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-arreglos-validation {
		padding-top: 48px !important;
		padding-bottom: 54px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-title h2 {
		max-width: 220px !important;
		font-size: 24px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-grid {
		max-width: 255px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card {
		max-width: 245px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-image img {
		height: 130px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-title h3 {
		max-width: 200px !important;
		font-size: 18px !important;
	}

	.lf-arreglos-validation .lf-arreglos-validation-card-copy p {
		max-width: 200px !important;
		font-size: 12.5px !important;
	}
}


/* ==================================================================================================================================================================================================
   04. CTA DE ORIENTACIÓN
   Sección: "El detalle correcto empieza con una buena orientación."
   Responsive only
================================================================================================================================================================================================== */

/**
 * Clases requeridas:
 * - .lf-arreglos-cta
 * - .lf-arreglos-cta-content
 * - .lf-arreglos-cta-copy
 * - .lf-arreglos-cta-heading
 * - .lf-arreglos-cta-action
 * - .lf-arreglos-cta-buttons
 * - .lf-arreglos-cta-button
 */


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
   Objetivo:
   - Conservar el CTA horizontal aprobado.
   - Evitar que texto y botón queden comprimidos.
   - Aplicar el layout únicamente sobre la tarjeta interna, no sobre la sección completa.
------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {

	.lf-arreglos-cta .lf-arreglos-cta-content {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 28px !important;

		width: 100% !important;
		max-width: 680px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-top: 42px !important;
		padding-bottom: 42px !important;
		padding-left: 38px !important;
		padding-right: 38px !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-copy {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: 390px !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading {
		width: 100% !important;
		max-width: 390px !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading h2 {
		max-width: 390px !important;

		margin-top: 0 !important;
		margin-bottom: 12px !important;

		font-size: 26px !important;
		line-height: 1.2 !important;

		text-align: left !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading .uagb-desc-text {
		max-width: 370px !important;

		margin-top: 0 !important;
		margin-bottom: 0 !important;

		font-size: 13px !important;
		line-height: 1.58 !important;

		text-align: left !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-action {
		flex: 0 0 auto !important;
		width: auto !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-buttons {
		width: auto !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-buttons .uagb-buttons__wrap {
		justify-content: flex-end !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-button {
		width: auto !important;
		margin: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-button a {
		min-width: 160px !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-arreglos-cta .lf-arreglos-cta-button .uagb-button__link {
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: center !important;
	}

}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
   Objetivo:
   - Cambiar la tarjeta CTA a una composición vertical.
   - Evitar cortes forzados en el título.
   - Mantener la tarjeta centrada con lectura interna alineada a la izquierda.
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.lf-arreglos-cta .lf-arreglos-cta-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 24px !important;

		width: calc(100% - 44px) !important;
		max-width: 305px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		padding-top: 34px !important;
		padding-bottom: 34px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-copy {
		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading {
		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading h2 {
		width: 100% !important;
		max-width: 245px !important;

		margin-top: 0 !important;
		margin-bottom: 12px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;

		font-size: 25px !important;
		line-height: 1.18 !important;

		text-align: left !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading .uagb-desc-text {
		width: 100% !important;
		max-width: 235px !important;

		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;

		font-size: 13px !important;
		line-height: 1.58 !important;

		text-align: left !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-action {
		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-buttons {
		width: 100% !important;
        
		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-buttons .uagb-buttons__wrap {
	display: flex !important;
	justify-content: center !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}

.lf-arreglos-cta .lf-arreglos-cta-button {
	width: auto !important;

	margin-left: auto !important;
	margin-right: auto !important;
}

	.lf-arreglos-cta .lf-arreglos-cta-button a {
		min-width: 178px !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-arreglos-cta .lf-arreglos-cta-button .uagb-button__link {
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: center !important;
	}

}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
   Objetivo:
   - Compactar la tarjeta sin modificar colores ni estructura.
   - Conservar legibilidad del título y del botón.
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 544px) {

	.lf-arreglos-cta .lf-arreglos-cta-content {
		gap: 22px !important;

		width: calc(100% - 40px) !important;
		max-width: 285px !important;

		padding-top: 32px !important;
		padding-bottom: 32px !important;
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading h2 {
		max-width: 225px !important;

		font-size: 23px !important;
		line-height: 1.2 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading .uagb-desc-text {
		max-width: 220px !important;

		font-size: 12.8px !important;
		line-height: 1.56 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-button a {
		min-width: 170px !important;
		min-height: 42px !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-button .uagb-button__link {
		font-size: 11.5px !important;
	}

}


/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
   Objetivo:
   - Evitar desbordamientos en dispositivos angostos.
   - Mantener el CTA respirado y completamente legible.
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 390px) {

	.lf-arreglos-cta .lf-arreglos-cta-content {
		gap: 20px !important;

		width: calc(100% - 36px) !important;
		max-width: 275px !important;

		padding-top: 30px !important;
		padding-bottom: 30px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading h2 {
		max-width: 215px !important;

		font-size: 22px !important;
		line-height: 1.2 !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-heading .uagb-desc-text {
		max-width: 210px !important;
		font-size: 12.5px !important;
	}

	.lf-arreglos-cta .lf-arreglos-cta-button a {
		min-width: 162px !important;
	}

}