@import url("./variables.css");

@import url("./base.css");

@import url("./layout.css");

@import url("./components.css");


/*=================================
        COMPONENTES
==================================*/

@import url("../components/Navbar/navbar.css");

@import url("../components/Hero/hero.css");

@import url("../components/About/about.css");

@import url("../assets/css/visualizations.css");

@import url("../components/DatasetStats/datasetStats.css");

@import url("../components/Features/features.css");

@import url("../components/Footer/footer.css");

@import url("../components/Input/input.css");

@import url("../components/Map/map.css");

@import url("../components/Metrics/metrics.css");

@import "../components/summary/summary.css";

@import "../components/Prediction/prediction.css";

/*=================================
        DEVELOPMENT
==================================*/

@import url("../components/development/development.css");

@import url("../components/development/methodology.css");

@import url("../components/development/sections.css");

@import url("../components/development/diagrams.css");

@import url("../components/development/animations.css");

@import url("../components/development/responsive.css");


/*=================================
        ESTILOS GLOBALES
==================================*/

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:#F8FAFC;

    color:#1E293B;

    overflow-x:hidden;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

img{

    display:block;

    max-width:100%;

}

section{

    width:100%;

}

:root{

    --primary:#2563EB;
    --primary-dark:#1D4ED8;

    --title:#0F172A;
    --text:#475569;

    --background:#FFFFFF;
    --surface:#F8FAFC;

    --border:#E2E8F0;

}

/* ===========================
   Responsive - Global
=========================== */

@media (max-width: 768px) {

    html{
        font-size: 15px;
    }

    section{
        padding-left: 20px;
        padding-right: 20px;
    }

    h1{
        font-size: clamp(2.2rem, 8vw, 3rem);
    }

    h2{
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    h3{
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    p{
        font-size: 1rem;
        line-height: 1.7;
    }

}