/* ===== BASE ===== */

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

body{

  background:#111;

  color:#bdbdbd;

  font-family:'Cormorant Garamond', serif;

  position:relative;

  min-height:100vh;

  padding:80px 20px;

  overflow-x:hidden;

  animation:
    vhsMove 6s infinite,
    flickerScreen 4s infinite;
}

/* ===== FONDO ===== */

body::before{

  content:"";

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    linear-gradient(
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.45)
    ),
    url('../imagen/ab82a77008198b3e5b8fe197bfae249e.jpg');

  background-position:center;

  background-size:cover;

  background-repeat:no-repeat;

  opacity:0.3;

  filter:
    grayscale(100%)
    contrast(120%)
    brightness(0.8);

  z-index:-2;
}

/* ===== VHS ===== */

body::after{

  content:"";

  position:fixed;

  width:100%;
  height:100%;

  top:0;
  left:0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 3px
    );

  pointer-events:none;

  z-index:-1;
}

/* ===== CONTENEDOR ===== */

.legal-container{

  max-width:950px;

  margin:auto;

  border:1px solid rgba(255,255,255,0.08);

  background:rgba(10,10,10,0.92);

  padding:60px;

  box-shadow:
    0 0 40px rgba(0,0,0,0.5);
}

/* ===== TITULO ===== */

.legal-title{

  font-family:'Inconsolata', monospace;

  font-size:2.7rem;

  letter-spacing:4px;

  color:#b0b0b0;

  margin-bottom:10px;

  position:relative;

  display:inline-block;

  animation:glitchMain 3s infinite;
}

/* CAPAS GLITCH */

.legal-title::before,
.legal-title::after{

  content:attr(data-text);

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  pointer-events:none;
}

.legal-title::before{

  left:-2px;

  color:#fff;

  opacity:0.15;
}

.legal-title::after{

  left:2px;

  color:#5a0000;

  opacity:0.25;
}

/* ===== SUBTITLE ===== */

.legal-subtitle{

  font-family:'Inconsolata', monospace;

  font-size:0.75rem;

  letter-spacing:2px;

  color:#666;

  margin-bottom:50px;

  opacity:0.7;
}

/* ===== CONTENIDO ===== */

.legal-content{

  line-height:1.9;

  color:#9d9d9d;

  font-size:1rem;
}

/* ===== TITULOS ===== */

.legal-content h2{

  font-family:'Inconsolata', monospace;

  font-size:1rem;

  letter-spacing:2px;

  color:#b5b5b5;

  margin-top:45px;

  margin-bottom:18px;

  border-left:1px solid #5a0000;

  padding-left:12px;
}

.legal-content h3{

  font-family:'Inconsolata', monospace;

  font-size:0.9rem;

  letter-spacing:1px;

  color:#8d8d8d;

  margin-top:30px;

  margin-bottom:12px;
}

/* ===== TEXTO ===== */

.legal-content p{

  margin-bottom:20px;

  opacity:0.9;
}

/* ===== LISTAS ===== */

.legal-content ul{

  margin-left:25px;

  margin-bottom:25px;
}

.legal-content li{

  margin-bottom:10px;

  color:#888;
}

/* ===== TABLAS ===== */

table{

  width:100%;

  border-collapse:collapse;

  margin-top:25px;

  margin-bottom:30px;
}

th{

  border:1px solid rgba(255,255,255,0.08);

  padding:14px;

  font-family:'Inconsolata', monospace;

  color:#aaa;

  background:rgba(30,30,30,0.5);
}

td{

  border:1px solid rgba(255,255,255,0.05);

  padding:14px;

  color:#777;
}

/* ===== LINK VOLVER ===== */

.back-link{

  margin-top:60px;

  text-align:center;
}

.back-link a{

  text-decoration:none;

  color:#666 !important;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  transition:0.3s;
}

.back-link a:visited{

  color:#666 !important;
}

.back-link a:hover{

  color:#aaa !important;

  letter-spacing:3px;
}

/* ===== GLITCH ===== */

@keyframes glitchMain{

  0%{
    transform:translate(0);
  }

  20%{
    transform:translate(-2px,1px);
  }

  40%{
    transform:translate(2px,-1px);
  }

  60%{
    transform:translate(-1px,0);
  }

  80%{
    transform:translate(1px,1px);
  }

  100%{
    transform:translate(0);
  }
}

/* ===== VHS ===== */

@keyframes vhsMove{

  0%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(1px,-1px);
  }

  100%{
    transform:translate(0,0);
  }
}

@keyframes flickerScreen{

  0%,100%{
    opacity:1;
  }

  50%{
    opacity:0.985;
  }
}

/* ===== RESPONSIVE ===== */

@media(max-width:768px){

  .legal-container{

    padding:35px 25px;
  }

  .legal-title{

    font-size:2rem;
  }

  table{

    font-size:0.8rem;
  }

}