h1 {
    background-color: aqua;
    }
    /* 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 */
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%;
}
}
.imagen-izquierda {
    float: right; /* Para que la imagen flote a la izquierda */
    margin-left: 10px; /* Espacio a la derecha de la imagen */
    height: 250px;
    width: 250px;
    display: block;
}
.imagen-derecha {
    float: left; /* Para que la imagen flote a la izquierda */
    margin-left: 10px; /* Espacio a la derecha de la imagen */
    height: 250px;
    width: 250px;
    display: block;
}
/* 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*/
}