/*
 * JP Financial — Qué deberías saber responsive composition
 * Extracted intact in Phase 5 and loaded only on its consumer pages.
 */

/*
 * Qué deberías saber / Hero — mobile and tablet.
 * Figma node 178:76: 393x401, dark background, 120/20/60 padding,
 * 20px vertical rhythm, left-aligned copy.
 */
@media (max-width: 1024px) {
	body.jp-know-page .jp-know-hero,
	body.jp-know-page .jp-know-hero > .elementor-container {
		background-color: #001208 !important;
		box-sizing: border-box !important;
		height: auto !important;
		min-height: clamp(401px, 52.214vw, 535px) !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-hero {
		display: flex !important;
		overflow: hidden !important;
	}

	body.jp-know-page .jp-know-hero > .elementor-container {
		align-items: stretch !important;
		display: flex !important;
		justify-content: flex-start !important;
		margin: 0 !important;
		max-width: none !important;
		padding: 0 !important;
	}

	body.jp-know-page .jp-know-hero .elementor-column,
	body.jp-know-page .jp-know-hero .elementor-column > .elementor-widget-wrap {
		box-sizing: border-box !important;
		display: flex !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-hero .elementor-column > .elementor-widget-wrap {
		align-content: flex-start !important;
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: clamp(20px, 2.604vw, 26px) !important;
		justify-content: flex-start !important;
		margin: 0 !important;
		padding:
			clamp(120px, 15.625vw, 150px)
			clamp(20px, 5.208vw, 48px)
			clamp(60px, 7.813vw, 80px) !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-eyebrow,
	body.jp-know-page .jp-know-hero .jp-know-hero-title,
	body.jp-know-page .jp-know-hero .jp-know-hero-text {
		margin: 0 !important;
		max-width: clamp(353px, 72.917vw, 640px) !important;
		text-align: left !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-eyebrow .elementor-heading-title {
		color: #dafba2 !important;
		font-family: Inter, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		letter-spacing: 1.5px !important;
		line-height: normal !important;
		text-align: left !important;
		text-transform: uppercase !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-hero-title .elementor-heading-title {
		color: #ffffff !important;
		font-family: "TWK Everett", Inter, sans-serif !important;
		font-size: clamp(40px, 5.208vw, 56px) !important;
		font-weight: 700 !important;
		letter-spacing: -1.2px !important;
		line-height: 1.15 !important;
		margin: 0 !important;
		max-width: 100% !important;
		text-align: left !important;
		white-space: normal !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-hero-title .elementor-heading-title em,
	body.jp-know-page .jp-know-hero .jp-know-hero-title .elementor-heading-title i {
		color: #dafba2 !important;
		font-style: italic !important;
		font-weight: 700 !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-hero-text,
	body.jp-know-page .jp-know-hero .jp-know-hero-text p,
	body.jp-know-page .jp-know-hero .jp-know-hero-text .elementor-widget-container {
		color: rgba(255, 255, 255, 0.72) !important;
		font-family: Inter, sans-serif !important;
		font-size: clamp(16px, 2.083vw, 18px) !important;
		font-weight: 400 !important;
		letter-spacing: 0 !important;
		line-height: 1.5 !important;
		margin: 0 !important;
		text-align: left !important;
	}
}

@media (max-width: 600px) {
	body.jp-know-page .jp-know-hero,
	body.jp-know-page .jp-know-hero > .elementor-container {
		min-height: 401px !important;
	}

	body.jp-know-page .jp-know-hero .elementor-column > .elementor-widget-wrap {
		gap: 20px !important;
		padding: 120px 20px 60px !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-eyebrow,
	body.jp-know-page .jp-know-hero .jp-know-hero-title,
	body.jp-know-page .jp-know-hero .jp-know-hero-text {
		max-width: calc(100vw - 40px) !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-hero-title .elementor-heading-title {
		font-size: 40px !important;
		letter-spacing: -1.2px !important;
		line-height: 46px !important;
	}

	body.jp-know-page .jp-know-hero .jp-know-hero-text,
	body.jp-know-page .jp-know-hero .jp-know-hero-text p,
	body.jp-know-page .jp-know-hero .jp-know-hero-text .elementor-widget-container {
		font-size: 16px !important;
		line-height: 24px !important;
	}
}

/*
 * Qué deberías saber / Píldoras temáticas — mobile and tablet.
 * Figma node 178:81: white section, 48/20 rhythm, horizontal filters
 * and horizontal card carousel with 303x292 cards.
 */
@media (max-width: 1024px) {
	body.jp-know-page .jp-know-pillars {
		background: #ffffff !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		margin-top: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: relative !important;
		z-index: 3 !important;
	}

	body.jp-know-page .jp-know-pillars > .elementor-container,
	body.jp-know-page .jp-know-pillars .elementor-column,
	body.jp-know-page .jp-know-pillars .elementor-column > .elementor-widget-wrap {
		box-sizing: border-box !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-pillars .elementor-column > .elementor-widget-wrap {
		align-content: flex-start !important;
		align-items: flex-start !important;
		display: flex !important;
		flex-direction: column !important;
		padding: 48px 0 !important;
	}

	body.jp-know-page .jp-know-pillars .jp-know-head-widget,
	body.jp-know-page .jp-know-pillars .jp-know-head-widget .elementor-widget-container,
	body.jp-know-page .jp-know-head,
	body.jp-know-page .jp-know-head-copy {
		box-sizing: border-box !important;
		margin: 0 !important;
		max-width: 353px !important;
		width: min(353px, calc(100vw - 40px)) !important;
	}

	body.jp-know-page .jp-know-pillars .jp-know-head-widget {
		margin: 0 20px 28px !important;
	}

	body.jp-know-page .jp-know-head {
		align-items: flex-start !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	body.jp-know-page .jp-know-head-copy {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}

	body.jp-know-page .jp-know-section-eyebrow.is-dark .elementor-heading-title {
		color: #00352d !important;
		font-family: Inter, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		letter-spacing: 1.68px !important;
		line-height: normal !important;
		margin: 0 !important;
		text-align: left !important;
		text-transform: uppercase !important;
	}

	body.jp-know-page .jp-know-section-eyebrow.is-dark {
		display: block !important;
		min-height: 34px !important;
	}

	body.jp-know-page .jp-know-title .elementor-heading-title {
		color: #001c10 !important;
		font-family: "TWK Everett", Inter, sans-serif !important;
		font-size: 33px !important;
		font-weight: 700 !important;
		letter-spacing: 0 !important;
		line-height: 1.2 !important;
		margin: 0 !important;
		max-width: 353px !important;
		text-align: left !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-pills-widget,
	body.jp-know-page .jp-know-pills-widget .elementor-widget-container,
	body.jp-know-page .jp-know-dynamic {
		box-sizing: border-box !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-dynamic .jp-know-filters,
	body.jp-know-page .jp-know-filters {
		align-items: center !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		justify-content: flex-start !important;
		margin: 0 0 28px !important;
		max-width: none !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		padding: 4px 20px !important;
		scroll-padding-left: 20px !important;
		scrollbar-width: none !important;
		width: 100% !important;
		-webkit-overflow-scrolling: touch !important;
	}

	body.jp-know-page .jp-know-filters::-webkit-scrollbar {
		display: none !important;
	}

	body.jp-know-page .jp-know-filter {
		align-items: center !important;
		background: #ffffff !important;
		border: 1px solid #e8e8e8 !important;
		border-radius: 999px !important;
		box-sizing: border-box !important;
		color: #6b6b6b !important;
		display: inline-flex !important;
		flex: 0 0 auto !important;
		font-family: "DM Sans", Inter, sans-serif !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		height: 33px !important;
		justify-content: center !important;
		line-height: 17px !important;
		min-height: 33px !important;
		padding: 8px 16px !important;
		white-space: nowrap !important;
	}

	body.jp-know-page .jp-know-filter.is-active,
	body.jp-know-page .jp-know-filter:hover,
	body.jp-know-page .jp-know-filter:focus-visible {
		background: #001208 !important;
		border-color: #001208 !important;
		color: #ffffff !important;
		outline: 0 !important;
	}

	body.jp-know-page .jp-know-cards {
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: row !important;
		gap: 25px !important;
		grid-template-columns: none !important;
		margin: 0 !important;
		max-width: none !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		padding: 0 20px 4px !important;
		scroll-padding-left: 20px !important;
		scroll-snap-type: x mandatory !important;
		scrollbar-width: none !important;
		width: 100% !important;
		-webkit-overflow-scrolling: touch !important;
	}

	body.jp-know-page .jp-know-cards::-webkit-scrollbar {
		display: none !important;
	}

	body.jp-know-page .jp-know-card {
		background: #ffffff !important;
		border: 1px solid #e8e8e8 !important;
		border-radius: 16px !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
		display: block !important;
		flex: 0 0 303px !important;
		height: 292px !important;
		max-width: 303px !important;
		min-height: 292px !important;
		overflow: hidden !important;
		position: relative !important;
		scroll-snap-align: start !important;
		transform: none !important;
		width: 303px !important;
	}

	body.jp-know-page .jp-know-card[hidden] {
		display: none !important;
	}

	body.jp-know-page .jp-know-card:hover {
		box-shadow: none !important;
		transform: none !important;
	}

	body.jp-know-page .jp-know-card-media {
		background: #dafba2 !important;
		display: block !important;
		height: 140px !important;
		left: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		width: auto !important;
	}

	body.jp-know-page .jp-know-card:nth-child(even) .jp-know-card-media {
		background: #b8e8e0 !important;
	}

	body.jp-know-page .jp-know-card-image {
		display: none !important;
	}

	body.jp-know-page .jp-know-card-body {
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
		min-height: 0 !important;
		padding: 164px 25px 24px !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-card-tag {
		color: #001c10 !important;
		display: block !important;
		font-family: Inter, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		left: 20px !important;
		letter-spacing: 0.48px !important;
		line-height: normal !important;
		margin: 0 !important;
		position: absolute !important;
		text-transform: none !important;
		top: 105px !important;
		z-index: 2 !important;
	}

	body.jp-know-page .jp-know-card-title {
		color: #001c10 !important;
		display: block !important;
		font-family: Inter, sans-serif !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		letter-spacing: -0.18px !important;
		line-height: 23.4px !important;
		margin: 0 !important;
		max-width: 251px !important;
		overflow-wrap: normal !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-card-meta {
		align-items: center !important;
		color: #8e8e8e !important;
		display: flex !important;
		font-family: Inter, sans-serif !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		justify-content: space-between !important;
		line-height: normal !important;
		margin-top: auto !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-card-arrow {
		color: #8e8e8e !important;
		font-family: "DM Sans", Inter, sans-serif !important;
		font-size: 12px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
	}
}

@media (max-width: 360px) {
	body.jp-know-page .jp-know-card {
		flex-basis: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
		width: calc(100vw - 40px) !important;
	}
}

/*
 * Qué deberías saber / Glosario — mobile and tablet.
 * Figma node 178:146: compact glossary stack, first card in hover state,
 * collapsed after three terms with a centered "Ver más" control.
 */
@media (max-width: 1024px) {
	body.jp-know-page .jp-know-glossary {
		background: #f5f4f0 !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		margin-top: 0 !important;
		overflow: hidden !important;
		padding: 48px 20px 60px !important;
		position: relative !important;
		top: 0 !important;
		z-index: 2 !important;
	}

	body.jp-know-page .jp-know-glossary > .elementor-container,
	body.jp-know-page .jp-know-glossary .elementor-column,
	body.jp-know-page .jp-know-glossary .elementor-column > .elementor-widget-wrap {
		box-sizing: border-box !important;
		margin: 0 !important;
		max-width: none !important;
		padding: 0 !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-glossary .elementor-column > .elementor-widget-wrap {
		align-content: flex-start !important;
		align-items: flex-start !important;
		display: flex !important;
		flex-direction: column !important;
	}

	body.jp-know-page .jp-know-glossary .jp-know-section-eyebrow,
	body.jp-know-page .jp-know-glossary .jp-know-title,
	body.jp-know-page .jp-know-glossary .jp-know-title .elementor-heading-title,
	body.jp-know-page .jp-know-glossary .jp-know-glossary-widget {
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 353px !important;
		width: min(353px, calc(100vw - 40px)) !important;
	}

	body.jp-know-page .jp-know-glossary .jp-know-section-eyebrow {
		display: block !important;
		margin-bottom: 10px !important;
		min-height: 34px !important;
	}

	body.jp-know-page .jp-know-glossary .jp-know-section-eyebrow .elementor-heading-title {
		color: #00352d !important;
		font-family: Inter, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		letter-spacing: 1.68px !important;
		line-height: normal !important;
		margin: 0 !important;
		text-align: left !important;
		text-transform: uppercase !important;
	}

	body.jp-know-page .jp-know-glossary .jp-know-title {
		margin-bottom: 28px !important;
	}

	body.jp-know-page .jp-know-glossary .jp-know-title .elementor-heading-title {
		color: #001c10 !important;
		font-family: "TWK Everett", Inter, sans-serif !important;
		font-size: 33px !important;
		font-weight: 700 !important;
		letter-spacing: -0.0144em !important;
		line-height: 1.2 !important;
		margin: 0 !important;
		text-align: left !important;
	}

	body.jp-know-page .jp-know-glossary .jp-know-glossary-widget,
	body.jp-know-page .jp-know-glossary .jp-know-glossary-widget .elementor-widget-container {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.jp-know-page .jp-know-glossary-grid {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		grid-template-columns: none !important;
		margin: 0 !important;
		max-height: none !important;
		max-width: 353px !important;
		overflow: visible !important;
		padding: 0 !important;
		width: min(353px, calc(100vw - 40px)) !important;
	}

	body.jp-know-page .jp-know-glossary.jp-know-glossary-collapsed:not(.is-expanded) .jp-know-glossary-grid {
		max-height: 558px !important;
		overflow: hidden !important;
	}

	body.jp-know-page .jp-know-term {
		background: #ffffff !important;
		border: 0 !important;
		border-radius: 12px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex: 0 0 auto !important;
		flex-direction: column !important;
		gap: 8px !important;
		margin: 0 !important;
		min-height: 0 !important;
		outline: 1px solid #e8e8e8 !important;
		outline-offset: -1px !important;
		padding: 20px !important;
		width: 100% !important;
	}

	body.jp-know-page .jp-know-term:first-child,
	body.jp-know-page .jp-know-term:hover,
	body.jp-know-page .jp-know-term:focus-within {
		background: #e2e5e1 !important;
	}

	body.jp-know-page .jp-know-term:nth-child(1),
	body.jp-know-page .jp-know-term:nth-child(6) {
		min-height: 194px !important;
	}

	body.jp-know-page .jp-know-term:nth-child(2),
	body.jp-know-page .jp-know-term:nth-child(5) {
		min-height: 170px !important;
	}

	body.jp-know-page .jp-know-term:nth-child(3),
	body.jp-know-page .jp-know-term:nth-child(4) {
		min-height: 146px !important;
	}

	body.jp-know-page .jp-know-term h3 {
		color: #001c10 !important;
		font-family: "DM Sans", Inter, sans-serif !important;
		font-size: 20px !important;
		font-weight: 700 !important;
		letter-spacing: 0 !important;
		line-height: 26px !important;
		margin: 0 !important;
		text-align: left !important;
	}

	body.jp-know-page .jp-know-term p {
		color: #6b6b6b !important;
		font-family: "DM Sans", Inter, sans-serif !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		letter-spacing: 0 !important;
		line-height: 24px !important;
		margin: 0 !important;
		text-align: left !important;
	}

	body.jp-know-page .jp-know-glossary-more {
		appearance: none !important;
		background: transparent !important;
		border: 0 !important;
		border-top: 1px solid rgba(17, 17, 17, 0.2) !important;
		box-sizing: border-box !important;
		color: #2e2e2e !important;
		cursor: pointer !important;
		align-items: flex-start !important;
		display: flex !important;
		font-family: Inter, sans-serif !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		gap: 8px !important;
		height: 58px !important;
		justify-content: center !important;
		line-height: normal !important;
		margin: 15px 2px 0 !important;
		padding: 29px 0 0 !important;
		position: relative !important;
		text-align: center !important;
		width: calc(100% - 4px) !important;
	}

	body.jp-know-page .jp-know-glossary-more-text {
		color: #2e2e2e !important;
		display: block !important;
		font-family: Inter, sans-serif !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		height: 22px !important;
		line-height: 22px !important;
		position: static !important;
		text-align: left !important;
		white-space: nowrap !important;
		width: auto !important;
	}

	body.jp-know-page .jp-know-glossary-more-icon {
		align-items: center !important;
		background: #eeeeee !important;
		border-radius: 999px !important;
		color: #2e2e2e !important;
		display: inline-flex !important;
		font-family: Inter, sans-serif !important;
		font-size: 18px !important;
		height: 28px !important;
		justify-content: center !important;
		line-height: 1 !important;
		position: static !important;
		width: 28px !important;
	}

	body.jp-know-page .jp-know-glossary-more-icon::before {
		border-bottom: 2px solid #666666 !important;
		border-right: 2px solid #666666 !important;
		content: "" !important;
		display: block !important;
		height: 8px !important;
		margin-top: -4px !important;
		transform: rotate(45deg) !important;
		width: 8px !important;
	}

	body.jp-know-page .jp-know-glossary.is-expanded .jp-know-glossary-more-icon::before {
		margin-top: 4px !important;
		transform: rotate(225deg) !important;
	}

	body.jp-know-page .jp-know-glossary.jp-know-cover-sticky {
		position: sticky !important;
		top: var(--jp-know-sticky-top, 0) !important;
		z-index: 2 !important;
	}

	body.jp-know-page .jp-faq-section,
	body.jp-know-page .elementor-element.jp-faq-section.jp-faq-section {
		background: #ffffff !important;
		border-radius: 28px 28px 0 0 !important;
		isolation: isolate !important;
		margin-top: -24px !important;
		overflow: hidden !important;
		position: relative !important;
		z-index: 20 !important;
	}
}

@media (min-width: 1025px) {
	body.jp-know-page .jp-know-glossary-more {
		display: none !important;
	}
}

/* Keep the shared contact template in the normal flow after FAQ on this page.
 * The white slot masks the entry-motion translation before the shortcode is
 * revealed, while its stacking context prevents FAQ from drawing over it. */
body.jp-know-page .jp-contact-template-slot {
	background: #ffffff !important;
	isolation: isolate;
	position: relative;
	z-index: 21;
}

body.jp-know-page .jp-contact-template-slot .jp-contact-outer {
	background: #ffffff !important;
	position: relative;
	z-index: 1 !important;
}