/* Reset básico */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    gap: 10px;
    width: 100%;
    height: 100vh;
    animation: gradient 2s infinite alternate linear;
    background: hsl(224, 38%, 41%);
    grid-template-rows: 50px auto 1fr 50px;
    grid-template-areas:
        "zheader"
        "znav"
        "zsection"
        "zfooter";
}

@keyframes gradient {
    100% {
        background: hsl(338, 38%, 41%);
    }
}

header {
    grid-area: zheader;
    color: rgb(0, 0, 0);
    text-align: left;
    padding: 20px;
}

.logo {
    width: 100%; /* Cambia a porcentaje para que sea responsivo */
    max-width: 230px; /* Asegura que no exceda un tamaño específico */
}

nav {
    grid-area: znav;
    color: grey;
    display: flex;
    flex-direction: column; /* Mejor adaptación en pantallas pequeñas */
    align-items: center;
    padding: 10px;
    z-index: 10;
}

nav a {
    text-decoration: none;
    font-size: 2.5rem; /* Usamos rem para tamaños de texto responsivos */
    color: rgb(55, 0, 74);
    transition: all 0.3s ease;
}

nav a:hover {
    font-size: 2.8rem; /* Tamaño de fuente ligeramente mayor al hacer hover */
    color: #fff2c5;
}

section {
    grid-area: zsection;
    text-align: center;
    font-size: 2.5rem; /* Unidades relativas */
    padding: 15% 5%; /* Ajustamos el padding para mayor flexibilidad */
    color: white;
}

#proyectos-link {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    font-size: 2.5rem;
    color: white;
    transition: all 0.4s ease;
    border: 3px solid transparent;
    margin-top: 20px;
}

#proyectos-link:hover {
    border-color: white;
    color: white;
    font-size: 2.8rem;
    text-decoration: none;
}

footer {
    grid-area: zfooter;
    text-align: center;
    color: white;
}

/* Media Queries para diferentes dispositivos */
@media (max-width: 1024px) {
    nav a {
        font-size: 2.2rem;
    }

    section {
        font-size: 2.2rem;
        padding: 20% 5%;
    }

    #proyectos-link {
        font-size: 2.2rem;
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    body {
        grid-template-rows: auto auto 1fr auto;
    }

    nav a {
        font-size: 2rem;
    }

    section {
        font-size: 2rem;
        padding: 30% 5%;
    }

    #proyectos-link {
        font-size: 2rem;
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    nav a {
        font-size: 1.8rem;
    }

    section {
        font-size: 1.8rem;
        padding: 40% 5%;
    }

    #proyectos-link {
        font-size: 1.8rem;
        margin-top: 35px;
    }
}

@media (max-width: 320px) {
    nav a {
        font-size: 1.5rem;
    }

    section {
        font-size: 1.5rem;
        padding: 50% 5%;
    }

    #proyectos-link {
        font-size: 1.5rem;
        margin-top: 40px;
    }
}