#toggleMenu {
    border: none;
}

.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;utf8,<svg width="1.4em" height="1.4em" viewBox="0 0 16 16" class="bi bi-list" fill="rgba(255, 255, 255, 0.7)" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>') !important;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;utf8,<svg width="1.4em" height="1.4em" viewBox="0 0 16 16" class="bi bi-x" fill="rgba(255, 255, 255, 0.7)" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>') !important;
}

/* ===========================================================
   CABECERA PRINCIPAL (se elimina el fondo CSS duplicado)
   =========================================================== */

/* ==== HERO CON IMAGEN Y FONDO OSCURO SUPERPUESTO ==== */
#masterHead {
  position: relative;
  width: 100%;
  height: 100vh;                /* ocupa toda la altura visible */
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000;       /* fondo base negro */
}

#masterHead picture,
#masterHead img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  object-position: center bottom;
}

/* Capa semitransparente oscura sobre la imagen */
#masterHead::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45); /* ajusta la opacidad si quieres más o menos oscuridad */
  z-index: 0;
  pointer-events: none;     /* no bloquea interacción mientras aparece */
}

/* Aseguramos que el texto quede por encima */
#masterHead h1,
#masterHead h2,
#masterHead #knowmore {
  position: relative;
  z-index: 2;
  font-family: 'Varela Round', sans-serif;
}

/* — HERO: título principal con degradado — */
#masterHead h1 {
  font-family: 'Varela Round', sans-serif;
  font-weight: 600;
  font-size: 3rem;
  line-height: 3.6rem;
  color: #ffffff; /* blanco sólido */
  text-shadow:
    0 3px 8px rgba(0, 0, 0, 0.6),   /* sombra más profunda */
    0 0 15px rgba(0, 0, 0, 0.45),  /* halo medio */
    0 0 25px rgba(0, 0, 0, 0.35);  /* halo exterior más difuso */;
  opacity: 0.98;
}
@media (min-width: 768px){
  #masterHead h1{ font-size: 4rem; line-height: 5rem; }
}

/* NAVBAR */
/* ==== NAVBAR FIJO Y OPACO (color corporativo) ==== */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  background-color: #0b1a39; /* azul marino intenso y opaco */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#mainNav .navbar-brand img {
  filter: brightness(1.2);
}

#mainNav .nav-link {
  color: #ffffff;
  font-weight: 600;
  transition: color 0.3s ease;
}

#mainNav .nav-link:hover {
  color: #b5c9ff; /* azul claro al pasar el ratón */
}

#navbarContent .nav-link > i {
  display: none;
}

/* Empuja el hero un poco hacia abajo (más centrado en pantalla) */
#masterHead {
  z-index: auto;            /* no crear contexto de apilado */
  padding-top: 12rem; /* antes 0 */
  padding-bottom: 8rem;
}


/* ==============================================
   MEDIA QUERIES (sin fondo duplicado)
   ============================================== */
@media (min-width: 576px) {
    #masterHead {
        background: none;
    }
}

@media (min-width: 768px) {
    #masterHead {
        padding-top: 10rem;
        padding-bottom: 30rem;
        background: none;
    }
    #masterHead h1 {
        font-size: 4rem;
        line-height: 5rem;
    }
    #masterHead h2 {
        max-width: 40rem;
        font-size: 1.3rem;
    }
    #navbarContent .nav-link > span {
        font-size: 1.6rem;
    }
}

@media (min-width: 992px) {
  /* --- Hero --- */
  #masterHead {
    padding-top: 10rem;
    padding-bottom: 20rem;
    background: none;
  }

  #masterHead h1 {
    font-size: 4.5rem;
    line-height: 5rem;
  }

  #masterHead h2 {
    max-width: 50rem;
    font-size: 1.4rem;
  }

  /* --- Navbar --- */
  #navbarContent .nav-link > i {
    display: inline-block;
    margin-right: 6px;
    color: #ffffff;
  }

  #navbarContent .nav-link > span {
    font-size: 1rem;
  }
}

/* === Navbar móvil === */
@media (max-width: 768px) {
  #mainNav {
    padding: 0.3rem 1rem;
  }
  #mainNav .navbar-brand img {
    max-width: 120px; /* ajusta si quieres más pequeño */
    margin-left: 0; /* lo pega al borde */
  }

  #mainNav .navbar-toggler {
    margin-right: 0;
  }

  #mainNav.navbar-shrink .navbar-brand img {
    max-width: 100px; /* un pelín más pequeño al hacer scroll */
  }
}


/* === Ajustes de alineación Navbar + Hero === */

/* === NAVBAR: simetría exacta entre logo y menú === */

/* Hace que el contenido de nav ocupe todo el ancho real */
#mainNav .container {
  max-width: 100%;
  padding-left: 2rem;   /* ajusta margen interno visible */
  padding-right: 2rem;  /* igual valor para simetría */
}

/* Ajusta separación del bloque derecho (menú) */
#navbarContent {
  margin-right: 2rem; /* acerca el menú al borde */
}

/* Mantiene el logo estable */
#our {
  scroll-margin-top: 10rem; /* ajusta si hace falta 6–8rem */
}

#contact {
  scroll-margin-top: 3.5rem; /* ajusta si hace falta 6–8rem */
}

#masterHead p {
  font-family: 'Varela Round', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #ffffff;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.55),  /* sombra principal más concentrada */
    0 0 10px rgba(0, 0, 0, 0.35);  /* halo suave alrededor */;
  opacity: 1;
  margin-top: 0.5rem;
}

/* === FIX ECO2 2025: visibilidad y centrado de logos === */

/* Loader: visible y centrado */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #0b1a39; /* fondo oscuro coherente */
  z-index: 2147483647; /* por encima de cualquier otra capa */
}

#loading img {
  display: block;
  opacity: 1;
  visibility: visible;
  max-width: 160px;
  height: auto;
}

/* Logos siempre visibles */
#logo_nav,
#logo_footer {
  display: block;
  opacity: 1;
  visibility: visible;
  max-width: 100%;
  height: auto;
}

/* Footer: centrado */
#footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Transición limpia del loader */
#loading.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Versión móvil: espacio y visibilidad asegurada */
@media (max-width: 768px) {
  #mainNav {
    padding: 0.4rem 1rem;
  }
  #mainNav img#logo_nav,
  #footer img#logo_footer {
    max-width: 120px;
  }
}

/* === Ajuste fino del hero para visibilidad del botón === */

/* Móvil: sube el contenido */
@media (max-width: 768px) {
  #masterHead {
    padding-top: 8rem;   /* antes 12rem */
    padding-bottom: 6rem; /* antes 8rem */
  }
}

/* Desktop: baja un poco el contenido */
@media (min-width: 992px) {
  #masterHead {
    padding-top: 14rem;  /* antes 10rem */
    padding-bottom: 12rem; /* antes 10rem */
  }
}