/* ===== TIPOGRAFÍA Y ESTILOS DE TEXTO ===== */
a, span, p, h1, h2, h3, h4, h5, h6, input, textarea, .form-control{
    font-family: 'Arimo', sans-serif!important;
}

body {
    font-family: 'Arimo', sans-serif!important;
    letter-spacing: 2px;
    background-color: #F5F5F5;
    overflow-x: hidden;
}

h1 {
    color: #0d3940;
    font-size: 42px;
    letter-spacing: 10px;
    line-height: 54px;
}

h2 {
    font-size: 32px!important;
    letter-spacing: 10px;
    line-height: 42px;
}

h3 {
    font-size: 26px;
    letter-spacing: 5px;
    line-height: 32px;
}

h4 {
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 28px;
}

span, .btn, p, a, li, ol, ul, form, input, textarea, .form-control{
    font-size: 14px;
    letter-spacing: 1px;
}

/* ===== CLASES UTILITARIAS ===== */
.bg-primary {
    background-color: #000!important;
}
.bg-muted {
    background-color: #f5f5f5;
}
.bg-white{
    background-color: #fff;
}
.bg-green{
    background-color: #0d3940;
}

.btn{
    border: none!important;
    letter-spacing: 3px;
}
.btn:hover{
    color: #ffffff!important;
    transition: all 0.5s ease;
}

.btn-dark {
    background-color: #0d3940;
}

.btn-primary {
    background-color: #000;
}
.border{
    border: 1px solid #0d3940;
}
.border-radius-10{
    border-radius: 10px;
}
.border-none{
    border: none!important;
}

.divider {
    background-color: #000000;
    height: 2px;
    width: 100px;
}

.font-weight-light{
    font-weight: 300!important;
}

.font-weight-normal{
    font-weight: 400!important;
}

.font-weight-medium{
    font-weight: 500!important;
}

.font-weight-semibold{
    font-weight: 600!important;
}

.font-weight-bold{
    font-weight: 700!important;
}
.h-100{
    height: 100%!important;
}
.h-min{
    min-height: 750px;
}

.text-primary {
    color: #000!important;
}
.text-green {
    color: #0d3940!important;
}

.w-80 {
    width: 80%;
}

/* ===== COMPONENTES DE NAVEGACIÓN ===== */
.header {
    align-items: center;
    display: flex;
    height: 100px;
    position: relative;
    z-index: 100;
}
.header img{
    max-height: 48px;
}

.banner .container{
 min-height: 320px;
}

/* ===== SECCIONES Hero ===== */
.hero-section {
    position: relative;
}

/* ===== SECCIONES fooer ===== */
.footer a{
    font-size: 18px;
}

.hero-image {
    height: auto;
    max-width: 100%;
}


.social-icons a {
    color: #0d3940!important;
    font-size: 22px!important;
}

.ilustration-md{
    max-width: 225px;
}

/* ===== BANNERS ===== */
#banner-01 .container{
    background-image: url('../images/bg-banner-01.png');
    background-color: #fff;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}
#banner-03 .container{
    background-image: url('../images/bg-banner-03.png');
    background-color: #fff;
    background-position: center 0px;
    background-size:cover;
    background-repeat: no-repeat;
}

#about .col-md-3 {
    position: relative;
}

#story{
    background-image: url('../images/bg-story.png');
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}


/* ===== SECCIÓN DE PROCESO ===== */
.card {
    background-color: rgba(0, 0, 0, 0.8);
    min-height: 350px;
    padding: 20px;
    transition: all 0.5s ease;
}

.card-body {
    transition: opacity 0.5s ease;
}

/* Imágenes normales */
.card {
    background-color: #fff;
    transition: all 0.5s ease;
}


/* ===== EFECTOS HOVER ===== */
.card-sm {
    min-height: 180px;
}

.hvr-underline-from-center:before,
.hvr-outline-out:before {
    border-color: #0d3940 !important;
    border-width: 0px;
}

.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
    border-color: #0d3940 !important;
    border-width: 1px;
}

.hvr-outline-out:hover:before,
.hvr-outline-out:focus:before,
.hvr-outline-out:active:before {
    border-color: #0d3940 !important;
    border-width: 1px;
}
/* parallax */
.animation-parallax{
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;
}

/* ===== RESPONSIVE PARA TABLET ===== */
@media (max-width: 991px) {
    h1{
        font-size: 32px;
        letter-spacing: 4px;
    }
}


/* ===== RESPONSIVE PARA MÓVIL ===== */
@media (max-width: 767px) {
    h1{
        font-size: 32px;
        letter-spacing: 2px;
        line-height: 42px;
    }
    .header img{
        max-height: 28px;
    }
    .hero-image{
        max-width: 80%;
    }
    .footer img{
        max-height: 28px;
    }
    .card{
        min-height: 225px;
    }

    #banner-01 .container{
        background-position: 50px 0px;
        background-size: cover 100%;
    }

    .ilustration-md{
        max-width: 150px;
    }

    #process .description{
        min-height: 700px;
    }
}