/* ==========================================================
RESET
========================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #E9EDEA;
  color-scheme: light only;
}

body {
  display: flex;
  justify-content: center;
  padding: 18px 0 40px;
}

/* ==========================================================
CARTÃO / CONTAINER
========================================================== */
.phone {
  width: 100%;
  max-width: 390px;
  min-height: 780px;
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  background: #F6F7F5;
  box-shadow: 0 30px 60px rgba(20, 40, 32, 0.25);
}

/* ==========================================================
CABEÇALHO (tom verde-ambiental, referência ao logo)
========================================================== */
.header {
  position: relative;
  background: linear-gradient(155deg, #234A3A 0%, #16352A 100%);
  border-radius: 0 0 46px 46px;
  padding: 22px 20px 34px;
  overflow: hidden;
}

/* grade de pontos decorativa */
.dots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(6, 8px);
  grid-gap: 10px;
}

.dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: block;
}

.dots.d1 { top: 18px; right: 26px; }
.dots.d2 { bottom: 18px; left: 22px; }

/* linha curva fina decorativa */
.header svg.curve {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

/* ==========================================================
CONTEÚDO
========================================================== */
.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.body {
  padding: 0 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #26332E;
}

/* Barra superior: QR Code / Compartilhar */
.topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 26px;
}

.pill-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pill-btn svg {
  width: 14px;
  height: 14px;
}

/* Logo — exibida diretamente, sem moldura, fundo transparente */
.logo-mark {
  width: 190px;
  margin-top: -18px;
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
}

.logo-mark img {
  width: 100%;
  display: block;
}

/* Nome */
h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.05;
  text-align: center;
  color: #16211C;
}

.name-accent {
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2D7963, #4CBD38);
  margin: 12px auto 0;
}

/* Botões principais: Salvar contato / Ligar */
.cta-row {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
}

.cta.save {
  background: linear-gradient(90deg, #1F5C46, #2D7963);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cta.call {
  background: linear-gradient(90deg, #4CBD38, #6FE05B);
  color: #0E2A21;
}

.cta svg {
  width: 16px;
  height: 16px;
}

/* Ícones rápidos: site / endereço / e-mail */
.icon-row {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.icon-row a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #EAF3EC;
  border: 1px solid #DCE7E0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-row svg {
  width: 20px;
  height: 20px;
}

/* Redes sociais */
.social {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
}

.social svg {
  width: 19px;
  height: 19px;
}

.social .wa { background: linear-gradient(90deg, #2D7963, #3FA05A); }
.social .ig { background: linear-gradient(90deg, #3E8F63, #4CBD38); }
.social .fb { background: linear-gradient(90deg, #1F5C46, #2D7963); }

/* Rodapé */
footer {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #7C8C84;
  text-transform: uppercase;
  text-align: center;
}

/* ==========================================================
MODAL DO QR CODE
========================================================== */
.qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 30, 24, 0.55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 24px;
}

.qr-overlay.open {
  display: flex;
}

.qr-box {
  background: #fff;
  border-radius: 28px;
  padding: 28px 26px 24px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  position: relative;
}

.qr-dismiss {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F1F4F2;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.qr-dismiss svg {
  width: 14px;
  height: 14px;
}

.qr-box h2 {
  font-size: 17px;
  font-weight: 700;
  color: #1E2B25;
  margin-bottom: 4px;
}

.qr-box p {
  font-size: 12.5px;
  color: #6B7772;
  margin-bottom: 18px;
}

.qr-code-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 2px solid #EAF3EC;
  border-radius: 18px;
  margin: 0 auto 16px;
}

.qr-code-holder svg {
  width: 100%;
  height: auto;
  max-width: 220px;
}

.qr-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qr-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  border: none;
  cursor: pointer;
}

.qr-actions button svg {
  width: 15px;
  height: 15px;
}

.qr-share {
  background: linear-gradient(90deg, #4CBD38, #6FE05B);
  color: #0E2A21;
}

.qr-access {
  background: linear-gradient(90deg, #1F5C46, #2D7963);
  color: #fff;
}

.qr-warning {
  font-size: 12px;
  color: #B25B3B;
  line-height: 1.4;
}