@charset "utf-8";

/* pantalla de inicio */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

a {
    text-decoration: none;
    color: rgb(145,0,179)
}

a:hover {color:orange}

#inicio body {
    background-color: orange;
    font-family: "Oswald", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}
/*para las demas pantallas */

header {
    background-color:hotpink;
    font-family: "Oswald", sans-serif;
    height: 4em;
    color: white;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

h2 {
 font-family: 'Sansita', sans-serif;
        color: white;
    font-weight: 300;
        font-size: 1.5rem;
    padding-bottom: 0.5rem;
        margin: 0em;
}

h3{
    font-family: "oswald", sans-serif;
    font-size: 1rem;
    color: white;
}

h4 { 
    font-family: 'Oswald', sans-serif;
    color: rgb(145,0,179);
    font-size: 1rem;
    line-height: 1.2rem;
    padding: 1em;
    font-weight: 200;
    margin: 0em
    }
h5 {
    font-family: 'Sansita', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: deeppink;
}
.encabezado { 
    display: flex;
    justify-content:space-around;
    align-items: center
}

.iso {
    height: 100%
}
#logoheader{
    position: static;
    width: 3em;
    height: 3em;
    padding-left: .5em;
    padding-top: .5em;
    width: 100%;
}


/* menú desplegable para todos igual */

header button {
    width: 2em;
    height: 2em;
    margin-left: .25em;
    background-color: transparent;
    color: white;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 9999;
    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
}


/* menu desplegable */

header nav {
    background-color: deeppink;
    color: white;
    transition: all .3s ease;

    
    /* para salir del "flujo de información" del fondo 
        y colocase en una capa superior fija */
    position: fixed;
    right: -70%;
    top: 0;
    bottom: 0;
    min-width: 40%;
    z-index: 9995;
}


/* módulo de navegación visible */
nav.menuvisible {
    right: 0;
}
#principal { 
  
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative; 
    left: -14px; 
    display:block;
    background-color: hotpink;

}

#secundario {
    background-color: deeppink;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;  
    display:block;
    
    
}

.usuario {
    margin: auto;
    text-align:left;
    font-size: 14px;
   padding: 4em 0em 0em 1em;
    /*
    border-bottom: solid 1px rgba(255,255,255,.25);*/
    background-color: deeppink;
}
.usuario img {
    border-radius: 50%;
    width: 20vmin;
    height: 20vmin;
    max-width: 5em;
    max-height: 5em;
    margin-left: 1em;
}

header nav a {
    color: black;
    display: block;
    padding: .5em 1em;
    text-align: left;
    text-decoration: none;
    font-size: 1rem;
}

header nav a:hover {
    color: white;
    	text-decoration: none;

}
.usuario p {
    color: rgb(0,44,121);
    font-size: 12px;
}

#secundario ul li {
    list-style: none;
	text-decoration: none;
    position: relative; 
    left: -10px; 
    display:block;
}
#principal ul li {
    list-style: none;
	text-decoration: none;
    position: relative; 
    left: -10px; 
    display:block;
}
#x {
    
    position: absolute;
    right: 0;
    top: 0;
}







body {
    background-color: white;
    font-family: "Oswald", sans-serif;
    margin-top: 0;
}

main {
    padding-top: .5em;
}



.left li { 
    text-align: right;
    display: flex;
    justify-content: flex-end;
}


.especificacion {
   
    margin-top: 0;
    width: 100%;
     }

.especificacion ul {
     background-color: ghostwhite;
     width: 100%;
    
  
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: .5rem;
    margin-top: 1rem;
    
    
    display: flex;
     justify-content: space-between;
    
    flex-direction: row;
    
    


    
    
 }

.especificacion ul li {
    color: deeppink;
    margin:0;
    list-style: none;
        line-height: normal;

}
    
.res_especif { 
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-left: 3rem;
    padding-right: 3rem;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.res_especif ul li {
    
    color: rgb(145,0,179);
    text-align: left;
    list-style: none;
    display: flex;
    
}


.encabezado_2 { 
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    width: 100%;
    position: relative;
    z-index: 9990;
   right: 0;
    bottom: 0;
    
   
    }

#img_principal {
    
    padding-left: 0px;
    margin: 0px;
    width: 100%;
    height: auto;
    display: flex;
    font-family: 'Oswald', sans-serif;
    border-top-left-radius: 10em;

}

.nathy {
    margin: 0;
    padding-left: 0;
    
    background: linear-gradient(135deg, rgba(255,92,176,1) 0%, rgba(241,111,91,1) 60%, rgba(239,1,124,1) 73%, rgba(184,0,230,1) 100%);
    
    text-indent: 1rem;
    
  
}

/*
----------------
pie
----------------
*/


footer {
    font-family: "oswald", sans-serif;
    font-size: 12px;
    color:  rgb(0,44,121);
    padding: 1em;
    background-color: pink;
}


/*

------------------------------------------------
 "mediaqueries" para diseño multipantalla:
 reglas de estilo que SÓLO se aplican
 si se cumplen las condiciones entre paréntesis
 después de la instrucción "@media"
 y se encuentran  "encerradas" entre las llaves
------------------------------------------------
*/


/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    
    .galeria figure {
        width: 20%;
    }
    
    .galeria figure:hover figcaption {
        background-color: rgba(60,0,60,.5);
        top: 0;
        transition: all .5s ease-in;
    }
}

/*
cuando la ventana del navegador mida
como mínimo 800px de ancho
*/
@media (min-width: 50em) {
    .galeria h3 {
        margin-bottom: 2em;
    }
    h3 {
        background-color: rgba(0,60,60,.1);
    }
    .textos h3 {
        padding: 1em;
    }
}

/*
cuando la ventana del navegador mida
como mínimo 1200px de ancho
*/
@media (min-width: 75em) {
    .galeria {
        background-color: rgba(0,60,60,.15);
    }
    
    
}