/* ==========================================================================
   Mockup do app (páginas Score e Check-up; a tela do Check-up está no fim do arquivo)

   Tela "Score de Saúde" do app Mude reconstruída em HTML com as medidas do Figma (❤️ Saúde → Score
   Desktop, celular de 475×935). Tudo é medido em --px, 1/475 da largura do celular: o mockup escala
   proporcionalmente com a largura que .score__phone tiver (container query).

   O topo da tela é transparente de propósito (como no Figma): o fundo da página aparece atrás do homem e
   dos cards de score. Só o que aparece na tela foi construído; o resto da rolagem do app fica de fora.
   ========================================================================== */

/* Fontes do app, usadas só aqui */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/barlow-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/barlow-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/barlow-latin-700-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src: url(../fonts/barlow-condensed-latin-300-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/barlow-condensed-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2");
}

.mock {
  /* 1px do Figma; cqw vem do container .score__phone */
  --px: calc(100cqw / 475);
  --mock-text: #212121;
  --mock-muted: #757575;
  --mock-line: #e0e0e0;
  --mock-icon-bg: linear-gradient(-23.96deg, #64748b 0%, #cbd5e1 100%);
  --mock-font-condensed: "Barlow Condensed", "Barlow", var(--font-sans);
  position: relative;
  aspect-ratio: 475 / 935;
  font-family: "Barlow", var(--font-sans);
  line-height: normal;
  -webkit-user-select: none;
  user-select: none;
}

.mock img {
  max-width: none;
}

/* Moldura: foto do aparelho com o recorte da tela (máscara = retângulo menos a tela, do Figma) */
.mock__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 935' preserveAspectRatio='none'%3E%3Cpath d='M475 935H0V0H475V935ZM142.3 33.3906C102.847 33.3906 83.1208 33.391 68.4473 41.9141C58.9813 47.4123 51.1116 55.2821 45.6133 64.748C37.0902 79.4215 37.0898 99.1478 37.0898 138.601V796.221C37.0898 835.673 37.0902 855.4 45.6133 870.073C51.1116 879.539 58.9813 887.409 68.4473 892.907C83.1208 901.43 102.847 901.431 142.3 901.431H332.39C371.842 901.431 391.569 901.43 406.242 892.907C415.708 887.409 423.579 879.539 429.077 870.073C437.6 855.4 437.6 835.673 437.6 796.221V138.601C437.6 99.148 437.6 79.4215 429.077 64.748C423.579 55.2821 415.708 47.4123 406.242 41.9141C391.569 33.3911 371.842 33.3906 332.39 33.3906H142.3Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 935' preserveAspectRatio='none'%3E%3Cpath d='M475 935H0V0H475V935ZM142.3 33.3906C102.847 33.3906 83.1208 33.391 68.4473 41.9141C58.9813 47.4123 51.1116 55.2821 45.6133 64.748C37.0902 79.4215 37.0898 99.1478 37.0898 138.601V796.221C37.0898 835.673 37.0902 855.4 45.6133 870.073C51.1116 879.539 58.9813 887.409 68.4473 892.907C83.1208 901.43 102.847 901.431 142.3 901.431H332.39C371.842 901.431 391.569 901.43 406.242 892.907C415.708 887.409 423.579 879.539 429.077 870.073C437.6 855.4 437.6 835.673 437.6 796.221V138.601C437.6 99.148 437.6 79.4215 429.077 64.748C423.579 55.2821 415.708 47.4123 406.242 41.9141C391.569 33.3911 371.842 33.3906 332.39 33.3906H142.3Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.mock__screen {
  position: absolute;
  top: calc(33.39 * var(--px));
  left: calc(37.085 * var(--px));
  width: calc(400.51 * var(--px));
  height: calc(868.04 * var(--px));
  overflow: hidden;
  border-radius: calc(63 * var(--px));
}

/* Página do app (frame "iPhone 17"): cabeçalho fixo no topo, hero transparente e cards em fundo branco */
.mock__page {
  position: absolute;
  top: calc(1.62 * var(--px));
  left: calc(0.745 * var(--px));
  width: calc(400.51 * var(--px));
  height: calc(870.76 * var(--px));
}

/* --- Hero --------------------------------------------------------------- */

.mock__hero {
  position: absolute;
  top: calc(179.333 * var(--px));
  left: 0;
  width: 100%;
  height: calc(396.525 * var(--px));
}

.mock__hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mock__hero-photo img {
  position: absolute;
  top: 31.95%;
  left: 39.64%;
  width: 24.09%;
  height: 79.39%;
}

.mock__hero-fade {
  position: absolute;
  top: calc(286.66 * var(--px));
  left: calc(0.17 * var(--px));
  width: calc(400 * var(--px));
  height: calc(110 * var(--px));
  background-image: linear-gradient(rgb(255 255 255 / 0), #fff);
}

.mock__eyebrow {
  position: absolute;
  top: calc(27.9 * var(--px));
  left: calc(15.94 * var(--px));
  width: calc(326.784 * var(--px));
  font-family: var(--font-mono);
  font-size: calc(11.956 * var(--px));
  letter-spacing: calc(-0.0837 * var(--px));
  text-transform: uppercase;
  color: var(--color-menta-100);
}

.mock__title {
  position: absolute;
  top: calc(51.81 * var(--px));
  left: calc(15.94 * var(--px));
  width: calc(326.784 * var(--px));
  font-family: var(--font-display);
  font-size: calc(31.881 * var(--px));
  line-height: 1;
  color: #fff;
}

/* Cards de score: Mente e Corpo (estreitos) e Bem-estar (com o medidor) */
.mock__metric,
.mock__wellness {
  position: absolute;
  top: calc(199.26 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(99.629 * var(--px));
  border: calc(0.519 * var(--px)) solid;
  border-radius: calc(13.491 * var(--px));
  color: var(--color-neutro-950);
  text-align: center;
}

.mock__metric {
  gap: calc(4.151 * var(--px));
  width: calc(47.822 * var(--px));
  padding: calc(8.302 * var(--px));
  border-color: rgb(211 221 234 / 0.3);
  background-color: rgb(211 221 234 / 0.5);
  -webkit-backdrop-filter: blur(calc(25.945 * var(--px)));
  backdrop-filter: blur(calc(25.945 * var(--px)));
}

.mock__metric--mind {
  left: calc(80.7 * var(--px));
}

.mock__metric--body {
  left: calc(130.51 * var(--px));
  background-color: rgb(211 221 234 / 0.7);
}

.mock__metric-label,
.mock__wellness-label {
  font-family: var(--font-mono);
  font-size: calc(9.34 * var(--px));
  line-height: 1.2;
}

.mock__metric-icon {
  display: flex;
  padding: calc(6.227 * var(--px));
  border-radius: calc(11.07 * var(--px));
  background: var(--mock-icon-bg), #9e9e9e;
}

.mock__metric-icon img {
  width: calc(16.605 * var(--px));
  height: calc(16.605 * var(--px));
}

.mock__metric-data,
.mock__gauge-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.038 * var(--px));
  white-space: nowrap;
}

.mock__metric-data b,
.mock__gauge-data b {
  font-family: var(--font-display);
  font-size: calc(18.681 * var(--px));
  font-weight: 600;
  line-height: 1;
}

.mock__metric-data small,
.mock__gauge-data small {
  font-family: var(--font-sans);
  font-size: calc(8.302 * var(--px));
  line-height: 1.2;
}

.mock__wellness {
  left: calc(224.17 * var(--px));
  gap: calc(4.67 * var(--px));
  width: calc(95.644 * var(--px));
  padding: calc(10.378 * var(--px)) calc(14.529 * var(--px));
  border-color: rgb(186 231 201 / 0.3);
  background-color: rgb(186 231 201 / 0.5);
  box-shadow: 0 calc(1.038 * var(--px)) calc(1.557 * var(--px)) rgb(0 0 0 / 0.1);
  -webkit-backdrop-filter: blur(calc(36.323 * var(--px)));
  backdrop-filter: blur(calc(36.323 * var(--px)));
}

.mock__wellness-label {
  width: calc(50.852 * var(--px));
  line-height: 1;
}

.mock__gauge {
  position: relative;
  flex-shrink: 0;
  width: calc(55.35 * var(--px));
  height: calc(49.815 * var(--px));
}

.mock__gauge img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(49.173 * var(--px));
}

.mock__gauge-data {
  position: absolute;
  top: calc(50% + 2.07 * var(--px));
  left: 50%;
  gap: calc(0.83 * var(--px));
  translate: -50% -50%;
}

.mock__wellness-status {
  font-family: var(--font-sans);
  font-size: calc(10.378 * var(--px));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-verde-atlantico-950);
}

/* Balão "Complete Mente e Corpo para ver seu Score" (o desenho tem a ponta embaixo) */
.mock__tooltip {
  position: absolute;
  top: calc(328.78 * var(--px));
  left: calc(15.94 * var(--px));
  width: calc(368.629 * var(--px));
  height: calc(55.792 * var(--px));
  border-radius: calc(11.956 * var(--px));
  -webkit-backdrop-filter: blur(calc(4.981 * var(--px)));
  backdrop-filter: blur(calc(4.981 * var(--px)));
}

.mock__tooltip-bubble {
  position: absolute;
  top: calc(-0.995 * var(--px));
  left: calc(-4.977 * var(--px));
  width: calc(378.592 * var(--px));
  height: calc(63.76 * var(--px));
}

.mock__tooltip-text {
  position: absolute;
  top: calc(50% - 4.98 * var(--px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(2.989 * var(--px));
  translate: -50% -50%;
  font-family: var(--mock-font-condensed);
  font-size: calc(16.439 * var(--px));
  line-height: calc(21.918 * var(--px));
  letter-spacing: calc(-0.1644 * var(--px));
  white-space: nowrap;
  color: #fff;
}

.mock__tooltip-tag {
  display: flex;
  align-items: flex-end;
  gap: calc(3.985 * var(--px));
}

.mock__tooltip-tag b {
  font-family: "Barlow Semi Condensed", var(--mock-font-condensed);
  font-weight: 700;
}

.mock__chip-icon {
  display: flex;
  padding: calc(2.717 * var(--px));
  border-radius: calc(7.246 * var(--px));
  background: var(--mock-icon-bg), #9e9e9e;
}

.mock__chip-icon img {
  width: calc(14.492 * var(--px));
  height: calc(14.492 * var(--px));
}

/* --- Cards Mente e Corpo -------------------------------------------------- */

.mock__cards {
  position: absolute;
  top: calc(575.858 * var(--px));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: calc(15.941 * var(--px));
  width: 100%;
  height: calc(294.902 * var(--px));
  padding: 0 calc(15.941 * var(--px));
  background-color: #fff;
}

.mock__card {
  display: flex;
  align-items: center;
  gap: calc(11.956 * var(--px));
  padding: calc(19.926 * var(--px)) calc(15.941 * var(--px));
  overflow: hidden;
  border: calc(0.996 * var(--px)) solid var(--mock-line);
  border-radius: calc(11.956 * var(--px));
  background-color: #fff;
}

.mock__card-icon {
  display: flex;
  flex-shrink: 0;
  padding: calc(13.948 * var(--px));
  border-radius: calc(19.926 * var(--px));
  background-image: var(--mock-icon-bg);
}

.mock__card-icon img {
  width: calc(31.881 * var(--px));
  height: calc(31.881 * var(--px));
}

.mock__card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(3.985 * var(--px));
  min-width: 0;
}

.mock__card-text b {
  font-size: calc(19.926 * var(--px));
  line-height: 1;
  letter-spacing: calc(-0.1993 * var(--px));
  color: var(--mock-text);
}

.mock__card-text span {
  width: calc(96.64 * var(--px));
  font-size: calc(13.948 * var(--px));
  color: var(--mock-muted);
}

.mock__button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(3.985 * var(--px));
  height: calc(35.867 * var(--px));
  margin-left: calc(3.985 * var(--px));
  padding: calc(7.97 * var(--px)) calc(7.97 * var(--px)) calc(8.967 * var(--px)) calc(11.956 * var(--px));
  border-radius: calc(8 * var(--px));
  background-color: var(--color-melancia);
  font-size: calc(11.96 * var(--px));
  font-weight: 700;
  letter-spacing: calc(0.3588 * var(--px));
  white-space: nowrap;
  color: #fff;
}

.mock__button img {
  width: calc(19.926 * var(--px));
  height: calc(19.926 * var(--px));
}

/* --- Cabeçalho: status, marca e chips ------------------------------------ */

.mock__header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: calc(15.941 * var(--px));
  border-bottom: calc(0.996 * var(--px)) solid var(--mock-line);
  background-color: #fff;
}

.mock__status {
  display: flex;
  align-items: center;
  gap: calc(5.978 * var(--px));
  height: calc(53.8 * var(--px));
  padding: calc(10.959 * var(--px)) calc(15.941 * var(--px));
}

.mock__time {
  flex: 1;
  padding-top: calc(1.993 * var(--px));
  font-family: -apple-system, "SF Pro Text", system-ui, var(--font-sans);
  font-size: calc(16.94 * var(--px));
  font-weight: 600;
  line-height: calc(21.918 * var(--px));
  text-align: center;
  color: #000;
}

.mock__island {
  flex-shrink: 0;
  width: calc(124.537 * var(--px));
  height: calc(36.863 * var(--px));
}

.mock__levels {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: calc(6.974 * var(--px));
  padding-top: calc(0.996 * var(--px));
}

.mock__levels img:nth-child(1) {
  width: calc(19.129 * var(--px));
  height: calc(12.181 * var(--px));
}

.mock__levels img:nth-child(2) {
  width: calc(17.078 * var(--px));
  height: calc(12.283 * var(--px));
}

.mock__levels img:nth-child(3) {
  width: calc(27.227 * var(--px));
  height: calc(12.952 * var(--px));
}

.mock__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(53.8 * var(--px));
  padding: calc(11.956 * var(--px)) calc(19.926 * var(--px)) calc(15.941 * var(--px));
}

.mock__brand {
  display: flex;
  align-items: flex-start;
  gap: calc(7.97 * var(--px));
}

.mock__brand img {
  width: calc(58.18 * var(--px));
  height: calc(23.911 * var(--px));
}

.mock__brand span {
  font-family: var(--mock-font-condensed);
  font-size: calc(25.9 * var(--px));
  font-style: italic;
  font-weight: 300;
  line-height: calc(25.904 * var(--px));
  letter-spacing: calc(-0.5 * var(--px));
  color: #0d0e15;
}

.mock__by {
  display: flex;
  align-items: center;
  gap: calc(3.985 * var(--px));
  font-family: var(--font-display);
  font-size: calc(12.95 * var(--px));
  color: var(--mock-muted);
}

.mock__by img {
  width: calc(108.158 * var(--px));
  height: calc(15.941 * var(--px));
}

/* Chips de navegação: passam da borda direita da tela, como no app */
.mock__chips {
  display: flex;
  align-items: center;
  gap: calc(7.97 * var(--px));
  height: calc(55.792 * var(--px));
  padding: 0 calc(15.941 * var(--px));
}

.mock__chip {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: calc(5.978 * var(--px));
  width: calc(103.615 * var(--px));
  padding: calc(11.956 * var(--px)) calc(9.963 * var(--px));
  border: calc(0.996 * var(--px)) solid var(--mock-line);
  border-radius: calc(7.97 * var(--px));
  background-color: #fff;
  font-family: var(--mock-font-condensed);
  font-size: calc(13.948 * var(--px));
  font-weight: 500;
  line-height: calc(15.941 * var(--px));
  letter-spacing: calc(-0.0996 * var(--px));
  color: var(--mock-muted);
}

.mock__chip span {
  flex: 1;
}

.mock__chip img {
  width: calc(19.926 * var(--px));
  height: calc(19.926 * var(--px));
}

.mock__chip--active {
  border: 0;
  background-color: var(--color-melancia);
  color: #fff;
}

/* O texto do chip ativo fica alinhado embaixo de uma caixa de duas linhas */
.mock__chip--active span {
  display: flex;
  align-items: flex-end;
  height: calc(31.881 * var(--px));
}

.mock__chip--back {
  width: auto;
  padding: calc(17.933 * var(--px)) calc(7.97 * var(--px)) calc(17.933 * var(--px)) calc(5.978 * var(--px));
}

/* --- Tab bar ---------------------------------------------------------------- */

.mock__tabbar {
  position: absolute;
  bottom: calc(-4.34 * var(--px));
  left: calc(0.745 * var(--px));
  display: flex;
  flex-direction: column;
  width: calc(400.51 * var(--px));
  border-top: calc(1.245 * var(--px)) solid var(--mock-line);
  background-color: #fff;
}

.mock__tabs {
  display: flex;
  align-items: center;
  gap: calc(7.97 * var(--px));
  padding: calc(12.952 * var(--px)) calc(15.941 * var(--px)) calc(8.967 * var(--px));
}

.mock__tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  height: calc(39.852 * var(--px));
  font-size: calc(11.96 * var(--px));
  font-weight: 500;
  line-height: calc(15.941 * var(--px));
  color: var(--mock-muted);
}

.mock__tab img {
  width: calc(23.911 * var(--px));
  height: calc(23.911 * var(--px));
}

.mock__tab--active {
  color: var(--mock-text);
}

.mock__home-indicator {
  position: relative;
  height: calc(20.922 * var(--px));
}

.mock__home-indicator::after {
  content: "";
  position: absolute;
  bottom: calc(7.97 * var(--px));
  left: 50%;
  width: calc(143.466 * var(--px));
  height: calc(4.981 * var(--px));
  border-radius: 100px;
  background-color: #000;
  translate: -50% 0;
}

/* ==========================================================================
   Tela do Check-up: os 3 passos do check-up da Mar Saúde em stories

   Conteúdo, visual e animações da seção "O que é Medicina Autônoma?" de marsaude.net (DM Sans, cores e
   medidas do site deles). Lá a tela do celular tem 284px de largura: aqui tudo é medido em --u, 1/284 da
   largura da tela, então ela escala com o celular como o resto do mockup. No topo, uma aba clicável por
   passo, com a barra de stories; as cenas de cada passo se revezam embaixo. js/checkup-stories.js controla o tempo: marca a cena
   da vez com data-on (e data-leaving na saída) e o que acontece dentro dela (data-picked, data-tapped).
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(../fonts/dm-sans-latin-wght-normal.woff2) format("woff2-variations");
}

.stories {
  --u: calc(var(--px) * 400.51 / 284);
  --mar-primary: hsl(230 60% 52%);
  --mar-blue: hsl(218 72% 58%);
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --stories-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stories-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-sm: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / 0.05);
  --shadow-md: 0 calc(4 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)) rgb(0 0 0 / 0.1),
    0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-2 * var(--u)) rgb(0 0 0 / 0.1);
  --shadow-lg: 0 calc(10 * var(--u)) calc(15 * var(--u)) calc(-3 * var(--u)) rgb(0 0 0 / 0.1),
    0 calc(4 * var(--u)) calc(6 * var(--u)) calc(-4 * var(--u)) rgb(0 0 0 / 0.1);
  background-color: #fff;
  font-family: "DM Sans", var(--font-sans);
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  color: var(--slate-900);
}

/* Sem especificidade, para as margens de cada elemento valerem */
:where(.stories) :where(p, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stories b {
  font-weight: inherit;
}

.stories .mock__status {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.stories__icon {
  flex-shrink: 0;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.stories__icon--primary {
  color: var(--mar-primary);
}

/* Títulos das telas: como os h1–h6 do site da Mar */
.stories__welcome-title,
.stories__question-text,
.stories__doc-title,
.stories__report-hello b,
.stories__page-title,
.stories__referral-title {
  letter-spacing: -0.025em;
}

/* --- Abas dos passos ---------------------------------------------------------- */

/* Uma aba por passo: número, nome e a barra de stories, que enche durante o passo. Clicar leva ao início
   do passo (os stories seguem dali). O celular não recebe cliques (css/pages.css); só as abas */
.stories__tabs {
  position: absolute;
  top: calc(40 * var(--u));
  right: calc(12 * var(--u));
  left: calc(12 * var(--u));
  display: flex;
  gap: calc(4 * var(--u));
}

.stories__tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
  padding: calc(6 * var(--u)) calc(4 * var(--u));
  border: 0;
  border-radius: calc(8 * var(--u));
  background: none;
  font: inherit;
  color: var(--slate-500);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transition: color 300ms, background-color 300ms;
}

/* Só com mouse: no toque o hover ficaria preso na aba tocada */
@media (hover: hover) {
  .stories__tab:hover {
    background-color: hsl(218 72% 58% / 0.1);
    color: var(--slate-700);
  }
}

.stories__tab:focus-visible {
  outline: calc(2 * var(--u)) solid var(--mar-primary);
  outline-offset: calc(1 * var(--u));
}

.stories__tab-label {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}

/* Número no círculo, como os passos da seção da Mar: cinza, ou com o degradê no passo da vez */
.stories__tab-label b {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border: calc(1 * var(--u)) solid var(--slate-300);
  border-radius: 50%;
  background-image: linear-gradient(to bottom right, var(--slate-100), var(--slate-200));
  font-size: calc(9 * var(--u));
  font-weight: 700;
  color: var(--slate-500);
}

.stories__tab[aria-pressed="true"] {
  color: var(--mar-blue);
}

.stories__tab[aria-pressed="true"] .stories__tab-label b {
  border-color: transparent;
  background-image: linear-gradient(to bottom right, var(--mar-blue), hsl(198 100% 65%));
  color: #fff;
}

.stories__bar {
  display: block;
  height: calc(3 * var(--u));
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--slate-200);
}

/* --p (0 a 1) vem do JS a cada quadro */
.stories__bar i {
  display: block;
  height: 100%;
  background-color: var(--mar-primary);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* --- Cenas: uma por vez, entram e saem como no site da Mar ------------------- */

.stories__scene {
  position: absolute;
  top: calc(82 * var(--u));
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.stories__scene[data-on] {
  visibility: visible;
  animation: stories-slide-in 400ms ease-out both;
}

.stories__welcome[data-on] {
  animation-name: stories-fade;
}

.stories__exam[data-on] {
  animation: stories-rise 500ms var(--stories-ease) both;
}

.stories__lock[data-on] {
  animation: stories-fade 300ms ease-out both;
}

/* Saída: depois das entradas, para valer sobre elas */
.stories__scene[data-leaving] {
  animation: stories-slide-out 400ms ease-in both;
}

.stories__welcome[data-leaving],
.stories__exam[data-leaving] {
  animation-name: stories-fade-out;
}

.stories__lock[data-leaving] {
  animation: stories-shrink-out 300ms ease-in both;
}

/* O que entra depois da cena, com atraso --d: sobe 20u (curto: 10u; da esquerda; de cima; cresce; só aparece) */
.stories__scene[data-on] .stories__in {
  animation: stories-rise 500ms var(--stories-ease) var(--d, 0ms) both;
}

.stories__scene[data-on] .stories__in--short {
  animation-name: stories-rise-short;
}

.stories__scene[data-on] .stories__in--left {
  animation-name: stories-from-left;
}

.stories__scene[data-on] .stories__in--drop {
  animation: stories-drop 600ms var(--stories-spring) var(--d, 0ms) both;
}

.stories__scene[data-on] .stories__in--grow {
  animation-name: stories-grow;
}

.stories__scene[data-on] .stories__in--fade {
  animation-name: stories-fade;
}

.stories__scene[data-on] .stories__in--dim {
  animation-name: stories-dim;
}

/* Selos: giram e crescem com mola */
.stories__scene[data-on] .stories__pop {
  animation: stories-pop 600ms var(--stories-spring) var(--d, 0ms) both;
}

/* --- Passo 1: boas-vindas ------------------------------------------------------ */

.stories__welcome {
  display: flex;
  flex-direction: column;
  padding: calc(16 * var(--u)) calc(24 * var(--u));
}

.stories__welcome-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.stories__welcome-to {
  margin-bottom: calc(4 * var(--u));
  color: var(--slate-500);
}

.stories__welcome-title {
  margin-bottom: calc(12 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(32 * var(--u));
}

.stories__welcome-text {
  margin-bottom: calc(32 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--slate-500);
}

.stories__welcome-text b {
  font-weight: 500;
  color: var(--slate-700);
}

.stories__welcome-card {
  margin-bottom: calc(24 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: var(--slate-50);
}

.stories__welcome-step {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(12 * var(--u));
  font-weight: 600;
  color: var(--slate-800);
}

.stories__welcome-step .stories__icon {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.stories__welcome-answer {
  padding-left: calc(28 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--slate-600);
}

.stories__welcome-answer b {
  font-weight: 500;
  color: var(--slate-800);
}

/* Botão "Começar" (o atraso de entrada fica no invólucro) */
.stories__welcome-button span {
  display: block;
  padding: calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: var(--mar-primary);
  box-shadow: var(--shadow-md);
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: calc(20 * var(--u));
  text-align: center;
  color: #fff;
}

/* --- Passo 1: perguntas da triagem ------------------------------------------- */

.stories__question {
  display: flex;
  flex-direction: column;
  padding: 0 calc(24 * var(--u)) calc(44 * var(--u));
}

.stories__question-icon {
  align-self: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  margin: calc(24 * var(--u)) 0;
  color: var(--slate-700);
}

.stories__question-text {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: calc(28 * var(--u));
  text-align: center;
  color: var(--slate-800);
}

.stories__options {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  margin-top: auto;
}

.stories__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border: calc(2 * var(--u)) solid var(--slate-200);
  border-radius: calc(12 * var(--u));
  font-weight: 500;
  color: var(--mar-primary);
  transition:
    border-color 300ms,
    background-color 300ms;
}

.stories__option-arrow {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: hsl(230 60% 52% / 0.5);
  transition:
    translate 300ms,
    color 300ms;
}

/* A resposta escolhida (data-answer) acende quando a pergunta é respondida */
.stories__question[data-picked] [data-answer] {
  border-color: var(--mar-primary);
  background-color: hsl(230 60% 52% / 0.05);
  animation: stories-tap 200ms ease-out;
}

.stories__question[data-picked] [data-answer] .stories__option-arrow {
  color: var(--mar-primary);
  translate: calc(4 * var(--u)) 0;
}

/* --- Passo 2: pedido de exames --------------------------------------------- */

.stories__exam {
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
}

.stories__doc {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(16 * var(--u));
  border: calc(1 * var(--u)) solid var(--slate-100);
  border-radius: calc(16 * var(--u));
  background-color: #fff;
  box-shadow: var(--shadow-lg);
}

/* Cabeçalho do documento: tinha o logo da Mar à direita; a altura dele fica */
.stories__doc-head {
  display: flex;
  align-items: center;
  min-height: calc(40 * var(--u));
  margin-bottom: calc(16 * var(--u));
  padding-bottom: calc(12 * var(--u));
  border-bottom: calc(1 * var(--u)) solid var(--slate-100);
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: calc(20 * var(--u));
  color: var(--mar-primary);
}

.stories__doc-title {
  margin-bottom: calc(16 * var(--u));
  font-weight: 700;
  text-align: center;
  color: var(--slate-800);
}

.stories__patient {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  margin-bottom: calc(16 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: var(--slate-50);
  font-size: calc(10 * var(--u));
  color: var(--slate-600);
}

.stories__patient b,
.stories__referral-meta b {
  font-weight: 500;
  color: var(--slate-700);
}

.stories__exams {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.stories__exams li {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}

.stories__exams span {
  font-weight: 700;
  color: var(--mar-primary);
}

.stories__exams p {
  flex: 1;
  font-weight: 500;
  color: var(--slate-800);
}

.stories__exams small {
  display: block;
  font-size: calc(9 * var(--u));
  font-weight: 400;
  line-height: 1.5;
  color: var(--slate-400);
}

.stories__doc-foot {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding-top: calc(8 * var(--u));
  border-top: calc(1 * var(--u)) dashed var(--slate-200);
}

.stories__doc-sign {
  flex: 1;
  min-width: 0;
  font-size: calc(7 * var(--u));
  line-height: 1.25;
  color: var(--slate-400);
}

.stories__doc-sign b {
  font-weight: 500;
  color: var(--slate-600);
}

.stories__seal {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border: calc(2 * var(--u)) solid hsl(230 60% 52% / 0.3);
  border-radius: 50%;
}

.stories__seal > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border: calc(1 * var(--u)) solid hsl(230 60% 52% / 0.2);
  border-radius: 50%;
  font-size: calc(5 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: hsl(230 60% 52% / 0.6);
}

/* --- Passo 3: notificação na tela de bloqueio ---------------------------------- */

.stories__lock {
  padding: calc(16 * var(--u));
  background-image: linear-gradient(var(--slate-100), var(--slate-50));
  text-align: center;
}

.stories__lock-time {
  font-size: calc(36 * var(--u));
  font-weight: 300;
  line-height: calc(40 * var(--u));
  color: var(--slate-800);
}

.stories__lock-date {
  margin-bottom: calc(32 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--slate-500);
}

.stories__notif {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  margin: 0 calc(4 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background-color: #fff;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.stories__notif-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: #25d366;
  color: #fff;
}

.stories__notif-logo {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.stories__notif-text {
  flex: 1;
  min-width: 0;
}

.stories__notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(2 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
}

.stories__notif-head b {
  font-weight: 600;
  color: var(--slate-800);
}

.stories__notif-head span {
  font-size: calc(10 * var(--u));
  color: var(--slate-400);
}

.stories__notif-title {
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.375;
  color: var(--slate-600);
}

.stories__notif-body {
  margin-top: calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--slate-500);
}

/* Toque na notificação, antes de abrir a devolutiva */
.stories__tap {
  position: absolute;
  top: calc(230 * var(--u));
  right: calc(32 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background-color: hsl(230 60% 52% / 0.2);
  opacity: 0;
}

.stories__lock[data-tapped] .stories__tap {
  animation: stories-tap-in 300ms var(--stories-ease) both;
}

.stories__lock[data-leaving] .stories__tap {
  animation: stories-tap-out 300ms ease-out both;
}

/* --- Passo 3: devolutiva, detalhes e encaminhamento -------------------------- */

.stories__nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}

.stories__nav--light span:first-child {
  color: var(--mar-primary);
}

.stories__nav--light span:last-child {
  color: var(--slate-400);
}

.stories__report-head {
  padding: calc(20 * var(--u)) calc(16 * var(--u));
  background-image: linear-gradient(to bottom right, var(--mar-primary), var(--mar-blue));
  color: #fff;
}

.stories__report-head .stories__nav {
  opacity: 0.8;
}

.stories__report-hello {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.stories__report-hello p {
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}

.stories__report-hello b {
  display: block;
  margin-bottom: calc(2 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(28 * var(--u));
}

.stories__report-hello > span {
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
}

.stories__congrats {
  margin-top: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(calc(4 * var(--u)));
  backdrop-filter: blur(calc(4 * var(--u)));
}

.stories__congrats p {
  font-size: calc(11 * var(--u));
}

.stories__congrats b {
  display: block;
  margin-bottom: calc(4 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: calc(20 * var(--u));
}

.stories__card {
  padding: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--slate-200);
  border-radius: calc(12 * var(--u));
  background-color: #fff;
  box-shadow: var(--shadow-sm);
}

.stories__priorities {
  margin: calc(16 * var(--u));
  padding: calc(16 * var(--u));
}

.stories__card-title {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: calc(20 * var(--u));
  color: var(--slate-800);
}

.stories__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: hsl(230 60% 52% / 0.1);
  color: var(--mar-primary);
}

.stories__small {
  margin-bottom: calc(8 * var(--u));
  font-size: calc(10 * var(--u));
  color: var(--slate-500);
}

.stories__priorities .stories__small {
  margin-bottom: calc(12 * var(--u));
}

/* Selo vermelho ("Importante", "Achado importante") */
.stories__flag {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border: calc(1 * var(--u)) solid #fecaca;
  border-radius: 999px;
  background-color: #fef2f2;
  font-size: calc(9 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  color: #dc2626;
}

.stories__flag::before {
  content: "";
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background-color: #ef4444;
}

.stories__priorities .stories__flag {
  margin-bottom: calc(12 * var(--u));
}

.stories__todo {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: var(--slate-50);
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--slate-700);
}

.stories__todo b {
  font-weight: 600;
}

.stories__todo .stories__accent {
  color: var(--mar-primary);
}

.stories__page {
  padding: calc(12 * var(--u)) calc(16 * var(--u));
}

.stories__page[data-scene="alerts"] .stories__nav {
  margin-bottom: calc(16 * var(--u));
}

.stories__page-title {
  margin-bottom: calc(16 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: calc(28 * var(--u));
  color: var(--slate-800);
}

.stories__page-title--icon {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(12 * var(--u));
}

.stories__page-title--icon .stories__icon {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.stories__alerts {
  margin-bottom: calc(16 * var(--u));
}

.stories__alerts-title {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: calc(20 * var(--u));
  color: var(--slate-700);
}

.stories__alerts-title::before {
  content: "";
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background-color: #ef4444;
}

.stories__alert {
  padding: calc(12 * var(--u));
  border: calc(2 * var(--u)) solid hsl(230 60% 52% / 0.3);
  border-radius: calc(12 * var(--u));
  background-color: #fff;
  box-shadow: var(--shadow-sm);
}

.stories__alert p {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(4 * var(--u));
  font-weight: 600;
  color: var(--slate-800);
}

.stories__alert span {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  color: var(--mar-primary);
}

.stories__alert span .stories__icon {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

/* Outras condições, desfocadas atrás do alerta */
.stories__blurred {
  filter: blur(calc(1 * var(--u)));
}

.stories__blurred .stories__small {
  margin-bottom: calc(4 * var(--u));
  color: var(--slate-400);
}

.stories__chip {
  padding: calc(8 * var(--u));
  border: calc(1 * var(--u)) solid var(--slate-100);
  border-radius: calc(8 * var(--u));
  background-color: var(--slate-50);
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--slate-500);
}

.stories__blurred > .stories__chip,
.stories__chips {
  margin-bottom: calc(12 * var(--u));
}

.stories__chips {
  display: flex;
  gap: calc(8 * var(--u));
}

.stories__chips .stories__chip {
  flex: 1;
  font-size: calc(10 * var(--u));
  line-height: 1.5;
}

.stories__analysis {
  margin-bottom: calc(12 * var(--u));
}

.stories__analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
}

.stories__analysis-head b {
  font-weight: 600;
  color: var(--slate-700);
}

.stories__analysis-head .stories__flag {
  font-size: calc(8 * var(--u));
}

.stories__analysis-text {
  font-size: calc(10 * var(--u));
  line-height: 1.625;
  color: var(--slate-600);
}

.stories__meter {
  margin-bottom: calc(12 * var(--u));
}

.stories__meter-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--slate-600);
}

.stories__meter-head span:last-child {
  color: var(--slate-400);
}

.stories__meter-bar {
  position: relative;
  display: block;
  height: calc(12 * var(--u));
  border-radius: 999px;
  background-image: linear-gradient(to right, #4ade80, #facc15, #ef4444);
}

/* Marcador: corre até o valor do exame. O trilho (i) tem a largura da barra e o marcador fica a 75% dele;
   a animação desloca o trilho com translate, em % da própria largura, sem recalcular o layout a cada quadro */
.stories__meter-bar i {
  position: absolute;
  inset: 0;
}

.stories__meter-bar i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 75%;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-left: calc(-8 * var(--u));
  border: calc(2 * var(--u)) solid var(--slate-800);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: var(--shadow-md);
  translate: 0 -50%;
}

.stories__scene[data-on] .stories__meter-bar i {
  animation: stories-meter 800ms ease-out 600ms both;
}

.stories__meter-scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: calc(4 * var(--u));
  font-size: calc(9 * var(--u));
  color: var(--slate-400);
}

.stories__meter-scale span:nth-child(3) {
  visibility: hidden;
}

.stories__meter-scale b {
  position: absolute;
  top: calc(-2 * var(--u));
  left: 75%;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  color: #ef4444;
  translate: -50% 0;
}

.stories__scene[data-on] .stories__meter-scale b {
  animation: stories-fade 300ms ease-out 1s both;
}

.stories__meter-note {
  margin-top: calc(4 * var(--u));
  font-size: calc(9 * var(--u));
  color: var(--slate-500);
}

.stories__note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  padding: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid hsl(230 60% 52% / 0.2);
  border-radius: calc(12 * var(--u));
  background-color: hsl(230 60% 52% / 0.05);
  font-size: calc(9 * var(--u));
  color: var(--slate-500);
}

.stories__note .stories__icon {
  margin-top: calc(2 * var(--u));
}

.stories__note b {
  display: block;
  margin-bottom: calc(2 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  color: var(--slate-700);
}

/* Cabeçalho do encaminhamento: tinha o logo da Mar à direita; a altura dele fica */
.stories__referral-head {
  display: flex;
  align-items: center;
  min-height: calc(40 * var(--u));
  margin-bottom: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  color: var(--mar-primary);
}

.stories__referral-title {
  margin-bottom: calc(12 * var(--u));
  padding-bottom: calc(8 * var(--u));
  border-bottom: calc(1 * var(--u)) solid var(--slate-100);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
  text-align: center;
  color: var(--slate-800);
}

.stories__referral-meta,
.stories__findings {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  font-size: calc(9 * var(--u));
  color: var(--slate-600);
}

.stories__referral-meta {
  margin-bottom: calc(12 * var(--u));
}

.stories__referral-meta b {
  color: inherit;
}

.stories__letter {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  margin-bottom: calc(12 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background-color: var(--slate-50);
  font-size: calc(9 * var(--u));
  color: var(--slate-500);
}

.stories__letter p:first-child {
  color: var(--slate-600);
}

.stories__findings li {
  display: flex;
  align-items: flex-start;
  gap: calc(4 * var(--u));
}

.stories__findings li::before {
  content: "•";
}

.stories__findings li:first-child {
  font-weight: 500;
  color: var(--mar-primary);
}

.stories__findings li:last-child {
  opacity: 0.5;
}

.stories__referral-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(16 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: calc(1 * var(--u)) dashed var(--slate-200);
}

.stories__referral-foot p {
  font-size: calc(8 * var(--u));
  color: var(--slate-400);
}

.stories__referral-foot b {
  display: block;
  font-size: calc(9 * var(--u));
  font-weight: 500;
  color: var(--slate-600);
}

.stories__check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: calc(2 * var(--u)) solid rgb(34 197 94 / 0.3);
  border-radius: 50%;
  background-color: #f0fdf4;
  color: #16a34a;
}

.stories__check .stories__icon {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.stories__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background-color: var(--mar-primary);
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: calc(20 * var(--u));
  color: #fff;
}

/* Barra de início do iPhone, como no celular da Mar */
.stories__home {
  position: absolute;
  bottom: calc(8 * var(--u));
  left: 50%;
  width: calc(128 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  background-color: var(--slate-300);
  translate: -50% 0;
}

@keyframes stories-fade {
  from {
    opacity: 0;
  }
}

@keyframes stories-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes stories-dim {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes stories-slide-in {
  from {
    opacity: 0;
    translate: calc(50 * var(--u)) 0;
  }
}

@keyframes stories-slide-out {
  to {
    opacity: 0;
    translate: calc(-50 * var(--u)) 0;
  }
}

@keyframes stories-shrink-out {
  to {
    opacity: 0;
    scale: 0.95;
  }
}

@keyframes stories-rise {
  from {
    opacity: 0;
    translate: 0 calc(20 * var(--u));
  }
}

@keyframes stories-rise-short {
  from {
    opacity: 0;
    translate: 0 calc(10 * var(--u));
  }
}

@keyframes stories-from-left {
  from {
    opacity: 0;
    translate: calc(-10 * var(--u)) 0;
  }
}

@keyframes stories-drop {
  from {
    opacity: 0;
    translate: 0 calc(-20 * var(--u));
  }
}

@keyframes stories-grow {
  from {
    opacity: 0;
    scale: 0.92;
  }
}

@keyframes stories-pop {
  from {
    scale: 0;
    rotate: var(--r, 0deg);
  }
}

@keyframes stories-tap {
  50% {
    scale: 1.02;
  }
}

@keyframes stories-tap-in {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes stories-tap-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    scale: 1.5;
  }
}

@keyframes stories-meter {
  from {
    translate: -75% 0;
  }
}

/* Movimento reduzido: os passos continuam se revezando, mas cada tela aparece pronta, sem animação */
@media (prefers-reduced-motion: reduce) {
  .stories *,
  .stories__scene {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
}