/* Color */

:root {
  --primary: #1e3a8a;
  --secondary: #3B82F6;
  --highlight: #60A5FA;
  --complementary: #5EEAD4;
  --background: #E5E7EB;
  --text: #374151;
  --white: #eff5ff;
}

.color-primary {  color: var(--primary) !important;  }
.color-secondary {  color: var(--secondary) !important;  }
.color-highlight { color: var(--highlight) !important; }
.color-complementary {  color: var(--complementary) !important;  }
.color-background { color: var(--background) !important; }
.color-text { color: var(--text) !important; }
.color-white { color: var(--white) !important; }
.bg-primary { background: var(--primary) !important;  }
.bg-secondary { background: var(--secondary) !important;  }
.bg-highlight { background: var(--highlight) !important; }
.bg-complementary { background: var(--complementary) !important;  }
.bg-background { background: var(--background) !important; }
.bg-text { background: var(--text) !important; }
.bg-white { background: var(--white) !important; }


/* Global styles */

body {
  padding-top: 75px;
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.fw-bold {
  font-weight: 600 !important;
}

.filter-invert-color {
  filter: invert(100%);
}

#menu-principal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* para que esté encima del resto */
}

.portrait.carousel .carousel-item img {
  height: 500px;
  object-fit: contain;
}

img.portrait {
  object-fit: contain;
}

.portrait.gallery-img {
  height: 250px;
}

.gallery-img {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  padding: 6px;
}

.content-center {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.category-link {
  color: var(--highlight) !important;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.category-link.active {
  background-color: var(--complementary) !important;
}

.category-link:hover {
  text-decoration: underline;
}

.category-section:target {
  display: block !important;
}


.big-badge {
  font-size: 1em;
  /* O el tamaño deseado para el badge */
  padding: 0.3em 0.3em;
  /* o el margen deseado para el badge */
  background-color: var(--complementary) !important;
  color: var(--highlight);
}

.img-link {
  display: inline-block;
  border-radius: 8px;
  padding: 10px;
  border: none;
  box-shadow: none;
  transition: transform 0.3s, border 0.3s, box-shadow 0.3s;
  transform: scale(1);
}

.img-link:hover {
  border: 1px solid var(--highlight);
  box-shadow: 0 0 15px var(--highlight);
  transform: scale(1.1);
}

.product-list-icon {
  color: #5a7080;
}

/* Submenú anidado visible al pasar el mouse */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
  margin-top: -0.5rem;
  display: none;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

/* Eliminar la flecha ▼ que agrega Bootstrap */
.dropdown-submenu>a.dropdown-item::after {
  display: none !important;
}

.product-img {
  width: 100px;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.product-item {
  text-align: center;
  margin: 0.5rem;
}

.product-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.nav-link:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  margin-top: -3px;
}