/* =============================================
   VARIABLES GLOBALES
   Cambia aquí los colores principales del sitio.
============================================= */
:root {
  --color-accent: #f0c430;   /* Amarillo dorado – botones, títulos destacados */
  --color-dark:   #1a1a1a;   /* Texto oscuro general */
  --color-light:  #f8f8f8;   /* Fondo secciones claras */
  --color-white:  #ffffff;
}

/* =============================================
   RESET / BASE
============================================= */
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
}


/* =============================================
   HERO SECTION
   Imagen a pantalla completa con overlay oscuro
   y el título centrado encima.
============================================= */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* TODO: ajusta la altura mínima si la imagen real lo requiere */
  min-height: 60vh;
}

.hero-img {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  object-fit: cover;
  display: block;
}



/* =============================================
   ESPACIADO GENERAL DE SECCIONES
   Controla el padding vertical de cada sección
   y el gap entre columnas del row.
   TODO: ajusta estos valores a tu gusto.
============================================= */
.about-section .row,
.mission-section .row,
.vision-section .row,
.services-section .row {
  --bs-gutter-x: 5rem; /* gap horizontal entre columnas */
}


/* =============================================
   SECCIÓN ABOUT US
============================================= */
.about-section {
  background-color: var(--color-white);
}

.about-logo {
  max-width: 350px;
}

/* Botón CTA amarillo */
.btn-cta {
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  padding: 0.6rem 1.8rem;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.btn-cta:hover {
  background-color: #d4a820;
  color: var(--color-dark);
}


/* =============================================
   TÍTULOS DE SECCIÓN
   .section-title      → negro (About Us)
   .section-title.accent → amarillo (Mission, Vision)
============================================= */
.section-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: var(--color-dark);
}

.section-title.accent {
  color: var(--color-accent);
}


/* =============================================
   SECCIÓN MISSION
============================================= */
.mission-section {
  background-color: var(--color-light);
}


/* =============================================
   SECCIÓN VISION
============================================= */
.vision-section {
  background-color: var(--color-white);
}


/* =============================================
   SECCIÓN SERVICES (carousel)
   Imagen fija a la izquierda + carousel con
   título y pastillas amarillas a la derecha.
============================================= */
.services-section {
  background-color: var(--color-light);
}

/* Igualamos altura entre slides para evitar saltos
   (los de 3 pastillas son más altos que los de 2) */
.services-carousel {
  padding-bottom: 2.5rem;
  cursor: grab;
  user-select: none;
}

.services-carousel.is-dragging {
  cursor: grabbing;
}

/* Sobre los bullets el cursor vuelve a ser pointer */
.services-carousel .services-indicators button {
  cursor: pointer;
}

.services-carousel .carousel-inner {
  min-height: 0;
}

@media (min-width: 992px) {
  .services-carousel .carousel-inner {
    min-height: 320px;
  }
}

.services-carousel .carousel-item {
  padding: 0 0.5rem;
}

.services-title {
  margin-bottom: 1.5rem;
}

/* Pastillas amarillas */
.services-pills li {
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-weight: 500;
  text-align: center;
  padding: 0.8rem 1.2rem;
  margin-bottom: 0.85rem;
  border-radius: 3px;
}

.services-pills li:last-child {
  margin-bottom: 0;
}

/* Bullets / indicadores: círculos amarillos alineados abajo */
.services-carousel .services-indicators {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  gap: 0.6rem;
  z-index: 2;
}

.services-carousel .services-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #a19d92;
  opacity: 1;
  margin: 0;
  padding: 0;
  text-indent: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.services-carousel .services-indicators button.active {
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.services-carousel .services-indicators button:hover {
  background-color: #d4a820;
  border-color: #d4a820;
}


/* =============================================
   FOOTER
============================================= */
.site-footer {
  background-color: var(--color-white);
  border-top: 1px solid #e0e0e0;
}

.footer-icon {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.footer-icon:hover {
  opacity: 0.7;
}

.footer-social-icon {
  /* TODO: ajustar tamaño si los iconos necesitan ser más grandes/pequeños */
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* =============================================
   video
============================================= */

.video-section {
  width: 100%;
  height: 100vh;
  position: relative;
}

.video-section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================================
   RESPONSIVE – ajustes para pantallas pequeñas
   Bootstrap ya maneja col-12/col-md-X pero aquí
   podemos afinar espaciados y tamaños si hace falta.
============================================= */
@media (max-width: 991.98px) {
  .hero-section,
  .hero-img {
    min-height: 40vh;
  }

  .about-logo {
    max-width: 250px;
  }

  .about-section .row,
  .mission-section .row,
  .vision-section .row,
  .services-section .row {
    --bs-gutter-x: 1.5rem;
  }

 .video-section {
    height: auto; 
  }

  .video-section video {
    width: 100%;
    height: auto; 
    object-fit: contain;
    display: block;
  }
}