body {
  background-color: #fff;
 color:#3C3C3C;
   /*font-family: 'Montserrat', 'Montserrat Placeholder', sans-serif;*/
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13pt;
}

a.perfil{
  color:#3C3C3C;
}

.text-warning{
  color: #F5EADA !important;
}

.btn-outline-success{
  border:1px solid #F5EADA;
  color: #3C3C3C;
}
.btn-outline-success:hover{
  background: #F5EADA;
  border:1px solid #F5EADA;
}
.bg-slide {
    background: url('/images/slide1.webp') no-repeat center;
    background-size: cover;
}

.lineas-superpuestas {
  position: relative;
  width: 100%;
}

.linea {
  width: 100%;
}

.linea-1 {
  background-color: #F5EADA;
  height: 10px; /* Línea más delgada arriba */
  z-index: 2;
  margin-bottom: 2px;
}

.linea-2 {
  background-color:#F5EADA;
  height: 10px; /* Línea más gruesa debajo */
  top: 0;
  z-index: 1;
}

h2{
    font-size: 36pt;
    font-weight: 100;
}
header.nosotros,
header.contacto,
header.blog {
  position: relative; /* necesario para el overlay */
  background: url('/images/bn-fragancias2.png') no-repeat center;
  background-size: cover;
  color: #fff;
  z-index: 0;
  padding: 30px;
}
.bg-warning{
  background-color: #F5EADA !important;
}

header.nosotros::before,
header.contacto::before,
header.blog::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.6); /* opacidad blanca */
  z-index: 1;

}

header.nosotros * ,
header.contacto * ,
header.blog * {
  position: relative;
  z-index: 2; /* asegura que el contenido quede encima del overlay */
}


.bg-success{
  background:#F5EADA !important;
   color:#3C3C3C;
}
.text-success{
  color:#3C3C3C !important;
}
.btn-success{
    background: #F5EADA !important;
     border-color: #F5EADA;
   color:#3C3C3C;
}
.btn-success:hover{
    background: #F5EADA !important;
    border-color:#F5EADA;
   color:#3C3C3C;
}

footer a{
  font-size:12pt !important;
}

.tab-content{
  font-size: 15px !important;
}

#productTabs .nav-link{
   color:#000 !important;
   font-weight: 500;
}
* Alto del banner */
.bg-slide .carousel-item,
.bg-slide .carousel-item .row{
  min-height: 400px;        /* sube a 680–720 si quieres más alto */
  align-items: center;
}

/* La columna de la imagen usa todo el alto del banner */
.bg-slide .col-img{
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;  /* prueba start/end si la quieres pegada */
}

/* La imagen crece a la altura disponible sin deformarse */
.bg-slide .banner-hero{
  height: 70% !important;  /* clave para que crezca */
  width: auto !important;   /* conserva proporción */
  max-width: none;          /* evita límite de Bootstrap */
  object-fit: contain;      /* no recorta (usa cover si prefieres recorte elegante) */
  display: block;
}


  
/* Alto del banner proporcional a la pantalla */
.bg-slide .carousel-item,
.bg-slide .carousel-item .row{
  min-height: clamp(520px, 80vh, 760px);  /* ajusta el 80vh y topes a tu gusto */
  align-items: center;
}

/* La imagen entra completa (no se corta) */
.bg-slide .banner-hero{
  max-height: calc(80vh - 20px);  /* mismo 80vh del clamp */
  height: auto !important;
  width: auto !important;
  object-fit: contain;            /* clave para que no recorte */
  display: block;
  
 /* ---- HERO / SLIDE ---- */

/* Altura cómoda del bloque y centrado vertical */
.bg-slide .carousel-item{
  padding: 24px 0;
  
}

/* La imagen NUNCA excede su columna:
   limitamos por ancho y dejamos altura automática */
.banner-hero{
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;        /* usa 'cover' si prefieres recorte elegante */
  display: block;
}

/* Alineación: en desktop, a la izquierda (ya lo hace text-md-start) */

  }
  .bg-slide .carousel-item{
    min-height: auto;
  }
  /* El slide permite posición absoluta interna */
.bg-slide .carousel-item{ position: relative; }

/* Posición del botón superpuesto */
.bg-slide .hero-cta{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(30px, 4vh, 70px);  /* <- AJUSTA AQUÍ LA ALTURA */
  z-index: 3;
}
/* Alto del banner proporcional a la pantalla */
.bg-slide .carousel-item,
.bg-slide .carousel-item .row{
  min-height: clamp(520px, 80vh, 760px);  /* ajusta el 80vh y topes a tu gusto */
  align-items: center;
}

/* La imagen entra completa (no se corta) */
.bg-slide .banner-hero{
  max-height: calc(80vh - 20px);  /* mismo 80vh del clamp */
  height: auto !important;
  width: auto !important;
  object-fit: contain;            /* clave para que no recorte */
  display: block;
}
a{
 
 color:#3C3C3C; 
 }
a:hover{
 color:#1b1b1b !important; 
 }

  footer, footer a{
 color:#3C3C3C; 
 }

/* --- FIX SOLO PARA MOVIL --- */
@media (max-width: 767.98px){
  /* La imagen ocupa TODO el ancho del móvil */
  .bg-slide .banner-hero{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
   object-fit: cover;   /* usa 'cover' si prefieres que llene aunque recorte */
    display: block;
  }

  /* El slide no fuerza alturas raras en móvil */
  .bg-slide .carousel-item,
  .bg-slide .carousel-item .row{
    min-height: auto !important;
  }

  /* (Opcional) que el contenedor sea a sangre en móvil (borde a borde) */
  #slideEjemplo .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


}