/* Header y navegación */
.header {
	background: #F9EAF1;
	box-shadow: 0 2px 10px rgba(31, 74, 29, .2); 
}

.nombre-empresa a {
	color: #1f4A1D;
}

/* Estilo para la lista de navegación */
.nav-links a {
	color: #1f4A1D;
	text-shadow: 2px 2px 4px rgba(12, 40, 11, 0.3); 
}

.nav-links li:hover {
	background-color: rgba(67, 174, 57, 0.5); 
}

.btn-serch button {
	background-color: #2A7124;
}

.btn-serch button:hover {
	background-color:  #255A21;
}

.toggle-search {
    color: #1f4A1D;
}

.toggle-search:hover {
    background-color: rgba(67, 174, 57, 0.5);
}


.barra-de-busqueda.active .btn-serch button {
    background-color: #2A7124;
    color: #FBFAF7;
}

.barra-de-busqueda.active .btn-serch button:hover {
    background-color: #255A21;
}

/*********************************** CARRITO *****************************/

#carrito-header {
    color: #255A21;
}

#carrito-header button {
    color: #1F4A1D;
}

.carrito-item h4 {
    color: #1F4A1D;
}

.carrito-item p {
    color: rgba(31, 74, 29, 0.8);
}

.carrito-item button {
    color: #1F4A1D ;
}

#carrito-footer button {
    background: #1f4A1D;
    color: #fff;
}

/* Badge del carrito */
.carrito-badge {
    background: #43AE39;
    color: #FFFFFF;
}


/******************************** BARRA DE MARCAS *******************************/
.barra-de-marcas{
	background-color: #1f4A1D;
	margin-left: -25px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #2A7124; /* Color del "dedo" de la barra */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #255A21; /* Color cuando pasas el cursor por encima */
}

.scroll-container::-webkit-scrollbar-track {
    background-color: #234621; /* Color del carril de la barra de desplazamiento */
}
.btn-right,
.btn-left{
    color: #0C280B;
    box-shadow: 0 2px 5px rgba(12, 40, 11, 0.2); /* Sombra para profundidad */
}
.btn-left:hover,
.btn-right:hover{
    color: #2A7124;
}
/*************************** SECCION UNO (3) *****************************/
#t3 {
    color: #2A7124;
    background-color: #E3F8E0; 
    text-shadow: 1px 1px 2px rgba(31, 74, 29, .3); 
}

/* Añadir línea decorativa debajo del título */
#t3::after {
    background-color: #328F2A;
}

#p3 {
    color: #328F2A;
}

.product-card3 {
    background-color: #9CE095;
    box-shadow: rgba(42, 113, 36, .4);}

.product-card3:hover { 
    box-shadow: rgba(42, 113, 36, 0.6); 
}

.text-card3 h3 {
    color: #1F4A1D; 
}

#text-marca3 {
    color: #1F4A1D;
}

.image-container3 img{
    box-shadow: 0 4px 8px rgba(12, 40, 11, 0.2); 
}

.image-container3 img:hover {
    box-shadow: 0 6px 12px rgba(12, 40, 11, 0.3); 
}

.ver-mas-btn {
    color: #1f4A1D;
}

.ver-mas3 {
    background-color: #328F2A;
    color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(12, 40, 11, 0.2); 
}


/*********************************** SECCION DOS (4) ***********************************/
.section4-product {
    background-color: #E3F8E0;
}
#t4 {
    color: #2A7124;
    background-color: #E3F8E0; 
    text-shadow: 1px 1px 2px rgba(12, 40, 11, 0.1);
}

/* Añadir línea decorativa debajo del título */
#t4::after {
    background-color: #328F2A;
}

    /* Subtitulo */
#p4 {
    color: #328F2A;
}

.carousel-prd-container {
    background-color: #E3F8E0;
}

.product-card4 {
    background-color: #FFFFFF;
    box-shadow: 0 5px 15px rgba(12, 40, 11, 0.3);
}

.product-card4:hover {
    box-shadow: 0 8px 20px rgba(42, 113, 36, 0.5);
}


.text-card4 {
    background-color: #FAFAFA;
    color: #FBFAF7;
}

.text-card4 h3 {
    color: #0C280B;
}

#text-precio {
    color: #1F4A1D;
    background-color: rgba(156, 224, 149, 0.4);
}

#text-marca {
    color: rgba(31, 74, 29, 0.6);
}

  /* Botón de agregar al carrito */
#btn-add4 {
    background-color: #328F2A;
    color: #FBFAF7;
    box-shadow: 0 2px 5px rgba(12, 40, 11, 0.2); 
}

#btn-add4:hover {
    background-color: #2A7124;
    box-shadow: 0 4px 8px rgba(12, 40, 11, 0.3);
}

.btn-right-prd, .btn-left-prd {
    background-color: #2A7124;
    box-shadow: 0 3px 10px rgba(12, 40, 11, 0.3);
}

.btn-right-prd:hover, .btn-left-prd:hover {
    background-color: #1F4A1D;
}

.carousel-dot {
    background-color: #328F2A;
}

.carousel-dot.active {
    background-color: #2A7124;
}

/*********************************** 4. SECCION TRES (1) ***********************************/
.section1-product {
    background-color: #FBFAF7;
}
#t1 {
    color: #2A7124;
    background-color: #FBFAF7; 
    text-shadow: 1px 1px 2px rgba(12, 40, 11, 0.1);
}

#t1::after {
    background-color: #328F2A;
}

#p1 {
    color: #328F2A;
}

.container-product-cards {
    background-color: #FBFAF7;
}

.product-card {
    background-color: #FBFAF7;
    box-shadow: rgba(42,113, 36, .4); 
}

.product-card:hover {
    box-shadow: rgba(42,113, 36, 0.6); 
}

.text-card {
    background-color: #1F4A1D;
    color: #FBFAF7;
}

#text-precio2 {
    color: #1F4A1D;
    background-color: rgba(227, 248, 224, 0.8);
}

#text-marca2 {
    color: rgba(227, 248, 224, 0.6);
}

#btn-add {
    background-color: #328F2A;
    color: #FBFAF7;
    box-shadow: 0 2px 5px rgba(12, 40, 11, 0.2); 
}

#btn-add:hover {
    background-color: #2A7124;
    box-shadow: 0 4px 8px rgba(12, 40, 11, 0.3); 
}

/*********************************** SECCION CUATRO (2) ***********************************/

.cp-container {
    background: linear-gradient(to bottom, #E3F8E0, #E3F8E0);
    box-shadow: inset 0 0px 0px rgba(12, 40, 11, 0.2); 
}

#t2 {
    color: #2A7124;
    text-shadow: 1px 1px 3px rgba(12, 40, 11, 0.3); 
}

/* Personalización de la barra de scroll horizontal */
.carousel-product::-webkit-scrollbar {
    height: 10px; 
}

.carousel-product::-webkit-scrollbar-thumb {
    background-color: #328F2A;
}

.carousel-product::-webkit-scrollbar-thumb:hover {
    background-color: #2A7124;
}

.carousel-product::-webkit-scrollbar-track {
    background-color: rgba(31, 74, 29, .3);
}

.product-card2 {
    background-color: #FFFFFF;
    box-shadow: 0 5px 15px rgba(12, 40, 11, 0.3);
}

.product-card2:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); 
}

.text-card2 {
    background-color: #FAFAFA;
    color: #FBFAF7;
}

.text-card2 h3 {
    color: #0C280B;
}

#btn-add2 {
    background-color: #328F2A;
    color: #FBFAF7;
    box-shadow: 0 2px 5px rgba(12, 40, 11, 0.2); 
}

#btn-add2:hover {
    background-color: #2A7124;
    box-shadow: 0 4px 8px rgba(12, 40, 11, 0.3);
}

button.btn-fav i.bx.bxs-star,
.btn-fav i.bxs-star {
    color: #255A21 !important;
}

/*********************************** DETALLES ***********************************/
/* Contenedor principal detalle */
.detalle-container {
    background: #FBFAF7;
    box-shadow: 0 4px 10px rgba(12, 40, 11, 0.2);
}

.detalle-info h1 {
    color: #1F4A1D;
}

.descripcion {
    color: rgba(12, 40, 11, 0.8);
}

.precio {
    color: #255A21;
}

.text-cantidad {
    color: #1F4A1D;
}

.btn-principal {
    background: #2A7124;
    color: white;
}

.btn-principal:hover {
    background: #255A21;
}

.titulo-relacionados {
    color: #255A21;
    border-top: 1px solid #1F4A1D;
}

.card-rel a {
    background: #e7e5e0;
    box-shadow: 0 2px 6px rgba(12, 40, 11,0.1);
}

.card-rel h3 {
    color: #1F4A1D;
}

.price {
    color: #2A7124;
}

#btn-add-rel {
    background: #255A21;
    color: white;
}

.swiper-container-externo .swiper-pagination-bullet {
    background-color: rgba(31, 74, 29, 0.4);

}

.swiper-container-externo .swiper-pagination-bullet-active {
    background-color: #2A7124;
}