/*!
 * Imagine.IDE — página de links
 *
 * Mesma identidade do site: fundo #0E0E10, âmbar #F5A623, turquesa
 * #34D0C4, Poppins nos títulos e IBM Plex Mono nos rótulos.
 *
 * Pensada para o telemóvel primeiro — é de onde vem quem clica no link
 * da bio — e sem depender de JavaScript para aparecer.
 */

.ii-links-body {
	margin: 0;
	min-height: 100dvh;
	background: #0E0E10;
	color: #F3F1EA;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.25rem;
	position: relative;
	overflow-x: hidden;
}

/* o mesmo halo âmbar do topo do site, bem discreto */
.ii-links-brilho {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 45% at 50% 0%, rgba(245, 166, 35, .10) 0%, rgba(245, 166, 35, 0) 70%),
		radial-gradient(45% 35% at 50% 100%, rgba(52, 208, 196, .06) 0%, rgba(52, 208, 196, 0) 70%);
}

/* grade tênue, a marca do site */
.ii-links-body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		linear-gradient(rgba(243, 241, 234, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(243, 241, 234, .022) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 100%);
}

.ii-links {
	position: relative;
	width: 100%;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
}

/* ── topo ────────────────────────────────────────────────── */

.ii-links__topo {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.ii-links__logo {
	width: auto;
	height: 46px;
	max-width: 78%;
	object-fit: contain;
}

.ii-links__tagline {
	margin: 0;
	max-width: 34ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: #8D8D97;
	text-wrap: balance;
}

.ii-links__nota {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .85rem;
	border: 1px solid rgba(243, 241, 234, .12);
	border-radius: 999px;
	background: rgba(243, 241, 234, .04);
	font-size: .8125rem;
	color: #C9C9D2;
	text-decoration: none;
	transition: border-color .25s ease, background .25s ease;
}

.ii-links__nota:hover {
	border-color: rgba(245, 166, 35, .45);
	background: rgba(245, 166, 35, .08);
}

.ii-links__nota strong { color: #F3F1EA; font-weight: 600; }

.ii-links__estrelas {
	display: inline-flex;
	gap: 1px;
	color: #F5A623;
	line-height: 0;
}

/* ── botões ──────────────────────────────────────────────── */

.ii-links__lista {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ii-link {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 1.05rem 1.15rem;
	border: 1px solid rgba(243, 241, 234, .11);
	border-radius: 14px;
	background: linear-gradient(180deg, #17171C 0%, #131317 100%);
	color: #F3F1EA;
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ii-link:hover,
.ii-link:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(245, 166, 35, .45);
	box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .95);
}

.ii-link__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 11px;
	background: rgba(243, 241, 234, .05);
	border: 1px solid rgba(243, 241, 234, .09);
	color: #F5A623;
}

.ii-link__texto {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
	flex: 1;
}

.ii-link__titulo {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.ii-link__apoio {
	font-size: .8125rem;
	line-height: 1.4;
	color: #8D8D97;
}

.ii-link__seta {
	flex-shrink: 0;
	color: #5C5C66;
	transition: color .2s ease, transform .2s ease;
	line-height: 0;
}

.ii-link:hover .ii-link__seta {
	color: #F5A623;
	transform: translateX(3px);
}

/* o primeiro é o que a pessoa veio fazer: falar com a gente */
.ii-link.is-destaque {
	background: linear-gradient(180deg, #F5A623 0%, #E89612 100%);
	border-color: transparent;
	color: #17100A;
}

.ii-link.is-destaque .ii-link__icone {
	background: rgba(23, 16, 10, .12);
	border-color: rgba(23, 16, 10, .16);
	color: #17100A;
}

.ii-link.is-destaque .ii-link__apoio { color: rgba(23, 16, 10, .72); }
.ii-link.is-destaque .ii-link__seta  { color: rgba(23, 16, 10, .55); }

.ii-link.is-destaque:hover {
	border-color: transparent;
	box-shadow: 0 16px 34px -20px rgba(245, 166, 35, .55);
}

.ii-link.is-destaque:hover .ii-link__seta { color: #17100A; }

/* ── rodapé ──────────────────────────────────────────────── */

.ii-links__rodape {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(243, 241, 234, .08);
}

.ii-links__sociais {
	display: flex;
	gap: .6rem;
}

.ii-links__sociais a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(243, 241, 234, .12);
	color: #C9C9D2;
	transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.ii-links__sociais a:hover,
.ii-links__sociais a:focus-visible {
	color: #F5A623;
	border-color: rgba(245, 166, 35, .45);
	transform: translateY(-2px);
}

.ii-links__email {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: .8125rem;
	letter-spacing: .01em;
	color: #C9C9D2;
	text-decoration: none;
	border-bottom: 1px solid rgba(243, 241, 234, .18);
	padding-bottom: 2px;
	transition: color .2s ease, border-color .2s ease;
}

.ii-links__email:hover {
	color: #F5A623;
	border-color: rgba(245, 166, 35, .5);
}

.ii-links__site {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #5C5C66;
	text-decoration: none;
	transition: color .2s ease;
}

.ii-links__site:hover { color: #8D8D97; }

/* ── foco visível e movimento ────────────────────────────── */

.ii-links a:focus-visible {
	outline: 2px solid #F5A623;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ii-link,
	.ii-link__seta,
	.ii-links__sociais a { transition: none; }
	.ii-link:hover { transform: none; }
}

/* ── telas pequenas ──────────────────────────────────────── */

@media (max-width: 380px) {
	.ii-links-body { padding: 1.75rem 1rem; }
	.ii-links { gap: 1.75rem; }
	.ii-link { padding: .95rem 1rem; gap: .75rem; }
	.ii-link__titulo { font-size: 1rem; }
	.ii-link__icone { width: 34px; height: 34px; }
}

/* ── telas grandes: nada de esticar, é uma coluna ────────── */

@media (min-width: 768px) {
	.ii-links__logo { height: 52px; }
	.ii-links__tagline { font-size: .975rem; }
}

/* ────────────────────────────────────────────────────────────
   Caber na tela sem rolar

   Em 390x844 a pagina dava 883px: 39px de rolagem para nada. Numa
   pagina de links o ideal e ver tudo de uma vez — quem vem da bio
   do Instagram decide em segundos e nem sempre rola.
   ──────────────────────────────────────────────────────────── */

@media (max-height: 900px) {
	.ii-links-body { padding-top: 1.75rem; padding-bottom: 1.75rem; }
	.ii-links { gap: 1.6rem; }
	.ii-links__topo { gap: .85rem; }
	.ii-links__lista { gap: .65rem; }
	.ii-link { padding: .9rem 1.1rem; }
	.ii-links__rodape { gap: .8rem; padding-top: 1.15rem; }
	.ii-links__sociais a { width: 38px; height: 38px; }
}

/* telas baixas (360x740 e parecidas) apertam mais um pouco */
@media (max-height: 790px) {
	.ii-links-body { padding-top: 1.25rem; padding-bottom: 1.25rem; }
	.ii-links { gap: 1.15rem; }
	.ii-links__logo { height: 40px; }
	.ii-links__tagline { font-size: .875rem; line-height: 1.5; }
	.ii-links__topo { gap: .7rem; }
	.ii-link { padding: .8rem 1rem; }
	.ii-link__apoio { font-size: .78rem; }
	.ii-links__rodape { gap: .7rem; padding-top: .95rem; }
	.ii-links__sociais a { width: 36px; height: 36px; }
	.ii-links__site { display: none; }
}

/* O logo virou h1. Zera o que o navegador aplica em h1 para nada mudar
   visualmente — o titulo existe para leitor de tela e para busca. */
.ii-links__titulo {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 0;
	/* Precisa ocupar a linha inteira: o max-width de 78% do logo mede
	   contra este elemento, e sem largura o logo encolhia de 230px
	   para 119px. */
	width: 100%;
	display: flex;
	justify-content: center;
}