/* UNIENERGY — apresentação institucional */

:root {
  /* Paleta oficial */
  --gold: #eac248;
  --gold-hi: #f0d56a;
  --gold-pastel: #f3dc8a;
  --gold-pastel-hi: #f8e7a6;
  --gold-soft: rgba(234, 194, 72, 0.55);
  --gold-faint: rgba(234, 194, 72, 0.14);
  --teal-mid: #148bad;
  --teal-mid-soft: rgba(20, 139, 173, 0.35);
  --teal-deep: #0c658f;
  --teal-dark: #0a5672;
  --navy: #003e52;
  --navy-deep: #022939;

  /* Repaginação clara */
  --space-top: #f4f7fb;
  --space: #f7f9fc;
  --space-deep: #edf2f8;
  --space-mid: #e5ecf5;
  --veil: rgba(226, 235, 246, 0.5);

  /* Tokens dos painéis no tema claro */
  --modal-bg: rgba(255, 255, 255, 0.72);
  --modal-border: rgba(20, 74, 112, 0.18);
  --field-bg: rgba(255, 255, 255, 0.72);
  --field-border: rgba(20, 74, 112, 0.2);
  --field-border-focus: rgba(20, 74, 112, 0.38);
  --label-gold: rgba(160, 120, 18, 0.82);

  /* Mantém os nomes, mas no claro = texto azul escuro */
  --white: #0d3550;
  --soft: rgba(13, 53, 80, 0.84);
  --muted: rgba(13, 53, 80, 0.62);
  --line: rgba(13, 53, 80, 0.14);

  --header-h: 3.1rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Viga", sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  min-height: 100%;
  background-color: var(--space-top);
}

@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;
  }
}

body {
  margin: 0;
  position: relative;
  z-index: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  background-color: var(--space);
  background-attachment: fixed;
  background-image: linear-gradient(180deg, #f8fbff 0%, #eef4fb 52%, #eaf1f9 100%);
}

/* Campo de estrelas estático — textura muito leve de fundo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(1px 1px at 6% 10%, rgba(220, 230, 245, 0.55), transparent 60%),
    radial-gradient(1px 1px at 17% 24%, rgba(220, 230, 245, 0.3), transparent 60%),
    radial-gradient(1px 1px at 29% 6%, rgba(220, 230, 245, 0.45), transparent 60%),
    radial-gradient(1px 1px at 42% 38%, rgba(220, 230, 245, 0.22), transparent 60%),
    radial-gradient(1px 1px at 56% 12%, rgba(220, 230, 245, 0.5), transparent 60%),
    radial-gradient(1px 1px at 68% 28%, rgba(220, 230, 245, 0.22), transparent 60%),
    radial-gradient(1px 1px at 79% 8%, rgba(220, 230, 245, 0.38), transparent 60%),
    radial-gradient(1px 1px at 91% 22%, rgba(220, 230, 245, 0.26), transparent 60%),
    radial-gradient(1px 1px at 8% 46%, rgba(220, 230, 245, 0.3), transparent 60%),
    radial-gradient(1px 1px at 22% 62%, rgba(220, 230, 245, 0.2), transparent 60%),
    radial-gradient(1px 1px at 36% 78%, rgba(220, 230, 245, 0.38), transparent 60%),
    radial-gradient(1px 1px at 53% 54%, rgba(220, 230, 245, 0.16), transparent 60%),
    radial-gradient(1px 1px at 64% 82%, rgba(220, 230, 245, 0.28), transparent 60%),
    radial-gradient(1px 1px at 77% 64%, rgba(220, 230, 245, 0.22), transparent 60%),
    radial-gradient(1px 1px at 88% 90%, rgba(220, 230, 245, 0.34), transparent 60%),
    radial-gradient(1px 1px at 4% 86%, rgba(220, 230, 245, 0.2), transparent 60%);
  background-size: 100% 100%;
  background-attachment: fixed;
}

/* Starfield animado — poucas partículas discretas passeando pelo fundo */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.starfield .star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  will-change: transform, opacity;
  animation:
    star-drift var(--dur, 80s) ease-in-out var(--td, 0s) infinite,
    star-twinkle var(--tdur, 5s) ease-in-out var(--tdl, 0s) infinite alternate;
}

.starfield .star.lg {
  width: 2.5px;
  height: 2.5px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 14px rgba(234, 194, 72, 0.12);
}

.starfield .star.sm {
  width: 1.3px;
  height: 1.3px;
  background: rgba(235, 240, 248, 0.7);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.22);
}

@keyframes star-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(var(--dx, 30px), var(--dy, 20px)); }
  100% { transform: translate(0, 0); }
}

@keyframes star-twinkle {
  0%   { opacity: 0.25; }
  100% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .starfield .star {
    animation: none;
    opacity: 0.5;
  }
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ——— Header fixo ——— */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 clamp(0.85rem, 3.4vw, 2.1rem);
  /* Sempre presente — vidro translúcido leve mesmo no topo da página */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 65%),
    rgba(240, 246, 253, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(13, 53, 80, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.42s var(--ease-out), opacity 0.3s ease,
    background 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.site-header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.56) 60%),
    rgba(233, 242, 251, 0.93);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border-bottom-color: rgba(20, 74, 112, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 24px -16px rgba(13, 53, 80, 0.28);
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - 10px));
  opacity: 0;
  pointer-events: none;
}

.header-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  transition: filter 0.3s ease, transform 0.3s var(--ease-out);
}

.brand:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.brand-symbol {
  width: clamp(32px, 2.4vw + 18px, 46px);
  height: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(20, 139, 173, 0.18));
}

.nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  margin-left: auto;
  margin-right: 0.25rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.nav-toggle-bar {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}

.site-header.menu-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.site-header.menu-open .nav-toggle-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.2rem);
  flex: 1;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 53, 80, 0.76);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.08rem;
  width: 1.15rem;
  height: 2px;
  border-radius: 999px;
  background: var(--teal-deep);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  color: var(--white);
  outline: none;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.95rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 8px;
  line-height: 1.2;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease, opacity 0.25s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.btn-ghost {
  color: var(--soft);
  border: 1px solid rgba(13, 53, 80, 0.24);
  background: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--white);
  border-color: rgba(234, 194, 72, 0.4);
  background: rgba(255, 255, 255, 0.8);
}

.btn-gold {
  color: #02040c;
  background: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 22px -10px rgba(234, 194, 72, 0.55);
}

.btn-gold:hover:not(:disabled) {
  filter: brightness(1.05);
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px rgba(234, 194, 72, 0.65);
}

/* Variante pastel do botão dourado — usada no "Nosso portal" do header */
.btn-gold-pastel {
  color: #1a1604;
  background: var(--gold-pastel);
  border: 1px solid var(--gold-pastel);
  box-shadow: 0 6px 22px -10px rgba(243, 220, 138, 0.45);
}

.btn-gold-pastel:hover:not(:disabled) {
  background: var(--gold-pastel-hi);
  border-color: var(--gold-pastel-hi);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px rgba(248, 231, 166, 0.55);
}

.btn-outline {
  color: var(--white);
  border: 1px solid rgba(13, 53, 80, 0.28);
  background: rgba(255, 255, 255, 0.42);
}

.btn-outline:hover:not(:disabled) {
  background: rgba(234, 194, 72, 0.14);
  border-color: rgba(234, 194, 72, 0.45);
}

.btn-lg {
  padding: 0.95rem 1.6rem;
  font-size: 0.82rem;
  border-radius: 10px;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .header-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 0;
  }

  .nav-primary {
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s var(--ease-out), opacity 0.35s ease, padding 0.35s ease;
    padding-top: 0;
    padding-bottom: 0;
  }

  .site-header.menu-open {
    background: rgba(243, 248, 254, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--line);
  }

  .site-header.menu-open .nav-primary {
    max-height: 32rem;
    opacity: 1;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    border-top: 1px solid var(--line);
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: rgba(0, 0, 0, 0.18);
  }

  .nav-links a {
    padding: 0.95rem 1.1rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links li:last-child a {
    border-bottom: none;
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ——— Layout base ——— */

main {
  position: relative;
  z-index: 2;
  padding-top: var(--header-h);
}

.section {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.25rem, 8.2vw, 5.9rem);
  overflow: clip;
}

.section--tight {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

/* Linha dourada separadora — entre cada seção, cobrindo toda a horizontal */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(234, 194, 72, 0) 0%,
    rgba(234, 194, 72, 0.45) 18%,
    rgba(234, 194, 72, 0.55) 50%,
    rgba(234, 194, 72, 0.45) 82%,
    rgba(234, 194, 72, 0) 100%);
  pointer-events: none;
  z-index: 3;
}

/* “O que fazemos”: separador alinhado à coluna (mesma intensidade das outras seções — sem halo extra) */
#missao.section::before {
  left: 50%;
  right: auto;
  width: min(94vw, 1380px);
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    rgba(234, 194, 72, 0) 0%,
    rgba(234, 194, 72, 0.45) 18%,
    rgba(234, 194, 72, 0.55) 50%,
    rgba(234, 194, 72, 0.45) 82%,
    rgba(234, 194, 72, 0) 100%);
}

/* Onda de ícones inspirada no portal */
.portal-wave-section {
  padding-top: clamp(2.2rem, 5vw, 3.8rem);
  padding-bottom: clamp(2rem, 4.5vw, 3.4rem);
}

/* O fluxo de ícones já é a divisão entre as seções vizinhas — sem linha dourada */
.section + .portal-wave-section::before,
.portal-wave-section + .section::before {
  content: none;
}

/* Seção "solta": sem painel/modal de fundo */
.section.no-panel > .wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.section.no-panel > .wrap::before {
  content: none;
}

.portal-wave-section .wrap {
  max-width: min(94vw, 1380px);
}

.portal-wave-bleed {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.portal-wave {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  border-radius: 999px;
  padding: 0.8rem 0;
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.portal-wave-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: portal-wave-drift 48s linear infinite;
}

.portal-wave-item {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex: 0 0 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.12rem;
  animation: portal-wave-bob 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.2s);
  color: rgba(190, 225, 240, 0.88);
  border: 1px solid rgba(20, 139, 173, 0.32);
  background: rgba(6, 48, 72, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.portal-wave-item i {
  transform: translateY(1px);
}

@keyframes portal-wave-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes portal-wave-bob {
  0%, 100% { transform: translateY(0px) scale(1); }
  25% { transform: translateY(-7px) scale(1.02); }
  50% { transform: translateY(1px) scale(0.985); }
  75% { transform: translateY(6px) scale(1.01); }
}

.wrap {
  width: 100%;
  max-width: min(94vw, 1380px);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Mesma largura do painel que .wrap — evita “modais” estreitos só em algumas seções */
.wrap-narrow {
  max-width: min(94vw, 1380px);
}

.kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin: 0 0 1rem;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0;
  line-height: 1.15;
}

/* Títulos principais (h2 e h1 das subpáginas) usam a fonte do headline do hero */
h2,
.page-hero h1 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.18;
}

/* Tudo centralizado na home */
.section.center {
  text-align: center;
}

.section.center .wrap > * {
  margin-left: auto;
  margin-right: auto;
}

/* Painel principal — réplica fiel do .modal do portal (seções com painel) */
.section:not(.hero):not(.no-panel) > .wrap {
  position: relative;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 16px;
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.75rem, 5vw, 3.25rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -38px rgba(13, 53, 80, 0.22);
}

/*
 * Quem somos — Liquid Glass (iOS 26 style):
 * vidro neutro/branco, fundo embaçado, borda com refração luminosa
 * e um brilho especular que segue o ponteiro (--mx/--my via JS).
 */
#sobre.section > .wrap {
  isolation: isolate;
  border: none;
  border-radius: 24px;
  /* Mesmas proporções de luz dos cards .jornada (topo mais discreto, sem brilho extra) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 18%),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(220, 232, 248, 0.03) 60%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  transform: translateZ(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -10px 24px -16px rgba(13, 53, 80, 0.18),
    0 22px 56px -30px rgba(13, 53, 80, 0.2);
}

/* Anel de borda: refração luminosa contínua (mesmo tom dos cards .jornada) */
#sobre.section > .wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 140deg,
    rgba(255, 255, 255, 0.78) 0deg,
    rgba(190, 220, 250, 0.45) 70deg,
    rgba(255, 255, 255, 0.18) 140deg,
    rgba(180, 215, 245, 0.45) 220deg,
    rgba(255, 255, 255, 0.78) 300deg,
    rgba(255, 255, 255, 0.78) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

#sobre.section > .wrap > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #sobre.section > .wrap {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }
}

/* ——— Liquid Glass — Como funciona / Área de atuação / Perguntas frequentes ——— */

#atuacao.section > .wrap,
#portfolio.section > .wrap,
#faq.section > .wrap,
#fale-cta.section > .wrap {
  isolation: isolate;
  border: none;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 18%),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(220, 232, 248, 0.03) 60%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  transform: translateZ(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -10px 24px -16px rgba(13, 53, 80, 0.18),
    0 22px 56px -30px rgba(13, 53, 80, 0.2);
}

#atuacao.section > .wrap::before,
#portfolio.section > .wrap::before,
#faq.section > .wrap::before,
#fale-cta.section > .wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 140deg,
    rgba(255, 255, 255, 0.78) 0deg,
    rgba(190, 220, 250, 0.45) 70deg,
    rgba(255, 255, 255, 0.18) 140deg,
    rgba(180, 215, 245, 0.45) 220deg,
    rgba(255, 255, 255, 0.78) 300deg,
    rgba(255, 255, 255, 0.78) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

#atuacao.section > .wrap > *,
#portfolio.section > .wrap > *,
#faq.section > .wrap > *,
#fale-cta.section > .wrap > * {
  position: relative;
  z-index: 1;
}

/* ——— Scroll reveal ——— */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.45s; }

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ——— HERO + Globo Terra (CSS) ——— */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(4rem, 12vh, 7rem);
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 2;
}

.earth-stage {
  position: absolute;
  left: 50%;
  bottom: -52%;
  width: min(150vmin, 1280px);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.36;
}

/* Silhueta da Terra — esfera escura com halo atmosférico azul */
.earth-globe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* variação sutil da superfície sem detalhes literais */
    radial-gradient(ellipse 70% 40% at 50% 30%, rgba(10, 70, 110, 0.22), transparent 75%),
    radial-gradient(ellipse 50% 30% at 40% 55%, rgba(8, 60, 95, 0.18), transparent 75%),
    radial-gradient(ellipse 55% 35% at 60% 65%, rgba(6, 50, 80, 0.16), transparent 75%),
    /* base — gradiente escuro do topo iluminado para a noite profunda */
    radial-gradient(ellipse 100% 100% at 50% 30%,
      #062236 0%,
      #031726 25%,
      #010e1a 50%,
      #01070f 75%,
      #00040a 100%);
  box-shadow:
    /* halo atmosférico azul ao redor (anel de luz sutil) */
    0 0 0 1px rgba(20, 139, 173, 0.28),
    0 0 30px 2px rgba(20, 139, 173, 0.55),
    0 0 80px 14px rgba(20, 139, 173, 0.32),
    0 0 180px 40px rgba(20, 139, 173, 0.18),
    0 0 340px 100px rgba(20, 139, 173, 0.08),
    /* rim light interno no topo — atmosfera acendendo com o amanhecer */
    inset 0 24px 60px rgba(234, 194, 72, 0.14),
    inset 0 8px 28px rgba(255, 220, 130, 0.12),
    /* sombra profunda da noite na parte de baixo */
    inset 0 -60px 120px rgba(0, 0, 0, 0.55),
    inset 0 -140px 200px rgba(0, 0, 0, 0.35);
}

/* Nascer do sol — halo dourado emergindo atrás do limbo superior */
.earth-sunrise {
  position: absolute;
  left: 50%;
  top: -4%;
  width: 72%;
  height: 22%;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    /* arco quente na linha do horizonte */
    radial-gradient(ellipse 80% 100% at 50% 100%,
      rgba(255, 230, 170, 0.55) 0%,
      rgba(255, 210, 120, 0.4) 14%,
      rgba(234, 194, 72, 0.28) 30%,
      rgba(234, 140, 60, 0.18) 50%,
      rgba(20, 139, 173, 0.14) 72%,
      transparent 90%);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0.95;
}

/* Segundo halo mais largo e suave pra dar profundidade ao amanhecer */
.earth-sunrise::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150%;
  height: 260%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 50% at 50% 100%,
    rgba(234, 194, 72, 0.22) 0%,
    rgba(234, 194, 72, 0.1) 30%,
    rgba(20, 139, 173, 0.08) 60%,
    transparent 85%);
  filter: blur(10px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .earth-stage {
    animation: earth-breath 22s ease-in-out infinite;
  }
  .earth-sunrise {
    animation: sunrise-pulse 10s ease-in-out infinite alternate;
  }
}

@keyframes earth-breath {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

@keyframes sunrise-pulse {
  0%   { opacity: 0.78; }
  100% { opacity: 1; }
}

.hero-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.85rem;
}

/* Logotipo composto: símbolo + wordmark formam uma marca só */
.hero-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 2.9rem);
}

.hero-logo-symbol {
  width: 2.15em;
  height: auto;
  margin-bottom: 0.1em;
  margin-left: -0.05em;
  filter: drop-shadow(0 10px 22px rgba(13, 53, 80, 0.22))
    drop-shadow(0 0 14px rgba(20, 139, 173, 0.12))
    drop-shadow(0 0 26px rgba(234, 194, 72, 0.09));
}

/* Canvas substitui a SVG no hero: precisa de altura explícita (aspect ratio 2:1, viewBox 120×60) */
canvas.hero-logo-symbol {
  height: 1.075em;
  display: block;
}

.hero-logo-word {
  font-family: var(--font-display);
  font-size: 1em;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--white);
}

.hero-logo-word span {
  color: var(--gold);
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  text-shadow: 0 0 20px rgba(234, 194, 72, 0.25);
}

/* Headline com efeito de digitação */
.hero-headline {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.05rem, 0.6rem + 2.4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: rgba(13, 53, 80, 0.95);
  max-width: none;
  width: 100%;
  margin: 1.5rem auto 1.25rem;
  text-shadow: 0 8px 22px rgba(255, 255, 255, 0.65);
  display: block;
  text-align: center;
}

/* Headline com slide da esquerda — substitui o typewriter */
.hero-headline--slide {
  font-size: clamp(1.15rem, 0.55rem + 2vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.028em;
  max-width: min(100%, 42rem);
  margin: 0.2rem auto 1.65rem;
  text-wrap: balance;
}

/* Wipe da esquerda pra direita — animação direta, sem depender do reveal JS */
.hero-headline--slide {
  animation: hero-wipe-in 3.5s var(--ease-out) 0.15s both;
}

@keyframes hero-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline--slide { animation: none; }
}

/* Hero: headline única com typewriter (.hero-headline--typed) */

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.hero-scroll-hint {
  position: absolute;
  bottom: clamp(1.25rem, 3vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(13, 53, 80, 0.5);
  animation: float-hint 3.5s ease-in-out infinite;
}

.hero-scroll-hint::after {
  content: "";
  width: 1px;
  height: 2.3rem;
  background: linear-gradient(var(--gold), transparent);
  opacity: 0.75;
}

@keyframes float-hint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint { animation: none; }
}

@media (max-width: 600px) {
  .hero-scroll-hint { display: none; }
  .earth-stage { bottom: -30%; width: 160vmin; }
}

/* ——— Seções com texto institucional (centralizadas) ——— */

.section h2 {
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: none;
  width: 100%;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.section.center h2 {
  margin-left: auto;
  margin-right: auto;
}

.section .lead {
  font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.18rem);
  color: var(--soft);
  max-width: min(100%, 52rem);
  width: 100%;
  margin: 0 auto 2rem;
  line-height: 1.58;
  text-wrap: balance;
}

.section:not(.center) .lead {
  margin-left: 0;
  margin-right: 0;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding-top: 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: min(100%, 52rem);
  width: 100%;
  margin-inline: auto;
}

.stat {
  text-align: center;
  min-width: 8rem;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  color: var(--gold);
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ——— Quem somos — ecossistema digital (hub + 4 portais) ——— */

#sobre.section {
  overflow: visible;
}

#sobre.section #sobre-title {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.2rem;
  margin-bottom: 0.55rem;
  margin-inline: 0;
  padding-inline: 0;
  font-size: clamp(1.38rem, 1.02rem + 1.35vw, 2.08rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

#sobre.section .sobre-tech-bridge {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1.35rem;
  padding-inline: 0;
  font-size: clamp(1rem, 0.9rem + 0.48vw, 1.22rem);
  line-height: 1.42;
  text-wrap: balance;
}

.sobre-tech {
  position: relative;
  isolation: isolate;
  display: grid;
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  gap: clamp(1.05rem, 2.5vw, 1.85rem) clamp(1rem, 2.6vw, 1.65rem);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* Duas faixas iguais: altura mínima do conteúdo + sobra repartida; evita minmax(0,1fr) que clipa texto */
  grid-template-rows: minmax(auto, 1fr) minmax(auto, 1fr);
  min-height: clamp(21rem, 46vh, 28rem);
  grid-template-areas:
    "c1 hub c3"
    "c2 hub c4";
  align-items: stretch;
  justify-items: stretch;
  max-width: min(100%, 58rem);
  margin-inline: auto;
}

.sobre-tech-canvas {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 0;
  pointer-events: none;
}

.sobre-tech--c1 { grid-area: c1; }
.sobre-tech--c2 { grid-area: c2; }
.sobre-tech--c3 { grid-area: c3; }
.sobre-tech--c4 { grid-area: c4; }

.sobre-tech-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  padding: 0.88rem 0.88rem 0.88rem;
  border-radius: 11px;
  border: 1px solid rgba(20, 74, 112, 0.14);
  border-top: 3px solid var(--gold-pastel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 100%),
    rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 36px -24px rgba(13, 53, 80, 0.22);
  text-align: left;
}

.sobre-tech-card-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  display: grid;
  place-items: center;
  margin-bottom: 0.58rem;
  font-size: 0.95rem;
  color: var(--teal-deep);
  background: rgba(234, 194, 72, 0.14);
  border: 1px solid rgba(234, 194, 72, 0.38);
  filter: drop-shadow(0 0 10px rgba(20, 139, 173, 0.14));
}

.sobre-tech-card-title {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.04rem);
  margin: 0 0 0.36rem;
  color: var(--teal-deep);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.sobre-tech-card-body {
  margin: 0;
  margin-top: 0.1rem;
  font-size: clamp(0.74rem, 0.7rem + 0.16vw, 0.84rem);
  line-height: 1.52;
  color: var(--muted);
  max-width: 36ch;
}

.sobre-tech-hub {
  position: relative;
  z-index: 1;
  grid-area: hub;
  align-self: center;
  justify-self: center;
  width: clamp(6.35rem, 13.2vw, 8.85rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.38rem 0.56rem;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  /* Hub “vidro” — sem gradiente dourado pesado; leitura moderna e limpa */
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 249, 252, 0.88) 100%);
  border: 1px solid rgba(20, 74, 112, 0.16);
  backdrop-filter: blur(12px) saturate(128%);
  -webkit-backdrop-filter: blur(12px) saturate(128%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 32px -18px rgba(13, 53, 80, 0.12);
}

.sobre-tech-hub-symbol {
  display: block;
  position: relative;
  z-index: 1;
  width: min(4.75rem, 82%);
  height: auto;
  aspect-ratio: 120 / 60;
  margin-bottom: 0.26rem;
  flex-shrink: 0;
  filter:
    drop-shadow(0 1px 3px rgba(13, 53, 80, 0.08))
    drop-shadow(0 0 10px rgba(20, 139, 173, 0.1));
}

.sobre-tech-hub-label {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.48rem, 0.42rem + 0.2vw, 0.6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  line-height: 1.2;
  max-width: 8.5rem;
}

@media (max-width: 760px) {
  .sobre-tech {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hub hub"
      "c1 c3"
      "c2 c4";
    grid-template-rows: auto minmax(auto, 1fr) minmax(auto, 1fr);
    min-height: clamp(26rem, 78vh, 34rem);
    gap: 0.95rem 0.82rem;
  }

  .sobre-tech-hub {
    width: clamp(5.85rem, 38vw, 7.65rem);
    margin-bottom: 0.42rem;
  }

  .sobre-tech-card {
    padding: 0.85rem 0.78rem 0.85rem;
    min-height: 0;
  }
}

@media (max-width: 420px) {
  .sobre-tech {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hub"
      "c1"
      "c2"
      "c3"
      "c4";
    grid-template-rows: auto repeat(4, auto);
    min-height: 0;
  }

  .sobre-tech-card {
    min-height: clamp(8.75rem, 38vw, 10.25rem);
    height: auto;
  }
}

/* ——— O que fazemos — fluxo operacional (sem painel) ——— */

.missao-flow-section {
  position: relative;
}

.missao-flow-wrap {
  position: relative;
  z-index: 1;
}

.missao-flow-heading {
  max-width: min(100%, 40rem);
  margin-inline: auto;
}

.missao-flow-lead {
  max-width: min(100%, 38rem);
  margin-bottom: 0.5rem;
}

.missao-flow-board {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 0.5rem;
}

/* Trilho: horizontal no desktop, vertical no mobile */
.missao-flow-rail {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  left: 10%;
  right: 10%;
  top: 0.55rem;
  height: 2px;
}

.missao-flow-rail-track {
  --missao-flow-p: 600px;
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  /* Padrão periódico (mesma cor no início e no fim do período): repete sem corte. */
  background: repeating-linear-gradient(
    90deg,
    rgba(4, 38, 54, 0.92) 0px,
    rgba(8, 62, 82, 0.96) 60px,
    rgba(12, 92, 118, 0.99) 144px,
    rgba(20, 139, 173, 1) 240px,
    rgba(10, 88, 112, 0.98) 312px,
    rgba(175, 145, 65, 0.38) 348px,
    rgba(228, 198, 95, 0.62) 372px,
    rgba(175, 145, 65, 0.38) 396px,
    rgba(10, 88, 112, 0.98) 444px,
    rgba(20, 139, 173, 1) 504px,
    rgba(6, 48, 66, 0.94) 564px,
    rgba(4, 38, 54, 0.92) var(--missao-flow-p)
  );
  animation: missao-liquid-h 14s linear infinite;
  box-shadow: 0 0 16px rgba(20, 139, 173, 0.42), 0 0 10px rgba(234, 194, 72, 0.06);
}

/* Animação +período no eixo X = pattern visualmente segue da ESQ → DIR;
   como o gradiente é periódico, o quadro final coincide com o inicial → loop sem reset. */
@keyframes missao-liquid-h {
  from {
    background-position: 0 0;
  }
  to {
    background-position: var(--missao-flow-p) 0;
  }
}

.missao-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.35rem);
  position: relative;
  z-index: 1;
  text-align: center;
}

.missao-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Marcador no trilho: losango degradê (teal/dourado), não “bolinha” azul */
.missao-flow-node {
  flex-shrink: 0;
  width: 0.52rem;
  height: 0.52rem;
  margin-bottom: 0.95rem;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--teal-mid) 55%, var(--teal-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(2, 12, 22, 0.9),
    0 0 10px rgba(234, 194, 72, 0.35),
    0 0 14px rgba(20, 139, 173, 0.4);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.missao-flow-step-body {
  padding: 0 0.2rem;
}

.missao-flow-ix {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin-bottom: 0.45rem;
  font-family: var(--font-body);
}

.missao-flow-step-body h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 0.92rem + 0.28vw, 1.14rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #1a1604;
  margin: 0 0 0.45rem;
}

.missao-flow-step-body p {
  margin: 0;
  font-size: clamp(0.86rem, 0.82rem + 0.15vw, 0.94rem);
  line-height: 1.55;
  color: var(--soft);
}

.missao-flow-step:hover .missao-flow-node {
  transform: rotate(45deg) scale(1.15);
  box-shadow:
    0 0 0 1px rgba(2, 12, 22, 0.95),
    0 0 14px rgba(234, 194, 72, 0.45),
    0 0 20px rgba(20, 139, 173, 0.5);
}

/* Tablet: 2×2 sem trilho horizontal (evita linha “partida”) */
@media (max-width: 1040px) and (min-width: 861px) {
  .missao-flow-rail {
    display: none;
  }

  .missao-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.25rem;
  }
}

@media (max-width: 860px) {
  .missao-flow-rail {
    left: calc(1.85rem + 0.32rem - 1px);
    right: auto;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    height: auto;
  }

  .missao-flow-rail-track {
    background: repeating-linear-gradient(
      180deg,
      rgba(4, 38, 54, 0.92) 0px,
      rgba(8, 62, 82, 0.96) 60px,
      rgba(12, 92, 118, 0.99) 144px,
      rgba(20, 139, 173, 1) 240px,
      rgba(10, 88, 112, 0.98) 312px,
      rgba(175, 145, 65, 0.38) 348px,
      rgba(228, 198, 95, 0.62) 372px,
      rgba(175, 145, 65, 0.38) 396px,
      rgba(10, 88, 112, 0.98) 444px,
      rgba(20, 139, 173, 1) 504px,
      rgba(6, 48, 66, 0.94) 564px,
      rgba(4, 38, 54, 0.92) var(--missao-flow-p)
    );
    animation: missao-liquid-v 14s linear infinite;
    box-shadow: 0 0 14px rgba(20, 139, 173, 0.38), 0 0 8px rgba(234, 194, 72, 0.05);
  }

  @keyframes missao-liquid-v {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 var(--missao-flow-p);
    }
  }

  .missao-flow-steps {
    grid-template-columns: 1fr;
    gap: 1.65rem;
    padding-left: 1.85rem;
    text-align: left;
  }

  .missao-flow-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .missao-flow-node {
    margin: 0.15rem 0 0;
  }

  .missao-flow-step-body {
    padding: 0;
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .missao-flow-rail-track {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ——— 3 Jornadas ——— */

.jornadas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  text-align: center;
  align-items: stretch;
}

/* Card com efeito de vidro (borda em refração luminosa, fundo translúcido) */
.jornada {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.75rem;
  border: none;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 18%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(220, 232, 248, 0.03) 60%, rgba(255, 255, 255, 0.02) 100%),
    rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -10px 24px -16px rgba(13, 53, 80, 0.16),
    0 18px 48px -28px rgba(13, 53, 80, 0.26);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

/* Anel de borda em vidro líquido (mesmo conceito do Quem somos) */
.jornada::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 140deg,
    rgba(255, 255, 255, 0.78) 0deg,
    rgba(190, 220, 250, 0.45) 70deg,
    rgba(255, 255, 255, 0.18) 140deg,
    rgba(180, 215, 245, 0.45) 220deg,
    rgba(255, 255, 255, 0.78) 300deg,
    rgba(255, 255, 255, 0.78) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.jornada > * {
  position: relative;
  z-index: 1;
}

.jornada:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -10px 24px -16px rgba(0, 18, 36, 0.45),
    0 24px 60px -28px rgba(0, 6, 20, 0.7);
}

.jornada-icon {
  width: 52px;
  height: auto;
  margin: 0 auto 1.25rem;
  filter: drop-shadow(0 6px 18px rgba(20, 139, 173, 0.35));
}

/* Faixa superior do card: partículas espalhadas → ícone ao hover no card (ou no CTA) */
.jornada-particle-band {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: calc(100% + 3.5rem);
  margin: -2.25rem -1.75rem 1.15rem -1.75rem;
  height: clamp(6.25rem, 16vw, 9rem);
  min-height: clamp(6.25rem, 16vw, 9rem);
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 85% at 50% 40%, rgba(255, 255, 255, 0.06), transparent 72%),
    linear-gradient(180deg, rgba(13, 53, 80, 0.12) 0%, rgba(13, 53, 80, 0.02) 100%);
}

.jornada-particle-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.jornada-icon-fallback {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  margin: 0;
  color: rgba(235, 240, 248, 0.92);
  filter: drop-shadow(0 6px 18px rgba(20, 139, 173, 0.35));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .jornada-particle-band[data-jornada-particles] .jornada-particle-canvas {
    display: none;
  }

  .jornada-particle-band[data-jornada-particles] .jornada-icon-fallback {
    display: block;
  }
}

.jornada h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jornada-subtitle {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin: 0 0 1rem;
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jornada p {
  color: var(--soft);
  font-size: 0.93rem;
  line-height: 1.65;
  margin: 0 auto 1.75rem;
  max-width: 28ch;
  /* Garante que a descrição reserve sempre o mesmo espaço,
     independente do tamanho do texto — assim o primeiro botão
     fica alinhado entre os 3 cards. */
  min-height: 6em;
}

.jornada-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  margin-top: auto;
}

.jornada-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.62);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.jornada-link::after {
  content: "→";
  margin-left: 0.6rem;
  color: var(--gold);
  transition: transform 0.3s var(--ease-out);
}

.jornada-link:hover,
.jornada-link:focus-visible {
  color: var(--white);
  border-color: var(--field-border-focus);
  background: rgba(234, 194, 72, 0.18);
  outline: none;
}

.jornada-link:hover::after { transform: translateX(3px); }

/* Botão primário no mesmo tom pastel do CTA "Nosso portal" do header */
.jornada-link.primary {
  color: #1a1604;
  background: var(--gold-pastel);
  border-color: var(--gold-pastel);
  box-shadow: 0 6px 22px -10px rgba(243, 220, 138, 0.45);
}

.jornada-link.primary::after { color: #1a1604; }

.jornada-link.primary:hover,
.jornada-link.primary:focus-visible {
  color: #1a1604;
  background: var(--gold-pastel-hi);
  border-color: var(--gold-pastel-hi);
  box-shadow: 0 10px 28px -12px rgba(248, 231, 166, 0.55);
}

@media (max-width: 900px) {
  .jornadas-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

/* ——— Grupo UNIBASE — painel “espaço”, inverso do resto da página ——— */

.grupo {
  text-align: center;
}

/* Inverte o modal apenas neste #grupo para um fundo azul meia-noite */
#grupo.section > .wrap {
  --white: #f3f7fc;
  --soft: rgba(235, 240, 248, 0.82);
  --muted: rgba(215, 225, 235, 0.62);
  --line: rgba(200, 220, 240, 0.12);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(234, 194, 72, 0.18);
  border-radius: 18px;
  color: var(--white);
  background: #020d18;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 56px -36px rgba(0, 4, 12, 0.55);
  min-height: clamp(18rem, 34vw, 24rem);
  /* Sem padding nas laterais: o canvas precisa alcançar a borda esquerda do painel.
     Compensamos o respiro do texto via padding em .grupo-content. */
  padding: 0;
  /* Painel em 2 colunas: canvas (estrelas + logo) à esquerda, texto à direita */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0;
  align-items: stretch;
}

/* Canvas das estrelas ocupa toda a coluna esquerda (de cima a baixo) */
.grupo-stars-canvas {
  grid-column: 1;
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.grupo-content {
  grid-column: 2;
  align-self: center;
  position: relative;
  width: 100%;
  text-align: center;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.75rem, 4.5vw, 3rem);
}

/* Mobile: empilha (texto em cima, cena de partículas embaixo) */
@media (max-width: 760px) {
  #grupo.section > .wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto clamp(16rem, 60vw, 22rem);
    gap: 0;
  }
  .grupo-stars-canvas {
    grid-column: 1;
    grid-row: 2;
  }
  .grupo-content {
    grid-column: 1;
    grid-row: 1;
    padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem);
  }
}

/* Kicker do painel “espaço”: dourado, em vez do teal padrão */
#grupo.section .kicker {
  color: var(--gold-pastel-hi);
}

#grupo.section .lead {
  color: rgba(235, 240, 248, 0.82);
}

/* Bloco narrativo: vários parágrafos .lead seguidos, sem “buraco” de 2rem entre cada um */
#grupo.section .grupo-content .grupo-lead {
  max-width: min(100%, 46rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.05rem;
}

#grupo.section .grupo-content .grupo-lead:last-of-type {
  margin-bottom: 1.5rem;
}

.grupo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(234, 194, 72, 0.06);
}

.grupo-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold);
}

/* ——— Atuação ——— */

.diferenciais-grid {
  position: relative;
  counter-reset: flow-step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.diferencial {
  position: relative;
  counter-increment: flow-step;
  padding: 1.65rem 1rem 1.45rem;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  text-align: center;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.diferencial:hover {
  border-color: var(--field-border-focus);
  transform: translateY(-3px);
}

.diferencial::before {
  content: "0" counter(flow-step);
  position: absolute;
  right: 0.85rem;
  top: 0.62rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(13, 53, 80, 0.4);
}

/* Trilha de “quadradinhos” entre os cards — animada em passos sequenciais,
   formando um “loader” que vai do card 1 até o card 4 e reinicia. */
.diferencial::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: clamp(1.75rem, 3vw, 2.75rem);
  height: 4px;
  transform: translateY(-50%);
  color: rgba(12, 101, 143, 0.65);
  background-image: linear-gradient(90deg, currentColor 4px, transparent 4px);
  background-size: 10px 4px;
  background-position: 0 50%;
  background-repeat: repeat-x;
  /* Máscara de “reveal” cresce em passos discretos → cada degrau ≈ um quadradinho */
  -webkit-mask-image: linear-gradient(90deg, #000, #000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(90deg, #000, #000);
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: 100% 100%;
  pointer-events: none;
}

.diferencial:last-child::after {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Cada trilha “carrega” em sua janela de tempo dentro de um ciclo único de 6s.
     T1 enche 0–1s, T2 enche 2–3s, T3 enche 4–5s. Em t=6s tudo zera junto
     (reset usa step-end para ser instantâneo no loop). O resto da animação usa
     ease-out → movimento contínuo dos quadradinhos surgindo, sem travadas. */
  .diferencial:nth-child(1)::after { animation: flowTrail1 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
  .diferencial:nth-child(2)::after { animation: flowTrail2 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
  .diferencial:nth-child(3)::after { animation: flowTrail3 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
}

@keyframes flowTrail1 {
  0%       { -webkit-mask-size: 0%   100%; mask-size: 0%   100%; }
  16.67%   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  99%      { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation-timing-function: step-end; }
  100%     { -webkit-mask-size: 0%   100%; mask-size: 0%   100%; }
}

@keyframes flowTrail2 {
  0%, 33%  { -webkit-mask-size: 0%   100%; mask-size: 0%   100%; }
  50%      { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  99%      { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation-timing-function: step-end; }
  100%     { -webkit-mask-size: 0%   100%; mask-size: 0%   100%; }
}

@keyframes flowTrail3 {
  0%, 66%  { -webkit-mask-size: 0%   100%; mask-size: 0%   100%; }
  83%      { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  99%      { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation-timing-function: step-end; }
  100%     { -webkit-mask-size: 0%   100%; mask-size: 0%   100%; }
}

.diferencial-icon {
  display: block;
  margin: 0 auto 0.9rem;
  width: 32px;
  height: 32px;
  color: var(--teal-deep);
}

.diferencial h3 {
  font-size: 1rem;
  font-family: var(--font-display);
  margin: 0 0 0.4rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.diferencial p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .diferencial::after { display: none; }
  .diferenciais-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .diferenciais-grid { grid-template-columns: 1fr; }
}

/* ——— Portfólio placeholder ——— */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.portfolio-item {
  aspect-ratio: 16 / 11;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ——— FAQ accordion ——— */

.faq {
  max-width: min(100%, 52rem);
  margin: 2.5rem auto 0;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0.25rem;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.5;
  transition: color 0.25s ease;
}

.faq-trigger:hover { color: var(--gold); }

.faq-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out);
}

.faq-panel > div {
  padding: 0 0.25rem 1.3rem;
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ——— Formulário contato ——— */

.form {
  max-width: min(100%, 52rem);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  text-align: left;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label-gold);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 14px;
  color: white;
  padding: 12px 16px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--field-border-focus);
  background: var(--field-bg);
  box-shadow: 0 0 0 3px rgba(234, 194, 72, 0.15);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #f08a8a;
}

.form-error {
  color: #f4a3a3;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
  min-height: 1em;
}

.form-submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.form-lgpd {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.form-status {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding: 0.95rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--gold-soft);
  background: rgba(234, 194, 72, 0.08);
  color: var(--white);
  font-size: 0.92rem;
  text-align: center;
  display: none;
}

.form-status.is-visible { display: block; }
.form-status.is-error {
  border-color: #f08a8a;
  background: rgba(240, 138, 138, 0.08);
}

.contact-email {
  display: inline-block;
  margin-top: 1.75rem;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid rgba(234, 194, 72, 0.3);
  padding-bottom: 2px;
}

.contact-email:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .form { grid-template-columns: 1fr; }
}

/* ——— Footer ——— */

.site-footer {
  position: relative;
  z-index: 2;
  padding: 3rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(244, 249, 255, 0.92) 100%),
    rgba(244, 249, 255, 0.92);
}

.footer-inner {
  max-width: min(94vw, 1380px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 3rem 2.5rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.footer-brand .brand { line-height: 1; }

.footer-tagline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.footer-desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  max-width: 24rem;
  line-height: 1.7;
}

.footer-portal {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1a1604;
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  background: rgba(234, 194, 72, 0.06);
  width: fit-content;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-portal:hover,
.footer-portal:focus-visible {
  background: rgba(234, 194, 72, 0.12);
  border-color: var(--gold);
  color: #1a1604;
  transform: translateY(-1px);
  outline: none;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a1604;
  margin: 0 0 0.95rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.footer-col a {
  font-size: 0.88rem;
  color: var(--muted);
  transition: color 0.25s ease;
}

.footer-col a:hover { color: var(--white); }

.footer-bottom {
  max-width: min(94vw, 1380px);
  margin: 2.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--muted);
}

.footer-bottom a:hover { color: var(--white); }

.footer-legal {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
}

@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ——— Page hero (subpáginas) ——— */

.page-hero {
  position: relative;
  padding-block: clamp(5rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  width: min(620px, 80%);
  height: 420px;
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 139, 173, 0.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(10px);
}

.page-hero .wrap { position: relative; z-index: 1; }

.page-hero h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.95rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: min(100%, 22em);
  margin: 0.75rem auto 1rem;
  text-wrap: balance;
}

.page-hero .lead {
  color: var(--soft);
  font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.15rem);
  max-width: min(100%, 52rem);
  line-height: 1.58;
  margin: 0 auto;
  text-wrap: balance;
}

/* ── Cover hero (imagem full-bleed, estilo Apple) ── */
.page-hero--cover {
  min-height: 78vh;
  padding-block: 0;
  display: flex;
  align-items: center;
  background-image: url('../img/hero-investidor.png');
  background-size: cover;
  background-position: center 38%;
}

.page-hero--cover::before {
  background: rgba(2, 41, 57, 0.22);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
  border-radius: 0;
  filter: none;
}

.page-hero--cover .wrap {
  width: 100%;
  padding-block: clamp(3rem, 8vw, 5rem);
  display: flex;
  justify-content: center;
}

/* ── Liquid glass modal sobre a capa ── */
.hero-glass {
  transform: translate(-6%, -8%);
  position: relative;
  isolation: isolate;
  border-radius: 12px;
  padding: clamp(0.7rem, 1.5vw, 1rem) clamp(2.5rem, 8vw, 5rem);
  max-width: min(90%, 823px);
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%),
    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -8px 20px -14px rgba(13,53,80,0.12),
    0 20px 50px -24px rgba(13,53,80,0.30);
}

.hero-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 140deg,
    rgba(255,255,255,0.55) 0deg,
    rgba(190,220,250,0.25) 90deg,
    rgba(255,255,255,0.10) 180deg,
    rgba(180,215,245,0.25) 270deg,
    rgba(255,255,255,0.55) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.hero-glass > * { position: relative; z-index: 1; }

.page-hero--cover .hero-glass { color: rgba(255, 255, 255, 0.50); }
.page-hero--cover .breadcrumb a {
  position: relative;
  color: rgba(255, 255, 255, 0.90);
}
.page-hero--cover .breadcrumb a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: 1rem;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.page-hero--cover .breadcrumb a:hover { color: #fff; }
.page-hero--cover .breadcrumb a:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
.page-hero--cover h1 { color: #fff; max-width: min(100%, 18em); margin-inline: auto; margin-bottom: 0.3rem; font-size: clamp(1.4rem, 1.05rem + 1.35vw, 1.95rem); }
.page-hero--cover .kicker { color: var(--gold); font-size: 0.50rem; margin-bottom: 0.45rem; white-space: nowrap; }
.section.page-hero--cover .lead {
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  margin-inline: auto;
  margin-top: 0.3rem;
  max-width: min(100%, 58rem);
}

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: var(--gold); }

.content-block {
  max-width: min(100%, 52rem);
  margin: 0 auto;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.75;
}

.content-block h2 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem);
  margin: 2.5rem 0 1rem;
  max-width: none;
  text-align: left;
}

.content-block h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.6rem;
}

.content-block p { margin: 0 0 1.1rem; }

.content-block ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.content-block li { margin-bottom: 0.45rem; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.back-link::before { content: "←"; }
.back-link:hover { color: var(--gold-hi); }

/* ——— Portal mock ——— */

.portal-card {
  max-width: 420px;
  margin: 3rem auto;
  padding: 2.25rem 2rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(3, 10, 24, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.portal-card h2 {
  text-align: center;
  margin: 0 0 1.75rem;
  font-size: 1.5rem;
  max-width: none;
}

.portal-card form { display: grid; gap: 0.9rem; }

.portal-card .form-field { gap: 0.35rem; }

.portal-card button { margin-top: 0.5rem; width: 100%; }

.portal-hint {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 1rem 0 0;
}