/* O que o Tailwind não cobre de forma legível: botões, campos, órbitas do hero e a única sequência de entrada. */

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid #192a56; outline-offset: 3px; border-radius: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 15rem; height: 3rem; padding: 0 1.75rem; border-radius: 4px;
  font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primario { background: #192a56; color: #fff; }
.btn-primario:hover { background: #273c75; }
.btn-secundario { background: rgba(194, 201, 204, .35); color: #192a56; }
.btn-secundario:hover { background: rgba(194, 201, 204, .6); }
.btn-claro { background: #fff; color: #192a56; }
.btn-claro:hover { background: #f8f9fa; }
.btn-contorno { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.btn-contorno:hover { border-color: #fff; }
.btn[disabled] { opacity: .6; cursor: wait; }

.campo {
  width: 100%; border: 1px solid transparent; border-radius: 4px; background: #f3f4f6;
  padding: .8rem 1rem; color: #192a56; font: inherit; transition: border-color .2s, background-color .2s;
}
.campo:hover { background: #eceef0; }
.campo:focus { outline: none; border-color: #192a56; background: #fff; }
.campo[aria-invalid="true"] { border-color: #b42318; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #192a56 50%), linear-gradient(135deg, #192a56 50%, transparent 50%); background-position: calc(100% - 1.2rem) 50%, calc(100% - .9rem) 50%; background-size: .3rem .3rem; background-repeat: no-repeat; padding-right: 2.5rem; }

/* Texto vindo do CMS (páginas personalizadas e colunas de texto do rodapé) */
.texto-livre > * + * { margin-top: 1.25em; }
.texto-livre h2 { margin-top: 2.2em; font-size: 1.875rem; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: #192a56; }
.texto-livre h3 { margin-top: 1.8em; font-size: 1.3rem; line-height: 1.3; font-weight: 500; color: #192a56; }
.texto-livre ul { list-style: disc; padding-left: 1.25em; }
.texto-livre li + li { margin-top: .4em; }
.texto-livre a { text-decoration: underline; text-decoration-color: #c2c9cc; text-underline-offset: 4px; }
.texto-livre a:hover { color: #192a56; text-decoration-color: #192a56; }
.texto-livre a.btn, .texto-livre a.btn:hover { text-decoration: none; color: #fff; }
.texto-livre p:has(> a.btn) { margin-top: 2.5rem; } /* botão pede mais respiro que um parágrafo */
.texto-livre .colado { margin-top: .75rem; } /* título escrito logo abaixo de outra linha (ex.: um ícone): fica junto dela */
.texto-livre strong { font-weight: 600; color: #192a56; }
.texto-livre > :first-child { margin-top: 0; }
.texto-livre figure { margin-block: 2.5em; }
.texto-livre i[class^="ri-"] { vertical-align: -.125em; } /* ícone no meio do texto, alinhado às letras */
/* Link só com ícone (ex.: redes sociais): área de toque de 44px; a margem alinha o primeiro ícone à esquerda do texto */
.texto-livre a.link-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; font-size: 1.375rem; text-decoration: none; }
.texto-livre a.link-icone:first-child { margin-left: -.6875rem; }
.texto-livre hr { margin-block: 2.5em; border: 0; border-top: 1px solid rgba(194, 201, 204, .8); }
.secao-escura .texto-livre hr { border-top-color: rgba(255, 255, 255, .2); }
.texto-livre figure img { width: 100%; height: auto; border-radius: 2px; }
/* Seções da home com fundo azul-marinho: o texto do CMS precisa inverter as cores */
.secao-escura .texto-livre h2, .secao-escura .texto-livre h3, .secao-escura .texto-livre strong { color: #fff; }
.secao-escura .texto-livre a { text-decoration-color: rgba(255, 255, 255, .4); }
.secao-escura .texto-livre a:hover { color: #fff; text-decoration-color: #fff; }
.secao-escura .texto-livre a.btn-primario { background: #fff; color: #192a56; }
.secao-escura .texto-livre a.btn-primario:hover { background: #f8f9fa; color: #192a56; }
.text-center .texto-livre ul { list-style-position: inside; padding-left: 0; }
.carrossel-trilho { scrollbar-width: none; scroll-padding-inline: 0; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.texto-rodape figure { margin-block: 1em; }
.texto-rodape figure img { width: auto; max-width: 100%; max-height: 4rem; }

footer .texto-livre a { text-decoration: none !important; }

/* Abertura com foto: menu branco até a página rolar; órbitas em branco sobre a imagem */
body.hero-escuro #topo:not(.topo-rolado),
body.hero-escuro #topo:not(.topo-rolado) a,
body.hero-escuro #topo:not(.topo-rolado) button,
body.hero-escuro #topo:not(.topo-rolado) .text-suave { color: #fff; }
body.hero-escuro #topo:not(.topo-rolado) .marca-img { filter: brightness(0) invert(1); } /* logo escura ficaria invisível sobre a foto */
body.hero-escuro #topo:not(.topo-rolado) a.border-navy { border-color: rgba(255, 255, 255, .7); }
body.hero-escuro #topo:not(.topo-rolado) a.border-navy:hover { background: #fff; color: #192a56; }
.orbitas-claras .orbita { border-color: rgba(255, 255, 255, .28); }
.orbitas-claras .satelite { background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.texto-rodape > * + * { margin-top: .75em; }
.texto-rodape h2, .texto-rodape h3 { margin-top: 1em; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.texto-rodape ul { list-style: none; padding: 0; }
.texto-rodape li + li { margin-top: .75rem; }

/* Avisos em popup (<dialog> nativo: o fundo é o ::backdrop) */
dialog.aviso { margin: auto; border: 0; box-shadow: 0 24px 64px rgba(25, 42, 86, .18); }
dialog.aviso::backdrop { background: rgba(25, 42, 86, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.aviso[open] { animation: aviso .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes aviso { from { opacity: 0; transform: translateY(12px); } }
body:has(dialog.aviso[open]) { overflow: hidden; }

/* Cabeçalho: fica translúcido com desfoque depois que a página rola */
.topo-rolado { background: rgba(255, 255, 255, .72); border-color: rgba(194, 201, 204, .6); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }

/* Menu móvel em painel lateral */
#menu-movel[hidden] { display: block; visibility: hidden; }
#menu-movel .painel { transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
#menu-movel .fundo { opacity: 0; transition: opacity .35s; }
#menu-movel.aberto .painel { transform: none; }
#menu-movel.aberto .fundo { opacity: 1; }

/* Órbitas do hero: anéis em perspectiva, cada um com um satélite que gira sem parar */
.orbitas { perspective: 1400px; }
.orbita {
  position: absolute; left: 50%; top: 62%; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 1px solid rgba(194, 201, 204, .75); border-radius: 50%;
  transform-style: preserve-3d; animation: orbita var(--t) linear infinite; animation-delay: var(--atraso);
}
.satelite {
  position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: #192a56; box-shadow: 0 0 0 6px rgba(25, 42, 86, .08);
  animation: satelite var(--t) linear infinite; animation-delay: var(--atraso);
}
@keyframes orbita   { from { transform: rotateX(76deg) rotateZ(0); }       to { transform: rotateX(76deg) rotateZ(360deg); } }
/* Gira ao contrário do anel para o satélite continuar redondo, de frente para quem vê */
@keyframes satelite { from { transform: rotateZ(0) rotateX(-76deg); }     to { transform: rotateZ(-360deg) rotateX(-76deg); } }

.entrada { animation: entrada .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--atraso, 0s); }
.orbitas.entrada, .formas.entrada, canvas.entrada { animation-duration: 2s; }
/* Grafismos em canvas (desenhados em app.js): somem perto do título para não competir com ele */
.ondas, .grade { -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 75%); mask-image: linear-gradient(to bottom, transparent 30%, #000 75%); }
.constelacao, .fluxo, .topografia { -webkit-mask-image: radial-gradient(ellipse 50% 42% at 50% 48%, transparent 35%, #000 100%); mask-image: radial-gradient(ellipse 50% 42% at 50% 48%, transparent 35%, #000 100%); }

/* Formas translúcidas: planos inclinados que se sobrepõem e giram devagar, indo e voltando */
.formas { perspective: 1200px; }
.forma {
  position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1;
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background: linear-gradient(135deg, rgba(39, 60, 117, .09), rgba(39, 60, 117, .015) 75%);
  animation: forma var(--t) ease-in-out infinite alternate; animation-delay: var(--atraso);
}
.forma-hexagono { clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%); }
.forma-triangulo { clip-path: polygon(50% 0, 100% 86.6%, 0 86.6%); }
.forma-losango { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.formas-claras .forma { background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 75%); }
@keyframes forma { from { transform: rotateX(var(--rx)) rotateZ(-8deg); } to { transform: rotateX(calc(var(--rx) * -1)) rotateZ(14deg) translateY(-4%); } }
@keyframes entrada { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbita, .satelite, .forma, .entrada, dialog.aviso[open] { animation: none; }
  .forma { transform: rotateX(var(--rx)); }
  .orbita { transform: rotateX(76deg); }
  .satelite { transform: rotateX(-76deg); }
  #menu-movel .painel, #menu-movel .fundo { transition: none; }
}