/* ==========================================================
   MERGULHO — tudo abaixo do topo fica "debaixo d'água"
   Gerado por: node src/gerar-agua.js  (junta este arquivo com
   as regras do tema escuro aplicadas às seções .submerso)
   ========================================================== */

/* o fundo animado fica fixo atrás do site inteiro */
.mar { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; display: block; pointer-events: none; }
/* a cena aparece quando o pátio 3D termina de carregar */
.mar { opacity: 0; transition: opacity 1.4s ease; }
.mar.pronta { opacity: 1; }
html.com-mar body { background-color: #DCD5EF; }
html.com-mar .hero--cena, :root.com-mar[data-tema] .hero--cena { background: transparent; }
/* sem WebGL ou com "reduzir animações": um mar em degradê */
html.sem-mar body { background: linear-gradient(180deg, #5C79C8 0%, #23357A 30%, #0E1648 70%, #060A26 100%) fixed; }

/* granulado de filme no site todo */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .45 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grao .8s steps(5) infinite;
}

/* ---------- títulos: itálico serifado + fonte da marca ---------- */
.section__title { font-weight: 600; letter-spacing: -0.04em; }
.palavra--serifa > span,
.section__title .serifa { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.07em; }
.troca__lista span { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(2.3rem, 5.8vw, 4.2rem); }
.passos__nome { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.faixa__track span:nth-of-type(even) { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.7vw, 1.95rem); }

/* ---------- regras do tema escuro aplicadas debaixo d'água (geradas) ---------- */
.submerso {
  --bg: #030B1A;
  --bg-2: #061430;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .08);
  --line: rgba(160, 196, 255, .14);
  --line-strong: rgba(160, 196, 255, .26);
  --text: #EEF4FF;
  --muted: #9DB0CC;
  --dim: #6B7E9C;
  --accent: #1CB7FD;
  --shadow: 0 30px 70px -35px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

.submerso .btn--primary,
:is(.btn--primary).submerso { background: var(--grad); }

.submerso .btn--primary:hover,
:is(.btn--primary:hover).submerso { box-shadow: 0 16px 34px -12px rgba(28, 183, 253, .6); }

.submerso .section--escura,
:is(.section--escura).submerso { background: #061430; }

.submerso .faixa,
:is(.faixa).submerso { background: rgba(255, 255, 255, .02); }

.submerso .v3d__sombra,
:is(.v3d__sombra).submerso { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), transparent 70%); }

.submerso .tela,
:is(.tela).submerso { background: #0A1A33; }

.submerso .conversa,
:is(.conversa).submerso { background: #0A1A33; }

.submerso .section--contato,
:is(.section--contato).submerso { background: #061430; }

.submerso .form-card,
:is(.form-card).submerso { background: rgba(255, 255, 255, .03); }

.submerso .field input,
:is(.field input).submerso,
.submerso .field select,
:is(.field select).submerso,
.submerso .field textarea,
:is(.field textarea).submerso { background: rgba(0, 0, 0, .25); }

.submerso .field__error,
:is(.field__error).submerso { color: #FF8A8A; }

.submerso .footer,
:is(.footer).submerso { background: #020814; }

.submerso .cartao--cta,
:is(.cartao--cta).submerso { background: linear-gradient(150deg, #003FAB, #0A84EA); }

.submerso .pilula--vazada,
:is(.pilula--vazada).submerso { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }

/* ==========================================================
   AJUSTES FINAIS DAS SEÇÕES SUBMERSAS (vêm depois das regras geradas)
   ========================================================== */

/* as seções ficam transparentes para o mar aparecer atrás */
.submerso { color: var(--text); }
.angulos.submerso, .servicos-lado.submerso, .section.submerso, .faixa.submerso, .footer.submerso {
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}
.section--escura.submerso::before, .section--escura.submerso::after { display: none; }
.footer.submerso { border-top: 1px solid rgba(220, 230, 255, .14); }
/* sem sombra nos títulos: a animação palavra por palavra cortaria a sombra em retângulos */
.submerso .section__title, .submerso h2, .submerso h3 { color: #F3F5FF; }
.submerso { --accent: #A9DBFF; }
.submerso .eyebrow { color: #BFE4FF; }
.submerso .cartao--cta .btn { background: #fff; color: #12204A; }
.submerso .cartao--cta .btn:hover { background: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5); }

/* vidro fosco escuro: legível sobre a água clara do raso e escura do fundo */
.submerso .cartao, .submerso .valor, .submerso .membro, .submerso .form-card,
.submerso .faq, .submerso .tela, .submerso .conversa, .submerso .wa-card,
.submerso .angulos__passos li, .submerso .projeto__info {
  background: rgba(12, 22, 70, .34);
  border: 1px solid rgba(220, 230, 255, .2);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .6);
}
.submerso .faq { border-radius: 26px; padding: 4px 28px; }
.submerso .faq__item:last-child { border-bottom: 0; }
.submerso .angulos__passos li { border-radius: 14px; padding: 14px 18px; margin-bottom: 8px; border-top: 1px solid rgba(220, 230, 255, .2); }
.submerso .projeto__info { border-radius: 18px; padding: 22px 24px; margin-top: 14px; }
.submerso .tela--codigo { background: rgba(5, 10, 34, .78); }
.submerso .cartao--cta { background: linear-gradient(150deg, rgba(43, 87, 214, .9), rgba(110, 120, 230, .85)); border-color: rgba(255, 255, 255, .35); }
.submerso .faixa, .faixa.submerso { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(220, 230, 255, .16); }
.faixa.submerso { background: rgba(12, 22, 70, .25) !important; }
.submerso .wa-card { border-color: rgba(37, 211, 102, .45); }

/* luz que vem da superfície bate nas bordas dos cards */
.submerso .cartao::after, .submerso .form-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(190, 215, 255, .12), transparent 35%);
}
.submerso .form-card { position: relative; }

@media (max-width: 760px) {
  body::after { opacity: .045; }
  .submerso .faq { padding: 2px 18px; }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }