:root {
  --color-azul-fuerte: #002f59;
  --color-azul-claro: #009cad;
  --color-naranja: #fe560f;
  --color-naranja-obscuro: #d4470b;
  --color-verde: #77a90a;
  --color-verde-claro: #88c30a;
  --color-crema: #bfefaf;
  --color-blanco: #fff;
  --color-blanco-claro: #f4f7f9;
  --color-amarillo-claro: #fff3cd;
  --color-amarillo: #ffc10794;
  --color-amarillo-fuerte: #ffc107;
  --color-morado: #531f68;
  --color-crema: #fdf5e6a1;
  --color-negro: #444442;
  --color-morado: #8b4ed6;
  --color-morado-claro: #a670e8;

  --degradado-azul: linear-gradient(to right, #4567b7, #6495ed);

  --degradado-amarillo: linear-gradient(to right, #ffd700, #ffa500);
  --degradado-amarillo-2: linear-gradient(to right, #ffa500, #ffd700);
  --degradado-verde: linear-gradient(to right, #34c759, #8bc34a);
}

@font-face {
  font-family: "MyriadBold";
  src: url("fonts/MYRIADPRO-BOLD.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "RelewayMedium";
  src: url("fonts/Raleway-Medium.ttf") format("opentype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "RelewayBold";
  src: url("fonts/Raleway-Bold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "RelewayMedium", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-azul-fuerte);
  background-color: var(--color-blanco-claro);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "RelewayBold";
  color: var(--color-azul-fuerte);
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-verde);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.boton-primario {
  display: inline-block;
  padding: 5px 10px;
  background-color: var(--color-azul-fuerte);
  color: var(--color-blanco);
  text-decoration: none;
  border-radius: 5px;
  margin-top: 1rem;
  font-weight: bold;
}

.boton-primario:hover {
  color: var(--color-blanco);
  background-color: var(--color-negro);
  border-color: var(--bs-btn-hover-border-color);
  text-decoration: underline;
}

.py-9rem {
  padding-top: 9rem;
  padding-bottom: 3rem;
}
.py-4rem {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-05rem {
  padding-bottom: 0.5rem;
}

.bg-azul-fuerte {
  background-color: var(--color-azul-fuerte);
}
.color-azul-fuerte {
  color: var(--color-azul-fuerte);
}
.bg-naranja {
  background-color: var(--color-naranja);
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--color-blanco);
}
.bg-dark {
  background-color: var(--color-azul-fuerte);
}
.blanco {
  color: var(--color-blanco);
}

/* ---  banner --- */
.background-section-banner {
  background-color: var(--color-crema);
}
.banner {
  width: 100%;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 400px;
}

.fecha {
  color: var(--color-morado);
  font-size: 1.3rem;
  font-weight: bold;
}

.extra {
  font-size: 1rem;
  color: var(--color-azul-claro);
  line-height: 1;
}

.tituloevento {
  font-size: 2rem;
  color: var(--color-azul-fuerte);
  font-family: "RelewayBold";
}
.border-orange {
  border-color: var(--color-naranja) !important;
}

.w-80 {
  width: 80% !important;
}
/*banner*/
.icon-blanco {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1000%);
}

/* --- regional --- */
.background-section-regional {
  position: relative;
  padding: 50px 0;
  width: 100%;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.background-section-regional::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/regional.png");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.regional-text-container {
  color: white;
  font-family: "RelewayBold";
  line-height: 1;
}

.regional-text-container h2 {
  font-size: 3rem;
  margin: 0;
  color: var(--color-azul-fuerte);
  font-family: "RelewayBold";
}

.regional-text-container p {
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-azul-fuerte);
}

.background-section-registro {
  position: relative;
  padding: 50px 0;
  width: 100%;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 100px;
}

/*Footer*/

.footer {
  background-color: var(--color-crema);
}

.footer-contenido {
  padding-bottom: 20px;
}

.info-footer img {
  max-height: 120px;
  margin: 20px 0;
}

.derechos {
  background-color: var(--color-azul-fuerte);
  border-top: 1px solid #ddd;
  padding: 10px 0;
  text-align: center;
}

.derechos p {
  color: var(--color-blanco);
  margin-bottom: 0;
}
/*Footer*/

@media (max-width: 768px) {
  .background-section-banner .container.row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .background-section-banner .col-lg-7,
  .background-section-banner .col-md-7,
  .background-section-banner .col-sm-12,
  .background-section-banner .col-lg-5,
  .background-section-banner .col-md-5 {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
  }

  .background-section-banner img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  .background-section-banner .info-container {
    padding: 10px 20px;
  }

  .background-section-banner .tituloevento {
    font-size: 1.4rem;
  }

  .background-section-banner .fecha,
  .background-section-banner .extra {
    font-size: 1rem;
  }
  .background-section-banner .col-lg-5,
  .background-section-banner .col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .w-80 {
    width: 100% !important;
  }
  .background-section-banner .col-lg-5,
  .background-section-banner .col-md-5,
  .background-section-banner .col-sm-12 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 20px;
    text-align: center;
  }

  .background-section-banner .info-container {
    width: 100%;
    max-width: 400px;
    padding: 10px 20px;
  }

  .background-section-banner .tituloevento span {
    margin: 0 auto;
  }
  .regional-text-container {
    width: 80%;
  }
}