/* Animaciones */
@keyframes move-izq {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100em);
  }
}
@keyframes move-der {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100em);
  }
}

/* Variables CSS */
:root {
  --primary-bg: #78bbcb;
  --accent-red: #b62a17;
  --accent-dark-red: #6d0019;
}

/* Reset y configuración global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Cooper-Black", "Arial Black", sans-serif;
  user-select: none;
}
@font-face {
  font-family: "Cooper-Black";
  src: url("/assets/COOPBL.ttf");
}

body {
  background-color: var(--primary-bg);
}

/* Título */
.title {
  display: block;
  margin: 2% auto 40px;
  text-align: center;
  font-size: 75px;
}

/* Layout con Grid */
.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 16px;
  width: 60%;
  margin: auto;
  align-items: center;
  height: 71vh;
}


.parent div {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* Definición de áreas en Grid */
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2; 
        position: relative;
        top: -80px;
        left: -60px;}
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 2 / 3 / 5 / 4; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 2 / 5 / 3 / 6; 
        position: relative;
        top: -80px;
        left: -60px;}
.div7 { grid-area: 3 / 1 / 4 / 2;
        position: relative;
        left: -60px; }
.div8 { grid-area: 3 / 2 / 4 / 3;
        position: relative;
        top: -80px;
        left: -60px; }
.div9 { grid-area: 3 / 2 / 4 / 3;
        position: relative;
        bottom: -80px;
        right: -60px; }
.div10 { grid-area: 3 / 4 / 4 / 5;}
.div11 { grid-area: 3 / 5 / 4 / 6;}
.div12 { grid-area: 5 / 1 / 6 / 2; 
         position: relative;
         top: -100px;
         left: -70px;}
.div13 { grid-area: 5 / 1 / 6 / 2; 
         position: relative;
         top: -200px;
         right: -70px;}
.div14 { grid-area: 5 / 2 / 6 / 3; 
          position: relative;
          top: -100px;
          left: -70px;}
.div15 { grid-area: 5 / 4 / 6 / 5;
         position: relative;
         top: -110px;
         left: -60px; }
.div16 { grid-area: 5 / 5 / 6 / 6;
         position: relative;
         top: -150px;
         left: -60px; }

/* Cortinas */
.cortina {
  position: fixed;
  width: 50vw;
  height: 100vh;
  top: 0;
  background: repeating-linear-gradient(
    to right,
    var(--accent-red) 0%,
    var(--accent-red) 5%,
    var(--accent-dark-red) 5%,
    var(--accent-dark-red) 10%
  );
  z-index: 10;
}

.cortina-der {
  left: 50%;
  display: flex;
  justify-content: left;
  align-items: center;
  animation: move-der 3s 1.5s forwards;
}

.cortina-izq {
  display: flex;
  justify-content: right;
  align-items: center;
  animation: move-izq 3s 1.5s forwards;
}

.cortina-izq h1, .cortina-der h1 {
  position: relative;
  top: 35%;
  font-size: 95px;
  color: white;
  -webkit-text-stroke: 4px black;
  grid-area: [fila de inicio] / [columna de inicio] / [fila de fin] / [columna de fin];

  
}
.cortina-izq h1 { left: 7em; }
.cortina-der h1 { right: 7em; }


grid-area: [fila de inicio] / [columna de inicio] / [fila de fin] / [columna de fin];