html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
}

.wrap{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}

/* Lienzo con imagen roja de fondo */
.lienzo{
  width: min(700px, 92vw);     /* grande en compu, se adapta en móvil */
  aspect-ratio: 1 / 1;         /* cambia si tu fondo no es cuadrado */
  position: relative;

  background-image: url("https://kappita.neocities.org/Cajooon.png");
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 18px;
  overflow: hidden;
}

/* Overlays (links) encima */
.overlay{
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 10px;         /* opcional */
  transform-origin: center;
  transition: transform 0.15s ease;
}

/* Hover = crece un poquito */
.overlay:hover{
  transform: scale(1.06);      /* prueba 1.03–1.10 */
}

/* Para móvil (al tocar) */
.overlay:active{
  transform: scale(1.03);
}

/* Imagen dentro del overlay */
.overlay img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Posiciones (en porcentajes para responsive) */
.celeste1{
  left: 12%;
  top: 12%;
  width: 28%;
  height: 30%;
  z-index: 2;
}

.azul{
  left: 40%;
  top: 18%;
  width: 30%;
  height: 34%;
  z-index: 3; /* encima */
}

.celeste2{
  left: 52%;
  top: 64%;
  width: 40%;
  height: 22%;
  z-index: 2;
}

/* Texto debajo */
.subtexto{
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: aliceblue;
  opacity: 0.85;
  text-transform: uppercase;
}

/* Oculta el SVG defs */
.svg-container{
  width: 0;
  height: 0;
  overflow: hidden;
}