/* Eliminar márgenes que puedan generar scroll */
   html,
   body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
   }

   /* Estilo del iframe */
   iframe {
     display: block;
     width: 100%;
     border: none;
     max-width: 100%;
   }

   h1,
   h2 {
     font-weight: 300;
   }

   .BannerPortada {
     background-image: url("https://i.imgur.com/mTJ0Hcj.jpeg");
     background-size: cover;
     background-attachment: fixed;

   }

   .separadorNegro {
     background-color: #8e8b82;
     height: 10px;
     width: 100%;
   }

   .card-img-top {
     padding: 20px;
     height: 100px;
   }

   .card-body {
     text-align: center;
   }

   .card {
     border: none;
   }

   .imgCaracteristicas {
     object-fit: cover;
   }

   .TituloSlogan {
     font-size: 3em;
     font-family: "Playfair Display", serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
   }

   .subtituloSlogan {
     font-family: "DM Sans", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;

   }

   .fondoTransparente {
     background-color: rgba(0, 0, 0, 0.2);
   }

   .imagenServicios {
     height: 350px;
   }

   .btnCustom {
     font-family: "DM Sans", sans-serif;
     background-color: #6E6B66;
     color: white;
     border: none;
     padding: 0.6em 1.4em;
     font-size: 1em;
     border-radius: 6px;
     transition: background-color 0.3s ease;
   }

   .btnCustom:hover {
     background-color: #57544f;
     cursor: pointer;
   }

   .btnClaro {
     background-color: #D1CEC7;
     color: #333;
   }

   .btnClaro:hover {
     background-color: #bdbab4;
   }