/* =========================================================
   M2M — TEMA FUTURO (conceito escuro cinematográfico)
   ---------------------------------------------------------
   Carregar DEPOIS de m2m.css. Este arquivo só sobrescreve.
   Direção de arte: referência "disco sobre o horizonte" —
   azul profundo, luz laranja controlada, vidro, calma.
   Estilo: Liquid Glass. Animações 400–600ms. Nada rápido,
   nada barato.
   ========================================================= */

/* ---------- 1. TOKENS INVERTIDOS ---------- */
body.futuro {
  /* superfícies */
  --branco:      #0C1226;   /* superfície-base de cards e topo   */
  --nevoa:       rgba(255,255,255,.035);
  --linha:       rgba(148,163,214,.16);
  --laranja-suave: rgba(244,120,32,.12);

  /* texto */
  --grafite:     #B9C2DC;   /* corpo                              */
  --cinza:       #8b94b3;   /* apoio                              */
  --cinza-claro: #626b8c;
  --azul-noite:  #F2F5FF;   /* títulos viram quase-branco         */

  --sombra:    0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(2,6,23,.5);
  --sombra-lg: 0 2px 8px rgba(0,0,0,.5), 0 30px 80px rgba(2,6,23,.65);

  color: var(--grafite);
  background: #060B1D;
}

/* ---------- 2. O CÉU (fundo fixo cinematográfico) ---------- */
.futuro .ceu {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -20%, #1B2C5E 0%, #101A3E 38%, #081026 68%, #05091A 100%);
}
/* brasas de luz que derivam lentamente */
.futuro .ceu i {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
}
.futuro .ceu i:nth-child(1) {
  width: 55vw; height: 55vw; left: -18vw; top: -22vw;
  background: radial-gradient(circle, rgba(0,153,215,.32), transparent 65%);
  animation: deriva1 26s ease-in-out infinite alternate;
}
.futuro .ceu i:nth-child(2) {
  width: 44vw; height: 44vw; right: -16vw; top: 22vh;
  background: radial-gradient(circle, rgba(42,56,141,.5), transparent 65%);
  animation: deriva2 32s ease-in-out infinite alternate;
}
.futuro .ceu i:nth-child(3) {
  width: 38vw; height: 30vw; left: 28vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(244,120,32,.16), transparent 62%);
  animation: deriva3 38s ease-in-out infinite alternate;
}
@keyframes deriva1 { to { transform: translate(9vw, 7vh)  scale(1.12); } }
@keyframes deriva2 { to { transform: translate(-7vw, -6vh) scale(1.08); } }
@keyframes deriva3 { to { transform: translate(-9vw, -4vh) scale(1.15); } }

/* grão de cinema, bem sutil */
.futuro .ceu::after {
  content: ""; position: absolute; inset: 0; opacity: .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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .futuro .ceu i { animation: none; } }

/* as seções deixam o céu aparecer */
.futuro .bg-noite, .futuro .bg-azul { background: transparent; }
.futuro .bg-nevoa { background: rgba(10,16,38,.55); border-block: 1px solid rgba(148,163,214,.08); }
.futuro .bg-noite::before, .futuro .bg-azul::before { display: none; }
.futuro .bg-azul .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); box-shadow: none; }
.futuro .bg-noite .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }

/* ---------- 3. TIPOGRAFIA CINEMATOGRÁFICA ---------- */
.futuro h1 {
  background: linear-gradient(180deg, #FFFFFF 30%, #A9BCE8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #EAF0FF;
}
.futuro .lead { color: #98A3C7; }
.futuro a { color: #7FB8FF; text-decoration-color: rgba(127,184,255,.35); }
.futuro .destaque { color: #F2F5FF; }
.futuro .manifesto {
  color: #F2F5FF;
  border-left-color: var(--laranja);
  text-shadow: 0 0 40px rgba(244,120,32,.25);
}
.futuro .manifesto--centro { border-top-color: rgba(244,120,32,.6); border-bottom-color: rgba(244,120,32,.6); }
.futuro ::selection { background: var(--laranja); color: #fff; }

/* ---------- 4. TOPO EM VIDRO ---------- */
.futuro .topo {
  background: rgba(7,12,30,.78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(148,163,214,.14);
  transition: background 600ms ease, border-color 600ms ease;
}
.futuro .topo__logo img { transition: opacity 500ms ease; }

/* no topo da página o cabeçalho some — só o botão flutua.
   O logo pequeno entra quando o logo grande do herói sai de cena. */
.futuro .topo.transparente {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.futuro .topo.transparente .topo__logo img { opacity: 0; }

/* ---------- 4b. LOGO DO HERÓI (pôster) ---------- */
/* o herói respira menos no topo — o logo fica no meio do ar, não pendurado */
.futuro main > .sec:first-of-type {
  padding-top: clamp(1.8rem, 1rem + 2.5vw, 3.2rem);
}
.futuro .hero-logo {
  display: block;
  width: clamp(110px, 13vw, 150px);
  height: auto;
  margin: 0 auto 60px;
  filter: drop-shadow(0 0 28px rgba(244,120,32,.35)) drop-shadow(0 6px 18px rgba(0,0,0,.5));
  animation: logo-entra 1.1s cubic-bezier(.16,.7,.2,1) both;
}
@keyframes logo-entra {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .futuro .hero-logo { animation: none; } }

/* ---------- 5. VIDRO (cards, faq, etapas) ---------- */
.futuro .card,
.futuro .faq details,
.futuro .etapas li {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 20px 50px rgba(2,6,23,.45);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: transform 500ms cubic-bezier(.2,.7,.2,1), border-color 500ms ease, box-shadow 500ms ease;
}
.futuro .card:hover, .futuro .etapas li:hover {
  transform: translateY(-4px);
  border-color: rgba(244,120,32,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px rgba(2,6,23,.6), 0 0 60px -18px rgba(244,120,32,.35);
}
.futuro .pilar { border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--laranja), rgba(244,120,32,0)) 1; }
.futuro .faq details[open] { border-color: rgba(244,120,32,.5); }
.futuro .faq summary { color: #F2F5FF; }
.futuro .faq summary:hover { background: rgba(255,255,255,.04); }
.futuro .etapas li::before {
  background: linear-gradient(135deg, #3A4DB0, #2A388D);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 24px rgba(42,56,141,.6);
}

/* ---------- 6. CHIPS E LISTAS ---------- */
.futuro .credenciais li { background: rgba(255,255,255,.06); color: #C4CDE8; border: 1px solid rgba(255,255,255,.08); }
.futuro .fluxo span { background: rgba(255,255,255,.07); color: #C4CDE8; border: 1px solid rgba(255,255,255,.08); }
.futuro .fluxo span:last-child { background: var(--laranja); color: #fff; border-color: transparent; box-shadow: 0 0 30px rgba(244,120,32,.45); }
.futuro .fluxo i { color: #3d4870; }
.futuro .tempo::before { background: linear-gradient(var(--laranja), rgba(244,120,32,.05)); }
.futuro .tempo li::before { background: #0C1226; box-shadow: 0 0 18px rgba(244,120,32,.5); }
.futuro .tempo strong { color: #F2F5FF; }
.futuro .lista--x li::before { color: #3d4870; }

/* antes / depois */
.futuro .antes-depois__lado--antes {
  background: rgba(255,255,255,.03);
  border-color: rgba(148,163,214,.14);
  color: #79829f;
}
.futuro .antes-depois__lado--depois {
  background: linear-gradient(135deg, rgba(244,120,32,.16), rgba(244,120,32,.06));
  border-color: rgba(244,120,32,.35);
  color: #F2F5FF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 40px -12px rgba(244,120,32,.3);
}

/* ---------- 7. BOTÕES COM LUZ ---------- */
.futuro .btn, .futuro a.btn {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(135deg, #FF9142 0%, #F47820 55%, #E05F02 100%);
  box-shadow: 0 12px 40px -6px rgba(244,120,32,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform 400ms cubic-bezier(.2,.7,.2,1), box-shadow 400ms ease, filter 400ms ease;
}
.futuro .btn:hover {
  background: linear-gradient(135deg, #FF9C55 0%, #FF8228 55%, #EE6805 100%);
  transform: translateY(-2px);
  box-shadow: 0 18px 55px -8px rgba(244,120,32,.7), inset 0 1px 0 rgba(255,255,255,.4);
  filter: saturate(1.1);
}
.futuro .btn--fantasma, .futuro a.btn--fantasma {
  background: rgba(255,255,255,.05);
  color: #EAF0FF;
  -webkit-text-fill-color: #EAF0FF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.futuro .btn--fantasma:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.futuro .btn-nota { color: #6b7495; }

/* ---------- 8. O PALCO DO HERÓI — o disco sobre o horizonte ---------- */
.futuro .hero-palco { position: relative; max-width: 880px; margin-inline: auto; padding-bottom: 3.4rem; }

.futuro .hero-palco .video {
  position: relative; z-index: 2;
  border-radius: 22px;
  background: linear-gradient(180deg, #26365F 0%, #0E1730 60%, #0A1024 100%);
  outline: 1px solid rgba(255,255,255,.16);
  outline-offset: -1px;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.25),                 /* fio de luz no topo, como no render */
    0 30px 70px -18px rgba(2,6,23,.85),
    0 10px 34px -8px rgba(244,120,32,.55),          /* rim light laranja colado na borda  */
    0 60px 130px -24px rgba(244,120,32,.4);         /* calor subindo por baixo            */
}

/* a luz laranja sob o objeto */
.futuro .hero-palco::before {
  content: ""; position: absolute; z-index: 1;
  left: 3%; right: 3%; bottom: .85rem; height: 110px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255,150,60,1) 0%,
    rgba(244,120,32,.55) 45%,
    rgba(244,120,32,.18) 66%,
    transparent 80%);
  filter: blur(26px);
}

/* a linha do horizonte */
.futuro .hero-palco::after {
  content: ""; position: absolute; z-index: 3;
  left: -14%; right: -14%; bottom: 2.05rem; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(158,200,255,.85) 24%,
    #FFFFFF 45%,
    #FFD9AE 58%,
    rgba(255,150,60,.95) 70%,
    rgba(244,120,32,.45) 84%,
    transparent 100%);
  box-shadow: 0 0 22px rgba(190,215,255,.55), 0 0 44px rgba(244,120,32,.35);
}

.futuro .video__placeholder { color: rgba(255,255,255,.55); }
.futuro .video__play {
  background: linear-gradient(135deg, #FF9142, #F47820);
  box-shadow: 0 0 0 10px rgba(244,120,32,.12), 0 14px 44px rgba(244,120,32,.55);
}

/* ---------- 9. REVELAÇÃO MAIS FLUIDA (Liquid Glass: 400–600ms) ---------- */
html.js .futuro .revelar { transition: opacity .9s ease, transform .9s cubic-bezier(.16,.7,.2,1); transform: translateY(30px); }

/* ---------- 10. RODAPÉ E TELA FINAL ---------- */
.futuro .rodape { background: rgba(5,9,24,.85); border-top: 1px solid rgba(148,163,214,.1); }
.futuro .tela-final { background: transparent; }
.futuro .tela-final p { color: #F2F5FF; }
.futuro .tela-final p + p {
  color: var(--laranja);
  text-shadow: 0 0 50px rgba(244,120,32,.45);
}
.futuro .tela-final small { color: #4d5679; }

/* aviso */
.futuro .aviso { background: rgba(0,153,215,.09); border-left-color: var(--azul-claro); }
.futuro .aviso--laranja { background: rgba(244,120,32,.1); border-left-color: var(--laranja); }
.futuro .aviso strong { color: #F2F5FF; }

/* barra de rolagem discreta */
.futuro::-webkit-scrollbar { width: 12px; }
.futuro::-webkit-scrollbar-track { background: #060B1D; }
.futuro::-webkit-scrollbar-thumb { background: #232D52; border-radius: 8px; border: 3px solid #060B1D; }

/* ---------- 11. FORMULÁRIOS NO ESCURO (aplicação) ---------- */
.futuro .entrada {
  background: rgba(255,255,255,.05);
  border-color: rgba(148,163,214,.22);
  color: #F2F5FF;
}
.futuro .entrada:focus {
  border-color: var(--laranja);
  box-shadow: 0 0 0 4px rgba(244,120,32,.18);
  background: rgba(255,255,255,.07);
}
.futuro .entrada::placeholder { color: #57608a; }

.futuro .opcao {
  background: rgba(255,255,255,.04);
  border-color: rgba(148,163,214,.18);
  color: #C4CDE8;
}
.futuro .opcao:hover { background: rgba(255,255,255,.08); border-color: rgba(148,163,214,.35); }
.futuro .opcao:has(input:checked) {
  background: rgba(244,120,32,.14);
  border-color: var(--laranja);
  color: #F2F5FF;
}
.futuro .opcao__marca { border-color: #57608a; background: transparent; }

.futuro .escala label { border-color: rgba(148,163,214,.2); color: #8b94b3; }
.futuro .escala label:hover { border-color: rgba(148,163,214,.45); }
.futuro .escala label:has(input:checked) { background: var(--laranja); border-color: var(--laranja); color: #fff; }

.futuro .progresso__barra { background: rgba(148,163,214,.15); }
.futuro .consentimento { color: #8b94b3; }
.futuro .campo > label, .futuro .pergunta__titulo { color: #F2F5FF; }

/* selos do topo */
.futuro .selo { background: rgba(244,120,32,.16); color: #FFA355; }
.futuro .selo--ok { background: rgba(58,214,140,.16); color: #6EE7AE; }

/* tabelas dos documentos legais */
.futuro .legal th { background: rgba(255,255,255,.06); color: #F2F5FF; }
.futuro .legal th, .futuro .legal td { border-color: rgba(148,163,214,.18); }
.futuro .legal__atualizado { background: rgba(255,255,255,.05); color: #8b94b3; }
.futuro .pendente { background: #FFF3C4; color: #7A5A00; }

/* proposta em modo pôster também no herói de outras páginas não se aplica;
   impressão da proposta volta ao claro para o PDF sair legível */
@media print {
  body.futuro { background: #fff !important; }
  body.futuro .ceu { display: none !important; }
  body.futuro {
    --grafite: #333; --cinza: #555; --cinza-claro: #888;
    --azul-noite: #111; --branco: #fff;
    --nevoa: #F5F6FA; --linha: #ddd;
  }
  body.futuro .card, body.futuro .faq details, body.futuro .etapas li {
    background: #fff; border-color: #ddd; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.futuro h1 { -webkit-text-fill-color: #111; background: none; color: #111; }
}