/*
 * Marca do Isótopo — átomo animado e nome em Sora.
 * Use as funções de includes/marca.php para gerar o HTML.
 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&display=swap');

:root { --marca-acento: #0891B2; }
html[data-theme="dark"], .marca-fundo-escuro { --marca-acento: #22D3EE; }

/* Átomo */
.marca-atomo { display: inline-block; flex: none; width: var(--marca-s, 40px); height: var(--marca-s, 40px); line-height: 0; }
.marca-atomo img { width: 100%; height: 100%; display: block; }
.marca-auto .marca-p-escuro { display: none; }
html[data-theme="dark"] .marca-auto .marca-p-escuro { display: block; }
html[data-theme="dark"] .marca-auto .marca-p-claro { display: none; }

/* Nome */
.marca-nome { font-family: 'Sora', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; }
/* Acento do "ó" na cor dos elétrons: uma cópia do "ó" recortada só na altura do acento */
.marca-o { position: relative; display: inline-block; line-height: 1; }
.marca-o > span { display: block; }
.marca-o-acento { position: absolute; inset: 0; color: var(--marca-acento); clip-path: inset(0 0 calc(100% - .26em) 0);
    user-select: none; pointer-events: none; }
html[data-theme="dark"] .marca-o-acento, .marca-fundo-escuro .marca-o-acento { text-shadow: 0 0 .18em rgba(34, 211, 238, .55); }

/* Conjunto átomo + nome (+ subtítulo) */
.marca { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; color: inherit; }
.marca:hover { color: inherit; }
.marca-textos { display: flex; flex-direction: column; min-width: 0; }
.marca-sub { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--t-mu, #8b93a7); margin-top: 4px; white-space: nowrap; }
.marca-coluna { flex-direction: column; gap: 10px; }