/* =========================================================
   HITO LAFKEN
   Paleta corporativa
   ========================================================= */

:root {

    /* Colores principales */
    --hl-navy: #0B2D52;
    --hl-blue: #1769A6;
    --hl-turquoise: #68C5C7;
    --hl-green: #405E42;
    --hl-light-green: #A9BF70;
    --hl-gold: #C58C25;

    /* Neutros */
    --hl-volcano: #696B6C;
    --hl-light: #F7F8F6;
    --hl-white: #FFFFFF;

    /* RGB para transparencias */
    --hl-navy-rgb: 11, 45, 82;
    --hl-blue-rgb: 23, 105, 166;
    --hl-turquoise-rgb: 104, 197, 199;
    --hl-green-rgb: 64, 94, 66;
    --hl-gold-rgb: 197, 140, 37;
}


/* =========================================================
   COLORES CORPORATIVOS
   ========================================================= */

.bg-hl-navy {
    background-color: var(--hl-navy) !important;
}

.bg-hl-blue {
    background-color: var(--hl-blue) !important;
}

.bg-hl-turquoise {
    background-color: var(--hl-turquoise) !important;
}

.bg-hl-green {
    background-color: var(--hl-green) !important;
}

.bg-hl-gold {
    background-color: var(--hl-gold) !important;
}


.text-hl-navy {
    color: var(--hl-navy) !important;
}

.text-hl-blue {
    color: var(--hl-blue) !important;
}

.text-hl-turquoise {
    color: var(--hl-turquoise) !important;
}

.text-hl-green {
    color: var(--hl-green) !important;
}

.text-hl-gold {
    color: var(--hl-gold) !important;
}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.btn-hl-primary {
    background-color: var(--hl-navy);
    color: #fff;
    box-shadow: 0 4px 9px -4px rgba(var(--hl-navy-rgb), .55);
}

.btn-hl-primary:hover,
.btn-hl-primary:focus {
    background-color: #123D6B;
    color: #fff;
}


/* =========================================================
   BOTÓN OUTLINE
   ========================================================= */

.btn-outline-hl-primary {
    color: var(--hl-navy);
    border: 2px solid var(--hl-navy);
    background-color: transparent;
}

.btn-outline-hl-primary:hover,
.btn-outline-hl-primary:focus {
    color: #fff;
    background-color: var(--hl-navy);
    border-color: var(--hl-navy);
}


/* =========================================================
   BOTÓN VERDE
   ========================================================= */

.btn-hl-green {
    background-color: var(--hl-green);
    color: #fff;
}

.btn-hl-green:hover {
    background-color: #324B35;
    color: #fff;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge-hl-blue {
    background-color: rgba(var(--hl-blue-rgb), .12);
    color: var(--hl-blue);
}

.badge-hl-green {
    background-color: rgba(var(--hl-green-rgb), .12);
    color: var(--hl-green);
}

.badge-hl-turquoise {
    background-color: rgba(var(--hl-turquoise-rgb), .18);
    color: #276E71;
}

.badge-hl-gold {
    background-color: rgba(var(--hl-gold-rgb), .14);
    color: #8A5D0D;
}


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

a {
    color: var(--hl-blue);
}

a:hover {
    color: var(--hl-navy);
}


/* =========================================================
   SELECCIÓN DE TEXTO
   ========================================================= */

::selection {
    background-color: var(--hl-turquoise);
    color: var(--hl-navy);
}

/* =========================================================
   BASE DEL SITIO
   ========================================================= */

body {
    background-color: var(--hl-light);
    color: #343a40;
}

/* Títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--hl-navy);
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    background-color: #fff;
    transition: background-color .25s ease,
                box-shadow .25s ease;
}

.navbar .nav-link {
    color: var(--hl-navy);
    font-weight: 500;
    transition: color .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--hl-blue);
}

.navbar .nav-link.active {
    color: var(--hl-blue) !important;
    font-weight: 700;
}

/* Iconos sociales */
.navbar .nav-link .fab {
    color: var(--hl-navy);
}

.navbar .nav-link:hover .fab {
    color: var(--hl-blue);
}

/* Menú hamburguesa */
.navbar-toggler {
    color: var(--hl-navy);
}


/* =========================================================
   NAVBAR SOBRE CARRUSEL - INICIO
   ========================================================= */

.navbar-scroll {
    background-color: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
}


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

.btn-hl-primary {
    background-color: var(--hl-navy);
    border-color: var(--hl-navy);
    color: #fff;
}

.btn-hl-primary:hover,
.btn-hl-primary:focus,
.btn-hl-primary:active {
    background-color: var(--hl-blue);
    border-color: var(--hl-blue);
    color: #fff;
}

.btn-outline-hl-primary {
    color: var(--hl-navy);
    border: 2px solid var(--hl-navy);
    background-color: transparent;
}

.btn-outline-hl-primary:hover,
.btn-outline-hl-primary:focus {
    background-color: var(--hl-navy);
    border-color: var(--hl-navy);
    color: #fff;
}

.btn-hl-green {
    background-color: var(--hl-green);
    border-color: var(--hl-green);
    color: #fff;
}

.btn-hl-green:hover,
.btn-hl-green:focus {
    background-color: #324b35;
    border-color: #324b35;
    color: #fff;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge-hl-blue {
    background-color: rgba(var(--hl-blue-rgb), .12);
    color: var(--hl-blue);
}

.badge-hl-green {
    background-color: rgba(var(--hl-green-rgb), .12);
    color: var(--hl-green);
}

.badge-hl-turquoise {
    background-color: rgba(var(--hl-turquoise-rgb), .20);
    color: #276e71;
}

.badge-hl-gold {
    background-color: rgba(var(--hl-gold-rgb), .15);
    color: #80580d;
}


/* =========================================================
   ICONOS CORPORATIVOS
   ========================================================= */

.hl-icon {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.hl-icon-green {
    background-color: var(--hl-green);
    color: #fff;
}

.hl-icon-blue {
    background-color: var(--hl-blue);
    color: #fff;
}

.hl-icon-turquoise {
    background-color: var(--hl-turquoise);
    color: var(--hl-navy);
}

.hl-icon-gold {
    background-color: var(--hl-gold);
    color: #fff;
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
    transition: transform .2s ease,
                box-shadow .2s ease;
}

.card:hover {
    transform: translateY(-2px);
}


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

a {
    color: var(--hl-blue);
}

a:hover {
    color: var(--hl-navy);
}


/* =========================================================
   FOOTER
   ========================================================= */

.bg-hl-navy {
    background-color: var(--hl-navy) !important;
}

.bg-hl-blue {
    background-color: var(--hl-blue) !important;
}

footer h6 {
    color: #fff;
}

footer a {
    transition: opacity .2s ease;
}

footer a:hover {
    color: #fff;
    opacity: .8;
}


/* =========================================================
   SELECCIÓN DE TEXTO
   ========================================================= */

::selection {
    background-color: var(--hl-turquoise);
    color: var(--hl-navy);
}