/* =========================================================
   Portada
   ========================================================= */

.portfolio-home {
    padding:
        6rem 0 0;
}


/* =========================================================
   Hero
   ========================================================= */

.home-hero {
    padding-bottom: 7rem;
}


.home-hero__label {
    margin-bottom: 1.4rem;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.home-hero__title {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(3rem, 7vw, 6rem);

    line-height: 0.98;

    letter-spacing: -0.06em;
}


.home-hero__title span {
    display: block;

    color:
        var(--portfolio-text-muted);
}


.home-hero__footer {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 3rem;

    margin-top: 3rem;
}


.home-hero__text {
    max-width: 480px;

    margin: 0;

    color:
        var(--portfolio-text-muted);

    font-size: 1.05rem;

    line-height: 1.7;
}


.home-github-link {
    flex: 0 0 auto;

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.8rem;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-github-link:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   Cabeceras de sección
   ========================================================= */

.home-section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding-bottom: 1.1rem;

    border-bottom:
        1px solid var(--portfolio-border);

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.69rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


/* =========================================================
   Proyectos
   ========================================================= */

.home-projects {
    padding:
        1rem 0 8rem;
}


.home-project-list {
    border-bottom:
        1px solid var(--portfolio-border);
}


/* Fila */

.home-project {
    position: relative;

    display: grid;

    grid-template-columns:
        100px minmax(0, 1fr) 40px;

    gap: 2rem;

    align-items: center;

    min-height: 150px;

    padding:
        2rem 0;

    border-top:
        1px solid var(--portfolio-border);

    transition:
        background-color 180ms ease;
}


/*
 * Evitamos doble borde con
 * la cabecera.
 */

.home-project:first-child {
    border-top: 0;
}


/* Link invisible sobre toda la fila */

.home-project__link {
    position: absolute;

    inset: 0;

    z-index: 1;
}


.home-project > *:not(
    .home-project__link
) {
    position: relative;

    z-index: 2;

    pointer-events: none;
}


/* Año */

.home-project__year {
    align-self: flex-start;

    padding-top: 0.15rem;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.72rem;
}


/* Título */

.home-project__title {
    margin:
        0 0 0.55rem;

    font-size:
        clamp(1.4rem, 2.3vw, 1.9rem);

    line-height: 1.15;

    letter-spacing: -0.035em;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


/* Extracto */

.home-project__excerpt {
    max-width: 650px;

    color:
        var(--portfolio-text-muted);

    font-size: 0.9rem;

    line-height: 1.6;
}


/* Tecnologías */

.home-project__tech {
    margin-top: 0.8rem;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.67rem;
}


/* Flecha */

.home-project__arrow {
    justify-self: end;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 1.15rem;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


/* Hover */

.home-project:hover
.home-project__title {

    color:
        var(--portfolio-accent);
	 transform:
        translateX(3px);
}


.home-project:hover
.home-project__arrow {

    color:
        var(--portfolio-accent);

    transform:
        translateX(6px);
}


/*
 * En vez de pintar una caja,
 * hacemos una modificación
 * extremadamente sutil del fondo.
 */

.home-project::before {
    content: "";

    position: absolute;

    inset:
        0 -1.2rem;

    border-radius: 6px;

    background:
        var(--portfolio-bg-soft);

    opacity: 0;

    transition:
        opacity 180ms ease;
}


.home-project:hover::before {
    opacity: 1;
}


/* Ver todos */

.home-projects__all {
    display: flex;

    justify-content: flex-end;

    margin-top: 2rem;
}


.home-projects__all a {
    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.75rem;

    text-decoration: none;

    transition:
        transform var(--transition-fast);
}


.home-projects__all a:hover {
    transform:
        translateX(3px);
}


/* =========================================================
   Contacto
   ========================================================= */

.home-contact {
    display: grid;

    grid-template-columns:
        190px minmax(0, 1fr);

    gap: 4rem;

    padding:
        6rem 0;

    border-top:
        1px solid var(--portfolio-border);
}


.home-contact__label {
    padding-top: 0.3rem;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.home-contact__title {
    max-width: 700px;

    margin:
        0 0 2.2rem;

    font-size:
        clamp(1.9rem, 4vw, 3.2rem);

    line-height: 1.15;

    letter-spacing: -0.045em;
}


.home-contact__email {
    display: flex;

    align-items: center;

    gap: 1.2rem;
}


.home-contact__email > a {
    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size:
        clamp(
            0.85rem,
            2vw,
            1rem
        );

    text-decoration: none;
}


/* Copiar */

.home-copy-email {
    padding:
        0.45rem 0.7rem;

    border:
        1px solid var(--portfolio-border);

    border-radius: 5px;

    color:
        var(--portfolio-text-muted);

    background:
        transparent;

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.68rem;

    cursor: pointer;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.home-copy-email:hover {
    color:
        var(--portfolio-accent);

    border-color:
        var(--portfolio-accent);

    transform:
        translateY(-2px);
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 700px) {

    .portfolio-home {
        padding-top: 4rem;
    }


    .home-hero {
        padding-bottom: 5rem;
    }


    .home-hero__title {
        font-size:
            clamp(
                2.7rem,
                15vw,
                4.3rem
            );
    }


    .home-hero__footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 1.5rem;
    }


    .home-projects {
        padding-bottom: 5rem;
    }


    .home-project {
        grid-template-columns:
            60px minmax(0, 1fr) 24px;

        gap: 1rem;

        min-height: 0;

        padding:
            1.7rem 0;
    }


    .home-project__excerpt {
        font-size: 0.84rem;
    }


    .home-project__tech {
        line-height: 1.6;
    }


    .home-contact {
        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding:
            4rem 0;
    }


    .home-contact__email {
        flex-wrap: wrap;
    }

}