/* Estilos específicos para la página de Oaxaca con tonos cafés y rojizos */

/* 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(70, 30, 20, 0.9);
}

.navbar::before {
    background: linear-gradient(
        45deg,
        #8B4513, /* SaddleBrown */
        #A52A2A, /* Brown */
        #CD5C5C, /* IndianRed */
        #8B4513  /* SaddleBrown */
    );
    opacity: 0.3;
}

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

.nav-link:hover {
    color: #FFA07A !important; /* LightSalmon */
}

/* 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/1692840936947-RJFK2CKQZ2JFXV0JFMZM/pluma.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(210, 180, 140, 0.2); /* Tan con transparencia */
    border: 1px solid rgba(139, 69, 19, 0.3); /* SaddleBrown con transparencia */
}

.dance-image:hover .dance-caption {
    background: linear-gradient(transparent, rgba(139, 69, 19, 0.9)); /* SaddleBrown gradient */
}

/* Colores para secciones */
.region-section {
    background: rgba(245, 222, 179, 0.8); /* Wheat con transparencia */
}