/* ============================================
  STYLES-ERROR.CSS - Estilos de componentes y secciones de las page error
  =================================================================
  Propósito: Hoja de estilos principal que define la apariencia visual
  de todas las secciones y componentes 
  de las páginas es-404 | en-404 y es-proximamente | en-comingsoon.

  Para trabajar con 404.html*/
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);

/* ============================================
  404 SECTION
  ============================================ */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /*background: #242424;*/
  font-family: 'Oswald', sans-serif;
  background: -webkit-canvas(noise);
  /*background: -moz-element(#canvas);*/
  overflow: hidden;
}

html::after {
  content: '';
  background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 800px;
  position: relative;
  top: calc(50% - 200px);
  left: calc(50% - 400px);
  text-align: center;
}

h1,
p {
  margin: 0;
  padding: 0;
  -webkit-animation: funnytext 4s ease-in-out infinite;
  animation: funnytext 4s ease-in-out infinite;
}

h1 {
  font-size: 18rem;
  color: rgba(0, 0, 0, 0.3);
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

p {
  font-size: 3rem;
  color: rgba(0, 0, 0, 0.6);
}

body::after,
body::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  -webkit-animation: scanline 8s linear infinite;
  animation: scanline 8s linear infinite;
  opacity: 0.33;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -webkit-canvas(noise);
}

body::before {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

@-webkit-keyframes scanline {
  0% {
    top: -5px;
  }

  100% {
    top: 100%;
  }
}

@keyframes scanline {
  0% {
    top: -5px;
  }

  100% {
    top: 100%;
  }
}

@-webkit-keyframes funnytext {
  0% {
    color: rgba(0, 0, 0, 0.3);
    -webkit-filter: blur(3px);
  }

  30% {
    color: rgba(0, 0, 0, 0.5);
    -webkit-filter: blur(1px);
  }

  65% {
    color: rgba(0, 0, 0, 0.2);
    -webkit-filter: blur(5px);
  }

  100% {
    color: rgba(0, 0, 0, 0.3);
    -webkit-filter: blur(3px);
  }
}

@keyframes funnytext {
  0% {
    color: rgba(0, 0, 0, 0.3);
    filter: blur(3px);
  }

  30% {
    color: rgba(0, 0, 0, 0.5);
    filter: blur(1px);
  }

  65% {
    color: rgba(0, 0, 0, 0.2);
    filter: blur(5px);
  }

  100% {
    color: rgba(0, 0, 0, 0.3);
    filter: blur(3px);
  }
}

/* ============================================
  SISTEMA DE BOTONES (.btn)
  ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24px) var(--spacing-32px);
  font-family: var(--font-primary);
  /*font-size: var(--font-size-14);*/
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: 22px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-base {
  height: 3rem;
  /* O usar una variable nueva como --btn-height */
  width: 16rem;
  /* Permitir que el ancho se ajuste al contenido */
  padding: 0 var(--spacing-32px);
  /* Remover padding vertical */
  line-height: 56px;
  /* Igualar a la altura */
  font-size: var(--font-size-16);
}

.btn--dark {
  background-color: var(--color-ebano);
  color: var(--color-blanco);
  border-color: var(--color-ebano);
  z-index: 2;
}

.btn--dark:hover {
  background-color: #333333;
  border-color: #333333;
}