/* Visual Up · Biblioteca do Design System v1.0
   Depende de tokens.css. Prefixo .vu-
   Regra que atravessa o ficheiro: o âmbar marca AÇÃO ou RISCO, nunca ornamento.
   A linha de 2px é a corda: divide, ancora, numera. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--vu-papel);
  color:var(--vu-tinta);
  font-family:var(--vu-corpo);
  font-size:var(--vu-fs-base);
  line-height:var(--vu-lh-corpo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--vu-acao);color:var(--vu-acao-sobre)}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:var(--vu-linha-peso) solid var(--vu-foco);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------------------------------------------------------------- estrutura */
.vu-wrap{width:100%;max-width:var(--vu-wrap);margin-inline:auto;padding-inline:var(--vu-e5)}
@media (min-width:768px){.vu-wrap{padding-inline:var(--vu-e6)}}
.vu-secao{padding-block:var(--vu-e9)}
@media (min-width:768px){.vu-secao{padding-block:var(--vu-e10)}}
.vu-texto{max-width:var(--vu-wrap-texto)}
.vu-escuro{background:var(--vu-basalto-900);color:var(--vu-basalto-100)}
.vu-escuro .vu-lede{color:var(--vu-basalto-300)}
.vu-escuro .vu-etiqueta{color:var(--vu-acao)}

/* A grelha de fachada: fundo estrutural, nunca decorativo por si só */
.vu-fachada{
  background-image:
    repeating-linear-gradient(90deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 96px);
}

/* ------------------------------------------------------------- tipografia */
.vu-display,.vu-h1,.vu-h2,.vu-h3{
  font-family:var(--vu-display);
  font-weight:800;
  letter-spacing:var(--vu-tracking-display);
  line-height:var(--vu-lh-titulo);
  margin:0;
  text-wrap:balance;
}
.vu-display{font-size:var(--vu-fs-display);line-height:var(--vu-lh-apertada);text-transform:uppercase}
.vu-h1{font-size:var(--vu-fs-3xl)}
.vu-h2{font-size:var(--vu-fs-2xl)}
.vu-h3{font-size:var(--vu-fs-xl);font-weight:700}
.vu-lede{
  font-size:var(--vu-fs-md);
  line-height:1.5;
  color:var(--vu-tinta-2);
  margin:var(--vu-e4) 0 0;
  max-width:var(--vu-wrap-texto);
  text-wrap:pretty;
}
.vu-etiqueta{
  font-family:var(--vu-tecnica);
  font-size:var(--vu-fs-xs);
  letter-spacing:var(--vu-tracking-etiqueta);
  text-transform:uppercase;
  color:var(--vu-ambar-texto);
  margin:0;
}
.vu-numero{font-family:var(--vu-tecnica);font-variant-numeric:tabular-nums}
.vu-p{margin:var(--vu-e4) 0 0;max-width:var(--vu-wrap-texto);text-wrap:pretty}
.vu-p a{text-decoration-thickness:2px;text-underline-offset:3px}

/* --------------------------------------------------------------- a linha */
/* O elemento estrutural do sistema. Uma corda de 2px. */
.vu-linha-v{width:var(--vu-linha-peso);background:var(--vu-acao);flex:none}
.vu-linha-h{height:var(--vu-linha-peso);background:var(--vu-linha);border:0;margin:0}
.vu-ancora{
  position:relative;
  padding-left:var(--vu-e5);
}
.vu-ancora::before{
  content:"";
  position:absolute;
  left:0;top:.35em;bottom:.1em;
  width:var(--vu-linha-peso);
  background:var(--vu-acao);
}

/* --------------------------------------------------------------- cabeçalho */
.vu-topo{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--vu-papel) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vu-linha);
}
.vu-escuro .vu-topo,.vu-topo.vu-escuro{
  background:color-mix(in srgb,var(--vu-basalto-900) 88%,transparent);
  border-bottom-color:rgb(255 255 255 / .12);
}
.vu-topo-linha{
  display:flex;align-items:center;gap:var(--vu-e4);
  min-height:60px;
}
.vu-topo-marca{display:flex;align-items:center;gap:var(--vu-e3);text-decoration:none;flex:none}
.vu-topo-marca svg{height:26px;width:auto}
.vu-topo-cap{
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:var(--vu-tracking-etiqueta);text-transform:uppercase;
  color:var(--vu-tinta-3);margin-left:auto;text-align:right;
}
.vu-voltar{
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--vu-tinta-2);
  display:inline-flex;align-items:center;gap:var(--vu-e2);
  min-height:44px;
}
.vu-voltar:hover{color:var(--vu-tinta)}

/* ---------------------------------------------------------------- botões */
.vu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--vu-e2);
  min-height:48px;padding:0 var(--vu-e6);
  border-radius:var(--vu-raio-pilula);
  border:var(--vu-linha-peso) solid transparent;
  font-family:var(--vu-corpo);font-size:var(--vu-fs-base);font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:transform var(--vu-t-rapido) var(--vu-descida),
             background-color var(--vu-t-rapido) linear,
             border-color var(--vu-t-rapido) linear,
             color var(--vu-t-rapido) linear;
}
.vu-btn:active{transform:translateY(1px)}
.vu-btn--primario{background:var(--vu-acao);color:var(--vu-acao-sobre)}
.vu-btn--primario:hover{background:var(--vu-ambar-600)}
.vu-btn--secundario{background:transparent;color:var(--vu-tinta);border-color:var(--vu-linha-forte)}
.vu-btn--secundario:hover{border-color:var(--vu-tinta);background:var(--vu-papel-2)}
.vu-btn--fantasma{background:transparent;color:var(--vu-tinta-2);padding-inline:var(--vu-e3)}
.vu-btn--fantasma:hover{color:var(--vu-tinta);background:var(--vu-papel-2)}
.vu-btn[disabled],.vu-btn[aria-disabled=true]{
  opacity:.45;pointer-events:none;
}
.vu-escuro .vu-btn--secundario{color:var(--vu-basalto-100);border-color:rgb(255 255 255 / .28)}
.vu-escuro .vu-btn--secundario:hover{border-color:var(--vu-basalto-100);background:rgb(255 255 255 / .06)}

/* ---------------------------------------------------------------- cartões */
.vu-cartao{
  background:var(--vu-papel);
  border:1px solid var(--vu-linha);
  border-radius:var(--vu-raio-cartao);
  padding:var(--vu-e6);
  position:relative;
  transition:border-color var(--vu-t-base) var(--vu-descida),
             transform var(--vu-t-base) var(--vu-descida);
}
.vu-cartao--ligacao:hover{border-color:var(--vu-linha-forte);transform:translateY(-2px)}
.vu-cartao__num{
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-sm);
  color:var(--vu-ambar-texto);letter-spacing:.1em;
}
.vu-cartao__titulo{margin:var(--vu-e3) 0 0;font-family:var(--vu-display);
  font-size:var(--vu-fs-md);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.vu-cartao__texto{margin:var(--vu-e2) 0 0;color:var(--vu-tinta-2);font-size:var(--vu-fs-sm)}
/* a corda que desce pelo lado do cartão, e só acende quando o cartão é o foco */
.vu-cartao--ligacao::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:var(--vu-linha-peso);
  background:var(--vu-acao);transform:scaleY(0);transform-origin:top;
  transition:transform var(--vu-t-base) var(--vu-descida);
}
.vu-cartao--ligacao:hover::before,.vu-cartao--ligacao:focus-within::before{transform:scaleY(1)}

/* ---------------------------------------------------------------- grelhas */
.vu-grid{display:grid;gap:var(--vu-e5)}
.vu-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.vu-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.vu-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}

/* -------------------------------------------------------------- estatística */
.vu-estat{border-top:var(--vu-linha-peso) solid var(--vu-acao);padding-top:var(--vu-e4)}
.vu-estat__valor{
  font-family:var(--vu-display);font-weight:800;
  font-size:var(--vu-fs-2xl);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.vu-estat__rotulo{
  margin:var(--vu-e2) 0 0;font-family:var(--vu-tecnica);
  font-size:var(--vu-fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--vu-tinta-3);
}
.vu-escuro .vu-estat__rotulo{color:var(--vu-basalto-300)}

/* -------------------------------------------------------------- testemunho */
.vu-testemunho{border-left:var(--vu-linha-peso) solid var(--vu-acao);padding-left:var(--vu-e5);margin:0}
.vu-testemunho blockquote{margin:0;font-size:var(--vu-fs-md);line-height:1.45}
.vu-testemunho figcaption{
  margin-top:var(--vu-e4);font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--vu-tinta-3);
}

/* ---------------------------------------------------------------- campos */
.vu-campo{display:block;margin-bottom:var(--vu-e5)}
.vu-campo__rotulo{
  display:block;font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--vu-tinta-2);
  margin-bottom:var(--vu-e2);
}
.vu-campo input,.vu-campo textarea,.vu-campo select{
  width:100%;min-height:48px;padding:var(--vu-e3) var(--vu-e4);
  font-family:inherit;font-size:var(--vu-fs-base);color:var(--vu-tinta);
  background:var(--vu-papel);
  border:1px solid var(--vu-linha-forte);border-radius:var(--vu-raio-cartao);
  transition:border-color var(--vu-t-rapido) linear;
}
.vu-campo textarea{min-height:120px;padding-top:var(--vu-e3);resize:vertical}
.vu-campo input:hover,.vu-campo textarea:hover{border-color:var(--vu-tinta-3)}
.vu-campo__ajuda{margin:var(--vu-e2) 0 0;font-size:var(--vu-fs-sm);color:var(--vu-tinta-3)}
.vu-campo--erro input,.vu-campo--erro textarea{border-color:var(--vu-ambar-800)}
.vu-campo__erro{
  margin:var(--vu-e2) 0 0;font-size:var(--vu-fs-sm);color:var(--vu-ambar-texto);
  display:flex;gap:var(--vu-e2);align-items:flex-start;
}

/* --------------------------------------------------------------- distintivo */
.vu-distintivo{
  display:inline-flex;align-items:center;gap:var(--vu-e2);
  padding:var(--vu-e1) var(--vu-e3);
  border:1px solid var(--vu-linha-forte);border-radius:var(--vu-raio-pilula);
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--vu-tinta-2);
}
.vu-distintivo--acao{background:var(--vu-acao);border-color:var(--vu-acao);color:var(--vu-acao-sobre)}

/* ---------------------------------------------------------------- tabela */
.vu-tabela-envolve{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vu-tabela{width:100%;border-collapse:collapse;font-size:var(--vu-fs-sm);min-width:520px}
.vu-tabela th,.vu-tabela td{text-align:left;padding:var(--vu-e3) var(--vu-e4);
  border-bottom:1px solid var(--vu-linha);vertical-align:top}
.vu-tabela th{
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vu-tinta-3);
  border-bottom-color:var(--vu-linha-forte);
}
.vu-tabela code{font-family:var(--vu-tecnica);font-size:.9em}

/* ------------------------------------------------- notas de regra (do DS) */
.vu-nota{
  border-left:var(--vu-linha-peso) solid var(--vu-linha-forte);
  padding:var(--vu-e2) 0 var(--vu-e2) var(--vu-e5);
  margin:var(--vu-e6) 0 0;
}
.vu-nota--faz{border-left-color:var(--vu-acao)}
.vu-nota--naofaz{border-left-color:var(--vu-basalto-400)}
.vu-nota__titulo{
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--vu-e2);
  color:var(--vu-tinta-3);
}
.vu-nota--faz .vu-nota__titulo{color:var(--vu-ambar-texto)}
.vu-nota p{margin:0;color:var(--vu-tinta-2)}
/* Sobre basalto, o âmbar-texto e a tinta-2 são escuros sobre escuro.
   A nota tem de virar do avesso, senão desaparece. */
.vu-escuro .vu-nota{border-left-color:rgb(255 255 255 / .25)}
.vu-escuro .vu-nota--faz{border-left-color:var(--vu-acao)}
.vu-escuro .vu-nota__titulo{color:var(--vu-basalto-400)}
.vu-escuro .vu-nota--faz .vu-nota__titulo{color:var(--vu-acao)}
.vu-escuro .vu-nota p{color:var(--vu-basalto-300)}
.vu-escuro .vu-testemunho figcaption{color:var(--vu-basalto-400)}
.vu-escuro .vu-legenda{color:var(--vu-basalto-400)}
.vu-escuro .vu-tabela th{color:var(--vu-basalto-400);border-bottom-color:rgb(255 255 255 / .28)}
.vu-escuro .vu-tabela td{border-bottom-color:rgb(255 255 255 / .14)}
.vu-escuro .vu-distintivo{color:var(--vu-basalto-200);border-color:rgb(255 255 255 / .28)}
.vu-escuro .vu-distintivo--acao{color:var(--vu-acao-sobre);border-color:var(--vu-acao)}

/* ------------------------------------------- amostras (páginas do próprio DS) */
.vu-amostra{
  border:1px solid var(--vu-linha);border-radius:var(--vu-raio-cartao);
  padding:var(--vu-e6);background:var(--vu-papel-2);
  display:flex;flex-wrap:wrap;gap:var(--vu-e4);align-items:center;
}
.vu-amostra--escura{background:var(--vu-basalto-900);border-color:transparent}
.vu-amostra--blocos{display:block}
.vu-legenda{
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--vu-tinta-3);margin:var(--vu-e3) 0 0;
}
.vu-swatch{border-radius:var(--vu-raio-cartao);overflow:hidden;border:1px solid var(--vu-linha)}
.vu-swatch__cor{height:76px}
.vu-swatch__info{
  padding:var(--vu-e3);background:var(--vu-papel);
  font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);line-height:1.5;
}
.vu-swatch__info b{display:block;font-weight:400;color:var(--vu-tinta)}
.vu-swatch__info span{color:var(--vu-tinta-3)}

/* ---------------------------------------------------------------- rodapé */
.vu-rodape{border-top:1px solid var(--vu-linha);padding-block:var(--vu-e8)}
.vu-rodape__linha{
  display:flex;flex-wrap:wrap;gap:var(--vu-e5);justify-content:space-between;
  align-items:flex-end;
}
.vu-rodape small{font-family:var(--vu-tecnica);font-size:var(--vu-fs-xs);
  letter-spacing:.08em;color:var(--vu-tinta-3);line-height:1.8}

/* --------------------------------------------------------------- movimento */
/* Rapel: entra de cima, trava e assenta. Nunca salta de baixo, nunca elástico. */
@keyframes vu-desce{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}
.vu-desce{animation:vu-desce var(--vu-t-longo) var(--vu-descida) both}
.vu-desce-1{animation-delay:60ms}
.vu-desce-2{animation-delay:140ms}
.vu-desce-3{animation-delay:220ms}
.vu-desce-4{animation-delay:300ms}
.vu-desce-5{animation-delay:380ms}

@keyframes vu-corda{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.vu-corda{transform-origin:top;animation:vu-corda var(--vu-t-longo) var(--vu-descida) both}

@media (prefers-reduced-motion:reduce){
  .vu-desce,.vu-corda{animation:none}
  *{transition-duration:1ms !important}
}

/* ------------------------------------------------------------- utilitários */
.vu-so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.vu-saltar{
  position:absolute;left:var(--vu-e4);top:-100px;z-index:100;
  background:var(--vu-acao);color:var(--vu-acao-sobre);
  padding:var(--vu-e3) var(--vu-e5);border-radius:var(--vu-raio-pilula);
  font-weight:600;text-decoration:none;
}
.vu-saltar:focus{top:var(--vu-e4)}