* {
  box-sizing: border-box;
}

:root {
  --pg-bg: #000000;
  --pg-card: #9c1c1c;
  --pg-gap: 14px;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--pg-bg);
  color: #fff;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.page {
  height: 100vh;
  display: flex;
  justify-content: center;
  padding: 28px 16px;
  overflow: hidden;
}

.card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--pg-card);
  border-radius: 28px;
  padding: 24px 0 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.card-head {
  width: 100%;
  padding: 0 24px;
  flex-shrink: 0;
}

.card-scroll {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.card-scroll::-webkit-scrollbar {
  width: 6px;
}

.card-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: 0.2px;
}

.links-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--pg-gap);
}

/* ── Link (pill button) ── */
.link-item {
  display: block;
  width: 100%;
  padding: 16px 22px;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.link-item:hover,
.link-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

/* ── Header (category label) ── */
.link-header {
  margin: 10px 0 -2px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

/* ── Banner (imagem contida, com bordas arredondadas) ── */
.link-banner {
  width: 100%;
  display: block;
  overflow: hidden;
  line-height: 0;
  border-radius: 14px;
}

.link-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* ── Title ── */
.link-title {
  font-size: 20px;
  /* Normal por padrão — só fica em negrito via o switch "Negrito" (linha
     inteira) ou **texto** (só o trecho marcado). Antes ficava sempre 700
     aqui, então o switch/o **negrito** nunca faziam diferença visual: o
     título inteiro já vinha em negrito de qualquer jeito. */
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin: 4px 0 0;
  line-height: 1.3;
}

/* ── Paragraph ── */
.link-paragraph {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  margin: 0;
  line-height: 1.55;
  white-space: pre-line;
}

/* ── Grid de estatísticas (ícone + número + descrição) ── */
.link-grid {
  width: 100%;
  display: grid;
  /* Sem isso, cada coluna do grid tenta ficar larga o suficiente pro
     conteúdo (min-content) do card, e palavras longas ("Satisfação") faziam
     o card (e a tela inteira) transbordar pra fora da largura visível em
     alguns celulares. */
  min-width: 0;
  gap: min(3vw, 12px);
}

.link-grid-item {
  /* Overlay claro sobre a cor de fundo da tela (--pg-card), em vez de um
     tom fixo — assim fica "um cinza um pouco mais claro" seja qual for a
     cor de fundo escolhida em Configurações. */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: min(4.5vw, 18px) min(2.5vw, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  overflow-wrap: break-word;
}

.link-grid-icon {
  width: clamp(28px, 9vw, 40px);
  height: clamp(28px, 9vw, 40px);
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 4vw, 18px);
  margin-bottom: min(2.5vw, 10px);
}

/* Ícone enviado como imagem (PNG etc.) — sem o círculo de fundo do emoji */
.link-grid-icon-img {
  background: none;
}

.link-grid-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-grid-stat {
  font-size: clamp(15px, 4.6vw, 19px);
  font-weight: 800;
  color: #c0392b;
  margin-bottom: 6px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.link-grid-desc {
  font-size: clamp(10px, 3.2vw, 12px);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* ── Grid no layout "Lista" (ícone ao lado do texto, um item por linha,
   estilo checklist) ── */
.link-grid-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.link-grid-item-list {
  background: none;
  border: none;
  padding: 0;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

.link-grid-item-list .link-grid-icon {
  background: none;
  width: auto;
  height: auto;
  margin-bottom: 0;
  margin-right: 12px;
  flex-shrink: 0;
}

.link-grid-item-list .link-grid-icon-img {
  width: 28px;
  height: 28px;
}

.link-grid-list-text {
  text-align: left;
}

.link-grid-item-list .link-grid-stat,
.link-grid-item-list .link-grid-desc {
  display: inline;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.link-grid-item-list .link-grid-stat {
  font-weight: 700;
  margin-right: 4px;
}

/* ── Seção com fundo claro (envolve um grupo de itens entre um "Início de
   seção clara" e um "Fim de seção") ── */
.link-section-light {
  width: 100%;
  background: #dfe1e6;
  border-radius: 20px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.link-section-light .link-header,
.link-section-light .link-title,
.link-section-light .link-paragraph {
  color: #1a1a2e;
}

.link-section-light .link-paragraph {
  color: rgba(26, 26, 46, 0.75);
}

.empty-state {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}