/* Nome "Tina" — DM Serif Display.
   - Texto no HTML: <span class="tina">Tina</span> (visível sem JS). O assets/wordmark.js troca
     cada um por um SVG inline com a coruja no i (classe .wm-t; texto original em .sr-only).
   - Header e capa: SVG estático no HTML (.wm / .wm-hdr / .wm-hero).
   Unidade dos SVGs: 1000 unidades = 1em de desenho. Largura e altura são explícitas em em
   (sem width:auto) para não depender de como cada navegador resolve SVG só com viewBox.
   A base do viewBox é a linha de base da fonte: vertical-align: baseline. */

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* texto de reserva (sem JS) */
.tina{
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.05em;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}

/* "Tina" trocado por SVG: altura de capital ≈ 1,05x a do texto ao redor (Geist: 0,71em;
   DM Serif: 0,66em → 1,15em de desenho por 1em de texto). Sem espaço extra, sem mexer no line-height. */
.tina.wm-t{
  font-size: inherit;
  line-height: inherit;
  display: inline;
  white-space: nowrap;
}
.wm-t svg{
  display: inline-block;
  vertical-align: baseline;
  overflow: visible;
  max-width: none;
  margin-top: -0.25em;      /* a altura do SVG não aumenta a linha */
  flex: none;
}
.wm-t svg.wm-svg-owl{ height: 1.058em; width: 2.31em; }
.wm-t svg.wm-svg-dot{ height: 0.957em; width: 2.262em; }

/* ---------- wordmark estático (header, capa, login) ---------- */
.wm{ display: inline-block; position: relative; line-height: 0; color: inherit; }
.wm svg{ display: inline-block; vertical-align: baseline; overflow: visible; max-width: none; flex: none; }
.wm-hdr svg{ height: 0.83em; width: 1.98em; }
.logo .wm-hdr{ font-size: 1.45em; }
.wm-auth{ font-size: 44px; }
.wm-hero svg{ height: 1.161em; width: 2.529em; }

/* "Tina," indivisível na capa: a vírgula nunca vai sozinha pra linha de baixo */
.wm-nb{ white-space: nowrap; }
/* resto do título da capa ("sua auxiliar financeira"): menor que o nome, mesma linha de base */
.wm-rest{ font-size: 0.84em; }

/* traço esmeralda sob o nome (só na capa; elemento HTML separado do SVG) */
.wm-line{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 0.05em;
  border-radius: 999px;
  background: var(--emerald);
  transform-origin: left center;
}

/* Estados iniciais da animação — só existem quando o JS ligou as classes (sem JS, ou com
   prefers-reduced-motion, tudo aparece no estado final). */
html.wm-hdr-pending .wm-hdr[data-wm-anim] .wm-l,
html.wm-hdr-pending .wm-hdr[data-wm-anim] .wm-dot{ opacity: 0; }
html.wm-js .wm-hero .wm-l,
html.wm-js .wm-hero .wm-owl,
html.wm-js .wm-hero .wm-line{ opacity: 0; }
.wm-t.wm-pend .wm-l,
.wm-t.wm-pend .wm-owl,
.wm-t.wm-pend .wm-dot{ opacity: 0; }
/* até o script trocar o texto pelo SVG, não pisca o texto de reserva */
html.tina-fade-js .tina:not(.wm-t){ opacity: 0; }

@media print{
  .wm-t.wm-pend .wm-l,
  .wm-t.wm-pend .wm-owl,
  .wm-t.wm-pend .wm-dot,
  html.wm-hdr-pending .wm-hdr[data-wm-anim] .wm-l,
  html.wm-hdr-pending .wm-hdr[data-wm-anim] .wm-dot{ opacity: 1 !important; }
}