@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {font: inherit;text-decoration: none;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;box-sizing:border-box;font-family: "Source Sans 3", sans-serif;/* color: var(--color-contrast-high); */}
a, a:hover{transition:.3s;}
.invalid-feedback{display:none;}
body{}

		#miDiv {
            width: 100%;
            padding: 20px;
            background-color: #007bff;
            color: white;
            text-align: center;
            font-size: 1.5em;
            position: fixed; /* Lo fijamos para que siempre esté visible en la parte superior */
            top: 0;
            left: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out; /* Transición suave */
            z-index: 1000;
        }

        /* Clase CSS que se agregará cuando el scroll supere los 100px */
        #miDiv.scrolled {
            background-color: #28a745; /* Nuevo color de fondo */
            box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Nueva sombra */
        }


strong{
    font-weight: bold;
}
.gridList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(auto, auto);
    grid-gap: 4em;
    margin: 50px 0px 0px;
    padding-bottom: 40px;
}
.contItem{
    display: flex;
    flex-direction: column;
    gap: 1em;
    box-shadow: var(--shadow-md);
}
.txtItem{
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: 20px;
}
    .txtItem h3{
    color: var(--color-contrast-lower);
    font-weight: bold;
    font-size: 1.1em;
}
    .txtItem p{
    color: var(--color-accent-light) !important;
    font-size: .85em;
}
.detailAux{
    display: flex;
    justify-content: center;
    margin: 60px 0px;
}
.detailAux img{
    max-width: 100px;
}
.content_gal{
    display: flex;
    flex-direction: column;
    gap: 3em;
}
.galInt{}
.onePicture{
    color: var(--color-contrast-high);
}
.twoPicture{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 3em;
    align-items: center;
}
.contImaD_co{
    position: relative;
    overflow: hidden;
}
    .contImaD_co img{
    position: relative;
    width: 100%; /* or any custom size */
    height: 100%;
    object-fit: cover;
    /* max-width: fit-content; */
}
.contentDetail{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    /* padding-bottom: 50px; */
}
.detailDark{
    background-color: var(--color-contrast-high);
}
.detailDark h1, .detailDark h2, .detailDark a{
    color: var(--color-contrast-lower);
    }
.detailDark p{
    color: var(--color-accent-light);
}
.detailDark p strong{
    color: var(--color-contrast-lower);
}
.detailDark a{
    font-size: .85em;
    display: flex;
    align-items: center;
    gap: .5em;
}
.contItem:hover{background-color: var(--color-accent-darker);}
.detailDark i{
    color: var(--color-accent-light);
}
.detailProyect{
    background-image: url("../imagenes/ima_pro1.jpg");
}
.contEff{
    background: #ffffff;
    background: linear-gradient(360deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
    padding-bottom: 50px;
}
.wrapGG_max{max-width: 1200px;margin: auto;padding: 0px 20px;}
.headerDP{
    position: relative;
    padding-top: 380px;
}
.headerDP2{
    position: relative;
    padding-top: 180px;
}
.backImaPPDP{}
.conTDataDP{}
    .conTDataDP h1{
    font-weight: bold;
    font-size: 3em;
}
.detailData{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1em;
    align-items: center;
}
.two_col{}
.col_Dt{
    display: flex;
    gap: 2em;
    margin-top: 50px;
}
.contB_Dt{flex: 1;color: var(--color-contrast-high);}
.contB_Dt > div{
    display: flex;
    gap: .5em;
    align-items: flex-start;
    margin-bottom: 20px;
    min-height: 105px;
}
.contB_Dt > div > div:last-child{
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.contB_Dt > div > div > i{font-size: .4em;}
.contB_Dt h2{
    margin-bottom: 30px;
    font-weight: bold;
}


.containerSlider{
    background: rgba(0,0,0,0.5);
    top: 0px;
    bottom: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
}
.contTxSlider{
    position: relative;
    top: 48%;
    margin: auto;
    max-width: 550px;
    padding: 30px 40px;
    /* background-color: hsl(0deg 0% 0% / 15%); */
    /* -webkit-backdrop-filter: blur(10px); */
    /* border-radius: 0.5em; */
    /* -webkit-font-smoothing: antialiased; */
    /* -moz-osx-font-smoothing: grayscale; */
    color: var(--color-contrast-lower);
    text-align: center;

}
.contTxSlider > .text-component{
    color: var(--color-contrast-lower);
}
.anim-menu-btn svg{filter: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(885%) hue-rotate(339deg) brightness(107%) contrast(105%);}
.contFoot{
    display: flex;
    text-align: center;
    margin: 0px auto 0px;
    padding: 100px 0px;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}
.footerDark{color: var(--color-contrast-lower);background-color: var(--color-contrast-high);}
.imaIco{
    margin: auto;
}
	.imaIco img{
    width: 90px;
}
.contTxtFoot{}

.contLogo-dat{
    position: fixed;
    z-index: 99;
    top: 18px;
    width: 140px;
    margin-left: 50%;
    left: -70px;
}
    .contLogo-dat > div img{}


media (max-width: 955px){

	
}

@media (max-width: 620px){
.gridList{
    grid-gap: 2em;
    grid-template-columns: repeat(2, 1fr);
}
    .twoPicture{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 3em;
    align-items: center;
}
    .height_adjMedia{
    height: 480px;
    overflow: visible;
}
.detailData{
    display: block;
}

}