/*=========================================================
    XALTILOLLI 2.0
    LAYOUT
=========================================================*/


/*=========================================================
    MAIN
=========================================================*/

main{

    display:flex;

    flex-direction:column;

}


/*=========================================================
    HEADER
=========================================================*/

.header{

    position:sticky;

    top:0;

    z-index:var(--z-navigation);

    backdrop-filter:blur(16px);

    background:rgba(28,28,28,.75);

    border-bottom:1px solid rgba(255,255,255,.06);

}


/*=========================================================
    LOGO
=========================================================*/

.logo img{

    height:58px;

}



/*=========================================================
    HERO
=========================================================*/

.museum{

    position:relative;

    overflow:hidden;

}



/*=========================================================
    CONTENEDOR HERO
=========================================================*/

.museum .container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-sm);

}



/*=========================================================
    ROUTES
=========================================================*/

.routes{

    display:flex;

    justify-content:center;

}



.routes .container{

    display:flex;

    justify-content:center;

    gap:2rem;

    flex-wrap:wrap;

}



/*=========================================================
    COLLECTION
=========================================================*/

.collection{

    position:relative;

}



/*=========================================================
    ACCESSIBILITY
=========================================================*/

.accessibility{

    position:relative;

}



/*=========================================================
    FOOTER
=========================================================*/

.footer{

    border-top:1px solid rgba(255,255,255,.08);

}



/*=========================================================
    FONDO GENERAL
=========================================================*/

body{

    background:

    radial-gradient(

        circle at top,

        #434343 0%,

        #2a2a2a 30%,

        #1d1d1d 100%

    );

}



/*=========================================================
    DECORACIÓN SUPERIOR
=========================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:url("../assets/backgrounds/pattern.png");

    background-repeat:repeat;

    background-size:420px;

    z-index:-1;

}



/*=========================================================
    TITULOS DE SECCIÓN
=========================================================*/

.collection h2,
.accessibility h2{

    text-align:center;

    margin-bottom:var(--space-sm);

}



/*=========================================================
    BOTONES ROSAS
=========================================================*/

.routeButton{

    display:block;

    width:var(--route-width);

    height:var(--route-height);

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

     transition:transform .25s ease;

}

.routeButton--integral{

    background-image:url("../assets/images/home/boton_recorrido.png");

}

.routeButton--curatorial{

    background-image:url("../assets/images/home/boton_recorrido_temp.png");

}


.routeButton:hover{

    transform:scale(1.06);

}


/*=========================================================
    SEPARACIÓN ENTRE BLOQUES
=========================================================*/

.museum{

    padding-top:var(--space-sm);

    padding-bottom:var(--space-sm);

}



.routes{

    padding-top:var(--space-sm);

    padding-bottom:var(--space-xl);

}