/*==============================================================

FelipeOliveros.cl
Base.css
Sistema base del proyecto

Autor:
Felipe Oliveros + ChatGPT

Versión:
1.0

==============================================================*/


/*==============================================================
RESET
==============================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button,
input,
textarea,
select{

    font:inherit;

}

ul,
ol{

    list-style:none;

}

button{

    cursor:pointer;

    border:none;

    background:none;

}


/*==============================================================
VARIABLES
==============================================================*/

:root{

    /* COLORS */

    --color-black:#101010;

    --color-white:#FFFFFF;

    --color-gold:#C8A96A;

    --color-gray:#707070;

    --color-light:#F7F7F5;

    --color-border:#ECECEC;


    /* CONTAINER */

    --container:1320px;


    /* RADIUS */

    --radius:12px;

    --radius-large:22px;


    /* TRANSITIONS */

    --transition:.35s cubic-bezier(.2,.8,.2,1);


    /* SHADOWS */

    --shadow-soft:

        0 20px 60px rgba(0,0,0,.05);

    --shadow-medium:

        0 30px 80px rgba(0,0,0,.08);

}


/*==============================================================
BODY
==============================================================*/

body{

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    line-height:1.65;

    color:var(--color-black);

    background:var(--color-white);

    font-weight:400;

    overflow-x:hidden;

}


/*==============================================================
TYPOGRAPHY
==============================================================*/

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

    font-weight:700;

    line-height:.95;

    letter-spacing:-.04em;

}

p{

    color:var(--color-gray);

    line-height:1.8;

}


/*==============================================================
CONTAINER
==============================================================*/

.container{

    width:min(

        var(--container),

        calc(100% - 80px)

    );

    margin:auto;

}

.container-small{

    width:min(

        900px,

        calc(100% - 80px)

    );

    margin:auto;

}


/*==============================================================
SECTIONS
==============================================================*/

section{

    position:relative;

}

.section{

    padding:140px 0;

}

.section-small{

    padding:90px 0;

}


/*==============================================================
BUTTONS
==============================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:999px;

    transition:var(--transition);

}

.btn-primary{

    background:var(--color-black);

    color:var(--color-white);

    padding:14px 26px;

    font-weight:600;

}

.btn-primary:hover{

    background:var(--color-gold);

    color:var(--color-black);

    transform:translateY(-3px);

}

.btn-outline{

    border:1px solid var(--color-border);

    color:var(--color-black);

    padding:14px 26px;

}

.btn-outline:hover{

    border-color:var(--color-gold);

    color:var(--color-gold);

}


/*==============================================================
HELPERS
==============================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.hidden{

    display:none;

}

.w-100{

    width:100%;

}


/*==============================================================
ANIMATIONS
==============================================================*/

.fade-up{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/*==============================================================
SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--color-gold);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#F5F5F5;

}


/*==============================================================
SELECTION
==============================================================*/

::selection{

    background:rgba(200,169,106,.25);

}