body {
   font-family: Arial, sans-serif;
 }


 #resultado {
   background-color: red;
   color: white;
   font-weight: bold;
 }

 #resultado.ok {
   background-color: green;
 }

 /* Barra de navegación con logos */
 .navbar {
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #828281;
   color: white;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 30px;
   z-index: 1000;
 }

 .navbar img {
   height: 50px;
   max-width: 100%;
   object-fit: contain;
 }

 /* Imagen principal centrada y con separación */
 .main-image {
   max-width: 60%;
   height: auto;
   margin-bottom: 10px;
 }

 /* Sección con espacio para no ser tapada por navbar */
 .hero-section {
   padding-top: 140px;
   /* espacio suficiente para navbar fija */
   padding-bottom: 20px;
   text-align: center;
 }

 .hero-section h1 {
   margin-bottom: 30px;
   font-weight: bold;
 }

 @media (max-width: 576px) {
   .main-image {
     max-width: 90%;
   }

   .navbar {
     padding: 10px 15px;
   }

   .hero-section {
     padding-top: 120px;
     padding-bottom: 15px;
   }
 }

 /* Botón cromado verde */
 .btn-cromado3 {
   padding: 12px 24px;
   font-size: 1.4rem;
   font-weight: bold;
   border: none;
   border-radius: 6px;
   background: linear-gradient(135deg, rgb(23, 114, 0), #ffffff, rgb(0, 146, 0));
   background-size: 200% 200%;
   color: #000;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   transition: all 0.4s ease-in-out;
   cursor: pointer;
   animation: moveGradient 5s ease infinite;

 }

 .btn-cromado3:hover {
   background-position: right center;
   color: #000;
   box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
 }

 /* Botón cromado azul para botones adicionales */
 .btn-cromado {
   padding: 12px 24px;
   font-size: 0.8rem;
   font-weight: bold;
   border: none;
   border-radius: 6px;
   background: linear-gradient(135deg, #004b9b, #7dc5ff, rgb(0, 51, 80));
   background-size: 200% 200%;
   color: #000000;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   transition: all 0.4s ease-in-out;
   cursor: pointer;
 }

 .btn-cromado:hover {
   background-position: right center;
   color: #000000;
   box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
 }

 @keyframes moveGradient {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }


 @keyframes pulse {

   0%,
   100% {
     transform: scale(1);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   }

   50% {
     transform: scale(1.05);
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
   }
 }