/* -------------------------------------------------------------------------- */
/* ESTILOS GLOBALES / RESET */
/* -------------------------------------------------------------------------- */
/* Si tienes estilos generales aquí, manténlos */
/* -------------------------------------------------------------------------- */
/* ESTILOS PARA LA TOP BAR DE ICONOS SOCIALES */
/* -------------------------------------------------------------------------- */
.top-social-bar {
    background-color: #f8f9fa; /* Un gris muy claro para el fondo (ejemplo) */
    /* Puedes hacerlo transparente si lo prefieres: background-color: transparent; */
}

.top-social-bar .social-icon-link {
    font-size: 1.1rem; /* Tamaño un poco más pequeño para la top bar */
    color: #6c757d; /* Color de los iconos, un gris más discreto */
    transition: color 0.2s ease-in-out;
}

.top-social-bar .social-icon-link:hover {
    color: #065952; /* Tu verde de acento al pasar el ratón */
}

/* -------------------------------------------------------------------------- */
/* ESTILOS PRINCIPALES DEL NAVBAR */
/* -------------------------------------------------------------------------- */

/* Hacer el fondo del <nav> principal transparente */
#mainNav.navbar-custom {
    background-color: transparent; /* El <nav> en sí mismo es transparente */
    padding-top: 0;
    padding-bottom: 0;
}

/* Aplicar el fondo blanco y el padding al contenedor interno del navbar
   para que se alinee con el ancho del slider. */
#mainNav.navbar-custom > .container {
    background-color: #ffffff; /* Fondo blanco puro aplicado al área de contenido */
    padding-top: var(--bs-navbar-padding-y, 0.5rem); /* Padding vertical de Bootstrap */
    padding-bottom: var(--bs-navbar-padding-y, 0.5rem); /* Padding vertical de Bootstrap */
}


/* Color del texto de los enlaces del menú (DEFAULT para móvil, se sobrescribe en escritorio) */
.navbar-custom .nav-link {
    color: #343a40; /* Un gris oscuro, similar al text-dark de Bootstrap */
    padding: 0.5rem 0; /* Padding vertical para enlaces en móvil */
}

/* Estilo para el enlace activo (DEFAULT para móvil) */
.navbar-custom .nav-link.active {
    color: #065952; /* Verde para el enlace activo en móvil */
        font-weight: bold;
  }

/* Ajuste para el ícono del botón "hamburguesa" en dispositivos móviles (visible sobre fondo blanco) */
.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

/* Ajuste para el borde del botón "hamburguesa" */
.navbar-custom .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
    height: 160px;
    max-height: 160px;
    width: auto;
}

/* -------------------------------------------------------------------------- */
/* ESTILOS ESPECÍFICOS PARA ESCRITORIO (MENÚ COMO BOTONES) */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) { /* Aplica desde el breakpoint 'lg' de Bootstrap */

    /* Espaciado entre los ítems del menú */
    .navbar-custom .navbar-nav .nav-item {
        margin-left: 1rem; /* {{ AJUSTA ESTE VALOR para controlar la separación }} */
        /* Por ejemplo:
           margin-left: 1rem;   // Para más separación
           margin-left: 0.25rem; // Para menos separación
           margin-left: 20px;   // Puedes usar píxeles si lo prefieres
        */
    }

    /* Estilos de botón para todos los enlaces del menú en escritorio */
    .navbar-custom .navbar-nav .nav-link {
        display: inline-block; /* Permite aplicar padding y background como un bloque */
        padding: 0.5rem 1rem; /* Padding típico de botón de Bootstrap */
        background-color: #065952; /* Fondo verde solicitado */
        color: #ffffff; /* Texto blanco */
        border-radius: 0.375rem; /* Bordes ligeramente curvados (valor estándar de Bootstrap) */
        text-decoration: none; /* Eliminar subrayado de enlace */
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Transición suave para hover */
    }

    /* Estilo al pasar el ratón (hover) sobre los botones */
    .navbar-custom .navbar-nav .nav-link:not(.active):hover {
        background-color: #04433d; /* Un verde un poco más oscuro al pasar el ratón */
        color: #ffffff;
    }

    /* Estilo específico para el botón activo */
    .navbar-custom .navbar-nav .nav-link.active {
        background-color: #04433d; /* Un verde un poco más oscuro para el botón activo */
        color: #ffffff;
        font-weight: bold;
    }
}

/* ================================
   Carousel
================================ */
.carousel-container {
  /* max-width: 1200px; */
  margin: 0 auto 2rem;
  }

.carousel-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: #000;
  }

/* Caption debajo */
.carousel-caption-below {
  text-align: center;
  background-color: #e9ecef;
  padding: 1.2rem 1rem;
  border-top: 1px solid #dee2e6;
}

.carousel-caption-below h5 {
  color: #065952;
  font-weight: 600;
  margin-bottom: 0.3rem;
  }

.carousel-caption-below p {
  margin: 0;
  color: #333;
  }

/* Indicadores personalizados */
.carousel-indicators-custom {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  }

.carousel-indicators-custom button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: #065952; /* verde inactivo */
  opacity: 0.5;
  margin: 0 4px;
  transition: all 0.3s;
  }

.carousel-indicators-custom button.active {
  background-color: #fed136; /* amarillo activo */
  opacity: 1;
  transform: scale(1.3);
  }

.carousel-indicators-custom button:hover {
  opacity: 0.8;
  transform: scale(1.2);
}

.card-img-top {
    height: 220px; /* ajusta según diseño */
    object-fit: cover; /* mantiene proporción y llena el espacio */
  width: 100%;
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.card-title {
    color: #343a40;
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
}

.team-member {
  margin-bottom: 50px;
  text-align: center;
}

.team-member img {
  width: 225px;
  height: 225px;
  border: 7px solid rgba(0, 0, 0, 0.1);
}

.team-member h4 {
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: none;
}

.team-member p {
  margin-top: 0;
}

/* ================================
   Sticky Footer
================================ */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* ocupa todo el alto disponible */
}


.swiper-pagination {
    bottom: -6px !important; /* Puedes ajustar este valor.
                                 Si el valor por defecto era 10px, 20px lo mueve 10px más abajo.
                                 Experimenta con 18px, 25px, etc., hasta que quede a tu gusto. */
    z-index: 15; /* Asegura que siempre esté por encima de la imagen u otros elementos */
}
/* =========================================

    Timeline

================================= */

.timeline {
  position: relative;
  padding: 0;
  list-style: none;
}

.timeline:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 2px;
  margin-left: -1.5px;
  content: "";
  background-color: #e9ecef;
}

.timeline > li {
  position: relative;
  min-height: 50px;
  margin-bottom: 50px;
}

.timeline > li:after, .timeline > li:before {
  display: table;
  content: " ";
}

.timeline > li:after {
  clear: both;
}

.timeline > li .timeline-panel {
  position: relative;
  float: right;
  width: 100%;
  padding: 0 20px 0 100px;
  text-align: left;
}

.timeline > li .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline > li .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline > li .timeline-image {
  position: absolute;
  z-index: 100;
  left: 0;
  width: 80px;
  height: 80px;
  margin-left: 0;
  text-align: center;
  color: white;
  border: 7px solid #e9ecef;
  border-radius: 100%;
  background-color: #065952;
}

.timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 {
  font-size: 10px;
  line-height: 14px;
  margin-top: 12px;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
  padding: 0 20px 0 100px;
  text-align: left;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline > li:last-child {
  margin-bottom: 0;
}

.timeline .timeline-heading h4, .timeline .timeline-heading .h4 {
  margin-top: 0;
  color: inherit;
}

.timeline .timeline-heading h4.subheading, .timeline .timeline-heading .subheading.h4 {
  text-transform: none;
}

.timeline .timeline-body > ul,
.timeline .timeline-body > p {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .timeline:before {
    left: 50%;
  }

  .timeline > li {
    min-height: 100px;
    margin-bottom: 100px;
  }

  .timeline > li .timeline-panel {
    float: left;
    width: 41%;
    padding: 0 20px 20px 30px;
    text-align: right;
  }

  .timeline > li .timeline-image {
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
  }

  .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 {
    font-size: 13px;
    line-height: 18px;
    margin-top: 16px;
  }

  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .timeline > li {
    min-height: 150px;
  }

  .timeline > li .timeline-panel {
    padding: 0 20px 20px;
  }

  .timeline > li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px;
  }

  .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 {
    font-size: 18px;
    line-height: 26px;
    margin-top: 30px;
  }

  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 20px 20px;
  }
}

@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }

  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }

  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }

  .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 {
    margin-top: 40px;
  }

  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}


/* -------------------------------------------------------------------------- */
/* AJUSTES PARA SWIPER DENTRO DEL MODAL */
/* -------------------------------------------------------------------------- */

/* Contenedor principal del Swiper dentro del modal */
.modal-swiper-gallery {
    max-height: 450px; /* Ajusta este valor (ej. 400px, 500px) para controlar la altura total del slider */
    /* overflow: hidden; */ /* Asegura que nada se desborde si max-height es estricto */
    margin-bottom: 20px; /* Añade un espacio debajo del slider para que la paginación no quede pegada al borde del modal */
}

/* Las imágenes dentro de los slides del Swiper del modal */
.modal-swiper-gallery .swiper-slide img {
    max-height: 400px; /* Limita la altura de las imágenes para que encajen en el contenedor del Swiper */
    width: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Asegura que la imagen completa sea visible dentro del espacio asignado */
}

/* Ajuste de la posición de la paginación del Swiper del modal */
.modal-swiper-gallery .swiper-pagination {
    bottom: 10px !important; /* Mueve la paginación 10px desde la parte inferior del *nuevo* contenedor del Swiper */
    z-index: 15;
}

/* Ajuste para los botones de navegación (prev/next) si se desalinean */
.modal-swiper-gallery .swiper-button-prev,
.modal-swiper-gallery .swiper-button-next {
    top: 50%; /* Centra verticalmente los botones */
    transform: translateY(-50%); /* Ajuste fino para centrado */
    /* Opcional: ajusta left/right si están demasiado pegados a los bordes */
    /* left: 10px; */
    /* right: 10px; */
}