/* ======================================================
 * SITE Colombia - Colores por Servicio
 * Descripción: Colores específicos para cada página de servicio
 * Incluir después de styles.css en cada página
 * ====================================================== */

/* ==================== ENERGÍA - AMARILLO #f9df45 ==================== */
.energia-page .hero {
    background: linear-gradient(135deg, #d4b629 0%, #f9df45 50%, #ffe86b 100%);
}

.energia-page .intro-section {
    background: linear-gradient(135deg, rgba(249, 223, 69, 0.05), rgba(249, 223, 69, 0.1));
}

.energia-page .section-title {
    color: #d4b629;
}

.energia-page .section-title::after {
    background: linear-gradient(90deg, #d4b629, #f9df45);
}

.energia-page .icon-wrapper {
    background: linear-gradient(135deg, #d4b629, #f9df45);
}

.energia-page .service-content h2 {
    color: #d4b629;
}

.energia-page .service-content h2::after {
    background: linear-gradient(90deg, #d4b629, #f9df45);
}

.energia-page .service-content li::before {
    color: #f9df45;
    background: rgba(249, 223, 69, 0.15);
}

.energia-page .service-card:hover {
    border-color: #f9df45;
    box-shadow: 0 15px 60px rgba(249, 223, 69, 0.25);
}

.energia-page .feature-item h3 {
    color: #d4b629;
}

.energia-page .feature-item:hover {
    border-color: #f9df45;
    box-shadow: 0 8px 30px rgba(249, 223, 69, 0.2);
}

.energia-page .cta-section {
    background: linear-gradient(135deg, #d4b629, #f9df45);
}

.energia-page .service-icon {
    background: linear-gradient(135deg, #d4b629, #f9df45);
}

.energia-page .service-link {
    color: #f9df45;
}

.energia-page .service-link:hover {
    color: #d4b629;
}

.energia-page .btn-primary {
    background: white;
    color: #d4b629;
}

.energia-page .btn-primary:hover {
    background: transparent;
    border-color: white;
    color: white;
}

/* ==================== AUDIOVISUALES - ROJO #e61c42 ==================== */
.audiovisuales-page .hero {
    background: linear-gradient(135deg, #c41636 0%, #e61c42 50%, #ff2450 100%);
}

.audiovisuales-page .intro-section {
    background: linear-gradient(135deg, rgba(230, 28, 66, 0.05), rgba(230, 28, 66, 0.1));
}

.audiovisuales-page .section-title {
    color: #c41636;
}

.audiovisuales-page .section-title::after {
    background: linear-gradient(90deg, #c41636, #e61c42);
}

.audiovisuales-page .icon-wrapper {
    background: linear-gradient(135deg, #c41636, #e61c42);
}

.audiovisuales-page .service-content h2 {
    color: #c41636;
}

.audiovisuales-page .service-content h2::after {
    background: linear-gradient(90deg, #c41636, #e61c42);
}

.audiovisuales-page .service-content li::before {
    color: #e61c42;
    background: rgba(230, 28, 66, 0.15);
}

.audiovisuales-page .service-card:hover {
    border-color: #e61c42;
    box-shadow: 0 15px 60px rgba(230, 28, 66, 0.25);
}

.audiovisuales-page .feature-item h3 {
    color: #c41636;
}

.audiovisuales-page .feature-item:hover {
    border-color: #e61c42;
    box-shadow: 0 8px 30px rgba(230, 28, 66, 0.2);
}

.audiovisuales-page .cta-section {
    background: linear-gradient(135deg, #c41636, #e61c42);
}

.audiovisuales-page .service-icon {
    background: linear-gradient(135deg, #c41636, #e61c42);
}

.audiovisuales-page .service-link {
    color: #e61c42;
}

.audiovisuales-page .service-link:hover {
    color: #c41636;
}

.audiovisuales-page .btn-primary {
    background: white;
    color: #c41636;
}

.audiovisuales-page .btn-primary:hover {
    background: transparent;
    border-color: white;
    color: white;
}

/* ==================== EDUCACIÓN - VERDE (necesita código específico) ==================== */
.educacion-page .hero {
    background: linear-gradient(135deg, #2d8a3e 0%, #3ca44f 50%, #4cbd5f 100%);
}

.educacion-page .intro-section {
    background: linear-gradient(135deg, rgba(60, 164, 79, 0.05), rgba(60, 164, 79, 0.1));
}

.educacion-page .section-title {
    color: #2d8a3e;
}

.educacion-page .section-title::after {
    background: linear-gradient(90deg, #2d8a3e, #3ca44f);
}

.educacion-page .icon-wrapper {
    background: linear-gradient(135deg, #2d8a3e, #3ca44f);
}

.educacion-page .service-content h2 {
    color: #2d8a3e;
}

.educacion-page .service-content h2::after {
    background: linear-gradient(90deg, #2d8a3e, #3ca44f);
}

.educacion-page .service-content li::before {
    color: #3ca44f;
    background: rgba(60, 164, 79, 0.15);
}

.educacion-page .service-card:hover {
    border-color: #3ca44f;
    box-shadow: 0 15px 60px rgba(60, 164, 79, 0.25);
}

.educacion-page .feature-item h3 {
    color: #2d8a3e;
}

.educacion-page .feature-item:hover {
    border-color: #3ca44f;
    box-shadow: 0 8px 30px rgba(60, 164, 79, 0.2);
}

.educacion-page .cta-section {
    background: linear-gradient(135deg, #2d8a3e, #3ca44f);
}

.educacion-page .service-icon {
    background: linear-gradient(135deg, #2d8a3e, #3ca44f);
}

.educacion-page .service-link {
    color: #3ca44f;
}

.educacion-page .service-link:hover {
    color: #2d8a3e;
}

.educacion-page .btn-primary {
    background: white;
    color: #2d8a3e;
}

.educacion-page .btn-primary:hover {
    background: transparent;
    border-color: white;
    color: white;
}

/* ==================== SEGURIDAD - AZUL #1a7bb3 (mantener original) ==================== */
/* No necesita cambios, usa los colores por defecto del styles.css */