/*
 * Quick Saúde — página inicial do domínio principal (spec 008, quicksaude-infra/specs/008-pagina-inicial).
 *
 * A identidade é a do app do paciente (quicksaude-app/assets/css/qs-tema.css, features 003/004): os tokens
 * abaixo repetem aqueles valores (um front-end não lê arquivos de outro) — mudou um token da marca no app,
 * mude aqui também. Componentes do app mantêm o nome (.qs-marca, .qs-btn, .qs-selo, .qs-proxima, .qs-ecg);
 * o que só existe nesta página usa o prefixo pi-.
 *
 * Direção: clara, calma e clínica, alinhada à esquerda. O elemento memorável é a linha de pulso: grande uma
 * vez (os cinco passos do paciente são os cinco batimentos) e pequena no cartão do app. Paciente em
 * superfícies claras da marca; profissional na tinta, como nas telas de entrada do app e do painel.
 */

/* ---------- Tipografia (fonte local, sem CDN) ---------- */
@font-face {
  font-family: "Figtree Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../vendor/qs/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
       url("../vendor/qs/fonts/figtree-latin-wght-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: "Figtree Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../vendor/qs/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../vendor/qs/fonts/figtree-latin-ext-wght-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 (valores do qs-tema.css do app) ---------- */
:root {
  --qs-ink: #0e2a33;
  --qs-ink-2: #4a5f67;
  --qs-brand: #0077a8;
  --qs-brand-strong: #005f87;
  --qs-brand-soft: #e4f3f9;
  --qs-brand-soft-2: #cfe8f2;
  --qs-pulse: #00c2ff;          /* ciano original: só detalhe não textual */
  --qs-bg: #f4f8f9;
  --qs-surface: #ffffff;
  --qs-surface-2: #f8fbfc;
  --qs-neutral-soft: #eef3f5;
  --qs-line: #dce7eb;
  --qs-line-strong: #b9cbd2;
  --qs-success: #0b7a37;
  --qs-success-soft: #e3f5ea;

  --qs-hero-a: #06384e;
  --qs-hero-b: #075a80;
  --qs-hero-c: #066a96;
  --qs-hero-brilho: rgba(0, 194, 255, 0.14);
  --qs-hero-linha: #8fe3ff;

  --qs-font: "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --qs-s-1: 4px;
  --qs-s-2: 8px;
  --qs-s-3: 12px;
  --qs-s-4: 16px;
  --qs-s-5: 20px;
  --qs-s-6: 24px;
  --qs-s-7: 32px;
  --qs-s-8: 40px;
  --qs-s-9: 48px;
  --qs-s-10: 64px;

  --qs-radius-hero: 20px;
  --qs-radius-card: 16px;
  --qs-radius-control: 12px;
  --qs-radius-sm: 8px;
  --qs-radius-pill: 999px;

  --qs-shadow-pop: 0 12px 32px rgba(14, 42, 51, 0.16);

  --qs-h-control: 48px;
  --qs-h-touch: 44px;

  --qs-content-max: 1200px;
  --qs-gutter: 16px;

  --qs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --qs-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --qs-dur-1: 140ms;
  --qs-dur-2: 220ms;
  --qs-dur-3: 560ms;

  /* Só da página */
  --pi-topo-h: 64px;
  --pi-secao: 72px;
}

@media (min-width: 768px) {
  :root { --qs-gutter: 24px; --pi-secao: 96px; }
}

@media (min-width: 992px) {
  :root { --pi-topo-h: 72px; }
}

@media (min-width: 1200px) {
  :root { --qs-gutter: 32px; --pi-secao: 104px; }
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--pi-topo-h) + 16px);
}

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

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--qs-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--qs-ink);
  /* A mesma faixa suave da marca no topo das telas do app, ampliada para o primeiro bloco. */
  background:
    radial-gradient(1100px 560px at 86% -180px, rgba(0, 194, 255, 0.16), transparent 70%),
    linear-gradient(180deg, #e4f2f8 0, rgba(244, 248, 249, 0) 720px) no-repeat,
    var(--qs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }

a { color: var(--qs-brand); text-underline-offset: 0.18em; }
a:hover { color: var(--qs-brand-strong); }

/* Foco visível (WCAG 2.4.7) — o mesmo anel do app (qs-ajustes.css): amarelo com contorno escuro, legível
   sobre o fundo claro, a marca e a tinta. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #ffc20e;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #1a1a1a;
}

.pi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pi-icone {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.pi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pi-largura {
  width: 100%;
  max-width: calc(var(--qs-content-max) + 2 * var(--qs-gutter));
  margin-inline: auto;
  padding-inline: var(--qs-gutter);
}

.pi-pular {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 18px;
  border-radius: var(--qs-radius-control);
  background: var(--qs-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.pi-pular:focus { transform: none; color: #fff; }

/* ---------- Marca (app: .qs-marca) ---------- */
.qs-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--qs-h-touch);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--qs-ink);
  text-decoration: none;
  white-space: nowrap;
}

.qs-marca:hover { color: var(--qs-ink); }

.qs-marca__simbolo {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #06384e 0%, #0077a8 100%);
  color: #fff;
  font-size: 1.125rem;
  box-shadow: inset 0 -3px 0 var(--qs-pulse), 0 6px 14px -6px rgba(0, 95, 135, 0.6);
}

/* ---------- Botões (app: .qs-btn) ---------- */
.qs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qs-s-2);
  min-height: var(--qs-h-control);
  padding: 0 var(--qs-s-5);
  border: 1px solid transparent;
  border-radius: var(--qs-radius-control);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 660;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--qs-dur-2) var(--qs-ease-out), border-color var(--qs-dur-2) var(--qs-ease-out),
    color var(--qs-dur-2) var(--qs-ease-out), box-shadow var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-mola);
}

.qs-btn .pi-icone { font-size: 1.15em; }
.qs-btn:active { transform: translateY(0) scale(0.98); }

.qs-btn--sm { min-height: var(--qs-h-touch); padding: 0 var(--qs-s-4); font-size: 0.9375rem; }

.qs-btn--primaria,
.qs-btn--primaria:visited { background: var(--qs-brand); color: #fff; }
.qs-btn--primaria:hover { background: var(--qs-brand-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(0, 95, 135, 0.65); }

.qs-btn--contorno { background: var(--qs-surface); border-color: var(--qs-line-strong); color: var(--qs-ink); }
.qs-btn--contorno .pi-icone { color: var(--qs-brand); }
.qs-btn--contorno:hover { background: var(--qs-brand-soft); border-color: var(--qs-brand); color: var(--qs-ink); transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(0, 95, 135, 0.5); }

.qs-btn--texto { color: var(--qs-ink); padding-inline: var(--qs-s-3); }
.qs-btn--texto:hover { background: rgba(0, 119, 168, 0.08); color: var(--qs-ink); }

/* Sobre a tinta e o destaque */
.qs-btn--clara { background: #fff; color: var(--qs-ink); }
.qs-btn--clara .pi-icone { color: var(--qs-brand); }
.qs-btn--clara:hover { background: var(--qs-brand-soft); color: var(--qs-ink); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45); }

.qs-btn--contorno-claro { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.qs-btn--contorno-claro:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Ações das seções: um pouco maiores que as do app (é a decisão principal da página). */
.pi-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qs-s-3);
}

.pi-acoes .qs-btn { min-height: 52px; padding-inline: var(--qs-s-5); }

@media (max-width: 575.98px) {
  .pi-acoes .qs-btn { flex: 1 1 100%; }
}

/* ---------- Selo (app: .qs-selo) ---------- */
.qs-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--qs-radius-pill);
  font-size: 0.8125rem;
  font-weight: 660;
  line-height: 1.1;
}

.qs-selo::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Cabeçalho ---------- */
.pi-sentinela { position: absolute; top: 0; left: 0; width: 1px; height: 8px; }

.pi-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color var(--qs-dur-2) var(--qs-ease-out), box-shadow var(--qs-dur-2) var(--qs-ease-out);
}

/* Vidro depois do topo, como o cabeçalho do app. Sem JavaScript (sem o marcador de rolagem), o vidro fica
   sempre ligado para o conteúdo não passar legível por baixo dos links. */
.pi-topo.is-rolado,
.pi-topo.is-menu-aberto,
html:not(.js) .pi-topo {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 var(--qs-line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.pi-topo__barra {
  display: flex;
  align-items: center;
  gap: var(--qs-s-4);
  min-height: var(--pi-topo-h);
}

.pi-topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--qs-s-2);
  margin-left: auto;
}

.pi-nav__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--qs-s-1) var(--qs-s-6);
}

.pi-nav__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--qs-h-touch);
  color: var(--qs-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.pi-nav__lista a:hover { color: var(--qs-brand-strong); text-decoration: underline; }

.pi-nav__entradas { display: none; }

.pi-menu-botao {
  display: inline-grid;
  place-items: center;
  width: var(--qs-h-touch);
  height: var(--qs-h-touch);
  padding: 0;
  border: 1px solid var(--qs-line-strong);
  border-radius: var(--qs-radius-control);
  background: var(--qs-surface);
  color: var(--qs-ink);
  font-size: 1.375rem;
  cursor: pointer;
}

.pi-menu-botao[hidden] { display: none; }
.pi-menu-botao .pi-icone--fechar { display: none; }
.pi-menu-botao[aria-expanded="true"] .pi-icone--abrir { display: none; }
.pi-menu-botao[aria-expanded="true"] .pi-icone--fechar { display: block; }

.pi-entrar { position: relative; }
.pi-entrar__botao[hidden],
.pi-entrar__link[hidden] { display: none; }

.pi-entrar__botao .pi-icone--seta { font-size: 0.875em; transition: transform var(--qs-dur-2) var(--qs-ease-out); }
.pi-entrar__botao[aria-expanded="true"] .pi-icone--seta { transform: rotate(180deg); }

.pi-entrar__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 288px;
  padding: var(--qs-s-2);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  background: var(--qs-surface);
  box-shadow: var(--qs-shadow-pop);
  animation: pi-abrir var(--qs-dur-2) var(--qs-ease-out) both;
}

.pi-entrar__menu[hidden] { display: none; }

.pi-entrar__menu ul { list-style: none; display: grid; gap: 2px; }

.pi-entrada {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--qs-s-3);
  padding: 10px;
  border-radius: var(--qs-radius-control);
  color: var(--qs-ink);
  text-decoration: none;
}

.pi-entrada:hover { background: var(--qs-surface-2); color: var(--qs-ink); }

.pi-entrada__icone {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 1.125rem;
  background: var(--cor-fundo);
  color: var(--cor-icone);
}

.pi-entrada__titulo { font-weight: 700; line-height: 1.25; }
.pi-entrada__sub { font-size: 0.875rem; color: var(--qs-ink-2); line-height: 1.3; }

@keyframes pi-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Cores por assunto do app (atalhos): fundo suave + ícone escuro (>= 4,5:1). */
.qs-cor--teal { --cor-fundo: #dcf3ee; --cor-icone: #0f766e; }
.qs-cor--violeta { --cor-fundo: #efeafe; --cor-icone: #6d28d9; }
.qs-cor--ambar { --cor-fundo: #fff1d6; --cor-icone: #b45309; }
.qs-cor--azul { --cor-fundo: #e1f1f8; --cor-icone: #005f87; }
.qs-cor--verde { --cor-fundo: #e0f4e8; --cor-icone: #0b7a37; }
.qs-cor--indigo { --cor-fundo: #e8edfc; --cor-icone: #3647b8; }
.qs-cor--ciano { --cor-fundo: #dcf4f8; --cor-icone: #0e7490; }

/* Celular e tablet: a navegação vira uma folha aberta pelo botão de menu (só quando o JavaScript liga o
   botão; sem ele, os links ficam numa linha abaixo da marca). */
@media (max-width: 991.98px) {
  .pi-topo__barra { flex-wrap: wrap; }
  .pi-entrar { display: none; }
  .pi-nav { order: 3; flex-basis: 100%; padding-bottom: var(--qs-s-2); }
  .pi-nav__lista { gap: 0 var(--qs-s-5); }

  .pi-nav--recolhivel { display: none; }

  .pi-nav--recolhivel.is-aberto {
    display: block;
    position: fixed;
    top: var(--pi-topo-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--pi-topo-h));
    max-height: calc(100dvh - var(--pi-topo-h));
    overflow-y: auto;
    padding: var(--qs-s-2) var(--qs-gutter) var(--qs-s-6);
    background: var(--qs-surface);
    border-bottom: 1px solid var(--qs-line);
    box-shadow: 0 24px 40px -24px rgba(14, 42, 51, 0.35);
    animation: pi-abrir var(--qs-dur-2) var(--qs-ease-out) both;
  }

  .pi-nav--recolhivel .pi-nav__lista { display: grid; gap: 0; }

  .pi-nav--recolhivel .pi-nav__lista a {
    display: flex;
    min-height: 52px;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--qs-line);
  }

  .pi-nav--recolhivel .pi-nav__entradas {
    display: grid;
    gap: var(--qs-s-2);
    margin-top: var(--qs-s-4);
  }

  .pi-nav__entradas .qs-btn { width: 100%; }
  .pi-nav__entradas .pi-entrada { border: 1px solid var(--qs-line); }
}

@media (max-width: 359.98px) {
  .pi-topo__criar { display: none; }
}

/* Sem JavaScript, até 991 px os links ficam numa linha abaixo da marca e o cabeçalho passa de 150 px: fixo, ele
   esconderia o título das seções ao seguir uma âncora. Nesse caso ele rola com a página. */
@media (max-width: 991.98px) {
  html:not(.js) .pi-topo { position: relative; }
}

@media (min-width: 992px) {
  .pi-menu-botao { display: none; }
  .pi-nav { margin-left: var(--qs-s-6); }
}

/* ---------- Seções ---------- */
.pi-secao { padding-block: var(--pi-secao); }

.pi-titulo {
  font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 770;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 24ch;
}

.pi-intro {
  margin-top: var(--qs-s-4);
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--qs-ink-2);
}

/* ---------- Primeiro bloco ---------- */
/* overflow-x: clip — o halo do cartão passa da largura no celular e não pode criar rolagem horizontal. */
.pi-heroi { padding-block: var(--qs-s-8) var(--qs-s-9); overflow-x: clip; }

.pi-heroi__grade {
  display: grid;
  gap: var(--qs-s-9);
  align-items: center;
}

.pi-heroi__titulo {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight: 790;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Três linhas escolhidas ("Sua consulta / por vídeo, / no seu horário.") em qualquer largura. */
.pi-heroi__linha { display: block; }

.pi-heroi__apoio {
  margin-top: var(--qs-s-6);
  max-width: 34em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--qs-ink-2);
}

.pi-heroi .pi-acoes { margin-top: var(--qs-s-7); }

.pi-heroi__prof {
  margin-top: var(--qs-s-6);
  font-size: 0.9375rem;
  color: var(--qs-ink-2);
}

.pi-heroi__prof a { font-weight: 650; }

.pi-heroi__app {
  position: relative;
  justify-self: start; /* alinhado ao texto, como o resto da página */
  width: min(100%, 448px);
}

/* Halo da marca atrás do cartão (decorativo). */
.pi-heroi__app::before {
  content: "";
  position: absolute;
  inset: -14% -12% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 194, 255, 0.2), rgba(0, 194, 255, 0) 70%);
}

.pi-heroi__legenda {
  display: flex;
  gap: var(--qs-s-2);
  margin-top: var(--qs-s-4);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--qs-ink-2);
}

.pi-heroi__legenda .pi-icone { margin-top: 2px; color: var(--qs-brand); }

@media (min-width: 992px) {
  .pi-heroi { padding-block: 56px var(--qs-s-10); }
  .pi-heroi__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--qs-s-10); }
  .pi-heroi__app { justify-self: end; }
}

/* Entrada orquestrada (a única que acontece sozinha ao abrir a página). */
@keyframes qs-surgir {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.pi-heroi__titulo,
.pi-heroi__apoio,
.pi-heroi .pi-acoes,
.pi-heroi__prof { animation: qs-surgir var(--qs-dur-3) var(--qs-ease-out) both; }

.pi-heroi__apoio { animation-delay: 70ms; }
.pi-heroi .pi-acoes { animation-delay: 140ms; }
.pi-heroi__prof { animation-delay: 210ms; }
.pi-heroi__app { animation: qs-surgir 720ms var(--qs-ease-out) 180ms both; }

/* ---------- Cartão do app (app: .qs-proxima + .qs-ecg) ---------- */
.qs-proxima {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  display: grid;
  gap: var(--qs-s-5);
  padding: var(--qs-s-6);
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--qs-hero-brilho), transparent 55%),
    linear-gradient(125deg, var(--qs-hero-a) 0%, var(--qs-hero-b) 55%, var(--qs-hero-c) 100%);
  border-radius: var(--qs-radius-hero);
  box-shadow: 0 30px 60px -28px rgba(6, 56, 78, 0.7);
}

.qs-proxima__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-2) var(--qs-s-3);
}

.qs-proxima__rotulo { font-weight: 650; color: rgba(255, 255, 255, 0.92); }

/* Selo sobre o destaque: vidro escuro (>= 6:1 mesmo sob o brilho). */
.qs-proxima .qs-selo {
  background: rgba(3, 24, 34, 0.38);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.qs-proxima .qs-selo--ok::before { background: #6ad69a; }

.qs-proxima__corpo { display: grid; gap: var(--qs-s-5); }

.qs-proxima__hora {
  font-size: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.qs-proxima__data { margin-top: var(--qs-s-2); font-size: 1.125rem; font-weight: 650; }

.qs-proxima__falta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--qs-s-3);
  padding: 5px 12px;
  border-radius: var(--qs-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.9375rem;
  font-weight: 650;
}

.qs-proxima__falta .pi-icone,
.qs-proxima__nota .pi-icone { color: var(--qs-hero-linha); }

.qs-proxima__profissional {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  padding-top: var(--qs-s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pi-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.5rem;
}

.qs-proxima__nome { font-size: 1.0625rem; font-weight: 720; }
.qs-proxima__esp { margin-top: 2px; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.92); }

.qs-proxima__acoes { display: flex; flex-wrap: wrap; gap: var(--qs-s-3); }
.qs-proxima__acoes .qs-btn { flex: 1 1 160px; cursor: default; }
.qs-proxima__acoes .qs-btn:hover { transform: none; box-shadow: none; background: #fff; }

.qs-proxima__nota { display: flex; gap: var(--qs-s-2); font-size: 0.9375rem; color: rgba(255, 255, 255, 0.92); }
.qs-proxima__nota .pi-icone { margin-top: 3px; }

.qs-ecg {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  margin: calc(-1 * var(--qs-s-3)) 0;
  color: var(--qs-hero-linha);
  pointer-events: none;
}

.qs-ecg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.qs-ecg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* A linha aparece da esquerda para a direita e um brilho a percorre duas vezes (no app ele não para). */
.qs-ecg__base { opacity: 0.42; animation: qs-ecg-desenha 1.6s var(--qs-ease-out) 0.5s both; }
.qs-ecg__pulso path { stroke-width: 3; }

.qs-ecg__pulso {
  filter: drop-shadow(0 0 5px currentColor);
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 49%, #000 51%, transparent 56%);
  mask-image: linear-gradient(90deg, transparent 44%, #000 49%, #000 51%, transparent 56%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: qs-ecg-corre 3.4s linear 1.9s 2 both;
}

@keyframes qs-ecg-desenha {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes qs-ecg-corre {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

@container (min-width: 420px) {
  .qs-proxima__acoes .qs-btn { flex: 0 0 auto; min-width: 220px; }
}

/* ---------- Como funciona: cinco passos sobre a linha de pulso ---------- */
.pi-passos { padding-top: calc(var(--pi-secao) * 0.5); }

.pi-passos__faixa { position: relative; margin-top: var(--qs-s-9); }

.pi-passos__lista { list-style: none; display: grid; }

.pi-passo { position: relative; }

.pi-passo__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--qs-brand);
  border-radius: 50%;
  background: var(--qs-brand);
  color: #fff;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.pi-passo__titulo {
  font-size: 1.1875rem;
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pi-passo__texto { margin-top: 6px; color: var(--qs-ink-2); }

.pi-passo__batimento { display: none; }

/* Celular e tablet: lista vertical com trilho entre os números. */
@media (max-width: 991.98px) {
  .pi-passo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--qs-s-4);
    padding-bottom: var(--qs-s-7);
  }

  .pi-passo__topo { grid-row: span 2; }
  .pi-passo__titulo { padding-top: 7px; }

  .pi-passo:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: var(--qs-brand);
    transform-origin: top;
  }
}

/* Desktop: a linha atravessa a tela; cada passo tem um nó e um batimento sobre ela. */
@media (min-width: 992px) {
  .pi-passos__faixa::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 39px;
    height: 2px;
    background: var(--qs-brand);
    transform-origin: left center;
  }

  .pi-passos__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pi-passo { padding-right: var(--qs-s-6); }

  .pi-passo__topo {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    padding-top: 16px; /* centro do nó na altura da linha (40 px) */
    margin-bottom: var(--qs-s-5);
  }

  .pi-passo__batimento {
    display: block;
    position: absolute;
    left: 48px;
    top: 0;
    width: 104px;
    height: 64px;
    color: var(--qs-brand);
  }

  .pi-passo__batimento svg { width: 100%; height: 100%; overflow: visible; }

  .pi-passo__batimento path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* Movimento (só com JavaScript): a linha se traça quando a seção aparece; cada nó acende quando o traço
   chega nele. Sem JavaScript ou com "reduzir movimento", tudo aparece pronto. */
.js .pi-passos__faixa:not(.is-visivel)::before { transform: scaleX(0); }
.js .pi-passos__faixa:not(.is-visivel) .pi-passo__batimento { clip-path: inset(0 100% 0 0); }
.js .pi-passos__faixa:not(.is-visivel) .pi-passo__no { background: var(--qs-surface); color: var(--qs-brand-strong); }
.js .pi-passos__faixa:not(.is-visivel) .pi-passo::before { transform: scaleY(0); }

.pi-passo:nth-child(1) { --atraso: 0.15s; }
.pi-passo:nth-child(2) { --atraso: 0.45s; }
.pi-passo:nth-child(3) { --atraso: 0.75s; }
.pi-passo:nth-child(4) { --atraso: 1.05s; }
.pi-passo:nth-child(5) { --atraso: 1.35s; }

.pi-passos__faixa.is-visivel::before { animation: pi-tracar 1.8s linear both; }
.pi-passos__faixa.is-visivel .pi-passo__batimento { animation: pi-revelar 0.3s linear var(--atraso) both; }
.pi-passos__faixa.is-visivel .pi-passo__no { animation: pi-acender 0.9s var(--qs-ease-out) var(--atraso) both; }
.pi-passos__faixa.is-visivel .pi-passo::before { animation: pi-descer 0.32s var(--qs-ease-out) calc(var(--atraso) + 0.2s) both; }

@keyframes pi-tracar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pi-revelar {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes pi-descer {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes pi-acender {
  0% { background: var(--qs-surface); color: var(--qs-brand-strong); box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.6); }
  30% { background: var(--qs-brand); color: #fff; box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.6); }
  100% { background: var(--qs-brand); color: #fff; box-shadow: 0 0 0 14px rgba(0, 194, 255, 0); }
}

/* ---------- Documentos ---------- */
.pi-docs {
  overflow-x: clip; /* a segunda folha da ilustração sai um pouco para a direita */
  background: var(--qs-surface);
  border-block: 1px solid var(--qs-line);
}

.pi-docs__grade {
  display: grid;
  /* Spec 015: coluna que pode encolher — sem isso a ilustração (348 px de conteúdo mínimo) passava da tela a 320 px e
     o lado direito do "papel" ficava cortado. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qs-s-9);
  align-items: center;
}

.pi-checks {
  list-style: none;
  display: grid;
  gap: var(--qs-s-3);
  margin-top: var(--qs-s-6);
}

.pi-checks li { display: flex; gap: var(--qs-s-3); align-items: flex-start; font-weight: 600; }

.pi-checks .pi-icone {
  margin-top: 2px;
  padding: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--qs-success-soft);
  color: var(--qs-success);
}

/* Documento ilustrativo (decorativo): folha com linhas, QR code e assinatura. O invólucro cria o contexto de
   empilhamento para a segunda folha ficar entre o fundo da seção e a folha da frente. */
.pi-docs__ilustracao {
  position: relative;
  isolation: isolate;
  width: min(100%, 400px);
  margin-inline: auto;
}

/* Segunda folha por baixo, levemente deslocada: dá a ideia de documentos guardados. */
.pi-docs__ilustracao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--qs-radius-card);
  background: var(--qs-brand-soft);
  border: 1px solid var(--qs-brand-soft-2);
  transform: translate(18px, 18px) rotate(2.5deg);
}

.pi-papel {
  position: relative;
  padding: var(--qs-s-7) var(--qs-s-7) var(--qs-s-6);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  background: var(--qs-surface);
  box-shadow: 0 1px 2px rgba(14, 42, 51, 0.06), 0 28px 56px -32px rgba(14, 42, 51, 0.45);
}

.pi-papel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-3);
  padding-bottom: var(--qs-s-4);
  border-bottom: 2px solid var(--qs-ink);
}

.pi-papel__tipo { font-size: 1.375rem; font-weight: 780; letter-spacing: -0.02em; }
.pi-papel__marca { font-size: 1.5rem; color: var(--qs-brand); }

.pi-papel__linhas { display: grid; gap: 10px; padding-block: var(--qs-s-6); }

.pi-papel__linhas span {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--qs-neutral-soft);
}

.pi-papel__linhas span:nth-child(1) { width: 46%; height: 8px; background: var(--qs-line-strong); }
.pi-papel__linhas span:nth-child(2) { width: 88%; }
.pi-papel__linhas span:nth-child(3) { width: 72%; }
.pi-papel__linhas span:nth-child(4) { width: 40%; height: 8px; margin-top: 10px; background: var(--qs-line-strong); }
.pi-papel__linhas span:nth-child(5) { width: 94%; }
.pi-papel__linhas span:nth-child(6) { width: 64%; }

.pi-papel__rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qs-s-5);
}

.pi-papel__qr {
  flex: none;
  width: 92px;
  height: 92px;
  padding: 6px;
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-sm);
  color: var(--qs-ink);
  background: #fff;
}

.pi-papel__qr svg { width: 100%; height: 100%; fill: currentColor; shape-rendering: crispEdges; }

.pi-papel__assinatura { display: grid; justify-items: end; gap: 6px; min-width: 0; }

.pi-papel__traco {
  width: 140px;
  height: 44px;
  color: var(--qs-brand-strong);
}

.pi-papel__traco path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.pi-papel__selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--qs-radius-pill);
  background: var(--qs-success-soft);
  color: var(--qs-success);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Spec 015: a 320 px o selo "Assinado digitalmente" (sem quebra) passava da folha; papel e QR mais justos e o selo
   pode quebrar em duas linhas. */
@media (max-width: 379.98px) {
  .pi-papel { padding: var(--qs-s-5); }
  .pi-papel__qr { width: 72px; height: 72px; }
  .pi-papel__selo { white-space: normal; text-align: right; }
}

@media (min-width: 992px) {
  .pi-docs__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--qs-s-10); }
  .pi-docs__texto { order: 2; }
}

/* ---------- Também no app ---------- */
.pi-extras__lista {
  list-style: none;
  display: grid;
  gap: var(--qs-s-7) var(--qs-s-6);
  margin-top: var(--qs-s-8);
}

.pi-extra {
  display: grid;
  align-content: start;
  gap: var(--qs-s-2);
  padding-top: var(--qs-s-5);
  border-top: 1px solid var(--qs-line-strong);
}

.pi-chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--qs-s-2);
  border-radius: var(--qs-radius-control);
  background: var(--cor-fundo);
  color: var(--cor-icone);
  font-size: 1.25rem;
}

.pi-extra__titulo { font-size: 1.125rem; font-weight: 720; letter-spacing: -0.01em; }
.pi-extra__texto { color: var(--qs-ink-2); }

@media (min-width: 576px) {
  .pi-extras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .pi-extras__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Para profissionais (superfície da tinta, como nas telas de entrada) ---------- */
.pi-prof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--qs-ink);
  color: #fff;
}

.pi-prof::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -320px;
  right: -240px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 194, 255, 0.12), rgba(0, 194, 255, 0));
}

/* Traço ciano das telas de entrada (.qs-auth__marca::after). */
.pi-prof__acento {
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: var(--qs-s-6);
  border-radius: 3px;
  background: var(--qs-pulse);
}

.pi-prof .pi-titulo { color: #fff; }
.pi-prof .pi-intro { color: rgba(255, 255, 255, 0.8); }
.pi-prof .pi-acoes { margin-top: var(--qs-s-7); }

.pi-prof__grade { display: grid; gap: var(--qs-s-9); }

.pi-recursos {
  list-style: none;
  display: grid;
  align-content: start; /* a coluna do texto pode ser mais alta: os itens não esticam */
  gap: var(--qs-s-6) var(--qs-s-7);
}

.pi-recurso {
  display: grid;
  align-content: start;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--qs-s-4);
  row-gap: 2px;
}

.pi-recurso__icone {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--qs-radius-control);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--qs-hero-linha);
  font-size: 1.25rem;
}

.pi-recurso__titulo { padding-top: 2px; font-size: 1.0625rem; font-weight: 720; }
.pi-recurso__texto { color: rgba(255, 255, 255, 0.78); }

.pi-comecar {
  margin-top: var(--qs-s-10);
  padding-top: var(--qs-s-8);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pi-comecar__titulo { font-size: 1.375rem; font-weight: 740; letter-spacing: -0.015em; }

.pi-comecar__lista {
  list-style: none;
  display: grid;
  gap: var(--qs-s-5);
  margin-top: var(--qs-s-6);
}

.pi-comecar__passo {
  display: grid;
  align-content: start;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: var(--qs-s-3);
  row-gap: 2px;
}

.pi-comecar__no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--qs-hero-linha);
  border-radius: 50%;
  color: #fff;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.pi-comecar__nome { padding-top: 5px; font-size: 1rem; font-weight: 700; }
.pi-comecar__texto { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); }

@media (min-width: 768px) {
  .pi-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-comecar__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qs-s-6); }
}

@media (min-width: 992px) {
  .pi-prof__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--qs-s-10); }
  .pi-comecar__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Os quatro passos ligados por um fio, como os do paciente (sem batimentos: aqui é cadastro). */
  .pi-comecar__passo { position: relative; }
  .pi-comecar__passo:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 48px;
    right: 12px;
    height: 2px;
    background: rgba(143, 227, 255, 0.35);
  }

  .pi-comecar__passo { grid-template-columns: 1fr; row-gap: var(--qs-s-2); }
  .pi-comecar__no { grid-row: auto; }
  .pi-comecar__nome { padding-top: var(--qs-s-2); }
}

/* ---------- Dúvidas ---------- */
.pi-duvidas__grade { display: grid; gap: var(--qs-s-8); }

.pi-duvidas__lista { border-top: 1px solid var(--qs-line-strong); }

.pi-duvida { border-bottom: 1px solid var(--qs-line); }

.pi-duvida summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-4);
  min-height: 64px;
  padding-block: var(--qs-s-4);
  font-size: 1.0625rem;
  font-weight: 680;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.pi-duvida summary::-webkit-details-marker { display: none; }
.pi-duvida summary:hover { color: var(--qs-brand-strong); }

.pi-duvida summary .pi-icone {
  width: 32px;
  height: 32px;
  padding: 9px;
  border-radius: 50%;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  transition: transform var(--qs-dur-2) var(--qs-ease-out), background-color var(--qs-dur-2) var(--qs-ease-out);
}

.pi-duvida[open] summary .pi-icone { transform: rotate(180deg); background: var(--qs-brand); color: #fff; }

.pi-duvida__resposta {
  display: grid;
  gap: var(--qs-s-3);
  max-width: 64ch;
  padding-bottom: var(--qs-s-6);
  color: var(--qs-ink-2);
}

.pi-duvida__resposta a { font-weight: 650; }

/* Abrir e fechar com transição onde o navegador permite animar até "auto". */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .pi-duvida { interpolate-size: allow-keywords; }

  .pi-duvida::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--qs-dur-2) var(--qs-ease-out), content-visibility var(--qs-dur-2) allow-discrete;
  }

  .pi-duvida[open]::details-content { block-size: auto; }
}

@media (min-width: 992px) {
  .pi-duvidas__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--qs-s-10); }
  .pi-duvidas__cabeca { position: sticky; top: calc(var(--pi-topo-h) + 32px); align-self: start; }
}

/* ---------- Duas portas ---------- */
/* Mesmo fundo das dúvidas, logo acima: sem o espaço de abertura de seção. */
.pi-comece { padding-top: 0; }

.pi-portas { display: grid; gap: var(--qs-s-5); margin-top: var(--qs-s-8); }

.pi-porta {
  display: grid;
  align-content: start;
  gap: var(--qs-s-3);
  padding: var(--qs-s-7);
  border-radius: var(--qs-radius-hero);
}

.pi-porta .pi-acoes { margin-top: var(--qs-s-4); }

.pi-porta__titulo { font-size: 1.5rem; font-weight: 760; letter-spacing: -0.02em; line-height: 1.2; }

.pi-porta--paciente { background: var(--qs-brand-soft); border: 1px solid var(--qs-brand-soft-2); }
.pi-porta--paciente .pi-porta__texto { color: var(--qs-ink-2); }

.pi-porta--prof { background: var(--qs-ink); color: #fff; }
.pi-porta--prof .pi-porta__texto { color: rgba(255, 255, 255, 0.8); }

@media (min-width: 768px) {
  .pi-portas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-porta { padding: var(--qs-s-8); }
}

/* ---------- Rodapé ---------- */
.pi-rodape {
  padding-block: var(--qs-s-10) var(--qs-s-7);
  background: var(--qs-surface);
  border-top: 1px solid var(--qs-line);
  font-size: 0.9375rem;
}

.pi-rodape__grade { display: grid; gap: var(--qs-s-8); }

.pi-rodape__sobre { max-width: 36ch; margin-top: var(--qs-s-3); color: var(--qs-ink-2); }

.pi-rodape__grupo { font-weight: 720; }

.pi-rodape__links { list-style: none; display: grid; margin-top: var(--qs-s-2); }

/* Spec 015: o link que fica sozinho numa linha da resposta das dúvidas com pelo menos 24 px de altura (alvo de toque);
   os links no meio da frase continuam como texto. */
.pi-link-solto { display: inline-block; padding-block: 4px; }

.pi-rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--qs-h-touch);
  color: var(--qs-ink);
  text-decoration: none;
}

.pi-rodape__links a:hover { color: var(--qs-brand-strong); text-decoration: underline; }

.pi-rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--qs-s-3) var(--qs-s-6);
  margin-top: var(--qs-s-8);
  padding-top: var(--qs-s-5);
  border-top: 1px solid var(--qs-line);
  color: var(--qs-ink-2);
}

.pi-rodape__base a { font-weight: 700; }

@media (min-width: 768px) {
  .pi-rodape__grade { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
}

/* ---------- Movimento reduzido ----------
 * A mesma regra global do app (qs-ajustes.css): animações e transições instantâneas, sem rolagem suave. Os
 * estados finais (linha traçada, nós acesos) ficam valendo pelo "both" das animações. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .qs-ecg__pulso { display: none; }
  .qs-btn:hover { transform: none !important; }
}