/*==================================================
MANTENPRO
GLOBAL.CSS
==================================================*/


/*=========================================
BASE
=========================================*/

html{

    font-size:16px;

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-family);

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

    font-weight:var(--font-weight-regular);

    line-height:var(--line-height-normal);

    color:var(--color-text);

    background:var(--color-background);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}



/*=========================================
SELECCIÓN
=========================================*/

::selection{

    background:var(--color-secondary);

    color:var(--color-white);

}



/*=========================================
IMÁGENES
=========================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}



/*=========================================
ENLACES
=========================================*/

a{

    text-decoration:none;

    color:inherit;

}



/*=========================================
LISTAS
=========================================*/

ul,
ol{

    list-style:none;

}



/*=========================================
BOTONES
=========================================*/

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}



/*=========================================
FORMULARIOS
=========================================*/

input,
textarea,
select{

    font:inherit;

}



/*=========================================
TÍTULOS
=========================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--color-primary);

    font-weight:var(--font-weight-bold);

    line-height:1.2;

}



h1{

    font-size:var(--font-size-5xl);

}

h2{

    font-size:var(--font-size-4xl);

}

h3{

    font-size:var(--font-size-3xl);

}

h4{

    font-size:var(--font-size-2xl);

}

h5{

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

}

h6{

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

}



/*=========================================
PÁRRAFOS
=========================================*/

p{

    color:var(--color-text-light);

    margin-top:var(--space-16);

}



/*=========================================
SECCIONES
=========================================*/

section{

    padding:var(--space-96) 0;

}



/*=========================================
CONTENEDOR PRINCIPAL
=========================================*/

.container{

    width:min(100% - 2rem,var(--container-xl));

    margin-inline:auto;

}



/*=========================================
BOTONES GLOBALES
=========================================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    height:var(--button-height);

    padding:0 var(--button-padding-x);

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

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

    font-weight:var(--button-font-weight);

    transition:all var(--transition-normal);

}



.btn--primary{

    background:var(--color-secondary);

    color:var(--color-white);

    box-shadow:var(--shadow-sm);

}



.btn--primary:hover{

    background:var(--color-secondary-hover);

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}



.btn--secondary{

    border:2px solid var(--color-primary);

    color:var(--color-primary);

}



.btn--secondary:hover{

    background:var(--color-primary);

    color:var(--color-white);

}



/*=========================================
FOCUS
=========================================*/

:focus-visible{

    outline:3px solid rgba(247,148,29,.35);

    outline-offset:4px;

}



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

@media(max-width:992px){

    section{

        padding:var(--space-80) 0;

    }

}

@media(max-width:768px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.5rem;

    }

    h3{

        font-size:2rem;

    }

    section{

        padding:var(--space-64) 0;

    }

}

@media(max-width:576px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.7rem;

    }

    .btn{

        width:100%;

    }

}