/* Dica própria (data-dica): no lugar do tooltip nativo do navegador. Ver js/dica.js. */
.dica {
    position: fixed; left: 0; top: 0; z-index: 2147483000;
    max-width: min(320px, calc(100vw - 16px));
    padding: 7px 12px 8px;
    background: var(--laca, #13201a);
    border: 1px solid var(--ouro, #e8c46a);
    box-shadow: 0 0 0 3px var(--tinta, #0c1611), 0 10px 26px rgba(0, 0, 0, .5);
    color: var(--creme, #f6ead0);
    font: italic 500 15px/1.35 Cormorant, Georgia, serif;
    letter-spacing: .02em; text-align: center; text-wrap: balance;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .16s ease, visibility 0s linear .16s;
}
.dica--aberta { opacity: 1; visibility: visible; transition: opacity .16s ease; }
.dica::after { /* a seta aponta para o controle; --seta é o deslocamento horizontal */
    content: ''; position: absolute; left: var(--seta, 50%); width: 8px; height: 8px;
    background: var(--laca, #13201a); border: solid var(--ouro, #e8c46a); border-width: 0 1px 1px 0;
    transform: translateX(-50%) rotate(45deg); top: 100%; margin-top: -4px;
}
.dica--abaixo::after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -4px; transform: translateX(-50%) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .dica, .dica--aberta { transition: none; } }