/* Homepage: comunicacao institucional junto da Voxi e mockups do produto (2026-09-29,
   pedido do Miguel e do Tomas). Computador (.hd, desenho do Ricardo) e telemovel
   (.m-only, apresentacao de app): «Como funciona a Voxi» e «Como se estuda na Dioscope»
   (e, no telemovel, a faixa de parceiros no separador Voxi) com ecras de telemovel desenhados em HTML (sem capturas: nitidos,
   leves e sem dados reais). Prefixo vt-. Os ecras sao decorativos (aria-hidden): o texto
   de cada passo esta' fora deles. */

/* ================= Ecra de telemovel (comum) =================
   Tudo em em: o tamanho do telemovel vem do font-size do .vt-tel. */
.vt-tel {
  --vt-navy: #0c2c3d; --vt-ink-2: #3b4d5e; --vt-ink-3: #5d6f81; --vt-azul: #245fcf;
  --vt-azul-claro: #e8f0fd; --vt-linha: #e3e9f1; --vt-esq: #dfe6ef;
  position: relative; flex: none; width: 19em; aspect-ratio: 9 / 19; margin: 0;
  padding: .55em; border-radius: 2.6em; background: #0c2c3d;
  box-shadow: 0 1.6em 3.2em -1.4em rgba(12,44,61,.45), inset 0 0 0 .12em rgba(255,255,255,.08);
  font-family: Poppins, system-ui, -apple-system, sans-serif; color: var(--vt-navy); line-height: 1.35;
  -webkit-user-select: none; user-select: none;
}
.vt-tel::before { /* camara */
  content: ""; position: absolute; z-index: 2; top: 1.05em; left: 50%; transform: translateX(-50%);
  width: 5.2em; height: 1.1em; border-radius: 1em; background: #0c2c3d;
}
.vt-ecra {
  position: relative; height: 100%; overflow: hidden; border-radius: 2.1em; background: #f5f8fc;
  display: flex; flex-direction: column;
}
.vt-topo {
  display: flex; align-items: center; gap: .55em; padding: 2.6em 1.1em .7em;
  background: #fff; border-bottom: 1px solid var(--vt-linha); font-size: .92em; font-weight: 600;
}
.vt-topo img { width: 1.5em; height: 1.5em; }
.vt-topo small { margin-left: auto; font-size: .78em; font-weight: 500; color: var(--vt-ink-3); }
.vt-corpo { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: .9em .9em 0; min-height: 0; }
.vt-rot { font-size: .62em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-azul); }
.vt-tit { font-size: .95em; font-weight: 600; line-height: 1.25; }
.vt-meta { font-size: .7em; color: var(--vt-ink-3); }
.vt-cartao { background: #fff; border: 1px solid var(--vt-linha); border-radius: 1em; padding: .8em .85em; display: grid; gap: .35em; }
/* linhas-esqueleto (texto que nao interessa ler) */
.vt-l { display: block; height: .5em; border-radius: .3em; background: var(--vt-esq); }
.vt-l--80 { width: 80%; } .vt-l--60 { width: 60%; } .vt-l--90 { width: 92%; } .vt-l--45 { width: 45%; } .vt-l--70 { width: 70%; }
.vt-l--azul { background: #c9d9f6; }
.vt-linhas { display: grid; gap: .45em; }
/* Voxi: conversa */
.vt-eu { align-self: flex-end; max-width: 82%; padding: .65em .8em; border-radius: 1em 1em .3em 1em; background: var(--vt-azul); color: #fff; font-size: .74em; line-height: 1.4; }
.vt-voxi { align-self: stretch; }
.vt-fontes { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .25em; }
.vt-fonte { display: inline-flex; align-items: center; gap: .3em; padding: .3em .55em; border-radius: 1em; background: var(--vt-azul-claro); color: var(--vt-azul); font-size: .6em; font-weight: 600; }
.vt-fonte::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .5; }
.vt-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.vt-chip { padding: .45em .7em; border: 1px solid var(--vt-linha); border-radius: 1em; background: #fff; font-size: .64em; font-weight: 500; color: var(--vt-ink-2); }
.vt-caixa {
  margin: auto .8em 1em; display: flex; align-items: center; gap: .6em; padding: .55em .55em .55em .9em;
  border: 1px solid #cfdbea; border-radius: 1.4em; background: #fff; box-shadow: 0 .5em 1.2em -.8em rgba(12,44,61,.35);
  font-size: .72em; color: var(--vt-ink-3);
}
.vt-caixa b { margin-left: auto; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--vt-azul); position: relative; }
.vt-caixa b::after { content: ""; position: absolute; inset: 0; margin: auto; width: .7em; height: .7em; border: solid #fff; border-width: .18em .18em 0 0; transform: translateX(-.1em) rotate(45deg); }
.vt-cursor { display: inline-block; width: .1em; height: 1.1em; margin-left: .1em; vertical-align: -.2em; background: var(--vt-azul); animation: vt-piscar 1.1s steps(1) infinite; }
@keyframes vt-piscar { 50% { opacity: 0; } }
.vt-sugestao { display: grid; grid-template-columns: 2.4em 1fr; gap: .2em .7em; align-items: center; }
.vt-sugestao i { grid-row: span 2; width: 2.4em; height: 2.4em; border-radius: .7em; background: var(--vt-azul-claro); position: relative; }
.vt-sugestao i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: .45em 0 .45em .7em; border-color: transparent transparent transparent var(--vt-azul); transform: translateX(.1em); }
.vt-sugestao i.vt-ico-doc::after { width: .8em; height: 1em; border: .15em solid var(--vt-azul); border-radius: .15em; transform: none; }
.vt-botao { margin: .2em 0 1em; padding: .7em; border-radius: 1.2em; background: var(--vt-azul); color: #fff; text-align: center; font-size: .72em; font-weight: 600; }
/* Estudo: video, resumo, questoes, protocolo */
.vt-video { position: relative; aspect-ratio: 16 / 9; border-radius: .9em; overflow: hidden;
  background: radial-gradient(60% 80% at 30% 20%, #3d74d8 0%, transparent 70%), linear-gradient(135deg, #0c2c3d, #1c4f9c); }
.vt-video::before { content: ""; position: absolute; inset: 0; margin: auto; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255,255,255,.92); }
.vt-video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: .5em 0 .5em .8em; border-color: transparent transparent transparent var(--vt-azul); transform: translateX(.15em); }
.vt-barra { height: .35em; border-radius: .3em; background: var(--vt-esq); overflow: hidden; }
.vt-barra span { display: block; height: 100%; width: 62%; background: var(--vt-azul); border-radius: inherit; }
.vt-lista { display: grid; gap: .5em; }
.vt-item { display: grid; grid-template-columns: 1.3em 1fr auto; gap: .6em; align-items: center; font-size: .7em; }
.vt-item i { width: 1.3em; height: 1.3em; border-radius: 50%; border: .15em solid var(--vt-esq); }
.vt-item i.vt-feito { border-color: #2f9e5f; background: #2f9e5f; position: relative; }
.vt-item i.vt-feito::after { content: ""; position: absolute; left: .32em; top: .12em; width: .3em; height: .55em; border: solid #fff; border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.vt-item small { color: var(--vt-ink-3); }
.vt-destaque { border-left: .25em solid var(--vt-azul); background: var(--vt-azul-claro); border-radius: 0 .7em .7em 0; padding: .7em .8em; display: grid; gap: .45em; }
.vt-destaque .vt-l { background: #c9d9f6; }
.vt-pdf { align-self: flex-start; padding: .25em .55em; border-radius: .4em; background: #fdecec; color: #b3261e; font-size: .6em; font-weight: 700; letter-spacing: .05em; }
.vt-opcoes { display: grid; gap: .45em; }
.vt-opcao { display: grid; grid-template-columns: 1.6em 1fr; gap: .6em; align-items: center; padding: .6em .7em; border: 1px solid var(--vt-linha); border-radius: .8em; background: #fff; }
.vt-opcao b { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font-size: .6em; background: #eef2f7; color: var(--vt-ink-2); }
.vt-opcao--certa { border-color: #2f9e5f; background: #eef8f2; }
.vt-opcao--certa b { background: #2f9e5f; color: #fff; }
.vt-abas { display: flex; gap: 1em; border-bottom: 1px solid var(--vt-linha); font-size: .66em; font-weight: 600; color: var(--vt-ink-3); padding: 0 .1em; }
.vt-abas span { padding: .5em 0; }
.vt-abas .vt-aba-on { color: var(--vt-azul); box-shadow: inset 0 -.2em 0 var(--vt-azul); }
.vt-arvore { display: grid; justify-items: center; gap: .9em; padding: .4em 0; }
.vt-no { width: 70%; padding: .6em; border-radius: .7em; background: #fff; border: 1px solid var(--vt-linha); display: grid; gap: .35em; position: relative; }
.vt-no--raiz { background: var(--vt-azul-claro); border-color: #c9d9f6; }
.vt-ramos { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; width: 100%; }
.vt-ramos .vt-no { width: auto; }
.vt-arvore .vt-no + .vt-ramos { position: relative; }
.vt-arvore .vt-no--raiz::after { content: ""; position: absolute; left: 50%; bottom: -.9em; height: .9em; border-left: 1px dashed #b7c6d8; }

/* ================= Computador (dentro de .hd) ================= */
.hd .vt-voxi, .hd .vt-estudo { min-height: 0; }
.hd .vt-cab { display: grid; gap: calc(1 * var(--hd-u)); max-width: calc(48 * var(--hd-u)); margin-bottom: calc(3.5 * var(--hd-u)); }
.hd .vt-cab .hd-lead { max-width: calc(40 * var(--hd-u)); }
.hd .vt-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2.5 * var(--hd-u)); align-items: start; }
.hd .vt-estudo .vt-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(2 * var(--hd-u)); }
.hd .vt-passo { display: grid; justify-items: center; gap: calc(1.4 * var(--hd-u)); text-align: center; }
.hd .vt-passo .vt-tel { font-size: calc(.92 * var(--hd-u)); }
.hd .vt-estudo .vt-passo .vt-tel { font-size: calc(.8 * var(--hd-u)); }
.hd .vt-passo h3 { font-size: calc(1.25 * var(--hd-u)); font-weight: 500; letter-spacing: -.02em; }
.hd .vt-passo p { font-size: calc(.95 * var(--hd-u)); line-height: 1.55; color: var(--hd-ink-2); max-width: calc(19 * var(--hd-u)); }
.hd .vt-num { display: inline-grid; place-items: center; width: calc(2 * var(--hd-u)); height: calc(2 * var(--hd-u)); border-radius: 50%; border: 1px solid var(--hd-line-2); font-size: calc(.8 * var(--hd-u)); font-weight: 600; color: var(--hd-blue-soft); margin-right: calc(.5 * var(--hd-u)); vertical-align: middle; }
.hd .vt-nota { margin-top: calc(2.5 * var(--hd-u)); font-size: calc(.8 * var(--hd-u)); color: var(--hd-ink-3); text-align: center; }
@media (max-width: 1023px) {
  .hd .vt-passos, .hd .vt-estudo .vt-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(4 * var(--hd-u)); }
}

/* ================= Telemovel (.m-only; apresentacao de app) ================= */
.vt-m { padding: 34px 0 30px; border-top: 1px solid #e6ecf3; background: #fff; }
.vt-m .wrap { padding-left: 20px; padding-right: 20px; }
.vt-m h2 { margin: 6px 0 8px; font-size: 1.4rem; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--navy, #152b3b); }
.vt-m .vt-intro { margin: 0 0 18px; color: #405866; font-size: .95rem; line-height: 1.55; }
.vt-m .eyebrow { font-size: .7rem; }
/* carrossel de ecras: desliza na horizontal, um passo de cada vez */
.vt-carrossel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 20px 14px; margin: 0 -20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vt-carrossel::-webkit-scrollbar { display: none; }
.vt-carrossel > li { list-style: none; flex: none; width: 74%; max-width: 280px; scroll-snap-align: center; display: grid; justify-items: center; gap: 12px; text-align: center; }
.vt-carrossel .vt-tel { font-size: 10.5px; }
.vt-carrossel h3 { margin: 4px 0 0; font-size: 1rem; font-weight: 600; color: var(--navy, #152b3b); }
.vt-carrossel p { margin: 0; font-size: .86rem; line-height: 1.5; color: #405866; }
.vt-m .vt-num-m { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: #e8eefd; color: #244f9d; font-size: .72rem; font-weight: 700; vertical-align: 1px; }
.vt-m .vt-nota { margin: 12px 0 0; font-size: .74rem; color: #5d6f81; text-align: center; }
/* O que fazemos: cartoes com mini-ecra */
.vt-oque { display: grid; gap: 12px; margin: 0; padding: 0; }
.vt-oque li { list-style: none; }
.vt-oque a { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 14px; border: 1px solid #dfe7f5; border-radius: 16px; background: #f9fbff; color: var(--navy, #152b3b); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vt-oque .vt-tel { font-size: 4px; width: 19em; justify-self: center; box-shadow: 0 8px 16px -10px rgba(12,44,61,.5); }
.vt-oque .vt-mini { height: 96px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.vt-oque-txt strong { display: block; font-size: 1rem; }
.vt-oque-desc { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: #405866; }
.vt-oque-txt em { display: inline-block; margin-top: 6px; font-style: normal; font-size: .8rem; font-weight: 600; color: #244f9d; }

/* Separadores da apresentacao de app (app.css esconde tudo o que nao e' a Voxi no
   separador Voxi, com !important): aqui entram a faixa de parceiros e as seccoes vt- de
   cada separador. Este ficheiro carrega depois do app.css e com mais especificidade. */
.vt-so-cursos, .vt-so-voxi { display: none; }
html.site-app[data-site-tab="voxi"] body #conteudo > section.vt-so-voxi,
html.site-app[data-site-tab="voxi"] body #conteudo > section.partners-top { display: block !important; }
html.site-app[data-site-tab="cursos"] body #conteudo > section.vt-so-cursos { display: block !important; }
html:not(.site-app) .vt-so-voxi, html:not(.site-app) .vt-so-cursos { display: block; }
/* no separador Voxi, os parceiros vem depois de «Como funciona» (ordem no HTML) */
html.site-app[data-site-tab="voxi"] body #conteudo > section.partners-top { padding-top: 30px; border-top: 1px solid #e6ecf3; }

@media (prefers-reduced-motion: reduce) { .vt-cursor { animation: none; } }

.hd .vt-passos { list-style: none; margin: 0; padding: 0; }
.vt-carrossel { list-style: none; }
.vt-barra--30 span { width: 30%; }
.vt-rot--cinza { color: var(--vt-ink-3); }
.vt-l--tit { height: .85em; }
.vt-botao--fim { margin-top: auto; }
/* tema escuro da homepage: a moldura navy do telemovel nao se perde no fundo */
:root:not([data-hd-theme="light"]) .hd .vt-tel { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 1.6em 3.2em -1.4em rgba(0,0,0,.6); }