/* style.css - Estilos personalizados de Nutrevital Landing Page */

p { 
    font-family: "Montserrat", sans-serif;
    
}

h1,h2,h3,h4,h5 {
    font-family: "Montserrat", sans-serif;
}

li {
    font-family: "Montserrat", sans-serif;
}

/* Paleta de colores corporativa (override Bootstrap variables) */
:root {
  --bs-primary: #4485D9;   /* Azul corporativo Nutrevital */
  --bs-success: #47B86B;   /* Verde corporativo Nutrevital */
}

/* Estilos para el banner principal (Hero) */
.hero {
  background-color: #FFFFFF; /* Fondo azul (tono del logo) */
  background-image: url('/assets/images/banner.webp');
  background-size: cover;         /* Ajusta la imagen para que cubra todo el fondo */
  background-position: center;    /* Centra la imagen */
  background-repeat: no-repeat;
  color: #fff;
  padding: 300px 0;         /* Espaciado vertical amplio */
}
.hero .lead {
  font-size: 1.25rem;
  font-family: "Montserrat", sans-serif;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.display-4 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

/* Estilo para títulos de sección (usar color verde de la marca) */
.section-title {
  color: #47B86B;
  font-weight: 700;
}

/* Personalización de botones de compra (CTA) */
.btn-success {
  background-color: #47B86B;
  border-color: #47B86B;
}
.btn-success:hover {
  background-color: #3da163;
  border-color: #3da163;
}

.btn-primary{
     margin-top: 5px;
}

#navbarNav{ 
    font-family: "Montserrat", sans-serif;
}

/* Suavizado del desplazamiento al hacer clic en enlaces de ancla */
html {
  scroll-behavior: smooth;
}

/*Buttons*/
.btn.btn-success.btn-lg{
    font-family: "Montserrat", sans-serif;
}

/* Imagen diferente en pantallas menores a 768px (Bootstrap md breakpoint) */
@media (max-width: 767.98px) {
  .hero {
    background-image: url('/assets/images/banner-responsive.jpg');
    padding: 150px 0; /* Tambi¨¦n puedes ajustar el padding en m¨®vil */
  }
}