@charset "utf-8";
/* CSS Document */

#gallery {
  padding-top: 40px;

  @media screen and (min-width: 991px) {
    padding: 60px 30px 0 30px;
  }
}

.img-wrapper {
  position: relative;
  margin-top: 50px;

  img {
    width: 100%;
  }
}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;

  i {
    color: #fff;
    font-size: 3em;
  }
}

.img-w img {
  width: 100%;
  /* Obliga a la imagen a ocupar el ancho de la columna col-lg-8 */
  height: 450px;
  /* Define la altura fija que desees */
  object-fit: cover;
  /* TRUCO CLAVE: Corta los bordes sobrantes sin deformar la foto */
  object-position: center;
  /* Centra la imagen en el recorte */
  display: block;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 799;
  /*original 999*/
  // Removes blue highlight
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  img {
    margin: 0;
    width: 80%;
    height: auto;
    object-fit: contain;
    padding: 5%;

    @media screen and (min-width:768px) {
      width: 60%;
    }

    @media screen and (min-width:1200px) {
      width: 50%;
    }
  }
}

#nextButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;

  &:hover {
    opacity: 0.7;
  }

  @media screen and (min-width:768px) {
    font-size: 3em;
  }
}

#prevButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;

  &:hover {
    opacity: 0.7;
  }

  @media screen and (min-width:768px) {
    font-size: 3em;
  }
}

#exitButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  position: absolute;
  top: 15px;
  right: 15px;

  &:hover {
    opacity: 0.7;
  }

  @media screen and (min-width:768px) {
    font-size: 3em;
  }
}

/* --- FUNDAMENTOS --- */
body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #262422;
  /* Dark Shade */
  background-color: #FFFDF1;
  /* Ivory */
  line-height: 1.7;
}

/* --- TÍTULOS --- */
.main-heading {
  font-weight: 700;
  color: #262422;
  /* Dark Shade */
  letter-spacing: -0.5px;
  margin-bottom: 20px !important;
}

hr {
  border: 0;
  border-top: 3px solid #EC5E28;
  /* Deep Orange */
  width: 40px;
  margin: 10px 0 20px 0;
}

/* --- CONTENEDORES --- */
.company-overview-wrapper {
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #CCC7BB;
  /* Sand */
  box-shadow: 0 10px 25px rgba(65, 61, 56, 0.05);
  /* Charcoal suave */
}

/* --- BREADCRUMB --- */
.breadcrumb-section.about {
  background-color: #413D38 !important;
  /* Charcoal */
  color: #FFFDF1 !important;
  padding: 60px 0;
}

.breadcrumb-item a {
  color: #CCC7BB !important;
  /* Sand */
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.breadcrumb-item.active a {
  color: #FA7B24 !important;
  /* Liquid Lava */
}

.breadcrumb-wrapper h2 {
  color: #FFFDF1;
  font-weight: 800;
  font-size: 2.5rem;
}

/* --- GALERÍA Y OVERLAY --- */
.img-wrapper {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 25px;
  background-color: #262422;
}

.img-wrapper img {
  transition: all 0.5s ease;
  filter: grayscale(20%);
  /* Un toque cinemático */
}

.img-wrapper:hover img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.img-overlay {
  background: rgba(236, 94, 40, 0.85) !important;
  /* Deep Orange con transparencia */
}

/* --- ACORDEÓN --- */
.card-header {
  background-color: #FFFDF1 !important;
  border-bottom: 1px solid #CCC7BB !important;
}

.btn-link {
  color: #262422 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

.btn-link:hover {
  color: #EC5E28 !important;
  /* Deep Orange */
}

/* --- LISTAS Y DETALLES --- */
.icon-ss {
  color: #EC5E28;
  /* Deep Orange */
}

.text-ss {
  font-weight: 500;
  color: #413D38;
}

/* Botón de Calendario (específico) */
h2.main-heading a {
  transition: color 0.3s ease;
}

h2.main-heading a:hover {
  color: #262422 !important;
}

/* --- FUNDAMENTOS OSCUROS --- */
body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #CCC7BB;
  /* Sand: texto suave para no cansar la vista */
  background-color: #262422;
  /* Dark Shade: Fondo principal */
  line-height: 1.7;
}

/* --- TÍTULOS --- */
.main-heading {
  font-weight: 700;
  color: #FFFDF1;
  /* Ivory: Títulos brillantes */
  letter-spacing: -0.5px;
  margin-bottom: 20px !important;
}

hr {
  border: 0;
  border-top: 3px solid #EC5E28;
  /* Deep Orange */
  width: 50px;
  margin: 10px 0 25px 0;
  opacity: 1;
}

/* --- CONTENEDORES (TARJETAS OSCURAS) --- */
.company-overview-wrapper {
  background: #413D38;
  /* Charcoal: Un tono ligeramente más claro que el fondo */
  padding: 30px;
  border-radius: 12px;
  border: 1px solid rgba(204, 199, 187, 0.1);
  /* Borde sutil en Sand */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* --- BREADCRUMB --- */
.breadcrumb-section.about {
  background-color: #1a1817 !important;
  /* Casi negro para profundidad */
  border-bottom: 1px solid #413D38;
  padding: 50px 0;
}

.breadcrumb-item a {
  color: #CCC7BB !important;
  opacity: 0.8;
}

.breadcrumb-item.active a {
  color: #EC5E28 !important;
  /* Deep Orange */
}

.breadcrumb-wrapper h2 {
  color: #FFFDF1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- GALERÍA --- */
.img-wrapper {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 25px;
  border: 1px solid #413D38;
  background-color: #000;
}

.img-wrapper img {
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.85;
  /* Un poco más oscuro por defecto */
}

.img-wrapper:hover img {
  transform: scale(1.05);
  opacity: 1;
  /* Brilla al pasar el mouse */
}

.img-overlay {
  background: rgba(236, 94, 40, 0.9) !important;
  /* Deep Orange sólido */
}

/* --- ACORDEÓN DARK --- */
.card {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(204, 199, 187, 0.1) !important;
}

.card-header {
  background-color: transparent !important;
}

.btn-link {
  color: #FFFDF1 !important;
  /* Ivory */
  font-weight: 600 !important;
  text-decoration: none !important;
}

.btn-link:hover {
  color: #EC5E28 !important;
}

/* --- LISTAS Y DETALLES --- */
.icon-ss {
  color: #EC5E28;
  /* Deep Orange */
}

.text-ss {
  color: #CCC7BB;
  /* Sand */
}

/* Estilo para los párrafos descriptivos */
p {
  color: #CCC7BB;
  font-weight: 300;
}

/* Ajuste para el link de Google Calendar */
.main-heading a {
  color: #EC5E28 !important;
  text-decoration: none;
  transition: 0.3s;
}

.main-heading a:hover {
  color: #FFFDF1 !important;
  padding-left: 5px;
}