/* End custom CSS */

.elementor-widget-button .elementor-button {
	background-color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	letter-spacing: var(--e-global-typography-accent-letter-spacing);
}

.elementor-59506 .elementor-element.elementor-element-dadac76 .elementor-button {
	background-color: #fff;
	font-family: "Poppins", Sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3.2px;
	fill: #00338d;
	color: #00338d;
}

.elementor-59506 .elementor-element.elementor-element-dadac76 .elementor-button-content-wrapper {
	flex-direction: row;
}

.elementor-59506 .elementor-element.elementor-element-dadac76 .elementor-button .elementor-button-content-wrapper {
	gap: 8px;
}

.elementor-widget-image .widget-image-caption {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
}

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: var(--e-global-typography-primary-font-size);
	font-weight: var(--e-global-typography-primary-font-weight);
	color: var(--e-global-color-primary);
}

.elementor-59506 .elementor-element.elementor-element-19dbd8e .elementor-heading-title {
	font-family: "Poppins", Sans-serif;
	font-size: 56px;
	font-weight: bold;
	color: #00338d;
}

.elementor-widget-text-editor {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	color: var(--e-global-color-text);
}

.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap {
	background-color: var(--e-global-color-primary);
}

.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap {
	color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}

.elementor-59506 .elementor-element.elementor-element-1cda00e {
	font-family: "Bitter", Sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
}

.elementor-59506 .elementor-element.elementor-element-a442f13 .elementor-button {
	background-color: var(--e-global-color-accent);
	font-family: "Poppins", Sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3.2px;
	fill: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
}

.elementor-59506 .elementor-element.elementor-element-6d2f239 {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
}

.elementor-59506 .elementor-element.elementor-element-47bf5e3 {
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.elementor-59506 .elementor-element.elementor-element-47bf5e3.elementor-element {
	--align-self: center;
}

.elementor-59506 .elementor-element.elementor-element-47bf5e3 .elementor-heading-title {
	font-family: "Poppins", Sans-serif;
	font-size: 56px;
	font-weight: bold;
}

.elementor-59506 .elementor-element.elementor-element-1cf283e {
	text-align: center;
	font-family: "Bitter", Sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5em;
	color: #00338d;
}

.elementor-59506 .elementor-element.elementor-element-4049793 {
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.elementor-59506 .elementor-element.elementor-element-4049793 > .elementor-widget-container {
	margin: 75px 0px 75px 0px;
}

.elementor-59506 .elementor-element.elementor-element-4049793.elementor-element {
	--align-self: center;
}

.elementor-59506 .elementor-element.elementor-element-4049793 .elementor-heading-title {
	font-family: "Poppins", Sans-serif;
	font-size: 56px;
	font-weight: bold;
}

@media (min-width:768px) {
	.elementor-59506 .elementor-element.elementor-element-6d2f239 {
		--width: 100%;
	}
}

@media (max-width:1024px) {
	.elementor-widget-button .elementor-button {
		font-size: var(--e-global-typography-accent-font-size);
		letter-spacing: var(--e-global-typography-accent-letter-spacing);
	}
	
	.elementor-widget-image .widget-image-caption {
		font-size: var(--e-global-typography-text-font-size);
		line-height: var(--e-global-typography-text-line-height);
	}
	
	.elementor-widget-heading .elementor-heading-title {
		font-size: var(--e-global-typography-primary-font-size);
	}
	
	.elementor-widget-text-editor {
		font-size: var(--e-global-typography-text-font-size);
		line-height: var(--e-global-typography-text-line-height);
	}
}

@media (max-width:767px) {
	.elementor-widget-button .elementor-button {
		font-size: var(--e-global-typography-accent-font-size);
		letter-spacing: var(--e-global-typography-accent-letter-spacing);
	}
	
	.elementor-59506 .elementor-element.elementor-element-dadac76 > .elementor-widget-container {
		margin: 3% 0% 0% 0%;
	}
	
	.elementor-widget-image .widget-image-caption {
		font-size: var(--e-global-typography-text-font-size);
		line-height: var(--e-global-typography-text-line-height);
	}
	
	.elementor-59506 .elementor-element.elementor-element-b1c87a5 > .elementor-widget-container {
		margin: 5% 0% 1% 5%;
	}
	
	.elementor-59506 .elementor-element.elementor-element-b1c87a5 {
		text-align: left;
	}
	
	.elementor-59506 .elementor-element.elementor-element-b1c87a5 img {
		width: 42%;
	}
	
	.elementor-widget-heading .elementor-heading-title {
		font-size: var(--e-global-typography-primary-font-size);
	}
	
	.elementor-59506 .elementor-element.elementor-element-19dbd8e > .elementor-widget-container {
		margin: 0% 0% 2% 5%;
	}
	
	.elementor-59506 .elementor-element.elementor-element-19dbd8e .elementor-heading-title {
		font-size: 28px;
		line-height: 1.4em;
	}
	
	.elementor-widget-text-editor {
		font-size: var(--e-global-typography-text-font-size);
		line-height: var(--e-global-typography-text-line-height);
	}
	
	.elementor-59506 .elementor-element.elementor-element-1cda00e > .elementor-widget-container {
		margin: 0% 3% 0% 5%;
	}
	
	.elementor-59506 .elementor-element.elementor-element-a442f13 {
		width: 100%;
		max-width: 100%;
	}
	
	.elementor-59506 .elementor-element.elementor-element-a442f13.elementor-element {
		--align-self: center;
	}
	
	.elementor-59506 .elementor-element.elementor-element-a442f13 .elementor-button {
		border-radius: 4px 4px 4px 4px;
		padding: 27px 46px 27px 46px;
	}
	
	.elementor-59506 .elementor-element.elementor-element-6d2f239 {
		--margin-top: 50px;
		--margin-bottom: 0px;
		--margin-left: 0px;
		--margin-right: 0px;
	}
	
	.elementor-59506 .elementor-element.elementor-element-47bf5e3 .elementor-heading-title {
		font-size: 32px;
	}
	
	.elementor-59506 .elementor-element.elementor-element-1cf283e {
		font-size: 16px;
	}
	
	.elementor-59506 .elementor-element.elementor-element-4049793 > .elementor-widget-container {
		margin: 0px 0px 0px 0px;
	}
	
	.elementor-59506 .elementor-element.elementor-element-4049793 .elementor-heading-title {
		font-size: 32px;
	}
}

/* Start custom CSS for button, class: .elementor-element-dadac76 */
.btn svg {
	font-size: 10px !important;
}

/* End custom CSS */

/* Start custom CSS for button, class: .elementor-element-a442f13 */
.elementor-59506 .elementor-element.elementor-element-a442f13 {
	height: 68px !important;
}

/* End custom CSS */

/* Start custom CSS for html, class: .elementor-element-7025dfc */
.pfc {
	/* --------------------------------------------------------------------
     UNIDAD DE ESCALA
     --u = 1% del ancho del propio bloque. Fallback a 1vw en navegadores
     sin container queries. Todos los números de abajo son el valor del
     Figma dividido entre 1368 (el ancho del diseño), en porcentaje.
     -------------------------------------------------------------------- */
	--u: 1vw;
	container-type: inline-size;
	/* Paleta del Figma */
	--pfc-cyan: #3cf;
	--pfc-blue: #00338d;
	--pfc-gray: #999;
	--pfc-white: #fff;
	/* Métricas proporcionales (valor Figma → % de 1368px) */
	--pfc-gap: max(6px, calc(.731 * var(--u)));
	/*  10px */
	--pfc-pad: max(20px, calc(2.924 * var(--u)));
	/*  40px */
	--pfc-pad-sm: max(16px, calc(1.901 * var(--u)));
	/*  26px */
	--pfc-num: max(2rem, calc(5.117 * var(--u)));
	/*  70px */
	--pfc-label: max(.9375rem, calc(1.754 * var(--u)));
	/*  24px */
	--pfc-row1: max(230px, calc(25.439 * var(--u)));
	/* 348px */
	--pfc-row2: max(150px, calc(13.523 * var(--u)));
	/* 185px */
	width: 100%;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@supports (width:1cqw) {
	.pfc {
		--u: 1cqw;
	}
}

.pfc, .pfc *, .pfc *::before, .pfc *::after {
	box-sizing: border-box;
}

/* ---------- Rejilla: réplica exacta del mosaico de Figma ---------- */
.pfc__grid {
	display: grid;
	gap: var(--pfc-gap);
	grid-template-columns: 313fr 430fr 270fr 325fr;
	grid-template-areas: "agua      agua         acopio       alimentos" "ciudades  voluntarios  voluntarios  alimentos";
}

/* ---------- Tarjeta base ---------- */
.pfc-card {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: max(12px, calc(1.17 * var(--u)));
	padding: var(--pfc-pad);
	overflow: hidden;
}

.pfc-card__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.pfc-card__num {
	margin: 0;
	font-weight: 700;
	font-size: var(--pfc-num);
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.pfc-card__label {
	margin: .55em 0 0;
	font-weight: 400;
	font-size: var(--pfc-label);
	line-height: 1.385;
}

.pfc-card__icon {
	flex: 0 0 auto;
	align-self: flex-end;
	/* ancla abajo-derecha, como en el diseño */
	line-height: 0;
}

.pfc-card__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tarjetas angostas: el ícono va debajo del texto, alineado a la derecha */
.pfc-card--stack {
	flex-direction: column;
}

.pfc-card--stack .pfc-card__icon {
	align-self: flex-end;
	margin-top: auto;
	padding-top: max(12px, calc(1.17 * var(--u)));
}

/* ---------- Las cinco tarjetas ---------- */
.pfc-card--agua {
	grid-area: agua;
	background: var(--pfc-cyan);
	color: var(--pfc-blue);
	min-height: var(--pfc-row1);
}

.pfc-card--agua .pfc-card__body {
	justify-content: flex-end;
}

.pfc-card--agua .pfc-card__icon {
	align-self: center;
	width: min(40%, max(110px, calc(21.57 * var(--u))));
}

.pfc-card--acopio {
	grid-area: acopio;
	background: var(--pfc-gray);
	color: var(--pfc-white);
	min-height: var(--pfc-row1);
	padding-inline: var(--pfc-pad-sm);
}

.pfc-card--acopio .pfc-card__icon {
	width: min(45%, max(64px, calc(7.602 * var(--u))));
}

.pfc-card--alimentos {
	grid-area: alimentos;
	background: var(--pfc-cyan);
	color: var(--pfc-blue);
	min-height: calc(var(--pfc-row1) + var(--pfc-row2) + var(--pfc-gap));
}

.pfc-card--alimentos .pfc-card__icon {
	width: min(62%, max(100px, calc(11.916 * var(--u))));
}

.pfc-card--ciudades {
	grid-area: ciudades;
	background: var(--pfc-gray);
	color: var(--pfc-white);
	min-height: var(--pfc-row2);
}

.pfc-card--ciudades .pfc-card__icon {
	width: min(30%, max(56px, calc(5.848 * var(--u))));
}

.pfc-card--voluntarios {
	grid-area: voluntarios;
	background: var(--pfc-blue);
	color: var(--pfc-white);
	min-height: var(--pfc-row2);
}

.pfc-card--voluntarios .pfc-card__icon {
	width: min(21%, max(76px, calc(8.406 * var(--u))));
}

/* ---------- Tablet: 2 columnas ---------- */
@media (max-width:1024px) {
	.pfc__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "agua      agua" "acopio    alimentos" "ciudades  voluntarios";
	}
	
	.pfc-card {
		min-height: max(240px, calc(30 * var(--u)));
	}
	
	.pfc-card--agua {
		min-height: max(260px, calc(34 * var(--u)));
	}
	
	.pfc-card--alimentos {
		min-height: max(240px, calc(30 * var(--u)));
	}
	
	/* Voluntarios pasa a apilado: la etiqueta es larga y a media pantalla
     se apretaría contra el ícono */
	.pfc-card--voluntarios {
		flex-direction: column;
	}
	
	.pfc-card--voluntarios .pfc-card__icon {
		margin-top: auto;
		padding-top: max(12px, calc(1.17 * var(--u)));
	}
	
	.pfc-card--agua .pfc-card__icon {
		width: min(34%, max(110px, calc(18 * var(--u))));
	}
}

/* ---------- Móvil: una columna, texto izquierda / ícono derecha ---------- */
@media (max-width:600px) {
	.pfc {
		--pfc-pad: 24px;
		--pfc-pad-sm: 24px;
		--pfc-gap: 10px;
	}
	
	.pfc__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "agua" "acopio" "alimentos" "ciudades" "voluntarios";
	}
	
	.pfc-card, .pfc-card--stack, .pfc-card--voluntarios {
		flex-direction: row;
		align-items: center;
		min-height: 150px;
		gap: 16px;
	}
	
	.pfc-card__body, .pfc-card--agua .pfc-card__body {
		justify-content: center;
	}
	
	.pfc-card__icon, .pfc-card--stack .pfc-card__icon, .pfc-card--voluntarios .pfc-card__icon {
		align-self: center;
		margin-top: 0;
		padding-top: 0;
	}
	
	.pfc-card--agua .pfc-card__icon {
		width: min(30%, 120px);
	}
	
	.pfc-card--acopio .pfc-card__icon {
		width: min(24%, 84px);
	}
	
	.pfc-card--alimentos .pfc-card__icon {
		width: min(32%, 120px);
	}
	
	.pfc-card--ciudades .pfc-card__icon {
		width: min(22%, 70px);
	}
	
	.pfc-card--voluntarios .pfc-card__icon {
		width: min(27%, 92px);
	}
}

@media (max-width:360px) {
	.pfc {
		--pfc-num: 1.75rem;
	}
}

/* ---------- Blindaje anti-wpautop ----------
   Si WordPress inyecta <p>/<br> por los saltos de línea, quedarían dentro de
   la rejilla y crearían filas vacías. Esto los neutraliza. */
.pfc br {
	display: none !important;
}

.pfc p:empty {
	display: none !important;
}

.pfc__grid > *:not(.pfc-card) {
	display: none !important;
}
