/* Minha Agenda Pro — Link na bio (v3.23.0). Página pública leve, sem o tema. */
.lb-pagina {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--lb-fundo-cor);
	background: var(--lb-fundo);
	background-attachment: fixed;
	color: var(--lb-texto);
	font-family: var(--lb-fonte);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
.lb-pagina *, .lb-pagina *::before, .lb-pagina *::after,
.lb-embutido *, .lb-embutido *::before, .lb-embutido *::after { box-sizing: border-box; }

.lb-embutido {
	background: var(--lb-fundo);
	color: var(--lb-texto);
	font-family: var(--lb-fonte);
	border-radius: 24px;
	overflow: hidden;
}

.lb {
	position: relative;
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
	padding: 56px 20px 32px;
	padding-top: max(56px, env(safe-area-inset-top));
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lb-compartilhar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--lb-texto) 10%, transparent);
	color: var(--lb-texto);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.lb-compartilhar:hover { background: color-mix(in srgb, var(--lb-texto) 18%, transparent); }
.lb-compartilhar.is-ok { transform: scale(1.12); }

/* Topo */
.lb-topo { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.lb-foto {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	background: color-mix(in srgb, var(--lb-texto) 8%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lb-botao) 35%, transparent), 0 12px 28px -12px rgba(0, 0, 0, .35);
}
.lb-foto--iniciais {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: .02em;
	background: var(--lb-botao);
	color: var(--lb-botao-texto);
}
.lb--contorno .lb-foto--iniciais { background: color-mix(in srgb, var(--lb-botao) 18%, transparent); color: var(--lb-texto); }
.lb-nome { margin: 16px 0 0; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lb-bio { margin: 8px 0 0; max-width: 440px; font-size: 15px; line-height: 1.5; opacity: .85; overflow-wrap: anywhere; }

.lb-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.lb-rede {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--lb-texto);
	transition: background .2s ease, transform .2s ease;
}
.lb-rede:hover, .lb-rede:focus-visible { background: color-mix(in srgb, var(--lb-texto) 10%, transparent); transform: translateY(-2px); }

/* Botões */
.lb-lista { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.lb-secao { margin: 14px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .75; }
.lb-botao {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	min-height: 58px;
	padding: 8px 10px;
	border-radius: var(--lb-raio);
	background: var(--lb-botao);
	color: var(--lb-botao-texto);
	border: 2px solid var(--lb-botao);
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	animation: lbEntrar .45s ease both;
}
.lb-botao:nth-child(2) { animation-delay: .04s; }
.lb-botao:nth-child(3) { animation-delay: .08s; }
.lb-botao:nth-child(4) { animation-delay: .12s; }
.lb-botao:nth-child(5) { animation-delay: .16s; }
.lb-botao:nth-child(n+6) { animation-delay: .2s; }
.lb-botao:hover { transform: translateY(-2px); }
.lb-botao:active { transform: translateY(0) scale(.99); }
.lb-botao:focus-visible, .lb-rede:focus-visible, .lb-compartilhar:focus-visible { outline: 3px solid var(--lb-texto); outline-offset: 3px; }
.lb-botao__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.lb-botao__txt { padding: 0 4px; overflow-wrap: anywhere; }

.lb--sombra .lb-botao { border-color: transparent; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .12); }
.lb--sombra .lb-botao:hover { box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .12); }
.lb--contorno .lb-botao { background: transparent; color: var(--lb-botao); }
.lb--contorno .lb-botao:hover { background: var(--lb-botao); color: var(--lb-botao-texto); }

.lb-botao--destaque { animation: lbEntrar .45s ease both, lbDestaque 5s ease-in-out 1.2s infinite; }

.lb-vazio { text-align: center; opacity: .7; font-size: 15px; margin: 8px 0; }
.lb-endereco { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 22px 0 0; font-size: 14px; opacity: .8; text-align: center; }
.lb-endereco svg { flex: 0 0 auto; margin-top: 2px; }
.lb-rodape { margin-top: 36px; font-size: 12px; opacity: .6; text-align: center; min-height: 1em; }

@keyframes lbEntrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lbDestaque {
	0%, 86%, 100% { transform: none; }
	89% { transform: rotate(-1.2deg) scale(1.02); }
	92% { transform: rotate(1.2deg) scale(1.02); }
	95% { transform: rotate(-.6deg); }
}

/* Prévia do painel: sem animação de entrada a cada atualização. */
.lb-pagina--previa .lb-botao { animation: none; }
.lb-pagina--previa .lb-botao--destaque { animation: lbDestaque 5s ease-in-out 1.2s infinite; }

@media (max-width: 360px) {
	.lb { padding-left: 14px; padding-right: 14px; }
	.lb-botao { grid-template-columns: 30px 1fr 30px; min-height: 54px; font-size: 15px; padding: 7px 8px; }
	.lb-botao__ico { width: 30px; }
}
@media (min-width: 640px) {
	.lb { padding-top: 72px; }
	.lb-foto { width: 108px; height: 108px; }
	.lb-nome { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.lb-botao, .lb-botao--destaque, .lb-pagina--previa .lb-botao--destaque { animation: none; transition: none; }
	.lb-botao:hover, .lb-rede:hover { transform: none; }
}

@media (forced-colors: active) {
	.lb-botao { border: 2px solid ButtonText; }
}
