/**

 * ============================================

 * MALOMAR MUSIC - PALETA DE IDENTIDAD OFICIAL

 * ============================================

 * Sello discográfico emergente: Profesional + Vibrante + Fusión cultural

 * Override completo de colores - Carga después de style-optimized.css

 * ============================================

 * ESTRUCTURA CON BOOKMARKS:

 * [VAR] = Variables de color

 * [GLOB] = Aplicaciones globales

 * [HOM] = Home Page específico

 * [BIO] = Bio Page específico

 * [SER] = Services Page específico

 * [CON] = Contact Page específico

 * [RES] = Responsive

 * [FX] = Efectos especiales

 * ============================================

 */



/* ============================================

   [VAR] 1. REEMPLAZO COMPLETO DE VARIABLES DE COLOR

   ============================================ */



:root {

    /* === PALETA PRINCIPAL - IDENTIDAD MALOMAR === */

    --color-primary: #0D1B2A;               /* Azul Nocturno Profundo */

    --color-secondary: #1B263B;             /* Azul Profundo - Variante contraste */

    --color-accent: #E63946;                /* Coral/Vibrante - Energía musical */

    --color-accent-2: #2A9D8F;              /* Turquesa Caribe - Fusión cultural */

    --color-accent-3: #F4A261;              /* Amarillo Energía - Creatividad */

    

    /* === NEUTROS OPTIMIZADOS === */

    --color-text-light: #F8F9FA;            /* Blanco Hueso */

    --color-text-dark: #212121;             /* Negro suave */

    --color-green-bg: #E8F4F3;              /* Verde claro */

    --color-petrol-black: #0D1B2A;          /* Unificado con primary */

    --color-moss-green: #2A9D8F;            /* Unificado con accent-2 */

    --color-white: #FFFFFF;

    

    /* === VARIABLES AUXILIARES === */

    --color-border-light: rgba(255, 255, 255, 0.15);

    --color-card-bg: rgba(255, 255, 255, 0.05);

    --color-overlay: rgba(13, 27, 42, 0.85);

}



/* ============================================

   [GLOB] 2. APLICACIÓN SISTEMÁTICA POR SECCIÓN

   ============================================ */



/* ---- 2.1 FONDOS PRINCIPALES ---- */

.s2-frame-container,

.dark-section,

#proceso-creativo,

#contact-section {

    background-color: var(--color-primary) !important;

}



/* HEADER TRANSPARENTE */

header {

    background-color: transparent !important;

}



#experience-section,

#cta,

#cta-services-final {

    background-color: var(--color-green-bg) !important;

}



/* ---- 2.2 COMPONENTES CRÍTICOS ---- */



/* BOTONES - Jerarquía clara */

.btn--primary {

    background-color: var(--color-accent) !important;

    color: var(--color-text-light) !important;

    border-color: var(--color-accent) !important;

}



.btn--primary:hover {

    background-color: var(--color-accent-2) !important;

    border-color: var(--color-accent-2) !important;

}



.btn--secondary {

    border-color: var(--color-accent-3) !important;

    color: var(--color-accent-3) !important;

}



.btn--secondary:hover {

    background-color: var(--color-accent-3) !important;

    color: var(--color-primary) !important;

}



/* CARDS - Consistencia visual */

.card {

    border-color: var(--color-border-light) !important;

    background-color: var(--color-card-bg) !important;

}



.card--service {

    background: rgba(255, 255, 255, 0.1) !important;

    backdrop-filter: blur(10px);

    border: 1px solid var(--color-border-light) !important;

}



/* ---- 2.3 TIPOGRAFÍA Y TÍTULOS ---- */



/* TÍTULOS PRINCIPALES (Turquesa Caribe) */

.card__title,

.service-card h3,

#services-grid .service-card h4,

#mission-section h3.highlight-text,

#experience-section h3.highlight-text,

#s3-title,

#cta-title,

#proceso-creativo h3 {

    color: var(--color-accent-2) !important;

}



/* SUBTÍTULOS (Amarillo Energía) */

.s2-block h4.highlight-text,

.video-teaser .subtitle,

.member-info h4,

.members-title {

    color: var(--color-accent-3) !important;

}



/* TÍTULOS HERO EN MOSTAZA ESPECÍFICO (D4AF37) */

#hero-intro h3,

#page-hero h3 {

    color: #D4AF37 !important; /* Mostaza MALOMAR */

}



/* TEXTO EN FONDOS OSCUROS */

header,

.s2-frame-container,

.dark-section,

.dark-section h2,

.dark-section h3,

.dark-section h4,

.dark-section p,

.mobile-nav,

.mobile-nav-list a,

#proceso-creativo,

#contact-section,

.contact-form label {

    color: var(--color-text-light) !important;

}



/* TEXTO EN FONDOS CLAROS */

#experience-section,

#cta,

#cta-services-final,

.service-card p,

.service-card .link-more {

    color: var(--color-text-dark) !important;

}



/* ---- 2.4 ELEMENTOS DE NAVEGACIÓN ---- */

.desktop-nav a:hover,

.desktop-nav a.active,

.mobile-nav-list a:hover,

.lang-btn.active,

.lang-btn:hover {

    color: var(--color-accent) !important;

    border-color: var(--color-accent) !important;

}



/* ---- 2.5 ELEMENTOS ESPECÍFICOS ---- */



/* FOTOS DE MÚSICOS */

.musician-photo {

    border-color: var(--color-accent-2) !important;

}



.member-photo img {

    border-color: var(--color-accent-3) !important;

}



/* LISTAS */

.additional-services-list li {

    background-color: var(--color-primary) !important;

    color: var(--color-text-light) !important;

}



.additional-services-list strong {

    color: var(--color-accent-3) !important;

}



.commitments-list li {

    background-color: var(--color-green-bg) !important;

    color: var(--color-text-dark) !important;

    border-left-color: var(--color-accent-2) !important;

}



/* FORMULARIOS */

.contact-form input[type="text"],

.contact-form input[type="email"],

.contact-form textarea {

    background-color: rgba(255, 255, 255, 0.1) !important;

    border-color: var(--color-border-light) !important;

    color: var(--color-text-light) !important;

}



/* ============================================

   [HOM] 3. HOME PAGE - HERO SECTION

   ============================================ */



.page-hero-bg {

    background: linear-gradient(rgba(13,27,42,0.65), rgba(13,27,42,0.65)), 

                url('/assets/mare.jpg') no-repeat center center/cover !important;

    color: var(--color-text-light) !important;

    padding: 100px 15px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    min-height: 100vh !important;

    width: 100% !important;

    position: relative !important;

}



/* ELIMINAR pseudo-elementos conflictivos */

.page-hero-bg::before,

.page-hero-bg::after {

    display: none !important;

    content: none !important;

}



/* ============================================

   [HOM] 4. HOME PAGE - CTA SECTION

   ============================================ */



#cta {

    background: transparent !important;

    padding: 100px 20px !important;

    position: relative;

}



#cta .container {

    background: var(--color-white);

    border-radius: 24px;

    padding: 70px 50px;

    box-shadow: 0 30px 60px rgba(13, 27, 42, 0.2);

    border: 2px solid var(--color-accent-2);

    max-width: 850px;

    position: relative;

    z-index: 1;

}



#cta h3#cta-title {

    color: var(--color-accent-2) !important;

    font-size: 3rem !important;

    margin-bottom: 1.5rem !important;

}



#cta p {

    color: var(--color-text-dark) !important;

    font-size: 1.5rem !important;

    margin-bottom: 3rem !important;

}



#cta .btn-primary {

    background: linear-gradient(

        90deg,

        var(--color-accent-2),

        var(--color-accent-3)

    ) !important;

    color: var(--color-primary) !important;

    border: none !important;

    padding: 18px 45px !important;

    font-size: 1.3rem !important;

    border-radius: 12px !important;

}



/* ============================================

   [BIO] 5. BIO PAGE - IDENTIDAD ESPECÍFICA

   ============================================ */



/* ---- 5.1 SECCIÓN FUNDADORES ---- */

.founders-section {

    background: linear-gradient(135deg, var(--color-primary) 0%, #14213D 100%) !important;

}



.founders-title {

    color: var(--color-accent-2) !important;

}



.founder-name {

    color: var(--color-accent-2) !important;

}



.founder-role {

    color: var(--color-accent-3) !important;

}



.founder-photo {

    border-color: var(--color-accent-2) !important;

}



/* ---- 5.2 SECCIÓN HISTORIA ---- */

.history-section {

    background-color: var(--color-green-bg) !important;

}



.history-title {

    color: var(--color-primary) !important;

}



.history-content {

    color: var(--color-text-dark) !important;

}



/* ---- 5.3 SECCIÓN FILOSOFÍA ---- */

.philosophy-section {

    background-color: var(--color-primary) !important;

}



.philosophy-title {

    color: var(--color-accent-2) !important;

}



.philosophy-content {

    color: var(--color-text-light) !important;

}



/* ---- 5.4 SECCIÓN SERVICIOS BIO ---- */

.bio-services-section {

    background-color: var(--color-green-bg) !important;

}



.bio-services-title {

    color: var(--color-primary) !important;

}



.services-list li {

    border-left-color: var(--color-accent-2) !important;

    color: var(--color-text-dark) !important;

}



/* ============================================

   [SER] 6. SERVICES PAGE - IDENTIDAD ESPECÍFICA

   ============================================ */



#proceso-creativo h3 {

    color: var(--color-accent-2) !important;

}



.proceso-step {

    border-color: rgba(255, 255, 255, 0.1) !important;

    background: rgba(255, 255, 255, 0.05) !important;

}



#cta-services-final a {

    border-color: var(--color-primary) !important;

}



/* ============================================

   [CON] 7. CONTACT PAGE - IDENTIDAD ESPECÍFICA

   ============================================ */



body.contact-page #contact-section {

    background: linear-gradient(

        135deg,

        var(--color-primary) 0%,

        #14213D 100%

    ) !important;

}



body.contact-page .contact-form {

    background: rgba(255, 255, 255, 0.07) !important;

    backdrop-filter: blur(15px) !important;

    border: 1px solid var(--color-accent-2) !important;

    border-radius: 20px !important;

    padding: 50px 40px !important;

}



#ubicacion .location-text {

    color: var(--color-accent-2) !important;

}



/* ============================================

   [RES] 8. RESPONSIVE ADAPTACIONES

   ============================================ */



@media (max-width: 768px) {

    /* ---- HOME PAGE MOBILE ---- */

    .page-hero-bg {

        padding: 80px 0 !important;

        width: 100vw !important;

        margin: 0 !important;

    }

    

    #hero-intro h2#main-title {

        font-size: 2.2rem !important;

    }

    

    #hero-intro h3 {

        font-size: 1.8rem !important;

    }

    

    #hero-intro p {

        font-size: 1.3rem !important;

    }

    

    /* ---- CTA MOBILE ---- */

    #cta .container {

        padding: 40px 25px !important;

        margin: 0 15px !important;

    }

    

    #cta h3#cta-title {

        font-size: 2.2rem !important;

    }

    

    #cta p {

        font-size: 1.2rem !important;

    }

    

    /* ---- BIO PAGE MOBILE ---- */

    .founder-grid {

        gap: 2rem !important;

    }

    

    .founder-content {

        padding: 1.5rem !important;

    }

    

    .founder-name {

        font-size: 1.8rem !important;

    }

}



@media (max-width: 480px) {

    /* ---- HOME PAGE SMALL MOBILE ---- */

    #hero-intro h2#main-title {

        font-size: 1.8rem !important;

    }

    

    #hero-intro h3 {

        font-size: 1.5rem !important;

    }

    

    #hero-intro .btn-primary {

        padding: 15px 30px !important;

        font-size: 1.1rem !important;

        width: 100% !important;

        max-width: 300px !important;

    }

    

    /* ---- CTA SMALL MOBILE ---- */

    #cta {

        padding: 60px 15px !important;

    }

    

    #cta .container {

        padding: 30px 20px !important;

    }

    

    #cta h3#cta-title {

        font-size: 1.8rem !important;

    }

    

    /* ---- BIO PAGE SMALL MOBILE ---- */

    .founders-title,

    .history-title,

    .philosophy-title,

    .bio-services-title {

        font-size: 2rem !important;

    }

}



/* ============================================

   [FX] 9. EFECTOS Y COMPATIBILIDAD

   ============================================ */



/* ---- EFECTOS HOVER ---- */

.card--service:hover,

.service-card:hover {

    border-color: var(--color-accent) !important;

    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.15) !important;

}



.musician-photo:hover {

    border-color: var(--color-accent) !important;

    filter: grayscale(0%) brightness(1.1) !important;

}



.founder-photo img:hover {

    transform: scale(1.05) !important;

}



.services-list li:hover {

    border-left-color: var(--color-accent) !important;

    transform: translateX(10px) !important;

}



/* ---- BOTONES ESPECIALES ---- */

.button-primary,

.cta-button,

.cta-button-yellow {

    background-color: var(--color-accent) !important;

    color: var(--color-text-light) !important;

}



.button-secondary,

.cta-button-inverted {

    border-color: var(--color-accent-3) !important;

    color: var(--color-accent-3) !important;

}



/* ---- EFECTOS VISUALES ---- */

.btn--primary {

    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3) !important;

}



.btn--primary:hover {

    box-shadow: 0 6px 20px rgba(42, 157, 143, 0.4) !important;

}



/* ============================================

   [UTIL] 10. UTILIDADES FINALES

   ============================================ */



/* Asegurar prioridad para colores de identidad */

#mission-section h3.highlight-text,

#experience-section h3.highlight-text,

.service-card h3,

#services-grid .service-card h4,

.founder-name,

.philosophy-title {

    color: var(--color-accent-2) !important;

}



#hero-intro h3,

.s2-block h4.highlight-text,

.video-teaser .subtitle,

.founder-role {

    color: var(--color-accent-3) !important;

}



/* Clases de utilidad para colores rápidos */

.text-malomar-accent {

    color: var(--color-accent) !important;

}



.text-malomar-turquesa {

    color: var(--color-accent-2) !important;

}



.text-malomar-energia {

    color: var(--color-accent-3) !important;

}



.bg-malomar-primary {

    background-color: var(--color-primary) !important;

}



.border-malomar-accent {

    border-color: var(--color-accent) !important;

}

/* ============================================ */

/* [BIO] PALETA ESPECÍFICA PARA BIO PAGE */

/* ============================================ */



/* Mantener mostaza en override también */

.mustard-color {

    color: #D4AF37 !important;

}



/* Asegurar que los títulos de fundadores sean mostaza */

.founder-name,

.founder-role,

.founders-title {

    color: #D4AF37 !important;

}



/* Asegurar color en sección servicios */

.bio-services-section h3.highlight-text {

    color: #D4AF37 !important;

}



/* Texto en cajas claras */

.philosophy-box,

.services-list-box {

    background: var(--color-green-bg) !important;

    color: var(--color-text-dark) !important;

}



.philosophy-box p,

.services-list-box li {

    color: var(--color-text-dark) !important;

}

/* ============================================ */

/* [FIX] CORRECCIÓN ESPECÍFICA PARA MOSTAZA HERO */

/* ============================================ */



/* FORZAR MOSTAZA EN TODOS LOS H3 DE HERO */

#hero-intro h3,

#page-hero h3,

#hero-intro h3.highlight-text,

#page-hero h3.highlight-text,

#hero-intro h3.mustard-color,

#page-hero h3.mustard-color,

section.dark-section.page-hero-bg h3,

section.dark-section.page-hero-bg h3.highlight-text {

    color: #D4AF37 !important;

    font-family: 'Patua One', cursive !important;

}



/* Asegurar que .mustard-color siempre sea mostaza */

.mustard-color {

    color: #D4AF37 !important;

}