:root { /* Proporção real da imagem: 1920 x 1520 */ --ratio: calc(1920 / 1520); --green-edge: #128A30; --green-bottom: #00511E; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { min-height: 100vh; min-height: 100dvh; /* Mesma cor do fundo da arte, para preencher qualquer borda */ background: var(--green-bottom); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* A arte preenche a LARGURA INTEIRA da tela (imagem completa, sem bordas verdes nas laterais). Se ficar mais alta que a tela, surge rolagem vertical. Os botões em % seguem alinhados. */ .bio { position: relative; width: 100%; line-height: 0; } /* Por padrão (PC) mostra a versão horizontal e esconde a vertical */ .bio--mobile { display: none; } .bio__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } /* Botões invisíveis. Posição e tamanho em % via variáveis no HTML, então ficam SEMPRE no mesmo lugar sobre a arte, em qualquer tamanho de tela. */ .hotspot { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); display: block; border-radius: 12px; cursor: pointer; /* invisível por padrão */ background: transparent; transition: background 0.15s ease, box-shadow 0.15s ease; } /* Botões 100% invisíveis: nada aparece ao passar o mouse. */ .hotspot:hover, .hotspot:focus-visible { background: transparent; box-shadow: none; outline: none; } /* MODO AJUSTE: adicione a classe "debug" ao (ou rode toggleHotspots() no console) para enxergar as áreas clicáveis e afinar as posições. */ body.debug .hotspot { background: rgba(255, 0, 0, 0.30); box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.9); } /* No celular (tela estreita): esconde a versão horizontal e mostra a vertical (bio-mobile.png), que preenche a largura inteira. */ @media (max-width: 768px) { .bio--desktop { display: none; } .bio--mobile { display: block; } }