#introProyecto
{
    padding-top: 65px;
}
.bg-blur-noise::after
{
    --var-opacity: 0.1 !important;
}
header#menu_logo {
    position: fixed;
    transform: translateY(var(--menu-top)) translateX(-50%);
    left: 50%;
}

section#home {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right top, #3b3b3b, #323232, #292929, #202020, #181818, #171717, #161616, #151515, #1a1a1a, #202020, #252525, #2b2b2b);
}

aside.contenedor-redes-sociales-1
{
    display: block;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: var(--max-ancho);
    padding-left: 0.7rem;
}
aside.contenedor-redes-sociales {
    position: relative;
    bottom: 0;
    left: 0;
    color: #ffffff;
    display: flex;
    gap: 1rem;
}

aside.contenedor-redes-sociales a {
    color: #ffffff;
}

.contenedor-modulo
{
    display: block;
    position: relative;
    padding: 2rem 0rem 2rem 2rem;
    top: 0;
    left: 0;
    width: 90%;
}

.contenedor-seccion {
    padding: var(--padding-cs) 0px 0px 0px;
    height: max-content;
/*    min-height: 20vh;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}



/* PORTFOLIO  */
.d-flex-proj {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    max-width: 1360px;
    width: 100%;
}

.df-i, .df-d {
    flex: 1 0 300px;
}

div#_iProyecto {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#contenidoPortfolio {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 100%;
    overflow: auto;
}

.card-portfolio.card {
    flex: 1 0 320px;
    max-width: 390px;
    height: max-content;
    background-color: #000000;
    border: none;
}

.card-image img {
    height: 189px;
}

.card-header-portfolio 
{
    --ancho-pantall: 60vw;
    height: max-content;
    top: 0;
    left: 0;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    width: var(--ancho-pantall);
    max-width: 1024px;
}

span.chip.chip-clear {
    background-color: #000000;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .31);
    opacity: 1;
    border-radius: 3px;
    margin-right: 0.5rem;
}
.plane-inner {width: 100%;}

a.card-portfolio {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.card-title {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 0.5rem 1rem 0.5rem;
    width: 100%;
    backdrop-filter: blur(11px);
    background-color: rgba(255, 255, 255, .1);
}

.f-1-0-10
{
    flex: 1 0 10px;
    min-height: max-content !important;
    position: relative;
}

.borde-tarjeta {
    box-shadow: 0 0 0 1px rgba(255,255,255,.3);
    border-radius: 5px;
    padding: 1rem;
}

.card-image.card-image-portfolio img {
    object-fit: cover;
    width: 100%;
    height: 280px;
}

.bg-blur-noise::before
{
    --opacity-noise: 0.3;
}
.fondo-fixed 
{
    background-image: linear-gradient(to right top, #3b3b3b, #3b3b3b, #4b4b4b, #4b4b4b, #2b2b2b) !important;
}
.loading-light::after {
    border-left-color: #ffffff;
}
section#cuerpoPortfolio {
    --max-ancho: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    max-width: var(--max-content);
}

section#cuerpoPortfolio .dtf-100 {
    flex: 1 0 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}
section#cuerpoPortfolio .dtf-50 {
    flex: 1 0 300px;
    min-width: 49%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

section#cuerpoPortfolio .dtf-33 {
    flex: 1 0 100px;
    min-width: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.dtf-100 img
{
    opacity: 0;
    transform: translateY(101%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.dtf-50 img
{
    opacity: 0;
    transform: translateX(101%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.dtf-33 img
{
    opacity: 0;
    transform: translateX(101%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.dtf-100 img.ok
{
    opacity: 1;
    transform: translateY(0%);
}
.dtf-33 img.ok,
.dtf-50 img.ok
{
    opacity: 1;
    transform: translateX(0%);
}

.plane-wrapper {
        position: relative;
        width: 100%;
    }

.plane-wrapper:last-child {
    margin-bottom: 10vh;
}

.plane-title {
    color: white;
    position: absolute;
    top: 25%;
    left: 25%;
    font-size: 2em;
    font-weight: 700;
    background: #ee6557;
    display: inline-block;
    padding: 0.125em 0.25em;
}

.plane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 15.5vh;
    width: 100%;
    height: 460px;
    max-width: 1200px;
}
.plane img
{
    transform: translateX(10%);
    border-radius: 10px;
}

.plane-inner-content 
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

.card-portfolio.plane-wrapper:nth-of-type(even) .plane-inner .plane-inner-content {
    align-items: flex-end;
}

.small-plane 
{
    --ancho-pantall: 60vw;
    --alto-pantall: 55vh;
    position: relative;
    left: 0;
    bottom: 0;
    width: var(--ancho-pantall);
    height: var(--alto-pantall);
    max-width: 1024px;
    overflow: hidden;
    border-radius: 0;
}



.img-responsive
{
    width: 110%;
    height: 110%;
    max-height: 1024px;
    object-fit: cover;
    top: 50%;
    left: 50%;
    position: relative;
    border-radius: 0px;
}

/*** handling errors ***/

.no-curtains .plane-title {
    z-index: 1;
}

.no-curtains .plane, .no-curtains .small-plane {
    display: flex;
    overflow: hidden;
}

.no-curtains .plane img, .no-curtains .small-plane img 
{
    display: block;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
div.contenedor-modulo-clientes
{
    max-width: var(--max-content)
}
.mqhmcn {
    max-width: 800px;
    display: block;
    margin: 0 auto;
}



@media screen and (max-width: 1320px) {

    #content {
        margin: 0 20px;
    }

    .plane-wrapper {
        width: 100%;
    }

}


@media screen and (max-width: 720px) {

    #content {
        margin: 0 10px;
    }

    .plane-wrapper {
        width: 100%;
    }

    .plane-wrapper:last-child {
        margin-bottom: 12.5vh;
    }

    .my-5 {
        margin-top: 1vh;
        margin-bottom: 10vh !important;
    }
    .card-header-portfolio
    {
        --ancho-pantall:100%;
    }
    .small-plane 
    {
        --ancho-pantall:100%;
        --alto-pantall: 38vh;
    }
    div.contenedor-modulo-clientes
    {
        padding-top:0 !important;
    }
}

.max-ancho-center
{
    --max-ancho:95%;
}

.card-title .hover-effect {
    height: 100%;
    padding: 0.4rem;
}
.my-5
{
    margin-top: 3vh;
    margin-bottom: 50vh;
}
section#clientes {
    --max-ancho: 100%;
    padding: 0.1rem;
    width: 100%;
    padding-bottom: 0;
    margin: 0;
}

#clientes .contenedor-modulo {
    padding: 2rem;
    width: 100%;
    border-radius: 0;
}

.contenedorTieneIdea {
    max-width: 620px;
    text-align: center;
    margin: 2rem auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: #ffffff;
    color: #000000;
    border-radius: 10px;
}