body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
                height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height:auto;
            margin: 0;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* Elimina el scroll horizontal */
            box-sizing: border-box;

        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        .guardar a button{
            background-color:#007bff;
            color: #fff;
            font-size: 20px;
            border: none;
            font-weight: 600;
        }
        .card {
            background-color: #fff;
            background-image: url(/img/background-vcard.png);
            background-size: cover;
            padding-bottom: 10%;
            background-position: center bottom;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            text-align: center;
            height: auto;
        }
        .card img {
            border-radius: 20%;
            width: 180px;
            height: 180px;
        }
        .card h1 {
            margin: 10px 0;
            font-size: 38px;
            
            color:#010D57;
            font-weight: 800;
            font-size: 33px;
        }
        h2{
            color:#010D57;
            font-size: 25px;   
            
        }
   

      
        .social-links {
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .social-links a {
            margin: 0 10px;
            font-size: 20px;
            text-decoration: none;
            border-radius: 7px;
            padding: 2px;
        
          
        }
        .social-links a img{
            width: 30px;
            height: auto;
        }
      
        #qrcode {
            margin-top: 20px;
            justify-content: center;
            display: flex;
            height: auto;
      margin-bottom: 90px;
      border-radius: 2px;
  
        }
        
        .guardar{
            background-color: #007bff; /* Color corporativo */
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            align-items: center;
            display: flex;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.658);
       
        }
        .guardar img{
            width: 30px;
            height: auto;
        }
        .guardar:hover {
          animation: pulse 1s infinite;
        }
        .guardar button{
            background-color: none;
            text-align: center;
            text-decoration: none;
        }
        .qr-shadow canvas {
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.932); /* Sombra suave */
            border-radius: 2px; /* Bordes redondeados */
            margin: 0; /* Quita cualquier margen */
            padding: 0; /* Quita cualquier padding */
            display: block; /* Asegúrate de que no se generen márgenes extra en elementos inline */
        }
        .qr-shadow img {
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.863); /* Sombra suave */
            border-radius: 8px; /* Bordes redondeados */
            margin: 0; /* Quita cualquier margen */
            padding: 0; /* Quita cualquier padding */
            display: block; /* Asegúrate de que no se generen márgenes extra en elementos inline */
        }
        
        
        
        @media (min-width:401px) and  (max-width: 600px) {
                .card{
                    height: auto;
                    padding: 0;
                   margin: 0;
                    height: 100vh;
                   margin: 0;
                   padding: 20px;
                   border-radius: 10px;
                   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                   max-width: 600px;
                   text-align: center;
                   padding-bottom: 0;
          

                }
                #qrcode {
                    margin-top: 20px;
                    justify-content: center;
                    display: flex;
                    height: auto;
              margin-bottom: 0;
              border-radius: 2px;
                }
                html, body{
                    height: auto;
                    margin:0 ;
                    width: 100%;
                    height: auto;
                }
                *{
                    box-sizing: border-box;
                }
        }
        @media (min-width:300px) and  (max-width: 400px){
            .card{
                height: auto;
                padding: 0;
               margin: 0;
                    margin: 2%;
               margin: 0;
               padding: 20px;
               border-radius: 10px;
               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
               max-width: 600px;
               text-align: center;
               height: 95vh;
      

            }
        }