/* Financeiras category hero — mobile only.
   All selectors are namespaced under `.financeiras-hero`.
   `!important` is used on properties that global theme SCSS targets
   (h1/p/span/a/img) — matches the project convention documented in CLAUDE.md. */

.financeiras-hero {
	background: #FDFDFD !important;
	/* Match the normal hero block's mobile spacing: 120px top clears the fixed
	   header, 20px bottom mirrors `@include bp($phone)` in _hero.scss. */
	padding: 120px 16px 52px !important;
	margin: 0 !important;
	position: relative !important;
	/* Clip only horizontally — the bg illustrations intentionally bleed past the
	   hero bottom so they remain visible over the start of the articles list.
	   `overflow-x: clip` is a vertical-overflow-friendly variant of `hidden`. */
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* Decorative bg illustrations — mobile only. Outer containers placed at exact
   Figma coordinates (15695:40933); the inner <img> is centered and rotated. */
.financeiras-hero__bg {
	position: absolute !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.financeiras-hero__bg img {
	display: block !important;
	max-width: none !important;
}

.financeiras-hero__bg--left {
	left: -71.47px !important;
	top: 266.46px !important;
	width: 231.531px !important;
	height: 236.085px !important;
}

.financeiras-hero__bg--left img {
	width: 177.943px !important;
	height: 156.509px !important;
	transform: rotate(53.64deg) !important;
}

.financeiras-hero__bg--right {
	right: -52.77px !important;
	top: 208px !important;
	width: 124.767px !important;
	height: 122.777px !important;
	/* Children are absolutely positioned inside — override the flex center */
	display: block !important;
}

/* Arch curve: Figma outer rotates -67.38, inner rotates 90 — combined = 22.62. */
.financeiras-hero__arch {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 96.5px !important;
	height: 92.8047px !important;
	transform: translate(-50%, -50%) rotate(22.62deg) !important;
}

/* Small figure inside the arch. Figma places it at inset[19.38% 60.91% 36.98% 9.33%]
   of the 92.805×96.5 inner (rotated -67.38), with its own 98.68deg rotation.
   Simplified here: centered inside the arch with the composed rotation (31.3 = -67.38+98.68).
   Figma has `opacity-10` (≈0.1) on this layer — we render it slightly less faded so it's
   visible while still reading as a subtle gray, not solid dark blue. */
.financeiras-hero__figure {
	position: absolute !important;
	left: 36.35% !important;
	top: 65.34% !important;
	width: 35px !important;
	height: 20px !important;
	transform: translate(-50%, -50%) rotate(31.3deg) !important;
	opacity: 0.3 !important;
}

.financeiras-hero__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 20px !important;
	text-align: center !important;
	max-width: 100% !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Google rating pill */
.financeiras-hero__rating {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 28px !important;
	padding: 5px 6px !important;
	background: #F5F5F5 !important;
	border-radius: 200px !important;
	text-decoration: none !important;
	color: inherit !important;
}

.financeiras-hero__rating-icon {
	display: inline-flex !important;
	width: 16px !important;
	height: 16px !important;
	flex: 0 0 16px !important;
}

.financeiras-hero__rating-icon img {
	width: 16px !important;
	height: 16px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 16px !important;
}

.financeiras-hero__rating-label {
	font-family: Metropolis, Sans-Serif !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 24px !important;
	letter-spacing: -0.28px !important;
	color: #46535D !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	gap: 4px !important;
	align-items: baseline !important;
	margin: 0 !important;
}

.financeiras-hero__rating-label strong {
	font-weight: 600 !important;
	color: #212121 !important;
	font-family: Metropolis, Sans-Serif !important;
	font-size: 14px !important;
	line-height: 24px !important;
}

.financeiras-hero__rating-stars {
	display: inline-flex !important;
	align-items: center !important;
	gap: 1.75px !important;
}

.financeiras-hero__rating-stars span {
	display: inline-flex !important;
	width: 14px !important;
	height: 14px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

.financeiras-hero__rating-stars svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
}

/* Title + description block */
.financeiras-hero__title {
	font-family: "Bricolage Grotesque", Sans-Serif !important;
	font-weight: 600 !important;
	font-size: 40px !important;
	line-height: 1.05 !important;
	letter-spacing: 0 !important;
	color: #00194C !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	font-variation-settings: "opsz" 14, "wdth" 100 !important;
}

/* Gradient highlight + shine animation — mirrors `span.hero-title-highlight.has-shine`
   on the main hero block. Scoped to this class so nothing else is affected. */
.financeiras-hero__title-highlight {
	font-family: "Bricolage Grotesque", Sans-Serif !important;
	font-weight: 600 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	background-image: linear-gradient(
		120deg,
		#0c3a8e 0%, #3e70ca 15%, #5893ff 30%,
		#3e70ca 42%, #89bcff 48%, #b0d4ff 50%, #89bcff 52%,
		#3e70ca 58%, #5893ff 70%, #3e70ca 85%, #0c3a8e 100%
	) !important;
	background-size: 200% 100% !important;
	background-repeat: repeat-x !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
	animation: financeiras-hero-title-shine 3s linear infinite !important;
}

@keyframes financeiras-hero-title-shine {
	from { background-position: 200% 0; }
	to { background-position: 0% 0; }
}

.financeiras-hero__text {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
}

.financeiras-hero__description {
	font-family: Metropolis, Sans-Serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: #00194C !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

/* News listing top spacing — the generic `.news-archive .news-block` rule adds
   100/160px top padding (from _blog.scss). On this page the new hero provides
   all the top spacing, so articles sit tight beneath it. Scoped to
   body.category-financeiras so no other category archive is affected. */
body.category-financeiras .news-archive .news-block {
	padding-top: 0 !important;
}

/* ===================== 768px+ ===================== */
@media (min-width: 768px) {
	.financeiras-hero {
		/* Keep the 120px top (clears fixed header). Bottom mirrors _hero.scss base. */
		padding: 120px 16px 80px !important;
	}

	/* Decorative bg illustrations — scaled up and repositioned to match Figma 15695:40817.
	   Left container moves to upper-left (top: -4) and grows to 413.5×421.6. Right container
	   sits off-screen right (right: -156.785px, computed from Figma's `left: 633` on a 768-wide
	   frame), grows to 291.8×287.1. Inner SVGs scale ~1.79x (left) / ~2.34x (right). */
	.financeiras-hero__bg--left {
		left: -217px !important;
		top: -4px !important;
		width: 413.504px !important;
		height: 421.638px !important;
	}

	.financeiras-hero__bg--left img {
		width: 317.798px !important;
		height: 279.518px !important;
	}

	.financeiras-hero__bg--right {
		left: auto !important;
		right: -156.785px !important;
		top: 100px !important;
		width: 291.785px !important;
		height: 287.13px !important;
	}

	.financeiras-hero__arch {
		width: 217.036px !important;
		height: 225.679px !important;
	}

	.financeiras-hero__figure {
		/* Mobile 35x20 scaled ~2.34x to match the right container's scale factor */
		width: 82px !important;
		height: 47px !important;
	}

	.financeiras-hero__inner {
		gap: 24px !important;
		padding-left: 54px !important;
		padding-right: 54px !important;
	}

	.financeiras-hero__title {
		font-size: 44px !important;
		letter-spacing: 0 !important;
	}
}

/* ===================== 1250px+ ===================== */
@media (min-width: 1250px) {
	.financeiras-hero {
		padding-top: 9.875rem !important;  /* 158px — matches _hero.scss top padding */
		padding-bottom: 100px !important;
	}

	.financeiras-hero__inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Title constrained to 813px and description to 677px — they center inside
	   `.financeiras-hero__text` because that wrapper has align-items: center. */
	.financeiras-hero__title {
		max-width: 813px !important;
		font-size: 64px !important;
		letter-spacing: 0 !important;
	}

	.financeiras-hero__description {
		max-width: 677px !important;
	}

	/* Bg illustrations — Figma 15695:40684 (1440 frame).
	   Both shapes keep their mobile/768+ visual rotations (22.62° arch, 31.3° figure):
	   Figma's 1250+ nests `scale-y(-1) · rotate(67.38) · scale-y(-1)` which resolves
	   to `rotate(-67.38)` — identical to mobile/768+. Only sizes and positions change. */
	.financeiras-hero__bg--left {
		left: -156px !important;
		top: 190px !important;
	}

	.financeiras-hero__bg--right {
		right: -111.37px !important;  /* Figma `left: 1141` on a 1440-wide frame */
		top: 104px !important;
		width: 410.37px !important;
		height: 349.865px !important;
	}

	.financeiras-hero__arch {
		width: 300.252px !important;
		height: 312.209px !important;
	}

	.financeiras-hero__figure {
		width: 113px !important;
		height: 65px !important;
		left: 50.38% !important;
		top: 67.51% !important;
	}
}