@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

/*diseño original*/
.navbar a {
    font-weight: 400;
    font-size: 18px;
}

/*
.carousel-item {
    width: 50%; /* 80% del ancho del contenedor padre 
    height: 30%; /* 50% del alto del contenedor padre 
    padding: 10px 0 0 0;    
}*/


.carousel-item {
    min-height: 200px;
}


.carousel-caption {
    bottom: 220px;
    z-index: 2;
}

.carousel-caption h5 {
    font-size: 50px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 100px;
    color: white; /* Color del texto principal */
    text-shadow: 0 0 5px #1c1e18, 0 0 10px #1c1e18, 0 0 15px #1c1e18; /* Sombra de texto fluorescente */
}

.carousel-caption p {
    width: 100%;
    margin: auto auto auto auto;
    font-size: 18px;
    color: white; /* Color del texto principal */
    text-shadow: 0 0 5px #1c1e18, 0 0 10px #1c1e18, 0 0 15px #1c1e18; /* Sombra de texto fluorescente */
}

.services {
    padding: 80px 0;
}

/*Contenedores de Entregados, Soluciones y muebles estandar*/
.bg-car1 {
    background-image: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ), url(img/Conjunto_1_1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-car2 {
    background-image: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ), url(img/Conjunto_1_2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-car3 {
    background-image: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ), url(img/Conjunto_1_3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* FIN Contenedores de Entregados, Soluciones y muebles estandar*/

.box-icons i {
    font-size: 30px; 
}

.box-icons h3 {
    font-size: 20px;
    font-weight: 500;
    color: rgb(255, 255, 255); /* Color del texto principal */
    text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black; /* Sombra de texto fluorescente */
}

.product {
    padding: 80px 0;
}

/*para centrar las imagenes*/

.text-center img {
    border-radius: 5%;
    margin: 0 auto;
    display: block;
    max-width: 100%; /* Asegura que las imágenes no excedan el ancho de su contenedor */
}

/* fin para centrar las imagenes*/


/*modifica color del baner grande de muebles para tus proyectos*/
.banner {
    padding: 50px 0;
    margin-bottom: 80px;
    background-color: #f4f0f6;
}

.banner h2 {
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 400px;
}

.banner img{
    width: 600px;
}

/*Inicio vista celular*/

@media(max-width: 767px) {

    /* Reglas para carousel general (NO para productCarousel) */
    .carousel-item{
        min-height: 300px;
        max-height: 600px;
        border-radius: 5%;
        overflow: hidden;
        position: relative;
    }

    .carousel-item img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        object-position: center;
        border-radius: 5% !important;
        display: block;
    }
    
    /* Reglas específicas para productCarousel en móvil */
    #productCarousel .carousel-item { 
    min-height: auto; /* Quitar restricción de altura */ 
    max-height: none; /* Quitar restricción máxima */ 
    border-radius: 0; /* Sin borde en el contenedor */
    overflow: visible; /* Permitir contenido visible */ 
        
}
    
    #productCarousel img {
        width: 100%;          /* Ocupa todo el ancho */
        height: auto;         /* Altura automática (proporcional) */
        max-height: none;     /* Elimina límite de altura */
        object-fit: contain;  /* Muestra imagen completa sin recortar */
        display: block;
}



    #productCarousel .card-bg-light {
        min-height: 50vh; /* Altura apropiada para móvil */
        display: flex;
        flex-direction: column;
    }

    #productCarousel .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px;
    }

    #productCarousel .text-center {
        flex-shrink: 0;
    }

    #productCarousel .add-to-cart {
        margin-top: auto;
    }

    .carousel-caption{
        bottom: 100px;
    }

    .carousel-caption h5{
        font-size: 40px;
        margin-top: 50px;
    }

    .carousel-caption p {
        width: 100%;
        font-size: 16px;
    }

    .services{
        padding: 30px 0;
    }

    .product{
        padding: 30px 0 0 0;
    }

    .banner{
        margin-bottom: 40px;
    }

    .carousel-container {
        width: 100%;
        height: 400px;
        margin: 0 0;
        overflow: hidden;
        border-radius: 5%;
    }
    
    /* AGREGAR AQUÍ el nuevo código */
    .modal .carousel-inner .carousel-item img {
        width: 100%;
        height: auto !important;
        max-height: 70vh;
        object-fit: contain !important;
        object-position: center;
    }
    
    .modal .carousel-item {
        overflow: visible !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .modal .modal-content {
        max-height: 85vh;
    }
    
    .modal .modal-body {
        overflow: visible !important;
        padding: 15px;
    }

    body, html {
    overflow-x: hidden; /* evitar scroll horizontal */
    }

}

/* Tablet - reglas específicas para productCarousel */
@media (min-width: 768px) and (max-width: 991px) {
    #productCarousel .card-bg-light {
        min-height: 45vh;
        display: flex;
        flex-direction: column;
    }
    
    #productCarousel .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* Desktop - reglas específicas para productCarousel */
@media (min-width: 992px) {
    #productCarousel .card-bg-light {
        max-height: 500px;  Altura máxima fija */
        min-height: 50vh;*/
        /*max-height: none;    /* dejamos que se adapte */
        /*min-height: auto; que se ajuste al contenido */
        display: flex;
        flex-direction: column;
    }
    
    #productCarousel img {
      width: 100%;          /* ocupa siempre el ancho del contenedor */
      height: auto;         /* mantiene la proporción */
      max-height: 250px;    /* evita que se haga demasiado alta */
      object-fit: cover;    /* recorta para que no se deforme */
      display: block;       /* evita espacios raros */
    }

    
    #productCarousel .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* Fin vista celular*/

.whatsapp{
    position: fixed;
    right: -225px;
    bottom: -150px;
    transform: scale(0.08); /* Ajusta el valor para cambiar el tamaño */
    z-index: 1;
}

.instagram{
    position: fixed;
    right: -225px;
    bottom: -190px;
    transform: scale(0.05); /* Ajusta el valor para cambiar el tamaño */
    z-index: 1;
}

.mercado pago{
    position: fixed;
    right: -225px;
    bottom: -190px;
    transform: scale(0.05); /* Ajusta el valor para cambiar el tamaño */
    z-index: 1;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

/*Ajusto tamaño del logo de LOBA en el head*/
.brand-logo {
    height: 120px;
    width: 230px;
    margin-right: -15px;
}

.marca-registrada {
    font-size: 1.25em;
    vertical-align: top;
}

/*Ajuste en el contenedor imagen del carrusel*/

.carousel-item img {
    width: 100%; /* Ancho del 100% del contenedor padre */
    height: 550px; /* Altura fija, ajustable según necesidad */
    object-fit: cover; /* Para ajustar la imagen dentro del contenedor */
}

/*fin del ajuste de la imagen del corrousel*/

/* Aplica el borde redondeado a la clase .rounded-image */
.rounded-image {
    border-radius: 20px; /* Ajusta el valor según sea necesario */
  }

/* Define la animación */
@keyframes shine {
    0%, 100% {
      filter: brightness(100%);
    }
    50% {
      filter: brightness(100%);
    }
  }
  
  /* Aplica la animación a la clase .brand-logo */
  .brand-logo {
    animation: shine 4s infinite;
  }

  .secction-header h2{
    font-size: 25px;
  }

  .custom-card {
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
}

.carousel-container {
    width: 60%; /* Ancho del 100% del contenedor padre */
    height: 550px; /* Altura fija, ajustable según necesidad */
    object-fit: cover; /* Para ajustar la imagen dentro del contenedor */
    margin: 0 auto;
}

.custom-image {
    border-radius: 40px; /* Ajusta el valor según lo que desees */
    max-width: 60%; /* Ajusta el tamaño máximo de la imagen */
    margin: 0 auto; /* Centra la imagen dentro del contenedor */
}

/* Media Queries para diferentes tamaños de pantalla del carrusel*/
@media (max-width: 1200px) {
    .custom-image {
        max-width: 90%;
        border-radius: 10px;
    }
}

@media (max-width: 992px) {
    .custom-image {
        max-width: 100%;
        border-radius: 5px;
    }
}

@media (max-width: 768px) {
    .custom-image {
        max-width: 90%;
        border-radius: 10px;
    }
}


/* Cambio de color en casi todo el sitio web*/
body {
    background-color: #e8daee; /* Cambia el color a tu preferencia */

}

.navbar-custom {
    background-color: #f4f0f6; /* Cambia a tu color preferido */
}

/*Estilo carrito de compra para celular*/

.floating-cart {
    position: fixed;
    top: 15px;
    right: 15px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 10px 12px;
    font-size: 1.4rem;
    z-index: 1055; /* encima del navbar */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    color: #333;
}

.floating-cart:hover {
    background-color: #f8f8f8;
}

.floating-cart .cart-count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background-color: red;
    color: white;
    font-size: 0.65rem;
    border-radius: 50%;
    padding: 2px 5px;
    line-height: 1;
}

/*Tamaño de la imagen de encabezado del CRUD*/
.encabezado img {
    width: 250px;
    height: 200;
}

#btn-reponer-stock {
    display: none;
}

/*Personalizacion de boton de comprar*/

.add-to-cart {
  background: linear-gradient(135deg, #f7cac9, #fbeee6) !important; /* Colores suaves tipo rosa pastel */
  border: none !important;
  border-radius: 2rem !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-family: 'Segoe UI', sans-serif !important;
  letter-spacing: 0.5px !important;
}

.add-to-cart:hover {
  background: linear-gradient(135deg, #fbeee6, #f7cac9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.add-to-cart:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

/*este codigo evita el scroll horizonatl*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Reglas generales del productCarousel - aplicadas a todos los tamaños */
#productCarousel .text-center {
    /*flex-shrink: 1; /* La imagen no se encoge */
    overflow: hidden; /* si la imagen se pasa, se recorta dentro del div */
}

#productCarousel .add-to-cart {
    margin-top: auto; /* Empuja el botón hacia abajo */
} 

/*inicio ajustes css para carrusel de anuncios*/

/* Carrusel de avisos sencillo */
.announcement-banner {
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    color: white;
    font-weight: 500;
    padding: 10px 0;
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.announcement-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /*animation: slideMessages 12s infinite;*/
}

.announcement-text {
    transition: opacity 0.3s ease-in-out;
}

/* Animación para rotar mensajes */
@keyframes slideMessages {
    0%, 30% { 
        opacity: 1; 
    }
    33%, 63% { 
        opacity: 0; 
    }
    66%, 96% { 
        opacity: 1; 
    }
    100% { 
        opacity: 1; 
    }
}

/* Ajustar navbar debajo del banner */
.navbar-custom {
    top: 36px !important;
}

/* Ajustar contenido principal */
body {
    padding-top: 130px !important;
}

@media (max-width: 768px) {
    .announcement-banner {
        font-size: 12px;
        padding: 8px 0;
    }
    
    .navbar-custom {
        top: 25px !important;
    }
    
    body {
        padding-top: 110px !important;
    }
}

/*fin de ajustes css de carrusel de avisos*/