/* ========================================
   MELANIN VOGUE - TEXTURA GRIS ELEGANTE
   ======================================== */

body {
    /* 1. Color base: Gris medio/cálido (Mismo tono de la imagen) */
    background-color: hsl(0, 0%, 100%); 

    /* 3. Ajustes */
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Eliminamos otros fondos que puedan interferir */
body::before {
    display: none;
}

/* --- Ajustes de color para que el texto se lea sobre el gris --- */

/* Títulos y textos generales ahora deben ser claros u oscuros según prefieras.
   Dado que el fondo es oscuro (#8c8b88), sugiero textos blancos o muy oscuros.
   Aquí fuerzo un poco de contraste en los contenedores */

.card, .product-card, .checkout-card, .register-card {
    background-color: #ffffff; /* Las tarjetas siguen blancas para contraste */
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra más fuerte */
}

/* Navbar blanca para que destaque */
.navbar-melanin {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Footer oscuro para cerrar */
footer {
    background-color: #2c2c2c;
    color: #f0f0f0;
}
/* ======================================================
   ESTILO "FLOTANTE" (TIPO MATTELSA) - FORZADO FINAL
   ====================================================== */

/* Atacamos todas las combinaciones posibles para eliminar el fondo */
div.card-product-melanin,
div.card.card-product-melanin {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
}

/* Quitamos efectos al hover */
div.card-product-melanin:hover,
div.card.card-product-melanin:hover {
    transform: translateY(-5px);
    box-shadow: none !important;
    background: transparent !important;
}

/* Contenedor de la imagen */
div.card-product-melanin .img-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 15px;
    overflow: visible !important;
    /* Permitir que la imagen respire */
}

/* Forzar que la imagen no tenga bordes */
div.card-product-melanin .img-container img {
    border-radius: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: multiply;
    /* TRUCO EXTRA: Ayuda a fusionar bordes blancos leves con el fondo */
}

/* Cuerpo de la tarjeta */
div.card-product-melanin .card-body {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Ocultar botones extraños */
div.card-product-melanin .detail-btn-desktop,
div.card-product-melanin .btn-mobile-view {
    display: none !important;
}
/* static/css/main.css */

.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* O la altura que uses para tu Hero */
    overflow: hidden;
}

.hero-video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Asegura que cubra el área sin distorsión */
}

.hero-content {
    position: relative;
    z-index: 10;
    /* ... Asegúrate de que el contenido del hero esté centrado y visible ... */
}