body {
  margin: 0;
  background: #ffffff;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: #4b3f2f;
}

/*======================================== HERO  ================================================================*/
/*.hero {
  background: url('https://images.unsplash.com/photo-1504198266285-1659872e6590?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;background-position: center;height: 60vh;display: flex;align-items: center;
  flex-direction: column;justify-content: center;position: relative;text-align: center;color: white;} */
/*.hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.45);}  
.hero h1 {font-family: 'Great Vibes', cursive;font-size: 4.5rem;z-index: 10;}
.hero p {font-size: 1.5rem;z-index: 10;}  */
.btn {display: inline-block;margin-top: 20px;padding: 12px 24px;background: #916437b6;color: white;
  text-decoration: none;font-size: 1.2rem;z-index: 10;transition: 0.3s; border-radius: 45px;}
.btn:hover {background: #8a6a47;}
/* INFO */
.info, .confirmacao, .presentes {max-width: 900px;margin: 60px auto;padding: 10px 20px;text-align: center;}
h2 {color: #6b4f33;}
/* FORM */
#formPresenca input,
#formPresenca select {width: 90%;padding: 12px;margin: 10px 0;border-radius: 6px;border: 1px solid #c7b8aa;font-size: 1.1rem;}
#formPresenca button {width: 50%;}


/* =========================
   HERO
========================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 85vh;                 /* desktop mais baixo */
  background-image: url("img/moto.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  color: #fff;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 1, 0, 0.473);
}

.hero h1,
.hero p,
.hero .btn {
  position: relative;
  z-index: 2;
}

/* =========================
   OVERLAY (escurece imagem)
========================= */
.hero .overlay {
  position: absolute;
  inset: 0;
 
  z-index: 1;
}

/* =========================
     OVERLAY CONTEÚDO DO HERO
========================= */
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 10px;
   font-family:Verdana, Geneva, Tahoma, sans-serif
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 25px;
 font-family:Verdana, Geneva, Tahoma, sans-serif
}

.hero .btn {
  padding: 12px 28px;
  border-radius: 30px;
  background: #9c7550;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 /* hero mais alto no mobile */
@media (max-width: 768px) {
  .hero {
    min-height: 53vh;
    background-position: center;
  }

@media (max-width: 768px) {
  .hero h1 {
    font-family: 'Great Vibes', cursive !important;
    font-size: clamp(2.8rem, 9vw, 3.8rem);
    line-height: 1.15;
  }

  .hero p {
    font-family: 'Great Vibes', cursive !important;
    font-size: clamp(2.6rem, 6vw, 2.2rem);
  }
}

}










/* ===================== CARDS DE PRESENTES (MELHORADO) ===================== */
/* =========================
   LISTA DE PRESENTES                font-family: 'Great Vibes', cursive;
========================= */
.cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 32px;padding: 60px 20px;
 max-width: 1200px;margin: auto;}
.card {background: #ffffff;border-radius: 20px;overflow: hidden;box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;position: relative;text-align: center;}
/* efeito hover elegante */
.card:hover {transform: translateY(-8px);box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);}
/* imagem do card */
.card img {width: 100%;height: 220px;object-fit: cover;transition: transform 0.5s ease;}
/* zoom suave na imagem */
.card:hover img {
  transform: scale(1.08);
}
/* título */
.card h3 {font-size: 1.3rem;color: #5c4b3b;margin: 20px 16px 10px;font-weight: 600;}
/* botão presentear */
.btn-card {display: inline-block;margin: 14px auto 18px;padding: 12px 26px;border-radius: 30px;border: none;
  background: linear-gradient(135deg, #d8b07d, #b8905c);color: #fff;font-size: 0.95rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;}
/* hover do botão */
.btn-card:hover {
  background: linear-gradient(135deg, #b8905c, #9f7a47);transform: scale(1.05);}
/* status do presente */
.card .status {font-size: 0.9rem;margin-bottom: 18px;color: #4caf50;font-weight: 500;}
/* quando presente já foi escolhido */
.card.selecionado {opacity: 0.6;pointer-events: none;}
.card.selecionado::after {content: "🎁 Já escolhido";position: absolute;top: 16px;right: 16px;background: rgba(0, 0, 0, 0.75);
color: #fff;padding: 6px 14px;border-radius: 20px; font-size: 0.8rem;}
.card .descricao {font-size: 0.95rem;color: #555;margin: 8px 0;line-height: 1.4;}
.card .valor {font-size: 1.1rem;font-weight: bold;color: #b38b59; /* tom elegante (dourado suave) */
  margin-bottom: 12px;}

/* =========================
   MODAIS (CONFIRMAÇÃO + PRESENTE)
========================= */
.modal {display: none;position: fixed; z-index: 9999;inset: 0;background: rgba(0, 0, 0, 0.55);backdrop-filter: blur(4px);}
/* conteúdo central do modal */
.modal-content {background: #ffffff;width: 90%;max-width: 420px;margin: 12% auto;padding: 30px;border-radius: 20px;
text-align: center;box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);animation: modalFade 0.35s ease;}
/* botão fechar (X) */
.modal .close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 26px;
  cursor: pointer;
  color: #999;
}

.modal .close:hover {
  color: #000;
}

/* animação elegante */
@keyframes modalFade {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


.card.selecionado {
  opacity: 0.6;
  pointer-events: none;
}
.card.selecionado::after {
  content: "🎁 Presente escolhido";
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgb(0 0 0 / 86%);
  color: #fff;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
}


/* =========================
   MODAL PRESENTE
========================= */
.modal {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.65);display: flex;align-items: center;justify-content: center;z-index: 10000;}
.modal.hidden {display: none;}
.modal-content {background: #fefefe;padding: 24px 20px 28px;border-radius: 20px;max-width: 360px;
width: 90%;text-align: center;position: relative;animation: modalFadeIn 0.3s ease;}
.modal-content h2 {font-size: 1.9rem;margin-bottom: 8px;}
.modal-content p {
font-size: 1.5rem;font-weight: bold;color: #2f8f83;margin-bottom: 7px;background:#a7f9ef38;border-radius: 55px;}
.modal-content img {width: 220px;max-width: 100%;border-radius: 12px;}
/* ===================== Edita Botão X ===============================*/
.close-modal {position: absolute;top: 14px;right: 18px;font-size: 68px;font-weight: bold;color: #fff;cursor: pointer;z-index: 10001;}
.close-modal:hover {transform: scale(1.1);}
/* ============ IMPORTANTE editar a area Textarea onde cola o pix  ============
para as bordas aparecer e so remover o BORDER
*/
#pixCopiaCola{color:#6d5a43ad; border:rgb(182, 5, 5)}

/* =========================
   BOTÃO COPIAR PIX (MELHORADO)
========================= */
.btn-copy {margin-top: 18px;padding: 12px 26px;border-radius: 30px;border: none;
background: linear-gradient(135deg, #b8905c, #9f7a47);color: #fff;font-size: 0.95rem;font-weight: 600;
cursor: pointer;transition: all 0.25s ease;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.btn-copy:hover {transform: translateY(-2px);box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #9f7a47, #866338);}
.btn-copy:active {transform: scale(0.54);}
/* Feedback visual após copiar */
.btn-copy.copiado {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
}

/*texto orientativo para direcionar para o banco */
.pix-hint {
  margin-top: 19px;
  font-size: 0.75rem;
  color: #4caf50;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  text-align: center;
}

.pix-hint.show {
  opacity: 1;
  transform: translateY(0);
}


/* =========================
   CORAÇÃO CSS ANIMADO (FINAL)
========================= */
.heart-css {position: fixed;left: 50%;bottom: 35%;width: 70px;height: 70px;
background: linear-gradient(135deg, #e53935);transform: translateX(-50%) rotate(-45deg);
opacity: 0;pointer-events: none;border-radius: 10px;filter: drop-shadow(0 14px 28px rgb(7 7 7 / 87%));}

/* lobos */
.heart-css::before,
.heart-css::after {content: "";position: absolute;width: 70px;height: 70px;background: inherit;border-radius: 50%;}
.heart-css::before {top: -35px;left: 0;}
.heart-css::after {left: 35px;top: 0;}
/* AGORA ANIMANDO bottom */
.heart-css.show {animation: heartFloatUp 1.98s linear forwards;}
@keyframes heartFloatUp {
  0% {bottom: 35%;opacity: 0;}
  10% {opacity: 1;}
  80% {opacity: 1;}
  100% {bottom: 110%;opacity: 0;}
}



/* =========================
   GRID DE PRESENTES — FIX DEFINITIVO
========================= */

/* DESKTOP / TABLET */
.cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 32px;}
/* MOBILE — FORÇA 2 COLUNAS */
@media (max-width: 768px) {.cards {
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 🔥 chave da correção */
    gap: 14px;
    padding: 30px 12px;
  }

  .card img {
    height: 130px;
  }

  .card h3 {
    font-size: 0.9rem;
  }

  .btn-card {
    font-size: 0.78rem;
    padding: 8px 12px;
  }
}

/* MOBILE MUITO PEQUENO */
@media (max-width: 380px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .card img {
    height: 180px;
  }
}

/* =========================
   CONTAINER PADRÃO
========================= */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 12px 16px; /* padding mais equilibrado */
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;           /* antes estava 40px (espaço exagerado) */
  margin-top: 0;
}
.info-bloco {
  text-align: center;
  margin-bottom: 30px; /* controla o espaço entre seções */
}
.info-bloco h2 {
  margin: 16px 0 1px; /* remove espaço excessivo acima/abaixo */
}

/*---------------TEXTOS --------- */
.info-bloco p {
  margin: 0 auto 12px;
  max-width: 420px;    /* melhora leitura */
  line-height: 1.5;
}
.contato-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;           /* espaço correto entre nome e ícone */
  margin: 10px 0;
}

.whatsapp-link:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ------------- AJUSTES MOBILE----------------*/
@media (max-width: 768px) {
  .info-grid {
    gap: 16px;
  }

  .info-bloco {
    margin-bottom: 16px;
  }

  .info-bloco h2 {
    margin: 14px 0 8px;
  }
}






/* =========================
   NOSSA HISTÓRIA (GRID)
========================= */

.historia-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 🔥 2 colunas */
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

/* cards */
.historia-item {
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* centraliza o último card se ficar ímpar */
.historia-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 500px;
  justify-self: center;
}

/* título */
.historia h2 {
  text-align: center;
  margin-bottom: 10px;
  background-color: #fc9c262f;
  border-radius: 144px;
}
#prazo{font-size: 1.1rem; margin-top: 3px;}


/* MOBILE */
@media (max-width: 768px) {
  .historia-lista {
    grid-template-columns: 1fr; /* 🔥 1 coluna no mobile */
  }

  .historia-item:last-child {
    grid-column: auto;
    max-width: 100%;
  }
}


/* =========================
   INFORMAÇÕES BÁSICAS
========================= */
.info-cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;}
.info-card {background: #fff;padding: 30px;border-radius: 16px;box-shadow: 0 10px 25px rgba(0,0,0,0.08);}
.convite{background-color: rgba(0, 250, 187, 0.116);}
.convite2{background-color: rgba(50, 250, 0, 0.116);}
.convite3{background-color: rgba(117, 0, 250, 0.116);}
/* =========================
   LOCALIZAÇÃO / MAPA
========================= */
.mapa {text-align: center;}
.mapa h2 {margin-bottom: 12px;}
.mapa-desc {color: #6f5b45;margin-bottom: 25px;line-height: 1.6;}
/* card do mapa */
.mapa-card {max-width: 900px;margin: auto;border-radius: 20px;overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);background: #fff;}
/* mapa em si */
.mapa-card iframe {width: 100%;
height: 320px;border: none;
filter: saturate(0.9) contrast(0.95);}
/* mobile */
@media (max-width: 768px) {.mapa-card iframe {height: 260px;}}
/* =========================
   CONTAGEM REGRESSIVA DESKTOP
========================= */
.contador {text-align: center;}
.contador h2 {margin-bottom: 30px;}
.contador-box {display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;}
.tempo {background: #ffffff;padding: 20px 18px;min-width: 90px;border-radius: 18px;box-shadow: 0 10px 25px rgba(0,0,0,0.08);}
.tempo span {display: block;font-family: 'Playfair Display', serif;font-size: 2.2rem;color: #5c4b3b;}
.tempo small {font-size: 0.75rem;text-transform: uppercase;letter-spacing: 1px;color: #8c7a66;}
.contador-msg {margin-top: 20px;font-size: 0.95rem;color: #6f5b45;}
/* Mobile */
@media (max-width: 480px) {.tempo { min-width: 70px; padding: 14px 10px;}
.tempo span {font-size: 1.6rem;}}
/* =========================
   CONTAGEM REGRESSIVA — MOBILE 4 ITENS
========================= */
/* Desktop continua normal */
.contador-box {display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;}
/* Mobile: 4 blocos em 1 linha */
@media (max-width: 600px) {.contador-box {display: grid;grid-template-columns: repeat(4, 1fr); /* 🔥 4 em linha */
gap: 10px;max-width: 100%;padding: 0 10px;}
.tempo {padding: 10px 6px;border-radius: 14px;box-shadow: 0 6px 16px rgba(0,0,0,0.08);}
.tempo span {font-size: 1.15rem;line-height: 1.1;}
.tempo small {font-size: 0.55rem;letter-spacing: 0.6px;}}
/* Mobile muito estreito (segurança) */
@media (max-width: 360px) {
.tempo span {font-size: 1rem;}
.tempo small {font-size: 0.5rem;}}



/* =========================
 MODAL CONFIRMAÇÃO PRESENÇA
========================= */
.modal-confirmacao {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.45);display: flex;align-items: center;
justify-content: center;z-index: 9999;}
.modal-confirmacao.hidden {display: none;}
.modal-box {background: #fff;border-radius: 18px;padding: 32px 24px;max-width: 420px;width: 90%;
text-align: center;position: relative;animation: modalPop 0.35s ease;}
.modal-icon {font-size: 40px;margin-bottom: 12px;}
.modal-box p {font-size: 16px;color: #5a3d1c;line-height: 1.4;}
.btn-modal {margin-top: 20px;padding: 12px 28px;border-radius: 999px;border: none;background: #b69572;color: #fff;font-size: 15px;cursor: pointer;}
.btn-modal:hover {opacity: 0.9;}
.modal-close {position: absolute;top: 12px;right: 14px;background: none;border: none;font-size: 22px;cursor: pointer;color: #999;}

@keyframes modalPop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-box.modal-alerta {
  border-top: 4px solid #f5b301;
}

.modal-box.modal-erro {
  border-top: 4px solid #e74c3c;
}

.modal-box.modal-sucesso {
  border-top: 4px solid #c9a47c;
}

/* =========================
   FOOTER
========================= */
footer {
  margin-top: 60px;
  padding: 25px 15px;

  background: linear-gradient(
    135deg,
    #d37e1d80,
    #fdfaf6
  );

  text-align: center;
  font-size: 1.1rem;
  color: #6b4f3f;

  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Texto */
footer p {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
}


/* Efeito hover sutil */
footer:hover {
  background: linear-gradient(
    135deg,
    #f3e7db,
    #faf4ee
  );
}

/* =========================
  WHATSAPP ZAP
========================= */
.zaptitulo{
 color: #684a0a;
 font-size: 1.1rem;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}