/* =========================================
   ORQUIN V2
========================================= */

/* =========================================
   LAYOUTS
========================================= */

@import url('./layouts/navbar.css');
@import url('./layouts/footer.css');

/* =========================================
   COMPONENTS
========================================= */

@import url('./components/hero.css');
@import url('./components/buttons.css');

/* =========================================
   PAGES
========================================= */

@import url('./pages/home.css');


/* =========================================
   GLOBAL
========================================= */

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Louis George Cafe', sans-serif;

    background: #ffffff;

    color: #222222;

    overflow-x: hidden;

    margin: 0;

    padding: 0;

}

/* LINKS */

a {

    text-decoration: none;

    transition: .3s ease;

}

/* IMAGENES */

img {

    max-width: 100%;

    height: auto;

    display: block;

}

/* TITULOS */

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

    font-weight: 700;

    margin-top: 0;

}

/* =========================================
   UTILIDADES
========================================= */

.section-padding {

    padding: 100px 0;

}

.input-titlecase {

    text-transform: capitalize;

}

.word-counter {

    display: block;

    margin-top: 8px;

    color: #666;

    font-size: 0.85rem;

}

.form-group.rut-has-error {

    position: relative;

}

.form-group.rut-has-error input#rut {

    border-color: #d93025;

    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);

    padding-right: 46px;

}

.form-group.rut-has-error::after {

    content: '\26A0';

    position: absolute;

    right: 14px;

    top: 49px;

    color: #d93025;

    font-size: 1rem;

    pointer-events: none;

}

/* MOBILE */

@media (max-width: 768px) {

    .section-padding {

        padding: 70px 0;

    }

}




/* =========================================
   GLOBAL TYPOGRAPHY SCALE
========================================= */

body {

    font-size: 15px;

    line-height: 1.8;

}

/* TITULOS */

h1 {

    font-size: clamp(2.8rem, 4vw, 4.8rem);

}

h2 {

    font-size: clamp(2rem, 3vw, 3rem);

}

h3 {

    font-size: clamp(1.5rem, 2vw, 2.1rem);

}

p {

    font-size: 1rem;

    line-height: 1.9;

}


/* =========================================
   FORCE TYPOGRAPHY SCALE
========================================= */

body {

    font-size: 14px !important;

}

h1 {

    font-size: 4rem !important;

}

h2 {

    font-size: 2.3rem !important;

}

h3 {

    font-size: 1.5rem !important;

}

p {

    font-size: .95rem !important;

    line-height: 1.9 !important;

}


html,
body {
    height: 100%;
}

body.app-layout {
    min-height: 100vh;

    display: flex;

    flex-direction: column;
}

.app-main {
    flex: 1;
}


/* =========================================
   ABOUT HERO
========================================= */

.about-hero {

    position: relative;

    min-height: 58vh;

    display: flex;

    align-items: center;

    background-size: cover !important;

    background-position: center !important;

    background-attachment: fixed !important;
}

.about-hero-content {

    max-width: 850px;

    padding-top: 60px;

    position: relative;

    z-index: 2;
}

.about-hero-label {

    color: #2ed3a7 !important;

    font-weight: 700;

    display: inline-block;

    margin-bottom: 20px;
}

.about-hero-title {

    color: #ffffff !important;

    font-size: clamp(2.4rem, 3vw, 3.8rem);

    line-height: 1.2;

    font-weight: 300;

    margin-bottom: 30px;
}

.about-hero-text {

    color: rgba(255,255,255,.92) !important;

    font-size: 1.05rem;

    line-height: 2;

    max-width: 760px;
}

@media (max-width: 768px) {

    .about-hero {

        min-height: 48vh;

        background-attachment: scroll !important;
    }

    .about-hero-title {

        font-size: 2.2rem;
    }

    .about-hero-text {

        font-size: 1rem;
    }
}




/* =========================================
   SOLID HEADER
========================================= */

/* .header-solid {

    background: #3b469f !important;

    position: relative;

    z-index: 999;
} */

#t4-header.header-solid {

    background: #3d46a1 !important;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9999;
}

/* =========================================
   FORCE SOLID NAVBAR
========================================= */

.header-solid {

    background: #3b469f !important;

}

.header-solid .navbar {

    background: transparent !important;
}

.header-solid::before,
.header-solid::after {

    display: none !important;
}