/**
 * Pulmo — "Adicionar à tela de início" (components/a2hs.js): banner da home, item do menu e passo a passo.
 */

/* item do menu: sempre no celular (não depende do flag do banner nem de o app já estar instalado) */
.nav-item.nav-item--a2hs { display: none !important; }
@media (max-width: 768px) {
  .nav-item.nav-item--a2hs { display: flex !important; }
}

/* ── banner (topo da home, celular) ── */
.a2hs-banner {
  --a-ink: #0f2a26;
  --a-text: #44524f;
  --a-surface: #ffffff;
  --a-primary: #004343;
  --a-gold: #e8a33d;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(232, 163, 61, 0.16) 0%, transparent 55%),
    var(--a-surface);
  box-shadow: 0 1px 2px rgba(15, 42, 38, 0.05), 0 18px 40px -24px rgba(15, 42, 38, 0.32);
  font-family: 'Plus Jakarta Sans', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--a-ink);
  animation: a2hsIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: opacity 0.3s, transform 0.3s;
}
html[data-theme="dark"] .a2hs-banner {
  --a-ink: #eef4f3;
  --a-text: #b6c4c1;
  --a-surface: #0f1b20;
  --a-primary: #2f8f8c;
  border: 1px solid #1f2e33;
}
.a2hs-banner.is-out { opacity: 0; transform: translateY(-6px) scale(0.98); }
@keyframes a2hsIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 769px) { .a2hs-banner { display: none; } }

.a2hs-banner-main { display: flex; align-items: center; gap: 14px; padding-right: 26px; }
.a2hs-banner-icon { position: relative; flex: 0 0 56px; width: 56px; height: 56px; }
.a2hs-banner-icon img { width: 100%; height: 100%; border-radius: 14px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6); }
.a2hs-banner-icon i {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--a-gold);
  color: #fff;
  box-shadow: 0 0 0 3px var(--a-surface);
}
.a2hs-banner-icon i svg { width: 14px; height: 14px; }
.a2hs-banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.a2hs-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #b7791f; }
html[data-theme="dark"] .a2hs-kicker { color: #f6c36b; }
.a2hs-banner-text strong { font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--a-ink); }
.a2hs-banner-text > span:last-child { font-size: 0.84rem; line-height: 1.4; color: var(--a-text); }
.a2hs-banner-actions { display: flex; gap: 8px; }
.a2hs-banner-actions .a2hs-btn { flex: 1; }

/* botões (vencem o "button { background: none }" do tema claro) */
.a2hs-banner .a2hs-btn,
.a2hs-sheet .a2hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  font: 800 0.9rem/1 'Plus Jakarta Sans', 'Lato', sans-serif;
  cursor: pointer;
}
.a2hs-banner .a2hs-btn svg,
.a2hs-sheet .a2hs-btn svg { width: 18px; height: 18px; }
.a2hs-banner .a2hs-btn--primary,
.a2hs-sheet .a2hs-btn--primary { background: #004343 !important; color: #fff !important; }
.a2hs-banner .a2hs-btn--ghost,
.a2hs-sheet .a2hs-btn--ghost { background: rgba(0, 67, 67, 0.07) !important; color: #0f2a26 !important; }
html[data-theme="dark"] .a2hs-banner .a2hs-btn--primary,
html[data-theme="dark"] .a2hs-sheet .a2hs-btn--primary { background: #2f8f8c !important; }
html[data-theme="dark"] .a2hs-banner .a2hs-btn--ghost,
html[data-theme="dark"] .a2hs-sheet .a2hs-btn--ghost { background: rgba(255, 255, 255, 0.08) !important; color: #eef4f3 !important; }
.a2hs-banner .a2hs-x,
.a2hs-sheet .a2hs-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 67, 67, 0.06) !important;
  color: #44524f;
  cursor: pointer;
}
.a2hs-banner .a2hs-x svg,
.a2hs-sheet .a2hs-x svg { width: 16px; height: 16px; }
html[data-theme="dark"] .a2hs-banner .a2hs-x,
html[data-theme="dark"] .a2hs-sheet .a2hs-x { background: rgba(255, 255, 255, 0.08) !important; color: #b6c4c1; }

/* ── folha com o passo a passo ── */
.a2hs-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.a2hs-sheet-backdrop { position: absolute; inset: 0; background: rgba(8, 20, 18, 0.45); opacity: 0; transition: opacity 0.25s; }
.a2hs-sheet.is-in .a2hs-sheet-backdrop { opacity: 1; }
.a2hs-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: #ffffff;
  color: #0f2a26;
  font-family: 'Plus Jakarta Sans', 'Lato', -apple-system, sans-serif;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-theme="dark"] .a2hs-sheet-panel { background: #0f1b20; color: #eef4f3; }
.a2hs-sheet.is-in .a2hs-sheet-panel { transform: none; }
.a2hs-sheet-handle { position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: rgba(0, 0, 0, 0.15); }
.a2hs-sheet-head { display: flex; align-items: center; gap: 14px; padding-right: 34px; }
.a2hs-app-ic { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 13px; }
.a2hs-sheet-head h2 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 800; color: inherit; }
.a2hs-sheet-head p { margin: 0; font-size: 0.86rem; line-height: 1.45; color: #6f7c78; }
html[data-theme="dark"] .a2hs-sheet-head p { color: #84958f; }
.a2hs-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.a2hs-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f2f6f5;
  animation: a2hsIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--k) * 80ms + 120ms);
}
html[data-theme="dark"] .a2hs-steps li { background: #14232a; }
.a2hs-step-n { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #004343; color: #fff; font-size: 0.78rem; font-weight: 800; }
.a2hs-step-ic { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; color: #0a84ff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
html[data-theme="dark"] .a2hs-step-ic { background: #1a2c33; }
.a2hs-step-ic svg { width: 20px; height: 20px; }
.a2hs-step-t { font-size: 0.9rem; font-weight: 600; line-height: 1.4; }