body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    margin-top: 2%;
    margin-left: 20%;
    margin-right: 20%;
}

header {
    grid-row: 1;
    position: relative;
    text-align: center;
}

.header-image {
    width: 100%;
    height: 323px;
    object-fit: cover;
    display: block;
}

.header-title {
    position: absolute; /* Posicionamiento absoluto respecto al header */
    bottom: 20px; /* Alineado en la parte inferior con margen */
    left: 0;
    right: 0;
    color: white; /* Color blanco */
    font-size: 3rem; /* Tamaño grande (ajusta según necesidad) */
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 5); /* Sombra para mejor legibilidad */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0;
    text-align: center;    /* Centrado horizontal */
    font-weight: bold;     /* Opcional: negrita para mejor legibilidad */
}

.hamburger {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
}

.navbar {
    grid-row: 2;
    background-color: #c7a17a;
    padding: 10px;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.nav-links li a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    transition: color 0.3s ease; /* Añade transición suave */
}

.nav-links li a:hover {
    color: #ffffff;
}

.active-page {
    color: #ffffff; /* Cambia el color del texto */
    font-weight: bold; /* Opcional: Añade negrita para resaltar */
    font-size: medium;
    cursor: default; /* Cambia el cursor a default */
}

main {
    grid-row: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
}

table td {
    padding: 15px;
    text-align: center;
}

.td-title {
    font-weight: bold;
}

.p-descrip {
    font-size: smaller;
    font-weight: normal;
    font-style: italic;
    margin: 0px;
}

/* Colores alternados para las filas */
table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Color para filas impares */
}

table tbody tr:nth-child(even) {
    background-color: #e0e0e0; /* Color para filas pares */
}

.info {
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-image: url("../imag/footer.jpg");
    background-size: cover;
    background-position: center;
    padding: 20px 20px 0;
    color: white;
    position: relative;
}

/* Oculta la imagen de desktop por defecto */
.desktop-only {
    display: none;
}

/* Muestra la imagen de mobile por defecto */
.mobile-only {
    display: block;
}

.info-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Alinea los links de info a la izquierda */
.info-links {
    text-align: left; /* Alinea el texto a la izquierda */
}

.info-links ul li {
    margin-bottom: 15px; /* Añade un espacio de 15px entre los elementos de la lista */
}

.info-links ul li a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    transition: color 0.3s ease; /* Añade transición suave */
}

.info-links li a:hover {
    color: #fac112;
}

.info-contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: black;
    text-align: right; /* Justifica el texto a la derecha */    
}

.info-contact .logo {
    height: 130px;
    margin-right: 130px;
    padding-bottom: 10px;
}

.footer {
    grid-row: 5;
    background-color: #c7a17a;
    color: rgb(0, 0, 0);
    font-size: smaller;
    text-align: center;
    height: 30px;
    padding: 0px;
    margin-bottom: 15px;
    display: flex; /* Activa Flexbox */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}

/* Estilos para desktop */
@media (min-width: 769px) {
    .desktop-only {
        display: block; /* Muestra la imagen de desktop */
        margin-bottom: 35px; /* Margen inferior de 35px */
    }

    .mobile-only {
        display: none; /* Oculta la imagen de mobile */
    }

    /* Ajusta la posición del mobile-icon en desktop */
    .mobile-icon {
        position: absolute;
        top: 20px; /* Ajusta la posición vertical */
        right: 20px; /* Ajusta la posición horizontal */
        width: 100px; /* Ajusta el tamaño */
        height: auto; /* Mantiene la proporción */
    }    
}

/* Estilos para tablet */
@media (max-width: 768px) {
    .container {
        margin-left: 10%; /* Menos margen izquierdo */
        margin-right: 10%; /* Menos margen derecho */
    }

    .nav-links {
        flex-direction: row; /* Navbar horizontal */
        font-size: 14px; /* Fuente más pequeña */
    }

    .nav-links li a {
        color: rgb(0, 0, 0); /* Color blanco para los enlaces */
    }

    .nav-links li a:hover {
        color: rgb(255, 255, 255); /* Efecto hover en color negro */
    }

    .info {
        grid-template-columns: 1fr;
        position: relative;
    }

    .info-contact {
        justify-content: flex-end;
        text-align: right;
        font-size: 16px; /* Texto un poco más grande */
    }

    .info-links ul li {
        margin-bottom: 10px; /* Más espacio entre los links */
    }

    /* Elimina el margin-bottom del último <li> */
    .info-links ul li:last-child {
        margin-bottom: 0;
        padding: 0;
    }

    .mobile-icon {
        display: block;
        position: absolute;
        top: 20px; /* Ajusta la posición vertical */
        right: 20px; /* Ajusta la posición horizontal */
        width: 100px;
        height: auto;
    }

    .info-contact .logo {
        width: 90px;
        height: auto;
    }
}

/* Estilos para mobile */
@media (max-width: 480px) {
    .container {
        margin-top: 0px;
        margin-left: 0;
        margin-right: 0;
        width: 100%; /* Ocupa todo el ancho */
    }

    .hamburger {
        display: block;
    }

    .header {
        height: 150px;
        position: relative;
    }

    .header-image {
        height: 150px;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: center;
        background-color: #c7a17a;
        position: absolute;
        top: 150px;
        right: 0;
        width: 100%;
        z-index: 999;
        padding: 20px 0;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin-bottom: 20px; /* Ajusta este valor según el espacio deseado */
    }

    .nav-links li a {
        color: rgb(0, 0, 0); /* Color blanco para los enlaces en mobile */
    }

    .nav-links li a:hover {
        color: #ffffff; /* Efecto hover */
    }

    .info {
        grid-template-columns: 1fr;
        position: relative;
    }

    

    .info-links {
        font-size: small;
    }

    .info-links li {
        margin-bottom: 10px;
    }

    .info-contact .logo {
        width: 70px;
        height: 80px;         
    }

    .info-contact {
        align-items: start;
        justify-content: flex-end;
        text-align: right;
        margin-top: 5px;
        font-size: small;
        width: 400px;
    }

    .mobile-icon {
        display: block;
        position: absolute;
        top: 20px;
        right: 45px;
        width: 80px;
        height: auto;
    }

    .footer p {
        margin: 0px;
        padding: 5px 0px 5px 0px;
    }
}