.home {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(28rem, 42rem);

    align-items: center;
    gap: var(--space-xl);

    min-height: 100svh;

    padding-top:
        calc(var(--header-height) + var(--space-lg));

    padding-bottom:
        calc(var(--space-xl) + 6rem);
}


.home-content {
    position: relative;
    z-index: 2;

    max-width: 64rem;
}


.home-content h1 {
    position: relative;

    font-size:
        clamp(4rem, 5vw, 5.6rem);

    font-weight: 700;
    line-height: 1.15;
}


.home-content h1 .intro-text {
    display: block;

    margin-bottom: var(--space-xs);

    font-size:
        clamp(1.8rem, 2vw, 2.5rem);

    font-weight: 500;
}


.home-content h1 span {
    color: var(--text-color);
}


.home-content .text-animate {
    position: relative;

    width: fit-content;

    margin-top: var(--space-sm);
}


.home-content .text-animate h2 {
    position: relative;

    font-size:
        clamp(2.4rem, 3vw, 3.2rem);

    font-weight: 700;

    color: transparent;

    -webkit-text-stroke:
        0.07rem var(--main-color);

    background-image:
        linear-gradient(
            var(--main-color),
            var(--main-color)
        );

    background-repeat: no-repeat;

    background-clip: text;
    -webkit-background-clip: text;

    background-position: -33rem 0;
}


.home.show-animate
.home-content
.text-animate
h2 {
    animation:
        homeBgText 6s linear infinite;

    animation-delay: 2s;
}


.home-content
.text-animate
h2::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    border-right:
        0.2rem solid var(--main-color);

    z-index: -1;
}


.home.show-animate
.home-content
.text-animate
h2::before {
    animation:
        homeCursorText 6s linear infinite;

    animation-delay: 2s;
}


.home-content p {
    position: relative;

    max-width: 58rem;

    margin:
        var(--space-md)
        0
        var(--space-lg);

    font-size:
        var(--font-size-base);

    line-height: 1.7;
}


/* Imagen */

.home-img {
    position: relative;

    display: flex;

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

    width: 100%;

    pointer-events: none;
}


.home-img img {
    width: min(100%, 42rem);

    aspect-ratio: 1;

    object-fit: cover;

    border:
        0.5rem solid var(--main-color);

    border-radius:
        var(--border-radius-round);

    box-shadow:
        0 0 2.5rem var(--main-color),
        0 0 5rem var(--main-color);
}


/* Botones */

.btn-box {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    gap: var(--space-sm);

    width: fit-content;
}


.btn-box .btn {
    position: relative;

    display: inline-flex;

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

    min-width: 15rem;
    min-height: 5rem;

    padding: 1.2rem 2rem;

    overflow: hidden;

    border:
        0.2rem solid var(--main-color);

    border-radius:
        var(--border-radius-sm);

    background:
        var(--main-color);

    color:
        var(--bg-color);

    font-size: 1.8rem;
    font-weight: 600;

    letter-spacing: 0.1rem;

    z-index: 1;

    transition:
        color var(--transition-normal);
}


.btn-box .btn:hover {
    color:
        var(--main-color);
}


.btn-box .btn:nth-child(2) {
    background: transparent;

    color:
        var(--main-color);
}


.btn-box .btn:nth-child(2):hover {
    color:
        var(--bg-color);
}


.btn-box
.btn:nth-child(2)::before {
    background:
        var(--main-color);
}


.btn-box .btn::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background:
        var(--bg-color);

    z-index: -1;

    transition:
        width var(--transition-normal);
}


.btn-box .btn:hover::before {
    width: 100%;
}


/* Redes sociales */

.home-sci {
    position: absolute;

    left:
        var(--page-padding);

    bottom:
        var(--space-lg);

    display: flex;

    gap:
        var(--space-sm);

    z-index: 2;
}


.home-sci a {
    position: relative;

    display: inline-flex;

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

    width: 4rem;
    height: 4rem;

    overflow: hidden;

    border:
        0.2rem solid var(--main-color);

    border-radius:
        var(--border-radius-round);

    background: transparent;

    color:
        var(--main-color);

    font-size: 2rem;

    z-index: 1;

    transition:
        color var(--transition-normal);
}


.home-sci a:hover {
    color:
        var(--bg-color);
}


.home-sci a::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background:
        var(--main-color);

    z-index: -1;

    transition:
        width var(--transition-normal);
}


.home-sci a:hover::before {
    width: 100%;
}


/* Tablet / pantallas angostas */

@media (max-width: 900px) {

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

        justify-items: center;

        gap:
            var(--space-lg);

        min-height: auto;

        padding-top:
            calc(
                var(--header-height)
                + var(--space-lg)
            );

        text-align: center;
    }


    .home-img {
        order: 1;

        max-width: 32rem;
    }


    .home-content {
        order: 2;

        max-width: 70rem;
    }


    .home-content p {
        margin-inline: auto;
    }


    .home-content
    .text-animate {
        margin-inline: auto;
    }


    .btn-box {
        justify-content: center;

        margin-inline: auto;
    }


    .home-sci {
        position: static;

        order: 3;

        justify-content: center;

        margin-top:
            var(--space-sm);
    }
}


/* Móvil */

@media (max-width: 520px) {

    .home {
        gap:
            var(--space-md);

        padding-top:
            calc(
                var(--header-height)
                + var(--space-md)
            );

        padding-bottom:
            var(--space-lg);
    }


    .home-img {
        max-width: 24rem;
    }


    .home-content h1 {
        font-size:
            clamp(
                3.4rem,
                10vw,
                4.2rem
            );
    }


    .home-content p {
        font-size:
            var(--font-size-small);
    }


    .btn-box {
        width: 100%;
    }


    .btn-box .btn {
        width: 100%;
    }
}