/************************************************************
Hoja de CSS con estilos de la página work.html y páginas de proyectos
    · Estilos de bloques principales
    · Estilos de camino de migas
    · Estilos de los section de proyectos
        - Carrusel de imágenes
        - Textos de proyectos
    · Media queries
*************************************************************/

.Main-works{
    padding: 0;
    max-width: max-content;
}

/************************************************************
    Bloque de estilos del camino de migas
*************************************************************/

.Breadcrumbs{
    width: 100%;
    padding: 0 var(--p-double) calc(var(--p-simple) / 1.5);
}

.Breadcrumbs-ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

.Breadcrumbs-li{
    text-transform: uppercase;
    font-size: var(--fs-xs);
    transition: color 0.25s ease-in-out;
}

.Breadcrumbs-li:hover{
    color: var(--c-primary);
}

.Breadcrumbs-li:active{
    color: var(--c-secondary);
}

.Breadcrumbs-li::before{
    content: '<';
    padding: 0 calc(var(--p-simple) / 4);
    color: var(--c-grey);
}

.Breadcrumbs-li.Active{
    color: var(--c-primary);
}

/************************************************************
    Bloque de estilos de los carruseles de imágenes
*************************************************************/

.Carrusel{
    width: 100%;
    overflow: hidden;
}

.Carrusel.Others{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--p-simple) / 4);
    transition: transform 0.5s ease-in-out;
    transform: translateX(0%);
}

.Carrusel-container{
    width: max-content;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--p-simple) / 4);
    transition: transform 0.5s ease-in-out;
    transform: translateX(0%);
}

.Container-img{
    height: 17.25rem;
    overflow: hidden;
}

.Container-img.Project{
    height: 25rem;
}

.Img-picture.Others{
    width: 24.5vw;
    height: 18.75rem;
}

.Img-picture,
.Img-archive{
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/************************************************************
    Bloque de estilos de los textos de los proyectos
*************************************************************/

.Work-text{
    padding: calc(var(--p-simple) / 1.33) var(--p-double) var(--p-simple);
}

.Work-text {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--p-simple) / 4);
}

.Work-a{
    width: 100%;
    transition: color 0.25s ease-in-out;
}

.Work-a.Out{
    text-transform: uppercase;
    text-decoration: underline;
}

.Other-text {
    padding: calc(var(--p-simple) / 1.33) calc(var(--p-simple) / 1.33) var(--p-simple);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--p-simple) / 4);
}

.Work-as--solan{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.Work-a.Out.Solan{
    min-width: fit-content;
    padding: calc(var(--p-simple) / 4) 0 0 calc(var(--p-simple) / 2.66);
}

.Work-a:hover{
    color: var(--c-primary);
}

.Work-a:active{
    color: var(--c-secondary);
}

.Work-h2, 
.Work-h3{
    font-size: var(--fs-min);
    line-height: 1.25rem;
}

.Work-span{
    font-size: var(--fs-min);
    text-transform: uppercase;
}

.Work-p{
    max-width: 46.875rem;
    font-weight: 300;
    margin: calc(var(--p-simple) / 4) 0 0;
}

.Hermit .Work-p{
    max-width: 48.5rem;
}

.Work-span--more{
    font-size: var(--fs-min);
    margin: calc( var(--p-simple) / 4) 0 0;
}


.Others-wrapper {
    margin: 0 0 calc(var(--p-simple) / 2);
}

.Accordion-btn {
    width: 100%;
    border-radius: calc(var(--p-simple) / 2);
    color: var(--c-black);
    cursor: pointer;
    background-color: var(--c-white);
    font-size: var(--fs-texts);
    font-family: inherit;
    text-align: left;
    transition: color 0.25s ease-in-out;
}

.Accordion-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: .125rem;
    margin: calc(var(--p-simple) / 4) 0 0;
    background-color: var(--c-black);
    transition: all 0.4s ease-in-out;
}

.Accordion-btn:hover{
    color: var(--c-primary);
}

.Accordion-btn:hover::after{
    background-color: var(--c-primary);
}

.Accordion-btn:active{
    color: var(--c-secondary);
}

.Accordion-btn:active::after{
    background-color: var(--c-secondary);
}

.Accordion-content {
    width: 100%;
    height: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.Accordion-content.isActive {
    height: 25.0625rem;
    opacity: 1;
    pointer-events: auto;
}

.Accordion-contact.isActive {
    height: 20rem;
    opacity: 1;
    pointer-events: auto;
}

.Accordion-li {
    margin: 0 0 calc(var(--p-simple) / 2);
}

.Accordion-a {
    text-decoration: underline;
    transition: color 0.25s ease-in-out;
}

.Accordion-a:hover {
    color: var(--c-primary);
}

.Accordion-a:active {
    color: var(--c-secondary);
}

.Content-contact {
    width: 100%;
}

/************************************************************
    Media Queries
*************************************************************/
@media (max-width: 1900px){
    .Img-picture.Others{
        width: 31.25rem;
    }
}

@media (max-width: 950px){
    .Work-h2, 
    .Work-h3{
        margin: 0 0 -0.40rem;
    }
}


@media (max-width: 500px){
    .Work-text{
        padding: calc(var(--p-simple) / 1.33) var(--p-simple);
    }

    .Breadcrumbs{
        padding: calc(var(--p-simple) / 1.33) var(--p-simple);
    }

    .Container-img{
        height: 12.5rem;
        overflow: hidden;
    }

    .Container-img.Project{
        height: 25rem;
    }

    .Img-picture.Others{
        width: 23.4375rem;
    }
}