/* Guxtavon · segue o Manual do canal (Figma "Guxtavon", páginas 01 a 12):
   - cor chapada: preto é tinta, branco é papel, o verde-limão marca UMA coisa só por peça; verde nunca é texto no branco;
   - Bagel Fat One no nome e nos títulos; Archivo no texto; Geist Mono nas medidas e etiquetas;
   - o nome em adesivo: letra preta, borda branca, contorno de tinta;
   - o gesto: a coisa selecionada como camada do Figma (contorno de tinta, alças brancas de 24 px, etiqueta mono no fundo
     de tinta com canto de 4 px, cota com ponta e o cursor de tinta com borda branca), na grade de 12 colunas no verde;
   - nada de degradê, brilho, sombra ou filete fino; texto sempre reto, só objeto tem ângulo. */
:root {
  --tinta: #0B0B0B; --papel: #FFFFFF; --verde: #C6FF1A; --verde-escuro: #B7EE12; --contorno: #1A120E;
  --grafite: #151515; --grafite2: #1D1D1D; --cinza: #A1A1A1; --texto: #EDEDED;
  --bagel: "Bagel Fat One", system-ui, sans-serif;
  --apoio: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --largura: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tinta); color: var(--texto); font: 17px/1.55 var(--apoio); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
.pequeno { font-size: 13px; text-transform: lowercase; color: var(--cinza); }
b { font-weight: 700; }

/* ---------- o nome em adesivo (duas camadas: contorno de tinta por fora, borda branca, letra preta) ---------- */
.nome-adesivo { position: relative; display: inline-block; font-family: var(--bagel); color: var(--tinta); font-size: 26px; line-height: 1; letter-spacing: 0.01em; }
.nome-adesivo::before { content: attr(data-texto); position: absolute; inset: 0; color: var(--tinta); -webkit-text-stroke: 12px var(--contorno); z-index: -1; }
.nome-adesivo { -webkit-text-stroke: 7px var(--papel); paint-order: stroke fill; isolation: isolate; }

/* ---------- barra de cima ---------- */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px max(20px, calc((100vw - var(--largura)) / 2)); background: var(--tinta); }
.barra-nome { padding: 6px 4px; }
.barra-links { display: flex; gap: 6px; }
.barra-links a { font-family: var(--mono); font-size: 13px; text-transform: lowercase; color: var(--cinza); padding: 8px 12px; border-radius: 4px; }
.barra-links a:hover { background: var(--grafite2); color: var(--papel); }

/* ---------- etiquetas de seção (como no manual: "02 · o canal") ---------- */
.etiqueta-secao { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; color: var(--tinta); }
.etiqueta-secao.claro { color: var(--cinza); }

/* ---------- 01 · topo ---------- */
.heroi { position: relative; background: var(--verde); color: var(--tinta); overflow: hidden; }
.grade-colunas { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 0px), transparent 0);
}
/* as 12 colunas num verde mais escuro (a grade do banner), feitas como listras chapadas */
.grade-colunas { background-image: linear-gradient(90deg, var(--verde-escuro) 0 58%, transparent 58% 100%); background-size: calc(100% / 12) 100%; background-position: calc(100% / 48) 0; opacity: 0.55; }
.heroi-dentro { position: relative; max-width: var(--largura); margin: 0 auto; padding: 64px 20px 72px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.titulo { font-family: var(--bagel); font-weight: 400; font-size: clamp(36px, 4.3vw, 60px); line-height: 1.12; margin: 0 0 22px; color: var(--tinta); }
/* o destaque é UM bloco só (como no manual): as linhas quebram dentro dele, e o ç e o g não são cortados pela linha de baixo */
.destaque { display: inline-block; background: var(--tinta); color: var(--papel); padding: 0.06em 0.24em 0.16em; margin-top: 0.1em; border-radius: 4px; line-height: 1.1; }
.heroi-bio { font-size: 19px; line-height: 1.5; max-width: 520px; margin: 0 0 26px; color: #1b2402; }
.heroi-perfil { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.heroi-perfil img { width: 56px; height: 56px; border-radius: 50%; background: var(--papel); padding: 3px; }
.heroi-perfil div { display: flex; flex-direction: column; line-height: 1.25; }
.heroi-perfil b { font-size: 16px; }
.heroi-perfil .mono { font-size: 13px; color: #2d3a06; }

/* botões: cantos de 6 px (nada de pílula), chapados e sem seta. No hover, o botão fica "selecionado" como uma
   camada do Figma (contorno e as quatro alças do manual): é o gesto do canal no lugar da setinha de sempre. */
.botao-tinta, .botao-verde { position: relative; display: inline-flex; align-items: center; font-weight: 700; font-size: 16px; border-radius: 6px; padding: 14px 22px; }
.botao-tinta { background: var(--tinta); color: var(--papel); }
.botao-verde { background: var(--verde); color: var(--tinta); }

/* a seleção do Figma no hover (botões e cartões): contorno de 2 px e 4 alças brancas com contorno de tinta */
.botao-tinta, .botao-verde, .selecionavel { --sel: var(--tinta); --dist: 6px; }
.escuro .botao-verde, .escuro .selecionavel { --sel: var(--papel); }
.botao-tinta::before, .botao-verde::before, .selecionavel::before {
  content: ""; position: absolute; inset: calc(var(--dist) * -1); border: 2px solid var(--sel); border-radius: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.h { position: absolute; width: 11px; height: 11px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 1px; opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 2; }
.h1 { left: calc(var(--dist) * -1 - 5px); top: calc(var(--dist) * -1 - 5px); }
.h2 { right: calc(var(--dist) * -1 - 5px); top: calc(var(--dist) * -1 - 5px); }
.h3 { left: calc(var(--dist) * -1 - 5px); bottom: calc(var(--dist) * -1 - 5px); }
.h4 { right: calc(var(--dist) * -1 - 5px); bottom: calc(var(--dist) * -1 - 5px); }
.botao-tinta:hover::before, .botao-verde:hover::before, .selecionavel:hover::before,
.botao-tinta:hover > .h, .botao-verde:hover > .h, .selecionavel:hover > .h,
a:focus-visible::before, a:focus-visible > .h { opacity: 1; }
.selecionavel { --dist: 8px; position: relative; overflow: visible !important; }
/* dentro de um cartão, o botão não se seleciona sozinho: quem fica selecionado é o cartão */
.selecionavel .botao-tinta::before, .selecionavel .botao-verde::before, .selecionavel .botao-tinta > .h, .selecionavel .botao-verde > .h { display: none; }
a:focus-visible { outline: none; }

/* o gesto: seleção do Figma */
.heroi-imagem { margin: 0; display: flex; flex-direction: column; align-items: center; }
.selecao { position: relative; outline: 3px solid var(--tinta); outline-offset: 0; }
.heroi-foto { width: min(360px, 70vw); }
.alca { position: absolute; width: 16px; height: 16px; background: var(--papel); border: 3px solid var(--tinta); border-radius: 2px; }
.a1 { left: -9px; top: -9px; } .a2 { left: calc(50% - 8px); top: -9px; } .a3 { right: -9px; top: -9px; }
.a4 { left: -9px; top: calc(50% - 8px); } .a5 { right: -9px; top: calc(50% - 8px); }
.a6 { left: -9px; bottom: -9px; } .a7 { left: calc(50% - 8px); bottom: -9px; } .a8 { right: -9px; bottom: -9px; }
.cursor { position: absolute; right: -34px; bottom: -48px; width: 34px; height: 48px; }
.cursor path { fill: var(--tinta); stroke: var(--papel); stroke-width: 5; stroke-linejoin: round; }
.cota { position: relative; width: min(360px, 70vw); margin-top: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.cota-linha { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--tinta); }
.cota-linha::before, .cota-linha::after { content: ""; position: absolute; top: -8px; width: 3px; height: 19px; background: var(--tinta); }
.cota-linha::before { left: 0; } .cota-linha::after { right: 0; }
.etiqueta-medida { position: relative; font-family: var(--mono); font-weight: 500; font-size: 13px; background: var(--tinta); color: var(--papel); padding: 4px 10px; border-radius: 4px; text-transform: lowercase; }

/* ---------- parte escura, com as curvas de nível em vetor bem apagadas ---------- */
.escuro { position: relative; overflow: hidden; }
.topo-svg { position: absolute; inset: 0; background: url("/img/topo.svg") center top / 1600px auto repeat; opacity: 0.07; pointer-events: none; }
.secao { position: relative; max-width: var(--largura); margin: 0 auto; padding: 72px 20px 8px; }
.secao:last-of-type { padding-bottom: 72px; }
.titulo-secao { font-family: var(--bagel); font-weight: 400; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.05; margin: 0 0 10px; color: var(--papel); }
.sub { color: var(--cinza); margin: 0 0 26px; max-width: 640px; }
.sub b { color: var(--papel); }
.titulo-cartao { font-family: var(--bagel); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.05; margin: 6px 0 10px; color: var(--papel); }
.escuro-txt { color: var(--tinta) !important; }

/* 02 · canal: o cartão grande */
.cartao-canal { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--grafite); border-radius: 18px; }
.canal-thumb { border-radius: 18px 0 0 18px; overflow: hidden; }
.canal-thumb { background: var(--tinta); }
.canal-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.canal-texto { padding: 30px 32px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.canal-texto p { color: var(--cinza); margin: 0 0 22px; }

/* 03 · ferramentas: cartões de papel */
.grade-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cartao-papel { display: flex; flex-direction: column; align-items: flex-start; background: var(--papel); color: var(--tinta); border-radius: 18px; padding: 26px; }
.cartao-topo { display: flex; align-items: center; width: 100%; margin-bottom: 2px; }
.cartao-topo .pequeno { color: #5c5c5c; }
.icone3d { width: 88px; height: 88px; object-fit: contain; }
.icone-provisorio { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 20px; background: var(--grafite2); outline: 4px solid var(--verde); outline-offset: -8px; font-family: var(--bagel); color: var(--papel); font-size: 22px; }
.cartao-desc { color: #3d3d3d; margin: 0 0 16px; }
.beneficio { display: inline-block; background: var(--verde); color: var(--tinta); font-weight: 700; font-size: 17px; padding: 6px 12px; border-radius: 4px; margin: 0 0 20px; }
.cartao-papel .botao-tinta { margin-top: auto; }

/* o painel escuro no topo de cada cartão de ferramenta, com a coisa selecionada (o gesto do canal) */
.painel { position: relative; width: 100%; height: 250px; background: var(--grafite2); border-radius: 12px; margin-bottom: 18px; display: grid; place-items: center; overflow: hidden; }
.painel .selecao { outline-width: 3px; }
.painel img { height: 200px; width: auto; }
.painel .icone-grande { height: 170px; width: 170px; object-fit: contain; }
.selecao-pequena .alca { width: 13px; height: 13px; border-width: 3px; }
.selecao-pequena .a1 { left: -8px; top: -8px; } .selecao-pequena .a3 { right: -8px; top: -8px; } .selecao-pequena .a6 { left: -8px; bottom: -8px; } .selecao-pequena .a8 { right: -8px; bottom: -8px; }
.no-painel { position: absolute; left: 14px; bottom: 12px; }
.painel-duplo .no-painel { left: auto; right: 14px; }
.painel-duplo { display: flex; align-items: center; justify-content: center; gap: 22px; }
.painel-cota { position: relative; width: 44px; height: 3px; background: var(--cinza); }
.painel-cota::before, .painel-cota::after { content: ""; position: absolute; top: -7px; width: 3px; height: 17px; background: var(--cinza); }
.painel-cota::before { left: 0; } .painel-cota::after { right: 0; }
.painel .painel-foto { height: 220px; width: auto; }
.icone-provisorio.grande { width: 150px; height: 150px; font-size: 64px; border-radius: 30px; outline-width: 6px; outline-offset: -12px; }
.cartao-papel .cartao-topo .icone3d, .cartao-papel .cartao-topo .icone-provisorio { width: 64px; height: 64px; font-size: 18px; border-radius: 16px; }

/* 04 · tutoriais */
.cartao-tutorial { display: flex; align-items: center; gap: 22px; background: var(--grafite); border-radius: 18px; padding: 22px 26px; }
.cartao-tutorial .icone3d { flex: none; }
.tutorial-texto { flex: 1; min-width: 0; }
.tutorial-texto p { color: var(--cinza); margin: 0; }
.cartao-tutorial .pequeno { color: var(--verde); }

/* ---------- rodapé fino ---------- */
.rodape { max-width: var(--largura); margin: 0 auto; padding: 28px 20px 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pequeno-nome { font-size: 20px; }
.rodape-links { display: flex; gap: 4px; font-size: 13px; }
.rodape-links a { color: var(--cinza); padding: 6px 10px; border-radius: 4px; }
.rodape-links a:hover { background: var(--grafite2); color: var(--papel); }

/* ---------- seleção de texto e barra de rolagem ---------- */
::selection { background: var(--verde); color: var(--tinta); }
.heroi ::selection { background: var(--tinta); color: var(--verde); }
html { scrollbar-color: #3A3A3A var(--tinta); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tinta); }
::-webkit-scrollbar-thumb { background: #3A3A3A; border: 3px solid var(--tinta); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--verde); }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .heroi-dentro { grid-template-columns: 1fr; gap: 44px; padding: 44px 20px 60px; }
  .heroi-imagem { order: -1; }
  .heroi-foto { width: min(260px, 62vw); }
  .cota { width: min(260px, 62vw); }
  .cartao-canal { grid-template-columns: 1fr; }
  .canal-texto { padding: 24px 22px 26px; }
  .grade-cartoes { grid-template-columns: 1fr; }
  .secao { padding-top: 56px; }
  .barra-links a { padding: 8px 8px; font-size: 12px; }
}
@media (max-width: 480px) {
  .painel { height: 210px; }
  .painel-duplo { gap: 14px; }
  .painel .icone-grande, .icone-provisorio.grande { width: 104px; height: 104px; font-size: 44px; border-radius: 22px; outline-width: 5px; outline-offset: -10px; }
  .painel .painel-foto { height: 180px; }
  .painel-cota { width: 26px; }
  .cartao-papel { padding: 18px; }
  .canal-texto .botao-verde, .cartao-papel .botao-tinta { width: 100%; justify-content: center; }
  .barra-links { display: none; }
  .cartao-tutorial { padding: 18px; gap: 14px; }
  .cartao-tutorial .icone3d { width: 64px; height: 64px; }
  .heroi-bio { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- páginas de tutorial ---------- */
.heroi-simples { grid-template-columns: 1fr; padding-bottom: 56px; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.passo-n { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: var(--tinta); font-family: var(--bagel); font-size: 26px; }
.passos .titulo-cartao { font-size: clamp(24px, 3vw, 30px); margin-top: 0; }