.bg-blanco{
    background-color:White;
}


.bg-naranja{
    background-color:#fd7a39;
}

.bg-celeste{
    background-color:#07bdff;
}

.bg-magenta{
    background-color:#ff68bd;
}

.bg-verdelimon{
    background-color:#a6e23d;
}

.bg-verde{
    background-color:#00c69e;
}

.bg-morado{
    background-color:#a890ff;
}

.bg-pato{
    background-color:#f5e45f;
}


.bg-barbie{
    background-color:#fe2c96;
}




.li{
    color:black;
}

/* Tipografía */
        h1, h2, h3 {
            font-family: 'Fredoka One', cursive;
            color: #ff69b4; /* Rosa brillante */
            margin-bottom: 1rem;
        }


/* Header */
        header {
            background: #fff;
            padding: 0.5rem 0; /* Reducido para acomodar mejor el logo */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header .logo img { /* Estilo para la imagen del logo */
            height: 150px; /* Ajusta la altura según sea necesario */
            width: auto;
        }
        /* Eliminamos el texto del logo si usamos imagen */
        /* header .logo {
            font-family: 'Fredoka One', cursive;
            font-size: 1.8rem;
            color: #ff69b4;
        } */


        header nav ul {
            list-style: none;
            display: flex;
        }

        header nav ul li {
            margin-left: 25px;
        }

        header nav ul li a {
            font-weight: 600;
            color: #333;
            transition: color 0.3s ease;
            padding-bottom: 5px;
        }

        header nav ul li a:hover, header nav ul li a.active {
            color: #ff69b4;
            border-bottom: 2px solid #ff69b4;
        }

 /* Hero Section */
        .hero {
            /* Imagen de fondo actualizada
            background: url('{% static "dist/images/vitrina/toys.png" %}') no-repeat center center/cover;
            */
            
            height: 70vh; /* Puedes ajustar la altura */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            position: relative;
        }
        .hero::before { /* Overlay para mejorar legibilidad del texto */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Aumenta un poco la opacidad si es necesario */
        }

        .hero-content {
            position: relative; /* Para que esté sobre el overlay */
            z-index: 1;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            color: #fff; /* Texto blanco para el H1 del hero */
            text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* Sombra más pronunciada */
        }

        .hero p {
            font-size: 1.3rem; /* Un poco más grande */
            margin-bottom: 2rem;
            color: #f0f0f0; /* Texto gris claro para el párrafo del hero */
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }

        .btn {
            display: inline-block;
            background: #ff6347; /* Tomate */
            color: #fff;
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 99, 71, 0.4);
            text-transform: uppercase; /* Mayúsculas para el botón */
        }

        .btn:hover {
            background: #e55337; /* Tomate más oscuro */
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 99, 71, 0.5);
        }

        .btn-secondary {
            background: #1e90ff; /* Azul dodger */
            box-shadow: 0 4px 15px rgba(30, 144, 255, 0.4);
        }
        .btn-secondary:hover {
            background: #1c80e3; /* Azul dodger más oscuro */
        }