.gep-video-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 2.5s ease-out;
}

/* Animación del spinner de carga del video */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gep-video-intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.gep-video-intro-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 480px) {
    .gep-video-intro-overlay video {
        width: 100%;
        height: auto;
        max-height: 100vh;
        object-fit: contain;
    }
    
    .gep-video-intro-overlay {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }
}

.gep-main-content {
    opacity: 0;
    transition: opacity 2s ease-in;
}

.gep-main-content.fade-in {
    opacity: 1;
}

:root {
    
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    --font-size-base: 1.7vh;
    --font-size-sm: 1.5vh;
    --font-size-lg: 1.9vh;
    --font-size-xl: 2vh;
    --font-size-xxl: 2rem;

    --color-text: #333; 
    --color-heading: #244D30; 

    --gep-yellow: #268332b4; 
    --gep-green: #3F793A; 
    --gep-dark-green: #244D30; 
    --gep-light-blue: #55C5D0; 
    --gep-blue: #00AEEC; 
    --gep-dark-blue: #2E3092; /* Color Enlaces Nav-Bar */
    --gep-blue-médium: #1A75BC; 
    --gep-blue-dark-2: #0F539A; 
    --gep-white: #ffffff; /* Maneja el color de los iconos de Estrategias de gestión 2021–2023 */
    --gep-black: #000000; /* maneja el color de los iconos de INGENIERÍA DE PROCESO*/
    --gep-light-gray: #f4f4f4; /*Maneja el color de nacional e intenacional en reposo o sea si seleccionnar*/
    --gep-dark-gray: #2a2a2a93; /*Maneja el color del hoober de nacional e intenacional*/
    --gep-gradient-1: linear-gradient(1deg, #2E3092, #00AEEC); 
    --gep-gradient-2: linear-gradient(95deg, #FFCB02, #3F793A); 
    --gep-gradient-3: linear-gradient(90deg, #2E3092, #00AEEC); 

    --whatsapp-shadow-color: rgba(0, 0, 0, 0.55);
    --sparkle-shadow-color: rgba(0, 0, 0, 0.40);
    --trail-shadow-color: rgba(0, 0, 0, 0.35);
    --sparkle-color: 37,211,102;  
    --trail-color: 18,140,126;    
    --sparkle-alpha-mid: 0.85;
    --sparkle-stop-mid: 60%;
    --sparkle-stop-fade: 88%;
    --sparkle-stroke: 1.2px;
    --sparkle-stroke-color: rgba(255,255,255,0.95);
    --trail-stroke: 1.2px;

    --slider-text-blur: blur(2px);
    --slider-text-saturate: saturate(130%);
    --slider-text-brightness: brightness(1.02);
    --slider-text-bg-start: rgba(255, 255, 255, 0.08);
    --slider-text-bg-end: rgba(255, 255, 255, 0.03);
    --slider-text-border: rgba(255, 255, 255, 0.2);
    --slider-text-shadow-main: 0 20px 40px rgba(0, 0, 0, 0.3);
    --slider-text-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --slider-text-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.05);

    /* Variables para el navbar con efecto glassmorphism más visible scroll 0 */
    --navbar-glass-blur: blur(10px);
    --navbar-glass-saturate: saturate(130%);
    --navbar-glass-brightness: brightness(1.02);
    --navbar-glass-bg-start: rgb(255, 255, 255); /* maneja el color 1del navbar en scroll 0*/
    --navbar-glass-bg-end: rgb(255, 255, 255); /* maneja el color 2 del navbar en scroll 0*/
    --navbar-glass-border: rgba(0, 0, 0, 0.144); /* Maneja el color del borde del navbar en scroll 0*/
    --navbar-glass-shadow-main: 0 8px 32px rgba(0, 0, 0, 0.2);
    --navbar-glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --navbar-glass-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --navbar-bg-color: #ffffff; /* maneja el color de fondo solido del navbar al hacer scroll*/

    --slider-btn-blur: blur(2px);                              
    --slider-btn-saturate: saturate(180%);                      
    --slider-btn-bg-start: rgba(255, 255, 255, 0.15);          
    --slider-btn-bg-end: rgba(255, 255, 255, 0.08);            
    --slider-btn-border: rgba(255, 255, 255, 0.25);            
    --slider-btn-shadow-main: 0 8px 25px rgba(0, 0, 0, 0.25);  
    --slider-btn-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2); 
    --slider-btn-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.05);   

    --slider-btn-hover-blur: blur(5px);                        
    --slider-btn-hover-saturate: saturate(10%);                
    --slider-btn-hover-bg-start: rgba(255, 255, 255, 0.25);    
    --slider-btn-hover-bg-end: rgba(255, 255, 255, 0.15);      
    --slider-btn-hover-border: rgba(255, 255, 255, 0.4);       
    --slider-btn-hover-shadow-main: 0 15px 45px rgba(0, 0, 0, 0.35); 
    --slider-btn-hover-shadow-inset: inset 0 2px 0 rgba(255, 255, 255, 0.3); 
    --slider-btn-hover-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.1);    

    --separator-height: 60px; 

    --hseq-overlay-color: rgba(83, 82, 82, 0.712);        
    --hseq-overlay-opacity: 0.7;        

    --flip-card-zoom: 1.05;             
    --flip-card-duration: 0.6s;         
    --flip-card-front-bg: rgba(98, 98, 98, 0.584);  
    --flip-card-back-bg: rgba(46, 146, 76, 0.568);    
  }

 .navbar-static {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    /* Fondo blanco sólido - igual que navbar-floating para evitar parpadeo */
    background-color: var(--navbar-bg-color) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--gep-dark-blue);
    width: 100%;
    overflow: visible;
    transition: all 0.3s ease;
    
    /* 🔒 FORZAR APARIENCIA FIJA - Sin transformaciones de scroll */
    transform: scale(1) !important;
    border-radius: 0px !important;
  }

/* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗
   ║  🔒 NAVBAR FIJO PERMANENTE - FUERZA GLOBAL                                                   ║
   ║                                                                                               ║
   ║  Asegura que el navbar mantenga SIEMPRE su tamaño y posición original,                      ║
   ║  sin importar scroll, clase aplicada, o transformaciones JavaScript.                         ║
   ║                                                                                               ║
   ║  Estas reglas tienen máxima prioridad (!important) y se aplican a TODAS                     ║
   ║  las variaciones del navbar (static, floating, scrolled, etc.)                              ║
   ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */
#myNavbar,
.navbar-static,
.navbar-floating,
.navbar.scrolled,
.navbar-static.scrolled,
.navbar-floating.scrolled {
    transform: scale(1) !important;        /* Escala normal fija */
    border-radius: 0px !important;        /* Sin bordes redondeados */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* Sombra fija */
    position: fixed !important;            /* Posición fija */
    top: 0 !important;                     /* Siempre en la parte superior */
    width: 100% !important;                /* Ancho completo */
    height: auto !important;               /* Altura automática - RESTAURADO */
    transition: none !important;           /* Sin animaciones de cambio */
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text); 
  background-color: var(--color-bg); 
  margin: 0; 
  padding: 0; 
  overflow-x: hidden; 
}

html {
  scroll-padding-top: 150px; /* Aumentado para compensar navbar más bajo */
  margin: 0; 
  padding: 0; 
  overflow-x: hidden; 
}

* {
  box-sizing: border-box; 
}

body, 
.container, 
.container-fluid, 
.row {
  margin-top: 0 !important; 
  padding-top: 0 !important; 
}

nav + *,
.navbar + * {
  margin-top: 0 !important; 
}

.swiper,
.myCustomSlider {
  margin: 0 !important; 
  padding: 0 !important; 
}

#gep-mision-vision-valores {
  margin-top: 100vh; 
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-heading); 
}

p, span, a, li, button, input, textarea {
  font-size: var(--font-size-base);
  font-family: var(--font-primary);
}

.gep-text-content{
  font-size: 16px !important;
}

#homeSlider {
  height: 100vh; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  width: 100%; 
  overflow: hidden;
  background: #000; 
  margin: 0 !important; 
  padding: 0 !important; 
  z-index: 1; 
}

#homeSlider .swiper-slide {
  height: 100vh; 
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#homeSlider .swiper-slide-active {
  opacity: 1;
}

#homeSlider .slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.02); 
  transition: transform 15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform-origin: center center;

  filter: brightness(1.0) contrast(1.1);
}

#homeSlider .swiper-slide-active .slide-bg {
  transform: scale(1.18);
  filter: brightness(1.05) contrast(1.15);
}

/* Estilos para el video en el slider */
#homeSlider .slide-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  filter: brightness(1.0) contrast(1.1);
}

#homeSlider .swiper-slide-active .slide-video {
  transform: scale(1);
  filter: brightness(1.0) contrast(1.1);
}

#homeSlider .slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;

  transition: all 0.8s ease-in-out;
}

#homeSlider .container {
  position: relative;
  z-index: 2;
  height: 100%;
}

#homeSlider .container > *,
#homeSlider .row,
#homeSlider .col-12,
#homeSlider .col-md-8,
#homeSlider .d-flex,
#homeSlider .text-center {
  background: transparent !important;
}

#homeSlider .slide-title {
  font-size: 2.5rem; 
  font-weight: 800;
  color: white; 
  text-shadow: 
    2px 2px 10px rgba(0, 0, 0, 0.7), 
    0 0 20px rgba(255, 255, 255, 0.1); 
  margin-bottom: 1.5rem;

  transform: translateY(60px);
  opacity: 0;
  filter: blur(5px);

  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity, filter;
}

#homeSlider .slide-subtitle {
  max-width: 700px;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.6;

  transform: translateY(60px);
  opacity: 0;
  filter: blur(5px);

  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity, filter;
}

#homeSlider .swiper-slide-active .slide-title {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0px);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  backdrop-filter: blur(15px) saturate(180%);
}

#homeSlider .swiper-slide-active .slide-subtitle {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0px);
}

#homeSlider .slider-nav-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--slider-btn-bg-start) 0%,     
    var(--slider-btn-bg-end) 100%      
  );
  border: 1px solid var(--slider-btn-border); 

  backdrop-filter: var(--slider-btn-blur) var(--slider-btn-saturate); 
  -webkit-backdrop-filter: var(--slider-btn-blur) var(--slider-btn-saturate); 

  box-shadow: 
    var(--slider-btn-shadow-main),     
    var(--slider-btn-shadow-inset),    
    var(--slider-btn-shadow-border);   

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, background, box-shadow, backdrop-filter;

  margin-top: 0;
  z-index: 10;
}

#homeSlider .slider-nav-btn:hover {
  background: linear-gradient(
    135deg,
    var(--slider-btn-hover-bg-start) 0%,     
    var(--slider-btn-hover-bg-end) 100%      
  );
  border: 1px solid var(--slider-btn-hover-border); 

  backdrop-filter: var(--slider-btn-hover-blur) var(--slider-btn-hover-saturate); 
  -webkit-backdrop-filter: var(--slider-btn-hover-blur) var(--slider-btn-hover-saturate); 

  transform: scale(1.1) translateY(-2px); 
  box-shadow: 
    var(--slider-btn-hover-shadow-main),     
    var(--slider-btn-hover-shadow-inset),    
    var(--slider-btn-hover-shadow-border);   
}

#homeSlider .swiper-button-next {
  right: 30px;
}

#homeSlider .swiper-button-prev {
  left: 30px;
}

#homeSlider .swiper-button-next:after,
#homeSlider .swiper-button-prev:after {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#homeSlider .slider-pagination-custom {
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  padding: 10px 20px;
  
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#homeSlider .slider-pagination-custom .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, background, border-color;
}

#homeSlider .slider-pagination-custom .swiper-pagination-bullet-active {
  background: var(--gep-yellow, #FFD700);
  border-color: var(--gep-yellow, #FFD700);
  transform: scale(1.4);

  box-shadow: 
    0 0 15px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.3);
}

#homeSlider .slider-pagination-custom .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

@media (max-width: 768px) {
  #homeSlider .slide-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  #homeSlider .slide-subtitle {
    font-size: 1.1rem;
    max-width: 90%;
  }

  #homeSlider .slider-nav-btn {
    width: 50px;
    height: 50px;
  }
  
  #homeSlider .slider-nav-btn:after {
    font-size: 16px;
  }
}

.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  position: relative;
  overflow: hidden;
}

.swiper-cube .swiper-slide {
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
  background-image: linear-gradient(to transparent, rgba(0, 0, 0, 0.4));
}

  @media (max-width: 768px) {
    #homeSlider .slide-title {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    
    #homeSlider .slide-subtitle {
      font-size: 1.1rem;
      max-width: 90%;
    }

    .slider-nav-btn {
      width: 45px !important;
      height: 45px !important;
    }

    .slider-nav-btn::after {
      font-size: 16px !important;
    }

    #homeSlider .slide-bg.zoom-active {
      transform: scale(1.03);
      transition-duration: 8s;
    }
  }

  @media (max-width: 480px) {
    #homeSlider .slide-title {
      font-size: 2rem;
    }
    
    #homeSlider .slide-subtitle {
      font-size: 1rem;
    }

    #homeSlider .slider-nav-btn,
    #homeSlider .swiper-button-next,
    #homeSlider .swiper-button-prev {
      top: 25% !important;
      margin-top: -25px !important;
    }
  }

  #homeSlider .swiper-slide {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

.slider-text{
  background: linear-gradient(
    135deg,
    var(--slider-text-bg-start) 0%,     
    var(--slider-text-bg-end) 100%      
  );
  
  backdrop-filter: var(--slider-text-blur) var(--slider-text-saturate) var(--slider-text-brightness); 
  -webkit-backdrop-filter: var(--slider-text-blur) var(--slider-text-saturate) var(--slider-text-brightness); 
  border: 1px solid var(--slider-text-border); 
  padding: 25px 30px; 
  border-radius: 20px;
  max-width: 600px; 
  box-shadow: 
    var(--slider-text-shadow-main),    
    var(--slider-text-shadow-inset),   
    var(--slider-text-shadow-border);  
  position: relative;
  overflow: hidden;
}

.slider-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 203, 2, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.slider-text:hover::before {
  left: 100%;
}

.SliderPrincipal{
  margin-top: 28rem; 
  margin-left: -12rem; 
}

@media (min-width: 2000px) {
  .SliderPrincipal{
    margin-top: 32rem; 
    margin-left: -30rem; 
  }
}

@media (max-width: 768px) {
  .slider-text {
    padding: 25px;
    border-radius: 15px;
  }
  
  .SliderPrincipal {
    margin-top: 8rem; 
    margin-left: -2rem; 
  }
}

.slider-section-separator {
  height: var(--separator-height); 
  width: 100%;
  background: transparent; 
  display: block;
  clear: both;
}

#mySlider{
  
  .container{
    
      width:100%;
      height:100vh;
      padding:50px;
      background-color: #000000;
      box-shadow: 0 30px 50px #dbdbdb;
  }
  #slide{
      width:max-content;
  }
  .item{
      width:200px;
      height:300px;
      background-position: 50% 50%;
      display: inline-block;
      transition: 0.5s;
      background-size: cover;
      position: absolute;
      z-index: 1;
      top:25%;
      transform: translate(0,0%);
      box-shadow:  0 30px 50px #505050;
  }
  .item:nth-child(1),
  .item:nth-child(2){
      left:0;
      top:0;
      transform: translate(0,0);
      border-radius: 0;
      width:100%;
      height:100%;
      box-shadow: none;
  }
  .item:nth-child(3){
      left:50%;
  }
  .item:nth-child(4){
      left:calc(50% + 220px);
  }
  .item:nth-child(5){
      left:calc(50% + 440px);
  }
  .item:nth-child(n+6){
      left:calc(50% + 660px);
      opacity: 0;
  }
  .item .content{
      position: absolute;
      top:50%;
      left:50px;
      width:600px;
      text-align: left;
      padding:0;
      color:#eee;
      transform: translate(0,-50%);
      display: none;
      font-family: system-ui;
  }
  .item:nth-child(2) .content{
      display: block;
      z-index: 11111;
  }
  .item .name{
      font-size: 2rem;
      font-weight: bold;
      opacity: 0;
      animation:showcontent 1s ease-in-out 1 forwards
  }
  #principal{
      font-size: 3vh;
  }
  .item .des{
      margin:20px 0;
      font-size: 20px;
      opacity: 0;
      animation:showcontent 1s ease-in-out 0.3s 1 forwards
  }
  .item .button{
      padding:10px 20px;
      border-style:solid;
      border-width: 1px;
      color: white;
      border-radius: 2cap;
      background-color: #4d4d4d65;
      opacity: 0;
      animation:showcontent 1s ease-in-out 0.6s 1 forwards
  }

  .buttons{
      position: absolute;
      bottom:30px;
      z-index: 222222;
      text-align: center;
      width:100%;
  }
  .buttons button{
      width:50px;
      height:50px;
      border-radius: 50%;
      border:1px solid #555;
      transition: 0.5s;
  }.buttons button:hover{
      background-color: #bac383;
  }
  body {
      position: relative;
  }
  div#slide {
      position: relative;
      height: 900px;
      width: 100%;
      display: inline-block;
  }
  .item:nth-child(5) {
      left: calc(80% + 40px);
  }
  .item:nth-child(4) {
      left: calc(65% + 20px);
  }
  .item:nth-child(3) {
      left: 50%;
  }
  .item {
      width: 15%;
  }
  .item button {
      color: #000;
  }
  .item:nth-child(2):before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgb(0 0 0 / 24%);
      top: 0;
      left: 0;
  }
  .item:nth-child(1) {
      z-index: 0;
  }
  .item:nth-child(2) {
      z-index: 1;
  }
  .item:nth-child(n+6) {
      z-index: -1;
  }
  @media(max-width: 992px){
      div#slide {
          height: 575px;
      }

      .item .content {
          top: 25%;
      }

      .item {
          height: 178px;
      }

      .item {top: 52%;}
  }
  @media(max-width: 768px){
      .item:nth-child(3) {
          left: calc(50px);
      }

      .item:nth-child(4) {
          left: calc(25% + 40px);
      }

      .item {
          width: 20%;
      }

      .item:nth-child(5) {
          left: calc(50% + 30px);
      }
  }
  @media(max-width: 550px){
      
      .item:nth-child(n+6) {
          display: none;
      }

      .item:nth-child(5) {
          opacity: 0;
      }

      .item .content {
          left: 0;
          padding-left: 15px;
          padding-right: 15px;
          width: 100%;
          max-width: 400px;
      }

      .item:nth-child(3) {
          left: 15px;
      }

      .item {
          width: 31%;
      }

      .item:nth-child(4) {
          left: calc(31% + 40px);
      }
      .buttons {
          padding-left: 15px;
          text-align: left;
          padding-right: 15px;
      }
    
  }
  .button{
      background-color: #fff;
      color: #000;
      padding: 5px 15px;
      
  }
}

@keyframes showcontent{
      from{
          opacity: 0;
          transform: translate(0,100px);
          filter:blur(33px);
      }to{
          opacity: 1;
          transform: translate(0,0);
          filter:blur(0);
      }
  }

  #myNavbar {
    transition: all 0.3s ease;
    width: 100%;
    z-index: 1000;
  }

  /* Franjas decorativas estilo marcador en la parte superior derecha */
  .navbar-static::before,
  .navbar-static::after {
    content: '';
    position: absolute;
    right: 0;
    height: 6px;
    border-radius: 3px 0 0 3px;
    opacity: 0.85;
  }

  /* Franja 1 (arriba): Azul claro → Azul oscuro degradado - PEGADA AL BORDE SUPERIOR scroll 0*/
  .navbar-static::before {
    top: 0px;
    left: 320px;
    right: 0;
    width: auto;
    background: linear-gradient(to right,
      transparent 0%,
      #00AEEC 18%,
      #00AEEC 24%,
      #0F539A 60%,
      #2E3092 100%
    );
    mask-image: linear-gradient(to right,
      transparent 0%,
      black 18%,
      black 100%
    );
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 18%,
      black 100%
    );
  }

  /* Franja 2 (abajo): Amarillo desgastado → Verde oscuro sólido - PEGADA AL BORDE INFERIOR scroll 0*/
  .navbar-static::after {
    top: 6px;
    left: 450px;
    right: 0;
    width: auto;
    background: linear-gradient(to right,
      transparent 0%,
      #FFCB02 22%,
      #FFCB02 28%,
      #2d5a2d 100%
    );
    mask-image: linear-gradient(to right,
      transparent 0%,
      black 22%,
      black 100%
    );
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 22%,
      black 100%
    );
  }

  /* Asegurar que los elementos internos del navbar no tengan background */
  .navbar-static .container-fluid,
  .navbar-static .navbar-collapse {
    background: transparent !important;
  }
  
  .navbar-static .nav-link{
    color: var(--gep-white);
    padding-top: 30px; /* Posición más moderada para que se vean bien */
    padding-bottom: 10px;
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 5px;
  }

  .navbar-static .nav-link:hover{
    color: var(--gep-dark-blue) !important;
    text-shadow: 0 0 8px rgba(219, 249, 71, 0.912),
                 0 0 12px rgba(255, 203, 2, 0.4),
                 0 0 16px rgba(255, 203, 2, 0.2);
    transform: translateY(-3px);
  }

  .navbar-floating .nav-link{
    color: var(--gep-dark-blue) !important;
    padding-top: 30px; /* Posición más moderada para que se vean bien */
    padding-bottom: 10px;
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 5px;
  }

  .navbar-floating .nav-link:hover{
    color: var(--gep-dark-blue) !important; 
    text-shadow: 0 0 8px rgba(219, 249, 71, 0.912),
                 0 0 12px rgba(15, 83, 154, 0.4),
                 0 0 16px rgba(15, 83, 154, 0.2);
    transform: translateY(-3px);
  }

  .nav-item.dropdown-toggle.p-lg-2 {
    padding-top: 55px !important;
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 5px;
  }

  .nav-item.dropdown-toggle.p-lg-2:hover {
    transform: translateY(-3px);
    text-shadow: 0 0 8px rgba(219, 249, 71, 0.912),
                 0 0 12px rgba(255, 203, 2, 0.4),
                 0 0 16px rgba(255, 203, 2, 0.2);
    color: var(--gep-dark-blue) !important; 
  }

  #navbarContenido .dropdown.pt-lg-5 {
    padding-top: 48px !important;
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 5px;
  }

  #navbarContenido .dropdown.pt-lg-5:hover {
    transform: translateY(-3px);
    text-shadow: 0 0 8px rgba(255, 203, 2, 0.6),
                 0 0 12px rgba(255, 203, 2, 0.4),
                 0 0 16px rgba(255, 203, 2, 0.2);
    color: var(--gep-dark-blue) !important; 
  }

  .dropdown-menu .nav-item .nav-link {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    transition: all 0.15s ease;
    margin: 2px 8px;
    position: relative;
  }

  .dropdown-menu .nav-item .nav-link:hover {
    background-color: #217c2d83; 
    color: #ffffff !important; 
    border-radius: 8px; 
    transform: scale(1.02); 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
    transition: all 0.15s ease; 
    margin: 2px 4px; 
  }

  .dropdown-menu {
    border: none; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    border-radius: 10px; 
    padding: 10px; 
    background: rgba(255, 255, 255, 0.98); 
  }

  .navbar-floating { /* Estilos para el navbar flotante */
    position: fixed !important;
    top: -18px; /*maneja eje Y del navbar flotante*/
    left: 0;
    right: 0;
    background-color: var(--navbar-bg-color); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1060; 
  }

  /* Franjas decorativas para navbar flotante */
  .navbar-floating::before,
  .navbar-floating::after {
    content: '';
    position: absolute;
    right: 0;
    height: 6px;
    border-radius: 3px 0 0 3px;
    opacity: 0.85;
  }

  /* Franja 1 (arriba): Azul claro → Azul oscuro degradado - PEGADA AL BORDE SUPERIOR */
  .navbar-floating::before {
    top: 0px;
    left: 320px;
    right: 0;
    width: auto;
    background: linear-gradient(to right,
      transparent 0%,
      #00AEEC 18%,
      #00AEEC 24%,
      #0F539A 60%,
      #2E3092 100%
    );
    mask-image: linear-gradient(to right,
      transparent 0%,
      black 18%,
      black 100%
    );
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 18%,
      black 100%
    );
  }

  /* Franja 2 (abajo): Amarillo desgastado → Verde oscuro sólido - PEGADA */
  .navbar-floating::after {
    top: 6px;
    left: 450px;
    right: 0;
    width: auto;
    background: linear-gradient(to right,
      transparent 0%,
      #FFCB02 22%,
      #FFCB02 28%,
      #2d5a2d 100%
    );
    mask-image: linear-gradient(to right,
      transparent 0%,
      black 22%,
      black 100%
    );
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 22%,
      black 100%
    );
  }

  /* Asegurar que los elementos internos del navbar flotante no tengan background */
  .navbar-floating .container-fluid,
  .navbar-floating .navbar-collapse {
    background: transparent !important;
  }

  /* Ajustes responsivos para las franjas decorativas SUPERIORES */
  @media (max-width: 991px) {
    .navbar-static::before,
    .navbar-floating::before {
      left: 150px;
    }
    
    .navbar-static::after,
    .navbar-floating::after {
      left: 250px;
    }
  }

  @media (max-width: 768px) {
    #LogoBlanco{
      width: 220px;
    }
    
    .navbar-static::before,
    .navbar-floating::before {
      left: 50px;
    }
    
    .navbar-static::after,
    .navbar-floating::after {
      left: 120px;
    }
  }

  @media (max-width: 576px) {
    .navbar-static::before,
    .navbar-floating::before {
      left: 20px;
    }
    
    .navbar-static::after,
    .navbar-floating::after {
      left: 80px;
    }
  }

  @media (max-width: 480px) {
    .navbar-static::before,
    .navbar-floating::before {
      left: 10px;
    }
    
    .navbar-static::after,
    .navbar-floating::after {
      left: 60px;
    }
  }

#gep-mision-vision-valores {
  
  .gep-bg-section {
    background-size: cover;
    background-position: center;
    min-height: fit-content;
    height: auto;
    position: relative;
  }

  .gep-bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.432);
  }

  .gep-nav-container {
    width: 240px;
  }

  .gep-nav-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }

  .gep-nav-title {
    font-weight: 600;
    color: #FFFFFF !important; 
  }

  .gep-nav-container .nav-link .gep-nav-title {
    color: #FFFFFF !important; 
  }

  .gep-nav-container .nav-link.active .gep-nav-title {
    color: #FFFFFF !important; 
  }

  #navbarContenido .navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #navbarContenido .nav-item {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #navbarContenido .dropdown {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #navbarContenido .nav-link {
    padding-left: 0 !important;
    
  }

  #navbarContenido .nav-item,
  #navbarContenido .dropdown {
    display: inline-block !important;
    vertical-align: top !important;
  }

  #navbarContenido .dropdown .nav-item.dropdown-toggle {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .logo-coin-container {
    position: relative;
    display: inline-block;
    max-height: 80px;
    max-width: 350px;
    width: auto;
    height: auto;
    z-index: 1; 
  }

  .logo-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.6s ease;
  }

  .logo-face-front {
    opacity: 1;
    transform: rotateY(0deg);
    z-index: 2;
  }

  .logo-face-back {
    opacity: 0;
    transform: rotateY(0deg);
    z-index: 1;
  }

  .logo-coin-container.flipping .logo-face-front {
    animation: hide-face 0.6s ease-in-out;
  }

  .logo-coin-container.flipping .logo-face-back {
    animation: show-face 0.6s ease-in-out;
  }

  .logo-coin-container.showing-back .logo-face-front {
    opacity: 0;
    z-index: 1;
  }

  .logo-coin-container.showing-back .logo-face-back {
    opacity: 1;
    z-index: 2;
  }

  .logo-face video,
  .logo-face img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  @keyframes hide-face {
    0% {
      opacity: 1;
      transform: rotateY(0deg);
    }
    50% {
      opacity: 0;
      transform: rotateY(90deg);
    }
    100% {
      opacity: 0;
      transform: rotateY(180deg);
    }
  }

  @keyframes show-face {
    0% {
      opacity: 0;
      transform: rotateY(-180deg);
    }
    50% {
      opacity: 0;
      transform: rotateY(-90deg);
    }
    100% {
      opacity: 1;
      transform: rotateY(0deg);
    }
  }

  .gep-nav-subtitle {
    opacity: 0.8;
  }

  .gep-content-container {
    padding: 40px;
    background: #f8f9fa;
    min-height: 500px;
    border-radius: 20px;
    margin: 20px;
  }

  .gep-tab-content {
    padding: 40px;
    background: #f8f9fa;
    min-height: 500px;
    border-radius: 20px;
    margin: 20px;
  }

  .gep-content-wrapper {
    padding: 20px 15px;
  }

  .gep-responsive-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gep-text-content {
    padding: 0 0.5rem;
    text-align: justify;

  }

  .gep-value-icon-large {
    width: 80px;
    height: 80px;
    background-color: var(--gep-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
  }

  .gep-value-icon-medium {
    width: 60px;
    height: 60px;
    background-color: var(--gep-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
  }

  .gep-value-icon-small {
    width: 60px;
    height: 60px;
    background-color: var(--gep-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
  }

  .gep-icon-large {
    font-size: 30px;
  }

  .gep-icon-medium {
    font-size: 24px;
  }

  .gep-value-title {
    font-weight: 600;
  }

  .gep-value-title-large {
    font-weight: 600;
    color: var(--gep-blue);
  }

  .gep-value-title-medium {
    font-weight: 600;
    color: var(--gep-blue);
  }

  .gep-value-title-small {
    font-weight: 600;
  }

  .gep-mt-small {
    margin-top: 0.5rem;
  }

  .gep-mt-medium {
    margin-top: 3rem;
  }

  .gep-px-medium {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  @media (max-width: 768px) {
    .gep-responsive-padding {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    
    .gep-content-wrapper {
      padding: 15px 10px;
    }
    
    .gep-nav-container {
      width: 200px;
    }
    
    .gep-nav-button {
      width: 35px;
      height: 35px;
      font-size: 16px;
    }
    
    .gep-nav-title {
      font-size: 14px;
    }
    
    .gep-nav-subtitle {
      font-size: 11px;
    }
    
    .gep-value-icon-large {
      width: 70px;
      height: 70px;
    }
    
    .gep-value-icon-small {
      width: 50px;
      height: 50px;
    }
    
    .gep-icon-large {
      font-size: 25px;
    }
  }

  @media (max-width: 576px) {
    .gep-responsive-padding {
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }
    
    .gep-content-wrapper {
      padding: 10px 5px;
    }
    
    .gep-nav-container {
      width: 180px;
    }
    
    .gep-nav-button {
      width: 30px;
      height: 30px;
      font-size: 14px;
    }
    
    .gep-nav-title {
      font-size: 12px;
    }
    
    .gep-nav-subtitle {
      font-size: 10px;
    }
    
    .gep-value-icon-large {
      width: 60px;
      height: 60px;
    }
    
    .gep-value-icon-small {
      width: 45px;
      height: 45px;
    }
    
    .gep-icon-large {
      font-size: 20px;
    }

  }
}

  .gep-section-title {
    position: relative;
    padding-left: 50px;
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
    color: #003366; /* Color azul oscuro para el título "Operación y mantenimiento integral de facilidades" */
    font-size: 3rem; /* Tamaño más grande para títulos de sección */
  }
.gep-title-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--gep-yellow);
  }

#gep-gestion-hseq {
    position: relative;
    background-image: url(../images/gep/images/TecnologiayEficiencia.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0; 
    min-height: 600px; 
    z-index: 1;
}

#gep-gestion-hseq h2.gep-section-title {
    
    color: #ffffff !important; 

}

  .section-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--hseq-overlay-color); 
    opacity: var(--hseq-overlay-opacity);        
    z-index: -1;
  }

.card {
  background-color: rgba(98, 98, 98, 0.584);
  border: none;
  border-radius: 0;
  color: white;
}

.card.flip-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.square-card {
  padding: 10px;
  align-items: center;
  justify-content: center;
  background-color: #e2e2e25d !important;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.8);
  min-height: 280px; 
}

.square-card.flip-card {
  background-color: transparent !important;
  box-shadow: none !important; 
  padding: 0 !important; 
  border: none !important; 
  overflow: visible !important; 
}

.square-card .card-body {
  padding: 15px;
}

.square-card i {
  font-size: 50px;
  margin-bottom: 10px;
  color: #009419;
}

.square-card h5 {
  font-weight: bold;
  color:white !important;
}

.square-card p {
  font-size: 0.9rem;
  margin: 0;
  text-align: justify;
  color:white;
}

.flip-card {
  background-color: transparent !important;
  perspective: 1000px; 
  min-height: 280px; 
  width: 100%;
  aspect-ratio: 1 / 1; 
  transition: transform var(--flip-card-duration) ease; 
}

.flip-card:hover {
  transform: scale(var(--flip-card-zoom)); 
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform var(--flip-card-duration) ease; 
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; 
  border-radius: 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.8);
}

.flip-card-front {
  background-color: var(--flip-card-front-bg); 
}

.flip-card-back {
  background-color: var(--flip-card-back-bg); 
  transform: rotateY(180deg); 
}

.flip-card-front .card-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.flip-card-front i {
  font-size: 50px;
  margin-bottom: 15px;
  color: #009419; 
}

.flip-card-front h5 {
  font-weight: bold;
  color: white !important;
  font-size: 1.2rem;
  margin: 0;
}

.flip-card-back .card-body {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.flip-card-back p {
  font-size: 0.9rem;
  margin: 0;
  text-align: justify;
  color: white;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .flip-card {
    min-height: 250px; 
    aspect-ratio: 1.1 / 1; 
  }
  
  .flip-card-front i {
    font-size: 40px; 
  }
  
  .flip-card-front h5 {
    font-size: 1.1rem; 
  }
  
  .flip-card-back p {
    font-size: 0.85rem; 
    line-height: 1.3;
  }
  
  .flip-card-back .card-body {
    padding: 15px; 
  }
}

.card-hover {
    position: relative;
    overflow: hidden;
    color: white;
    border: none;
    height: 260px;
    padding: 1.5rem;
    transition: transform 0.3s ease;
    background-image: url(../images/bg/FondoNegro.jpg);
    background-size: cover;
    border-right: var(--gep-yellow) solid 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }

  .card-hover:hover {
    transform: translateY(-5px);
  }

  .card-hover .card-front,
  .card-hover .card-back {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .card-hover .card-back {
    background-image: url(../images/bg/fondogris-100.jpg);
    background-size: cover;
    color: var(--gep-dark-gray);
    opacity: 0;
    z-index: 1;
  }

  .card-hover:hover .card-back {
    opacity: 1;
    z-index: 2;
  }

  .card-hover:hover .card-front {
    opacity: 0;
  }

  .icon-box {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .no-rounded {
    border-radius: 0 !important;
  }

  .estrategias-section {
      padding: 60px 20px;
      position: relative;
        padding: 50px 0;
        z-index: 1;
    }

    .estrategias-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.5;
        z-index: -1;
        }

    .estrategias-section h2 {
      text-align: center;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .estrategias-section p {
      text-align: justify;
      margin-bottom: 30px;
    }

    .intro-paragraph {
      max-width: 900px;
      margin: 0 auto 50px auto;
      text-align: justify;
      line-height: 1.6;
    }

    .estrategias-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 30px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .estrategia-box {

      display: flex;
      align-items: flex-start;
      gap: 20px;
      border-radius: 6px;
      box-shadow: 0 8px 15px rgba(0,0,0,0.1);
      margin: 10px;
      padding: 10px;
      min-height: 180px; 
    }
    .estrategia-box:hover {
      transform: scale(1.01); 
       box-shadow: 2px 3px 3px 3px #b1b1b1;
    }

    .icon-placeholder {
      width: 80px;
      height: 80px;
      background-color: var(--gep-yellow);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: var(--gep-white);
    }

    .estrategia-text {
      flex: 1;
      text-align: justify;
      display: flex;
      flex-direction: column;
      justify-content: flex-start; 
    }

    .estrategia-title {
      font-weight: bold;
      margin-bottom: 8px;

    }

    .estrategia-description {
      line-height: 1.5;
    }
    .estrategias-grid i{
        margin: 10px;
        color: #2E3092;
    }

    .certification-box {
      position: relative;
        background-size: auto;
        background-position:center;
        background-repeat: no-repeat;
        padding: 50px 0;
        z-index: 1;
        color: var(--gep-white);
        padding: 20px;
        max-width: 1000px;
        margin: 40px auto 0 auto;
        text-align: center;
    }
    .certification-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--gep-yellow); 
        opacity: 0.9;
        z-index: -1;
        }

    @media (max-width: 420px) {
      .estrategia-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .estrategia-text {
        text-align: justify;
      }
    }

    .contact-container {
      position: relative;
      z-index: 1;
      display: flex;
      max-width: 1200px;
      margin: 60px auto 60px auto;
    }

    .left-section {
      flex: 1.2;
      background: var(--gep-dark-gray);
      background-image:
        linear-gradient(30deg, #404040 15%, transparent 15.5%, transparent 85%, #404040 85.5%, #404040),
        linear-gradient(150deg, #404040 15%, transparent 15.5%, transparent 85%, #404040 85.5%, #404040),
        linear-gradient(30deg, #383838 15%, transparent 15.5%, transparent 85%, #383838 85.5%, #383838),
        linear-gradient(150deg, #383838 15%, transparent 15.5%, transparent 85%, #383838 85.5%, #383838),
        linear-gradient(60deg, #2d2d2d 25%, transparent 25.5%, transparent 75%, #2d2d2d 75%, #2d2d2d),
        linear-gradient(60deg, #2d2d2d 25%, transparent 25.5%, transparent 75%, #2d2d2d 75%, #2d2d2d);
      background-size: 60px 105px;
      background-position: 0 0, 0 0, 30px 52px, 30px 52px, 0 0, 30px 52px;
      background-color: #151515;
      align-content: center;
      padding: 40px;
      color: white;
      z-index: 1;
      height: 700px;
      position: relative;
      overflow: hidden;
    }

    .left-section h2 {
      margin-bottom: 15px;
      color: white;
    }

    .left-section p {
      margin-bottom: 30px;
      line-height: 1.5;
    }

    .form-row {
      display: flex;
      width: 100%;
      gap: 20px;
      margin-bottom: 20px;
    }

    .form-row input,
    .form-row textarea {
      width: 100%;
      padding: 12px;
      border: none;
    }

    .form-row textarea {
      resize: none;
      height: 120px;
    }

    .send-btn {
      background-color: var(--gep-yellow);
      border: none;
      padding: 14px;
      width: 100%;
      color: rgb(252, 252, 252);
      font-weight: bold;
      cursor: pointer;
      margin-top: 10px;
    }

    .right-section {
      flex: 1.3;
      align-content: center;
      margin: auto;
      z-index: -1;
      padding: 70px;
      background-image: url(../images/bg/fondogris-100.jpg);
      position: relative;
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
      height: 600px;
    }

    @media (max-width: 768px) {
      .right-section {
        padding: 20px 20px 20px 20px;
      }
    }
    
    .right-section h2 {
      margin-bottom: 20px;
      color: var(--gep-black);
    }

    .right-section p {
      margin-bottom: 25px;
      color: #000000;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 20px;
    }

    .contact-item a {
      text-decoration: none !important;
      color: #000000;
    }.contact-item a:hover {
      color: var(--gep-yellow);
    }

    .contact-item i {
      font-size: 25px;
      color: var(--gep-yellow);
      margin-top: 5px;
      
    }

    .contact-text {
      color: #000000;
    }

    .contact-text strong {
      display: block;
      font-weight: bold;
      color: var(--gep-black);
    }

    @media (max-width: 768px) {
      .contact-container {
        flex-direction: column;
        margin: 20px;
      }

    }

#gep-servicios{
  .experience-box {
    background: white;
    padding: 0.8rem 1rem;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 6px;
    text-align: center;
  }

  .tab-carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; 
  }

  #myTabServices {
    flex-wrap: nowrap;
    width: max-content;
  }

  .experience-box h2 {
    color: var(--gep-yellow);
    margin: 0;
  }

  .experience-box p {
    margin: 0;
    color: #333;
  }

  .img-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }

  .img-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
  }

  /* ═══════════════════════════════════════════════════════════════════
     ⚠️ ELIMINADO: .item-services (duplicado)
     
     🔧 RAZÓN: Estilo movido a gep-servicios.css para mejor organización
     📍 NUEVA UBICACIÓN: css/gep-servicios.css
     ═══════════════════════════════════════════════════════════════════ */

  /* Color azul oscuro para los textos de servicios */
  .d-flex h6.fw-bold {
    color: #003366;
  }

  @media (max-width: 768px) {
    .experience-box {
      top: 10px;
      left: 10px;
      padding: 0.6rem 0.8rem;
    }
    
  }
}

.nav-link svg {
  color: black; 
}
.nav-link.active svg {
  color: var(--gep-blue-dark-2); 
}

.gep-service-icon-1 {
  stroke: #ee855f !important; 
}

.gep-service-icon-2 {
  stroke: #1e40af !important; 
  fill: #1e40af !important; 
}

.gep-service-icon-3 {
  stroke: #8fe1fc !important; 
}

.gep-service-icon-4 {
  stroke: #32CD32 !important; 
}

.gep-service-icon-5 {
  stroke: #c396eefa !important; 
}

.gep-service-icon-6 {
  stroke: #DC143C !important; 
}

.gep-service-icon-7 {
  stroke: #20B2AA !important; 
}

.gep-service-icon-8 {
  stroke: #4169E1 !important; 
}

.gep-service-icon-9 {
  stroke: #FF8C00 !important; 
}

#logoCarousel .logo-img {
  width: 250px;
  height: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

#logoCarousel .logo-img:hover {
  filter: grayscale(0%);
}

#gep-maps{
  background-image: url(../images/bg/fondogris-100.jpg);
  background-size: cover !important;
  text-align: justify;
}

.nav-link-maps {
  background-color: var(--gep-light-gray);
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-link-maps:hover {
  background-color: var(--gep-dark-gray);
  color: var(--gep-white);
}

.nav-link-maps.active {
  background-color: var(--gep-yellow);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.border-company-left{
  border-left: 1px;
  border-color: var(--gep-yellow);
  border-style: solid;
}

#gep-ingenieria-proceso {
  background-image: url(../images/GEP/Images/FondoProcesos.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 50px 0;
  position: relative; 
  z-index: 2;
}

#gep-ingenieria-proceso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(255, 255, 255);
  opacity: 0.8;
  z-index: -1;
}

.line-column {
  width: 2px;
  background: var(--gep-dark-gray);
  animation: pulse 2s infinite;
  height: 100%;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px var(--gep-dark-gray);
  }
  50% {
    opacity: 0.4;
    box-shadow: 0 0 16px var(--gep-dark-gray);
  }
}

.list-icon {
  color: var(--gep-dark-gray);
  margin-right: 10px;
  
}

.arrow {
  font-size: 40px;
  color: var(--gep-dark-gray);
  animation: colorPulse 2s infinite;
}

@keyframes colorPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@media (max-width: 768px) {
  .line-column {
    display: none;
  }
}

 .accordion-button {
    color: black !important;
    font-weight: bold;
    box-shadow: none !important;
  }
  .accordion-collapse.collapse.show{
    background-color: var(--gep-white);
  }

 .accordion-button:not(.collapsed){
  background-color: var(--gep-yellow) !important;
 }   

 .icon {
    width: 80px;  
    height: 80px;
    color: var(--gep-dark-blue) !important;
  }

  .icon-black {
    width: 50px;  
    height: 50px;
    color: var(--gep-black) !important;
    align-items: center;
  }

    footer a{
      text-decoration: none !important;
      color: #ffffff;
    }
    footer a:hover {
      color: var(--gep-yellow);
    }

    footer .gep-section-title {
      color: #ffffff !important;
    }

  #myTabContentServices p, h6, ul, li{
    text-align: justify !important;
  }

      .carousel-caption {
      background-color: rgba(0, 0, 0, 0.6);
      padding: 20px;
      border-radius: 10px;
    }
    /* ========================================
       CONTROL DE IMÁGENES EN CARRUSELES DE SERVICIOS
       ========================================

       Aquí puedes controlar cómo se ven las imágenes en todos los carruseles de servicios.
       Estos estilos afectan TODAS las imágenes de servicios (generación eléctrica,
       unidades de bombeo, plantas de tratamiento, well testing, mantenimiento, etc.)
    */
    .carousel-item img {
      /* ⬇️ ALTURA MÁXIMA DE LA IMAGEN ⬇️
         - Valor actual: 550px
         - Valores sugeridos:
           * 300px = imágenes más pequeñas y compactas
           * 350px = imágenes medianas
           * 400px = tamaño estándar
           * 450px = imágenes más grandes
           * 500px = imágenes muy grandes
           * 550px = imágenes extra grandes (ACTUAL)
         - También puedes usar porcentajes del viewport:
           * 40vh = 40% de la altura de la ventana
           * 50vh = 50% de la altura de la ventana
           * 60vh = 60% de la altura de la ventana
      */
      max-height: 550px;

      /* ⬇️ ANCHO DE LA IMAGEN ⬇️
         - Valor actual: 100% (ocupa todo el ancho del contenedor)
         - NO SE RECOMIENDA CAMBIAR, pero si quieres:
           * 100% = ancho completo (RECOMENDADO)
           * 80% = deja espacios a los lados
           * auto = usa el ancho natural de la imagen
      */
      width: 100%;

      /* ⬇️ CÓMO SE AJUSTA LA IMAGEN AL CONTENEDOR ⬇️
         - Valor actual: cover (recorta la imagen proporcionalmente para llenar el contenedor)
         - Otras opciones:
           * cover = recorta para llenar todo el espacio sin distorsionar (ACTUAL - RECOMENDADO)
           * contain = muestra la imagen completa, puede dejar espacios vacíos
           * fill = estira la imagen para llenar todo (PUEDE DISTORSIONAR)
           * scale-down = muestra la imagen completa pero más pequeña si es necesario
           * none = muestra la imagen en su tamaño original (puede verse cortada)
      */
      object-fit: cover;

      /* ⬇️ QUÉ PARTE DE LA IMAGEN SE MUESTRA ⬇️
         - Valor actual: center (muestra el centro de la imagen)
         - Otras opciones:
           * center = centra la imagen (ACTUAL - RECOMENDADO)
           * top = muestra la parte superior
           * bottom = muestra la parte inferior
           * left = muestra el lado izquierdo
           * right = muestra el lado derecho
           * top left = esquina superior izquierda
           * bottom right = esquina inferior derecha
           * También puedes usar porcentajes: "50% 30%" (horizontal, vertical)
      */
      object-position: center;
    }
    #SliderServicios{
      box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.555);
    }

#homeSlider .slide-title,
#homeSlider .slide-subtitle,
#homeSlider .swiper-slide .slide-title,
#homeSlider .swiper-slide .slide-subtitle,
#homeSlider .swiper-slide h1,
#homeSlider .swiper-slide h2,
#homeSlider .swiper-slide h3,
#homeSlider .swiper-slide p {
  backdrop-filter: none !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important; 
}

.myCustomSlider .slide-title,
.myCustomSlider .slide-subtitle,
.swiper-slide .slide-title,
.swiper-slide .slide-subtitle {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

#gep-sistema-gestion .slide-title,
#gep-sistema-gestion h6.slide-title,
#gep-sistema-gestion .slide-title.fw-bold {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

#gep-sistema-gestion .d-flex h6,
#gep-sistema-gestion .d-flex p,
#gep-sistema-gestion .d-flex .fw-bold,
#gep-sistema-gestion .d-flex .text-muted,
#gep-sistema-gestion .d-flex > div > h6,
#gep-sistema-gestion .d-flex > div > p {
  backdrop-filter: none !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  position: relative;
  z-index: 10 !important;
  isolation: isolate;
}

#gep-sistema-gestion h6[class*="slide-title"],
#gep-sistema-gestion .slide-title,
#gep-sistema-gestion h6.fw-bold {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#gep-sistema-gestion h6,
#gep-sistema-gestion p,
#gep-sistema-gestion .fw-bold,
#gep-sistema-gestion .text-muted,
#gep-sistema-gestion .d-flex h6,
#gep-sistema-gestion .d-flex p,
#gep-sistema-gestion .d-flex .fw-bold,
#gep-sistema-gestion .d-flex .text-muted {
  
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-filter: none !important;
  -webkit-backdrop-filter: none !important;

  background: transparent !important;
  background-color: transparent !important;

  text-shadow: none !important;
  box-shadow: none !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-smooth: always !important;

  position: relative !important;
  z-index: 100 !important;
  isolation: isolate !important;

  transform: translateZ(0) !important;
  will-change: auto !important;
}

#gep-sistema-gestion .d-flex > div > h6,
#gep-sistema-gestion .d-flex > div > p {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

#gep-sistema-gestion .glassmorphism-box {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#gep-sistema-gestion .d-flex {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 15px;
  transition: all 0.3s ease;
  
  background: transparent;
  
  z-index: 1;
}

#gep-sistema-gestion .d-flex::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  
  backdrop-filter: none !important; 
  border-radius: 12px;
  z-index: -1;
  transition: all 0.3s ease;
  pointer-events: none; 
}

#gep-sistema-gestion .d-flex:hover {
  border: 1px solid rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#gep-sistema-gestion .d-flex:hover::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  
  backdrop-filter: none !important; 
}

.infinite-scroll-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 140px; 
  display: flex;
  align-items: center;
}

.infinite-scroll-track {
  display: flex;
  align-items: center;
  animation: scroll-infinite 60s linear infinite;
  
  will-change: transform; 
}

.logo-item {
  flex: 0 0 auto;
  
  /* ═══════════════════════════════════════════════════════════════════════════════════════
     📐 CONTROL DE ESPACIADO ENTRE LOGOS DEL CARRUSEL
     ═══════════════════════════════════════════════════════════════════════════════════════
     
     🎯 QUÉ HACE ESTA PROPIEDAD:
     margin-right controla el ESPACIO HORIZONTAL entre cada logo de empresa en el carrusel
     
     📊 VALORES Y SUS EFECTOS:
     • VALORES POSITIVOS (10px, 20px, 30px, 40px):
       → Crea SEPARACIÓN entre logos
       → Los logos se ven distintos y separados
       → Más fácil de leer cada logo individual
       
     • VALOR CERO (0px):
       → Los logos quedan PEGADOS pero sin superponerse
       → Sin espacio entre ellos
       → Carrusel más compacto
       
     • VALORES NEGATIVOS (-50px, -100px, -210px):
       → Los logos se SUPERPONEN
       → Se ven encimados y difíciles de leer
       → Efecto visual confuso (PROBLEMA ANTERIOR)
       
     🔧 CÓMO AJUSTAR:
     • Para MÁS separación: aumentar valor (40px, 50px)
     • Para MENOS separación: disminuir valor (15px, 20px)
     • Para logos PEGADOS: usar 0px
     • NUNCA usar valores negativos (causa superposición)
     
     🚨 IMPORTANTE:
     Este espaciado debe coordinarse con:
     • min-width: 250px (ancho mínimo de cada logo)
     • La velocidad de animación del carrusel
     • El número total de logos en el HTML
     
     ═══════════════════════════════════════════════════════════════════════════════════════ */
  margin-right: 30px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  min-width: 250px; 
}

.logo-item .logo-img {
  width: 250px;
  height: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.logo-item:hover .logo-img {
  filter: grayscale(0%);
}

@keyframes scroll-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
    
  }
}

.infinite-scroll-wrapper:hover .infinite-scroll-track {
  animation-play-state: paused;
}

@media (max-width: 992px) {
  .logo-item {
    min-width: 200px;
    margin-right: 30px; /* Ajuste del espacio entre logos de los clientes en modo movil*/
  }
  
  .logo-item .logo-img {
    width: 200px;
    height: 110px;
  }
  
  .infinite-scroll-wrapper {
    height: 110px;
  }
}

@media (max-width: 576px) {
  .logo-item {
    min-width: 150px;
    margin-right: 20px; /* Ajuste del espacio entre logos de los clientes en modo movil*/
  }
  
  .logo-item .logo-img {
    width: 150px;
    height: 85px;
  }
  
  .infinite-scroll-wrapper {
    height: 85px;
  }
  
  .infinite-scroll-track {
    animation-duration: 40s; 
  }
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 99999;
    cursor: grab;
    /* Ocultar inicialmente */
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
}

/* Aparecer después del intro - GRADUAL de 0 a tamaño normal */
.whatsapp-float.show-after-intro {
    visibility: visible !important;
    animation: appear-once 0.8s ease-out forwards;
}

/* Después de aparecer, fijar el estado final para que no se repita la animación */
.whatsapp-float.appeared {
    opacity: 1 !important;
    transform: scale(1);
    visibility: visible !important;
}

/* Cuando NO está palpitando, mantener el tamaño normal */
.whatsapp-float.appeared:not(.pulse) {
    transform: scale(1) !important;
}

@keyframes appear-once {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   PALPITO DE CORAZÓN - 3 latidos continuos
   ============================================ */

/* DURACIÓN TOTAL: 1.8s - Cambia este valor si quieres que la secuencia completa sea más rápida o más lenta
   IMPORTANTE: Si cambias este valor, también cámbialo en gep-whatsapp-float.js línea 66 */
.whatsapp-float.pulse {
    animation: heartbeat-triple 1.8s ease-in-out !important;
}

@keyframes heartbeat-triple {
    /* ===== PRIMER LATIDO ===== */
    /* Para AGREGAR más latidos: duplica este bloque y ajusta los porcentajes */
    /* Para QUITAR latidos: elimina uno de estos bloques */
    0% {
        transform: scale(1);  /* Tamaño normal */
    }
    5% {
        transform: scale(1.12);  /* INTENSIDAD DEL PALPITO: 1.12 = 12% más grande. Aumenta para más dramatismo (ej: 1.15, 1.2) */
    }
    10% {
        transform: scale(1);  /* Regresa a tamaño normal */
    }

    /* ===== SEGUNDO LATIDO ===== */
    /* TIEMPO ENTRE LATIDOS: La pausa entre 10% y 25% controla el espacio entre palpitos */
    /* Para MÁS pausa entre latidos: aumenta la diferencia (ej: de 25% a 35%) */
    /* Para MENOS pausa: reduce la diferencia (ej: de 25% a 15%) */
    25% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.12);  /* Misma intensidad que el primer latido */
    }
    35% {
        transform: scale(1);
    }

    /* ===== TERCER LATIDO ===== */
    50% {
        transform: scale(1);
    }
    55% {
        transform: scale(1.12);
    }
    60% {
        transform: scale(1);
    }

    /* Pausa final hasta el 100% - esto hace que después del tercer latido haya silencio hasta que termine la animación */
    100% {
        transform: scale(1);
    }
}

/* ============================================
   GUÍA RÁPIDA DE MODIFICACIONES:
   ============================================

   1. CAMBIAR CANTIDAD DE PALPITOS:
      - Para 2 palpitos: elimina el bloque del tercer latido (líneas 2803-2811)
      - Para 4 palpitos: agrega un cuarto bloque similar después del tercero, ajustando porcentajes

   2. CAMBIAR INTENSIDAD (qué tan grande crece):
      - Modifica el valor scale(1.12) en TODOS los latidos
      - Ejemplos: scale(1.08) = más suave, scale(1.15) = más dramático

   3. CAMBIAR VELOCIDAD DE CADA LATIDO:
      - Modifica la diferencia entre porcentajes
      - Latido más rápido: 0%, 3%, 6% (menos diferencia)
      - Latido más lento: 0%, 8%, 16% (más diferencia)

   4. CAMBIAR PAUSA ENTRE LATIDOS:
      - Modifica el espacio entre bloques
      - Menos pausa: 10%, 15%, 20%, 25% (5% de diferencia)
      - Más pausa: 10%, 25%, 40%, 55% (15% de diferencia)

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

.whatsapp-float:hover {
    transform: scale(1.05) !important;
}

/* Solo hover si ya apareció */
.whatsapp-float.show-after-intro:hover {
    transform: scale(1.05) !important;
}

.whatsapp-icon {
    width: 72px;
    height: 72px;
    display: block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    pointer-events: none;
    filter: drop-shadow(2px 2px 6px var(--whatsapp-shadow-color));
}

.whatsapp-float,
.whatsapp-float:active,
.whatsapp-float:focus {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none !important;
}

.whatsapp-float.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 80px;
        height: 80px;
        bottom: 15px;
        right: 15px;
        z-index: 99999 !important; 
        
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        
        transition: transform 0.1s ease-out;
        /* Ocultar inicialmente en móviles también */
        transform: scale(0);
        opacity: 0;
        visibility: hidden;
    }
    
    /* Animación de aparición en móviles */
    .whatsapp-float.show-after-intro {
        visibility: visible !important;
        opacity: 1 !important;
        animation: whatsapp-appear-mobile 0.6s ease-out forwards;
        /* Asegurar que se quede en scale(1) después de la animación */
        transform: scale(1);
    }
    
    @keyframes whatsapp-appear-mobile {
        0% {
            transform: scale(0);
            opacity: 0;
            visibility: visible;
        }
        100% {
            transform: scale(1);
            opacity: 1;
            visibility: visible;
        }
    }
    
    .whatsapp-float.dragging {
        
        transform: scale(1.2) !important;
        transition: none;
        
        filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
    }
    
    .whatsapp-icon {
        width: 60px;
        height: 60px;
        
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
    }
}

.navbar-element-independent {
    
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: absolute !important;
    display: block !important;

    transform-origin: center !important;

    white-space: nowrap !important;

    z-index: 10 !important;
}

.navbar-logo-independent {
    
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: absolute !important;
    display: block !important;

    z-index: 15 !important;

}

.navbar-logo-center-independent {
    
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: absolute !important;
    display: block !important;

    z-index: 20 !important;

}

/* ════════════════════════════════════════════════════════════════════════════
   ⚠️  BLOQUE ELIMINADO - NO FUNCIONABA
   ════════════════════════════════════════════════════════════════════════════
   
   Las reglas de tamaño del logo central (logonombre.png) que estaban aquí
   NO SURTÍAN EFECTO porque están siendo sobrescritas por:
   
   📄 css/gep-logo-responsive.css
   
   Ese archivo se carga DESPUÉS de gep-theme.css en el HTML (línea 63),
   y además usa !important en todas sus reglas, lo que le da prioridad total.
   
   🎯 PARA CONTROLAR EL TAMAÑO DEL LOGO:
   Modifica el archivo: css/gep-logo-responsive.css
   
   Ese archivo tiene 19 breakpoints granulares (≤320px hasta >1400px) con
   controles específicos de max-height y max-width para cada resolución.
   
   EJEMPLO - Para tu dispositivo 468x858 (breakpoint 451-480px):
   Busca en gep-logo-responsive.css la sección:
   
   @media screen and (max-width: 480px) and (min-width: 451px) {
     .navbar-logo-center-independent img {
       max-height: XXpx !important;  ← Ajusta aquí el tamaño
       max-width: XXXpx !important;
     }
   }
   
   ════════════════════════════════════════════════════════════════════════════ */

.navbar-element-independent a.nav-link {
    
    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0 !important;

    background-color: transparent !important;

    text-decoration: none !important;

    display: inline-block !important;
    cursor: pointer !important;
}

.navbar-element-independent a.nav-link,
.navbar-element-independent li.dropdown-toggle {
    
    position: relative !important;

    transition: all 0.15s ease !important;
}

.navbar-element-independent a.nav-link::before {
    
    content: "";
    position: absolute;
    bottom: -3px;           
    left: 50%;
    width: 0;               
    height: 2px;            
    background-color: transparent; 
    transform: translateX(-50%);
    transition: width 0.15s ease, background-color 0.15s ease; 
}

.navbar-element-independent a.nav-link:hover {
    
    background-color: transparent !important;
    color: var(--gep-dark-blue) !important;
    text-decoration: none !important;

    text-shadow: 0 0 8px rgba(219, 249, 71, 0.912),
                 0 0 12px rgba(255, 203, 2, 0.4),
                 0 0 16px rgba(255, 203, 2, 0.2) !important;
    transform: translateY(-3px) !important;
    opacity: 1 !important;
}

.navbar-element-independent a.nav-link:hover::before {
    
    width: 100%; 
    background-color: var(--gep-dark-blue); 
}

.navbar-element-independent.dropdown li.dropdown-toggle {
    
    position: relative !important;
    transition: all 0.15s ease !important;
}

.navbar-element-independent.dropdown li.dropdown-toggle::before {
    
    content: "";
    position: absolute;
    bottom: -3px;           
    left: 50%;
    width: 0;
    height: 2px;            
    background-color: transparent; 
    transform: translateX(-50%);
    transition: width 0.15s ease, background-color 0.15s ease; 
}

.navbar-element-independent.dropdown li.dropdown-toggle:hover::before {
    
    width: 100%;
    background-color: var(--gep-dark-blue); 
}

.navbar-element-independent.dropdown li.dropdown-toggle:hover {
    
    text-shadow: 0 0 8px rgba(219, 249, 71, 0.912),
                 0 0 12px rgba(255, 203, 2, 0.4),
                 0 0 16px rgba(255, 203, 2, 0.2) !important;
    transform: translateY(-3px) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.navbar-collapse {
    
    padding: 0 !important;
    margin: 0 !important;

    position: relative !important;

    overflow: visible !important;
}

.navbar-element-independent.dropdown li {
    
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-element-independent .dropdown-menu {
    
    position: absolute !important;
    z-index: 1000 !important;

    margin: 0 !important;

    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 991.98px) {
    .navbar-element-independent {
        
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;

        padding: 0.5rem 0 !important;

        display: block !important;
        width: 100% !important;
    }
}

.navbar .navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
}

.navbar .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-separator-right::after {
    content: "|";
    color: var(--gep-dark-blue);
    font-weight: 700;
    font-size: 0.8rem;
    position: absolute;
    right: -8px;  
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.navbar-separator-both::before {
    content: "|";
    color: var(--gep-dark-blue);
    font-weight: 700;
    font-size: 0.8rem;
    position: absolute;
    left: -8px;   
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.navbar-separator-both::after {
    content: "|";
    color: var(--gep-dark-blue);
    font-weight: 700;
    font-size: 0.8rem;
    position: absolute;
    right: -8px;  
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}