/* =================================================================================================================================================================================================================================== */

/* =================================================================================================
   CONTACTO - RESPONSIVE ONLY
   Proyecto: La Floristería Miriam Franco
================================================================================================= */

/**
 * Archivo:
 * contacto.css
 *
 * Objetivo general:
 * - Ajustar la página Contacto en tablet y mobile.
 * - Mantener desktop aprobado desde Spectra/WordPress.
 * - No modificar colores establecidos.
 * - Usar clases manuales propias con prefijo .lf-*.
 * - Evitar selectores amplios tipo .seccion > * cuando existan shapes/decoraciones.
 *
 * Breakpoints usados:
 * - Tablet: 768px - 976px
 * - Mobile: <= 767px
 * - Mobile pequeño: <= 544px
 * - Mobile muy estrecho: <= 390px
 */


/* =================================================================================================
   01. HERO CONTACTO
   Sección: "Contacto"
================================================================================================= */

/**
 * Clases requeridas:
 * - .lf-contact-hero
 * - .lf-contact-hero-inner
 * - .lf-contact-hero-title
 * - .lf-contact-hero-subtitle
 * - .lf-contact-hero-copy
 */


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

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

	.lf-contact-hero .lf-contact-hero-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-contact-hero .lf-contact-hero-title h1 {
		max-width: 560px !important;

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

		font-size: clamp(42px, 5vw, 54px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.02em !important;

		text-align: center !important;
	}

	.lf-contact-hero .lf-contact-hero-subtitle h2 {
		max-width: 640px !important;

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

		font-size: clamp(32px, 4.2vw, 42px) !important;
		line-height: 1.16 !important;
		letter-spacing: -0.015em !important;

		text-align: center !important;
	}

	.lf-contact-hero .lf-contact-hero-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;
	}
}


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

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

	.lf-contact-hero .lf-contact-hero-inner {
		width: 100% !important;
		max-width: 335px !important;

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

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: left !important;
	}

	.lf-contact-hero .lf-contact-hero-title h1 {
		max-width: 300px !important;

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

		font-size: clamp(38px, 10vw, 48px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.02em !important;

		text-align: left !important;
	}

	.lf-contact-hero .lf-contact-hero-subtitle h2 {
		max-width: 300px !important;

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

		font-size: clamp(29px, 8.1vw, 36px) !important;
		line-height: 1.14 !important;
		letter-spacing: -0.015em !important;

		text-align: left !important;
	}

	.lf-contact-hero .lf-contact-hero-copy p {
		max-width: 275px !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-contact-hero {
		padding-top: 52px !important;
		padding-bottom: 58px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.lf-contact-hero .lf-contact-hero-inner {
		max-width: 295px !important;
	}

	.lf-contact-hero .lf-contact-hero-title h1 {
		max-width: 270px !important;
		margin-bottom: 20px !important;

		font-size: clamp(36px, 10vw, 44px) !important;
		line-height: 1.08 !important;
	}

	.lf-contact-hero .lf-contact-hero-subtitle h2 {
		max-width: 275px !important;
		margin-bottom: 13px !important;

		font-size: clamp(27px, 8.3vw, 32px) !important;
		line-height: 1.14 !important;
	}

	.lf-contact-hero .lf-contact-hero-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-contact-hero {
		padding-top: 48px !important;
		padding-bottom: 54px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-contact-hero .lf-contact-hero-inner {
		max-width: 285px !important;
	}

	.lf-contact-hero .lf-contact-hero-title h1 {
		max-width: 250px !important;
		font-size: 38px !important;
	}

	.lf-contact-hero .lf-contact-hero-subtitle h2 {
		max-width: 270px !important;
		font-size: 29px !important;
	}

	.lf-contact-hero .lf-contact-hero-copy p {
		max-width: 255px !important;
		font-size: 13px !important;
	}
}


/* =================================================================================================================================================================================================================================== */

/* =================================================================================================
   02. WHATSAPP COMO CANAL PRINCIPAL
   Sección: "WhatsApp es el canal principal de atención"
================================================================================================= */

/**
 * Clases requeridas:
 * - .lf-contact-whatsapp
 * - .lf-contact-whatsapp-inner
 * - .lf-contact-whatsapp-title
 * - .lf-contact-whatsapp-copy
 * - .lf-contact-whatsapp-action
 * - .lf-contact-whatsapp-button
 * - .lf-contact-whatsapp-microcopy
 */


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

@media only screen and (min-width: 768px) and (max-width: 976px) {
	.lf-contact-whatsapp {
		padding-top: 58px !important;
		padding-bottom: 62px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-inner {
		width: 100% !important;
		max-width: 600px !important;

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

		padding-left: 0 !important;
		padding-right: 0 !important;

		border-left: none !important;
		text-align: left !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-title h2 {
		max-width: 520px !important;

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

		font-size: clamp(28px, 3.6vw, 38px) !important;
		line-height: 1.18 !important;
		letter-spacing: -0.012em !important;

		text-align: left !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-copy {
		margin-bottom: 20px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-copy p {
		max-width: 460px !important;

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

		font-size: 14.5px !important;
		line-height: 1.55 !important;

		text-align: left !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-action .uagb-buttons__wrap {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;

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

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

	.lf-contact-whatsapp .lf-contact-whatsapp-button {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button a {
		min-width: 235px !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-contact-whatsapp .lf-contact-whatsapp-button .uagb-button__link {
		font-size: 12px !important;
		line-height: 1.2 !important;
		letter-spacing: 0.02em !important;

		text-align: center !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-microcopy p {
		max-width: 260px !important;

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

		font-size: 12px !important;
		line-height: 1.45 !important;

		text-align: left !important;
	}
}


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

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

	.lf-contact-whatsapp .lf-contact-whatsapp-inner {
		width: 100% !important;
		max-width: 305px !important;

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

		padding-left: 0 !important;
		padding-right: 0 !important;

		border-left: none !important;
		text-align: left !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-title h2 {
		max-width: 275px !important;

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

		font-size: clamp(27px, 7.4vw, 32px) !important;
		line-height: 1.12 !important;
		letter-spacing: -0.014em !important;

		text-align: left !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-copy {
		margin-bottom: 10px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-copy p {
		max-width: 255px !important;

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

		font-size: 13.5px !important;
		line-height: 1.55 !important;

		text-align: left !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-action .uagb-buttons__wrap {
		display: flex !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;

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

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

	.lf-contact-whatsapp .lf-contact-whatsapp-button {
		width: 100% !important;
		max-width: 220px !important;
		margin: 0 !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button a {
		width: 100% !important;
		min-height: 42px !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		padding-left: 14px !important;
		padding-right: 14px !important;

		text-align: center !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button .uagb-button__link {
		width: 100% !important;

		font-size: 10.4px !important;
		line-height: 1.2 !important;
		letter-spacing: 0.01em !important;

		text-align: center !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-microcopy p {
		max-width: 210px !important;

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

		font-size: 10.8px !important;
		line-height: 1.45 !important;

		text-align: left !important;
	}
}


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

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

	.lf-contact-whatsapp .lf-contact-whatsapp-inner {
		max-width: 295px !important;
		border-left: none !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-title h2 {
		max-width: 260px !important;

		margin-bottom: 13px !important;

		font-size: clamp(27px, 8.1vw, 31px) !important;
		line-height: 1.14 !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-copy p {
		max-width: 245px !important;
		margin-bottom: 22px !important;

		font-size: 13px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-action .uagb-buttons__wrap {
		max-width: 220px !important;
		margin-bottom: 12px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button {
		max-width: 220px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button a {
		min-height: 42px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button .uagb-button__link {
		font-size: 10.4px !important;
		line-height: 1.2 !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-microcopy p {
		max-width: 210px !important;
		font-size: 10.8px !important;
	}
}


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

@media only screen and (max-width: 390px) {
	.lf-contact-whatsapp {
		padding-top: 40px !important;
		padding-bottom: 44px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-inner {
		max-width: 285px !important;
		border-left: none !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-title h2 {
		max-width: 255px !important;
		font-size: 27px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-copy p {
		max-width: 235px !important;
		font-size: 12.8px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-action .uagb-buttons__wrap,
	.lf-contact-whatsapp .lf-contact-whatsapp-button {
		max-width: 210px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-button .uagb-button__link {
		font-size: 10px !important;
	}

	.lf-contact-whatsapp .lf-contact-whatsapp-microcopy p {
		max-width: 205px !important;
		font-size: 10.8px !important;
	}
}


/* =================================================================================================================================================================================================================================== */
/* -------------------------------------------------------------------------------------------------
   BREAKPOINT: MOBILE
   Rango: <= 767px
   Objetivo:
   - Mantener la última sección centrada dentro del ancho blanco.
   - No tocar desktop.
   - No cambiar colores.
------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.lf-contact-info {
		padding-left: 28px !important;
		padding-right: 28px !important;
	}

	.lf-contact-info .lf-contact-info-item {
		width: 100% !important;
		max-width: 280px !important;

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

		padding-left: 0 !important;
		padding-right: 0 !important;

		text-align: left !important;
	}

	.lf-contact-info .lf-contact-info-item + .lf-contact-info-item {
		margin-top: 46px !important;
	}

	.lf-contact-info .lf-contact-call-title h3,
	.lf-contact-info .lf-contact-hours-title h3,
	.lf-contact-info .lf-contact-social-title h3 {
		max-width: 260px !important;

		margin-bottom: 12px !important;

		font-size: 24px !important;
		line-height: 1.12 !important;

		text-align: left !important;
	}

	.lf-contact-info .lf-contact-call-copy p,
	.lf-contact-info .lf-contact-hours-copy p,
	.lf-contact-info .lf-contact-social-copy p {
		max-width: 250px !important;

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

		text-align: left !important;
	}

	.lf-contact-info .lf-contact-call-phone p {
		max-width: 250px !important;

		margin-top: 14px !important;

		font-size: 16px !important;
		line-height: 1.4 !important;

		text-align: left !important;
	}

	.lf-contact-info .lf-contact-social-links p {
		max-width: 250px !important;

		margin-top: 14px !important;

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

		text-align: left !important;
	}
}
/* =================================================================================================================================================================================================================================== */