/* "Como funciona" — rolagem fluida e contínua (sem trancar o scroll em slide), com cada
   seção revelando (fade + leve subida) ao entrar na tela -- referência de sensação: fiap.com.br.
   Cada <section class="cf-slide"> é um slide da apresentação original
   (NOC_Geomap_Apresentacao_10.pptx, capa e contracapa fora). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.cf-nav-fixed { position: sticky; top: 0; z-index: 50;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cf-nav-fixed.scrolled { background: rgba(6,18,31,.86); border-bottom-color: rgba(127,212,255,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* compensa a altura do header fixo (~72px) pra âncora/scroll não esconder o início da seção atrás dele */
.cf-slide, .cf-hero, .cf-cta { scroll-margin-top: 80px; }

.cf-slide {
  min-height: 100vh;
  display: flex; align-items: center; padding: 96px 48px;
  border-bottom: 1px solid rgba(127,212,255,.08);
}
.cf-slide-inner { max-width: 1500px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: .95fr 1.25fr; gap: 72px; align-items: center; }
.cf-slide:nth-of-type(even) .cf-slide-inner { grid-template-columns: 1.25fr .95fr; }
.cf-slide:nth-of-type(even) .cf-slide-text { order: 2; }
.cf-slide:nth-of-type(even) .cf-slide-media { order: 1; }

/* revelação ao entrar na tela: parte discreta (opacity baixa + leve deslocamento), o JS
   liga .in-view quando a seção cruza a área observada -- transição, não corte. */
.cf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.cf-reveal.in-view { opacity: 1; transform: none; }
.cf-slide-media.cf-reveal { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .cf-reveal { transition: none; opacity: 1; transform: none; }
}

.cf-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: #7fd4ff; margin: 0 0 18px;
  display: inline-block; padding: 6px 14px; border: 1px solid rgba(127,212,255,.3); border-radius: 20px; }
.cf-slide h2 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(28px, 2.7vw, 46px);
  color: #eaf7ff; line-height: 1.2; margin: 0 0 22px; text-wrap: balance; }
.cf-slide p.cf-body { font-size: clamp(16px, 1.15vw, 19px); color: #9fbdd6; line-height: 1.7; margin: 0 0 26px; max-width: 54ch; }
.cf-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.cf-bullets li { position: relative; padding-left: 24px; font-size: clamp(14.5px, 1.05vw, 17px); color: #b8d2e8; line-height: 1.55; max-width: 56ch; }
.cf-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: #3ba3ff; box-shadow: 0 0 8px rgba(59,163,255,.7); }

.cf-slide-media img, .cf-slide-media video { width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); }

.cf-progress { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 10px; }
.cf-progress a { width: 8px; height: 8px; border-radius: 50%; background: rgba(127,212,255,.25);
  border: 1px solid rgba(127,212,255,.4); transition: background .2s, transform .2s; }
.cf-progress a:hover { background: rgba(127,212,255,.5); }
.cf-progress a.active { background: #7fd4ff; transform: scale(1.35);
  box-shadow: 0 0 10px rgba(127,212,255,.8); }

.cf-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; padding: 64px 24px; }
.cf-hero .lp-eyebrow { margin-bottom: 14px; }
.cf-hero h1 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(32px, 5vw, 58px);
  color: #eaf7ff; margin: 0 0 16px; }
.cf-hero p { font-size: clamp(15px, 1.2vw, 19px); color: #9fbdd6; max-width: 560px; margin: 0 0 8px; line-height: 1.6; }
.cf-scroll-hint { margin-top: 28px; font-size: 11.5px; color: #5a7b96; text-transform: uppercase;
  letter-spacing: .08em; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cf-scroll-hint svg { animation: cfBounce 1.8s ease-in-out infinite; }
@keyframes cfBounce { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(8px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cf-scroll-hint svg { animation: none; } }

.cf-cta { min-height: 70vh; display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; padding: 64px 24px; border-bottom: none; }
.cf-cta h2 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(26px, 3.6vw, 42px);
  color: #eaf7ff; margin: 0 0 16px; }
.cf-cta p { font-size: clamp(15px, 1.15vw, 18px); color: #9fbdd6; margin: 0 0 28px; }
.cf-cta-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 860px) {
  .cf-progress { display: none; }
  .cf-slide { padding: 72px 24px; }
  .cf-slide-inner, .cf-slide:nth-of-type(even) .cf-slide-inner { grid-template-columns: 1fr; gap: 28px; }
  .cf-slide:nth-of-type(even) .cf-slide-text, .cf-slide:nth-of-type(even) .cf-slide-media { order: initial; }
  .cf-slide p.cf-body, .cf-bullets li { max-width: none; }
}