body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
background: #f4f4f4;
}

main{
  flex: 1;
}

.container {
display: flex;
align-items: center;
justify-content: center;
background: beige;
border-radius: 20px;
padding: 30px;
margin: 50px auto;
width: 90%;
max-width: 1100px;
color: #000;
}

.container img {
max-width: 300px;
border-radius: 10px;
}

.text-section {
margin-left: 40px;
max-width: 600px;
}

h2 {
margin: 0 0 10px 0;
font-size: 1.8rem;
}

p {
margin: 0;
font-size: 1.1rem;
line-height: 1.5;
}

.contactForm{
background: #fff;
}

.loginForm{
background: #fff;
}

.card-img-top {
width: 100%;
height: 300px;          /* Altura fija */
object-fit: contain;     /* La imagen completa dentro del área */
background-color: #f8f9fa; /* Color de fondo si no ocupa todo el espacio */
margin-top: 5px;
}

.card-body {
height: 150px;           /* Altura fija para el contenido */
display: flex;
flex-direction: column;
}

.card-footer {
display: flex;
width: 100%;
}

.card-footer > div {
width: 50%;                  /* Cada uno ocupa la mitad */
display: flex;
justify-content: center;      /* Centrado horizontal */
align-items: center;          /* Centrado vertical */
}

.container-cards {
padding-left: 15px;   /* margen izquierdo */
padding-right: 15px;  /* margen derecho */
}

.product-img-wrapper {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: #f8f9fa;
border-radius: 8px;
overflow: hidden;
}

.product-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.product-img-miniature img {
width: 80px;
height: 80px;
object-fit: cover;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
}

.product-img-miniature img:hover {
transform: scale(1.05);
border-color: #28a745;
}

.product-container {
background: #fff;
}
/* Responsive */
@media(max-width: 768px){
.container {
flex-direction: column;
text-align: center;
}
.text-section {
margin: 0 0 20px 0;
}
}

.carousel-item img {
  height: 75vh;
  width: 100%;
  object-fit: fill;
}


footer {
background-color: #28a745;
color: white;
text-align: center;
padding: 1rem;
margin-top: auto; /* empuja el footer al final */
}