/* ============================================================================
   app-mobile.css — gina-app (protótipo mobile codado).
   Telas mobile da Gina rodando DENTRO de um device mockup de alta fidelidade.
   Consome o DS (gina-ds.css): tokens, tipografia (.ds-*), acento da marca.
   Acento conforme Figma: nav ativa = degradê de MARCA (violeta→magenta),
   CTA = laranja, ícone/foco = azul, botão neutro = preto. Sem hex/px de acento cru.
   ============================================================================ */

/* token editorial (highlight amarelo, fora da rampa do DS — igual ao marketing) */
:root{ --gina-site-underline:var(--color-text-inverse)35b; }

/* ====================== Cena (palco escuro) ============================== */
.scene{
  min-height:100vh; margin:0;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-sm);
  padding:var(--space-lg) var(--space-md) var(--space-md);
  background:
    radial-gradient(120% 80% at 50% -10%, #2a2730 0%, #161419 55%, #0d0c0f 100%);
  color:var(--color-text-inverse);
}
.scene__head{ text-align:center; display:flex; flex-direction:column; gap:6px; }
.scene__logo{ font-weight:700; font-size:var(--fs-display-2xs); letter-spacing:-0.01em; color:var(--color-text-inverse); }
.scene__tag{ font-weight:400; font-size:var(--fs-sm); letter-spacing:0.04em; color:rgba(255,255,255,.55); }
.scene__tag span{ color:rgba(255,255,255,.85); font-weight:600; }
.scene__foot{ font-size:var(--fs-xs); color:rgba(255,255,255,.4); letter-spacing:0.02em; text-align:center; margin:0; }
.scene__foot code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:rgba(255,255,255,.6); }

/* ====================== Device mockup (iPhone) ========================== */
.device{
  position:relative; flex:0 0 auto;
  width:390px; height:844px;
  border-radius:52px; background:#1c1c1e; padding:12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),  /* highlight interno */
    0 0 0 10px #141414,               /* bezel preto */
    0 0 0 12px #2a2a2a,               /* borda externa */
    0 40px 100px rgba(0,0,0,.8),
    0 10px 30px rgba(0,0,0,.5);
}
/* dynamic island */
.device__island{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:20;
  width:120px; height:34px; border-radius:20px; background:#000;
}
/* tela interna — onde o app vive */
.device__screen{
  position:relative; width:100%; height:100%;
  border-radius:42px; overflow:hidden;
  background:var(--color-bg-canvas);   /* #ebebeb */
}

/* ====================== Shell do app (chrome fixo + pager) ============== */
/* .phone = coluna: status bar + header fixos no topo, pager preenche o resto.
   O scroll vertical é POR TELA (cada .screen rola sozinha), pré-requisito do
   pager lateral — telas deslizam em X enquanto cada uma mantém seu scroll Y. */
.phone{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* status bar do sistema */
.statusbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--space-sm) 2px;
  font-size:var(--fs-sm); font-weight:600; color:var(--gina-ink-darkest);
}
.statusbar__icons{ display:inline-flex; gap:6px; font-size:15px; }

/* topo do app — chrome fixo acima do pager. Figma (2718:5099): logo-circular
   à esq + ações à dir (busca·upload·sino·avatar), padding 16, gap 8. */
.mhead{
  flex:0 0 auto; z-index:15;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-xs);
  background:var(--color-bg-canvas);
}
/* logo "gina" branco em círculo de degradê de marca (48px) */
.mhead__logo{
  width:48px; height:48px; flex:0 0 auto; border-radius:var(--radius-pill);
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
}
.mhead__logo img{ width:26px; height:auto; display:block; filter:brightness(0) invert(1); }

/* ====================== Pager lateral (telas como camadas) ============== */
.pager{ position:relative; flex:1 1 auto; overflow:hidden; }
.mhead__right{ display:flex; align-items:center; gap:var(--space-nano); }
.mhead__icon{
  width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--gina-ink-darkest);
}
.mhead__avatar{
  width:48px; height:48px; border-radius:var(--radius-pill); padding:3px; flex:0 0 auto;
  background:var(--grad-cta);   /* anel laranja (Figma atualizado) — era degradê de marca */
  display:flex; align-items:center; justify-content:center;
}
.mhead__avatar img{ width:100%; height:100%; border-radius:var(--radius-pill); object-fit:cover; display:block; }

/* ====================== Telas (camadas do pager) ======================== */
/* Cada tela é uma camada absoluta que (a) rola vertical sozinha e (b) é
   transladada em X pelo motor do pager (JS controla transform/transition).
   touch-action:pan-y deixa o scroll vertical nativo; o X é dirigido por JS. */
.screen{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:0 var(--space-sm) 132px;   /* respiro p/ o bottom-nav flutuante */
  will-change:transform; touch-action:pan-y;
  background:var(--color-bg-canvas);
  visibility:hidden;                 /* evita flash das telas empilhadas até o JS posicionar */
}
.screen.is-active{ visibility:visible; }   /* a inicial já aparece antes do JS rodar */
.screen::-webkit-scrollbar{ display:none; }
/* carrosséis seguem donos do pan horizontal dentro da própria caixa */
.hrow{ touch-action:pan-x; }

.mtitle{
  font-weight:700; font-size:var(--fs-xlg); line-height:1.1; letter-spacing:-0.01em;
  color:var(--gina-ink-darkest); margin:var(--space-nano) 0 var(--space-sm);
}

/* rótulo de seção: o destaque amarelo é um MARCA-TEXTO no .mark interno
   (display:inline + box-decoration-break:clone) → quando quebra em 2 linhas,
   cada linha abraça só o próprio texto e a 2ª termina na última letra (não vira
   um retângulo de largura cheia). O .section-label é bloco só p/ dar o espaçamento
   vertical (margens não valem em inline). */
.section-label{
  display:block; color:var(--gina-ink-darkest);
  font-weight:600; font-size:var(--fs-rg); line-height:1.35; letter-spacing:0.04em;
  margin:var(--space-sm) 0 var(--space-xs);
}
/* padding vertical preenche a entrelinha → as faixas de cada linha se TOCAM
   (sem espaço entre elas quando o rótulo tem 2+ linhas). */
.section-label .mark{
  background:var(--gina-site-underline); padding:3px 4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* placeholder das telas ainda não desenhadas */
.placeholder{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-xs);
  text-align:center; color:var(--color-text-helper);
  padding:var(--space-xl) var(--space-sm); margin-top:var(--space-lg);
}
.placeholder i{ font-size:48px; color:var(--gina-neutral-light); }
.placeholder p{ margin:0; font-size:var(--fs-sm); }

/* ====================== Carrosséis horizontais ========================== */
.hrow{
  display:flex; gap:var(--space-xs);
  overflow-x:auto; scroll-snap-type:x mandatory;
  /* sangra SÓ à direita (cards passam sob a borda do device); 1º card alinha
     com o título — padding-left 0 herda os 24px do .screen. padding-right dá
     respiro ao último card no fim do scroll. */
  margin-right:calc(-1 * var(--space-sm));
  padding:var(--space-quark) var(--space-sm) var(--space-nano) 0;
  scrollbar-width:none;
  cursor:grab;            /* desktop: indica que dá pra arrastar */
}
.hrow::-webkit-scrollbar{ display:none; }
.hrow > *{ scroll-snap-align:start; flex:0 0 auto; }
/* enquanto arrasta (mouse): cursor de garra fechada, sem seleção e sem snap brigando */
.hrow.is-grabbing{ cursor:grabbing; user-select:none; scroll-snap-type:none; }

/* banners de blog */
.hrow--blog .blog{ width:282px; }
.blog{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  min-height:173px; color:var(--color-text-inverse);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--space-xs);
  background-color:var(--gina-ink-3); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.blog::after{ content:""; position:absolute; inset:0; background:var(--blog-overlay, rgba(0,0,0,.30)); }
.blog > *{ position:relative; z-index:1; }
.blog__tag{ align-self:flex-start; font-size:var(--fs-xs); font-weight:var(--fw-bold); background:var(--gina-text-strong); color:var(--color-text-inverse); padding:2px 8px; border-radius:var(--radius-xs); }
.blog__ttl{ font-size:var(--fs-rg); font-weight:var(--fw-bold); line-height:var(--lh-snug); margin:0; }

/* cards de KPI */
.hrow--kpi .kpi{ width:208px; }
.kpi{
  background:var(--color-surface); border-radius:var(--radius-md);
  padding:var(--space-xs) var(--space-sm) var(--space-sm);
  display:flex; flex-direction:column;
}
.kpi__top{ display:flex; align-items:center; justify-content:space-between; }
.kpi__cat{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); line-height:1.5; }
.kpi__top i{ font-size:24px; color:var(--gina-violet); }
.kpi__val{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-xlg); line-height:1.2; margin:var(--space-nano) 0 0; }
.kpi__lbl{ color:var(--color-text-sub); font-weight:400; font-size:var(--fs-sm); line-height:1.4; letter-spacing:0.02em; }
.kpi__more{ color:var(--gina-ink-principal); font-weight:600; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.02em; margin-top:auto; padding-top:var(--space-xs); align-self:flex-start; display:inline-flex; align-items:center; gap:6px; }

/* cards de agenda */
.hrow--appt .appt{ width:208px; }
.appt{
  background:var(--color-surface); border-radius:var(--radius-md);
  padding:var(--space-sm); display:flex; flex-direction:column;
}
.appt__date{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-sm); line-height:1.4; letter-spacing:0.04em; margin-bottom:var(--space-xs); }
.appt__when{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-xlg); line-height:1.2; min-height:2.4em; }
.appt__what{ color:var(--color-text-sub); font-weight:400; font-size:var(--fs-sm); line-height:1.4; letter-spacing:0.02em; margin:var(--space-nano) 0 0; }
.appt__link{ color:var(--gina-ink-principal); font-weight:600; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.02em; margin-top:auto; padding-top:var(--space-xs); align-self:flex-start; display:inline-flex; align-items:center; gap:6px; }

/* hover/tap dos links de card */
.kpi__more i, .appt__link i{ transition:transform .2s var(--ease); }
.kpi__more:active, .appt__link:active{ color:var(--gina-violet); }
.kpi__more:active i, .appt__link:active i{ transform:translateX(4px); }

/* ====================== Botões (app) ==================================== */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-nano);
  font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:var(--fs-sm); line-height:1;
  height:44px; padding:0 var(--space-sm); border-radius:var(--radius-pill);   /* 44 = igual ao desktop */
  border:1.5px solid transparent; cursor:pointer; text-align:center;
  transition:opacity .26s var(--ease), background .26s var(--ease), color .26s var(--ease), transform .12s var(--ease);
}
.b:active{ transform:scale(.98); }
.b--dark{ background:var(--color-btn-primary-bg); color:var(--color-btn-primary-fg); }
.b--outline{ background:transparent; color:var(--color-text); border-color:var(--color-border-strong); }
.b--cta{ background:var(--color-btn-cta-grad); color:var(--color-btn-cta-fg); background-origin:border-box; }
.b--block{ width:100%; }

/* ====================== Tabs (Histórico) ================================ */
.tabs{ display:flex; gap:var(--space-quark); background:var(--color-bg-muted); padding:var(--space-quark); border-radius:var(--radius-pill); margin-bottom:var(--space-sm); }
.tab{
  flex:1; padding:var(--space-nano) var(--space-sm); border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-rg); line-height:1.4;
  color:var(--color-text-sub); cursor:pointer; border:0; background:transparent;
  transition:background .24s var(--ease), color .24s var(--ease);
}
.tab.is-active{ background:var(--color-text); color:var(--color-text-inverse); }
.tabpane{ display:none; }
.tabpane.is-active{ display:block; }

/* ====================== Cards de exame (Histórico) ====================== */
.exam{
  background:var(--color-surface); border-radius:var(--radius-md);
  padding:var(--space-xs) var(--space-sm) var(--space-sm);
  display:flex; flex-direction:column; margin-bottom:var(--space-xs);
}
/* Ordem visual (via flex order, sem mexer no HTML): clínica → TAG → título →
   data → botão. A tag sobe pra cima do título do exame (pedido da Helena). */
.exam__top{ order:0; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-nano); }
.exam__tag, .exam__spec{ order:1; margin-top:var(--space-xxs); }   /* 12px abaixo da clínica */
.exam__name{ order:2; margin-top:var(--space-nano); }              /* 8px abaixo da tag */
.exam__date{ order:3; margin:var(--space-quark) 0 var(--space-xs); }   /* 4 acima · 16 abaixo (respiro p/ o botão) */
.exam .b{ order:4; }

.exam__clinic{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text); letter-spacing:0.04em; }
.exam__name{ font-size:var(--fs-rg); font-weight:var(--fw-bold); line-height:1.5; color:var(--gina-ink-darkest); }   /* título do exame = 16px (--fs-rg) */
.exam__tag{ display:inline-block; align-self:flex-start; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text-inverse); background:var(--gina-blue); padding:3px 8px; border-radius:var(--radius-xs); letter-spacing:0.02em; }   /* tag = 14px */
.exam__spec{ display:inline-block; align-self:flex-start; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--gina-violet); background:rgba(72,0,229,.08); padding:3px 8px; border-radius:var(--radius-xs); }   /* tag = 14px */
.exam__date{ font-size:var(--fs-sm); font-weight:300; color:var(--color-text-sub); line-height:1.4; letter-spacing:0.04em; }
.exam__menu{ color:var(--color-text-helper); font-size:18px; cursor:pointer; flex:0 0 auto; padding:2px; border-radius:var(--radius-xs); }

/* ====================== Bottom nav (pill flutuante) ===================== */
/* specs do componente bottom-nav do Figma (2614:1133): pill 296px,
   bg rgba(28,28,28,.83) + blur 15, padding 12/8, itens 56×40 radius 8 (gap 0),
   item ativo = degradê de marca. */
.bnav{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:24px; z-index:30;
  display:flex; align-items:center; justify-content:center;
  padding:8px; border-radius:12px;
  background:rgba(28,28,28,.83);
  -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.bnav__item{
  width:56px; height:56px; border:0; border-radius:var(--radius-sm); cursor:pointer;   /* itens quadrados 56×56 (Figma) */
  background:transparent; color:rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:background .24s var(--ease), color .24s var(--ease), transform .14s var(--ease);
}
.bnav__item i{ transition:transform .18s var(--ease); }
.bnav__item:hover i{ transform:scale(1.12); }       /* desktop: leve crescer no hover */
.bnav__item:active{ transform:scale(.9); }          /* press feedback (InvestApp) */
.bnav__item.is-active{ background:var(--grad-brand); color:var(--color-text-inverse); }
.bnav__item.is-active i{ animation:nav-pop .42s var(--ease); }   /* bounce ao selecionar */
@keyframes nav-pop{ 0%{ transform:scale(.6); } 55%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* ====================== Bottom-sheets ================================== */
.sheet-scrim{
  position:absolute; inset:0; z-index:40;
  background:rgba(20,10,40,.45);
  opacity:0; transition:opacity .28s var(--ease);
}
.sheet-scrim.is-open{ opacity:1; }
.sheet-scrim[hidden]{ display:none; }

.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:50;
  background:var(--color-surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--space-md) var(--space-sm) var(--space-sm);
  max-height:88%; overflow-y:auto;
  box-shadow:0 -12px 40px rgba(0,0,0,.25);
  transform:translateY(100%); transition:transform .32s var(--ease);
  scrollbar-width:none;
}
.sheet::-webkit-scrollbar{ display:none; }
.sheet.is-open{ transform:translateY(0); }
.sheet[hidden]{ display:none; }
/* alça visual de bottom-sheet */
.sheet::before{
  content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:40px; height:4px; border-radius:var(--radius-pill); background:var(--color-border);
}
.sheet__x{
  position:absolute; top:var(--space-sm); right:var(--space-sm);
  width:40px; height:40px; border:0; border-radius:var(--radius-pill);
  background:var(--color-bg-canvas); color:var(--gina-violet); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.sheet__x[hidden]{ display:none; }   /* esconde nos passos com Cancelar/Voltar (o display:flex venceria o [hidden] do UA) */
.sheet__title{ font-size:var(--fs-lg); font-weight:var(--fw-bold); line-height:var(--lh-snug); color:var(--gina-ink-darkest); margin:var(--space-nano) 0 var(--space-nano); padding-right:var(--space-xl); }
.sheet__title.center{ text-align:center; padding-right:0; margin-bottom:var(--space-quark); }
.sheet__sub{ font-size:var(--fs-sm); color:var(--color-text-sub); margin:0 0 var(--space-sm); padding-right:var(--space-xl); }
.sheet__sub.center{ text-align:center; padding-right:0; }

.eyebrow-app{ font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-medium); text-transform:uppercase; color:var(--color-text-helper); margin:var(--space-xs) 0 var(--space-nano); }

/* multi-passo */
.ohstep{ display:none; }
.ohstep.is-current{ display:block; }

/* passo com rodapé FIXO (consent): o sheet vira coluna de altura definida, o
   corpo rola e os botões ficam pinados embaixo — nunca cobrindo os campos
   (ex.: CPF). Fade no topo do rodapé sinaliza que há conteúdo rolando. */
.sheet--pinned{ display:flex; flex-direction:column; height:88%; max-height:88%; overflow:hidden; }
.ohstep--pinned.is-current{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.ohstep__body{ flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; padding-bottom:var(--space-nano); }
.ohstep__body::-webkit-scrollbar{ display:none; }
.ohstep__foot{ flex:0 0 auto; position:relative; background:var(--color-surface); padding-top:var(--space-xs); }
.ohstep__foot::before{
  content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--space-sm)); height:var(--space-sm);
  background:linear-gradient(to top, var(--color-surface), rgba(255,255,255,0)); pointer-events:none;
}
/* campo de CPF (e afins) dentro do sheet */
.ohfield{ display:block; margin-bottom:var(--space-xs); }
.ohfield input{
  width:100%; height:48px; padding:0 var(--space-xs);
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-rg); letter-spacing:0.06em;
  color:var(--gina-ink-darkest); background:var(--color-surface);
}
.ohfield input::placeholder{ color:#9a9a9a; letter-spacing:0; }
.ohfield input:focus-visible{ outline:none; border-color:var(--gina-blue); box-shadow:0 0 0 3px rgba(0,54,246,.18); }

/* fontes (passo 1) */
.source{
  display:flex; align-items:center; gap:var(--space-xs);
  width:100%; text-align:left; cursor:pointer;
  border:1.5px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface); padding:var(--space-xs); margin-bottom:var(--space-xs);
  transition:border-color var(--dur-fast) var(--ease);
}
.source:active{ border-color:var(--color-border-strong); }
.source__ico{
  width:48px; height:48px; flex:0 0 48px; border-radius:var(--radius-pill);
  background:var(--gina-violet); color:var(--color-text-inverse);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.source__ico[data-inst-mono]{ font-size:13px; font-weight:700; letter-spacing:0; }
.source__txt{ flex:1; }
.source__ttl{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.source__sub{ display:block; font-size:var(--fs-xs); color:var(--color-text-sub); margin-top:2px; }
.source__arrow{ color:var(--color-text-helper); font-size:18px; }
.or{ display:flex; align-items:center; gap:var(--space-xs); color:var(--color-text-helper); font-size:var(--fs-xs); margin:var(--space-xs) 0; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--color-divider); }

/* instituição (passo 2) */
.inst-search{ position:relative; margin-bottom:var(--space-sm); }
.inst-search i{ position:absolute; left:var(--space-xs); top:50%; transform:translateY(-50%); color:var(--color-text); font-size:20px; }
.inst-search input{
  width:100%; height:48px; padding:0 var(--space-xs) 0 44px;
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-weight:400; font-size:var(--fs-rg); letter-spacing:0.04em;
  color:var(--gina-ink-darkest); background:var(--color-surface);
}
.inst-search input::placeholder{ color:var(--color-text-placeholder); }
.inst-group{ border:1px solid var(--color-divider); border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--space-sm); }
.inst-tile{
  display:flex; align-items:center; gap:var(--space-xs); width:100%; text-align:left;
  background:var(--color-surface); border:0; cursor:pointer;
  padding:var(--space-xs); border-top:1px solid var(--color-divider);
}
.inst-group .inst-tile:first-child{ border-top:0; }
.inst-tile:active{ background:var(--color-bg-muted); }
.inst-mono{
  flex:0 0 40px; width:40px; height:40px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-inverse); font-weight:700; font-size:14px; letter-spacing:0;
}
.inst-tile__name{ flex:1; color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); line-height:1.4; }
.inst-tile__arrow{ color:var(--color-text-helper); font-size:20px; }
.inst-empty{ color:var(--color-text-sub); font-size:var(--fs-sm); text-align:center; padding:var(--space-sm) 0; }
.inst-empty[hidden]{ display:none; }

/* consentimento (passo 3) */
.share{ list-style:none; padding:0; margin:0 0 var(--space-sm); }
.share li{ display:flex; gap:var(--space-xs); align-items:flex-start; padding:var(--space-nano) 0; }
.share i{ color:var(--gina-ink-darkest); font-size:22px; line-height:1.2; flex:0 0 auto; }
.share li > span{ display:flex; flex-direction:column; gap:2px; }
.share b{ font-size:var(--fs-rg); font-weight:600; line-height:1.4; color:var(--gina-ink-darkest); }
.share li > span > span{ font-size:var(--fs-sm); color:var(--color-text-sub); line-height:1.4; }
.dur{ display:flex; align-items:center; gap:var(--space-nano); margin-bottom:var(--space-sm); color:var(--gina-ink-darkest); font-size:var(--fs-rg); }
.dur i{ font-size:22px; }
.note{
  display:flex; gap:var(--space-nano); align-items:flex-start;
  background:var(--color-bg-muted); border-radius:var(--radius-sm);
  padding:var(--space-xs); font-size:var(--fs-xs); color:var(--color-text-sub); margin-bottom:var(--space-sm);
}
.note i{ font-size:16px; }

/* buscando (passo 4) */
.sync-ring{ width:80px; height:80px; margin:var(--space-xs) auto var(--space-quark); display:block; }
.sync-ring__track{ opacity:.12; }
/* anel girando continuamente (loading "rodando"), ~70% de arco visível */
.sync-ring__arc{ stroke-dasharray:150 64; stroke-dashoffset:0; transform-origin:center; }
.ohstep.is-current .sync-ring__arc{ animation:ring-spin 1.1s linear infinite; }
@keyframes ring-spin{ to{ transform:rotate(360deg); } }

/* pilha de frases do "buscando": 2 por vez (centralizadas, cinza, sem bold) — a
   frase entra de baixo e a anterior sobe esmaecendo. Altura cabe as 2, colada no
   anel (margem mínima). Subida lenta (transição .7s + intervalo ~1,9s no JS) pra
   dar pra perceber a sequência. */
.ohstack{ position:relative; height:64px; margin-top:0; }
.ohstack__line{
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  font-family:var(--font-sans); font-weight:400; font-size:var(--fs-md); line-height:1.3; letter-spacing:0.02em;
  color:var(--color-text-sub);
  transition:transform .7s var(--ease), opacity .7s var(--ease);
  will-change:transform, opacity;
}
.checklist{ list-style:none; margin:0 0 var(--space-sm); padding:0; }
.checklist li{ display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-nano) 0; color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); }
.checklist i{ font-size:22px; }
/* item EM ANDAMENTO = mini loader girando (degradê laranja, igual ao Figma) */
.checklist .dot{ width:22px; display:flex; align-items:center; justify-content:center; }
.checklist .dot::before{
  content:""; width:18px; height:18px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(245,74,49,0), #f54a31, #ff9a02);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
  animation:mini-spin .8s linear infinite;
}
@keyframes mini-spin{ to{ transform:rotate(360deg); } }

/* sucesso (passo 5) */
.ok{ width:44px; height:44px; margin:var(--space-sm) auto var(--space-xs); color:var(--gina-blue); display:flex; align-items:center; justify-content:center; font-size:44px; }
.exam-list{ list-style:none; margin:var(--space-xs) 0; padding:0; }
.exam-list li{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); padding:10px 0; border-top:1px solid var(--color-divider); }
.exam-list li:first-child{ border-top:0; }
.exam-list li span{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); }
.exam-list time{ color:var(--color-text-sub); font-size:var(--fs-sm); flex:0 0 auto; }
.autosync{ display:flex; gap:var(--space-xs); align-items:flex-start; padding:var(--space-xs) 0 var(--space-sm); }
.autosync i{ font-size:22px; color:var(--gina-ink-darkest); }
.autosync > div{ display:flex; flex-direction:column; gap:2px; }
.autosync b{ color:var(--gina-ink-darkest); font-weight:700; font-size:var(--fs-rg); line-height:var(--lh-snug); }
.autosync > div > span{ color:var(--color-text-sub); font-size:var(--fs-sm); line-height:var(--lh-snug); }

/* botão de texto (Cancelar / Voltar) */
.gbtn{
  display:flex; align-items:center; justify-content:center; gap:var(--space-nano);
  width:100%; height:44px; margin-top:var(--space-nano); background:transparent; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-text-sub);
}
.gbtn--back{ justify-content:flex-start; width:auto; margin:0 0 var(--space-xs); padding:0; height:auto; }
.gbtn--back i{ font-size:18px; }

/* upload manual */
.dropzone{
  border:1.5px dashed var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-md) var(--space-sm); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-xs);
  margin-bottom:var(--space-sm);
}
.dropzone__hint{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--gina-ink-darkest); margin:0; }
.sheet__actions{ display:flex; gap:var(--space-xs); }

/* ====================== Cabeçalho de seção (Histórico) ================== */
/* rótulo (destaque amarelo) à esq + "Ver mais →" à dir; em tela estreita o
   link quebra pra linha de baixo e fica alinhado à direita (margin-left:auto). */
.section-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-nano) var(--space-sm);
  margin:var(--space-sm) 0 var(--space-xs);
}
.section-head .section-label{ margin:0; flex:0 0 auto; }
/* no mobile o "Ver mais" vem DEPOIS dos cards de cada seção (à direita) — não
   logo abaixo do rótulo (ficava órfão entre o título e os cards). */
.seemore{ display:flex; justify-content:center; margin:var(--space-xs) 0 var(--space-sm); }
.tabpane > .section-label:first-child{ margin-top:var(--space-quark); }
.tabpane .section-head:first-child{ margin-top:var(--space-quark); }
.section-head .more-link{ margin-left:auto; }   /* só no header de seção empurra p/ a direita; no .seemore fica centralizado */
.more-link{
  color:var(--gina-ink-principal); font-weight:600; font-size:var(--fs-rg); line-height:1.5; letter-spacing:0.02em;
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  transition:color .2s var(--ease);
}
.more-link i{ transition:transform .2s var(--ease); }
.more-link:hover{ color:var(--gina-violet); }
.more-link:hover i{ transform:translateX(4px); }

/* ====================== Animação de ícones (estilo InvestApp) =========== */
/* Assinatura: todo ícone interativo cresce no hover (desktop) e encolhe ao
   tocar (active:scale .9). Mais alguns delights por tipo. */
.mhead__icon i{ transition:transform .18s var(--ease); }
.mhead__icon{ transition:color .18s var(--ease); }
.mhead__icon:hover i{ transform:scale(1.12); }
.mhead__icon:active i{ transform:scale(.9); }
.mhead__icon[aria-label="Buscar"]:hover, .mhead__icon[aria-label="Adicionar exames"]:hover{ color:var(--gina-violet); }
/* sininho balança no hover */
@keyframes bell-shake{ 0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(3deg)} }
.mhead__icon[aria-label="Notificações"]:hover i{ transform-origin:50% 4px; animation:bell-shake .7s var(--ease); }
/* "Adicionar exames" (cloud-upload) sobe de leve no hover (metáfora de upload) */
.mhead__icon[aria-label="Adicionar exames"]:hover i{ transform:scale(1.12) translateY(-2px); }
/* avatar cresce de leve */
.mhead__avatar{ transition:transform .18s var(--ease); }
.mhead__avatar:hover{ transform:scale(1.06); }

/* ícone de stat do KPI pulsa quando o card é tocado/hover */
.kpi__top i{ transition:transform .2s var(--ease); }
.kpi:hover .kpi__top i{ transform:scale(1.15); }

/* menu (3 pontinhos) do card de exame */
.exam__menu{ transition:transform .18s var(--ease), color .18s var(--ease), background .2s var(--ease); }
.exam__menu:hover{ transform:scale(1.25); color:var(--gina-violet); }
.exam__menu:active{ transform:scale(.9); }

/* setas das tiles do Open Health deslizam no hover */
.source__arrow, .inst-tile__arrow{ transition:transform .2s var(--ease); }
.source:hover .source__arrow, .inst-tile:hover .inst-tile__arrow{ transform:translateX(4px); }
.source__ico, .inst-mono{ transition:transform .2s var(--ease); }
.source:hover .source__ico, .inst-tile:hover .inst-mono{ transform:scale(1.08); }

/* X do sheet gira no hover */
.sheet__x i{ transition:transform .22s var(--ease); }
.sheet__x:hover i{ transform:rotate(90deg); }
/* seta do Voltar recua no hover */
.gbtn--back i{ transition:transform .2s var(--ease); }
.gbtn--back:hover i{ transform:translateX(-3px); }

/* ícone "Sincronização automática" do sucesso girando devagar */
.autosync i{ transition:transform .6s var(--ease); }
.autosync:hover i{ transform:rotate(180deg); }

/* ====================== Página de perfil / Sair ======================== */
/* Abre pelo avatar do header; desliza de baixo (estilo painel do IM+).
   Topo = foto + nome; abaixo = lista de opções em cards (a última = Sair). */
.profile{
  position:absolute; inset:0; z-index:60;
  background:var(--color-bg-canvas);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  padding:0 var(--space-sm) var(--space-xl);
  transform:translateY(100%); transition:transform .32s var(--ease);
}
.profile.is-open{ transform:translateY(0); }
.profile[hidden]{ display:none; }
.profile::-webkit-scrollbar{ display:none; }
.profile__back{
  margin:var(--space-lg) 0 0 calc(-1 * var(--space-nano));
  width:40px; height:40px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--gina-ink-darkest); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  transition:transform .18s var(--ease);
}
.profile__back:hover{ transform:translateX(-3px); }
/* foto + nome (inspirado no .side__me do golden path) */
.profile__hero{ display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-sm) var(--space-quark) var(--space-lg); }
.profile__avatar{
  width:72px; height:72px; flex:0 0 auto; border-radius:var(--radius-pill); padding:3px;
  background:var(--grad-cta);
  display:flex; align-items:center; justify-content:center;
}
.profile__avatar img{ width:100%; height:100%; border-radius:var(--radius-pill); object-fit:cover; display:block; }
.profile__name{ font-weight:700; font-size:var(--fs-lg); line-height:1.2; color:var(--gina-ink-darkest); }
.profile__sub{ font-size:var(--fs-sm); color:var(--color-text-sub); margin-top:2px; }
/* lista de opções */
.profile__list{ display:flex; flex-direction:column; gap:var(--space-xxs); }
.prow{
  display:flex; align-items:center; gap:var(--space-xs); width:100%; text-align:left;
  background:var(--color-surface); border:0; border-radius:var(--radius-md);
  padding:var(--space-xs); cursor:pointer; box-shadow:var(--shadow-2);
  transition:transform .12s var(--ease);
}
.prow:active{ transform:scale(.99); }
.prow__ico{
  width:40px; height:40px; flex:0 0 auto; border-radius:var(--radius-sm);
  background:var(--color-bg-muted); color:var(--gina-ink-darkest);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transition:transform .18s var(--ease);
}
.prow:hover .prow__ico{ transform:scale(1.08); }
.prow__txt{ flex:1; display:flex; flex-direction:column; gap:2px; }
.prow__label{ font-weight:700; font-size:var(--fs-rg); line-height:1.4; color:var(--gina-ink-darkest); }
.prow__sub{ font-size:var(--fs-xs); color:var(--color-text-helper); line-height:1.2; }
.prow__chev{ flex:0 0 auto; color:var(--color-text-helper); font-size:20px; transition:transform .2s var(--ease); }
.prow:hover .prow__chev{ transform:translateX(3px); }
.prow--danger .prow__ico{ background:rgba(198,40,40,.08); color:var(--color-danger-strong); }  /* tint 8% = mesmo #c62828 a .08 (mantido rgba p/ preservar alpha) */
.prow--danger .prow__label{ color:var(--color-danger-strong); }

/* ====================== Tela de loading (pós-login) ==================== */
/* estilo IM+: fundo branco, frases passando (embaixo-esq); logo da Gina
   pulsando no topo-esquerda. Overlay dentro do device, some ao terminar. */
.loader{
  position:absolute; inset:0; z-index:70;
  background:var(--gina-white);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--space-md) 100px;
}
.loader.is-leaving{ animation:loader-fade .7s var(--ease) both; pointer-events:none; }
.loader[hidden]{ display:none; }
.loader__logo{
  position:absolute; top:var(--space-lg); left:var(--space-md);
  width:72px; height:72px; border-radius:var(--radius-pill);
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  animation:logo-pulse 1.4s var(--ease) infinite;
}
.loader__logo img{ width:38px; height:auto; display:block; filter:brightness(0) invert(1); }
/* pilha de frases: cada linha entra de baixo e sobe sumindo quando a próxima
   chega (2 visíveis por vez). Linhas são absolutas, ancoradas na base da pilha;
   o JS empilha via translateY (alturas medidas) com transição. */
.loader__stack{ position:absolute; left:var(--space-md); right:var(--space-md); bottom:100px; height:0; }
.loader__line{
  position:absolute; left:0; right:0; bottom:0;
  font-family:var(--font-sans); font-weight:300; font-size:var(--fs-xxlg); line-height:1.15;
  color:var(--gina-ink-darkest);
  transition:transform .55s var(--ease), opacity .55s var(--ease);
  will-change:transform, opacity;
}
.loader__line.is-done{ font-weight:700; letter-spacing:-0.02em; }
/* "..." animado ao fim da frase (onda de opacidade) — some no "Pronto!" */
.loader__dots span{ display:inline; animation:dot-blink 1.4s var(--ease) infinite both; }
.loader__dots span:nth-child(2){ animation-delay:.2s; }
.loader__dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dot-blink{ 0%,70%,100%{ opacity:.2; } 35%{ opacity:1; } }
@keyframes logo-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
@keyframes loader-phrase{ 0%{opacity:0; transform:translateY(6px);} 15%{opacity:1; transform:none;} 80%{opacity:1; transform:none;} 100%{opacity:0; transform:translateY(-4px);} }
@keyframes loader-pop{ from{opacity:0; transform:scale(.88) translateY(6px);} to{opacity:1; transform:none;} }
@keyframes loader-fade{ to{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ========================================================================== */
/* CELULAR REAL — larga a moldura e ocupa a tela inteira (edge-to-edge).       */
/* A moldura (.device) é só apresentação de desktop; aqui o app vira fullscreen */
/* como um app nativo. 100dvh evita corte pela barra do navegador; safe-area    */
/* respeita notch e home indicator.                                             */
/* ========================================================================== */
@media (max-width:480px){
  /* some o palco escuro e a legenda/rodapé de apresentação */
  .scene{ padding:0; gap:0; min-height:100dvh; background:var(--color-bg-canvas); }
  .scene__head, .scene__foot{ display:none; }

  /* a "carcaça" do iPhone vira a própria viewport */
  .device{
    width:100vw; height:100dvh;
    border-radius:0; box-shadow:none; padding:0; background:none;
  }
  .device__island{ display:none; }            /* notch desenhado: o real assume */
  .device__screen{ border-radius:0; }

  /* status bar DESENHADA some — o SO mostra a real por cima.
     O respiro do notch passa pro header do app. */
  .statusbar{ display:none; }
  .mhead{ padding-top:calc(var(--space-xs) + env(safe-area-inset-top)); }

  /* bottom nav flutuante respeita o home indicator */
  .bnav{ bottom:calc(24px + env(safe-area-inset-bottom)); }
  /* respiro inferior das telas acompanha a safe-area */
  .screen{ padding-bottom:calc(132px + env(safe-area-inset-bottom)); }
}

/* ========================================================================== */
/* TRAVA DE ORIENTAÇÃO — o app é retrato. Em paisagem no celular, cobre a tela. */
/* Fallback do iOS Safari (aba), que não tem API de lock; no PWA instalado o    */
/* manifest "orientation":"portrait" já trava de verdade.                       */
/* ========================================================================== */
.rotate-lock{ display:none; }
@media (max-width:900px) and (orientation:landscape){
  .rotate-lock{
    display:flex; position:fixed; inset:0; z-index:9999;
    flex-direction:column; align-items:center; justify-content:center; gap:var(--space-sm);
    padding:var(--space-lg); text-align:center;
    background:var(--color-bg-canvas); color:var(--gina-ink-darkest);
  }
  .rotate-lock i{ font-size:48px; }
  .rotate-lock p{ font-size:var(--fs-lg); font-weight:var(--fw-bold); margin:0; }
}