:root {
  --color-primary: #FFFFFF;
  --color-rojo-1: #860303;
  --color-rojo-2: #b10203;
  --color-rojo-3: #f90000;
  --color-naranja-1: #f08901;
  --color-naranja-2: #fbae01;
  --color-naranja-3: #fbd100;
  --color-gris-0: #262626;
  --color-gris-1: #393939;
  --color-gris-2: #686868;
  --color-gris-3: #c3c3c3;
  --color-gris-4: #F1F4F8;
}

.c-rojo-1 {
  color: var(--color-rojo-1);
}

.c-rojo-2 {
  color: var(--color-rojo-2);
}

.c-rojo-3 {
  color: var(--color-rojo-3);
}

.bg-rojo-1 {
  background: var(--color-rojo-1);
}

.bg-rojo-2 {
  background: var(--color-rojo-2);
}

.bg-rojo-3 {
  background: var(--color-rojo-3);
}

.c-naranja-1 {
  color: var(--color-naranja-1);
}

.c-naranja-2 {
  color: var(--color-naranja-2);
}

.c-naranja-3 {
  color: var(--color-naranja-3);
}

.bg-naranja-1 {
  background: var(--color-naranja-1);
}

.bg-naranja-2 {
  background: var(--color-naranja-2);
}

.bg-naranja-3 {
  background: var(--color-naranja-3);
}

.c-gris-0 {
  color: var(--color-gris-0);
}

.c-gris-1 {
  color: var(--color-gris-1);
}

.c-gris-2 {
  color: var(--color-gris-2);
}

.c-gris-3 {
  color: var(--color-gris-3);
}

.bg-gris-0 {
  background: var(--color-gris-0);
}

.bg-gris-1 {
  background: var(--color-gris-1);
}

.bg-gris-2 {
  background: var(--color-gris-2);
}

.bg-gris-3 {
  background: var(--color-gris-3);
}

.bg-gris-4 {
  background: var(--color-gris-4);
}

@font-face {
  font-family: "Metropolis";
  src: url("../font/Metropolis-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../font/Metropolis-RegularItalic.otf");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("../font/Metropolis-Thin.otf");
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../font/Metropolis-ThinItalic.otf");
  font-weight: lighter;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("../font/Metropolis-SemiBold.otf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../font/Metropolis-SemiBoldItalic.otf");
  font-weight: bold;
  font-style: italic;
}

body {
  /* font-family: 'Noto Sans', sans-serif; */
  font-family: "Metropolis", sans-serif;
  color: var(--color-gris-1);
}

html {
  scroll-behavior: smooth;
}


.navbar-toggler:focus {
  outline: unset;
}

/* .container-fluid {
  padding: 0;
} */

/* navbar */
.bg-special {
  font-size: 1.2rem;
  background-color: var(--color-primary);
}

.vh-10 {
  height: 10vh;
}

.dropdown-menu {
  background-color: var(--color-primary);
}

.dropdown-item {
  font-weight: bold;
  color: var(--color-gris-2);
}

.dropdown-item:focus, .dropdown-item:hover {
  /* color: var(--color-primary); */
  background-color: var(--color-gris-3);
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

.navbar {
  transition: all .5s ease-in-out;
}

.nav-item {
  border-radius: 4px;
  transition: .5s ease;
}

.nav-item:hover {
  background-color: var(--color-special);
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .8);
}

.nav-active {
  background-color: var(--color-special-dark);
}

.navbar-brand img {
  transition: all .8s ease-in-out;
}

/* Textos */
.titulo {
  font-size: calc(1.9rem + .9vw);
}

.titulo2 {
  font-size: calc(1.2rem + 1.2vw);
}

.sub-titulo {
  font-size: calc(.6rem + 1.2vw);
}

.sub-titulo2 {
  font-size: calc(.7rem + 1.2vw);
}

.btn-fuente {
  font-size: 1.2rem !important;
  font-weight: bold;
  padding-top: 0.6rem;
}

.nav-tabs .nav-link.active{
  background-color: var(--color-naranja-1);
  color: var(--color-primary);
}

.nav-tabs .nav-link {
  color: #262626;
  background-color: #FFFFFF;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
/* general */
.max-size {
  max-width: 900px;
}

.sombra-barra {
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}

.sombra-texto {
  text-shadow: 1px 1px 3px rgb(0, 0, 0, 60%);
}

/* Nuevos estilos */
.logo-nav {
  height: 70px;
}

.input-error {
  box-shadow: 0 0 0 3px rgb(220 53 69 / 50%) !important;
}

.mw-200 {
  min-width: 200px;
}

.fa-25x {
  font-size: 2.7em;
}

.fa-estilo {
  font-size: 1.5rem;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .logo-nav {
    height: 80px;
  }
}