body {
    /* Reemplaza 'tu-fondo.jpg' por el nombre exacto de tu imagen */
    background-image: url('imagenes/fondo\ richili.png'); 
    
    /* Evita que la imagen se duplique en forma de mosaico */
    background-repeat: no-repeat; 
    
    /* Cubre toda la pantalla de forma automática sin importar el tamaño del monitor */
    background-size: cover; 
    
    /* Fija el fondo para que el contenido se deslice encima de él (estilo premium) */
    background-attachment: fixed; 
    
    /* Centra la imagen en la pantalla */
    background-position: center center; 
}




/* ==========================================================================
   2. BARRA DE NAVEGACIÓN Y MENÚ
   ========================================================================== */
/* Fondo de la barra completa */
.navbar {
    background-color: #070707 !important; /* Color azul oscuro (usa !important para ganarle a Bootstrap) */
    padding: 0px 0px;                       /* Espaciado interno arriba y abajo */
}

/* Color del título o logo de la barra */
.navbar-brand {
    color: #ff0000 !important;
    font-weight: bold;
}

/* Color de los enlaces del menú en estado normal */
.navbar-nav .nav-link {
    color: #ff0000 !important;
    font-size: 18px;
}

/* Color de los enlaces cuando pasas el mouse por encima (Hover) */
.navbar-nav .nav-link:hover {
    color: #ffffff !important; /* Color amarillo */
}

/* ==========================================================================
   3. MENÚS DESPLEGABLES (Dropdowns - Si utilizas)
   ========================================================================== */
.dropdown-menu {
    background-color: #34495e; /* Fondo del menú desplegable */
}

.dropdown-item {
    color: #ffffff;
}

.dropdown-item:hover {
    background-color: #f1c40f; /* Fondo al pasar el mouse */
    color: #000000;
}
/* ==========================================================================
   DISEÑO DE PRODUCTOS 
   ========================================================================== */

/* Tarjeta contenedora sin bordes y con fondo transparente */
.product-card {
    border: transparent !important;
    background: color transparent !important;
    display: flex;
        text-align: center;

    flex-direction: column;
}
/* Área de la imagen: Fondo gris muy claro para resaltar el producto */
.product-card .card-img-top {
    background-color: transparent !important; 
    border-radius: 15px;
    padding: 0px;
    height: 550px;            /* Altura fija para que todas las fotos alineen perfecto */
    width: 100%;              /* Ancho completo de la tarjeta */
    object-fit: cover;      /* Muestra el producto completo sin recortarlo */
    transition: transform 0.3s ease-in-out;
}


/* Efecto hover: El producto se eleva sutilmente al pasar el mouse */
.product-card:hover .card-img-top {
    transform: scale(1.04);
}

/* Cuerpo de la tarjeta */
.product-card .card-body {
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye textos y botón verticalmente */
}

/* Título del producto */
.product-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}

/* Precio en negrita */
.product-price {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

/* Botón "Add to cart" Ovalado */
.btn-shop {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1.5px solid #1a1a1a !important;
    border-radius: 50px !important; /* Forma completamente ovalada */
    padding: 8px 20px !important;
    font-weight: 600;
    font-size: 18px;
    width: 80%;
    margin: 0 auto;
    transition: all 0.2s ease-in-out !important;
}

/* Cambio de color inverso al pasar el mouse por el botón */
.btn-shop:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}
/* Quita el fondo blanco y el borde de la tarjeta del producto */
.product-card {
    background-color: transparent !important;
    border: none !important;
}

/* Quita el fondo blanco del contenedor de textos */
.product-card .card-body {
    background-color: transparent !important;
}

/* Asegura que la imagen superior no tenga fondos extraños */
.product-card .card-img-top {
    background-color: transparent !important;
}
/* ==========================================================================
   4. CARROUSEL
   ========================================================================== */
   /* ==========================================================================
   CONTROL DE TAMAÑO Y DISEÑO DEL CARRUSEL
   ========================================================================== */

/* 1. Contenedor principal: controla qué tan ancho se ve en la pantalla */
#carouselExampleAutoplaying {
    max-width: 600px;       /* 👈 Cambia este número para regular el ancho (Ej: 800px, 1000px, etc.) */
    margin: 150px auto 10px auto;      /* Centra el carrusel horizontalmente y le da espacio arriba y abajo */
    border-radius: 15px;    /* Esquinas un poco redondeadas estilo tienda moderna */
    overflow: hidden;        /* Corta las imágenes para que respeten las esquinas redondeadas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Una sombra muy sutil para darle profundidad */
}

/* 2. Control de las imágenes: regula la altura fija para que no se estiren hacia abajo */
#carouselExampleAutoplaying .carousel-item img {
    height: 500px;          /* 👈 Modifica este valor (Ej: 350px o 500px) para controlar la altura */
    object-fit: cover;      /* Hace que la imagen llene el espacio de forma limpia sin deformarse */
    background-color: #f7f7f7; /* Fondo neutro por si la imagen tarda un instante en cargar */
}
---


```css
/* ==========================================================================
   DISEÑO PARA CONTENEDORES DE REDES INTERACTIVAS
   ========================================================================== */

/* Caja contenedora estilo "Glassmorphism" */
.live-social-card {
    background-color: rgba(7, 7, 7, 0.75) !important; /* Fondo negro translúcido */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde fino elegante */
    border-radius: 20px !important;
    overflow: hidden;
    backdrop-filter: blur(8px); /* Difumina suavemente el fondo de la página */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   DISEÑO PARA CONTENEDORES DE REDES INTERACTIVAS (CORREGIDO)
   ========================================================================== */

/* Forzamos a que la tarjeta de Bootstrap NO sea blanca ni tenga bordes claros */
.live-social-card {
    background-color: rgba(7, 7, 7, 0.75) !important; /* Fondo negro translúcido premium */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde oscuro y fino */
    border-radius: 20px !important;
    overflow: hidden;
    backdrop-filter: blur(8px); /* Difumina el fondo de tu página */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Aseguramos que el cuerpo de la tarjeta de Bootstrap también sea transparente */
.live-social-card .card-body {
    background-color: transparent !important;
    min-height: 450px; 
    max-height: 600px; 
    overflow-y: auto;  
}

/* Personalización de la barra de scroll interna */
.live-social-card .card-body::-webkit-scrollbar {
    width: 6px;
}
.live-social-card .card-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* Asegura que los bloques de ingredientes midan lo mismo para alinear las preparaciones */
@media (min-width: 768px) {
    .receta-lista {
        min-height: 210px; /* Altura ideal calculada para la lista más larga */
    }
}

/* ==========================================================================
   DISEÑO PARA EL PIE DE PÁGINA (FOOTER)
   ========================================================================== */
.custom-footer {
    background-color: rgba(0, 0, 0, 0.85) !important; /* Fondo oscuro que hace juego con la barra de navegación */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* Encabezados de las columnas del footer */
.footer-heading {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-uppercase: uppercase;
}

/* Estilo base de los enlaces */
.footer-link {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Efecto Hover: se iluminan y se mueven un milímetro a la derecha */
.footer-link:hover {
    color: #ffffff !important; /* O el color dorado/rojo que manejes en tus títulos */
    padding-left: 2px;
}

/* ==========================================================================
   DISEÑO PARA EL LOGO DEL FOOTER (Ajuste de Tamaño y Efectos)
   ========================================================================== */
.footer-logo {
    /* 👇 ESTE ES EL NÚMERO QUE DEBES CAMBIAR 👇 */
    height: 250px !important; /* Lo subimos de 120px a 180px como punto de partida */
    /* ------------------------------------------ */
    
    width: auto; /* Mantiene la proporción de la imagen */
    max-width: 100%; /* Asegura que no se desborde en celulares */
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.5)); /* Sombra sutil */
    transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
}

/* Efecto hover interactivo: crece un 5% al pasar el mouse */
.footer-logo:hover {
    transform: scale(1.05); 
}

/* ==========================================================================
   SISTEMA DE COMPRA INTERACTIVA PREMIUN (ROJO PICANTE)
   ========================================================================== */

/* Animación base */
.transition-all {
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Tamaño de la botella normal (¡Más grande!) */
.img-producto-principal {
    max-height: 510px !important; /* Ajusta este número si quieres que crezca aún más en tu pantalla */
    object-fit: contain;
    transition: max-height 0.45s ease;
}

/* Color rojo picante insignia de la marca */
.text-custom-red {
    color: #ffffff !important;
}
.btn-custom-red {
    background-color: #fa0000 !important;
    border: none !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-custom-red:hover {
    background-color: #ad2e2e !important;
    transform: scale(1.02);
}

/* Modificadores dinámicos cuando se abre la compra */
.col-izquierda-encogida {
    width: 50% !important;
}
.col-izquierda-encogida .img-producto-principal {
    max-height: 500px !important; /* Se reduce elegantemente para dejar espacio al menú */
}
.col-izquierda-encogida h3, 
.col-izquierda-encogida p {
    text-align: left !important;
}

/* Ajustes de fondo internos */
.custom-bg-dark {
    background-color: #0d0d0d !important;
}
.bg-dark-input {
    background-color: #1a1a1a !important;
}
.btn-cantidad-display {
    background-color: #ff0000;
    min-width: 45px;
    text-align: center;
}
.small-tracking {
    letter-spacing: 1px;
}