/* ============================================================
   MODO NARRATIVA — V2 EXECUTIVA, identidade GR Group.
   Menos texto por página, 14 páginas.

   PALETA — extraída do logo oficial (OKR_Planning/Templates/LOGO - GR GROUP):
     navy das letras ....... #202050  -> --text e --ink
     espiral ............... amarelo #F8C058 · laranja #F08040 · rosa #F05880
                             magenta #A858A0 · roxo #7060A8 · azul #4070B8
                             teal #18B8A0
   Contraste conferido (WCAG, sobre #FFFFFF salvo indicado):
     --accent      #E24A7F  3,80:1  so superficie/traco, nunca texto em branco
     --accent-soft #C0356A  5,30:1  texto sobre claro
     --accent-dim  #FDECF2  texto --text por cima 14,25:1
     --eyebrow     #5B4E9E  6,93:1  texto pequeno
     --text/--ink  #1F1F4E  15,39:1 | branco sobre ele 15,39:1
     accent na .page--dark #F05880 sobre navy 4,70:1
   ============================================================ */

:root {
  /* marca GR Group */
  --accent:       #E24A7F;
  --accent-soft:  #C0356A;
  --accent-dim:   #FDECF2;
  --eyebrow:      #5B4E9E;

  /* superfícies */
  --bg:            #FFFFFF;
  --bg-subtle:     #F7F6FB;
  --surface:       #FFFFFF;
  --surface-2:     #F1F0F7;
  --border:        #E6E5EF;
  --border-strong: #D4D3E3;

  /* tinta — navy GR */
  --text:       #1F1F4E;
  --text-soft:  #4B4A6B;
  --text-muted: #7A798F;
  --text-dim:   #A5A4B8;

  --ink:        #1F1F4E;
  --ink-2:      #2A2A63;

  --sans:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Sora", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;

  --shadow-card: 0 1px 2px rgba(31,31,78,0.04), 0 6px 20px rgba(31,31,78,0.05);
  --shadow-card-hover: 0 18px 40px rgba(31,31,78,0.10);
  --shadow-frame: 0 2px 4px rgba(31,31,78,0.05), 0 12px 28px rgba(31,31,78,0.10), 0 40px 80px rgba(31,31,78,0.13);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  min-height: 100vh;
}
button, a { font-family: inherit; }
a { color: inherit; text-decoration: none; }
svg { flex: 0 0 auto; }

/* ===== tipografia ===== */
.eyebrow {
  font-size: clamp(12px, 1vw, 14.5px); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--eyebrow);
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--display); letter-spacing: -0.025em; }
h1 { font-size: clamp(46px, 7.4vw, 96px); font-weight: 700; line-height: 1.02; }
h2 { font-size: clamp(32px, 4.1vw, 58px); font-weight: 700; line-height: 1.07; }
h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; line-height: 1.2; }
h4 { font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }
p  { margin: 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; color: var(--text-soft); font-weight: 400; }
strong { color: var(--text); font-weight: 600; }
.lede { color: var(--text-soft); font-size: clamp(17px, 1.45vw, 24px); font-weight: 400; line-height: 1.45; max-width: 880px; }
em.acc { color: var(--accent-soft); font-style: normal; font-weight: 700; }

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

/* ===== HUD de navegação ===== */
.hud-logo {
  position: fixed; top: 26px; left: 30px; z-index: 60;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.hud-logo svg { width: 17px; height: 17px; color: var(--accent-soft); }
.hud-counter { position: fixed; bottom: 30px; left: 30px; z-index: 60; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); }
.hud-counter strong { color: var(--text-muted); }
.hud-controls { position: fixed; bottom: 26px; right: 28px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.hud-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hud-btn:hover { color: var(--accent-soft); border-color: rgba(226,74,127,0.4); transform: translateY(-1px); }
.hud-btn svg { width: 17px; height: 17px; }
.hud-logo, .hud-logo svg, .hud-counter, .hud-counter strong, .hud-btn { transition: color 260ms var(--ease), background-color 260ms var(--ease), border-color 260ms var(--ease); }
body.on-dark .hud-logo { color: rgba(255,255,255,0.80); }
body.on-dark .hud-logo svg { color: #F05880; }
body.on-dark .hud-counter { color: rgba(255,255,255,0.42); }
body.on-dark .hud-counter strong { color: rgba(255,255,255,0.78); }
body.on-dark .hud-btn { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.78); box-shadow: none; }
body.on-dark .hud-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

/* ===== barra de navegação superior ===== */
/* a marca vive aqui; o .hud-logo do canto vira redundante */
.hud-logo { display: none; }
.topnav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 3px;
  padding: 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(31,31,78,0.06), 0 12px 30px rgba(31,31,78,0.10);
  /* reserva a faixa do botão Apresentar à direita: como a pílula é centrada,
     o desconto vale dos dois lados, senão ela passa por baixo do botão */
  max-width: calc(100vw - 400px); overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.topnav::-webkit-scrollbar { display: none; }
.topnav__brand {
  font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.08em;
  color: var(--text); padding: 8px 11px 8px 7px; white-space: nowrap; flex: 0 0 auto;
}
.topnav a {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 7px 11px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.topnav a:hover { color: var(--text); background: var(--surface-2); }
.topnav a.is-active { color: #fff; background: var(--accent); }
body.on-dark .topnav { background: rgba(31,31,78,0.74); border-color: rgba(255,255,255,0.16); }
body.on-dark .topnav__brand { color: #fff; }
body.on-dark .topnav a { color: rgba(255,255,255,0.62); }
body.on-dark .topnav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
body.on-dark .topnav a.is-active { background: #F05880; color: #fff; }

.apresentar {
  position: fixed; top: 18px; right: 24px; z-index: 82;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 19px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(31,31,78,0.06), 0 12px 30px rgba(31,31,78,0.10);
  transition: transform 180ms var(--ease), background-color 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease);
}
.apresentar:hover { transform: translateY(-1px); }
.apresentar svg { width: 14px; height: 14px; color: var(--accent-soft); }
body.on-dark .apresentar { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #fff; }
body.on-dark .apresentar svg { color: #F05880; }
/* modo apresentação: some tudo que não é conteúdo.
   O botão fica, apagado — se o navegador barrar a tela cheia é a única saída. */
body.apresentando .topnav, body.apresentando .ed-fab { display: none; }
body.apresentando .apresentar { opacity: .22; }
body.apresentando .apresentar:hover { opacity: 1; }

/* ===== página ===== */
.main { width: 100%; }
.page {
  min-height: 100vh; min-height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  /* topo maior que o rodapé: a .topnav é fixa e passaria por cima do .eyebrow */
  padding: clamp(88px, 11vh, 124px) clamp(34px, 5.6vw, 104px) clamp(52px, 7vh, 88px);
  position: relative;
  border-bottom: 1px solid var(--border);
}
body.apresentando .page { padding-top: clamp(52px, 7vh, 88px); }
.page--alt { background: var(--bg-subtle); }
.page__inner {
  width: 100%; max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(24px, 3.4vh, 44px);
}
.page-head { display: flex; flex-direction: column; gap: 14px; }

/* ===== capa ===== */
.page--capa { background: linear-gradient(150deg, #FFFFFF 0%, #FDF4F8 55%, #F2F1FA 100%); }
.capa-grid { display: grid; grid-template-columns: 1fr 0.94fr; gap: clamp(28px, 4vw, 68px); align-items: center; }
/* 58px é o teto: acima disso "de relacionamento." não cabe na coluna e o "de"
   fica órfão numa linha só. Conferido no PNG. */
.capa__title { font-size: clamp(38px, 4.4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.capa__sub { font-size: clamp(16px, 1.4vw, 21px); color: var(--text-soft); font-weight: 400; max-width: 620px; line-height: 1.44; }
.capa__cta {
  appearance: none; border: 0; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 16px; letter-spacing: 0.03em;
  padding: 16px 28px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 11px; width: fit-content;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
  box-shadow: 0 12px 28px rgba(226,74,127,0.28);
}
.capa__cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(226,74,127,0.38); }
.capa__cta svg { width: 16px; height: 16px; }
.capa__body { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 22px); align-items: flex-start; }
.capa-stats { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); padding-top: clamp(10px, 1.6vh, 20px); border-top: 1px solid var(--border-strong); width: 100%; }
.capa-stat { display: flex; flex-direction: column; gap: 2px; }
.capa-stat b { font-size: clamp(22px, 2.1vw, 32px); font-weight: 800; color: var(--accent-soft); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.capa-stat span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.capa__meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--text-dim); font-size: 12.5px; letter-spacing: 0.05em; }
.capa__meta span::before { content: "·"; margin-right: 11px; }
.capa__meta span:first-child::before { content: none; }

/* colagem de prints da capa */
.hero-stack { position: relative; width: 100%; aspect-ratio: 1 / 0.92; }
.hero-shot { position: absolute; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); background: #fff; box-shadow: 0 18px 44px rgba(31,31,78,0.16), 0 4px 10px rgba(31,31,78,0.06); }
.hero-shot img { width: 100%; display: block; }
.hero-shot--a { width: 74%; top: 0;   left: 0;   transform: rotate(-2.4deg); z-index: 1; }
.hero-shot--b { width: 72%; top: 30%; left: 27%; transform: rotate(2deg);    z-index: 3; }
.hero-shot--c { width: 58%; top: 63%; left: 2%;  transform: rotate(-1.4deg); z-index: 2; }

/* ===== sumário ===== */
.agenda-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.agenda-item {
  display: flex; flex-direction: column; gap: 10px; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px 20px; box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.agenda-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(226,74,127,0.35); }
.agenda-item__top { display: flex; align-items: center; justify-content: space-between; }
.agenda-item__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-dim); color: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; }
.agenda-item__ico svg { width: 19px; height: 19px; }
.agenda-item__num { font-size: 12px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.08em; }
.agenda-item__label { font-size: clamp(14.5px, 1.1vw, 17px); font-weight: 700; color: var(--text); line-height: 1.25; }
.agenda-item__label span { display: block; font-weight: 400; color: var(--text-muted); font-size: 12.5px; margin-top: 4px; line-height: 1.35; }

/* ===== layout de capítulo ===== */
.sys { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(26px, 3.2vw, 54px); align-items: center; }
.sys--flip { grid-template-columns: 1fr 1.3fr; }
.sys--flip .sys__media { order: 2; }
.sys--flip .sys__body  { order: 1; }
.sys__body { display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 26px); min-width: 0; }
.sys__media { min-width: 0; }

/* ===== antes / agora ===== */
.shift { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden; background: var(--surface); }
.shift__side { padding: 14px 18px; display: flex; flex-direction: column; gap: 5px; }
.shift__side--before { background: var(--surface-2); }
.shift__side--after { background: linear-gradient(135deg, var(--accent-dim), #FFFFFF 85%); }
.shift__tag { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.shift__side--after .shift__tag { color: var(--accent-soft); }
.shift__side p { font-size: clamp(13.5px, 1.02vw, 15.5px); line-height: 1.42; }
.shift__side--after p { color: var(--text); font-weight: 600; }
.shift__arrow { display: flex; align-items: center; padding: 0 12px; background: var(--surface-2); color: var(--text-dim); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.shift__arrow svg { width: 17px; height: 17px; }

/* ===== lista de especificações ===== */
.spec-list { display: flex; flex-direction: column; gap: 17px; }
.spec-row { display: flex; align-items: flex-start; gap: 14px; }
.spec-row__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-dim); color: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; }
.spec-row__icon svg { width: 20px; height: 20px; }
.spec-row__icon--glyph { font-size: 15px; font-weight: 800; font-family: var(--display); letter-spacing: 0.02em; }
.spec-row__body { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; min-width: 0; }
.spec-row__role { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); }
.spec-row p { font-size: clamp(13.5px, 1.02vw, 15.5px); }

/* ===== comparação de dois ===== */
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.compare-card { border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.compare-card--a { background: linear-gradient(155deg, #F3F1FA, #FFFFFF 68%); border-color: rgba(91,78,158,0.22); }
.compare-card--b { background: linear-gradient(155deg, #FDF0F5, #FFFFFF 68%); border-color: rgba(226,74,127,0.26); }
.compare-card__ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.compare-card__ico svg { width: 18px; height: 18px; }
.compare-card--a .compare-card__ico { background: rgba(91,78,158,0.12); color: var(--eyebrow); }
.compare-card--b .compare-card__ico { background: rgba(226,74,127,0.14); color: var(--accent-soft); }
.compare-card h4 { font-size: clamp(18px, 1.5vw, 23px); }
.compare-card__tag { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.compare-card p { font-size: clamp(13px, 1vw, 15px); }
.compare-card ul { margin: 4px 0 0; padding-left: 18px; }
.compare-card li { font-size: clamp(13px, 1vw, 15px); line-height: 1.55; color: var(--text-soft); margin-bottom: 5px; }
.compare-card li strong { color: var(--text); font-weight: 600; }

/* ===== números ===== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
.stat-box__value { font-size: clamp(20px, 1.7vw, 27px); font-weight: 800; color: var(--accent-soft); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-box__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }

/* ===== funil ===== */
.funil { display: flex; flex-direction: column; gap: 12px; }
.fstep { display: grid; grid-template-columns: minmax(150px, 210px) 1fr minmax(110px, 170px); align-items: center; gap: 16px; }
.fstep .fl { font-weight: 700; font-size: clamp(14px, 1.05vw, 16.5px); color: var(--text); }
.fstep .fl small { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.fstep .track { height: 34px; background: var(--surface-2); border-radius: 9px; overflow: hidden; }
.fstep .fill { height: 100%; border-radius: 9px; display: flex; align-items: center; padding: 0 14px; background: var(--accent); color: #fff; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; position: relative; }
.fstep .fill.sm { padding: 0; }
.fstep .fill.sm span { position: absolute; left: 100%; margin-left: 12px; top: 50%; transform: translateY(-50%); color: var(--text); white-space: nowrap; }
.fstep .fv { text-align: right; font-weight: 800; font-size: clamp(14px, 1.05vw, 16.5px); font-variant-numeric: tabular-nums; color: var(--text); }
.fstep .fv small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

/* ===== lista ranqueada ===== */
.lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.lista.um { grid-template-columns: 1fr; }
.li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-card); }
.li .bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--ac, var(--accent)); }
.li .nome { flex: 1; font-size: clamp(13.5px, 1vw, 15.5px); color: var(--text); }
.li .nome small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.li .val { font-weight: 800; font-size: clamp(15px, 1.2vw, 19px); font-variant-numeric: tabular-nums; color: var(--text); }
.li .pct { font-size: 12px; color: var(--text-muted); margin-left: 9px; font-weight: 400; }

/* ===== cadeia de etapas ===== */
.flow-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.flow-step { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 17px; font-size: clamp(13px, 1vw, 15.5px); font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-card); }
.flow-step svg { width: 16px; height: 16px; color: var(--text-muted); }
.flow-arrow { color: var(--text-dim); flex: 0 0 auto; display: inline-flex; }
.flow-arrow svg { width: 14px; height: 14px; }
.flow-step--last { background: var(--accent-dim); border-color: rgba(226,74,127,0.32); }
.flow-step--last svg { color: var(--accent-soft); }

/* ===== destaque e selo ===== */
.callout { display: flex; align-items: flex-start; gap: 13px; padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px; border-left: 4px solid var(--accent); font-size: clamp(14px, 1.06vw, 16.5px); color: var(--text-soft); line-height: 1.5; }
.callout svg { width: 18px; height: 18px; color: var(--accent-soft); margin-top: 2px; }
.callout strong { color: var(--text); font-weight: 700; }
.badge-soon { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--accent-dim); color: var(--accent-soft); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid rgba(226,74,127,0.3); width: fit-content; }
.badge-soon svg { width: 13px; height: 13px; }

/* ===== honestidade ===== */
.nota { font-size: clamp(12.5px, 0.96vw, 14.5px); color: var(--text-muted); line-height: 1.6; }
.nota strong, .nota b { color: var(--text); font-weight: 600; }
.metod { padding: 15px 19px; border-radius: 14px; background: rgba(91,78,158,0.055); border: 1px solid rgba(91,78,158,0.22); font-size: clamp(12.5px, 0.96vw, 14.5px); color: var(--text-soft); line-height: 1.6; }
.metod b, .metod strong { color: var(--text); font-weight: 600; }
.metod .h { font-weight: 800; color: var(--eyebrow); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 8px; }

/* ===== grade genérica ===== */
.grid { display: grid; gap: clamp(12px, 1.5vw, 18px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.persona-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-card); }
.persona-card__glyph { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-dim); color: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.persona-card__glyph svg { width: 20px; height: 20px; }
.persona-card__role { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); }
.persona-card p { font-size: clamp(13px, 1vw, 15.5px); }
.persona-card ul { margin: 6px 0 0; padding-left: 18px; }
.persona-card li { font-size: clamp(13px, 1vw, 15.5px); line-height: 1.55; color: var(--text-soft); margin-bottom: 5px; }
.persona-card li strong { color: var(--text); font-weight: 600; }

/* ===== moldura de navegador ===== */
.shot { position: relative; }
.shot::before {
  content: ""; position: absolute; inset: 8% 4% -6% 4%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(226,74,127,0.28), rgba(91,78,158,0.16) 55%, transparent 78%);
  filter: blur(46px); z-index: 0; pointer-events: none;
}
.frame { position: relative; z-index: 1; border-radius: 15px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-frame); }
.frame__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 13px; background: linear-gradient(180deg, #FDFDFE, #F2F1F7); border-bottom: 1px solid var(--border); }
.frame__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.frame__dots i:nth-child(1) { background: #F0A9A0; }
.frame__dots i:nth-child(2) { background: #F3D08A; }
.frame__dots i:nth-child(3) { background: #A7D8B4; }
.frame__url { flex: 1 1 auto; max-width: 300px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame__spacer { flex: 0 0 42px; }
.frame img { width: 100%; display: block; }
.frame__note { position: relative; z-index: 1; margin-top: 9px; font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); text-align: right; text-transform: uppercase; font-weight: 600; }

/* ===== seção escura — navy GR ===== */
.page--dark { background: radial-gradient(120% 90% at 15% 0%, #33316F 0%, var(--ink) 55%, #14133A 100%); border-bottom-color: rgba(255,255,255,0.08); }
.page--dark h2, .page--dark h4 { color: #FFFFFF; }
.page--dark .lede, .page--dark p { color: rgba(255,255,255,0.74); }
/* #F05880 é o rosa exato do logo e dá 4,70:1 sobre o navy — passa AA. */
.page--dark .eyebrow { color: #F05880; }
.page--dark em.acc { color: #F05880; }
.page--dark strong { color: #fff; }
.page--dark .nota { color: rgba(255,255,255,0.55); }
.page--dark .nota strong, .page--dark .nota b { color: #fff; }
.page--dark .metod { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.72); }
.page--dark .metod .h { color: #F05880; }
.page--dark .metod b, .page--dark .metod strong { color: #fff; }
.page--dark .badge-soon { background: rgba(240,88,128,0.16); border-color: rgba(240,88,128,0.42); color: #F79FBD; }
.page--dark .fstep .fill.sm span { color: #fff; }

.ledger { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ledger__row { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10); border-radius: 13px; padding: 15px 18px; }
.ledger__row--wide { grid-column: 1 / -1; width: calc(50% - 5px); margin: 0 auto; }
.ledger__ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(240,88,128,0.16); color: #F05880; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ledger__ico svg { width: 17px; height: 17px; }
.ledger__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ledger__name { font-weight: 700; font-size: clamp(14.5px, 1.08vw, 17px); color: #fff; letter-spacing: -0.01em; }
.ledger__sub { font-size: clamp(11.5px, 0.9vw, 13.5px); color: rgba(255,255,255,0.5); }
.ledger__price { flex: 0 0 auto; text-align: right; }
.ledger__price b { display: block; font-weight: 800; font-size: clamp(13.5px, 1.05vw, 16px); color: #F05880; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger__price span { display: block; font-weight: 700; font-size: 9.5px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

.total {
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(240,88,128,0.20), rgba(112,96,168,0.16) 60%, rgba(255,255,255,0.03));
  border: 1px solid rgba(240,88,128,0.34); border-left: 4px solid #F05880;
  border-radius: 18px; padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
}
.total__block { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.total__num { font-size: clamp(27px, 3vw, 46px); font-weight: 800; color: #fff; line-height: 1; white-space: nowrap; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.total__num--sm { font-size: clamp(22px, 2.2vw, 33px); color: #F05880; }
.total__unit { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.total__sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.16); }
.total__text { flex: 1 1 240px; font-size: clamp(13.5px, 1.02vw, 15.5px); color: rgba(255,255,255,0.72); line-height: 1.5; margin: 0; }

.closing { font-size: clamp(19px, 1.8vw, 28px); font-weight: 600; color: #fff; text-align: center; padding-top: clamp(6px, 1.4vh, 16px); letter-spacing: -0.015em; }
.closing em { color: #F05880; font-style: normal; }

/* ===== fechamento ===== */
.page--fim { background: linear-gradient(180deg, #FBF4F8 0%, #FFFFFF 100%); }
.page--fim .page__inner { align-items: center; text-align: center; }
.page--fim .lede { margin: 0 auto; }
.fim__invite { font-size: clamp(18px, 1.7vw, 25px); color: var(--text); font-weight: 500; max-width: 760px; margin: 0 auto; line-height: 1.5; }
.fim__credit { font-size: 13.5px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 4px; }

/* ===== entrada ===== */
@keyframes reveal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: reveal-in 650ms var(--ease) backwards; }
.reveal[data-delay="1"] { animation-delay: 70ms; }
.reveal[data-delay="2"] { animation-delay: 140ms; }
.reveal[data-delay="3"] { animation-delay: 210ms; }
.reveal[data-delay="4"] { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  html { scroll-snap-type: none; scroll-behavior: auto; }
}
/* Modo estático: desliga a entrada, necessário para print headless.
   Ative com ?estatico na URL ou com class="estatico" no elemento raiz.
   NAO escreva a tag body literal neste arquivo fora do HTML: shots.py
   procura essa tag por regex e injetaria o style dele no meio desta folha. */
body.estatico .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ===== impressão: 16:9 ===== */
@media print {
  @page { size: 338mm 190mm; margin: 0; }
  html { scroll-snap-type: none !important; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .hud-logo, .hud-counter, .hud-controls, .topnav, .apresentar { display: none !important; }
  .page {
    height: 190mm !important; min-height: 190mm !important; max-height: 190mm !important;
    overflow: hidden !important;
    page-break-after: always !important; break-after: page !important;
    page-break-inside: avoid !important; break-inside: avoid !important;
    padding: 11mm 13mm !important; border: 0 !important;
  }
  .page:last-child { page-break-after: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .capa__cta { display: none !important; }
  .shot::before { display: none !important; }
  .frame { box-shadow: 0 2px 10px rgba(31,31,78,0.14) !important; }
  .hero-shot { box-shadow: 0 4px 14px rgba(31,31,78,0.16) !important; }
  .sys { grid-template-columns: 1.3fr 1fr !important; }
  .sys--flip { grid-template-columns: 1fr 1.3fr !important; }
  .sys--flip .sys__media { order: 2 !important; }
  .sys--flip .sys__body { order: 1 !important; }
  .sys__media { max-width: none !important; }
  .capa-grid { grid-template-columns: 1fr 0.94fr !important; }
  .agenda-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .ledger { grid-template-columns: repeat(2, 1fr) !important; }
  .ledger__row--wide { width: calc(50% - 5px) !important; }
  .hero-stack { max-width: none !important; }
  .lista { grid-template-columns: 1fr 1fr !important; }
  .grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
  .compare-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== responsivo ===== */
@media (max-width: 1280px) {
  .sys, .sys--flip { grid-template-columns: 1fr; }
  .sys--flip .sys__media, .sys--flip .sys__body { order: initial; }
  .sys__media { max-width: 760px; }
}
@media (max-width: 1080px) {
  .capa-grid { grid-template-columns: 1fr; }
  .hero-stack { max-width: 560px; }
  .agenda-grid { grid-template-columns: repeat(2, 1fr); }
  .ledger { grid-template-columns: 1fr; }
  .ledger__row--wide { width: 100%; }
  .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  /* a pílula não cabe junto do botão: vira largura cheia e rola na horizontal */
  .topnav { left: 16px; right: 16px; transform: none; max-width: none; }
  .apresentar { top: auto; bottom: 78px; right: 24px; }
  .page { padding-top: clamp(84px, 10vh, 104px); }
}
@media (max-width: 680px) {
  .topnav { display: none; }
  .page { padding-top: clamp(44px, 6vh, 60px); }
  .agenda-grid, .grid--3, .grid--2, .compare-grid, .lista { grid-template-columns: 1fr; }
  .shift { grid-template-columns: 1fr; }
  .shift__arrow { display: none; }
  .shift__side--before { border-bottom: 1px solid var(--border); }
  .fstep { grid-template-columns: 1fr; gap: 6px; }
  .fstep .fv { text-align: left; }
  .page { padding: clamp(44px, 6vh, 60px) clamp(18px, 5vw, 26px); }
  .capa__title { font-size: clamp(36px, 9.5vw, 56px); }
  .hud-logo { top: 16px; left: 16px; }
  .hud-controls { bottom: 16px; right: 16px; }
  .hud-counter { display: none; }
}

/* ===== página de imagem inteira =====
   A imagem ocupa a tela toda. "cover" preenche cortando as bordas;
   "contain" mostra a imagem inteira e deixa o navy da marca em volta. */
.page--imagem { padding: 0; overflow: hidden; background: var(--ink); }
.page--imagem .img-cheia {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.page--imagem[data-ajuste="contain"] .img-cheia { object-fit: contain; }
.page--imagem .legenda-cheia {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(56px, 9vh, 96px) clamp(34px, 5.6vw, 104px) clamp(36px, 5vh, 56px);
  background: linear-gradient(to top, rgba(20,19,58,.88), rgba(20,19,58,.55) 45%, transparent);
}
.page--imagem .legenda-cheia h2 { color: #fff; max-width: 1100px; }
.page--imagem .legenda-cheia .eyebrow { color: #F05880; }
.page--imagem .legenda-cheia p { color: rgba(255,255,255,.8); max-width: 900px; }
.page--imagem .legenda-cheia em.acc { color: #F05880; }
/* legenda vazia não desenha a tarja por cima da foto */
.page--imagem .legenda-cheia:empty { display: none; }
@media print { .page--imagem .img-cheia { position: absolute; } }