:root { --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* as telas dos conceitos: cartões grandes, no tom do produto, que se montam em etapas */
.uk { border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.uk-av { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--terciaria); color: var(--texto-2); }
.uk-av svg { width: 14px; height: 14px; }
.uk-av-ia { background: #000; box-shadow: inset 0 0 0 1px var(--linha); }
.uk-av-ia img { width: 18px; height: 18px; filter: invert(1); }
.uk-entra { opacity: 0; transform: translateY(14px); animation: uk-entra .5s cubic-bezier(.2, .7, .2, 1) var(--t) both paused; }
[data-anima].visivel .uk-entra, [data-anima].visivel .uk-entra * { animation-play-state: running; }
@keyframes uk-entra { to { opacity: 1; transform: none; } }
@keyframes uk-some { to { opacity: 0; } }
@keyframes uk-surge { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.uni-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--texto); }
.uni-link:hover .bloco-link-seta { color: var(--texto); transform: translateX(2px); }

/* ------------------------------------------------------------------ os materiais, com capas desenhadas */
.uni-materiais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 24px; }
.uni-material { display: flex; flex-direction: column; gap: 8px; }
.uni-material:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--texto-3); }
.umt { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; margin-bottom: 8px; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 12px; perspective: 900px; transition: border-color .2s; }
.uni-material:hover .umt { border-color: #3A3A3F; }
.umt-livro { background: radial-gradient(80% 90% at 50% 100%, rgba(84, 162, 255, .16), transparent 70%), var(--superficie-suave); }
.umt-papel { background: radial-gradient(80% 90% at 50% 100%, rgba(255, 139, 26, .13), transparent 70%), var(--superficie-suave); }
.umt-leque { background: radial-gradient(80% 90% at 50% 100%, rgba(5, 223, 114, .1), transparent 70%), var(--superficie-suave); }
/* o livro do Guia, em pé, girado; endireita quando o mouse passa */
.umt-capa { display: flex; flex-direction: column; justify-content: space-between; height: 76%; aspect-ratio: 3 / 4; padding: 14px 14px 12px 18px; border-radius: 3px 7px 7px 3px;
  background: linear-gradient(150deg, #22314F 0%, #121A2B 70%); color: var(--texto);
  box-shadow: inset 5px 0 6px -2px rgba(0, 0, 0, .55), inset 7px 0 0 -6px rgba(255, 255, 255, .25), 18px 22px 40px rgba(0, 0, 0, .55);
  transform: rotateY(-22deg) rotateX(6deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.uni-material:hover .umt-capa { transform: rotateY(-8deg) rotateX(2deg) translateY(-4px); }
.umt-capa img { width: 18px; height: auto; }
.umt-capa b { font-size: 19px; line-height: 21px; letter-spacing: -0.4px; font-weight: 600; }
.umt-capa small { display: block; margin-top: 6px; font-size: 9px; line-height: 12px; color: rgba(250, 250, 250, .6); }
/* a folha do manifesto, em papel claro, um pouco torta */
.umt-folha { display: flex; flex-direction: column; gap: 6px; height: 82%; aspect-ratio: 3 / 4; padding: 14px 14px; border-radius: 3px; background: #F4F2EC; color: #1A1A1C;
  box-shadow: 0 22px 40px rgba(0, 0, 0, .5); transform: rotate(-4deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.uni-material:hover .umt-folha { transform: rotate(-1deg) translateY(-4px); }
.umt-folha small { font-size: 7px; line-height: 9px; letter-spacing: .14em; text-transform: uppercase; color: #8A8A8F; }
.umt-folha b { font-family: var(--serifa); font-size: 15px; line-height: 16px; font-weight: 600; }
.umt-folha q { margin: 4px 0 2px; padding-left: 6px; border-left: 2px solid var(--aviso); font-family: var(--serifa); font-size: 9px; line-height: 12px; font-style: italic; quotes: none; }
.umt-folha i { display: block; height: 3px; border-radius: 2px; background: #D9D6CE; }
.umt-folha i:nth-of-type(2n) { width: 86%; }
.umt-folha i:last-child { width: 60%; }
/* os apêndices: três folhas em leque (glossário, checklist e planilha), que abrem mais com o mouse */
.umt-leque .umt-f { position: absolute; display: flex; flex-direction: column; gap: 5px; height: 74%; aspect-ratio: 3 / 4; padding: 11px; border-radius: 3px;
  background: #F4F2EC; color: #1A1A1C; box-shadow: 0 16px 30px rgba(0, 0, 0, .45); transform-origin: 50% 110%;
  transform: rotate(var(--r)) translateX(var(--x)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.uni-material:hover .umt-f { transform: rotate(calc(var(--r) * 1.6)) translateX(calc(var(--x) * 1.5)); }
.umt-f small { font-size: 8px; line-height: 10px; font-weight: 600; letter-spacing: .04em; color: #1A1A1C; }
.umt-f i { display: block; height: 3px; border-radius: 2px; background: #D9D6CE; }
.umt-f i:nth-of-type(odd) { width: 70%; }
.umt-chk { display: flex; align-items: center; gap: 4px; }
.umt-chk::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1.5px; border: 1px solid #8A8A8F; }
.umt-chk.ok::before { border-color: #05A85A; background: #05A85A; }
.umt-chk i { flex: 1; }
.umt-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.umt-grade span { height: 7px; background: #E6E3DB; }
.umt-grade span:nth-child(-n+3) { background: #CFCBC1; }

/* ------------------------------------------------------------------ o fecho: o convite, a frase em arco e o aviso */
/* a linha de cima fecha a seção anterior (ele, 17/10) */
.ufim { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 120px; padding: 120px 24px 0; border-top: 1px solid var(--linha); text-align: center; }
.ufim h2 { font-size: 48px; line-height: 56px; letter-spacing: -1.4px; font-weight: 500; }
.ufim .botoes { justify-content: center; }
.uarco { display: block; width: 100%; height: auto; margin-top: 72px; overflow: hidden; }
.uarco text { fill: var(--texto); font: 500 64px/1 var(--fonte); letter-spacing: -1.8px; }
.uaviso { max-width: 640px; margin: 0 auto; padding: 24px 24px 40px; text-align: center; font-size: 12px; line-height: 18px; color: var(--texto-3); }

@media (max-width: 767px) {
  .ufim h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.8px; }
  .uni-materiais { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 16px; }
  .ufim { margin-top: 72px; padding: 80px 16px 0; }
  .uarco { margin-top: 48px; }
  .uaviso { padding: 16px 16px 32px; }
}

/* ------------------------------------------------------------------ o topo das páginas de estudantes e de professores
   Como na Harvey, o formulário vem logo no topo; ao lado (área "lado"), o crachá ou a ementa, que mostram o que a
   pessoa digita (site.js, form[data-mailto]). */
.ual { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "txt lado" "form lado";
  column-gap: 72px; row-gap: 40px; padding: 88px 32px 128px; border-bottom: 1px solid var(--linha);
  background: radial-gradient(45% 60% at 84% 34%, rgba(84, 162, 255, .09), transparent 70%); }
.ual::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask: radial-gradient(48% 62% at 82% 36%, #000, transparent); mask: radial-gradient(48% 62% at 82% 36%, #000, transparent); }
.ual-txt { grid-area: txt; display: flex; flex-direction: column; gap: 20px; animation: u-surge .8s ease .1s both; }
.ual-rotulo { display: flex; flex-wrap: wrap; gap: 8px; }
.ual-rotulo a { color: var(--texto); }
.ual-rotulo a:hover { text-decoration: underline; text-decoration-color: var(--texto-3); text-underline-offset: 3px; }
.ual-rotulo span { color: var(--texto-3); }
.ual-titulo { max-width: 640px; font-size: 56px; line-height: 60px; letter-spacing: -1.8px; font-weight: 500; text-wrap: balance; }
.ual-txt .lead { max-width: 580px; }

.ual-form { grid-area: form; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--linha); border-radius: 16px;
  background: var(--superficie); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); scroll-margin-top: calc(var(--barra) + 24px); animation: u-surge .8s ease .3s both; }
.ual-form-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ual-form-cab h2 { font-size: 20px; line-height: 28px; letter-spacing: -0.3px; font-weight: 500; }
.ual-form-cab span { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.ual-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ual-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.ual-campo input, .ual-campo select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo);
  color: var(--texto); font: inherit; font-size: 15px; letter-spacing: -0.2px; transition: border-color .15s, box-shadow .15s; }
.ual-campo input::placeholder { color: #5C5C61; }
.ual-campo input:focus, .ual-campo select:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px rgba(84, 162, 255, .18); }
.ual-campo select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background: var(--fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2386868B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; }
.ual-papeis { min-width: 0; margin: 0; padding: 0; border: 0; }
.ual-papeis legend { margin-bottom: 8px; padding: 0; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.ual-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ual-chip { position: relative; display: flex; }
.ual-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ual-chip span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border: 1px solid var(--linha); border-radius: 999px;
  font-size: 13px; line-height: 18px; color: var(--texto-2); transition: border-color .15s, background-color .15s, color .15s; }
.ual-chip span::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--texto-3); border-radius: 4px; transition: .15s; }
.ual-chip:hover span { border-color: #3A3A3F; color: var(--texto); }
.ual-chip input:checked + span { border-color: rgba(84, 162, 255, .55); background: var(--acao-fundo); color: var(--texto); }
.ual-chip input:checked + span::before { border-color: var(--acao);
  background: var(--acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ual-chip input:focus-visible + span { outline: 2px solid var(--acao); outline-offset: 2px; }
.ual-enviar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding-top: 4px; }
.ual-enviar .btn { padding: 12px 18px; }
.ual-nota { flex: 1; min-width: 240px; font-size: 12px; line-height: 18px; color: var(--texto-3); }
.ual-nota a { color: var(--texto-2); text-decoration: underline; text-decoration-color: var(--texto-3); text-underline-offset: 3px; }

@keyframes u-surge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ual-txt, .ual-form { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1024px) {
  .ual { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
  .ual-titulo { font-size: 46px; line-height: 50px; letter-spacing: -1.4px; }
}
/* até 900 px, uma coluna só: o texto, o lado (crachá ou ementa) e o formulário */
@media (max-width: 900px) {
  .ual { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "lado" "form"; row-gap: 28px; }
  .ual::before { -webkit-mask: radial-gradient(70% 40% at 50% 46%, #000, transparent); mask: radial-gradient(70% 40% at 50% 46%, #000, transparent); }
}
@media (max-width: 767px) {
  .ual { padding: 44px 16px 104px; }
  .ual-titulo { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .ual-form { padding: 20px 16px; }
  .ual-campos { grid-template-columns: minmax(0, 1fr); }
  .ual-chip span { font-size: 12.5px; }
}

/* o crachá: a fita, a presilha e o cartão */
.ual-cracha { grid-area: lado; align-self: start; display: flex; justify-content: center; margin-top: -88px; }
.ucr { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0;
  animation: ucr-balanca 3.4s ease-in-out .15s both, ucr-respira 8s ease-in-out 3.6s infinite; }
.ucr-fita { position: relative; width: 30px; height: 176px; overflow: hidden;
  background: linear-gradient(90deg, #08080A, #1F1F25 45%, #131317 60%, #08080A);
  box-shadow: inset 2px 0 0 rgba(84, 162, 255, .6), inset -2px 0 0 rgba(84, 162, 255, .6); }
.ucr-fita span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); writing-mode: vertical-rl; white-space: nowrap;
  font-size: 8.5px; line-height: 1; letter-spacing: .3em; font-weight: 600; color: rgba(250, 250, 250, .4); }
.ucr-presilha { position: relative; z-index: 2; width: 44px; height: 24px; margin-top: -3px; border-radius: 5px 5px 9px 9px;
  background: linear-gradient(180deg, #ECECF0 0%, #9C9CA3 55%, #D4D4D9 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 -2px 0 rgba(0, 0, 0, .22); }
.ucr-presilha::after { content: ""; position: absolute; left: 50%; top: 18px; width: 12px; height: 22px; margin-left: -6px; border: 3px solid #B5B5BB; border-radius: 6px; }
.ucr-cartao { position: relative; z-index: 1; width: 332px; margin-top: 8px; padding: 0 22px 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px;
  background: linear-gradient(165deg, #24242A 0%, #151518 55%, #101013 100%); color: var(--texto);
  box-shadow: 0 50px 90px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ucr-cartao::before { content: ""; display: block; width: 56px; height: 10px; margin: 14px auto 16px; border-radius: 5px; background: var(--fundo);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .07); }
.ucr-cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 45% at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, .13), transparent 70%); transition: background-position .3s; }
.ucr-faixa { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #54A2FF, #A78BFA 50%, #05DF72); }
.ucr-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.ucr-cab img { width: 22px; height: auto; }
.ucr-cab span { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: .01em; }
.ucr-id { display: flex; align-items: center; gap: 14px; padding: 18px 0 14px; }
.ucr-foto { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 14px;
  background: linear-gradient(135deg, #2C3B5A, #192131); color: #D6E6FF; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ucr-foto svg { width: 24px; height: 24px; color: rgba(214, 230, 255, .55); }
.ucr-id > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ucr-nome { font-size: 23px; line-height: 27px; letter-spacing: -0.5px; font-weight: 600; overflow-wrap: anywhere; }
.ucr-linha { font-size: 14px; line-height: 19px; color: var(--texto-2); overflow-wrap: anywhere; }
.ucr-cartao .vazio { opacity: .45; }
.ucr-papeis { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.ucr-papeis span { padding: 1px 9px; border: 1px solid rgba(84, 162, 255, .3); border-radius: 6px; background: var(--acao-fundo); color: var(--acao); font-size: 11px; line-height: 18px; }
.ucr-papeis span[hidden] { display: none; }
.ucr-pe { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.ucr-pe small { display: block; font-size: 10px; line-height: 12px; color: var(--texto-3); }
.ucr-pe b { font-size: 13px; line-height: 18px; font-weight: 500; }
.ucr-holo { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; border-radius: 10px; overflow: hidden; }
.ucr-holo::before { content: ""; position: absolute; inset: -30%; opacity: .55; filter: saturate(.8);
  background: conic-gradient(from var(--ang, 0deg), #54A2FF, #A78BFA, #05DF72, #FFD166, #FF8B1A, #54A2FF); transition: transform .5s; }
.ucr-holo img { position: relative; width: 16px; height: auto; opacity: .85; }
.ucr-codigo { display: block; height: 20px; margin-top: 14px; border-radius: 2px; opacity: .35;
  background: repeating-linear-gradient(90deg, #FAFAFA 0 2px, transparent 2px 4px, #FAFAFA 4px 5px, transparent 5px 8px, #FAFAFA 8px 11px, transparent 11px 12px, #FAFAFA 12px 13px, transparent 13px 17px); }
@keyframes ucr-balanca { 0% { transform: rotate(9deg); } 22% { transform: rotate(-6deg); } 42% { transform: rotate(3.4deg); } 62% { transform: rotate(-1.7deg); }
  80% { transform: rotate(.6deg); } 100% { transform: rotate(0deg); } }
@keyframes ucr-respira { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(.8deg); } }

/* ------------------------------------------------------------------ as três formas de participar, em linhas alternadas */
.uf3 { display: flex; flex-direction: column; padding-bottom: 40px; }
.uf3-linha { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 56px; padding: 32px 24px; scroll-margin-top: calc(var(--barra) + 24px); }
.uf3-linha:nth-child(even) .uf3-vis { order: 2; }
.uf3-vis { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 36px 32px; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 16px; background: radial-gradient(100% 80% at 50% 0%, rgba(var(--matiz), .08), transparent 60%), var(--superficie-suave); }
.uf3-txt { display: flex; flex-direction: column; gap: 14px; }
.uf3-rot { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: rgb(var(--matiz)); }
.uf3-rot::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.uf3-dl { display: grid; gap: 14px; margin: 8px 0 0; padding-top: 18px; border-top: 1px dashed var(--linha); }
.uf3-dl dt { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.uf3-dl dd { max-width: 440px; margin: 2px 0 0; font-size: 15px; line-height: 23px; letter-spacing: -0.2px; color: var(--texto); }

/* 1. a escada das trilhas: três degraus; o "Você" sobe um a um e cada degrau acende quando ele chega */
.uesc { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; width: 100%; max-width: 500px; height: 350px; padding-top: 44px; }
.uesc-d { display: flex; flex-direction: column; gap: 3px; height: calc(42% + var(--n) * 29%); padding: 14px 12px 12px; border: 1px solid var(--linha); border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, var(--terciaria), var(--superficie) 85%); opacity: 0; transform: translateY(16px);
  animation: uk-entra .5s cubic-bezier(.2, .7, .2, 1) calc(var(--n) * .12s) both paused, uesc-acende .4s ease calc(1s + var(--n) * 1.07s) forwards paused; }
.uesc-d span { font-size: 11px; line-height: 14px; color: var(--texto-3); }
.uesc-d b { font-size: 14px; line-height: 18px; letter-spacing: -0.2px; font-weight: 500; color: var(--texto); }
.uesc-d small { align-self: flex-start; margin-top: auto; padding: 1px 7px; border: 1px solid var(--linha); border-radius: 6px; font-size: 11px; line-height: 16px; color: var(--texto-2); white-space: nowrap; }
.uesc-voce { position: absolute; left: 16.67%; bottom: calc((100% - 44px) * .42 + 10px); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
  border-radius: 999px; background: var(--texto); color: var(--fundo); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45); transform: translateX(-50%); opacity: 0; animation: uesc-sobe 2.9s cubic-bezier(.45, 0, .3, 1) .7s both paused; }
.uesc-voce i { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acao); color: #fff; }
.uesc-voce svg { width: 9px; height: 9px; }
.uesc.visivel * { animation-play-state: running; }
@keyframes uesc-acende { to { border-color: rgba(84, 162, 255, .55); box-shadow: inset 0 2px 0 var(--acao), 0 0 0 4px rgba(84, 162, 255, .07); } }
@keyframes uesc-sobe {
  0% { opacity: 0; left: 16.67%; bottom: calc((100% - 44px) * .42 + 34px); }
  10%, 30% { opacity: 1; left: 16.67%; bottom: calc((100% - 44px) * .42 + 10px); }
  40% { left: 33.33%; bottom: calc((100% - 44px) * .71 + 32px); }
  50%, 64% { left: 50%; bottom: calc((100% - 44px) * .71 + 10px); }
  74% { left: 66.67%; bottom: calc(100% - 26px); }
  84%, 100% { opacity: 1; left: 83.33%; bottom: calc(100% - 34px); } }

/* 2. o console do Lab: o comando é digitado, as observações chegam e o contador sobe */
@property --ucn-n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.ucn { width: 100%; max-width: 520px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; line-height: 20px; }
.ucn-cab { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linha); font-size: 11.5px; line-height: 16px; color: var(--texto-3); }
.ucn-pts { display: flex; gap: 6px; }
.ucn-pts i { width: 9px; height: 9px; border-radius: 50%; background: var(--terciaria); }
.ucn-corpo { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.ucn-cmd { display: flex; gap: 8px; margin-bottom: 4px; color: var(--texto); }
.ucn-cmd > span:first-child { color: #05DF72; }
.ucn-dig { width: 0; overflow: hidden; white-space: nowrap; animation: ucn-digita .9s steps(28, end) .3s forwards paused; }
.ucn-cursor { width: 7px; height: 15px; margin: 2px 0 0 -6px; background: var(--texto-2); animation: ucn-pisca .5s steps(1) 0s 3 paused, uk-some .1s 1.3s forwards paused; }
.ucn-l { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: var(--texto-2); opacity: 0; animation: uk-entra .3s ease var(--t) both paused; }
.ucn-l span:first-child { color: var(--texto-3); }
.ucn-l span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.ucn-l em { padding: 0 7px; border-radius: 5px; font-style: normal; font-size: 11px; line-height: 18px; }
.ucn-ok { color: #05DF72; background: rgba(3, 46, 21, .7); }
.ucn-nao { color: var(--texto-3); background: var(--terciaria); }
.ucn-al { color: var(--aviso); background: var(--aviso-fundo); }
.ucn-fim { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--linha); color: var(--texto-2); opacity: 0; animation: uk-entra .3s ease 2.6s both paused; }
.ucn-fim > span:first-child { color: #05DF72; }
.ucn-conta { color: var(--texto); counter-reset: ucn var(--ucn-n); animation: ucn-conta 1.4s cubic-bezier(.2, .7, .2, 1) 2.7s forwards paused; }
.ucn-conta::after { content: counter(ucn); }
.ucn.visivel * { animation-play-state: running; }
@keyframes ucn-digita { to { width: 28ch; } }
@keyframes ucn-pisca { 50% { opacity: 0; } }
@keyframes ucn-conta { to { --ucn-n: 48; } }

/* 3. o mural do embaixador: o cartaz com tiras para destacar (uma já foi, outra cai) e os lembretes */
.umu { position: relative; width: 100%; max-width: 460px; height: 340px; }
.umu > * { position: absolute; transform: rotate(var(--r)); opacity: 0; animation: umu-prega .6s cubic-bezier(.2, .7, .2, 1) var(--t) both paused; }
/* o papel fica só no corpo e em cada tira: onde a tira foi destacada, o buraco fica vazio. A sombra é
   drop-shadow, que segue o recorte (a box-shadow desenharia o retângulo inteiro). */
.umu-cartaz { left: 4%; top: 18px; width: 62%; color: #1A1A1C; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .45)); transform-origin: 50% 0; }
.umu-papel { display: flex; flex-direction: column; gap: 6px; padding: 24px 18px 12px; border-radius: 3px 3px 0 0; background: #F4F2EC; }
.umu-cartaz small { font-size: 9px; line-height: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6B6B70; }
.umu-cartaz b { font-size: 23px; line-height: 24px; letter-spacing: -0.7px; font-weight: 700; }
.umu-cartaz p { font-family: var(--serifa); font-size: 13px; line-height: 17px; font-style: italic; color: #3A3A3E; }
.umu-org { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 10px; line-height: 14px; color: #3A3A3E; }
.umu-org img { width: 12px; height: auto; }
.umu-tiras { display: flex; }
.umu-tiras span { flex: 1; display: flex; align-items: center; height: 96px; padding: 8px 0; overflow: hidden; border-top: 1px dashed #B9B5AB; border-left: 1px dashed #C9C5BB; background: #F4F2EC;
  writing-mode: vertical-rl; font-size: 7.5px; line-height: 1; color: #4A4A4E; white-space: nowrap; }
.umu-tiras span:first-child { border-left: 0; border-bottom-left-radius: 3px; }
.umu-tiras span:last-child { border-bottom-right-radius: 3px; }
.umu-tiras .umu-falta { visibility: hidden; }
.umu-tiras .umu-cai { transform-origin: 50% 0; animation: umu-cai 1.1s cubic-bezier(.55, 0, .8, .3) 1.7s forwards paused; }
.umu-pino { position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFB066, #E0700C 55%, #8A3F02); box-shadow: 0 4px 6px rgba(0, 0, 0, .45); }
.umu-nota .umu-pino { background: radial-gradient(circle at 35% 35%, #9CCBFF, #2F6FD6 55%, #123C82); }
.umu-nota { right: 2%; width: 33%; padding: 20px 12px 14px; border-radius: 2px; background: #F2E3A8; color: #3A3320; box-shadow: 0 16px 28px rgba(0, 0, 0, .45);
  font-family: var(--serifa); font-size: 14px; line-height: 18px; font-style: italic; }
.umu-nota s { text-decoration: none; background: linear-gradient(#3A3320, #3A3320) no-repeat 0 55% / 0% 1.5px; animation: umu-risca .5s ease 2.4s forwards paused; }
.umu.visivel * { animation-play-state: running; }
@keyframes umu-prega { from { opacity: 0; transform: translateY(-16px) rotate(var(--r)) scale(1.04); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes umu-cai { 0% { transform: none; } 18% { transform: rotate(-9deg); } 100% { transform: translate(-14px, 190px) rotate(-40deg); opacity: 0; } }
@keyframes umu-risca { to { background-size: 100% 1.5px; } }

/* ------------------------------------------------------------------ o compromisso: o ciclo de 12 semanas
   --p (0 a 1) vem do site.js ([data-progresso]) e anda com a rolagem: as barras enchem, as semanas acendem
   e o cursor corre. Sem JavaScript ou com movimento reduzido, fica o ciclo inteiro (--p: 1). */
@property --ugt-s { syntax: "<integer>"; inherits: false; initial-value: 12; }
.ugt { --p: 1; --col: 270px; position: relative; margin: 0 24px; padding-bottom: 44px; overflow: hidden; border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie); }
.ugt-cab, .ugt-l { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); align-items: center; padding-right: 24px; }
.ugt-cab { padding-block: 14px; border-bottom: 1px solid var(--linha); font-size: 12px; line-height: 16px; color: var(--texto-3); }
.ugt-cab > span { padding: 0 24px; }
.ugt-sem, .ugt-fases, .ups { margin: 0; padding: 0; list-style: none; }
.ugt-sem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ugt-sem li { text-align: center; font-variant-numeric: tabular-nums; color: var(--texto); opacity: clamp(.3, var(--p) * 12 - var(--i) + .4, 1); }
.ugt-l { --f: clamp(0, (var(--p) * 12 - var(--a)) / (var(--b) - var(--a)), 1); min-height: 62px; }
.ugt-l + .ugt-l { border-top: 1px dashed var(--linha); }
.ugt-nome { display: flex; flex-direction: column; padding: 10px 24px; font-size: 15px; line-height: 20px; letter-spacing: -0.2px; color: var(--texto); opacity: calc(.42 + .58 * var(--f)); }
.ugt-nome small { font-size: 12px; line-height: 16px; letter-spacing: 0; color: var(--texto-3); }
.ugt-trilho { position: relative; align-self: stretch; min-height: 62px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), rgba(255, 255, 255, .045) calc(100% / 12 - 1px) calc(100% / 12)); }
.ugt-barra { position: absolute; top: 50%; left: calc(var(--a) / 12 * 100% + 2px); width: calc((var(--b) - var(--a)) / 12 * 100% - 4px); height: 26px; margin-top: -13px;
  overflow: hidden; border-radius: 7px; background: var(--terciaria); }
.ugt-barra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #2F6FD6, var(--acao)); transform: scaleX(var(--f)); transform-origin: left; }
.ugt-sobre { position: absolute; top: 0; bottom: 0; left: var(--col); right: 24px; pointer-events: none; }
.ugt-cursor { position: absolute; top: 0; bottom: 34px; left: calc(var(--p) * 100%); width: 1px; background: linear-gradient(180deg, rgba(84, 162, 255, .15), var(--acao));
  --ugt-s: clamp(1, var(--p) * 12 + .5, 12); counter-reset: ugt var(--ugt-s); }
.ugt-cursor::after { content: "Semana " counter(ugt); position: absolute; top: 100%; left: 0; margin-top: 8px; padding: 2px 8px; border-radius: 6px; background: var(--acao); color: #fff;
  font-size: 11px; line-height: 16px; font-weight: 500; font-style: normal; white-space: nowrap; transform: translateX(calc(var(--p) * -100%)); }
.ugt-outros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 20px 24px 0; font-size: 13px; line-height: 20px; color: var(--texto-3); }
.ugt-outros span + span { padding: 2px 10px; border: 1px solid var(--linha); border-radius: 999px; color: var(--texto-2); }

/* ------------------------------------------------------------------ o que o estudante leva: quatro telas de tipos diferentes */
.ubn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 24px; }
.ubn-item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie); }
.ubn-vis { position: relative; display: flex; align-items: center; justify-content: center; height: 290px; padding: 24px; overflow: hidden; border-bottom: 1px solid var(--linha);
  background: radial-gradient(90% 90% at 50% 100%, rgba(var(--matiz), .12), transparent 70%), var(--superficie-suave); }
.ubn-txt { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }

/* o certificado, com o selo que carimba */
.ucf { position: relative; width: 330px; max-width: 88%; aspect-ratio: 1.414; padding: 8px; border-radius: 3px; background: #F6F3EA; color: #1A1A1C;
  box-shadow: 0 26px 44px rgba(0, 0, 0, .5); transform: rotate(-2deg); animation: ucf-treme .25s ease 1s both paused; }
.ucf-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; padding: 10px 14px; border: 1px solid #D8D2C2;
  outline: 1px solid #E6E1D3; outline-offset: -5px; text-align: center; }
.ucf small { font-size: 7.5px; line-height: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6B6B70; }
.ucf b { font-family: var(--serifa); font-size: 20px; line-height: 24px; font-weight: 600; }
.ucf-trilha { font-size: 10px; line-height: 14px; color: #3A3A3E; }
.ucf-nome { margin-top: 6px; padding: 0 20px 2px; border-bottom: 1px solid #BDB7A8; font-family: var(--serifa); font-size: 16px; line-height: 20px; font-style: italic; color: #2A2A2E; }
.ucf-ass { display: flex; gap: 24px; margin-top: 12px; }
.ucf-ass span { width: 74px; padding-top: 3px; border-top: 1px solid #BDB7A8; font-size: 7.5px; line-height: 10px; letter-spacing: .06em; color: #6B6B70; }
.ucf-selo { position: absolute; right: 10px; bottom: 6px; width: 54px; height: auto; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
  animation: ucf-carimba .55s cubic-bezier(.3, .6, .3, 1.25) .5s both paused; }
.ucf.visivel, .ucf.visivel * { animation-play-state: running; }
@keyframes ucf-carimba { 0% { opacity: 0; transform: scale(2.2) rotate(-32deg); } 62% { opacity: 1; transform: scale(.9) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes ucf-treme { 0%, 100% { transform: rotate(-2deg); } 40% { transform: rotate(-2deg) translateY(2px) scale(.995); } }

/* o portfólio: a pasta e o relatório que sai dela */
.upf { position: relative; width: 300px; max-width: 84%; height: 188px; margin-top: 56px; }
.upf-fundo { position: absolute; inset: 0; border-radius: 4px 12px 12px 12px; background: #283043; }
.upf-fundo::before { content: ""; position: absolute; left: 0; top: -16px; width: 108px; height: 18px; border-radius: 8px 10px 0 0; background: #283043; }
.upf-doc { position: absolute; left: 8%; right: 8%; top: 12px; height: 196px; display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 0; border-radius: 3px;
  background: #F4F2EC; color: #1A1A1C; box-shadow: 0 -6px 22px rgba(0, 0, 0, .28); transform: translateY(40px);
  animation: upf-sai .8s cubic-bezier(.2, .7, .2, 1) .35s forwards paused; transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.ubn-item:hover .upf-doc { translate: 0 -10px; }
.upf-doc small { font-size: 8px; line-height: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6B6B70; }
.upf-doc b { font-size: 15px; line-height: 18px; letter-spacing: -0.3px; font-weight: 600; }
.upf-graf { width: 100%; height: auto; margin: 4px 0 2px; }
.upf-doc i { display: block; height: 3px; border-radius: 2px; background: #D9D6CE; }
.upf-doc i:nth-of-type(2) { width: 82%; }
.upf-frente { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 16px;
  border-radius: 6px 6px 12px 12px; background: linear-gradient(180deg, #3B4762, #2C354A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 40px rgba(0, 0, 0, .45);
  font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(250, 250, 250, .85); }
.upf-frente small { font-size: 10px; font-weight: 400; color: rgba(250, 250, 250, .5); }
.upf.visivel * { animation-play-state: running; }
@keyframes upf-sai { to { transform: translateY(-62px); } }

/* a mentoria: uma chamada de vídeo, com o mentor falando */
.uvc { width: 100%; max-width: 380px; overflow: hidden; opacity: 0; animation: uk-entra .5s cubic-bezier(.2, .7, .2, 1) .1s both paused; }
.uvc-cab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--linha); font-size: 12px; line-height: 16px; color: var(--texto-2); }
.uvc-rec { width: 7px; height: 7px; border-radius: 50%; background: #FF5A5F; animation: ucn-pisca 1.6s steps(1) infinite paused; }
.uvc-telas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.uvc-t { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(160deg, #1D2230, #121419); }
.uvc-t > small { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; line-height: 14px; color: rgba(250, 250, 250, .82); }
.uvc-av { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--terciaria); color: var(--texto-2); }
.uvc-av svg { width: 16px; height: 16px; }
.uvc-av img { width: 18px; height: auto; }
.uvc-fala { box-shadow: inset 0 0 0 2px rgba(84, 162, 255, .75); }
.uvc-fala .uvc-av { background: #000; animation: uvc-fala 1.4s ease-out infinite paused; }
.uvc-ondas { position: absolute; right: 9px; bottom: 8px; display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.uvc-ondas i { width: 3px; height: 100%; border-radius: 2px; background: var(--acao); transform-origin: bottom; animation: uvc-onda .9s ease-in-out infinite paused; }
.uvc-ondas i:nth-child(2) { animation-delay: -.3s; }
.uvc-ondas i:nth-child(3) { animation-delay: -.6s; }
.uvc-mudo { position: absolute; right: 8px; bottom: 7px; display: flex; color: #FF6B6B; }
.uvc-mudo svg { width: 12px; height: 12px; }
.uvc-ctl { display: flex; justify-content: center; gap: 10px; padding: 2px 0 12px; }
.uvc-ctl span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--terciaria); color: var(--texto-2); }
.uvc-ctl svg { width: 13px; height: 13px; }
.uvc-ctl .uvc-sair { background: #E5484D; color: #fff; }
.uvc-sair svg { transform: rotate(135deg); }
.uvc.visivel, .uvc.visivel * { animation-play-state: running; }
@keyframes uvc-fala { 0% { box-shadow: 0 0 0 0 rgba(84, 162, 255, .45); } 100% { box-shadow: 0 0 0 14px rgba(84, 162, 255, 0); } }
@keyframes uvc-onda { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* a comunidade: as notificações que chegam uma a uma */
.unt { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 370px; }
.unt-n { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(38, 38, 42, .9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-14px) scale(.97); animation: uk-entra .5s cubic-bezier(.2, .7, .2, 1) var(--t) both paused; }
.unt-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #000; box-shadow: inset 0 0 0 1px var(--linha); }
.unt-ic img { width: 15px; height: auto; }
.unt-n > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.unt-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--texto); }
.unt-n small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--texto-3); }
.unt-q { align-self: flex-start; font-size: 11px; line-height: 16px; color: var(--texto-3); }
.unt.visivel * { animation-play-state: running; }

/* ------------------------------------------------------------------ como funciona a seleção */
.ups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 24px; counter-reset: ups; }
.ups-p { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 26px; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie);
  opacity: 0; animation: uk-entra .5s cubic-bezier(.2, .7, .2, 1) var(--t) both paused; }
.ups-p::before { counter-increment: ups; content: counter(ups); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 8px;
  border: 1px solid var(--linha); border-radius: 50%; background: var(--fundo); font-size: 14px; line-height: 1; color: var(--texto); }
.ups-p + .ups-p::after { content: ""; position: absolute; left: -17px; top: 38px; width: 18px; border-top: 1px dashed var(--texto-3); }
.ups.visivel .ups-p { animation-play-state: running; }
.ups-acao { display: flex; padding: 28px 24px 0; }

@media (prefers-reduced-motion: reduce) {
  .ual-txt, .ual-form, .ucr, .uvc, .ups-p { animation: none !important; opacity: 1 !important; transform: none !important; }
  .uesc *, .ucn *, .umu *, .ucf, .ucf *, .upf *, .uvc *, .unt * { animation: none !important; opacity: 1 !important; }
  .uesc-d, .unt-n { transform: none !important; }
  .uesc-voce { left: 83.33%; bottom: calc(100% - 34px); }
  .ucn-dig { width: 28ch; }
  .ucn-cursor, .umu-cai { display: none; }
  .ucn-conta { --ucn-n: 48; }
  .upf-doc { transform: translateY(-62px); }
  .umu-nota s { background-size: 100% 1.5px; }
}
@media (max-width: 1024px) {
  .ucr-cartao { width: 280px; }
  .uf3-linha { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .uf3-linha:nth-child(even) .uf3-vis { order: 0; }
  .ubn { grid-template-columns: minmax(0, 1fr); }
}
/* até 900 px, o crachá desce para entre o texto e o formulário, com a fita curta */
@media (max-width: 900px) {
  .ual-cracha { margin-top: -8px; }
  .ucr-fita { height: 64px; -webkit-mask: linear-gradient(180deg, transparent, #000 75%); mask: linear-gradient(180deg, transparent, #000 75%); }
  .ucr-fita span { display: none; }
}
@media (max-width: 767px) {
  .ucr-cartao { width: 272px; }
  .uf3-linha { padding: 24px 16px; }
  .uf3-vis { min-height: 0; padding: 28px 16px; }
  .uesc { height: 320px; gap: 6px; }
  .uesc-d { padding: 10px 8px 9px; }
  .uesc-d b { font-size: 12px; line-height: 15px; }
  .uesc-d small { font-size: 10px; padding: 0 5px; }
  .ucn { font-size: 11.5px; }
  .ucn-l { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; }
  .umu { height: 330px; }
  .umu-cartaz b { font-size: 19px; line-height: 21px; }
  .umu-nota { font-size: 12.5px; line-height: 16px; padding: 18px 10px 12px; }
  .ugt { --col: 0px; margin: 0 16px; padding-bottom: 40px; }
  .ugt-cab, .ugt-l { grid-template-columns: minmax(0, 1fr); padding: 0 14px; }
  .ugt-cab { padding-block: 12px; }
  .ugt-cab > span { display: none; }
  .ugt-sem li { font-size: 10.5px; }
  .ugt-nome { padding: 12px 0 2px; font-size: 14px; line-height: 19px; }
  .ugt-trilho { min-height: 34px; }
  .ugt-barra { height: 16px; margin-top: -8px; border-radius: 5px; }
  .ugt-sobre { left: 14px; right: 14px; }
  .ugt-cursor { bottom: 32px; }
  .ugt-outros { padding: 16px 16px 0; }
  .ubn { padding: 0 16px; gap: 12px; }
  .ubn-vis { height: 250px; padding: 16px; }
  .ubn-txt { padding: 18px 16px 20px; }
  .ups { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 12px; }
  .ups-p + .ups-p::after { left: 37px; top: -13px; width: 0; height: 12px; border-top: 0; border-left: 1px dashed var(--texto-3); }
  .ups-acao { padding: 24px 16px 0; }
}