/* Boton flotante */
        .contact-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #1b90b3;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 100;
        }
            h1{
                background-color: aqua;
            }
            h2 {
            background-color: aquamarine;
            color: black;
        }
            h3{
                background-color: rgb(10, 109, 76);
            }
            h1, h2, h3 {
            margin: 0;
            text-align: center;
            }

            .boton-azul {
            background-color: blue;
        }

        .boton-azul:hover {
            background-color: darkblue;
        }

        .boton-verde {
            background-color: green;
        }
        .boton-azul, .boton-verde  , .boton1 , .boton2 , .boton3 , .boton4 , .boton5 , .boton6{
            display: inline-block;
            padding: 10px 20px;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
        }
                /* Footer styles */
                .footer-section {
            background-color: black;
            color: rgb(255, 255, 255);
            padding: 50px;
            text-align: center;
        }

        .content {
            padding: 20px;
        }
        /* Animaciones en general */
        h2 , h3 {
  animation-duration: 1.3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}                  
        #IMAA1{
        animation-duration: 2.2s;
        animation-name: slide;
     }
     @keyframes slide{
        from{
            margin-top: 100%;
            width: 300%;
        }
        to{
            margin-top: 0%;
            width: 100%;
        }
     }
     #IMAA2{
        animation-duration: 3s;
        animation-name: slide;
     }
     @keyframes slide{
        from{
            margin-top: 100%;
            width: 300%;
        }
        to{
            margin-top: 0%;
            width: 100%;
        }
     }
     #IMAA3{
        animation-duration: 3s;
        animation-name: slide;
     }
     @keyframes slide{
        from{
            margin-top: 100%;
            width: 300%;
        }
        to{
            margin-top: 0%;
            width: 100%;
        }
     }
     #IMAA4{
        animation-duration: 3s;
        animation-name: slide;
     }
     @keyframes slide{
        from{
            margin-top: 100%;
            width: 300%;
        }
        to{
            margin-top: 0%;
            width: 100%;
        }
     }
     
/* Ocultar animaciones en pantallas pequeñas */
@media (max-width: 768px) {
    .imagen-izquierda,
    .imagen-derecha {
        animation: none;
        display: none;
        width: 0;
        height: 0;
    }
}

#encabezado {
    width: 100%;
    height: auto;
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .contenido {
            width: 100%;
            max-width: 1200px; /* Ancho máximo opcional */
            margin: 0 auto; /* Centra el contenido si tiene un ancho máximo */
            padding: 20px; /* Espaciado interno */
        }
        /*Evitamos desbordamiento por parte de losa contenedores principales*/
main{
    width: 100%;
    max-width: 100vw;/*Aseguramos que no sobrepasen la pantalla*/
    overflow-x: hidden;/*Evitamos los desbordamientos*/
}