/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	padding-block-start: clamp(140px, 18vw, 220px);
	padding-block-end: var(--space-6);
	overflow: hidden;
	position: relative;
}

/* Soft, out-of-focus color blobs so the hero doesn't read as flat white. */
.hero__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.22;
	z-index: 0;
	pointer-events: none;
}

.hero__blob--orange {
	width: 420px;
	height: 420px;
	background: var(--color-orange);
	top: -120px;
	left: -140px;
}

.hero__blob--blue {
	width: 480px;
	height: 480px;
	background: var(--color-blue);
	bottom: -180px;
	right: -160px;
}

.hero__grid {
	position: relative;
	z-index: 1;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-5);
	align-items: center;
}

.hero__lead {
	margin-top: var(--space-3);
	font-size: 1.25rem;
	max-width: 46ch;
}

.hero__actions {
	margin-top: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   Empresas
   ========================================================================== */


/* ==========================================================================
   Quem é Leo Lopes
   ========================================================================== */

.quem-sou__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-5);
	align-items: center;
}

.quem-sou__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.quem-sou__text p {
	max-width: 60ch;
}

.quem-sou__text p + p {
	margin-top: var(--space-2);
}

/* ==========================================================================
   Números
   ========================================================================== */

.numeros__grid {
	margin-top: var(--space-5);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	text-align: center;
}

.numero {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.numero__valor {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 3.2vw, 3.6rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Each stat gets its own accent so the row doesn't read as one flat block. */
.numero--navy .numero__valor {
	color: var(--color-navy);
}

.numero--white .numero__valor {
	color: #fff;
	text-shadow: 0 2px 18px rgba(20, 24, 31, 0.18);
}

.numero--blue .numero__valor {
	color: var(--color-blue-dark);
}

.numero__label {
	font-size: 0.98rem;
	font-weight: 500;
	color: rgba(20, 24, 31, 0.72);
}

/* ==========================================================================
   Como posso ajudar — see 05-components.css for .cards/.card
   ========================================================================== */

.como-ajudar {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

/* ==========================================================================
   Curso de Podcast
   ========================================================================== */

.curso-podcast__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--space-5);
	align-items: center;
}

.curso-podcast__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(20, 24, 31, 0.18);
}

.curso-podcast__logo {
	height: 56px;
	width: auto;
	margin-bottom: var(--space-3);
}

.curso-podcast__text p {
	max-width: 58ch;
}

.curso-podcast__text p + p {
	margin-top: var(--space-2);
}

.curso-podcast__text .btn {
	margin-top: var(--space-3);
}

/* ==========================================================================
   Rádiofobia
   ========================================================================== */

.radiofobia__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-5);
	align-items: center;
}

.radiofobia__logo {
	height: 72px;
	width: auto;
	margin-bottom: var(--space-3);
}

.radiofobia__text p {
	max-width: 58ch;
}

.radiofobia__text p + p {
	margin-top: var(--space-2);
}

.radiofobia__text .btn {
	margin-top: var(--space-3);
}

.radiofobia__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   CTA final / Contato
   ========================================================================== */

.cta-final {
	border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-final__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--space-5);
	align-items: center;
}

.cta-final__media {
	display: flex;
	justify-content: center;
}

.cta-final__media img {
	width: 100%;
	max-width: 420px;
	height: auto;
}

.cta-final .section-title {
	color: #fff;
}

.cta-final__text p {
	margin-top: var(--space-2);
	font-size: 1.1rem;
	max-width: 48ch;
}

.cta-final__actions {
	margin-top: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* ==========================================================================
   Fallback template (index.php)
   ========================================================================== */

.fallback-content {
	padding-block-start: clamp(140px, 18vw, 200px);
}

.fallback-list {
	margin-top: var(--space-4);
	display: grid;
	gap: var(--space-3);
}

.fallback-item {
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}