/* COLORES ------------------------ */
.alert-verde {
    color: #006965 !important;
    background-color: #ccf6f5 !important;
    border-color: #b3f2ef !important;
}

.alert-verde hr {
    border-top-color: #99edea !important;
}

.alert-verde .alert-link {
    color: #003f3d !important;
}

.badge-verde {
    color: #FFFFFF !important;
    background-color: #00d1c9 !important;
}

.badge-verde[href]:hover, .badge-verde[href]:focus {
    color: #FFFFFF !important;
    background-color: #00a8a1 !important;
}

.bg-verde {
    color: #FFFFFF !important;
    background-color: #00d1c9 !important;
}

a.bg-verde:hover, a.bg-verde:focus,
button.bg-verde:hover,
button.bg-verde:focus {
    background-color: #00a8a1 !important;
}

.border-verde {
    border-color: #00d1c9 !important;
}

.btn-verde {
    color: #FFFFFF !important;
    background-color: #00d1c9 !important;
    border-color: #00d1c9 !important;
}

.btn-verde:hover {
    color: #FFFFFF !important;
    background-color: #00bdb5 !important;
    border-color: #00d1c9 !important;
}

.btn-verde:focus, .btn-verde.focus {
    box-shadow: 0 0 0 0.2rem rgba(0,209,201,0.5) !important;
}

.btn-verde.disabled, .btn-verde:disabled {
    color: #FFFFFF !important;
    background-color: #00d1c9 !important;
    border-color: #00d1c9 !important;
}

.btn-verde:not(:disabled):not(.disabled):active, .btn-verde:not(:disabled):not(.disabled).active, .show > .btn-verde.dropdown-toggle {
    color: #FFFFFF !important;
    background-color: #00a8a1 !important;
    border-color: #00938d !important;
}

.btn-verde:not(:disabled):not(.disabled):active:focus, .btn-verde:not(:disabled):not(.disabled).active:focus, .show > .btn-verde.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,209,201,0.5) !important;
}

.btn-outline-verde {
    color: #00d1c9 !important;
    background-color: transparent !important;
    border-color: #00d1c9 !important;
}

.btn-outline-verde:hover {
    color: #183589 !important;
    background-color: #00d1c9 !important;
    border-color: #00d1c9 !important;
}

.btn-outline-verde:focus, .btn-outline-verde.focus {
    box-shadow: 0 0 0 0.2rem rgba(0,209,201,0.5) !important;
}

.btn-outline-verde.disabled, .btn-outline-verde:disabled {
    color: #00d1c9 !important;
    background-color: transparent !important;
}

.btn-outline-verde:not(:disabled):not(.disabled):active, .btn-outline-verde:not(:disabled):not(.disabled).active, .show > .btn-outline-verde.dropdown-toggle {
    color: #FFFFFF !important;
    background-color: #00d1c9 !important;
    border-color: #00d1c9 !important;
}

.btn-outline-verde:not(:disabled):not(.disabled):active:focus, .btn-outline-verde:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-verde.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,209,201,0.5) !important;
}

.list-group-item-verde {
    color: #006965 !important;
    background-color: #b3f2ef !important;
}

.list-group-item-verde.list-group-item-action:hover, .list-group-item-verde.list-group-item-action:focus {
    color: #006965 !important;
    background-color: #99edea !important;
}

.list-group-item-verde.list-group-item-action.active {
    color: #FFFFFF !important;
    background-color: #006965 !important;
    border-color: #006965 !important;
}

.table-verde {
    --bs-table-bg: #80e8e4 !important;
    --bs-table-striped-bg: #b3f2ef !important;
    --bs-table-active-bg: #4ddfda !important;
    --bs-table-hover-bg: #66e4df !important;
    border-color: #33dbd4 !important;
}

.text-verde {
    color: #00d1c9 !important;
}

a.text-verde:hover, a.text-verde:focus {
    color: #00a8a1 !important;
}

.link-verde {
    color: #00d1c9 !important;
}

a.link-verde:hover, a.link-verde:focus {
    color: #00a8a1 !important;
}


/*   AZUL --------------------------------------------------- */
.alert-azul {
    color: #0c1b45 !important;
    background-color: #d1d7e8 !important;
    border-color: #bac3dc !important;
}

.alert-azul hr {
    border-top-color: #a3afd0 !important;
}

.alert-azul .alert-link {
    color: #08102a !important;
}

.badge-azul {
    color: #FFFFFF !important;
    background-color: #183589 !important;
}

.badge-azul[href]:hover, .badge-azul[href]:focus {
    color: #FFFFFF !important;
    background-color: #142b6e !important;
}

.bg-azul {
    color: #FFFFFF !important;
    background-color: #183589 !important;
}

a.bg-azul:hover, a.bg-azul:focus,
button.bg-azul:hover,
button.bg-azul:focus {
    background-color: #142b6e !important;
}

.border-azul {
    border-color: #183589 !important;
}

.btn-azul {
    color: #FFFFFF !important;
    background-color: #183589 !important;
    border-color: #183589 !important;
}

.btn-azul:hover {
    color: #FFFFFF !important;
    background-color: #16307c !important;
    border-color: #183589 !important;
}

.btn-azul:focus, .btn-azul.focus {
    box-shadow: 0 0 0 0.2rem rgba(24,53,137,0.5) !important;
}

.btn-azul.disabled, .btn-azul:disabled {
    color: #FFFFFF !important;
    background-color: #183589 !important;
    border-color: #183589 !important;
}

.btn-azul:not(:disabled):not(.disabled):active, .btn-azul:not(:disabled):not(.disabled).active, .show > .btn-azul.dropdown-toggle {
    color: #FFFFFF !important;
    background-color: #142b6e !important;
    border-color: #112660 !important;
}

.btn-azul:not(:disabled):not(.disabled):active:focus, .btn-azul:not(:disabled):not(.disabled).active:focus, .show > .btn-azul.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(24,53,137,0.5) !important;
}

.btn-outline-azul {
    color: #183589 !important;
    background-color: transparent !important;
    border-color: #183589 !important;
}

.btn-outline-azul:hover {
    color: #FFFFFF !important;
    background-color: #183589 !important;
    border-color: #183589 !important;
}

.btn-outline-azul:focus, .btn-outline-azul.focus {
    box-shadow: 0 0 0 0.2rem rgba(24,53,137,0.5) !important;
}

.btn-outline-azul.disabled, .btn-outline-azul:disabled {
    color: #183589 !important;
    background-color: transparent !important;
}

.btn-outline-azul:not(:disabled):not(.disabled):active, .btn-outline-azul:not(:disabled):not(.disabled).active, .show > .btn-outline-azul.dropdown-toggle {
    color: #FFFFFF !important;
    background-color: #183589 !important;
    border-color: #183589 !important;
}

.btn-outline-azul:not(:disabled):not(.disabled):active:focus, .btn-outline-azul:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-azul.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(24,53,137,0.5) !important;
}

.list-group-item-azul {
    color: #0c1b45 !important;
    background-color: #bac3dc !important;
}

.list-group-item-azul.list-group-item-action:hover, .list-group-item-azul.list-group-item-action:focus {
    color: #0c1b45 !important;
    background-color: #a3afd0 !important;
}

.list-group-item-azul.list-group-item-action.active {
    color: #FFFFFF !important;
    background-color: #0c1b45 !important;
    border-color: #0c1b45 !important;
}

.table-azul {
    --bs-table-bg: #8c9ac4 !important;
    --bs-table-striped-bg: #bac3dc !important;
    --bs-table-active-bg: #5e72ad !important;
    --bs-table-hover-bg: #7586b9 !important;
    border-color: #475ea1 !important;
}

.text-azul {
    color: #183589 !important;
}

a.text-azul:hover, a.text-azul:focus {
    color: #142b6e !important;
}

.link-azul {
    color: #183589 !important;
}

a.link-azul:hover, a.link-azul:focus {
    color: #142b6e !important;
}


/* GRIS --------------------------------------------------------- */
.alert-gris {
    color: #77767a !important;
    background-color: #fcfcfd !important;
    border-color: #fafafc !important;
}

.alert-gris hr {
    border-top-color: #f8f8fb !important;
}

.alert-gris .alert-link {
    color: #484749 !important;
}

.badge-gris {
    color: #000000 !important;
    background-color: #edecf3 !important;
}

.badge-gris[href]:hover, .badge-gris[href]:focus {
    color: #000000 !important;
    background-color: #bebdc3 !important;
}

.bg-gris {
    color: #000000 !important;
    background-color: #edecf3 !important;
}

a.bg-gris:hover, a.bg-gris:focus,
button.bg-gris:hover,
button.bg-gris:focus {
    background-color: #bebdc3 !important;
}

.border-gris {
    border-color: #edecf3 !important;
}

.btn-gris {
    color: #000000 !important;
    background-color: #edecf3 !important;
    border-color: #edecf3 !important;
}

.btn-gris:hover {
    color: #000000 !important;
    background-color: #d6d5db !important;
    border-color: #edecf3 !important;
}

.btn-gris:focus, .btn-gris.focus {
    box-shadow: 0 0 0 0.2rem rgba(237,236,243,0.5) !important;
}

.btn-gris.disabled, .btn-gris:disabled {
    color: #000000 !important;
    background-color: #edecf3 !important;
    border-color: #edecf3 !important;
}

.btn-gris:not(:disabled):not(.disabled):active, .btn-gris:not(:disabled):not(.disabled).active, .show > .btn-gris.dropdown-toggle {
    color: #000000 !important;
    background-color: #bebdc3 !important;
    border-color: #a6a6ab !important;
}

.btn-gris:not(:disabled):not(.disabled):active:focus, .btn-gris:not(:disabled):not(.disabled).active:focus, .show > .btn-gris.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(237,236,243,0.5) !important;
}

.btn-outline-gris {
    color: #edecf3 !important;
    background-color: transparent !important;
    border-color: #edecf3 !important;
}

.btn-outline-gris:hover {
    color: #000000 !important;
    background-color: #edecf3 !important;
    border-color: #edecf3 !important;
}

.btn-outline-gris:focus, .btn-outline-gris.focus {
    box-shadow: 0 0 0 0.2rem rgba(237,236,243,0.5) !important;
}

.btn-outline-gris.disabled, .btn-outline-gris:disabled {
    color: #edecf3 !important;
    background-color: transparent !important;
}

.btn-outline-gris:not(:disabled):not(.disabled):active, .btn-outline-gris:not(:disabled):not(.disabled).active, .show > .btn-outline-gris.dropdown-toggle {
    color: #000000 !important;
    background-color: #edecf3 !important;
    border-color: #edecf3 !important;
}

.btn-outline-gris:not(:disabled):not(.disabled):active:focus, .btn-outline-gris:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-gris.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(237,236,243,0.5) !important;
}

.list-group-item-gris {
    color: #77767a !important;
    background-color: #fafafc !important;
}

.list-group-item-gris.list-group-item-action:hover, .list-group-item-gris.list-group-item-action:focus {
    color: #77767a !important;
    background-color: #f8f8fb !important;
}

.list-group-item-gris.list-group-item-action.active {
    color: #000000 !important;
    background-color: #77767a !important;
    border-color: #77767a !important;
}

.table-gris {
    --bs-table-bg: #f6f6f9 !important;
    --bs-table-striped-bg: #fafafc !important;
    --bs-table-active-bg: #f3f2f7 !important;
    --bs-table-hover-bg: #f5f4f8 !important;
    border-color: #f1f0f6 !important;
}

.text-gris {
    color: #edecf3 !important;
}

a.text-gris:hover, a.text-gris:focus {
    color: #bebdc3 !important;
}

.link-gris {
    color: #edecf3 !important;
}

a.link-gris:hover, a.link-gris:focus {
    color: #bebdc3 !important;
}

/* FUENTES ------------- */
.space-grotesk-font {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

:root {
    --default-font: "Space Grotesk",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Space Grotesk",  sans-serif;
    --nav-font: "Space Grotesk",  sans-serif;

    --verde: #00d1c9;
    --azul: #183589;
    --gris: #bebdc3;
    --grisclaro: #e3e2e7;
    --default-color: #ffffff;
    --contrast-color: #1b1b56;
}

body {
    font-family: var(--default-font);
}
.display-4 {
    line-height: 1.1;
}

.card .badge a {
    color: #fff;
    font-weight: 100;
}
a {
    color: var(--verde);
    text-decoration: underline;
}
a:hover {
    color: var(--azul);
}
/* NAVBAR ------------- */
.navbar-logo {
    width: auto;
    height: 46px;
}

#menu-principal li a{
    color: #fff;
}
#menu-principal li a:hover{
    color: var(--verde);
}

.navbar .btn-getstarted,
.navbar .btn-getstarted:focus {
  color: var(--default-color);
  font-size: 14px;
  padding: 8px 30px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  border: 2px solid var(--verde);
}

.navbar .btn-getstarted:hover,
.navbar .btn-getstarted:focus:hover {
  color: var(--default-color);
  background: var(--verde);
}

  .navbar .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
    text-decoration: none;
}

ul.dropdown-menu {
    border: none;
    border-radius: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}
.dropdown-menu a.dropdown-item {
    color: var(--azul) !important;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--default-color);
    background-color: var(--verde);
}

/* hacer el dropdown on hover */
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .55em;
    vertical-align: 0;
    content: "\F282";
    font-family: "bootstrap-icons";
    font-size: .7em;
    border: none;
}


/* EFFECT ICON BUTTONS --------- */
/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

/* HERO HOME ----------------- */
.hero {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 120px 0 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero:before, .hero-marcas:before {
    content: "";
    background: color-mix(in srgb, rgba(19, 19, 71, 0.8), transparent 30%);
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero .img-hero, .hero-marcas .img-hero {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.hero-text{
    z-index: 10;
}


/* home más noticias -------------------- 
imagenes ---------------------------------- */
.card-noticias .card-img-size {
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

small.text-secondary {
    font-weight: 100;
    font-size: 80%;
}

.card-noticias{
    border: solid 2px var(--grisclaro);
    transition: all .5s;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0);
}

.card-noticias:hover{
    /*border-color: var(--verde);*/
    background-color: var(--grisclaro);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);

}
.card-noticias .card-title a{
    text-decoration: none;
    background-color: transparent;
    background-size: 0px 2px;
    background-position: 0px 95%;
    transition: background-size 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
    transition: all .5s;
}
.card-noticias:hover .card-title a{
    color: var(--azul);
    background-size: 100% 2px;
    /*background-color: rgba(0,0,0,0.1);*/
    
}

.card-noticias:hover .card-img-size{
    transform: scale(1.2);
}



/* TITLES -------------------------------- */
.volanta-title::after {
    content: "";
    width: 120px;
    height: 1px;
    display: inline-block;
    background: var(--verde);
    margin: 4px 10px;
}

/* NOTA INDIVIDUAL ------------------------ */
.hero-ind {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 120px 0 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-ind .img-hero{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.index-post-category span.badge a{
    color: #fff;
    font-weight: 100;
    text-decoration: none;
}


/* FOOTER ------------------------------- */
.logo-footer{
    width: 150px;
    height: auto;
}