/**
 * =========================================================
 * CUIDADOS-FLORALES-RAMOS-PEQUENOS.CSS
 * Proyecto: La Floristería Miriam Franco
 * =========================================================
 *
 * Archivo dedicado a la página:
 * /cuidados-florales-ramos-pequenos/
 *
 * Criterios de mantenimiento:
 * - Usar clases propias .lf-* agregadas manualmente en WordPress/Spectra.
 * - Evitar depender de IDs/clases generadas por Astra, Spectra o Gutenberg.
 * - No modificar colores ya establecidos salvo petición explícita.
 * - Mantener desktop aprobado desde Spectra/WordPress.
 * - Ajustar únicamente tablet y mobile.
 * - Usar !important solo para ganar a estilos estructurales del builder.
 */

/*
 * =========================================================
 * MAPA RÁPIDO DE BREAKPOINTS
 * =========================================================
 *
 * Desktop base: estilos desde Spectra/WordPress.
 * Tablet: 768px - 976px.
 * Mobile: <= 767px.
 * Mobile pequeño: <= 544px.
 * Mobile muy estrecho: <= 390px.
 *
 * Nota de cascada:
 * Las media queries con max-width también aplican a tamaños menores.
 * Por eso los bloques de 544px y 390px refinan lo definido antes en 767px.
 */


/* =========================================================
   01. CUIDADOS FLORALES / HEADER INTRO DE MARCA
========================================================= */

/**
 * Sección:
 * Header editorial de marca para la guía de cuidado floral.
 *
 * Objetivo UX:
 * - Presentar la marca sin convertir el header en sección protagonista.
 * - Mantener el acceso rápido al contenido útil de la guía.
 * - Compactar mobile para que el usuario llegue antes al hero.
 *
 * Clases requeridas:
 * - .lf-care-header
 * - .lf-care-header-inner
 * - .lf-care-header-logo
 * - .lf-care-header-brand
 * - .lf-care-header-divider
 * - .lf-care-header-label
 */


/* ---------------------------------------------------------
   BASE RESPONSIVE
   Uso: Corrección estable del divider del header.
--------------------------------------------------------- */

.lf-care-header .lf-care-header-divider,
.lf-care-header .lf-care-header-divider > *,
.lf-care-header .lf-care-header-divider > * > * {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.lf-care-header .lf-care-header-divider {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 80px !important;
}

.lf-care-header .lf-care-header-divider > * {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}


/* ---------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
   Uso: Ajuste exclusivo para tablets verticales / iPad.
--------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-care-header {
		padding-top: 48px !important;
		padding-bottom: 40px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-care-header > *,
	.lf-care-header .lf-care-header-inner {
		width: 100% !important;
		max-width: 640px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	.lf-care-header .lf-care-header-logo {
		display: flex !important;
		justify-content: center !important;
		margin-bottom: 10px !important;
	}

	.lf-care-header .lf-care-header-logo img {
		width: auto !important;
		max-width: 190px !important;
		height: auto !important;
	}

	.lf-care-header .lf-care-header-brand h2 {
		margin-bottom: 12px !important;
		font-size: clamp(28px, 4vw, 36px) !important;
		line-height: 1.12 !important;
		text-align: center !important;
	}

	.lf-care-header .lf-care-header-divider {
		max-width: 80px !important;
		margin-bottom: 16px !important;
	}

	.lf-care-header .lf-care-header-label h3 {
		font-size: 10.5px !important;
		line-height: 1.4 !important;
		letter-spacing: 0.28em !important;
		text-align: center !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
   Uso: Ajuste principal para móviles.
--------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-care-header {
		padding-top: 34px !important;
		padding-bottom: 26px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-care-header > *,
	.lf-care-header .lf-care-header-inner {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	.lf-care-header .lf-care-header-logo {
		display: flex !important;
		justify-content: center !important;
		margin-bottom: 8px !important;
	}

	.lf-care-header .lf-care-header-logo img {
		width: auto !important;
		max-width: 150px !important;
		height: auto !important;
	}

	.lf-care-header .lf-care-header-brand h2 {
		margin-bottom: 8px !important;
		font-size: clamp(24px, 7.2vw, 30px) !important;
		line-height: 1.12 !important;
		text-align: center !important;
	}

	.lf-care-header .lf-care-header-divider {
		max-width: 64px !important;
		margin-bottom: 10px !important;
	}
	
	.lf-care-header .lf-care-header-divider div{
		margin-top: 2px !important;
		margin-bottom: 2px !important;
	}

	.lf-care-header .lf-care-header-label h3 {
		font-size: 9.5px !important;
		line-height: 1.45 !important;
		letter-spacing: 0.2em !important;
		text-align: center !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
   Uso: Refinamiento para móviles angostos.
--------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-care-header {
		padding-top: 30px !important;
		padding-bottom: 24px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-care-header .lf-care-header-logo img {
		max-width: 140px !important;
	}

	.lf-care-header .lf-care-header-brand h2 {
		margin-bottom: 7px !important;
		font-size: clamp(23px, 7.8vw, 28px) !important;
	}

	.lf-care-header .lf-care-header-divider {
		margin-bottom: 9px !important;
	}

	.lf-care-header .lf-care-header-label h3 {
		font-size: 9px !important;
		letter-spacing: 0.18em !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
   Uso: Ajuste fino para pantallas muy pequeñas.
--------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-care-header {
		padding-top: 28px !important;
		padding-bottom: 22px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-care-header .lf-care-header-logo img {
		max-width: 132px !important;
	}

	.lf-care-header .lf-care-header-brand h2 {
		font-size: 24px !important;
	}

	.lf-care-header .lf-care-header-label h3 {
		font-size: 8.8px !important;
		letter-spacing: 0.16em !important;
	}
}


/* =========================================================
   02. CUIDADOS FLORALES / HERO PRINCIPAL
========================================================= */

/**
 * Sección:
 * Hero principal de la guía.
 *
 * Objetivo UX:
 * - Presentar la guía con claridad editorial.
 * - Mantener imagen + texto balanceados en tablet.
 * - Simplificar lectura en mobile.
 * - Neutralizar alignright heredado del bloque de imagen.
 *
 * Clases requeridas:
 * - .lf-care-hero
 * - .lf-care-hero-inner
 * - .lf-care-hero-media
 * - .lf-care-hero-image
 * - .lf-care-hero-content
 * - .lf-care-hero-title
 * - .lf-care-hero-subtitle
 * - .lf-care-hero-cta
 */


/* ---------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
   Uso: Ajuste exclusivo para tablets verticales / iPad.
--------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-care-hero {
		padding-top: 48px !important;
		padding-bottom: 78px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-care-hero > *,
	.lf-care-hero .lf-care-hero-inner {
		width: 100% !important;
		max-width: 820px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.lf-care-hero .lf-care-hero-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		align-items: center !important;
		justify-content: center !important;
		column-gap: 48px !important;
		row-gap: 0 !important;
	}

	.lf-care-hero .lf-care-hero-inner > .lf-care-hero-media,
	.lf-care-hero .lf-care-hero-inner > .lf-care-hero-content {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.lf-care-hero .lf-care-hero-media {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-image,
	.lf-care-hero .lf-care-hero-image.alignright {
		float: none !important;
		clear: none !important;
		display: block !important;
		width: 100% !important;
		max-width: 360px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-image figure,
	.lf-care-hero .lf-care-hero-image .wp-block-uagb-image__figure {
		display: block !important;
		width: 100% !important;
		max-width: 360px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-image img {
		display: block !important;
		width: 100% !important;
		max-width: 360px !important;
		height: auto !important;
		margin: 0 auto !important;
		object-fit: cover !important;
	}

	.lf-care-hero .lf-care-hero-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: center !important;
		text-align: left !important;
	}

	.lf-care-hero .lf-care-hero-title,
	.lf-care-hero .lf-care-hero-title h1,
	.lf-care-hero .lf-care-hero-title mark {
		overflow: visible !important;
	}

	.lf-care-hero .lf-care-hero-title h1 {
		max-width: 360px !important;
		margin-top: 0 !important;
		margin-bottom: 18px !important;
		font-size: clamp(42px, 5.6vw, 52px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.02em !important;
	}

	.lf-care-hero .lf-care-hero-subtitle h2 {
		max-width: 340px !important;
		margin-top: 0 !important;
		margin-bottom: 24px !important;
		font-size: 15.5px !important;
		line-height: 1.5 !important;
	}

	.lf-care-hero .lf-care-hero-cta a {
		min-height: 40px !important;
		padding: 10px 0 !important;
		font-size: 14px !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
   Uso: Ajuste principal para móviles.
--------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-care-hero {
		padding-top: 24px !important;
		padding-bottom: 56px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-care-hero > *,
	.lf-care-hero .lf-care-hero-inner {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.lf-care-hero .lf-care-hero-inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 30px !important;
		margin-top: 15px !important;
		padding: 10px 0px !important  ;
	}

	.lf-care-hero .lf-care-hero-inner > .lf-care-hero-media,
	.lf-care-hero .lf-care-hero-inner > .lf-care-hero-content {
		width: 100% !important;
		max-width: 330px !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
	}

	.lf-care-hero .lf-care-hero-media {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-image,
	.lf-care-hero .lf-care-hero-image.alignright {
		float: none !important;
		clear: none !important;
		display: block !important;
		width: 100% !important;
		max-width: 190px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-image figure,
	.lf-care-hero .lf-care-hero-image .wp-block-uagb-image__figure {
		display: block !important;
		width: 100% !important;
		max-width: 260px !important;
		margin: 0 auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-image img {
		display: block !important;
		width: 100% !important;
		max-width: 220px !important;
		height: auto !important;
		margin: 0 auto !important;
		object-fit: cover !important;
	}

	.lf-care-hero .lf-care-hero-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-title,
	.lf-care-hero .lf-care-hero-title h1,
	.lf-care-hero .lf-care-hero-title mark {
		overflow: visible !important;
	}

	.lf-care-hero .lf-care-hero-title h1 {
		max-width: 310px !important;
		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 16px !important;
		font-size: clamp(36px, 11vw, 44px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.025em !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-subtitle h2 {
		max-width: 280px !important;
		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 20px !important;
		font-size: 14px !important;
		line-height: 1.45 !important;
		text-align: center !important;
	}

	.lf-care-hero .lf-care-hero-cta {
		display: flex !important;
		justify-content: center !important;
	}

	.lf-care-hero .lf-care-hero-cta a {
		min-height: 40px !important;
		padding: 10px 0 !important;
		font-size: 13.5px !important;
		text-align: center !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
   Uso: Refinamiento para móviles angostos.
--------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-care-hero {
		padding-top: 18px !important;
		padding-bottom: 44px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-care-hero .lf-care-hero-inner {
		gap: 24px !important;
	}

	.lf-care-hero .lf-care-hero-inner > .lf-care-hero-media,
	.lf-care-hero .lf-care-hero-inner > .lf-care-hero-content {
		max-width: 300px !important;
	}

	.lf-care-hero .lf-care-hero-image,
	.lf-care-hero .lf-care-hero-image.alignright,
	.lf-care-hero .lf-care-hero-image figure,
	.lf-care-hero .lf-care-hero-image .wp-block-uagb-image__figure,
	.lf-care-hero .lf-care-hero-image img {
		max-width: 250px !important;
	}

	.lf-care-hero .lf-care-hero-title h1 {
		max-width: 285px !important;
		margin-bottom: 12px !important;
		font-size: clamp(34px, 10.8vw, 40px) !important;
		line-height: 1.08 !important;
	}

	.lf-care-hero .lf-care-hero-subtitle h2 {
		max-width: 255px !important;
		margin-bottom: 16px !important;
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}

	.lf-care-hero .lf-care-hero-cta a {
		font-size: 13px !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
   Uso: Ajuste fino para pantallas muy pequeñas.
--------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-care-hero {
		padding-top: 16px !important;
		padding-bottom: 42px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-care-hero .lf-care-hero-inner {
		gap: 22px !important;
	}

	.lf-care-hero .lf-care-hero-image,
	.lf-care-hero .lf-care-hero-image.alignright,
	.lf-care-hero .lf-care-hero-image figure,
	.lf-care-hero .lf-care-hero-image .wp-block-uagb-image__figure,
	.lf-care-hero .lf-care-hero-image img {
		max-width: 240px !important;
	}

	.lf-care-hero .lf-care-hero-title h1 {
		max-width: 270px !important;
		margin-bottom: 12px !important;
		font-size: 34px !important;
	}

	.lf-care-hero .lf-care-hero-subtitle h2 {
		max-width: 245px !important;
		margin-bottom: 16px !important;
		font-size: 13px !important;
	}
}


/* =========================================================
   03. CUIDADOS FLORALES / PASOS DE CUIDADO
========================================================= */

/**
 * Sección:
 * "Sigue estos pasos para cuidar tu arreglo"
 *
 * Objetivo UX:
 * - Hacer que los pasos se lean con claridad en tablet y mobile.
 * - Conservar una lectura editorial controlada en tablet.
 * - Simplificar la lectura en mobile.
 * - Evitar textos angostos, imágenes desalineadas o wrappers forzados.
 *
 * Clases requeridas:
 * - .lf-care-steps
 * - .lf-care-steps-inner
 * - .lf-care-steps-heading
 * - .lf-care-step
 * - .lf-care-step-head
 * - .lf-care-step-number
 * - .lf-care-step-title
 * - .lf-care-step-copy
 * - .lf-care-step-image
 * - .lf-care-step-divider
 */


/* ---------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
   Uso: Ajuste exclusivo para tablets verticales / iPad.
--------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-care-steps {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.lf-care-steps > *,
	.lf-care-steps .lf-care-steps-inner {
		width: 100% !important;
		max-width: 760px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.lf-care-steps .lf-care-steps-heading,
	.lf-care-steps .lf-care-steps-heading h2 {
		overflow: visible !important;
	}

	.lf-care-steps .lf-care-steps-heading h2 {
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 46px !important;
		font-size: clamp(32px, 4.4vw, 40px) !important;
		line-height: 1.16 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step {
		--lf-care-step-content-offset: 52px;

		width: 100% !important;
		max-width: 680px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-top: 42px !important;
		padding-bottom: 10px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		position: relative !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-head {
		display: grid !important;
		grid-template-columns: 36px minmax(0, 1fr) !important;
		column-gap: 16px !important;
		align-items: start !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 12px 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-number {
		width: 36px !important;
		max-width: 36px !important;
		margin: 4px 0 0 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-number p {
		margin: 0 !important;
		font-size: 22px !important;
		line-height: 1 !important;
		letter-spacing: 0.14em !important;
		white-space: nowrap !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-title {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-title h2 {
		max-width: 560px !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 28px !important;
		line-height: 1.18 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-copy {
		width: calc(100% - var(--lf-care-step-content-offset)) !important;
		max-width: 560px !important;
		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 22px !important;
		margin-left: var(--lf-care-step-content-offset) !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-copy p {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 15.5px !important;
		line-height: 1.55 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-image,
	.lf-care-steps .lf-care-step-image.alignleft {
		float: none !important;
		clear: both !important;
		display: block !important;
		width: calc(100% - var(--lf-care-step-content-offset)) !important;
		max-width: 340px !important;
		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		margin-left: var(--lf-care-step-content-offset) !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-image figure,
	.lf-care-steps .lf-care-step-image .wp-block-uagb-image__figure {
		display: block !important;
		width: 100% !important;
		max-width: 340px !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.lf-care-steps .lf-care-step-image img {
		display: block !important;
		width: 100% !important;
		max-width: 340px !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: cover !important;
	}

	.lf-care-steps .lf-care-step-divider {
		width: 100% !important;
		margin-top: 42px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
   Uso: Ajuste principal para móviles.
--------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-care-steps {
		padding-top: 58px !important;
		padding-bottom: 58px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-care-steps > *,
	.lf-care-steps .lf-care-steps-inner {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.lf-care-steps .lf-care-steps-heading,
	.lf-care-steps .lf-care-steps-heading h2 {
		overflow: visible !important;
	}

	.lf-care-steps .lf-care-steps-heading {
		margin-bottom: 20px !important;
	}

	.lf-care-steps .lf-care-steps-heading h2 {
		max-width: 330px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 38px !important;
		font-size: clamp(28px, 8vw, 34px) !important;
		line-height: 1.16 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-top: 0 !important;
		padding-bottom: 34px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-head {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 320px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 14px !important;
		padding-top: 10px !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-number {
		width: auto !important;
		max-width: none !important;
		margin: 0 auto 12px auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-number p {
		margin: 0 auto !important;
		font-size: 24px !important;
		line-height: 1 !important;
		letter-spacing: 0.16em !important;
		white-space: nowrap !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-title {
		width: 100% !important;
		max-width: 320px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 8px !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-title h2,
	.lf-care-steps .lf-care-step-head h2 {
		max-width: 290px !important;
		margin: 0 auto 20px auto !important;
		padding: 0 !important;
		font-size: 23px !important;
		line-height: 1.18 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-copy {
		width: 100% !important;
		max-width: 300px !important;
		margin-top: 0 !important;
		margin-right: auto !important;
		margin-bottom: 16px !important;
		margin-left: auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-copy p {
		margin: 0 auto !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-image,
	.lf-care-steps .lf-care-step-image.alignleft {
		float: none !important;
		clear: both !important;
		display: block !important;
		width: 100% !important;
		max-width: 260px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
		text-align: center !important;
	}

	.lf-care-steps .lf-care-step-image figure,
	.lf-care-steps .lf-care-step-image .wp-block-uagb-image__figure,
	.lf-care-steps .lf-care-step-image img {
		display: block !important;
		width: 100% !important;
		max-width: 260px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
	}

	.lf-care-steps .lf-care-step-image img {
		height: auto !important;
		object-fit: cover !important;
	}

	.lf-care-steps .lf-care-step-divider {
		width: 100% !important;
		max-width: 300px !important;
		margin-top: 30px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
   Uso: Refinamiento para móviles angostos.
--------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-care-steps {
		padding-top: 52px !important;
		padding-bottom: 52px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-care-steps .lf-care-steps-heading h2 {
		max-width: 300px !important;
		margin-bottom: 34px !important;
		font-size: clamp(27px, 8.4vw, 31px) !important;
		line-height: 1.14 !important;
	}

	.lf-care-steps .lf-care-step {
		padding-bottom: 30px !important;
	}

	.lf-care-steps .lf-care-step-title h2,
	.lf-care-steps .lf-care-step-head h2 {
		max-width: 260px !important;
		font-size: clamp(21px, 6.8vw, 25px) !important;
	}

	.lf-care-steps .lf-care-step-copy {
		max-width: 255px !important;
		margin-bottom: 16px !important;
	}

	.lf-care-steps .lf-care-step-copy p {
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}

	.lf-care-steps .lf-care-step-image,
	.lf-care-steps .lf-care-step-image.alignleft,
	.lf-care-steps .lf-care-step-image figure,
	.lf-care-steps .lf-care-step-image .wp-block-uagb-image__figure,
	.lf-care-steps .lf-care-step-image img {
		max-width: 230px !important;
	}

	.lf-care-steps .lf-care-step-divider {
		max-width: 270px !important;
		margin-top: 30px !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
   Uso: Ajuste fino para pantallas muy pequeñas.
--------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-care-steps {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-care-steps .lf-care-steps-heading h2 {
		max-width: 280px !important;
		font-size: 27px !important;
	}

	.lf-care-steps .lf-care-step {
		padding-bottom: 28px !important;
	}

	.lf-care-steps .lf-care-step-title h2,
	.lf-care-steps .lf-care-step-head h2 {
		max-width: 245px !important;
		font-size: 23px !important;
	}

	.lf-care-steps .lf-care-step-copy {
		max-width: 240px !important;
	}

	.lf-care-steps .lf-care-step-copy p {
		font-size: 13px !important;
	}

	.lf-care-steps .lf-care-step-image,
	.lf-care-steps .lf-care-step-image.alignleft,
	.lf-care-steps .lf-care-step-image figure,
	.lf-care-steps .lf-care-step-image .wp-block-uagb-image__figure,
	.lf-care-steps .lf-care-step-image img {
		max-width: 220px !important;
	}
}


/* =========================================================
   04. CUIDADOS FLORALES / CTA SUTIL DE TRANSICIÓN
========================================================= */

/**
 * Sección:
 * "¿Te gustaría enviar un detalle como el que recibiste
 * a alguien importante?"
 *
 * Objetivo UX:
 * - Funcionar como salida suave después de la guía.
 * - No competir con los pasos de cuidado.
 * - Mantener una transición limpia hacia la página de arreglos.
 * - Evitar que el CTA parezca una sección comercial agresiva.
 *
 * Clases requeridas:
 * - .lf-care-transition
 * - .lf-care-transition-inner
 * - .lf-care-transition-divider
 * - .lf-care-transition-title
 * - .lf-care-transition-kicker
 * - .lf-care-transition-cta
 */


/* ---------------------------------------------------------
   BASE RESPONSIVE
   Uso: Regla estable que no depende del breakpoint.
--------------------------------------------------------- */

.lf-care-transition .lf-care-transition-divider {
	display: none !important;
}


/* ---------------------------------------------------------
   BREAKPOINT: TABLET
   Rango: 768px - 976px
   Uso: Ajuste exclusivo para tablets verticales / iPad.
--------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-care-transition {
		padding-top: 44px !important;
		padding-bottom: 64px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-care-transition > *,
	.lf-care-transition .lf-care-transition-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-care-transition .lf-care-transition-title {
		width: 100% !important;
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 24px !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-title h2 {
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		font-size: clamp(30px, 4vw, 40px) !important;
		line-height: 1.22 !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-kicker {
		width: 100% !important;
		max-width: 360px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 18px !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-kicker p {
		margin-left: auto !important;
		margin-right: auto !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
		letter-spacing: 0.12em !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-cta {
		width: 100% !important;
		max-width: 260px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-cta .uagb-buttons__wrap {
		justify-content: center !important;
	}

	.lf-care-transition .lf-care-transition-cta a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
   Uso: Ajuste principal para móviles.
--------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-care-transition {
		padding-top: 38px !important;
		padding-bottom: 52px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lf-care-transition > *,
	.lf-care-transition .lf-care-transition-inner {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-title {
		width: 100% !important;
		max-width: 330px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 22px !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-title h2 {
		max-width: 310px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		font-size: clamp(27px, 7.4vw, 34px) !important;
		line-height: 1.24 !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-kicker {
		width: 100% !important;
		max-width: 280px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 16px !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-kicker p {
		margin-left: auto !important;
		margin-right: auto !important;
		font-size: 11px !important;
		line-height: 1.45 !important;
		letter-spacing: 0.11em !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-cta {
		width: 100% !important;
		max-width: 240px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	.lf-care-transition .lf-care-transition-cta .uagb-buttons__wrap {
		justify-content: center !important;
	}

	.lf-care-transition .lf-care-transition-cta a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE PEQUEÑO
   Rango: <= 544px
   Uso: Refinamiento para móviles angostos.
--------------------------------------------------------- */

@media only screen and (max-width: 544px) {
	.lf-care-transition {
		padding-top: 36px !important;
		padding-bottom: 50px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-care-transition .lf-care-transition-title h2 {
		max-width: 290px !important;
		font-size: clamp(25px, 7vw, 30px) !important;
		line-height: 1.24 !important;
	}

	.lf-care-transition .lf-care-transition-kicker {
		margin-bottom: 14px !important;
	}

	.lf-care-transition .lf-care-transition-kicker p {
		font-size: 10.5px !important;
		letter-spacing: 0.1em !important;
	}
}


/* ---------------------------------------------------------
   BREAKPOINT: MOBILE MUY ESTRECHO
   Rango: <= 390px
   Uso: Ajuste fino para pantallas muy pequeñas.
--------------------------------------------------------- */

@media only screen and (max-width: 390px) {
	.lf-care-transition {
		padding-top: 34px !important;
		padding-bottom: 48px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-care-transition .lf-care-transition-title h2 {
		max-width: 270px !important;
		font-size: 25px !important;
		line-height: 1.25 !important;
	}

	.lf-care-transition .lf-care-transition-kicker p {
		font-size: 10px !important;
	}

	.lf-care-transition .lf-care-transition-cta {
		max-width: 220px !important;
	}
}