/* Orbia — base/reset, carregado em toda página */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--orbia-ink);
  background: var(--orbia-white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.orbia-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* foco visível sempre — nunca outline:none sem substituto */
:focus-visible {
  outline: 2px solid var(--orbia-yellow-500);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orbia-yellow-500);
  color: var(--orbia-navy-900);
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* Loader (2026-11-08, pedido do usuário): só no primeiro acesso do dia à
   home (.orbia-preload, header.php). Só o símbolo, centralizado (pedido do
   usuário), toca a mesma animação do header (órbitas giram, anel pulsa) e o site entra por um
   zoom de dentro do "O": o miolo do anel vira um furo na tela do loader e
   o logo amplia em volta dele (OrbiaMotion.preloader()). Clique, tecla,
   roda ou toque pulam com um esmaecer. Versão de vidro em
   _arquivo/loader-vidro-2026-11-08. */
.orbia-preloader {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  background: var(--orbia-noite); color: var(--orbia-white);
  cursor: pointer; opacity: 1; transition: opacity 480ms var(--ease-in-out);
}
.orbia-preload .orbia-preloader { display: flex; }
.orbia-preloader[data-stage="exit"] { opacity: 0; }
.orbia-preloader__logo {
  width: min(34vw, 190px);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out);
}
.orbia-preloader__logo .orbia-logo-svg { display: block; width: 100%; height: auto; aspect-ratio: 560 / 460; }
.orbia-preloader[data-stage] .orbia-preloader__logo { opacity: 1; transform: none; }
.orbia-preloader[data-stage="exit"] .orbia-preloader__logo { transform: scale(.97); }
.orbia-preloader[data-stage="zoom"] { transition: none; }
.orbia-preloader[data-stage="zoom"] .orbia-preloader__logo { transition: none; will-change: transform; }
/* o cursor customizado fica acima de tudo (z 10000): some com o loader na tela */
body:has(> .orbia-preloader) :is(.orbia-cursor-dot, .orbia-cursor-ring) { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .orbia-preloader { display: none !important; }
}

/* Cursor customizado (docs/03-motion-system.md §5) — só desktop com
   mouse fino; OrbiaMotion.cursor() ativa .orbia-has-cursor no body. */
.orbia-has-cursor,
.orbia-has-cursor a,
.orbia-has-cursor button,
.orbia-has-cursor [role="button"] {
  cursor: none;
}
.orbia-cursor-dot,
.orbia-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
/* Contraste pelo fundo (2026-11-08): OrbiaMotion.cursor() lê a superfície
   sob o ponteiro e põe body[data-cursor="dark|light"]. Em fundo claro,
   ponto Cobalto e anel Noite; em fundo escuro, ponto Céu e anel claro. */
.orbia-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--orbia-cobalto);
  transition: background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.orbia-cursor-ring {
  width: 32px;
  height: 32px;
  border: 1px solid rgb(11 13 30 / 0.5);
  transition: width var(--duration-fast) var(--ease-out),
              height var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.orbia-cursor-ring.is-active {
  width: 56px;
  height: 56px;
  border-color: var(--orbia-cobalto);
  background: rgb(48 84 188 / 0.08);
}
body[data-cursor="dark"] .orbia-cursor-dot { background: var(--orbia-ceu); }
body[data-cursor="dark"] .orbia-cursor-ring { border-color: rgb(255 247 240 / 0.6); }
body[data-cursor="dark"] .orbia-cursor-ring.is-active { border-color: var(--orbia-ceu); background: rgb(117 165 223 / 0.12); }

/* Seleção de texto e cursor de digitação na paleta (2026-11-08) */
::selection { background: rgb(117 165 223 / 0.42); color: var(--orbia-noite); }
[data-orbia-theme="dark"] ::selection { background: var(--orbia-cobalto); color: #fff; }
input, textarea, select { caret-color: var(--orbia-cobalto); }
[data-orbia-theme="dark"] :is(input, textarea) { caret-color: var(--orbia-ceu); }

/* Header — barra flutuante em vidro (glassmorphism), base clara desde
   o carregamento (funciona tanto sobre o hero escuro quanto sobre
   seções claras, por isso é vidro e não sólido). */
.orbia-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
}
.orbia-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--orbia-white) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--orbia-white) 45%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--orbia-navy-900) 18%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: background-color var(--duration-base) var(--ease-in-out),
              box-shadow var(--duration-base) var(--ease-in-out);
}
.orbia-header[data-scrolled="true"] .orbia-header__inner {
  background: color-mix(in srgb, var(--orbia-white) 32%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--orbia-navy-900) 14%, transparent);
}
/* Tema escuro (logo branco, docs/03-motion-system.md "headerTheme")
   — o próprio vidro escurece junto, senão o logo branco perde
   contraste contra um vidro que fica mais claro ao rolar. */
.orbia-header[data-theme="dark"] .orbia-header__inner {
  background: color-mix(in srgb, var(--orbia-navy-900) 38%, transparent);
  border-color: color-mix(in srgb, var(--orbia-white) 22%, transparent);
}
.orbia-header[data-theme="dark"][data-scrolled="true"] .orbia-header__inner {
  background: color-mix(in srgb, var(--orbia-navy-900) 58%, transparent);
}
.orbia-header__logo {
  position: relative;
  display: inline-flex;
}
/* Logo em SVG embutido (template-parts/logo-orbia.php): cor por
   currentColor, Noite no fundo claro e branco no escuro (OrbiaMotion.headerTheme). */
.orbia-header__logo { color: var(--orbia-ink); transition: color var(--duration-base) var(--ease-out); }
.orbia-header[data-theme="dark"] .orbia-header__logo { color: #fff; }
.orbia-logo-svg {
  display: block; height: 34px; width: auto; aspect-ratio: 1977.28 / 442.13; overflow: visible; fill: currentColor;
  transition: height var(--duration-base) var(--ease-in-out);
}

/* Animação ao passar o mouse (2026-11-08): as órbitas dão uma volta em
   torno do anel, o anel respira, as letras sobem em onda e o pingo do i
   quica. A classe .is-play vem do JS e só sai no fim, para a animação
   tocar inteira mesmo se o mouse sair antes. */
.orbia-logo-svg :is(.lg-ring, .lg-orbit, .lg-l, .lg-dot) { transform-box: fill-box; transform-origin: 50% 50%; }
.orbia-logo-svg .lg-l, .orbia-logo-svg .lg-dot { transform-origin: 50% 100%; }
:is(.orbia-header__logo, .orbia-preloader__logo).is-play .lg-orbit { animation: lg-orbit 1.15s cubic-bezier(.65, 0, .35, 1) both; }
:is(.orbia-header__logo, .orbia-preloader__logo).is-play .lg-ring { animation: lg-ring .9s cubic-bezier(.3, .7, .3, 1) both; }
:is(.orbia-header__logo, .orbia-preloader__logo).is-play .lg-l { animation: lg-letter .7s cubic-bezier(.3, .7, .3, 1) calc(.18s + var(--i) * .06s) both; }
:is(.orbia-header__logo, .orbia-preloader__logo).is-play .lg-dot { animation: lg-dot .95s cubic-bezier(.3, .7, .3, 1) .34s both; }
@keyframes lg-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lg-ring { 0% { transform: scale(1); } 28% { transform: scale(.88); } 62% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes lg-letter { 0%, 100% { transform: none; } 38% { transform: translateY(-16%); } 70% { transform: translateY(3%); } }
@keyframes lg-dot { 0% { transform: none; } 30% { transform: translateY(-120%) scale(.9, 1.1); } 55% { transform: translateY(0) scale(1.15, .85); } 72% { transform: translateY(-35%); } 88% { transform: translateY(0) scale(1.05, .95); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .orbia-header__logo.is-play :is(.lg-orbit, .lg-ring, .lg-l, .lg-dot) { animation: none; }
}

.orbia-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0; padding: 0;
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orbia-navy-900);
  transition: color var(--duration-base) var(--ease-in-out);
}
.orbia-header__nav a {
  position: relative;
  padding-block: var(--space-1);
}
.orbia-header__nav a:not(.orbia-btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--orbia-navy-700);
  transition: right var(--duration-fast) var(--ease-out),
              background-color var(--duration-base) var(--ease-in-out);
}
.orbia-header__nav a:hover::after,
.orbia-header__nav a:focus-visible::after,
.orbia-header__nav a.is-active::after { right: 0; }

/* Indicador de seção ativa (2026-09-14, referência wibify.de): estado
   "current page" vem do servidor (header.php); na home, onde Serviços
   e Portfólio existem como seções da própria página (não arquivos
   separados), OrbiaMotion.navSpy() assume via scroll — o sublinhado é
   o mesmo em ambos os casos, só a classe .is-active muda de dono. */

/* Itens do menu trocam de cor junto com o logo (mesmo
   `data-theme` do header, `OrbiaMotion.headerTheme()`) — texto/
   sublinhado escuros ficariam ilegíveis sobre o vidro escurecido de
   `[data-theme="dark"]`. O CTA (`.orbia-btn--primary`) fica de fora:
   fundo amarelo sólido já tem contraste garantido em qualquer fundo. */
.orbia-header[data-theme="dark"] .orbia-header__nav { color: var(--orbia-white); }
.orbia-header[data-theme="dark"] .orbia-header__nav a::after { background: var(--orbia-white); }

/* CTA do header (pedido do usuário, 2026-11-08): azul Cobalto com texto
   branco no lugar do pêssego, sem o sublinhado dos links (só os links de
   texto têm ::after). Funciona sobre o header claro e o escuro. */
.orbia-header .orbia-header__nav .orbia-btn--primary {
  background: var(--orbia-cobalto);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgb(48 84 188 / .7);
}
.orbia-header .orbia-header__nav .orbia-btn--primary:hover,
.orbia-header .orbia-header__nav .orbia-btn--primary:focus-visible {
  background: var(--orbia-profundo);
  color: #fff;
}

/* Mobile: esconde os links de texto, mantém só o CTA (menu fullscreen
   fica para um passo dedicado de navegação — ver docs/02-design-system.md §7) */
@media (max-width: 767px) {
  .orbia-header { padding: var(--space-3) 0; }
  .orbia-header__inner { flex-wrap: nowrap; padding: var(--space-2) var(--space-4); }
  .orbia-header__nav { gap: var(--space-3); }
  .orbia-header__nav a:not(.orbia-btn) { display: none; }
  .orbia-header__nav .orbia-btn { padding: var(--space-2) var(--space-4); font-size: var(--type-micro); white-space: nowrap; }
  .orbia-logo-svg { height: 26px; }
}

.orbia-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.orbia-btn:hover { transform: translateY(-2px); }
.orbia-btn--primary {
  background: var(--orbia-yellow-500);
  color: var(--orbia-navy-900);
}
.orbia-btn--primary:hover { background: var(--orbia-yellow-600); }
.orbia-btn--ghost {
  background: transparent;
  color: var(--orbia-white);
  border-color: color-mix(in srgb, var(--orbia-white) 40%, transparent);
}
.orbia-btn--ghost:hover { border-color: var(--orbia-white); }
.orbia-btn--ghost-dark {
  background: transparent;
  color: var(--orbia-navy-900);
  border: 1px solid var(--orbia-mist-300);
}
.orbia-btn--ghost-dark:hover { border-color: var(--orbia-navy-700); }

/* CTA final — compartilhado entre home, diagnóstico e singles de
   serviço/case (por isso mora aqui em base.css, sempre carregado, e
   não em hero.css, que só entra na home). Bug real encontrado
   2026-09-14: até então só existia em hero.css, então essa dobra
   ficava sem estilo nenhum em /diagnostico/ e nos singles — corrigido
   trazendo pra cá. */
.orbia-final-cta {
  background: var(--orbia-navy-900);
  color: var(--orbia-white);
  text-align: center;
  padding-block: var(--space-11);
}
.orbia-final-cta__title {
  font-family: var(--font-display);
  font-size: var(--type-display-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-7);
}

/* Rodapé com feixe de luz (2026-11-08) — mesmo efeito do site da Elevum,
   com a marca da Orbia: fundo Noite → Vazio, luz em Céu e Ciano, acento
   Violeta (índigo), e o logo oficial gigante em Cobalto → Marinho como
   máscara por onde a mesma luz passa. Pedido do usuário: menos pêssego,
   mais azul e índigo.
   Markup em footer.php, JS em orbia-footer-light.js (move o feixe). */
.rod {
  --bg: var(--orbia-noite, #0B0D1E); --bg-foot: var(--orbia-vazio, #05070F);
  --lit: 117, 165, 223; --acc: 132, 137, 206; --cyan: 116, 196, 223;
  --ang: 118deg; --b: 58%; --px: 50%; --py: 50%; --g: 0; --x: 0px; --y: 0px; --rw: 100vw; --rh: 600px; --top: 0px; --bot: 300px; --mh: 200px;
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  color: rgb(255 255 255 / 0.82); font-size: 0.95rem;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-foot) 100%);
}
.rod ::selection { background: rgb(var(--lit) / 0.9); color: var(--bg); }
.rod :focus-visible { outline-color: var(--orbia-ceu); }
.rod-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, rgba(var(--acc), .15), rgba(var(--acc), .6) var(--b), rgba(var(--acc), .15)); }
.rod-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rod-wash { position: absolute; inset: 0; background: radial-gradient(120% 90% at 8% 0%, rgba(48, 84, 188, .45), transparent 55%), radial-gradient(90% 70% at 92% 8%, rgba(132, 137, 206, .3), transparent 60%), radial-gradient(80% 60% at 50% 100%, rgba(37, 54, 125, .5), transparent 70%); }
/* malha de pontos em ondas (Wave Mesh): pontos Céu, cristas Ciano, sobre o fundo */
.rod-mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rod-beam { position: absolute; inset: 0; filter: blur(calc(1px + 1.6cqw)); background:
  linear-gradient(var(--ang), transparent calc(var(--b) - 11%), rgba(var(--acc), .14) calc(var(--b) - 5%), rgba(var(--lit), .30) var(--b), rgba(var(--cyan), .10) calc(var(--b) + 4%), transparent calc(var(--b) + 9%)),
  linear-gradient(var(--ang), transparent calc(var(--b) - 34%), rgba(var(--acc), .10) calc(var(--b) - 27%), transparent calc(var(--b) - 20%)); }
.rod-glow { position: absolute; inset: 0; opacity: var(--g); background: radial-gradient(circle 26cqw at var(--px) var(--py), rgba(var(--lit), .16), rgba(var(--acc), .06) 45%, transparent 70%); }
.rod-grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.rod-inner {
  position: relative; z-index: 2; box-sizing: border-box; max-width: var(--container-max); margin: 0 auto;
  padding: clamp(52px, 8.5cqw, 104px) var(--container-pad) 0;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.1fr); column-gap: clamp(24px, 4cqw, 56px); row-gap: 44px;
}
.rod-col { min-width: 0; }
.rod-label { position: relative; display: block; padding-bottom: 13px; margin: 0; font: 600 .72rem/1.3 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--orbia-ceu); }
.rod-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--acc), .6), rgba(var(--acc), .15)); transform-origin: 0 50%; transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2, .7, .1, 1) .1s; }
.js .rod:not(.is-in) .rod-label::after { transform: scaleX(0); }
.rod-fade { transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .1, 1); }
.js .rod:not(.is-in) .rod-fade { opacity: 0; translate: 0 14px; }
.rod-links li:nth-child(1) { transition-delay: .12s; } .rod-links li:nth-child(2) { transition-delay: .18s; } .rod-links li:nth-child(3) { transition-delay: .24s; } .rod-links li:nth-child(4) { transition-delay: .3s; } .rod-links li:nth-child(5) { transition-delay: .36s; } .rod-links li:nth-child(6) { transition-delay: .42s; } .rod-links li:nth-child(7) { transition-delay: .48s; } .rod-links li:nth-child(8) { transition-delay: .54s; }
.rod-slogan { margin: 24px 0 8px; font: 600 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--font-display); letter-spacing: -.015em; color: #fff; max-width: 16ch; transition-delay: .15s; }
.rod-place { margin: 0; color: rgb(255 255 255 / 0.66); max-width: 32ch; transition-delay: .25s; }
.rod-links { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.rod-link { position: relative; display: inline-flex; align-items: center; padding: 6px 0; line-height: 21px; text-decoration: none; color: rgb(255 255 255 / 0.78); transition: color .25s; }
.rod-link span { display: inline-block; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.rod-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--orbia-ciano); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.rod-link:hover, .rod-link:focus-visible { color: #fff; outline: none; }
.rod-link:hover::before, .rod-link:focus-visible::before { transform: scaleX(1); }
.rod-link:hover span, .rod-link:focus-visible span { translate: 16px 0; }
.rod-link:focus-visible span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--lit), .8); }
.rod-cta {
  display: inline-flex; margin-top: 22px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(var(--lit), .5); color: var(--orbia-ceu); font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, opacity .9s ease, translate .9s cubic-bezier(.2, .7, .1, 1); transition-delay: 0s, 0s, 0s, .5s, .5s;
}
.rod-cta:hover, .rod-cta:focus-visible { background: var(--orbia-ceu); color: var(--bg); border-color: var(--orbia-ceu); outline: none; }

/* o logo: o arquivo oficial vira máscara, e a luz passa por dentro dele */
.rod-word { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(36px, 7cqw, 96px); height: calc(var(--mh) * .86); }
.rod-word-box { box-sizing: border-box; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.rod-mark {
  width: 100%; aspect-ratio: 1977.28 / 442.13; cursor: default;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  background-repeat: no-repeat; background-size: var(--rw) var(--rh); background-position: calc(var(--x) * -1) calc(var(--y) * -1);
  background-image:
    radial-gradient(circle 22cqw at var(--px) var(--py), rgba(var(--cyan), calc(var(--g) * .75)), transparent 70%),
    linear-gradient(var(--ang), transparent calc(var(--b) - 9%), rgba(var(--acc), .55) calc(var(--b) - 3%), rgba(var(--lit), .85) var(--b), rgba(var(--cyan), .45) calc(var(--b) + 3%), transparent calc(var(--b) + 8%)),
    linear-gradient(180deg, #3054BC var(--top), #25367D calc((var(--top) + var(--bot)) / 2), #17204D var(--bot));
  transition: translate 1.4s cubic-bezier(.16, .84, .2, 1) .25s;
}
.js .rod:not(.is-in) .rod-mark { translate: 0 85%; }
.rod-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(5, 7, 15, .55) 55%, var(--bg-foot)); }
.rod .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container (max-width: 760px) {
  .rod-inner { grid-template-columns: 1fr; row-gap: 40px; }
  .rod nav .rod-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rod .rod-fade, .rod .rod-mark, .rod .rod-label::after { transition: none !important; opacity: 1 !important; translate: none !important; transform: none !important; }
}

/* Reveal (OrbiaMotion.reveal) — escondido só quando .js está presente
   no <html> (ver header.php). Sem JS, o conteúdo nunca fica preso em
   opacity:0 — progressive enhancement real, não só documentado. */
.js [data-orbia-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.js [data-orbia-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-orbia-reveal] { transform: none; }
}


/* ---------- menu do celular em tela cheia (2026-11-08) ----------
   Até 767px os links do header somem; o botão de duas linhas abre esta
   tela (links numerados que entram em cascata, contato e e-mail, órbitas
   da marca ao fundo). O header fica por cima (z 100) com o botão virando X.
   JS: assets/js/orbia-menu.js. */
.orbia-menu-btn {
  display: none; flex: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 42px; height: 42px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, currentColor 10%, transparent); color: var(--orbia-ink); cursor: pointer;
}
.orbia-header[data-theme="dark"] .orbia-menu-btn, .is-menu-open .orbia-menu-btn { color: #fff; }
.orbia-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease-out); }
.orbia-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.orbia-menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.orbia-mnav {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7);
  padding: 120px var(--container-pad) calc(var(--space-7) + env(safe-area-inset-bottom));
  color: #fff;
  background:
    radial-gradient(70% 45% at 100% 0%, color-mix(in srgb, var(--orbia-cobalto) 55%, transparent), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--orbia-violeta) 35%, transparent), transparent 70%),
    var(--orbia-vazio);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.orbia-mnav[hidden] { display: none; }
.orbia-mnav.is-open { opacity: 1; }
.orbia-mnav__orbits { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orbia-mnav__orbits span { position: absolute; right: -40vw; top: 18%; width: 110vw; aspect-ratio: 2.6 / 1; border-radius: 50%; border: 1px solid rgb(117 165 223 / .22); rotate: -18deg; }
.orbia-mnav__orbits span:nth-child(2) { width: 80vw; right: -24vw; top: 24%; border-color: rgb(132 137 206 / .28); border-style: dashed; }
.orbia-mnav__orbits span:nth-child(3) { width: 50vw; right: -8vw; top: 30%; border-color: rgb(252 226 203 / .22); }
.orbia-mnav__nav ol { margin: 0; padding: 0; list-style: none; }
.orbia-mnav__nav li { border-bottom: 1px solid rgb(255 255 255 / .1); opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(.06s + var(--i) * .05s); }
.orbia-mnav.is-open li { opacity: 1; transform: none; }
.orbia-mnav__nav a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; font: 600 clamp(1.7rem, 7vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -.025em; color: #fff; }
.orbia-mnav__nav a span { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--orbia-ceu); }
.orbia-mnav__nav a[aria-current="page"] { color: var(--orbia-pessego); }
.orbia-mnav__nav a:active { opacity: .7; }
.orbia-mnav__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); opacity: 0; transition: opacity .5s var(--ease-out) .35s; }
.orbia-mnav.is-open .orbia-mnav__foot { opacity: 1; }
.orbia-mnav__foot .orbia-btn { padding: 14px 26px; font-size: var(--type-small); }
.orbia-mnav__mail { font: 500 var(--type-small) var(--font-mono); color: rgb(255 247 240 / .7); }
/* com o menu aberto o header fica sobre o fundo escuro do menu */
.is-menu-open .orbia-header__inner { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-menu-open .orbia-header__logo { color: #fff; }
.is-menu-open .orbia-header__nav .orbia-btn { visibility: hidden; }
.is-menu-open body { overflow: hidden; }
@media (max-width: 767px) { .orbia-menu-btn { display: inline-flex; } }
/* telas estreitas: logo + botão de menu; o contato fica dentro do menu */
@media (max-width: 520px) { .orbia-header__nav .orbia-btn { display: none; } }
@media (min-width: 768px) { .orbia-mnav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .orbia-mnav, .orbia-mnav__nav li, .orbia-mnav__foot { transition: none; } }