/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Variáveis de espaçamento e cores */
  :root {
    --max-width: 360px;
    --gap-block: 24px;        /* Espaço entre blocos no container */
    --gap-buttons: 16px;      /* Espaço entre botões em .links */
    --btn-bg: rgba(0, 0, 0, 0.7);
    --btn-bg-hover: rgba(0, 0, 0, 0.85);
    --btn-pad-v: 14px;
    --btn-pad-hr: 20px;
    --btn-pad-ll: 60px;
  }
  
  /* Body full-screen com gradient */
  body {
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    color: #fff;
    background: linear-gradient(to bottom, #365f33, #20462a); /* ajuste as cores aqui */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Container centralizado e empilhado */
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
    padding: 20px;
    gap: var(--gap-block);
    text-align: center;
  }
  
  /* Logo topo */
  .logo {
    max-width: 200px;
    width: 100%;
    height: auto;
  }
  
  /* Texto de descrição / localização */
  .description {
    font-size: 1rem;
    color: #ddd;
  }
  
  /* Bloco PIX e Wi-Fi */
  .pix-block,
  .wifi-block {
    width: 100%;
  }
/* Título (chave / rede) + instrução via single <p> */
.pix-info,
.wifi-info {
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}

.pix-info small,
.wifi-info small {
  display: block;        /* para respeitar margin */
  font-size: 0.7rem;
  font-weight: 400;
  color: #ddd;
  margin-top: 8px;       /* espaço entre a linha de cima e small */
  opacity: 0.8;
}

  
  /* Grupo de botões */
  .links {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap-buttons);
  }
  
  /* Estilo geral dos botões */
  .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--btn-pad-v) var(--btn-pad-hr) var(--btn-pad-v) var(--btn-pad-ll);
    background: var(--btn-bg);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
  }
  .btn:hover {
    background: var(--btn-bg-hover);
  }
  
  /* Ícone fixo à esquerda */
  .btn img {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
  }
  
  /* Espaço antes do strong */
  .btn strong {
    margin-left: 0.3em;
    font-weight: 700;
  }
  
  /* Responsivo */
  @media screen and (max-width: 600px) {
    .container {
      padding: 16px;
      gap: 16px;
    }
    .btn {
      padding: 16px 16px 16px 60px;
      font-size: 1.1rem;
    }
    .logo {
      max-width: 240px;
    }
  }

  .card {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding: 20px;
    width: 100%;
    max-width: var(--max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
    margin-bottom: var(--gap-block);
  }
  
  /* Remova margens antigas de pix-block e wifi-block */
  .pix-block, .wifi-block {
    margin: 0;
  }
  
  .pix-info, .pix-subtitle,
  .wifi-info {
    text-align: center;
  }

  .footer-logo {
    width: 50px;
  }
/* === Centraliza texto em botões sem ícone === */
.btn.no-icon {
    /* Só substitui o padding-left grande por um padding-right igual */
    padding-left: var(--btn-pad-hr) !important;
  }