.hero-apresentacao{
    padding:5rem;
    text-align:center;
}

.hero-apresentacao h1{
    font-size:4rem;
    margin-top:1rem;
    margin-bottom:1rem;
}

.hero-apresentacao p{
    max-width:700px;
    margin:auto;
    color:var(--texto-secundario);
}

.metricas{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
    padding:0 4rem 4rem;
}

.metrica-card{
    padding:2rem;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.metrica-card span{
    color:var(--texto-secundario);
}

.metrica-card h3{
    margin-top:.5rem;
    font-size:2.8rem;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem;
}

.grafico-card,
.status-card{
    padding:2rem;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.grafico-demo{
    height:320px;
    position:relative;
    overflow:hidden;
    border-radius:18px;
    margin-top:2rem;

    background:
    linear-gradient(
        to top,
        rgba(255,255,255,.05),
        transparent
    );
}

.linha-temperatura{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(85,98,112,.5),
        transparent
    );

    clip-path:polygon(
        0% 85%,
        10% 75%,
        20% 78%,
        35% 60%,
        50% 66%,
        65% 42%,
        80% 52%,
        100% 28%,
        100% 100%,
        0% 100%
    );
}

.status-item{
    display:flex;
    justify-content:space-between;
    padding:1rem 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.fluxo{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
}

.fluxo-item{
    padding:2rem;
    border-radius:22px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.fluxo-item h3{
    font-size:2rem;
    margin-bottom:1rem;
}

@media(max-width:900px){

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .hero-apresentacao{
        padding:3rem 2rem;
    }

    .hero-apresentacao h1{
        font-size:2.8rem;
    }

    .metricas{
        padding:0 2rem 2rem;
    }

}