/* ============================================================================
   Jalapão Dive Center : styles.css
   Tema: azul-referência (awequatic), imersivo e escuro, que escurece no scroll.
   Paleta no :root. Sem framework: CSS puro, self-contained.
   ========================================================================== */

:root {
  /* Paleta da referência (awequatic): azul real, escurece com o scroll ------- */
  --abyss:      #050b1c;   /* fundo profundo (quase preto azulado) */
  --abyss-2:    #0a1838;
  --deep:       #112c56;   /* azul profundo (ref. secondary) */
  --teal:       #1b47a5;   /* azul real (ref. primary) */
  --emerald:    #2a5fd0;   /* azul vibrante */
  --spring:     #6f9bff;   /* azure (luz, destaques) */
  --spring-2:   #a9c5ff;   /* azure claro */
  --mist:       #eef3fb;   /* branco-gelo (texto) */
  --mist-dim:   #bcc8e0;   /* texto secundário (clareado p/ AA sobre azul-real) */
  --sand:       #f4f6fc;   /* CTA claro (ref. buttonPrimary #EEEEEE) */
  --sand-deep:  #d7def0;
  --sand-soft:  #ffffff;
  --ink:        #112c56;   /* texto escuro sobre botões claros */

  /* Escurecimento por scroll (0 no topo → ~0.9 no fundo) */
  --depth: 0;

  /* Tipografia (eco do display sans pesado da referência) -------------------- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;

  /* Escala tipográfica (tokens) — consolida os tamanhos em degraus intencionais.
     Tiers display (herói, títulos) seguem em clamp() inline (fluidos).
     Cada token abaixo substitui um grupo de valores quase idênticos. */
  --fs-micro: 0.68rem;  /* kickers, micro-caps, rótulos de meta de modal */
  --fs-2xs:   0.78rem;  /* meta de card, credenciais, notas, rótulos de form */
  --fs-xs:    0.85rem;  /* rótulos de UI pequenos (cargo, item de menu) */
  --fs-sm:    0.92rem;  /* nav, botões, bullets, CTA */
  --fs-base:  1rem;     /* corpo, inputs */
  --fs-md:    1.05rem;  /* subtítulos de seção, parágrafos do Sobre/FAQ */
  --fs-lg:    1.15rem;  /* hero lead, nomes da equipe */
  --fs-xl:    1.35rem;  /* wordmark da marca */
  --fs-2xl:   1.5rem;   /* títulos menores (equipe) */
  --fs-3xl:   1.7rem;   /* títulos de card, valores de stat */

  /* Escala de espaçamento (tokens) — ritmo do layout em degraus consistentes.
     `--space-section`/`-sm` nomeiam o padding vertical das seções (antes
     repetido inline em 6 lugares). A escala fina abaixo está documentada para
     uso incremental; micro-espaçamentos de componente seguem literais. */
  --space-section:    clamp(4rem, 9vw, 8rem);   /* exp, about, contact, faq */
  --space-section-sm: clamp(3rem, 7vw, 6rem);   /* gallery, unveiling */
  --space-2xs: 0.4rem;
  --space-xs:  0.6rem;
  --space-sm:  0.8rem;
  --space-md:  1rem;
  --space-lg:  1.2rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-4xl: 3rem;

  /* Estrutura ---------------------------------------------------------------- */
  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 18px;
  --radius-lg: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger: 90ms;        /* atraso em cascata do reveal (--i * --stagger) */

  --shadow-soft: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 14px 40px -16px rgba(47, 107, 230, 0.5);
}

/* ---- Reset enxuto --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

body {
  font-family: var(--body);
  color: var(--mist);
  background: var(--abyss);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--sand); color: var(--abyss); }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--sand); color: var(--abyss); padding: 0.6rem 1rem;
  border-radius: 10px; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--spring); outline-offset: 3px; border-radius: 6px; }

/* ============================================================================
   Camadas de fundo (profundidade)
   ========================================================================== */
.bg-deep {
  position: fixed; inset: 0; z-index: -3;
  /* topo = azul real claro; vai escurecendo (a camada .bg-depth aprofunda no scroll) */
  background:
    radial-gradient(125% 95% at 50% -18%, #3a6fe0 0%, #1b47a5 32%, #112c56 64%, #0a1838 100%);
}
/* Escurecimento progressivo por scroll — "descer para o fundo" */
.bg-depth {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 120%, #03060f, #02040c);
  opacity: var(--depth);
  transition: opacity 0.15s linear;
}
.bg-caustics {
  position: fixed; inset: -20%; z-index: -2; opacity: 0.5; pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 15%, rgba(111, 155, 255, 0.16), transparent 70%),
    radial-gradient(35% 25% at 80% 10%, rgba(47, 107, 230, 0.12), transparent 70%),
    radial-gradient(50% 40% at 60% 90%, rgba(17, 44, 86, 0.4), transparent 70%);
  filter: blur(10px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
.bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   Tipografia utilitária
   ========================================================================== */
/* Rótulo de seção (kicker) — tratamento único usado em TODAS as seções e no
   intro ("Pioneirismo"): tipografia display, traço de luz ACIMA do texto. */
.kicker {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--spring-2); /* AA: --spring falhava (3.1:1) sobre o topo do gradiente */
}
.kicker::before {
  content: ""; display: block; width: 28px; height: 2px; margin-bottom: 0.7rem;
  background: linear-gradient(90deg, var(--spring), transparent);
}

.section-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0.5rem 0 0.8rem;
}
.section-sub {
  color: var(--mist-dim);
  max-width: 48ch;
  font-size: var(--fs-md);
}
.section-head { max-width: var(--maxw); margin: 0 auto; }

/* ============================================================================
   Botões
   ========================================================================== */
.btn {
  --bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 700; font-size: var(--fs-sm);
  padding: 0.85rem 1.5rem; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              background-position 0.7s var(--ease), color 0.3s;
  white-space: nowrap;
}
.btn--lg { padding: 1.05rem 2rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }
/* Botão claro com "shimmer": faixa de luz azure que cruza no hover.
   Gradiente largo (220%) cuja posição desliza; o brilho --spring-2 passa uma vez. */
.btn--gold {
  background-image: linear-gradient(115deg,
    var(--sand-deep) 0%, var(--sand-soft) 34%, var(--spring-2) 50%,
    var(--sand-soft) 66%, var(--sand-deep) 100%);
  background-size: 220% 100%; background-position: 100% 0;
  color: var(--ink); box-shadow: var(--shadow-gold);
}
.btn--gold:hover, .btn--gold:focus-visible {
  background-position: 0 0; transform: translateY(-3px);
  box-shadow: 0 20px 50px -14px rgba(47, 107, 230, 0.7);
}
.btn--ghost {
  background: rgba(238, 243, 251, 0.04);
  color: var(--mist); border-color: rgba(111, 155, 255, 0.35);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--spring); background: rgba(111, 155, 255, 0.1); transform: translateY(-3px); }

/* ============================================================================
   Navegação
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5, 11, 28, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(111, 155, 255, 0.12);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 1rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--mist); }
.brand__logo { display: block; width: auto; height: 46px; filter: drop-shadow(0 0 14px rgba(47, 107, 230, 0.35)); }
.brand--lg .brand__logo { height: 116px; }
/* Divisor entre o ícone (emblema) e o wordmark: separa "ícone | nome" e evita
   a sensação de nome repetido (o emblema já traz o texto). */
.brand__divider { width: 1px; height: 30px; flex: none; background: linear-gradient(180deg, transparent, rgba(111, 155, 255, 0.55), transparent); }
.brand__mark { color: var(--spring); display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(47, 107, 230, 0.4)); }
.brand__text { display: flex; flex-direction: column; gap: 0.16rem; line-height: 1; }
.brand__text strong { font-family: var(--display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--mist); }
.brand__text span { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mist-dim); }

.nav__links { display: flex; gap: 1.8rem; margin-left: auto; }
.nav__links a { font-weight: 500; font-size: var(--fs-sm); color: var(--mist); position: relative; padding: 0.2rem 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--sand); transition: width 0.35s var(--ease);
}
.nav__links a:hover { color: var(--spring-2); }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 0.8rem; }

/* Bandeira (SVG inline): altura relativa ao texto, largura automática */
.flag {
  display: inline-block; height: 0.95em; width: auto; border-radius: 2px;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  vertical-align: -0.12em; flex: none;
}
.flag svg { display: block; height: 100%; width: auto; }

/* Seletor de idioma (picker de bandeiras) */
.lang-picker { position: relative; }
.lang-picker__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent; border: 1px solid rgba(111, 155, 255, 0.3);
  color: var(--mist); border-radius: 100px; padding: 0.4rem 0.7rem;
  font-family: var(--body); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: 0.05em;
  cursor: pointer; transition: border-color 0.3s, color 0.3s;
}
.lang-picker__btn:hover, .lang-picker__btn:focus-visible { border-color: var(--spring); color: var(--spring-2); }
.lang-picker__chev { font-size: 0.6rem; opacity: 0.8; transition: transform 0.3s var(--ease); }
.lang-picker__btn[aria-expanded="true"] .lang-picker__chev { transform: rotate(180deg); }

.lang-picker__menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
  min-width: 172px; padding: 0.4rem; display: grid; gap: 0.15rem;
  background: rgba(10, 24, 56, 0.96); /* --abyss-2 translúcido */
  border: 1px solid rgba(111, 155, 255, 0.22); border-radius: 14px;
  box-shadow: 0 18px 48px -16px rgba(3, 8, 22, 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lang-picker__menu[hidden] { display: none; }
.lang-picker__item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: transparent; border: 0; border-radius: 9px;
  padding: 0.5rem 0.6rem; cursor: pointer; text-align: left;
  color: var(--mist); font-family: var(--body); font-size: var(--fs-xs); font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.lang-picker__item .flag { height: 1.05em; }
.lang-picker__name { line-height: 1; }
.lang-picker__item:hover, .lang-picker__item:focus-visible { background: rgba(111, 155, 255, 0.14); color: var(--sand-soft); }
.lang-picker__item.is-current { background: rgba(47, 107, 230, 0.2); color: var(--spring-2); }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { width: 26px; height: 2px; background: var(--mist); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.3s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1rem var(--pad) 1.6rem;
  background: rgba(5, 11, 28, 0.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(111, 155, 255, 0.12);
}
.mobile-menu a { padding: 0.7rem 0; font-size: var(--fs-md); border-bottom: 1px solid rgba(238, 243, 251, 0.06); }
.mobile-menu .btn { margin-top: 0.8rem; }

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--pad) 5rem; max-width: var(--maxw); margin: 0 auto;
  overflow: hidden;
}
.hero__content { position: relative; z-index: 3; max-width: 760px; }
.hero__kicker { margin-bottom: 1.4rem; }

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 10.5vw, 8rem);
  line-height: 0.9; letter-spacing: -0.025em;
  display: flex; flex-direction: column;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.hero__l1 { font-weight: 500; color: var(--spring-2); }
.hero__l2 {
  font-weight: 900;
  background: linear-gradient(120deg, #ffffff, var(--spring-2), var(--emerald));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* O recorte do gradiente (background-clip: text) é pintado só na caixa do
     elemento; com line-height < 1 o til do "Ã" fica acima dela e some. O padding
     estende a caixa de pintura para cobrir o acento; a margem negativa mantém a
     posição visual (não desloca o empilhamento). */
  padding-top: 0.16em;
  margin-top: -0.16em;
}
.hero__l3 { font-weight: 800; color: var(--mist); }

.hero__lead { margin-top: 1.6rem; max-width: 46ch; font-size: var(--fs-lg); color: var(--mist-dim); }
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Constelação de fotos com parallax */
.hero__constellation { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float-img {
  position: absolute;
  border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 -8px 22px rgba(5, 11, 28, 0.45),
              inset 0 8px 18px rgba(169, 197, 255, 0.14),
              var(--shadow-soft);
  border: 1px solid rgba(111, 155, 255, 0.18);
  will-change: transform;
  /* A entrada anima SÓ opacity — o `transform` fica livre p/ o parallax (JS) o
     controlar. Se floatIn animasse transform com fill `forwards`, o valor final
     sobreporia o inline-transform do parallax e as bolhas nunca se moveriam. */
  opacity: 0;
  animation: floatIn 1.2s var(--ease) forwards;
}
@keyframes floatIn { to { opacity: 1; } }
.float-img::before { /* reflexo glossy da bolha */
  content: ""; position: absolute; z-index: 2; top: 13%; left: 17%;
  width: 30%; height: 24%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%);
  filter: blur(1px); pointer-events: none;
}
.float-img::after { /* brilho de superfície */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(111, 155, 255, 0.18), transparent 50%);
}

.hero__scroll {
  position: absolute; left: var(--pad); bottom: 1.6rem; z-index: 3;
  display: flex; align-items: center; gap: 0.8rem;
  font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: var(--mist-dim);
}
.hero__scroll-line { width: 60px; height: 1px; background: linear-gradient(90deg, var(--sand), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; width: 20px; background: var(--spring); animation: scrollPulse 2.4s var(--ease) infinite; }
@keyframes scrollPulse { 0% { transform: translateX(-20px); } 100% { transform: translateX(60px); } }

/* ============================================================================
   INTRO STRIP
   ========================================================================== */
/* Padding horizontal só no inner (não na seção), p/ a borda full-width continuar
   de ponta a ponta enquanto o conteúdo alinha com as demais seções (maxw + pad). */
.intro { padding: var(--space-4xl) 0; border-block: 1px solid rgba(111, 155, 255, 0.1); position: relative; }
.intro__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  /* Layout editorial empilhado: rótulo (kicker) ACIMA, statement abaixo, ambos
     ancorados na margem esquerda. O texto ocupa toda a largura e se justifica
     internamente — bloco retangular, alinhado à esquerda. */
  display: flex; flex-direction: column; gap: 1rem; align-items: stretch;
}
.intro__text {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.5vw, 1.8rem); line-height: 1.32; letter-spacing: -0.005em;
  color: var(--mist);
  /* Justificado dos dois lados p/ um bloco retangular e ordenado. A hifenização
     (lang correto no <html>) evita "rios"; limite alto = só palavras longas. */
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4;
}

/* ============================================================================
   EXPERIÊNCIAS
   ========================================================================== */
.exp { padding: var(--space-section) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.exp__group { margin-top: 3.5rem; }
.exp__group-label {
  font-family: var(--body); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: var(--fs-2xs); color: var(--sand); font-weight: 700;
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem;
}
.exp__group-label::after { content: ""; flex: 1; height: 1px; background: rgba(47, 107, 230, 0.25); }

.exp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.exp-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 420px; cursor: pointer; text-align: left;
  border: 1px solid rgba(111, 155, 255, 0.12); background: var(--abyss-2);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem; color: var(--mist);
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s var(--ease);
  isolation: isolate;
}
.exp-card__bg { position: absolute; inset: 0; z-index: -2; transition: transform 0.7s var(--ease); }
.exp-card__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Experiência aguardando fotos do cliente: suaviza o fundo e marca "em breve" */
.exp-card--pending .exp-card__bg img { filter: saturate(0.85) brightness(0.92); }
.exp-card__soon {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--spring-2); background: rgba(5, 11, 28, 0.55);
  border: 1px solid rgba(169, 197, 255, 0.4); border-radius: 999px; padding: 5px 12px;
}
.float-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-card::after { /* véu para legibilidade */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5, 11, 28, 0.92) 12%, rgba(5, 11, 28, 0.25) 55%, rgba(5, 11, 28, 0.1) 100%);
}
.exp-card:hover { transform: translateY(-6px); border-color: rgba(111, 155, 255, 0.4); box-shadow: var(--shadow-soft); }
.exp-card:hover .exp-card__bg { transform: scale(1.07); }

.exp-card__tagline { font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--spring-2); margin-bottom: 0.4rem; font-weight: 600; }
.exp-card__title { font-family: var(--display); font-size: var(--fs-3xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.exp-card__meta { margin-top: 0.7rem; display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--mist-dim); }
.exp-card__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.exp-card__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); }
.exp-card__more {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: var(--fs-xs); color: var(--sand);
}
.exp-card__more svg { transition: transform 0.4s var(--ease); }
.exp-card:hover .exp-card__more svg { transform: translateX(5px); }

/* ============================================================================
   UNVEILING NEW DEPTHS (teaser "em breve")
   ========================================================================== */
.unveiling { padding: var(--space-section-sm) var(--pad); }
.unveiling__inner {
  max-width: var(--maxw); margin: 0 auto; text-align: center; position: relative; overflow: hidden;
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.4rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(111, 155, 255, 0.2);
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(42, 95, 208, 0.45), transparent 62%),
    linear-gradient(160deg, rgba(17, 44, 86, 0.65), rgba(5, 11, 28, 0.55));
  box-shadow: var(--shadow-soft);
}
.unveiling__badge {
  display: inline-block; font-family: var(--body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--fs-micro);
  color: var(--spring-2); border: 1px solid rgba(111, 155, 255, 0.45);
  padding: 0.45rem 1.1rem; border-radius: 100px; margin-bottom: 1.5rem;
  position: relative; z-index: 2;
}
.unveiling__title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.4rem); line-height: 0.94; letter-spacing: -0.02em;
  position: relative; z-index: 2; color: var(--mist);
}
.unveiling__text { max-width: 56ch; margin: 1.4rem auto 0; color: var(--mist-dim); font-size: var(--fs-md); position: relative; z-index: 2; }
.unveiling__bubble {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
  /* Bolha de mergulho (não esfera sólida): miolo translúcido + anel de luz
     refratada na borda (rim-light). A luz da água "contorna" a bolha. */
  background: radial-gradient(circle at 50% 50%,
    transparent 56%,
    rgba(169, 197, 255, 0.07) 72%,
    rgba(206, 226, 255, 0.42) 90%,
    rgba(120, 160, 240, 0.10) 96%,
    transparent 100%);
  box-shadow: inset 0 0 30px rgba(140, 180, 255, 0.12),
              0 0 34px rgba(47, 107, 230, 0.16);
  width: 220px; height: 220px; top: -70px; right: -40px;
  animation: bob 8s var(--ease) infinite;
}
.unveiling__bubble::before { /* glint especular (luz pontual, alto-esquerda) */
  content: ""; position: absolute; top: 15%; left: 20%;
  width: 26%; height: 20%; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7), transparent 72%);
  filter: blur(0.5px);
}
.unveiling__bubble::after { /* contraluz inferior-direita (rim quente) */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 74% 82%, rgba(214, 232, 255, 0.5), transparent 30%);
}
.unveiling__bubble--2 { width: 130px; height: 130px; top: auto; bottom: -50px; left: -30px; right: auto; animation-duration: 6.5s; animation-delay: -3s; }

/* ============================================================================
   GALERIA
   ========================================================================== */
.gallery { padding: var(--space-section-sm) var(--pad); max-width: var(--maxw); margin: 0 auto; }
/* Galeria de "bolhas": placeholders circulares de tamanhos variados, flutuando.
   Flex-wrap centralizado — agrupa como bolhas de ar, sem buracos. */
.gallery__grid {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.8rem);
}
.gallery__tile {
  --size: clamp(130px, 19vw, 190px);
  width: var(--size); height: var(--size); flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; position: relative;
  border: 1px solid rgba(111, 155, 255, 0.2);
  box-shadow: inset 0 -10px 26px rgba(5, 11, 28, 0.5),
              inset 0 10px 22px rgba(169, 197, 255, 0.16),
              0 16px 34px -14px rgba(5, 11, 28, 0.75);
  animation: bob 7s var(--ease) infinite;
}
.gallery__tile--lg { --size: clamp(170px, 26vw, 250px); }
.gallery__tile--sm { --size: clamp(100px, 15vw, 150px); }
.gallery__tile:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2.5s; }
.gallery__tile:nth-child(3n) { animation-duration: 6s; animation-delay: -4s; }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gallery__tile:hover img { transform: scale(1.08); }
/* reflexo glossy de bolha */
.gallery__tile::before {
  content: ""; position: absolute; z-index: 2; top: 12%; left: 16%;
  width: 34%; height: 28%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%);
  filter: blur(1px); pointer-events: none;
}
.gallery__tile::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 130%, transparent 58%, rgba(5, 11, 28, 0.45));
  opacity: 0; transition: opacity 0.4s;
}
.gallery__tile:hover::after { opacity: 1; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.gallery__note { margin-top: 1.5rem; text-align: center; font-size: var(--fs-2xs); color: var(--mist-dim); font-style: italic; }

/* ============================================================================
   GALERIA — interação: clicar ESTOURA a bolha e ABRE a foto ampliada (lightbox)
   ============================================================================ */
.gallery__tile { cursor: zoom-in; }
.gallery__tile:focus-visible { outline: 2px solid var(--spring-2); outline-offset: 4px; }
/* Squash rápido da bolha ao clicar; as gotículas do estouro são injetadas no
   body (fora do overflow:hidden da bolha) por spawnBurst() no main.js. */
.gallery__tile.is-bursting { animation: tileBurst 0.5s var(--ease); }
@keyframes tileBurst {
  0%   { transform: scale(1); }
  26%  { transform: scale(1.16); }
  58%  { transform: scale(0.82); opacity: 0.45; }
  100% { transform: scale(1); opacity: 1; }
}

/* Estouro: clarão central + anel de luz + gotículas projetadas do centro. */
.burst { position: fixed; z-index: 310; pointer-events: none; }
.burst__flash, .burst__ring {
  position: absolute; left: 0; top: 0; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
}
.burst__flash {
  background: radial-gradient(circle, rgba(214, 232, 255, 0.6), rgba(169, 197, 255, 0.18) 45%, transparent 68%);
  animation: burstFlash 0.42s var(--ease) forwards;
}
@keyframes burstFlash {
  from { transform: scale(0.35); opacity: 0.95; }
  to   { transform: scale(1.55); opacity: 0; }
}
.burst__ring {
  border: 2.5px solid rgba(214, 232, 255, 0.85);
  box-shadow: 0 0 26px rgba(111, 155, 255, 0.45), inset 0 0 14px rgba(206, 226, 255, 0.35);
  animation: burstRing 0.55s var(--ease) forwards;
}
@keyframes burstRing {
  from { transform: scale(0.3); opacity: 0.95; }
  to   { transform: scale(1.45); opacity: 0; }
}
.burst__drop {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(169, 197, 255, 0.65) 60%, transparent);
  box-shadow: 0 0 10px rgba(206, 226, 255, 0.7);
  animation: burstDrop 0.66s var(--ease) forwards;
}
@keyframes burstDrop {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* ============================================================================
   LIGHTBOX — foto maximizada (revelada quando a bolha estoura)
   ============================================================================ */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(1.2rem, 5vh, 4rem) clamp(1rem, 5vw, 4rem); }
/* Sem isto, `.lightbox{display:grid}` venceria o atributo [hidden] e o overlay
   invisível ficaria por cima da página interceptando TODO clique (igual ao modal). */
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 18, 0.86); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.35s; }
.lightbox.is-open .lightbox__backdrop { opacity: 1; }
.lightbox__figure { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
.lightbox__close {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(5, 11, 28, 0.65); border: 1px solid rgba(111, 155, 255, 0.25);
  color: var(--mist); cursor: pointer; transition: background 0.3s, transform 0.3s;
}
.lightbox__close:hover { background: var(--sand); color: var(--abyss); transform: rotate(90deg); }
.lightbox__img {
  display: block; max-width: min(92vw, 920px); max-height: 80vh; width: auto; height: auto;
  border-radius: var(--radius-lg); border: 1px solid rgba(111, 155, 255, 0.25);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.85); background: var(--abyss-2);
  transform: scale(0.55); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.35s;
}
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }
.lightbox__cap {
  color: var(--mist-dim); font-size: var(--fs-sm); text-align: center; max-width: 56ch;
  opacity: 0; transition: opacity 0.4s 0.15s;
}
.lightbox.is-open .lightbox__cap { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gallery__tile.is-bursting { animation: none; }
  .lightbox__img { transition: none; transform: none; opacity: 1; }
  .lightbox__backdrop, .lightbox__cap { transition: none; }
}

/* ============================================================================
   SOBRE & EQUIPE
   ========================================================================== */
.about { padding: var(--space-section) var(--pad); max-width: var(--maxw); margin: 0 auto; }
/* Empilhado: copy (cabeçalho + texto) acima, equipe abaixo (cards 2-up);
   a faixa de stats fecha a base full-width. */
.about__grid { display: flex; flex-direction: column; gap: clamp(2.2rem, 4vw, 3.4rem); }
.about__p { color: var(--mist-dim); margin-top: 1.1rem; font-size: var(--fs-md); max-width: 54ch; }

/* Faixa full-width ao pé da seção: base forte, fecha a composição e ecoa a
   faixa de canais do Contato (mesmo ritmo entre as duas seções). */
.about__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem;
  margin-top: clamp(2.6rem, 5vw, 4.2rem); padding-top: 2.2rem;
  border-top: 1px solid rgba(111, 155, 255, 0.14);
}
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat__value { font-family: var(--display); font-size: var(--fs-3xl); font-weight: 600; color: var(--spring-2); }
.stat__label { font-size: var(--fs-2xs); color: var(--mist-dim); letter-spacing: 0.04em; max-width: 16ch; }

.about__team-title { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 500; margin-bottom: 1.2rem; }
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.team-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(17, 44, 86, 0.35), rgba(10, 24, 56, 0.6));
  border: 1px solid rgba(111, 155, 255, 0.14);
}
.team-card__photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(111, 155, 255, 0.25); box-shadow: inset 0 -4px 12px rgba(5, 11, 28, 0.4); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Sem retrato ainda: monograma com iniciais (em vez do ícone de câmera) */
.team-card__monogram {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.02em;
  color: var(--spring-2); background: linear-gradient(150deg, var(--teal), var(--deep));
}
/* Retrato real é clicável (amplia no lightbox) */
.team-card__photo--zoom { cursor: pointer; }
.team-card__photo--zoom img { transition: transform 0.3s var(--ease); }
.team-card__photo--zoom:hover img { transform: scale(1.07); }
.team-card__photo--zoom:focus-visible { outline: 2px solid var(--spring-2); outline-offset: 3px; }
.team-card__name { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.1; }
.team-card__role { font-size: var(--fs-xs); color: var(--spring-2); font-weight: 600; }
.team-card__creds { font-size: var(--fs-2xs); color: var(--mist-dim); letter-spacing: 0.04em; margin-top: 0.15rem; }

/* ============================================================================
   CONTATO
   ========================================================================== */
.contact { padding: var(--space-section) var(--pad); max-width: var(--maxw); margin: 0 auto; }
/* Layout empilhado e centrado: cabeçalho acima, formulário (medida focada)
   abaixo, e a localização como CTA único ao pé. */
.contact__grid {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}
.contact__intro { max-width: 60ch; }
/* Kicker centrado: o traço de luz vai ao centro em vez de à esquerda. */
.contact__intro .kicker::before { margin-left: auto; margin-right: auto; }
.contact__lead { color: var(--mist-dim); margin-top: 1rem; font-size: var(--fs-md); max-width: 52ch; margin-inline: auto; text-align: center; }
.contact__form { width: min(640px, 100%); text-align: left; }

/* Localização: tile único, centrado (não mais faixa de 3), com respiro do form. */
.contact__channels { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.2rem); }
.contact__channels .channel { width: min(460px, 100%); text-align: left; }
.channel {
  display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem;
  border-radius: var(--radius); border: 1px solid rgba(111, 155, 255, 0.14);
  background: rgba(10, 24, 56, 0.5); transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
a.channel:hover { border-color: var(--spring); transform: translateX(4px); background: rgba(17, 44, 86, 0.35); }
.channel__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(111, 155, 255, 0.1); color: var(--spring-2); flex-shrink: 0; }
.channel__txt { display: flex; flex-direction: column; }
.channel__txt small { font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist-dim); }
.channel__txt strong { font-weight: 600; }
.channel__hint {
  margin-top: 0.2rem; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--spring-2);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.channel__hint::after { content: "\2197"; font-weight: 400; } /* seta ↗ */

.contact__form {
  background: linear-gradient(150deg, rgba(17, 44, 86, 0.28), rgba(10, 24, 56, 0.55));
  border: 1px solid rgba(111, 155, 255, 0.16); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-soft);
}
.field { margin-bottom: 1.1rem; }
.field label, .field__label { display: block; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.5rem; color: var(--mist); }
.field input, .field textarea {
  width: 100%; font-family: var(--body); font-size: var(--fs-base); color: var(--mist);
  background: rgba(5, 11, 28, 0.55); border: 1px solid rgba(111, 155, 255, 0.18);
  border-radius: 12px; padding: 0.8rem 1rem; transition: border-color 0.3s, background 0.3s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(170, 184, 212, 0.6); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--spring); background: rgba(5, 11, 28, 0.8); }
.field textarea { resize: vertical; min-height: 110px; }

.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 100px;
  border: 1px solid rgba(111, 155, 255, 0.2); font-size: var(--fs-xs); color: var(--mist-dim);
  transition: all 0.3s var(--ease); cursor: pointer;
}
.chip input:checked + span { background: var(--spring); color: var(--abyss); border-color: var(--spring); font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid rgba(111, 155, 255, 0.12); margin-top: var(--space-4xl); padding: clamp(2.6rem, 5vw, 4rem) var(--pad) 1.8rem; background: rgba(5, 11, 28, 0.6); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }

/* Topo: marca + tagline à esquerda; contato + redes à direita. Duas zonas
   (em vez de 4 colunas com títulos repetidos) = mais leve e elegante. */
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem 3rem; flex-wrap: wrap; }
.footer__tagline { color: var(--mist-dim); margin-top: 1rem; max-width: 32ch; font-size: var(--fs-sm); }
.footer__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.footer__contact { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.footer__contact a, .footer__contact span { color: var(--mist-dim); font-size: var(--fs-sm); transition: color 0.3s; }
.footer__contact a:hover { color: var(--spring-2); }

/* Redes como ícones (não mais links de texto com título "Redes"). */
.footer__social { display: flex; gap: 0.6rem; }
.footer__icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--mist-dim); border: 1px solid rgba(111, 155, 255, 0.18); background: rgba(111, 155, 255, 0.06);
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
}
.footer__icon:hover { color: var(--spring-2); border-color: var(--spring); background: rgba(111, 155, 255, 0.12); transform: translateY(-2px); }
.footer__icon svg { width: 18px; height: 18px; display: block; }

/* Navegação enxuta em linha, sob a tagline (equilibra a coluna da marca). */
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 1.5rem; }
.footer__nav a { color: var(--mist-dim); font-size: var(--fs-sm); transition: color 0.3s; }
.footer__nav a:hover { color: var(--spring-2); }

/* Base: © à esquerda + voltar ao topo à direita, sobre um filete. */
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1.6rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid rgba(238, 243, 251, 0.08); font-size: var(--fs-2xs); color: rgba(170, 184, 212, 0.7); }
.footer__back { color: var(--sand); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }

/* Ressalva de placeholder: letra miúda discreta — opacidade ≥0.78 p/ passar
   WCAG AA (4.5:1) no fundo escuro (0.5 reprovava em 3.2:1). */
.footer__placeholder { margin-top: 1rem; font-size: var(--fs-2xs); color: rgba(170, 184, 212, 0.78); font-style: italic; }

/* Status do formulário (aria-live): confirmação / link de fallback se o popup for bloqueado. */
.form__status { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--mist-dim); min-height: 1.2em; }
.form__status a { color: var(--spring-2); font-weight: 600; text-decoration: underline; }

/* Fallback sem JS (dentro de <noscript>): só aparece com JS desabilitado. */
.noscript-list { max-width: 64ch; margin: 1.6rem 0 0; padding: 0; list-style: none; color: var(--mist-dim); line-height: 1.7; }
.noscript-list li { margin-bottom: 0.5rem; }
.noscript-list strong, .noscript-list dt { color: var(--mist); }
.noscript-list dd { margin: 0 0 1rem; }

/* ============================================================================
   MODAL
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 18, 0.75); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.4s; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; z-index: 1; width: min(960px, 100%); max-height: 90svh; overflow: auto;
  background: linear-gradient(160deg, var(--abyss-2), var(--abyss));
  border: 1px solid rgba(111, 155, 255, 0.2); border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8);
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(24px) scale(0.98); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s;
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); opacity: 1; }
.modal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 4;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(5, 11, 28, 0.6); border: 1px solid rgba(111, 155, 255, 0.25); color: var(--mist); cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.modal__close:hover { background: var(--sand); color: var(--abyss); transform: rotate(90deg); }
/* Mídia do modal: cluster de bolhas subindo */
.modal__media {
  position: relative; overflow: hidden; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.6rem, 2vh, 1.1rem); padding: clamp(1.4rem, 4vh, 2.6rem) 1rem;
  background:
    radial-gradient(110% 70% at 30% 8%, rgba(42, 95, 208, 0.22), transparent 60%),
    linear-gradient(165deg, var(--teal), var(--abyss));
}
.modal-bubble {
  position: relative; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 1px solid rgba(111, 155, 255, 0.22);
  box-shadow: inset 0 -10px 26px rgba(5, 11, 28, 0.5),
              inset 0 10px 22px rgba(169, 197, 255, 0.16),
              0 18px 38px -14px rgba(5, 11, 28, 0.8);
  animation: bob 7s var(--ease) infinite;
}
.modal-bubble img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-bubble::before {
  content: ""; position: absolute; z-index: 2; top: 13%; left: 17%;
  width: 32%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%);
  filter: blur(1px); pointer-events: none;
}
.modal-bubble.b-0 { width: 60%; }
.modal-bubble.b-1 { width: 42%; margin-right: 30%; animation-duration: 8.5s; animation-delay: -2.5s; }
.modal-bubble.b-2 { width: 32%; margin-left: 36%; animation-duration: 6s; animation-delay: -4s; }

/* ============================================================================
   BOLHAS DE MERGULHO — tratamento unificado (efeito "Novas Profundidades")
   ----------------------------------------------------------------------------
   Toda bolha do site (constelação do hero, galeria, cluster do modal) lê como
   bolha de ar, não esfera sólida: miolo translúcido + anel de luz refratada na
   borda (rim-light). O glint especular continua vindo do ::before de cada uma.
   O placeholder agora é transparente (placeholder(..., hollow=true)), então o
   fundo da seção aparece pelo miolo; quando entrar foto real, o rim/glint
   passam a ler como "imagem vista através da bolha". Declarado depois das
   definições individuais para sobrescrever as sombras de "esfera sólida".
   ========================================================================== */
.float-img, .gallery__tile, .modal-bubble {
  /* Idêntico a .unveiling__bubble: miolo translúcido + anel de luz na borda. */
  background: radial-gradient(circle at 50% 50%,
    transparent 56%,
    rgba(169, 197, 255, 0.07) 72%,
    rgba(206, 226, 255, 0.42) 90%,
    rgba(120, 160, 240, 0.10) 96%,
    transparent 100%);
  border-color: transparent;
  box-shadow: inset 0 0 30px rgba(140, 180, 255, 0.12),
              0 0 34px rgba(47, 107, 230, 0.16);
}

.modal__body { padding: clamp(1.6rem, 3vw, 2.6rem); }
.modal__tagline { color: var(--spring-2); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.04em; }
.modal__title { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.04; margin: 0.4rem 0 0.9rem; }
.modal__desc { color: var(--mist-dim); }
.modal__bullets { margin: 1.3rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.modal__bullets li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); }
.modal__bullets li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--spring-2), var(--teal)); box-shadow: 0 0 8px rgba(47,107,230,0.4); }
.modal__meta { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; margin: 1.2rem 0 1.8rem; padding: 1.1rem 0; border-block: 1px solid rgba(111, 155, 255, 0.14); }
.modal__meta > div { display: flex; flex-direction: column; gap: 0.3rem; }
.modal__meta dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.16em; color: var(--mist-dim); }
.modal__meta dd { font-weight: 600; font-size: var(--fs-sm); margin: 0; color: var(--mist); }

body.no-scroll { overflow: hidden; }

/* ============================================================================
   Dúvidas (FAQ) : <details> acessível, funciona sem JS
   ========================================================================== */
/* Alinhada às demais seções (maxw + pad); a lista mantém medida de leitura
   confortável, ancorada à esquerda em vez de centrada na seção. */
.faq { padding: var(--space-section) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.faq__list { margin-top: 2.2rem; max-width: 940px; border-top: 1px solid rgba(111, 155, 255, 0.14); }
.faq__item { border-bottom: 1px solid rgba(111, 155, 255, 0.14); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.2rem 0.2rem;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.02rem, 2.4vw, 1.25rem);
  color: var(--mist); transition: color 0.3s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover, .faq__item:focus-within .faq__q { color: var(--spring-2); }
.faq__icon {
  flex: 0 0 auto; width: 26px; height: 26px; position: relative; border-radius: 50%;
  border: 1px solid rgba(111, 155, 255, 0.4);
  transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--spring-2); transform: translate(-50%, -50%);
}
.faq__icon::before { width: 11px; height: 1.6px; }
.faq__icon::after  { width: 1.6px; height: 11px; }
details[open] .faq__icon {            /* "+" gira para "×" ao abrir */
  transform: rotate(135deg); border-color: var(--spring); background: rgba(47, 107, 230, 0.18);
}
.faq__a { color: var(--mist-dim); padding: 0 0.2rem 1.4rem; max-width: 72ch; font-size: var(--fs-md); line-height: 1.7; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details[open] .faq__a { animation: faqIn 0.35s var(--ease); }

/* ============================================================================
   Botão flutuante de WhatsApp : CTA persistente (rótulo expande no hover)
   ========================================================================== */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 200;
  display: inline-flex; align-items: center; height: 58px; border-radius: 100px;
  background: linear-gradient(135deg, var(--teal), var(--abyss-2));
  border: 1px solid rgba(169, 197, 255, 0.35); color: var(--mist);
  box-shadow: 0 16px 40px -12px rgba(5, 11, 28, 0.85); text-decoration: none;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float::before {           /* anel de pulso (atrás do pill) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgba(47, 107, 230, 0.5);
}
.wa-float.is-visible::before { animation: waPulse 3.6s ease-out 1.4s infinite; }
@keyframes waPulse {
  0%        { box-shadow: 0 0 0 0 rgba(47, 107, 230, 0.45); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(47, 107, 230, 0); }
}
.wa-float__ico { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; color: var(--spring-2); }
.wa-float__label {
  font-family: var(--body); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.45s var(--ease), opacity 0.3s var(--ease), padding 0.45s var(--ease);
}
.wa-float:hover, .wa-float:focus-visible {
  transform: translateY(-2px); outline: none;
  box-shadow: 0 22px 52px -14px rgba(5, 11, 28, 0.9), 0 0 0 6px rgba(47, 107, 230, 0.16);
}
.wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label {
  max-width: 220px; opacity: 1; padding-right: 1.3rem;
}

/* ============================================================================
   Reveal on scroll
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger)); /* cascata por irmãos */
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .float-img { opacity: 1; transform: none; animation: none; }
}

/* ============================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 980px) {
  .exp__grid { grid-template-columns: repeat(2, 1fr); }
  .modal__panel { grid-template-columns: 1fr; }
  .modal__media { flex-direction: row; min-height: 0; padding: 1.4rem; gap: 0.8rem; }
  .modal-bubble.b-0 { width: 32%; }
  .modal-bubble.b-1 { width: 26%; margin: 0; align-self: flex-start; }
  .modal-bubble.b-2 { width: 22%; margin: 0; align-self: flex-end; }
}
@media (max-width: 760px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .exp__grid { grid-template-columns: 1fr; }
  .hero__constellation { opacity: 0.5; }
  .intro__inner { gap: 0.8rem; }
  /* Faixa de stats e cards da equipe empilham no mobile. */
  .about__stats, .team { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .about__stats { gap: 1.4rem; }
  /* Folga no rodapé p/ o conteúdo inferior não ficar sob o botão flutuante de WhatsApp. */
  .footer { padding-bottom: 5.5rem; }
  /* H4: enxuga o lockup da marca p/ não disputar espaço com idioma + menu. */
  .nav__inner { gap: 0.9rem; }
  .brand { gap: 0.5rem; }
  .brand__logo { height: 38px; }
  .brand__divider { height: 24px; }
  .brand__text strong { font-size: var(--fs-lg); }
  .brand__text span { font-size: 0.52rem; letter-spacing: 0.22em; }
}
@media (max-width: 360px) {
  /* Guarda dura: telas muito estreitas ficam só com emblema + nome. */
  .brand__divider, .brand__text span { display: none; }
  .brand__text strong { font-size: var(--fs-md); }
}

/* ============================================================================
   TIPOGRAFIA — prosa justificada com hifenização
   ----------------------------------------------------------------------------
   Bordas alinhadas dos dois lados dão harmonia/ordem ao corpo de texto.
   A hifenização (hyphens: auto) depende do `lang` correto no <html>, que o
   main.js seta por idioma (pt-BR/en/es/fr/de) — sem ela, o justificado abriria
   "rios" de espaço. hyphenate-limit-chars evita hífens em palavras curtas.
   NÃO justificamos: títulos-display e a tagline do rodapé (estreita, 36ch),
   onde justificar prejudicaria. O statement do intro é justificado à parte,
   na sua própria regra (.intro__text), por ser um bloco editorial.
   ========================================================================== */
.hero__lead,
.section-sub,
.about__p,
.modal__desc,
.faq__a {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

/* ============================================================================
   PÁGINA DE RESERVA (/reservar) — stepper
   ----------------------------------------------------------------------------
   Reusa tokens, .btn, .field input/textarea e .chip do site. A nav fica
   sempre "stuck" (sem hero translúcido sobre ela). Tudo abaixo é escopado em
   .bk-* para não vazar no resto do site.
   ========================================================================== */
.bk-body { background: var(--abyss); }
.bk-main { max-width: 880px; margin: 0 auto; padding: clamp(6.5rem, 12vw, 8.5rem) var(--pad) var(--space-4xl); }

.bk-hero { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.bk-hero__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02; font-size: clamp(1.9rem, 6vw, 3rem); margin: 0.5rem 0 0.7rem; }
.bk-hero__lead { color: var(--mist-dim); max-width: 56ch; margin: 0 auto; font-size: var(--fs-md); }

/* ---- Cartão (mesma linguagem do .contact__form) ---- */
.bk-card {
  background: linear-gradient(150deg, rgba(17, 44, 86, 0.28), rgba(10, 24, 56, 0.55));
  border: 1px solid rgba(111, 155, 255, 0.16); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2.6rem); box-shadow: var(--shadow-soft);
}
.bk-card[hidden] { display: none; }

/* ---- Indicador de etapas ---- */
.bk-steps { list-style: none; display: flex; gap: 0.4rem; margin: 0 0 1.4rem; padding: 0; counter-reset: none; }
.bk-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; color: var(--mist-dim); }
.bk-steps__item::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: rgba(111, 155, 255, 0.18); z-index: 0; }
.bk-steps__item:first-child::before { display: none; }
.bk-steps__dot {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-xs);
  background: rgba(5, 11, 28, 0.7); border: 1px solid rgba(111, 155, 255, 0.3); color: var(--mist-dim);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.bk-steps__label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.bk-steps__item.is-active .bk-steps__dot { background: var(--spring); border-color: var(--spring); color: var(--abyss); }
.bk-steps__item.is-active { color: var(--mist); }
.bk-steps__item.is-done .bk-steps__dot { background: rgba(47, 107, 230, 0.25); border-color: var(--spring); color: var(--spring-2); }
.bk-steps__item.is-done::before { background: var(--spring); }

.bk-progress { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mist-dim); margin: 0 0 1.4rem; }
.bk-progress strong { color: var(--spring-2); }

.bk-step__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 3.5vw, 1.7rem); margin: 0 0 1.2rem; line-height: 1.1; }

/* ---- Campos (estende .field) ---- */
.bk-field { margin-bottom: 1.1rem; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.bk-input, .bk-select, .bk-textarea {
  width: 100%; font-family: var(--body); font-size: var(--fs-base); color: var(--mist);
  background: rgba(5, 11, 28, 0.55); border: 1px solid rgba(111, 155, 255, 0.18);
  border-radius: 12px; padding: 0.8rem 1rem; transition: border-color 0.3s, background 0.3s;
}
.bk-textarea { resize: vertical; min-height: 84px; }
.bk-input:focus, .bk-select:focus, .bk-textarea:focus { outline: none; border-color: var(--spring); background: rgba(5, 11, 28, 0.8); }
.bk-input::placeholder, .bk-textarea::placeholder { color: rgba(170, 184, 212, 0.6); }
.bk-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--spring-2) 50%), linear-gradient(135deg, var(--spring-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.15rem, calc(100% - 13px) 1.15rem; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.bk-select option { background: var(--abyss-2); color: var(--mist); }
.bk-req { color: var(--spring-2); }
.bk-field__err { display: block; margin-top: 0.35rem; font-size: var(--fs-2xs); color: #ff9c8a; }
.bk-field.is-error .bk-input, .bk-field.is-error .bk-select, .bk-field.is-error .bk-textarea { border-color: #ff7a63; background: rgba(90, 20, 14, 0.25); }

/* ---- Sub-grupos (certificação, responsável, participante) ---- */
.bk-person { border: 1px solid rgba(111, 155, 255, 0.14); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.4rem); margin-bottom: 1.2rem; }
.bk-person__legend { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); color: var(--spring-2); padding: 0 0.5rem; }
.bk-subgroup { margin-top: 0.8rem; padding-top: 0.9rem; border-top: 1px dashed rgba(111, 155, 255, 0.18); }
.bk-subgroup--minor { border-color: rgba(255, 190, 120, 0.35); }
.bk-subgroup__title { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mist-dim); margin: 0 0 0.7rem; font-weight: 700; }
.bk-note { font-size: var(--fs-sm); color: var(--mist-dim); margin: 0 0 1rem; }
.bk-note--cert { padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(47, 107, 230, 0.12); border: 1px solid rgba(111, 155, 255, 0.22); color: var(--spring-2); }

/* ---- Questionário de saúde ---- */
.bk-hq { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(111, 155, 255, 0.1); }
.bk-hq:last-of-type { border-bottom: none; }
.bk-hq__text { font-size: var(--fs-sm); color: var(--mist); max-width: 46ch; }
.bk-hq__opts { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.bk-chip span { padding: 0.35rem 0.9rem; }
.bk-flag { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: rgba(120, 40, 20, 0.22); border: 1px solid rgba(255, 140, 110, 0.4); }
.bk-flag__title { display: block; color: #ffb9a6; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-sm); margin-bottom: 0.4rem; }
.bk-flag p { font-size: var(--fs-sm); color: var(--mist-dim); margin: 0 0 0.7rem; }
.bk-allclear { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--spring-2); }
.bk-disclaimer { margin-top: 1rem; font-size: var(--fs-2xs); color: rgba(170, 184, 212, 0.7); font-style: italic; }

/* ---- Checkbox de consentimento / ciência ---- */
.bk-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--mist); cursor: pointer; margin-bottom: 0.8rem; line-height: 1.5; }
.bk-check input { margin-top: 0.25rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--spring); cursor: pointer; }
.bk-consent.is-error { outline: 1px solid #ff7a63; outline-offset: 6px; border-radius: var(--radius); }

/* ---- Revisão ---- */
.bk-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.4rem; margin: 0 0 1.3rem; padding: 1.1rem 0; border-block: 1px solid rgba(111, 155, 255, 0.14); }
.bk-summary dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mist-dim); }
.bk-summary dd { margin: 0.2rem 0 0; font-weight: 600; color: var(--mist); }
.bk-people { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bk-people li { font-size: var(--fs-sm); color: var(--mist-dim); }
.bk-people strong { color: var(--mist); }
.bk-tag { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 100px; font-size: var(--fs-micro); background: rgba(255, 190, 120, 0.16); border: 1px solid rgba(255, 190, 120, 0.4); color: #ffce9a; }
.bk-privacy { margin-top: 0.8rem; font-size: var(--fs-2xs); color: rgba(170, 184, 212, 0.78); font-style: italic; }

/* ---- Ações ---- */
.bk-actions { display: flex; gap: 0.8rem; justify-content: space-between; margin-top: 1.8rem; flex-wrap: wrap; }
.bk-actions--center { justify-content: center; }
.bk-actions #bkNext, .bk-actions #bkSubmit { margin-left: auto; }
/* .btn define display:inline-flex e venceria o [hidden] do UA — força ocultar. */
.bk-actions .btn[hidden], #bkDone[hidden] { display: none !important; }

/* ---- Conclusão ---- */
.bk-done { text-align: center; margin-top: 1.4rem; }
.bk-done__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: var(--abyss); background: radial-gradient(circle at 35% 30%, var(--spring-2), var(--spring)); box-shadow: 0 0 30px rgba(47, 107, 230, 0.4); }

@media (max-width: 600px) {
  .bk-row { grid-template-columns: 1fr; gap: 0; }
  .bk-summary { grid-template-columns: 1fr; }
  .bk-steps__label { display: none; }
  .bk-hq { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-main *, .bk-card { scroll-behavior: auto; }
}