body {
            background-color: #fcf9f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #4a3e40;
        }

        .navbar {
            background-color: #f2d9de;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        }
        .img-logo-nav {
            height: 55px;
            object-fit: contain;
        }
        .btn-volver-menu {
            background-color: transparent;
            border: 2px solid #c4848e;
            color: #c4848e;
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .btn-volver-menu:hover {
            background-color: #c4848e;
            color: #ffffff;
        }

        .titulo-linea {
            font-size: 1.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #4a3e40;
            margin-bottom: 30px;
        }

        /* Contenedor principal de la grilla */
        .grid-catalogo {
            display: flex;
            flex-wrap: wrap;
            gap: 0; 
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }

        /* SOLUCIÓN: Columnas con imágenes que CUBREN TODO el espacio */
        .col-producto {
            flex: 1 0 100%; 
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 45px 20px;
            min-height: 580px; /* Altura regulada para que luzca alargado y estético */
            
            /* Propiedades clave para que la imagen cubra todo el cuadro */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.3s ease;
        }

        @media (min-width: 768px) {
            .col-producto {
                flex: 1;
            }
        }

        .col-producto:hover {
            transform: scale(1.02);
            z-index: 5;
            box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        }

        /* ASIGNACIÓN DE IMÁGENES DE FONDO (Reemplaza con tus rutas reales) */
        /* Nota: Si tus imágenes ya tienen los fondos de colores incluidos, se fusionarán solos */
        .bg-presentacion { background-color: #ebe3dc; } /* Columna limpia de texto */

        .bg-Principio   { background-image: url('../img/Presentacion.png'); }
        .bg-chocolate    { background-image: url('../img/Alfafor\ con\ logo\ normal.jpeg'); }
        .bg-canela     { background-image: url('../img/Linea\ Regular.jpeg'); }
        .bg-chocblanco      { background-image: url('../img/Chocolateblanco.jpeg'); }
        .bg-moka         { background-image: url('../img/moka.png'); }
        
        .bg-redvelvet    { background-image: url('../img/Linea\ Especial.jpeg'); }
        .bg-naranja      { background-image: url('../img/Linea\ Especial\ 4.jpeg'); }
        .bg-pink     { background-image: url('../img/pink.jpeg'); }
        .bg-maracuya     { background-image: url('../img/Linea\ Especial\ 2.jpeg'); }
        
        .bg-caja1     { background-image: url('../img/Cajas\ de\ Regalo.jpeg'); }
        .bg-caja2     { background-image: url('../img/Caja2.jpeg'); }
        .bg-caja      {background-image: url('../img/Cajas.jpeg');}
        
        /* Estilos de textos adaptados para leerse sobre la imagen */
        .prod-nombre {
            font-size: 1.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 2px;
            color: #4a3e40;
            text-shadow: 0 1px 2px rgba(255,255,255,0.6); /* Suave sombra para legibilidad */
        }
        .prod-linea {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #6b5e5e;
            margin-bottom: auto; /* Empuja la descripción hacia la parte inferior */
            font-weight: 600;
        }
        .prod-descripcion {
            font-size: 0.9rem;
            line-height: 1.4;
            color: #3b3233;
            max-width: 220px;
            margin-top: auto; /* Se alinea abajo magnéticamente */
            margin-bottom: 20px;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(255,255,255,0.8);
        }

        /* Botones estilo pastilla inferiores */
        .prod-precio-btn {
            color: #ffffff;
            font-weight: 700;
            font-size: 1.05rem;
            padding: 7px 32px;
            border-radius: 20px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }
        .prod-precio-btn1 {
            color: #000000;
            font-weight: 700;
            font-size: 1.05rem;
            padding: 7px 32px;
            border-radius: 20px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(255, 255, 255, 0.547);
        }
        .prod-precio-btn:hover {
            transform: scale(1.05);
            color: #ffffff;
        }

        /* Colores exactos de botones basados en Catalogo_2.jpeg */
        .btn-choco { background-color: #432b24; }
        .btn-vainilla { background-color: #d19e4b; }
        .btn-nutella { background-color: #a84343; }
        .btn-moka { background-color: #6e4d3b; }
        .btn-red { background-color: #b83246; }
        .btn-naranja { background-color: #d6792a; }
        .btn-nube { background-color: #3b72a6; }
        .btn-blanco { background-color: #fff0fd; }
        .btn-maracuya { background-color: #cca430; }
        .btn-cookies { background-color: #4f4f4f; }
        .btn-regalo { background-color: #636b57; }

        .info-pedido-box {
            background-color: #c9a96e;
            border-radius: 16px;
            padding: 40px;
            border: 1px solid #eee1e3;
        }
        .prod-nombre, .prod-descripcion, .prod-linea {
    /* Esto crea el contorno blanco */
    text-shadow: 
        -1px -1px 0 #c9a96e,  
         1px -1px 0 #c9a96e,
        -1px  1px 0 #c9a96e,
         1px  1px 0 #c9a96e;
    
    /* Opcional: Esto ayuda a que el color de la letra principal 
       se vea más sólido sobre el contorno */
    font-weight: 800; 
}
iframe {
    display: block;
    width: 100%;
    filter: grayscale(20%); /* Un toque elegante */
    transition: filter 0.3s;
}

iframe:hover {
    filter: grayscale(0%); /* El mapa toma color al pasar el mouse */
}