@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS HEX */
--burgundy: #780519;
--linen: #f2e6d9;
--taupe-gray: #888b91;

/* CSS HEX */
--oxford-blue: #050a32;
--naranja: #ff9b00;
--lavender-web: #d5d5e5;

/* CSS HSL */
--oxford-blue: hsla(233, 82%, 11%, 1);
--naranja: hsla(36, 100%, 50%, 1);
--lavender-web: hsla(240, 24%, 87%, 1);

/* SCSS HEX */
$oxford-blue: #050a32;
$naranja: #ff9b00;
$lavender-web: #d5d5e5;

/* SCSS HSL */
$oxford-blue: hsla(233, 82%, 11%, 1);
$naranja: hsla(36, 100%, 50%, 1);
$lavender-web: hsla(240, 24%, 87%, 1);

/* SCSS RGB */
$oxford-blue: rgba(5, 10, 50, 1);
$naranja: rgba(255, 155, 0, 1);
$lavender-web: rgba(213, 213, 229, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-right: linear-gradient(90deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-bottom: linear-gradient(180deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-left: linear-gradient(270deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-top-right: linear-gradient(45deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-bottom-right: linear-gradient(135deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-top-left: linear-gradient(225deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-bottom-left: linear-gradient(315deg, #050a32ff, #ff9b00ff, #d5d5e5);
$gradient-radial: radial-gradient(#050a32ff, #ff9b00ff, #d5d5e5);

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
  font-family: "Raleway", sans-serif;
  padding-bottom: 0px !important;
}
p,ol,ul	{
  text-align: justify;
  hyphens: auto;
}

/* Estilo general (desktop por defecto) */
.custom-navbar {
  background: linear-gradient(315deg, rgb(5 10 50 / 95%) 75%, rgb(255 255 255 / 95%) 78%) !important;
  border-bottom: 3px solid #ff9b00;
  padding-bottom: 10px;
}
.desktop-logo {
  display: block;
}
.desktop-logo img {
  max-height: 95px; width: auto;
}
.mobile-logo {
  display: none;
}
.mobile-logo img {
  max-height: 100px;
  width: auto;
}
.txt-blanco, .txt-blanco a {
  color: #fff !important;
}
.txt-naranja, .txt-naranja a {
  color: #ff9b00 !important;
}
.no_links, .no_links a {
  text-decoration: none;
}
footer .txt-small a, footer .txt-small .active {
  font-size: smaller !important;
  border-bottom: none !important;
}

/* Estilo para móviles */
@media (max-width: 768px) {
  .spaced {
    padding-top: 100px !important;
    padding-bottom: 0px !important;
  }
  .custom-navbar {
    background: rgba(5, 10, 50, 1) !important;
  }
  .nav-item {
    text-align: center;
  }
  .desktop-logo {
    display: none;
  }
  .mobile-logo {
    display: block;
    margin: -10px;
  }
}

.lines-7 {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.5s ease-in-out;
  /* Transición suave */
  cursor: pointer;
  max-height: calc(1.5em * 7);
  /* Calcula altura aprox. según el line-height */
  line-height: 1.5em;
}

/* Al pasar el cursor, se expande */
.lines-XXX:hover {
  -webkit-line-clamp: unset;
  max-height: 1000px;
  /* Permite que crezca */
  overflow: visible;
}

.balazo {
  font-size: larger;
  margin-top: 15px;
  margin-bottom: 15px;
}

.nav-item {
  font-size: large;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.carousel-item {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-color: rgba(10, 50, 100, 1);
  !important;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }

  .navbar {
    height: 120px;
  }

  body {
    padding-top: 7.5rem !important;
  }

  .carousel-item {
    height: 25em !important;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: #0000001a;
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em #0000001a,
    inset 0 0.125em 0.5em #00000026;
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.nav-link {
  font-size: larger !important;
}

.btn-bd-primary {
  --bd-violet-bg: #0f4c86;
  --bd-violet-rgb: 15, 85, 184;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #0f4c86;
  --bs-btn-hover-border-color: #0f4c86;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #0f4c86;
  --bs-btn-active-border-color: #0f4c86;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .bi {
  width: 1em;
  height: 1em;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.card-img-top {
  margin-top: 10px;
}

.btn-primary {
  background-color: #0f4c86 !important;
}
.story {
  margin: .5rem 0 1.75rem 0;
  border-radius: 8px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.35);
  min-width: 100%;
}
.active {
  font-weight: bold !important;
  border-bottom: #ff9b00 3px solid !important;
}
.active_lan {
  font-weight: bold !important;
  color:#ff9b00;
  border: #ff9b00 1px dashed;
}
.lan {
  padding: 2px .5em 0px .5em;
  font-size: medium !important;
  font-weight: 300;
}
.divider {
	padding: .25em;
    height: 0.5em;
    background-image: url('https://totonacapan.com/img/plecaITAI.png');
    background-size: contain;
    background-repeat: repeat-x;
    background-position: top center;
    border: 0px;
    opacity: 1;
    margin: 0 0 2.5em 0;
}