@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

/********** VERSIÓN MÓVIL **********/


*, *::before, *::after {
    box-sizing: border-box;
    margin:0;
    padding:0;
}
  
  
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
  
  
/* El contenedor del logo y el menú */
header {
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 5em;
    padding-top: 0.5em;
}
  

.logo{
    top:0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 1.5em;
}
  

.logo img{
    width: 5.2em;
}
  

/* Contenedor logo blanco para versión móvil */
.logo-white{
    z-index: 1000;
    position:absolute;
    display: flex;
    align-items: center;
    top:0;
    left:0;
    height: 100%;
    padding-top: 0.5em;
    padding-left: 1.5em;
    opacity: 0;
    transition: opacity 300ms ease-in-out 100ms;
}
  

/* Logo blanco para versión móvil */
.logo-white img{
    width: 5.2em;
}


/* El contenedor del checkbox */
.nav-toggle {
    display: none;
}
  

/* El contenedor de la palabra "menú" en versión móvil */
.nav-toggle-label {
    position:absolute;
    top:0;
    right:0;
    margin-right: 1.5em;
    height: 100%;
    display: flex;
    align-items: center;
}


/* La palabra "menú" en versión móvil */
.nav-toggle-label span {
    color: rgb(0, 0, 0);
    font-size: 1.25rem;
}
  
  
/* El menú dentro de "header" */
/* Aquí está la animación de la barra que baja para mostrar el menú en responsive, sin el contenido */
nav {
    position: absolute;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    height: 100vh;
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 300ms ease-in-out;
    background-color: rgba(0, 0, 0, 0.9);
}
  
/* Mueve los links del menú un poco hacia abajo */
nav ul{
    margin:0;
    padding:0;
    list-style: none;
}
  

nav li{
    padding: 1.6em;
}
  
  
/* Incluye la animación de los ítems del menú cuando se van hacia arriba */
nav a{
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity 100ms ease-in-out;
}
  

nav a:hover{
    color: rgb(255, 143, 38);
}


/* Da orden a que cuando el checkbox esté marcado, transforme el menú */
.nav-toggle:checked ~ nav{
    transform: scale(1,1);
}


/* Da orden a que cuando el checkbox esté marcado, aparezca el LOGO BLANCO */
.nav-toggle:checked ~ .logo-white{
    opacity: 1;
}
  

.nav-toggle:checked ~ .nav-toggle-label span{
    color: rgb(255, 255, 255);
    text-shadow: none;
}
  
  
/* Lo mismo que el anterior pero lo aplica a cómo aparecen los links del menú */
.nav-toggle:checked ~ nav a{
    opacity: 1;
    transition: opacity 200ms ease-in-out 250ms;
}


/* Contenedor general donde van las imágenes */
.gallery-container{
    margin:0;
    padding:0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 5.2em;
}



/*** Cada imagen vertical que forma parte de una pareja ***/
.gallery-item{
    width: 95%;
    margin-bottom: 0.65em;
}

.gallery-item img{
    width:100%;
}



/*** Imagen vertical individual ***/
.gallery-item-full {
    width: 80%;
    margin-top: 5.37em;
    margin-bottom: 6em;
}

.gallery-item-full img{
    width:100%;
}



/*** Imagen vertical individual COMO PORTADA ***/
.gallery-item-full-top {
    width: 80%;
    margin-top: 3em;
    margin-bottom: 6.7em;
}

.gallery-item-full-top img{
    width:100%;
}



/*** Imagen horizontal individual ***/
.gallery-item-full-horizontal {
    width: 100%;
    margin-top: 5.33em;
    margin-bottom: 6em;
}

.gallery-item-full-horizontal img{
    width:100%;
}



/*** Imagen HORIZONTAL individual COMO PORTADA ***/
.gallery-item-full-horizontal-top {
    width: 100%;
    margin-top: 3.5em;
    margin-bottom: 6em;
}

.gallery-item-full-horizontal-top img{
    width:100%;
}


.footer{
    text-align: center;
    font-size: 0.92rem;
    font-weight: 300;
    padding-top: 0.5em;
    padding-bottom: 3em;
}















/********** VERSIÓN TABLET **********/

@media screen and (min-width: 700px) {

    /* Hace que no se vea la palabra "menú" ni el logo blanco */
    .logo-toggle-label{
        display: none;
    }
  
    
    .nav-toggle-label{
        display: none;
    }


    /* Hace que el logo blanco no aparezca */
    .logo-white{
        display: none;
    }

    .logo{
        padding-left: 2em;
        margin:0;
    }

    .logo img{
        width: 5.5em;
    }


    header {
        all: unset;
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 100%;
        height: 5.5em;
        margin:0;
        padding-top: 0.35em;
    } 


    nav{
        all:unset;
        margin:0;
        padding:0;
        display: flex;
        align-items: center;
        padding-right: 2em;
    }  
  
      
    nav a{
        opacity: .25;
        color: rgb(0, 0, 0);
        font-size: 1.05rem;
        font-weight: 300;
        padding-left: 2.6em;
    }
      
    
    nav a:hover{
        color: rgb(255, 143, 38);
        opacity: 1;
    }
          
    
    nav ul{
        display: flex;
        flex-direction: row;
        margin:0;
        padding:0;
    }

    nav li{
        padding:0;
    }
    

    /* Subraya el ítem del menú */
    nav .active{
        opacity: 1;
        color: rgba(0, 0, 0, 1);
    }

    
    .gallery-container{
        margin:0;
        padding:0;
        width: 100%;
        padding-top: 5.5em;
    }
    

    /*** Cada imagen que forma parte de una pareja ***/
    .gallery-item{
        margin:0;
        margin:0.4em;
        width: 47%;
    }
    
    .gallery-item img{
        width:100%;
    }


    /*** Imagen vertical individual ***/
    .gallery-item-full{
        margin:0;
        padding: 0;
        width: 55%;
        margin-top: 8em;
        margin-bottom: 7.55em;
    }

    .gallery-item-full img{
        width: 100%;
    }


    /*** Imagen vertical individual COMO PORTADA ***/
    .gallery-item-full-top {
        padding:0;
        margin:0;
        width: 55%;
        margin-top: 3em;
        margin-bottom: 6.7em;
    }
    
    .gallery-item-full-top img{
        width:100%;
    }


    /*** Imagen horizontal individual ***/
    .gallery-item-full-horizontal{
        width: 95%;
        margin-top: 5em;
        margin-bottom: 5em;
    }
    
    .gallery-item-full-horizontal img{
        width:100%;
    }



    /*** Imagen horizontal individual COMO PORTADA ***/
    .gallery-item-full-horizontal-top {
    width: 95%;
    margin-top: 1em;
    margin-bottom: 5em;
    }

    .gallery-item-full-horizontal-top img{
    width:100%;
    }
    
    

    .footer{
        font-size: 0.83rem;
        padding-top: 1em;
        padding-bottom: 3em;
    }

}















/********** VERSIÓN ESCRITORIO **********/

  
/* Cuando la pantalla sea de más de 900px osea escritorio se mostrará según lo que hay dentro */

@media screen and (min-width: 900px) {
    
    .logo{
        padding-top: 0.5em;
        padding-left: 7.2em;
        margin:0;
    }

    .logo img{
        width: 5.5em;
    }


    header {
        all: unset;
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 100%;
        height: 5.3em;
        margin:0;
        padding-bottom: 0.15em;
        background-color: rgba(255, 255, 255, 0);
        transition: .3s;
    } 


    header:hover{
        background-color: rgba(255, 255, 255, 1);
    }


    nav{
        all:unset;
        margin:0;
        padding:0;
        display: flex;
        align-items: center;
        padding-right: 7.2em;
    }  
  
      
    nav a{
        opacity: .25;
        color: rgb(0, 0, 0);
        font-size: 1.1rem;
        font-weight: 300;
        padding-left: 2.5em;
    }
      
    
    nav a:hover{
        color: rgb(255, 143, 38);
        opacity: 1;
    }

    
    .gallery-container{
        margin:0;
        padding:0;
        width: 100%;
        padding-top:5.2em;
    }
    


    /*** Cada imagen que forma parte de una pareja ***/
    .gallery-item{
        margin:0;
        margin: 0.35em;
        width: 40%;
    }
    
    .gallery-item img{
        width:100%;
    }


    /*** Imagen vertical individual ***/
    .gallery-item-full{
        margin:0;
        padding:0;
        margin-top: 8em;
        margin-bottom: 8em;
        margin-left: 15em;
        margin-right: 15em;
        width: 37%;
    }

    .gallery-item-full img{
        width: 100%;
    }

    
    /*** Imagen vertical individual COMO PORTADA ***/
    .gallery-item-full-top{
        margin:0;
        padding:0;
        margin-top: 1.5em;
        margin-left: 16em;
        margin-right: 16em;
        margin-bottom: 9em;
        width: 37%;
    }

    .gallery-item-full-top img{
        width:100%;
    }



    /*** Imagen horizontal individual ***/
    .gallery-item-full-horizontal {
        width: 72%;
        margin:0;
        padding:0;
        margin-top: 6.5em;
        margin-bottom: 6.5em;

    }

    .gallery-item-full-horizontal img{
        width:100%;
    }


    /*** Imagen horizontal individual COMO PORTADA ***/
    .gallery-item-full-horizontal-top {
        width: 72%;
        margin:0;
        margin-top: 2em;
        margin-bottom: 6.5em;
    }
    
    .gallery-item-full-horizontal-top img{
        width:100%;
    }
    
    
    
    .footer{
        font-size: 0.83rem;
        padding-top: 1em;
        padding-bottom: 3.5em;
    }

}