/* Estilos específicos para la página de Guerrero con tonos amarillos y naranjas */

/* 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(80, 50, 0, 0.9);
}

.navbar::before {
    background: linear-gradient(
        45deg,
        #FF8C00, /* DarkOrange */
        #FFD700, /* Gold */
        #FFA500, /* Orange */
        #FF8C00  /* DarkOrange */
    );
    opacity: 0.3;
}

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

.nav-link:hover {
    color: #FFFF00 !important; /* Yellow */
}

/* 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/1692840937396-QD3YRQF4QQபாடல்/tlacololeros.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(255, 235, 153, 0.2); /* Tono amarillo claro con transparencia */
    border: 1px solid rgba(255, 165, 0, 0.3); /* Orange con transparencia */
}

.dance-image:hover .dance-caption {
    background: linear-gradient(transparent, rgba(255, 140, 0, 0.9)); /* DarkOrange gradient */
}

/* Colores para secciones */
.region-section {
    background: rgba(255, 250, 205, 0.8); /* LemonChiffon con transparencia */
}