/* ==========================================================================
   Página de links do Fidelizow
   Cores, fontes e medidas seguem o Design do projeto (marca Fidelizow, §2 e §6).
   Unidades em rem; px só em fios de borda e reservas de env().
   ========================================================================== */

/* ---------- Fontes da própria casa (Poppins, licença OFL em ../fonts/OFL.txt) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Cores institucionais */
  --marca: #00AEE5;            /* Azul Fidelizow: destaque sobre fundo escuro */
  --marca-escura: #0095C4;     /* foco e bordas ativas sobre fundo claro (3:1) */
  --marca-link: #056F93;       /* links e ícones azuis sobre fundo claro (5,21:1 sobre #F5F5F6) */
  --marca-clara: #E6F7FC;      /* ladrilho dos ícones */
  --cromo: #0D1117;            /* escuro: topo e texto principal */
  --cromo-2: #20242A;          /* escuro + 8% de branco */
  --cromo-3: #34373C;          /* escuro + 16% de branco */
  --whatsapp: #25D366;         /* só para ações de WhatsApp (texto #0D1117: 9,54:1) */
  --whatsapp-hover: #34D671;   /* 7% mais claro ao passar o cursor */

  /* Neutros */
  --branco: #FFFFFF;
  --fundo: #F5F5F6;
  --linha: #E2E2E3;
  --linha-forte: #86888B;      /* borda de controle (3,26:1 sobre #F5F5F6; 3,55:1 sobre branco) */
  --tinta: #0D1117;
  --tinta-2: #4A4C51;          /* texto de apoio (8,59:1) */
  --tinta-3: #626468;          /* texto terciário (5,44:1 sobre #F5F5F6) */

  /* Tipografia */
  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-xs: 0.75rem;
  --texto-s: 0.8125rem;
  --texto-m: 0.9375rem;
  --texto-l: 1.0625rem;

  /* Espaços, larguras e raios */
  --gutter: 1.25rem;
  --largura-foco: 30rem;       /* coluna única da página de links */
  --alvo: 2.75rem;             /* área mínima de toque (44 px) */
  --raio-botao: 1rem;
  --raio-icone: 0.75rem;

  /* Movimento */
  --dur: 180ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 40rem) {
  :root { --gutter: 1.75rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte);
  font-size: var(--texto-m);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }
a { color: inherit; }

::selection { background: #CCEFFA; color: var(--tinta); }

/* Texto só para leitor de tela */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo */
.pular {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 1rem;
  border-radius: 0.625rem;
  background: var(--branco);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus-visible {
  transform: none;
  outline: 0.125rem solid var(--marca);
  outline-offset: 0.125rem;
}

/* Sprite de ícones */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Ícones: traço de 2, pontas arredondadas, cor herdada do texto (Design §2.4) */
.ico {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--cheio { fill: currentColor; stroke: none; }  /* marcas das redes e do WhatsApp */

/* ---------- Topo (fundo escuro, logotipo azul e branco) ---------- */
.topo {
  background: var(--cromo);
  color: var(--branco);
  padding: max(2.5rem, env(safe-area-inset-top, 0px)) var(--gutter) 3.75rem;
}

.topo__miolo {
  max-width: var(--largura-foco);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* Logotipo: nunca abaixo de 8,75 rem (140 px); proporção travada pela altura automática */
.topo__marca { width: min(15rem, 75%); }
.topo__marca img { width: 100%; height: auto; }

.topo__texto {
  max-width: 24rem;
  font-size: var(--texto-l);
  line-height: 1.5;
  text-wrap: balance;
}
.topo__texto strong { color: var(--marca); font-weight: 700; }  /* palavra em destaque sobre escuro */

/* Redes sociais */
.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.rede {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  border-radius: 50%;
  border: 1px solid var(--cromo-3);
  background: var(--cromo-2);
  color: var(--branco);
  transition: background-color var(--dur) var(--curva), border-color var(--dur) var(--curva), color var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.rede .ico { width: 1.25rem; height: 1.25rem; }
.rede:active { transform: scale(0.97); }
.rede:focus-visible { outline: 0.125rem solid var(--marca); outline-offset: 0.1875rem; }

/* ---------- Conteúdo ---------- */
.miolo {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura-foco);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Botão principal: WhatsApp (#25D366 com texto e ícone #0D1117) */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.25rem;
  margin-top: -2.125rem;                 /* avança metade sobre a base do topo */
  padding: 0.75rem 1.125rem;
  border-radius: var(--raio-botao);
  background: var(--whatsapp);
  color: var(--cromo);
  text-decoration: none;
  box-shadow: 0 12px 24px -12px rgb(37 211 102 / 0.65);
  transition: background-color var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.cta__icone { width: 1.75rem; height: 1.75rem; }
.cta__texto { display: grid; min-width: 0; }
.cta__titulo { font-size: var(--texto-l); font-weight: 700; line-height: 1.3; }
.cta__apoio { display: flex; flex-wrap: wrap; column-gap: 0.625rem; font-size: var(--texto-s); font-weight: 500; line-height: 1.4; }
.cta:active { transform: scale(0.97); }
/* Foco em dois tons: legível tanto sobre o fundo escuro do topo quanto sobre o claro */
.cta:focus-visible {
  outline: 0.1875rem solid var(--marca-escura);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.1875rem var(--branco);
}

/* Lista de atalhos (componente "Lista" do Design §4.3) */
.lista {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--branco);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--dur) var(--curva), transform var(--dur) var(--curva);
}

.item__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-icone);
  background: var(--marca-clara);
  color: var(--marca-link);
}
.item__icone .ico { width: 1.25rem; height: 1.25rem; }

.item__texto { display: grid; flex: 1; min-width: 0; }
.item__titulo { font-size: var(--texto-m); font-weight: 700; line-height: 1.35; }
.item__apoio { font-size: var(--texto-s); line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }

.item__seta {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--tinta-3);
  transition: transform var(--dur) var(--curva), color var(--dur) var(--curva);
}

.item:active { transform: scale(0.97); }
.item:focus-visible { outline: 0.125rem solid var(--marca-escura); outline-offset: 0.1875rem; }

/* Efeitos de cursor só onde há cursor (evita "hover preso" no toque) */
@media (hover: hover) {
  .rede:hover { background: var(--marca); border-color: var(--marca); color: var(--cromo); }
  .cta:hover { background: var(--whatsapp-hover); }
  .item:hover { border-color: var(--marca-escura); }
  .item:hover .item__seta { color: var(--marca-link); transform: translateX(0.125rem); }
}

/* ---------- Rodapé ---------- */
.rodape {
  width: 100%;
  max-width: var(--largura-foco);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 0.25rem;
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--tinta-3);
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5rem;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding-inline: 0.5rem;
  color: var(--marca-link);
  font-weight: 500;
  text-underline-offset: 0.1875rem;
}
.rodape a:focus-visible { outline: 0.125rem solid var(--marca-escura); outline-offset: 0.0625rem; border-radius: 0.25rem; }

.rodape__nota {
  max-width: 24rem;
  margin: 0.5rem auto 0;
  text-wrap: pretty;
}

/* ---------- Telas maiores ---------- */
@media (min-width: 64rem) {
  .topo { padding-top: 3.5rem; padding-bottom: 4.25rem; }
  .topo__marca { width: 17rem; }
}

/* ---------- Movimento reduzido: sem transições nem deslocamentos ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .cta:active, .item:active, .rede:active { transform: none; }
}