:root {
    --primary-color: #F7A600;
    --primary-color-rgb: 247, 166, 0;
    --secondary-color: #4c742b;
    --secondary-color-rgb: 76, 116, 43;
    --text-color: #666;
    --text-color-muted: #E5E5E5;
    --border-color: #E5E5E5;
    --secondary-border-color: #4c742b;
    --background-input: #F8F8F8;
    --button-primary: #7b66ef;
    --button-hover: #fca80f;
    --background-cream: #FFF9EC;
    --primary-color-dark: #E69600;
    --primary-color-dark-rgb: 230, 150, 0;
    --secondary-color-dark: #365314;
    --secondary-color-dark-rgb: 54, 83, 20;
    --color-text-white: #FFFFFF;
    --button-secondary: #7b66ef;
    --button-secondary-hover: #6351c9;
}

@font-face {
    font-family: Neue Haas Light;
    src: url(fonts/NeueHaasDisplay-Light.ttf);
}

@font-face {
    font-family: Neue Haas Roman;
    src: url(fonts/NeueHaasDisplay-Roman.ttf);
}

@font-face {
    font-family: Neue Haas Bold;
    src: url(fonts/NeueHaasDisplay-Bold.ttf);
}

#Wrapper{
    background-color: white !important;
}

#Wrapper #Header_wrapper{
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%) !important;
}

#Wrapper #Header_wrapper #Top_bar,
#Wrapper #Header_wrapper #Top_bar .top_bar_left,
#Wrapper #Header_wrapper #Top_bar .top_bar_right {
    background-color: transparent !important;
}

#Wrapper #Header_wrapper #Top_bar .top_bar_left .logo img,
#Wrapper #Header_wrapper #Top_bar .top_bar_right .logo img {
    filter: brightness(0) invert(1);
}

#Wrapper #Header_wrapper #Top_bar .top_bar_left .menu_wrapper {
    display: none !important;
}

/* Clase para cambiar el color de los iconos SVG a primary-color */
.celec-label-with-primary-icon svg path {
    fill: var(--primary-color) !important;
}

select.celec-custom-select, div.dataTables_length select, .select2-container--default .select2-selection--single, .select2-container .select2-selection--multiple {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.2" baseProfile="tiny" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 141.7 141.7" overflow="visible" xml:space="preserve"><circle fill="%234c742b" cx="70.7" cy="70.9" r="70.9"/><g><path fill="%23FFFFFF" d="M70.7,97.2C70.6,97.2,70.6,97.2,70.7,97.2c-2.1,0-4.1-0.9-5.5-2.4L35.7,63.1c-2.8-3-2.6-7.8,0.4-10.6 c3-2.8,7.8-2.6,10.6,0.4l24,25.8l24.2-25.7c2.8-3,7.6-3.2,10.6-0.3c3,2.8,3.2,7.6,0.3,10.6L76.1,94.8 C74.7,96.3,72.7,97.2,70.7,97.2z"/></g></svg>') !important;
}


.celec-subheader-content-block::after {
    content: '';
    position: absolute;
    top: 185px;
    left: 0;
    right: -400px;
    height: 6px;
    background: var(--secondary-color);
    border-radius: 0;
    z-index: 1;
}

.celec-subheader-content {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.celec-subheader-content-text {
    flex: 3;
    padding-right: 20px;
    position: relative;
}

.celec-subheader-content-text span{
    font-size: 1.2em;
}


.celec-subheader-content-title {
    font-size: 1.8em;
    line-height: 1.3;
    margin: 0 0 10px 0;
    color: var(--text-color);
    font-weight: bold;
    position: relative;
}


.celec-subheader-content-label {
    font-weight: 900;
    color: var(--secondary-color) !important;
    font-size: 1.6em;
}

.celec-subheader-content {
    font-style: italic;
    color: var(--text-color);
    font-weight: normal;
    font-size: 1.1em;
}

.celec-subheader-content-subtitle {
    font-size: 1.1em;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

.celec-subheader-content-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-top: 10px;
    margin-bottom: 10px;
}

.celec-subheader-content-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 0 5px var(--secondary-color);
    background: var(--border-color);
}

.celec-content h2{
    color: var(--text-color);
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}

.celec-content span{
    color: var(--text-color);
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: left;
}

.celec-comercializadora-info {
    margin-top: 10px;
}

/* Decoración adicional removida para fondo completamente blanco */
/* Responsive Design */
@media (max-width: 768px) {
    .celec .celec-titles{
        display: none;
    }
    .celec-subheader-content-block {
        margin: 30px 0;
        padding: 20px;
    }
    
    .celec-subheader-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .celec-subheader-content-text {
        padding-right: 0;
        order: 2;
    }
    
    .celec-subheader-content-block::after {
        content: '';
        position: absolute;
        top: 185px;
        left: 0;
        right: -400px;
        height: 6px;
        background: var(--secondary-color);
        border-radius: 0;
        z-index: 1;
    }
    
    .celec-subheader-content-image {
        order: 1;
    }
    
    .celec-subheader-content-title {
        font-size: 1.8em;
    }
    
    .celec-subheader-content-avatar {
        width: 150px;
        height: 150px;
    }

    .celec-comercializadora-info {
        order: 1 !important;
    }
    .celec-comercializadora-image {
        order: 2 !important;
        min-height: 100px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    #celec-container {
        position: relative;
        z-index: 999;
        background-color: transparent;
        top: -80px;
        margin-bottom: -80px;
        padding-bottom: 0px;
    }

    .celec-subheader-content-block {
        margin: 20px 0;
        padding: 15px;
        z-index: 1;
        position: relative;
        background-color: transparent;
    }
    
    .celec-subheader-content-title {
        font-size: 1.5em;
    }
    
    .celec-subheader-content-subtitle {
        font-size: 1em;
    }
    
    .celec-subheader-content-avatar {
        width: 180px;
        height: 180px;
    }

    .celec-comercializadora-image {
        padding: 0;
    }

    .celec-comercializadora-info .celec-form-group.celec-inline-input input{
        width: 300px !important;
        max-width: auto !important;
        height: auto !important;
        font-size: 1.8em !important;
        padding-top:10px !important;
        padding-bottom:10px !important;
    };

    .celec-comercializadora-info .celec-form-group.celec-inline-input {
        flex: 1 !important;
        min-height: 50px;
        display: grid !important;
        justify-items: center;
        align-items: center;
        place-content: center;
        margin-bottom: 0;
        margin-top:5px;
    }

    .celec-comercializadora-info .celec-form-group.celec-inline-input .celec-subtitle-span {
        width: 100% !important;
        min-width: 100px;
        font-size: 1.2em;
        text-align: center !important;
    }

    .celec-comercializadora-info {
        display: grid !important;
        flex-direction: column;
        gap: 8px;
        order: 1 !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        justify-items: center;
        align-items: center;
        place-content: center;
    }
}

/* Línea horizontal con flecha hacia abajo */
.celec-arrow-divider {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.celec-arrow-divider svg {
    max-width: 400px;
    width: 100%;
    height: 40px;
}

/* Versión SVG actualizada con chevron */

/* Versión alternativa con CSS puro */
.celec-arrow-divider-simple{
    display: none;
}

.celec-arrow-divider-simple::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(50% - 30px);
    height: 4px;
    background: var(--secondary-color);
    transform: translateY(-50%);
    border-radius: 2px;
}

.celec-arrow-divider-simple::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: calc(50% - 30px);
    height: 4px;
    background: var(--secondary-color);
    transform: translateY(-50%);
    border-radius: 2px;
}

.celec-arrow-divider-simple .arrow-chevron {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    background: white;
}

.celec-arrow-divider-simple .arrow-chevron::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-right: 4px solid var(--secondary-color);
    border-bottom: 4px solid var(--secondary-color);
    transform: rotate(45deg);
    border-radius: 2px;
}


/* Bloque Grinch Energético */
.celec-grinch-block {
    margin: 40px 0;
    padding: 0px;
    background: transparent;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.celec-grinch-content {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.celec-grinch-text {
    flex: 3;
    padding-right: 20px;
    position: relative;
}

/* Línea verde que pasa por detrás de la imagen entre el título y subtítulo */

.celec-grinch-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: -400px;
    height: 6px;
    background: var(--secondary-color);
    border-radius: 0;
    z-index: 1;
}

.celec-grinch-title {
    font-size: 2.2em;
    line-height: 1.3;
    margin: 0 0 25px 0;
    color: var(--text-color);
    font-weight: normal;
    position: relative;
}

.celec-grinch-label {
    font-weight: 900;
    color: var(--secondary-color) !important;
    font-size: 1.6em;
}

.celec-grinch-energetico {
    font-style: italic;
    color: var(--text-color);
    font-weight: normal;
    font-size: 1.1em;
}

.celec-grinch-subtitle {
    font-size: 1.1em;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

.celec-grinch-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.celec-grinch-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--secondary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Decoración adicional removida para fondo completamente blanco */

/* Responsive Design */
@media (max-width: 768px) {
    .celec-grinch-block {
        margin: 30px 0;
        padding: 20px;
    }
    
    .celec-grinch-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .celec-grinch-text {
        padding-right: 0;
        order: 2;
    }
    
    .celec-grinch-title::after {
        display: none;
    }
    
    .celec-grinch-image {
        order: 1;
    }
    
    .celec-grinch-title {
        font-size: 1.8em;
    }
    
    .celec-grinch-avatar {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .celec-grinch-block {
        margin: 20px 0;
        padding: 15px;
    }
    
    .celec-grinch-title {
        font-size: 1.5em;
    }
    
    .celec-grinch-subtitle {
        font-size: 1em;
    }
    
    .celec-grinch-avatar {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 768px) {
    #Wrapper #Header_wrapper #Top_bar .mobile-header-mini #Top_bar .logo{
        width: 100% !important;
        margin-left: 0 !important;
    }
    #Wrapper #Header_wrapper{
        padding-bottom:20px;
    }
    .celec-arrow-divider-simple {
        position: relative;
        width: 100%;
        height: 40px;
        margin: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .celec-contacto-box .celec-form-row svg, #celec-form-cups .celec-form-row svg{
        display: none;
    }
    .celec-contacto-box .celec-form-row .celec-subtitle{
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        justify-items: left !important;
        align-items: center;
        place-content: center;
    }
    .celec-contacto-box .celec-form-row .celec-subtitle .celec-subtitle-span{
        text-align: left !important;
    }
    .celec-contacto-box .celec-form-row .celec-subtitle .celec-subtitle-span-small{
        text-align: left !important;
    }

    .celec-line.celec-line-muted{
        display: none;
    }
}