/* ============================================
   ESTILOS PARA IMÁGENES DE PRODUCTOS
   ============================================ */

/* ========================================== */
/* 1. IMÁGENES EN LAS TARJETAS (CATÁLOGO)    */
/* ========================================== */
.card .card-img-top {
    width: 100%;
    height: 260px;           /* Altura fija para todas */
    object-fit: cover;       /* Recorta la imagen para llenar el espacio */
    object-position: center; /* Centra la imagen */
    background: #f8f9fa;     /* Fondo gris claro mientras carga */
}

/* ========================================== */
/* 2. IMAGEN EN DETALLE DEL PRODUCTO          */
/* ========================================== */
.product-detail-image {
    width: 100%;
    max-height: 450px;       /* Altura máxima */
    object-fit: contain;     /* MUESTRA LA IMAGEN COMPLETA sin recortar */
    object-position: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border-radius: 20px;
}

/* ========================================== */
/* 3. MINIATURAS EN CARRITO (si las usas)    */
/* ========================================== */
.product-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    background: #f8f9fa;
}

/* ========================================== */
/* 4. RESPONSIVE (MÓVILES)                    */
/* ========================================== */
@media (max-width: 768px) {
    .card .card-img-top {
        height: 180px;
    }
    
    .product-detail-image {
        max-height: 300px;
    }
}
/* ============================================
   FOOTER SIMPLE CON REDES
   ============================================ */

.footer {
    border-top: 2px solid #ffd700;
}

.footer .fa-whatsapp,
.footer .fa-facebook,
.footer .fa-envelope {
    transition: all 0.3s ease;
}

.footer .fa-whatsapp:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.5));
}

.footer .fa-facebook:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(24, 119, 242, 0.5));
}

.footer .fa-envelope:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(234, 67, 53, 0.5));
}

.footer a small {
    transition: color 0.3s ease;
}

.footer a:hover small {
    color: #fff !important;
}

@media (max-width: 768px) {
    .footer .col-md-4 {
        text-align: center !important;
    }
    
    .footer .d-flex {
        justify-content: center !important;
    }
}
/* ============================================
   NAVBAR RESPONSIVE (AGREGADO)
   ============================================ */
@media (max-width: 400px) {
    .logo-navbar {
        height: 32px;
    }
    .titulo-navbar {
        font-size: 0.85rem;
    }
    .search-form-mobile {
        min-width: 80px;
    }
    .search-form-mobile input {
        font-size: 0.75rem;
        padding: 4px 8px;
        max-width: 100px;
    }
    .search-form-mobile button {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

/* Móviles pequeños (400-576px) */
@media (min-width: 401px) and (max-width: 576px) {
    .logo-navbar {
        height: 38px;
    }
    .titulo-navbar {
        font-size: 0.95rem;
    }
    .search-form-mobile input {
        max-width: 120px;
    }
}

/* Tablets (576-768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .logo-navbar {
        height: 40px;
    }
    .titulo-navbar {
        font-size: 1.05rem;
    }
}

/* Cuando el menú está colapsado en móviles */
@media (max-width: 992px) {
    .navbar-nav .nav-link {
        padding: 0.4rem 0.75rem;
    }
    .navbar-nav .btn {
        margin: 2px 0;
        width: 100%;
        text-align: center;
    }
    .search-form-mobile {
        margin: 8px 0;
        width: 100%;
    }
    .search-form-mobile input {
        max-width: 100%;
        flex: 1;
    }
    .navbar-brand {
        max-width: 75%;
    }
}