:root{

    --color-primary: #711A73;
    --color-secondary: #7E55D9;
    --color-accent: #0511F2;
    --color-cyan: #05F2DB;
    --color-dark: #0D0D0D;
    --color-white: #FFFFFF;

    --container: 1280px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background: var(--color-dark);
    color: var(--color-white);
    font-family: Arial, sans-serif;
    line-height:1.5;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

a:focus,
button:focus{
    outline:3px solid var(--color-cyan);
    outline-offset:4px;
}

#home-academia{
    width:100%;
    overflow:hidden;
}

/* =========================
   HERO
========================= */

.hero-home{

    min-height:80vh;

    display:flex;
    align-items:center;

    padding:4rem 1.5rem;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-accent)
        );

}

.hero-content{

    width:100%;
    max-width:var(--container);

    margin:auto;

}

.hero-content h1{

    font-size:clamp(2.5rem, 6vw, 5rem);

    line-height:1.1;

    margin-bottom:1.5rem;

    max-width:900px;

}

.hero-content p{

    font-size:1.2rem;

    max-width:700px;

    margin-bottom:2rem;

    opacity:.9;

}

.hero-content .wp-block-button__link{

    background: var(--color-cyan);

    color: var(--color-dark);

    padding:1rem 1.5rem;

    border-radius:12px;

    font-weight:bold;

    transition:.3s ease;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.hero-content .wp-block-button__link:hover{

    transform:translateY(-2px);

}

.hero-content .wp-block-button__link:focus{

    outline:3px solid white;

    outline-offset:4px;

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){

    .hero-home{

        padding:3rem 1.25rem;

        min-height:70vh;

    }

    .hero-content h1{

        font-size:2.5rem;

    }

    .hero-content p{

        font-size:1rem;

    }

}