/* SustainaXion branding */
html{scroll-behavior:smooth;}
:root{
  --brand:#0077C8;     /* deep blue */
  --brand-2:#00E676;   /* green */
  --accent:#00C3FF;    /* sky blue */
  --primary:#0077C8;
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
}
*{font-family:var(--font);}
.topbar{background:var(--brand);}
.navbar .btn-primary{background:var(--brand); border-color:var(--brand);}
.btn-outline-primary{border-color:var(--brand); color:var(--brand);}
.btn-outline-primary:hover{background:var(--brand); color:#fff;}


/* Contenedor del carrusel: ancho reducido y centrado */
.hero {
  display: flex;
  justify-content: center;
  padding: 20px 0; /* separarlo un poco de los bordes */
}

#heroCarousel {
  width: 85%;          /* AJUSTA AQUÍ: 70% del ancho */
  max-width: 1100px;   /* límite para pantallas grandes */
  border-radius: 10px; /* puntas redondeadas opcional */
  overflow: hidden;    /* para que no sobresalgan las imágenes */
}

/* Ajuste del alto del carrusel */
.hero-slide {
  height: 72vh;                /* AJUSTA LA ALTURA QUE QUIERAS */
  background-size: cover;      /* mantiene la imagen llena */
  background-position: center; /* centrada */
}

/* En pantallas pequeñas que no se vea demasiado pequeño */
@media (max-width: 500px) {
  #heroCarousel {
    width: 95%;
  }
  .hero-slide {
    height: 45vh;
  }
  /* Reducir tamaño del texto del carrusel en móviles */
@media (max-width: 768px) {
  .hero-copy h3 {
    font-size: 1.1rem !important;   /* antes era mucho más grande */
    line-height: 1.35 !important;   /* mejorar legibilidad */
  }

  .hero-copy .btn {
    font-size: 0.9rem !important;   /* botón más proporcional */
    padding: 8px 14px !important;
  }
}

}

.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.25));}
.hero .hero-copy{max-width:720px; position:relative; z-index:2;}
.service-card .card-title{font-weight:700;}
.metric{padding:1rem; background:#fff; border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.06);}
.client-logo{max-height:54px; opacity:.75; filter:grayscale(100%); transition:all .2s ease;}
.client-logo:hover{opacity:1; filter:none;}
.testimonial{border:1px solid rgba(0,0,0,.05);}
footer a{text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* Floating buttons */
.whatsapp-float,
.backtotop-float{
  position:fixed; bottom:20px; z-index:999;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.whatsapp-float{left:20px; background:#25D366;}
.whatsapp-float:hover{opacity:.9; color:#fff;}
.backtotop-float{right:20px; background:var(--brand);}
.backtotop-float:hover{opacity:.9; color:#fff;}

/* v3: Larger navbar logo */
.navbar-brand img.logo{
  height:64px;
  width:auto;
  max-height:64px;
}
@media (max-width: 991.98px){
  .navbar-brand img.logo{
    height:48px;
    max-height:48px;
  }
}

.navbar{padding-top:.25rem; padding-bottom:.25rem;}