/* ==========================================================================
   Scrollytelling Porfirias Agudas · Recordati Rare Diseases
   Recriado do Figma PFA-003-026 (10 telas de 402 x 715).
   Todas as medidas usam a unidade --u = 1px do Figma, escalada pela
   largura da coluna (402px no design, maximo 460px).
   ========================================================================== */

/* ---------- Fontes locais (Google Fonts via Fontsource, OFL) ---------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/open-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/open-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --red: #ff0000;
  --red-hover: #e00000;
  --ink: #402c2c;            /* titulo "A dor que desafia", texto botao branco */
  --text: rgba(17, 17, 17, 0.85);
  --text-strong: #111111;
  --gate: #1e1e1e;           /* bloco do formulario (tela 1) */
  --night: #1a1c21;          /* fundo da tela 10 */
  --field-ink: #1a1c21;
  --white: #ffffff;
  --backdrop: #0e0e10;       /* fora da coluna em telas largas */

  /* 86.215% do Figma sobre a altura natural da IBM Plex Sans (1.3em) = 1.1208em */
  --lh-tight: 1.1208;

  --w: min(100vw, 460px);
  --u: calc(var(--w) / 402);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Em telas largas a coluna tambem respeita a altura: um slide inteiro por tela */
@media (min-width: 600px) {
  :root { --w: min(460px, max(320px, calc(100vh * 402 / 715))); }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Sem JS: rolagem nativa com encaixe. Com JS, main.js anima slide a slide. */
html:not(.js) {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}
html.js { overscroll-behavior-y: none; }

/* Saida para o cadastro no ultimo scroll */
.story { transition: opacity 0.35s ease; }
.is-leaving .story { opacity: 0; }

body {
  margin: 0;
  background: var(--backdrop);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video { display: block; }

h1, h2, p { margin: 0; }

strong { font-weight: 700; }

sup {
  position: relative;
  top: -0.5em;
  font-size: calc(8.7075 * var(--u));
  line-height: 0;
  vertical-align: baseline;
}

.story {
  width: var(--w);
  margin: 0 auto;
  background: var(--white);
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(100vh, calc(715 * var(--u)));
  min-height: max(100svh, calc(715 * var(--u)));
  overflow: hidden;
  background: var(--white);
  scroll-snap-align: start;
}

/* Enquanto o CRM nao foi informado, so a tela 1 fica visivel */
.js .story:not(.is-unlocked) > .screen:not(.screen--gate) { display: none; }

/* ---------- Botao (Frame 2 / Frame 3 do Figma) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: none;
  height: calc(36.22 * var(--u));
  /* o CSS soma o letter-spacing depois da ultima letra; o Figma nao */
  padding: 0 calc((36 - 1.6068) * var(--u)) 0 calc(37 * var(--u));
  border: 0;
  border-radius: calc(58.419 * var(--u));
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: calc(10.712 * var(--u));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: calc(1.6068 * var(--u));
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }

.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-hover); }

.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: #f1f1f1; }

.screen--red .btn:focus-visible,
.screen--night .btn:focus-visible,
.gate__form .btn:focus-visible { outline-color: var(--white); }

.btn--xs {
  height: calc(26.22 * var(--u));
  padding: 0 calc((12 - 1.1632) * var(--u)) 0 calc(12 * var(--u));
  border-radius: calc(42.29 * var(--u));
  font-size: calc(7.755 * var(--u));
  letter-spacing: calc(1.1632 * var(--u));
}

/* ---------- Cabecalho grande: logo + metaDoctors (telas 1, 3, 10) ---------- */
.brand {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(35 * var(--u)) calc(30.2 * var(--u)) 0 calc(28 * var(--u));
}
.brand__logo {
  width: calc(172.111 * var(--u));
  height: calc(34.03 * var(--u));
  object-fit: cover;
  object-position: top;
}
.brand__md {
  width: calc(124.8 * var(--u));
  height: auto;
  margin-top: calc(2.78 * var(--u));
}

/* ---------- Header KV: aba vermelha + metaDoctors (telas 2, 4-9) ---------- */
.kv {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: calc(48 * var(--u));
  pointer-events: none;
}
.kv__tab {
  position: absolute;
  top: 0;
  left: calc(36 * var(--u));
  width: calc(132.444 * var(--u));
  height: calc(48 * var(--u));
  background: var(--red);
  border-radius: 0 0 calc(10.667 * var(--u)) calc(10.667 * var(--u));
}
.kv__logo {
  position: absolute;
  top: calc(16.89 * var(--u));
  left: calc(8.89 * var(--u));
  width: calc(114.775 * var(--u));
  height: calc(22.694 * var(--u));
  object-fit: cover;
  object-position: top;
}
.kv__md {
  position: absolute;
  top: calc(14 * var(--u));
  left: calc(247 * var(--u));
  width: calc(124.8 * var(--u));
  height: auto;
}

/* ---------- Imagem de topo 190px (telas 4-7) ---------- */
.hero {
  position: relative;
  flex: none;
  height: calc(190 * var(--u));
  overflow: hidden;
}
.hero img {
  position: absolute;
  max-width: none;
}
.hero--t4 img { left: calc(-524.002 * var(--u)); top: calc(-205.656 * var(--u)); width: calc(941.002 * var(--u)); height: calc(529.321 * var(--u)); }
.hero--t5 img { left: calc(-409.661 * var(--u)); top: calc(0.057 * var(--u));    width: calc(826.661 * var(--u)); height: calc(464.987 * var(--u)); }
.hero--t6 img { left: calc(0.125 * var(--u));    top: calc(-22.287 * var(--u));  width: calc(478.549 * var(--u)); height: calc(234.555 * var(--u)); }
.hero--t7 img { left: calc(-11.176 * var(--u));  top: calc(-92.891 * var(--u));  width: calc(417 * var(--u));     height: calc(521.246 * var(--u)); }

/* ---------- Titulo "A dor que desafia o diagnostico" + icones ---------- */
.headline {
  position: relative;
  flex: none;
  align-self: flex-start;
}
.headline__text {
  height: calc(141 * var(--u));
  color: var(--ink);
  font-size: calc(41.913 * var(--u));
  font-weight: 700;
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.headline__text em {
  color: var(--red);
  font-style: normal;
}
.headline__icon {
  position: absolute;
  top: calc(7.583 * var(--u));
  max-width: none;
  height: auto;
}
.headline__icon--cerebro      { left: calc(147.803 * var(--u)); width: calc(28.8729 * var(--u)); }
.headline__icon--prancheta    { left: calc(194.553 * var(--u)); width: calc(23.3737 * var(--u)); }
.headline__icon--estetoscopio { left: calc(235.803 * var(--u)); width: calc(28.8734 * var(--u)); }

/* ---------- Faixa vermelha com texto centralizado ---------- */
.band {
  flex: none;
  background: var(--red);
}
.band__text {
  color: var(--white);
  font-size: calc(15.244 * var(--u));
  font-weight: 700;
  line-height: var(--lh-tight);
  text-align: center;
}
/* Faixas de rodape: no Figma tem 176px e e cortada pelo frame (128px visiveis) */
.band--foot { min-height: calc(128 * var(--u)); }
.band--t4 { padding-top: calc(46 * var(--u)); }
.band--t4 .band__text { width: calc(310 * var(--u)); margin: 0 auto; }
.band--t5 { padding-top: calc(46.44 * var(--u)); }
.band--t5 .band__text { width: calc(266 * var(--u)); margin: 0 auto; }

/* ---------- Bloco de texto do caso clinico ---------- */
.case {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-height: calc(397 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u));
}
.case__title {
  flex: none;
  color: var(--text);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(30 * var(--u));
}
.case__title--t5 { height: calc(71 * var(--u)); }

.copy {
  color: var(--text);
  font-size: calc(13.5 * var(--u));
  line-height: calc(20 * var(--u));
}
.copy--bold { font-weight: 700; }
.copy--spaced { margin-bottom: calc(20 * var(--u)); }   /* linha em branco do Figma */

/* ==========================================================================
   Tela 1 · Acesso
   ========================================================================== */
.screen--gate { background: var(--gate); }

.gate__top {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  background: var(--red);
}
.gate__title {
  width: calc(335 * var(--u));
  margin: calc(108.97 * var(--u)) 0 0 calc(33 * var(--u));
  color: var(--white);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.121;
  text-transform: uppercase;
}
.gate__lead {
  width: calc(346 * var(--u));
  margin: calc(8.53 * var(--u)) 0 calc(24 * var(--u)) calc(34 * var(--u));
  color: var(--white);
  font-size: calc(23 * var(--u));
  line-height: calc(27 * var(--u));
}

.gate__form {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  height: calc(261 * var(--u));
  padding-top: calc(56 * var(--u));
  background: var(--gate);
}
.gate__label {
  width: calc(274 * var(--u));
  color: var(--white);
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: calc(27 * var(--u));
  text-align: center;
}
.gate__field {
  position: relative;
  width: calc(248 * var(--u));
  height: calc(29 * var(--u));
  margin-top: calc(7 * var(--u));
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: calc(40 * var(--u));
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.gate__field:focus-within { box-shadow: 0 0 0 2px var(--red); }
.gate__field.is-invalid { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }

/* Os controles usam 16px (evita o zoom automatico do iOS) e a escala 0.8125
   devolve os 13px do design. Medidas internas divididas pela mesma escala. */
.gate__controls {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: calc(100% / 0.8125);
  height: calc(100% / 0.8125);
  /* borda interna no Figma: desconta 1px do padding */
  padding: 0 calc((24 * var(--u) - 1px) / 0.8125) 0 calc((15 * var(--u) - 1px) / 0.8125);
  color: var(--field-ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  transform: scale(0.8125);
  transform-origin: 0 0;
}
.gate__uf {
  position: relative;
  flex: none;
  height: 100%;
}
.gate__uf::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 3px;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  pointer-events: none;
}
.gate__select {
  height: 100%;
  margin: 0;
  padding: 0 16px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.gate__select option { color: var(--field-ink); text-transform: none; }
.gate__input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 0.45em;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
}
.gate__input::placeholder { color: rgba(26, 28, 33, 0.3); opacity: 1; }
.gate__error {
  position: absolute;
  top: calc(123 * var(--u));
  left: 0;
  right: 0;
  color: var(--white);
  font-size: calc(11 * var(--u));
  line-height: calc(14 * var(--u));
  text-align: center;
}
.gate__btn {
  align-self: center;
  width: calc(94 * var(--u));
  height: calc(36 * var(--u));
  margin-top: calc(28 * var(--u));
  padding: 0 0 0 calc(1.6068 * var(--u));
}

/* ==========================================================================
   Tela 2 · Capa
   ========================================================================== */
.cover__headline { margin: calc(123 * var(--u)) 0 0 calc(36 * var(--u)); }
.cover__band {
  height: calc(72 * var(--u));
  margin-top: calc(76 * var(--u));
  padding-top: calc(19 * var(--u));
}
.cover__media {
  position: relative;
  flex: 1 0 auto;
  min-height: calc(303 * var(--u));
  overflow: hidden;
}
.cover__media img {
  position: absolute;
  top: 0;
  left: calc(-349 * var(--u));
  width: calc(822 * var(--u));
  height: calc(462 * var(--u));
  max-width: none;
  object-fit: cover;
}

/* ==========================================================================
   Tela 3 · Convite
   ========================================================================== */
.screen--red { background: var(--red); }

.invite__title {
  flex: none;
  width: calc(339 * var(--u));
  height: calc(108 * var(--u));
  margin: calc(41.97 * var(--u)) 0 0 calc(28 * var(--u));
  color: var(--white);
  font-size: calc(24.528 * var(--u));
  font-weight: 700;
  line-height: var(--lh-tight);
}
.invite__text {
  width: calc(346 * var(--u));
  margin: calc(12 * var(--u)) 0 0 calc(27 * var(--u));
  color: var(--white);
  font-size: calc(14.5 * var(--u));
  line-height: calc(22 * var(--u));
}
/* margem inferior = respiro minimo ate a ilustracao (393 - 370.22) */
.invite__btn { margin: calc(15 * var(--u)) 0 calc(22.78 * var(--u)) calc(28 * var(--u)); }
.invite__media {
  position: relative;
  flex: none;
  height: calc(322 * var(--u));
  margin-top: auto;
}
.invite__media img {
  position: absolute;
  top: 0;
  left: calc(-97 * var(--u));
  width: calc(576 * var(--u));
  height: calc(322 * var(--u));
  max-width: none;
  object-fit: cover;
  opacity: 0.72;
}

/* ==========================================================================
   Tela 6 · Quiz
   ========================================================================== */
.quiz {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding-top: calc(38 * var(--u));
}
.quiz__question {
  flex: none;
  width: calc(408 * var(--u));
  height: calc(130 * var(--u));
  padding: 0 calc(36 * var(--u));
  color: var(--text-strong);
  font-size: calc(19 * var(--u));
  font-weight: 700;
  line-height: calc(26 * var(--u));
  letter-spacing: calc(-0.33 * var(--u));
}
.quiz__options {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(36 * var(--u)) calc(16 * var(--u));
}
.alt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(11 * var(--u));
  /* borda interna no Figma: desconta 1px do padding */
  padding: calc(12 * var(--u) - 1px) calc(14 * var(--u) - 1px);
  background: var(--white);
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: calc(8 * var(--u));
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.alt:hover { border-color: rgba(17, 17, 17, 0.32); }
.alt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.alt__chip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border: 1px solid rgba(17, 17, 17, 0.25);
  border-radius: calc(4 * var(--u));
  color: var(--text-strong);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: normal;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.alt__text {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-strong);
  font-size: calc(13 * var(--u));
  line-height: calc(18 * var(--u));
}
.alt__text--fixed { flex: none; width: calc(255 * var(--u)); }

.alt.is-selected,
.alt:has(.alt__input:checked) { border-color: var(--red); }
.alt.is-selected .alt__chip,
.alt:has(.alt__input:checked) .alt__chip { background: var(--red); border-color: var(--red); color: var(--white); }
.alt:has(.alt__input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

.quiz__divider {
  flex: none;
  width: calc(330 * var(--u));
  height: 0.5px;
  margin: 0 0 0 calc(36 * var(--u));
  border: 0;
  background: rgba(17, 17, 17, 0.1);
}

/* ==========================================================================
   Tela 7 · Integre o quadro
   ========================================================================== */
.integrate__title {
  flex: none;
  width: calc(315 * var(--u));
  height: calc(98 * var(--u));
  margin: calc(46 * var(--u)) 0 0 calc(38 * var(--u));
  color: var(--text);
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(30 * var(--u));
}
.integrate__text { width: calc(330 * var(--u)); margin: calc(24 * var(--u)) 0 0 calc(36 * var(--u)); }
.integrate__ask  { width: calc(330 * var(--u)); margin: calc(28 * var(--u)) 0 0 calc(36 * var(--u)); }
.integrate__btn  { margin: calc(27 * var(--u)) 0 calc(20.78 * var(--u)) calc(36 * var(--u)); }
.band--t7 {
  min-height: calc(125 * var(--u));
  margin-top: auto;
  padding-top: calc(37 * var(--u));
}
.band--t7 .band__text { width: calc(315 * var(--u)); margin-left: calc(43 * var(--u)); }

/* ==========================================================================
   Tela 8 · Video
   ========================================================================== */
.screen--video { background: #000; }

.video {
  position: absolute;
  inset: 0;
}
.video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 67.33% 50%;   /* recorte do Figma: left -145.29% em 315.79% */
}
.video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.video__player[hidden] { display: none; }
.video.is-playing .video__poster,
.video.is-playing .play { display: none; }

.play {
  position: absolute;
  top: calc(50% - 47.5 * var(--u));
  left: calc(153 * var(--u));
  width: calc(95 * var(--u));
  height: calc(95 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.play img {
  position: absolute;
  max-width: none;
  height: auto;
  transition: transform 0.25s ease;
}
.play__halo   { top: 0; left: 0; width: calc(95 * var(--u)); }
.play__circle { top: calc(13 * var(--u)); left: calc(13 * var(--u)); width: calc(69 * var(--u)); }
.play__icon   { top: calc(36 * var(--u)); left: calc(36 * var(--u)); width: calc(24 * var(--u)); }
.play:hover .play__halo,
.play:focus-visible .play__halo { transform: scale(1.08); }
.play:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ==========================================================================
   Tela 9 · A jornada
   ========================================================================== */
.journey__bg {
  position: absolute;
  z-index: 0;
  top: calc(-110 * var(--u));
  left: 0;
  right: 0;
  height: calc(476 * var(--u));
}
.journey__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journey__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--white) 81.513%);
}
.journey {
  position: relative;
  z-index: 1;
  flex: none;
  gap: calc(24 * var(--u));
  min-height: calc(397 * var(--u));
  margin-top: calc(238 * var(--u));
}
.journey__title {
  flex: none;
  width: calc(315 * var(--u));
  height: calc(127 * var(--u));
  color: var(--text);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(24 * var(--u));
}

/* ==========================================================================
   Tela 10 · Encerramento
   ========================================================================== */
.screen--night { background: var(--night); }

.closing__title {
  width: calc(361 * var(--u));
  margin: calc(140.97 * var(--u)) 0 0 calc(22 * var(--u));
  color: var(--white);
  font-family: 'Open Sans', 'IBM Plex Sans', sans-serif;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.closing__title span { color: var(--red); }
.closing__text {
  width: calc(326 * var(--u));
  margin: calc(20.8 * var(--u)) 0 0 calc(22 * var(--u));
  color: rgba(255, 255, 255, 0.85);
  font-size: calc(13.5 * var(--u));
  line-height: calc(20 * var(--u));
}
.closing__btn {
  width: calc(222 * var(--u));
  height: calc(36 * var(--u));
  margin: calc(15 * var(--u)) 0 calc(24 * var(--u)) calc(22 * var(--u));
  padding: 0 0 0 calc(1.6068 * var(--u));
  white-space: nowrap;
}
.closing__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 calc(14 * var(--u)) calc(15.78 * var(--u));
}
.closing__legal {
  width: calc(252 * var(--u));
  color: rgba(255, 255, 255, 0.85);
  font-size: calc(9.123 * var(--u));
  line-height: calc(10 * var(--u));
}

/* ==========================================================================
   Animacao de entrada ao rolar (scrollytelling)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(calc(18 * var(--u)));
    transition:
      opacity 0.7s ease var(--reveal-delay, 0s),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  }
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.js) { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; }
}