/* --- ESPACIO ENTRE BORDE Y PORTADA --- */
/* NORMAL */
.sidebar-portada-space {
    height: 30px;
}

/* ZOOM 250% APROX */
@media screen and (min-width: 501px) and (max-width: 768px) {
    .sidebar-portada-space {
        height: 26px;
    }
}

/* ZOOM 300% - 400% APROX */
@media screen and (min-width: 351px) and (max-width: 500px) {
    .sidebar-portada-space {
        height: 22px;
    }
}

/* ZOOM 500% O CELULARES PEQUEÑOS */
@media screen and (max-width: 350px) {
    .sidebar-portada-space {
        height: 18px;
    }
}

/* Hace invisible visualmente los "..." */
.componente {
    color: transparent;
}


/* --- FONDO --- */
iframe {
	position: relative;	/* Necesario para que z-index funcione */
	z-index: 0;			/* Mas alto que ::before */
}

.wrapper {
	position: relative;
	z-index: 0;
}

.wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url('') repeat;
	z-index: -1;
}

.wrapper2 {
	z-index: 3;
}


/* FONDO EN MOVIMIENTO Y CON CAMBIO DE COLOR */
.fondo {
  position: fixed;
  inset: 0;

  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.8) 0%,
    rgba(255, 128, 0, 0.8) 10%,
    rgba(255, 200, 0, 0.8) 20%,
    rgba(180, 255, 0, 0.8) 30%,
    rgba(0, 255, 120, 0.8) 40%,
    rgba(0, 255, 200, 0.8) 50%,
    rgba(0, 200, 255, 0.8) 60%,
    rgba(0, 120, 255, 0.8) 70%,
    rgba(120, 0, 255, 0.8) 80%,
    rgba(200, 0, 255, 0.8) 90%,
    rgba(255, 0, 120, 0.8) 95%,
    rgba(255, 0, 0, 0.8) 100%
  );

  /* NO BORRAR */
  background-size: 400% 400%;

  /* segunda animacion */
  /*animation: rgbFlow 20s ease infinite, liquidWarp 18s ease-in-out infinite;*/
  animation: rgbFlow 100s ease infinite, liquidWarp 90s ease-in-out infinite;

  /* efecto liquido */
  /*filter: blur(40px) saturate(1.3);*/

  transform-origin: center;

  -webkit-mask-image: url("../images/background.webp");
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: auto;

  mask-image: url("../images/background.webp");
  mask-repeat: repeat;
  mask-size: auto;

  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  /* AGREGADO PARA CELULAR Y TABLET */
  will-change: background-position, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* animacion */
@keyframes rgbFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes liquidWarp {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  12% {
    transform: scale(1.06) translate(-4%, 3%);
  }
  25% {
    transform: scale(1.1) translate(5%, -4%);
  }
  37% {
    transform: scale(1.08) translate(-3%, -3%);
  }
  50% {
    transform: scale(1.15) translate(4%, 4%);
  }
  62% {
    transform: scale(1.1) translate(-5%, 2%);
  }
  75% {
    transform: scale(1.12) translate(3%, -5%);
  }
  87% {
    transform: scale(1.09) translate(-2%, -4%);
  }
  100% {
    transform: scale(1) translate(0%, 0%);
  }
}

/* Aplicación */
.liquid {
  animation: liquidWarp 12s ease-in-out infinite;
}

/* FIX PARA TABLET Y CELULARES */
@media (max-width: 1024px) {
  .fondo {
    background-size: 800% 800%;
    /*animation:
      rgbFlowMobile 10s linear infinite,
      liquidWarp 14s ease-in-out infinite;*/
	animation:
	  rgbFlowMobile 50s linear infinite,
	  liquidWarp 70s ease-in-out infinite;
  }

  @keyframes rgbFlowMobile {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 0%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
  }
}