/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


:root {
    --esx-primary: #005587;   /* reemplaza por el color principal real del logo */
    --esx-secondary: #F0A020; /* si usas un segundo color */
    --esx-dark: #0b1720;      /* fondo oscuro header/footer */
    --esx-light: #F5F7FA;     /* fondos claros de secciones */
}

/* Header siempre con fondo #071423 */
#header.full-header.transparent-header #header-wrap,
#header.full-header #header-wrap,
#header.sticky-header #header-wrap {
    background-color: #071423 !important;
}

/* Menú: texto claro y hover con acento si quieres */
.primary-menu .menu-container > .menu-item > .menu-link div {
    color: #ffffff;
}

.primary-menu .menu-container > .menu-item.current > .menu-link div,
.primary-menu .menu-container > .menu-item:hover > .menu-link div {
    color: #f0a020; /* cambia este color de acento si corresponde */
}
/* Botones */
.button.button-border.button-circle,
.button.button-border {
    border-color: var(--esx-primary);
    color: var(--esx-primary);
}

.button.button-border:hover,
.button.button-border:focus {
    background-color: var(--esx-primary);
    color: #ffffff;
    border-color: var(--esx-primary);
}

/* Botones oscuros en slider */
.button.button-dark.button-black {
    background-color: var(--esx-primary);
    border-color: var(--esx-primary);
}

/* Links “more-link” */
.more-link {
    color: var(--esx-primary);
}
.more-link:hover {
    color: var(--esx-secondary);
}


/* Secciones claras/oscura */
.section.dark {
    background-color: var(--esx-dark);
}

.section {
    background-color: #ffffff;
}

#section-contact .col-lg-4.col-md-6 {
    background-color: var(--esx-light);
}

/* Footer */
#footer.dark {
    background-color: var(--esx-dark);
}

#footer .footer-site-links a:hover {
    color: var(--esx-secondary);
}

/* GotoTop */
#gotoTop {
    background-color: var(--esx-primary);
}
#gotoTop:hover {
    background-color: var(--esx-secondary);
}


/* Oscurecer hero slider */
#slider.slider-element {
    position: relative;
}

/* Capa oscura sobre la imagen */
#slider.slider-element::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* ajusta opacidad 0.4–0.7 según gusto */
    z-index: 1;
}

/* Asegurar que el contenido esté sobre el overlay */
#slider .slider-inner,
#slider .slider-inner .vertical-middle,
#slider .slider-inner .container {
    position: relative;
    z-index: 2;
}
/* Caja de contenido del hero */
#slider .col-lg-5 {
    background: rgba(7, 20, 35, 0.75); /* fondo semi-transparente, tono barra superior */
    padding: 24px 26px;
    border-radius: 6px;
}

/* Textos en blanco dentro del hero */
#slider .col-lg-5 h2,
#slider .col-lg-5 h3 {
    color: #ffffff;
}

/* Botón en hero */
/* Botón en hero: forzar que se vea bien sobre el fondo oscuro */
#slider .col-lg-5 .button.button-border.button-dark.button-black {
    border-color: #ffffff !important;
    color: #ffffff !important;
    background: transparent !important;
}

#slider .col-lg-5 .button.button-border.button-dark.button-black:hover,
#slider .col-lg-5 .button.button-border.button-dark.button-black:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071423 !important;
}
/* Carrusel de proyectos ejecutados: alto uniforme */
#oc-proyectos-ejecutados .oc-item {
    background: #071423;
    padding: 10px;
    border-radius: 4px;
}

#oc-proyectos-ejecutados .oc-item img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 4px;
}

@media (min-width: 992px) {
    #oc-proyectos-ejecutados .oc-item img {
        height: 320px;  /* más grande en pantallas grandes */
    }
}


/* Inicio */
#section-about {
    background-color: #ffffff;
}

/* Áreas de negocios */
#section-areas .section {
    background-color: #f5f7fa;  /* gris muy claro */
}

/* Proyectos ejecutados */
#section-proj-ejecutados .section {
    background-color: #ffffff;
}

/* Proyectos en ejecución */
#section-proj-ejecucion .section {
    background-color: #071423;  /* tono barra superior */
    color: #ffffff;
}
#section-proj-ejecucion .section h2,
#section-proj-ejecucion .section p {
    color: #ffffff;
}

/* Reducir padding vertical de las secciones one-page */
.one-page-section,
.page-section,
.section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}