/* Archivo: estilos.css */

/* General */
body {
    font-family: "Poppins", sans-serif;
    background-color: #fbf8f5; /* Color de fondo general */
}

h1, h2, h3, h4, h5, h6{
    font-family: "Merriweather", serif;
}

/* Navbar */
.navbar {
    background-color: #F0E2D7; /* Fondo personalizado */
}
.navbar2{
    background-color: #f1cda0;
}

.navbar a {
    color: #8b6b4e; /* Color de texto en la navbar */
}

.navbar a:hover {
    color: #d2691e; /* Color al pasar el cursor */
}

.form-control {
    border-color: #d2691e; /* Bordes de la barra de búsqueda */
}

/* Sidebar */
.div-materias {
    background-color: #F0E2D7; /* Color de fondo de los elementos del sidebar */
}
.list-group{
    background-color: #F0E2D7;
}
.list-group-item {
    background-color: #F0E2D7;
    border: none;
    color: #2B2B2B; /* Color del texto */
}

.list-group-item:hover {
    background-color: #f1cda0; /* Fondo al pasar el cursor */
    color: #fff; /* Texto al pasar el cursor */
}
.lateral h4, .lateral h5, .central h3{
    color: #A5441E;
}

/* Banner */
.card-img-top {
    border-bottom: 2px solid #d2691e; /* Bordes personalizados para las imágenes */
}

/* Títulos */
h3, h4 {
    color: #8b6b4e; /* Color personalizado para los títulos */
}

/* Novedades */
.card {
    border: none; /* Bordes personalizados */
    overflow: hidden;
}
.card:hover {
    background-color: #F0E2D7;
    cursor: pointer;
    color: #A5441E !important;    
}

.card-title {
    color: #6b4226; /* Color del título de los productos */
}

.card-text {
    color: #8b6b4e; /* Color del texto de la descripción */
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Limita el texto a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    background-color: #d2691e; /* Color de fondo de las etiquetas */
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra al pasar el cursor sobre la tarjeta */
}

/* Footer */
footer {
    background-color: #8b6b4e; /* Fondo del pie de página */
    color: #fff; /* Texto blanco */
}

footer a {
    color: #ffd700; /* Color de los enlaces en el pie de página */
}

footer a:hover {
    color: #fff; /* Cambiar color de enlace al pasar el cursor */
}

.text-center p, .text-center a {
    color: #fff; /* Texto blanco en el pie de página inferior */
}

/* Métodos de Pago */
img[src="metodos_pago.png"] {
    max-width: 100%; /* Asegura que la imagen de métodos de pago no se desborde */
}


a.mat, a.mat2{
    display: block;
    color: #2E2E2E;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    padding: 5px 10px;
    text-decoration: none;
}
a.mat:hover{
    text-decoration: underline;
    background-color: #f1cda0;
}
a.mat2:hover{
    text-decoration: underline;
}


.titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el texto a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em; /* Ajusta la altura de la línea a tu gusto */
    max-height: 3em; /* 2 líneas * 1.5em (la altura de la línea) */
    height: 3em; /* Fija la altura para 2 líneas */
    font-weight: 500;
}
.cuadrado {
    width: 100%;
    padding-bottom: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease; /* Suaviza la transición del zoom */
}

.card:hover .cuadrado {
    background-size: 110%; /* Incrementa el tamaño de la imagen en un 20% */
}