:root {
  --bs-body-bg: transparent;
}

html {
  font-size: 20px;
}

body {
  font-family: "Roboto";
  font-size: 20px;
}

.icono-redes {
  height: 45px;
  width: 45px;
}

a {
  color: #652680;
}

a:focus,
a:active,
a:hover,
button:focus,
button:active,
button:hover {
  outline: 2px solid #ffffff !important;
  outline-offset: 4px;
}

/* ==== SCROLL TO TOP ==== */
#scroll-to-top {
  background: transparent;
  border: none;
  border-radius: 100%;
  bottom: 80px;
  box-shadow: 0px 6px 21px -5px rgba(11, 6, 31, 0.47);
  -webkit-box-shadow: 0px 6px 21px -5px rgba(11, 6, 31, 0.47);
  -moz-box-shadow: 0px 6px 21px -5px rgba(11, 6, 31, 0.47);
  cursor: pointer;
  display: none;
  float: right;
  height: 55px;
  padding: 0;
  position: fixed;
  right: 40px;
  width: 55px;
  z-index: 9999;
}

#scroll-to-top:hover {
  text-decoration: none;
}

/* header */
header {
  background-color: #286254;
  border-bottom: 2px solid #fff6e8;
  -webkit-box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%28255, 246, 232, 1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

@media (max-width: 1199.9px) {
  #header a.navbar-brand > img {
    width: 200px;
  }
}

#menu_p .nav-link {
  color: #fff6e8;
  font-size: 19px;
  font-weight: 400;
  padding-left: 20px;
  padding-right: 20px;
}

#menu_p .nav-link.active {
  outline: 2px solid #fff !important;
  outline-offset: 4px;
}

@media (min-width: 992px) {
  #menu_p .nav-link {
    margin: 0 10px;
  }
}

@media (max-width: 991.9px) {
  #menu_p .nav-link {
    margin: 10px 0;
  }
}

/* footer */
footer {
  background-color: #fff;
  margin: 0 auto;
}

footer a:focus,
footer a:active,
footer a:hover {
  outline: 2px solid #000 !important;
  outline-offset: 4px;
}

.footer-title {
  color: #000;
  font-size: 22px;
  font-weight: 500;
}

.footer-text {
  color: #2d2d2d;
  font-size: 18px;
  font-style: normal;
}

@media (max-width: 1144.98px) {
  .accordion-button {
    padding: 0px !important;
  }
}

@media (max-width: 768.98px) {
  body {
    font-size: 18px;
  }

  .footer-title {
    font-size: 22px;
    font-weight: 500;
  }

  .footer-text {
    font-size: 18px;
    font-weight: 400;
  }

  #navegacion-lineas h2 {
    font-size: 30px !important;
  }

  .img-navegación {
    width: 60px !important;
  }

  .navegacion-lineas-texto {
    font-size: 30px;
  }

  .btn {
    font-size: 22px !important;
  }

  .tab-pane {
    font-size: 20px !important;
  }

  div.tab-pane div.card {
    font-size: 20px !important;
  }

  .img-mpa {
    width: 60px !important;
  }

  .mapas-interactivos-texto {
    font-size: 20px !important;
  }

  .mapas-interactivos-texto.big {
    font-size: 22px !important;
  }

  #mapas-interactivos h2 {
    font-size: 30px !important;
  }

  #mapas-interactivos h3 {
    font-size: 28px !important;
  }

  .d-aviso {
    align-items: center;
    background-color: #301704;
    border: 2px solid #ffffff;
    border-radius: 7px;
    color: #ffffff;
    display: FLEX !important;
    font-family: "Roboto";
    font-size: 20px;
    font-weight: 400px;
    padding: 10px;
    text-align: left;
  }

  .img-aviso {
    height: 50px;
    margin-right: 10px;
    width: 50px;
  }

  .texto-aviso {
    flex: 1;
    /* Para que el texto ocupe el espacio disponible */
  }

  .accordion-button {
    padding: 0px !important;
  }
}

#navegacion-lineas {
  background: rgb(137, 84, 40);
  background: linear-gradient(
    180deg,
    rgba(137, 84, 40, 1) 0%,
    rgba(68, 86, 83, 1) 100%
  );
}

#navegacion-lineas iframe body {
  margin: 0;
}


.navegacion-lineas-titulo {
  background-color: #72461f;
}

.navegacion-lineas-texto {
  color: #fff;
}

#navegacion-lineas h2 {
  color: #ffffff;
  font-family: "PT Serif";
  font-size: 55px;
}

.img-navegación {
  width: 84px;
}

.d-aviso {
  display: none;
}

ul#pills-tab > li {
  min-height: 75px;
}

.btn-lineas {
  background-color: #4d3019;
  border: 0 !important;
  border-radius: 9px !important;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
}

.btn:hover {
  color: #fff !important;
}

.btn-red:hover,
.btn-red.active {
  background-color: #780d0b !important;
}

.btn-green:hover,
.btn-green.active {
  background-color: #4a8353 !important;
}

.btn-blue:hover,
.btn-blue.active {
  background-color: #566da0 !important;
}

.btn-purple:hover,
.btn-purple.active {
  background-color: #740970 !important;
}

div.tab-pane div.card {
  border: 0;
  border-radius: 7px;
  color: #fff;
}

div.card-red {
  background-color: #780d0b;
}

div.card-green {
  background-color: #4a8353;
}

div.card-blue {
  background-color: #566da0;
}

div.card-purple {
  background-color: #740970;
}

#tips-navegacion h3 {
  font-family: 'Roboto';
  font-size: 25px;
}

#tips-navegacion {
  background-color: #5b4534;
  border-radius: 14px;
}

#tips-navegacion .tip {
  color: #FFFFFF;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  background-color: #4f3e33;
}

#mapas-interactivos {
  background: rgb(61, 77, 81);
}

.mapas-interactivos-titulo {
  background-color: #064d4f;
}

#mapas-interactivos h2 {
  color: #fff;
  font-family: "PT Serif";
  font-size: 55px;
}

#mapas-interactivos-titulo-fondo {
  background-image: url(/exposiciones/lineas-tiempo/img/fondo-azul.jpg);
  background-position-y: -50px;
  height: 490px;
}

.img-mpa {
  width: 84px;
}

@media (max-width: 991.9px) {
  #mapas-interactivos-titulo-fondo {
    background-image: url(/exposiciones/lineas-tiempo/img/fondo-azul-tabletas.jpg);
    background-position-y: 0;
    height: 280px;
  }
}

@media (max-width: 575.9px) {
  #mapas-interactivos-titulo-fondo {
    background-image: url(/exposiciones/lineas-tiempo/img/fondo-azul-smartphones.jpg);
  }

  .bdsc-header {
    justify-items: center;
    width: 200px;
  }

  .scjn-moviles {
    display: none !important;
  }

  .bdsc-c {
    justify-content: center;
  }

  .img-bd {
    width: 230px;
  }

  .img-scjn {
    width: 225px;
  }

  .img-navegación {
    width: 35px !important;
  }

  .d-aviso {
    align-items: center;
    background-color: #301704;
    border: 2px solid #ffffff;
    border-radius: 7px;
    color: #ffffff;
    display: flex !important;
    font-family: "Roboto";
    font-size: 20px;
    font-weight: 400px;
    padding: 10px;
    text-align: left;
  }

  .img-aviso {
    height: 50px;
    margin-right: 10px;
    width: 50px;
  }

  .texto-aviso {
    flex: 1;
    /* Para que el texto ocupe el espacio disponible */
  }

  .accordion-button {
    padding: 0px !important;
  }
}

#mapas-interactivos-fondo {
  background: rgb(61, 77, 81);
  background: linear-gradient(
    180deg,
    rgba(61, 77, 81, 1) 0%,
    rgba(101, 82, 53, 1) 100%
  );
}

#mapas-interactivos h3 {
  color: #ffffff;
  font-family: "PT Serif";
  font-size: 50px;
}

.mapas-interactivos-texto {
  color: #fff;
}

.mapas-interactivos-texto.big {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

/* ==============================
  Título separado en renglones
================================= */
div#lineas-tiempo .renglon1 {
  color: #022a1f;
  font-family: "PT Serif";
  font-size: 70px;
  font-weight: 500;
  text-transform: none;
}

div#lineas-tiempo .renglon2 {
  color: #000000;
  font-family: "PT Serif";
  font-size: 70px;
  font-weight: 500;
  text-transform: none;
}

.italic {
  color: #ffffff;
  font-family: "Roboto";
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
}

.video-bg {
  background-image: url(/exposiciones/lineas-tiempo/img/fondo-video.jpg);
}

.fondo-e8be91 {
  background-color: #e8be91;
}

/* ======================
  Encabezado h2
========================= */
.lt-font-h2 {
  background-color: #72461f;
  color: #ffffff;
  font-family: "PT Serif";
  font-size: 72px;
  font-weight: 400;
  text-transform: none !important;
}

/*=============================
  Créditos
=============================*/

#accordionExample .accordion-button::after {
  background-image: url(/exposiciones/lineas-tiempo/img/mas-icono.svg);
  background-position: center;
  background-size: 45px;
  height: 45px;
  margin-left: 50px;
  width: 45px;
}

#accordionExample .accordion-button:not(.collapsed)::after {
  background-image: url(/exposiciones/lineas-tiempo/img/menos-icono.svg);
}

#accordionExample .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  box-shadow: none !important;
}

.fondo-creditos {
  background-image: url(/exposiciones/lineas-tiempo/img/fondo-creditos.jpg);
  min-height: 465px;
}

@media (max-width: 991.9px) {
  .fondo-creditos {
    background-image: url(/exposiciones/lineas-tiempo/img/fondo-creditos-tabletas.jpg);
    background-position-y: 40px;
    min-height: 280px;
  }
}

@media (max-width: 575.9px) {
  .fondo-creditos {
    background-image: url(/exposiciones/lineas-tiempo/img/fondo-creditos-smartphones.jpg);
  }
}

.creditos-titulo {
  background-color: #4f3f2a;
}

.btnCreditos {
  background-color: transparent;
  border: none !important;
  border-radius: unset;
  text-decoration: none;
}

.btnCreditos > h2 {
  color: #fff;
  font-family: "PT Serif";
  font-size: 55px;
  font-weight: 400;
}

#creditos-agradecimientos .btnCreditos:hover,
.btnCreditos:focus {
  background: #4f3f2a;
  color: #ffffff;
  outline: 2px solid #ffffff !important;
  outline-offset: 4px;
}

.img-ini {
  /* Centra verticalmente */
  height: auto;
  left: -100px;
  position: absolute;
  /* Ajusta el valor para mover la imagen más a la izquierda si es necesario */
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
}

.img-ini-cred {
  width: 84px;
}

.h1-lineas {
  display: inline-block;
  position: relative;
  text-align: center;
  /* Evita que ocupe todo el ancho */
}

.img-creditos {
  height: 45px;
  width: 45px;
}

.fondo-655235 {
  background-color: #655235;
}

h3.title {
  color: #ffffff;
  font-family: "PT Serif";
  font-size: 50px;
}

h4.title {
  color: #ffffff;
  font-family: "PT Serif";
  font-size: 40px;
}

.text-bold {
  color: #ffffff;
  font-weight: 500;
}

.text-creditos {
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
}

.card.card-body.cred {
  border-radius: 0px;
}

.m-top {
  margin-top: 5px;
}

@media (max-width: 768.98px) {
  h3.title {
    font-size: 28px;
    font-weight: 400;
    text-transform: none;
  }

  h4.title {
    font-size: 26px;
    font-weight: 400;
  }

  .text-bold {
    font-size: 20px;
    font-weight: 500;
  }

  .text-creditos {
    font-size: 20px;
    font-weight: 400;
  }

  .italic {
    font-size: 20px !important;
  }

  .btnCreditos > h2 {
    color: #ffffff;
    font-family: "PT Serif";
    font-size: 30px;
    font-weight: 400;
  }

  .img-ini {
    left: -55px;
    width: 60px;
  }

  .img-ini-cred {
    width: 60px;
  }

  .img-creditos {
    height: 35px;
    width: 35px;
  }

  div#lineas-tiempo .renglon1 {
    font-size: 34px;
  }

  div#lineas-tiempo .renglon2 {
    font-size: 34px;
  }

  .p-intro {
    font-size: 20px;
  }

  #accordionExample .accordion-button::after {
    background-size: 35px;
  }
}

@media (max-width: 575.9px) {
  h3.title {
    font-size: 28px;
    font-weight: 400;
    text-transform: none;
  }

  h4.title {
    font-size: 26px;
    font-weight: 400;
  }

  .text-bold {
    font-size: 20px;
    font-weight: 500;
  }

  .text-creditos {
    font-size: 20px;
    font-weight: 400;
  }

  .italic {
    font-size: 20px !important;
  }

  .btnCreditos > h2 {
    color: #ffffff;
    font-family: "PT Serif";
    font-size: 30px;
    font-weight: 400;
  }

  .img-ini {
    display: none;
  }

  .img-ini-cred {
    width: 35px;
  }

  .img-creditos {
    height: 35px;
    width: 35px;
  }

  div#lineas-tiempo .renglon1 {
    font-size: 32px;
  }

  div#lineas-tiempo .renglon2 {
    font-size: 32px;
  }

  .p-intro {
    font-size: 20px;
  }

  #accordionExample .accordion-button::after {
    background-size: 35px;
  }
}

@media (min-width: 768.9px) and (max-width: 991.9px) {
  div#lineas-tiempo .renglon1 {
    font-size: 54px;
  }

  div#lineas-tiempo .renglon2 {
    font-size: 54px;
  }

  .btnCreditos > h2 {
    font-size: 50px;
  }

  #navegacion-lineas h2 {
    font-size: 50px;
  }

  #mapas-interactivos h2 {
    font-size: 50px;
  }

  #mapas-interactivos h3 {
    font-size: 45px !important;
  }

  h3.title {
    font-size: 45px;
  }

  h4.title {
    font-size: 38px;
  }
}