/* ============================================================
   Pulse Institute — home institucional
   Tokens e regras conforme design-spec v1.0 / paleta-de-cores.md
   ============================================================ */

/* ---------- fontes self-hosted (spec §1.2: WOFF2, subset latin) ---------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Sora-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Sora-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
}

:root {
  /* marca — v2: família azul institucional (saúde/educação) */
  --petroleo: #10405F;      /* azul-profundo institucional (antes petróleo #0E3B41) */
  --jade: #15618F;          /* azul-médio de apoio: links, ícones, eyebrows (antes jade #0F6E66) */
  --coral: #FF6B5E;         /* micro-acento: linha de pulso e pequenos detalhes apenas */
  --coral-claro: #FF8A7E;
  /* neutros light — claro-primeiro, azul-claríssimo */
  --bg: #FFFFFF;
  --bg-alt: #F4F8FB;
  --bg-card-info: #E3EEF7;
  --border: #D9E4EE;
  --text: #0F3D5C;
  --text-2: #46617A;
  --link: #15618F;
  /* fundos escuros fixos (cta, rodapé) — azul-marinho institucional */
  --petroleo-deep: #0A2E45;
  --on-dark: #EAF2F8;
  --on-dark-2: #9FB8CC;
  --on-dark-3: #C9DAE8;
  /* estados */
  --ok: #177E52;
  --err: #C43B2E;
  --warn: #8A6100;
  /* tipografia */
  --font-display: "Sora", "Trebuchet MS", sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --fs-display: clamp(2rem, 1.2rem + 3.5vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  /* superfícies de componente (mudam no dark) */
  --header-bg: rgb(255 255 255 / 0.85);
  --card-seg-bg: #E3EEF7;
  --card-seg-border: transparent;
  --card-bg: #FFFFFF;
  --shadow-hover: 0 8px 24px rgb(15 61 92 / 0.10);
  --focus-ring: #15618F;
}

@media not all {
  :root {
    /* azul-noite institucional (não preto techy) */
    --bg: #0A1926;
    --bg-alt: #102638;
    --bg-card-info: #102638;
    --border: #1D3A50;
    --text: #E8F1F8;
    --text-2: #A3B8CA;
    --link: #7FB4DC;
    --header-bg: rgb(10 25 38 / 0.85);
    --card-seg-bg: #102638;
    --card-seg-border: #1D3A50;
    --card-bg: #102638;
    --shadow-hover: none;
    --focus-ring: #8FC1E3;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--link); }
ul[role="list"], ol[role="list"] { list-style: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.cta-final :focus-visible, .footer :focus-visible,
.mission :focus-visible {
  outline-color: #8FC1E3;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- utilitários ---------- */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
.section { padding-block: 96px; }
.section--white { background: var(--bg); }
.section--sand { background: var(--bg-alt); }
.section--mist { background: var(--bg-card-info); }
.section--petroleo { background: var(--petroleo); color: var(--on-dark); }
@media (max-width: 767px) { .section { padding-block: 64px; } }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 12px;
}
@media not all {
  .eyebrow { color: var(--on-dark-2); }
}
.eyebrow--on-dark { color: var(--on-dark-2); }
.section__lead {
  color: var(--text-2);
  max-width: 68ch;
  margin-top: 12px;
}
p { max-width: 68ch; }

/* ---------- ícones ---------- */
.icon {
  width: 20px; height: 20px;
  stroke: var(--jade);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}
@media not all { .icon { stroke: var(--on-dark-2); } }
.icon--lg { width: 32px; height: 32px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;
}
/* .btn--coral: classe histórica — agora é o botão primário azul-profundo */
.btn--coral { background: var(--petroleo); color: #FFFFFF; }
.btn--coral:hover { background: #1A5378; transform: translateY(-2px); }
@media not all {
  .btn--coral { background: #1A5E8C; }
  .btn--coral:hover { background: #24699A; }
}
.btn--dark { background: var(--petroleo); color: #FFFFFF; font-size: 1rem; padding: 12px 20px; }
.btn--dark:hover { background: #1A5378; }
@media not all {
  .btn--dark { background: var(--on-dark); color: var(--petroleo); }
  .btn--dark:hover { background: #FFFFFF; }
}
.btn--outline {
  background: transparent;
  color: var(--jade);
  border: 1.5px solid var(--jade);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 10px 16px;
}
.btn--outline:hover { background: var(--bg-card-info); }
@media not all {
  .btn--outline { color: var(--on-dark-2); border-color: var(--on-dark-2); }
  .btn--outline:hover { background: #102638; }
}
.btn--sm { font-size: 1.0625rem; padding: 12px 20px; }
.btn--lg { font-size: 1.125rem; padding: 16px 28px; }
.btn--xl { font-size: 1.25rem; padding: 18px 32px; }

.link-ghost {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 500;
}
.link-ghost:hover { color: #FFFFFF; }

/* ---------- skip-link ---------- */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--petroleo);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top 0.2s ease-out;
}
.skip-link:focus { top: 0; }

/* ============================================================
   00 · HEADER
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease-out;
}
/* Fundo + blur num pseudo-elemento: backdrop-filter no próprio .header
   criaria containing block para o painel fixo do menu mobile. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.header.is-scrolled { border-bottom-color: var(--border); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  transition: height 0.2s ease-out;
}
.header.is-scrolled .header__inner { height: 56px; }
.header__logo img { height: 40px; width: auto; transition: height 0.2s ease-out; }
.header.is-scrolled .header__logo img { height: 32px; }
.header__logo-dark { display: none; }
@media not all {
  .header__logo-light { display: none; }
  .header__logo-dark { display: block; }
}
.header__nav { display: flex; align-items: center; gap: 32px; }
.header__list {
  display: flex;
  gap: 28px;
  list-style: none;
}
.header__list a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
}
.header__list a:hover { color: var(--jade); }
@media not all { .header__list a:hover { color: #8FC1E3; } }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__burger { display: none; }

@media (max-width: 1023px) {
  .header__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--petroleo);
    padding: 96px 24px 32px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out,
                visibility 0s linear 0.25s;
  }
  .header__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  }
  .header__list { flex-direction: column; gap: 24px; }
  .header__list a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--on-dark);
  }
  .header__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .header__actions .btn { width: 100%; }
  /* "Entrar na plataforma" em destaque no painel mobile (motivo frequente de visita) */
  .header__actions .btn--outline {
    color: var(--on-dark);
    border-color: var(--on-dark-3);
    font-size: 1.0625rem;
    padding: 12px 20px;
  }
  .header__actions .btn--outline:hover { background: rgb(255 255 255 / 0.08); color: #FFFFFF; }
  /* Botão primário sobre o painel azul do menu: inverte para branco */
  .header__actions .btn--coral { background: #FFFFFF; color: var(--petroleo); }
  .header__actions .btn--coral:hover { background: var(--on-dark); }
  .header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
    padding: 10px;
  }
  .burger-bar {
    display: block;
    height: 2px;
    width: 24px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  }
  .header__burger[aria-expanded="true"] .burger-bar { background: var(--on-dark); }
  .header__burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header__burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
  .header__burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Painel aberto: mantém a marca visível (logo branco sobre o azul)
     e usa anel de foco claro — o jade some sobre #10405F. */
  .header.is-menu-open .header__logo { position: relative; z-index: 110; }
  .header.is-menu-open .header__logo-light { display: none; }
  .header.is-menu-open .header__logo-dark { display: block; }
  .header.is-menu-open :focus-visible { outline-color: #8FC1E3; }
}

/* ============================================================
   01 · HERO
   ============================================================ */
/* Hero claro (v2): atmosfera de escola de saúde — branco → azul-claríssimo */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF3FA 100%);
  color: var(--text);
  padding-block: 200px 128px;
  overflow: hidden;
}
@media not all {
  .hero {
    background: radial-gradient(120% 120% at 70% 0%, #102638 0%, #081726 70%);
    color: var(--on-dark);
  }
}
@media (max-width: 767px) {
  .hero { padding-block: 152px 80px; }
  /* deco menor no mobile: não concorre com o eyebrow/título */
  .hero__deco { width: 220px; top: -30px; right: -50px; }
  /* botões médios atingem 44px de alvo de toque */
  .btn--dark { padding: 14px 20px; }
}
.hero__deco {
  position: absolute;
  top: -40px; right: -40px;
  width: 340px;
  opacity: 0.1;
  pointer-events: none;
}
@media not all { .hero__deco { opacity: 0.07; } }
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.hero__text { position: relative; z-index: 2; max-width: 640px; }
.hero__sub { color: var(--text-2); margin-top: 24px; max-width: 56ch; }
@media not all { .hero__sub { color: var(--on-dark-3); } }
/* Hero claro: o eyebrow herda o azul-médio institucional */
.hero .eyebrow--on-dark { color: var(--jade); }
@media not all { .hero .eyebrow--on-dark { color: var(--on-dark-2); } }
/* Link "Como a Pulse ensina" no hero claro */
.hero .link-ghost { color: var(--jade); }
.hero .link-ghost:hover { color: var(--petroleo); }
@media not all {
  .hero .link-ghost { color: var(--on-dark); }
  .hero .link-ghost:hover { color: #FFFFFF; }
}
/* Chamada de login para alunos: secundária ao CTA primário, mas visível. */
.hero__login { margin-top: 16px; }
.hero__login .btn--login {
  background: transparent;
  color: var(--petroleo);
  border: 1.5px solid #A9C4D9;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 13px 18px; /* ≥44px de alvo de toque */
}
.hero__login .btn--login strong { font-weight: 700; }
.hero__login .btn--login:hover {
  background: rgb(16 64 95 / 0.06);
  border-color: var(--petroleo);
  color: var(--petroleo);
}
@media not all {
  .hero__login .btn--login {
    color: var(--on-dark);
    border-color: var(--on-dark-2);
  }
  .hero__login .btn--login:hover {
    background: rgb(255 255 255 / 0.08);
    border-color: var(--on-dark-3);
    color: #FFFFFF;
  }
}
.hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 32px;
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 40px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.hero__proof li { display: flex; align-items: center; gap: 8px; }
.hero__proof .icon { width: 16px; height: 16px; stroke: var(--jade); }
@media not all {
  .hero__proof { color: var(--on-dark-2); }
  .hero__proof .icon { stroke: var(--on-dark-2); }
}
.hero__pulse { position: relative; z-index: 1; }
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__pulse { max-width: 480px; order: 3; }
  .hero__pulse svg { height: 140px; width: 100%; }
}

/* animação M1 — linha desenha 1×, ponto pulsa 1× */
.pulse-path--hero {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.pulse-dot--hero {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: dot-in 0.4s ease-out 1s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-path--hero { stroke-dashoffset: 0; }
  .pulse-dot--hero { opacity: 1; }
}

/* ============================================================
   02 · SEGMENTAÇÃO
   ============================================================ */
.segment { padding-block: 72px 96px; }
.segment__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 599px) { .segment__grid { grid-template-columns: 1fr; } }
.segment__card {
  position: relative;
  display: block;
  background: var(--card-seg-bg);
  border: 1px solid var(--card-seg-border);
  border-radius: 16px;
  padding: 32px;
  padding-bottom: 56px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.segment__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.segment__card .h3 { margin-top: 16px; }
.segment__card p { margin-top: 8px; color: var(--text-2); font-size: var(--fs-body); }
.segment__arrow {
  position: absolute;
  right: 28px; bottom: 20px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--coral);
  transition: transform 0.2s ease-out;
}
@media not all { .segment__arrow { color: var(--coral-claro); } }
.segment__card:hover .segment__arrow { transform: translateX(4px); }

/* ============================================================
   03 · VITRINE
   ============================================================ */
.courses__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.courses__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 1023px) { .courses__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .courses__grid { grid-template-columns: 1fr; } }
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.course-card__art {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.course-card__art--1 { background: var(--bg-card-info); }
.course-card__art--2 { background: var(--bg-alt); }
.course-card__art--3 { background: var(--petroleo); }
@media not all {
  .course-card__art--1, .course-card__art--2 { background: #0C2030; }
  .course-card__art--3 { background: #081726; }
}
.course-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.course-card__desc { color: var(--text-2); font-size: var(--fs-body); flex: 1; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  border-radius: 999px;
  padding: 6px 14px;
  width: fit-content;
}
.chip--soon {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.course-card__bar {
  height: 3px;
  background: var(--coral);
  margin-top: auto;
}
/* Cards dinâmicos (cursos reais vindos de /cursos.json) */
/* fundo azul-claro por trás da capa: imagens com transparência (ex.: logo)
   não ficam "flutuando" sobre branco */
.course-card__art--img { padding: 0; background: var(--bg-card-info); }
.course-card__art--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chip--cat {
  background: var(--bg-card-info);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.course-card__cta { align-self: flex-start; margin-top: 4px; }
.courses__note {
  margin-top: 40px;
  color: var(--text-2);
  font-size: var(--fs-small);
}

/* ============================================================
   04 · MÉTODO
   ============================================================ */
.method__timeline { margin-top: 64px; }
.method__line {
  width: 100%;
  height: 180px;
  pointer-events: none;
}
.method__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 24px;
}
.method__step:nth-child(2) { margin-top: -12px; }
.method__step:nth-child(3) { margin-top: -24px; }
.method__step:nth-child(4) { margin-top: -48px; }
.method__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--petroleo);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.method__step .h3 { margin-top: 12px; }
.method__step p { margin-top: 6px; color: var(--text-2); font-size: var(--fs-body); }

@media (max-width: 767px) {
  .method__line { display: none; }
  .method__steps {
    grid-template-columns: 1fr;
    padding-top: 0;
    gap: 0;
  }
  .method__step { margin-top: 0 !important; position: relative; padding: 0 0 32px 52px; }
  .method__step::before {
    content: "";
    position: absolute;
    left: 15px; top: 36px; bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--coral);
  }
  .method__step:last-child::before { display: none; }
  .method__num { position: absolute; left: 0; top: 0; }
}

/* animação M2 — revelação dos passos */
.method__timeline .pulse-path--method {
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
}
.method__timeline .pulse-dot--method { opacity: 0; }
.method__timeline.is-visible .pulse-path--method {
  animation: draw 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.method__timeline.is-visible .pulse-dot--method {
  transform-origin: center;
  transform-box: fill-box;
  animation: dot-in 0.4s ease-out 0.7s forwards;
}
.method__step { opacity: 0; transform: translateY(12px); }
.method__timeline.is-visible .method__step {
  animation: step-in 0.5s ease-out forwards;
}
.method__timeline.is-visible .method__step:nth-child(1) { animation-delay: 0.1s; }
.method__timeline.is-visible .method__step:nth-child(2) { animation-delay: 0.22s; }
.method__timeline.is-visible .method__step:nth-child(3) { animation-delay: 0.34s; }
.method__timeline.is-visible .method__step:nth-child(4) { animation-delay: 0.46s; }
@keyframes step-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .method__timeline .pulse-path--method { stroke-dashoffset: 0; }
  .method__timeline .pulse-dot--method { opacity: 1; }
  .method__step { opacity: 1; transform: none; }
}
/* fallback sem JS: mostra tudo */
.no-observer .pulse-path--method { stroke-dashoffset: 0 !important; animation: none; }
.no-observer .pulse-dot--method { opacity: 1 !important; }
.no-observer .method__step { opacity: 1 !important; transform: none !important; }

/* ---------- sub-bloco plataforma ---------- */
.platform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 80px;
}
@media (max-width: 1023px) { .platform { grid-template-columns: 1fr; } }
.platform__frame {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
}
.platform__chrome {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.platform__chrome span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.platform__mock {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 16px;
  padding: 20px;
  min-height: 240px;
}
.platform__mock-side, .platform__mock-main { display: flex; flex-direction: column; gap: 12px; }
.mock-line { height: 10px; border-radius: 5px; background: var(--border); width: 70%; }
.mock-line--wide { width: 100%; }
.mock-line--short { width: 45%; }
.mock-block {
  height: 110px;
  border-radius: 8px;
  background: var(--petroleo);
}
.mock-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.mock-progress span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 4px;
  background: var(--coral);
}
.platform__text .h3 { margin-bottom: 16px; }
.chip--roadmap {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-2);
  margin-top: 20px;
  padding: 10px 16px;
  border-radius: 999px;
}
.chip--roadmap .icon { width: 16px; height: 16px; }

/* ---------- formulário ---------- */
.notify { margin-top: 28px; }
.notify__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 10px;
}
.notify__row { display: flex; gap: 12px; flex-wrap: wrap; }
.notify__input {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 12px 16px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.notify__input::placeholder { color: var(--text-2); opacity: 0.7; }
.notify__input.is-error { border-color: var(--err); }
.notify__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.notify__consent input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--jade);
  flex: none;
}
.notify__lgpd {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.notify__msg { margin-top: 12px; font-size: var(--fs-small); font-weight: 500; }
.notify__msg.is-ok { color: var(--ok); }
.notify__msg.is-err { color: var(--err); }
@media not all {
  .notify__msg.is-ok { color: #4FC08D; }
  .notify__msg.is-err { color: #F08A7E; }
}

/* ============================================================
   05 · QUEM SOMOS
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 1023px) { .about__grid { grid-template-columns: 1fr; gap: 48px; } }
.about__text .h2 { margin-bottom: 24px; }
.about__text p + p { margin-top: 16px; }
.about__text p { color: var(--text-2); }
.mission {
  background: var(--petroleo);
  border-radius: 16px;
  padding: 40px;
  color: var(--on-dark);
}
@media not all { .mission { background: #102638; border: 1px solid #1D3A50; } }
.mission__pulse { width: 140px; margin-bottom: 24px; }
.mission__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 12px;
}
.mission__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.45;
}

/* ============================================================
   07 · CERTIFICADO
   ============================================================ */
.cert { padding-block: 72px; }
.cert__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 1023px) { .cert__grid { grid-template-columns: 1fr; gap: 48px; } }
.cert__list { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.cert__list li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-2); }
.cert__list .icon { margin-top: 3px; }
.cert__list strong { color: var(--text); }
.cert-doc {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 32px 0;
  max-width: 420px;
  margin-inline: auto;
  transform: rotate(-2deg);
  box-shadow: 0 16px 40px rgb(15 61 92 / 0.12);
  overflow: hidden;
}
.cert-doc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: #0F3D5C;
  margin-top: 20px;
}
.cert-doc__name {
  font-size: 0.875rem;
  color: #46617A;
  margin-top: 2px;
}
.cert-doc__lines { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cert-doc__lines span { display: block; height: 8px; border-radius: 4px; background: #DCE6EF; }
.cert-doc__lines .short { width: 55%; }
.cert-doc__meta { font-size: 0.75rem; color: #46617A; margin-top: 20px; }
.cert-doc__pulse { margin-top: 16px; width: 100%; }

/* ============================================================
   09 · FAQ
   ============================================================ */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 1023px) { .faq__grid { grid-template-columns: 1fr; gap: 32px; } }
@media (min-width: 1024px) {
  .faq__title { position: sticky; top: 104px; }
}
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item .chevron {
  width: 20px; height: 20px;
  stroke: var(--jade);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
  transition: transform 0.2s ease-out;
}
@media not all { .faq__item .chevron { stroke: var(--on-dark-2); } }
.faq__item[open] .chevron { transform: rotate(180deg); }
.faq__item[open] { box-shadow: inset 3px 0 0 var(--coral); }
.faq__answer { padding: 0 24px 24px 16px; }
.faq__answer p { color: var(--text-2); max-width: 68ch; }

/* ============================================================
   10 · CTA FINAL
   ============================================================ */
.cta-final {
  background: var(--petroleo);
  color: var(--on-dark);
  padding-block: 128px;
  text-align: center;
}
@media not all {
  .cta-final { background: radial-gradient(100% 100% at 50% 0%, #102638 0%, #081726 75%); }
}
@media (max-width: 767px) { .cta-final { padding-block: 80px; } }
.cta-final__inner { display: flex; flex-direction: column; align-items: center; }
.cta-final__pulse { width: min(360px, 80%); margin-bottom: 40px; }
.cta-final .pulse-dot--cta { opacity: 1; }
.cta-final.is-visible .pulse-dot--cta {
  transform-origin: center;
  transform-box: fill-box;
  animation: dot-in 0.4s ease-out forwards;
}
.cta-final__sub { color: var(--on-dark-3); margin-top: 20px; max-width: 46ch; }
.cta-final__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 40px;
}
/* Sobre a faixa azul-profundo o botão primário inverte para branco —
   sem isso ele desaparece (mesmo #10405F do fundo). */
.cta-final .btn--coral { background: #FFFFFF; color: var(--petroleo); }
.cta-final .btn--coral:hover { background: var(--on-dark); }

/* ============================================================
   11 · RODAPÉ
   ============================================================ */
.footer {
  background: var(--petroleo-deep);
  color: var(--on-dark);
  padding-block: 72px 32px;
  font-size: 0.9375rem;
}
@media not all { .footer { background: #071320; } }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: 48px 32px;
}
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand img { height: 40px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: var(--on-dark-2); }
.footer__muted { margin-top: 12px; font-size: var(--fs-small); }
.footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 16px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; color: var(--on-dark-2); }
.footer__col a {
  color: var(--on-dark);
  text-decoration: none;
  /* amplia a área de toque sem mudar o ritmo visual da lista */
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}
.footer__col a:hover { color: #9CC7E8; text-decoration: underline; }
.footer__social { display: flex; gap: 16px; margin-top: 24px; }
.footer__social a { color: var(--on-dark-2); }
.footer__social .icon { stroke: currentColor; width: 20px; height: 20px; }
.footer__social a:hover { color: #9CC7E8; }
.footer__legal {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgb(233 241 239 / 0.12);
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}

/* ============================================================
   11-bis · STICKY MOBILE
   ============================================================ */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
@media not all { .sticky-cta { background: rgb(10 25 38 / 0.92); } }
.sticky-cta .btn { width: 100%; font-size: 1.0625rem; }
.sticky-cta[hidden] { display: none; }
@media (min-width: 1024px) { .sticky-cta { display: none !important; } }

/* ============================================================
   12 · MODAL DE LOGIN (Entrar na plataforma)
   ============================================================ */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 300; /* acima do header (100) e do menu mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-modal[hidden] { display: none; }
.login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(6 21 36 / 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: login-fade 0.2s ease-out;
}
.login-modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  box-shadow: 0 24px 64px rgb(6 21 36 / 0.35);
  animation: login-pop 0.22s ease-out;
}
@keyframes login-fade { from { opacity: 0; } }
@keyframes login-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.login-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--text-2);
  cursor: pointer;
}
.login-modal__close:hover { color: var(--text); background: var(--bg-alt); }
.login-modal__logo { height: 36px; width: auto; }
.login-modal__logo--dark { display: none; }
@media not all {
  .login-modal__logo--light { display: none; }
  .login-modal__logo--dark { display: block; }
}
.login-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  margin-top: 20px;
}
.login-modal__err {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--err);
  border-radius: 12px;
  color: var(--err);
  font-size: var(--fs-small);
}
.login-modal__err[hidden] { display: none; }
.login-modal__form { margin-top: 20px; }
.login-modal__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  margin: 16px 0 8px;
}
.login-modal__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.login-modal__submit {
  width: 100%;
  margin-top: 24px;
  font-size: 1.0625rem;
  padding: 14px 20px;
}
.login-modal__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 20px;
  font-size: var(--fs-small);
}
.login-modal__links a {
  color: var(--jade);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* área de toque maior nos links pequenos do modal */
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
}
@media not all { .login-modal__links a { color: var(--on-dark-3); } }