/* ==========================================================================
   DermoClub — Link Bio v2
   Paleta oficial da marca (ver skill dermoclub-brand-identity)
   ========================================================================== */

:root {
	/* Cores da marca */
	--poppy: #D83C3D;        /* destaque principal */
	--brick-red: #A91C1E;    /* profundidade / hover */
	--alabaster: #DEDDE2;    /* base neutra */
	--ink: #070112;          /* texto (nunca #000) */

	/* Fundo da pagina — azul do banner */
	--fundo: #BDDCF4;

	/* Layout */
	--largura-max: 480px;
	--raio: 28px;
	--espaco: 12px;

	/* Distancia entre o banner e o primeiro botao */
	--respiro-banner: 6px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100dvh;
	padding: 24px 16px 32px;
	background: var(--fundo);
	color: var(--ink);
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
	color: inherit;
}

a:focus-visible {
	outline: 3px solid var(--brick-red);
	outline-offset: 4px;
	border-radius: var(--raio);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.bio {
	width: 100%;
	max-width: var(--largura-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--espaco);
}

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */

.bio__header {
	/* encosta o primeiro botao no banner (o .bio ja aplica --espaco de gap) */
	margin-bottom: calc(var(--respiro-banner) - var(--espaco));
}

.bio__banner {
	width: 100%;
	/* banner quadrado, sem arredondamento (--raio vale so para os botoes) */
	border-radius: 0;
	box-shadow: 0 12px 30px rgba(7, 1, 18, 0.14);
}

/* --------------------------------------------------------------------------
   Botoes principais
   -------------------------------------------------------------------------- */

.links {
	display: flex;
	flex-direction: column;
	gap: var(--espaco);
}

.links__item {
	display: block;
	border-radius: var(--raio);
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(7, 1, 18, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.links__item:hover,
.links__item:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(7, 1, 18, 0.22);
}

.links__item:active {
	transform: translateY(0) scale(0.99);
}

.links__item img {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */

.bio__footer {
	margin-top: 10px;
	text-align: center;
	font-size: 0.75rem;
	color: rgba(7, 1, 18, 0.55);
}

.bio__footer p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsivo e acessibilidade
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
	:root {
		--raio: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}