/* Ícono del toggler en navbars oscuras (líneas blancas visibles) */
.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ===== Reset mínimo ===== */
*{ margin:0; padding:0; box-sizing:border-box; }

/* ===== NAVBAR ===== */
.navbar{
  background: linear-gradient(to right,
    #323bef,#2a7fed
  );
  color:#1a4203;
  box-shadow:0 4px 10px rgba(66, 182, 231, 0.959);
  z-index:1100; /* por encima del slider */
}

/* Color base del menú y efecto hover + subrayado animado */
.navbar .nav-link{
  color:#01300d !important;        /* verde oscuro */
  font-weight:600;
  position:relative;
  transition:color .3s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color:#f1ebe5 !important;        /* naranja */
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  bottom:-3px; left:0;
  width:0; height:2px;
  background-color:#c2650eee;
  transition:width .3s ease;
}
.navbar .nav-link:hover::after{ width:100%; }

/* Dropdowns: sombras y hover naranja con texto blanco */
.dropdown-menu{
  border-radius:6px;
  border:none;
  box-shadow:0 4px 12px rgba(187, 116, 11, 0.1);
}
.dropdown-menu .dropdown-item{
  color:#064626;
  transition:background-color .3s ease, color .3s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background-color:#be5e04; /* naranja */
  color:#01200b !important;     /* texto blanco */
}

/* Menú colapsado visible sobre el slider (móvil) */
.navbar-collapse.show{
  position:relative;
  z-index:1110;
  background-color:#e48333; /* tono de bg-dark */
  padding:.5rem 1rem;
}
/* Forzar icono hamburguesa (por si algún CSS lo pisa) */
.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== NAV (clases personalizadas no-Bootstrap: por si existieran) ===== */
.nav-menu{ list-style:none; display:flex; gap:15px; }
.nav-menu li a{
  text-decoration:none; color:rgb(23,8,109); padding:10px 15px;
}
.menu-toggle{
  display:none; background:none; color:#053f18; font-size:24px; border:none;
}
@media (max-width:768px){
  .menu-toggle{ display:block; }
  .nav-menu{
    display:none; flex-direction:column; background-color:#023a06;
    width:100%; position:absolute; top:50px; left:0;
  }
  .nav-menu.active{ display:flex; }
}

/* ===== SLIDER ===== */
#container-slider{ position:relative; display:block; width:100%; }

/* Tamaño principal del slider */
#slider{
  position:relative; display:block; width:100%;
  height:80vh; min-height:500px;
}
#slider li{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  position:absolute !important;
  top:0 !important; left:0 !important;
  width:100%; height:100%; display:block;
  transition:opacity 1s;
  z-index:-1; opacity:0;
}

/* Flechas */
#container-slider .arrowPrev, #container-slider .arrowNext{
  font-size:30pt; color:rgba(204,204,204,.65);
  cursor:pointer; position:absolute; top:50%;
  left:50px; z-index:2;
}
#container-slider .arrowNext{ left:initial; right:50px !important; }

/* Puntos (bullets) */
.listslider{
  position:absolute; display:flex; justify-content:space-between; align-items:center;
  left:50%; bottom:5%; list-style:none; z-index:2; transform:translateX(-50%);
}
.listslider li{ border-radius:50%; width:10px; height:10px; cursor:pointer; margin:0 5px; }
.listslider li a{ background:#012708; border-radius:50%; width:100%; height:100%; display:block; }
.item-select-slid{ background:#012008 !important; }

/* Botón genérico del slider */
.btnSlider{
  color:#FFF; font-size:15pt; letter-spacing:1px;
  padding:10px 50px; border:1px solid #CCC; background:rgba(13,13,13,.55);
  border-radius:31px; text-decoration:none; transition:.5s all;
}
.btnSlider:hover{ background:#111; border:1px solid #111; }

/* Slider responsive */
@media screen and (max-width:460px){
  #container-slider .arrowPrev, #container-slider .arrowNext{ font-size:20pt; }
  #container-slider .arrowPrev{ left:15px; }
  #container-slider .arrowNext{ right:15px !important; }
  #slider{ height:400px; min-height:400px; } /* ajustado para móviles */
}

/* ===== SECCIÓN NG-MAKERS (tu bloque animado) ===== */
.ng-makers-section{
  padding:80px 20px;
  background:linear-gradient(135deg,#a05907,#f4f8f4);
  color:#0d0b86; display:flex; align-items:center; justify-content:center;
  animation:fadeIn 2s ease-in;
}
.ng-makers-container{
  display:flex; flex-direction:row; max-width:1200px; gap:40px;
  align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.ng-makers-text{ flex:1; animation:slideInLeft 1.2s ease forwards; }
.ng-makers-text h2{ font-size:2.8rem; color:#02444d; margin-bottom:20px; }
.ng-makers-text p{ font-size:1.1rem; line-height:1.6; }
.ng-makers-media{ flex:1; text-align:center; animation:slideInRight 1.2s ease forwards; }
.ng-makers-media img, .ng-makers-media video{
  max-width:100%; height:auto; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.3);
}

/* Animaciones clave */
@keyframes fadeIn{ from{opacity:0; transform:translateY(50px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-50px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideInRight{ from{opacity:0; transform:translateX(50px);} to{opacity:1; transform:translateX(0);} }

/* ===== CARDS / IMÁGENES ===== */
.service-img-hover{ transition:transform .4s ease, filter .4s ease; }
.service-img-hover:hover{ transform:scale(1.05); filter:brightness(1.1); }
.card:hover .card-title{ color:#0d6efd; transition:color .3s ease; }
.card-img-top{ height:200px; object-fit:cover; width:100%; }

/* ===== FOOTER ===== */
footer{
  background:linear-gradient(to right,
    #323bef,#2a7fed
  );
  color:#032e18;
  box-shadow:0 -4px 12px rgba(0,0,0,.4);
  padding:20px 0; text-align:center; font-weight:500;
}
footer a{ color:#2022b6; text-decoration:none; transition:color .3s ease; }
footer a:hover{ color:#626be7; }

/* ==== Utilidades de animación por scroll ==== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: transform .7s ease, opacity .7s ease;
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: none; }

/* direcciones */
.reveal.up    { transform: translateY(24px); }
.reveal.down  { transform: translateY(-24px); }
.reveal.left  { transform: translateX(-28px); }
.reveal.right { transform: translateX(28px); }
.reveal.zoom  { transform: scale(.96); }

/* “float” sutil (p.ej. para logos o iconos) */
.float-soft { animation: floatSoft 5s ease-in-out infinite; }
@keyframes floatSoft {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* efecto hover elegante para tarjetas/imágenes */
.hover-lift { transition: transform .35s ease, box-shadow .35s ease; }
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(0,0,0,.15);
}

/* parallax suave para elementos con data-parallax */
[data-parallax] { will-change: transform; }