/* Variable para controlar gap vertical (arriba/abajo) y usarla también como gap izquierdo */
:root {
	/* espacio vertical (top / bottom) relativo al alto del carrusel */
	--overlay-v-gap: 0.05%;    /* ajustar: 6% suele funcionar, puede ser px si prefieres */
	/* espacio horizontal desde el borde del carrusel (igual al vertical por defecto) */
	--overlay-h-gap: var(--overlay-v-gap);
	/* gutter interno del layout (compensa paddings del container) */
	--hero-gutter: 15px;
	--hero-height: 600px; /* tamaño requerido de imagen: 1920×600 px */
}

/* Forzar altura fija del hero/carrusel (ineludible en desktop) */
:root {
  --hero-height: 600px; /* tamaño requerido de imagen: 1920×600 px */
}

.hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative;
  z-index: 1040;
}

/* Ocultar la "tarjeta" anterior si existe */
.hero-carousel-col .carousel-card {
  display: none !important;
}

/* REEMPLAZO: overlay con separación simétrica y compensación por gutter */
.carousel-overlay {
  position: absolute !important;
  top: var(--overlay-v-gap) !important;
  bottom: var(--overlay-v-gap) !important;
  /* left = gap horizontal + posible gutter del container para alinear con contenido */
  left: calc(var(--overlay-h-gap) + var(--hero-gutter)) !important;
  /* width se calcula para no chocar con el margen derecho (ajusta 35% a tu preferencia) */
  width: calc(35% - var(--hero-gutter)) !important;
  padding: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: auto !important;
  z-index: 1140 !important;
  height: auto !important; /* top/bottom definen la altura */
}

/* Contenido interno legible (sin tarjeta, sólo una ligera capa para legibilidad) */
.carousel-overlay-inner {
  color: #fff;
  /* ligera sombra de fondo para mejorar contraste sin parecer 'tarjeta' */
  background: linear-gradient(90deg, rgba(13,38,59,0.45), rgba(13,38,59,0.15));
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Ajustes tipográficos del overlay */
.carousel-overlay .overlay-heading {
  font-size: 1.4rem;
  line-height: 1.15;
  margin-bottom: .5rem;
  font-weight: 700;
}
.carousel-overlay .overlay-lead {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  margin-bottom: .75rem;
}

/* Botones dentro del overlay */
.carousel-overlay .btn {
  width: auto;
  padding: .5rem .9rem;
  font-weight: 600;
}

/* En móvil no mostramos overlay (se usa la columna de texto original) */
@media (max-width: 991px) {
  .carousel-overlay { display: none !important; }
  .hero { height: auto !important; min-height: auto; max-height: none; }
}

/* ─── COLUMNA DEL CARRUSEL HERO ────────────────────────────────────────────
   Imagen recomendada: 1920 × 600 px  (ratio 16:5)
   Se usa aspect-ratio para que el contenedor siempre coincida con el ratio
   de las imágenes → sin gaps, sin recorte, sin deformación.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-carousel-col {
  position: relative;
  width: 100%;
  /* aspect-ratio 1920:600 = 16:5; el alto se calcula automáticamente */
  aspect-ratio: 1920 / 600;
  /* cap para pantallas muy anchas */
  max-height: 600px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* El div#heroCarousel y su interior llenan el 100 % de la columna */
.hero-carousel-col .carousel,
.hero-carousel-col .carousel-inner {
  height: 100%;
  width: 100%;
}

/* Cada slide ocupa todo el espacio */
.hero-carousel-col .carousel-item {
  height: 100%;
}

/* Imagen: se escala al 100 % del contenedor manteniendo el ratio exacto */
.hero-carousel-col .carousel-image,
.hero-carousel-col .carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;   /* sin recorte: 1920×600 → 100 % del contenedor 1920:600 */
  object-position: center center;
  margin: 0;
}

/* Controles por encima del contenido */
.hero-carousel-col .carousel-control-prev,
.hero-carousel-col .carousel-control-next {
  z-index: 1060;
}

/* Hero: contenedor principal */
.hero {
  display: flex;
  align-items: stretch;
  margin: 0 auto 3rem;
  padding: 0;
  max-width: 1400px;   /* ancho máximo — controla cuánto ocupa en pantalla */
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

/* Asegurar que la fila del hero use todo el alto y sus columnas se estiren */
.hero > .container-fluid > .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;   /* obliga a igualar alturas */
  height: 100%;
  box-sizing: border-box;
}

/* Columna de texto: sin padding directo, altura 100% */
.hero-text-col {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  color: #ffffff;
  padding: 0;               /* padding movido al contenido */
  display: flex;
  align-items: stretch;     /* permitir que el contenido llene verticalmente */
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

/* Contenido interno: aplica padding aquí y ocupa toda la columna */
.hero-text-content {
  width: 100%;
  padding: 2rem;            /* padding visible pero sin alterar la altura de la columna */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centrar verticalmente el texto dentro de la columna */
}
.hero-text-col h1 {
  color: #ffffff;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  margin-bottom: 1rem;
}
.hero-text-col .lead {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 1rem;
}
.hero-text-col .text-primary {
  color: #f59e0b !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

/* Botones */
.hero-text-col .d-flex.flex-column {
  gap: 0.75rem;
}
.hero-text-col .btn {
  padding: 0.55rem 1rem;
  font-weight: 600;
  border-radius: 0.45rem;
  font-size: 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  display: block;
  text-align: center;
}
.hero-text-col .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* (reglas del carrusel hero consolidadas arriba) */

/* Responsivo */
@media (max-width: 991px) {
  .hero {
    margin: 0; /* eliminar margen en móvil para aprovechar espacio */
    max-height: none;
    min-height: auto;
    overflow: visible;
    box-shadow: none; /* sin sombra en móvil para diseño más limpio */
  }
  .hero .row {
    min-height: auto;
    max-height: none;
  }
  .hero-text-col {
    order: 1;
    min-height: auto;
    max-height: none;
    height: auto;
    padding: 0; /* sin padding en la columna */
  }
  .hero-text-content {
    padding: 1.5rem 1.25rem; /* padding solo en el contenido */
  }
  .hero-text-col h1 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 0.75rem; /* reducir espacio */
  }
  .hero-text-col .lead {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }
  .hero-text-col .text-primary {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .hero-text-col .d-flex.flex-column {
    gap: 0.5rem; /* reducir gap entre botones */
    margin-top: 1rem; /* menos espacio arriba */
  }
  .hero-text-col .btn {
    font-size: 0.875rem;
    padding: 0.6rem 0.85rem; /* botones más compactos */
  }
  .hero-carousel-col {
    order: 2;
    min-height: 280px; /* altura más razonable en móvil */
    max-height: 320px;
    height: 320px;
  }
  .hero-carousel-col .carousel-control-prev,
  .hero-carousel-col .carousel-control-next {
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6); /* más visible en móvil */
  }
  .hero-carousel-col .carousel-control-prev-icon,
  .hero-carousel-col .carousel-control-next-icon {
    width: 18px;
    height: 18px;
  }
  .hero-carousel-col .carousel-control-prev {
    left: 8px;
  }
  .hero-carousel-col .carousel-control-next {
    right: 8px;
  }
}

/* Mejoras adicionales para pantallas muy pequeñas (< 576px) */
@media (max-width: 575px) {
  .hero-text-content {
    padding: 1.25rem 1rem; /* aplicar padding al contenido, no a la columna */
  }
}

/* Ocultar carrusel en móviles y hacer que la columna de texto ocupe todo el ancho */
@media (max-width: 767.98px) {
  .hero-carousel-col {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Hacer que la columna de texto ocupe 100% del ancho disponible */
  .hero-text-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  /* Ajustes visuales para móvil */
  .hero {
    min-height: auto !important;
    max-height: none !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .hero-text-content {
    padding: 1rem !important;
  }

  /* Asegurar que controles/indicadores no ocupen espacio */
  #heroCarousel .carousel-indicators,
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next {
    display: none !important;
    visibility: hidden !important;
  }
}

/* (reglas del carrusel hero consolidadas arriba — no duplicar) */

/* Ajustes para sección ABOUT (fondo gris igual que team / contención y tarjetas más compactas) */
.about-section {
  /* eliminar límite previo y usar todo el ancho disponible dentro del container */
  max-width: none;
  width: calc(100% + 1.5rem);   /* compensar gutters de Bootstrap 5 (0.75rem cada lado) */
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(13, 38, 59, 0.06);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* Asegurar que la fila interna use el mismo gutter */
.about-section > .row {
  align-items: center;
  --bs-gutter-x: 1.5rem;
}

/* columnas internas como cajas flex para alinear verticalmente */
.about-section .col-lg-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ratio/video con altura fija proporcional, no expansiva */
.about-section .ratio {
  flex: none;
}

/* iframe ocupa totalmente su wrapper */
.about-section .ratio iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Asegurar que highlights no desalineen (margen/padding consistente) */
.about-section .row.g-2 > .col-6,
.about-section .row.g-2 > .col-md-4 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Empujar el cuadro 'Lo que nos define' hacia la base si queda espacio y mantener su padding coherente */
.about-section .col-lg-6 .bg-white {
  margin-top: auto;
  padding: 1rem;
}

/* Responsive: retirar las compensaciones horizontales en móvil */
@media (max-width: 991px) {
  .about-section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem;
    border-radius: .5rem;
  }
  .about-section > .row { height: auto; }
  .about-section .col-lg-6 { padding-left: 0; padding-right: 0; display: block; }
  .about-section .row.g-2 > .col-6,
  .about-section .row.g-2 > .col-md-4 { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Estilos para sección "SERVICIOS" - look profesional / tipo Wireweb White */
#servicios {
  background: transparent;
}
.services-grid .service-item {
  align-items: flex-start;
  border: 1px solid rgba(13,38,59,0.04);
  background: #fff;
  padding: 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.services-grid .service-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(13,38,59,0.06);
}
.service-icon{
  width:64px;
  height:64px;
  flex: 0 0 64px;
  font-size: 1.35rem;
}
.service-content h5 {
  font-size: 1.05rem;
  margin-bottom: .25rem;
  font-weight: 700;
  color: #0d263b;
}
.service-content p {
  margin-bottom: .5rem;
  color: rgba(13,38,59,0.7);
}
.service-features li {
  margin-bottom: .25rem;
  list-style: none;
  position: relative;
  padding-left: 18px;
}
.service-features li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(13,38,59,0.45);
  font-size: .9rem;
}

/* Ajustes responsivos: tarjetas en columna en móvil y iconos más pequeños */
@media (max-width: 767.98px) {
  .service-icon {
    width:48px;
    height:48px;
    font-size:1rem;
  }
  .services-grid .service-item {
    padding: .9rem;
  }
}

/* OVERRIDES: corregir z-index y posición de controles/overlay */
.hero-carousel-col {
  /* asegurar stacking context consistente */
  position: relative;
  z-index: 1040;
}

/* Overlay (texto) debe estar por encima de las imágenes */
.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  padding: 2rem;
  display: flex;
  align-items: center;
  pointer-events: auto;
  z-index: 1060; /* por encima de las imágenes */
}

/* Contenido interior interactivo y visible */
.carousel-overlay-inner {
  position: relative;
  z-index: 1065;
  color: #fff;
  background: linear-gradient(90deg, rgba(13,38,59,0.45), rgba(13,38,59,0.15));
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Asegurar que las imágenes estén detrás (no tapan overlay) */
.hero-carousel-col .carousel-item img,
.hero-carousel-col .carousel-image {
  position: relative;
  z-index: 1000;
}

/* Controles: centrados verticalmente y por encima de la overlay */
.hero-carousel-col .carousel-control-prev,
.hero-carousel-col .carousel-control-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1075 !important; /* por encima de overlay */
}

/* Ajustes finos de separación lateral para que no queden sobre el overlay */
.hero-carousel-col .carousel-control-prev { left: 8px !important; }
.hero-carousel-col .carousel-control-next { right: 8px !important; }

/* Si había alguna regla que ocultaba overlay, forzar visibilidad */
.hero-carousel-col .carousel-card,
.hero-carousel-col .carousel-overlay[style*="display:none"] {
  display: block !important;
}

/* En móvil mantenemos overlay oculta (usa columna de texto) */
@media (max-width: 991px) {
  .carousel-overlay { display: none !important; }
  .hero { height: auto !important; min-height: auto; max-height: none; }
}

/* Hero: eliminar margen superior para que pegue al navbar */
.hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Si el navbar es sticky/fixed, ajustar el margen del main para compensar su altura */
/* Descomenta y ajusta si el navbar es fixed-top: */
/*
.navbar.fixed-top + main,
main.mt-0 {
  padding-top: calc(var(--navbar-height, 60px)) !important;
}
*/

/* --- Fix: asegurar que la navbar quede por encima del hero/carrusel --- */
/* Forzar navbar encima */
.navbar,
.header-navbar,
.navbar.fixed-top,
.navbar-fixed-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1110 !important; /* más alto que el hero (hero:1000) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Mantener hero por debajo de la navbar */
.hero,
.hero-carousel-col {
  z-index: 1000 !important;
}

/* === FIX: comportamientos coherentes del carrusel === */

/* Asegurar que las slides mantengan el flujo de Bootstrap (position:relative) */
.hero-carousel-col .carousel,
.hero-carousel-col .carousel-inner {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Cada slide ocupa el 100% del contenedor pero NO debe ser absolute */
.hero-carousel-col .carousel-item {
  position: relative; /* importante: dejar que Bootstrap gestione las transiciones */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block; /* que Bootstrap gestione .active / .next / .prev */
  overflow: hidden;
}

/* La imagen dentro de la slide se posiciona absolutamente para cubrir el área */
.hero-carousel-col .carousel-image,
.hero-carousel-col .carousel-item img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* cubrir todo el área, recortando si es necesario */
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  z-index: 1000;
}

/* Overlay (texto) siempre por encima */
.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  padding: 2rem;
  display: flex;
  align-items: center;
  pointer-events: auto;
  z-index: 1100; /* elevado para estar sobre la imagen */
}

/* Asegurar que el interior de la overlay reciba eventos (botones clicables) */
.carousel-overlay-inner {
  pointer-events: auto;
  position: relative;
  z-index: 1110;
}

/* Controles: absolute, centrados verticalmente y fuera del área de overlay */
.hero-carousel-col .carousel-control-prev,
.hero-carousel-col .carousel-control-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  z-index: 1120 !important; /* por encima de overlay */
  opacity: 0.95;
}

.hero-carousel-col .carousel-control-prev { left: 12px !important; }
.hero-carousel-col .carousel-control-next { right: 12px !important; }

/* Evitar reglas duplicadas que oculten la overlay */
.hero-carousel-col .carousel-card {
  display: none !important;
}

/* En móvil: ocultar overlay y dejar el flujo natural */
@media (max-width: 991px) {
  .carousel-overlay { display: none !important; }
  .hero { height: auto !important; min-height: auto; max-height: none; }
  /* imágenes pueden escalar normalmente en móvil */
  .hero-carousel-col .carousel-image,
  .hero-carousel-col .carousel-item img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Mover la overlay un poco hacia la derecha y darle más ancho para que no quede tan pegada */
.carousel-overlay {
  left: 6% !important;       /* desplazar ligeramente a la derecha */
  width: 44% !important;     /* aumentar anchura para mayor presencia */
  padding: 2rem 1.5rem;
  align-items: center;
  z-index: 1120;
}

/* Hacer la tarjeta interna más alta, centrada verticalmente y más prominente */
.carousel-overlay-inner {
  height: 72%;              /* más alta */
  min-height: 200px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centrar verticalmente el contenido */
  gap: .6rem;
  padding: 1.25rem 1.2rem;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, rgba(13,38,59,0.48), rgba(13,38,59,0.12));
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  pointer-events: auto;     /* permitir interacción */
}

/* Tipografía ligeramente más grande en la overlay */
.carousel-overlay .overlay-heading { font-size: 1.6rem; }
.carousel-overlay .overlay-lead { font-size: 1rem; }

/* Controles: cuadrados con esquinas redondeadas, apenas visibles */
.hero-carousel-col .carousel-control-prev,
.hero-carousel-col .carousel-control-next {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;                   /* forma cuadrada con esquinas redondeadas */
  background: rgba(0,0,0,0.18) !important;           /* apenas visibles */
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  opacity: 0.75 !important;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1130 !important;
}

/* Iconos más pequeños y con contraste sutil */
.hero-carousel-col .carousel-control-prev-icon,
.hero-carousel-col .carousel-control-next-icon {
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  filter: invert(1) brightness(1.1);
  opacity: 0.95;
}

/* Hover: un poco más visibles y ligero desplazamiento */
.hero-carousel-col .carousel-control-prev:hover,
.hero-carousel-col .carousel-control-next:hover {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  background: rgba(0,0,0,0.28) !important;
}

/* Ajustar separación lateral para que no queden encima de la overlay */
.hero-carousel-col .carousel-control-prev { left: 10px !important; }
.hero-carousel-col .carousel-control-next { right: 10px !important; }

/* En móvil reducir tamaño y mantener visibilidad mínima */
@media (max-width: 991px) {
  .carousel-overlay { display: none !important; }
  .hero-carousel-col .carousel-control-prev,
  .hero-carousel-col .carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }
  .hero-carousel-col .carousel-control-prev-icon,
  .hero-carousel-col .carousel-control-next-icon {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
  }
}

/* Ocultar controles prev/next (ya se removieron del HTML pero asegurar por CSS) */
.hero-carousel-col .carousel-control-prev,
.hero-carousel-col .carousel-control-next {
  display: none !important;
}

/* Estilar y posicionar los indicadores como pequeños círculos centrados debajo del carrusel */
.hero-carousel-col .carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1140; /* por encima de overlay si hace falta */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Botones indicadores: pequeños círculos */
.hero-carousel-col .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0;
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* hover/active */
.hero-carousel-col .carousel-indicators [data-bs-target]:hover {
  transform: scale(1.12);
  background-color: rgba(255,255,255,0.6);
}

.hero-carousel-col .carousel-indicators .active {
  background-color: rgba(13,38,59,0.90) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
  transform: scale(1.2) !important;
}

/* Asegurar espacio en móvil si ocultas overlay (no tapar indicadores) */
@media (max-width: 991px) {
  .hero-carousel-col .carousel-indicators {
    bottom: 8px;
    gap: 6px;
  }
  .hero-carousel-col .carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
  }
}

/* Overlay: hacerlo más alto verticalmente y centrado visualmente */
.carousel-overlay {
  /* desplazar un poco desde el borde superior e inferior y ocupar gran parte de la altura */
  top: 6% !important;
  left: 6% !important;
  height: 88% !important;         /* ocupa casi todo el alto del hero (ver marcación en rojo) */
  width: 35% !important;          /* ajustar ancho si lo deseas */
  padding: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: auto !important;
  z-index: 1140 !important;
}

/* Tarjeta interna: llenar verticalmente el overlay y dar más espacio a contenido */
.carousel-overlay-inner {
  height: 100% !important;        /* ocupar toda la altura del overlay */
  min-height: 500px !important;   /* asegurar altura mínima ligeramente mayor */
  padding: 1.75rem 1.5rem !important;
  border-radius: 0.9rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* repartir: título arriba, texto en medio, botones abajo */
  gap: 0.8rem !important;
  /* Aumentar la solidez del fondo ~15% (valores de alfa incrementados) */
  background:  rgba(13,38,59,0.90);
  box-shadow: 0 20px 48px rgba(0,0,0,0.16) !important;
  pointer-events: auto !important;
  overflow: hidden; /* asegurar que el contenido quede contenido */
}

/* Cabecera: mantener visible y con espaciamiento */
.carousel-overlay-inner .overlay-heading {
  margin: 0 0 0.35rem 0;
  font-size: 1.9rem !important;
  line-height: 1.12 !important;
  font-weight: 800;
  color: #ffffff;
}

/* Texto principal: permitir expansión y scroll si hace falta */
.carousel-overlay-inner .overlay-lead {
  margin: 0;
  color: rgba(255,255,255,0.96) !important;
  font-size: 1.02rem !important;
  line-height: 1.5;
  flex: 1 1 auto !important;      /* ocupa el espacio intermedio */
  overflow: auto !important;      /* si es muy largo, permite scroll interno */
  max-height: calc(100% - 140px); /* evitar overlap con botones; ajuste fino */
  padding-right: 0.2rem;
}

/* Grupo de botones siempre al final */
.carousel-overlay-inner .d-flex {
  margin-top: 0.6rem;
  flex: 0 0 auto;
  gap: .6rem;
}

/* Botones: tamaño y contraste para destacar sobre el fondo más sólido */
.carousel-overlay-inner .btn {
  padding: 0.55rem .95rem;
  font-weight: 700;
  border-radius: .45rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Ajustes responsivos: reducir altura en tablet y móvil */
@media (max-width: 991px) {
  .carousel-overlay-inner {
    min-height: 180px !important;
    padding: 1rem !important;
    border-radius: .6rem !important;
  }
  .carousel-overlay-inner .overlay-heading { font-size: 1.25rem !important; }
  .carousel-overlay-inner .overlay-lead { font-size: 0.95rem !important; max-height: 180px; }
}

/* OVERRIDE FINAL: usar la misma separación a la izquierda que la vertical */
.carousel-overlay {
  /* usar gap simétrico: top/bottom definidos previamente; left igual a --overlay-v-gap */
  left: var(--overlay-v-gap) !important;
  /* mantener anchura fijada o ajustarla si se desea */
  /* width: 35% (o el valor que uses) permanece; si quieres centrar más, ajusta width */
}

/* Asegurar responsive: reducir el gap vertical/izquierdo en pantallas pequeñas */
@media (max-width: 991px) {
  :root { --overlay-v-gap: 4%; } /* disminuye el gap en tablet/móvil */
  .carousel-overlay { left: var(--overlay-v-gap) !important; }
}

/* --- Override final: asegurar que las imágenes del carrusel llenen el área sin deformarse --- */
/* Colocar al final del styles.css para que tenga prioridad sobre reglas anteriores */
.hero-carousel-col .carousel,
.hero-carousel-col .carousel-inner,
.hero-carousel-col .carousel-item {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Fuerza absoluta y relleno exacto (deforma la imagen para ajustarse) */
.hero-carousel-col .carousel-item img,
.hero-carousel-col .carousel-image {
  position: absolute !important;
  inset: 0 !important;               /* top:0; right:0; bottom:0; left:0; */
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;       /* DEFORMA la imagen para ajustarse exactamente */
  object-position: center center !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  z-index: 1000 !important;
}

/* Nota: si más adelante quieres mantener proporción en vez de deformar, cambia object-fit: fill a object-fit: cover */

/* Posicionar la tarjeta y reservar espacio inferior para botones flotantes */
.carousel-overlay-inner {
  position: relative !important;    /* contenedor posicionable */
  /* aumentar padding-bottom para dejar espacio a los botones flotantes */
  padding-bottom: 3.25rem !important;
  /* mantener el resto de estilos (background, border-radius, etc.) */
}

/* Botones: flotan en la esquina inferior derecha de la tarjeta (desktop) */
.carousel-overlay-inner .overlay-cta {
  position: absolute;
  right: 1.25rem;       /* separación desde el borde derecho de la tarjeta */
  bottom: 1.25rem;      /* separación desde la base de la tarjeta */
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  z-index: 20;          /* por encima del contenido interno */
}

/* Si hay dos botones, asegurar separación visual y que el primario destaque */
.carousel-overlay-inner .overlay-cta .overlay-cta-btn {
  min-width: 10rem;
}
.carousel-overlay-inner .overlay-cta .overlay-cta-btn2 {
  min-width: 9rem;
}

/* Ajustes visuales finos: sombra y transición ya definidos; forzar alineación derecha */
.carousel-overlay-inner .overlay-cta .btn {
  margin: 0;
  white-space: nowrap;
}

.experience-highlight-card{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  border:none;
  box-shadow:0 25px 60px rgba(102,126,234,0.25);
}
.experience-number-value{
  font-size:5rem;
  font-weight:900;
  line-height:1;
  display:inline-block;
}
.experience-heading{
  font-size:1.75rem;
  color:#fff;
}
.experience-text{
  opacity:0.95;
  font-size:1rem;
  max-width:700px;
}

/* Responsive: en pantallas pequeñas los botones pasan al flujo y se apilan */
@media (max-width: 991px) {
  .carousel-overlay-inner {
    padding-bottom: 1rem !important; /* menos espacio necesario cuando overlay se hace más estrecha */
  }
  .carousel-overlay-inner .overlay-cta {
    position: static !important;    /* vuelven al flujo dentro de la tarjeta */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin-top: 0.6rem !important;
  }
  .carousel-overlay-inner .overlay-cta .btn {
    width: 100% !important;         /* botones full-width en móvil */
    text-align: center;
  }
}

/* Estilos: sección "Nuestros servicios" con aspecto profesional */
.services-grid .service-item {
  background: #ffffff;
  border: 1px solid rgba(13,38,59,0.06);
  border-radius: 0.6rem;
  transition: box-shadow .18s ease, transform .12s ease;
  box-shadow: 0 8px 22px rgba(13,38,59,0.04);
  height: 100%;
}

.services-grid .service-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(13,38,59,0.08);
}

.service-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 0.5rem;
  font-size: 1.25rem;
}

/* colores coherentes */
.service-icon.bg-warning { background: linear-gradient(180deg,#f59e0b,#d97706); }
.service-icon.bg-primary { background: linear-gradient(180deg,#2563eb,#1e40af); }

.service-body h5 {
  font-size: 1.05rem;
  margin-bottom: .35rem;
  font-weight: 700;
  color: #0d263b;
}

.service-body p {
  margin-bottom: .5rem;
  color: rgba(13,38,59,0.72);
}

/* bullets compactos y legibles */
.service-features {
  margin-left: 0;
  padding-left: 1.05rem;
  color: rgba(13,38,59,0.66);
}
.service-features li {
  margin-bottom: 0.45rem;
  line-height: 1.4;
}

/* Responsivo: en móvil mayor espaciado y tamaño de icono reducido */
@media (max-width: 767.98px) {
  .service-icon { width:56px; height:56px; }
  .service-body h5 { font-size: 1rem; }
}

/* Map container: asegurar altura visible y que el iframe rellene el área */
.map-container {
  width: 100%;
  height: 420px;                /* altura de escritorio: ajusta si lo deseas */
  max-height: 60vh;
  overflow: hidden;
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(13,38,59,0.06);
  background: #e9eef2;          /* fallback mientras carga */
}

/* El iframe debe ocupar todo el contenedor */
.map-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

/* Responsive: altura menor en móviles para no consumir mucho espacio */
@media (max-width: 991px) {
  .map-container { height: 300px; max-height: 45vh; }
}

/* Partners carousel: contenedor y animación horizontal infinita */
.partners-carousel-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 1rem 0;
}

.partners-carousel {
  display: flex;
  gap: 2rem;
  animation: partners-scroll 80s linear infinite;
  width: max-content;
}

@keyframes partners-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* desplaza hasta la mitad (array duplicado) */
}

/* Pausar animación en hover para inspeccionar */
.partners-carousel:hover {
  animation-play-state: paused;
}

/* Cada ítem: círculo con logo/número y nombre debajo */
.partner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 120px;
  min-height: 180px;
  text-align: center;
}

.partner-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(13,38,59,0.08);
  box-shadow: 0 8px 20px rgba(13,38,59,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.partner-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(13,38,59,0.1);
}

/* Placeholder: número temporal mientras no hay logo */
.partner-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(13,38,59,0.5);
}

/* Logo del partner */
.partner-logo {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.partner-name {
  text-align: center;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  color: rgba(13,38,59,0.7);
}

/* Responsivo: círculos más pequeños en móvil */
@media (max-width: 767.98px) {
  .partner-item { width: 90px; }
  .partner-circle { width: 80px; height: 80px; }
  .partner-number { font-size: 1.2rem; }
  .partners-carousel { gap: 1.5rem; }
}

/* ============================================
   MODAL DE CONTACTO - CORRECCIONES
   ============================================ */

/* Asegurar que el modal tenga z-index alto y esté centrado */
.modal {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}

/* Centrar verticalmente el modal */
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  margin: 1.75rem auto;
}

/* Asegurar que el contenido del modal sea visible */
.modal-content {
  position: relative;
  z-index: 1056;
}

/* Evitar que el modal quede cortado en la parte superior */
.modal.show .modal-dialog {
  transform: none;
}

/* Asegurar que el backdrop cubra toda la pantalla */
.modal-backdrop.show {
  opacity: 0.5;
}

/* Fix: Modales deben aparecer por encima del navbar (navbar: z-index 1110) */
/* Bootstrap incrementa automáticamente el z-index para modales anidados */
.modal {
  z-index: 1120 !important;
}

.modal-backdrop {
  z-index: 1119 !important;
}

/* Asegurar que el modal de productos aparezca sobre el modal de kits cuando se abre desde él */
#productModal {
  z-index: 1150 !important;
}

#productModal ~ .modal-backdrop {
  z-index: 1149 !important;
}

/* Hero carousel final fix: respetar flujo de Bootstrap y evitar que se cuele el slide 3 */
.hero-carousel-col .carousel-item {
  display: none !important;
  z-index: 1 !important;
}

.hero-carousel-col .carousel-item.active,
.hero-carousel-col .carousel-item.carousel-item-next,
.hero-carousel-col .carousel-item.carousel-item-prev {
  display: block !important;
}

.hero-carousel-col .carousel-item.active {
  z-index: 3 !important;
}

.hero-carousel-col .carousel-item.carousel-item-next,
.hero-carousel-col .carousel-item.carousel-item-prev {
  z-index: 2 !important;
}

.hero-carousel-col .carousel-item img,
.hero-carousel-col .carousel-image {
  z-index: 1 !important;
}
/* ============================================
   Contacto (modo oscuro) - Index/Home
   ============================================ */
body.theme-nocturne.page-home .contact-card,
body.theme-nocturne.page-index .contact-card {
  background: #111827;
  color: #e2e8f0;
  border-color: rgba(226, 232, 240, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

body.theme-nocturne.page-home .contact-card .contact-card-title,
body.theme-nocturne.page-index .contact-card .contact-card-title {
  color: #f8fafc;
}

body.theme-nocturne.page-home .contact-card .contact-card-subtitle,
body.theme-nocturne.page-index .contact-card .contact-card-subtitle {
  color: #cbd5f5;
}

body.theme-nocturne.page-home .contact-card .contact-social-btn,
body.theme-nocturne.page-index .contact-card .contact-social-btn {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

body.theme-nocturne.page-home .contact-card .contact-social-btn:hover,
body.theme-nocturne.page-index .contact-card .contact-social-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body.theme-nocturne.page-home .contact-card .contact-cta-btn,
body.theme-nocturne.page-index .contact-card .contact-cta-btn {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

body.theme-nocturne.page-home .contact-card .contact-cta-btn:hover,
body.theme-nocturne.page-index .contact-card .contact-cta-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
/* Layout adaptable para Equipo SEESA */
#teamLayoutRow.team-layout-stacked .team-text-col,
#teamLayoutRow.team-layout-stacked .team-cards-col {
  flex: 0 0 100%;
  max-width: 100%;
}

#teamLayoutRow.team-layout-stacked .team-text-col {
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  #teamLayoutRow.team-layout-stacked {
    align-items: flex-start;
  }
  #teamLayoutRow.team-layout-stacked .team-text-col {
    text-align: left;
  }
}

#teamLayoutRow.team-layout-balanced .team-text-col {
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#teamLayoutRow.team-layout-balanced .team-text-col p {
  max-width: 640px;
}

#teamLayoutRow.team-layout-balanced .team-cards-col {
  margin-left: auto;
  margin-right: auto;
}

#teamLayoutRow.team-layout-balanced #teamContainer {
  justify-content: center;
}