@charset "UTF-8";
/* 
  Reset CSS 
  Youtube 👉 https://www.youtube.com/watch?v=Foieq2jTajE 
  Github  👉 https://github.com/eduardofierropro/Reset-CSS
*/
:root {
  --negro: #393939;
  --tipo-principal: Helvetica, Arial, sans-serif;
  --tipo-secundaria: Verdana;
}
nav li{
      display:inline-block;
      width:200px;
      height:5%;
      padding:5px 10px;
      background-color:#000;
	  font-weight:600;
	  font-family:Arial, Helvetica, sans-serif;
	  
      
      text-align:center;
      color:#fff;
      position:relative;
}
            
nav li:hover{
      background-color:#fff;
      color:#000;
      }
            
nav li>ul{
      display:none;
	  
      }

nav li:hover>ul{
      display:block;
      position:absolute;
      top:30px;
      left:0px;
	  z-index:50;
}


@media (prefers-color-scheme: dark) {
  :root {
    --negro: #ececec;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}


a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

p a {
  display: inline;
}

li {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em {
  font-size: 1.3em;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

::-moz-selection {
  background-color: var(--negro);
  color: var(--blanco);
}

::selection {
  background-color: var(--negro);
  color: var(--blanco);
}


table, tr, td {
  border-collapse: collapse;
  border-spacing: 0;
}

svg {
  width: 100%;
  display: block;
  fill: currentColor;
}

body {
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--tipo-principal);
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*  Código de nuestro menu */
.header {
  width: 100%;
  background-color: #000;
  padding: 0.5em;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header .button {
  display: none;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .header .button {
    display: block;
  }
}
.header .svg {
  width: 2em;
  height: 2em;
  fill: white;
}
@media screen and (max-width: 480px) {
  .header .nav {
    width: 100%;
    opacity: 0;
    height: 0vh;
    pointer-events: none;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header .nav.activo {
    opacity: 1;
    height: 50vh;
    pointer-events: auto;
  }
}
.header .ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 480px) {
  .header .ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  nav li:hover>ul{
      display:block;
      position:absolute;
      top:30px;
      left:0px;
	  z-index:50;
}

}
.header .li {
  margin: 0 0.5em;
}
@media screen and (max-width: 480px) {
  .header .li {
    margin: 1em 0;
  }
}