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: none;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
            color: #fff;
            font-size: 20px;
            border: none;
            font-weight: bold;
        }
        .card {
            background-size: cover;
            background-image: url(/img/background-fumigaciones.jpeg);
    
            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),  /* Sombra suave cercana */
        0 8px 16px rgba(0, 0, 0, 0.2), /* Sombra más grande un poco más lejos */
        0 12px 24px rgba(0, 0, 0, 0.3); 
            max-width: 400px;
            text-align: center;
            height: auto;
            padding-top: 2%;
        }
        .card .logo{
            width: 205px;
            height:auto;
            padding-top: 2%;
            padding-left: 1%;
        }
        .card img {
            border-radius: 20%;
            width: 180px;
            height: 180px;
        }
        .card h1 {
            margin: 10px 0;
            font-size: 38px;
            
            color:#fff;
            font-weight: 800;
            font-size: 33px;
        }
        h2{
            color:#fff;
            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: linear-gradient(180deg, #A50A0A, #C50A0A);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            align-items: center;
            font-weight: bold;
            display: flex;
            justify-content: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Un poco de sombra para que el texto resalte */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.521); /* Sombra para darle profundidad */
  cursor: pointer;
  transition: all 0.3s ease;
       
        }
        .guardar img{
            width: 30px;
            height: auto;
        }
        .guardar:hover {
          animation: pulse 1s infinite;
         color: #C50A0A;
        }
        .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:300px) and  (max-width:768px) {
            
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(180deg, #A50A0A, #C50A0A);

            height: 100vh;
          
            overflow-x: hidden;
            box-sizing: border-box;

        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
     
        .card {
          
          
            padding-bottom: 1%;
            background-position: center bottom;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.1),  /* Sombra suave cercana */
            0 8px 16px rgba(0, 0, 0, 0.2), /* Sombra más grande un poco más lejos */
            0 12px 24px rgba(0, 0, 0, 0.3); 
            max-width: 400px;
            text-align: center;
            height: auto;
            padding-top: 15%;
      
        }
        .card .logo{
            width: 205px;
            height:auto;
            padding-top: 2%;
            padding-left: 1%;
        }
        .card img {
            border-radius: 20%;
            width: 180px;
            height: 180px;
        }
        .card h1 {
            margin: 10px 0;
            font-size: 38px;
            
            color:#fff;
            font-weight: 800;
            font-size: 33px;
        }
        h2{
            color:#fff;
            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:#0295D3; /* Color corporativo */
            color: white;
            padding: 5px 10px;
            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 */
        }
        
        
        }