/* REVORUN · link na bio v2 (layout do Eduardo no FigCraft, frame 1080x3338)
   Medidas do frame em "k": 1k = 1px do frame de 1080. A tela tem até 480px de largura. */
@font-face { font-family: "GTA Art Deco"; src: url("assets/GTAArtDeco-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GTA Art Deco"; src: url("assets/GTAArtDeco-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Stage Grotesk"; src: url("assets/StageGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { --k: calc(min(100vw, 480px) / 1080); --coral: #FF856D; --rosa: #FF4E94; --seta: #FC3BA3; --ciano: #40D9D4; --claro: #F7F3F6; --tinta: #17121D; --fundo: #080712; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body { margin: 0; background: var(--fundo); color: #fff; font-family: "GTA Art Deco", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.tela { position: relative; width: min(100vw, 480px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: calc(30 * var(--k)) calc(80 * var(--k)) calc(30 * var(--k)); overflow: hidden;
  background: var(--fundo) url("assets/fundo.jpg") top center / 100% auto no-repeat; display: flex; flex-direction: column; align-items: center; }

/* topo: idioma e tema */
.topo { width: calc(920 * var(--k)); display: flex; justify-content: flex-end; align-items: center; gap: calc(14.29 * var(--k)); }
.idioma { display: flex; gap: calc(10 * var(--k)); padding: calc(5.36 * var(--k)); border-radius: calc(17.86 * var(--k)); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 calc(1.79 * var(--k)) rgba(255,255,255,.09); }
.idioma button { height: calc(53.57 * var(--k)); padding: 0 calc(17.86 * var(--k)); display: flex; align-items: center; gap: calc(10.71 * var(--k)); border-radius: calc(12.5 * var(--k)); font: 500 calc(21.43 * var(--k))/1 "Stage Grotesk", system-ui, sans-serif; }
.idioma button.ativo { background: rgba(255,255,255,.12); }
.bandeira { width: calc(28.57 * var(--k)); height: calc(19.64 * var(--k)); }
.tema { width: calc(67.86 * var(--k)); height: calc(67.86 * var(--k)); display: grid; place-items: center; border-radius: calc(17.86 * var(--k)); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 calc(1.79 * var(--k)) rgba(255,255,255,.09); }
.tema svg { width: calc(28.57 * var(--k)); height: calc(28.57 * var(--k)); }

.logo { margin-top: calc(60 * var(--k)); width: calc(235.07 * var(--k)); }
.logo svg { width: 100%; height: auto; }

/* cabeçalho */
.cab { margin-top: calc(50 * var(--k)); width: calc(754 * var(--k)); display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--k)); text-align: center; }
.cab h1 { font-weight: 700; font-size: calc(108.48 * var(--k)); line-height: calc(112 * var(--k)); }
.tags { display: flex; gap: calc(30 * var(--k)); }
.tags li { height: calc(61 * var(--k)); padding: calc(10 * var(--k)) calc(20 * var(--k)); display: flex; align-items: center; border-radius: calc(130 * var(--k)); background: #17121D; box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--ciano); color: var(--claro); font-weight: 700; font-size: calc(27.69 * var(--k)); line-height: calc(38.77 * var(--k)); }
.tags li.t-rosa { border-radius: calc(40 * var(--k)); background: rgba(11,11,15,.4); box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--rosa), inset 0 0 calc(29.8 * var(--k)) #201C4C, 0 calc(25 * var(--k)) calc(98 * var(--k)) rgba(52,68,156,.1); }
.cab p { width: calc(740 * var(--k)); font-weight: 400; font-size: calc(36 * var(--k)); line-height: calc(52.62 * var(--k)); }
.cab strong { font-weight: 700; }

.uteis { margin-top: calc(50 * var(--k)); height: calc(55 * var(--k)); padding: calc(7 * var(--k)) calc(8 * var(--k)) calc(7 * var(--k)) calc(15 * var(--k)); display: flex; align-items: center; gap: calc(10 * var(--k)); border-radius: calc(130 * var(--k)); background: var(--claro); color: var(--tinta); font-weight: 700; font-size: calc(27.69 * var(--k)); line-height: calc(38.77 * var(--k)); }
.uteis span { width: calc(29.5 * var(--k)); height: calc(29.5 * var(--k)); border-radius: 50%; display: grid; place-items: center; }
.uteis svg { width: calc(29.5 * var(--k)); height: calc(29.5 * var(--k)); }

/* links */
.links { margin-top: calc(50 * var(--k)); width: calc(920 * var(--k)); display: flex; flex-direction: column; gap: calc(30 * var(--k)); }
.link { position: relative; height: calc(156 * var(--k)); padding: calc(30 * var(--k)) calc(40 * var(--k)); display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--k)); border-radius: calc(40 * var(--k));
  background: rgba(11,11,15,.4); box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--rosa); -webkit-backdrop-filter: blur(calc(39.3 * var(--k))); backdrop-filter: blur(calc(39.3 * var(--k))); transition: transform .2s, background-color .2s; }
.link.d1 { box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--rosa), inset 0 0 calc(22.5 * var(--k)) rgba(255,133,109,.3); }
.link.d2 { box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--rosa), inset 0 0 calc(22.5 * var(--k)) rgba(146,213,255,.3); }
a.link:hover { background: rgba(255,78,148,.10); }
a.link:active { transform: scale(.985); }
.link-ic { flex: none; width: calc(78 * var(--k)); display: grid; place-items: center; }   /* caixa fixa: o texto de todos os cards começa na mesma linha */
.link-ic svg { height: auto; }
.ic-site svg { width: calc(72 * var(--k)); } .ic-produtos svg { width: calc(74 * var(--k)); } .ic-youtube svg { width: calc(77.5 * var(--k)); } .ic-tiktok svg { width: calc(62 * var(--k)); } .ic-instagram svg { width: calc(72 * var(--k)); } .ic-discord svg { width: calc(77.5 * var(--k)); }
.link-txt { flex: 1; display: flex; flex-direction: column; gap: calc(5 * var(--k)); margin-left: calc(14 * var(--k)); }
.link-txt b { font-weight: 700; font-size: calc(41.54 * var(--k)); line-height: calc(49.85 * var(--k)); letter-spacing: -.02em; color: var(--claro); }
.destaque .link-txt b { color: var(--coral); }
.link-txt span { font-weight: 400; font-size: calc(30.46 * var(--k)); line-height: calc(38.77 * var(--k)); letter-spacing: -.02em; color: var(--claro); }
.link .seta { flex: none; width: calc(54 * var(--k)); height: calc(54 * var(--k)); margin-right: calc(-16.6 * var(--k)); }

.breve { justify-content: center; box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--rosa), inset 0 0 calc(29.8 * var(--k)) #201C4C; -webkit-backdrop-filter: blur(calc(4 * var(--k))); backdrop-filter: blur(calc(4 * var(--k))); }
.breve-conteudo { position: absolute; inset: 0; padding: calc(30 * var(--k)) calc(40 * var(--k)); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--k)); border-radius: calc(40 * var(--k)); opacity: .5; filter: blur(calc(7.3 * var(--k))); box-shadow: inset 0 0 0 calc(1 * var(--k)) var(--claro); }
.breve-conteudo .link-txt { flex: none; margin-left: calc(30 * var(--k)); }
.breve-selo { position: relative; display: flex; align-items: center; gap: calc(29 * var(--k)); font-weight: 700; font-size: calc(41.54 * var(--k)); line-height: calc(49.85 * var(--k)); letter-spacing: -.02em; color: var(--claro); }
.breve-selo svg { width: calc(39.2 * var(--k)); height: auto; }

.recentes { width: calc(920 * var(--k)); display: flex; flex-direction: column; align-items: center; }
.recentes[hidden] { display: none; }
.sub { margin-top: calc(50 * var(--k)); font-weight: 400; font-size: calc(36 * var(--k)); line-height: calc(52.62 * var(--k)); text-align: center; }

/* vídeos */
.videos { margin-top: calc(50 * var(--k)); width: 100%; display: flex; flex-direction: column; gap: calc(40 * var(--k)); }
.video { border-radius: calc(32.14 * var(--k)); overflow: hidden; background: #24121F; box-shadow: inset 0 0 0 calc(1.79 * var(--k)) rgba(255,255,255,.09); padding: calc(1.79 * var(--k)); }
.video-img { display: block; height: calc(372 * var(--k)); background: rgba(255,255,255,.05); border-radius: calc(30 * var(--k)) calc(30 * var(--k)) 0 0; overflow: hidden; }
.video-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-pe { height: calc(114.3 * var(--k)); padding: 0 calc(26.8 * var(--k)) 0 calc(28.6 * var(--k)); display: flex; align-items: center; justify-content: space-between; }
.video-txt { display: flex; flex-direction: column; min-width: 0; margin-right: calc(20 * var(--k)); }
.video-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-txt b { font-weight: 400; font-size: calc(26.79 * var(--k)); line-height: calc(35 * var(--k)); letter-spacing: -.calc(42 * var(--k)); }
.video-txt span { margin-top: calc(3.6 * var(--k)); font-weight: 400; font-size: calc(21.43 * var(--k)); line-height: calc(28 * var(--k)); color: #A3A3AE; }
.acessar { flex: none; height: calc(64.3 * var(--k)); padding: 0 calc(25 * var(--k)); display: flex; align-items: center; gap: calc(17.86 * var(--k)); border-radius: calc(17.86 * var(--k)); background: var(--coral); color: var(--tinta); font: 500 calc(23.21 * var(--k))/1 "Stage Grotesk", system-ui, sans-serif; letter-spacing: -.calc(14 * var(--k)); }
.acessar svg { width: calc(21.43 * var(--k)); height: calc(21.43 * var(--k)); }

.rodape { margin-top: auto; padding-top: calc(50 * var(--k)); font-weight: 400; font-size: calc(36 * var(--k)); line-height: calc(52.62 * var(--k)); text-align: center; }

@media (prefers-reduced-motion: reduce) { .link { transition: none; } }

/* desktop/tablet: a arte do controle (mesma da Em breve) cobre a tela toda atrás da coluna; a coluna fica transparente,
   então o vidro dos botões desfoca a arte. Escurecida para os textos lerem. */
@media (min-width: 600px) {
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(8, 7, 18, .45), rgba(8, 7, 18, .7)), #0B0412 url("assets/fundo-desktop.webp") center bottom / cover no-repeat; }
  body { background: transparent; }
  .tela { background: transparent; }
}