@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400;1,700&display=swap');


:root {
  --bg: #0d0d0d;
  --gold: #e2b45a;
  --gold-gradient: linear-gradient(90deg, #f5d061, #d49a1a);
  --text: #f5f0e1;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: sans-serif;
  overflow-x: hidden;
}

.hero {
  text-align: center;
  padding: 1rem 1rem;
}
.logo {
  max-width: 450px;   /* antes era 320px, agora deixamos maior */
  width: 80%;         /* opcional: faz ela ocupar até 80% da tela em mobile */
  height: auto;
}
.subtitle {
  margin-top: .5rem;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 2.6rem;      /* levemente maior */
  color: var(--gold);
  white-space: nowrap;
}

/* == Layout dos cards em 1×2 ==
   Use colunas fixas de 280px (igual à largura do card),
   centralizando o conjunto na tela */
.products {
 display: grid;
 grid-template-columns: repeat(2, 330px);
 justify-content: center;
 gap: 2rem;
 padding: 2rem 1rem 0;
}

/* Cada produto é um bloco vertical */
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Seção de copy promo */
.promo {
  max-width: 800px;
  margin: 2rem auto;      /* separa do grid e centraliza */
  padding: 0 1rem;
}
.promo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  /* use o gradiente dourado para chamar atenção */
  background: var(--white);
  text-align: left;
  margin: 2rem 0 1.5rem;
  letter-spacing: 0.03em;
}
.promo-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin: 3rem 0 1.5rem;
  letter-spacing: 0.03em;
}
/* Seção de Features */
.features-list {
  list-style: none;
  display: list-item;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  font-family: 'Playfair Display', serif;
  gap: 1.0rem;
  padding: 0 2rem 2rem 3rem;
  max-width: 800px;
  margin: 0 auto;
}
.features-list .feature-text {
  /* força números na altura das letras maiúsculas */
  font-variant-numeric: lining-nums;
}
.features-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.0rem;
  color: var(----white);
  line-height: 1.6;     /* espaço entre as linhas de texto */
  /* opcional: se quiser ainda mais separação vertical */
  margin-bottom: 0.75rem;
}
.feature-icon {
  font-size: 1.75rem;
  color: var(--gold);
  margin-top: 0.2em;    /* empurra levemente o ícone para alinhar com o texto */
}
/* Texto passa a ocupar a segunda coluna e fica justificado */
.feature-text {
  display: block;           /* obrigatório para text-align */
  text-align: justify;
  line-height: 1.6;
  color: var(--text);
}
/* Frase de encerramento */
.universal {
  font-family: 'Playfair Display', serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin: 0.5rem 0 1rem;
  letter-spacing: 0.03em;
}

/* Missão / Siga-nos */
.mission {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: .90rem;
  margin-top: 1rem;
  color: var(--text);
}
/* ======= Cards responsivos ======= */
/* Largura herda do grid/flex, a altura respeita a proporção 3:4 */
.card {
  width: 100%;                /* ocupa 100% do espaço da coluna */
  aspect-ratio: 3 / 4;        /* proporção largura:altura */
  background-color: #2b2b2b;  /* fallback */
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-width: 330px;      /* opcional: evita ficar muito largo em telas grandes */
  margin: 1rem auto;     /* centraliza e dá espaço acima/abaixo */
}

/* Imagem de fundo personalizada para cada card */
.card.recados {
  background:
    url('../assets/card-recados.svg') center/cover no-repeat,
    #2b2b2b;    /* fallback se não carregar a imagem */
}

.card.voxbible {
  background:
    url('../assets/card-voxbible.svg') center/cover no-repeat,
    #2b2b2b;
}

/* Glow dourado + leve zoom no hover */
.card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(226, 180, 90, 0.8); /* dourado suave */
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 16px rgba(226,180,90,0.5); }
  to { box-shadow: 0 0 32px rgba(226,180,90,0.8); }
}

/* Overlay escuro suave */
.card::before {
  content: '';
  background: inherit;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
}

.card.recados::before {
  background-image: url('../assets/card-recados.svg');
}

.card.voxbible::before {
  background-image: url('../assets/card-voxbible2.svg');
}

/* Garante que todo o conteúdo do card fique acima do overlay */
.card > * {
  position: relative;
  z-index: 1;
}

.card-info {
  margin-top: 1rem;
  text-align: justify;
  max-width: 330px;   /* casa com a largura do card */
}
.card-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: .5rem;
  text-align: center;
}
.card-info p {
  font-family: 'Playfair Display', serif;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.card.voxbible {
  filter: brightness(1.3);
}

/* Card desativado */
.card.voxbible.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
.card.voxbible.disabled .label {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1rem;
  background: grey;
  border-radius: .5rem;
  color: #fff;
  font-weight: bold;
}

/* Footer de ícones */
.social {
  margin-top: 1.5rem;     /* aproxima footer dos cards */
  text-align: center;
  padding: 0 0 5rem;              /* remove padding extra */
}
.social .icons {
  display: flex;           /* ativa o flexbox */
  flex-wrap: nowrap;       /* NÃO deixa quebrar em múltiplas linhas */
  justify-content: center; /* centraliza os itens */
  gap: 1rem;               /* espaçamento constante entre eles */
  overflow: visible;        /* se não couber na tela, permite scroll horizontal */
  padding: 0 1rem;         /* folga nas laterais em mobile */
}
.social .icons a {
  flex: 0 0 auto;          /* garante que cada link mantenha seu tamanho */
}
.social .icons img {
  width: 54px;
  height: 54px;
  transition: transform .2s;
}

.social .icons img:hover {
  transform: scale(1.2);
}

/* Ajuste no footer: texto centralizado dentro de limites iguais ao resto */
.footer-contents,
.social .contents {
  max-width: 800px;      /* mesma largura máxima das outras seções */
  margin: 0 auto;        /* centraliza horizontalmente */
  padding: 0 1rem;       /* garante 1rem de folga nas laterais em mobile */
  text-align: center;    /* opcional, mas funciona bem para esse texto */
}

/* Se quiser só um pouco de espaçamento vertical extra */
.social .contents {
  margin-top: 1rem;
}

/* todo o site “real” fica aqui dentro e acima das partículas */
.content {
  position: relative; /* obrigatório */
  overflow: hidden; /* adicione isso se as partículas saírem das bordas */
  padding: 0 2rem;  /* dá margem interna de 1rem dos lados, em qualquer tela */
}

.sparkle {
  position: absolute;
  bottom: 0; /* garante que saiam do fundo */
  background: #e2b45a;
  border-radius: 50%;
  animation: rise 4s linear forwards;
  pointer-events: none;
  opacity: 0.8;
  z-index: 0;
}

@keyframes rise {
  to {
    transform: translateY(-200px);
    opacity: 0;
  }
}

/* keyframes que faz subir e desvanecer */
@keyframes sparkle-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-25vh) scale(0.3);
  }
}

/* Responsividade */
/* Em telas muito largas, se quiser limitar a largura máxima do card: */
@media (min-width: 1200px) {
  .card {
    max-width: 330px;         /* encaixa no seu design original */
  }
}

/* abaixo de 700px, vira 1×1 */
@media (max-width: 700px) {
  .products {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 0 1rem;
  }
  .subtitle {
    font-size: 1.8rem;   /* ou o valor que melhor caiba sem quebrar */
  }
}

@media (max-width: 850px) {
  /* Remove o padding da esquerda/direita no UL */
  .features-list {
    padding-left: 0;
    padding-right: 0;
    /* aumenta o gap só na vertical (linhas) */
    row-gap: 1.5rem;
    /* mantém ou ajusta o gap horizontal se quiser */
    column-gap: 1rem;
  }

  /* Garante mais espaço abaixo de cada <li> */
  .features-list li {
    margin-bottom: 1.5rem;
  }
}