/* ═══════════════════════════════════════════════════════════════════
   UFVAI — Site institucional v6
   Camada de refino carregada DEPOIS de styles.css e v5.css.
   Escopo desta folha:
     1. i18n sem flash (detecção do navegador antes da primeira pintura)
     2. Controles do topo identificáveis (idioma, tema, menu)
     3. Conjunto de ícones refeito (traço uniforme, óptica corrigida)
     4. Painel de ajustes do hero (sliders rotulados, com valor)
     5. Foto do campus sem corte + animação
   Nada de estrutura/lógica é alterado aqui: só apresentação.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Idioma: evita pintar em PT para quem chega em EN/ES/FR/ZH ──── */
html.i18n-pending body { opacity: 0; }
body { transition: background-color .35s ease, color .35s ease, opacity .22s ease; }
html.i18n-ready body { opacity: 1; }

/* ── 2. Ícones: grade 24, traço 1.7, pontas arredondadas ───────────── */
.ico {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ico--sm { width: 15px; height: 15px; }
.ico--lg { width: 20px; height: 20px; }
.ico--fill { fill: currentColor; stroke: none; }

/* ── 3. Controles do topo ─────────────────────────────────────────── */
.topbar__actions { gap: 10px; }

/* Base comum: pílula de altura 40, borda visível, fundo sólido.
   Antes eram círculos translúcidos sem rótulo — difíceis de identificar. */
.ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.ctrl:hover {
  border-color: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 8px 20px -12px rgba(201, 162, 39, .75);
}
.ctrl:active { transform: translateY(1px); }
.ctrl[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-ink); }
.ctrl .ico { color: currentColor; }

/* Rótulo textual: aparece quando há espaço. O código (PT/EN/…) sai de cena
   junto para não repetir a informação. */
.ctrl__text { display: none; }
.ctrl__code {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  transition: color .2s ease, border-color .2s ease;
}
.ctrl:hover .ctrl__code { color: var(--gold-ink); border-color: var(--gold); }
.ctrl__chev {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .65;
  transition: transform .22s ease;
}
.lang-switch.open .ctrl__chev { transform: rotate(180deg); }
.lang-switch.open .ctrl { border-color: var(--gold); color: var(--gold-ink); }

/* Com 620px de largura já cabem os nomes — é o que torna os controles
   identificáveis sem hover (o código de 2 letras é só o fallback). */
@media (min-width: 620px) {
  .ctrl__text { display: inline; }
  .ctrl__code { display: none; }
}
@media (max-width: 619px) {
  .ctrl { gap: 6px; padding: 0 9px; }
}

/* Botão de tema: mesma pílula; o ícone troca com o data-theme do <html>. */
.ctrl--theme .icon-moon { display: none; }
[data-theme="dark"] .ctrl--theme .icon-moon { display: block; }
[data-theme="dark"] .ctrl--theme .icon-sun { display: none; }
.ctrl--theme .ctrl__text { min-width: 0; }

/* Menu de idiomas: cabeçalho com a detecção + linhas com marca de seleção. */
.lang-menu {
  min-width: 246px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
}
.lang-menu__hint {
  margin: 2px 4px 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  color: var(--body);
  font-size: .72rem;
  line-height: 1.45;
}
.lang-menu__hint b { color: var(--gold-ink); font-weight: 700; }
.lang-menu__hint[hidden] { display: none; }
.lang-menu__title {
  padding: 2px 8px 6px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lang-menu button[role="menuitemradio"] {
  position: relative;
  padding: 9px 10px 9px 34px;
  font-size: .87rem;
}
.lang-menu button[role="menuitemradio"]::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 15px; height: 15px;
  margin-top: -7.5px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color .2s ease;
}
.lang-menu button[role="menuitemradio"][aria-checked="true"]::before {
  border-color: var(--gold);
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 4px, transparent 4.5px);
}
/* Nome do idioma: Inter não traz CJK — o fallback evita "caixinhas". */
.lang-menu .lang-native {
  font-weight: 500;
  font-family: var(--font), "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}
.lang-menu .lang-code { margin-left: auto; }

/* Hambúrguer redesenhado: dois traços espessos viram X ao abrir. */
.nav-toggle {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface);
  gap: 5px;
}
.nav-toggle span { width: 17px; height: 1.8px; border-radius: 2px; background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* ── 4. Ajustes do hero: painel rotulado (antes: 4 quadrados sem nome) ─ */
.hctrl {
  position: absolute;
  z-index: 6;
  right: 26px;
  bottom: 26px;
  display: flex;
  flex-direction: column-reverse; /* painel abre PARA CIMA do botão */
  align-items: flex-end;
  gap: 10px;
}
.hctrl__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 15px 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 238, .30);
  background: rgba(9, 24, 21, .62);
  color: #F7F5EE;
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}
.hctrl__toggle .ico { width: 17px; height: 17px; color: #E7C766; }
.hctrl__toggle:hover,
.hctrl__toggle[aria-expanded="true"] {
  border-color: #E7C766;
  color: #FFF9E6;
  background: rgba(9, 24, 21, .84);
}
.hctrl__toggle[aria-expanded="true"] .hctrl__chev { transform: rotate(180deg); }
.hctrl__chev {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .7;
  transition: transform .22s ease;
}

.hctrl__panel {
  display: none;
  width: min(392px, calc(100vw - 36px));
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(231, 199, 102, .30);
  background: rgba(9, 24, 21, .90);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .72);
  transform-origin: bottom right;
}
.hctrl__panel.is-open {
  display: block;
  animation: hctrlIn .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes hctrlIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.hctrl__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(247, 245, 238, .12);
}
.hctrl__title {
  flex: 1;
  color: #F7F5EE;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hctrl__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 238, .22);
  background: transparent;
  color: #E7C766;
  font-family: var(--font);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.hctrl__reset:hover { border-color: #E7C766; background: rgba(231, 199, 102, .12); }
.hctrl__reset .ico { width: 13px; height: 13px; }
.hctrl__close {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 238, .22);
  background: transparent;
  color: #F7F5EE;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.hctrl__close:hover { border-color: #E7C766; background: rgba(231, 199, 102, .12); }
.hctrl__close .ico { width: 13px; height: 13px; }

.hctrl__row {
  display: grid;
  /* UMA linha horizontal por controle: ícone · nome · trilho · valor.
     (A v5 empilhava medidor vertical + rótulo; aqui tudo corre no eixo X.) */
  grid-template-columns: 30px minmax(58px, auto) minmax(88px, 1fr) 46px;
  grid-template-areas: "ico name range val";
  column-gap: 10px;
  row-gap: 0;
  align-items: center;
  /* anula a pílula quadrada da v5 (.hero__control: 42×42, overflow hidden) */
  width: auto;
  height: auto;
  min-height: 44px;
  overflow: visible;
  place-items: initial;
  cursor: default;
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  padding: 8px 8px;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.hctrl__row:hover,
.hctrl__row:focus-within {
  background: rgba(247, 245, 238, .06);
  border-color: rgba(231, 199, 102, .22);
}
/* a v5 "inchava" o quadro focado para 82px (medidor vertical) — aqui não */
.hctrl .hero__control:focus-within,
.hctrl .hero__control[data-expanded] {
  width: auto;
  transform: none;
  box-shadow: none;
  background: rgba(247, 245, 238, .06);
  border-color: rgba(231, 199, 102, .22);
}
.hctrl__ico {
  grid-area: ico;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(231, 199, 102, .22);
  background: rgba(231, 199, 102, .08);
  color: #E7C766;
}
.hctrl__ico .ico { width: 15px; height: 15px; }
.hctrl__name {
  grid-area: name;
  color: #F2F0E9;
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.hctrl__val {
  grid-area: val;
  color: #E7C766;
  font-size: .73rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-align: right;
  white-space: nowrap;
}

/* Slider nativo, visível e com preenchimento dourado (--progress vem do hero.js) */
.hctrl .hero__control-range {
  grid-area: range;
  position: static;
  inset: auto;
  width: 100%;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  opacity: 1;
  background: transparent;
  cursor: pointer;
  /* SEMPRE horizontal: sem escrita vertical e sem espelhar o eixo */
  writing-mode: horizontal-tb;
  direction: ltr;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
.hctrl .hero__control-range:focus-visible { outline: 2px solid #E7C766; outline-offset: 3px; border-radius: 4px; }
.hctrl .hero__control-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    #E7C766 0%,
    #E7C766 calc(var(--progress, 0) * 100%),
    rgba(247, 245, 238, .20) calc(var(--progress, 0) * 100%),
    rgba(247, 245, 238, .20) 100%
  );
}
.hctrl .hero__control-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  margin-top: -5px;
  border-radius: 50%;
  background: #F7F5EE;
  border: 2px solid #0B1D1A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  transition: transform .15s ease;
}
.hctrl .hero__control-range:active::-webkit-slider-thumb { transform: scale(1.14); }
.hctrl .hero__control-range::-moz-range-track {
  height: 5px; border-radius: 99px;
  background: rgba(247, 245, 238, .20);
}
.hctrl .hero__control-range::-moz-range-progress {
  height: 5px; border-radius: 99px; background: #E7C766;
}
.hctrl .hero__control-range::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #F7F5EE;
  border: 2px solid #0B1D1A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

/* A pílula antiga (ícone + medidor vertical + rótulo oculto) não é usada. */
.hero__control-fill,
.hero__control-thumb { display: none; }
.hero__control-label {
  position: static;
  opacity: 1;
  transform: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

@media (max-width: 900px) {
  .hctrl { right: 16px; bottom: 16px; }
  .hctrl__toggle { height: 40px; padding: 0 12px; }
  .hctrl__toggle .hctrl__label { font-size: .68rem; }
}
@media (max-width: 560px) {
  /* Em telas estreitas o rótulo cede lugar ao trilho, mas a linha segue horizontal. */
  .hctrl__row {
    grid-template-columns: 28px minmax(0, 1fr) 42px;
    grid-template-areas:
      "ico name val"
      "ico range range";
    row-gap: 3px;
  }
  .hctrl__ico { width: 28px; height: 28px; }
}
@media (max-width: 420px) {
  .hctrl__panel { width: calc(100vw - 24px); }
}
/* Telas baixas: o painel rola (as barras continuam horizontais). */
@media (max-height: 700px) {
  .hctrl__panel { max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* ── 7. Header transparente sobre o hero: controles em vidro escuro ── */
body.landscape-ready .topbar:not(.is-solid) .ctrl {
  background: rgba(11, 28, 25, .55);
  border-color: rgba(247, 245, 238, .40);
  color: #F7F5EE;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.landscape-ready .topbar:not(.is-solid) .ctrl:hover,
body.landscape-ready .topbar:not(.is-solid) .ctrl[aria-expanded="true"] {
  border-color: #E7C766;
  color: #FFF9E6;
  background: rgba(11, 28, 25, .78);
}
body.landscape-ready .topbar:not(.is-solid) .ctrl__code {
  color: #E7C766;
  border-color: rgba(231, 199, 102, .45);
}
body.landscape-ready .topbar:not(.is-solid) .ctrl--theme .ico { color: #F7F5EE; }
body.landscape-ready .topbar:not(.is-solid) .nav-toggle {
  background: rgba(11, 28, 25, .55);
  border-color: rgba(247, 245, 238, .40);
}

/* ── 5. Universidade Federal de Viçosa: foto inteira + animação ─────
   Antes: height fixa + object-fit: cover cortava o prédio nas laterais.
   Agora: moldura 16:9 com a foto INTEIRA (contain) sobre um fundo
   desfocado da própria imagem — nenhum pixel do prédio é perdido. */
.campus-figure {
  /* Moldura do tamanho da foto: mesma proporção (3:2) → zero corte e
     zero sobra lateral. Fica centralizada para não virar um bloco gigante. */
  max-width: 920px;
  margin: 56px auto 0;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.campus-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  background: #0B1D1A;
}
.campus-shot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: campusFloat 14s ease-in-out infinite;
}
.campus-shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* moldura e foto têm a MESMA proporção: sem corte */
  object-position: 50% 50%;
  filter: saturate(1.02) contrast(1.02);
  transition: filter .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
@keyframes campusFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}
/* Reveal ao entrar na tela: a foto sobe e a moldura se abre. */
.campus-figure .campus-shot {
  clip-path: inset(0 0 16% 0);
  opacity: 0;
  transition: clip-path .95s cubic-bezier(.22, 1, .36, 1), opacity .75s ease;
}
.campus-figure.is-visible .campus-shot {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
.campus-frame__sweep {
  position: absolute;
  inset: -20% -60%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    transparent 38%,
    rgba(255, 249, 230, .16) 47%,
    rgba(255, 249, 230, .30) 50%,
    rgba(255, 249, 230, .16) 53%,
    transparent 62%
  );
  transform: translateX(-70%);
  mix-blend-mode: screen;
  opacity: 0;
}
.campus-figure.is-visible .campus-frame__sweep {
  animation: campusSweep 8.5s ease-in-out 1.1s infinite;
}
@keyframes campusSweep {
  0%, 62% { transform: translateX(-70%); opacity: 0; }
  66%     { opacity: 1; }
  92%     { transform: translateX(70%); opacity: .85; }
  100%    { transform: translateX(70%); opacity: 0; }
}
.campus-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 -70px 70px -40px rgba(5, 15, 13, .55),
              inset 0 0 0 1px rgba(247, 245, 238, .08);
}
.campus-badge {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(231, 199, 102, .42);
  background: rgba(9, 24, 21, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F7F5EE;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
/* a regra genérica .campus-figure span (v5) escurecia o texto do selo */
.campus-figure .campus-badge { color: #F7F5EE; }
.campus-figure .campus-badge span { color: #F7F5EE; }
.campus-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C9A227;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .18);
  animation: campusDot 3.2s ease-in-out infinite;
}
@keyframes campusDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 162, 39, .16); }
  50%      { box-shadow: 0 0 0 7px rgba(201, 162, 39, .04); }
}
.campus-figure figcaption {
  padding: 18px 24px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.campus-figure figcaption span { font-size: .92rem; font-weight: 600; }
.campus-figure figcaption small { margin-top: 3px; }
/* Hover: leve realce (sem recortar o prédio). */
@media (hover: hover) and (pointer: fine) {
  .campus-frame:hover .campus-shot > img { filter: saturate(1.08) contrast(1.05) brightness(1.04); transform: scale(1.012); }
}
@media (max-width: 640px) {
  .campus-figure { margin-top: 40px; border-radius: 14px; }
  /* No celular o quadro assume a proporção da foto: sem sobras. */
  .campus-frame { aspect-ratio: 3 / 2; }
  .campus-shot { width: 100%; height: 100%; animation: none; }
  .campus-badge { left: 12px; bottom: 12px; font-size: .6rem; padding: 6px 11px 6px 9px; }
  .campus-figure figcaption { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .campus-shot,
  .campus-figure.is-visible .campus-frame__sweep,
  .campus-badge::before { animation: none !important; }
  .campus-figure .campus-shot { clip-path: none; opacity: 1; }
}

/* ── 6. Ajustes finos de legibilidade dos controles ─────────────────── */
@media (max-width: 1240px) {
  .topbar__actions { gap: 8px; }
  .ctrl { padding: 0 10px; }
}
@media (max-width: 480px) {
  .ctrl--theme { padding: 0 9px; }
  .lang-menu { min-width: 220px; }
}

/* ══════════════════════════════════════════════════════════════════
   8. Nuvens realistas (v6.1)
   Os sprites cumulus já trazem sombreamento (sombra azulada na base,
   topo quente). Com mix-blend-mode: screen essas sombras desapareciam
   e a nuvem virava algodão luminoso. Aqui a composição é normal:
   a nuvem oclui a paisagem como nuvem de verdade.
   ══════════════════════════════════════════════════════════════════ */
.hero__canvas {
  mix-blend-mode: normal;
  opacity: .94;
}
.hero__canvas-front {
  mix-blend-mode: normal;
  opacity: .80;
}

/* ══════════════════════════════════════════════════════════════════
   9. Marca UFVAI com gradiente (v6.2 · revisto em v6.5)
   UFV: navy em TODA superfície clara (cabeçalho, hero, telas de
   demonstração e capa do deck) · branco só onde o fundo é escuro
   (rodapé, capa do deck no tema escuro e tema escuro de cada marca)
   AI : dourado, com brilho no topo e sombra quente na base
   ══════════════════════════════════════════════════════════════════ */
.brand__word,
.brand__word em,
.wordmark,
.wordmark em {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Cabeçalho — UFV navy */
.brand__word {
  background-image: linear-gradient(168deg, #3E4660 0%, #2E3242 46%, #1E2230 100%);
}
/* Cabeçalho — AI dourado */
.brand__word em {
  background-image: linear-gradient(152deg, #F0D074 0%, #C9A227 52%, #8A6C13 100%);
  text-shadow: none;
}
/* Rodapé (fundo escuro em ambos os temas): UFV branco */
.brand__word--inv {
  background-image: linear-gradient(168deg, #FFFFFF 0%, #EDF0F7 48%, #C7CFDF 100%);
}
.brand__word--inv em {
  background-image: linear-gradient(152deg, #FFF0BE 0%, #E7C766 45%, #C9A227 100%);
}

/* Tema escuro: UFV branco, AI dourado mais luminoso */
[data-theme="dark"] .brand__word {
  background-image: linear-gradient(168deg, #FFFFFF 0%, #EDF1F9 46%, #C2CADB 100%);
}
[data-theme="dark"] .brand__word em {
  background-image: linear-gradient(152deg, #FFF0BE 0%, #E7C766 48%, #C9A227 100%);
}

/* Marca sobre superfície clara que não é o cabeçalho: tela de boot e
   capa do deck (.wordmark--sm) — antes ficavam brancos sobre #F2F2F0 e
   sumiam. No tema escuro essas mesmas superfícies ficam escuras: branco. */
.wordmark--sm {
  background-image: linear-gradient(168deg, #3E4660 0%, #2E3242 46%, #1E2230 100%);
}
.wordmark--sm em {
  background-image: linear-gradient(152deg, #E7C766 0%, #C9A227 52%, #8A6C13 100%);
}
[data-theme="dark"] .wordmark--sm {
  background-image: linear-gradient(168deg, #FFFFFF 0%, #EDF0F7 48%, #C7CFDF 100%);
}
[data-theme="dark"] .wordmark--sm em {
  background-image: linear-gradient(152deg, #FFF0BE 0%, #E7C766 45%, #C9A227 100%);
}

/* Marca dentro da simulação do app (.wordmark--xs.app-brand): herda as
   variáveis do próprio app (navy no claro, tinta clara no escuro). Sem
   isto o background-clip:text sem gradiente deixava o glifo transparente. */
.app-brand,
.app-brand em { text-shadow: none; }
.app-brand { -webkit-text-fill-color: var(--t-ink); color: var(--t-ink); }
.app-brand em { -webkit-text-fill-color: var(--t-gold); color: var(--t-gold); }

/* Hero — a foto é clara no eixo vertical onde mora a marca (céu, L≈0,6–0,87),
   então o UFV volta a ser navy: 6–11× de contraste contra o fundo, contra
   1,1–2,2× do branco antigo. Sem véu escuro em volta do navy (só sujavam o
   céu); o dourado do "AI" mantém o véu próprio, que é o que o sustenta.
   No tema escuro (foto anoitecida): UFV branco com base azulada e véu escuro. */
.hero .wordmark--xl {
  background-image: linear-gradient(166deg, #3E4660 0%, #2E3242 46%, #1E2230 100%);
  text-shadow: none;
}
.hero .wordmark--xl em {
  background-image: linear-gradient(150deg, #FFF4CC 0%, #F0D074 32%, #E7C766 56%, #C9A227 84%, #A07E19 100%);
  text-shadow: 0 6px 44px rgba(0, 0, 0, .40), 0 2px 16px rgba(0, 0, 0, .28);
}
[data-theme="dark"] .hero .wordmark--xl {
  background-image: linear-gradient(166deg, #FFFFFF 0%, #FFFFFF 46%, #E4EAF6 78%, #C8D1E2 100%);
  text-shadow: 0 6px 44px rgba(0, 0, 0, .40);
}
[data-theme="dark"] .hero .wordmark--xl em {
  text-shadow: 0 6px 44px rgba(0, 0, 0, .40);
}

/* ══════════════════════════════════════════════════════════════════
   9.1 Controle "Marca" (opacidade) — v6.6
   hero.js grava settings.ink em --wm-ink (0..1) no <section class="hero">,
   mas até aqui NADA consumia a variável — por isso o slider não fazia
   efeito. O piso é 0.40: no mínimo a marca continua visível sobre a
   foto (40% de opacidade), e 1 dá 100%.
   O override é sobre a regra de "ready" do v5 (mesma especificidade,
   vindo depois no cascade): assim o fade de entrada continua existindo,
   mas a opacidade responde em 160 ms sem atraso — a coreografia de
   entrada preserva os 0,9 s / 0,3 s dela no transform.
   ══════════════════════════════════════════════════════════════════ */
.hero[data-cloud-state="ready"] .wordmark--xl {
  opacity: calc(.40 + .60 * var(--wm-ink, .9));
  transition-property: opacity, transform;
  transition-duration: .16s, .9s;
  transition-timing-function: linear, cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0s, .3s;
}

/* ══════════════════════════════════════════════════════════════════
   10. Modo escuro = anoitecer na hero
   A foto escurece, esfria e ganha um véu azul-noite; a neblina passa a
   refletir o céu (azulada) em vez de branco-leite.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .hero__photo {
  filter: brightness(.42) saturate(.58) contrast(1.06) hue-rotate(-9deg);
}
[data-theme="dark"] .hero__plane { filter: brightness(.44) saturate(.55) hue-rotate(-9deg); }
[data-theme="dark"] .hero__wash {
  background:
    linear-gradient(180deg,
      rgba(4, 9, 24, .72) 0%,
      rgba(6, 12, 28, .34) 26%,
      rgba(5, 10, 24, .48) 55%,
      rgba(3, 7, 18, .94) 100%),
    linear-gradient(90deg, rgba(4, 8, 20, .40), transparent 46%, rgba(4, 8, 20, .28));
}
/* Véu noturno: fica acima da neblina e do grain, abaixo do conteúdo */
[data-theme="dark"] .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4.6;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(26, 48, 96, .55) 0%, rgba(10, 20, 46, 0) 62%),
    linear-gradient(180deg, rgba(10, 22, 48, .55) 0%, rgba(6, 14, 34, .70) 100%);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .hero__grain { opacity: .11; mix-blend-mode: overlay; }
[data-theme="dark"] .hero__mist { opacity: .26; filter: blur(30px) saturate(.6) brightness(1.1); }
[data-theme="dark"] .hero { background: #070C18; }

/* Troca de tema com "anoitecer" suave */
.hero__photo { transition: filter 1.2s cubic-bezier(.22, 1, .36, 1); }
.hero__wash, .hero__grain, .hero__mist { transition: opacity 1s ease, background 1s ease; }
.hero__media::after { transition: opacity 1s ease; }

/* ══════════════════════════════════════════════════════════════════
   11. Animação de rolagem da hero
   A cópia sobe, perde foco e o conjunto se aproxima — a neblina sobe
   junto (feito no canvas: paintClouds usa `prog`).
   ══════════════════════════════════════════════════════════════════ */
.hero__copy {
  transform: translate3d(0, var(--hero-copy-y, 0px), 0) scale(var(--hero-copy-scale, 1));
  filter: blur(var(--hero-copy-blur, 0px));
  transition: none;
}
.hero .wordmark--xl {
  transform: translate3d(0, calc(var(--hero-copy-y, 0px) * -0.22), 0);
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy { filter: none !important; transform: none !important; }
  .hero .wordmark--xl { transform: none !important; }
}