:root {
    --navy: #16476A;
    --teal: #3B9797;
    --marron: #BF092F;
    --azulDark: #132440;
    --blanco: white;
}

* {
    box-sizing: border-box;
}


body {
    margin: 0px;
    padding: 0px;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}



body h2 {
    color: var(--teal);
    font-display: auto;
    text-align: center;
}

header {


    min-height: 100vh;
    width: 100vh;
    
    /* espacio interno en todos los lados */
    margin-bottom: 0px;
    /* 5px de espacio exterior en la parte inferior */
    box-sizing: border-box;
    /* Incluye padding y borde en el ancho y alto definidos */

    display: grid;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;

}

.trozo1 {
    background-color: var(--azulDark);
    height: 100%;
    width: 100%;
    align-items: center;
    justify-items: center;
}



.trozo2 {
    background-color: var(--navy);
    height: 100%;
    width: 100%;
    align-items: center;
    justify-items: center;
}

.trozo3 {
    background-color: var(--teal);
    height: 100%;
    width: 100%;
    align-items: center;
    justify-items: center;
}

header h2 {
    color: var(--blanco);

    width: 100vw;
    /* Para que el texto ocupe todo el ancho */
    letter-spacing: 1px;
    /* Para ajustar el espacio entre las letras */
    height: 100%;
    font-size: 9vh;


}

header h3 {
    font-size: 7.5vh;
    color: var(--blanco);
}

header nav ul {
    color: var(--blanco);
    padding: 0px;
    margin: 0px;
    list-style: none;
}

header nav ul li {
    display: inline-block;
}

header nav ul li a {
    color: var(--blanco);
    margin: 35px;
    margin-left: 60px;
    margin-right: 60px;
    text-decoration: none;
    font-size: 7.5vh;
    align-items: center;
}

header nav ul li a:hover {
    color: var(--marron);
}


main {
    width: 75%;
    margin: auto;
    margin-top: 70px;
}

.grillaProyectos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;



}

.grillaProyectos h2 {
    color: var(--blanco);
    font-size: 1.5em;
}

.grillaProyectos h4 {
    color: var(--blanco);
    font-size: 1.2em;
}

.grillaProyectos p {
    color: var(--blanco);
    font-size: 1.2em;
}




.grillaProyectos article {


    border: 13px hidden var(--teal);
    border-radius: 10px;
    display: grid;
    grid-template-rows: 70% 30%;
    box-shadow: 0px 0px 6px 1px rgba(212, 212, 212, 0.75);
    -webkit-box-shadow: 0px 0px 6px 1px rgba(212, 212, 212, 0.75);
    -moz-box-shadow: 0px 0px 6px 1px rgba(212, 212, 212, 0.75);
    padding: 6px;
    transition: background-color 0.3s ease;
}

.grillaProyectos article:hover {

    box-shadow: 0px 0px 15px 1px rgba(128, 128, 128, 0.75);
    -webkit-box-shadow: 0px 0px 15px 1px rgba(128, 128, 128, 0.75);
    -moz-box-shadow: 0px 0px 15px 1px rgba(128, 128, 128, 0.75);
}

.descripcionProyectos {

    background-color: var(--teal);
    padding: 2px;

}

.descripcionProyectos p>a {
    color: var(--blanco);
}

.descripcionProyectos a:hover {
    color: var(--marron);
}


.enlacesProyectos {
    background-color: var(--blanco);
}

.enlacesProyectos h4 {
    color: #132440;
}


.grillaProyectos a {
    text-decoration: none;
    color: var(--teal);
    font-size: 1.2em;
}

.grillaProyectos a:hover {
    color: var(--marron);
}

.caja-flotante {
    position: fixed;
    /* Fija el elemento en la pantalla */
    bottom: 30px;
    /* Distancia desde la parte inferior */
    right: 30px;
    /* Distancia desde la parte derecha */
    z-index: 100;
    /* Asegura que esté sobre otros elementos */
}

.boton-flotante {
    display: block;
    /* Se comporta como un bloque para centrar el contenido */
    width: 50px;
    /* Ancho del botón */
    height: 50px;
    /* Alto del botón */
    background-color: var(--azulDark);
    /* Color de fondo azul */
    color: white;
    /* Color del texto */
    text-align: center;
    /* Centra el texto horizontalmente */
    line-height: 50px;
    /* Centra el texto verticalmente */
    border-radius: 50%;
    /* Forma circular */
    text-decoration: none;
    /* Elimina el subrayado del enlace */
    font-size: 30px;
    /* Tamaño del signo '^' */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra para efecto flotante */
    transition: background-color 0.3s ease;
    /* Transición suave para hover */
    text-decoration: none;
}

.boton-flotante:hover {
    background-color: var(--marron)
        /* Color más oscuro al pasar el ratón */
}


main h2 {

    color: var(--azulDark);
    padding: 15px;
    font-size: 1.7em;
    margin-top: 80px;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(22, 71, 106, 0.08);
    background-color: var(--blanco);
    margin: 30px auto;
    font-size: 1em;
    text-decoration: none;

}

thead {
    background-color: var(--teal);
    color: var(--blanco);
    font-weight: bold;
    letter-spacing: 1px;
    border: solid 2px var(--teal);
    text-decoration: none;

}

td button {
    display: block;
    width: 100%;
    height: 100%;
    /* Para que ocupe toda la altura */
    padding: 0;
    /* Eliminar el padding predeterminado del botón si es necesario */
    box-sizing: border-box;
    /* Para que el padding no aumente el tamaño total */
    text-decoration: none;
}

td {
    height: 25px;
    /* altura de celda */
    width: 100px;
    /* ancho de celda */
    padding: 0;
    /* Eliminar el padding de la celda si es necesario */
    text-decoration: none;
}


tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: #f2f8fa;
    transition: background 0.2s;
}

caption {
    caption-side: top;
    font-size: 1.2em;
    color: var(--azulDark);
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}


footer nav ul {
    list-style: none;

}

footer nav ul li {
    display: inline-block;
}

footer ul li {
    color: var(--blanco);
    margin: 35px;
    margin-left: 60px;
    margin-right: 60px;
    text-decoration: none;
    font-size: 1.3em;
    text-align: left;
}

footer ul li a {
    color: var(--blanco);
    margin: 8px;
    margin-left: 60px;
    margin-right: 60px;
    text-decoration: none;
    font-size: 1.3em;
    text-align: right;
}

footer nav ul li a:hover {
    color: var(--marron);
}


footer {
    background-color: var(--navy);
    margin-top: 80px;
    display: grid;
    grid-template-columns: 20% auto;
    padding: 50px;
    color: var(--blanco);
    gap: 25px;
}

footer nav>div:first-child {
    display: grid;
    grid-template-columns: auto auto auto;
}

footer nav>div:first-child ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

@media (max-width: 500px) {



    section {
        display: grid;
        grid-template-columns: 1fr;
        margin: auto;
        gap: 1em;

    }

    .grillaProyectos {
        display: grid;
        grid-template-columns: 1fr;
    }

    header {
        width: 100%;
        height: 4em;
    }

    header h1 {
        font-size: 1em;
    }

    header h2 {
        font-size: 1em;
    }

    header h3 {
        font-size: 1em;
    }

    header nav ul li a {
        font-size: 1em;
        align-items: center;
    }

    header {


        min-height: 15em;
        width: 100vw;
        padding: 1px;
        /* espacio interno en todos los lados */
        margin-bottom: 0px;
        /* 5px de espacio exterior en la parte inferior */
        box-sizing: border-box;
        /* Incluye padding y borde en el ancho y alto definidos */

        display: grid;
        grid-template-rows: 40% 30% 30%;

    }

    

    .trozo1 {
        background-color: var(--azulDark);
        height: 100%;
        width: 100%;
        align-items: center;
        justify-items: center;
    }



    .trozo2 {
        background-color: var(--navy);
        height: 100%;
        width: 100%;
        align-items: center;
        justify-items: center;
    }

    .trozo3 {
        background-color: var(--teal);
        height: 100%;
        width: 100%;
        align-items: center;
        justify-items: center;
    }

    main {

        border: 1em;
    }




    main article section:nth-of-type(2) {
        display: grid;
        grid-template-columns: 1fr;

    }

    main article section:nth-of-type(3) {
        display: grid;
        grid-template-columns: 1fr;

    }

    main article section:nth-of-type(4) {
        display: grid;
        grid-template-columns: 1fr;

    }
    
    footer {
        display: none;
    }
}