/* Estilo general */
/* INICIO ENCABEZADO */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: linear-gradient(to bottom, hsla(182, 100%, 80%, 0.1), #eeee);
    color: #333;
    font-size: 1rem; /* 1rem = 16px por defecto */
}

header {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.5), transparent);
    padding: 1.25rem; /* 1.25rem = 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

/* Asegurarse de que el enlace .logo no tenga borde ni subrayado */
.logo {
    position: absolute;  /* Coloca el logo de forma absoluta para que no afecte al flujo del contenido */
    top: 1%;  /* Ajusta la distancia desde la parte superior */
    left: 10%;  /* Ajusta la distancia desde la parte izquierda */
    padding: 0rem;  /* Elimina cualquier padding que pueda interferir */

}

/* Asegurarse de que la imagen no tenga borde ni contorno */
.logo img {
    width: 15%;  /* Cambia el tamaño de la imagen del logo */
    height: auto;  /* Mantiene la proporción original de la imagen */
    display: block;  /* Elimina el espacio en blanco debajo de la imagen */
    max-width: 15%;  /* Asegura que la imagen no se desborde si el contenedor cambia de tamaño */
    border: none;  /* Elimina cualquier borde alrededor de la imagen */
    outline: none;  /* Elimina cualquier contorno alrededor de la imagen */
    transition: transform 1s ease;  /* Transición suave para la transformación */
}

/* Efecto de hover para agrandar el logo y moverlo hacia abajo y la derecha */
.logo:hover img {
    transform: scale(1.2) translate(1.5rem, 1.5rem); /* Escala la imagen y la mueve */
}

a.logo {
    position: absolute;
    top: 2rem;
    right: 3rem;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
    z-index: 10;
    pointer-events: none; /* El contenedor no recibe eventos */
}

a.logo img {
    width: 15%;  /* La imagen ocupa un 15% del ancho de la pantalla */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
    object-fit: contain; /* Mantiene la imagen dentro del contenedor sin recortes */
    border: none;
    outline: none;
    transition: transform 0.5s ease;
    pointer-events: auto; /* Solo la imagen es interactiva */
}

/* Efecto hover solo en la imagen */
a.logo img:hover {
    transform: scale(1.2) translate(0.5rem, 0.5rem);
}


.menu-container {
    margin-left: 10rem; /* Ajusta para dejar espacio para el logo */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-120%, -50%);
    width: 15rem;
}

h3 {
    font-size: 2.2rem;
    justify-self: center;
    padding: 4rem 2rem;
}



/* Contenido principal */
.main-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 1.25rem; /* 3.75rem = 60px, 1.875rem = 30px */
    background-color: #f9f9f9;
    box-shadow: 0px 0.75rem 1.5rem rgba(0, 0, 0, 0.12); /* 0.75rem = 12px, 1.5rem = 24px */
    margin: 0 auto;
    max-width: 75rem; /* 75rem = 1200px */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0.9375rem; /* 0.9375rem = 15px */
}


.header {
    position: relative; /* Habilita posicionamiento absoluto dentro del contenedor */
    text-align: center;
    height: 20rem; /* Ajusta la altura según el tamaño de la imagen */
    background-color: transparent; /* Fondo opcional */
}

.header p {
    position: absolute;
    top: 20%; 
    left: 50%;
    transform: translateX(-50%); /* Solo en eje X para centrar horizontalmente */
    width: 55%; /* Ocupa todo el ancho del contenedor */
    text-align: center; /* Centra el texto dentro del párrafo */
    color: rgb(0, 0, 0);
    z-index: 1;
    margin-top: 6rem;
    padding: 2rem;
    background-color: transparent;
}


.header-image {
    position: absolute; /* Posiciona la imagen en el fondo */
    top: -25%;
    left: 0;
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Asegura que la imagen ocupe todo el alto del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra todo el área sin distorsionarse */
    z-index: -1; /* Coloca la imagen detrás del texto */
}



.main-content {
    margin-top: -rem;
    margin-bottom: 5%;
}





/* Pie de página */
footer {
    background-color: #078f8f;
    color: white;
    text-align: center;
    padding: 1.875rem 1.25rem; /* 1.875rem = 30px, 1.25rem = 20px */
    position: bottom;
    width: 100%;
    margin: 0;  /* Elimina margen en todas las direcciones */
    margin-bottom: -15%;  /* Asegura que no haya margen en la parte inferior */
}


footer .footer-links {
    margin-top: 1rem; /* 0.9375rem = 15px */
}

footer .footer-links a {
    color: white;
    margin: 0 1rem; /* 0.9375rem = 15px */
    font-size: 1rem; /* 1rem = 16px */
    text-decoration: none;
}

footer .footer-links a:hover {
    color: #a8dadc;
}

footer h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem; /* 1rem = 16px por defecto */
    color: #f9f9f9;
}

footer a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Hereda el color del texto o de su contenedor */
}

footer a:hover {
    text-decoration: none; /* Asegura que no aparezca subrayado cuando el enlace se selecciona */
}

.contact-icons a img {
    width: 4.2rem;  /* Ajusta el tamaño de las imágenes */
    margin: 0.5rem;
    transition: transform 0.3s ease;
}

.contact-icons a img:hover {
    transform: scale(1.3);  /* Efecto al pasar el ratón */
}


/* Breakpoint para tablets en vertical y móviles grandes (hasta 768px / 48rem) */
@media (max-width: 48rem) {


    h1 {
        width: 80%;
    }

    p {
        width: 100%;
    }

    .header-image {
        top: -30%;
    }

    .menu-button { 
        width: 15%;
    }

    .logo {
        margin-top: 2rem;
        margin-left: 2rem;
        text-align: left; /* Alinea el logo a la izquierda */
    }

    .logo img {
        width: 15%; /* Tamaño más pequeño para móviles */
        max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
        height: auto; /* Mantiene la proporción de la imagen */
    }

    .menu-container {
        position: static;
        transform: none;
        margin: 0 auto;
    }

    .menu-button {
        font-size: 100%;
    }

    .menu-content {
        position: static;
        width: 90%;
        box-shadow: none;
    }

    .menu-content a {
        text-align: center;
        padding: 0.75rem;
    }
}

/* Breakpoint para móviles (hasta 600px / 37.5rem) */
@media (max-width: 37.5rem) {

    h3 {
        width: 80%;
    }

    p {
        font-size: 1.5rem;
    }

    .header-image {
        top: -30%;
    }


    .logo {
        margin-top: 2rem;
        margin-left: 2rem;
        text-align: left; /* Alinea el logo a la izquierda */
    }

    .logo img {
        width: 15%; /* Tamaño más pequeño para móviles */
        max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
        height: auto; /* Mantiene la proporción de la imagen */
    }

    .menu-container {
        position: static;
        transform: none;
        margin: 0 auto;
    }

    .menu-button {
        font-size: 1.2rem;
    }

    .menu-content {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    .menu-content a {
        text-align: center;
        padding: 0.75rem;
    }
}

/* Otro bloque para móviles (hasta 600px / 37.5rem) */
@media (max-width: 37.5rem) {
    header {
        flex-direction: column;
        align-items: flex-start; /* Alinea todo a la izquierda */
        padding: 0rem;
    }

    h3 {
        width: 95%;
        font-size: 2rem;
        margin: 2rem;
    }

    p {
        font-size: 0.8rem;
        margin: 0;
    }

    .header-image {
        top: -30%;
    }

    .menu-button { 
        width: 90%;
    }

    .logo {
        margin-top: 2rem;
        margin-left: 2rem;
    }

    .logo img {
        width: 15%; /* Tamaño más pequeño para móviles */
        max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
    
    }

    .menu-container {
        position: static;
        transform: none;
        margin: 0 auto;
    }


    .menu-content {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    .menu-content a {
        text-align: center;
        padding: 0.75rem;
    }
}