/* ------------------------- base -- */
*{
    margin:0;
    padding:0;
}

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background: #ffffff;
    min-height:100vh;
    padding-top: 70px;
}

/* ------------------------- scrow auto -- */
html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 80px;
}

/* ------------------------- section -- */
section {
    min-height: auto;
    padding: 0px 0;
    border-bottom: none;
    margin-bottom: 0;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------- h1 -- */
h1 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 20px;
}

h1 span {
    color: #00ff99;
}

@media (max-width: 768px) {

    h1 {
        font-size: 1.6rem;
    }

}

/* ------------------------- img -- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ------------------------- link indicador -- */
.link-indicator {
    white-space: nowrap;
}

.link-indicator::after {
    content: " ↗";
    color: #ffffff;
}

/* ------------------------- acessibilidade -- */
:focus-visible{
    outline:2px solid #00ff99;
    outline-offset:3px;
}

@media (hover:hover){
    ...
}

/* ------------------------- divisor -- */
.divider{
    height: 1px;
    background: linear-gradient(90deg, #1f2937, #312d65);
    position: relative;
    overflow: hidden;
}

.divider::after{
    content: "";
    position: absolute;
    inset: 0;
    background: #00FF9A;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        black 35%,
        black 65%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        black 35%,
        black 65%,
        transparent
    );
}