html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #25315f;
}

.portfolio {
  width: 84%;
  max-width: 1400px;
  height: auto;
}

.contenedor {
  position: relative;
  width: 84%;
  max-width: 1400px;
}

/* fondo base */
.fondo {
  width: 100%;
  display: block;
}

/* tu foto a color */
.foto-hover {
  position: absolute;
  width: 30%;
  top: 13%;
  left: 57%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: auto;
}

.contenedor:hover .foto-hover {
  opacity: 1;
}

/* carpetas */
.carpeta {
  position: absolute;
  width: 10%;
  z-index: 3;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carpeta:hover {
  transform: scale(1.08);
}

.c1 { width: 5%; bottom: 92%; left:2%; opacity: 0.0; }
.c2 { width: 5%; bottom: 77%; left:2%; opacity: 0.0; }
.c3 { width: 5%; bottom: 62%; left:2%; opacity: 0.0; }
.c4 { width: 5%; bottom: 92%; left:92%; opacity: 0.0; }
.c5 { width: 5%; bottom: 77%; left:92%; opacity: 0.0; }

/* ================= MODAL IMAGEN GRANDE ================= */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

/* imagen grande */
.modal-img {
  max-width: 80%;
  max-height: 80%;
  position: relative;
  z-index: 1;
}

/* cruz */
.modal .cerrar {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  cursor: pointer;
  z-index: 10000000;
}

/* ================= MODAL CARPETA ================= */

.modal-carpeta {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  z-index: 9999998;
}

/* contenedor de referencia */
.marco-carpeta {
  position: relative;
  display: inline-block;
}

/* imagen de la "computadora" */
.fondo-carpeta {
  max-width: 75vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 1;
}

/* trabajos arriba */
.trabajo {
  position: absolute;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease;
}

.trabajo:hover {
  transform: scale(1.08);
}

/* ❗ TAMAÑOS Y POSICIONES TAL CUAL LOS TENÍAS */

.t1 {
  width: 6%;
  top: 10%;
  left: 74%;
}
.t2 {
  width: 6%;
  top: 10%;
  left: 22%;
}
.t3 {
  width: 6%;
  top: 10%;
  left: 61%;
}
.t4 {
  width: 6%;
  top: 10%;
  left: 48%;
}
.t5 {
  width: 6%;
  top: 10%;
  left: 35%;
}

/* cruz de la carpeta */
.cerrar-carpeta {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  cursor: pointer;
  z-index: 10000001;
}


.t6 {
  width: 5%;
  top: 11%;
  left: 22%;
}
.t7 {
  width: 6%;
  top: 13%;
  left: 61%;
}
.t8 {
  width: 6%;
  top: 13%;
  left: 35%;
}
.t9 {
  width: 6%;
  top: 13%;
  left: 48%;
}

.t10 {
  width: 8%;
  top: 12%;
  left: 21%;
}
.t11 {
  width: 7%;
  top: 11%;
  left: 35%;
}
.t12 {
  width: 8%;
  top: 12%;
  left: 47%;
}
.t13 {
  width: 8%;
  top: 12%;
  left: 60%;
}
.t14 {
  width: 6%;
  top: 10%;
  left: 74%;
}
.t15 {
  width: 6%;
  top: 10%;
  left: 87%;
}
.t16 {
  width: 8%;
  top: 31%;
  left: 21%;
}
.c2-t1 {
  
     width: 5%;
  top: 9%;
  left: 19%;
}
.c2-t2 { 
   width: 5%; 
   top: 9%;
   left: 30%;
 }

.c3-t1 {
   width: 5%; 
   top: 10%;
   left: 32%;
}
.c3-t2 { 
  width: 5%;
  top: 10%;
  left: 20%;
 }