/* Estilos específicos para la página de Puebla con tonos blancos y grises */

/* Reemplazar los colores de fondo en el canvas */
#oceanCanvas {
    /* Solo aplicamos estilos específicos aquí, la luna se mantiene igual */
}

/* Sobreescribir los colores del gradiente de fondo para el mar */
/* Estos estilos serán aplicados por JavaScript dinámicamente */

/* Colores para el navbar */
.navbar {
    background: rgba(47, 47, 47, 0.9); /* DimGray con transparencia */
}

.navbar::before {
    background: linear-gradient(
        45deg,
        #A9A9A9, /* DarkGray */
        #D3D3D3, /* LightGray */
        #DCDCDC, /* Gainsboro */
        #A9A9A9  /* DarkGray */
    );
    opacity: 0.3;
}

/* Color para links activos */
.nav-link.active {
    color: #FFFFFF !important; /* White */
}

.nav-link:hover {
    color: #F5F5F5 !important; /* WhiteSmoke */
}

/* Colores para el hero */
.state-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://images.squarespace-cdn.com/content/v1/64e6533c3c47a57ce6c1b193/1692840936744-P8YRQBX1QQZJVFMZRW0Q/huehues.jpg');
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 2rem;
}

/* Colores para las tarjetas */
.dance-card {
    background: rgba(245, 245, 245, 0.2); /* WhiteSmoke con transparencia */
    border: 1px solid rgba(192, 192, 192, 0.3); /* Silver con transparencia */
}

.dance-image:hover .dance-caption {
    background: linear-gradient(transparent, rgba(105, 105, 105, 0.9)); /* DimGray gradient */
}

/* Colores para secciones */
.region-section {
    background: rgba(220, 220, 220, 0.3); /* Gainsboro con transparencia */
}