/* ═══════════════════════════════════════════════════════════════════════════
   EA Bio Page v4 — Modern link-in-bio, mobile-first
   Brand: #1B3E3C  |  accent #7EC13C  |  gold #C9951A
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset + base ──────────────────────────────────────────────────────── */
.ea-bio-page {
	margin: 0;
	padding: 0;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: #f0f2ef;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

.ea-bio-page *, .ea-bio-page *::before, .ea-bio-page *::after { box-sizing: border-box; }
.ea-bio-page a      { text-decoration: none; color: inherit; }
.ea-bio-page img    { max-width: 100%; height: auto; display: block; }
.ea-bio-page h1,
.ea-bio-page h2,
.ea-bio-page h3     { margin: 0; font-weight: 700; line-height: 1.2; }
.ea-bio-page p      { margin: 0; }
.ea-bio-page button { font-family: inherit; }

/* ── Wrapper centralizado ────────────────────────────────────────────────── */
.bio-header,
.bio-section,
.bio-footer {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

.bio-section,
.bio-footer {
	padding-left: 16px;
	padding-right: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════════════ */
.bio-header {
	background: linear-gradient(180deg, #1F4542 0%, #0e2b29 100%);
	padding: 48px 24px 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 8px 32px rgba(0,0,0,.22);
	position: relative;
	overflow: hidden;
}

.bio-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(201,149,26,.18) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 110%, rgba(126,193,60,.1) 0%, transparent 50%);
	pointer-events: none;
}

/* Foto de perfil — anel story dourado */
.bio-profile-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #C9951A;
	box-shadow:
		0 0 0 3px #0e2b29,
		0 0 0 6px rgba(201,149,26,.6),
		0 8px 32px rgba(0,0,0,.55);
	background: rgba(255,255,255,.08);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.bio-profile-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bio-profile-photo-ph {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bio-header-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 1;
}

.bio-brand-name {
	font-size: 23px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.4px;
}

.bio-header-tagline {
	font-size: 13px;
	color: rgba(255,255,255,.5);
	font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════════════
   SEÇÕES — base compartilhada
   ════════════════════════════════════════════════════════════════════════════ */
.bio-section {
	margin-bottom: 28px;
}

.bio-buttons,
.bio-columns,
.bio-cards {
	margin-top: 28px;
}

.bio-section-title {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: #8a9280;
	margin: 0 0 18px;
}

.bio-section-hd {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
}

.bio-section-hd .bio-section-title { margin: 0; }

.bio-columns .bio-section-hd .bio-section-title { color: #9a7a1a; }

/* Divisor invisível — apenas espaçamento estrutural */
.bio-divider {
	height: 0;
	max-width: 460px;
	margin: 0 auto 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOCO 2a — Botões (largura 100%)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bio-card-full {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 14px;
	padding: 12px 16px;
	min-height: 64px;
	cursor: pointer;
	transition: box-shadow .22s, transform .15s, border-color .22s;
	color: #111;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.bio-card-full:hover {
	box-shadow: 0 8px 28px rgba(27,62,60,.14);
	border-color: rgba(126,193,60,.5);
	transform: translateY(-2px);
}

.bio-card-full:active {
	transform: scale(.98);
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Imagem — quadrada com bordas levemente arredondadas */
.bio-card-full-img {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.bio-card-full-label {
	flex: 1;
	font-size: 14px;
	font-weight: 700;
	color: #1B3E3C;
}

.bio-card-full-arrow {
	color: #ccd5c4;
	flex-shrink: 0;
	transition: color .15s, transform .2s;
}

.bio-card-full:hover .bio-card-full-arrow {
	color: #7EC13C;
	transform: translateX(3px);
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOCO 2b — Card Único (imagem de fundo + título overlay)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bio-card-single {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	display: block;
	aspect-ratio: 16 / 9;
	background: #1d3d1c;
	cursor: pointer;
	transition: transform .22s;
}

.bio-card-single:hover  { transform: scale(1.01); }
.bio-card-single:active { transform: scale(.99); }

.bio-card-single-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform .4s ease;
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	image-rendering: auto;
}

.bio-card-single:hover .bio-card-single-img {
	transform: scale(1.06);
}

.bio-card-single-ph {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1B3E3C, #2d7026);
}

/* Gradiente escuro + título na base */
.bio-card-single-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 56px 18px 18px;
	background: linear-gradient(to top, rgba(0,0,0,.80) 0%, transparent 100%);
	z-index: 1;
}

.bio-card-single-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
	text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOCO 3 — Colunas Verificadas (carrossel)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-columns {
	padding-left: 0;
	padding-right: 0;
}

.bio-columns .bio-section-hd {
	padding-left: 16px;
	padding-right: 16px;
}

.bio-carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 6px 16px 18px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
}

.bio-carousel::-webkit-scrollbar { display: none; }

.bio-col-card {
	flex-shrink: 0;
	width: 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	scroll-snap-align: start;
	cursor: pointer;
	transition: opacity .15s, transform .2s;
}

.bio-col-card:hover  { transform: translateY(-4px); }
.bio-col-card:active { opacity: .7; transform: scale(.95); }

/* Story ring dourado nos colunistas */
.bio-col-thumb {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #C9951A;
	background: #fdf6e4;
	box-shadow:
		0 0 0 2px #f0f2ef,
		0 0 0 5px rgba(201,149,26,.3);
	transition: box-shadow .22s;
}

.bio-col-card:hover .bio-col-thumb {
	box-shadow:
		0 0 0 2px #f0f2ef,
		0 0 0 5px rgba(201,149,26,.6),
		0 6px 18px rgba(201,149,26,.25);
}

.bio-col-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bio-col-thumb-ph {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f7e9c4, #e8c97a);
}

.bio-col-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	max-width: 84px;
}

.bio-col-name {
	font-size: 11px;
	font-weight: 700;
	color: #2a2a2a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 68px;
	text-align: center;
}

.bio-verified-xs { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   BLOCO 4 — Feed de Notícias (grade 2 colunas — edge-to-edge)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-feed {
	padding-left: 0;
	padding-right: 0;
}

.bio-feed > .bio-section-title {
	padding-left: 16px;
	margin-bottom: 20px;
}

.bio-feed-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	border-radius: 0;
	overflow: hidden;
}

.bio-feed-card {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	display: block;
	background: #c8e0be;
}

.bio-feed-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.bio-feed-card:hover img,
.bio-feed-card:active img {
	transform: scale(1.1);
}

.bio-feed-ph {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #d8edce, #a8d48e);
}

.bio-feed-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	opacity: 0;
	transition: background .22s, opacity .22s;
}

.bio-feed-card:hover .bio-feed-overlay,
.bio-feed-card:active .bio-feed-overlay {
	background: rgba(15,43,41,.55);
	opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOCO 5 — Newsletter (mesmo gradiente do hero)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-nl-card {
	border-radius: 24px;
	padding: 40px 26px 34px;
	text-align: center;
	background: linear-gradient(180deg, #1F4542 0%, #0e2b29 100%);
	box-shadow: 0 8px 36px rgba(14,43,41,.35);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bio-nl-card::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(201,149,26,.2) 0%, transparent 65%);
	pointer-events: none;
}

.bio-nl-card .bio-nl-title {
	font-size: 21px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 14px;
	line-height: 1.25;
	position: relative;
	width: 100%;
}

.bio-nl-card .bio-nl-desc {
	font-size: 14px;
	color: rgba(255,255,255,.68);
	margin-bottom: 24px;
	line-height: 1.65;
	width: 100%;
	position: relative;
}

.bio-nl-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	width: 100%;
}

.bio-nl-form .bio-input {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.22);
	color: #fff;
	backdrop-filter: blur(8px);
}

.bio-nl-form .bio-input::placeholder { color: rgba(255,255,255,.4); }

.bio-nl-form .bio-input:focus {
	background: rgba(255,255,255,.2);
	border-color: rgba(255,255,255,.5);
	box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

.bio-nl-card .bio-nl-note {
	font-size: 11px;
	color: rgba(255,255,255,.4);
	margin-top: 12px;
	position: relative;
	width: 100%;
	text-align: center;
}

.bio-nl-success {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	padding: 14px;
	background: rgba(255,255,255,.12);
	border-radius: 14px;
	margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOCO 6 — Publicidade CTA (dark premium, botão dourado)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-lead-card {
	background: linear-gradient(145deg, #1B3E3C 0%, #0e2b29 100%);
	border: none;
	border-radius: 24px;
	padding: 40px 24px 36px;
	text-align: center;
	box-shadow: 0 8px 36px rgba(14,43,41,.35);
	position: relative;
	overflow: hidden;
}

.bio-lead-card::before {
	content: '';
	position: absolute;
	bottom: -60px;
	left: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(201,149,26,.14) 0%, transparent 65%);
	pointer-events: none;
}

.bio-lead-badge {
	display: inline-block;
	background: rgba(201,149,26,.18);
	border: 1px solid rgba(201,149,26,.4);
	border-radius: 999px;
	padding: 3px 14px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #e5b62c;
	margin-bottom: 16px;
	position: relative;
}

.bio-lead-card .bio-lead-title {
	font-size: 21px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 12px;
	position: relative;
}

.bio-lead-card .bio-lead-desc {
	font-size: 13px;
	color: rgba(255,255,255,.62);
	margin-bottom: 24px;
	line-height: 1.65;
	position: relative;
}

/* ════════════════════════════════════════════════════════════════════════════
   Inputs
   ════════════════════════════════════════════════════════════════════════════ */
.bio-input {
	width: 100%;
	padding: 13px 20px;
	border: 1.5px solid #dde2d8;
	border-radius: 999px;
	font-size: 15px;
	color: #1a1a1a;
	background: #fff;
	outline: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
}

.bio-input:focus {
	border-color: #5A9926;
	box-shadow: 0 0 0 3px rgba(90,153,38,.1);
}

.bio-input::placeholder { color: #b8c0b0; }

/* ════════════════════════════════════════════════════════════════════════════
   Botões
   ════════════════════════════════════════════════════════════════════════════ */
.bio-btn {
	width: 100%;
	padding: 15px 22px;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s, transform .12s, box-shadow .2s;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	letter-spacing: .2px;
	text-decoration: none;
}

.bio-btn:active  { transform: scale(.97); }
.bio-btn:disabled { opacity: .6; cursor: default; }

/* Newsletter — branco translúcido */
.bio-btn-primary {
	background: rgba(255,255,255,.18);
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.3);
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.bio-btn-primary:hover {
	background: rgba(255,255,255,.26);
	box-shadow: 0 4px 18px rgba(0,0,0,.15);
}

/* Publicidade CTA — dourado premium */
.bio-btn-commercial {
	background: linear-gradient(135deg, #C9951A 0%, #a87c12 100%);
	color: #fff;
	box-shadow: 0 4px 18px rgba(201,149,26,.45);
	font-size: 16px;
}

.bio-btn-commercial:hover {
	box-shadow: 0 6px 26px rgba(201,149,26,.55);
	opacity: .92;
}

.btn-spin {
	display: inline-block;
	animation: bio-spin 1s linear infinite;
}

@keyframes bio-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════════════════════ */
.bio-footer {
	text-align: center;
	padding-top: 8px;
	padding-bottom: 48px;
	font-size: 12px;
	color: #aab0a2;
}

.bio-footer a { color: #8a9e82; font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════════════
   Botão Página Inicial (abaixo do header)
   ════════════════════════════════════════════════════════════════════════════ */
.bio-home-btn-wrap {
	max-width: 460px;
	margin: 20px auto 0;
	padding: 0 16px;
	text-align: center;
}

.bio-home-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1.5px solid rgba(27,62,60,.14);
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 700;
	color: #1B3E3C;
	box-shadow: 0 2px 10px rgba(0,0,0,.07);
	transition: box-shadow .2s, transform .15s, border-color .2s;
	text-decoration: none;
}

.bio-home-btn:hover {
	box-shadow: 0 6px 20px rgba(27,62,60,.14);
	border-color: rgba(126,193,60,.5);
	transform: translateY(-2px);
}

.bio-home-btn:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════════════════════
   Bloco Criar Conta
   ════════════════════════════════════════════════════════════════════════════ */
.bio-signup-card {
	background: linear-gradient(145deg, #f4faf0 0%, #e6f4dc 100%);
	border: 1.5px solid rgba(126,193,60,.25);
	border-radius: 24px;
	padding: 40px 24px 36px;
	text-align: center;
	box-shadow: 0 6px 28px rgba(90,153,38,.12);
	position: relative;
	overflow: hidden;
}

.bio-signup-card::before {
	content: '';
	position: absolute;
	top: -50px;
	left: -50px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(126,193,60,.15) 0%, transparent 65%);
	pointer-events: none;
}

.bio-signup-icon {
	width: 60px;
	height: 60px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	color: #5A9926;
	box-shadow: 0 4px 16px rgba(90,153,38,.18);
	position: relative;
}

.bio-signup-card .bio-signup-title {
	font-size: 21px;
	font-weight: 800;
	color: #1B3E3C;
	margin-bottom: 12px;
	position: relative;
}

.bio-signup-card .bio-signup-desc {
	font-size: 13px;
	color: #4a5f42;
	margin-bottom: 24px;
	line-height: 1.65;
	position: relative;
}

.bio-btn-signup {
	background: linear-gradient(135deg, #7EC13C 0%, #5A9926 100%);
	color: #fff;
	box-shadow: 0 4px 18px rgba(90,153,38,.4);
	font-size: 16px;
}

.bio-btn-signup:hover {
	box-shadow: 0 6px 26px rgba(90,153,38,.5);
	opacity: .93;
}

/* ════════════════════════════════════════════════════════════════════════════
   Desktop
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 520px) {
	.bio-section,
	.bio-footer        { padding-left: 0; padding-right: 0; }
	.bio-columns       { padding: 0; }
	.bio-columns .bio-section-hd { padding-left: 0; }
	.bio-carousel      { padding-left: 0; padding-right: 0; }
	.bio-feed > .bio-section-title { padding-left: 0; }
	.bio-home-btn-wrap { padding: 0; }
}