h2 {
  text-align: center;
  font-size: 55px;
  font-family: 'fontjacy2', sans-serif;
}

h3 {
  font-family: 'fontjacy2', sans-serif;
  font-size: 22px;
}

p {
  font-family: 'Roboto', sans-serif;
}

body {
  max-width: 3000px;
  margin: 0 auto;
}

.titulo-cartao{
  margin-top: 7vw;
}

@media screen and (max-width: 1280px) {
  .titulo-cartao{
  margin-top: 17vw;
}
.cartao-container{
 margin-top: 6vw;
}

h2{
  font-size: 40px;
}

.botao.instagram{
   padding: 10px 15px;
   width: 80%;
   font-size: 15px;

}
}

.videodesk{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1%;
  border-radius: 18px;
  width: 18%;
  max-width: 40%;
  height: 30vw;
  margin: auto;
  margin-top: 2%;
  
}

.video-mobile{
  display: none;
  overflow: hidden;
}

header {
  color: white;
  text-align: center;

}

.servico {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 900px;
  margin: auto;
  min-width: 300px;
  min-height: 300px;
  padding: 40px;
  border: 3px solid #800008;
  border-radius: 8px;
  background-color: rgba(255, 200, 173, 0.7);
  text-align: center;
  font-size: 18px;
  box-sizing: border-box;
}


.cartao-container {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 30px; /* Espaço entre a foto de perfil e os contatos */
    font-family: sans-serif;
    width: 1000px;
    max-width: 1500px; /* Largura máxima do cartão */
    margin: auto ;
    margin-top: 5vw;
   
}

.perfil {
    flex-shrink: 0; /* Impede que a imagem encolha */
}

/* Estilo para a imagem de perfil */
.imagem-perfil {
    width: 250px;
    height: 250px;
    max-width: 300px;
    max-height: 300px;
    border-radius: 50%; 
    object-fit: cover;
    border: 3px solid #976e6e;
}

/* Contêiner para os blocos de contato (agrupa WhatsApp e Instagram) */
.contatos {
    display: flex;
    gap: 20px; /* Espaçamento entre o bloco do WhatsApp e do Instagram */
    width: 100%;
}

/* Estilo para cada item de contato (QR Code + Botão) */
.contato-item {
    display: flex;
    flex-direction: column; /* Organiza QR Code e botão um abaixo do outro */
    align-items: center; /* Centraliza os itens */
    text-align: center;
    flex-grow: 1; /* Faz com que ambos os itens ocupem o mesmo espaço */
    gap: 15px; /* Espaço entre o QR Code e o botão */
}

/* Estilo para as imagens dos QR Codes */
.qrcode-img {
    width: 270px;
    height: 270px;
    max-width: 300px;
    max-height: 300px;
    border: 1px solid #c4b8b8;
    border-radius: 8px;
}

/* Estilo base para os botões */
.botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Faz o botão ocupar a largura do contêiner */
    max-width: 250px; /* Largura máxima para o botão */
    border: none;
    border-radius: 20px; /* Botões bem arredondados */
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
    gap: 10px; /* Espaço entre o ícone e o texto */
}

.botao:hover {
    transform: scale(1.4);
}

/* Cor específica para o botão do WhatsApp */
.botao.whatsapp {
    padding: 12px 15px;
    background-color: #25D366;
}

/* Cor específica para o botão do Instagram */
.botao.instagram {
  font-size: 14px;
    padding: 15px 20px;
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

/* Ícone dentro do botão */
.botao .fab {
    font-size: 20px;
}

.botao:hover {
  transform: scale(1.4);
}

@media screen and (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    /* --- 2. REORDENANDO OS ELEMENTOS PRINCIPAIS --- */
    .titulo-cartao { order: 1; }
    .video-mobile   { order: 2; }
    .cartao-container { order: 3; }
    .videodesk      { order: 4; }

    .videodesk {
        display: none;
    }
    .video-mobile {
        display:flex; 
        width: 60%;
        max-width: 380px; 
        height: auto;
        border-radius: 6%;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        margin-top: 25px;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
    
    /* --- 4. AJUSTES NO TÍTULO E FONTES --- */
    h2, .titulo-cartao {
        font-size: 28px;
        text-align: center;
        margin-top: 5vh;
        line-height: 1.3;
    }
    .cartao-container {
        flex-direction: column; 
        width: 90%;
        max-width: 450px;
        gap: 25px;
        padding: 25px;
        margin-top: 35px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }

    .imagem-perfil {
        width: 150px;
        height: 150px;
    }
    
    .qrcode-img {
        display: none;
    }

    .contatos {
        flex-direction: column; /* Botões um em cima do outro */
        align-items: center;
        width: 100%;
        gap: 15px;
    }
    
    .contato-item {
        width: 100%;
        gap: 0; /* Remove o gap, já que o QR Code sumiu */
    }

    .botao {
        width: 80%; 
        max-width: 300px; 
        padding: 12px; 
        font-size: 16px;
        margin: 0 auto; 
        transform: none; 
    }
    .botao:hover {
      transform: scale(1.03);
    }
    
    .botao.instagram {
       font-size: 16px; 
       padding: 12px; 
       height: 45px;
    }

    .servico {
    width: 90%; 
    padding: 20px; 
    font-size: 16px; 
    min-width: auto; 
    min-height: auto; 
    margin-top: 20px; 
    margin-bottom: 20px;
  }
}